Add documentation for design tokens

docs/.vitepress/config.mts

@@ -59,9 +59,14 @@ export default withMermaid({
               text: 'Styling',
               collapsed: false,
               items: [
-                { text: 'Styles', link: '/guide/styling/styles' },
                 { text: 'Tables', link: '/guide/styling/tables' },
                 { text: 'Colors', link: '/guide/styling/colors' },
+                { text: 'Spacing', link: '/guide/styling/spacing' },
+                { text: 'Typography', link: '/guide/styling/typography' },
+                { text: 'Shadows', link: '/guide/styling/shadows' },
+                { text: 'Border Radius', link: '/guide/styling/border-radius' },
+                { text: 'Transitions', link: '/guide/styling/transitions' },
+                { text: 'Z-Index', link: '/guide/styling/z-index' },
                 { text: 'TailwindCSS', link: '/guide/styling/tailwind' },
               ],
             },

docs/.vitepress/theme/style.css

@@ -37,8 +37,8 @@
   --vp-button-brand-active-bg: var(--vp-button-brand-bg);
 }
 
-/* overwrite rounded design to follow six design */
-* {
+/* overwrite rounded design to follow six design (apart from the examples) */
+*:not(.example) {
   border-radius: 0 !important;
 }
 

docs/guide/styling/border-radius.md

@@ -0,0 +1,13 @@
+# Border Radius
+
+The Six Webcomponents library uses a set of border radius tokens to create consistent rounded
+corners throughout the interface.
+
+| CSS Variable                  | Value  | Preview                                                                                                                              |
+| ----------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `--six-border-radius-small`   | 0rem   | <div class="example" style="width: 4rem; height: 2rem; background-color: var(--six-color-action-500); border-radius: 0rem;"></div>   |
+| `--six-border-radius-medium`  | 0rem   | <div class="example" style="width: 4rem; height: 2rem; background-color: var(--six-color-action-500); border-radius: 0rem;"></div>   |
+| `--six-border-radius-large`   | 0.5rem | <div class="example" style="width: 4rem; height: 2rem; background-color: var(--six-color-action-500); border-radius: 0.5rem;"></div> |
+| `--six-border-radius-x-large` | 1rem   | <div class="example" style="width: 4rem; height: 2rem; background-color: var(--six-color-action-500); border-radius: 1rem;"></div>   |
+| `--six-border-radius-circle`  | 50%    | <div class="example" style="width: 2rem; height: 2rem; background-color: var(--six-color-action-500); border-radius: 50%;"></div>    |
+| `--six-border-radius-pill`    | 9999px | <div class="example" style="width: 4rem; height: 2rem; background-color: var(--six-color-action-500); border-radius: 9999px;"></div> |

docs/guide/styling/height.md

@@ -0,0 +1,21 @@
+# Height
+
+The Six Webcomponents library includes height tokens for consistent component sizing.
+
+| CSS Variable          | Value           | Preview                                                                                           |
+| --------------------- | --------------- | ------------------------------------------------------------------------------------------------- |
+| `--six-height-small`  | 1.875rem (30px) | <div style="height: 1.875rem; width: 4rem; background-color: var(--six-color-action-500);"></div> |
+| `--six-height-medium` | 2.5rem (40px)   | <div style="height: 2.5rem; width: 4rem; background-color: var(--six-color-action-500);"></div>   |
+| `--six-height-large`  | 3.125rem (50px) | <div style="height: 3.125rem; width: 4rem; background-color: var(--six-color-action-500);"></div> |
+
+## Example Usage
+
+```css
+.button-small {
+  height: var(--six-height-small);
+}
+
+.input-medium {
+  height: var(--six-height-medium);
+}
+```

docs/guide/styling/shadows.md

@@ -0,0 +1,27 @@
+# Shadows
+
+The Six Webcomponents library uses a set of shadow tokens to create depth and hierarchy within the
+interface.
+
+| CSS Variable              | Value                                                                | Preview                                                                                                                                                                       |
+| ------------------------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--six-shadow-small`      | 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)        | <div style="width: 6rem; height: 3rem; background-color: white; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); border-radius: 4px;"></div>        |
+| `--six-shadow-medium`     | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)   | <div style="width: 6rem; height: 3rem; background-color: white; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); border-radius: 4px;"></div>   |
+| `--six-shadow-medium-top` | 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1) | <div style="width: 6rem; height: 3rem; background-color: white; box-shadow: 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1); border-radius: 4px;"></div> |
+| `--six-shadow-large`      | 0 25px 50px -12px rgb(0 0 0 / 0.25)                                  | <div style="width: 6rem; height: 3rem; background-color: white; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); border-radius: 4px;"></div>                                  |
+
+## Example Usage
+
+```css
+.card {
+  box-shadow: var(--six-shadow-small);
+}
+
+.card:hover {
+  box-shadow: var(--six-shadow-medium);
+}
+
+.dropdown {
+  box-shadow: var(--six-shadow-large);
+}
+```

docs/guide/styling/spacing.md

@@ -0,0 +1,27 @@
+# Spacing
+
+The Six Webcomponents library uses a consistent spacing scale to maintain visual harmony throughout
+the interface. These spacing tokens can be used for margins, paddings, gaps, and other spatial
+relationships.
+
+| CSS Variable               | Value          | Preview                                                                                           |
+| -------------------------- | -------------- | ------------------------------------------------------------------------------------------------- |
+| `--six-spacing-xxx-small`  | 0.125rem (2px) | <div style="width: 0.125rem; height: 1rem; background-color: var(--six-color-action-500);"></div> |
+| `--six-spacing-xx-small`   | 0.25rem (4px)  | <div style="width: 0.25rem; height: 1rem; background-color: var(--six-color-action-500);"></div>  |
+| `--six-spacing-x-small`    | 0.5rem (8px)   | <div style="width: 0.5rem; height: 1rem; background-color: var(--six-color-action-500);"></div>   |
+| `--six-spacing-small`      | 0.75rem (12px) | <div style="width: 0.75rem; height: 1rem; background-color: var(--six-color-action-500);"></div>  |
+| `--six-spacing-medium`     | 1rem (16px)    | <div style="width: 1rem; height: 1rem; background-color: var(--six-color-action-500);"></div>     |
+| `--six-spacing-large`      | 1.25rem (20px) | <div style="width: 1.25rem; height: 1rem; background-color: var(--six-color-action-500);"></div>  |
+| `--six-spacing-x-large`    | 1.75rem (28px) | <div style="width: 1.75rem; height: 1rem; background-color: var(--six-color-action-500);"></div>  |
+| `--six-spacing-xx-large`   | 2.25rem (36px) | <div style="width: 2.25rem; height: 1rem; background-color: var(--six-color-action-500);"></div>  |
+| `--six-spacing-xxx-large`  | 3rem (48px)    | <div style="width: 3rem; height: 1rem; background-color: var(--six-color-action-500);"></div>     |
+| `--six-spacing-xxxx-large` | 4.5rem (72px)  | <div style="width: 4.5rem; height: 1rem; background-color: var(--six-color-action-500);"></div>   |
+
+## Example Usage
+
+```css
+.my-element {
+  margin-bottom: var(--six-spacing-medium);
+  padding: var(--six-spacing-small);
+}
+```

docs/guide/styling/transitions.md

@@ -0,0 +1,106 @@
+# Transitions
+
+The Six Webcomponents library uses a set of transition tokens to create smooth and consistent
+animations throughout the interface.
+
+| CSS Variable              | Value  | Description                                     |
+| ------------------------- | ------ | ----------------------------------------------- |
+| `--six-transition-x-slow` | 1000ms | Extra slow transitions for major layout changes |
+| `--six-transition-slow`   | 500ms  | Slow transitions for larger UI elements         |
+| `--six-transition-medium` | 250ms  | Medium transitions for standard elements        |
+| `--six-transition-fast`   | 150ms  | Fast transitions for small UI elements          |
+| `--six-transition-x-fast` | 50ms   | Extra fast transitions for micro-interactions   |
+
+<style>
+  .transition-demo {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .transition-box {
+    width: 50px;
+    height: 50px;
+    background-color: #d4d4d4;
+    margin-right: 1rem;
+    cursor: pointer;
+  }
+
+  .transition-label {
+    font-family: monospace;
+    font-size: 0.9rem;
+  }
+
+  .x-slow {
+    transition: background-color 1000ms;
+  }
+
+  .slow {
+    transition: background-color 500ms;
+  }
+
+  .medium {
+    transition: background-color 250ms;
+  }
+
+  .fast {
+    transition: background-color 150ms;
+  }
+
+  .x-fast {
+    transition: background-color 50ms;
+  }
+
+  .transition-box:hover {
+    background-color: #2563eb;
+  }
+</style>
+
+## Hover over each box to see the transition speed
+
+<div class="transition-demo">
+  <div class="transition-box x-slow"></div>
+  <div class="transition-label">X-Slow: 1000ms</div>
+</div>
+
+<div class="transition-demo">
+  <div class="transition-box slow"></div>
+  <div class="transition-label">Slow: 500ms</div>
+</div>
+
+<div class="transition-demo">
+  <div class="transition-box medium"></div>
+  <div class="transition-label">Medium: 250ms</div>
+</div>
+
+<div class="transition-demo">
+  <div class="transition-box fast"></div>
+  <div class="transition-label">Fast: 150ms</div>
+</div>
+
+<div class="transition-demo">
+  <div class="transition-box x-fast"></div>
+  <div class="transition-label">X-Fast: 50ms</div>
+</div>
+
+## Usage Example
+
+```css
+.button {
+  background-color: var(--six-color-web-rock-100);
+  transition: background-color var(--six-transition-fast);
+}
+
+.button:hover {
+  background-color: var(--six-color-web-rock-200);
+}
+
+.panel {
+  transform: translateY(-100%);
+  transition: transform var(--six-transition-medium);
+}
+
+.panel.open {
+  transform: translateY(0);
+}
+```