@plastic-js/tsumiki 0.1.88 → 0.1.90

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 (11) hide show
  1. package/README.md +47 -0
  2. package/dist/components/Input.js +11 -2
  3. package/package.json +1 -1
  4. package/src/styles/presets/balanced.css +90 -0
  5. package/src/styles/presets/classic.css +90 -0
  6. package/src/styles/presets/jewel.css +90 -0
  7. package/src/styles/presets/optimal.css +90 -0
  8. package/src/styles/presets/radius-large.css +27 -0
  9. package/src/styles/presets/radius-none.css +27 -0
  10. package/src/styles/presets/radius-pill.css +27 -0
  11. package/src/styles/presets/radius-small.css +27 -0
package/README.md CHANGED
@@ -167,6 +167,7 @@ src/styles/
167
167
  ├── tokens.css # Aggregator: @import all sub-files + root tokens
168
168
  ├── theme.css # Radix Colors bridge (generated by `npm run theme`)
169
169
  ├── color.css # Semantic color tokens + legacy aliases
170
+ ├── presets/ # Opt-in color + radius presets
170
171
  ├── sizing.css # Component sizing (6 tiers × 2 level sequences)
171
172
  ├── radius.css # Border radius (L1/L2/L3 per size + round)
172
173
  ├── spacing.css # 8-step spacing scale
@@ -869,6 +870,52 @@ Override any `--tsu-*` CSS custom property at any level of specificity:
869
870
  }
870
871
  ```
871
872
 
873
+ ### Status color presets
874
+
875
+ The `danger`, `warning`, and `success` scales ship with a default mapping (red / amber / green). Swap all three at once by importing a preset **after** the main stylesheet:
876
+
877
+ ```js
878
+ import '@plastic-js/tsumiki/styles'
879
+ import '@plastic-js/tsumiki/styles/presets/jewel.css'
880
+ ```
881
+
882
+ | Preset | Import | danger | warning | success | intent |
883
+ |--------|--------|--------|---------|---------|--------|
884
+ | Classic | `styles/presets/classic.css` | red | orange | green | Universal, familiar |
885
+ | Optimal | `styles/presets/optimal.css` | tomato | yellow | teal | Best CVD separation |
886
+ | Balanced | `styles/presets/balanced.css` | tomato | amber | teal | Warm-to-cool, robust |
887
+ | Jewel | `styles/presets/jewel.css` | ruby | amber | jade | Rich, deep tones |
888
+
889
+ Each preset overrides the raw `--tsu-danger-*`, `--tsu-warning-*`, and `--tsu-success-*` scales (steps 1–12 + alpha), so every semantic variant (solid / surface / subtle / outline / plain) and dark mode follow automatically. `--tsu-info-*` keeps aliasing the accent palette and is unaffected.
890
+
891
+ The `warning` step-9 colors (orange / amber / yellow) are light, so white text would fail WCAG contrast. Every preset therefore also sets `--tsu-warning-solid-fg` to a dark value. The `Optimal`, `Balanced`, and `Classic` sets were chosen to maximize separation under red-green color vision deficiency.
892
+
893
+ Presets are plain CSS, so they can also be imported directly:
894
+
895
+ ```css
896
+ @import '@plastic-js/tsumiki/styles/presets/jewel.css';
897
+ ```
898
+
899
+ Because a preset and `color.css` both target `:root`, the preset must be imported after the main stylesheet to win the cascade.
900
+
901
+ ### Radius presets
902
+
903
+ Corner rounding is driven by three tier levels — `--tsu-radius-l1-*` (controls), `--tsu-radius-l2-*` (popups, toasts), `--tsu-radius-l3-*` (dialogs, sheets) — plus `--tsu-radius-round`. Swap the whole scale with a preset imported **after** the main stylesheet:
904
+
905
+ ```js
906
+ import '@plastic-js/tsumiki/styles'
907
+ import '@plastic-js/tsumiki/styles/presets/radius-pill.css'
908
+ ```
909
+
910
+ | Preset | Import | Controls (L1) | Panels (L2/L3) |
911
+ |--------|--------|---------------|----------------|
912
+ | None | `styles/presets/radius-none.css` | 0 | 0 |
913
+ | Small | `styles/presets/radius-small.css` | 2–8px | 4–20px |
914
+ | Large | `styles/presets/radius-large.css` | 6–20px | 10–40px |
915
+ | Pill | `styles/presets/radius-pill.css` | 9999px | 12–40px |
916
+
917
+ The built-in default (no import) is the medium scale in `src/styles/radius.css`. `pill` makes controls fully rounded while keeping panels at a large radius, so dialogs and menus don't turn into ovals. Radius presets are plain CSS and follow the same import-order rule as the status color presets.
918
+
872
919
  ### Regenerating the default theme (maintainers only)
873
920
 
874
921
  `npm run theme` runs `scripts/theme.js` — an interactive CLI for picking new accent and neutral colors. It regenerates `src/styles/theme.css`, which is the **default theme shipped with the library**. This tool is internal, for library maintainers or anyone forking the library; it is **not** part of the published package.
package/dist/components/Input.js CHANGED
@@ -188,10 +188,18 @@ var Input = (props = {}) => {
188
188
  if (!isPassword) return read(local.type);
189
189
  return showPassword() ? "text" : "password";
190
190
  };
191
+ const isAffixInteractive = (target) => {
192
+ return !!(target && target.closest && target.closest("button, a, input, select, textarea, label, [contenteditable]"));
193
+ };
194
+ const handleAffixMouseDown = (e) => {
195
+ if (effectiveDisabled()) return;
196
+ if (isAffixInteractive(e.target)) return;
197
+ e.preventDefault();
198
+ inputEl?.focus();
199
+ };
191
200
  const handleAffixPointerUp = (e) => {
192
201
  if (effectiveDisabled()) return;
193
- const target = e.target;
194
- if (target && target.closest && target.closest("button, a, input, select, textarea, label, [contenteditable]")) return;
202
+ if (isAffixInteractive(e.target)) return;
195
203
  inputEl?.focus();
196
204
  };
197
205
  const renderAffix = (content) => {
@@ -200,6 +208,7 @@ var Input = (props = {}) => {
200
208
  const _el0 = _tmpl.cloneNode(true);
201
209
  insert(_el0, () => content);
202
210
  setProp(_el0, "className", () => affixClass);
211
+ setProp(_el0, "onMouseDown", () => handleAffixMouseDown);
203
212
  setProp(_el0, "onPointerUp", () => handleAffixPointerUp);
204
213
  return _el0;
205
214
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plastic-js/tsumiki",
3
- "version": "0.1.88",
3
+ "version": "0.1.90",
4
4
  "description": "A UI component library for Plastic JS.",
5
5
  "license": "MIT",
6
6
  "author": "tigre",
package/src/styles/presets/balanced.css ADDED
@@ -0,0 +1,90 @@
1
+ @import '@radix-ui/colors/tomato.css';
2
+ @import '@radix-ui/colors/tomato-alpha.css';
3
+ @import '@radix-ui/colors/tomato-dark.css';
4
+ @import '@radix-ui/colors/tomato-dark-alpha.css';
5
+ @import '@radix-ui/colors/amber.css';
6
+ @import '@radix-ui/colors/amber-alpha.css';
7
+ @import '@radix-ui/colors/amber-dark.css';
8
+ @import '@radix-ui/colors/amber-dark-alpha.css';
9
+ @import '@radix-ui/colors/teal.css';
10
+ @import '@radix-ui/colors/teal-alpha.css';
11
+ @import '@radix-ui/colors/teal-dark.css';
12
+ @import '@radix-ui/colors/teal-dark-alpha.css';
13
+
14
+ :root {
15
+ --tsu-danger-1: var(--tomato-1);
16
+ --tsu-danger-2: var(--tomato-2);
17
+ --tsu-danger-3: var(--tomato-3);
18
+ --tsu-danger-4: var(--tomato-4);
19
+ --tsu-danger-5: var(--tomato-5);
20
+ --tsu-danger-6: var(--tomato-6);
21
+ --tsu-danger-7: var(--tomato-7);
22
+ --tsu-danger-8: var(--tomato-8);
23
+ --tsu-danger-9: var(--tomato-9);
24
+ --tsu-danger-10: var(--tomato-10);
25
+ --tsu-danger-11: var(--tomato-11);
26
+ --tsu-danger-12: var(--tomato-12);
27
+ --tsu-danger-alpha-1: var(--tomato-a1);
28
+ --tsu-danger-alpha-2: var(--tomato-a2);
29
+ --tsu-danger-alpha-3: var(--tomato-a3);
30
+ --tsu-danger-alpha-4: var(--tomato-a4);
31
+ --tsu-danger-alpha-5: var(--tomato-a5);
32
+ --tsu-danger-alpha-6: var(--tomato-a6);
33
+ --tsu-danger-alpha-7: var(--tomato-a7);
34
+ --tsu-danger-alpha-8: var(--tomato-a8);
35
+ --tsu-danger-alpha-9: var(--tomato-a9);
36
+ --tsu-danger-alpha-10: var(--tomato-a10);
37
+ --tsu-danger-alpha-11: var(--tomato-a11);
38
+ --tsu-danger-alpha-12: var(--tomato-a12);
39
+
40
+ --tsu-warning-1: var(--amber-1);
41
+ --tsu-warning-2: var(--amber-2);
42
+ --tsu-warning-3: var(--amber-3);
43
+ --tsu-warning-4: var(--amber-4);
44
+ --tsu-warning-5: var(--amber-5);
45
+ --tsu-warning-6: var(--amber-6);
46
+ --tsu-warning-7: var(--amber-7);
47
+ --tsu-warning-8: var(--amber-8);
48
+ --tsu-warning-9: var(--amber-9);
49
+ --tsu-warning-10: var(--amber-10);
50
+ --tsu-warning-11: var(--amber-11);
51
+ --tsu-warning-12: var(--amber-12);
52
+ --tsu-warning-alpha-1: var(--amber-a1);
53
+ --tsu-warning-alpha-2: var(--amber-a2);
54
+ --tsu-warning-alpha-3: var(--amber-a3);
55
+ --tsu-warning-alpha-4: var(--amber-a4);
56
+ --tsu-warning-alpha-5: var(--amber-a5);
57
+ --tsu-warning-alpha-6: var(--amber-a6);
58
+ --tsu-warning-alpha-7: var(--amber-a7);
59
+ --tsu-warning-alpha-8: var(--amber-a8);
60
+ --tsu-warning-alpha-9: var(--amber-a9);
61
+ --tsu-warning-alpha-10: var(--amber-a10);
62
+ --tsu-warning-alpha-11: var(--amber-a11);
63
+ --tsu-warning-alpha-12: var(--amber-a12);
64
+ --tsu-warning-solid-fg: #1c1c1c;
65
+
66
+ --tsu-success-1: var(--teal-1);
67
+ --tsu-success-2: var(--teal-2);
68
+ --tsu-success-3: var(--teal-3);
69
+ --tsu-success-4: var(--teal-4);
70
+ --tsu-success-5: var(--teal-5);
71
+ --tsu-success-6: var(--teal-6);
72
+ --tsu-success-7: var(--teal-7);
73
+ --tsu-success-8: var(--teal-8);
74
+ --tsu-success-9: var(--teal-9);
75
+ --tsu-success-10: var(--teal-10);
76
+ --tsu-success-11: var(--teal-11);
77
+ --tsu-success-12: var(--teal-12);
78
+ --tsu-success-alpha-1: var(--teal-a1);
79
+ --tsu-success-alpha-2: var(--teal-a2);
80
+ --tsu-success-alpha-3: var(--teal-a3);
81
+ --tsu-success-alpha-4: var(--teal-a4);
82
+ --tsu-success-alpha-5: var(--teal-a5);
83
+ --tsu-success-alpha-6: var(--teal-a6);
84
+ --tsu-success-alpha-7: var(--teal-a7);
85
+ --tsu-success-alpha-8: var(--teal-a8);
86
+ --tsu-success-alpha-9: var(--teal-a9);
87
+ --tsu-success-alpha-10: var(--teal-a10);
88
+ --tsu-success-alpha-11: var(--teal-a11);
89
+ --tsu-success-alpha-12: var(--teal-a12);
90
+ }
package/src/styles/presets/classic.css ADDED
@@ -0,0 +1,90 @@
1
+ @import '@radix-ui/colors/red.css';
2
+ @import '@radix-ui/colors/red-alpha.css';
3
+ @import '@radix-ui/colors/red-dark.css';
4
+ @import '@radix-ui/colors/red-dark-alpha.css';
5
+ @import '@radix-ui/colors/orange.css';
6
+ @import '@radix-ui/colors/orange-alpha.css';
7
+ @import '@radix-ui/colors/orange-dark.css';
8
+ @import '@radix-ui/colors/orange-dark-alpha.css';
9
+ @import '@radix-ui/colors/green.css';
10
+ @import '@radix-ui/colors/green-alpha.css';
11
+ @import '@radix-ui/colors/green-dark.css';
12
+ @import '@radix-ui/colors/green-dark-alpha.css';
13
+
14
+ :root {
15
+ --tsu-danger-1: var(--red-1);
16
+ --tsu-danger-2: var(--red-2);
17
+ --tsu-danger-3: var(--red-3);
18
+ --tsu-danger-4: var(--red-4);
19
+ --tsu-danger-5: var(--red-5);
20
+ --tsu-danger-6: var(--red-6);
21
+ --tsu-danger-7: var(--red-7);
22
+ --tsu-danger-8: var(--red-8);
23
+ --tsu-danger-9: var(--red-9);
24
+ --tsu-danger-10: var(--red-10);
25
+ --tsu-danger-11: var(--red-11);
26
+ --tsu-danger-12: var(--red-12);
27
+ --tsu-danger-alpha-1: var(--red-a1);
28
+ --tsu-danger-alpha-2: var(--red-a2);
29
+ --tsu-danger-alpha-3: var(--red-a3);
30
+ --tsu-danger-alpha-4: var(--red-a4);
31
+ --tsu-danger-alpha-5: var(--red-a5);
32
+ --tsu-danger-alpha-6: var(--red-a6);
33
+ --tsu-danger-alpha-7: var(--red-a7);
34
+ --tsu-danger-alpha-8: var(--red-a8);
35
+ --tsu-danger-alpha-9: var(--red-a9);
36
+ --tsu-danger-alpha-10: var(--red-a10);
37
+ --tsu-danger-alpha-11: var(--red-a11);
38
+ --tsu-danger-alpha-12: var(--red-a12);
39
+
40
+ --tsu-warning-1: var(--orange-1);
41
+ --tsu-warning-2: var(--orange-2);
42
+ --tsu-warning-3: var(--orange-3);
43
+ --tsu-warning-4: var(--orange-4);
44
+ --tsu-warning-5: var(--orange-5);
45
+ --tsu-warning-6: var(--orange-6);
46
+ --tsu-warning-7: var(--orange-7);
47
+ --tsu-warning-8: var(--orange-8);
48
+ --tsu-warning-9: var(--orange-9);
49
+ --tsu-warning-10: var(--orange-10);
50
+ --tsu-warning-11: var(--orange-11);
51
+ --tsu-warning-12: var(--orange-12);
52
+ --tsu-warning-alpha-1: var(--orange-a1);
53
+ --tsu-warning-alpha-2: var(--orange-a2);
54
+ --tsu-warning-alpha-3: var(--orange-a3);
55
+ --tsu-warning-alpha-4: var(--orange-a4);
56
+ --tsu-warning-alpha-5: var(--orange-a5);
57
+ --tsu-warning-alpha-6: var(--orange-a6);
58
+ --tsu-warning-alpha-7: var(--orange-a7);
59
+ --tsu-warning-alpha-8: var(--orange-a8);
60
+ --tsu-warning-alpha-9: var(--orange-a9);
61
+ --tsu-warning-alpha-10: var(--orange-a10);
62
+ --tsu-warning-alpha-11: var(--orange-a11);
63
+ --tsu-warning-alpha-12: var(--orange-a12);
64
+ --tsu-warning-solid-fg: #1c1c1c;
65
+
66
+ --tsu-success-1: var(--green-1);
67
+ --tsu-success-2: var(--green-2);
68
+ --tsu-success-3: var(--green-3);
69
+ --tsu-success-4: var(--green-4);
70
+ --tsu-success-5: var(--green-5);
71
+ --tsu-success-6: var(--green-6);
72
+ --tsu-success-7: var(--green-7);
73
+ --tsu-success-8: var(--green-8);
74
+ --tsu-success-9: var(--green-9);
75
+ --tsu-success-10: var(--green-10);
76
+ --tsu-success-11: var(--green-11);
77
+ --tsu-success-12: var(--green-12);
78
+ --tsu-success-alpha-1: var(--green-a1);
79
+ --tsu-success-alpha-2: var(--green-a2);
80
+ --tsu-success-alpha-3: var(--green-a3);
81
+ --tsu-success-alpha-4: var(--green-a4);
82
+ --tsu-success-alpha-5: var(--green-a5);
83
+ --tsu-success-alpha-6: var(--green-a6);
84
+ --tsu-success-alpha-7: var(--green-a7);
85
+ --tsu-success-alpha-8: var(--green-a8);
86
+ --tsu-success-alpha-9: var(--green-a9);
87
+ --tsu-success-alpha-10: var(--green-a10);
88
+ --tsu-success-alpha-11: var(--green-a11);
89
+ --tsu-success-alpha-12: var(--green-a12);
90
+ }
package/src/styles/presets/jewel.css ADDED
@@ -0,0 +1,90 @@
1
+ @import '@radix-ui/colors/ruby.css';
2
+ @import '@radix-ui/colors/ruby-alpha.css';
3
+ @import '@radix-ui/colors/ruby-dark.css';
4
+ @import '@radix-ui/colors/ruby-dark-alpha.css';
5
+ @import '@radix-ui/colors/amber.css';
6
+ @import '@radix-ui/colors/amber-alpha.css';
7
+ @import '@radix-ui/colors/amber-dark.css';
8
+ @import '@radix-ui/colors/amber-dark-alpha.css';
9
+ @import '@radix-ui/colors/jade.css';
10
+ @import '@radix-ui/colors/jade-alpha.css';
11
+ @import '@radix-ui/colors/jade-dark.css';
12
+ @import '@radix-ui/colors/jade-dark-alpha.css';
13
+
14
+ :root {
15
+ --tsu-danger-1: var(--ruby-1);
16
+ --tsu-danger-2: var(--ruby-2);
17
+ --tsu-danger-3: var(--ruby-3);
18
+ --tsu-danger-4: var(--ruby-4);
19
+ --tsu-danger-5: var(--ruby-5);
20
+ --tsu-danger-6: var(--ruby-6);
21
+ --tsu-danger-7: var(--ruby-7);
22
+ --tsu-danger-8: var(--ruby-8);
23
+ --tsu-danger-9: var(--ruby-9);
24
+ --tsu-danger-10: var(--ruby-10);
25
+ --tsu-danger-11: var(--ruby-11);
26
+ --tsu-danger-12: var(--ruby-12);
27
+ --tsu-danger-alpha-1: var(--ruby-a1);
28
+ --tsu-danger-alpha-2: var(--ruby-a2);
29
+ --tsu-danger-alpha-3: var(--ruby-a3);
30
+ --tsu-danger-alpha-4: var(--ruby-a4);
31
+ --tsu-danger-alpha-5: var(--ruby-a5);
32
+ --tsu-danger-alpha-6: var(--ruby-a6);
33
+ --tsu-danger-alpha-7: var(--ruby-a7);
34
+ --tsu-danger-alpha-8: var(--ruby-a8);
35
+ --tsu-danger-alpha-9: var(--ruby-a9);
36
+ --tsu-danger-alpha-10: var(--ruby-a10);
37
+ --tsu-danger-alpha-11: var(--ruby-a11);
38
+ --tsu-danger-alpha-12: var(--ruby-a12);
39
+
40
+ --tsu-warning-1: var(--amber-1);
41
+ --tsu-warning-2: var(--amber-2);
42
+ --tsu-warning-3: var(--amber-3);
43
+ --tsu-warning-4: var(--amber-4);
44
+ --tsu-warning-5: var(--amber-5);
45
+ --tsu-warning-6: var(--amber-6);
46
+ --tsu-warning-7: var(--amber-7);
47
+ --tsu-warning-8: var(--amber-8);
48
+ --tsu-warning-9: var(--amber-9);
49
+ --tsu-warning-10: var(--amber-10);
50
+ --tsu-warning-11: var(--amber-11);
51
+ --tsu-warning-12: var(--amber-12);
52
+ --tsu-warning-alpha-1: var(--amber-a1);
53
+ --tsu-warning-alpha-2: var(--amber-a2);
54
+ --tsu-warning-alpha-3: var(--amber-a3);
55
+ --tsu-warning-alpha-4: var(--amber-a4);
56
+ --tsu-warning-alpha-5: var(--amber-a5);
57
+ --tsu-warning-alpha-6: var(--amber-a6);
58
+ --tsu-warning-alpha-7: var(--amber-a7);
59
+ --tsu-warning-alpha-8: var(--amber-a8);
60
+ --tsu-warning-alpha-9: var(--amber-a9);
61
+ --tsu-warning-alpha-10: var(--amber-a10);
62
+ --tsu-warning-alpha-11: var(--amber-a11);
63
+ --tsu-warning-alpha-12: var(--amber-a12);
64
+ --tsu-warning-solid-fg: #1c1c1c;
65
+
66
+ --tsu-success-1: var(--jade-1);
67
+ --tsu-success-2: var(--jade-2);
68
+ --tsu-success-3: var(--jade-3);
69
+ --tsu-success-4: var(--jade-4);
70
+ --tsu-success-5: var(--jade-5);
71
+ --tsu-success-6: var(--jade-6);
72
+ --tsu-success-7: var(--jade-7);
73
+ --tsu-success-8: var(--jade-8);
74
+ --tsu-success-9: var(--jade-9);
75
+ --tsu-success-10: var(--jade-10);
76
+ --tsu-success-11: var(--jade-11);
77
+ --tsu-success-12: var(--jade-12);
78
+ --tsu-success-alpha-1: var(--jade-a1);
79
+ --tsu-success-alpha-2: var(--jade-a2);
80
+ --tsu-success-alpha-3: var(--jade-a3);
81
+ --tsu-success-alpha-4: var(--jade-a4);
82
+ --tsu-success-alpha-5: var(--jade-a5);
83
+ --tsu-success-alpha-6: var(--jade-a6);
84
+ --tsu-success-alpha-7: var(--jade-a7);
85
+ --tsu-success-alpha-8: var(--jade-a8);
86
+ --tsu-success-alpha-9: var(--jade-a9);
87
+ --tsu-success-alpha-10: var(--jade-a10);
88
+ --tsu-success-alpha-11: var(--jade-a11);
89
+ --tsu-success-alpha-12: var(--jade-a12);
90
+ }
package/src/styles/presets/optimal.css ADDED
@@ -0,0 +1,90 @@
1
+ @import '@radix-ui/colors/tomato.css';
2
+ @import '@radix-ui/colors/tomato-alpha.css';
3
+ @import '@radix-ui/colors/tomato-dark.css';
4
+ @import '@radix-ui/colors/tomato-dark-alpha.css';
5
+ @import '@radix-ui/colors/yellow.css';
6
+ @import '@radix-ui/colors/yellow-alpha.css';
7
+ @import '@radix-ui/colors/yellow-dark.css';
8
+ @import '@radix-ui/colors/yellow-dark-alpha.css';
9
+ @import '@radix-ui/colors/teal.css';
10
+ @import '@radix-ui/colors/teal-alpha.css';
11
+ @import '@radix-ui/colors/teal-dark.css';
12
+ @import '@radix-ui/colors/teal-dark-alpha.css';
13
+
14
+ :root {
15
+ --tsu-danger-1: var(--tomato-1);
16
+ --tsu-danger-2: var(--tomato-2);
17
+ --tsu-danger-3: var(--tomato-3);
18
+ --tsu-danger-4: var(--tomato-4);
19
+ --tsu-danger-5: var(--tomato-5);
20
+ --tsu-danger-6: var(--tomato-6);
21
+ --tsu-danger-7: var(--tomato-7);
22
+ --tsu-danger-8: var(--tomato-8);
23
+ --tsu-danger-9: var(--tomato-9);
24
+ --tsu-danger-10: var(--tomato-10);
25
+ --tsu-danger-11: var(--tomato-11);
26
+ --tsu-danger-12: var(--tomato-12);
27
+ --tsu-danger-alpha-1: var(--tomato-a1);
28
+ --tsu-danger-alpha-2: var(--tomato-a2);
29
+ --tsu-danger-alpha-3: var(--tomato-a3);
30
+ --tsu-danger-alpha-4: var(--tomato-a4);
31
+ --tsu-danger-alpha-5: var(--tomato-a5);
32
+ --tsu-danger-alpha-6: var(--tomato-a6);
33
+ --tsu-danger-alpha-7: var(--tomato-a7);
34
+ --tsu-danger-alpha-8: var(--tomato-a8);
35
+ --tsu-danger-alpha-9: var(--tomato-a9);
36
+ --tsu-danger-alpha-10: var(--tomato-a10);
37
+ --tsu-danger-alpha-11: var(--tomato-a11);
38
+ --tsu-danger-alpha-12: var(--tomato-a12);
39
+
40
+ --tsu-warning-1: var(--yellow-1);
41
+ --tsu-warning-2: var(--yellow-2);
42
+ --tsu-warning-3: var(--yellow-3);
43
+ --tsu-warning-4: var(--yellow-4);
44
+ --tsu-warning-5: var(--yellow-5);
45
+ --tsu-warning-6: var(--yellow-6);
46
+ --tsu-warning-7: var(--yellow-7);
47
+ --tsu-warning-8: var(--yellow-8);
48
+ --tsu-warning-9: var(--yellow-9);
49
+ --tsu-warning-10: var(--yellow-10);
50
+ --tsu-warning-11: var(--yellow-11);
51
+ --tsu-warning-12: var(--yellow-12);
52
+ --tsu-warning-alpha-1: var(--yellow-a1);
53
+ --tsu-warning-alpha-2: var(--yellow-a2);
54
+ --tsu-warning-alpha-3: var(--yellow-a3);
55
+ --tsu-warning-alpha-4: var(--yellow-a4);
56
+ --tsu-warning-alpha-5: var(--yellow-a5);
57
+ --tsu-warning-alpha-6: var(--yellow-a6);
58
+ --tsu-warning-alpha-7: var(--yellow-a7);
59
+ --tsu-warning-alpha-8: var(--yellow-a8);
60
+ --tsu-warning-alpha-9: var(--yellow-a9);
61
+ --tsu-warning-alpha-10: var(--yellow-a10);
62
+ --tsu-warning-alpha-11: var(--yellow-a11);
63
+ --tsu-warning-alpha-12: var(--yellow-a12);
64
+ --tsu-warning-solid-fg: #1c1c1c;
65
+
66
+ --tsu-success-1: var(--teal-1);
67
+ --tsu-success-2: var(--teal-2);
68
+ --tsu-success-3: var(--teal-3);
69
+ --tsu-success-4: var(--teal-4);
70
+ --tsu-success-5: var(--teal-5);
71
+ --tsu-success-6: var(--teal-6);
72
+ --tsu-success-7: var(--teal-7);
73
+ --tsu-success-8: var(--teal-8);
74
+ --tsu-success-9: var(--teal-9);
75
+ --tsu-success-10: var(--teal-10);
76
+ --tsu-success-11: var(--teal-11);
77
+ --tsu-success-12: var(--teal-12);
78
+ --tsu-success-alpha-1: var(--teal-a1);
79
+ --tsu-success-alpha-2: var(--teal-a2);
80
+ --tsu-success-alpha-3: var(--teal-a3);
81
+ --tsu-success-alpha-4: var(--teal-a4);
82
+ --tsu-success-alpha-5: var(--teal-a5);
83
+ --tsu-success-alpha-6: var(--teal-a6);
84
+ --tsu-success-alpha-7: var(--teal-a7);
85
+ --tsu-success-alpha-8: var(--teal-a8);
86
+ --tsu-success-alpha-9: var(--teal-a9);
87
+ --tsu-success-alpha-10: var(--teal-a10);
88
+ --tsu-success-alpha-11: var(--teal-a11);
89
+ --tsu-success-alpha-12: var(--teal-a12);
90
+ }
package/src/styles/presets/radius-large.css ADDED
@@ -0,0 +1,27 @@
1
+ :root {
2
+ --tsu-radius-round: 9999px;
3
+
4
+ --tsu-radius-l3-xs: 20px;
5
+ --tsu-radius-l2-xs: 10px;
6
+ --tsu-radius-l1-xs: 6px;
7
+
8
+ --tsu-radius-l3-sm: 20px;
9
+ --tsu-radius-l2-sm: 10px;
10
+ --tsu-radius-l1-sm: 6px;
11
+
12
+ --tsu-radius-l3-md: 24px;
13
+ --tsu-radius-l2-md: 12px;
14
+ --tsu-radius-l1-md: 8px;
15
+
16
+ --tsu-radius-l3-lg: 28px;
17
+ --tsu-radius-l2-lg: 14px;
18
+ --tsu-radius-l1-lg: 10px;
19
+
20
+ --tsu-radius-l3-xl: 32px;
21
+ --tsu-radius-l2-xl: 16px;
22
+ --tsu-radius-l1-xl: 12px;
23
+
24
+ --tsu-radius-l3-xxl: 40px;
25
+ --tsu-radius-l2-xxl: 24px;
26
+ --tsu-radius-l1-xxl: 20px;
27
+ }
package/src/styles/presets/radius-none.css ADDED
@@ -0,0 +1,27 @@
1
+ :root {
2
+ --tsu-radius-round: 0;
3
+
4
+ --tsu-radius-l3-xs: 0;
5
+ --tsu-radius-l2-xs: 0;
6
+ --tsu-radius-l1-xs: 0;
7
+
8
+ --tsu-radius-l3-sm: 0;
9
+ --tsu-radius-l2-sm: 0;
10
+ --tsu-radius-l1-sm: 0;
11
+
12
+ --tsu-radius-l3-md: 0;
13
+ --tsu-radius-l2-md: 0;
14
+ --tsu-radius-l1-md: 0;
15
+
16
+ --tsu-radius-l3-lg: 0;
17
+ --tsu-radius-l2-lg: 0;
18
+ --tsu-radius-l1-lg: 0;
19
+
20
+ --tsu-radius-l3-xl: 0;
21
+ --tsu-radius-l2-xl: 0;
22
+ --tsu-radius-l1-xl: 0;
23
+
24
+ --tsu-radius-l3-xxl: 0;
25
+ --tsu-radius-l2-xxl: 0;
26
+ --tsu-radius-l1-xxl: 0;
27
+ }
package/src/styles/presets/radius-pill.css ADDED
@@ -0,0 +1,27 @@
1
+ :root {
2
+ --tsu-radius-round: 9999px;
3
+
4
+ --tsu-radius-l3-xs: 20px;
5
+ --tsu-radius-l2-xs: 12px;
6
+ --tsu-radius-l1-xs: 9999px;
7
+
8
+ --tsu-radius-l3-sm: 20px;
9
+ --tsu-radius-l2-sm: 12px;
10
+ --tsu-radius-l1-sm: 9999px;
11
+
12
+ --tsu-radius-l3-md: 24px;
13
+ --tsu-radius-l2-md: 14px;
14
+ --tsu-radius-l1-md: 9999px;
15
+
16
+ --tsu-radius-l3-lg: 28px;
17
+ --tsu-radius-l2-lg: 16px;
18
+ --tsu-radius-l1-lg: 9999px;
19
+
20
+ --tsu-radius-l3-xl: 32px;
21
+ --tsu-radius-l2-xl: 18px;
22
+ --tsu-radius-l1-xl: 9999px;
23
+
24
+ --tsu-radius-l3-xxl: 40px;
25
+ --tsu-radius-l2-xxl: 24px;
26
+ --tsu-radius-l1-xxl: 9999px;
27
+ }
package/src/styles/presets/radius-small.css ADDED
@@ -0,0 +1,27 @@
1
+ :root {
2
+ --tsu-radius-round: 9999px;
3
+
4
+ --tsu-radius-l3-xs: 8px;
5
+ --tsu-radius-l2-xs: 4px;
6
+ --tsu-radius-l1-xs: 2px;
7
+
8
+ --tsu-radius-l3-sm: 8px;
9
+ --tsu-radius-l2-sm: 4px;
10
+ --tsu-radius-l1-sm: 2px;
11
+
12
+ --tsu-radius-l3-md: 10px;
13
+ --tsu-radius-l2-md: 6px;
14
+ --tsu-radius-l1-md: 3px;
15
+
16
+ --tsu-radius-l3-lg: 12px;
17
+ --tsu-radius-l2-lg: 6px;
18
+ --tsu-radius-l1-lg: 4px;
19
+
20
+ --tsu-radius-l3-xl: 14px;
21
+ --tsu-radius-l2-xl: 8px;
22
+ --tsu-radius-l1-xl: 5px;
23
+
24
+ --tsu-radius-l3-xxl: 20px;
25
+ --tsu-radius-l2-xxl: 12px;
26
+ --tsu-radius-l1-xxl: 8px;
27
+ }