@teseor/css 1.15.5 → 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 (19) hide show
  1. package/package.json +1 -1
  2. package/src/components/content/spacer/docs.html +6 -6
  3. package/src/components/data-display/icon/docs.html +8 -8
  4. package/src/components/data-display/status/docs.html +1 -1
  5. package/src/components/feedback/progress/docs.html +3 -3
  6. package/src/components/typography/list/docs.html +1 -1
  7. package/src/config/tokens/colors/docs.html +2 -2
  8. package/src/config/tokens/docs.html +7 -7
  9. package/src/config/tokens/spacing/docs.html +6 -6
  10. package/src/debug/docs.html +3 -3
  11. package/src/layout/aspect-ratio/docs.html +6 -6
  12. package/src/layout/column/docs.html +11 -11
  13. package/src/layout/container/docs.html +7 -7
  14. package/src/layout/grid/docs.html +31 -31
  15. package/src/layout/main/docs.html +3 -3
  16. package/src/layout/row/docs.html +22 -22
  17. package/src/utilities/container/docs.html +2 -2
  18. package/src/utilities/display/docs.html +5 -5
  19. package/src/utilities/spacing/docs.html +11 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teseor/css",
3
- "version": "1.15.5",
3
+ "version": "1.15.6",
4
4
  "description": "CSS library - reset, primitives, components, utilities",
5
5
  "license": "MIT",
6
6
  "author": "letanure",
package/src/components/content/spacer/docs.html CHANGED
@@ -5,16 +5,16 @@ description: Flexible space filler that grows to fill available space in flex co
5
5
 
6
6
  <!-- @default -->
7
7
  <div class="ui-row" style="inline-size: 100%; background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">
8
- <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('start', 'Start') }}</span>
8
+ <span class="ui-bg-muted ui-p-1">{{ t('start', 'Start') }}</span>
9
9
  <div class="ui-spacer"></div>
10
- <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('end', 'End') }}</span>
10
+ <span class="ui-bg-muted ui-p-1">{{ t('end', 'End') }}</span>
11
11
  </div>
12
12
 
13
13
  <!-- @between_items -->
14
14
  <div class="ui-row" style="inline-size: 100%; background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">
15
- <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('logo', 'Logo') }}</span>
15
+ <span class="ui-bg-muted ui-p-1">{{ t('logo', 'Logo') }}</span>
16
16
  <div class="ui-spacer"></div>
17
- <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('nav_1', 'Nav 1') }}</span>
18
- <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('nav_2', 'Nav 2') }}</span>
19
- <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('nav_3', 'Nav 3') }}</span>
17
+ <span class="ui-bg-muted ui-p-1">{{ t('nav_1', 'Nav 1') }}</span>
18
+ <span class="ui-bg-muted ui-p-1">{{ t('nav_2', 'Nav 2') }}</span>
19
+ <span class="ui-bg-muted ui-p-1">{{ t('nav_3', 'Nav 3') }}</span>
20
20
  </div>
package/src/components/data-display/icon/docs.html CHANGED
@@ -18,23 +18,23 @@ description: CSS classes for sizing and styling SVG icons. Works with any stroke
18
18
 
19
19
  <!-- @sizes | row -->
20
20
  <!-- Scale icons from extra small to extra large. -->
21
- <div class="ui-column" style="align-items: center; gap: var(--ui-space-1)">
21
+ <div class="ui-column ui-items-center ui-gap-1">
22
22
  <svg class="ui-icon ui-icon--xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
23
23
  <small>{{ t('xs', 'xs') }}</small>
24
24
  </div>
25
- <div class="ui-column" style="align-items: center; gap: var(--ui-space-1)">
25
+ <div class="ui-column ui-items-center ui-gap-1">
26
26
  <svg class="ui-icon ui-icon--sm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
27
27
  <small>{{ t('sm', 'sm') }}</small>
28
28
  </div>
29
- <div class="ui-column" style="align-items: center; gap: var(--ui-space-1)">
29
+ <div class="ui-column ui-items-center ui-gap-1">
30
30
  <svg class="ui-icon ui-icon--md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
31
31
  <small>{{ t('md', 'md') }}</small>
32
32
  </div>
33
- <div class="ui-column" style="align-items: center; gap: var(--ui-space-1)">
33
+ <div class="ui-column ui-items-center ui-gap-1">
34
34
  <svg class="ui-icon ui-icon--lg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
35
35
  <small>{{ t('lg', 'lg') }}</small>
36
36
  </div>
37
- <div class="ui-column" style="align-items: center; gap: var(--ui-space-1)">
37
+ <div class="ui-column ui-items-center ui-gap-1">
38
38
  <svg class="ui-icon ui-icon--xl" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
39
39
  <small>{{ t('xl', 'xl') }}</small>
40
40
  </div>
@@ -57,13 +57,13 @@ description: CSS classes for sizing and styling SVG icons. Works with any stroke
57
57
  <!-- @color_inheritance -->
58
58
  <!-- Icons inherit color from parent text color. -->
59
59
  <div class="ui-row ui-row--gap-2">
60
- <span style="color: var(--ui-color-primary)">
60
+ <span class="ui-text-primary">
61
61
  <svg class="ui-icon ui-icon--lg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
62
62
  </span>
63
- <span style="color: var(--ui-color-success)">
63
+ <span class="ui-text-success">
64
64
  <svg class="ui-icon ui-icon--lg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
65
65
  </span>
66
- <span style="color: var(--ui-color-danger)">
66
+ <span class="ui-text-danger">
67
67
  <svg class="ui-icon ui-icon--lg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
68
68
  </span>
69
69
  </div>
package/src/components/data-display/status/docs.html CHANGED
@@ -4,7 +4,7 @@ description: Visual status indicator with colored dot to show state.
4
4
  ---
5
5
 
6
6
  <!-- @variants -->
7
- <div style="display: flex; flex-direction: column; gap: var(--ui-space-2);">
7
+ <div class="ui-flex ui-flex-col ui-gap-2">
8
8
  <span class="ui-status">
9
9
  <span class="ui-status__dot"></span>
10
10
  {{ t('default', 'Default') }}
package/src/components/feedback/progress/docs.html CHANGED
@@ -9,7 +9,7 @@ description: Progress bar indicator showing completion status. Use aria-valuenow
9
9
  </div>
10
10
 
11
11
  <!-- @sizes -->
12
- <div style="display: flex; flex-direction: column; gap: var(--ui-space-2);">
12
+ <div class="ui-flex ui-flex-col ui-gap-2">
13
13
  <div class="ui-progress ui-progress--sm" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
14
14
  <div class="ui-progress__bar" style="width: 40%;"></div>
15
15
  </div>
@@ -22,7 +22,7 @@ description: Progress bar indicator showing completion status. Use aria-valuenow
22
22
  </div>
23
23
 
24
24
  <!-- @colors -->
25
- <div style="display: flex; flex-direction: column; gap: var(--ui-space-2);">
25
+ <div class="ui-flex ui-flex-col ui-gap-2">
26
26
  <div class="ui-progress ui-progress--success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
27
27
  <div class="ui-progress__bar" style="width: 100%;"></div>
28
28
  </div>
@@ -52,7 +52,7 @@ description: Progress bar indicator showing completion status. Use aria-valuenow
52
52
 
53
53
  <!-- @typed_custom_property -->
54
54
  <!-- Set value via --ui-progress-value instead of inline width. The @property registration enables smooth CSS transitions when JS updates the value. -->
55
- <div style="display: flex; flex-direction: column; gap: var(--ui-space-2);">
55
+ <div class="ui-flex ui-flex-col ui-gap-2">
56
56
  <div class="ui-progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
57
57
  <div class="ui-progress__bar" style="--ui-progress-value: 25%"></div>
58
58
  </div>
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/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/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/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/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/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
 
package/src/utilities/display/docs.html CHANGED
@@ -4,24 +4,24 @@ description: Flexbox and display utilities.
4
4
  ---
5
5
 
6
6
  <!-- @flex_layout -->
7
- <div class="ui-flex ui-justify-between ui-items-center ui-gap-2 ui-p-2" style="background: var(--ui-color-bg-muted)">
7
+ <div class="ui-flex ui-justify-between ui-items-center ui-gap-2 ui-p-2 ui-bg-muted">
8
8
  <span>{{ t('start', 'Start') }}</span>
9
9
  <span>{{ t('center_items_center', 'Center (items-center)') }}</span>
10
10
  <span>{{ t('end', 'End') }}</span>
11
11
  </div>
12
12
 
13
13
  <!-- @flex_direction | row -->
14
- <div class="ui-flex ui-flex-col ui-gap-1 ui-p-2" style="background: var(--ui-color-bg-muted)">
14
+ <div class="ui-flex ui-flex-col ui-gap-1 ui-p-2 ui-bg-muted">
15
15
  <span>{{ t('column_1', 'Column 1') }}</span>
16
16
  <span>{{ t('column_2', 'Column 2') }}</span>
17
17
  <span>{{ t('column_3', 'Column 3') }}</span>
18
18
  </div>
19
- <div class="ui-flex ui-flex-row ui-gap-1 ui-p-2" style="background: var(--ui-color-bg-muted)">
19
+ <div class="ui-flex ui-flex-row ui-gap-1 ui-p-2 ui-bg-muted">
20
20
  <span>{{ t('row_1', 'Row 1') }}</span>
21
21
  <span>{{ t('row_2', 'Row 2') }}</span>
22
22
  <span>{{ t('row_3', 'Row 3') }}</span>
23
23
  </div>
24
24
 
25
25
  <!-- @visibility | row -->
26
- <span class="ui-visible ui-p-1" style="background: var(--ui-color-bg-muted)">{{ t('visible', 'Visible') }}</span>
27
- <span class="ui-invisible ui-p-1" style="background: var(--ui-color-bg-muted)">{{ t('invisible_hidden_but_occupies_space', 'Invisible (hidden but occupies space)') }}</span>
26
+ <span class="ui-visible ui-p-1 ui-bg-muted">{{ t('visible', 'Visible') }}</span>
27
+ <span class="ui-invisible ui-p-1 ui-bg-muted">{{ t('invisible_hidden_but_occupies_space', 'Invisible (hidden but occupies space)') }}</span>
package/src/utilities/spacing/docs.html CHANGED
@@ -4,23 +4,23 @@ description: Margin and padding utilities aligned to 8px grid.
4
4
  ---
5
5
 
6
6
  <!-- @padding | column -->
7
- <div class="ui-p-1" style="background: var(--ui-color-bg-muted)">{{ t('p_1_8px_padding', 'p-1 (8px padding)') }}</div>
8
- <div class="ui-p-2" style="background: var(--ui-color-bg-muted)">{{ t('p_2_16px_padding', 'p-2 (16px padding)') }}</div>
9
- <div class="ui-p-4" style="background: var(--ui-color-bg-muted)">{{ t('p_4_32px_padding', 'p-4 (32px padding)') }}</div>
7
+ <div class="ui-p-1 ui-bg-muted">{{ t('p_1_8px_padding', 'p-1 (8px padding)') }}</div>
8
+ <div class="ui-p-2 ui-bg-muted">{{ t('p_2_16px_padding', 'p-2 (16px padding)') }}</div>
9
+ <div class="ui-p-4 ui-bg-muted">{{ t('p_4_32px_padding', 'p-4 (32px padding)') }}</div>
10
10
 
11
11
  <!-- @directional_padding | column -->
12
- <div class="ui-px-4 ui-py-2" style="background: var(--ui-color-bg-muted)">{{ t('px_4_py_2_horizontal_32px_vertical_16px', 'px-4 py-2 (horizontal 32px, vertical 16px)') }}</div>
13
- <div class="ui-pt-4 ui-pb-1" style="background: var(--ui-color-bg-muted)">{{ t('pt_4_pb_1_top_32px_bottom_8px', 'pt-4 pb-1 (top 32px, bottom 8px)') }}</div>
14
- <div class="ui-ps-4 ui-pe-1" style="background: var(--ui-color-bg-muted)">{{ t('ps_4_pe_1_start_32px_end_8px', 'ps-4 pe-1 (start 32px, end 8px)') }}</div>
12
+ <div class="ui-px-4 ui-py-2 ui-bg-muted">{{ t('px_4_py_2_horizontal_32px_vertical_16px', 'px-4 py-2 (horizontal 32px, vertical 16px)') }}</div>
13
+ <div class="ui-pt-4 ui-pb-1 ui-bg-muted">{{ t('pt_4_pb_1_top_32px_bottom_8px', 'pt-4 pb-1 (top 32px, bottom 8px)') }}</div>
14
+ <div class="ui-ps-4 ui-pe-1 ui-bg-muted">{{ t('ps_4_pe_1_start_32px_end_8px', 'ps-4 pe-1 (start 32px, end 8px)') }}</div>
15
15
 
16
16
  <!-- @margin | column -->
17
- <div class="ui-mb-2" style="background: var(--ui-color-bg-muted)">{{ t('mb_2_16px_bottom_margin', 'mb-2 (16px bottom margin)') }}</div>
18
- <div class="ui-mt-4 ui-mb-2" style="background: var(--ui-color-bg-muted)">{{ t('mt_4_mb_2_top_32px_bottom_16px', 'mt-4 mb-2 (top 32px, bottom 16px)') }}</div>
17
+ <div class="ui-mb-2 ui-bg-muted">{{ t('mb_2_16px_bottom_margin', 'mb-2 (16px bottom margin)') }}</div>
18
+ <div class="ui-mt-4 ui-mb-2 ui-bg-muted">{{ t('mt_4_mb_2_top_32px_bottom_16px', 'mt-4 mb-2 (top 32px, bottom 16px)') }}</div>
19
19
  <div class="ui-mx-auto" style="background: var(--ui-color-bg-muted); max-inline-size: var(--ui-row-8)">{{ t('mx_auto_centered_with_auto_margins', 'mx-auto (centered with auto margins)') }}</div>
20
20
 
21
21
  <!-- @gap -->
22
22
  <div class="ui-flex ui-gap-2">
23
- <div class="ui-p-2" style="background: var(--ui-color-bg-muted)">{{ t('item', 'Item') }}</div>
24
- <div class="ui-p-2" style="background: var(--ui-color-bg-muted)">{{ t('item', 'Item') }}</div>
25
- <div class="ui-p-2" style="background: var(--ui-color-bg-muted)">{{ t('item', 'Item') }}</div>
23
+ <div class="ui-p-2 ui-bg-muted">{{ t('item', 'Item') }}</div>
24
+ <div class="ui-p-2 ui-bg-muted">{{ t('item', 'Item') }}</div>
25
+ <div class="ui-p-2 ui-bg-muted">{{ t('item', 'Item') }}</div>
26
26
  </div>