@teseor/css 1.15.3 → 1.15.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/compiled.css +1 -1
  2. package/dist/index.css +16 -16
  3. package/package.json +1 -1
  4. package/src/components/actions/button/index.scss +6 -6
  5. package/src/components/content/spacer/docs.html +6 -6
  6. package/src/components/data-display/card/index.scss +2 -2
  7. package/src/components/data-display/icon/docs.html +8 -8
  8. package/src/components/data-display/status/docs.html +1 -1
  9. package/src/components/feedback/progress/docs.html +3 -3
  10. package/src/components/feedback/progress/index.scss +3 -3
  11. package/src/components/forms/field/index.scss +3 -3
  12. package/src/components/forms/number-input/index.scss +2 -2
  13. package/src/components/forms/password-input/index.scss +2 -2
  14. package/src/components/forms/search-input/index.scss +2 -2
  15. package/src/components/forms/toggle/index.scss +1 -1
  16. package/src/components/navigation/dropdown-menu/index.scss +2 -2
  17. package/src/components/navigation/menu/index.scss +2 -2
  18. package/src/components/typography/link/index.scss +2 -2
  19. package/src/components/typography/list/docs.html +1 -1
  20. package/src/config/tokens/_variables.scss +14 -0
  21. package/src/config/tokens/colors/docs.html +2 -2
  22. package/src/config/tokens/docs.html +7 -7
  23. package/src/config/tokens/spacing/docs.html +6 -6
  24. package/src/debug/docs.html +3 -3
  25. package/src/layout/aspect-ratio/docs.html +6 -6
  26. package/src/layout/column/docs.html +11 -11
  27. package/src/layout/container/docs.html +7 -7
  28. package/src/layout/content/docs.html +3 -3
  29. package/src/layout/grid/docs.html +31 -31
  30. package/src/layout/grid/index.scss +4 -2
  31. package/src/layout/main/docs.html +3 -3
  32. package/src/layout/nav-rail/docs.html +1 -1
  33. package/src/layout/row/docs.html +22 -22
  34. package/src/layout/sidebar-nav/index.scss +2 -2
  35. package/src/utilities/container/docs.html +2 -2
  36. package/src/utilities/display/docs.html +5 -5
  37. package/src/utilities/spacing/docs.html +11 -11
package/src/components/typography/link/index.scss CHANGED
@@ -67,7 +67,7 @@
67
67
  .link[aria-disabled="true"] {
68
68
  color: var(--_color-text-muted);
69
69
 
70
- opacity: 0.6;
70
+ opacity: #{t.$opacity-disabled};
71
71
  cursor: not-allowed;
72
72
  pointer-events: none;
73
73
  }
@@ -81,6 +81,6 @@
81
81
 
82
82
  margin-inline-start: calc(#{t.$unit} / 4);
83
83
 
84
- font-size: 0.75em;
84
+ font-size: #{t.$font-size-relative-sm};
85
85
  }
86
86
  }
package/src/components/typography/list/docs.html CHANGED
@@ -40,7 +40,7 @@ description: Ordered and unordered lists with spacing control, inline layout, an
40
40
 
41
41
  <!-- @spacing -->
42
42
  <!-- Control gap between items with compact or loose variants. -->
43
- <div class="ui-column" style="gap: var(--ui-space-2)">
43
+ <div class="ui-column ui-gap-2">
44
44
  <p>{{ t('compact', 'Compact') }}</p>
45
45
  <ul class="ui-list ui-list--compact">
46
46
  <li>{{ t('tight_spacing', 'Tight spacing') }}</li>
package/src/config/tokens/_variables.scss CHANGED
@@ -119,8 +119,13 @@ $weight-bold: 700;
119
119
  // Letter spacing
120
120
  $tracking-display: -0.02em;
121
121
  $tracking-body: 0;
122
+ $tracking-wide: 0.05em;
122
123
  $tracking-caps: 0.08em;
123
124
 
125
+ // Relative font sizes (for sub-elements sized relative to parent)
126
+ $font-size-relative-xs: 0.6em;
127
+ $font-size-relative-sm: 0.75em;
128
+
124
129
  // ==========================================================================
125
130
  // 5. Radius — derived from $unit
126
131
  // ==========================================================================
@@ -135,6 +140,7 @@ $radius-full: 9999px;
135
140
  $border-width-sm: $unit * 0.125; // 1px
136
141
  $border-width-md: $unit * 0.25; // 2px
137
142
  $border-width-lg: $unit * 0.5; // 4px
143
+ $focus-ring-offset: -$border-width-md;
138
144
 
139
145
  // ==========================================================================
140
146
  // 7. Shadows — static hue fallback
@@ -197,6 +203,7 @@ $overlay-bg: rgb(0 0 0 / 0.5);
197
203
  $overlay-bg-light: rgb(255 255 255 / 0.7);
198
204
  $overlay-bg-blur: rgb(0 0 0 / 0.3);
199
205
  $overlay-bg-subtle: rgb(0 0 0 / 0.1);
206
+ $stripe-highlight: rgb(255 255 255 / 0.15);
200
207
 
201
208
  // ==========================================================================
202
209
  // 11. Semantic spacing
@@ -223,6 +230,13 @@ $spinner-duration: 750ms;
223
230
  $progress-circle-stroke-width: 8;
224
231
  $skeleton-shimmer: rgb(255 255 255 / 0.5);
225
232
 
233
+ // Layout
234
+ $container-threshold-sm: 30rem;
235
+ $grid-col-min: 16rem;
236
+
237
+ // Icon
238
+ $icon-size-inline: 1em;
239
+
226
240
  // Misc
227
241
  $slider-thumb-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
228
242
  $toast-viewport-max-width: 420px;
package/src/config/tokens/colors/docs.html CHANGED
@@ -7,7 +7,7 @@ skipValidation: true
7
7
  <!-- @text_colors | column -->
8
8
  <!-- Use for typography and icons. -->
9
9
  <p style="color: var(--ui-color-text)">--ui-color-text: Default text</p>
10
- <p style="color: var(--ui-color-text-muted)">--ui-color-text-muted: Secondary text, captions</p>
10
+ <p class="ui-text-muted">--ui-color-text-muted: Secondary text, captions</p>
11
11
  <p class="ui-p-1" style="color: var(--ui-color-text-inverse); background: var(--ui-color-neutral-900); border-radius: var(--ui-radius-sm)">--ui-color-text-inverse: Text on dark backgrounds</p>
12
12
 
13
13
  <!-- @background_colors | column -->
@@ -59,7 +59,7 @@ skipValidation: true
59
59
 
60
60
  <!-- @neutral_scale -->
61
61
  <!-- Gray scale for text, backgrounds, and borders. Derived from primary hue for subtle warmth. -->
62
- <div class="ui-row ui-row--sm" style="flex-wrap: wrap">
62
+ <div class="ui-row ui-row--sm ui-flex-wrap">
63
63
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-50); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-sm)"></div>
64
64
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-100); border-radius: var(--ui-radius-sm)"></div>
65
65
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-200); border-radius: var(--ui-radius-sm)"></div>
package/src/config/tokens/docs.html CHANGED
@@ -13,34 +13,34 @@ skipValidation: true
13
13
 
14
14
  <!-- @radius | row -->
15
15
  <!-- Border radius tokens derived from the 8px unit. -->
16
- <div class="ui-column ui-column--xs" style="align-items: center">
16
+ <div class="ui-column ui-column--xs ui-items-center">
17
17
  <div style="width: var(--ui-row-3); height: var(--ui-row-3); background: var(--ui-color-primary); border-radius: var(--ui-radius-sm)"></div>
18
18
  <small>{{ t('sm_4px', 'sm (4px)') }}</small>
19
19
  </div>
20
- <div class="ui-column ui-column--xs" style="align-items: center">
20
+ <div class="ui-column ui-column--xs ui-items-center">
21
21
  <div style="width: var(--ui-row-3); height: var(--ui-row-3); background: var(--ui-color-primary); border-radius: var(--ui-radius-md)"></div>
22
22
  <small>{{ t('md_8px', 'md (8px)') }}</small>
23
23
  </div>
24
- <div class="ui-column ui-column--xs" style="align-items: center">
24
+ <div class="ui-column ui-column--xs ui-items-center">
25
25
  <div style="width: var(--ui-row-3); height: var(--ui-row-3); background: var(--ui-color-primary); border-radius: var(--ui-radius-lg)"></div>
26
26
  <small>{{ t('lg_16px', 'lg (16px)') }}</small>
27
27
  </div>
28
- <div class="ui-column ui-column--xs" style="align-items: center">
28
+ <div class="ui-column ui-column--xs ui-items-center">
29
29
  <div style="width: var(--ui-row-3); height: var(--ui-row-3); background: var(--ui-color-primary); border-radius: var(--ui-radius-full)"></div>
30
30
  <small>{{ t('full', 'full') }}</small>
31
31
  </div>
32
32
 
33
33
  <!-- @shadows | row -->
34
34
  <!-- Elevation shadows using the primary hue for tinted depth. -->
35
- <div class="ui-column ui-column--xs" style="align-items: center">
35
+ <div class="ui-column ui-column--xs ui-items-center">
36
36
  <div style="width: var(--ui-space-8); height: var(--ui-row-3); background: var(--ui-color-bg); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-sm)"></div>
37
37
  <small>{{ t('sm', 'sm') }}</small>
38
38
  </div>
39
- <div class="ui-column ui-column--xs" style="align-items: center">
39
+ <div class="ui-column ui-column--xs ui-items-center">
40
40
  <div style="width: var(--ui-space-8); height: var(--ui-row-3); background: var(--ui-color-bg); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-md)"></div>
41
41
  <small>{{ t('md', 'md') }}</small>
42
42
  </div>
43
- <div class="ui-column ui-column--xs" style="align-items: center">
43
+ <div class="ui-column ui-column--xs ui-items-center">
44
44
  <div style="width: var(--ui-space-8); height: var(--ui-row-3); background: var(--ui-color-bg); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-lg)"></div>
45
45
  <small>{{ t('lg', 'lg') }}</small>
46
46
  </div>
package/src/config/tokens/spacing/docs.html CHANGED
@@ -5,27 +5,27 @@ skipValidation: true
5
5
  ---
6
6
 
7
7
  <!-- @default | row -->
8
- <div class="ui-column ui-column--xs" style="align-items: center">
8
+ <div class="ui-column ui-column--xs ui-items-center">
9
9
  <div style="width: var(--ui-space-1); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
10
10
  <small>{{ t('space_1', 'space-1') }}</small>
11
11
  </div>
12
- <div class="ui-column ui-column--xs" style="align-items: center">
12
+ <div class="ui-column ui-column--xs ui-items-center">
13
13
  <div style="width: var(--ui-space-2); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
14
14
  <small>{{ t('space_2', 'space-2') }}</small>
15
15
  </div>
16
- <div class="ui-column ui-column--xs" style="align-items: center">
16
+ <div class="ui-column ui-column--xs ui-items-center">
17
17
  <div style="width: var(--ui-space-3); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
18
18
  <small>{{ t('space_3', 'space-3') }}</small>
19
19
  </div>
20
- <div class="ui-column ui-column--xs" style="align-items: center">
20
+ <div class="ui-column ui-column--xs ui-items-center">
21
21
  <div style="width: var(--ui-space-4); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
22
22
  <small>{{ t('space_4', 'space-4') }}</small>
23
23
  </div>
24
- <div class="ui-column ui-column--xs" style="align-items: center">
24
+ <div class="ui-column ui-column--xs ui-items-center">
25
25
  <div style="width: var(--ui-space-6); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
26
26
  <small>{{ t('space_6', 'space-6') }}</small>
27
27
  </div>
28
- <div class="ui-column ui-column--xs" style="align-items: center">
28
+ <div class="ui-column ui-column--xs ui-items-center">
29
29
  <div style="width: var(--ui-space-8); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
30
30
  <small>{{ t('space_8', 'space-8') }}</small>
31
31
  </div>
package/src/debug/docs.html CHANGED
@@ -20,8 +20,8 @@ skipValidation: true
20
20
  <!-- Outlines all child elements to reveal layout boundaries. -->
21
21
  <div class="ui-debug-outline">
22
22
  <div class="ui-row ui-row--sm">
23
- <div style="padding: var(--ui-space-1)">{{ t('a', 'A') }}</div>
24
- <div style="padding: var(--ui-space-1)">{{ t('b', 'B') }}</div>
25
- <div style="padding: var(--ui-space-1)">{{ t('c', 'C') }}</div>
23
+ <div class="ui-p-1">{{ t('a', 'A') }}</div>
24
+ <div class="ui-p-1">{{ t('b', 'B') }}</div>
25
+ <div class="ui-p-1">{{ t('c', 'C') }}</div>
26
26
  </div>
27
27
  </div>
package/src/layout/aspect-ratio/docs.html CHANGED
@@ -6,19 +6,19 @@ description: Constrains a container to a specific aspect ratio. Media children f
6
6
  <!-- @presets -->
7
7
  <div class="ui-row ui-row--md">
8
8
  <div class="ui-aspect-ratio ui-aspect-ratio--square" style="inline-size: 160px; background: var(--ui-color-bg-muted)">
9
- <span style="padding: var(--ui-space-2)">{{ t('square', 'square') }}</span>
9
+ <span class="ui-p-2">{{ t('square', 'square') }}</span>
10
10
  </div>
11
11
  <div class="ui-aspect-ratio ui-aspect-ratio--video" style="inline-size: 160px; background: var(--ui-color-bg-muted)">
12
- <span style="padding: var(--ui-space-2)">{{ t('video', 'video') }}</span>
12
+ <span class="ui-p-2">{{ t('video', 'video') }}</span>
13
13
  </div>
14
14
  <div class="ui-aspect-ratio ui-aspect-ratio--photo" style="inline-size: 160px; background: var(--ui-color-bg-muted)">
15
- <span style="padding: var(--ui-space-2)">{{ t('photo', 'photo') }}</span>
15
+ <span class="ui-p-2">{{ t('photo', 'photo') }}</span>
16
16
  </div>
17
17
  <div class="ui-aspect-ratio ui-aspect-ratio--wide" style="inline-size: 160px; background: var(--ui-color-bg-muted)">
18
- <span style="padding: var(--ui-space-2)">{{ t('wide', 'wide') }}</span>
18
+ <span class="ui-p-2">{{ t('wide', 'wide') }}</span>
19
19
  </div>
20
20
  <div class="ui-aspect-ratio ui-aspect-ratio--portrait" style="inline-size: 160px; background: var(--ui-color-bg-muted)">
21
- <span style="padding: var(--ui-space-2)">{{ t('portrait', 'portrait') }}</span>
21
+ <span class="ui-p-2">{{ t('portrait', 'portrait') }}</span>
22
22
  </div>
23
23
  </div>
24
24
 
@@ -34,5 +34,5 @@ description: Constrains a container to a specific aspect ratio. Media children f
34
34
 
35
35
  <!-- @custom_ratio -->
36
36
  <div class="ui-aspect-ratio" style="--ui-aspect-ratio: 2.35 / 1; inline-size: 320px; background: var(--ui-color-bg-muted)">
37
- <span style="padding: var(--ui-space-2)">{{ t('2351_cinemascope', '2.35:1 (cinemascope)') }}</span>
37
+ <span class="ui-p-2">{{ t('2351_cinemascope', '2.35:1 (cinemascope)') }}</span>
38
38
  </div>
package/src/layout/column/docs.html CHANGED
@@ -5,25 +5,25 @@ description: Vertical layout with consistent gap.
5
5
 
6
6
  <!-- @basic -->
7
7
  <div class="ui-column ui-column--sm">
8
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('item_1', 'Item 1') }}</div>
9
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('item_2', 'Item 2') }}</div>
10
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('item_3', 'Item 3') }}</div>
8
+ <div class="ui-bg-muted ui-p-2">{{ t('item_1', 'Item 1') }}</div>
9
+ <div class="ui-bg-muted ui-p-2">{{ t('item_2', 'Item 2') }}</div>
10
+ <div class="ui-bg-muted ui-p-2">{{ t('item_3', 'Item 3') }}</div>
11
11
  </div>
12
12
 
13
13
  <!-- @sizes -->
14
14
  <div class="ui-column ui-column--xs">
15
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('xs_gap', 'xs gap') }}</div>
16
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('xs_gap', 'xs gap') }}</div>
15
+ <div class="ui-bg-muted ui-p-1">{{ t('xs_gap', 'xs gap') }}</div>
16
+ <div class="ui-bg-muted ui-p-1">{{ t('xs_gap', 'xs gap') }}</div>
17
17
  </div>
18
18
  <div class="ui-column ui-column--md">
19
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('md_gap', 'md gap') }}</div>
20
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('md_gap', 'md gap') }}</div>
19
+ <div class="ui-bg-muted ui-p-1">{{ t('md_gap', 'md gap') }}</div>
20
+ <div class="ui-bg-muted ui-p-1">{{ t('md_gap', 'md gap') }}</div>
21
21
  </div>
22
22
  <div class="ui-column ui-column--lg">
23
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('lg_gap', 'lg gap') }}</div>
24
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('lg_gap', 'lg gap') }}</div>
23
+ <div class="ui-bg-muted ui-p-1">{{ t('lg_gap', 'lg gap') }}</div>
24
+ <div class="ui-bg-muted ui-p-1">{{ t('lg_gap', 'lg gap') }}</div>
25
25
  </div>
26
26
  <div class="ui-column ui-column--xl">
27
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('xl_gap', 'xl gap') }}</div>
28
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('xl_gap', 'xl gap') }}</div>
27
+ <div class="ui-bg-muted ui-p-1">{{ t('xl_gap', 'xl gap') }}</div>
28
+ <div class="ui-bg-muted ui-p-1">{{ t('xl_gap', 'xl gap') }}</div>
29
29
  </div>
package/src/layout/container/docs.html CHANGED
@@ -5,30 +5,30 @@ description: Content wrapper with max-width and inline padding. Centers page con
5
5
 
6
6
  <!-- @default -->
7
7
  <!-- Constrains content to a max width with horizontal padding. -->
8
- <div class="ui-container" style="background: var(--ui-color-bg-muted)">
8
+ <div class="ui-container ui-bg-muted">
9
9
  <p>{{ t('content_within_a_container', 'Content within a container') }}</p>
10
10
  </div>
11
11
 
12
12
  <!-- @centered -->
13
13
  <!-- Centers the container horizontally with auto margins. -->
14
- <div class="ui-container ui-container--center" style="background: var(--ui-color-bg-muted)">
14
+ <div class="ui-container ui-container--center ui-bg-muted">
15
15
  <p>{{ t('centered_container', 'Centered container') }}</p>
16
16
  </div>
17
17
 
18
18
  <!-- @sizes | column -->
19
19
  <!-- Width presets for different layout needs. -->
20
- <div class="ui-container ui-container--sm ui-container--center" style="background: var(--ui-color-bg-muted)">
20
+ <div class="ui-container ui-container--sm ui-container--center ui-bg-muted">
21
21
  <p>{{ t('small', 'Small') }}</p>
22
22
  </div>
23
- <div class="ui-container ui-container--md ui-container--center" style="background: var(--ui-color-bg-muted)">
23
+ <div class="ui-container ui-container--md ui-container--center ui-bg-muted">
24
24
  <p>{{ t('medium', 'Medium') }}</p>
25
25
  </div>
26
- <div class="ui-container ui-container--lg ui-container--center" style="background: var(--ui-color-bg-muted)">
26
+ <div class="ui-container ui-container--lg ui-container--center ui-bg-muted">
27
27
  <p>{{ t('large_default', 'Large (default)') }}</p>
28
28
  </div>
29
- <div class="ui-container ui-container--xl ui-container--center" style="background: var(--ui-color-bg-muted)">
29
+ <div class="ui-container ui-container--xl ui-container--center ui-bg-muted">
30
30
  <p>{{ t('extra_large', 'Extra large') }}</p>
31
31
  </div>
32
- <div class="ui-container ui-container--full" style="background: var(--ui-color-bg-muted)">
32
+ <div class="ui-container ui-container--full ui-bg-muted">
33
33
  <p>{{ t('full_width', 'Full width') }}</p>
34
34
  </div>
package/src/layout/content/docs.html CHANGED
@@ -5,7 +5,7 @@ description: Content wrapper with consistent vertical spacing. Use inside contai
5
5
 
6
6
  <!-- @default -->
7
7
  <!-- Vertical flex layout with gap between children and block/inline padding. -->
8
- <div class="ui-content" style="0: b; 1: a; 2: c; 3: k; 4: g; 5: r; 6: o; 7: u; 8: n; 9: d; 10: :; 11: ; 12: v; 13: a; 14: r; 15: (; 16: -; 17: -; 18: u; 19: i; 20: -; 21: c; 22: o; 23: l; 24: o; 25: r; 26: -; 27: b; 28: g; 29: -; 30: s; 31: u; 32: b; 33: t; 34: l; 35: e; 36: )">
8
+ <div class="ui-content ui-bg-subtle">
9
9
  <p>{{ t('first_section_of_content_with_consistent_spacing', 'First section of content with consistent spacing.') }}</p>
10
10
  <p>{{ t('second_section_spaced_by_gap', 'Second section automatically spaced by the gap token.') }}</p>
11
11
  <p>{{ t('third_section_follows_the_same_rhythm', 'Third section follows the same rhythm.') }}</p>
@@ -13,14 +13,14 @@ description: Content wrapper with consistent vertical spacing. Use inside contai
13
13
 
14
14
  <!-- @prose -->
15
15
  <!-- Narrower max-width for readable long-form text (640px / 80 units). -->
16
- <div class="ui-content ui-content--prose" style="0: b; 1: a; 2: c; 3: k; 4: g; 5: r; 6: o; 7: u; 8: n; 9: d; 10: :; 11: ; 12: v; 13: a; 14: r; 15: (; 16: -; 17: -; 18: u; 19: i; 20: -; 21: c; 22: o; 23: l; 24: o; 25: r; 26: -; 27: b; 28: g; 29: -; 30: s; 31: u; 32: b; 33: t; 34: l; 35: e; 36: )">
16
+ <div class="ui-content ui-content--prose ui-bg-subtle">
17
17
  <p>{{ t('prose_content_constrained', 'Prose content is constrained to a comfortable reading width. Long paragraphs stay readable without requiring the eye to travel too far across the screen.') }}</p>
18
18
  <p>{{ t('works_for_articles_docs_forms', 'This works well for articles, documentation, and form layouts.') }}</p>
19
19
  </div>
20
20
 
21
21
  <!-- @flush -->
22
22
  <!-- No padding, only gap between children. Useful when the parent handles padding. -->
23
- <div class="ui-content ui-content--flush" style="0: b; 1: a; 2: c; 3: k; 4: g; 5: r; 6: o; 7: u; 8: n; 9: d; 10: :; 11: ; 12: v; 13: a; 14: r; 15: (; 16: -; 17: -; 18: u; 19: i; 20: -; 21: c; 22: o; 23: l; 24: o; 25: r; 26: -; 27: b; 28: g; 29: -; 30: s; 31: u; 32: b; 33: t; 34: l; 35: e; 36: )">
23
+ <div class="ui-content ui-content--flush ui-bg-subtle">
24
24
  <p>{{ t('flush_content_has_no_padding', 'Flush content has no padding.') }}</p>
25
25
  <p>{{ t('gap_between_children_is_preserved', 'Gap between children is preserved.') }}</p>
26
26
  </div>
package/src/layout/grid/docs.html CHANGED
@@ -6,60 +6,60 @@ description: CSS Grid with column variants, subgrid support, and span utilities.
6
6
 
7
7
  <!-- @columns -->
8
8
  <div class="ui-grid ui-grid--2">
9
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">1</div>
10
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">2</div>
9
+ <div class="ui-bg-muted ui-p-2">1</div>
10
+ <div class="ui-bg-muted ui-p-2">2</div>
11
11
  </div>
12
12
  <div class="ui-grid ui-grid--3">
13
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">1</div>
14
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">2</div>
15
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">3</div>
13
+ <div class="ui-bg-muted ui-p-2">1</div>
14
+ <div class="ui-bg-muted ui-p-2">2</div>
15
+ <div class="ui-bg-muted ui-p-2">3</div>
16
16
  </div>
17
17
  <div class="ui-grid ui-grid--4">
18
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">1</div>
19
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">2</div>
20
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">3</div>
21
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">4</div>
18
+ <div class="ui-bg-muted ui-p-2">1</div>
19
+ <div class="ui-bg-muted ui-p-2">2</div>
20
+ <div class="ui-bg-muted ui-p-2">3</div>
21
+ <div class="ui-bg-muted ui-p-2">4</div>
22
22
  </div>
23
23
  <div class="ui-grid ui-grid--auto">
24
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('auto', 'Auto') }}</div>
25
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('auto', 'Auto') }}</div>
26
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('auto', 'Auto') }}</div>
24
+ <div class="ui-bg-muted ui-p-2">{{ t('auto', 'Auto') }}</div>
25
+ <div class="ui-bg-muted ui-p-2">{{ t('auto', 'Auto') }}</div>
26
+ <div class="ui-bg-muted ui-p-2">{{ t('auto', 'Auto') }}</div>
27
27
  </div>
28
28
 
29
29
  <!-- @subgrid -->
30
30
  <!-- Children inherit parent grid tracks for cross-item alignment. -->
31
31
  <div class="ui-grid ui-grid--3">
32
32
  <div class="ui-grid--subgrid" style="grid-column: span 3">
33
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('subgrid_child_1', 'Subgrid child 1') }}</div>
34
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('subgrid_child_2', 'Subgrid child 2') }}</div>
35
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('subgrid_child_3', 'Subgrid child 3') }}</div>
33
+ <div class="ui-bg-muted ui-p-2">{{ t('subgrid_child_1', 'Subgrid child 1') }}</div>
34
+ <div class="ui-bg-muted ui-p-2">{{ t('subgrid_child_2', 'Subgrid child 2') }}</div>
35
+ <div class="ui-bg-muted ui-p-2">{{ t('subgrid_child_3', 'Subgrid child 3') }}</div>
36
36
  </div>
37
37
  </div>
38
38
  <div class="ui-grid ui-grid--3" style="grid-template-rows: auto 1fr auto">
39
39
  <div class="ui-grid--subgrid-rows" style="grid-row: span 3; border: 1px solid var(--ui-color-border); padding: var(--ui-space-2)">
40
40
  <strong>{{ t('card_a', 'Card A') }}</strong>
41
41
  <p>{{ t('short_content', 'Short content.') }}</p>
42
- <span style="color: var(--ui-color-text-muted)">{{ t('footer', 'Footer') }}</span>
42
+ <span class="ui-text-muted">{{ t('footer', 'Footer') }}</span>
43
43
  </div>
44
44
  <div class="ui-grid--subgrid-rows" style="grid-row: span 3; border: 1px solid var(--ui-color-border); padding: var(--ui-space-2)">
45
45
  <strong>{{ t('card_b', 'Card B') }}</strong>
46
46
  <p>{{ t('longer_content_wraps_demo', 'Longer content that wraps to multiple lines to demonstrate row alignment.') }}</p>
47
- <span style="color: var(--ui-color-text-muted)">{{ t('footer', 'Footer') }}</span>
47
+ <span class="ui-text-muted">{{ t('footer', 'Footer') }}</span>
48
48
  </div>
49
49
  <div class="ui-grid--subgrid-rows" style="grid-row: span 3; border: 1px solid var(--ui-color-border); padding: var(--ui-space-2)">
50
50
  <strong>{{ t('card_c', 'Card C') }}</strong>
51
51
  <p>{{ t('medium_text', 'Medium text.') }}</p>
52
- <span style="color: var(--ui-color-text-muted)">{{ t('footer', 'Footer') }}</span>
52
+ <span class="ui-text-muted">{{ t('footer', 'Footer') }}</span>
53
53
  </div>
54
54
  </div>
55
55
  <div class="ui-grid ui-grid--3" style="grid-template-rows: auto auto">
56
56
  <div class="ui-grid--subgrid-both" style="grid-column: span 3; grid-row: span 2">
57
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('a1', 'A1') }}</div>
58
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('a2', 'A2') }}</div>
59
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('a3', 'A3') }}</div>
60
- <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">{{ t('b1', 'B1') }}</div>
61
- <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">{{ t('b2', 'B2') }}</div>
62
- <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">{{ t('b3', 'B3') }}</div>
57
+ <div class="ui-bg-muted ui-p-2">{{ t('a1', 'A1') }}</div>
58
+ <div class="ui-bg-muted ui-p-2">{{ t('a2', 'A2') }}</div>
59
+ <div class="ui-bg-muted ui-p-2">{{ t('a3', 'A3') }}</div>
60
+ <div class="ui-bg-subtle ui-p-2">{{ t('b1', 'B1') }}</div>
61
+ <div class="ui-bg-subtle ui-p-2">{{ t('b2', 'B2') }}</div>
62
+ <div class="ui-bg-subtle ui-p-2">{{ t('b3', 'B3') }}</div>
63
63
  </div>
64
64
  </div>
65
65
 
@@ -67,9 +67,9 @@ description: CSS Grid with column variants, subgrid support, and span utilities.
67
67
  <!-- Span multiple columns with .ui-grid-col-span-{2,3,4,full} utilities. -->
68
68
  <div class="ui-grid ui-grid--4">
69
69
  <div style="grid-column: span 2; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('span_2', 'Span 2') }}</div>
70
- <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">1</div>
71
- <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">1</div>
72
- <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">1</div>
70
+ <div class="ui-bg-subtle ui-p-2">1</div>
71
+ <div class="ui-bg-subtle ui-p-2">1</div>
72
+ <div class="ui-bg-subtle ui-p-2">1</div>
73
73
  <div style="grid-column: span 3; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('span_3', 'Span 3') }}</div>
74
74
  <div style="grid-column: 1 / -1; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('span_full', 'Span full') }}</div>
75
75
  </div>
@@ -78,8 +78,8 @@ description: CSS Grid with column variants, subgrid support, and span utilities.
78
78
  <!-- Span multiple rows with .ui-grid-row-span-{2,3,full} utilities. -->
79
79
  <div class="ui-grid ui-grid--3">
80
80
  <div style="grid-row: span 2; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('row_span_2', 'Row span 2') }}</div>
81
- <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">1</div>
82
- <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">2</div>
83
- <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">3</div>
84
- <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">4</div>
81
+ <div class="ui-bg-subtle ui-p-2">1</div>
82
+ <div class="ui-bg-subtle ui-p-2">2</div>
83
+ <div class="ui-bg-subtle ui-p-2">3</div>
84
+ <div class="ui-bg-subtle ui-p-2">4</div>
85
85
  </div>
package/src/layout/grid/index.scss CHANGED
@@ -1,9 +1,11 @@
1
+ @use '../../config/tokens/variables' as t;
2
+
1
3
  // @component grid
2
4
  // @element div
3
5
 
4
6
  @layer primitives {
5
7
  .grid {
6
- --_space-4: var(--ui-space-4);
8
+ --_space-4: var(--ui-space-4, #{t.$space-4});
7
9
  display: grid;
8
10
  gap: var(--grid-gap, var(--_space-4));
9
11
  grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr));
@@ -15,7 +17,7 @@
15
17
  .grid--4 { --grid-cols: 4; }
16
18
 
17
19
  .grid--auto {
18
- grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 16rem), 1fr));
20
+ grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, #{t.$grid-col-min}), 1fr));
19
21
  }
20
22
 
21
23
  // @modifier boolean subgrid
package/src/layout/main/docs.html CHANGED
@@ -6,7 +6,7 @@ description: Main content area that accounts for sidebar and topbar offsets in a
6
6
  <!-- @default -->
7
7
  <!-- Offsets content for a start-side sidebar and optional topbar. -->
8
8
  <div style="position: relative; height: var(--ui-row-4)">
9
- <main class="ui-main" style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">
9
+ <main class="ui-main ui-bg-muted ui-p-2">
10
10
  <p>{{ t('main_content_area', 'Main content area') }}</p>
11
11
  </main>
12
12
  </div>
@@ -14,7 +14,7 @@ description: Main content area that accounts for sidebar and topbar offsets in a
14
14
  <!-- @sidebar_end -->
15
15
  <!-- Offsets content for an end-side sidebar instead of start. -->
16
16
  <div style="position: relative; height: var(--ui-row-4)">
17
- <main class="ui-main ui-main--sidebar-end" style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">
17
+ <main class="ui-main ui-main--sidebar-end ui-bg-muted ui-p-2">
18
18
  <p>{{ t('content_with_end_sidebar', 'Content with end sidebar') }}</p>
19
19
  </main>
20
20
  </div>
@@ -22,7 +22,7 @@ description: Main content area that accounts for sidebar and topbar offsets in a
22
22
  <!-- @full_width -->
23
23
  <!-- No sidebar offset. Use when there is no sidebar. -->
24
24
  <div style="position: relative; height: var(--ui-row-4)">
25
- <main class="ui-main ui-main--full" style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">
25
+ <main class="ui-main ui-main--full ui-bg-muted ui-p-2">
26
26
  <p>{{ t('full_width_content', 'Full width content') }}</p>
27
27
  </main>
28
28
  </div>
package/src/layout/nav-rail/docs.html CHANGED
@@ -5,7 +5,7 @@ description: Narrow fixed vertical navigation rail for icon-based navigation wit
5
5
 
6
6
  <!-- @default -->
7
7
  <!-- Fixed narrow rail with icon items and bottom actions. -->
8
- <nav class="ui-nav-rail" style="0: p; 1: o; 2: s; 3: i; 4: t; 5: i; 6: o; 7: n; 8: :; 9: ; 10: r; 11: e; 12: l; 13: a; 14: t; 15: i; 16: v; 17: e; 18: ;; 19: ; 20: b; 21: l; 22: o; 23: c; 24: k; 25: -; 26: s; 27: i; 28: z; 29: e; 30: :; 31: ; 32: 3; 33: 2; 34: 0; 35: p; 36: x">
8
+ <nav class="ui-nav-rail" style="position: relative; block-size: 320px">
9
9
  <div class="ui-nav-rail__items">
10
10
  <button class="ui-button ui-button--ghost ui-button--icon">{{ t('h', 'H') }}</button>
11
11
  <button class="ui-button ui-button--ghost ui-button--icon">{{ t('s', 'S') }}</button>
package/src/layout/row/docs.html CHANGED
@@ -5,40 +5,40 @@ description: Horizontal layout with wrapping.
5
5
 
6
6
  <!-- @basic -->
7
7
  <div class="ui-row ui-row--md">
8
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('tag_1', 'Tag 1') }}</div>
9
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('tag_2', 'Tag 2') }}</div>
10
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('tag_3', 'Tag 3') }}</div>
11
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('tag_4', 'Tag 4') }}</div>
8
+ <div class="ui-bg-muted ui-p-2">{{ t('tag_1', 'Tag 1') }}</div>
9
+ <div class="ui-bg-muted ui-p-2">{{ t('tag_2', 'Tag 2') }}</div>
10
+ <div class="ui-bg-muted ui-p-2">{{ t('tag_3', 'Tag 3') }}</div>
11
+ <div class="ui-bg-muted ui-p-2">{{ t('tag_4', 'Tag 4') }}</div>
12
12
  </div>
13
13
 
14
14
  <!-- @sizes -->
15
15
  <div class="ui-row ui-row--xs">
16
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('xs', 'xs') }}</div>
17
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('xs', 'xs') }}</div>
18
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('xs', 'xs') }}</div>
16
+ <div class="ui-bg-muted ui-p-1">{{ t('xs', 'xs') }}</div>
17
+ <div class="ui-bg-muted ui-p-1">{{ t('xs', 'xs') }}</div>
18
+ <div class="ui-bg-muted ui-p-1">{{ t('xs', 'xs') }}</div>
19
19
  </div>
20
20
  <div class="ui-row ui-row--lg">
21
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('lg', 'lg') }}</div>
22
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('lg', 'lg') }}</div>
23
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('lg', 'lg') }}</div>
21
+ <div class="ui-bg-muted ui-p-1">{{ t('lg', 'lg') }}</div>
22
+ <div class="ui-bg-muted ui-p-1">{{ t('lg', 'lg') }}</div>
23
+ <div class="ui-bg-muted ui-p-1">{{ t('lg', 'lg') }}</div>
24
24
  </div>
25
25
  <div class="ui-row ui-row--sm">
26
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('sm', 'sm') }}</div>
27
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('sm', 'sm') }}</div>
28
- <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('sm', 'sm') }}</div>
26
+ <div class="ui-bg-muted ui-p-1">{{ t('sm', 'sm') }}</div>
27
+ <div class="ui-bg-muted ui-p-1">{{ t('sm', 'sm') }}</div>
28
+ <div class="ui-bg-muted ui-p-1">{{ t('sm', 'sm') }}</div>
29
29
  </div>
30
30
 
31
31
  <!-- @alignment -->
32
- <div class="ui-row ui-row--start" style="background: var(--ui-color-bg-muted)">
33
- <div style="background: var(--ui-color-bg); padding: var(--ui-space-2)">{{ t('start', 'Start') }}</div>
32
+ <div class="ui-row ui-row--start ui-bg-muted">
33
+ <div class="ui-bg ui-p-2">{{ t('start', 'Start') }}</div>
34
34
  </div>
35
- <div class="ui-row ui-row--center" style="background: var(--ui-color-bg-muted)">
36
- <div style="background: var(--ui-color-bg); padding: var(--ui-space-2)">{{ t('center', 'Center') }}</div>
35
+ <div class="ui-row ui-row--center ui-bg-muted">
36
+ <div class="ui-bg ui-p-2">{{ t('center', 'Center') }}</div>
37
37
  </div>
38
- <div class="ui-row ui-row--end" style="background: var(--ui-color-bg-muted)">
39
- <div style="background: var(--ui-color-bg); padding: var(--ui-space-2)">{{ t('end', 'End') }}</div>
38
+ <div class="ui-row ui-row--end ui-bg-muted">
39
+ <div class="ui-bg ui-p-2">{{ t('end', 'End') }}</div>
40
40
  </div>
41
- <div class="ui-row ui-row--between" style="background: var(--ui-color-bg-muted)">
42
- <div style="background: var(--ui-color-bg); padding: var(--ui-space-2)">{{ t('between_a', 'Between A') }}</div>
43
- <div style="background: var(--ui-color-bg); padding: var(--ui-space-2)">{{ t('between_b', 'Between B') }}</div>
41
+ <div class="ui-row ui-row--between ui-bg-muted">
42
+ <div class="ui-bg ui-p-2">{{ t('between_a', 'Between A') }}</div>
43
+ <div class="ui-bg ui-p-2">{{ t('between_b', 'Between B') }}</div>
44
44
  </div>
package/src/layout/sidebar-nav/index.scss CHANGED
@@ -92,7 +92,7 @@
92
92
 
93
93
  font-size: var(--_font-size);
94
94
  font-weight: var(--_weight);
95
- letter-spacing: 0.05em;
95
+ letter-spacing: #{t.$tracking-wide};
96
96
  text-transform: uppercase;
97
97
  color: var(--_color);
98
98
  }
@@ -181,7 +181,7 @@
181
181
 
182
182
  .sidebar-nav__item:focus-visible {
183
183
  outline: 2px solid var(--_color-focus);
184
- outline-offset: -2px;
184
+ outline-offset: #{t.$focus-ring-offset};
185
185
  }
186
186
 
187
187
  // Active state
package/src/utilities/container/docs.html CHANGED
@@ -5,7 +5,7 @@ description: Container query utilities for component-level responsive design.
5
5
 
6
6
  <!-- @inline_size_containment -->
7
7
  <!-- Establish inline-size containment so children can use container queries to respond to the container width. -->
8
- <div class="ui-container-inline ui-p-2" style="background: var(--ui-color-bg-muted)">
8
+ <div class="ui-container-inline ui-p-2 ui-bg-muted">
9
9
  <div class="ui-card">{{ t('this_card_is_inside_an_inline_size_container', 'This card is inside an inline-size container') }}</div>
10
10
  </div>
11
11
 
@@ -17,7 +17,7 @@ description: Container query utilities for component-level responsive design.
17
17
 
18
18
  <!-- @remove_containment -->
19
19
  <!-- Reset container type back to normal (no containment). -->
20
- <div class="ui-container-normal ui-p-2" style="background: var(--ui-color-bg-muted)">
20
+ <div class="ui-container-normal ui-p-2 ui-bg-muted">
21
21
  <div class="ui-card">{{ t('no_containment_on_this_container', 'No containment on this container') }}</div>
22
22
  </div>
23
23