diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index adcd8557b..2704dd3f0 100644 --- a/docs/.vitepress/config.mts +++ b/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' }, ], }, diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index 19e04baee..fc70f86dd 100644 --- a/docs/.vitepress/theme/style.css +++ b/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; } diff --git a/docs/guide/styling/border-radius.md b/docs/guide/styling/border-radius.md new file mode 100644 index 000000000..2f8d88bdf --- /dev/null +++ b/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 |
| +| `--six-border-radius-medium` | 0rem |
| +| `--six-border-radius-large` | 0.5rem |
| +| `--six-border-radius-x-large` | 1rem |
| +| `--six-border-radius-circle` | 50% |
| +| `--six-border-radius-pill` | 9999px |
| diff --git a/docs/guide/styling/colors.md b/docs/guide/styling/colors.md index b5f1aa15c..fdd303526 100644 --- a/docs/guide/styling/colors.md +++ b/docs/guide/styling/colors.md @@ -1,40 +1,274 @@ # Colors -The Six Webcomponents are using the brand colors from SIX underneath. In case you want to use those -colors directly you can do so by using the following listed css variables for the corresponding -[colors](https://github.com/six-group/six-webcomponents/blob/main/libraries/ui-library/src/global/base/colors.css). +The Six Webcomponents library uses a comprehensive color system that includes brand colors, semantic +status colors, and neutral tones. -## Overview of CSS Variables +## Brand Colors -| CSS Variable | Color | Hex Code | -| -------------------------------------------------------- | ------------------------------------------------------------------------ | --------- | -| `--six-color-red` | ● | `#de3919` | -| `--six-color-black` | ● | `#000` | -| `--six-color-white` | ● | `#fff` | -| `--six-color-indigo` | ● | `#5c1bb8` | -| `--six-color-web-rock-900` | ● | `#262626` | -| `--six-color-web-rock-800` | ● | `#484848` | -| `--six-color-web-rock-700` | ● | `#676767` | -| `--six-color-web-rock-600` | ● | `#7b7b7b` | -| `--six-color-web-rock-500` | ● | `#a5a5a5` | -| `--six-color-web-rock-400` | ● | `#c3c3c3` | -| `--six-color-web-rock-300` | ● | `#e5e5e5` | -| `--six-color-web-rock-200` | ● | `#f1f1f1` | -| `--six-color-web-rock-100` | ● | `#f6f6f6` | -| `--six-color-web-rock-50` | ● | `#fbfbfb` | -| `--six-color-clay-200` | ● | `#ada398` | -| `--six-color-clay-50` | ● | `#ebe8e7` | -| `--six-color-danger-900` | ● | `#c52c0f` | -| `--six-color-danger-800` | ● | `#de3919` | -| `--six-color-danger-light-to-be-defined` | ● | `#f58c78` | -| `--six-color-warning-800` | ● | `#ef9f25` | -| `--six-color-warning-700` | ● | `#f2b72c` | -| `--six-color-warning-light-to-be-defined` | ● | `#f9deb4` | -| `--six-color-success-600` | ● | `#58d200` | -| `--six-color-success-500` | ● | `#6ae300` | -| `--six-color-success-light-to-be-defined` | ● | `#aaff6c` | -| `--six-color-action-600` | ● | `#1f87e5` | -| `--six-color-action-500` | ● | `#2196f3` | -| `--six-color-action-light-to-be-defined` | ● | `#a8d0f5` | -| `--six-color-inactive` | ● | `#c3c3c3` | -| `--six-focus-ring-color` based on `six-color-action-600` | ● | `#1f87e5` | +
+
Red
+
+
--six-color-red
+
+ +
+
Indigo
+
+
--six-color-indigo
+
+ +## Color Palettes + +
+
+
+ + Web Rock + +
+ + --six-color-web-rock-{n} + +
+
+
+
+
900
+
#262626
+
+
+
+
800
+
#484848
+
+
+
+
700
+
#676767
+
+
+
+
600
+
#7b7b7b
+
+
+
+
500
+
#a5a5a5
+
+
+
+
400
+
#c3c3c3
+
+
+
+
300
+
#e5e5e5
+
+
+
+
200
+
#f1f1f1
+
+
+
+
100
+
#f6f6f6
+
+
+
+
50
+
#fbfbfb
+
+
+
+
+
+
+ + Clay + +
+ + --six-color-clay-{n} + +
+
+
+
+
200
+
#ada398
+
+
+
+
50
+
#ebe8e7
+
+
+
+
+
+
+ + Action + +
+ + --six-color-action-{n} + +
+
+
+
+
600
+
#1f87e5
+
+
+
+
500
+
#2196f3
+
+
+
+
Light
+
#a8d0f5
+
+
+
+
+
+
+ + Danger + +
+ + --six-color-danger-{n} + +
+
+
+
+
900
+
#c52c0f
+
+
+
+
800
+
#de3919
+
+
+
+
Light
+
#f58c78
+
+
+
+
+
+
+ + Warning + +
+ + --six-color-warning-{n} + +
+
+
+
+
800
+
#ef9f25
+
+
+
+
700
+
#f2b72c
+
+
+
+
Light
+
#f9deb4
+
+
+
+
+
+
+ + Success + +
+ + --six-color-success-{n} + +
+
+
+
+
600
+
#58d200
+
+
+
+
500
+
#6ae300
+
+
+
+
Light
+
#aaff6c
+
+
+
+ +
+
+
+ + Black & White + +
+ + --six-color-black/white + +
+
+
+
+
Black
+
#000000
+
+
+
+
White
+
#ffffff
+
+
+
+
+
+
+ + Special Purpose + +
+ + --six-color-* + +
+
+
+
+
Inactive
+
#c3c3c3
+
+
+
+
Focus
+
#1f87e5
+
+
+
diff --git a/docs/guide/styling/height.md b/docs/guide/styling/height.md new file mode 100644 index 000000000..2798041cc --- /dev/null +++ b/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) |
| +| `--six-height-medium` | 2.5rem (40px) |
| +| `--six-height-large` | 3.125rem (50px) |
| + +## Example Usage + +```css +.button-small { + height: var(--six-height-small); +} + +.input-medium { + height: var(--six-height-medium); +} +``` diff --git a/docs/guide/styling/shadows.md b/docs/guide/styling/shadows.md new file mode 100644 index 000000000..021588a08 --- /dev/null +++ b/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) |
| +| `--six-shadow-medium` | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) |
| +| `--six-shadow-medium-top` | 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1) |
| +| `--six-shadow-large` | 0 25px 50px -12px rgb(0 0 0 / 0.25) |
| + +## 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); +} +``` diff --git a/docs/guide/styling/spacing.md b/docs/guide/styling/spacing.md new file mode 100644 index 000000000..482723629 --- /dev/null +++ b/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) |
| +| `--six-spacing-xx-small` | 0.25rem (4px) |
| +| `--six-spacing-x-small` | 0.5rem (8px) |
| +| `--six-spacing-small` | 0.75rem (12px) |
| +| `--six-spacing-medium` | 1rem (16px) |
| +| `--six-spacing-large` | 1.25rem (20px) |
| +| `--six-spacing-x-large` | 1.75rem (28px) |
| +| `--six-spacing-xx-large` | 2.25rem (36px) |
| +| `--six-spacing-xxx-large` | 3rem (48px) |
| +| `--six-spacing-xxxx-large` | 4.5rem (72px) |
| + +## Example Usage + +```css +.my-element { + margin-bottom: var(--six-spacing-medium); + padding: var(--six-spacing-small); +} +``` diff --git a/docs/guide/styling/styles.md b/docs/guide/styling/styles.md deleted file mode 100644 index 47c49d2b4..000000000 --- a/docs/guide/styling/styles.md +++ /dev/null @@ -1,10 +0,0 @@ -# Styling - -The following pages consist of styling examples and snippets, that should simplify the usage of the -Web Components with other libraries and styling frameworks. - -So far we have guides and examples for: - -- Tables -- Colors -- TailwindCSS diff --git a/docs/guide/styling/transitions.md b/docs/guide/styling/transitions.md new file mode 100644 index 000000000..4ca4d8288 --- /dev/null +++ b/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 | + + + +## Hover over each box to see the transition speed + +
+
+
X-Slow: 1000ms
+
+ +
+
+
Slow: 500ms
+
+ +
+
+
Medium: 250ms
+
+ +
+
+
Fast: 150ms
+
+ +
+
+
X-Fast: 50ms
+
+ +## 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); +} +``` diff --git a/docs/guide/styling/typography.md b/docs/guide/styling/typography.md new file mode 100644 index 000000000..c8731f444 --- /dev/null +++ b/docs/guide/styling/typography.md @@ -0,0 +1,377 @@ +# Typography + +The Six Webcomponents library uses a carefully selected set of typography tokens to ensure +readability and visual hierarchy across all interfaces. + +## Font Families + +
+
+
+ --six-font-sans +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ 'Noto Sans', sans-serif +
+
+
+
+
+ --six-font-serif +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ Georgia, 'Times New Roman', serif +
+
+
+
+
+ --six-font-mono +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace +
+
+
+
+
+ --six-font-family +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ Default font family (same as --six-font-sans) +
+
+
+
+ +## Font Sizes + +
+
+
+ --six-font-size-xxx-small +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ 0.5rem (8px) +
+
+
+ +
+
+ --six-font-size-xx-small +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ 0.625rem (10px) +
+
+
+ +
+
+ --six-font-size-x-small +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ 0.75rem (12px) +
+
+
+ +
+
+ --six-font-size-small +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ 0.875rem (14px) +
+
+
+ +
+
+ --six-font-size-medium +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ 1rem (16px) +
+
+
+ +
+
+ --six-font-size-large +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ 1.25rem (20px) +
+
+
+ +
+
+ --six-font-size-x-large +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ 1.5rem (24px) +
+
+
+ +
+
+ --six-font-size-xx-large +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ 2.25rem (36px) +
+
+
+ +
+
+ --six-font-size-xxx-large +
+
+
+ The quick brown... +
+
+ 3rem (48px) +
+
+
+ +
+
+ --six-font-size-xxxx-large +
+
+
+ The quick... +
+
+ 4.5rem (72px) +
+
+
+
+ +## Font Weights + +
+
+
+ --six-font-weight-light +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ 300 +
+
+
+ +
+
+ --six-font-weight-normal +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ 400 +
+
+
+ +
+
+ --six-font-weight-semibold +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ 500 +
+
+
+ +
+
+ --six-font-weight-bold +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ 700 +
+
+
+
+ +## Letter Spacing + +
+
+
+ --six-letter-spacing-dense +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ -0.015em +
+
+
+ +
+
+ --six-letter-spacing-normal +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ normal +
+
+
+ +
+
+ --six-letter-spacing-loose +
+
+
+ The quick brown fox jumps over the lazy dog +
+
+ 0.075em +
+
+
+
+ +## Line Heights + +
+
+
+ --six-line-height-dense +
+
+
+ This is an example of dense line height. The text should appear more compact with less space between lines. Here's another line to demonstrate the spacing between multiple lines of text. +
+
+ 1.4 +
+
+
+ +
+
+ --six-line-height-normal +
+
+
+ This is an example of normal line height. The text should have a comfortable amount of spacing between lines. Here's another line to demonstrate the spacing between multiple lines of text. +
+
+ 1.8 +
+
+
+ +
+
+ --six-line-height-loose +
+
+
+ This is an example of loose line height. The text should have more generous spacing between lines. Here's another line to demonstrate the spacing between multiple lines of text. +
+
+ 2.2 +
+
+
+
+ +## Example Usage + +```css +.heading { + font-family: var(--six-font-sans); + font-size: var(--six-font-size-x-large); + font-weight: var(--six-font-weight-bold); + letter-spacing: var(--six-letter-spacing-dense); + line-height: var(--six-line-height-dense); +} + +.body-text { + font-family: var(--six-font-sans); + font-size: var(--six-font-size-medium); + font-weight: var(--six-font-weight-normal); + letter-spacing: var(--six-letter-spacing-normal); + line-height: var(--six-line-height-normal); +} +``` diff --git a/docs/guide/styling/z-index.md b/docs/guide/styling/z-index.md new file mode 100644 index 000000000..b18c09643 --- /dev/null +++ b/docs/guide/styling/z-index.md @@ -0,0 +1,98 @@ +# Z-Index + +The Six Webcomponents library uses a set of z-index tokens to manage stacking context throughout the +interface. + + + +| CSS Variable | Value | Usage | +| ---------------------------- | ----- | ---------------------------------- | +| `--six-z-index-header` | 500 | Used for header elements | +| `--six-z-index-search-field` | 500 | Used for search field components | +| `--six-z-index-drawer` | 600 | Used for drawer/sidebar components | +| `--six-z-index-dropdown` | 700 | Used for dropdown menus | +| `--six-z-index-toast` | 800 | Used for toast notifications | +| `--six-z-index-tooltip` | 900 | Used for tooltips | +| `--six-z-index-dialog` | 1000 | Used for modal dialogs | + +## Interactive Example + +Hover over the box below to see how z-index affects stacking order: + +
+
+ Header Element +
z-index: 500
+
+
+ Hover Me! +
z-index: 400 → 600
+
+
+ +In this example, the red box starts with a lower z-index (400) than the blue box (500). When you +hover over the container, the red box's z-index increases to 600, causing it to appear above the +blue box. + +## Example Usage + +```css +.header { + z-index: var(--six-z-index-header); /* 500 */ +} + +.tooltip { + z-index: var(--six-z-index-tooltip); /* 900 */ +} + +/* Dropdown menu that appears above the header */ +.dropdown-menu { + position: absolute; + z-index: var(--six-z-index-dropdown); /* 700 */ + /* This ensures the dropdown appears above the header (500) */ +} +```