@plastic-js/tsumiki 0.1.89 → 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 (10) hide show
  1. package/README.md +47 -0
  2. package/package.json +1 -1
  3. package/src/styles/presets/balanced.css +90 -0
  4. package/src/styles/presets/classic.css +90 -0
  5. package/src/styles/presets/jewel.css +90 -0
  6. package/src/styles/presets/optimal.css +90 -0
  7. package/src/styles/presets/radius-large.css +27 -0
  8. package/src/styles/presets/radius-none.css +27 -0
  9. package/src/styles/presets/radius-pill.css +27 -0
  10. 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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plastic-js/tsumiki",
3
- "version": "0.1.89",
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
+ }