@cesdk/cesdk-js 1.64.0-nightly.20251106 → 1.64.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,292 @@
1
+ /* esbuild-sass-plugin:css-chunk:packages/ui/design-system/themes/index.scss */
2
+ .ubq-dark {
3
+ --ubq-canvas: hsl(207 18% 10%);
4
+ --ubq-elevation-1: hsl(207 18% 10%);
5
+ --ubq-elevation-2: hsl(207 18% 10%);
6
+ --ubq-elevation-3: hsl(207 18% 10%);
7
+ --ubq-elevation-1-blur: hsl(207 18% 10% / 0.85);
8
+ --ubq-elevation-2-blur: hsl(207 18% 10% / 0.85);
9
+ --ubq-elevation-3-blur: hsl(207 18% 10% / 0.85);
10
+ --ubq-foreground-accent: hsl(208 14% 18%);
11
+ --ubq-foreground-active: hsl(221 100% 80%);
12
+ --ubq-foreground-default: hsl(200 11% 95%);
13
+ --ubq-foreground-info: hsl(200 11% 95% / 0.5);
14
+ --ubq-foreground-light: hsl(200 11% 95% / 0.7);
15
+ --ubq-foreground-danger-default: hsl(208 14% 18%);
16
+ --ubq-foreground-notice-default: hsl(208 14% 18%);
17
+ --ubq-interactive-default: hsl(208 14% 18%);
18
+ --ubq-interactive-hover: hsl(208 13% 23%);
19
+ --ubq-interactive-pressed: hsl(210 15% 15%);
20
+ --ubq-interactive-selected: hsl(208 14% 18%);
21
+ --ubq-interactive-accent-default: hsl(221 100% 80%);
22
+ --ubq-interactive-accent-hover: hsl(219 100% 88%);
23
+ --ubq-interactive-accent-pressed: hsl(223 100% 76%);
24
+ --ubq-interactive-active-default: hsl(221 100% 80%);
25
+ --ubq-interactive-active-hover: hsl(219 100% 88%);
26
+ --ubq-interactive-active-pressed: hsl(223 100% 76%);
27
+ --ubq-interactive-danger-default: hsl(346 98% 81%);
28
+ --ubq-interactive-danger-hover: hsl(347 100% 88%);
29
+ --ubq-interactive-danger-pressed: hsl(344 89% 75%);
30
+ --ubq-interactive-group-default: hsl(0 0% 0% / 0);
31
+ --ubq-interactive-group-hover: hsl(208 14% 18%);
32
+ --ubq-interactive-group-active-default: hsl(208 13% 23%);
33
+ --ubq-interactive-group-active-hover: hsl(208 12% 28%);
34
+ --ubq-interactive-template-default: hsl(273 100% 82%);
35
+ --ubq-interactive-template-hover: hsl(273 100% 89%);
36
+ --ubq-interactive-template-pressed: hsl(273 100% 77%);
37
+ --ubq-input-default: hsl(200 27% 4%);
38
+ --ubq-input-hover: hsl(210 22% 7%);
39
+ --ubq-progress: hsl(207 9% 39%);
40
+ --ubq-border-default: hsl(0 0% 100% / 0.16);
41
+ --ubq-stroke-contrast-1: hsl(200 11% 95% / 0.12);
42
+ --ubq-stroke-contrast-2: hsl(200 11% 95% / 0.25);
43
+ --ubq-stroke-contrast-3: hsl(200 11% 95% / 0.9);
44
+ --ubq-focus-default: hsl(221 100% 80%);
45
+ --ubq-focus-outline: hsl(221 100% 80% / 0.35);
46
+ --ubq-overlay: hsl(207 18% 10% / 0.8);
47
+ --ubq-notice-error: hsl(346 98% 81%);
48
+ --ubq-notice-info: hsl(205 9% 75%);
49
+ --ubq-notice-success: hsl(158 42% 67%);
50
+ --ubq-notice-warning: hsl(37 61% 67%);
51
+ --ubq-effect-shadow: 0px 1px 2px 0px hsla(0, 0%, 0%, 0.24), 0px 0px 0px 0.5px hsla(0, 0%, 0%, 0.12);
52
+ --ubq-effect-shadow-2: 0 4px 8px -1px hsla(0, 0%, 0%, 0.1), 0 2px 4px -1px hsla(0, 0%, 0%, 0.04);
53
+ --ubq-effect-focus:
54
+ 0px 1px 2px 0px hsla(0, 0%, 0%, 0.24),
55
+ 0px 0px 0px 0.5px hsla(0, 0%, 0%, 0.12),
56
+ 0px 0px 0px 2px var(--ubq-elevation-2),
57
+ 0px 0px 0px 3px var(--ubq-focus-default),
58
+ 0px 0px 0px 7px var(--ubq-focus-outline);
59
+ }
60
+ .ubq-light {
61
+ --ubq-canvas: hsl(240 8% 97%);
62
+ --ubq-elevation-1: hsl(240 8% 97%);
63
+ --ubq-elevation-2: hsl(240 8% 97%);
64
+ --ubq-elevation-3: hsl(240 8% 97%);
65
+ --ubq-elevation-1-blur: hsl(240 8% 97% / 0.85);
66
+ --ubq-elevation-2-blur: hsl(240 8% 97% / 0.85);
67
+ --ubq-elevation-3-blur: hsl(240 8% 97% / 0.85);
68
+ --ubq-foreground-accent: hsl(200 11% 95%);
69
+ --ubq-foreground-active: hsl(228 100% 65%);
70
+ --ubq-foreground-default: hsl(208 14% 18%);
71
+ --ubq-foreground-info: hsl(208 14% 18% / 0.5);
72
+ --ubq-foreground-light: hsl(208 14% 18% / 0.7);
73
+ --ubq-foreground-danger-default: hsl(200 11% 95%);
74
+ --ubq-foreground-notice-default: hsl(200 11% 95%);
75
+ --ubq-interactive-default: hsl(0 0% 100%);
76
+ --ubq-interactive-hover: hsl(204 9% 90%);
77
+ --ubq-interactive-pressed: hsl(210 9% 87%);
78
+ --ubq-interactive-selected: hsl(0 0% 100%);
79
+ --ubq-interactive-accent-default: hsl(228 100% 65%);
80
+ --ubq-interactive-accent-hover: hsl(229 88% 60%);
81
+ --ubq-interactive-accent-pressed: hsl(231 76% 54%);
82
+ --ubq-interactive-active-default: hsl(228 100% 65%);
83
+ --ubq-interactive-active-hover: hsl(229 88% 60%);
84
+ --ubq-interactive-active-pressed: hsl(231 76% 54%);
85
+ --ubq-interactive-danger-default: hsl(340 66% 54%);
86
+ --ubq-interactive-danger-hover: hsl(337 69% 46%);
87
+ --ubq-interactive-danger-pressed: hsl(332 100% 36%);
88
+ --ubq-interactive-group-default: hsl(0 0% 100% / 0);
89
+ --ubq-interactive-group-hover: hsl(210 8% 88%);
90
+ --ubq-interactive-group-active-default: hsl(210 8% 85%);
91
+ --ubq-interactive-group-active-hover: hsl(210 8% 82%);
92
+ --ubq-interactive-template-default: hsl(273 91% 61%);
93
+ --ubq-interactive-template-hover: hsl(275 81% 53%);
94
+ --ubq-interactive-template-pressed: hsl(278 100% 42%);
95
+ --ubq-input-default: hsl(204 9% 90%);
96
+ --ubq-input-hover: hsl(210 9% 87%);
97
+ --ubq-progress: hsl(206 8% 62%);
98
+ --ubq-border-default: hsl(0 0% 100% / 0.4);
99
+ --ubq-stroke-contrast-1: hsl(208 14% 18% / 0.12);
100
+ --ubq-stroke-contrast-2: hsl(208 14% 18% / 0.25);
101
+ --ubq-stroke-contrast-3: hsl(208 14% 18% / 0.9);
102
+ --ubq-focus-default: hsl(231 76% 54%);
103
+ --ubq-focus-outline: hsl(231 76% 54% / 0.35);
104
+ --ubq-overlay: hsl(207 18% 10% / 0.8);
105
+ --ubq-notice-error: hsl(340 66% 54%);
106
+ --ubq-notice-info: hsl(207 7% 51%);
107
+ --ubq-notice-success: hsl(165 100% 30%);
108
+ --ubq-notice-warning: hsl(39 100% 34%);
109
+ --ubq-effect-shadow: 0px 1px 2px 0px hsla(207, 18%, 10%, 0.16), 0px 0px 0px 0.5px hsla(207, 18%, 10%, 0.08);
110
+ --ubq-effect-shadow-1:
111
+ 0px 1px 2px 0px hsla(207, 18%, 10%, 0.16),
112
+ 0px 4px 8px -1px hsla(0, 0%, 0%, 0.07),
113
+ 0px 2px 4px -1px hsla(0, 0%, 0%, 0.05);
114
+ --ubq-effect-shadow-2: 0 4px 8px -1px hsla(0, 0%, 0%, 0.1), 0 2px 4px -1px hsla(0, 0%, 0%, 0.04);
115
+ --ubq-effect-focus:
116
+ 0px 1px 2px 0px hsla(207, 18%, 10%, 0.16),
117
+ 0px 0px 0px 0.5px hsla(207, 18%, 10%, 0.08),
118
+ 0px 0px 0px 2px var(--ubq-elevation-2),
119
+ 0px 0px 0px 3px var(--ubq-focus-default),
120
+ 0px 0px 0px 7px var(--ubq-focus-outline);
121
+ }
122
+ .ubq-static {
123
+ --ubq-static-selection-frame: hsl(230, 100%, 60%);
124
+ --ubq-static-contrast-white: hsl(0, 0%, 100%);
125
+ --ubq-static-contrast-black: hsl(0, 0%, 0%);
126
+ --ubq-static-snapping: hsl(338, 100%, 50%);
127
+ --ubq-static-bleed: hsl(334, 73%, 43%);
128
+ --ubq-static-text-variable: hsl(274, 97%, 60%);
129
+ --ubq-static-card-label-background:
130
+ linear-gradient(
131
+
132
+ 180deg,
133
+ rgba(0, 0, 0, 0) 14.46%,
134
+ rgba(0, 0, 0, 0.6) 100% );
135
+ --ubq-static-card-background:
136
+ linear-gradient(
137
+
138
+ 180deg,
139
+ hsla(0, 0%, 100%, 0.08),
140
+ hsla(0, 0%, 0%, 0.08) ),
141
+ hsla(0, 0%, 67%, 0.16);
142
+ }
143
+ .ubq-normal {
144
+ --ubq-typography-headline-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
145
+ --ubq-typography-headline-l-size: 16px;
146
+ --ubq-typography-headline-l-weight: 600;
147
+ --ubq-typography-headline-l-letter_spacing: 0.01em;
148
+ --ubq-typography-headline-l-line_height: 20px;
149
+ --ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
150
+ --ubq-typography-headline-m-size: 12px;
151
+ --ubq-typography-headline-m-weight: 600;
152
+ --ubq-typography-headline-m-letter_spacing: 0.03em;
153
+ --ubq-typography-headline-m-line_height: 16px;
154
+ --ubq-typography-label-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
155
+ --ubq-typography-label-m-size: 12px;
156
+ --ubq-typography-label-m-weight: 450;
157
+ --ubq-typography-label-m-letter_spacing: 0.02em;
158
+ --ubq-typography-label-m-line_height: 16px;
159
+ --ubq-typography-label-s-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
160
+ --ubq-typography-label-s-size: 10px;
161
+ --ubq-typography-label-s-weight: 450;
162
+ --ubq-typography-label-s-letter_spacing: 0.02em;
163
+ --ubq-typography-label-s-line_height: 14px;
164
+ --ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
165
+ --ubq-typography-body-m-size: 12px;
166
+ --ubq-typography-body-m-weight: 450;
167
+ --ubq-typography-body-m-letter_spacing: 0.02em;
168
+ --ubq-typography-body-m-line_height: 18px;
169
+ --ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
170
+ --ubq-typography-input-m-size: 12px;
171
+ --ubq-typography-input-m-weight: 450;
172
+ --ubq-typography-input-m-letter_spacing: 0.02em;
173
+ --ubq-typography-input-m-line_height: 16px;
174
+ --ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
175
+ --ubq-typography-button-m-size: 12px;
176
+ --ubq-typography-button-m-weight: 450;
177
+ --ubq-typography-button-m-letter_spacing: 0.02em;
178
+ --ubq-typography-button-m-line_height: 16px;
179
+ --ubq-scale-base: 4px;
180
+ --ubq-margin-base: 4px;
181
+ --ubq-margin-xs: 4px;
182
+ --ubq-margin-s: 8px;
183
+ --ubq-margin-m: 12px;
184
+ --ubq-margin-l: 16px;
185
+ --ubq-margin-xl: 24px;
186
+ --ubq-border_radius-base: 4px;
187
+ --ubq-border_radius-xs: 2px;
188
+ --ubq-border_radius-s: 4px;
189
+ --ubq-border_radius-m: 8px;
190
+ --ubq-border_radius-l: 12px;
191
+ --ubq-border_radius-xl: 16px;
192
+ }
193
+ .ubq-large {
194
+ --ubq-typography-headline-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
195
+ --ubq-typography-headline-l-size: 20px;
196
+ --ubq-typography-headline-l-weight: 600;
197
+ --ubq-typography-headline-l-letter_spacing: 0.01em;
198
+ --ubq-typography-headline-l-line_height: 25px;
199
+ --ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
200
+ --ubq-typography-headline-m-size: 15px;
201
+ --ubq-typography-headline-m-weight: 600;
202
+ --ubq-typography-headline-m-letter_spacing: 0.03em;
203
+ --ubq-typography-headline-m-line_height: 20px;
204
+ --ubq-typography-label-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
205
+ --ubq-typography-label-m-size: 15px;
206
+ --ubq-typography-label-m-weight: normal;
207
+ --ubq-typography-label-m-letter_spacing: 0.02em;
208
+ --ubq-typography-label-m-line_height: 20px;
209
+ --ubq-typography-label-s-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
210
+ --ubq-typography-label-s-size: 12.5px;
211
+ --ubq-typography-label-s-weight: normal;
212
+ --ubq-typography-label-s-letter_spacing: 0.02em;
213
+ --ubq-typography-label-s-line_height: 17.5px;
214
+ --ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
215
+ --ubq-typography-body-m-size: 15px;
216
+ --ubq-typography-body-m-weight: normal;
217
+ --ubq-typography-body-m-letter_spacing: 0.02em;
218
+ --ubq-typography-body-m-line_height: 22.5px;
219
+ --ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
220
+ --ubq-typography-input-m-size: 16px;
221
+ --ubq-typography-input-m-weight: normal;
222
+ --ubq-typography-input-m-letter_spacing: 0.02em;
223
+ --ubq-typography-input-m-line_height: 20px;
224
+ --ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
225
+ --ubq-typography-button-m-size: 15px;
226
+ --ubq-typography-button-m-weight: normal;
227
+ --ubq-typography-button-m-letter_spacing: 0.02em;
228
+ --ubq-typography-button-m-line_height: 20px;
229
+ --ubq-scale-base: 5px;
230
+ --ubq-margin-base: 5px;
231
+ --ubq-margin-xs: 5px;
232
+ --ubq-margin-s: 10px;
233
+ --ubq-margin-m: 15px;
234
+ --ubq-margin-l: 20px;
235
+ --ubq-margin-xl: 30px;
236
+ --ubq-border_radius-base: 5px;
237
+ --ubq-border_radius-xs: 2.5px;
238
+ --ubq-border_radius-s: 5px;
239
+ --ubq-border_radius-m: 10px;
240
+ --ubq-border_radius-l: 15px;
241
+ --ubq-border_radius-xl: 20px;
242
+ }
243
+ .ubq-modern {
244
+ --ubq-typography-headline-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
245
+ --ubq-typography-headline-l-size: 16px;
246
+ --ubq-typography-headline-l-weight: 600;
247
+ --ubq-typography-headline-l-letter_spacing: 0.01em;
248
+ --ubq-typography-headline-l-line_height: 20px;
249
+ --ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
250
+ --ubq-typography-headline-m-size: 12px;
251
+ --ubq-typography-headline-m-weight: 600;
252
+ --ubq-typography-headline-m-letter_spacing: 0.03em;
253
+ --ubq-typography-headline-m-line_height: 16px;
254
+ --ubq-typography-label-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
255
+ --ubq-typography-label-m-size: 12px;
256
+ --ubq-typography-label-m-weight: 450;
257
+ --ubq-typography-label-m-letter_spacing: 0.02em;
258
+ --ubq-typography-label-m-line_height: 16px;
259
+ --ubq-typography-label-s-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
260
+ --ubq-typography-label-s-size: 10px;
261
+ --ubq-typography-label-s-weight: 450;
262
+ --ubq-typography-label-s-letter_spacing: 0.02em;
263
+ --ubq-typography-label-s-line_height: 14px;
264
+ --ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
265
+ --ubq-typography-body-m-size: 12px;
266
+ --ubq-typography-body-m-weight: 450;
267
+ --ubq-typography-body-m-letter_spacing: 0.02em;
268
+ --ubq-typography-body-m-line_height: 18px;
269
+ --ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
270
+ --ubq-typography-input-m-size: 12px;
271
+ --ubq-typography-input-m-weight: 450;
272
+ --ubq-typography-input-m-letter_spacing: 0.02em;
273
+ --ubq-typography-input-m-line_height: 16px;
274
+ --ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );
275
+ --ubq-typography-button-m-size: 12px;
276
+ --ubq-typography-button-m-weight: 450;
277
+ --ubq-typography-button-m-letter_spacing: 0.02em;
278
+ --ubq-typography-button-m-line_height: 16px;
279
+ --ubq-scale-base: 4px;
280
+ --ubq-margin-base: 4px;
281
+ --ubq-margin-xs: 4px;
282
+ --ubq-margin-s: 8px;
283
+ --ubq-margin-m: 12px;
284
+ --ubq-margin-l: 16px;
285
+ --ubq-margin-xl: 24px;
286
+ --ubq-border_radius-base: 4px;
287
+ --ubq-border_radius-xs: 2px;
288
+ --ubq-border_radius-s: 4px;
289
+ --ubq-border_radius-m: 8px;
290
+ --ubq-border_radius-l: 12px;
291
+ --ubq-border_radius-xl: 16px;
292
+ }