@teseor/css 2.1.0 → 2.2.1
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.
- package/dist/compiled.css +1 -1
- package/dist/index.css +10 -166
- package/package.json +1 -1
- package/src/components/feedback/alert/index.scss +1 -1
- package/src/config/guides/theming.docs.html +115 -0
- package/src/config/layers.scss +1 -1
- package/src/config/tokens/_variables.scss +6 -1
- package/src/config/tokens/core.scss +6 -3
- package/src/config/tokens/semantic-colors.scss +9 -0
package/package.json
CHANGED
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
background: var(--_bg);
|
|
93
93
|
border: var(--_border-width) solid var(--_border-color);
|
|
94
94
|
border-radius: var(--_radius);
|
|
95
|
-
border-inline-start-width: calc(
|
|
95
|
+
border-inline-start-width: calc(var(--_border-width) * 4);
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
.alert__icon {
|
|
@@ -5,6 +5,121 @@ skipValidation: true
|
|
|
5
5
|
weight: 2
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
<!-- @playground -->
|
|
9
|
+
<!-- Drag the sliders to see how core tokens cascade through the entire system. Every component on this page responds in real time. -->
|
|
10
|
+
<div id="theme-playground">
|
|
11
|
+
<div class="demo-playground">
|
|
12
|
+
<div class="demo-playground__row">
|
|
13
|
+
<label>scale</label>
|
|
14
|
+
<input type="range" min="0.75" max="1.25" step="0.025" value="1" data-token="--ui-scale" data-suffix="">
|
|
15
|
+
<output>1</output>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="demo-playground__row">
|
|
18
|
+
<label>primary hue</label>
|
|
19
|
+
<input type="range" min="0" max="360" step="1" value="250" data-token="--ui-color-primary" data-template="oklch(55% 0.22 {value})" data-suffix="">
|
|
20
|
+
<output>250</output>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="demo-playground__row">
|
|
23
|
+
<label>success hue</label>
|
|
24
|
+
<input type="range" min="0" max="360" step="1" value="145" data-token="--ui-color-success" data-template="oklch(60% 0.18 {value})" data-suffix="">
|
|
25
|
+
<output>145</output>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="demo-playground__row">
|
|
28
|
+
<label>warning hue</label>
|
|
29
|
+
<input type="range" min="0" max="360" step="1" value="70" data-token="--ui-color-warning" data-template="oklch(75% 0.18 {value})" data-suffix="">
|
|
30
|
+
<output>70</output>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="demo-playground__row">
|
|
33
|
+
<label>danger hue</label>
|
|
34
|
+
<input type="range" min="0" max="360" step="1" value="25" data-token="--ui-color-danger" data-template="oklch(60% 0.22 {value})" data-suffix="">
|
|
35
|
+
<output>25</output>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="demo-playground__row">
|
|
38
|
+
<label>neutral hue</label>
|
|
39
|
+
<input type="range" min="0" max="360" step="1" value="250" data-token="--ui-color-neutral" data-param="hue" data-template="oklch(50% {chroma} {hue})" data-suffix="">
|
|
40
|
+
<output>250</output>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="demo-playground__row">
|
|
43
|
+
<label>neutral chroma</label>
|
|
44
|
+
<input type="range" min="0" max="0.08" step="0.005" value="0.02" data-token="--ui-color-neutral" data-param="chroma" data-template="oklch(50% {chroma} {hue})" data-suffix="">
|
|
45
|
+
<output>0.02</output>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="demo-playground__row">
|
|
48
|
+
<label>font size</label>
|
|
49
|
+
<input type="range" min="0.75" max="1.25" step="0.05" value="1" data-token="--ui-font-size-base" data-suffix="rem">
|
|
50
|
+
<output>1rem</output>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="demo-playground__row">
|
|
53
|
+
<label>font family</label>
|
|
54
|
+
<select data-token="--ui-font-sans">
|
|
55
|
+
<option value="system-ui, -apple-system, sans-serif">System</option>
|
|
56
|
+
<option value="'Georgia', 'Times New Roman', serif">Serif</option>
|
|
57
|
+
<option value="ui-monospace, sfmono-regular, monospace">Mono</option>
|
|
58
|
+
<option value="'Noto Sans', system-ui, sans-serif">Noto Sans</option>
|
|
59
|
+
</select>
|
|
60
|
+
<output></output>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="demo-playground__row">
|
|
63
|
+
<label>radius</label>
|
|
64
|
+
<input type="range" min="0" max="24" step="1" value="8" data-token="--ui-radius-base" data-suffix="px">
|
|
65
|
+
<output>8px</output>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="demo-playground__row">
|
|
68
|
+
<label>shadow strength</label>
|
|
69
|
+
<input type="range" min="0" max="40" step="1" value="20" data-token="--ui-shadow-strength" data-suffix="%">
|
|
70
|
+
<output>20%</output>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="demo-playground__row">
|
|
73
|
+
<label>border width</label>
|
|
74
|
+
<input type="range" min="0" max="4" step="0.5" value="1" data-token="--ui-border-width-base" data-suffix="px">
|
|
75
|
+
<output>1px</output>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="ui-row ui-row--xs">
|
|
78
|
+
<button class="ui-button ui-button--sm ui-button--secondary" data-reset>{{ t('reset', 'Reset') }}</button>
|
|
79
|
+
<button class="ui-button ui-button--sm" data-random>{{ t('random_theme', 'Random Theme') }}</button>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="demo-playground__preview">
|
|
83
|
+
<div class="ui-row ui-row--xs">
|
|
84
|
+
<span class="demo-swatch-color demo-swatch-color--primary"></span>
|
|
85
|
+
<span class="demo-swatch-color demo-swatch-color--success"></span>
|
|
86
|
+
<span class="demo-swatch-color demo-swatch-color--warning"></span>
|
|
87
|
+
<span class="demo-swatch-color demo-swatch-color--danger"></span>
|
|
88
|
+
<span class="demo-swatch-color demo-swatch-color--neutral"></span>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="ui-row ui-row--xs">
|
|
91
|
+
<button class="ui-button">{{ t('primary', 'Primary') }}</button>
|
|
92
|
+
<button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
|
|
93
|
+
<button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="ui-row ui-row--xs">
|
|
96
|
+
<button class="ui-button ui-button--sm">{{ t('small', 'Small') }}</button>
|
|
97
|
+
<button class="ui-button ui-button--lg">{{ t('large', 'Large') }}</button>
|
|
98
|
+
</div>
|
|
99
|
+
<input class="ui-input" placeholder="{{ t('input_placeholder', 'Type here...') }}">
|
|
100
|
+
<select class="ui-select">
|
|
101
|
+
<option>{{ t('select_option', 'Select option') }}</option>
|
|
102
|
+
</select>
|
|
103
|
+
<div class="ui-card">
|
|
104
|
+
<h4 class="ui-heading">{{ t('card_title', 'Card Title') }}</h4>
|
|
105
|
+
<p>{{ t('card_body', 'Cards, badges, and tags all respond to the same core tokens.') }}</p>
|
|
106
|
+
<div class="ui-row ui-row--xs">
|
|
107
|
+
<span class="ui-badge ui-badge--primary">{{ t('primary', 'Primary') }}</span>
|
|
108
|
+
<span class="ui-badge ui-badge--success">{{ t('success', 'Success') }}</span>
|
|
109
|
+
<span class="ui-badge ui-badge--warning">{{ t('warning', 'Warning') }}</span>
|
|
110
|
+
<span class="ui-badge ui-badge--danger">{{ t('danger', 'Danger') }}</span>
|
|
111
|
+
<span class="ui-tag">{{ t('tag', 'Tag') }}</span>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="ui-column ui-column--xs">
|
|
115
|
+
<div class="ui-alert ui-alert--info">{{ t('alert_info', 'Info alert') }}</div>
|
|
116
|
+
<div class="ui-alert ui-alert--success">{{ t('alert_success', 'Success alert') }}</div>
|
|
117
|
+
<div class="ui-alert ui-alert--warning">{{ t('alert_warning', 'Warning alert') }}</div>
|
|
118
|
+
<div class="ui-alert ui-alert--danger">{{ t('alert_danger', 'Danger alert') }}</div>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
8
123
|
<!-- @brand_colors -->
|
|
9
124
|
<!-- Override --ui-color-primary to change the entire color palette. All shades (light, dark, subtle, hover) derive automatically via color-mix(). -->
|
|
10
125
|
<div class="demo-theme">
|
package/src/config/layers.scss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer reset, tokens.core, tokens.scale, tokens.semantic, base, primitives, components.
|
|
1
|
+
@layer reset, tokens.core, tokens.scale, tokens.semantic, base, primitives, components.tokens, components.styles, utilities, themes;
|
|
@@ -5,10 +5,15 @@
|
|
|
5
5
|
// Import this file in components that need standalone fallbacks.
|
|
6
6
|
// Section order mirrors config/tokens/index.scss import order.
|
|
7
7
|
|
|
8
|
+
// ==========================================================================
|
|
9
|
+
// 0. Scale — global density multiplier
|
|
10
|
+
// ==========================================================================
|
|
11
|
+
$scale: 1;
|
|
12
|
+
|
|
8
13
|
// ==========================================================================
|
|
9
14
|
// 1. Grid — all derived from $unit
|
|
10
15
|
// ==========================================================================
|
|
11
|
-
$unit: 0.5rem; // 8px (matches --ui-unit
|
|
16
|
+
$unit: 0.5rem; // 8px (matches --ui-unit at scale 1)
|
|
12
17
|
$row: $unit * 2; // 16px
|
|
13
18
|
$row-1: $row;
|
|
14
19
|
$row-2: $row * 2; // 32px
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
// Core design knobs — change these
|
|
1
|
+
// Core design knobs — change these values to retheme everything
|
|
2
2
|
@layer tokens.core {
|
|
3
3
|
:root {
|
|
4
|
+
// Global density multiplier — scales unit + font-size-base together
|
|
5
|
+
--ui-scale: 1;
|
|
6
|
+
|
|
4
7
|
// Grid unit — all spacing, row heights, and radii derive from this
|
|
5
|
-
--ui-unit: 8px;
|
|
8
|
+
--ui-unit: calc(8px * var(--ui-scale));
|
|
6
9
|
|
|
7
10
|
// Base colors — shades auto-generated via color-mix in tokens.scale
|
|
8
11
|
--ui-color-primary: oklch(55% 0.22 250);
|
|
@@ -16,7 +19,7 @@
|
|
|
16
19
|
--ui-font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
|
|
17
20
|
|
|
18
21
|
// Base font size — all font-size-* tokens derive from this via calc()
|
|
19
|
-
--ui-font-size-base: 1rem;
|
|
22
|
+
--ui-font-size-base: calc(1rem * var(--ui-scale));
|
|
20
23
|
|
|
21
24
|
// Base radius — sm/md/lg derive from this
|
|
22
25
|
--ui-radius-base: var(--ui-unit);
|
|
@@ -65,4 +65,13 @@
|
|
|
65
65
|
--ui-color-border-strong: var(--ui-color-neutral-200);
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
|
+
|
|
69
|
+
// Density presets — scale all spacing and text proportionally
|
|
70
|
+
[data-density="compact"] {
|
|
71
|
+
--ui-scale: 0.875;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
[data-density="comfortable"] {
|
|
75
|
+
--ui-scale: 1.125;
|
|
76
|
+
}
|
|
68
77
|
}
|