@openkeyai/ui 0.1.0 → 1.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.
- package/dist/index.cjs +134 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +138 -5
- package/dist/index.d.ts +138 -5
- package/dist/index.js +109 -4
- package/dist/index.js.map +1 -1
- package/dist/styles.css +351 -28
- package/dist/tailwind.cjs +139 -47
- package/dist/tailwind.cjs.map +1 -1
- package/dist/tailwind.d.cts +36 -19
- package/dist/tailwind.d.ts +36 -19
- package/dist/tailwind.js +139 -47
- package/dist/tailwind.js.map +1 -1
- package/dist/tokens.cjs +123 -44
- package/dist/tokens.cjs.map +1 -1
- package/dist/tokens.d.cts +387 -40
- package/dist/tokens.d.ts +387 -40
- package/dist/tokens.js +122 -45
- package/dist/tokens.js.map +1 -1
- package/package.json +1 -1
package/dist/tailwind.cjs
CHANGED
|
@@ -3,41 +3,85 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
// src/tokens.ts
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
6
|
+
var darkPalette = {
|
|
7
|
+
/** App-wide canvas. Warm dark slate (oklch hue 35). */
|
|
8
|
+
bg: "oklch(0.13 0.008 35)",
|
|
9
|
+
/** Surface a half-step lighter than `bg`. Card / panel default. */
|
|
10
|
+
surface: "oklch(0.17 0.010 35)",
|
|
11
|
+
/** Surface above `surface` — popovers, hover states. */
|
|
12
|
+
surface1: "oklch(0.17 0.010 35)",
|
|
13
|
+
surface2: "oklch(0.21 0.012 35)",
|
|
14
|
+
surface3: "oklch(0.25 0.014 35)",
|
|
15
|
+
surface4: "oklch(0.29 0.016 35)",
|
|
16
|
+
surfaceRaised: "oklch(0.21 0.012 35)",
|
|
17
|
+
/** Primary readable text. */
|
|
18
|
+
foreground: "oklch(0.96 0.005 35)",
|
|
19
|
+
/** Lower-emphasis text. Captions, metadata. */
|
|
20
|
+
foregroundMuted: "oklch(0.74 0.008 35)",
|
|
21
|
+
/** Even lower emphasis — placeholder text, ghost labels. */
|
|
22
|
+
foregroundSubtle: "oklch(0.58 0.010 35)",
|
|
23
|
+
/** Subtle border default for cards / dividers. */
|
|
24
|
+
border: "oklch(1 0 0 / 0.08)",
|
|
25
|
+
/** Stronger border for inputs + outlined buttons. */
|
|
26
|
+
borderStrong: "oklch(1 0 0 / 0.14)",
|
|
27
|
+
/** Brand — warm coral (Material 3 key color, Claude warmth). */
|
|
28
|
+
accent: "oklch(0.76 0.17 35)",
|
|
29
|
+
/** Brighter accent for focus rings + active links. */
|
|
30
|
+
accentBright: "oklch(0.82 0.17 35)",
|
|
31
|
+
/** Tint that sits behind brand-on-brand content. */
|
|
32
|
+
accentContainer: "oklch(0.30 0.13 28 / 0.25)",
|
|
33
|
+
/** Text/icon color on top of accentContainer. */
|
|
34
|
+
onAccentContainer: "oklch(0.88 0.085 35)",
|
|
35
|
+
/** Text/icon color on top of solid accent. */
|
|
36
|
+
onAccent: "oklch(0.13 0.008 35)",
|
|
37
|
+
/** Destructive action accent — warmer than the old red. */
|
|
38
|
+
destructive: "oklch(0.74 0.18 28)",
|
|
39
|
+
/** Success / positive accent — sage. */
|
|
40
|
+
success: "oklch(0.84 0.08 150)",
|
|
41
|
+
/** Warning accent — amber. */
|
|
42
|
+
warning: "oklch(0.88 0.12 80)"
|
|
43
|
+
};
|
|
44
|
+
var shared = {
|
|
45
|
+
/** 4px base. Use multiples of these for layout — keeps the grid honest. */
|
|
46
|
+
space: {
|
|
47
|
+
px: "1px",
|
|
48
|
+
"0_5": "2px",
|
|
49
|
+
"1": "4px",
|
|
50
|
+
"1_5": "6px",
|
|
51
|
+
"2": "8px",
|
|
52
|
+
"3": "12px",
|
|
53
|
+
"4": "16px",
|
|
54
|
+
"5": "20px",
|
|
55
|
+
"6": "24px",
|
|
56
|
+
"8": "32px",
|
|
57
|
+
"10": "40px",
|
|
58
|
+
"12": "48px",
|
|
59
|
+
"16": "64px"
|
|
28
60
|
},
|
|
61
|
+
/**
|
|
62
|
+
* Material 3 shape scale. Generous radii, predictable family. One
|
|
63
|
+
* radius per element — NO mixed-corner shapes.
|
|
64
|
+
*/
|
|
29
65
|
radius: {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
xl: "
|
|
35
|
-
"2xl": "
|
|
66
|
+
xs: "6px",
|
|
67
|
+
sm: "10px",
|
|
68
|
+
md: "14px",
|
|
69
|
+
lg: "20px",
|
|
70
|
+
xl: "28px",
|
|
71
|
+
"2xl": "36px",
|
|
72
|
+
full: "9999px"
|
|
73
|
+
},
|
|
36
74
|
font: {
|
|
37
75
|
/** Geist Sans — opt-in by the consumer's stack. We just suggest it. */
|
|
38
76
|
sans: 'Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
39
77
|
/** Geist Mono for code + hashes + token displays. */
|
|
40
|
-
mono: 'Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace'
|
|
78
|
+
mono: 'Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
|
|
79
|
+
/**
|
|
80
|
+
* Display — Roboto Flex (Apache 2.0 via Google Fonts). Consumer loads
|
|
81
|
+
* via next/font and exposes the CSS variable `--font-display`. If
|
|
82
|
+
* absent, falls back to the body sans.
|
|
83
|
+
*/
|
|
84
|
+
display: "var(--font-display, Geist, ui-sans-serif, system-ui, sans-serif)"
|
|
41
85
|
},
|
|
42
86
|
fontSize: {
|
|
43
87
|
xs: "11px",
|
|
@@ -45,28 +89,54 @@ var tokens = {
|
|
|
45
89
|
base: "14px",
|
|
46
90
|
md: "16px",
|
|
47
91
|
lg: "18px",
|
|
48
|
-
xl: "22px"
|
|
92
|
+
xl: "22px",
|
|
93
|
+
"2xl": "28px",
|
|
94
|
+
"3xl": "36px",
|
|
95
|
+
"4xl": "48px",
|
|
96
|
+
/** Big display moments (marketing hero). */
|
|
97
|
+
display: "60px"
|
|
49
98
|
},
|
|
99
|
+
lineHeight: {
|
|
100
|
+
/** Display — tight, almost 1:1 to the cap height. */
|
|
101
|
+
display: "1.05",
|
|
102
|
+
/** Headlines. */
|
|
103
|
+
tight: "1.2",
|
|
104
|
+
/** UI. */
|
|
105
|
+
normal: "1.5",
|
|
106
|
+
/** Long-form. */
|
|
107
|
+
relaxed: "1.65"
|
|
108
|
+
},
|
|
109
|
+
/**
|
|
110
|
+
* Shadows — heavier in light (real visible shadow), lighter in dark
|
|
111
|
+
* (surface lift carries hierarchy; shadow is just a hairline tint).
|
|
112
|
+
*
|
|
113
|
+
* Values match the hub's `--next-shadow-*` tokens.
|
|
114
|
+
*/
|
|
50
115
|
shadow: {
|
|
51
|
-
/**
|
|
52
|
-
sm: "0 1px
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
|
|
116
|
+
/** Dark — cards, hover lift. */
|
|
117
|
+
sm: "0 1px 0 oklch(1 0 0 / 0.04), 0 4px 12px oklch(0 0 0 / 0.20)",
|
|
118
|
+
md: "0 1px 0 oklch(1 0 0 / 0.05), 0 12px 28px oklch(0 0 0 / 0.30)",
|
|
119
|
+
lg: "0 1px 0 oklch(1 0 0 / 0.06), 0 24px 56px oklch(0 0 0 / 0.38)",
|
|
120
|
+
/** Light — real shadow values for the light theme. */
|
|
121
|
+
smLight: "0 1px 2px oklch(0.13 0.008 35 / 0.06), 0 4px 12px oklch(0.13 0.008 35 / 0.06)",
|
|
122
|
+
mdLight: "0 2px 4px oklch(0.13 0.008 35 / 0.08), 0 12px 28px oklch(0.13 0.008 35 / 0.10)",
|
|
123
|
+
lgLight: "0 4px 8px oklch(0.13 0.008 35 / 0.10), 0 24px 56px oklch(0.13 0.008 35 / 0.14)"
|
|
57
124
|
},
|
|
58
125
|
motion: {
|
|
59
|
-
/**
|
|
60
|
-
|
|
126
|
+
/** Material easing — standard. Most UI transitions. */
|
|
127
|
+
easeStandard: "cubic-bezier(0.2, 0.0, 0.0, 1.0)",
|
|
128
|
+
/** Material easing — emphasized. Bigger surface motions. */
|
|
129
|
+
easeEmphasized: "cubic-bezier(0.05, 0.7, 0.1, 1.0)",
|
|
61
130
|
/** Quick interactions — hover, focus. */
|
|
62
|
-
fast: "
|
|
63
|
-
/** Standard —
|
|
64
|
-
normal: "
|
|
65
|
-
/** Used for
|
|
66
|
-
slow: "
|
|
131
|
+
fast: "160ms",
|
|
132
|
+
/** Standard — dialogs, surface moves. */
|
|
133
|
+
normal: "280ms",
|
|
134
|
+
/** Used for big route / page transitions. */
|
|
135
|
+
slow: "400ms"
|
|
67
136
|
},
|
|
68
137
|
/** Z-index scale. Use these names, never raw numbers. */
|
|
69
138
|
z: {
|
|
139
|
+
base: 0,
|
|
70
140
|
raised: 10,
|
|
71
141
|
sticky: 30,
|
|
72
142
|
/** HubHeader sits here. */
|
|
@@ -81,6 +151,11 @@ var tokens = {
|
|
|
81
151
|
headerHeight: "56px"
|
|
82
152
|
}
|
|
83
153
|
};
|
|
154
|
+
var darkTokens = {
|
|
155
|
+
color: darkPalette,
|
|
156
|
+
...shared
|
|
157
|
+
};
|
|
158
|
+
var tokens = darkTokens;
|
|
84
159
|
|
|
85
160
|
// src/tailwind.ts
|
|
86
161
|
var hubTailwindPreset = {
|
|
@@ -89,16 +164,27 @@ var hubTailwindPreset = {
|
|
|
89
164
|
colors: {
|
|
90
165
|
"okai-bg": tokens.color.bg,
|
|
91
166
|
"okai-surface": tokens.color.surface,
|
|
167
|
+
"okai-surface-1": tokens.color.surface1,
|
|
168
|
+
"okai-surface-2": tokens.color.surface2,
|
|
169
|
+
"okai-surface-3": tokens.color.surface3,
|
|
170
|
+
"okai-surface-4": tokens.color.surface4,
|
|
92
171
|
"okai-surface-raised": tokens.color.surfaceRaised,
|
|
93
172
|
"okai-foreground": tokens.color.foreground,
|
|
94
173
|
"okai-foreground-muted": tokens.color.foregroundMuted,
|
|
174
|
+
"okai-foreground-subtle": tokens.color.foregroundSubtle,
|
|
95
175
|
"okai-border": tokens.color.border,
|
|
176
|
+
"okai-border-strong": tokens.color.borderStrong,
|
|
96
177
|
"okai-accent": tokens.color.accent,
|
|
97
178
|
"okai-accent-bright": tokens.color.accentBright,
|
|
179
|
+
"okai-accent-container": tokens.color.accentContainer,
|
|
180
|
+
"okai-on-accent": tokens.color.onAccent,
|
|
181
|
+
"okai-on-accent-container": tokens.color.onAccentContainer,
|
|
98
182
|
"okai-destructive": tokens.color.destructive,
|
|
99
|
-
"okai-success": tokens.color.success
|
|
183
|
+
"okai-success": tokens.color.success,
|
|
184
|
+
"okai-warning": tokens.color.warning
|
|
100
185
|
},
|
|
101
186
|
borderRadius: {
|
|
187
|
+
"okai-xs": tokens.radius.xs,
|
|
102
188
|
"okai-sm": tokens.radius.sm,
|
|
103
189
|
"okai-md": tokens.radius.md,
|
|
104
190
|
"okai-lg": tokens.radius.lg,
|
|
@@ -107,7 +193,8 @@ var hubTailwindPreset = {
|
|
|
107
193
|
},
|
|
108
194
|
fontFamily: {
|
|
109
195
|
"okai-sans": tokens.font.sans.split(",").map((s) => s.trim()),
|
|
110
|
-
"okai-mono": tokens.font.mono.split(",").map((s) => s.trim())
|
|
196
|
+
"okai-mono": tokens.font.mono.split(",").map((s) => s.trim()),
|
|
197
|
+
"okai-display": tokens.font.display.split(",").map((s) => s.trim())
|
|
111
198
|
},
|
|
112
199
|
fontSize: {
|
|
113
200
|
"okai-xs": tokens.fontSize.xs,
|
|
@@ -115,7 +202,11 @@ var hubTailwindPreset = {
|
|
|
115
202
|
"okai-base": tokens.fontSize.base,
|
|
116
203
|
"okai-md": tokens.fontSize.md,
|
|
117
204
|
"okai-lg": tokens.fontSize.lg,
|
|
118
|
-
"okai-xl": tokens.fontSize.xl
|
|
205
|
+
"okai-xl": tokens.fontSize.xl,
|
|
206
|
+
"okai-2xl": tokens.fontSize["2xl"],
|
|
207
|
+
"okai-3xl": tokens.fontSize["3xl"],
|
|
208
|
+
"okai-4xl": tokens.fontSize["4xl"],
|
|
209
|
+
"okai-display": tokens.fontSize.display
|
|
119
210
|
},
|
|
120
211
|
boxShadow: {
|
|
121
212
|
"okai-sm": tokens.shadow.sm,
|
|
@@ -123,7 +214,8 @@ var hubTailwindPreset = {
|
|
|
123
214
|
"okai-lg": tokens.shadow.lg
|
|
124
215
|
},
|
|
125
216
|
transitionTimingFunction: {
|
|
126
|
-
"okai-ease": tokens.motion.
|
|
217
|
+
"okai-ease": tokens.motion.easeStandard,
|
|
218
|
+
"okai-ease-emphasized": tokens.motion.easeEmphasized
|
|
127
219
|
},
|
|
128
220
|
transitionDuration: {
|
|
129
221
|
"okai-fast": tokens.motion.fast.replace("ms", ""),
|
package/dist/tailwind.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tokens.ts","../src/tailwind.ts"],"names":[],"mappings":"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","file":"tailwind.cjs","sourcesContent":["/**\n * Design tokens — colors, spacing, typography, radius, motion.\n *\n * Frozen-ish: visual changes that affect layout (header height, spacing\n * scale, font sizes) require coordinated checks against deployed tools.\n * See ../CLAUDE.md.\n *\n * Two consumption styles:\n * 1. As CSS custom properties — import `@openkeyai/ui/css` and use\n * `var(--okai-color-bg)` etc. The `<HubHeader />` component does this.\n * 2. As a JS object — `import { tokens } from \"@openkeyai/ui/tokens\"`\n * for programmatic colour pickups (charts, gradients).\n *\n * The token names mirror the CSS variable names below the prefix.\n * Example: `tokens.color.bg` ↔ `--okai-color-bg`.\n */\n\nexport const tokens = {\n color: {\n /** App-wide canvas. Dark navy with a touch of indigo. */\n bg: \"#0a0c1a\",\n /** Surface a half-step lighter than `bg`. Card / panel default. */\n surface: \"#11142a\",\n /** Surface above `surface` — popovers, hover states. */\n surfaceRaised: \"#181d3a\",\n /** Primary readable text. */\n foreground: \"#e6e8f5\",\n /** Lower-emphasis text. Captions, metadata. */\n foregroundMuted: \"#9097b8\",\n /** Subtle border default for cards / dividers. */\n border: \"rgba(150, 160, 220, 0.12)\",\n /** Indigo-violet primary, softened so it doesn't blow out the bg. */\n accent: \"#7c6cf5\",\n /** Brighter accent for focus rings + active links. */\n accentBright: \"#9b8af9\",\n /** Destructive action accent. */\n destructive: \"#ef4459\",\n /** Success / positive accent. */\n success: \"#34d399\",\n },\n /** 4px base. Use multiples of these for layout — keeps the grid honest. */\n space: {\n px: \"1px\",\n \"0_5\": \"2px\",\n \"1\": \"4px\",\n \"1_5\": \"6px\",\n \"2\": \"8px\",\n \"3\": \"12px\",\n \"4\": \"16px\",\n \"5\": \"20px\",\n \"6\": \"24px\",\n \"8\": \"32px\",\n \"10\": \"40px\",\n \"12\": \"48px\",\n \"16\": \"64px\",\n },\n radius: {\n sm: \"4px\",\n md: \"8px\",\n lg: \"12px\",\n /** Default for cards and surfaces. */\n xl: \"16px\",\n \"2xl\": \"20px\",\n full: \"9999px\",\n },\n font: {\n /** Geist Sans — opt-in by the consumer's stack. We just suggest it. */\n sans:\n \"Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \" +\n '\"Segoe UI\", Roboto, sans-serif',\n /** Geist Mono for code + hashes + token displays. */\n mono:\n \"Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \" +\n '\"Liberation Mono\", monospace',\n },\n fontSize: {\n xs: \"11px\",\n sm: \"13px\",\n base: \"14px\",\n md: \"16px\",\n lg: \"18px\",\n xl: \"22px\",\n },\n lineHeight: {\n tight: \"1.2\",\n normal: \"1.5\",\n relaxed: \"1.65\",\n },\n shadow: {\n /** Subtle pop on raised cards. */\n sm: \"0 1px 2px rgba(0, 0, 0, 0.25)\",\n /** Standard floating-pill / dropdown lift. */\n md: \"0 6px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)\",\n /** Modal-style. */\n lg: \"0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4)\",\n },\n motion: {\n /** Default easing — feels good for most UI. */\n ease: \"cubic-bezier(0.4, 0.0, 0.2, 1)\",\n /** Quick interactions — hover, focus. */\n fast: \"120ms\",\n /** Standard — most state transitions. */\n normal: \"180ms\",\n /** Used for entrance / exit animations. */\n slow: \"260ms\",\n },\n /** Z-index scale. Use these names, never raw numbers. */\n z: {\n base: 0,\n raised: 10,\n sticky: 30,\n /** HubHeader sits here. */\n header: 40,\n overlay: 50,\n modal: 60,\n toast: 70,\n },\n /** Component-specific dimensions. */\n size: {\n /** HubHeader height. Tools should leave this much top padding. */\n headerHeight: \"56px\",\n },\n} as const;\n\nexport type DesignTokens = typeof tokens;\n","import { tokens } from \"./tokens\";\n\n/**\n * Tailwind preset for `@openkeyai/ui` consumers.\n *\n * Drop into a tool's `tailwind.config.ts`:\n *\n * import { hubTailwindPreset } from \"@openkeyai/ui/tailwind\";\n * export default {\n * presets: [hubTailwindPreset],\n * content: [...],\n * } satisfies Config;\n *\n * The preset extends Tailwind's theme with the hub's tokens. It does NOT\n * override Tailwind's defaults — tools can still use the full standard\n * scale alongside the hub additions. Hub-flavoured names are prefixed with\n * `okai-` to avoid colliding with Tailwind's own colour names.\n *\n * We intentionally don't `require(\"tailwindcss\")` here — `tailwind` is a\n * peer concern of the consumer's stack and isn't a dep of this package.\n */\nexport const hubTailwindPreset = {\n theme: {\n extend: {\n colors: {\n \"okai-bg\": tokens.color.bg,\n \"okai-surface\": tokens.color.surface,\n \"okai-surface-raised\": tokens.color.surfaceRaised,\n \"okai-foreground\": tokens.color.foreground,\n \"okai-foreground-muted\": tokens.color.foregroundMuted,\n \"okai-border\": tokens.color.border,\n \"okai-accent\": tokens.color.accent,\n \"okai-accent-bright\": tokens.color.accentBright,\n \"okai-destructive\": tokens.color.destructive,\n \"okai-success\": tokens.color.success,\n },\n borderRadius: {\n \"okai-sm\": tokens.radius.sm,\n \"okai-md\": tokens.radius.md,\n \"okai-lg\": tokens.radius.lg,\n \"okai-xl\": tokens.radius.xl,\n \"okai-2xl\": tokens.radius[\"2xl\"],\n },\n fontFamily: {\n \"okai-sans\": tokens.font.sans.split(\",\").map((s) => s.trim()),\n \"okai-mono\": tokens.font.mono.split(\",\").map((s) => s.trim()),\n },\n fontSize: {\n \"okai-xs\": tokens.fontSize.xs,\n \"okai-sm\": tokens.fontSize.sm,\n \"okai-base\": tokens.fontSize.base,\n \"okai-md\": tokens.fontSize.md,\n \"okai-lg\": tokens.fontSize.lg,\n \"okai-xl\": tokens.fontSize.xl,\n },\n boxShadow: {\n \"okai-sm\": tokens.shadow.sm,\n \"okai-md\": tokens.shadow.md,\n \"okai-lg\": tokens.shadow.lg,\n },\n transitionTimingFunction: {\n \"okai-ease\": tokens.motion.ease,\n },\n transitionDuration: {\n \"okai-fast\": tokens.motion.fast.replace(\"ms\", \"\"),\n \"okai-normal\": tokens.motion.normal.replace(\"ms\", \"\"),\n \"okai-slow\": tokens.motion.slow.replace(\"ms\", \"\"),\n },\n zIndex: {\n \"okai-raised\": String(tokens.z.raised),\n \"okai-sticky\": String(tokens.z.sticky),\n \"okai-header\": String(tokens.z.header),\n \"okai-overlay\": String(tokens.z.overlay),\n \"okai-modal\": String(tokens.z.modal),\n \"okai-toast\": String(tokens.z.toast),\n },\n spacing: {\n \"okai-header\": tokens.size.headerHeight,\n },\n },\n },\n} as const;\n\nexport type HubTailwindPreset = typeof hubTailwindPreset;\n\n// Default export so it can also be consumed via\n// `import preset from \"@openkeyai/ui/tailwind\"`.\nexport default hubTailwindPreset;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/tokens.ts","../src/tailwind.ts"],"names":[],"mappings":"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","file":"tailwind.cjs","sourcesContent":["/**\n * Design tokens — colors, spacing, typography, radius, motion.\n *\n * **v1.0.0** — major version: palette swap from cool indigo-violet to\n * warm coral, Material 3 elevation model, light + dark themes,\n * Roboto Flex display font. See README for the migration map and the\n * `hub` repo's `docs/DESIGN.md` for the language behind the choices.\n *\n * Two consumption styles:\n * 1. As CSS custom properties — import `@openkeyai/ui/css` and use\n * `var(--okai-color-bg)` etc. The `<HubHeader />` component does this.\n * 2. As a JS object — `import { tokens, darkTokens, lightTokens }`\n * from \"@openkeyai/ui/tokens\" for programmatic colour pickups\n * (charts, gradients).\n *\n * The token names mirror the CSS variable names below the prefix.\n * Example: `tokens.color.bg` ↔ `--okai-color-bg`.\n *\n * Dark is the default. Light mode is opt-in by the consumer:\n *\n * <html data-theme=\"light\">\n *\n * Switches every `--okai-*` color variable to the light palette.\n */\n\n/* ─── Dark palette (default) ──────────────────────────────────────────────── */\n\nconst darkPalette = {\n /** App-wide canvas. Warm dark slate (oklch hue 35). */\n bg: \"oklch(0.13 0.008 35)\",\n /** Surface a half-step lighter than `bg`. Card / panel default. */\n surface: \"oklch(0.17 0.010 35)\",\n /** Surface above `surface` — popovers, hover states. */\n surface1: \"oklch(0.17 0.010 35)\",\n surface2: \"oklch(0.21 0.012 35)\",\n surface3: \"oklch(0.25 0.014 35)\",\n surface4: \"oklch(0.29 0.016 35)\",\n surfaceRaised: \"oklch(0.21 0.012 35)\",\n /** Primary readable text. */\n foreground: \"oklch(0.96 0.005 35)\",\n /** Lower-emphasis text. Captions, metadata. */\n foregroundMuted: \"oklch(0.74 0.008 35)\",\n /** Even lower emphasis — placeholder text, ghost labels. */\n foregroundSubtle: \"oklch(0.58 0.010 35)\",\n /** Subtle border default for cards / dividers. */\n border: \"oklch(1 0 0 / 0.08)\",\n /** Stronger border for inputs + outlined buttons. */\n borderStrong: \"oklch(1 0 0 / 0.14)\",\n /** Brand — warm coral (Material 3 key color, Claude warmth). */\n accent: \"oklch(0.76 0.17 35)\",\n /** Brighter accent for focus rings + active links. */\n accentBright: \"oklch(0.82 0.17 35)\",\n /** Tint that sits behind brand-on-brand content. */\n accentContainer: \"oklch(0.30 0.13 28 / 0.25)\",\n /** Text/icon color on top of accentContainer. */\n onAccentContainer: \"oklch(0.88 0.085 35)\",\n /** Text/icon color on top of solid accent. */\n onAccent: \"oklch(0.13 0.008 35)\",\n /** Destructive action accent — warmer than the old red. */\n destructive: \"oklch(0.74 0.18 28)\",\n /** Success / positive accent — sage. */\n success: \"oklch(0.84 0.08 150)\",\n /** Warning accent — amber. */\n warning: \"oklch(0.88 0.12 80)\",\n} as const;\n\n/* ─── Light palette (opt-in via data-theme=\"light\") ───────────────────────── */\n\nconst lightPalette = {\n bg: \"oklch(0.985 0.005 35)\",\n surface: \"oklch(1 0 0)\",\n surface1: \"oklch(1 0 0)\",\n surface2: \"oklch(0.96 0.006 35)\",\n surface3: \"oklch(0.93 0.008 35)\",\n surface4: \"oklch(0.90 0.010 35)\",\n surfaceRaised: \"oklch(0.96 0.006 35)\",\n foreground: \"oklch(0.18 0.012 35)\",\n foregroundMuted: \"oklch(0.42 0.012 50)\",\n foregroundSubtle: \"oklch(0.58 0.010 50)\",\n border: \"oklch(0 0 0 / 0.08)\",\n borderStrong: \"oklch(0 0 0 / 0.16)\",\n accent: \"oklch(0.64 0.21 30)\",\n accentBright: \"oklch(0.56 0.20 28)\",\n accentContainer: \"oklch(0.93 0.045 35)\",\n onAccentContainer: \"oklch(0.30 0.13 28)\",\n onAccent: \"oklch(1 0 0)\",\n destructive: \"oklch(0.55 0.21 28)\",\n success: \"oklch(0.52 0.10 150)\",\n warning: \"oklch(0.60 0.15 70)\",\n} as const;\n\n/* ─── Shared (theme-invariant) ────────────────────────────────────────────── */\n\nconst shared = {\n /** 4px base. Use multiples of these for layout — keeps the grid honest. */\n space: {\n px: \"1px\",\n \"0_5\": \"2px\",\n \"1\": \"4px\",\n \"1_5\": \"6px\",\n \"2\": \"8px\",\n \"3\": \"12px\",\n \"4\": \"16px\",\n \"5\": \"20px\",\n \"6\": \"24px\",\n \"8\": \"32px\",\n \"10\": \"40px\",\n \"12\": \"48px\",\n \"16\": \"64px\",\n },\n /**\n * Material 3 shape scale. Generous radii, predictable family. One\n * radius per element — NO mixed-corner shapes.\n */\n radius: {\n xs: \"6px\",\n sm: \"10px\",\n md: \"14px\",\n lg: \"20px\",\n xl: \"28px\",\n \"2xl\": \"36px\",\n full: \"9999px\",\n },\n font: {\n /** Geist Sans — opt-in by the consumer's stack. We just suggest it. */\n sans:\n \"Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \" +\n '\"Segoe UI\", Roboto, sans-serif',\n /** Geist Mono for code + hashes + token displays. */\n mono:\n \"Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \" +\n '\"Liberation Mono\", monospace',\n /**\n * Display — Roboto Flex (Apache 2.0 via Google Fonts). Consumer loads\n * via next/font and exposes the CSS variable `--font-display`. If\n * absent, falls back to the body sans.\n */\n display:\n \"var(--font-display, Geist, ui-sans-serif, system-ui, sans-serif)\",\n },\n fontSize: {\n xs: \"11px\",\n sm: \"13px\",\n base: \"14px\",\n md: \"16px\",\n lg: \"18px\",\n xl: \"22px\",\n \"2xl\": \"28px\",\n \"3xl\": \"36px\",\n \"4xl\": \"48px\",\n /** Big display moments (marketing hero). */\n display: \"60px\",\n },\n lineHeight: {\n /** Display — tight, almost 1:1 to the cap height. */\n display: \"1.05\",\n /** Headlines. */\n tight: \"1.2\",\n /** UI. */\n normal: \"1.5\",\n /** Long-form. */\n relaxed: \"1.65\",\n },\n /**\n * Shadows — heavier in light (real visible shadow), lighter in dark\n * (surface lift carries hierarchy; shadow is just a hairline tint).\n *\n * Values match the hub's `--next-shadow-*` tokens.\n */\n shadow: {\n /** Dark — cards, hover lift. */\n sm:\n \"0 1px 0 oklch(1 0 0 / 0.04), 0 4px 12px oklch(0 0 0 / 0.20)\",\n md:\n \"0 1px 0 oklch(1 0 0 / 0.05), 0 12px 28px oklch(0 0 0 / 0.30)\",\n lg:\n \"0 1px 0 oklch(1 0 0 / 0.06), 0 24px 56px oklch(0 0 0 / 0.38)\",\n /** Light — real shadow values for the light theme. */\n smLight:\n \"0 1px 2px oklch(0.13 0.008 35 / 0.06), 0 4px 12px oklch(0.13 0.008 35 / 0.06)\",\n mdLight:\n \"0 2px 4px oklch(0.13 0.008 35 / 0.08), 0 12px 28px oklch(0.13 0.008 35 / 0.10)\",\n lgLight:\n \"0 4px 8px oklch(0.13 0.008 35 / 0.10), 0 24px 56px oklch(0.13 0.008 35 / 0.14)\",\n },\n motion: {\n /** Material easing — standard. Most UI transitions. */\n easeStandard: \"cubic-bezier(0.2, 0.0, 0.0, 1.0)\",\n /** Material easing — emphasized. Bigger surface motions. */\n easeEmphasized: \"cubic-bezier(0.05, 0.7, 0.1, 1.0)\",\n /** Quick interactions — hover, focus. */\n fast: \"160ms\",\n /** Standard — dialogs, surface moves. */\n normal: \"280ms\",\n /** Used for big route / page transitions. */\n slow: \"400ms\",\n },\n /** Z-index scale. Use these names, never raw numbers. */\n z: {\n base: 0,\n raised: 10,\n sticky: 30,\n /** HubHeader sits here. */\n header: 40,\n overlay: 50,\n modal: 60,\n toast: 70,\n },\n /** Component-specific dimensions. */\n size: {\n /** HubHeader height. Tools should leave this much top padding. */\n headerHeight: \"56px\",\n },\n} as const;\n\n/* ─── Exports ─────────────────────────────────────────────────────────────── */\n\n/**\n * Tokens for the **dark** theme (default). For programmatic use; UI\n * components should reference the CSS variables in styles.css which\n * automatically swap to the light palette when `data-theme=\"light\"`.\n */\nexport const darkTokens = {\n color: darkPalette,\n ...shared,\n} as const;\n\n/** Tokens for the **light** theme. */\nexport const lightTokens = {\n color: lightPalette,\n ...shared,\n} as const;\n\n/**\n * Default `tokens` export — dark palette. Kept for backwards\n * compatibility with v0.x callers that did `tokens.color.bg`. The shape\n * is unchanged; only color values have shifted from cool to warm.\n */\nexport const tokens = darkTokens;\n\nexport type DesignTokens = typeof tokens;\n\n/** Names for theming. Use to coerce stringly-typed data into the union. */\nexport type ThemeName = \"dark\" | \"light\";\n","import { tokens } from \"./tokens\";\n\n/**\n * Tailwind preset for `@openkeyai/ui` consumers.\n *\n * Drop into a tool's `tailwind.config.ts`:\n *\n * import { hubTailwindPreset } from \"@openkeyai/ui/tailwind\";\n * export default {\n * presets: [hubTailwindPreset],\n * content: [...],\n * } satisfies Config;\n *\n * The preset extends Tailwind's theme with the hub's tokens. It does NOT\n * override Tailwind's defaults — tools can still use the full standard\n * scale alongside the hub additions. Hub-flavoured names are prefixed with\n * `okai-` to avoid colliding with Tailwind's own colour names.\n *\n * We intentionally don't `require(\"tailwindcss\")` here — `tailwind` is a\n * peer concern of the consumer's stack and isn't a dep of this package.\n */\nexport const hubTailwindPreset = {\n theme: {\n extend: {\n colors: {\n \"okai-bg\": tokens.color.bg,\n \"okai-surface\": tokens.color.surface,\n \"okai-surface-1\": tokens.color.surface1,\n \"okai-surface-2\": tokens.color.surface2,\n \"okai-surface-3\": tokens.color.surface3,\n \"okai-surface-4\": tokens.color.surface4,\n \"okai-surface-raised\": tokens.color.surfaceRaised,\n \"okai-foreground\": tokens.color.foreground,\n \"okai-foreground-muted\": tokens.color.foregroundMuted,\n \"okai-foreground-subtle\": tokens.color.foregroundSubtle,\n \"okai-border\": tokens.color.border,\n \"okai-border-strong\": tokens.color.borderStrong,\n \"okai-accent\": tokens.color.accent,\n \"okai-accent-bright\": tokens.color.accentBright,\n \"okai-accent-container\": tokens.color.accentContainer,\n \"okai-on-accent\": tokens.color.onAccent,\n \"okai-on-accent-container\": tokens.color.onAccentContainer,\n \"okai-destructive\": tokens.color.destructive,\n \"okai-success\": tokens.color.success,\n \"okai-warning\": tokens.color.warning,\n },\n borderRadius: {\n \"okai-xs\": tokens.radius.xs,\n \"okai-sm\": tokens.radius.sm,\n \"okai-md\": tokens.radius.md,\n \"okai-lg\": tokens.radius.lg,\n \"okai-xl\": tokens.radius.xl,\n \"okai-2xl\": tokens.radius[\"2xl\"],\n },\n fontFamily: {\n \"okai-sans\": tokens.font.sans.split(\",\").map((s) => s.trim()),\n \"okai-mono\": tokens.font.mono.split(\",\").map((s) => s.trim()),\n \"okai-display\": tokens.font.display.split(\",\").map((s) => s.trim()),\n },\n fontSize: {\n \"okai-xs\": tokens.fontSize.xs,\n \"okai-sm\": tokens.fontSize.sm,\n \"okai-base\": tokens.fontSize.base,\n \"okai-md\": tokens.fontSize.md,\n \"okai-lg\": tokens.fontSize.lg,\n \"okai-xl\": tokens.fontSize.xl,\n \"okai-2xl\": tokens.fontSize[\"2xl\"],\n \"okai-3xl\": tokens.fontSize[\"3xl\"],\n \"okai-4xl\": tokens.fontSize[\"4xl\"],\n \"okai-display\": tokens.fontSize.display,\n },\n boxShadow: {\n \"okai-sm\": tokens.shadow.sm,\n \"okai-md\": tokens.shadow.md,\n \"okai-lg\": tokens.shadow.lg,\n },\n transitionTimingFunction: {\n \"okai-ease\": tokens.motion.easeStandard,\n \"okai-ease-emphasized\": tokens.motion.easeEmphasized,\n },\n transitionDuration: {\n \"okai-fast\": tokens.motion.fast.replace(\"ms\", \"\"),\n \"okai-normal\": tokens.motion.normal.replace(\"ms\", \"\"),\n \"okai-slow\": tokens.motion.slow.replace(\"ms\", \"\"),\n },\n zIndex: {\n \"okai-raised\": String(tokens.z.raised),\n \"okai-sticky\": String(tokens.z.sticky),\n \"okai-header\": String(tokens.z.header),\n \"okai-overlay\": String(tokens.z.overlay),\n \"okai-modal\": String(tokens.z.modal),\n \"okai-toast\": String(tokens.z.toast),\n },\n spacing: {\n \"okai-header\": tokens.size.headerHeight,\n },\n },\n },\n} as const;\n\nexport type HubTailwindPreset = typeof hubTailwindPreset;\n\n// Default export so it can also be consumed via\n// `import preset from \"@openkeyai/ui/tailwind\"`.\nexport default hubTailwindPreset;\n"]}
|
package/dist/tailwind.d.cts
CHANGED
|
@@ -21,27 +21,39 @@ declare const hubTailwindPreset: {
|
|
|
21
21
|
readonly theme: {
|
|
22
22
|
readonly extend: {
|
|
23
23
|
readonly colors: {
|
|
24
|
-
readonly "okai-bg": "
|
|
25
|
-
readonly "okai-surface": "
|
|
26
|
-
readonly "okai-surface-
|
|
27
|
-
readonly "okai-
|
|
28
|
-
readonly "okai-
|
|
29
|
-
readonly "okai-
|
|
30
|
-
readonly "okai-
|
|
31
|
-
readonly "okai-
|
|
32
|
-
readonly "okai-
|
|
33
|
-
readonly "okai-
|
|
24
|
+
readonly "okai-bg": "oklch(0.13 0.008 35)";
|
|
25
|
+
readonly "okai-surface": "oklch(0.17 0.010 35)";
|
|
26
|
+
readonly "okai-surface-1": "oklch(0.17 0.010 35)";
|
|
27
|
+
readonly "okai-surface-2": "oklch(0.21 0.012 35)";
|
|
28
|
+
readonly "okai-surface-3": "oklch(0.25 0.014 35)";
|
|
29
|
+
readonly "okai-surface-4": "oklch(0.29 0.016 35)";
|
|
30
|
+
readonly "okai-surface-raised": "oklch(0.21 0.012 35)";
|
|
31
|
+
readonly "okai-foreground": "oklch(0.96 0.005 35)";
|
|
32
|
+
readonly "okai-foreground-muted": "oklch(0.74 0.008 35)";
|
|
33
|
+
readonly "okai-foreground-subtle": "oklch(0.58 0.010 35)";
|
|
34
|
+
readonly "okai-border": "oklch(1 0 0 / 0.08)";
|
|
35
|
+
readonly "okai-border-strong": "oklch(1 0 0 / 0.14)";
|
|
36
|
+
readonly "okai-accent": "oklch(0.76 0.17 35)";
|
|
37
|
+
readonly "okai-accent-bright": "oklch(0.82 0.17 35)";
|
|
38
|
+
readonly "okai-accent-container": "oklch(0.30 0.13 28 / 0.25)";
|
|
39
|
+
readonly "okai-on-accent": "oklch(0.13 0.008 35)";
|
|
40
|
+
readonly "okai-on-accent-container": "oklch(0.88 0.085 35)";
|
|
41
|
+
readonly "okai-destructive": "oklch(0.74 0.18 28)";
|
|
42
|
+
readonly "okai-success": "oklch(0.84 0.08 150)";
|
|
43
|
+
readonly "okai-warning": "oklch(0.88 0.12 80)";
|
|
34
44
|
};
|
|
35
45
|
readonly borderRadius: {
|
|
36
|
-
readonly "okai-
|
|
37
|
-
readonly "okai-
|
|
38
|
-
readonly "okai-
|
|
39
|
-
readonly "okai-
|
|
40
|
-
readonly "okai-
|
|
46
|
+
readonly "okai-xs": "6px";
|
|
47
|
+
readonly "okai-sm": "10px";
|
|
48
|
+
readonly "okai-md": "14px";
|
|
49
|
+
readonly "okai-lg": "20px";
|
|
50
|
+
readonly "okai-xl": "28px";
|
|
51
|
+
readonly "okai-2xl": "36px";
|
|
41
52
|
};
|
|
42
53
|
readonly fontFamily: {
|
|
43
54
|
readonly "okai-sans": string[];
|
|
44
55
|
readonly "okai-mono": string[];
|
|
56
|
+
readonly "okai-display": string[];
|
|
45
57
|
};
|
|
46
58
|
readonly fontSize: {
|
|
47
59
|
readonly "okai-xs": "11px";
|
|
@@ -50,14 +62,19 @@ declare const hubTailwindPreset: {
|
|
|
50
62
|
readonly "okai-md": "16px";
|
|
51
63
|
readonly "okai-lg": "18px";
|
|
52
64
|
readonly "okai-xl": "22px";
|
|
65
|
+
readonly "okai-2xl": "28px";
|
|
66
|
+
readonly "okai-3xl": "36px";
|
|
67
|
+
readonly "okai-4xl": "48px";
|
|
68
|
+
readonly "okai-display": "60px";
|
|
53
69
|
};
|
|
54
70
|
readonly boxShadow: {
|
|
55
|
-
readonly "okai-sm": "0 1px
|
|
56
|
-
readonly "okai-md": "0
|
|
57
|
-
readonly "okai-lg": "0
|
|
71
|
+
readonly "okai-sm": "0 1px 0 oklch(1 0 0 / 0.04), 0 4px 12px oklch(0 0 0 / 0.20)";
|
|
72
|
+
readonly "okai-md": "0 1px 0 oklch(1 0 0 / 0.05), 0 12px 28px oklch(0 0 0 / 0.30)";
|
|
73
|
+
readonly "okai-lg": "0 1px 0 oklch(1 0 0 / 0.06), 0 24px 56px oklch(0 0 0 / 0.38)";
|
|
58
74
|
};
|
|
59
75
|
readonly transitionTimingFunction: {
|
|
60
|
-
readonly "okai-ease": "cubic-bezier(0.
|
|
76
|
+
readonly "okai-ease": "cubic-bezier(0.2, 0.0, 0.0, 1.0)";
|
|
77
|
+
readonly "okai-ease-emphasized": "cubic-bezier(0.05, 0.7, 0.1, 1.0)";
|
|
61
78
|
};
|
|
62
79
|
readonly transitionDuration: {
|
|
63
80
|
readonly "okai-fast": string;
|
package/dist/tailwind.d.ts
CHANGED
|
@@ -21,27 +21,39 @@ declare const hubTailwindPreset: {
|
|
|
21
21
|
readonly theme: {
|
|
22
22
|
readonly extend: {
|
|
23
23
|
readonly colors: {
|
|
24
|
-
readonly "okai-bg": "
|
|
25
|
-
readonly "okai-surface": "
|
|
26
|
-
readonly "okai-surface-
|
|
27
|
-
readonly "okai-
|
|
28
|
-
readonly "okai-
|
|
29
|
-
readonly "okai-
|
|
30
|
-
readonly "okai-
|
|
31
|
-
readonly "okai-
|
|
32
|
-
readonly "okai-
|
|
33
|
-
readonly "okai-
|
|
24
|
+
readonly "okai-bg": "oklch(0.13 0.008 35)";
|
|
25
|
+
readonly "okai-surface": "oklch(0.17 0.010 35)";
|
|
26
|
+
readonly "okai-surface-1": "oklch(0.17 0.010 35)";
|
|
27
|
+
readonly "okai-surface-2": "oklch(0.21 0.012 35)";
|
|
28
|
+
readonly "okai-surface-3": "oklch(0.25 0.014 35)";
|
|
29
|
+
readonly "okai-surface-4": "oklch(0.29 0.016 35)";
|
|
30
|
+
readonly "okai-surface-raised": "oklch(0.21 0.012 35)";
|
|
31
|
+
readonly "okai-foreground": "oklch(0.96 0.005 35)";
|
|
32
|
+
readonly "okai-foreground-muted": "oklch(0.74 0.008 35)";
|
|
33
|
+
readonly "okai-foreground-subtle": "oklch(0.58 0.010 35)";
|
|
34
|
+
readonly "okai-border": "oklch(1 0 0 / 0.08)";
|
|
35
|
+
readonly "okai-border-strong": "oklch(1 0 0 / 0.14)";
|
|
36
|
+
readonly "okai-accent": "oklch(0.76 0.17 35)";
|
|
37
|
+
readonly "okai-accent-bright": "oklch(0.82 0.17 35)";
|
|
38
|
+
readonly "okai-accent-container": "oklch(0.30 0.13 28 / 0.25)";
|
|
39
|
+
readonly "okai-on-accent": "oklch(0.13 0.008 35)";
|
|
40
|
+
readonly "okai-on-accent-container": "oklch(0.88 0.085 35)";
|
|
41
|
+
readonly "okai-destructive": "oklch(0.74 0.18 28)";
|
|
42
|
+
readonly "okai-success": "oklch(0.84 0.08 150)";
|
|
43
|
+
readonly "okai-warning": "oklch(0.88 0.12 80)";
|
|
34
44
|
};
|
|
35
45
|
readonly borderRadius: {
|
|
36
|
-
readonly "okai-
|
|
37
|
-
readonly "okai-
|
|
38
|
-
readonly "okai-
|
|
39
|
-
readonly "okai-
|
|
40
|
-
readonly "okai-
|
|
46
|
+
readonly "okai-xs": "6px";
|
|
47
|
+
readonly "okai-sm": "10px";
|
|
48
|
+
readonly "okai-md": "14px";
|
|
49
|
+
readonly "okai-lg": "20px";
|
|
50
|
+
readonly "okai-xl": "28px";
|
|
51
|
+
readonly "okai-2xl": "36px";
|
|
41
52
|
};
|
|
42
53
|
readonly fontFamily: {
|
|
43
54
|
readonly "okai-sans": string[];
|
|
44
55
|
readonly "okai-mono": string[];
|
|
56
|
+
readonly "okai-display": string[];
|
|
45
57
|
};
|
|
46
58
|
readonly fontSize: {
|
|
47
59
|
readonly "okai-xs": "11px";
|
|
@@ -50,14 +62,19 @@ declare const hubTailwindPreset: {
|
|
|
50
62
|
readonly "okai-md": "16px";
|
|
51
63
|
readonly "okai-lg": "18px";
|
|
52
64
|
readonly "okai-xl": "22px";
|
|
65
|
+
readonly "okai-2xl": "28px";
|
|
66
|
+
readonly "okai-3xl": "36px";
|
|
67
|
+
readonly "okai-4xl": "48px";
|
|
68
|
+
readonly "okai-display": "60px";
|
|
53
69
|
};
|
|
54
70
|
readonly boxShadow: {
|
|
55
|
-
readonly "okai-sm": "0 1px
|
|
56
|
-
readonly "okai-md": "0
|
|
57
|
-
readonly "okai-lg": "0
|
|
71
|
+
readonly "okai-sm": "0 1px 0 oklch(1 0 0 / 0.04), 0 4px 12px oklch(0 0 0 / 0.20)";
|
|
72
|
+
readonly "okai-md": "0 1px 0 oklch(1 0 0 / 0.05), 0 12px 28px oklch(0 0 0 / 0.30)";
|
|
73
|
+
readonly "okai-lg": "0 1px 0 oklch(1 0 0 / 0.06), 0 24px 56px oklch(0 0 0 / 0.38)";
|
|
58
74
|
};
|
|
59
75
|
readonly transitionTimingFunction: {
|
|
60
|
-
readonly "okai-ease": "cubic-bezier(0.
|
|
76
|
+
readonly "okai-ease": "cubic-bezier(0.2, 0.0, 0.0, 1.0)";
|
|
77
|
+
readonly "okai-ease-emphasized": "cubic-bezier(0.05, 0.7, 0.1, 1.0)";
|
|
61
78
|
};
|
|
62
79
|
readonly transitionDuration: {
|
|
63
80
|
readonly "okai-fast": string;
|