Feature/etch 390 document css variables

.eslintrc.cjs

@@ -1,10 +1,6 @@
 module.exports = {
   plugins: ['lit-a11y'],
-  extends: [
-    '@etchteam',
-    'plugin:lit-a11y/recommended',
-    'plugin:storybook/recommended',
-  ],
+  extends: ['@etchteam', 'plugin:lit-a11y/recommended'],
   rules: {
     '@typescript-eslint/no-namespace': [
       'error',

.storybook/main.ts

@@ -1,4 +1,4 @@
 import type { StorybookConfig } from '@storybook/web-components-vite';
 
 const config: StorybookConfig = {
   stories: [
@@ -9,7 +9,8 @@
   ],
   addons: [
     '@storybook/addon-links',
-    '@storybook/addon-essentials'
+    '@storybook/addon-essentials',
+    '@storybook/addon-mdx-gfm'
   ],
   framework: {
     name: '@storybook/web-components-vite',

.storybook/preview.ts

@@ -1,4 +1,4 @@
 import type { Preview } from '@storybook/web-components'
 
 // Vite builder doesn't like the glob import in diamond-ui.css
 // importing the individual css files here instead.
@@ -6,6 +6,7 @@
 import '../styles/tokens.css';
 import '../styles/base.css';
 import '../styles/themes.css';
+import '../styles/docs/docs.css';
 import './styles.css'; // Storybook style overrides
 // @ts-ignore-next-line
 import.meta.glob('../components/**/*.css', { eager: true });

.storybook/styles.css

@@ -1,3 +1,7 @@
 .docblock-argstable-body label {
   min-height: auto;
 }
+
+.sbdocs p {
+  max-width: 30rem;
+}

components/composition/Enter/Enter.css

@@ -33,11 +33,11 @@
 }
 
 diamond-enter {
-  animation-duration: var(--diamond-transition-enter-duration);
+  animation-duration: var(--diamond-transition-duration-enter);
   animation-fill-mode: forwards;
   animation-iteration-count: 1;
   animation-name: var(--diamond-transition-enter-animation);
-  animation-timing-function: var(--diamond-transition-enter-timing);
+  animation-timing-function: var(--diamond-transition-timing-enter);
   display: block;
   opacity: 0;
 
@@ -46,7 +46,7 @@ diamond-enter {
   }
 
   &[type='boing'] {
-    animation-timing-function: var(--diamond-transition-enter-timing-boing);
+    animation-timing-function: var(--diamond-transition-timing-boing);
   }
 
   &[fill] {

components/composition/FormGroup/FormGroup.stories.ts

@@ -40,14 +40,15 @@ export const ComposingElements: StoryObj = {
         <diamond-grid-item>
           <svg
             viewBox="0 0 24 24"
-            stroke="currentColor"
-            fill="none"
+            stroke="none"
+            fill="currentColor"
             width="24"
             height="24"
             aria-label="A random icon for example placement"
           >
+            >
             <path
-              d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+              d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
             />
           </svg>
         </diamond-grid-item>

docs/Theming.stories.mdx → docs/Theming.mdx

@@ -1,9 +1,7 @@
-import { Meta, Source, Canvas } from '@storybook/addon-docs';
+import { Meta, Source, Canvas } from '@storybook/blocks';
 import theme from '../styles/tokens/theme.css?inline';
 import themes from '../styles/themes.css?inline';
-import '../components/composition/Grid/Grid'
-import '../components/composition/Grid/GridItem'
-import '../components/canvas/Card/Card'
+import * as ThemingStories from './recipes/Theming.stories.ts'
 
 <Meta title="Docs/Theming" />
 
@@ -31,37 +29,7 @@ Components that support theming will apply the base theme tokens, such as settin
 
 Here is an example of 3 cards wrapped in the demo theme classes, which then apply the theme tokens.
 
-<Canvas>
-  <diamond-grid wrap="wrap">
-    <diamond-grid-item small-mobile="12" tablet="4">
-      <diamond-card class="diamond-theme-light">
-        <h3>Card title</h3>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </diamond-card>
-    </diamond-grid-item>
-    <diamond-grid-item small-mobile="12" tablet="4">
-      <diamond-card class="diamond-theme-medium">
-        <h3>Card title</h3>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </diamond-card>
-    </diamond-grid-item>
-    <diamond-grid-item small-mobile="12" tablet="4">
-      <diamond-card class="diamond-theme-dark">
-        <h3>Card title</h3>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </diamond-card>
-    </diamond-grid-item>
-  </diamond-grid>
-</Canvas>
+<Canvas of={ThemingStories.Theming} />
 
 ## Recommended themes
 

docs/recipes/Theming.stories.ts

@@ -0,0 +1,44 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import '../../components/composition/Grid/Grid';
+import '../../components/composition/Grid/GridItem';
+import '../../components/canvas/Card/Card';
+
+export default {
+  title: 'Recipes/Theming',
+};
+
+export const Theming: StoryObj = {
+  render: () => html`
+    <diamond-grid wrap="wrap">
+      <diamond-grid-item small-mobile="12" tablet="4">
+        <diamond-card border class="diamond-theme-light">
+          <h3>Card title</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </diamond-card>
+      </diamond-grid-item>
+      <diamond-grid-item small-mobile="12" tablet="4">
+        <diamond-card border class="diamond-theme-medium">
+          <h3>Card title</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </diamond-card>
+      </diamond-grid-item>
+      <diamond-grid-item small-mobile="12" tablet="4">
+        <diamond-card border class="diamond-theme-dark">
+          <h3>Card title</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </diamond-card>
+      </diamond-grid-item>
+    </diamond-grid>
+  `,
+};

docs/recipes/Typography.stories.ts

@@ -0,0 +1,52 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+export default {
+  title: 'Recipes/Typography',
+};
+
+export const Headings: StoryObj = {
+  render: () => html`
+    <h1>Heading size 1</h1>
+
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula a
+      dui tristique blandit. Vestibulum pellentesque tellus ac lorem bibendum
+      ornare.
+    </p>
+
+    <h2>Heading size 2</h2>
+
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula a
+      dui tristique blandit. Vestibulum pellentesque tellus ac lorem bibendum
+      ornare.
+    </p>
+
+    <h3>Heading size 3</h3>
+
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula a
+      dui tristique blandit. Vestibulum pellentesque tellus ac lorem bibendum
+      ornare.
+    </p>
+
+    <h4>Heading size 4</h4>
+
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula a
+      dui tristique blandit. Vestibulum pellentesque tellus ac lorem bibendum
+      ornare.
+    </p>
+  `,
+};
+
+export const FontSizes: StoryObj = {
+  render: () => html`
+    ${['xxxl', 'xxl', 'xl', 'lg', 'md', 'default', 'sm', 'xs'].map(
+      (size) => html`
+        <p class="diamond-text-size-${size}">This text is size ${size}.</p>
+      `,
+    )}
+  `,
+};

docs/tokens/Border.mdx

@@ -0,0 +1,13 @@
+import { Meta, Source, Canvas } from '@storybook/blocks';
+import code from '../../styles/tokens/border.css?inline';
+import * as ThemingStories from '../recipes/Theming.stories.ts'
+
+<Meta title="Docs/Tokens/Border" />
+
+# Border
+
+Diamond borders inherit the colour from the theme style.
+
+<Source code={code} language='css' />
+
+<Canvas of={ThemingStories.Theming} />

docs/tokens/Button.mdx

@@ -0,0 +1,17 @@
+import { Meta, Source, Canvas } from '@storybook/blocks';
+import code from '../../styles/tokens/button.css?inline';
+import * as ButtonStories from '../../components/control/Button/Button.stories.ts'
+
+<Meta title="Docs/Tokens/Button" />
+
+# Button
+
+<Source code={code} language='css' />
+
+<Canvas of={ButtonStories.Button} />
+
+<Canvas of={ButtonStories.PrimaryButton} />
+
+<Canvas of={ButtonStories.SecondaryButton} />
+
+<Canvas of={ButtonStories.TextButton} />

docs/tokens/Color.mdx

@@ -0,0 +1,43 @@
+import { Meta, Source } from '@storybook/blocks';
+import code from '../../styles/tokens/color.css?inline';
+
+<Meta title="Docs/Tokens/Color" />
+
+# Color
+
+Diamond components are unbranded. Because of this, the colour palette is very limited to provide the minimum functionality and allow for easier white labelling.
+
+<Source code={code} language='css' />
+
+<diamond-grid class="diamond-spacing-bottom-lg" wrap="wrap">
+  {['white', 'black'].map((color) => (
+    <diamond-grid-item small-mobile="12" tablet="6" small-desktop="4">
+    <docs-swatch style={{ '--swatch-color': `var(--diamond-color-${color})` }}>
+      <h4>{color}</h4>
+      <code>--diamond-color-{color}</code>
+    </docs-swatch>
+  </diamond-grid-item>
+  ))}
+</diamond-grid>
+
+<diamond-grid class="diamond-spacing-bottom-lg" wrap="wrap">
+  {['grey-100', 'grey-200', 'grey-300', 'grey-400', 'grey-500', 'grey-600', 'grey-700', 'grey-800', 'grey-900'].map((color) => (
+    <diamond-grid-item small-mobile="12" tablet="6" small-desktop="4">
+      <docs-swatch style={{ '--swatch-color': `var(--diamond-color-${color})` }}>
+        <h4>{color}</h4>
+        <code>--diamond-color-{color}</code>
+      </docs-swatch>
+    </diamond-grid-item>
+  ))}
+</diamond-grid>
+
+<diamond-grid class="diamond-spacing-bottom-lg" wrap="wrap">
+  {['green-100', 'red-100'].map((color) => (
+    <diamond-grid-item small-mobile="12" tablet="6" small-desktop="4">
+      <docs-swatch style={{ '--swatch-color': `var(--diamond-color-${color})` }}>
+        <h4>{color}</h4>
+        <code>--diamond-color-{color}</code>
+      </docs-swatch>
+    </diamond-grid-item>
+  ))}
+</diamond-grid>

docs/tokens/Font.mdx

@@ -0,0 +1,15 @@
+import { Meta, Source, Canvas } from '@storybook/blocks';
+import code from '../../styles/tokens/font.css?inline';
+import * as TypographyStories from '../recipes/Typography.stories.ts'
+
+<Meta title="Docs/Tokens/Font" />
+
+# Font
+
+Diamond has font sizes from xs to xxxl and h1 to h4. If you end up past h4, that's often a bad sign.
+
+<Source code={code} language='css' />
+
+<Canvas of={TypographyStories.Headings} />
+
+<Canvas of={TypographyStories.FontSizes} />

docs/tokens/Input.mdx

@@ -0,0 +1,21 @@
+import { Meta, Source, Canvas } from '@storybook/blocks';
+import code from '../../styles/tokens/input.css?inline';
+import * as FormGroupStories from '../../components/composition/FormGroup/FormGroup.stories.ts';
+import * as InputStories from '../../components/control/Input/Input.stories.ts';
+import * as RadioCheckboxStories from '../../components/control/RadioCheckbox/RadioCheckbox.stories.ts';
+
+<Meta title="Docs/Tokens/Input" />
+
+# Input
+
+<Source code={code} language='css' />
+
+<Canvas of={FormGroupStories.FormGroup} />
+
+<Canvas of={InputStories.Select} />
+
+<Canvas of={InputStories.InputStates} />
+
+<Canvas of={RadioCheckboxStories.Radio} />
+
+<Canvas of={RadioCheckboxStories.Checkbox} />

docs/tokens/Label.mdx

@@ -0,0 +1,11 @@
+import { Meta, Source, Canvas } from '@storybook/blocks';
+import code from '../../styles/tokens/label.css?inline';
+import * as FormGroupStories from '../../components/composition/FormGroup/FormGroup.stories.ts';
+
+<Meta title="Docs/Tokens/Label" />
+
+# Label
+
+<Source code={code} language='css' />
+
+<Canvas of={FormGroupStories.FormGroup} />

docs/tokens/Radius.mdx

@@ -0,0 +1,25 @@
+import { Meta, Source } from '@storybook/blocks';
+import code from '../../styles/tokens/radius.css?inline';
+
+<Meta title="Docs/Tokens/Radius" />
+
+# Radius
+
+There are 4 radii from xs to lg.
+
+<Source code={code} language='css' />
+
+<diamond-grid>
+  <diamond-grid-item small-mobile="6" tablet="3">
+    <docs-border size="xs">xs</docs-border>
+  </diamond-grid-item>
+  <diamond-grid-item small-mobile="6" tablet="3">
+    <docs-border size="sm">sm</docs-border>
+  </diamond-grid-item>
+  <diamond-grid-item small-mobile="6" tablet="3">
+    <docs-border size="md">md</docs-border>
+  </diamond-grid-item>
+  <diamond-grid-item small-mobile="6" tablet="3">
+    <docs-border size="lg">lg</docs-border>
+  </diamond-grid-item>
+</diamond-grid>