@vinyasa/tokens 1.0.20 → 1.0.22
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.
- package/dist/cjs/index.cjs +172 -46
- package/dist/esm/contract.css.d.ts +9 -0
- package/dist/esm/focusRing.d.ts +8 -0
- package/dist/esm/index.d.ts +2 -1
- package/dist/esm/index.js +150 -47
- package/dist/esm/primitives.d.ts +85 -28
- package/dist/esm/theme.d.ts +10 -0
- package/package.json +1 -1
package/dist/cjs/index.cjs
CHANGED
|
@@ -31,7 +31,9 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
31
31
|
VinyasaProvider: ()=>VinyasaProvider,
|
|
32
32
|
breakpoints: ()=>breakpoints,
|
|
33
33
|
createTheme: ()=>createTheme,
|
|
34
|
+
darkTheme: ()=>darkTheme,
|
|
34
35
|
defaultTheme: ()=>defaultTheme,
|
|
36
|
+
focusRingStyle: ()=>focusRingStyle,
|
|
35
37
|
grid: ()=>grid,
|
|
36
38
|
resolveBaseTheme: ()=>resolveBaseTheme,
|
|
37
39
|
resolveDensitySpacing: ()=>resolveDensitySpacing,
|
|
@@ -43,12 +45,21 @@ var themeContract = {
|
|
|
43
45
|
onPrimary: 'var(--vinyasa-on-primary)',
|
|
44
46
|
secondary: 'var(--vinyasa-secondary)',
|
|
45
47
|
onSecondary: 'var(--vinyasa-on-secondary)',
|
|
48
|
+
surface: 'var(--vinyasa-surface)',
|
|
46
49
|
tertiary: 'var(--vinyasa-tertiary)',
|
|
47
50
|
onTertiary: 'var(--vinyasa-on-tertiary)',
|
|
48
51
|
error: 'var(--vinyasa-error)',
|
|
49
52
|
onError: 'var(--vinyasa-on-error)',
|
|
50
53
|
focus: 'var(--vinyasa-focus)',
|
|
51
54
|
textMuted: 'var(--vinyasa-text-muted)',
|
|
55
|
+
statusInfoBg: 'var(--vinyasa-status-info-bg)',
|
|
56
|
+
statusInfoText: 'var(--vinyasa-status-info-text)',
|
|
57
|
+
statusSuccessBg: 'var(--vinyasa-status-success-bg)',
|
|
58
|
+
statusSuccessText: 'var(--vinyasa-status-success-text)',
|
|
59
|
+
statusWarningBg: 'var(--vinyasa-status-warning-bg)',
|
|
60
|
+
statusWarningText: 'var(--vinyasa-status-warning-text)',
|
|
61
|
+
statusErrorBg: 'var(--vinyasa-status-error-bg)',
|
|
62
|
+
statusErrorText: 'var(--vinyasa-status-error-text)',
|
|
52
63
|
space1: 'var(--vinyasa-space1)',
|
|
53
64
|
space2: 'var(--vinyasa-space2)',
|
|
54
65
|
space3: 'var(--vinyasa-space3)',
|
|
@@ -107,29 +118,74 @@ var themeContract = {
|
|
|
107
118
|
zIndexToast: 'var(--vinyasa-z-index-toast)',
|
|
108
119
|
zIndexTooltip: 'var(--vinyasa-z-index-tooltip)'
|
|
109
120
|
};
|
|
110
|
-
const
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
};
|
|
127
|
-
const
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
121
|
+
const focusRingStyle = (vars)=>({
|
|
122
|
+
outline: 'none',
|
|
123
|
+
borderColor: vars.focus,
|
|
124
|
+
boxShadow: `0 0 0 1px ${vars.focus}, 0 0 0 4px color-mix(in srgb, ${vars.focus} 16%, transparent)`
|
|
125
|
+
});
|
|
126
|
+
const stone = {
|
|
127
|
+
50: '#FAFAFC',
|
|
128
|
+
100: '#F6F5F8',
|
|
129
|
+
200: '#E3E0EA',
|
|
130
|
+
300: '#CFCADC',
|
|
131
|
+
400: '#A79DBE',
|
|
132
|
+
500: '#7C7191',
|
|
133
|
+
600: '#5C5470',
|
|
134
|
+
700: '#4A4458',
|
|
135
|
+
800: '#332E40',
|
|
136
|
+
900: '#1E1A28'
|
|
137
|
+
};
|
|
138
|
+
const stoneDark = {
|
|
139
|
+
50: '#100E17',
|
|
140
|
+
100: '#161320',
|
|
141
|
+
200: '#221C30',
|
|
142
|
+
300: '#362E4C',
|
|
143
|
+
400: '#493D64',
|
|
144
|
+
500: '#7C7191',
|
|
145
|
+
600: '#B9B3CB',
|
|
146
|
+
700: '#D6D2E0',
|
|
147
|
+
800: '#E9E7EF',
|
|
148
|
+
900: '#F1EFF5'
|
|
149
|
+
};
|
|
150
|
+
const paper = '#FFFFFF';
|
|
151
|
+
const paperDark = stoneDark[200];
|
|
152
|
+
const dusk = {
|
|
153
|
+
tint: '#EEE9F9',
|
|
154
|
+
600: '#4B2E8C',
|
|
155
|
+
700: '#37206B',
|
|
156
|
+
onDusk: '#FFFFFF'
|
|
157
|
+
};
|
|
158
|
+
const duskDark = {
|
|
159
|
+
tint: '#2E2648',
|
|
160
|
+
600: '#B49BEA',
|
|
161
|
+
700: '#CBB8F2',
|
|
162
|
+
onDusk: '#1A1425'
|
|
163
|
+
};
|
|
164
|
+
const moss = {
|
|
165
|
+
tint: '#E4EEE8',
|
|
166
|
+
700: '#3F6650'
|
|
167
|
+
};
|
|
168
|
+
const mossDark = {
|
|
169
|
+
tint: '#22332A',
|
|
170
|
+
700: '#7FB89A'
|
|
171
|
+
};
|
|
172
|
+
const ember = {
|
|
173
|
+
tint: '#F7E7E1',
|
|
174
|
+
600: '#A64B2A',
|
|
175
|
+
onEmber: '#FFFFFF'
|
|
176
|
+
};
|
|
177
|
+
const emberDark = {
|
|
178
|
+
tint: '#3A281F',
|
|
179
|
+
600: '#E08D6D',
|
|
180
|
+
onEmber: '#2A1208'
|
|
181
|
+
};
|
|
182
|
+
const saffron = {
|
|
183
|
+
tint: '#F5EBDD',
|
|
184
|
+
700: '#A15C1F'
|
|
185
|
+
};
|
|
186
|
+
const saffronDark = {
|
|
187
|
+
tint: '#3A2F1B',
|
|
188
|
+
700: '#D9A15C'
|
|
133
189
|
};
|
|
134
190
|
const space = {
|
|
135
191
|
1: '0.25rem',
|
|
@@ -148,8 +204,8 @@ const borderWidth = {
|
|
|
148
204
|
thin: '1px'
|
|
149
205
|
};
|
|
150
206
|
const fontFamily = {
|
|
151
|
-
sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
|
|
152
|
-
mono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
|
|
207
|
+
sans: "'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
|
|
208
|
+
mono: "'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
|
|
153
209
|
};
|
|
154
210
|
const fontSize = {
|
|
155
211
|
xs: '0.75rem',
|
|
@@ -196,9 +252,14 @@ const opacity = {
|
|
|
196
252
|
hover: '0.92'
|
|
197
253
|
};
|
|
198
254
|
const shadow = {
|
|
199
|
-
sm: '0 1px
|
|
200
|
-
md: '0
|
|
201
|
-
lg: '0
|
|
255
|
+
sm: '0 1px 1px rgba(30, 20, 50, 0.06)',
|
|
256
|
+
md: '0 1px 2px rgba(30, 20, 50, 0.05), 0 8px 20px -8px rgba(43, 26, 90, 0.18)',
|
|
257
|
+
lg: '0 2px 4px rgba(30, 20, 50, 0.06), 0 16px 40px -12px rgba(43, 26, 90, 0.28)'
|
|
258
|
+
};
|
|
259
|
+
const shadowDark = {
|
|
260
|
+
sm: '0 1px 1px rgba(0, 0, 0, 0.45)',
|
|
261
|
+
md: '0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.55)',
|
|
262
|
+
lg: '0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.65)'
|
|
202
263
|
};
|
|
203
264
|
const primitives_blur = {
|
|
204
265
|
sm: '4px',
|
|
@@ -235,17 +296,26 @@ function _object_spread(target) {
|
|
|
235
296
|
}
|
|
236
297
|
return target;
|
|
237
298
|
}
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
299
|
+
function theme_ownKeys(object, enumerableOnly) {
|
|
300
|
+
var keys = Object.keys(object);
|
|
301
|
+
if (Object.getOwnPropertySymbols) {
|
|
302
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
303
|
+
if (enumerableOnly) symbols = symbols.filter(function(sym) {
|
|
304
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
305
|
+
});
|
|
306
|
+
keys.push.apply(keys, symbols);
|
|
307
|
+
}
|
|
308
|
+
return keys;
|
|
309
|
+
}
|
|
310
|
+
function _object_spread_props(target, source) {
|
|
311
|
+
source = null != source ? source : {};
|
|
312
|
+
if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
313
|
+
else theme_ownKeys(Object(source)).forEach(function(key) {
|
|
314
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
315
|
+
});
|
|
316
|
+
return target;
|
|
317
|
+
}
|
|
318
|
+
const structural = {
|
|
249
319
|
space1: space["1"],
|
|
250
320
|
space2: space["2"],
|
|
251
321
|
space3: space["3"],
|
|
@@ -256,7 +326,6 @@ const defaultTheme = {
|
|
|
256
326
|
radiusMd: radius.md,
|
|
257
327
|
radiusFull: radius.full,
|
|
258
328
|
borderWidthThin: borderWidth.thin,
|
|
259
|
-
borderColorDefault: gray["200"],
|
|
260
329
|
fontFamilySans: fontFamily.sans,
|
|
261
330
|
fontFamilyMono: fontFamily.mono,
|
|
262
331
|
fontSizeXs: fontSize.xs,
|
|
@@ -289,12 +358,6 @@ const defaultTheme = {
|
|
|
289
358
|
focusRingOffset: focusRing.offset,
|
|
290
359
|
opacityDisabled: opacity.disabled,
|
|
291
360
|
opacityHover: opacity.hover,
|
|
292
|
-
shadowSm: shadow.sm,
|
|
293
|
-
shadowMd: shadow.md,
|
|
294
|
-
shadowLg: shadow.lg,
|
|
295
|
-
elevationRaised: shadow.sm,
|
|
296
|
-
elevationOverlay: shadow.md,
|
|
297
|
-
elevationModal: shadow.lg,
|
|
298
361
|
blurSm: primitives_blur.sm,
|
|
299
362
|
blurMd: primitives_blur.md,
|
|
300
363
|
blurLg: primitives_blur.lg,
|
|
@@ -304,10 +367,69 @@ const defaultTheme = {
|
|
|
304
367
|
zIndexToast: zIndex.toast,
|
|
305
368
|
zIndexTooltip: zIndex.tooltip
|
|
306
369
|
};
|
|
370
|
+
const defaultTheme = _object_spread_props(_object_spread({}, structural), {
|
|
371
|
+
primary: dusk["600"],
|
|
372
|
+
onPrimary: dusk.onDusk,
|
|
373
|
+
secondary: stone["200"],
|
|
374
|
+
onSecondary: stone["900"],
|
|
375
|
+
surface: paper,
|
|
376
|
+
tertiary: dusk.tint,
|
|
377
|
+
onTertiary: dusk["600"],
|
|
378
|
+
error: ember["600"],
|
|
379
|
+
onError: ember.onEmber,
|
|
380
|
+
focus: dusk["600"],
|
|
381
|
+
textMuted: stone["700"],
|
|
382
|
+
statusInfoBg: dusk.tint,
|
|
383
|
+
statusInfoText: dusk["600"],
|
|
384
|
+
statusSuccessBg: moss.tint,
|
|
385
|
+
statusSuccessText: moss["700"],
|
|
386
|
+
statusWarningBg: saffron.tint,
|
|
387
|
+
statusWarningText: saffron["700"],
|
|
388
|
+
statusErrorBg: ember.tint,
|
|
389
|
+
statusErrorText: ember["600"],
|
|
390
|
+
borderColorDefault: stone["200"],
|
|
391
|
+
shadowSm: shadow.sm,
|
|
392
|
+
shadowMd: shadow.md,
|
|
393
|
+
shadowLg: shadow.lg,
|
|
394
|
+
elevationRaised: shadow.sm,
|
|
395
|
+
elevationOverlay: shadow.md,
|
|
396
|
+
elevationModal: shadow.lg
|
|
397
|
+
});
|
|
398
|
+
const darkTheme = _object_spread_props(_object_spread({}, structural), {
|
|
399
|
+
primary: duskDark["600"],
|
|
400
|
+
onPrimary: duskDark.onDusk,
|
|
401
|
+
secondary: stoneDark["300"],
|
|
402
|
+
onSecondary: stoneDark["900"],
|
|
403
|
+
surface: paperDark,
|
|
404
|
+
tertiary: duskDark.tint,
|
|
405
|
+
onTertiary: duskDark["600"],
|
|
406
|
+
error: emberDark["600"],
|
|
407
|
+
onError: emberDark.onEmber,
|
|
408
|
+
focus: duskDark["600"],
|
|
409
|
+
textMuted: stoneDark["600"],
|
|
410
|
+
statusInfoBg: duskDark.tint,
|
|
411
|
+
statusInfoText: duskDark["600"],
|
|
412
|
+
statusSuccessBg: mossDark.tint,
|
|
413
|
+
statusSuccessText: mossDark["700"],
|
|
414
|
+
statusWarningBg: saffronDark.tint,
|
|
415
|
+
statusWarningText: saffronDark["700"],
|
|
416
|
+
statusErrorBg: emberDark.tint,
|
|
417
|
+
statusErrorText: emberDark["600"],
|
|
418
|
+
borderColorDefault: stoneDark["300"],
|
|
419
|
+
shadowSm: shadowDark.sm,
|
|
420
|
+
shadowMd: shadowDark.md,
|
|
421
|
+
shadowLg: shadowDark.lg,
|
|
422
|
+
elevationRaised: shadowDark.sm,
|
|
423
|
+
elevationOverlay: shadowDark.md,
|
|
424
|
+
elevationModal: shadowDark.lg
|
|
425
|
+
});
|
|
307
426
|
const createTheme = (overrides = {})=>_object_spread({}, defaultTheme, overrides);
|
|
308
427
|
const themes = {
|
|
309
428
|
light: {
|
|
310
429
|
normal: defaultTheme
|
|
430
|
+
},
|
|
431
|
+
dark: {
|
|
432
|
+
normal: darkTheme
|
|
311
433
|
}
|
|
312
434
|
};
|
|
313
435
|
const resolveBaseTheme = (colorScheme, contrast)=>{
|
|
@@ -409,7 +531,9 @@ const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', de
|
|
|
409
531
|
exports.VinyasaProvider = __webpack_exports__.VinyasaProvider;
|
|
410
532
|
exports.breakpoints = __webpack_exports__.breakpoints;
|
|
411
533
|
exports.createTheme = __webpack_exports__.createTheme;
|
|
534
|
+
exports.darkTheme = __webpack_exports__.darkTheme;
|
|
412
535
|
exports.defaultTheme = __webpack_exports__.defaultTheme;
|
|
536
|
+
exports.focusRingStyle = __webpack_exports__.focusRingStyle;
|
|
413
537
|
exports.grid = __webpack_exports__.grid;
|
|
414
538
|
exports.resolveBaseTheme = __webpack_exports__.resolveBaseTheme;
|
|
415
539
|
exports.resolveDensitySpacing = __webpack_exports__.resolveDensitySpacing;
|
|
@@ -419,7 +543,9 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
|
419
543
|
"VinyasaProvider",
|
|
420
544
|
"breakpoints",
|
|
421
545
|
"createTheme",
|
|
546
|
+
"darkTheme",
|
|
422
547
|
"defaultTheme",
|
|
548
|
+
"focusRingStyle",
|
|
423
549
|
"grid",
|
|
424
550
|
"resolveBaseTheme",
|
|
425
551
|
"resolveDensitySpacing",
|
|
@@ -3,12 +3,21 @@ export declare const themeContract: {
|
|
|
3
3
|
onPrimary: `var(--${string})`;
|
|
4
4
|
secondary: `var(--${string})`;
|
|
5
5
|
onSecondary: `var(--${string})`;
|
|
6
|
+
surface: `var(--${string})`;
|
|
6
7
|
tertiary: `var(--${string})`;
|
|
7
8
|
onTertiary: `var(--${string})`;
|
|
8
9
|
error: `var(--${string})`;
|
|
9
10
|
onError: `var(--${string})`;
|
|
10
11
|
focus: `var(--${string})`;
|
|
11
12
|
textMuted: `var(--${string})`;
|
|
13
|
+
statusInfoBg: `var(--${string})`;
|
|
14
|
+
statusInfoText: `var(--${string})`;
|
|
15
|
+
statusSuccessBg: `var(--${string})`;
|
|
16
|
+
statusSuccessText: `var(--${string})`;
|
|
17
|
+
statusWarningBg: `var(--${string})`;
|
|
18
|
+
statusWarningText: `var(--${string})`;
|
|
19
|
+
statusErrorBg: `var(--${string})`;
|
|
20
|
+
statusErrorText: `var(--${string})`;
|
|
12
21
|
space1: `var(--${string})`;
|
|
13
22
|
space2: `var(--${string})`;
|
|
14
23
|
space3: `var(--${string})`;
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { themeContract } from './contract.css';
|
|
2
|
-
export {
|
|
2
|
+
export { focusRingStyle } from './focusRing';
|
|
3
|
+
export { createTheme, darkTheme, defaultTheme, type VinyasaTheme } from './theme';
|
|
3
4
|
export { resolveBaseTheme, type ColorScheme, type Contrast } from './themes';
|
|
4
5
|
export { resolveDensitySpacing, type Density } from './density';
|
|
5
6
|
export { breakpoints, grid } from './layout';
|
package/dist/esm/index.js
CHANGED
|
@@ -6,12 +6,21 @@ var themeContract = {
|
|
|
6
6
|
onPrimary: 'var(--vinyasa-on-primary)',
|
|
7
7
|
secondary: 'var(--vinyasa-secondary)',
|
|
8
8
|
onSecondary: 'var(--vinyasa-on-secondary)',
|
|
9
|
+
surface: 'var(--vinyasa-surface)',
|
|
9
10
|
tertiary: 'var(--vinyasa-tertiary)',
|
|
10
11
|
onTertiary: 'var(--vinyasa-on-tertiary)',
|
|
11
12
|
error: 'var(--vinyasa-error)',
|
|
12
13
|
onError: 'var(--vinyasa-on-error)',
|
|
13
14
|
focus: 'var(--vinyasa-focus)',
|
|
14
15
|
textMuted: 'var(--vinyasa-text-muted)',
|
|
16
|
+
statusInfoBg: 'var(--vinyasa-status-info-bg)',
|
|
17
|
+
statusInfoText: 'var(--vinyasa-status-info-text)',
|
|
18
|
+
statusSuccessBg: 'var(--vinyasa-status-success-bg)',
|
|
19
|
+
statusSuccessText: 'var(--vinyasa-status-success-text)',
|
|
20
|
+
statusWarningBg: 'var(--vinyasa-status-warning-bg)',
|
|
21
|
+
statusWarningText: 'var(--vinyasa-status-warning-text)',
|
|
22
|
+
statusErrorBg: 'var(--vinyasa-status-error-bg)',
|
|
23
|
+
statusErrorText: 'var(--vinyasa-status-error-text)',
|
|
15
24
|
space1: 'var(--vinyasa-space1)',
|
|
16
25
|
space2: 'var(--vinyasa-space2)',
|
|
17
26
|
space3: 'var(--vinyasa-space3)',
|
|
@@ -70,29 +79,74 @@ var themeContract = {
|
|
|
70
79
|
zIndexToast: 'var(--vinyasa-z-index-toast)',
|
|
71
80
|
zIndexTooltip: 'var(--vinyasa-z-index-tooltip)'
|
|
72
81
|
};
|
|
73
|
-
const
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
};
|
|
90
|
-
const
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
82
|
+
const focusRingStyle = (vars)=>({
|
|
83
|
+
outline: 'none',
|
|
84
|
+
borderColor: vars.focus,
|
|
85
|
+
boxShadow: `0 0 0 1px ${vars.focus}, 0 0 0 4px color-mix(in srgb, ${vars.focus} 16%, transparent)`
|
|
86
|
+
});
|
|
87
|
+
const stone = {
|
|
88
|
+
50: '#FAFAFC',
|
|
89
|
+
100: '#F6F5F8',
|
|
90
|
+
200: '#E3E0EA',
|
|
91
|
+
300: '#CFCADC',
|
|
92
|
+
400: '#A79DBE',
|
|
93
|
+
500: '#7C7191',
|
|
94
|
+
600: '#5C5470',
|
|
95
|
+
700: '#4A4458',
|
|
96
|
+
800: '#332E40',
|
|
97
|
+
900: '#1E1A28'
|
|
98
|
+
};
|
|
99
|
+
const stoneDark = {
|
|
100
|
+
50: '#100E17',
|
|
101
|
+
100: '#161320',
|
|
102
|
+
200: '#221C30',
|
|
103
|
+
300: '#362E4C',
|
|
104
|
+
400: '#493D64',
|
|
105
|
+
500: '#7C7191',
|
|
106
|
+
600: '#B9B3CB',
|
|
107
|
+
700: '#D6D2E0',
|
|
108
|
+
800: '#E9E7EF',
|
|
109
|
+
900: '#F1EFF5'
|
|
110
|
+
};
|
|
111
|
+
const paper = '#FFFFFF';
|
|
112
|
+
const paperDark = stoneDark[200];
|
|
113
|
+
const dusk = {
|
|
114
|
+
tint: '#EEE9F9',
|
|
115
|
+
600: '#4B2E8C',
|
|
116
|
+
700: '#37206B',
|
|
117
|
+
onDusk: '#FFFFFF'
|
|
118
|
+
};
|
|
119
|
+
const duskDark = {
|
|
120
|
+
tint: '#2E2648',
|
|
121
|
+
600: '#B49BEA',
|
|
122
|
+
700: '#CBB8F2',
|
|
123
|
+
onDusk: '#1A1425'
|
|
124
|
+
};
|
|
125
|
+
const moss = {
|
|
126
|
+
tint: '#E4EEE8',
|
|
127
|
+
700: '#3F6650'
|
|
128
|
+
};
|
|
129
|
+
const mossDark = {
|
|
130
|
+
tint: '#22332A',
|
|
131
|
+
700: '#7FB89A'
|
|
132
|
+
};
|
|
133
|
+
const ember = {
|
|
134
|
+
tint: '#F7E7E1',
|
|
135
|
+
600: '#A64B2A',
|
|
136
|
+
onEmber: '#FFFFFF'
|
|
137
|
+
};
|
|
138
|
+
const emberDark = {
|
|
139
|
+
tint: '#3A281F',
|
|
140
|
+
600: '#E08D6D',
|
|
141
|
+
onEmber: '#2A1208'
|
|
142
|
+
};
|
|
143
|
+
const saffron = {
|
|
144
|
+
tint: '#F5EBDD',
|
|
145
|
+
700: '#A15C1F'
|
|
146
|
+
};
|
|
147
|
+
const saffronDark = {
|
|
148
|
+
tint: '#3A2F1B',
|
|
149
|
+
700: '#D9A15C'
|
|
96
150
|
};
|
|
97
151
|
const space = {
|
|
98
152
|
1: '0.25rem',
|
|
@@ -111,8 +165,8 @@ const borderWidth = {
|
|
|
111
165
|
thin: '1px'
|
|
112
166
|
};
|
|
113
167
|
const fontFamily = {
|
|
114
|
-
sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
|
|
115
|
-
mono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
|
|
168
|
+
sans: "'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
|
|
169
|
+
mono: "'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
|
|
116
170
|
};
|
|
117
171
|
const fontSize = {
|
|
118
172
|
xs: '0.75rem',
|
|
@@ -159,9 +213,14 @@ const opacity = {
|
|
|
159
213
|
hover: '0.92'
|
|
160
214
|
};
|
|
161
215
|
const shadow = {
|
|
162
|
-
sm: '0 1px
|
|
163
|
-
md: '0
|
|
164
|
-
lg: '0
|
|
216
|
+
sm: '0 1px 1px rgba(30, 20, 50, 0.06)',
|
|
217
|
+
md: '0 1px 2px rgba(30, 20, 50, 0.05), 0 8px 20px -8px rgba(43, 26, 90, 0.18)',
|
|
218
|
+
lg: '0 2px 4px rgba(30, 20, 50, 0.06), 0 16px 40px -12px rgba(43, 26, 90, 0.28)'
|
|
219
|
+
};
|
|
220
|
+
const shadowDark = {
|
|
221
|
+
sm: '0 1px 1px rgba(0, 0, 0, 0.45)',
|
|
222
|
+
md: '0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.55)',
|
|
223
|
+
lg: '0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.65)'
|
|
165
224
|
};
|
|
166
225
|
const primitives_blur = {
|
|
167
226
|
sm: '4px',
|
|
@@ -175,17 +234,7 @@ const zIndex = {
|
|
|
175
234
|
toast: '1300',
|
|
176
235
|
tooltip: '1400'
|
|
177
236
|
};
|
|
178
|
-
const
|
|
179
|
-
primary: indigo["600"],
|
|
180
|
-
onPrimary: '#ffffff',
|
|
181
|
-
secondary: gray["100"],
|
|
182
|
-
onSecondary: gray["900"],
|
|
183
|
-
tertiary: blue["100"],
|
|
184
|
-
onTertiary: blue["700"],
|
|
185
|
-
error: red["600"],
|
|
186
|
-
onError: '#ffffff',
|
|
187
|
-
focus: blue["500"],
|
|
188
|
-
textMuted: gray["500"],
|
|
237
|
+
const structural = {
|
|
189
238
|
space1: space["1"],
|
|
190
239
|
space2: space["2"],
|
|
191
240
|
space3: space["3"],
|
|
@@ -196,7 +245,6 @@ const defaultTheme = {
|
|
|
196
245
|
radiusMd: radius.md,
|
|
197
246
|
radiusFull: radius.full,
|
|
198
247
|
borderWidthThin: borderWidth.thin,
|
|
199
|
-
borderColorDefault: gray["200"],
|
|
200
248
|
fontFamilySans: fontFamily.sans,
|
|
201
249
|
fontFamilyMono: fontFamily.mono,
|
|
202
250
|
fontSizeXs: fontSize.xs,
|
|
@@ -229,12 +277,6 @@ const defaultTheme = {
|
|
|
229
277
|
focusRingOffset: focusRing.offset,
|
|
230
278
|
opacityDisabled: opacity.disabled,
|
|
231
279
|
opacityHover: opacity.hover,
|
|
232
|
-
shadowSm: shadow.sm,
|
|
233
|
-
shadowMd: shadow.md,
|
|
234
|
-
shadowLg: shadow.lg,
|
|
235
|
-
elevationRaised: shadow.sm,
|
|
236
|
-
elevationOverlay: shadow.md,
|
|
237
|
-
elevationModal: shadow.lg,
|
|
238
280
|
blurSm: primitives_blur.sm,
|
|
239
281
|
blurMd: primitives_blur.md,
|
|
240
282
|
blurLg: primitives_blur.lg,
|
|
@@ -244,6 +286,64 @@ const defaultTheme = {
|
|
|
244
286
|
zIndexToast: zIndex.toast,
|
|
245
287
|
zIndexTooltip: zIndex.tooltip
|
|
246
288
|
};
|
|
289
|
+
const defaultTheme = {
|
|
290
|
+
...structural,
|
|
291
|
+
primary: dusk["600"],
|
|
292
|
+
onPrimary: dusk.onDusk,
|
|
293
|
+
secondary: stone["200"],
|
|
294
|
+
onSecondary: stone["900"],
|
|
295
|
+
surface: paper,
|
|
296
|
+
tertiary: dusk.tint,
|
|
297
|
+
onTertiary: dusk["600"],
|
|
298
|
+
error: ember["600"],
|
|
299
|
+
onError: ember.onEmber,
|
|
300
|
+
focus: dusk["600"],
|
|
301
|
+
textMuted: stone["700"],
|
|
302
|
+
statusInfoBg: dusk.tint,
|
|
303
|
+
statusInfoText: dusk["600"],
|
|
304
|
+
statusSuccessBg: moss.tint,
|
|
305
|
+
statusSuccessText: moss["700"],
|
|
306
|
+
statusWarningBg: saffron.tint,
|
|
307
|
+
statusWarningText: saffron["700"],
|
|
308
|
+
statusErrorBg: ember.tint,
|
|
309
|
+
statusErrorText: ember["600"],
|
|
310
|
+
borderColorDefault: stone["200"],
|
|
311
|
+
shadowSm: shadow.sm,
|
|
312
|
+
shadowMd: shadow.md,
|
|
313
|
+
shadowLg: shadow.lg,
|
|
314
|
+
elevationRaised: shadow.sm,
|
|
315
|
+
elevationOverlay: shadow.md,
|
|
316
|
+
elevationModal: shadow.lg
|
|
317
|
+
};
|
|
318
|
+
const darkTheme = {
|
|
319
|
+
...structural,
|
|
320
|
+
primary: duskDark["600"],
|
|
321
|
+
onPrimary: duskDark.onDusk,
|
|
322
|
+
secondary: stoneDark["300"],
|
|
323
|
+
onSecondary: stoneDark["900"],
|
|
324
|
+
surface: paperDark,
|
|
325
|
+
tertiary: duskDark.tint,
|
|
326
|
+
onTertiary: duskDark["600"],
|
|
327
|
+
error: emberDark["600"],
|
|
328
|
+
onError: emberDark.onEmber,
|
|
329
|
+
focus: duskDark["600"],
|
|
330
|
+
textMuted: stoneDark["600"],
|
|
331
|
+
statusInfoBg: duskDark.tint,
|
|
332
|
+
statusInfoText: duskDark["600"],
|
|
333
|
+
statusSuccessBg: mossDark.tint,
|
|
334
|
+
statusSuccessText: mossDark["700"],
|
|
335
|
+
statusWarningBg: saffronDark.tint,
|
|
336
|
+
statusWarningText: saffronDark["700"],
|
|
337
|
+
statusErrorBg: emberDark.tint,
|
|
338
|
+
statusErrorText: emberDark["600"],
|
|
339
|
+
borderColorDefault: stoneDark["300"],
|
|
340
|
+
shadowSm: shadowDark.sm,
|
|
341
|
+
shadowMd: shadowDark.md,
|
|
342
|
+
shadowLg: shadowDark.lg,
|
|
343
|
+
elevationRaised: shadowDark.sm,
|
|
344
|
+
elevationOverlay: shadowDark.md,
|
|
345
|
+
elevationModal: shadowDark.lg
|
|
346
|
+
};
|
|
247
347
|
const createTheme = (overrides = {})=>({
|
|
248
348
|
...defaultTheme,
|
|
249
349
|
...overrides
|
|
@@ -251,6 +351,9 @@ const createTheme = (overrides = {})=>({
|
|
|
251
351
|
const themes = {
|
|
252
352
|
light: {
|
|
253
353
|
normal: defaultTheme
|
|
354
|
+
},
|
|
355
|
+
dark: {
|
|
356
|
+
normal: darkTheme
|
|
254
357
|
}
|
|
255
358
|
};
|
|
256
359
|
const resolveBaseTheme = (colorScheme, contrast)=>{
|
|
@@ -327,4 +430,4 @@ const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', de
|
|
|
327
430
|
})
|
|
328
431
|
});
|
|
329
432
|
};
|
|
330
|
-
export { VinyasaProvider, breakpoints, createTheme, defaultTheme, grid, resolveBaseTheme, resolveDensitySpacing, themeContract, useVinyasaTheme };
|
|
433
|
+
export { VinyasaProvider, breakpoints, createTheme, darkTheme, defaultTheme, focusRingStyle, grid, resolveBaseTheme, resolveDensitySpacing, themeContract, useVinyasaTheme };
|
package/dist/esm/primitives.d.ts
CHANGED
|
@@ -1,26 +1,78 @@
|
|
|
1
|
-
export declare const
|
|
2
|
-
readonly 50: "#
|
|
3
|
-
readonly 100: "#
|
|
4
|
-
readonly 200: "#
|
|
5
|
-
readonly 300: "#
|
|
6
|
-
readonly 400: "#
|
|
7
|
-
readonly 500: "#
|
|
8
|
-
readonly 600: "#
|
|
9
|
-
readonly 700: "#
|
|
10
|
-
readonly 800: "#
|
|
11
|
-
readonly 900: "#
|
|
12
|
-
};
|
|
13
|
-
export declare const
|
|
14
|
-
readonly
|
|
15
|
-
readonly
|
|
16
|
-
readonly
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
readonly
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
readonly
|
|
23
|
-
readonly
|
|
1
|
+
export declare const stone: {
|
|
2
|
+
readonly 50: "#FAFAFC";
|
|
3
|
+
readonly 100: "#F6F5F8";
|
|
4
|
+
readonly 200: "#E3E0EA";
|
|
5
|
+
readonly 300: "#CFCADC";
|
|
6
|
+
readonly 400: "#A79DBE";
|
|
7
|
+
readonly 500: "#7C7191";
|
|
8
|
+
readonly 600: "#5C5470";
|
|
9
|
+
readonly 700: "#4A4458";
|
|
10
|
+
readonly 800: "#332E40";
|
|
11
|
+
readonly 900: "#1E1A28";
|
|
12
|
+
};
|
|
13
|
+
export declare const stoneDark: {
|
|
14
|
+
readonly 50: "#100E17";
|
|
15
|
+
readonly 100: "#161320";
|
|
16
|
+
readonly 200: "#221C30";
|
|
17
|
+
readonly 300: "#362E4C";
|
|
18
|
+
readonly 400: "#493D64";
|
|
19
|
+
readonly 500: "#7C7191";
|
|
20
|
+
readonly 600: "#B9B3CB";
|
|
21
|
+
readonly 700: "#D6D2E0";
|
|
22
|
+
readonly 800: "#E9E7EF";
|
|
23
|
+
readonly 900: "#F1EFF5";
|
|
24
|
+
};
|
|
25
|
+
export declare const paper = "#FFFFFF";
|
|
26
|
+
export declare const paperDark: "#221C30";
|
|
27
|
+
export declare const dusk: {
|
|
28
|
+
readonly tint: "#EEE9F9";
|
|
29
|
+
readonly 600: "#4B2E8C";
|
|
30
|
+
readonly 700: "#37206B";
|
|
31
|
+
readonly onDusk: "#FFFFFF";
|
|
32
|
+
};
|
|
33
|
+
export declare const duskDark: {
|
|
34
|
+
readonly tint: "#2E2648";
|
|
35
|
+
readonly 600: "#B49BEA";
|
|
36
|
+
readonly 700: "#CBB8F2";
|
|
37
|
+
readonly onDusk: "#1A1425";
|
|
38
|
+
};
|
|
39
|
+
export declare const sunrise: {
|
|
40
|
+
readonly tint: "#FFE9DF";
|
|
41
|
+
readonly 600: "#FF5A2B";
|
|
42
|
+
readonly 700: "#E64719";
|
|
43
|
+
readonly onSunrise: "#2A1206";
|
|
44
|
+
};
|
|
45
|
+
export declare const sunriseDark: {
|
|
46
|
+
readonly tint: "#3D2113";
|
|
47
|
+
readonly 600: "#FF8354";
|
|
48
|
+
readonly 700: "#FFA47C";
|
|
49
|
+
readonly onSunrise: "#200E05";
|
|
50
|
+
};
|
|
51
|
+
export declare const moss: {
|
|
52
|
+
readonly tint: "#E4EEE8";
|
|
53
|
+
readonly 700: "#3F6650";
|
|
54
|
+
};
|
|
55
|
+
export declare const mossDark: {
|
|
56
|
+
readonly tint: "#22332A";
|
|
57
|
+
readonly 700: "#7FB89A";
|
|
58
|
+
};
|
|
59
|
+
export declare const ember: {
|
|
60
|
+
readonly tint: "#F7E7E1";
|
|
61
|
+
readonly 600: "#A64B2A";
|
|
62
|
+
readonly onEmber: "#FFFFFF";
|
|
63
|
+
};
|
|
64
|
+
export declare const emberDark: {
|
|
65
|
+
readonly tint: "#3A281F";
|
|
66
|
+
readonly 600: "#E08D6D";
|
|
67
|
+
readonly onEmber: "#2A1208";
|
|
68
|
+
};
|
|
69
|
+
export declare const saffron: {
|
|
70
|
+
readonly tint: "#F5EBDD";
|
|
71
|
+
readonly 700: "#A15C1F";
|
|
72
|
+
};
|
|
73
|
+
export declare const saffronDark: {
|
|
74
|
+
readonly tint: "#3A2F1B";
|
|
75
|
+
readonly 700: "#D9A15C";
|
|
24
76
|
};
|
|
25
77
|
export declare const space: {
|
|
26
78
|
readonly 1: "0.25rem";
|
|
@@ -39,8 +91,8 @@ export declare const borderWidth: {
|
|
|
39
91
|
readonly thin: "1px";
|
|
40
92
|
};
|
|
41
93
|
export declare const fontFamily: {
|
|
42
|
-
readonly sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
|
|
43
|
-
readonly mono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace";
|
|
94
|
+
readonly sans: "'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
|
|
95
|
+
readonly mono: "'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace";
|
|
44
96
|
};
|
|
45
97
|
export declare const fontSize: {
|
|
46
98
|
readonly xs: "0.75rem";
|
|
@@ -87,9 +139,14 @@ export declare const opacity: {
|
|
|
87
139
|
readonly hover: "0.92";
|
|
88
140
|
};
|
|
89
141
|
export declare const shadow: {
|
|
90
|
-
readonly sm: "0 1px
|
|
91
|
-
readonly md: "0
|
|
92
|
-
readonly lg: "0
|
|
142
|
+
readonly sm: "0 1px 1px rgba(30, 20, 50, 0.06)";
|
|
143
|
+
readonly md: "0 1px 2px rgba(30, 20, 50, 0.05), 0 8px 20px -8px rgba(43, 26, 90, 0.18)";
|
|
144
|
+
readonly lg: "0 2px 4px rgba(30, 20, 50, 0.06), 0 16px 40px -12px rgba(43, 26, 90, 0.28)";
|
|
145
|
+
};
|
|
146
|
+
export declare const shadowDark: {
|
|
147
|
+
readonly sm: "0 1px 1px rgba(0, 0, 0, 0.45)";
|
|
148
|
+
readonly md: "0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.55)";
|
|
149
|
+
readonly lg: "0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.65)";
|
|
93
150
|
};
|
|
94
151
|
export declare const blur: {
|
|
95
152
|
readonly sm: "4px";
|
package/dist/esm/theme.d.ts
CHANGED
|
@@ -3,12 +3,21 @@ export interface VinyasaTheme {
|
|
|
3
3
|
onPrimary: string;
|
|
4
4
|
secondary: string;
|
|
5
5
|
onSecondary: string;
|
|
6
|
+
surface: string;
|
|
6
7
|
tertiary: string;
|
|
7
8
|
onTertiary: string;
|
|
8
9
|
error: string;
|
|
9
10
|
onError: string;
|
|
10
11
|
focus: string;
|
|
11
12
|
textMuted: string;
|
|
13
|
+
statusInfoBg: string;
|
|
14
|
+
statusInfoText: string;
|
|
15
|
+
statusSuccessBg: string;
|
|
16
|
+
statusSuccessText: string;
|
|
17
|
+
statusWarningBg: string;
|
|
18
|
+
statusWarningText: string;
|
|
19
|
+
statusErrorBg: string;
|
|
20
|
+
statusErrorText: string;
|
|
12
21
|
space1: string;
|
|
13
22
|
space2: string;
|
|
14
23
|
space3: string;
|
|
@@ -68,4 +77,5 @@ export interface VinyasaTheme {
|
|
|
68
77
|
zIndexTooltip: string;
|
|
69
78
|
}
|
|
70
79
|
export declare const defaultTheme: VinyasaTheme;
|
|
80
|
+
export declare const darkTheme: VinyasaTheme;
|
|
71
81
|
export declare const createTheme: (overrides?: Partial<VinyasaTheme>) => VinyasaTheme;
|