update syntax

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 {
+  // ...
 }
 ```
 

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;
 }