@bcc-code/design-tokens 1.0.12 → 1.0.14

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.
@@ -0,0 +1,214 @@
1
+ module.exports = {
2
+ "theme": {
3
+ "extend": {
4
+ "textColor": {
5
+ "primary": "var(--color-text-primary)",
6
+ "secondary": "var(--color-text-secondary)",
7
+ "tertiary": "var(--color-text-tertiary)",
8
+ "inverse": "var(--color-text-inverse)",
9
+ "disabled": "var(--color-text-disabled)",
10
+ "success": "var(--color-text-success)",
11
+ "alert": "var(--color-text-alert)",
12
+ "Info": "var(--color-text-Info)",
13
+ "danger": "var(--color-text-danger)",
14
+ "brand-default": "var(--color-text-brand-default)",
15
+ "brand-bold": "var(--color-text-brand-bold)",
16
+ "accent-rust-default": "var(--color-text-accent-rust-default)",
17
+ "accent-rust-bold": "var(--color-text-accent-rust-bold)",
18
+ "accent-yellow-default": "var(--color-text-accent-yellow-default)",
19
+ "accent-yellow-bold": "var(--color-text-accent-yellow-bold)",
20
+ "accent-green-default": "var(--color-text-accent-green-default)",
21
+ "accent-green-bold": "var(--color-text-accent-green-bold)",
22
+ "accent-teal-default": "var(--color-text-accent-teal-default)",
23
+ "accent-teal-bold": "var(--color-text-accent-teal-bold)",
24
+ "accent-sand-default": "var(--color-text-accent-sand-default)",
25
+ "accent-sand-bold": "var(--color-text-accent-sand-bold)",
26
+ "accent-blue-default": "var(--color-text-accent-blue-default)",
27
+ "accent-blue-bold": "var(--color-text-accent-blue-bold)",
28
+ "accent-purple-default": "var(--color-text-accent-purple-default)",
29
+ "accent-purple-bold": "var(--color-text-accent-purple-bold)",
30
+ "accent-magenta-default": "var(--color-text-accent-magenta-default)",
31
+ "accent-magenta-bold": "var(--color-text-accent-magenta-bold)"
32
+ },
33
+ "backgroundColor": {
34
+ "disabled-default": "var(--color-background-disabled-default)",
35
+ "brand-default": "var(--color-background-brand-default)",
36
+ "brand-hover": "var(--color-background-brand-hover)",
37
+ "brand-pressed": "var(--color-background-brand-pressed)",
38
+ "brand-lighter-default": "var(--color-background-brand-lighter-default)",
39
+ "brand-lighter-hover": "var(--color-background-brand-lighter-hover)",
40
+ "brand-lighter-pressed": "var(--color-background-brand-lighter-pressed)",
41
+ "brand-light-default": "var(--color-background-brand-light-default)",
42
+ "brand-light-hover": "var(--color-background-brand-light-hover)",
43
+ "brand-light-pressed": "var(--color-background-brand-light-pressed)",
44
+ "brand-bold-default": "var(--color-background-brand-bold-default)",
45
+ "brand-bold-hover": "var(--color-background-brand-bold-hover)",
46
+ "brand-bold-pressed": "var(--color-background-brand-bold-pressed)",
47
+ "accent-red-default": "var(--color-background-accent-red-default)",
48
+ "accent-red-hover": "var(--color-background-accent-red-hover)",
49
+ "accent-red-pressed": "var(--color-background-accent-red-pressed)",
50
+ "accent-red-lighter-default": "var(--color-background-accent-red-lighter-default)",
51
+ "accent-red-lighter-hover": "var(--color-background-accent-red-lighter-hover)",
52
+ "accent-red-lighter-pressed": "var(--color-background-accent-red-lighter-pressed)",
53
+ "accent-red-light-default": "var(--color-background-accent-red-light-default)",
54
+ "accent-red-light-hover": "var(--color-background-accent-red-light-hover)",
55
+ "accent-red-light-pressed": "var(--color-background-accent-red-light-pressed)",
56
+ "accent-red-bold-default": "var(--color-background-accent-red-bold-default)",
57
+ "accent-red-bold-hover": "var(--color-background-accent-red-bold-hover)",
58
+ "accent-red-bold-pressed": "var(--color-background-accent-red-bold-pressed)",
59
+ "accent-rust-default": "var(--color-background-accent-rust-default)",
60
+ "accent-rust-hover": "var(--color-background-accent-rust-hover)",
61
+ "accent-rust-pressed": "var(--color-background-accent-rust-pressed)",
62
+ "accent-rust-lighter-default": "var(--color-background-accent-rust-lighter-default)",
63
+ "accent-rust-lighter-hover": "var(--color-background-accent-rust-lighter-hover)",
64
+ "accent-rust-lighter-pressed": "var(--color-background-accent-rust-lighter-pressed)",
65
+ "accent-rust-light-default": "var(--color-background-accent-rust-light-default)",
66
+ "accent-rust-light-hover": "var(--color-background-accent-rust-light-hover)",
67
+ "accent-rust-light-pressed": "var(--color-background-accent-rust-light-pressed)",
68
+ "accent-rust-bold-default": "var(--color-background-accent-rust-bold-default)",
69
+ "accent-rust-bold-hover": "var(--color-background-accent-rust-bold-hover)",
70
+ "accent-rust-bold-pressed": "var(--color-background-accent-rust-bold-pressed)",
71
+ "accent-green-default": "var(--color-background-accent-green-default)",
72
+ "accent-green-hover": "var(--color-background-accent-green-hover)",
73
+ "accent-green-pressed": "var(--color-background-accent-green-pressed)",
74
+ "accent-green-lighter-default": "var(--color-background-accent-green-lighter-default)",
75
+ "accent-green-lighter-hover": "var(--color-background-accent-green-lighter-hover)",
76
+ "accent-green-lighter-pressed": "var(--color-background-accent-green-lighter-pressed)",
77
+ "accent-green-light-default": "var(--color-background-accent-green-light-default)",
78
+ "accent-green-light-hover": "var(--color-background-accent-green-light-hover)",
79
+ "accent-green-light-pressed": "var(--color-background-accent-green-light-pressed)",
80
+ "accent-green-bold-default": "var(--color-background-accent-green-bold-default)",
81
+ "accent-green-bold-hover": "var(--color-background-accent-green-bold-hover)",
82
+ "accent-green-bold-pressed": "var(--color-background-accent-green-bold-pressed)",
83
+ "accent-teal-default": "var(--color-background-accent-teal-default)",
84
+ "accent-teal-hover": "var(--color-background-accent-teal-hover)",
85
+ "accent-teal-pressed": "var(--color-background-accent-teal-pressed)",
86
+ "accent-teal-lighter-default": "var(--color-background-accent-teal-lighter-default)",
87
+ "accent-teal-lighter-hover": "var(--color-background-accent-teal-lighter-hover)",
88
+ "accent-teal-lighter-pressed": "var(--color-background-accent-teal-lighter-pressed)",
89
+ "accent-teal-light-default": "var(--color-background-accent-teal-light-default)",
90
+ "accent-teal-light-hover": "var(--color-background-accent-teal-light-hover)",
91
+ "accent-teal-light-pressed": "var(--color-background-accent-teal-light-pressed)",
92
+ "accent-teal-bold-default": "var(--color-background-accent-teal-bold-default)",
93
+ "accent-teal-bold-hover": "var(--color-background-accent-teal-bold-hover)",
94
+ "accent-teal-bold-pressed": "var(--color-background-accent-teal-bold-pressed)",
95
+ "accent-sand-default": "var(--color-background-accent-sand-default)",
96
+ "accent-sand-hover": "var(--color-background-accent-sand-hover)",
97
+ "accent-sand-pressed": "var(--color-background-accent-sand-pressed)",
98
+ "accent-sand-lighter-default": "var(--color-background-accent-sand-lighter-default)",
99
+ "accent-sand-lighter-hover": "var(--color-background-accent-sand-lighter-hover)",
100
+ "accent-sand-lighter-pressed": "var(--color-background-accent-sand-lighter-pressed)",
101
+ "accent-sand-light-default": "var(--color-background-accent-sand-light-default)",
102
+ "accent-sand-light-hover": "var(--color-background-accent-sand-light-hover)",
103
+ "accent-sand-light-pressed": "var(--color-background-accent-sand-light-pressed)",
104
+ "accent-sand-bold-default": "var(--color-background-accent-sand-bold-default)",
105
+ "accent-sand-bold-hover": "var(--color-background-accent-sand-bold-hover)",
106
+ "accent-sand-bold-pressed": "var(--color-background-accent-sand-bold-pressed)",
107
+ "accent-blue-default": "var(--color-background-accent-blue-default)",
108
+ "accent-blue-hover": "var(--color-background-accent-blue-hover)",
109
+ "accent-blue-pressed": "var(--color-background-accent-blue-pressed)",
110
+ "accent-blue-lighter-default": "var(--color-background-accent-blue-lighter-default)",
111
+ "accent-blue-lighter-hover": "var(--color-background-accent-blue-lighter-hover)",
112
+ "accent-blue-lighter-pressed": "var(--color-background-accent-blue-lighter-pressed)",
113
+ "accent-blue-light-default": "var(--color-background-accent-blue-light-default)",
114
+ "accent-blue-light-hover": "var(--color-background-accent-blue-light-hover)",
115
+ "accent-blue-light-pressed": "var(--color-background-accent-blue-light-pressed)",
116
+ "accent-blue-bold-default": "var(--color-background-accent-blue-bold-default)",
117
+ "accent-blue-bold-hover": "var(--color-background-accent-blue-bold-hover)",
118
+ "accent-blue-bold-pressed": "var(--color-background-accent-blue-bold-pressed)",
119
+ "accent-purple-default": "var(--color-background-accent-purple-default)",
120
+ "accent-purple-hover": "var(--color-background-accent-purple-hover)",
121
+ "accent-purple-pressed": "var(--color-background-accent-purple-pressed)",
122
+ "accent-purple-lighter-default": "var(--color-background-accent-purple-lighter-default)",
123
+ "accent-purple-lighter-hover": "var(--color-background-accent-purple-lighter-hover)",
124
+ "accent-purple-lighter-pressed": "var(--color-background-accent-purple-lighter-pressed)",
125
+ "accent-purple-light-default": "var(--color-background-accent-purple-light-default)",
126
+ "accent-purple-light-hover": "var(--color-background-accent-purple-light-hover)",
127
+ "accent-purple-light-pressed": "var(--color-background-accent-purple-light-pressed)",
128
+ "accent-purple-bold-default": "var(--color-background-accent-purple-bold-default)",
129
+ "accent-purple-bold-hover": "var(--color-background-accent-purple-bold-hover)",
130
+ "accent-purple-bold-pressed": "var(--color-background-accent-purple-bold-pressed)",
131
+ "accent-magenta-default": "var(--color-background-accent-magenta-default)",
132
+ "accent-magenta-hover": "var(--color-background-accent-magenta-hover)",
133
+ "accent-magenta-pressed": "var(--color-background-accent-magenta-pressed)",
134
+ "accent-magenta-lighter-default": "var(--color-background-accent-magenta-lighter-default)",
135
+ "accent-magenta-lighter-hover": "var(--color-background-accent-magenta-lighter-hover)",
136
+ "accent-magenta-lighter-pressed": "var(--color-background-accent-magenta-lighter-pressed)",
137
+ "accent-magenta-light-default": "var(--color-background-accent-magenta-light-default)",
138
+ "accent-magenta-light-hover": "var(--color-background-accent-magenta-light-hover)",
139
+ "accent-magenta-light-pressed": "var(--color-background-accent-magenta-light-pressed)",
140
+ "accent-magenta-bold-default": "var(--color-background-accent-magenta-bold-default)",
141
+ "accent-magenta-bold-hover": "var(--color-background-accent-magenta-bold-hover)",
142
+ "accent-magenta-bold-pressed": "var(--color-background-accent-magenta-bold-pressed)",
143
+ "accent-yellow-default": "var(--color-background-accent-yellow-default)",
144
+ "accent-yellow-hover": "var(--color-background-accent-yellow-hover)",
145
+ "accent-yellow-pressed": "var(--color-background-accent-yellow-pressed)",
146
+ "accent-yellow-lighter-default": "var(--color-background-accent-yellow-lighter-default)",
147
+ "accent-yellow-lighter-hover": "var(--color-background-accent-yellow-lighter-hover)",
148
+ "accent-yellow-lighter-pressed": "var(--color-background-accent-yellow-lighter-pressed)",
149
+ "accent-yellow-light-default": "var(--color-background-accent-yellow-light-default)",
150
+ "accent-yellow-light-hover": "var(--color-background-accent-yellow-light-hover)",
151
+ "accent-yellow-light-pressed": "var(--color-background-accent-yellow-light-pressed)",
152
+ "accent-yellow-bold-default": "var(--color-background-accent-yellow-bold-default)",
153
+ "accent-yellow-bold-hover": "var(--color-background-accent-yellow-bold-hover)",
154
+ "accent-yellow-bold-pressed": "var(--color-background-accent-yellow-bold-pressed)",
155
+ "neutral-default": "var(--color-background-neutral-default)",
156
+ "neutral-hover": "var(--color-background-neutral-hover)",
157
+ "neutral-pressed": "var(--color-background-neutral-pressed)",
158
+ "neutral-light-pressed": "var(--color-background-neutral-light-pressed)",
159
+ "neutral-light-default": "var(--color-background-neutral-light-default)",
160
+ "neutral-light-hover": "var(--color-background-neutral-light-hover)",
161
+ "neutral-lighter-hover": "var(--color-background-neutral-lighter-hover)",
162
+ "neutral-lighter-pressed": "var(--color-background-neutral-lighter-pressed)",
163
+ "neutral-lighter-default": "var(--color-background-neutral-lighter-default)",
164
+ "info-default": "var(--color-background-info-default)",
165
+ "info-hover": "var(--color-background-info-hover)",
166
+ "info-pressed": "var(--color-background-info-pressed)",
167
+ "success-default": "var(--color-background-success-default)",
168
+ "success-hover": "var(--color-background-success-hover)",
169
+ "success-pressed": "var(--color-background-success-pressed)",
170
+ "alert-default": "var(--color-background-alert-default)",
171
+ "alert-hover": "var(--color-background-alert-hover)",
172
+ "alert-pressed": "var(--color-background-alert-pressed)",
173
+ "danger-default": "var(--color-background-danger-default)",
174
+ "danger-hover": "var(--color-background-danger-hover)",
175
+ "danger-pressed": "var(--color-background-danger-pressed)"
176
+ },
177
+ "borderColor": {
178
+ "primary": "var(--color-border-primary)",
179
+ "secondary": "var(--color-border-secondary)",
180
+ "tertiary": "var(--color-border-tertiary)",
181
+ "focus": "var(--color-border-focus)",
182
+ "selected": "var(--color-border-selected)",
183
+ "disabled": "var(--color-border-disabled)",
184
+ "accent-red-default": "var(--color-border-accent-red-default)",
185
+ "accent-red-hover": "var(--color-border-accent-red-hover)",
186
+ "accent-red-pressed": "var(--color-border-accent-red-pressed)",
187
+ "accent-rust-default": "var(--color-border-accent-rust-default)",
188
+ "accent-rust-hover": "var(--color-border-accent-rust-hover)",
189
+ "accent-rust-pressed": "var(--color-border-accent-rust-pressed)",
190
+ "accent-yellow-default": "var(--color-border-accent-yellow-default)",
191
+ "accent-yellow-hover": "var(--color-border-accent-yellow-hover)",
192
+ "accent-yellow-pressed": "var(--color-border-accent-yellow-pressed)",
193
+ "accent-green-default": "var(--color-border-accent-green-default)",
194
+ "accent-green-hover": "var(--color-border-accent-green-hover)",
195
+ "accent-green-pressed": "var(--color-border-accent-green-pressed)",
196
+ "accent-teal-default": "var(--color-border-accent-teal-default)",
197
+ "accent-teal-hover": "var(--color-border-accent-teal-hover)",
198
+ "accent-teal-pressed": "var(--color-border-accent-teal-pressed)",
199
+ "accent-sand-default": "var(--color-border-accent-sand-default)",
200
+ "accent-sand-hover": "var(--color-border-accent-sand-hover)",
201
+ "accent-sand-pressed": "var(--color-border-accent-sand-pressed)",
202
+ "accent-blue-default": "var(--color-border-accent-blue-default)",
203
+ "accent-blue-hover": "var(--color-border-accent-blue-hover)",
204
+ "accent-blue-pressed": "var(--color-border-accent-blue-pressed)",
205
+ "accent-purple-default": "var(--color-border-accent-purple-default)",
206
+ "accent-purple-hover": "var(--color-border-accent-purple-hover)",
207
+ "accent-purple-pressed": "var(--color-border-accent-purple-pressed)",
208
+ "accent-magenta-default": "var(--color-border-accent-magenta-default)",
209
+ "accent-magenta-hover": "var(--color-border-accent-magenta-hover)",
210
+ "accent-magenta-pressed": "var(--color-border-accent-magenta-pressed)"
211
+ }
212
+ }
213
+ }
214
+ }
package/dist/tailwind.css CHANGED
@@ -1,17 +1,9 @@
1
1
  @import "tailwindcss";
2
2
 
3
- /* ─── Primitives + Light theme ──────────────────────────────────────────────── */
3
+ /* ─── Base Theme (Primitives) ──────────────────────────────────────────────── */
4
4
  @theme {
5
- --radius-2xl: 3rem;
6
- --radius-full: 999px;
7
- --radius-lg: 1rem;
8
- --radius-md: 0.5rem;
9
- --radius-none: 0;
10
- --radius-sm: 0.25rem;
11
- --radius-xl: 2rem;
12
- --radius-xs: 0.125rem;
5
+ /* COLOR */
13
6
  --color-bcc-100: #e6f2f1;
14
- --color-bcc-1000: #002320;
15
7
  --color-bcc-200: #d0e3e1;
16
8
  --color-bcc-300: #accbc8;
17
9
  --color-bcc-400: #73b2ac;
@@ -20,8 +12,8 @@
20
12
  --color-bcc-700: #0e6962;
21
13
  --color-bcc-800: #004e48;
22
14
  --color-bcc-900: #003d39;
15
+ --color-bcc-1000: #002320;
23
16
  --color-blue-100: #f1f7fd;
24
- --color-blue-1000: #25385f;
25
17
  --color-blue-200: #dfedfa;
26
18
  --color-blue-300: #c6e0f7;
27
19
  --color-blue-400: #a0cdf0;
@@ -30,15 +22,9 @@
30
22
  --color-blue-700: #3c79d4;
31
23
  --color-blue-800: #3365c2;
32
24
  --color-blue-900: #2f529e;
33
- --color-dark-neutral-alpha-100a: rgba(188, 214, 240, 0.04);
34
- --color-dark-neutral-alpha-200a: rgba(161, 189, 217, 0.08);
35
- --color-dark-neutral-alpha-300a: rgba(166, 197, 226, 0.16);
36
- --color-dark-neutral-alpha-400a: rgba(166, 197, 226, 0.28);
37
- --color-dark-neutral-alpha-500a: rgba(166, 197, 226, 0.5);
25
+ --color-blue-1000: #25385f;
38
26
  --color-dark-neutral-0: #161a1d;
39
27
  --color-dark-neutral-100: #1d2125;
40
- --color-dark-neutral-1000: #c7d1db;
41
- --color-dark-neutral-1100: #dee4ea;
42
28
  --color-dark-neutral-200: #22272b;
43
29
  --color-dark-neutral-300: #2c333a;
44
30
  --color-dark-neutral-400: #454f59;
@@ -47,8 +33,14 @@
47
33
  --color-dark-neutral-700: #8c9bab;
48
34
  --color-dark-neutral-800: #9fadbc;
49
35
  --color-dark-neutral-900: #b6c2cf;
36
+ --color-dark-neutral-1000: #c7d1db;
37
+ --color-dark-neutral-1100: #dee4ea;
38
+ --color-dark-neutral-alpha-100a: rgba(188, 214, 240, 0.04);
39
+ --color-dark-neutral-alpha-200a: rgba(161, 189, 217, 0.08);
40
+ --color-dark-neutral-alpha-300a: rgba(166, 197, 226, 0.16);
41
+ --color-dark-neutral-alpha-400a: rgba(166, 197, 226, 0.28);
42
+ --color-dark-neutral-alpha-500a: rgba(166, 197, 226, 0.5);
50
43
  --color-green-100: #f2fbf6;
51
- --color-green-1000: #133925;
52
44
  --color-green-200: #e2f6ea;
53
45
  --color-green-300: #c6ecd6;
54
46
  --color-green-400: #9adbb5;
@@ -57,8 +49,8 @@
57
49
  --color-green-700: #308957;
58
50
  --color-green-800: #296c47;
59
51
  --color-green-900: #25563b;
52
+ --color-green-1000: #133925;
60
53
  --color-magenta-100: #faf5f9;
61
- --color-magenta-1000: #592648;
62
54
  --color-magenta-200: #f7ecf5;
63
55
  --color-magenta-300: #f0daec;
64
56
  --color-magenta-400: #e4bddd;
@@ -67,15 +59,9 @@
67
59
  --color-magenta-700: #ac5693;
68
60
  --color-magenta-800: #93437a;
69
61
  --color-magenta-900: #7a3a65;
70
- --color-neutral-alpha-100a: rgba(9, 30, 77, 0.03);
71
- --color-neutral-alpha-200a: rgba(9, 30, 77, 0.06);
72
- --color-neutral-alpha-300a: rgba(9, 30, 77, 0.14);
73
- --color-neutral-alpha-400a: rgba(9, 30, 77, 0.31);
74
- --color-neutral-alpha-500a: rgba(9, 30, 77, 0.5);
62
+ --color-magenta-1000: #592648;
75
63
  --color-neutral-0: #ffffff;
76
64
  --color-neutral-100: #f7f8f9;
77
- --color-neutral-1000: #282f3c;
78
- --color-neutral-1100: #1e242d;
79
65
  --color-neutral-200: #f1f2f4;
80
66
  --color-neutral-300: #dcdfe4;
81
67
  --color-neutral-400: #b3b9c4;
@@ -84,8 +70,14 @@
84
70
  --color-neutral-700: #626f86;
85
71
  --color-neutral-800: #4b5668;
86
72
  --color-neutral-900: #374152;
73
+ --color-neutral-1000: #282f3c;
74
+ --color-neutral-1100: #1e242d;
75
+ --color-neutral-alpha-100a: rgba(9, 30, 77, 0.03);
76
+ --color-neutral-alpha-200a: rgba(9, 30, 77, 0.06);
77
+ --color-neutral-alpha-300a: rgba(9, 30, 77, 0.14);
78
+ --color-neutral-alpha-400a: rgba(9, 30, 77, 0.31);
79
+ --color-neutral-alpha-500a: rgba(9, 30, 77, 0.5);
87
80
  --color-purple-100: #f1f1fc;
88
- --color-purple-1000: #352c54;
89
81
  --color-purple-200: #e5e7fa;
90
82
  --color-purple-300: #d0d1f5;
91
83
  --color-purple-400: #b3b3ee;
@@ -94,8 +86,8 @@
94
86
  --color-purple-700: #7860cb;
95
87
  --color-purple-800: #6750b2;
96
88
  --color-purple-900: #554390;
89
+ --color-purple-1000: #352c54;
97
90
  --color-red-100: #fcf4f4;
98
- --color-red-1000: #461716;
99
91
  --color-red-200: #fae7e6;
100
92
  --color-red-300: #f6d3d2;
101
93
  --color-red-400: #efb4b2;
@@ -104,8 +96,8 @@
104
96
  --color-red-700: #c04642;
105
97
  --color-red-800: #ad3c38;
106
98
  --color-red-900: #86312e;
99
+ --color-red-1000: #461716;
107
100
  --color-rust-100: #fcf6f4;
108
- --color-rust-1000: #4c271a;
109
101
  --color-rust-200: #f9ece7;
110
102
  --color-rust-300: #f6dcd2;
111
103
  --color-rust-400: #e9b29e;
@@ -114,8 +106,8 @@
114
106
  --color-rust-700: #be6544;
115
107
  --color-rust-800: #9f5236;
116
108
  --color-rust-900: #844630;
109
+ --color-rust-1000: #4c271a;
117
110
  --color-sand-100: #f7f3ee;
118
- --color-sand-1000: #3c3420;
119
111
  --color-sand-200: #ede5da;
120
112
  --color-sand-300: #dccfba;
121
113
  --color-sand-400: #c5b191;
@@ -124,8 +116,8 @@
124
116
  --color-sand-700: #74613c;
125
117
  --color-sand-800: #5a4d31;
126
118
  --color-sand-900: #49402b;
119
+ --color-sand-1000: #3c3420;
127
120
  --color-teal-100: #f1f9fa;
128
- --color-teal-1000: #1d353f;
129
121
  --color-teal-200: #dceff1;
130
122
  --color-teal-300: #bde0e4;
131
123
  --color-teal-400: #8fc9d1;
@@ -134,15 +126,32 @@
134
126
  --color-teal-700: #377483;
135
127
  --color-teal-800: #32606c;
136
128
  --color-teal-900: #2f505b;
129
+ --color-teal-1000: #1d353f;
130
+
131
+ /* TEXT */
132
+ --text-xs: 0.75rem;
133
+ --text-sm: 0.875rem;
134
+ --text-md: 1rem;
135
+ --text-lg: 1.25rem;
136
+ --text-xl: 1.5rem;
137
137
  --text-2xl: 2rem;
138
138
  --text-3xl: 2.25rem;
139
139
  --text-4xl: 3rem;
140
- --text-lg: 1.25rem;
141
- --text-md: 1rem;
142
- --text-sm: 0.875rem;
143
- --text-xl: 1.5rem;
144
- --text-xs: 0.75rem;
145
140
 
141
+ /* RADIUS */
142
+ --radius-none: 0;
143
+ --radius-xs: 0.125rem;
144
+ --radius-sm: 0.25rem;
145
+ --radius-md: 0.5rem;
146
+ --radius-lg: 1rem;
147
+ --radius-xl: 2rem;
148
+ --radius-2xl: 3rem;
149
+ --radius-full: 999px;
150
+ }
151
+
152
+ /* ─── Light Theme ──────────────────────────────────────────────────────────── */
153
+ @theme {
154
+ /* COLOR */
146
155
  --color-background-accent-blue-bold-default: var(--color-blue-800);
147
156
  --color-background-accent-blue-bold-hover: #ffffff;
148
157
  --color-background-accent-blue-bold-pressed: #ffffff;
@@ -376,9 +385,10 @@
376
385
  --color-text-tertiary: var(--color-neutral-400);
377
386
  }
378
387
 
379
- /* ─── Dark theme overrides ─────────────────────────────────────────────────── */
388
+ /* ─── Dark Theme ───────────────────────────────────────────────────────────── */
380
389
  @variant dark {
381
390
  @theme {
391
+ /* COLOR */
382
392
  --color-background-accent-blue-bold-default: var(--color-blue-300);
383
393
  --color-background-accent-blue-bold-hover: #ffffff;
384
394
  --color-background-accent-blue-bold-pressed: #ffffff;