@duro-app/tokens 2.0.0 → 3.0.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 (5) hide show
  1. package/dist/keys.d.ts +43 -0
  2. package/dist/keys.d.ts.map +1 -1
  3. package/dist/mockup.css +200 -0
  4. package/package.json +4 -3
  5. package/src/keys.ts +57 -0
package/dist/keys.d.ts CHANGED
@@ -37,6 +37,49 @@ export declare const ICON_SIZES: {
37
37
  readonly xxl: 48;
38
38
  };
39
39
  export type IconSize = keyof typeof ICON_SIZES;
40
+ export declare const BREAKPOINT_KEYS: readonly ["xs", "sm", "md", "lg", "xl"];
41
+ export declare const BREAKPOINTS_PX: {
42
+ readonly xs: 480;
43
+ readonly sm: 640;
44
+ readonly md: 768;
45
+ readonly lg: 1024;
46
+ readonly xl: 1280;
47
+ };
48
+ export declare const FONT_SIZE_REM: {
49
+ readonly fontSizeXs: 0.75;
50
+ readonly fontSizeSm: 0.875;
51
+ readonly fontSizeMd: 1;
52
+ readonly fontSizeLg: 1.125;
53
+ readonly fontSizeXl: 1.25;
54
+ readonly fontSizeHeading: 1.5;
55
+ };
56
+ export declare const FONT_WEIGHTS: {
57
+ readonly fontWeightNormal: 400;
58
+ readonly fontWeightMedium: 500;
59
+ readonly fontWeightSemibold: 600;
60
+ readonly fontWeightBold: 700;
61
+ };
62
+ export declare const TYPE_SCALE_FONT_SIZE_REM: {
63
+ readonly fontSize1: 0.75;
64
+ readonly fontSize2: 0.8125;
65
+ readonly fontSize3: 0.875;
66
+ readonly fontSize4: 1;
67
+ readonly fontSize5: 1.125;
68
+ readonly fontSize6: 1.25;
69
+ readonly fontSize7: 1.5;
70
+ readonly fontSize8: 1.875;
71
+ readonly fontSize9: 2.25;
72
+ };
73
+ export declare const SHADOWS: {
74
+ readonly sm: "0 2px 4px rgba(0, 0, 0, 0.3)";
75
+ readonly md: "0 4px 12px rgba(0, 0, 0, 0.4)";
76
+ readonly lg: "0 8px 24px rgba(0, 0, 0, 0.5)";
77
+ };
78
+ export declare const EASINGS: {
79
+ readonly standard: "ease";
80
+ readonly easeOut: "cubic-bezier(0.32, 0.72, 0, 1)";
81
+ readonly easeIn: "cubic-bezier(0.72, 0, 0.68, 0.28)";
82
+ };
40
83
  export type ColorToken = keyof RawColors;
41
84
  export type { Breakpoint } from './tokens/breakpoints.css.js';
42
85
  //# sourceMappingURL=keys.d.ts.map
package/dist/keys.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"keys.d.ts","sourceRoot":"","sources":["../src/keys.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAA;AAEvC,eAAO,MAAM,YAAY,8DAA+D,CAAA;AACxF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAGxD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAEV,eAAO,MAAM,WAAW,2CAA4C,CAAA;AACpE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,QAAQ;;;;;;CAMX,CAAA;AAEV,eAAO,MAAM,WAAW,6BAA8B,CAAA;AACtD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,WAAW;;;;;CAKd,CAAA;AACV,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,WAAW,CAAA;AAIpD,eAAO,MAAM,UAAU;;;;;;CAMb,CAAA;AACV,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAA;AAE9C,MAAM,MAAM,UAAU,GAAG,MAAM,SAAS,CAAA;AAExC,YAAY,EAAC,UAAU,EAAC,MAAM,6BAA6B,CAAA"}
1
+ {"version":3,"file":"keys.d.ts","sourceRoot":"","sources":["../src/keys.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAA;AAEvC,eAAO,MAAM,YAAY,8DAA+D,CAAA;AACxF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAGxD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAEV,eAAO,MAAM,WAAW,2CAA4C,CAAA;AACpE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,QAAQ;;;;;;CAMX,CAAA;AAEV,eAAO,MAAM,WAAW,6BAA8B,CAAA;AACtD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,WAAW;;;;;CAKd,CAAA;AACV,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,WAAW,CAAA;AAIpD,eAAO,MAAM,UAAU;;;;;;CAMb,CAAA;AACV,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAA;AAK9C,eAAO,MAAM,eAAe,yCAA0C,CAAA;AACtE,eAAO,MAAM,cAAc;;;;;;CAMjB,CAAA;AAGV,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAA;AAGV,eAAO,MAAM,YAAY;;;;;CAKf,CAAA;AAGV,eAAO,MAAM,wBAAwB;;;;;;;;;;CAU3B,CAAA;AAGV,eAAO,MAAM,OAAO;;;;CAIV,CAAA;AAGV,eAAO,MAAM,OAAO;;;;CAIV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,SAAS,CAAA;AAExC,YAAY,EAAC,UAAU,EAAC,MAAM,6BAA6B,CAAA"}
package/dist/mockup.css ADDED
@@ -0,0 +1,200 @@
1
+ /*
2
+ * GENERATED by scripts/generate-mockup-css.mjs — do not edit.
3
+ *
4
+ * The design tokens as resolved values, for HTML that loads no stylesheet
5
+ * (mockup artboards, static previews). Same names as vars.css; where vars.css
6
+ * follows the live theme, this file carries every theme and switches on
7
+ * <html data-theme="light|high-contrast">.
8
+ *
9
+ * Inside the component library and the apps, never use this: go through
10
+ * css.create() and the token imports, or vars.css from plain CSS.
11
+ */
12
+ :root {
13
+ color-scheme: dark;
14
+ /* colors */
15
+ --duro-color-accent: #6aaffc;
16
+ --duro-color-accent-contrast: #000000;
17
+ --duro-color-accent-hover: #93c5fd;
18
+ --duro-color-bg: #0f0f0f;
19
+ --duro-color-bg-card: #1a1a1a;
20
+ --duro-color-bg-card-hover: #242424;
21
+ --duro-color-border: #333333;
22
+ --duro-color-error: #f87171;
23
+ --duro-color-error-bg: rgba(248, 113, 113, 0.1);
24
+ --duro-color-error-border: rgba(248, 113, 113, 0.3);
25
+ --duro-color-error-contrast: #000000;
26
+ --duro-color-error-hover: #fca5a5;
27
+ --duro-color-error-text: #fca5a5;
28
+ --duro-color-info: #6aaffc;
29
+ --duro-color-info-bg: rgba(106, 175, 252, 0.1);
30
+ --duro-color-info-border: rgba(106, 175, 252, 0.3);
31
+ --duro-color-info-text: #93c5fd;
32
+ --duro-color-success: #22c55e;
33
+ --duro-color-success-bg: rgba(34, 197, 94, 0.1);
34
+ --duro-color-success-border: rgba(34, 197, 94, 0.3);
35
+ --duro-color-success-text: #86efac;
36
+ --duro-color-text: #e5e5e5;
37
+ --duro-color-text-muted: #b0b0b0;
38
+ --duro-color-warning: #fbbf24;
39
+ --duro-color-warning-bg: rgba(251, 191, 36, 0.1);
40
+ --duro-color-warning-border: rgba(251, 191, 36, 0.3);
41
+ --duro-color-warning-text: #fde68a;
42
+ /* shadows */
43
+ --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
44
+ --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
45
+ --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
46
+ /* spacing */
47
+ --duro-spacing-lg: 24px;
48
+ --duro-spacing-md: 16px;
49
+ --duro-spacing-ms: 12px;
50
+ --duro-spacing-sm: 8px;
51
+ --duro-spacing-xl: 32px;
52
+ --duro-spacing-xs: 4px;
53
+ --duro-spacing-xxl: 48px;
54
+ --duro-spacing-xxxl: 64px;
55
+ /* radii */
56
+ --duro-radius-full: 9999px;
57
+ --duro-radius-lg: 16px;
58
+ --duro-radius-md: 12px;
59
+ --duro-radius-sm: 8px;
60
+ --duro-radius-xs: 4px;
61
+ /* layoutSpacing */
62
+ --duro-layout-spacing-container-lg: 32px;
63
+ --duro-layout-spacing-container-md: 24px;
64
+ --duro-layout-spacing-container-sm: 16px;
65
+ --duro-layout-spacing-inline-lg: 24px;
66
+ --duro-layout-spacing-inline-md: 16px;
67
+ --duro-layout-spacing-inline-sm: 8px;
68
+ --duro-layout-spacing-inline-xs: 4px;
69
+ --duro-layout-spacing-stack-lg: 24px;
70
+ --duro-layout-spacing-stack-md: 16px;
71
+ --duro-layout-spacing-stack-sm: 8px;
72
+ --duro-layout-spacing-stack-xl: 48px;
73
+ --duro-layout-spacing-stack-xs: 4px;
74
+ /* typography */
75
+ --duro-typography-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
76
+ --duro-typography-font-family-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Courier New", monospace;
77
+ --duro-typography-font-size-heading: 1.5rem;
78
+ --duro-typography-font-size-lg: 1.125rem;
79
+ --duro-typography-font-size-md: 1rem;
80
+ --duro-typography-font-size-sm: 0.875rem;
81
+ --duro-typography-font-size-xl: 1.25rem;
82
+ --duro-typography-font-size-xs: 0.75rem;
83
+ --duro-typography-font-weight-bold: 700;
84
+ --duro-typography-font-weight-medium: 500;
85
+ --duro-typography-font-weight-normal: 400;
86
+ --duro-typography-font-weight-semibold: 600;
87
+ --duro-typography-line-height: 1.5;
88
+ /* typeScale */
89
+ --duro-type-scale-display-lg: clamp(3.5rem, 2rem + 3.5vw, 4.5rem);
90
+ --duro-type-scale-display-md: clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem);
91
+ --duro-type-scale-display-sm: clamp(2.25rem, 1.5rem + 2vw, 3rem);
92
+ --duro-type-scale-font-size1: 0.75rem;
93
+ --duro-type-scale-font-size2: 0.8125rem;
94
+ --duro-type-scale-font-size3: 0.875rem;
95
+ --duro-type-scale-font-size4: 1rem;
96
+ --duro-type-scale-font-size5: 1.125rem;
97
+ --duro-type-scale-font-size6: 1.25rem;
98
+ --duro-type-scale-font-size7: 1.5rem;
99
+ --duro-type-scale-font-size8: 1.875rem;
100
+ --duro-type-scale-font-size9: 2.25rem;
101
+ --duro-type-scale-letter-spacing-normal: 0;
102
+ --duro-type-scale-letter-spacing-tight: -0.02em;
103
+ --duro-type-scale-letter-spacing-wide: 0.04em;
104
+ --duro-type-scale-line-height1: 1rem;
105
+ --duro-type-scale-line-height2: 1.25rem;
106
+ --duro-type-scale-line-height3: 1.25rem;
107
+ --duro-type-scale-line-height4: 1.5rem;
108
+ --duro-type-scale-line-height5: 1.5rem;
109
+ --duro-type-scale-line-height6: 1.75rem;
110
+ --duro-type-scale-line-height7: 2rem;
111
+ --duro-type-scale-line-height8: 2.25rem;
112
+ --duro-type-scale-line-height9: 2.75rem;
113
+ /* duration */
114
+ --duro-duration-base: 200ms;
115
+ --duro-duration-fast: 150ms;
116
+ --duro-duration-instant: 0ms;
117
+ --duro-duration-slow: 280ms;
118
+ /* easing */
119
+ --duro-easing-ease-in: cubic-bezier(0.72, 0, 0.68, 0.28);
120
+ --duro-easing-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
121
+ --duro-easing-standard: ease;
122
+ /* breakpoints */
123
+ --duro-breakpoint-lg: 1024px;
124
+ --duro-breakpoint-md: 768px;
125
+ --duro-breakpoint-sm: 640px;
126
+ --duro-breakpoint-xl: 1280px;
127
+ --duro-breakpoint-xs: 480px;
128
+ }
129
+
130
+ :root[data-theme="light"] {
131
+ color-scheme: light;
132
+ /* colors */
133
+ --duro-color-accent: #1e40af;
134
+ --duro-color-accent-contrast: #ffffff;
135
+ --duro-color-accent-hover: #1a3799;
136
+ --duro-color-bg: #ffffff;
137
+ --duro-color-bg-card: #f5f5f5;
138
+ --duro-color-bg-card-hover: #ebebeb;
139
+ --duro-color-border: #d4d4d4;
140
+ --duro-color-error: #991b1b;
141
+ --duro-color-error-bg: rgba(153, 27, 27, 0.08);
142
+ --duro-color-error-border: rgba(153, 27, 27, 0.3);
143
+ --duro-color-error-contrast: #ffffff;
144
+ --duro-color-error-hover: #7f1d1d;
145
+ --duro-color-error-text: #7f1d1d;
146
+ --duro-color-info: #1e40af;
147
+ --duro-color-info-bg: rgba(30, 64, 175, 0.08);
148
+ --duro-color-info-border: rgba(30, 64, 175, 0.3);
149
+ --duro-color-info-text: #1e40af;
150
+ --duro-color-success: #166534;
151
+ --duro-color-success-bg: rgba(22, 101, 52, 0.08);
152
+ --duro-color-success-border: rgba(22, 101, 52, 0.3);
153
+ --duro-color-success-text: #14532d;
154
+ --duro-color-text: #1a1a1a;
155
+ --duro-color-text-muted: #4a4a4a;
156
+ --duro-color-warning: #92400e;
157
+ --duro-color-warning-bg: rgba(146, 64, 14, 0.08);
158
+ --duro-color-warning-border: rgba(146, 64, 14, 0.3);
159
+ --duro-color-warning-text: #78350f;
160
+ /* shadows */
161
+ --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
162
+ --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
163
+ --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
164
+ }
165
+
166
+ :root[data-theme="high-contrast"] {
167
+ color-scheme: dark;
168
+ /* colors */
169
+ --duro-color-accent: #60a5fa;
170
+ --duro-color-accent-contrast: #000000;
171
+ --duro-color-accent-hover: #93c5fd;
172
+ --duro-color-bg: #000000;
173
+ --duro-color-bg-card: #111111;
174
+ --duro-color-bg-card-hover: #1a1a1a;
175
+ --duro-color-border: #555555;
176
+ --duro-color-error: #f87171;
177
+ --duro-color-error-bg: rgba(248, 113, 113, 0.15);
178
+ --duro-color-error-border: rgba(248, 113, 113, 0.5);
179
+ --duro-color-error-contrast: #000000;
180
+ --duro-color-error-hover: #fca5a5;
181
+ --duro-color-error-text: #fca5a5;
182
+ --duro-color-info: #60a5fa;
183
+ --duro-color-info-bg: rgba(96, 165, 250, 0.15);
184
+ --duro-color-info-border: rgba(96, 165, 250, 0.5);
185
+ --duro-color-info-text: #bfdbfe;
186
+ --duro-color-success: #4ade80;
187
+ --duro-color-success-bg: rgba(74, 222, 128, 0.15);
188
+ --duro-color-success-border: rgba(74, 222, 128, 0.5);
189
+ --duro-color-success-text: #86efac;
190
+ --duro-color-text: #ffffff;
191
+ --duro-color-text-muted: #b0b0b0;
192
+ --duro-color-warning: #fcd34d;
193
+ --duro-color-warning-bg: rgba(252, 211, 77, 0.15);
194
+ --duro-color-warning-border: rgba(252, 211, 77, 0.5);
195
+ --duro-color-warning-text: #fef08a;
196
+ /* shadows */
197
+ --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);
198
+ --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7);
199
+ --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6);
200
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@duro-app/tokens",
3
- "version": "2.0.0",
3
+ "version": "3.0.0",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -46,7 +46,8 @@
46
46
  "./tokens/type-presets.css": "./src/tokens/type-presets.css.ts",
47
47
  "./themes/light.css": "./src/themes/light.css.ts",
48
48
  "./themes/high-contrast.css": "./src/themes/high-contrast.css.ts",
49
- "./vars.css": "./dist/vars.css"
49
+ "./vars.css": "./dist/vars.css",
50
+ "./mockup.css": "./dist/mockup.css"
50
51
  },
51
52
  "peerDependencies": {
52
53
  "react-strict-dom": "^0.0.55"
@@ -64,6 +65,6 @@
64
65
  "prebuild": "node scripts/check-token-drift.mjs",
65
66
  "build": "vite build",
66
67
  "typecheck": "tsc --noEmit",
67
- "postbuild": "node scripts/generate-vars-css.mjs"
68
+ "postbuild": "node scripts/generate-vars-css.mjs && node scripts/generate-mockup-css.mjs"
68
69
  }
69
70
  }
package/src/keys.ts CHANGED
@@ -66,6 +66,63 @@ export const ICON_SIZES = {
66
66
  } as const
67
67
  export type IconSize = keyof typeof ICON_SIZES
68
68
 
69
+ // Mirrors tokens/breakpoints.css.ts `breakpoints` (css.defineConsts), as
70
+ // numbers. The css.ts file also exports `breakpointsPx`, but importing it
71
+ // pulls react-strict-dom; tooling that only needs the numbers reads here.
72
+ export const BREAKPOINT_KEYS = ['xs', 'sm', 'md', 'lg', 'xl'] as const
73
+ export const BREAKPOINTS_PX = {
74
+ xs: 480,
75
+ sm: 640,
76
+ md: 768,
77
+ lg: 1024,
78
+ xl: 1280,
79
+ } as const
80
+
81
+ // Mirrors tokens/typography.css.ts `typography` font sizes, in rem.
82
+ export const FONT_SIZE_REM = {
83
+ fontSizeXs: 0.75,
84
+ fontSizeSm: 0.875,
85
+ fontSizeMd: 1,
86
+ fontSizeLg: 1.125,
87
+ fontSizeXl: 1.25,
88
+ fontSizeHeading: 1.5,
89
+ } as const
90
+
91
+ // Mirrors tokens/typography.css.ts `typography` font weights, as numbers.
92
+ export const FONT_WEIGHTS = {
93
+ fontWeightNormal: 400,
94
+ fontWeightMedium: 500,
95
+ fontWeightSemibold: 600,
96
+ fontWeightBold: 700,
97
+ } as const
98
+
99
+ // Mirrors tokens/typography.css.ts `typeScale` fontSize1..9, in rem.
100
+ export const TYPE_SCALE_FONT_SIZE_REM = {
101
+ fontSize1: 0.75,
102
+ fontSize2: 0.8125,
103
+ fontSize3: 0.875,
104
+ fontSize4: 1,
105
+ fontSize5: 1.125,
106
+ fontSize6: 1.25,
107
+ fontSize7: 1.5,
108
+ fontSize8: 1.875,
109
+ fontSize9: 2.25,
110
+ } as const
111
+
112
+ // Mirrors tokens/shadows.css.ts `shadows` (the base, dark palette) verbatim.
113
+ export const SHADOWS = {
114
+ sm: '0 2px 4px rgba(0, 0, 0, 0.3)',
115
+ md: '0 4px 12px rgba(0, 0, 0, 0.4)',
116
+ lg: '0 8px 24px rgba(0, 0, 0, 0.5)',
117
+ } as const
118
+
119
+ // Mirrors tokens/motion.css.ts `easing` verbatim.
120
+ export const EASINGS = {
121
+ standard: 'ease',
122
+ easeOut: 'cubic-bezier(0.32, 0.72, 0, 1)',
123
+ easeIn: 'cubic-bezier(0.72, 0, 0.68, 0.28)',
124
+ } as const
125
+
69
126
  export type ColorToken = keyof RawColors
70
127
 
71
128
  export type {Breakpoint} from './tokens/breakpoints.css.js'