@bison-lab/tokens 0.1.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.
- package/css/base.css +56 -0
- package/css/globals.css +14 -0
- package/css/themes/density-compact.css +13 -0
- package/css/themes/density-default.css +13 -0
- package/css/themes/density-spacious.css +13 -0
- package/css/themes/motion-minimal.css +9 -0
- package/css/themes/motion-smooth.css +9 -0
- package/css/themes/motion-snappy.css +9 -0
- package/css/themes/radius-pill.css +8 -0
- package/css/themes/radius-rounded.css +8 -0
- package/css/themes/radius-sharp.css +8 -0
- package/css/themes/radius-subtle.css +8 -0
- package/css/themes/shadow-elevated.css +7 -0
- package/css/themes/shadow-flat.css +7 -0
- package/css/themes/shadow-subtle.css +7 -0
- package/dist/index.d.mts +306 -0
- package/dist/index.d.mts.map +1 -0
- package/dist/index.mjs +472 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +34 -0
package/css/base.css
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Bison Lab — Base tokens (locked)
|
|
3
|
+
* These values are NOT consumer-overridable.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
@layer base {
|
|
7
|
+
*,
|
|
8
|
+
*::before,
|
|
9
|
+
*::after {
|
|
10
|
+
border-color: hsl(var(--border));
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
body {
|
|
14
|
+
background-color: hsl(var(--background));
|
|
15
|
+
color: hsl(var(--foreground));
|
|
16
|
+
font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Locked focus ring style — color auto-follows brand */
|
|
20
|
+
:focus-visible {
|
|
21
|
+
outline: 2px solid hsl(var(--ring));
|
|
22
|
+
outline-offset: 2px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Reduced motion support */
|
|
26
|
+
@media (prefers-reduced-motion: reduce) {
|
|
27
|
+
*,
|
|
28
|
+
*::before,
|
|
29
|
+
*::after {
|
|
30
|
+
animation-duration: 0.01ms !important;
|
|
31
|
+
animation-iteration-count: 1 !important;
|
|
32
|
+
transition-duration: 0.01ms !important;
|
|
33
|
+
scroll-behavior: auto !important;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Locked typography tokens */
|
|
38
|
+
:root {
|
|
39
|
+
--font-weight-normal: 400;
|
|
40
|
+
--font-weight-medium: 500;
|
|
41
|
+
--font-weight-semibold: 600;
|
|
42
|
+
--font-weight-bold: 700;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Locked z-index defaults (overridable via CSS custom properties) */
|
|
46
|
+
:root {
|
|
47
|
+
--z-dropdown: 50;
|
|
48
|
+
--z-sticky: 100;
|
|
49
|
+
--z-fixed: 200;
|
|
50
|
+
--z-modal-backdrop: 300;
|
|
51
|
+
--z-modal: 400;
|
|
52
|
+
--z-popover: 500;
|
|
53
|
+
--z-tooltip: 600;
|
|
54
|
+
--z-toast: 700;
|
|
55
|
+
}
|
|
56
|
+
}
|
package/css/globals.css
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Bison Lab — Global CSS entry point
|
|
3
|
+
*
|
|
4
|
+
* Import this in your app/layout.tsx:
|
|
5
|
+
* import '@bison-lab/tokens/css/globals.css';
|
|
6
|
+
*
|
|
7
|
+
* Then import your chosen presets:
|
|
8
|
+
* import '@bison-lab/tokens/css/themes/radius-rounded.css';
|
|
9
|
+
* import '@bison-lab/tokens/css/themes/shadow-subtle.css';
|
|
10
|
+
* import '@bison-lab/tokens/css/themes/motion-smooth.css';
|
|
11
|
+
* import '@bison-lab/tokens/css/themes/density-default.css';
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
@import "./base.css";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--density-padding-xs: 0.125rem;
|
|
3
|
+
--density-padding-sm: 0.25rem;
|
|
4
|
+
--density-padding-md: 0.375rem;
|
|
5
|
+
--density-padding-lg: 0.5rem;
|
|
6
|
+
--density-padding-xl: 0.75rem;
|
|
7
|
+
--density-gap-sm: 0.25rem;
|
|
8
|
+
--density-gap-md: 0.5rem;
|
|
9
|
+
--density-gap-lg: 0.75rem;
|
|
10
|
+
--density-height-sm: 1.75rem;
|
|
11
|
+
--density-height-md: 2rem;
|
|
12
|
+
--density-height-lg: 2.5rem;
|
|
13
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--density-padding-xs: 0.25rem;
|
|
3
|
+
--density-padding-sm: 0.5rem;
|
|
4
|
+
--density-padding-md: 0.75rem;
|
|
5
|
+
--density-padding-lg: 1rem;
|
|
6
|
+
--density-padding-xl: 1.5rem;
|
|
7
|
+
--density-gap-sm: 0.5rem;
|
|
8
|
+
--density-gap-md: 0.75rem;
|
|
9
|
+
--density-gap-lg: 1rem;
|
|
10
|
+
--density-height-sm: 2rem;
|
|
11
|
+
--density-height-md: 2.5rem;
|
|
12
|
+
--density-height-lg: 3rem;
|
|
13
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--density-padding-xs: 0.5rem;
|
|
3
|
+
--density-padding-sm: 0.75rem;
|
|
4
|
+
--density-padding-md: 1rem;
|
|
5
|
+
--density-padding-lg: 1.5rem;
|
|
6
|
+
--density-padding-xl: 2rem;
|
|
7
|
+
--density-gap-sm: 0.75rem;
|
|
8
|
+
--density-gap-md: 1rem;
|
|
9
|
+
--density-gap-lg: 1.5rem;
|
|
10
|
+
--density-height-sm: 2.5rem;
|
|
11
|
+
--density-height-md: 3rem;
|
|
12
|
+
--density-height-lg: 3.5rem;
|
|
13
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--duration-fast: 150ms;
|
|
3
|
+
--duration-normal: 200ms;
|
|
4
|
+
--duration-slow: 350ms;
|
|
5
|
+
--ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
6
|
+
--ease-in: cubic-bezier(0.42, 0, 1, 1);
|
|
7
|
+
--ease-out: cubic-bezier(0, 0, 0.58, 1);
|
|
8
|
+
--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
|
|
9
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--duration-fast: 100ms;
|
|
3
|
+
--duration-normal: 150ms;
|
|
4
|
+
--duration-slow: 250ms;
|
|
5
|
+
--ease-default: cubic-bezier(0.22, 1, 0.36, 1);
|
|
6
|
+
--ease-in: cubic-bezier(0.55, 0, 1, 0.45);
|
|
7
|
+
--ease-out: cubic-bezier(0, 0.55, 0.45, 1);
|
|
8
|
+
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
9
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
|
3
|
+
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
4
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
5
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
6
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
|
|
3
|
+
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
|
|
4
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
|
|
5
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
|
|
6
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
|
|
7
|
+
}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,306 @@
|
|
|
1
|
+
//#region src/colors.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* Color derivation engine.
|
|
4
|
+
* Takes 2-3 brand colors (HSL) and auto-derives a full semantic palette
|
|
5
|
+
* for both light and dark modes.
|
|
6
|
+
*/
|
|
7
|
+
interface HSL {
|
|
8
|
+
h: number;
|
|
9
|
+
s: number;
|
|
10
|
+
l: number;
|
|
11
|
+
}
|
|
12
|
+
declare function hexToHSL(hex: string): HSL;
|
|
13
|
+
declare function hslToString(hsl: HSL): string;
|
|
14
|
+
interface BrandColors {
|
|
15
|
+
primary: string;
|
|
16
|
+
secondary: string;
|
|
17
|
+
accent?: string;
|
|
18
|
+
}
|
|
19
|
+
interface SemanticPalette {
|
|
20
|
+
background: string;
|
|
21
|
+
foreground: string;
|
|
22
|
+
card: string;
|
|
23
|
+
"card-foreground": string;
|
|
24
|
+
popover: string;
|
|
25
|
+
"popover-foreground": string;
|
|
26
|
+
primary: string;
|
|
27
|
+
"primary-foreground": string;
|
|
28
|
+
secondary: string;
|
|
29
|
+
"secondary-foreground": string;
|
|
30
|
+
accent: string;
|
|
31
|
+
"accent-foreground": string;
|
|
32
|
+
muted: string;
|
|
33
|
+
"muted-foreground": string;
|
|
34
|
+
destructive: string;
|
|
35
|
+
"destructive-foreground": string;
|
|
36
|
+
border: string;
|
|
37
|
+
input: string;
|
|
38
|
+
ring: string;
|
|
39
|
+
}
|
|
40
|
+
declare function deriveLightPalette(brand: BrandColors): SemanticPalette;
|
|
41
|
+
declare function deriveDarkPalette(brand: BrandColors): SemanticPalette;
|
|
42
|
+
declare function generatePaletteCSS(brand: BrandColors): string;
|
|
43
|
+
//#endregion
|
|
44
|
+
//#region src/radius.d.ts
|
|
45
|
+
declare const radiusPresets: {
|
|
46
|
+
readonly sharp: {
|
|
47
|
+
readonly "--radius": "0rem";
|
|
48
|
+
readonly "--radius-sm": "0rem";
|
|
49
|
+
readonly "--radius-md": "0rem";
|
|
50
|
+
readonly "--radius-lg": "0rem";
|
|
51
|
+
readonly "--radius-xl": "0rem";
|
|
52
|
+
readonly "--radius-full": "0rem";
|
|
53
|
+
};
|
|
54
|
+
readonly subtle: {
|
|
55
|
+
readonly "--radius": "0.375rem";
|
|
56
|
+
readonly "--radius-sm": "0.125rem";
|
|
57
|
+
readonly "--radius-md": "0.375rem";
|
|
58
|
+
readonly "--radius-lg": "0.5rem";
|
|
59
|
+
readonly "--radius-xl": "0.75rem";
|
|
60
|
+
readonly "--radius-full": "9999px";
|
|
61
|
+
};
|
|
62
|
+
readonly rounded: {
|
|
63
|
+
readonly "--radius": "0.5rem";
|
|
64
|
+
readonly "--radius-sm": "0.25rem";
|
|
65
|
+
readonly "--radius-md": "0.5rem";
|
|
66
|
+
readonly "--radius-lg": "0.75rem";
|
|
67
|
+
readonly "--radius-xl": "1rem";
|
|
68
|
+
readonly "--radius-full": "9999px";
|
|
69
|
+
};
|
|
70
|
+
readonly pill: {
|
|
71
|
+
readonly "--radius": "0.75rem";
|
|
72
|
+
readonly "--radius-sm": "0.5rem";
|
|
73
|
+
readonly "--radius-md": "0.75rem";
|
|
74
|
+
readonly "--radius-lg": "1rem";
|
|
75
|
+
readonly "--radius-xl": "1.5rem";
|
|
76
|
+
readonly "--radius-full": "9999px";
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
type RadiusPreset = keyof typeof radiusPresets;
|
|
80
|
+
//#endregion
|
|
81
|
+
//#region src/shadows.d.ts
|
|
82
|
+
declare const shadowPresets: {
|
|
83
|
+
readonly flat: {
|
|
84
|
+
readonly "--shadow-sm": "none";
|
|
85
|
+
readonly "--shadow": "none";
|
|
86
|
+
readonly "--shadow-md": "none";
|
|
87
|
+
readonly "--shadow-lg": "none";
|
|
88
|
+
readonly "--shadow-xl": "none";
|
|
89
|
+
};
|
|
90
|
+
readonly subtle: {
|
|
91
|
+
readonly "--shadow-sm": "0 1px 2px 0 rgb(0 0 0 / 0.03)";
|
|
92
|
+
readonly "--shadow": "0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05)";
|
|
93
|
+
readonly "--shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05)";
|
|
94
|
+
readonly "--shadow-lg": "0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05)";
|
|
95
|
+
readonly "--shadow-xl": "0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05)";
|
|
96
|
+
};
|
|
97
|
+
readonly elevated: {
|
|
98
|
+
readonly "--shadow-sm": "0 1px 2px 0 rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1)";
|
|
99
|
+
readonly "--shadow": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
|
|
100
|
+
readonly "--shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
|
|
101
|
+
readonly "--shadow-lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
|
|
102
|
+
readonly "--shadow-xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
|
|
103
|
+
};
|
|
104
|
+
};
|
|
105
|
+
type ShadowPreset = keyof typeof shadowPresets;
|
|
106
|
+
//#endregion
|
|
107
|
+
//#region src/motion.d.ts
|
|
108
|
+
declare const motionPresets: {
|
|
109
|
+
readonly snappy: {
|
|
110
|
+
readonly "--duration-fast": "100ms";
|
|
111
|
+
readonly "--duration-normal": "150ms";
|
|
112
|
+
readonly "--duration-slow": "250ms";
|
|
113
|
+
readonly "--ease-default": "cubic-bezier(0.22, 1, 0.36, 1)";
|
|
114
|
+
readonly "--ease-in": "cubic-bezier(0.55, 0, 1, 0.45)";
|
|
115
|
+
readonly "--ease-out": "cubic-bezier(0, 0.55, 0.45, 1)";
|
|
116
|
+
readonly "--ease-in-out": "cubic-bezier(0.65, 0, 0.35, 1)";
|
|
117
|
+
};
|
|
118
|
+
readonly smooth: {
|
|
119
|
+
readonly "--duration-fast": "150ms";
|
|
120
|
+
readonly "--duration-normal": "200ms";
|
|
121
|
+
readonly "--duration-slow": "350ms";
|
|
122
|
+
readonly "--ease-default": "cubic-bezier(0.25, 0.1, 0.25, 1)";
|
|
123
|
+
readonly "--ease-in": "cubic-bezier(0.42, 0, 1, 1)";
|
|
124
|
+
readonly "--ease-out": "cubic-bezier(0, 0, 0.58, 1)";
|
|
125
|
+
readonly "--ease-in-out": "cubic-bezier(0.42, 0, 0.58, 1)";
|
|
126
|
+
};
|
|
127
|
+
readonly minimal: {
|
|
128
|
+
readonly "--duration-fast": "75ms";
|
|
129
|
+
readonly "--duration-normal": "100ms";
|
|
130
|
+
readonly "--duration-slow": "200ms";
|
|
131
|
+
readonly "--ease-default": "linear";
|
|
132
|
+
readonly "--ease-in": "linear";
|
|
133
|
+
readonly "--ease-out": "linear";
|
|
134
|
+
readonly "--ease-in-out": "linear";
|
|
135
|
+
};
|
|
136
|
+
};
|
|
137
|
+
type MotionPreset = keyof typeof motionPresets;
|
|
138
|
+
//#endregion
|
|
139
|
+
//#region src/density.d.ts
|
|
140
|
+
declare const densityPresets: {
|
|
141
|
+
readonly compact: {
|
|
142
|
+
readonly "--density-padding-xs": "0.125rem";
|
|
143
|
+
readonly "--density-padding-sm": "0.25rem";
|
|
144
|
+
readonly "--density-padding-md": "0.375rem";
|
|
145
|
+
readonly "--density-padding-lg": "0.5rem";
|
|
146
|
+
readonly "--density-padding-xl": "0.75rem";
|
|
147
|
+
readonly "--density-gap-sm": "0.25rem";
|
|
148
|
+
readonly "--density-gap-md": "0.5rem";
|
|
149
|
+
readonly "--density-gap-lg": "0.75rem";
|
|
150
|
+
readonly "--density-height-sm": "1.75rem";
|
|
151
|
+
readonly "--density-height-md": "2rem";
|
|
152
|
+
readonly "--density-height-lg": "2.5rem";
|
|
153
|
+
};
|
|
154
|
+
readonly default: {
|
|
155
|
+
readonly "--density-padding-xs": "0.25rem";
|
|
156
|
+
readonly "--density-padding-sm": "0.5rem";
|
|
157
|
+
readonly "--density-padding-md": "0.75rem";
|
|
158
|
+
readonly "--density-padding-lg": "1rem";
|
|
159
|
+
readonly "--density-padding-xl": "1.5rem";
|
|
160
|
+
readonly "--density-gap-sm": "0.5rem";
|
|
161
|
+
readonly "--density-gap-md": "0.75rem";
|
|
162
|
+
readonly "--density-gap-lg": "1rem";
|
|
163
|
+
readonly "--density-height-sm": "2rem";
|
|
164
|
+
readonly "--density-height-md": "2.5rem";
|
|
165
|
+
readonly "--density-height-lg": "3rem";
|
|
166
|
+
};
|
|
167
|
+
readonly spacious: {
|
|
168
|
+
readonly "--density-padding-xs": "0.5rem";
|
|
169
|
+
readonly "--density-padding-sm": "0.75rem";
|
|
170
|
+
readonly "--density-padding-md": "1rem";
|
|
171
|
+
readonly "--density-padding-lg": "1.5rem";
|
|
172
|
+
readonly "--density-padding-xl": "2rem";
|
|
173
|
+
readonly "--density-gap-sm": "0.75rem";
|
|
174
|
+
readonly "--density-gap-md": "1rem";
|
|
175
|
+
readonly "--density-gap-lg": "1.5rem";
|
|
176
|
+
readonly "--density-height-sm": "2.5rem";
|
|
177
|
+
readonly "--density-height-md": "3rem";
|
|
178
|
+
readonly "--density-height-lg": "3.5rem";
|
|
179
|
+
};
|
|
180
|
+
};
|
|
181
|
+
type DensityPreset = keyof typeof densityPresets;
|
|
182
|
+
//#endregion
|
|
183
|
+
//#region src/typography.d.ts
|
|
184
|
+
/** Locked type scale — consumers cannot override sizes, only font-family and weights. */
|
|
185
|
+
declare const typeScale: {
|
|
186
|
+
readonly "text-xs": {
|
|
187
|
+
readonly fontSize: "0.75rem";
|
|
188
|
+
readonly lineHeight: "1rem";
|
|
189
|
+
};
|
|
190
|
+
readonly "text-sm": {
|
|
191
|
+
readonly fontSize: "0.875rem";
|
|
192
|
+
readonly lineHeight: "1.25rem";
|
|
193
|
+
};
|
|
194
|
+
readonly "text-base": {
|
|
195
|
+
readonly fontSize: "1rem";
|
|
196
|
+
readonly lineHeight: "1.5rem";
|
|
197
|
+
};
|
|
198
|
+
readonly "text-lg": {
|
|
199
|
+
readonly fontSize: "1.125rem";
|
|
200
|
+
readonly lineHeight: "1.75rem";
|
|
201
|
+
};
|
|
202
|
+
readonly "text-xl": {
|
|
203
|
+
readonly fontSize: "1.25rem";
|
|
204
|
+
readonly lineHeight: "1.75rem";
|
|
205
|
+
};
|
|
206
|
+
readonly "text-2xl": {
|
|
207
|
+
readonly fontSize: "1.5rem";
|
|
208
|
+
readonly lineHeight: "2rem";
|
|
209
|
+
};
|
|
210
|
+
readonly "text-3xl": {
|
|
211
|
+
readonly fontSize: "1.875rem";
|
|
212
|
+
readonly lineHeight: "2.25rem";
|
|
213
|
+
};
|
|
214
|
+
readonly "text-4xl": {
|
|
215
|
+
readonly fontSize: "2.25rem";
|
|
216
|
+
readonly lineHeight: "2.5rem";
|
|
217
|
+
};
|
|
218
|
+
readonly "heading-sm": {
|
|
219
|
+
readonly fontSize: "clamp(1.125rem, 1rem + 0.5vw, 1.25rem)";
|
|
220
|
+
readonly lineHeight: "1.4";
|
|
221
|
+
readonly letterSpacing: "-0.01em";
|
|
222
|
+
};
|
|
223
|
+
readonly "heading-md": {
|
|
224
|
+
readonly fontSize: "clamp(1.25rem, 1rem + 1vw, 1.875rem)";
|
|
225
|
+
readonly lineHeight: "1.3";
|
|
226
|
+
readonly letterSpacing: "-0.015em";
|
|
227
|
+
};
|
|
228
|
+
readonly "heading-lg": {
|
|
229
|
+
readonly fontSize: "clamp(1.5rem, 1rem + 2vw, 2.25rem)";
|
|
230
|
+
readonly lineHeight: "1.2";
|
|
231
|
+
readonly letterSpacing: "-0.02em";
|
|
232
|
+
};
|
|
233
|
+
readonly "heading-xl": {
|
|
234
|
+
readonly fontSize: "clamp(1.875rem, 1rem + 3vw, 3rem)";
|
|
235
|
+
readonly lineHeight: "1.1";
|
|
236
|
+
readonly letterSpacing: "-0.025em";
|
|
237
|
+
};
|
|
238
|
+
readonly "heading-2xl": {
|
|
239
|
+
readonly fontSize: "clamp(2.25rem, 1rem + 4vw, 3.75rem)";
|
|
240
|
+
readonly lineHeight: "1.1";
|
|
241
|
+
readonly letterSpacing: "-0.03em";
|
|
242
|
+
};
|
|
243
|
+
};
|
|
244
|
+
interface FontWeightMap {
|
|
245
|
+
normal: number;
|
|
246
|
+
medium: number;
|
|
247
|
+
semibold: number;
|
|
248
|
+
bold: number;
|
|
249
|
+
}
|
|
250
|
+
declare const defaultFontWeights: FontWeightMap;
|
|
251
|
+
//#endregion
|
|
252
|
+
//#region src/spacing.d.ts
|
|
253
|
+
/** Locked spacing scale — 4px (0.25rem) base grid. Not consumer-overridable. */
|
|
254
|
+
declare const spacingScale: {
|
|
255
|
+
readonly "0": "0";
|
|
256
|
+
readonly "0.5": "0.125rem";
|
|
257
|
+
readonly "1": "0.25rem";
|
|
258
|
+
readonly "1.5": "0.375rem";
|
|
259
|
+
readonly "2": "0.5rem";
|
|
260
|
+
readonly "2.5": "0.625rem";
|
|
261
|
+
readonly "3": "0.75rem";
|
|
262
|
+
readonly "3.5": "0.875rem";
|
|
263
|
+
readonly "4": "1rem";
|
|
264
|
+
readonly "5": "1.25rem";
|
|
265
|
+
readonly "6": "1.5rem";
|
|
266
|
+
readonly "7": "1.75rem";
|
|
267
|
+
readonly "8": "2rem";
|
|
268
|
+
readonly "9": "2.25rem";
|
|
269
|
+
readonly "10": "2.5rem";
|
|
270
|
+
readonly "11": "2.75rem";
|
|
271
|
+
readonly "12": "3rem";
|
|
272
|
+
readonly "14": "3.5rem";
|
|
273
|
+
readonly "16": "4rem";
|
|
274
|
+
readonly "20": "5rem";
|
|
275
|
+
readonly "24": "6rem";
|
|
276
|
+
readonly "28": "7rem";
|
|
277
|
+
readonly "32": "8rem";
|
|
278
|
+
readonly "36": "9rem";
|
|
279
|
+
readonly "40": "10rem";
|
|
280
|
+
readonly "44": "11rem";
|
|
281
|
+
readonly "48": "12rem";
|
|
282
|
+
readonly "52": "13rem";
|
|
283
|
+
readonly "56": "14rem";
|
|
284
|
+
readonly "60": "15rem";
|
|
285
|
+
readonly "64": "16rem";
|
|
286
|
+
readonly "72": "18rem";
|
|
287
|
+
readonly "80": "20rem";
|
|
288
|
+
readonly "96": "24rem";
|
|
289
|
+
};
|
|
290
|
+
//#endregion
|
|
291
|
+
//#region src/z-index.d.ts
|
|
292
|
+
/** Z-index tokens — overridable by consumers via CSS custom properties. */
|
|
293
|
+
declare const zIndexTokens: {
|
|
294
|
+
readonly "--z-dropdown": "50";
|
|
295
|
+
readonly "--z-sticky": "100";
|
|
296
|
+
readonly "--z-fixed": "200";
|
|
297
|
+
readonly "--z-modal-backdrop": "300";
|
|
298
|
+
readonly "--z-modal": "400";
|
|
299
|
+
readonly "--z-popover": "500";
|
|
300
|
+
readonly "--z-tooltip": "600";
|
|
301
|
+
readonly "--z-toast": "700";
|
|
302
|
+
};
|
|
303
|
+
type ZIndexToken = keyof typeof zIndexTokens;
|
|
304
|
+
//#endregion
|
|
305
|
+
export { type BrandColors, type DensityPreset, type FontWeightMap, type HSL, type MotionPreset, type RadiusPreset, type SemanticPalette, type ShadowPreset, type ZIndexToken, defaultFontWeights, densityPresets, deriveDarkPalette, deriveLightPalette, generatePaletteCSS, hexToHSL, hslToString, motionPresets, radiusPresets, shadowPresets, spacingScale, typeScale, zIndexTokens };
|
|
306
|
+
//# sourceMappingURL=index.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/colors.ts","../src/radius.ts","../src/shadows.ts","../src/motion.ts","../src/density.ts","../src/typography.ts","../src/spacing.ts","../src/z-index.ts"],"mappings":";;AAMA;;;;UAAiB,GAAA;EACf,CAAA;EACA,CAAA;EACA,CAAA;AAAA;AAAA,iBAGc,QAAA,CAAS,GAAA,WAAc,GAAA;AAAA,iBAmCvB,WAAA,CAAY,GAAA,EAAK,GAAA;AAAA,UAgBhB,WAAA;EACf,OAAA;EACA,SAAA;EACA,MAAA;AAAA;AAAA,UAGe,eAAA;EACf,UAAA;EACA,UAAA;EACA,IAAA;EACA,iBAAA;EACA,OAAA;EACA,oBAAA;EACA,OAAA;EACA,oBAAA;EACA,SAAA;EACA,sBAAA;EACA,MAAA;EACA,mBAAA;EACA,KAAA;EACA,kBAAA;EACA,WAAA;EACA,wBAAA;EACA,MAAA;EACA,KAAA;EACA,IAAA;AAAA;AAAA,iBAGc,kBAAA,CAAmB,KAAA,EAAO,WAAA,GAAc,eAAA;AAAA,iBAkCxC,iBAAA,CAAkB,KAAA,EAAO,WAAA,GAAc,eAAA;AAAA,iBAoCvC,kBAAA,CAAmB,KAAA,EAAO,WAAA;;;cCjK7B,aAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCD,YAAA,gBAA4B,aAAA;;;cCnC3B,aAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;KAwBD,YAAA,gBAA4B,aAAA;;;cCxB3B,aAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BD,YAAA,gBAA4B,aAAA;;;cC9B3B,cAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0CD,aAAA,gBAA6B,cAAA;;;;cCzC5B,SAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAsCI,aAAA;EACf,MAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;AAAA;AAAA,cAGW,kBAAA,EAAoB,aAAA;;;;cC7CpB,YAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cCAA,YAAA;EAAA;;;;;;;;;KAWD,WAAA,gBAA2B,YAAA"}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,472 @@
|
|
|
1
|
+
//#region src/colors.ts
|
|
2
|
+
function hexToHSL(hex) {
|
|
3
|
+
hex = hex.replace("#", "");
|
|
4
|
+
const r = parseInt(hex.substring(0, 2), 16) / 255;
|
|
5
|
+
const g = parseInt(hex.substring(2, 4), 16) / 255;
|
|
6
|
+
const b = parseInt(hex.substring(4, 6), 16) / 255;
|
|
7
|
+
const max = Math.max(r, g, b);
|
|
8
|
+
const min = Math.min(r, g, b);
|
|
9
|
+
const l = (max + min) / 2;
|
|
10
|
+
let h = 0;
|
|
11
|
+
let s = 0;
|
|
12
|
+
if (max !== min) {
|
|
13
|
+
const d = max - min;
|
|
14
|
+
s = l > .5 ? d / (2 - max - min) : d / (max + min);
|
|
15
|
+
switch (max) {
|
|
16
|
+
case r:
|
|
17
|
+
h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
|
|
18
|
+
break;
|
|
19
|
+
case g:
|
|
20
|
+
h = ((b - r) / d + 2) / 6;
|
|
21
|
+
break;
|
|
22
|
+
case b:
|
|
23
|
+
h = ((r - g) / d + 4) / 6;
|
|
24
|
+
break;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return {
|
|
28
|
+
h: Math.round(h * 360),
|
|
29
|
+
s: Math.round(s * 100),
|
|
30
|
+
l: Math.round(l * 100)
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
function hslToString(hsl) {
|
|
34
|
+
return `${hsl.h} ${hsl.s}% ${hsl.l}%`;
|
|
35
|
+
}
|
|
36
|
+
function clamp(value, min, max) {
|
|
37
|
+
return Math.min(Math.max(value, min), max);
|
|
38
|
+
}
|
|
39
|
+
function adjustLightness(hsl, amount) {
|
|
40
|
+
return {
|
|
41
|
+
...hsl,
|
|
42
|
+
l: clamp(hsl.l + amount, 0, 100)
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
function adjustSaturation(hsl, amount) {
|
|
46
|
+
return {
|
|
47
|
+
...hsl,
|
|
48
|
+
s: clamp(hsl.s + amount, 0, 100)
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
function deriveLightPalette(brand) {
|
|
52
|
+
const primary = hexToHSL(brand.primary);
|
|
53
|
+
const secondary = hexToHSL(brand.secondary);
|
|
54
|
+
const accent = brand.accent ? hexToHSL(brand.accent) : {
|
|
55
|
+
h: (primary.h + 30) % 360,
|
|
56
|
+
s: clamp(primary.s - 10, 0, 100),
|
|
57
|
+
l: 90
|
|
58
|
+
};
|
|
59
|
+
return {
|
|
60
|
+
background: hslToString({
|
|
61
|
+
h: primary.h,
|
|
62
|
+
s: clamp(primary.s - 30, 0, 100),
|
|
63
|
+
l: 100
|
|
64
|
+
}),
|
|
65
|
+
foreground: hslToString({
|
|
66
|
+
h: primary.h,
|
|
67
|
+
s: clamp(primary.s - 20, 0, 100),
|
|
68
|
+
l: 10
|
|
69
|
+
}),
|
|
70
|
+
card: hslToString({
|
|
71
|
+
h: primary.h,
|
|
72
|
+
s: clamp(primary.s - 30, 0, 100),
|
|
73
|
+
l: 100
|
|
74
|
+
}),
|
|
75
|
+
"card-foreground": hslToString({
|
|
76
|
+
h: primary.h,
|
|
77
|
+
s: clamp(primary.s - 20, 0, 100),
|
|
78
|
+
l: 10
|
|
79
|
+
}),
|
|
80
|
+
popover: hslToString({
|
|
81
|
+
h: primary.h,
|
|
82
|
+
s: clamp(primary.s - 30, 0, 100),
|
|
83
|
+
l: 100
|
|
84
|
+
}),
|
|
85
|
+
"popover-foreground": hslToString({
|
|
86
|
+
h: primary.h,
|
|
87
|
+
s: clamp(primary.s - 20, 0, 100),
|
|
88
|
+
l: 10
|
|
89
|
+
}),
|
|
90
|
+
primary: hslToString(primary),
|
|
91
|
+
"primary-foreground": hslToString(primary.l > 50 ? adjustLightness(adjustSaturation(primary, -20), -80) : {
|
|
92
|
+
h: primary.h,
|
|
93
|
+
s: clamp(primary.s - 30, 0, 100),
|
|
94
|
+
l: 98
|
|
95
|
+
}),
|
|
96
|
+
secondary: hslToString(adjustLightness(adjustSaturation(secondary, -30), 40)),
|
|
97
|
+
"secondary-foreground": hslToString(adjustLightness(secondary, -30)),
|
|
98
|
+
accent: hslToString(adjustLightness(accent, 10)),
|
|
99
|
+
"accent-foreground": hslToString(adjustLightness(accent, -60)),
|
|
100
|
+
muted: hslToString({
|
|
101
|
+
h: primary.h,
|
|
102
|
+
s: clamp(primary.s - 30, 0, 100),
|
|
103
|
+
l: 96
|
|
104
|
+
}),
|
|
105
|
+
"muted-foreground": hslToString({
|
|
106
|
+
h: primary.h,
|
|
107
|
+
s: clamp(primary.s - 25, 0, 100),
|
|
108
|
+
l: 45
|
|
109
|
+
}),
|
|
110
|
+
destructive: "0 84% 60%",
|
|
111
|
+
"destructive-foreground": "0 0% 98%",
|
|
112
|
+
border: hslToString({
|
|
113
|
+
h: primary.h,
|
|
114
|
+
s: clamp(primary.s - 25, 0, 100),
|
|
115
|
+
l: 91
|
|
116
|
+
}),
|
|
117
|
+
input: hslToString({
|
|
118
|
+
h: primary.h,
|
|
119
|
+
s: clamp(primary.s - 25, 0, 100),
|
|
120
|
+
l: 91
|
|
121
|
+
}),
|
|
122
|
+
ring: hslToString(primary)
|
|
123
|
+
};
|
|
124
|
+
}
|
|
125
|
+
function deriveDarkPalette(brand) {
|
|
126
|
+
const primary = hexToHSL(brand.primary);
|
|
127
|
+
const secondary = hexToHSL(brand.secondary);
|
|
128
|
+
const accent = brand.accent ? hexToHSL(brand.accent) : {
|
|
129
|
+
h: (primary.h + 30) % 360,
|
|
130
|
+
s: clamp(primary.s - 10, 0, 100),
|
|
131
|
+
l: 30
|
|
132
|
+
};
|
|
133
|
+
const darkPrimary = adjustLightness(primary, primary.l < 50 ? 20 : 0);
|
|
134
|
+
return {
|
|
135
|
+
background: hslToString({
|
|
136
|
+
h: primary.h,
|
|
137
|
+
s: clamp(primary.s - 25, 0, 100),
|
|
138
|
+
l: 7
|
|
139
|
+
}),
|
|
140
|
+
foreground: hslToString({
|
|
141
|
+
h: primary.h,
|
|
142
|
+
s: clamp(primary.s - 30, 0, 100),
|
|
143
|
+
l: 98
|
|
144
|
+
}),
|
|
145
|
+
card: hslToString({
|
|
146
|
+
h: primary.h,
|
|
147
|
+
s: clamp(primary.s - 25, 0, 100),
|
|
148
|
+
l: 10
|
|
149
|
+
}),
|
|
150
|
+
"card-foreground": hslToString({
|
|
151
|
+
h: primary.h,
|
|
152
|
+
s: clamp(primary.s - 30, 0, 100),
|
|
153
|
+
l: 98
|
|
154
|
+
}),
|
|
155
|
+
popover: hslToString({
|
|
156
|
+
h: primary.h,
|
|
157
|
+
s: clamp(primary.s - 25, 0, 100),
|
|
158
|
+
l: 10
|
|
159
|
+
}),
|
|
160
|
+
"popover-foreground": hslToString({
|
|
161
|
+
h: primary.h,
|
|
162
|
+
s: clamp(primary.s - 30, 0, 100),
|
|
163
|
+
l: 98
|
|
164
|
+
}),
|
|
165
|
+
primary: hslToString(darkPrimary),
|
|
166
|
+
"primary-foreground": hslToString(darkPrimary.l > 50 ? adjustLightness(darkPrimary, -80) : {
|
|
167
|
+
h: primary.h,
|
|
168
|
+
s: clamp(primary.s - 30, 0, 100),
|
|
169
|
+
l: 98
|
|
170
|
+
}),
|
|
171
|
+
secondary: hslToString({
|
|
172
|
+
h: secondary.h,
|
|
173
|
+
s: clamp(secondary.s - 20, 0, 100),
|
|
174
|
+
l: 18
|
|
175
|
+
}),
|
|
176
|
+
"secondary-foreground": hslToString(adjustLightness(secondary, 30)),
|
|
177
|
+
accent: hslToString({
|
|
178
|
+
h: accent.h,
|
|
179
|
+
s: clamp(accent.s - 10, 0, 100),
|
|
180
|
+
l: 20
|
|
181
|
+
}),
|
|
182
|
+
"accent-foreground": hslToString(adjustLightness(accent, 40)),
|
|
183
|
+
muted: hslToString({
|
|
184
|
+
h: primary.h,
|
|
185
|
+
s: clamp(primary.s - 25, 0, 100),
|
|
186
|
+
l: 18
|
|
187
|
+
}),
|
|
188
|
+
"muted-foreground": hslToString({
|
|
189
|
+
h: primary.h,
|
|
190
|
+
s: clamp(primary.s - 20, 0, 100),
|
|
191
|
+
l: 65
|
|
192
|
+
}),
|
|
193
|
+
destructive: "0 62% 30%",
|
|
194
|
+
"destructive-foreground": "0 0% 98%",
|
|
195
|
+
border: hslToString({
|
|
196
|
+
h: primary.h,
|
|
197
|
+
s: clamp(primary.s - 25, 0, 100),
|
|
198
|
+
l: 18
|
|
199
|
+
}),
|
|
200
|
+
input: hslToString({
|
|
201
|
+
h: primary.h,
|
|
202
|
+
s: clamp(primary.s - 25, 0, 100),
|
|
203
|
+
l: 18
|
|
204
|
+
}),
|
|
205
|
+
ring: hslToString(darkPrimary)
|
|
206
|
+
};
|
|
207
|
+
}
|
|
208
|
+
function generatePaletteCSS(brand) {
|
|
209
|
+
const light = deriveLightPalette(brand);
|
|
210
|
+
const dark = deriveDarkPalette(brand);
|
|
211
|
+
const toVars = (palette, indent) => Object.entries(palette).map(([key, value]) => `${indent}--${key}: ${value};`).join("\n");
|
|
212
|
+
return `:root {\n${toVars(light, " ")}\n}\n\n.dark {\n${toVars(dark, " ")}\n}\n`;
|
|
213
|
+
}
|
|
214
|
+
//#endregion
|
|
215
|
+
//#region src/radius.ts
|
|
216
|
+
const radiusPresets = {
|
|
217
|
+
sharp: {
|
|
218
|
+
"--radius": "0rem",
|
|
219
|
+
"--radius-sm": "0rem",
|
|
220
|
+
"--radius-md": "0rem",
|
|
221
|
+
"--radius-lg": "0rem",
|
|
222
|
+
"--radius-xl": "0rem",
|
|
223
|
+
"--radius-full": "0rem"
|
|
224
|
+
},
|
|
225
|
+
subtle: {
|
|
226
|
+
"--radius": "0.375rem",
|
|
227
|
+
"--radius-sm": "0.125rem",
|
|
228
|
+
"--radius-md": "0.375rem",
|
|
229
|
+
"--radius-lg": "0.5rem",
|
|
230
|
+
"--radius-xl": "0.75rem",
|
|
231
|
+
"--radius-full": "9999px"
|
|
232
|
+
},
|
|
233
|
+
rounded: {
|
|
234
|
+
"--radius": "0.5rem",
|
|
235
|
+
"--radius-sm": "0.25rem",
|
|
236
|
+
"--radius-md": "0.5rem",
|
|
237
|
+
"--radius-lg": "0.75rem",
|
|
238
|
+
"--radius-xl": "1rem",
|
|
239
|
+
"--radius-full": "9999px"
|
|
240
|
+
},
|
|
241
|
+
pill: {
|
|
242
|
+
"--radius": "0.75rem",
|
|
243
|
+
"--radius-sm": "0.5rem",
|
|
244
|
+
"--radius-md": "0.75rem",
|
|
245
|
+
"--radius-lg": "1rem",
|
|
246
|
+
"--radius-xl": "1.5rem",
|
|
247
|
+
"--radius-full": "9999px"
|
|
248
|
+
}
|
|
249
|
+
};
|
|
250
|
+
//#endregion
|
|
251
|
+
//#region src/shadows.ts
|
|
252
|
+
const shadowPresets = {
|
|
253
|
+
flat: {
|
|
254
|
+
"--shadow-sm": "none",
|
|
255
|
+
"--shadow": "none",
|
|
256
|
+
"--shadow-md": "none",
|
|
257
|
+
"--shadow-lg": "none",
|
|
258
|
+
"--shadow-xl": "none"
|
|
259
|
+
},
|
|
260
|
+
subtle: {
|
|
261
|
+
"--shadow-sm": "0 1px 2px 0 rgb(0 0 0 / 0.03)",
|
|
262
|
+
"--shadow": "0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05)",
|
|
263
|
+
"--shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05)",
|
|
264
|
+
"--shadow-lg": "0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05)",
|
|
265
|
+
"--shadow-xl": "0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05)"
|
|
266
|
+
},
|
|
267
|
+
elevated: {
|
|
268
|
+
"--shadow-sm": "0 1px 2px 0 rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
|
269
|
+
"--shadow": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
270
|
+
"--shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
271
|
+
"--shadow-lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
272
|
+
"--shadow-xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
|
|
273
|
+
}
|
|
274
|
+
};
|
|
275
|
+
//#endregion
|
|
276
|
+
//#region src/motion.ts
|
|
277
|
+
const motionPresets = {
|
|
278
|
+
snappy: {
|
|
279
|
+
"--duration-fast": "100ms",
|
|
280
|
+
"--duration-normal": "150ms",
|
|
281
|
+
"--duration-slow": "250ms",
|
|
282
|
+
"--ease-default": "cubic-bezier(0.22, 1, 0.36, 1)",
|
|
283
|
+
"--ease-in": "cubic-bezier(0.55, 0, 1, 0.45)",
|
|
284
|
+
"--ease-out": "cubic-bezier(0, 0.55, 0.45, 1)",
|
|
285
|
+
"--ease-in-out": "cubic-bezier(0.65, 0, 0.35, 1)"
|
|
286
|
+
},
|
|
287
|
+
smooth: {
|
|
288
|
+
"--duration-fast": "150ms",
|
|
289
|
+
"--duration-normal": "200ms",
|
|
290
|
+
"--duration-slow": "350ms",
|
|
291
|
+
"--ease-default": "cubic-bezier(0.25, 0.1, 0.25, 1)",
|
|
292
|
+
"--ease-in": "cubic-bezier(0.42, 0, 1, 1)",
|
|
293
|
+
"--ease-out": "cubic-bezier(0, 0, 0.58, 1)",
|
|
294
|
+
"--ease-in-out": "cubic-bezier(0.42, 0, 0.58, 1)"
|
|
295
|
+
},
|
|
296
|
+
minimal: {
|
|
297
|
+
"--duration-fast": "75ms",
|
|
298
|
+
"--duration-normal": "100ms",
|
|
299
|
+
"--duration-slow": "200ms",
|
|
300
|
+
"--ease-default": "linear",
|
|
301
|
+
"--ease-in": "linear",
|
|
302
|
+
"--ease-out": "linear",
|
|
303
|
+
"--ease-in-out": "linear"
|
|
304
|
+
}
|
|
305
|
+
};
|
|
306
|
+
//#endregion
|
|
307
|
+
//#region src/density.ts
|
|
308
|
+
const densityPresets = {
|
|
309
|
+
compact: {
|
|
310
|
+
"--density-padding-xs": "0.125rem",
|
|
311
|
+
"--density-padding-sm": "0.25rem",
|
|
312
|
+
"--density-padding-md": "0.375rem",
|
|
313
|
+
"--density-padding-lg": "0.5rem",
|
|
314
|
+
"--density-padding-xl": "0.75rem",
|
|
315
|
+
"--density-gap-sm": "0.25rem",
|
|
316
|
+
"--density-gap-md": "0.5rem",
|
|
317
|
+
"--density-gap-lg": "0.75rem",
|
|
318
|
+
"--density-height-sm": "1.75rem",
|
|
319
|
+
"--density-height-md": "2rem",
|
|
320
|
+
"--density-height-lg": "2.5rem"
|
|
321
|
+
},
|
|
322
|
+
default: {
|
|
323
|
+
"--density-padding-xs": "0.25rem",
|
|
324
|
+
"--density-padding-sm": "0.5rem",
|
|
325
|
+
"--density-padding-md": "0.75rem",
|
|
326
|
+
"--density-padding-lg": "1rem",
|
|
327
|
+
"--density-padding-xl": "1.5rem",
|
|
328
|
+
"--density-gap-sm": "0.5rem",
|
|
329
|
+
"--density-gap-md": "0.75rem",
|
|
330
|
+
"--density-gap-lg": "1rem",
|
|
331
|
+
"--density-height-sm": "2rem",
|
|
332
|
+
"--density-height-md": "2.5rem",
|
|
333
|
+
"--density-height-lg": "3rem"
|
|
334
|
+
},
|
|
335
|
+
spacious: {
|
|
336
|
+
"--density-padding-xs": "0.5rem",
|
|
337
|
+
"--density-padding-sm": "0.75rem",
|
|
338
|
+
"--density-padding-md": "1rem",
|
|
339
|
+
"--density-padding-lg": "1.5rem",
|
|
340
|
+
"--density-padding-xl": "2rem",
|
|
341
|
+
"--density-gap-sm": "0.75rem",
|
|
342
|
+
"--density-gap-md": "1rem",
|
|
343
|
+
"--density-gap-lg": "1.5rem",
|
|
344
|
+
"--density-height-sm": "2.5rem",
|
|
345
|
+
"--density-height-md": "3rem",
|
|
346
|
+
"--density-height-lg": "3.5rem"
|
|
347
|
+
}
|
|
348
|
+
};
|
|
349
|
+
//#endregion
|
|
350
|
+
//#region src/typography.ts
|
|
351
|
+
/** Locked type scale — consumers cannot override sizes, only font-family and weights. */
|
|
352
|
+
const typeScale = {
|
|
353
|
+
"text-xs": {
|
|
354
|
+
fontSize: "0.75rem",
|
|
355
|
+
lineHeight: "1rem"
|
|
356
|
+
},
|
|
357
|
+
"text-sm": {
|
|
358
|
+
fontSize: "0.875rem",
|
|
359
|
+
lineHeight: "1.25rem"
|
|
360
|
+
},
|
|
361
|
+
"text-base": {
|
|
362
|
+
fontSize: "1rem",
|
|
363
|
+
lineHeight: "1.5rem"
|
|
364
|
+
},
|
|
365
|
+
"text-lg": {
|
|
366
|
+
fontSize: "1.125rem",
|
|
367
|
+
lineHeight: "1.75rem"
|
|
368
|
+
},
|
|
369
|
+
"text-xl": {
|
|
370
|
+
fontSize: "1.25rem",
|
|
371
|
+
lineHeight: "1.75rem"
|
|
372
|
+
},
|
|
373
|
+
"text-2xl": {
|
|
374
|
+
fontSize: "1.5rem",
|
|
375
|
+
lineHeight: "2rem"
|
|
376
|
+
},
|
|
377
|
+
"text-3xl": {
|
|
378
|
+
fontSize: "1.875rem",
|
|
379
|
+
lineHeight: "2.25rem"
|
|
380
|
+
},
|
|
381
|
+
"text-4xl": {
|
|
382
|
+
fontSize: "2.25rem",
|
|
383
|
+
lineHeight: "2.5rem"
|
|
384
|
+
},
|
|
385
|
+
"heading-sm": {
|
|
386
|
+
fontSize: "clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
|
|
387
|
+
lineHeight: "1.4",
|
|
388
|
+
letterSpacing: "-0.01em"
|
|
389
|
+
},
|
|
390
|
+
"heading-md": {
|
|
391
|
+
fontSize: "clamp(1.25rem, 1rem + 1vw, 1.875rem)",
|
|
392
|
+
lineHeight: "1.3",
|
|
393
|
+
letterSpacing: "-0.015em"
|
|
394
|
+
},
|
|
395
|
+
"heading-lg": {
|
|
396
|
+
fontSize: "clamp(1.5rem, 1rem + 2vw, 2.25rem)",
|
|
397
|
+
lineHeight: "1.2",
|
|
398
|
+
letterSpacing: "-0.02em"
|
|
399
|
+
},
|
|
400
|
+
"heading-xl": {
|
|
401
|
+
fontSize: "clamp(1.875rem, 1rem + 3vw, 3rem)",
|
|
402
|
+
lineHeight: "1.1",
|
|
403
|
+
letterSpacing: "-0.025em"
|
|
404
|
+
},
|
|
405
|
+
"heading-2xl": {
|
|
406
|
+
fontSize: "clamp(2.25rem, 1rem + 4vw, 3.75rem)",
|
|
407
|
+
lineHeight: "1.1",
|
|
408
|
+
letterSpacing: "-0.03em"
|
|
409
|
+
}
|
|
410
|
+
};
|
|
411
|
+
const defaultFontWeights = {
|
|
412
|
+
normal: 400,
|
|
413
|
+
medium: 500,
|
|
414
|
+
semibold: 600,
|
|
415
|
+
bold: 700
|
|
416
|
+
};
|
|
417
|
+
//#endregion
|
|
418
|
+
//#region src/spacing.ts
|
|
419
|
+
/** Locked spacing scale — 4px (0.25rem) base grid. Not consumer-overridable. */
|
|
420
|
+
const spacingScale = {
|
|
421
|
+
"0": "0",
|
|
422
|
+
"0.5": "0.125rem",
|
|
423
|
+
"1": "0.25rem",
|
|
424
|
+
"1.5": "0.375rem",
|
|
425
|
+
"2": "0.5rem",
|
|
426
|
+
"2.5": "0.625rem",
|
|
427
|
+
"3": "0.75rem",
|
|
428
|
+
"3.5": "0.875rem",
|
|
429
|
+
"4": "1rem",
|
|
430
|
+
"5": "1.25rem",
|
|
431
|
+
"6": "1.5rem",
|
|
432
|
+
"7": "1.75rem",
|
|
433
|
+
"8": "2rem",
|
|
434
|
+
"9": "2.25rem",
|
|
435
|
+
"10": "2.5rem",
|
|
436
|
+
"11": "2.75rem",
|
|
437
|
+
"12": "3rem",
|
|
438
|
+
"14": "3.5rem",
|
|
439
|
+
"16": "4rem",
|
|
440
|
+
"20": "5rem",
|
|
441
|
+
"24": "6rem",
|
|
442
|
+
"28": "7rem",
|
|
443
|
+
"32": "8rem",
|
|
444
|
+
"36": "9rem",
|
|
445
|
+
"40": "10rem",
|
|
446
|
+
"44": "11rem",
|
|
447
|
+
"48": "12rem",
|
|
448
|
+
"52": "13rem",
|
|
449
|
+
"56": "14rem",
|
|
450
|
+
"60": "15rem",
|
|
451
|
+
"64": "16rem",
|
|
452
|
+
"72": "18rem",
|
|
453
|
+
"80": "20rem",
|
|
454
|
+
"96": "24rem"
|
|
455
|
+
};
|
|
456
|
+
//#endregion
|
|
457
|
+
//#region src/z-index.ts
|
|
458
|
+
/** Z-index tokens — overridable by consumers via CSS custom properties. */
|
|
459
|
+
const zIndexTokens = {
|
|
460
|
+
"--z-dropdown": "50",
|
|
461
|
+
"--z-sticky": "100",
|
|
462
|
+
"--z-fixed": "200",
|
|
463
|
+
"--z-modal-backdrop": "300",
|
|
464
|
+
"--z-modal": "400",
|
|
465
|
+
"--z-popover": "500",
|
|
466
|
+
"--z-tooltip": "600",
|
|
467
|
+
"--z-toast": "700"
|
|
468
|
+
};
|
|
469
|
+
//#endregion
|
|
470
|
+
export { defaultFontWeights, densityPresets, deriveDarkPalette, deriveLightPalette, generatePaletteCSS, hexToHSL, hslToString, motionPresets, radiusPresets, shadowPresets, spacingScale, typeScale, zIndexTokens };
|
|
471
|
+
|
|
472
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../src/colors.ts","../src/radius.ts","../src/shadows.ts","../src/motion.ts","../src/density.ts","../src/typography.ts","../src/spacing.ts","../src/z-index.ts"],"sourcesContent":["/**\n * Color derivation engine.\n * Takes 2-3 brand colors (HSL) and auto-derives a full semantic palette\n * for both light and dark modes.\n */\n\nexport interface HSL {\n h: number;\n s: number;\n l: number;\n}\n\nexport function hexToHSL(hex: string): HSL {\n hex = hex.replace(\"#\", \"\");\n const r = parseInt(hex.substring(0, 2), 16) / 255;\n const g = parseInt(hex.substring(2, 4), 16) / 255;\n const b = parseInt(hex.substring(4, 6), 16) / 255;\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const l = (max + min) / 2;\n let h = 0;\n let s = 0;\n\n if (max !== min) {\n const d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r:\n h = ((g - b) / d + (g < b ? 6 : 0)) / 6;\n break;\n case g:\n h = ((b - r) / d + 2) / 6;\n break;\n case b:\n h = ((r - g) / d + 4) / 6;\n break;\n }\n }\n\n return {\n h: Math.round(h * 360),\n s: Math.round(s * 100),\n l: Math.round(l * 100),\n };\n}\n\nexport function hslToString(hsl: HSL): string {\n return `${hsl.h} ${hsl.s}% ${hsl.l}%`;\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n return Math.min(Math.max(value, min), max);\n}\n\nfunction adjustLightness(hsl: HSL, amount: number): HSL {\n return { ...hsl, l: clamp(hsl.l + amount, 0, 100) };\n}\n\nfunction adjustSaturation(hsl: HSL, amount: number): HSL {\n return { ...hsl, s: clamp(hsl.s + amount, 0, 100) };\n}\n\nexport interface BrandColors {\n primary: string; // hex\n secondary: string; // hex\n accent?: string; // hex (optional, defaults to primary shifted)\n}\n\nexport interface SemanticPalette {\n background: string;\n foreground: string;\n card: string;\n \"card-foreground\": string;\n popover: string;\n \"popover-foreground\": string;\n primary: string;\n \"primary-foreground\": string;\n secondary: string;\n \"secondary-foreground\": string;\n accent: string;\n \"accent-foreground\": string;\n muted: string;\n \"muted-foreground\": string;\n destructive: string;\n \"destructive-foreground\": string;\n border: string;\n input: string;\n ring: string;\n}\n\nexport function deriveLightPalette(brand: BrandColors): SemanticPalette {\n const primary = hexToHSL(brand.primary);\n const secondary = hexToHSL(brand.secondary);\n const accent = brand.accent\n ? hexToHSL(brand.accent)\n : { h: (primary.h + 30) % 360, s: clamp(primary.s - 10, 0, 100), l: 90 };\n\n return {\n background: hslToString({ h: primary.h, s: clamp(primary.s - 30, 0, 100), l: 100 }),\n foreground: hslToString({ h: primary.h, s: clamp(primary.s - 20, 0, 100), l: 10 }),\n card: hslToString({ h: primary.h, s: clamp(primary.s - 30, 0, 100), l: 100 }),\n \"card-foreground\": hslToString({ h: primary.h, s: clamp(primary.s - 20, 0, 100), l: 10 }),\n popover: hslToString({ h: primary.h, s: clamp(primary.s - 30, 0, 100), l: 100 }),\n \"popover-foreground\": hslToString({ h: primary.h, s: clamp(primary.s - 20, 0, 100), l: 10 }),\n primary: hslToString(primary),\n \"primary-foreground\": hslToString(\n primary.l > 50\n ? adjustLightness(adjustSaturation(primary, -20), -80)\n : { h: primary.h, s: clamp(primary.s - 30, 0, 100), l: 98 }\n ),\n secondary: hslToString(adjustLightness(adjustSaturation(secondary, -30), 40)),\n \"secondary-foreground\": hslToString(adjustLightness(secondary, -30)),\n accent: hslToString(adjustLightness(accent, 10)),\n \"accent-foreground\": hslToString(adjustLightness(accent, -60)),\n muted: hslToString({ h: primary.h, s: clamp(primary.s - 30, 0, 100), l: 96 }),\n \"muted-foreground\": hslToString({ h: primary.h, s: clamp(primary.s - 25, 0, 100), l: 45 }),\n destructive: \"0 84% 60%\",\n \"destructive-foreground\": \"0 0% 98%\",\n border: hslToString({ h: primary.h, s: clamp(primary.s - 25, 0, 100), l: 91 }),\n input: hslToString({ h: primary.h, s: clamp(primary.s - 25, 0, 100), l: 91 }),\n ring: hslToString(primary),\n };\n}\n\nexport function deriveDarkPalette(brand: BrandColors): SemanticPalette {\n const primary = hexToHSL(brand.primary);\n const secondary = hexToHSL(brand.secondary);\n const accent = brand.accent\n ? hexToHSL(brand.accent)\n : { h: (primary.h + 30) % 360, s: clamp(primary.s - 10, 0, 100), l: 30 };\n\n const darkPrimary = adjustLightness(primary, primary.l < 50 ? 20 : 0);\n\n return {\n background: hslToString({ h: primary.h, s: clamp(primary.s - 25, 0, 100), l: 7 }),\n foreground: hslToString({ h: primary.h, s: clamp(primary.s - 30, 0, 100), l: 98 }),\n card: hslToString({ h: primary.h, s: clamp(primary.s - 25, 0, 100), l: 10 }),\n \"card-foreground\": hslToString({ h: primary.h, s: clamp(primary.s - 30, 0, 100), l: 98 }),\n popover: hslToString({ h: primary.h, s: clamp(primary.s - 25, 0, 100), l: 10 }),\n \"popover-foreground\": hslToString({ h: primary.h, s: clamp(primary.s - 30, 0, 100), l: 98 }),\n primary: hslToString(darkPrimary),\n \"primary-foreground\": hslToString(\n darkPrimary.l > 50\n ? adjustLightness(darkPrimary, -80)\n : { h: primary.h, s: clamp(primary.s - 30, 0, 100), l: 98 }\n ),\n secondary: hslToString({ h: secondary.h, s: clamp(secondary.s - 20, 0, 100), l: 18 }),\n \"secondary-foreground\": hslToString(adjustLightness(secondary, 30)),\n accent: hslToString({ h: accent.h, s: clamp(accent.s - 10, 0, 100), l: 20 }),\n \"accent-foreground\": hslToString(adjustLightness(accent, 40)),\n muted: hslToString({ h: primary.h, s: clamp(primary.s - 25, 0, 100), l: 18 }),\n \"muted-foreground\": hslToString({ h: primary.h, s: clamp(primary.s - 20, 0, 100), l: 65 }),\n destructive: \"0 62% 30%\",\n \"destructive-foreground\": \"0 0% 98%\",\n border: hslToString({ h: primary.h, s: clamp(primary.s - 25, 0, 100), l: 18 }),\n input: hslToString({ h: primary.h, s: clamp(primary.s - 25, 0, 100), l: 18 }),\n ring: hslToString(darkPrimary),\n };\n}\n\nexport function generatePaletteCSS(brand: BrandColors): string {\n const light = deriveLightPalette(brand);\n const dark = deriveDarkPalette(brand);\n\n const toVars = (palette: SemanticPalette, indent: string) =>\n Object.entries(palette)\n .map(([key, value]) => `${indent}--${key}: ${value};`)\n .join(\"\\n\");\n\n return `:root {\\n${toVars(light, \" \")}\\n}\\n\\n.dark {\\n${toVars(dark, \" \")}\\n}\\n`;\n}\n","export const radiusPresets = {\n sharp: {\n \"--radius\": \"0rem\",\n \"--radius-sm\": \"0rem\",\n \"--radius-md\": \"0rem\",\n \"--radius-lg\": \"0rem\",\n \"--radius-xl\": \"0rem\",\n \"--radius-full\": \"0rem\",\n },\n subtle: {\n \"--radius\": \"0.375rem\",\n \"--radius-sm\": \"0.125rem\",\n \"--radius-md\": \"0.375rem\",\n \"--radius-lg\": \"0.5rem\",\n \"--radius-xl\": \"0.75rem\",\n \"--radius-full\": \"9999px\",\n },\n rounded: {\n \"--radius\": \"0.5rem\",\n \"--radius-sm\": \"0.25rem\",\n \"--radius-md\": \"0.5rem\",\n \"--radius-lg\": \"0.75rem\",\n \"--radius-xl\": \"1rem\",\n \"--radius-full\": \"9999px\",\n },\n pill: {\n \"--radius\": \"0.75rem\",\n \"--radius-sm\": \"0.5rem\",\n \"--radius-md\": \"0.75rem\",\n \"--radius-lg\": \"1rem\",\n \"--radius-xl\": \"1.5rem\",\n \"--radius-full\": \"9999px\",\n },\n} as const;\n\nexport type RadiusPreset = keyof typeof radiusPresets;\n","export const shadowPresets = {\n flat: {\n \"--shadow-sm\": \"none\",\n \"--shadow\": \"none\",\n \"--shadow-md\": \"none\",\n \"--shadow-lg\": \"none\",\n \"--shadow-xl\": \"none\",\n },\n subtle: {\n \"--shadow-sm\": \"0 1px 2px 0 rgb(0 0 0 / 0.03)\",\n \"--shadow\": \"0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05)\",\n \"--shadow-md\": \"0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05)\",\n \"--shadow-lg\": \"0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05)\",\n \"--shadow-xl\": \"0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05)\",\n },\n elevated: {\n \"--shadow-sm\": \"0 1px 2px 0 rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1)\",\n \"--shadow\": \"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)\",\n \"--shadow-md\": \"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)\",\n \"--shadow-lg\": \"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)\",\n \"--shadow-xl\": \"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)\",\n },\n} as const;\n\nexport type ShadowPreset = keyof typeof shadowPresets;\n","export const motionPresets = {\n snappy: {\n \"--duration-fast\": \"100ms\",\n \"--duration-normal\": \"150ms\",\n \"--duration-slow\": \"250ms\",\n \"--ease-default\": \"cubic-bezier(0.22, 1, 0.36, 1)\",\n \"--ease-in\": \"cubic-bezier(0.55, 0, 1, 0.45)\",\n \"--ease-out\": \"cubic-bezier(0, 0.55, 0.45, 1)\",\n \"--ease-in-out\": \"cubic-bezier(0.65, 0, 0.35, 1)\",\n },\n smooth: {\n \"--duration-fast\": \"150ms\",\n \"--duration-normal\": \"200ms\",\n \"--duration-slow\": \"350ms\",\n \"--ease-default\": \"cubic-bezier(0.25, 0.1, 0.25, 1)\",\n \"--ease-in\": \"cubic-bezier(0.42, 0, 1, 1)\",\n \"--ease-out\": \"cubic-bezier(0, 0, 0.58, 1)\",\n \"--ease-in-out\": \"cubic-bezier(0.42, 0, 0.58, 1)\",\n },\n minimal: {\n \"--duration-fast\": \"75ms\",\n \"--duration-normal\": \"100ms\",\n \"--duration-slow\": \"200ms\",\n \"--ease-default\": \"linear\",\n \"--ease-in\": \"linear\",\n \"--ease-out\": \"linear\",\n \"--ease-in-out\": \"linear\",\n },\n} as const;\n\nexport type MotionPreset = keyof typeof motionPresets;\n","export const densityPresets = {\n compact: {\n \"--density-padding-xs\": \"0.125rem\",\n \"--density-padding-sm\": \"0.25rem\",\n \"--density-padding-md\": \"0.375rem\",\n \"--density-padding-lg\": \"0.5rem\",\n \"--density-padding-xl\": \"0.75rem\",\n \"--density-gap-sm\": \"0.25rem\",\n \"--density-gap-md\": \"0.5rem\",\n \"--density-gap-lg\": \"0.75rem\",\n \"--density-height-sm\": \"1.75rem\",\n \"--density-height-md\": \"2rem\",\n \"--density-height-lg\": \"2.5rem\",\n },\n default: {\n \"--density-padding-xs\": \"0.25rem\",\n \"--density-padding-sm\": \"0.5rem\",\n \"--density-padding-md\": \"0.75rem\",\n \"--density-padding-lg\": \"1rem\",\n \"--density-padding-xl\": \"1.5rem\",\n \"--density-gap-sm\": \"0.5rem\",\n \"--density-gap-md\": \"0.75rem\",\n \"--density-gap-lg\": \"1rem\",\n \"--density-height-sm\": \"2rem\",\n \"--density-height-md\": \"2.5rem\",\n \"--density-height-lg\": \"3rem\",\n },\n spacious: {\n \"--density-padding-xs\": \"0.5rem\",\n \"--density-padding-sm\": \"0.75rem\",\n \"--density-padding-md\": \"1rem\",\n \"--density-padding-lg\": \"1.5rem\",\n \"--density-padding-xl\": \"2rem\",\n \"--density-gap-sm\": \"0.75rem\",\n \"--density-gap-md\": \"1rem\",\n \"--density-gap-lg\": \"1.5rem\",\n \"--density-height-sm\": \"2.5rem\",\n \"--density-height-md\": \"3rem\",\n \"--density-height-lg\": \"3.5rem\",\n },\n} as const;\n\nexport type DensityPreset = keyof typeof densityPresets;\n","/** Locked type scale — consumers cannot override sizes, only font-family and weights. */\nexport const typeScale = {\n \"text-xs\": { fontSize: \"0.75rem\", lineHeight: \"1rem\" },\n \"text-sm\": { fontSize: \"0.875rem\", lineHeight: \"1.25rem\" },\n \"text-base\": { fontSize: \"1rem\", lineHeight: \"1.5rem\" },\n \"text-lg\": { fontSize: \"1.125rem\", lineHeight: \"1.75rem\" },\n \"text-xl\": { fontSize: \"1.25rem\", lineHeight: \"1.75rem\" },\n \"text-2xl\": { fontSize: \"1.5rem\", lineHeight: \"2rem\" },\n \"text-3xl\": { fontSize: \"1.875rem\", lineHeight: \"2.25rem\" },\n \"text-4xl\": { fontSize: \"2.25rem\", lineHeight: \"2.5rem\" },\n\n // Fluid headings using clamp()\n \"heading-sm\": {\n fontSize: \"clamp(1.125rem, 1rem + 0.5vw, 1.25rem)\",\n lineHeight: \"1.4\",\n letterSpacing: \"-0.01em\",\n },\n \"heading-md\": {\n fontSize: \"clamp(1.25rem, 1rem + 1vw, 1.875rem)\",\n lineHeight: \"1.3\",\n letterSpacing: \"-0.015em\",\n },\n \"heading-lg\": {\n fontSize: \"clamp(1.5rem, 1rem + 2vw, 2.25rem)\",\n lineHeight: \"1.2\",\n letterSpacing: \"-0.02em\",\n },\n \"heading-xl\": {\n fontSize: \"clamp(1.875rem, 1rem + 3vw, 3rem)\",\n lineHeight: \"1.1\",\n letterSpacing: \"-0.025em\",\n },\n \"heading-2xl\": {\n fontSize: \"clamp(2.25rem, 1rem + 4vw, 3.75rem)\",\n lineHeight: \"1.1\",\n letterSpacing: \"-0.03em\",\n },\n} as const;\n\nexport interface FontWeightMap {\n normal: number;\n medium: number;\n semibold: number;\n bold: number;\n}\n\nexport const defaultFontWeights: FontWeightMap = {\n normal: 400,\n medium: 500,\n semibold: 600,\n bold: 700,\n};\n","/** Locked spacing scale — 4px (0.25rem) base grid. Not consumer-overridable. */\nexport const spacingScale = {\n \"0\": \"0\",\n \"0.5\": \"0.125rem\",\n \"1\": \"0.25rem\",\n \"1.5\": \"0.375rem\",\n \"2\": \"0.5rem\",\n \"2.5\": \"0.625rem\",\n \"3\": \"0.75rem\",\n \"3.5\": \"0.875rem\",\n \"4\": \"1rem\",\n \"5\": \"1.25rem\",\n \"6\": \"1.5rem\",\n \"7\": \"1.75rem\",\n \"8\": \"2rem\",\n \"9\": \"2.25rem\",\n \"10\": \"2.5rem\",\n \"11\": \"2.75rem\",\n \"12\": \"3rem\",\n \"14\": \"3.5rem\",\n \"16\": \"4rem\",\n \"20\": \"5rem\",\n \"24\": \"6rem\",\n \"28\": \"7rem\",\n \"32\": \"8rem\",\n \"36\": \"9rem\",\n \"40\": \"10rem\",\n \"44\": \"11rem\",\n \"48\": \"12rem\",\n \"52\": \"13rem\",\n \"56\": \"14rem\",\n \"60\": \"15rem\",\n \"64\": \"16rem\",\n \"72\": \"18rem\",\n \"80\": \"20rem\",\n \"96\": \"24rem\",\n} as const;\n","/** Z-index tokens — overridable by consumers via CSS custom properties. */\nexport const zIndexTokens = {\n \"--z-dropdown\": \"50\",\n \"--z-sticky\": \"100\",\n \"--z-fixed\": \"200\",\n \"--z-modal-backdrop\": \"300\",\n \"--z-modal\": \"400\",\n \"--z-popover\": \"500\",\n \"--z-tooltip\": \"600\",\n \"--z-toast\": \"700\",\n} as const;\n\nexport type ZIndexToken = keyof typeof zIndexTokens;\n"],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@bison-lab/tokens",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Design tokens, CSS custom properties, and preset files for Bison Lab component library",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.mjs",
|
|
7
|
+
"types": "./dist/index.d.mts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/index.mjs",
|
|
11
|
+
"types": "./dist/index.d.mts"
|
|
12
|
+
},
|
|
13
|
+
"./css/globals.css": "./css/globals.css",
|
|
14
|
+
"./css/base.css": "./css/base.css",
|
|
15
|
+
"./css/themes/*": "./css/themes/*"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist",
|
|
19
|
+
"css"
|
|
20
|
+
],
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"tsdown": "^0.21.0",
|
|
23
|
+
"typescript": "^5.9.3"
|
|
24
|
+
},
|
|
25
|
+
"publishConfig": {
|
|
26
|
+
"access": "public"
|
|
27
|
+
},
|
|
28
|
+
"scripts": {
|
|
29
|
+
"build": "tsdown",
|
|
30
|
+
"dev": "tsdown --watch",
|
|
31
|
+
"clean": "rm -rf dist",
|
|
32
|
+
"typecheck": "tsc --noEmit"
|
|
33
|
+
}
|
|
34
|
+
}
|