From 7bd7b421b8970e014b30a2f0c78dd3e99743abd1 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 24 May 2021 09:15:09 -0400
Subject: [PATCH] update syntax

---
 docs/resources/contributing.md | 25 +++++++++++++++++--------
 scripts/create-component.cjs   | 10 +++++-----
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/docs/resources/contributing.md b/docs/resources/contributing.md
index 8063fc6e..3cdeac72 100644
--- a/docs/resources/contributing.md
+++ b/docs/resources/contributing.md
@@ -188,16 +188,25 @@ This convention avoids the problem of browsers lowercasing attributes, causing s
 
 ### CSS Custom Properties
 
-To expose custom properties as part of a component's API, scope them to the `:host` block and use the following syntax for comments so they appear in the generated docs. Do not use the `--sl-` prefix, as that is reserved for design tokens that live in the global scope.
+To expose custom properties as part of a component's API, scope them to the `:host` block.
 
-```css
-/**
- * @prop --color: The component's text color.
- * @prop --background-color: The component's background color. 
- */
+```scss
 :host {
-  --color: white;
-  --background-color: tomato;
+  --color: var(--sl-color-primary-500);
+  --background-color: var(--sl-color-gray-100);
+}
+```
+
+Then use the following syntax for comments so they appear in the generated docs. Do not use the `--sl-` prefix, as that is reserved for design tokens that live in the global scope.
+
+```js
+/**
+ * @customProperty --color: The component's text color.
+ * @customProperty --background-color: The component's background color. 
+ */
+@customElement('sl-example')
+export default class SlExample {
+  // ...
 }
 ```
 
diff --git a/scripts/create-component.cjs b/scripts/create-component.cjs
index 2d824ffa..9fc6cf5c 100644
--- a/scripts/create-component.cjs
+++ b/scripts/create-component.cjs
@@ -47,8 +47,11 @@ import styles from 'sass:./${tagNameWithoutPrefix}.scss';
  * @slot - The default slot.
  * @slot example - A named slot called example.
  *
- * @part base - The component's base wrapper.
- * @part example - Another part called example.
+ * @part example - An example part.
+ *
+ * @customProperty example - An example custom property
+ *
+ * @animation example - An example animation.
  */
 @customElement('${tagName}')
 export default class ${className} extends LitElement {
@@ -75,9 +78,6 @@ const stylesFile = `src/components/${tagNameWithoutPrefix}/${tagNameWithoutPrefi
 const stylesSource = `
 @use '../../styles/component';
 
-/**
- * @prop --custom-property-here: Description here
- */
 :host {
   display: block;
 }