@dsn-starter-kit/design-tokens 3.3.0 → 3.4.0

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/dist/css/scoped/density-default.css +1 -1
  2. package/dist/css/scoped/density-information-dense.css +1 -1
  3. package/dist/css/scoped/start-dark.css +344 -0
  4. package/dist/css/scoped/start-light-hero-image.css +1 -1
  5. package/dist/css/scoped/start-light.css +344 -0
  6. package/dist/css/scoped/wireframe-dark.css +1 -1
  7. package/dist/css/scoped/wireframe-light-hero-image.css +1 -1
  8. package/dist/css/scoped/wireframe-light.css +1 -1
  9. package/dist/css/variables-dark-scoped.css +344 -0
  10. package/package.json +25 -1
package/dist/css/scoped/density-default.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Sep 2026 08:02:23 GMT
3
+ * Generated on Wed, 02 Sep 2026 09:06:11 GMT
4
4
  */
5
5
 
6
6
  :root {
package/dist/css/scoped/density-information-dense.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Sep 2026 08:02:23 GMT
3
+ * Generated on Wed, 02 Sep 2026 09:06:11 GMT
4
4
  */
5
5
 
6
6
  .dsn-density-dense {
package/dist/css/scoped/start-dark.css ADDED
@@ -0,0 +1,344 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 02 Sep 2026 09:06:11 GMT
4
+ */
5
+
6
+ .dsn-theme-start.dsn-mode-dark, .dsn-mode-dark .dsn-theme-start {
7
+ --dsn-color-neutral-bg-document: #111111;
8
+ --dsn-color-neutral-bg-elevated: #111111;
9
+ --dsn-color-neutral-bg-subtle: #040404;
10
+ --dsn-color-neutral-bg-default: #1d1d1d;
11
+ --dsn-color-neutral-bg-hover: #262626;
12
+ --dsn-color-neutral-bg-active: #2e2e2e;
13
+ --dsn-color-neutral-border-subtle: #3e3e3e;
14
+ --dsn-color-neutral-border-default: #686868;
15
+ --dsn-color-neutral-border-hover: #727272;
16
+ --dsn-color-neutral-border-active: #7c7c7c;
17
+ --dsn-color-neutral-color-default: #ababab;
18
+ --dsn-color-neutral-color-hover: #bbbbbb;
19
+ --dsn-color-neutral-color-active: #cccccc;
20
+ --dsn-color-neutral-color-subtle: #8b8b8b;
21
+ --dsn-color-neutral-color-document: #f1f1f1;
22
+ --dsn-color-accent-1-bg-document: #001126;
23
+ --dsn-color-accent-1-bg-elevated: #001126;
24
+ --dsn-color-accent-1-bg-subtle: #000409;
25
+ --dsn-color-accent-1-bg-default: #001d40;
26
+ --dsn-color-accent-1-bg-hover: #002551;
27
+ --dsn-color-accent-1-bg-active: #002d62;
28
+ --dsn-color-accent-1-border-subtle: #003b81;
29
+ --dsn-color-accent-1-border-default: #3169ad;
30
+ --dsn-color-accent-1-border-hover: #3f74b2;
31
+ --dsn-color-accent-1-border-active: #4e7fb8;
32
+ --dsn-color-accent-1-color-default: #8faed2;
33
+ --dsn-color-accent-1-color-hover: #a5bedb;
34
+ --dsn-color-accent-1-color-active: #bbcee4;
35
+ --dsn-color-accent-1-color-subtle: #648ec1;
36
+ --dsn-color-accent-1-color-document: #ecf1f7;
37
+ --dsn-color-accent-2-bg-document: var(--dsn-color-accent-1-bg-document);
38
+ --dsn-color-accent-2-bg-elevated: var(--dsn-color-accent-1-bg-elevated);
39
+ --dsn-color-accent-2-bg-subtle: var(--dsn-color-accent-1-bg-subtle);
40
+ --dsn-color-accent-2-bg-default: var(--dsn-color-accent-1-bg-default);
41
+ --dsn-color-accent-2-bg-hover: var(--dsn-color-accent-1-bg-hover);
42
+ --dsn-color-accent-2-bg-active: var(--dsn-color-accent-1-bg-active);
43
+ --dsn-color-accent-2-border-subtle: var(--dsn-color-accent-1-border-subtle);
44
+ --dsn-color-accent-2-border-default: var(--dsn-color-accent-1-border-default);
45
+ --dsn-color-accent-2-border-hover: var(--dsn-color-accent-1-border-hover);
46
+ --dsn-color-accent-2-border-active: var(--dsn-color-accent-1-border-active);
47
+ --dsn-color-accent-2-color-default: var(--dsn-color-accent-1-color-default);
48
+ --dsn-color-accent-2-color-hover: var(--dsn-color-accent-1-color-hover);
49
+ --dsn-color-accent-2-color-active: var(--dsn-color-accent-1-color-active);
50
+ --dsn-color-accent-2-color-subtle: var(--dsn-color-accent-1-color-subtle);
51
+ --dsn-color-accent-2-color-document: var(--dsn-color-accent-1-color-document);
52
+ --dsn-color-accent-3-bg-document: var(--dsn-color-accent-1-bg-document);
53
+ --dsn-color-accent-3-bg-elevated: var(--dsn-color-accent-1-bg-elevated);
54
+ --dsn-color-accent-3-bg-subtle: var(--dsn-color-accent-1-bg-subtle);
55
+ --dsn-color-accent-3-bg-default: var(--dsn-color-accent-1-bg-default);
56
+ --dsn-color-accent-3-bg-hover: var(--dsn-color-accent-1-bg-hover);
57
+ --dsn-color-accent-3-bg-active: var(--dsn-color-accent-1-bg-active);
58
+ --dsn-color-accent-3-border-subtle: var(--dsn-color-accent-1-border-subtle);
59
+ --dsn-color-accent-3-border-default: var(--dsn-color-accent-1-border-default);
60
+ --dsn-color-accent-3-border-hover: var(--dsn-color-accent-1-border-hover);
61
+ --dsn-color-accent-3-border-active: var(--dsn-color-accent-1-border-active);
62
+ --dsn-color-accent-3-color-default: var(--dsn-color-accent-1-color-default);
63
+ --dsn-color-accent-3-color-hover: var(--dsn-color-accent-1-color-hover);
64
+ --dsn-color-accent-3-color-active: var(--dsn-color-accent-1-color-active);
65
+ --dsn-color-accent-3-color-subtle: var(--dsn-color-accent-1-color-subtle);
66
+ --dsn-color-accent-3-color-document: var(--dsn-color-accent-1-color-document);
67
+ --dsn-color-action-1-bg-document: var(--dsn-color-accent-1-bg-document);
68
+ --dsn-color-action-1-bg-elevated: var(--dsn-color-accent-1-bg-elevated);
69
+ --dsn-color-action-1-bg-subtle: var(--dsn-color-accent-1-bg-subtle);
70
+ --dsn-color-action-1-bg-default: var(--dsn-color-accent-1-bg-default);
71
+ --dsn-color-action-1-bg-hover: var(--dsn-color-accent-1-bg-hover);
72
+ --dsn-color-action-1-bg-active: var(--dsn-color-accent-1-bg-active);
73
+ --dsn-color-action-1-border-subtle: var(--dsn-color-accent-1-border-subtle);
74
+ --dsn-color-action-1-border-default: var(--dsn-color-accent-1-border-default);
75
+ --dsn-color-action-1-border-hover: var(--dsn-color-accent-1-border-hover);
76
+ --dsn-color-action-1-border-active: var(--dsn-color-accent-1-border-active);
77
+ --dsn-color-action-1-color-default: var(--dsn-color-accent-1-color-default);
78
+ --dsn-color-action-1-color-hover: var(--dsn-color-accent-1-color-hover);
79
+ --dsn-color-action-1-color-active: var(--dsn-color-accent-1-color-active);
80
+ --dsn-color-action-1-color-subtle: var(--dsn-color-accent-1-color-subtle);
81
+ --dsn-color-action-1-color-document: var(--dsn-color-accent-1-color-document);
82
+ --dsn-color-action-2-bg-document: var(--dsn-color-accent-1-bg-document);
83
+ --dsn-color-action-2-bg-elevated: var(--dsn-color-accent-1-bg-elevated);
84
+ --dsn-color-action-2-bg-subtle: var(--dsn-color-accent-1-bg-subtle);
85
+ --dsn-color-action-2-bg-default: var(--dsn-color-accent-1-bg-default);
86
+ --dsn-color-action-2-bg-hover: var(--dsn-color-accent-1-bg-hover);
87
+ --dsn-color-action-2-bg-active: var(--dsn-color-accent-1-bg-active);
88
+ --dsn-color-action-2-border-subtle: var(--dsn-color-accent-1-border-subtle);
89
+ --dsn-color-action-2-border-default: var(--dsn-color-accent-1-border-default);
90
+ --dsn-color-action-2-border-hover: var(--dsn-color-accent-1-border-hover);
91
+ --dsn-color-action-2-border-active: var(--dsn-color-accent-1-border-active);
92
+ --dsn-color-action-2-color-default: var(--dsn-color-accent-1-color-default);
93
+ --dsn-color-action-2-color-hover: var(--dsn-color-accent-1-color-hover);
94
+ --dsn-color-action-2-color-active: var(--dsn-color-accent-1-color-active);
95
+ --dsn-color-action-2-color-subtle: var(--dsn-color-accent-1-color-subtle);
96
+ --dsn-color-action-2-color-document: var(--dsn-color-accent-1-color-document);
97
+ --dsn-color-info-bg-document: var(--dsn-color-accent-1-bg-document);
98
+ --dsn-color-info-bg-elevated: var(--dsn-color-accent-1-bg-elevated);
99
+ --dsn-color-info-bg-subtle: var(--dsn-color-accent-1-bg-subtle);
100
+ --dsn-color-info-bg-default: var(--dsn-color-accent-1-bg-default);
101
+ --dsn-color-info-bg-hover: var(--dsn-color-accent-1-bg-hover);
102
+ --dsn-color-info-bg-active: var(--dsn-color-accent-1-bg-active);
103
+ --dsn-color-info-border-subtle: var(--dsn-color-accent-1-border-subtle);
104
+ --dsn-color-info-border-default: var(--dsn-color-accent-1-border-default);
105
+ --dsn-color-info-border-hover: var(--dsn-color-accent-1-border-hover);
106
+ --dsn-color-info-border-active: var(--dsn-color-accent-1-border-active);
107
+ --dsn-color-info-color-default: var(--dsn-color-accent-1-color-default);
108
+ --dsn-color-info-color-hover: var(--dsn-color-accent-1-color-hover);
109
+ --dsn-color-info-color-active: var(--dsn-color-accent-1-color-active);
110
+ --dsn-color-info-color-subtle: var(--dsn-color-accent-1-color-subtle);
111
+ --dsn-color-info-color-document: var(--dsn-color-accent-1-color-document);
112
+ --dsn-color-negative-bg-document: #1c0000;
113
+ --dsn-color-negative-bg-elevated: #1c0000;
114
+ --dsn-color-negative-bg-subtle: #060000;
115
+ --dsn-color-negative-bg-default: #2e0000;
116
+ --dsn-color-negative-bg-hover: #3d0000;
117
+ --dsn-color-negative-bg-active: #4c0000;
118
+ --dsn-color-negative-border-subtle: #820000;
119
+ --dsn-color-negative-border-default: #e74848;
120
+ --dsn-color-negative-border-hover: #ec6d6d;
121
+ --dsn-color-negative-border-active: #f19191;
122
+ --dsn-color-negative-color-default: #f9b1b1;
123
+ --dsn-color-negative-color-hover: #fbc3c3;
124
+ --dsn-color-negative-color-active: #fcd5d5;
125
+ --dsn-color-negative-color-subtle: #eb8181;
126
+ --dsn-color-negative-color-document: #feeded;
127
+ --dsn-color-positive-bg-document: #001509;
128
+ --dsn-color-positive-bg-elevated: #001509;
129
+ --dsn-color-positive-bg-subtle: #000802;
130
+ --dsn-color-positive-bg-default: #002312;
131
+ --dsn-color-positive-bg-hover: #003019;
132
+ --dsn-color-positive-bg-active: #003e1f;
133
+ --dsn-color-positive-border-subtle: #00481b;
134
+ --dsn-color-positive-border-default: #1ba158;
135
+ --dsn-color-positive-border-hover: #3bb470;
136
+ --dsn-color-positive-border-active: #5bc788;
137
+ --dsn-color-positive-color-default: #8ad3a6;
138
+ --dsn-color-positive-color-hover: #a3dcba;
139
+ --dsn-color-positive-color-active: #bce5ce;
140
+ --dsn-color-positive-color-subtle: #6ac495;
141
+ --dsn-color-positive-color-document: #e4f5ea;
142
+ --dsn-color-warning-bg-document: #190f04;
143
+ --dsn-color-warning-bg-elevated: #190f04;
144
+ --dsn-color-warning-bg-subtle: #0b0501;
145
+ --dsn-color-warning-bg-default: #2b1a09;
146
+ --dsn-color-warning-bg-hover: #3c250d;
147
+ --dsn-color-warning-bg-active: #4d2f10;
148
+ --dsn-color-warning-border-subtle: #5a3511;
149
+ --dsn-color-warning-border-default: #d37f25;
150
+ --dsn-color-warning-border-hover: #de9843;
151
+ --dsn-color-warning-border-active: #e9b062;
152
+ --dsn-color-warning-color-default: #ffb46b;
153
+ --dsn-color-warning-color-hover: #ffc38b;
154
+ --dsn-color-warning-color-active: #ffd2aa;
155
+ --dsn-color-warning-color-subtle: #f3a453;
156
+ --dsn-color-warning-color-document: #ffeedd;
157
+ --dsn-color-neutral-inverse-bg-document: #fbfbfb;
158
+ --dsn-color-neutral-inverse-bg-elevated: #fbfbfb;
159
+ --dsn-color-neutral-inverse-bg-subtle: #f1f1f1;
160
+ --dsn-color-neutral-inverse-bg-default: #ababab;
161
+ --dsn-color-neutral-inverse-bg-hover: #bbbbbb;
162
+ --dsn-color-neutral-inverse-bg-active: #cccccc;
163
+ --dsn-color-neutral-inverse-border-subtle: #bfbfbf;
164
+ --dsn-color-neutral-inverse-border-default: #3e3e3e;
165
+ --dsn-color-neutral-inverse-border-hover: #2e2e2e;
166
+ --dsn-color-neutral-inverse-border-active: #1d1d1d;
167
+ --dsn-color-neutral-inverse-color-default: #000000;
168
+ --dsn-color-neutral-inverse-color-hover: #000000;
169
+ --dsn-color-neutral-inverse-color-active: #000000;
170
+ --dsn-color-neutral-inverse-color-subtle: #3e3e3e;
171
+ --dsn-color-neutral-inverse-color-document: #000000;
172
+ --dsn-color-accent-1-inverse-bg-document: #dcebf9;
173
+ --dsn-color-accent-1-inverse-bg-elevated: #dcebf9;
174
+ --dsn-color-accent-1-inverse-bg-subtle: #ecf1f7;
175
+ --dsn-color-accent-1-inverse-bg-default: #8faed2;
176
+ --dsn-color-accent-1-inverse-bg-hover: #a5bedb;
177
+ --dsn-color-accent-1-inverse-bg-active: #bbcee4;
178
+ --dsn-color-accent-1-inverse-border-subtle: #b0c6df;
179
+ --dsn-color-accent-1-inverse-border-default: #003b81;
180
+ --dsn-color-accent-1-inverse-border-hover: #002d62;
181
+ --dsn-color-accent-1-inverse-border-active: #001d40;
182
+ --dsn-color-accent-1-inverse-color-default: #000000;
183
+ --dsn-color-accent-1-inverse-color-hover: #000000;
184
+ --dsn-color-accent-1-inverse-color-active: #000000;
185
+ --dsn-color-accent-1-inverse-color-subtle: #003b81;
186
+ --dsn-color-accent-1-inverse-color-document: #000000;
187
+ --dsn-color-accent-2-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document);
188
+ --dsn-color-accent-2-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated);
189
+ --dsn-color-accent-2-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle);
190
+ --dsn-color-accent-2-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default);
191
+ --dsn-color-accent-2-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover);
192
+ --dsn-color-accent-2-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active);
193
+ --dsn-color-accent-2-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle);
194
+ --dsn-color-accent-2-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default);
195
+ --dsn-color-accent-2-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover);
196
+ --dsn-color-accent-2-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active);
197
+ --dsn-color-accent-2-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default);
198
+ --dsn-color-accent-2-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover);
199
+ --dsn-color-accent-2-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active);
200
+ --dsn-color-accent-2-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle);
201
+ --dsn-color-accent-2-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document);
202
+ --dsn-color-accent-3-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document);
203
+ --dsn-color-accent-3-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated);
204
+ --dsn-color-accent-3-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle);
205
+ --dsn-color-accent-3-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default);
206
+ --dsn-color-accent-3-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover);
207
+ --dsn-color-accent-3-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active);
208
+ --dsn-color-accent-3-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle);
209
+ --dsn-color-accent-3-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default);
210
+ --dsn-color-accent-3-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover);
211
+ --dsn-color-accent-3-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active);
212
+ --dsn-color-accent-3-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default);
213
+ --dsn-color-accent-3-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover);
214
+ --dsn-color-accent-3-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active);
215
+ --dsn-color-accent-3-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle);
216
+ --dsn-color-accent-3-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document);
217
+ --dsn-color-action-1-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document);
218
+ --dsn-color-action-1-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated);
219
+ --dsn-color-action-1-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle);
220
+ --dsn-color-action-1-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default);
221
+ --dsn-color-action-1-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover);
222
+ --dsn-color-action-1-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active);
223
+ --dsn-color-action-1-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle);
224
+ --dsn-color-action-1-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default);
225
+ --dsn-color-action-1-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover);
226
+ --dsn-color-action-1-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active);
227
+ --dsn-color-action-1-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default);
228
+ --dsn-color-action-1-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover);
229
+ --dsn-color-action-1-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active);
230
+ --dsn-color-action-1-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle);
231
+ --dsn-color-action-1-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document);
232
+ --dsn-color-action-2-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document);
233
+ --dsn-color-action-2-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated);
234
+ --dsn-color-action-2-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle);
235
+ --dsn-color-action-2-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default);
236
+ --dsn-color-action-2-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover);
237
+ --dsn-color-action-2-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active);
238
+ --dsn-color-action-2-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle);
239
+ --dsn-color-action-2-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default);
240
+ --dsn-color-action-2-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover);
241
+ --dsn-color-action-2-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active);
242
+ --dsn-color-action-2-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default);
243
+ --dsn-color-action-2-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover);
244
+ --dsn-color-action-2-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active);
245
+ --dsn-color-action-2-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle);
246
+ --dsn-color-action-2-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document);
247
+ --dsn-color-info-inverse-bg-document: #dcebf9;
248
+ --dsn-color-info-inverse-bg-elevated: #dcebf9;
249
+ --dsn-color-info-inverse-bg-subtle: #ecf1f7;
250
+ --dsn-color-info-inverse-bg-default: #8faed2;
251
+ --dsn-color-info-inverse-bg-hover: #a5bedb;
252
+ --dsn-color-info-inverse-bg-active: #bbcee4;
253
+ --dsn-color-info-inverse-border-subtle: #b0c6df;
254
+ --dsn-color-info-inverse-border-default: #003b81;
255
+ --dsn-color-info-inverse-border-hover: #002d62;
256
+ --dsn-color-info-inverse-border-active: #001d40;
257
+ --dsn-color-info-inverse-color-default: #000000;
258
+ --dsn-color-info-inverse-color-hover: #000000;
259
+ --dsn-color-info-inverse-color-active: #000000;
260
+ --dsn-color-info-inverse-color-subtle: #003b81;
261
+ --dsn-color-info-inverse-color-document: #000000;
262
+ --dsn-color-negative-inverse-bg-document: #fcdada;
263
+ --dsn-color-negative-inverse-bg-elevated: #fcdada;
264
+ --dsn-color-negative-inverse-bg-subtle: #feeded;
265
+ --dsn-color-negative-inverse-bg-default: #f9b1b1;
266
+ --dsn-color-negative-inverse-bg-hover: #fbc3c3;
267
+ --dsn-color-negative-inverse-bg-active: #fcd5d5;
268
+ --dsn-color-negative-inverse-border-subtle: #f3abab;
269
+ --dsn-color-negative-inverse-border-default: #820000;
270
+ --dsn-color-negative-inverse-border-hover: #4c0000;
271
+ --dsn-color-negative-inverse-border-active: #2e0000;
272
+ --dsn-color-negative-inverse-color-default: #000000;
273
+ --dsn-color-negative-inverse-color-hover: #000000;
274
+ --dsn-color-negative-inverse-color-active: #000000;
275
+ --dsn-color-negative-inverse-color-subtle: #820000;
276
+ --dsn-color-negative-inverse-color-document: #000000;
277
+ --dsn-color-positive-inverse-bg-document: #cce8d7;
278
+ --dsn-color-positive-inverse-bg-elevated: #cce8d7;
279
+ --dsn-color-positive-inverse-bg-subtle: #e4f5ea;
280
+ --dsn-color-positive-inverse-bg-default: #8ad3a6;
281
+ --dsn-color-positive-inverse-bg-hover: #a3dcba;
282
+ --dsn-color-positive-inverse-bg-active: #bce5ce;
283
+ --dsn-color-positive-inverse-border-subtle: #7dca9e;
284
+ --dsn-color-positive-inverse-border-default: #00481b;
285
+ --dsn-color-positive-inverse-border-hover: #003e1f;
286
+ --dsn-color-positive-inverse-border-active: #002312;
287
+ --dsn-color-positive-inverse-color-default: #000000;
288
+ --dsn-color-positive-inverse-color-hover: #000000;
289
+ --dsn-color-positive-inverse-color-active: #000000;
290
+ --dsn-color-positive-inverse-color-subtle: #00481b;
291
+ --dsn-color-positive-inverse-color-document: #000000;
292
+ --dsn-color-warning-inverse-bg-document: #ffeac6;
293
+ --dsn-color-warning-inverse-bg-elevated: #ffeac6;
294
+ --dsn-color-warning-inverse-bg-subtle: #ffeedd;
295
+ --dsn-color-warning-inverse-bg-default: #ffb46b;
296
+ --dsn-color-warning-inverse-bg-hover: #ffc38b;
297
+ --dsn-color-warning-inverse-bg-active: #ffd2aa;
298
+ --dsn-color-warning-inverse-border-subtle: #ffa754;
299
+ --dsn-color-warning-inverse-border-default: #5a3511;
300
+ --dsn-color-warning-inverse-border-hover: #4d2f10;
301
+ --dsn-color-warning-inverse-border-active: #2b1a09;
302
+ --dsn-color-warning-inverse-color-default: #000000;
303
+ --dsn-color-warning-inverse-color-hover: #000000;
304
+ --dsn-color-warning-inverse-color-active: #000000;
305
+ --dsn-color-warning-inverse-color-subtle: #5a3511;
306
+ --dsn-color-warning-inverse-color-document: #000000;
307
+ --dsn-color-transparent: rgba(0, 0, 0, 0);
308
+ --dsn-color-shadow-direct: color-mix(in srgb, black 60%, transparent);
309
+ --dsn-color-shadow-ambient: color-mix(in srgb, black 40%, transparent);
310
+ --dsn-color-shadow-highlight: color-mix(in srgb, white 8%, transparent);
311
+ --dsn-color-shadow-scroll: rgba(255, 255, 255, 0.12);
312
+ --dsn-heading-color: var(--dsn-color-neutral-color-document);
313
+ --dsn-form-control-accent-color: var(--dsn-color-action-1-color-default);
314
+ --dsn-form-control-background-color: var(--dsn-color-neutral-bg-document);
315
+ --dsn-form-control-border-color: var(--dsn-color-neutral-border-default);
316
+ --dsn-form-control-color: var(--dsn-color-neutral-color-document);
317
+ --dsn-form-control-placeholder-color: var(--dsn-color-neutral-color-subtle);
318
+ --dsn-form-control-hover-accent-color: var(--dsn-color-action-1-color-hover);
319
+ --dsn-form-control-hover-background-color: var(--dsn-color-neutral-bg-hover);
320
+ --dsn-form-control-hover-border-color: var(--dsn-color-neutral-border-hover);
321
+ --dsn-form-control-hover-color: var(--dsn-form-control-color);
322
+ --dsn-form-control-focus-background-color: var(--dsn-form-control-background-color);
323
+ --dsn-form-control-focus-border-color: var(--dsn-color-neutral-border-active);
324
+ --dsn-form-control-focus-color: var(--dsn-form-control-color);
325
+ --dsn-form-control-active-accent-color: var(--dsn-color-action-1-color-active);
326
+ --dsn-form-control-active-background-color: var(--dsn-color-neutral-bg-active);
327
+ --dsn-form-control-active-border-color: var(--dsn-color-neutral-border-active);
328
+ --dsn-form-control-active-color: var(--dsn-form-control-color);
329
+ --dsn-form-control-disabled-accent-color: var(--dsn-color-neutral-bg-subtle);
330
+ --dsn-form-control-disabled-background-color: var(--dsn-color-neutral-bg-subtle);
331
+ --dsn-form-control-disabled-border-color: var(--dsn-color-neutral-border-subtle);
332
+ --dsn-form-control-disabled-color: var(--dsn-color-neutral-color-subtle);
333
+ --dsn-form-control-invalid-background-color: var(--dsn-color-negative-bg-default);
334
+ --dsn-form-control-invalid-border-color: var(--dsn-color-negative-border-default);
335
+ --dsn-form-control-invalid-color: var(--dsn-color-negative-color-default);
336
+ --dsn-form-control-read-only-background-color: var(--dsn-color-neutral-bg-subtle);
337
+ --dsn-form-control-read-only-border-color: var(--dsn-color-transparent);
338
+ --dsn-form-control-read-only-color: var(--dsn-color-neutral-color-document);
339
+ --dsn-focus-background-color: #ffdd00;
340
+ --dsn-focus-color: #0b0c0c;
341
+ --dsn-focus-outline-color: #f4f4f4;
342
+ --dsn-focus-inverse-outline-color: #0b0c0c;
343
+ --dsn-backdrop-background-color: var(--dsn-color-neutral-bg-document);
344
+ }
package/dist/css/scoped/start-light-hero-image.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Sep 2026 08:02:24 GMT
3
+ * Generated on Wed, 02 Sep 2026 09:06:12 GMT
4
4
  */
5
5
 
6
6
  .dsn-theme-start .dsn-hero--image {
package/dist/css/scoped/start-light.css ADDED
@@ -0,0 +1,344 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 02 Sep 2026 09:06:11 GMT
4
+ */
5
+
6
+ .dsn-theme-start {
7
+ --dsn-color-neutral-bg-document: #fcfcfc;
8
+ --dsn-color-neutral-bg-elevated: #fcfcfc;
9
+ --dsn-color-neutral-bg-subtle: #f6f6f6;
10
+ --dsn-color-neutral-bg-default: #f1f1f1;
11
+ --dsn-color-neutral-bg-hover: #ebebeb;
12
+ --dsn-color-neutral-bg-active: #e5e5e5;
13
+ --dsn-color-neutral-border-subtle: #c4c4c4;
14
+ --dsn-color-neutral-border-default: #868686;
15
+ --dsn-color-neutral-border-hover: #7c7c7c;
16
+ --dsn-color-neutral-border-active: #727272;
17
+ --dsn-color-neutral-color-default: #595959;
18
+ --dsn-color-neutral-color-hover: #4b4b4b;
19
+ --dsn-color-neutral-color-active: #3e3e3e;
20
+ --dsn-color-neutral-color-subtle: #636363;
21
+ --dsn-color-neutral-color-document: #1b1b1b;
22
+ --dsn-color-accent-1-bg-document: #fbfcfd;
23
+ --dsn-color-accent-1-bg-elevated: #fbfcfd;
24
+ --dsn-color-accent-1-bg-subtle: #f4f7fa;
25
+ --dsn-color-accent-1-bg-default: #ecf1f7;
26
+ --dsn-color-accent-1-bg-hover: #e4ecf4;
27
+ --dsn-color-accent-1-bg-active: #dde6f1;
28
+ --dsn-color-accent-1-border-subtle: #b0c6df;
29
+ --dsn-color-accent-1-border-default: #5c89be;
30
+ --dsn-color-accent-1-border-hover: #4e7fb8;
31
+ --dsn-color-accent-1-border-active: #3f74b2;
32
+ --dsn-color-accent-1-color-default: #1b59a4;
33
+ --dsn-color-accent-1-color-hover: #04499a;
34
+ --dsn-color-accent-1-color-active: #003b81;
35
+ --dsn-color-accent-1-color-subtle: #2964aa;
36
+ --dsn-color-accent-1-color-document: #001b3c;
37
+ --dsn-color-accent-2-bg-document: var(--dsn-color-accent-1-bg-document);
38
+ --dsn-color-accent-2-bg-elevated: var(--dsn-color-accent-1-bg-elevated);
39
+ --dsn-color-accent-2-bg-subtle: var(--dsn-color-accent-1-bg-subtle);
40
+ --dsn-color-accent-2-bg-default: var(--dsn-color-accent-1-bg-default);
41
+ --dsn-color-accent-2-bg-hover: var(--dsn-color-accent-1-bg-hover);
42
+ --dsn-color-accent-2-bg-active: var(--dsn-color-accent-1-bg-active);
43
+ --dsn-color-accent-2-border-subtle: var(--dsn-color-accent-1-border-subtle);
44
+ --dsn-color-accent-2-border-default: var(--dsn-color-accent-1-border-default);
45
+ --dsn-color-accent-2-border-hover: var(--dsn-color-accent-1-border-hover);
46
+ --dsn-color-accent-2-border-active: var(--dsn-color-accent-1-border-active);
47
+ --dsn-color-accent-2-color-default: var(--dsn-color-accent-1-color-default);
48
+ --dsn-color-accent-2-color-hover: var(--dsn-color-accent-1-color-hover);
49
+ --dsn-color-accent-2-color-active: var(--dsn-color-accent-1-color-active);
50
+ --dsn-color-accent-2-color-subtle: var(--dsn-color-accent-1-color-subtle);
51
+ --dsn-color-accent-2-color-document: var(--dsn-color-accent-1-color-document);
52
+ --dsn-color-accent-3-bg-document: var(--dsn-color-accent-1-bg-document);
53
+ --dsn-color-accent-3-bg-elevated: var(--dsn-color-accent-1-bg-elevated);
54
+ --dsn-color-accent-3-bg-subtle: var(--dsn-color-accent-1-bg-subtle);
55
+ --dsn-color-accent-3-bg-default: var(--dsn-color-accent-1-bg-default);
56
+ --dsn-color-accent-3-bg-hover: var(--dsn-color-accent-1-bg-hover);
57
+ --dsn-color-accent-3-bg-active: var(--dsn-color-accent-1-bg-active);
58
+ --dsn-color-accent-3-border-subtle: var(--dsn-color-accent-1-border-subtle);
59
+ --dsn-color-accent-3-border-default: var(--dsn-color-accent-1-border-default);
60
+ --dsn-color-accent-3-border-hover: var(--dsn-color-accent-1-border-hover);
61
+ --dsn-color-accent-3-border-active: var(--dsn-color-accent-1-border-active);
62
+ --dsn-color-accent-3-color-default: var(--dsn-color-accent-1-color-default);
63
+ --dsn-color-accent-3-color-hover: var(--dsn-color-accent-1-color-hover);
64
+ --dsn-color-accent-3-color-active: var(--dsn-color-accent-1-color-active);
65
+ --dsn-color-accent-3-color-subtle: var(--dsn-color-accent-1-color-subtle);
66
+ --dsn-color-accent-3-color-document: var(--dsn-color-accent-1-color-document);
67
+ --dsn-color-action-1-bg-document: var(--dsn-color-accent-1-bg-document);
68
+ --dsn-color-action-1-bg-elevated: var(--dsn-color-accent-1-bg-elevated);
69
+ --dsn-color-action-1-bg-subtle: var(--dsn-color-accent-1-bg-subtle);
70
+ --dsn-color-action-1-bg-default: var(--dsn-color-accent-1-bg-default);
71
+ --dsn-color-action-1-bg-hover: var(--dsn-color-accent-1-bg-hover);
72
+ --dsn-color-action-1-bg-active: var(--dsn-color-accent-1-bg-active);
73
+ --dsn-color-action-1-border-subtle: var(--dsn-color-accent-1-border-subtle);
74
+ --dsn-color-action-1-border-default: var(--dsn-color-accent-1-border-default);
75
+ --dsn-color-action-1-border-hover: var(--dsn-color-accent-1-border-hover);
76
+ --dsn-color-action-1-border-active: var(--dsn-color-accent-1-border-active);
77
+ --dsn-color-action-1-color-default: var(--dsn-color-accent-1-color-default);
78
+ --dsn-color-action-1-color-hover: var(--dsn-color-accent-1-color-hover);
79
+ --dsn-color-action-1-color-active: var(--dsn-color-accent-1-color-active);
80
+ --dsn-color-action-1-color-subtle: var(--dsn-color-accent-1-color-subtle);
81
+ --dsn-color-action-1-color-document: var(--dsn-color-accent-1-color-document);
82
+ --dsn-color-action-2-bg-document: var(--dsn-color-accent-1-bg-document);
83
+ --dsn-color-action-2-bg-elevated: var(--dsn-color-accent-1-bg-elevated);
84
+ --dsn-color-action-2-bg-subtle: var(--dsn-color-accent-1-bg-subtle);
85
+ --dsn-color-action-2-bg-default: var(--dsn-color-accent-1-bg-default);
86
+ --dsn-color-action-2-bg-hover: var(--dsn-color-accent-1-bg-hover);
87
+ --dsn-color-action-2-bg-active: var(--dsn-color-accent-1-bg-active);
88
+ --dsn-color-action-2-border-subtle: var(--dsn-color-accent-1-border-subtle);
89
+ --dsn-color-action-2-border-default: var(--dsn-color-accent-1-border-default);
90
+ --dsn-color-action-2-border-hover: var(--dsn-color-accent-1-border-hover);
91
+ --dsn-color-action-2-border-active: var(--dsn-color-accent-1-border-active);
92
+ --dsn-color-action-2-color-default: var(--dsn-color-accent-1-color-default);
93
+ --dsn-color-action-2-color-hover: var(--dsn-color-accent-1-color-hover);
94
+ --dsn-color-action-2-color-active: var(--dsn-color-accent-1-color-active);
95
+ --dsn-color-action-2-color-subtle: var(--dsn-color-accent-1-color-subtle);
96
+ --dsn-color-action-2-color-document: var(--dsn-color-accent-1-color-document);
97
+ --dsn-color-info-bg-document: var(--dsn-color-accent-1-bg-document);
98
+ --dsn-color-info-bg-elevated: var(--dsn-color-accent-1-bg-elevated);
99
+ --dsn-color-info-bg-subtle: var(--dsn-color-accent-1-bg-subtle);
100
+ --dsn-color-info-bg-default: var(--dsn-color-accent-1-bg-default);
101
+ --dsn-color-info-bg-hover: var(--dsn-color-accent-1-bg-hover);
102
+ --dsn-color-info-bg-active: var(--dsn-color-accent-1-bg-active);
103
+ --dsn-color-info-border-subtle: var(--dsn-color-accent-1-border-subtle);
104
+ --dsn-color-info-border-default: var(--dsn-color-accent-1-border-default);
105
+ --dsn-color-info-border-hover: var(--dsn-color-accent-1-border-hover);
106
+ --dsn-color-info-border-active: var(--dsn-color-accent-1-border-active);
107
+ --dsn-color-info-color-default: var(--dsn-color-accent-1-color-default);
108
+ --dsn-color-info-color-hover: var(--dsn-color-accent-1-color-hover);
109
+ --dsn-color-info-color-active: var(--dsn-color-accent-1-color-active);
110
+ --dsn-color-info-color-subtle: var(--dsn-color-accent-1-color-subtle);
111
+ --dsn-color-info-color-document: var(--dsn-color-accent-1-color-document);
112
+ --dsn-color-negative-bg-document: #fffbfb;
113
+ --dsn-color-negative-bg-elevated: #fffbfb;
114
+ --dsn-color-negative-bg-subtle: #fef4f4;
115
+ --dsn-color-negative-bg-default: #feeded;
116
+ --dsn-color-negative-bg-hover: #fde6e6;
117
+ --dsn-color-negative-bg-active: #fddede;
118
+ --dsn-color-negative-border-subtle: #f9b1b1;
119
+ --dsn-color-negative-border-default: #f14848;
120
+ --dsn-color-negative-border-hover: #ef2929;
121
+ --dsn-color-negative-border-active: #e60000;
122
+ --dsn-color-negative-color-default: #b70000;
123
+ --dsn-color-negative-color-hover: #9c0000;
124
+ --dsn-color-negative-color-active: #930000;
125
+ --dsn-color-negative-color-subtle: #ca0000;
126
+ --dsn-color-negative-color-document: #410000;
127
+ --dsn-color-positive-bg-document: #fafdfb;
128
+ --dsn-color-positive-bg-elevated: #fafdfb;
129
+ --dsn-color-positive-bg-subtle: #eff9f3;
130
+ --dsn-color-positive-bg-default: #e4f5ea;
131
+ --dsn-color-positive-bg-hover: #d9f1e2;
132
+ --dsn-color-positive-bg-active: #ceedd9;
133
+ --dsn-color-positive-border-subtle: #8ad3a6;
134
+ --dsn-color-positive-border-default: #009b3a;
135
+ --dsn-color-positive-border-hover: #009036;
136
+ --dsn-color-positive-border-active: #008432;
137
+ --dsn-color-positive-color-default: #006827;
138
+ --dsn-color-positive-color-hover: #005821;
139
+ --dsn-color-positive-color-active: #00481b;
140
+ --dsn-color-positive-color-subtle: #00732b;
141
+ --dsn-color-positive-color-document: #00210c;
142
+ --dsn-color-warning-bg-document: #fffcf8;
143
+ --dsn-color-warning-bg-elevated: #fffcf8;
144
+ --dsn-color-warning-bg-subtle: #fff5eb;
145
+ --dsn-color-warning-bg-default: #ffeedd;
146
+ --dsn-color-warning-bg-hover: #ffe7d0;
147
+ --dsn-color-warning-bg-active: #ffe0c2;
148
+ --dsn-color-warning-border-subtle: #ffb46b;
149
+ --dsn-color-warning-border-default: #c8700e;
150
+ --dsn-color-warning-border-hover: #b86810;
151
+ --dsn-color-warning-border-active: #a96011;
152
+ --dsn-color-warning-color-default: #844c12;
153
+ --dsn-color-warning-color-hover: #6f4012;
154
+ --dsn-color-warning-color-active: #5a3511;
155
+ --dsn-color-warning-color-subtle: #935412;
156
+ --dsn-color-warning-color-document: #27190a;
157
+ --dsn-color-neutral-inverse-bg-document: #242424;
158
+ --dsn-color-neutral-inverse-bg-elevated: #242424;
159
+ --dsn-color-neutral-inverse-bg-subtle: #1b1b1b;
160
+ --dsn-color-neutral-inverse-bg-default: #595959;
161
+ --dsn-color-neutral-inverse-bg-hover: #4b4b4b;
162
+ --dsn-color-neutral-inverse-bg-active: #3e3e3e;
163
+ --dsn-color-neutral-inverse-border-subtle: #474747;
164
+ --dsn-color-neutral-inverse-border-default: #c9c9c9;
165
+ --dsn-color-neutral-inverse-border-hover: #d4d4d4;
166
+ --dsn-color-neutral-inverse-border-active: #dfdfdf;
167
+ --dsn-color-neutral-inverse-color-default: #ffffff;
168
+ --dsn-color-neutral-inverse-color-hover: #ffffff;
169
+ --dsn-color-neutral-inverse-color-active: #ffffff;
170
+ --dsn-color-neutral-inverse-color-subtle: #c4c4c4;
171
+ --dsn-color-neutral-inverse-color-document: #ffffff;
172
+ --dsn-color-accent-1-inverse-bg-document: #00234d;
173
+ --dsn-color-accent-1-inverse-bg-elevated: #00234d;
174
+ --dsn-color-accent-1-inverse-bg-subtle: #001b3c;
175
+ --dsn-color-accent-1-inverse-bg-default: #1b59a4;
176
+ --dsn-color-accent-1-inverse-bg-hover: #04499a;
177
+ --dsn-color-accent-1-inverse-bg-active: #003b81;
178
+ --dsn-color-accent-1-inverse-border-subtle: #004494;
179
+ --dsn-color-accent-1-inverse-border-default: #b8cbe2;
180
+ --dsn-color-accent-1-inverse-border-hover: #c6d6e8;
181
+ --dsn-color-accent-1-inverse-border-active: #d5e1ee;
182
+ --dsn-color-accent-1-inverse-color-default: #ffffff;
183
+ --dsn-color-accent-1-inverse-color-hover: #ffffff;
184
+ --dsn-color-accent-1-inverse-color-active: #ffffff;
185
+ --dsn-color-accent-1-inverse-color-subtle: #b0c6df;
186
+ --dsn-color-accent-1-inverse-color-document: #ffffff;
187
+ --dsn-color-accent-2-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document);
188
+ --dsn-color-accent-2-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated);
189
+ --dsn-color-accent-2-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle);
190
+ --dsn-color-accent-2-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default);
191
+ --dsn-color-accent-2-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover);
192
+ --dsn-color-accent-2-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active);
193
+ --dsn-color-accent-2-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle);
194
+ --dsn-color-accent-2-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default);
195
+ --dsn-color-accent-2-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover);
196
+ --dsn-color-accent-2-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active);
197
+ --dsn-color-accent-2-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default);
198
+ --dsn-color-accent-2-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover);
199
+ --dsn-color-accent-2-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active);
200
+ --dsn-color-accent-2-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle);
201
+ --dsn-color-accent-2-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document);
202
+ --dsn-color-accent-3-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document);
203
+ --dsn-color-accent-3-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated);
204
+ --dsn-color-accent-3-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle);
205
+ --dsn-color-accent-3-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default);
206
+ --dsn-color-accent-3-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover);
207
+ --dsn-color-accent-3-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active);
208
+ --dsn-color-accent-3-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle);
209
+ --dsn-color-accent-3-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default);
210
+ --dsn-color-accent-3-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover);
211
+ --dsn-color-accent-3-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active);
212
+ --dsn-color-accent-3-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default);
213
+ --dsn-color-accent-3-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover);
214
+ --dsn-color-accent-3-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active);
215
+ --dsn-color-accent-3-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle);
216
+ --dsn-color-accent-3-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document);
217
+ --dsn-color-action-1-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document);
218
+ --dsn-color-action-1-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated);
219
+ --dsn-color-action-1-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle);
220
+ --dsn-color-action-1-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default);
221
+ --dsn-color-action-1-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover);
222
+ --dsn-color-action-1-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active);
223
+ --dsn-color-action-1-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle);
224
+ --dsn-color-action-1-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default);
225
+ --dsn-color-action-1-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover);
226
+ --dsn-color-action-1-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active);
227
+ --dsn-color-action-1-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default);
228
+ --dsn-color-action-1-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover);
229
+ --dsn-color-action-1-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active);
230
+ --dsn-color-action-1-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle);
231
+ --dsn-color-action-1-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document);
232
+ --dsn-color-action-2-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document);
233
+ --dsn-color-action-2-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated);
234
+ --dsn-color-action-2-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle);
235
+ --dsn-color-action-2-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default);
236
+ --dsn-color-action-2-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover);
237
+ --dsn-color-action-2-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active);
238
+ --dsn-color-action-2-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle);
239
+ --dsn-color-action-2-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default);
240
+ --dsn-color-action-2-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover);
241
+ --dsn-color-action-2-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active);
242
+ --dsn-color-action-2-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default);
243
+ --dsn-color-action-2-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover);
244
+ --dsn-color-action-2-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active);
245
+ --dsn-color-action-2-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle);
246
+ --dsn-color-action-2-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document);
247
+ --dsn-color-info-inverse-bg-document: #00234d;
248
+ --dsn-color-info-inverse-bg-elevated: #00234d;
249
+ --dsn-color-info-inverse-bg-subtle: #001b3c;
250
+ --dsn-color-info-inverse-bg-default: #1b59a4;
251
+ --dsn-color-info-inverse-bg-hover: #04499a;
252
+ --dsn-color-info-inverse-bg-active: #003b81;
253
+ --dsn-color-info-inverse-border-subtle: #004494;
254
+ --dsn-color-info-inverse-border-default: #b8cbe2;
255
+ --dsn-color-info-inverse-border-hover: #c6d6e8;
256
+ --dsn-color-info-inverse-border-active: #d5e1ee;
257
+ --dsn-color-info-inverse-color-default: #ffffff;
258
+ --dsn-color-info-inverse-color-hover: #ffffff;
259
+ --dsn-color-info-inverse-color-active: #ffffff;
260
+ --dsn-color-info-inverse-color-subtle: #b0c6df;
261
+ --dsn-color-info-inverse-color-document: #ffffff;
262
+ --dsn-color-negative-inverse-bg-document: #510000;
263
+ --dsn-color-negative-inverse-bg-elevated: #510000;
264
+ --dsn-color-negative-inverse-bg-subtle: #410000;
265
+ --dsn-color-negative-inverse-bg-default: #b70000;
266
+ --dsn-color-negative-inverse-bg-hover: #9c0000;
267
+ --dsn-color-negative-inverse-bg-active: #820000;
268
+ --dsn-color-negative-inverse-border-subtle: #930000;
269
+ --dsn-color-negative-inverse-border-default: #fab9b9;
270
+ --dsn-color-negative-inverse-border-hover: #fbc8c8;
271
+ --dsn-color-negative-inverse-border-active: #fcd7d7;
272
+ --dsn-color-negative-inverse-color-default: #ffffff;
273
+ --dsn-color-negative-inverse-color-hover: #ffffff;
274
+ --dsn-color-negative-inverse-color-active: #ffffff;
275
+ --dsn-color-negative-inverse-color-subtle: #f9b1b1;
276
+ --dsn-color-negative-inverse-color-document: #ffffff;
277
+ --dsn-color-positive-inverse-bg-document: #002b10;
278
+ --dsn-color-positive-inverse-bg-elevated: #002b10;
279
+ --dsn-color-positive-inverse-bg-subtle: #00210c;
280
+ --dsn-color-positive-inverse-bg-default: #006827;
281
+ --dsn-color-positive-inverse-bg-hover: #005821;
282
+ --dsn-color-positive-inverse-bg-active: #00481b;
283
+ --dsn-color-positive-inverse-border-subtle: #00531f;
284
+ --dsn-color-positive-inverse-border-default: #96d8ae;
285
+ --dsn-color-positive-inverse-border-hover: #ace0c0;
286
+ --dsn-color-positive-inverse-border-active: #c3e9d1;
287
+ --dsn-color-positive-inverse-color-default: #ffffff;
288
+ --dsn-color-positive-inverse-color-hover: #ffffff;
289
+ --dsn-color-positive-inverse-color-active: #ffffff;
290
+ --dsn-color-positive-inverse-color-subtle: #8ad3a6;
291
+ --dsn-color-positive-inverse-color-document: #ffffff;
292
+ --dsn-color-warning-inverse-bg-document: #331f0d;
293
+ --dsn-color-warning-inverse-bg-elevated: #331f0d;
294
+ --dsn-color-warning-inverse-bg-subtle: #27190a;
295
+ --dsn-color-warning-inverse-bg-default: #844c12;
296
+ --dsn-color-warning-inverse-bg-hover: #6f4012;
297
+ --dsn-color-warning-inverse-bg-active: #5a3511;
298
+ --dsn-color-warning-inverse-border-subtle: #683c12;
299
+ --dsn-color-warning-inverse-border-default: #ffbc7a;
300
+ --dsn-color-warning-inverse-border-hover: #ffcb98;
301
+ --dsn-color-warning-inverse-border-active: #ffd9b4;
302
+ --dsn-color-warning-inverse-color-default: #ffffff;
303
+ --dsn-color-warning-inverse-color-hover: #ffffff;
304
+ --dsn-color-warning-inverse-color-active: #ffffff;
305
+ --dsn-color-warning-inverse-color-subtle: #ffb46b;
306
+ --dsn-color-warning-inverse-color-document: #ffffff;
307
+ --dsn-color-transparent: rgba(0, 0, 0, 0);
308
+ --dsn-color-shadow-direct: color-mix(in srgb, black 12%, transparent);
309
+ --dsn-color-shadow-ambient: color-mix(in srgb, black 6%, transparent);
310
+ --dsn-color-shadow-highlight: rgba(0, 0, 0, 0);
311
+ --dsn-color-shadow-scroll: rgba(0, 0, 0, 0.15);
312
+ --dsn-heading-color: var(--dsn-color-neutral-color-document);
313
+ --dsn-form-control-accent-color: var(--dsn-color-action-1-color-default);
314
+ --dsn-form-control-background-color: var(--dsn-color-neutral-bg-document);
315
+ --dsn-form-control-border-color: var(--dsn-color-neutral-border-default);
316
+ --dsn-form-control-color: var(--dsn-color-neutral-color-document);
317
+ --dsn-form-control-placeholder-color: var(--dsn-color-neutral-color-subtle);
318
+ --dsn-form-control-hover-accent-color: var(--dsn-color-action-1-color-hover);
319
+ --dsn-form-control-hover-background-color: var(--dsn-color-neutral-bg-hover);
320
+ --dsn-form-control-hover-border-color: var(--dsn-color-neutral-border-hover);
321
+ --dsn-form-control-hover-color: var(--dsn-form-control-color);
322
+ --dsn-form-control-focus-background-color: var(--dsn-form-control-background-color);
323
+ --dsn-form-control-focus-border-color: var(--dsn-color-neutral-border-active);
324
+ --dsn-form-control-focus-color: var(--dsn-form-control-color);
325
+ --dsn-form-control-active-accent-color: var(--dsn-color-action-1-color-active);
326
+ --dsn-form-control-active-background-color: var(--dsn-color-neutral-bg-active);
327
+ --dsn-form-control-active-border-color: var(--dsn-color-neutral-border-active);
328
+ --dsn-form-control-active-color: var(--dsn-form-control-color);
329
+ --dsn-form-control-disabled-accent-color: var(--dsn-color-neutral-bg-subtle);
330
+ --dsn-form-control-disabled-background-color: var(--dsn-color-neutral-bg-subtle);
331
+ --dsn-form-control-disabled-border-color: var(--dsn-color-neutral-border-subtle);
332
+ --dsn-form-control-disabled-color: var(--dsn-color-neutral-color-subtle);
333
+ --dsn-form-control-invalid-background-color: var(--dsn-color-negative-bg-default);
334
+ --dsn-form-control-invalid-border-color: var(--dsn-color-negative-border-default);
335
+ --dsn-form-control-invalid-color: var(--dsn-color-negative-color-default);
336
+ --dsn-form-control-read-only-background-color: var(--dsn-color-neutral-bg-subtle);
337
+ --dsn-form-control-read-only-border-color: var(--dsn-color-transparent);
338
+ --dsn-form-control-read-only-color: var(--dsn-color-neutral-color-document);
339
+ --dsn-focus-background-color: #ffdd00;
340
+ --dsn-focus-color: #0b0c0c;
341
+ --dsn-focus-outline-color: #0b0c0c;
342
+ --dsn-focus-inverse-outline-color: #ffffff;
343
+ --dsn-backdrop-background-color: var(--dsn-color-neutral-inverse-bg-document);
344
+ }
package/dist/css/scoped/wireframe-dark.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Sep 2026 08:02:23 GMT
3
+ * Generated on Wed, 02 Sep 2026 09:06:12 GMT
4
4
  */
5
5
 
6
6
  .dsn-theme-wireframe.dsn-mode-dark, .dsn-mode-dark .dsn-theme-wireframe {
package/dist/css/scoped/wireframe-light-hero-image.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Sep 2026 08:02:24 GMT
3
+ * Generated on Wed, 02 Sep 2026 09:06:12 GMT
4
4
  */
5
5
 
6
6
  .dsn-theme-wireframe .dsn-hero--image {
package/dist/css/scoped/wireframe-light.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Sep 2026 08:02:23 GMT
3
+ * Generated on Wed, 02 Sep 2026 09:06:12 GMT
4
4
  */
5
5
 
6
6
  .dsn-theme-wireframe {
package/dist/css/variables-dark-scoped.css ADDED
@@ -0,0 +1,344 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 02 Sep 2026 09:06:11 GMT
4
+ */
5
+
6
+ .dsn-theme-start.dsn-mode-dark, .dsn-mode-dark .dsn-theme-start {
7
+ --dsn-color-neutral-bg-document: #111111;
8
+ --dsn-color-neutral-bg-elevated: #111111;
9
+ --dsn-color-neutral-bg-subtle: #040404;
10
+ --dsn-color-neutral-bg-default: #1d1d1d;
11
+ --dsn-color-neutral-bg-hover: #262626;
12
+ --dsn-color-neutral-bg-active: #2e2e2e;
13
+ --dsn-color-neutral-border-subtle: #3e3e3e;
14
+ --dsn-color-neutral-border-default: #686868;
15
+ --dsn-color-neutral-border-hover: #727272;
16
+ --dsn-color-neutral-border-active: #7c7c7c;
17
+ --dsn-color-neutral-color-default: #ababab;
18
+ --dsn-color-neutral-color-hover: #bbbbbb;
19
+ --dsn-color-neutral-color-active: #cccccc;
20
+ --dsn-color-neutral-color-subtle: #8b8b8b;
21
+ --dsn-color-neutral-color-document: #f1f1f1;
22
+ --dsn-color-accent-1-bg-document: #001126;
23
+ --dsn-color-accent-1-bg-elevated: #001126;
24
+ --dsn-color-accent-1-bg-subtle: #000409;
25
+ --dsn-color-accent-1-bg-default: #001d40;
26
+ --dsn-color-accent-1-bg-hover: #002551;
27
+ --dsn-color-accent-1-bg-active: #002d62;
28
+ --dsn-color-accent-1-border-subtle: #003b81;
29
+ --dsn-color-accent-1-border-default: #3169ad;
30
+ --dsn-color-accent-1-border-hover: #3f74b2;
31
+ --dsn-color-accent-1-border-active: #4e7fb8;
32
+ --dsn-color-accent-1-color-default: #8faed2;
33
+ --dsn-color-accent-1-color-hover: #a5bedb;
34
+ --dsn-color-accent-1-color-active: #bbcee4;
35
+ --dsn-color-accent-1-color-subtle: #648ec1;
36
+ --dsn-color-accent-1-color-document: #ecf1f7;
37
+ --dsn-color-accent-2-bg-document: var(--dsn-color-accent-1-bg-document);
38
+ --dsn-color-accent-2-bg-elevated: var(--dsn-color-accent-1-bg-elevated);
39
+ --dsn-color-accent-2-bg-subtle: var(--dsn-color-accent-1-bg-subtle);
40
+ --dsn-color-accent-2-bg-default: var(--dsn-color-accent-1-bg-default);
41
+ --dsn-color-accent-2-bg-hover: var(--dsn-color-accent-1-bg-hover);
42
+ --dsn-color-accent-2-bg-active: var(--dsn-color-accent-1-bg-active);
43
+ --dsn-color-accent-2-border-subtle: var(--dsn-color-accent-1-border-subtle);
44
+ --dsn-color-accent-2-border-default: var(--dsn-color-accent-1-border-default);
45
+ --dsn-color-accent-2-border-hover: var(--dsn-color-accent-1-border-hover);
46
+ --dsn-color-accent-2-border-active: var(--dsn-color-accent-1-border-active);
47
+ --dsn-color-accent-2-color-default: var(--dsn-color-accent-1-color-default);
48
+ --dsn-color-accent-2-color-hover: var(--dsn-color-accent-1-color-hover);
49
+ --dsn-color-accent-2-color-active: var(--dsn-color-accent-1-color-active);
50
+ --dsn-color-accent-2-color-subtle: var(--dsn-color-accent-1-color-subtle);
51
+ --dsn-color-accent-2-color-document: var(--dsn-color-accent-1-color-document);
52
+ --dsn-color-accent-3-bg-document: var(--dsn-color-accent-1-bg-document);
53
+ --dsn-color-accent-3-bg-elevated: var(--dsn-color-accent-1-bg-elevated);
54
+ --dsn-color-accent-3-bg-subtle: var(--dsn-color-accent-1-bg-subtle);
55
+ --dsn-color-accent-3-bg-default: var(--dsn-color-accent-1-bg-default);
56
+ --dsn-color-accent-3-bg-hover: var(--dsn-color-accent-1-bg-hover);
57
+ --dsn-color-accent-3-bg-active: var(--dsn-color-accent-1-bg-active);
58
+ --dsn-color-accent-3-border-subtle: var(--dsn-color-accent-1-border-subtle);
59
+ --dsn-color-accent-3-border-default: var(--dsn-color-accent-1-border-default);
60
+ --dsn-color-accent-3-border-hover: var(--dsn-color-accent-1-border-hover);
61
+ --dsn-color-accent-3-border-active: var(--dsn-color-accent-1-border-active);
62
+ --dsn-color-accent-3-color-default: var(--dsn-color-accent-1-color-default);
63
+ --dsn-color-accent-3-color-hover: var(--dsn-color-accent-1-color-hover);
64
+ --dsn-color-accent-3-color-active: var(--dsn-color-accent-1-color-active);
65
+ --dsn-color-accent-3-color-subtle: var(--dsn-color-accent-1-color-subtle);
66
+ --dsn-color-accent-3-color-document: var(--dsn-color-accent-1-color-document);
67
+ --dsn-color-action-1-bg-document: var(--dsn-color-accent-1-bg-document);
68
+ --dsn-color-action-1-bg-elevated: var(--dsn-color-accent-1-bg-elevated);
69
+ --dsn-color-action-1-bg-subtle: var(--dsn-color-accent-1-bg-subtle);
70
+ --dsn-color-action-1-bg-default: var(--dsn-color-accent-1-bg-default);
71
+ --dsn-color-action-1-bg-hover: var(--dsn-color-accent-1-bg-hover);
72
+ --dsn-color-action-1-bg-active: var(--dsn-color-accent-1-bg-active);
73
+ --dsn-color-action-1-border-subtle: var(--dsn-color-accent-1-border-subtle);
74
+ --dsn-color-action-1-border-default: var(--dsn-color-accent-1-border-default);
75
+ --dsn-color-action-1-border-hover: var(--dsn-color-accent-1-border-hover);
76
+ --dsn-color-action-1-border-active: var(--dsn-color-accent-1-border-active);
77
+ --dsn-color-action-1-color-default: var(--dsn-color-accent-1-color-default);
78
+ --dsn-color-action-1-color-hover: var(--dsn-color-accent-1-color-hover);
79
+ --dsn-color-action-1-color-active: var(--dsn-color-accent-1-color-active);
80
+ --dsn-color-action-1-color-subtle: var(--dsn-color-accent-1-color-subtle);
81
+ --dsn-color-action-1-color-document: var(--dsn-color-accent-1-color-document);
82
+ --dsn-color-action-2-bg-document: var(--dsn-color-accent-1-bg-document);
83
+ --dsn-color-action-2-bg-elevated: var(--dsn-color-accent-1-bg-elevated);
84
+ --dsn-color-action-2-bg-subtle: var(--dsn-color-accent-1-bg-subtle);
85
+ --dsn-color-action-2-bg-default: var(--dsn-color-accent-1-bg-default);
86
+ --dsn-color-action-2-bg-hover: var(--dsn-color-accent-1-bg-hover);
87
+ --dsn-color-action-2-bg-active: var(--dsn-color-accent-1-bg-active);
88
+ --dsn-color-action-2-border-subtle: var(--dsn-color-accent-1-border-subtle);
89
+ --dsn-color-action-2-border-default: var(--dsn-color-accent-1-border-default);
90
+ --dsn-color-action-2-border-hover: var(--dsn-color-accent-1-border-hover);
91
+ --dsn-color-action-2-border-active: var(--dsn-color-accent-1-border-active);
92
+ --dsn-color-action-2-color-default: var(--dsn-color-accent-1-color-default);
93
+ --dsn-color-action-2-color-hover: var(--dsn-color-accent-1-color-hover);
94
+ --dsn-color-action-2-color-active: var(--dsn-color-accent-1-color-active);
95
+ --dsn-color-action-2-color-subtle: var(--dsn-color-accent-1-color-subtle);
96
+ --dsn-color-action-2-color-document: var(--dsn-color-accent-1-color-document);
97
+ --dsn-color-info-bg-document: var(--dsn-color-accent-1-bg-document);
98
+ --dsn-color-info-bg-elevated: var(--dsn-color-accent-1-bg-elevated);
99
+ --dsn-color-info-bg-subtle: var(--dsn-color-accent-1-bg-subtle);
100
+ --dsn-color-info-bg-default: var(--dsn-color-accent-1-bg-default);
101
+ --dsn-color-info-bg-hover: var(--dsn-color-accent-1-bg-hover);
102
+ --dsn-color-info-bg-active: var(--dsn-color-accent-1-bg-active);
103
+ --dsn-color-info-border-subtle: var(--dsn-color-accent-1-border-subtle);
104
+ --dsn-color-info-border-default: var(--dsn-color-accent-1-border-default);
105
+ --dsn-color-info-border-hover: var(--dsn-color-accent-1-border-hover);
106
+ --dsn-color-info-border-active: var(--dsn-color-accent-1-border-active);
107
+ --dsn-color-info-color-default: var(--dsn-color-accent-1-color-default);
108
+ --dsn-color-info-color-hover: var(--dsn-color-accent-1-color-hover);
109
+ --dsn-color-info-color-active: var(--dsn-color-accent-1-color-active);
110
+ --dsn-color-info-color-subtle: var(--dsn-color-accent-1-color-subtle);
111
+ --dsn-color-info-color-document: var(--dsn-color-accent-1-color-document);
112
+ --dsn-color-negative-bg-document: #1c0000;
113
+ --dsn-color-negative-bg-elevated: #1c0000;
114
+ --dsn-color-negative-bg-subtle: #060000;
115
+ --dsn-color-negative-bg-default: #2e0000;
116
+ --dsn-color-negative-bg-hover: #3d0000;
117
+ --dsn-color-negative-bg-active: #4c0000;
118
+ --dsn-color-negative-border-subtle: #820000;
119
+ --dsn-color-negative-border-default: #e74848;
120
+ --dsn-color-negative-border-hover: #ec6d6d;
121
+ --dsn-color-negative-border-active: #f19191;
122
+ --dsn-color-negative-color-default: #f9b1b1;
123
+ --dsn-color-negative-color-hover: #fbc3c3;
124
+ --dsn-color-negative-color-active: #fcd5d5;
125
+ --dsn-color-negative-color-subtle: #eb8181;
126
+ --dsn-color-negative-color-document: #feeded;
127
+ --dsn-color-positive-bg-document: #001509;
128
+ --dsn-color-positive-bg-elevated: #001509;
129
+ --dsn-color-positive-bg-subtle: #000802;
130
+ --dsn-color-positive-bg-default: #002312;
131
+ --dsn-color-positive-bg-hover: #003019;
132
+ --dsn-color-positive-bg-active: #003e1f;
133
+ --dsn-color-positive-border-subtle: #00481b;
134
+ --dsn-color-positive-border-default: #1ba158;
135
+ --dsn-color-positive-border-hover: #3bb470;
136
+ --dsn-color-positive-border-active: #5bc788;
137
+ --dsn-color-positive-color-default: #8ad3a6;
138
+ --dsn-color-positive-color-hover: #a3dcba;
139
+ --dsn-color-positive-color-active: #bce5ce;
140
+ --dsn-color-positive-color-subtle: #6ac495;
141
+ --dsn-color-positive-color-document: #e4f5ea;
142
+ --dsn-color-warning-bg-document: #190f04;
143
+ --dsn-color-warning-bg-elevated: #190f04;
144
+ --dsn-color-warning-bg-subtle: #0b0501;
145
+ --dsn-color-warning-bg-default: #2b1a09;
146
+ --dsn-color-warning-bg-hover: #3c250d;
147
+ --dsn-color-warning-bg-active: #4d2f10;
148
+ --dsn-color-warning-border-subtle: #5a3511;
149
+ --dsn-color-warning-border-default: #d37f25;
150
+ --dsn-color-warning-border-hover: #de9843;
151
+ --dsn-color-warning-border-active: #e9b062;
152
+ --dsn-color-warning-color-default: #ffb46b;
153
+ --dsn-color-warning-color-hover: #ffc38b;
154
+ --dsn-color-warning-color-active: #ffd2aa;
155
+ --dsn-color-warning-color-subtle: #f3a453;
156
+ --dsn-color-warning-color-document: #ffeedd;
157
+ --dsn-color-neutral-inverse-bg-document: #fbfbfb;
158
+ --dsn-color-neutral-inverse-bg-elevated: #fbfbfb;
159
+ --dsn-color-neutral-inverse-bg-subtle: #f1f1f1;
160
+ --dsn-color-neutral-inverse-bg-default: #ababab;
161
+ --dsn-color-neutral-inverse-bg-hover: #bbbbbb;
162
+ --dsn-color-neutral-inverse-bg-active: #cccccc;
163
+ --dsn-color-neutral-inverse-border-subtle: #bfbfbf;
164
+ --dsn-color-neutral-inverse-border-default: #3e3e3e;
165
+ --dsn-color-neutral-inverse-border-hover: #2e2e2e;
166
+ --dsn-color-neutral-inverse-border-active: #1d1d1d;
167
+ --dsn-color-neutral-inverse-color-default: #000000;
168
+ --dsn-color-neutral-inverse-color-hover: #000000;
169
+ --dsn-color-neutral-inverse-color-active: #000000;
170
+ --dsn-color-neutral-inverse-color-subtle: #3e3e3e;
171
+ --dsn-color-neutral-inverse-color-document: #000000;
172
+ --dsn-color-accent-1-inverse-bg-document: #dcebf9;
173
+ --dsn-color-accent-1-inverse-bg-elevated: #dcebf9;
174
+ --dsn-color-accent-1-inverse-bg-subtle: #ecf1f7;
175
+ --dsn-color-accent-1-inverse-bg-default: #8faed2;
176
+ --dsn-color-accent-1-inverse-bg-hover: #a5bedb;
177
+ --dsn-color-accent-1-inverse-bg-active: #bbcee4;
178
+ --dsn-color-accent-1-inverse-border-subtle: #b0c6df;
179
+ --dsn-color-accent-1-inverse-border-default: #003b81;
180
+ --dsn-color-accent-1-inverse-border-hover: #002d62;
181
+ --dsn-color-accent-1-inverse-border-active: #001d40;
182
+ --dsn-color-accent-1-inverse-color-default: #000000;
183
+ --dsn-color-accent-1-inverse-color-hover: #000000;
184
+ --dsn-color-accent-1-inverse-color-active: #000000;
185
+ --dsn-color-accent-1-inverse-color-subtle: #003b81;
186
+ --dsn-color-accent-1-inverse-color-document: #000000;
187
+ --dsn-color-accent-2-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document);
188
+ --dsn-color-accent-2-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated);
189
+ --dsn-color-accent-2-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle);
190
+ --dsn-color-accent-2-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default);
191
+ --dsn-color-accent-2-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover);
192
+ --dsn-color-accent-2-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active);
193
+ --dsn-color-accent-2-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle);
194
+ --dsn-color-accent-2-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default);
195
+ --dsn-color-accent-2-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover);
196
+ --dsn-color-accent-2-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active);
197
+ --dsn-color-accent-2-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default);
198
+ --dsn-color-accent-2-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover);
199
+ --dsn-color-accent-2-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active);
200
+ --dsn-color-accent-2-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle);
201
+ --dsn-color-accent-2-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document);
202
+ --dsn-color-accent-3-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document);
203
+ --dsn-color-accent-3-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated);
204
+ --dsn-color-accent-3-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle);
205
+ --dsn-color-accent-3-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default);
206
+ --dsn-color-accent-3-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover);
207
+ --dsn-color-accent-3-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active);
208
+ --dsn-color-accent-3-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle);
209
+ --dsn-color-accent-3-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default);
210
+ --dsn-color-accent-3-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover);
211
+ --dsn-color-accent-3-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active);
212
+ --dsn-color-accent-3-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default);
213
+ --dsn-color-accent-3-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover);
214
+ --dsn-color-accent-3-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active);
215
+ --dsn-color-accent-3-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle);
216
+ --dsn-color-accent-3-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document);
217
+ --dsn-color-action-1-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document);
218
+ --dsn-color-action-1-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated);
219
+ --dsn-color-action-1-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle);
220
+ --dsn-color-action-1-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default);
221
+ --dsn-color-action-1-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover);
222
+ --dsn-color-action-1-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active);
223
+ --dsn-color-action-1-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle);
224
+ --dsn-color-action-1-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default);
225
+ --dsn-color-action-1-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover);
226
+ --dsn-color-action-1-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active);
227
+ --dsn-color-action-1-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default);
228
+ --dsn-color-action-1-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover);
229
+ --dsn-color-action-1-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active);
230
+ --dsn-color-action-1-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle);
231
+ --dsn-color-action-1-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document);
232
+ --dsn-color-action-2-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document);
233
+ --dsn-color-action-2-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated);
234
+ --dsn-color-action-2-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle);
235
+ --dsn-color-action-2-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default);
236
+ --dsn-color-action-2-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover);
237
+ --dsn-color-action-2-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active);
238
+ --dsn-color-action-2-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle);
239
+ --dsn-color-action-2-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default);
240
+ --dsn-color-action-2-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover);
241
+ --dsn-color-action-2-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active);
242
+ --dsn-color-action-2-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default);
243
+ --dsn-color-action-2-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover);
244
+ --dsn-color-action-2-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active);
245
+ --dsn-color-action-2-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle);
246
+ --dsn-color-action-2-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document);
247
+ --dsn-color-info-inverse-bg-document: #dcebf9;
248
+ --dsn-color-info-inverse-bg-elevated: #dcebf9;
249
+ --dsn-color-info-inverse-bg-subtle: #ecf1f7;
250
+ --dsn-color-info-inverse-bg-default: #8faed2;
251
+ --dsn-color-info-inverse-bg-hover: #a5bedb;
252
+ --dsn-color-info-inverse-bg-active: #bbcee4;
253
+ --dsn-color-info-inverse-border-subtle: #b0c6df;
254
+ --dsn-color-info-inverse-border-default: #003b81;
255
+ --dsn-color-info-inverse-border-hover: #002d62;
256
+ --dsn-color-info-inverse-border-active: #001d40;
257
+ --dsn-color-info-inverse-color-default: #000000;
258
+ --dsn-color-info-inverse-color-hover: #000000;
259
+ --dsn-color-info-inverse-color-active: #000000;
260
+ --dsn-color-info-inverse-color-subtle: #003b81;
261
+ --dsn-color-info-inverse-color-document: #000000;
262
+ --dsn-color-negative-inverse-bg-document: #fcdada;
263
+ --dsn-color-negative-inverse-bg-elevated: #fcdada;
264
+ --dsn-color-negative-inverse-bg-subtle: #feeded;
265
+ --dsn-color-negative-inverse-bg-default: #f9b1b1;
266
+ --dsn-color-negative-inverse-bg-hover: #fbc3c3;
267
+ --dsn-color-negative-inverse-bg-active: #fcd5d5;
268
+ --dsn-color-negative-inverse-border-subtle: #f3abab;
269
+ --dsn-color-negative-inverse-border-default: #820000;
270
+ --dsn-color-negative-inverse-border-hover: #4c0000;
271
+ --dsn-color-negative-inverse-border-active: #2e0000;
272
+ --dsn-color-negative-inverse-color-default: #000000;
273
+ --dsn-color-negative-inverse-color-hover: #000000;
274
+ --dsn-color-negative-inverse-color-active: #000000;
275
+ --dsn-color-negative-inverse-color-subtle: #820000;
276
+ --dsn-color-negative-inverse-color-document: #000000;
277
+ --dsn-color-positive-inverse-bg-document: #cce8d7;
278
+ --dsn-color-positive-inverse-bg-elevated: #cce8d7;
279
+ --dsn-color-positive-inverse-bg-subtle: #e4f5ea;
280
+ --dsn-color-positive-inverse-bg-default: #8ad3a6;
281
+ --dsn-color-positive-inverse-bg-hover: #a3dcba;
282
+ --dsn-color-positive-inverse-bg-active: #bce5ce;
283
+ --dsn-color-positive-inverse-border-subtle: #7dca9e;
284
+ --dsn-color-positive-inverse-border-default: #00481b;
285
+ --dsn-color-positive-inverse-border-hover: #003e1f;
286
+ --dsn-color-positive-inverse-border-active: #002312;
287
+ --dsn-color-positive-inverse-color-default: #000000;
288
+ --dsn-color-positive-inverse-color-hover: #000000;
289
+ --dsn-color-positive-inverse-color-active: #000000;
290
+ --dsn-color-positive-inverse-color-subtle: #00481b;
291
+ --dsn-color-positive-inverse-color-document: #000000;
292
+ --dsn-color-warning-inverse-bg-document: #ffeac6;
293
+ --dsn-color-warning-inverse-bg-elevated: #ffeac6;
294
+ --dsn-color-warning-inverse-bg-subtle: #ffeedd;
295
+ --dsn-color-warning-inverse-bg-default: #ffb46b;
296
+ --dsn-color-warning-inverse-bg-hover: #ffc38b;
297
+ --dsn-color-warning-inverse-bg-active: #ffd2aa;
298
+ --dsn-color-warning-inverse-border-subtle: #ffa754;
299
+ --dsn-color-warning-inverse-border-default: #5a3511;
300
+ --dsn-color-warning-inverse-border-hover: #4d2f10;
301
+ --dsn-color-warning-inverse-border-active: #2b1a09;
302
+ --dsn-color-warning-inverse-color-default: #000000;
303
+ --dsn-color-warning-inverse-color-hover: #000000;
304
+ --dsn-color-warning-inverse-color-active: #000000;
305
+ --dsn-color-warning-inverse-color-subtle: #5a3511;
306
+ --dsn-color-warning-inverse-color-document: #000000;
307
+ --dsn-color-transparent: rgba(0, 0, 0, 0);
308
+ --dsn-color-shadow-direct: color-mix(in srgb, black 60%, transparent);
309
+ --dsn-color-shadow-ambient: color-mix(in srgb, black 40%, transparent);
310
+ --dsn-color-shadow-highlight: color-mix(in srgb, white 8%, transparent);
311
+ --dsn-color-shadow-scroll: rgba(255, 255, 255, 0.12);
312
+ --dsn-heading-color: var(--dsn-color-neutral-color-document);
313
+ --dsn-form-control-accent-color: var(--dsn-color-action-1-color-default);
314
+ --dsn-form-control-background-color: var(--dsn-color-neutral-bg-document);
315
+ --dsn-form-control-border-color: var(--dsn-color-neutral-border-default);
316
+ --dsn-form-control-color: var(--dsn-color-neutral-color-document);
317
+ --dsn-form-control-placeholder-color: var(--dsn-color-neutral-color-subtle);
318
+ --dsn-form-control-hover-accent-color: var(--dsn-color-action-1-color-hover);
319
+ --dsn-form-control-hover-background-color: var(--dsn-color-neutral-bg-hover);
320
+ --dsn-form-control-hover-border-color: var(--dsn-color-neutral-border-hover);
321
+ --dsn-form-control-hover-color: var(--dsn-form-control-color);
322
+ --dsn-form-control-focus-background-color: var(--dsn-form-control-background-color);
323
+ --dsn-form-control-focus-border-color: var(--dsn-color-neutral-border-active);
324
+ --dsn-form-control-focus-color: var(--dsn-form-control-color);
325
+ --dsn-form-control-active-accent-color: var(--dsn-color-action-1-color-active);
326
+ --dsn-form-control-active-background-color: var(--dsn-color-neutral-bg-active);
327
+ --dsn-form-control-active-border-color: var(--dsn-color-neutral-border-active);
328
+ --dsn-form-control-active-color: var(--dsn-form-control-color);
329
+ --dsn-form-control-disabled-accent-color: var(--dsn-color-neutral-bg-subtle);
330
+ --dsn-form-control-disabled-background-color: var(--dsn-color-neutral-bg-subtle);
331
+ --dsn-form-control-disabled-border-color: var(--dsn-color-neutral-border-subtle);
332
+ --dsn-form-control-disabled-color: var(--dsn-color-neutral-color-subtle);
333
+ --dsn-form-control-invalid-background-color: var(--dsn-color-negative-bg-default);
334
+ --dsn-form-control-invalid-border-color: var(--dsn-color-negative-border-default);
335
+ --dsn-form-control-invalid-color: var(--dsn-color-negative-color-default);
336
+ --dsn-form-control-read-only-background-color: var(--dsn-color-neutral-bg-subtle);
337
+ --dsn-form-control-read-only-border-color: var(--dsn-color-transparent);
338
+ --dsn-form-control-read-only-color: var(--dsn-color-neutral-color-document);
339
+ --dsn-focus-background-color: #ffdd00;
340
+ --dsn-focus-color: #0b0c0c;
341
+ --dsn-focus-outline-color: #f4f4f4;
342
+ --dsn-focus-inverse-outline-color: #0b0c0c;
343
+ --dsn-backdrop-background-color: var(--dsn-color-neutral-bg-document);
344
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dsn-starter-kit/design-tokens",
3
- "version": "3.3.0",
3
+ "version": "3.4.0",
4
4
  "description": "Design tokens for the design system",
5
5
  "type": "module",
6
6
  "main": "dist/js/tokens.cjs",
@@ -55,6 +55,30 @@
55
55
  "types": "./css.d.ts",
56
56
  "default": "./dist/css/scoped/wireframe-light-hero-image.css"
57
57
  },
58
+ "./css/scoped/start-light": {
59
+ "types": "./css.d.ts",
60
+ "default": "./dist/css/scoped/start-light.css"
61
+ },
62
+ "./css/scoped/start-dark": {
63
+ "types": "./css.d.ts",
64
+ "default": "./dist/css/scoped/start-dark.css"
65
+ },
66
+ "./css/scoped/wireframe-light": {
67
+ "types": "./css.d.ts",
68
+ "default": "./dist/css/scoped/wireframe-light.css"
69
+ },
70
+ "./css/scoped/wireframe-dark": {
71
+ "types": "./css.d.ts",
72
+ "default": "./dist/css/scoped/wireframe-dark.css"
73
+ },
74
+ "./css/scoped/density-default": {
75
+ "types": "./css.d.ts",
76
+ "default": "./dist/css/scoped/density-default.css"
77
+ },
78
+ "./css/scoped/density-information-dense": {
79
+ "types": "./css.d.ts",
80
+ "default": "./dist/css/scoped/density-information-dense.css"
81
+ },
58
82
  "./package.json": "./package.json"
59
83
  },
60
84
  "sideEffects": [