@cooud-ui/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/LICENSE +21 -0
- package/README.md +115 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +2 -0
- package/dist/tokens.d.ts +71 -0
- package/dist/tokens.js +219 -0
- package/package.json +64 -0
- package/preset/index.d.ts +10 -0
- package/preset/index.js +76 -0
- package/styles/tokens.css +434 -0
- package/styles/tokens.json +208 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Cooud
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
# @cooud-ui/tokens
|
|
2
|
+
|
|
3
|
+
The Cooud design tokens — the single source of truth for color, typography,
|
|
4
|
+
elevation, and shape across the Cooud UI system.
|
|
5
|
+
|
|
6
|
+
Tokens are authored once in TypeScript and compiled to two consumable artifacts:
|
|
7
|
+
a **CSS variable bridge** for Tailwind v4 and a **preset** for Tailwind v3. Every
|
|
8
|
+
`@cooud-ui/ui` component renders against these tokens through semantic utilities
|
|
9
|
+
(`bg-primary`, `text-fg-secondary`, `rounded-lg`, `shadow-glow`), so a single
|
|
10
|
+
token change re-themes the whole library — at build time or at runtime.
|
|
11
|
+
|
|
12
|
+
You need this package if you use `@cooud-ui/ui` or `@cooud-ui/theme`, or if you want the
|
|
13
|
+
Cooud color/typography/elevation scale in your own components.
|
|
14
|
+
|
|
15
|
+
## Install
|
|
16
|
+
|
|
17
|
+
> Published on npm under the `@cooud` scope (available once `v0.1.0` is released).
|
|
18
|
+
|
|
19
|
+
```sh
|
|
20
|
+
# npm
|
|
21
|
+
npm i @cooud-ui/tokens
|
|
22
|
+
# pnpm
|
|
23
|
+
pnpm add @cooud-ui/tokens
|
|
24
|
+
# bun
|
|
25
|
+
bun add @cooud-ui/tokens
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
No peer dependencies — the package is framework-agnostic.
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
The token system has two layers: a **runtime layer** of `--cooud-*` CSS custom
|
|
33
|
+
properties (one block per theme/mode), and a **bridge** that maps Tailwind
|
|
34
|
+
utilities onto those variables. Wire it up the way your Tailwind version expects.
|
|
35
|
+
|
|
36
|
+
### Tailwind v4 (CSS-first)
|
|
37
|
+
|
|
38
|
+
Import the stylesheet after Tailwind in your global CSS. This brings in the
|
|
39
|
+
default **Aurora** theme tokens and the `@theme inline` bridge.
|
|
40
|
+
|
|
41
|
+
```css
|
|
42
|
+
@import "tailwindcss";
|
|
43
|
+
@import "@cooud-ui/tokens/styles.css";
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Tailwind v3 (config preset)
|
|
47
|
+
|
|
48
|
+
Import the preset in your config. It maps the same semantic utilities onto the
|
|
49
|
+
`--cooud-*` variables.
|
|
50
|
+
|
|
51
|
+
```js
|
|
52
|
+
// tailwind.config.js
|
|
53
|
+
import cooudPreset from "@cooud-ui/tokens/preset";
|
|
54
|
+
|
|
55
|
+
/** @type {import('tailwindcss').Config} */
|
|
56
|
+
export default {
|
|
57
|
+
presets: [cooudPreset],
|
|
58
|
+
content: ["./src/**/*.{ts,tsx}"],
|
|
59
|
+
};
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
> On v3, do **not** import `@cooud-ui/tokens/styles.css` — it uses Tailwind v4-only
|
|
63
|
+
> syntax. The `--cooud-*` variables are instead injected at runtime by
|
|
64
|
+
> `<CooudUIProvider>` from `@cooud-ui/theme`; the preset connects the utilities to
|
|
65
|
+
> those variables.
|
|
66
|
+
|
|
67
|
+
### Programmatic access (TypeScript)
|
|
68
|
+
|
|
69
|
+
The TS export is the canonical token data, used by tooling and by `@cooud-ui/theme`
|
|
70
|
+
to apply runtime overrides. Components never read these objects directly.
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
import { themes, tokensToCssVars, serializeOverrides } from "@cooud-ui/tokens";
|
|
74
|
+
import type { ThemeName, Mode, ThemeTokens, ThemeOverrides } from "@cooud-ui/tokens";
|
|
75
|
+
|
|
76
|
+
themes.aurora.dark.primary; // "oklch(0.685 0.169 237.3)"
|
|
77
|
+
|
|
78
|
+
// Turn a (partial) token set into a { "--cooud-*": value } style object:
|
|
79
|
+
const style = tokensToCssVars({ radius: "20px", primary: "#7c3aed" });
|
|
80
|
+
|
|
81
|
+
// Or render overrides as a copy-pasteable CSS block:
|
|
82
|
+
serializeOverrides({ radius: "20px" }, ":root");
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Exports: `themes`, `themeNames`, `modes`, `defaultTheme`, `defaultMode`,
|
|
86
|
+
`cssVarMap`, `tokensToCssVars`, `serializeOverrides`, and the types `ThemeName`,
|
|
87
|
+
`Mode`, `ThemeTokens`, `ThemeOverrides`. The raw token map is also published as
|
|
88
|
+
`@cooud-ui/tokens/tokens.json`.
|
|
89
|
+
|
|
90
|
+
## The token system
|
|
91
|
+
|
|
92
|
+
- **Color** is authored in [OKLCH](https://oklch.com/) for perceptually even
|
|
93
|
+
ramps and predictable contrast — brand (`primary`, `accent`), surfaces
|
|
94
|
+
(`surface-base` → `surface-floating`), foreground (`fg` → `fg-muted`), lines
|
|
95
|
+
(`border`, `ring`), semantic (`success`, `warning`, `error`, `info`), and a
|
|
96
|
+
five-color chart palette.
|
|
97
|
+
- **Typography**, **shape** (`radius`), and **elevation** (`shadow-xs` →
|
|
98
|
+
`shadow-glow`) are tokens too, so they move with the theme.
|
|
99
|
+
- Two built-in themes — **Aurora** (the default; premium sky/cyan) and
|
|
100
|
+
**Neutral** — each with `light` and `dark` modes.
|
|
101
|
+
|
|
102
|
+
The generated `styles/tokens.css` and `preset/` are checked in. After editing
|
|
103
|
+
`src/tokens.ts`, regenerate them with `tokens:generate`; CI verifies they are in
|
|
104
|
+
sync with `tokens:check`.
|
|
105
|
+
|
|
106
|
+
## Related packages
|
|
107
|
+
|
|
108
|
+
- [`@cooud-ui/theme`](../theme) — `<CooudUIProvider>` + `useTheme`; applies these
|
|
109
|
+
tokens at runtime and powers per-scope overrides.
|
|
110
|
+
- [`@cooud-ui/ui`](../ui) — the component library that renders against these tokens.
|
|
111
|
+
- See the [docs site](../../apps/www) for the live theme builder and previews.
|
|
112
|
+
|
|
113
|
+
## License
|
|
114
|
+
|
|
115
|
+
MIT
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
package/dist/tokens.d.ts
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Cooud design tokens — single source of truth.
|
|
3
|
+
*
|
|
4
|
+
* These TS objects mirror the CSS variables defined in `styles/tokens.css`.
|
|
5
|
+
* They are consumed by the ThemeBuilder (to generate override snippets) and by
|
|
6
|
+
* `@cooud-ui/theme` (to apply runtime overrides). Components NEVER read these
|
|
7
|
+
* directly — they use semantic Tailwind utilities that resolve to the CSS vars.
|
|
8
|
+
*
|
|
9
|
+
* Values are cherry-picked from the premium Aurora language (cooud-workforce /
|
|
10
|
+
* cooud-exchange) and the Neutral language (dashboard / refund / status).
|
|
11
|
+
*/
|
|
12
|
+
export type ThemeName = "aurora" | "neutral";
|
|
13
|
+
export type Mode = "light" | "dark";
|
|
14
|
+
export interface ThemeTokens {
|
|
15
|
+
primary: string;
|
|
16
|
+
primaryForeground: string;
|
|
17
|
+
accent: string;
|
|
18
|
+
accentForeground: string;
|
|
19
|
+
surfaceBase: string;
|
|
20
|
+
surfaceInset: string;
|
|
21
|
+
surfaceRaised: string;
|
|
22
|
+
surfaceOverlay: string;
|
|
23
|
+
surfaceElevated: string;
|
|
24
|
+
surfaceFloating: string;
|
|
25
|
+
fg: string;
|
|
26
|
+
fgSecondary: string;
|
|
27
|
+
fgTertiary: string;
|
|
28
|
+
fgMuted: string;
|
|
29
|
+
fgInverse: string;
|
|
30
|
+
border: string;
|
|
31
|
+
borderStrong: string;
|
|
32
|
+
borderSoft: string;
|
|
33
|
+
ring: string;
|
|
34
|
+
success: string;
|
|
35
|
+
warning: string;
|
|
36
|
+
error: string;
|
|
37
|
+
info: string;
|
|
38
|
+
radius: string;
|
|
39
|
+
fontSans: string;
|
|
40
|
+
fontDisplay: string;
|
|
41
|
+
fontMono: string;
|
|
42
|
+
chart1: string;
|
|
43
|
+
chart2: string;
|
|
44
|
+
chart3: string;
|
|
45
|
+
chart4: string;
|
|
46
|
+
chart5: string;
|
|
47
|
+
shadowXs: string;
|
|
48
|
+
shadowSm: string;
|
|
49
|
+
shadowMd: string;
|
|
50
|
+
shadowLg: string;
|
|
51
|
+
shadowGlow: string;
|
|
52
|
+
}
|
|
53
|
+
/** Subset of tokens a consumer can override per-scope at runtime. */
|
|
54
|
+
export type ThemeOverrides = Partial<ThemeTokens>;
|
|
55
|
+
export declare const themes: Record<ThemeName, Record<Mode, ThemeTokens>>;
|
|
56
|
+
export declare const themeNames: ThemeName[];
|
|
57
|
+
export declare const modes: Mode[];
|
|
58
|
+
export declare const defaultTheme: ThemeName;
|
|
59
|
+
export declare const defaultMode: Mode;
|
|
60
|
+
/** Maps a ThemeTokens key to its runtime CSS custom property name. */
|
|
61
|
+
export declare const cssVarMap: Record<keyof ThemeTokens, string>;
|
|
62
|
+
/** Convert a (partial) token set into a `{ "--cooud-*": value }` style object. */
|
|
63
|
+
export declare function tokensToCssVars(tokens: ThemeOverrides): Record<string, string>;
|
|
64
|
+
/** Render overrides as a copy-pasteable CSS block (used by the ThemeBuilder). */
|
|
65
|
+
export declare function serializeOverrides(tokens: ThemeOverrides, selector?: string): string;
|
|
66
|
+
export declare const fontStacks: {
|
|
67
|
+
readonly sans: "\"SF Pro Text\", Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif";
|
|
68
|
+
readonly display: "\"SF Pro Display\", Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif";
|
|
69
|
+
readonly mono: "\"SF Mono\", \"JetBrains Mono\", ui-monospace, Menlo, Consolas, monospace";
|
|
70
|
+
};
|
|
71
|
+
//# sourceMappingURL=tokens.d.ts.map
|
package/dist/tokens.js
ADDED
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Cooud design tokens — single source of truth.
|
|
3
|
+
*
|
|
4
|
+
* These TS objects mirror the CSS variables defined in `styles/tokens.css`.
|
|
5
|
+
* They are consumed by the ThemeBuilder (to generate override snippets) and by
|
|
6
|
+
* `@cooud-ui/theme` (to apply runtime overrides). Components NEVER read these
|
|
7
|
+
* directly — they use semantic Tailwind utilities that resolve to the CSS vars.
|
|
8
|
+
*
|
|
9
|
+
* Values are cherry-picked from the premium Aurora language (cooud-workforce /
|
|
10
|
+
* cooud-exchange) and the Neutral language (dashboard / refund / status).
|
|
11
|
+
*/
|
|
12
|
+
const fonts = {
|
|
13
|
+
sans: '"SF Pro Text", Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
|
|
14
|
+
display: '"SF Pro Display", Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
|
|
15
|
+
mono: '"SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace',
|
|
16
|
+
};
|
|
17
|
+
const auroraDark = {
|
|
18
|
+
primary: "oklch(0.685 0.169 237.3)", // sky-500 #0ea5e9
|
|
19
|
+
primaryForeground: "oklch(0.145 0.005 285.8)",
|
|
20
|
+
accent: "oklch(0.715 0.143 215.2)", // cyan-500 #06b6d4
|
|
21
|
+
accentForeground: "oklch(0.145 0 0)",
|
|
22
|
+
surfaceBase: "oklch(0.145 0.005 285.8)", // #09090b
|
|
23
|
+
surfaceInset: "oklch(0.165 0.005 285.8)", // #0c0c0e
|
|
24
|
+
surfaceRaised: "oklch(0.195 0.005 285.8)", // #111113
|
|
25
|
+
surfaceOverlay: "oklch(0.235 0.006 285.9)", // #18181b
|
|
26
|
+
surfaceElevated: "oklch(0.27 0.006 286)", // #1f1f23
|
|
27
|
+
// Floating panels (popover, dropdown, hover-card, navigation viewport,
|
|
28
|
+
// morphing-popover) sit DARK and rely on border + shadow for separation —
|
|
29
|
+
// kept below `overlay` so item hover (surface-overlay) reads as a lighter
|
|
30
|
+
// highlight on a near-black surface rather than a flat mid-grey panel.
|
|
31
|
+
surfaceFloating: "oklch(0.2 0.006 286)", // #121216
|
|
32
|
+
fg: "oklch(0.985 0.001 106.4)", // #fafaf9
|
|
33
|
+
fgSecondary: "oklch(0.705 0.015 286)", // #a1a1aa
|
|
34
|
+
fgTertiary: "oklch(0.62 0.014 286)", // #83838c — WCAG AA: >=4.5:1 over dark surfaces (base/inset/raised/overlay)
|
|
35
|
+
fgMuted: "oklch(0.442 0.013 286)", // #52525b
|
|
36
|
+
fgInverse: "oklch(0.235 0.006 285.9)",
|
|
37
|
+
border: "oklch(1 0 0 / 0.1)",
|
|
38
|
+
borderStrong: "oklch(1 0 0 / 0.14)",
|
|
39
|
+
borderSoft: "oklch(1 0 0 / 0.06)",
|
|
40
|
+
ring: "oklch(0.685 0.169 237.3)",
|
|
41
|
+
success: "oklch(0.715 0.155 162.5)", // emerald #10b981
|
|
42
|
+
warning: "oklch(0.769 0.166 70.08)", // amber #f59e0b
|
|
43
|
+
error: "oklch(0.645 0.222 16.44)", // rose #f43f5e
|
|
44
|
+
info: "oklch(0.715 0.143 215.2)", // cyan #06b6d4
|
|
45
|
+
radius: "14px",
|
|
46
|
+
fontSans: fonts.sans,
|
|
47
|
+
fontDisplay: fonts.display,
|
|
48
|
+
fontMono: fonts.mono,
|
|
49
|
+
chart1: "oklch(0.685 0.169 237.3)",
|
|
50
|
+
chart2: "oklch(0.715 0.143 215.2)",
|
|
51
|
+
chart3: "oklch(0.62 0.21 292)",
|
|
52
|
+
chart4: "oklch(0.7 0.15 162)",
|
|
53
|
+
chart5: "oklch(0.78 0.16 70)",
|
|
54
|
+
shadowXs: "0 1px 2px rgba(0,0,0,0.20)",
|
|
55
|
+
shadowSm: "0 2px 4px rgba(0,0,0,0.22)",
|
|
56
|
+
shadowMd: "0 6px 12px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.16)",
|
|
57
|
+
shadowLg: "0 12px 24px rgba(0,0,0,0.28), 0 4px 8px rgba(0,0,0,0.18)",
|
|
58
|
+
shadowGlow: "0 12px 32px rgba(14,165,233,0.32)",
|
|
59
|
+
};
|
|
60
|
+
const auroraLight = {
|
|
61
|
+
...auroraDark,
|
|
62
|
+
primaryForeground: "oklch(0.145 0.005 285.8)",
|
|
63
|
+
accentForeground: "oklch(0.145 0 0)",
|
|
64
|
+
surfaceBase: "oklch(1 0 0)", // #ffffff
|
|
65
|
+
surfaceInset: "oklch(0.985 0 0)", // #fafafa
|
|
66
|
+
surfaceRaised: "oklch(1 0 0)",
|
|
67
|
+
surfaceOverlay: "oklch(0.967 0.001 286)", // #f4f4f5
|
|
68
|
+
surfaceElevated: "oklch(1 0 0)",
|
|
69
|
+
surfaceFloating: "oklch(1 0 0)",
|
|
70
|
+
fg: "oklch(0.235 0.006 285.9)", // #18181b
|
|
71
|
+
fgSecondary: "oklch(0.442 0.013 286)", // #52525b
|
|
72
|
+
fgTertiary: "oklch(0.552 0.014 286)",
|
|
73
|
+
fgMuted: "oklch(0.705 0.015 286)",
|
|
74
|
+
fgInverse: "oklch(0.985 0.001 106.4)",
|
|
75
|
+
border: "oklch(0 0 0 / 0.1)",
|
|
76
|
+
borderStrong: "oklch(0 0 0 / 0.14)",
|
|
77
|
+
borderSoft: "oklch(0 0 0 / 0.06)",
|
|
78
|
+
shadowXs: "0 1px 2px rgba(16,24,40,0.06)",
|
|
79
|
+
shadowSm: "0 2px 4px rgba(16,24,40,0.08)",
|
|
80
|
+
shadowMd: "0 6px 12px rgba(16,24,40,0.10), 0 2px 4px rgba(16,24,40,0.06)",
|
|
81
|
+
shadowLg: "0 12px 24px rgba(16,24,40,0.12), 0 4px 8px rgba(16,24,40,0.08)",
|
|
82
|
+
shadowGlow: "0 12px 32px rgba(14,165,233,0.22)",
|
|
83
|
+
success: "oklch(0.52 0.15 162)",
|
|
84
|
+
warning: "oklch(0.52 0.12 70)",
|
|
85
|
+
info: "oklch(0.52 0.16 235)",
|
|
86
|
+
error: "oklch(0.55 0.2 25)",
|
|
87
|
+
};
|
|
88
|
+
const neutralLight = {
|
|
89
|
+
primary: "oklch(0.205 0 0)",
|
|
90
|
+
primaryForeground: "oklch(0.985 0 0)",
|
|
91
|
+
accent: "oklch(0.96 0 0)",
|
|
92
|
+
accentForeground: "oklch(0.205 0 0)",
|
|
93
|
+
surfaceBase: "oklch(0.985 0 0)",
|
|
94
|
+
surfaceInset: "oklch(0.97 0 0)",
|
|
95
|
+
surfaceRaised: "oklch(1 0 0)",
|
|
96
|
+
surfaceOverlay: "oklch(0.96 0 0)",
|
|
97
|
+
surfaceElevated: "oklch(1 0 0)",
|
|
98
|
+
surfaceFloating: "oklch(1 0 0)",
|
|
99
|
+
fg: "oklch(0.145 0 0)",
|
|
100
|
+
fgSecondary: "oklch(0.43 0 0)",
|
|
101
|
+
fgTertiary: "oklch(0.556 0 0)",
|
|
102
|
+
fgMuted: "oklch(0.705 0 0)",
|
|
103
|
+
fgInverse: "oklch(0.985 0 0)",
|
|
104
|
+
border: "oklch(0.915 0 0)",
|
|
105
|
+
borderStrong: "oklch(0.86 0 0)",
|
|
106
|
+
borderSoft: "oklch(0.94 0 0)",
|
|
107
|
+
ring: "oklch(0.705 0 0)",
|
|
108
|
+
success: "oklch(0.52 0.15 162)",
|
|
109
|
+
warning: "oklch(0.52 0.12 70)",
|
|
110
|
+
error: "oklch(0.55 0.2 25)",
|
|
111
|
+
info: "oklch(0.52 0.16 235)",
|
|
112
|
+
radius: "14px",
|
|
113
|
+
fontSans: fonts.sans,
|
|
114
|
+
fontDisplay: fonts.display,
|
|
115
|
+
fontMono: fonts.mono,
|
|
116
|
+
chart1: "oklch(0.3 0 0)",
|
|
117
|
+
chart2: "oklch(0.44 0 0)",
|
|
118
|
+
chart3: "oklch(0.58 0 0)",
|
|
119
|
+
chart4: "oklch(0.72 0 0)",
|
|
120
|
+
chart5: "oklch(0.85 0 0)",
|
|
121
|
+
shadowXs: "0 1px 2px rgba(16,24,40,0.05)",
|
|
122
|
+
shadowSm: "0 1px 3px rgba(16,24,40,0.08)",
|
|
123
|
+
shadowMd: "0 4px 8px rgba(16,24,40,0.08), 0 2px 4px rgba(16,24,40,0.04)",
|
|
124
|
+
shadowLg: "0 12px 24px rgba(16,24,40,0.10), 0 4px 8px rgba(16,24,40,0.06)",
|
|
125
|
+
shadowGlow: "0 0 0 4px oklch(0.705 0 0 / 0.18)",
|
|
126
|
+
};
|
|
127
|
+
const neutralDark = {
|
|
128
|
+
...neutralLight,
|
|
129
|
+
primary: "oklch(0.93 0 0)",
|
|
130
|
+
primaryForeground: "oklch(0.11 0 0)",
|
|
131
|
+
accent: "oklch(0.27 0 0)",
|
|
132
|
+
accentForeground: "oklch(0.93 0 0)",
|
|
133
|
+
surfaceBase: "oklch(0.11 0 0)",
|
|
134
|
+
surfaceInset: "oklch(0.13 0 0)",
|
|
135
|
+
surfaceRaised: "oklch(0.16 0 0)",
|
|
136
|
+
surfaceOverlay: "oklch(0.2 0 0)",
|
|
137
|
+
surfaceElevated: "oklch(0.23 0 0)",
|
|
138
|
+
surfaceFloating: "oklch(0.165 0 0)", // #121212 — dark floating panel (below overlay so item hover lifts)
|
|
139
|
+
fg: "oklch(0.93 0 0)",
|
|
140
|
+
fgSecondary: "oklch(0.7 0 0)",
|
|
141
|
+
fgTertiary: "oklch(0.62 0 0)",
|
|
142
|
+
fgMuted: "oklch(0.44 0 0)",
|
|
143
|
+
fgInverse: "oklch(0.11 0 0)",
|
|
144
|
+
border: "oklch(1 0 0 / 0.1)",
|
|
145
|
+
borderStrong: "oklch(1 0 0 / 0.16)",
|
|
146
|
+
borderSoft: "oklch(1 0 0 / 0.06)",
|
|
147
|
+
ring: "oklch(0.55 0 0)",
|
|
148
|
+
success: "oklch(0.715 0.155 162.5)",
|
|
149
|
+
warning: "oklch(0.769 0.166 70.08)",
|
|
150
|
+
info: "oklch(0.715 0.143 215.2)",
|
|
151
|
+
error: "oklch(0.704 0.191 22.216)",
|
|
152
|
+
shadowGlow: "0 0 0 4px oklch(0.6 0 0 / 0.3)",
|
|
153
|
+
};
|
|
154
|
+
export const themes = {
|
|
155
|
+
aurora: { light: auroraLight, dark: auroraDark },
|
|
156
|
+
neutral: { light: neutralLight, dark: neutralDark },
|
|
157
|
+
};
|
|
158
|
+
export const themeNames = ["aurora", "neutral"];
|
|
159
|
+
export const modes = ["light", "dark"];
|
|
160
|
+
export const defaultTheme = "aurora";
|
|
161
|
+
export const defaultMode = "dark";
|
|
162
|
+
/** Maps a ThemeTokens key to its runtime CSS custom property name. */
|
|
163
|
+
export const cssVarMap = {
|
|
164
|
+
primary: "--cooud-primary",
|
|
165
|
+
primaryForeground: "--cooud-primary-foreground",
|
|
166
|
+
accent: "--cooud-accent",
|
|
167
|
+
accentForeground: "--cooud-accent-foreground",
|
|
168
|
+
surfaceBase: "--cooud-surface-base",
|
|
169
|
+
surfaceInset: "--cooud-surface-inset",
|
|
170
|
+
surfaceRaised: "--cooud-surface-raised",
|
|
171
|
+
surfaceOverlay: "--cooud-surface-overlay",
|
|
172
|
+
surfaceElevated: "--cooud-surface-elevated",
|
|
173
|
+
surfaceFloating: "--cooud-surface-floating",
|
|
174
|
+
fg: "--cooud-fg",
|
|
175
|
+
fgSecondary: "--cooud-fg-secondary",
|
|
176
|
+
fgTertiary: "--cooud-fg-tertiary",
|
|
177
|
+
fgMuted: "--cooud-fg-muted",
|
|
178
|
+
fgInverse: "--cooud-fg-inverse",
|
|
179
|
+
border: "--cooud-border",
|
|
180
|
+
borderStrong: "--cooud-border-strong",
|
|
181
|
+
borderSoft: "--cooud-border-soft",
|
|
182
|
+
ring: "--cooud-ring",
|
|
183
|
+
success: "--cooud-success",
|
|
184
|
+
warning: "--cooud-warning",
|
|
185
|
+
error: "--cooud-error",
|
|
186
|
+
info: "--cooud-info",
|
|
187
|
+
radius: "--cooud-radius",
|
|
188
|
+
fontSans: "--cooud-font-sans",
|
|
189
|
+
fontDisplay: "--cooud-font-display",
|
|
190
|
+
fontMono: "--cooud-font-mono",
|
|
191
|
+
chart1: "--cooud-chart-1",
|
|
192
|
+
chart2: "--cooud-chart-2",
|
|
193
|
+
chart3: "--cooud-chart-3",
|
|
194
|
+
chart4: "--cooud-chart-4",
|
|
195
|
+
chart5: "--cooud-chart-5",
|
|
196
|
+
shadowXs: "--cooud-shadow-xs",
|
|
197
|
+
shadowSm: "--cooud-shadow-sm",
|
|
198
|
+
shadowMd: "--cooud-shadow-md",
|
|
199
|
+
shadowLg: "--cooud-shadow-lg",
|
|
200
|
+
shadowGlow: "--cooud-shadow-glow",
|
|
201
|
+
};
|
|
202
|
+
/** Convert a (partial) token set into a `{ "--cooud-*": value }` style object. */
|
|
203
|
+
export function tokensToCssVars(tokens) {
|
|
204
|
+
const out = {};
|
|
205
|
+
for (const key of Object.keys(tokens)) {
|
|
206
|
+
const value = tokens[key];
|
|
207
|
+
if (value != null)
|
|
208
|
+
out[cssVarMap[key]] = value;
|
|
209
|
+
}
|
|
210
|
+
return out;
|
|
211
|
+
}
|
|
212
|
+
/** Render overrides as a copy-pasteable CSS block (used by the ThemeBuilder). */
|
|
213
|
+
export function serializeOverrides(tokens, selector = ":root") {
|
|
214
|
+
const vars = tokensToCssVars(tokens);
|
|
215
|
+
const lines = Object.entries(vars).map(([k, v]) => ` ${k}: ${v};`);
|
|
216
|
+
return `${selector} {\n${lines.join("\n")}\n}`;
|
|
217
|
+
}
|
|
218
|
+
export const fontStacks = fonts;
|
|
219
|
+
//# sourceMappingURL=tokens.js.map
|
package/package.json
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@cooud-ui/tokens",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Cooud design tokens — source of truth (TS) + CSS variable bridge + Tailwind v4 preset.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": {
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"import": "./dist/index.js"
|
|
10
|
+
},
|
|
11
|
+
"./styles.css": "./styles/tokens.css",
|
|
12
|
+
"./tokens.json": "./styles/tokens.json",
|
|
13
|
+
"./preset": {
|
|
14
|
+
"types": "./preset/index.d.ts",
|
|
15
|
+
"import": "./preset/index.js"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
"main": "./dist/index.js",
|
|
19
|
+
"types": "./dist/index.d.ts",
|
|
20
|
+
"sideEffects": [
|
|
21
|
+
"./styles/tokens.css"
|
|
22
|
+
],
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"author": "Cooud",
|
|
25
|
+
"repository": {
|
|
26
|
+
"type": "git",
|
|
27
|
+
"url": "git+https://github.com/pedrogbraz/cooud-ui.git",
|
|
28
|
+
"directory": "packages/tokens"
|
|
29
|
+
},
|
|
30
|
+
"homepage": "https://github.com/pedrogbraz/cooud-ui#readme",
|
|
31
|
+
"bugs": {
|
|
32
|
+
"url": "https://github.com/pedrogbraz/cooud-ui/issues"
|
|
33
|
+
},
|
|
34
|
+
"keywords": [
|
|
35
|
+
"cooud",
|
|
36
|
+
"design-system",
|
|
37
|
+
"react",
|
|
38
|
+
"tailwind",
|
|
39
|
+
"ui",
|
|
40
|
+
"components"
|
|
41
|
+
],
|
|
42
|
+
"publishConfig": {
|
|
43
|
+
"access": "public"
|
|
44
|
+
},
|
|
45
|
+
"files": [
|
|
46
|
+
"dist",
|
|
47
|
+
"styles",
|
|
48
|
+
"preset",
|
|
49
|
+
"LICENSE",
|
|
50
|
+
"README.md",
|
|
51
|
+
"!dist/**/*.map",
|
|
52
|
+
"!preset/**/*.map"
|
|
53
|
+
],
|
|
54
|
+
"scripts": {
|
|
55
|
+
"tokens:generate": "bun run scripts/build-tokens.ts",
|
|
56
|
+
"tokens:check": "bun run scripts/build-tokens.ts --check",
|
|
57
|
+
"build": "bun run scripts/build-tokens.ts && tsc -p tsconfig.json",
|
|
58
|
+
"typecheck": "tsc -p tsconfig.json --noEmit",
|
|
59
|
+
"prepublishOnly": "bun run scripts/build-tokens.ts --check && tsc -p tsconfig.json"
|
|
60
|
+
},
|
|
61
|
+
"devDependencies": {
|
|
62
|
+
"typescript": "^5.9.3"
|
|
63
|
+
}
|
|
64
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
// GENERATED by packages/tokens/scripts/build-tokens.ts from src/tokens.ts — do not edit by hand.
|
|
2
|
+
import type { Config } from "tailwindcss";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Cooud Tailwind preset. Maps semantic utilities (bg-primary, rounded-lg,
|
|
6
|
+
* shadow-glow, text-fg-secondary, …) to the runtime `--cooud-*` variables
|
|
7
|
+
* defined in `@cooud-ui/tokens/styles.css`, so they re-theme live.
|
|
8
|
+
*/
|
|
9
|
+
declare const preset: Config;
|
|
10
|
+
export default preset;
|
package/preset/index.js
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
// GENERATED by packages/tokens/scripts/build-tokens.ts from src/tokens.ts — do not edit by hand.
|
|
2
|
+
/** @type {import("tailwindcss").Config} */
|
|
3
|
+
const preset = {
|
|
4
|
+
theme: {
|
|
5
|
+
extend: {
|
|
6
|
+
colors: {
|
|
7
|
+
primary: {
|
|
8
|
+
DEFAULT: "var(--cooud-primary)",
|
|
9
|
+
foreground: "var(--cooud-primary-foreground)",
|
|
10
|
+
},
|
|
11
|
+
accent: {
|
|
12
|
+
DEFAULT: "var(--cooud-accent)",
|
|
13
|
+
foreground: "var(--cooud-accent-foreground)",
|
|
14
|
+
},
|
|
15
|
+
surface: {
|
|
16
|
+
base: "var(--cooud-surface-base)",
|
|
17
|
+
inset: "var(--cooud-surface-inset)",
|
|
18
|
+
raised: "var(--cooud-surface-raised)",
|
|
19
|
+
overlay: "var(--cooud-surface-overlay)",
|
|
20
|
+
elevated: "var(--cooud-surface-elevated)",
|
|
21
|
+
floating: "var(--cooud-surface-floating)",
|
|
22
|
+
},
|
|
23
|
+
fg: {
|
|
24
|
+
DEFAULT: "var(--cooud-fg)",
|
|
25
|
+
secondary: "var(--cooud-fg-secondary)",
|
|
26
|
+
tertiary: "var(--cooud-fg-tertiary)",
|
|
27
|
+
muted: "var(--cooud-fg-muted)",
|
|
28
|
+
inverse: "var(--cooud-fg-inverse)",
|
|
29
|
+
},
|
|
30
|
+
border: {
|
|
31
|
+
DEFAULT: "var(--cooud-border)",
|
|
32
|
+
strong: "var(--cooud-border-strong)",
|
|
33
|
+
soft: "var(--cooud-border-soft)",
|
|
34
|
+
},
|
|
35
|
+
ring: "var(--cooud-ring)",
|
|
36
|
+
success: "var(--cooud-success)",
|
|
37
|
+
warning: "var(--cooud-warning)",
|
|
38
|
+
error: "var(--cooud-error)",
|
|
39
|
+
info: "var(--cooud-info)",
|
|
40
|
+
chart: {
|
|
41
|
+
1: "var(--cooud-chart-1)",
|
|
42
|
+
2: "var(--cooud-chart-2)",
|
|
43
|
+
3: "var(--cooud-chart-3)",
|
|
44
|
+
4: "var(--cooud-chart-4)",
|
|
45
|
+
5: "var(--cooud-chart-5)",
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
borderRadius: {
|
|
49
|
+
sm: "max(0px, calc(var(--cooud-radius) - 8px))",
|
|
50
|
+
md: "max(0px, calc(var(--cooud-radius) - 4px))",
|
|
51
|
+
lg: "var(--cooud-radius)",
|
|
52
|
+
xl: "calc(var(--cooud-radius) + 4px)",
|
|
53
|
+
"2xl": "calc(var(--cooud-radius) + 8px)",
|
|
54
|
+
"3xl": "calc(var(--cooud-radius) + 14px)",
|
|
55
|
+
},
|
|
56
|
+
boxShadow: {
|
|
57
|
+
xs: "var(--cooud-shadow-xs)",
|
|
58
|
+
sm: "var(--cooud-shadow-sm)",
|
|
59
|
+
md: "var(--cooud-shadow-md)",
|
|
60
|
+
lg: "var(--cooud-shadow-lg)",
|
|
61
|
+
glow: "var(--cooud-shadow-glow)",
|
|
62
|
+
},
|
|
63
|
+
fontFamily: {
|
|
64
|
+
sans: "var(--cooud-font-sans)",
|
|
65
|
+
display: "var(--cooud-font-display)",
|
|
66
|
+
mono: "var(--cooud-font-mono)",
|
|
67
|
+
},
|
|
68
|
+
transitionTimingFunction: {
|
|
69
|
+
"out-quart": "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
70
|
+
spring: "cubic-bezier(0.34, 1.56, 0.64, 1)",
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
},
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export default preset;
|
|
@@ -0,0 +1,434 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @cooud-ui/tokens — CSS variable bridge for Tailwind v4.
|
|
3
|
+
*
|
|
4
|
+
* Layering:
|
|
5
|
+
* 1. Runtime layer (--cooud-*) → set per theme/mode block + overridable
|
|
6
|
+
* by <CooudUIProvider> on any scope.
|
|
7
|
+
* 2. @theme inline → maps Tailwind utilities to the runtime
|
|
8
|
+
* layer, so `bg-primary`, `rounded-lg`,
|
|
9
|
+
* `shadow-glow`, `text-fg-secondary` all
|
|
10
|
+
* resolve to --cooud-* and re-theme live.
|
|
11
|
+
*
|
|
12
|
+
* Import order in a consumer app:
|
|
13
|
+
* @import "tailwindcss";
|
|
14
|
+
* @import "@cooud-ui/tokens/styles.css";
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
/* ------------------------------------------------------------------ *
|
|
18
|
+
* 1. Runtime layer — theme + mode blocks
|
|
19
|
+
* ------------------------------------------------------------------ */
|
|
20
|
+
|
|
21
|
+
/*
|
|
22
|
+
* Register the animatable brand color vars as typed custom properties so a
|
|
23
|
+
* theme/preset switch CROSS-FADES instead of hard-snapping (e.g. the Blocks
|
|
24
|
+
* preset switcher interpolating primary/accent/ring). These ship WITH the
|
|
25
|
+
* package so every @cooud-ui/tokens adopter gets smooth token transitions — not
|
|
26
|
+
* just this docs app. `inherits: true` lets a scoped <CooudUIProvider> override
|
|
27
|
+
* cascade into descendants.
|
|
28
|
+
*/
|
|
29
|
+
@property --cooud-primary {
|
|
30
|
+
syntax: "<color>";
|
|
31
|
+
inherits: true;
|
|
32
|
+
initial-value: oklch(0.685 0.169 237.3);
|
|
33
|
+
}
|
|
34
|
+
@property --cooud-accent {
|
|
35
|
+
syntax: "<color>";
|
|
36
|
+
inherits: true;
|
|
37
|
+
initial-value: oklch(0.715 0.143 215.2);
|
|
38
|
+
}
|
|
39
|
+
@property --cooud-ring {
|
|
40
|
+
syntax: "<color>";
|
|
41
|
+
inherits: true;
|
|
42
|
+
initial-value: oklch(0.685 0.169 237.3);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Aurora (default) — dark-first */
|
|
46
|
+
:root,
|
|
47
|
+
[data-cooud-theme="aurora"] {
|
|
48
|
+
/* Dark-first: tells the UA to render native form controls, date/time
|
|
49
|
+
pickers, and default scrollbars with a dark palette. */
|
|
50
|
+
color-scheme: dark;
|
|
51
|
+
--cooud-primary: oklch(0.685 0.169 237.3);
|
|
52
|
+
--cooud-primary-foreground: oklch(0.145 0.005 285.8);
|
|
53
|
+
--cooud-accent: oklch(0.715 0.143 215.2);
|
|
54
|
+
--cooud-accent-foreground: oklch(0.145 0 0);
|
|
55
|
+
--cooud-surface-base: oklch(0.145 0.005 285.8);
|
|
56
|
+
--cooud-surface-inset: oklch(0.165 0.005 285.8);
|
|
57
|
+
--cooud-surface-raised: oklch(0.195 0.005 285.8);
|
|
58
|
+
--cooud-surface-overlay: oklch(0.235 0.006 285.9);
|
|
59
|
+
--cooud-surface-elevated: oklch(0.27 0.006 286);
|
|
60
|
+
--cooud-surface-floating: oklch(0.2 0.006 286);
|
|
61
|
+
--cooud-fg: oklch(0.985 0.001 106.4);
|
|
62
|
+
--cooud-fg-secondary: oklch(0.705 0.015 286);
|
|
63
|
+
--cooud-fg-tertiary: oklch(0.62 0.014 286);
|
|
64
|
+
--cooud-fg-muted: oklch(0.442 0.013 286);
|
|
65
|
+
--cooud-fg-inverse: oklch(0.235 0.006 285.9);
|
|
66
|
+
--cooud-border: oklch(1 0 0 / 0.1);
|
|
67
|
+
--cooud-border-strong: oklch(1 0 0 / 0.14);
|
|
68
|
+
--cooud-border-soft: oklch(1 0 0 / 0.06);
|
|
69
|
+
--cooud-ring: oklch(0.685 0.169 237.3);
|
|
70
|
+
--cooud-success: oklch(0.715 0.155 162.5);
|
|
71
|
+
--cooud-warning: oklch(0.769 0.166 70.08);
|
|
72
|
+
--cooud-error: oklch(0.645 0.222 16.44);
|
|
73
|
+
--cooud-info: oklch(0.715 0.143 215.2);
|
|
74
|
+
--cooud-radius: 14px;
|
|
75
|
+
--cooud-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
76
|
+
--cooud-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.22);
|
|
77
|
+
--cooud-shadow-md: 0 6px 12px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.16);
|
|
78
|
+
--cooud-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.28), 0 4px 8px rgba(0, 0, 0, 0.18);
|
|
79
|
+
--cooud-shadow-glow: 0 12px 32px rgba(14, 165, 233, 0.32);
|
|
80
|
+
/* Fonts (runtime-overridable so the Create studio can swap them). */
|
|
81
|
+
--cooud-font-display:
|
|
82
|
+
"SF Pro Display", Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
83
|
+
--cooud-font-sans: "SF Pro Text", Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
84
|
+
--cooud-font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
|
|
85
|
+
/* Chart palette. */
|
|
86
|
+
--cooud-chart-1: oklch(0.685 0.169 237.3);
|
|
87
|
+
--cooud-chart-2: oklch(0.715 0.143 215.2);
|
|
88
|
+
--cooud-chart-3: oklch(0.62 0.21 292);
|
|
89
|
+
--cooud-chart-4: oklch(0.7 0.15 162);
|
|
90
|
+
--cooud-chart-5: oklch(0.78 0.16 70);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
[data-cooud-theme="aurora"][data-cooud-mode="light"] {
|
|
94
|
+
color-scheme: light;
|
|
95
|
+
--cooud-primary-foreground: oklch(0.145 0.005 285.8);
|
|
96
|
+
--cooud-accent-foreground: oklch(0.145 0 0);
|
|
97
|
+
--cooud-surface-base: oklch(1 0 0);
|
|
98
|
+
--cooud-surface-inset: oklch(0.985 0 0);
|
|
99
|
+
--cooud-surface-raised: oklch(1 0 0);
|
|
100
|
+
--cooud-surface-overlay: oklch(0.967 0.001 286);
|
|
101
|
+
--cooud-surface-elevated: oklch(1 0 0);
|
|
102
|
+
--cooud-surface-floating: oklch(1 0 0);
|
|
103
|
+
--cooud-fg: oklch(0.235 0.006 285.9);
|
|
104
|
+
--cooud-fg-secondary: oklch(0.442 0.013 286);
|
|
105
|
+
--cooud-fg-tertiary: oklch(0.552 0.014 286);
|
|
106
|
+
--cooud-fg-muted: oklch(0.705 0.015 286);
|
|
107
|
+
--cooud-fg-inverse: oklch(0.985 0.001 106.4);
|
|
108
|
+
--cooud-border: oklch(0 0 0 / 0.1);
|
|
109
|
+
--cooud-border-strong: oklch(0 0 0 / 0.14);
|
|
110
|
+
--cooud-border-soft: oklch(0 0 0 / 0.06);
|
|
111
|
+
--cooud-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
|
|
112
|
+
--cooud-shadow-sm: 0 2px 4px rgba(16, 24, 40, 0.08);
|
|
113
|
+
--cooud-shadow-md: 0 6px 12px rgba(16, 24, 40, 0.1), 0 2px 4px rgba(16, 24, 40, 0.06);
|
|
114
|
+
--cooud-shadow-lg: 0 12px 24px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.08);
|
|
115
|
+
--cooud-shadow-glow: 0 12px 32px rgba(14, 165, 233, 0.22);
|
|
116
|
+
--cooud-success: oklch(0.52 0.15 162);
|
|
117
|
+
--cooud-warning: oklch(0.52 0.12 70);
|
|
118
|
+
--cooud-info: oklch(0.52 0.16 235);
|
|
119
|
+
--cooud-error: oklch(0.55 0.2 25);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* Neutral preset — light-first */
|
|
123
|
+
[data-cooud-theme="neutral"] {
|
|
124
|
+
color-scheme: light;
|
|
125
|
+
--cooud-primary: oklch(0.205 0 0);
|
|
126
|
+
--cooud-primary-foreground: oklch(0.985 0 0);
|
|
127
|
+
--cooud-accent: oklch(0.96 0 0);
|
|
128
|
+
--cooud-accent-foreground: oklch(0.205 0 0);
|
|
129
|
+
--cooud-surface-base: oklch(0.985 0 0);
|
|
130
|
+
--cooud-surface-inset: oklch(0.97 0 0);
|
|
131
|
+
--cooud-surface-raised: oklch(1 0 0);
|
|
132
|
+
--cooud-surface-overlay: oklch(0.96 0 0);
|
|
133
|
+
--cooud-surface-elevated: oklch(1 0 0);
|
|
134
|
+
--cooud-surface-floating: oklch(1 0 0);
|
|
135
|
+
--cooud-fg: oklch(0.145 0 0);
|
|
136
|
+
--cooud-fg-secondary: oklch(0.43 0 0);
|
|
137
|
+
--cooud-fg-tertiary: oklch(0.556 0 0);
|
|
138
|
+
--cooud-fg-muted: oklch(0.705 0 0);
|
|
139
|
+
--cooud-fg-inverse: oklch(0.985 0 0);
|
|
140
|
+
--cooud-border: oklch(0.915 0 0);
|
|
141
|
+
--cooud-border-strong: oklch(0.86 0 0);
|
|
142
|
+
--cooud-border-soft: oklch(0.94 0 0);
|
|
143
|
+
--cooud-ring: oklch(0.705 0 0);
|
|
144
|
+
--cooud-success: oklch(0.52 0.15 162);
|
|
145
|
+
--cooud-warning: oklch(0.52 0.12 70);
|
|
146
|
+
--cooud-error: oklch(0.55 0.2 25);
|
|
147
|
+
--cooud-info: oklch(0.52 0.16 235);
|
|
148
|
+
--cooud-radius: 14px;
|
|
149
|
+
--cooud-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
|
|
150
|
+
--cooud-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08);
|
|
151
|
+
--cooud-shadow-md: 0 4px 8px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
|
|
152
|
+
--cooud-shadow-lg: 0 12px 24px rgba(16, 24, 40, 0.1), 0 4px 8px rgba(16, 24, 40, 0.06);
|
|
153
|
+
--cooud-shadow-glow: 0 0 0 4px oklch(0.705 0 0 / 0.18);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
[data-cooud-theme="neutral"][data-cooud-mode="dark"] {
|
|
157
|
+
color-scheme: dark;
|
|
158
|
+
--cooud-primary: oklch(0.93 0 0);
|
|
159
|
+
--cooud-primary-foreground: oklch(0.11 0 0);
|
|
160
|
+
--cooud-accent: oklch(0.27 0 0);
|
|
161
|
+
--cooud-accent-foreground: oklch(0.93 0 0);
|
|
162
|
+
--cooud-surface-base: oklch(0.11 0 0);
|
|
163
|
+
--cooud-surface-inset: oklch(0.13 0 0);
|
|
164
|
+
--cooud-surface-raised: oklch(0.16 0 0);
|
|
165
|
+
--cooud-surface-overlay: oklch(0.2 0 0);
|
|
166
|
+
--cooud-surface-elevated: oklch(0.23 0 0);
|
|
167
|
+
--cooud-surface-floating: oklch(0.165 0 0);
|
|
168
|
+
--cooud-fg: oklch(0.93 0 0);
|
|
169
|
+
--cooud-fg-secondary: oklch(0.7 0 0);
|
|
170
|
+
--cooud-fg-tertiary: oklch(0.62 0 0);
|
|
171
|
+
--cooud-fg-muted: oklch(0.44 0 0);
|
|
172
|
+
--cooud-fg-inverse: oklch(0.11 0 0);
|
|
173
|
+
--cooud-border: oklch(1 0 0 / 0.1);
|
|
174
|
+
--cooud-border-strong: oklch(1 0 0 / 0.16);
|
|
175
|
+
--cooud-border-soft: oklch(1 0 0 / 0.06);
|
|
176
|
+
--cooud-ring: oklch(0.55 0 0);
|
|
177
|
+
--cooud-success: oklch(0.715 0.155 162.5);
|
|
178
|
+
--cooud-warning: oklch(0.769 0.166 70.08);
|
|
179
|
+
--cooud-info: oklch(0.715 0.143 215.2);
|
|
180
|
+
--cooud-error: oklch(0.704 0.191 22.216);
|
|
181
|
+
--cooud-shadow-glow: 0 0 0 4px oklch(0.6 0 0 / 0.3);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* ------------------------------------------------------------------ *
|
|
185
|
+
* 2. @theme inline — Tailwind v4 utility bridge
|
|
186
|
+
* ------------------------------------------------------------------ */
|
|
187
|
+
@theme inline {
|
|
188
|
+
--color-primary: var(--cooud-primary);
|
|
189
|
+
--color-primary-foreground: var(--cooud-primary-foreground);
|
|
190
|
+
--color-accent: var(--cooud-accent);
|
|
191
|
+
--color-accent-foreground: var(--cooud-accent-foreground);
|
|
192
|
+
|
|
193
|
+
--color-surface-base: var(--cooud-surface-base);
|
|
194
|
+
--color-surface-inset: var(--cooud-surface-inset);
|
|
195
|
+
--color-surface-raised: var(--cooud-surface-raised);
|
|
196
|
+
--color-surface-overlay: var(--cooud-surface-overlay);
|
|
197
|
+
--color-surface-elevated: var(--cooud-surface-elevated);
|
|
198
|
+
--color-surface-floating: var(--cooud-surface-floating);
|
|
199
|
+
|
|
200
|
+
--color-fg: var(--cooud-fg);
|
|
201
|
+
--color-fg-secondary: var(--cooud-fg-secondary);
|
|
202
|
+
--color-fg-tertiary: var(--cooud-fg-tertiary);
|
|
203
|
+
--color-fg-muted: var(--cooud-fg-muted);
|
|
204
|
+
--color-fg-inverse: var(--cooud-fg-inverse);
|
|
205
|
+
|
|
206
|
+
--color-border: var(--cooud-border);
|
|
207
|
+
--color-border-strong: var(--cooud-border-strong);
|
|
208
|
+
--color-border-soft: var(--cooud-border-soft);
|
|
209
|
+
--color-ring: var(--cooud-ring);
|
|
210
|
+
|
|
211
|
+
--color-success: var(--cooud-success);
|
|
212
|
+
--color-warning: var(--cooud-warning);
|
|
213
|
+
--color-error: var(--cooud-error);
|
|
214
|
+
--color-info: var(--cooud-info);
|
|
215
|
+
|
|
216
|
+
--radius-sm: max(0px, calc(var(--cooud-radius) - 8px));
|
|
217
|
+
--radius-md: max(0px, calc(var(--cooud-radius) - 4px));
|
|
218
|
+
--radius-lg: var(--cooud-radius);
|
|
219
|
+
--radius-xl: calc(var(--cooud-radius) + 4px);
|
|
220
|
+
--radius-2xl: calc(var(--cooud-radius) + 8px);
|
|
221
|
+
--radius-3xl: calc(var(--cooud-radius) + 14px);
|
|
222
|
+
|
|
223
|
+
--shadow-xs: var(--cooud-shadow-xs);
|
|
224
|
+
--shadow-sm: var(--cooud-shadow-sm);
|
|
225
|
+
--shadow-md: var(--cooud-shadow-md);
|
|
226
|
+
--shadow-lg: var(--cooud-shadow-lg);
|
|
227
|
+
--shadow-glow: var(--cooud-shadow-glow);
|
|
228
|
+
|
|
229
|
+
--font-sans: var(--cooud-font-sans);
|
|
230
|
+
--font-display: var(--cooud-font-display);
|
|
231
|
+
--font-mono: var(--cooud-font-mono);
|
|
232
|
+
|
|
233
|
+
--color-chart-1: var(--cooud-chart-1);
|
|
234
|
+
--color-chart-2: var(--cooud-chart-2);
|
|
235
|
+
--color-chart-3: var(--cooud-chart-3);
|
|
236
|
+
--color-chart-4: var(--cooud-chart-4);
|
|
237
|
+
--color-chart-5: var(--cooud-chart-5);
|
|
238
|
+
|
|
239
|
+
--ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1);
|
|
240
|
+
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
/* ------------------------------------------------------------------ *
|
|
244
|
+
* 3. Base — gradients + reduced-motion safety
|
|
245
|
+
* ------------------------------------------------------------------ */
|
|
246
|
+
@utility bg-gradient-primary {
|
|
247
|
+
background-image: linear-gradient(135deg, var(--cooud-primary), var(--cooud-accent));
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
/*
|
|
251
|
+
* Darkened brand gradient for SOLID FILLS that carry white text (e.g. the
|
|
252
|
+
* gradient button). Derived from primary/accent so it re-themes, but mixed
|
|
253
|
+
* toward black so white label text clears WCAG AA contrast across the sweep.
|
|
254
|
+
*/
|
|
255
|
+
@utility bg-gradient-primary-strong {
|
|
256
|
+
background-image: linear-gradient(
|
|
257
|
+
135deg,
|
|
258
|
+
color-mix(in oklch, var(--cooud-primary), black 30%),
|
|
259
|
+
color-mix(in oklch, var(--cooud-accent), black 30%)
|
|
260
|
+
);
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
@utility bg-gradient-aurora {
|
|
264
|
+
background-image: linear-gradient(
|
|
265
|
+
135deg,
|
|
266
|
+
var(--cooud-primary),
|
|
267
|
+
var(--cooud-accent),
|
|
268
|
+
oklch(0.8 0.1 350)
|
|
269
|
+
);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
@theme {
|
|
273
|
+
--animate-caret-blink: caret-blink 1.25s ease-out infinite;
|
|
274
|
+
--animate-shimmer: shimmer 2s linear infinite;
|
|
275
|
+
--animate-aurora: aurora-drift 18s ease-in-out infinite alternate;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
@keyframes caret-blink {
|
|
279
|
+
0%,
|
|
280
|
+
70%,
|
|
281
|
+
100% {
|
|
282
|
+
opacity: 1;
|
|
283
|
+
}
|
|
284
|
+
20%,
|
|
285
|
+
50% {
|
|
286
|
+
opacity: 0;
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
@keyframes shimmer {
|
|
291
|
+
100% {
|
|
292
|
+
transform: translateX(100%);
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
@keyframes aurora-drift {
|
|
297
|
+
0% {
|
|
298
|
+
transform: translate(0, 0) scale(1);
|
|
299
|
+
}
|
|
300
|
+
50% {
|
|
301
|
+
transform: translate(3%, -4%) scale(1.08);
|
|
302
|
+
}
|
|
303
|
+
100% {
|
|
304
|
+
transform: translate(-3%, 4%) scale(1.04);
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
/*
|
|
309
|
+
* Overlay enter/exit animations driven by Radix `data-[state=open|closed]`.
|
|
310
|
+
* Keyframes (not transitions) so Radix waits for the EXIT animation before
|
|
311
|
+
* unmounting — both directions stay fluid. Consume via arbitrary utilities,
|
|
312
|
+
* e.g. `data-[state=open]:animate-[cooud-pop-in_180ms_var(--ease-out-quart)_both]`.
|
|
313
|
+
* `--ease-out-quart` is the shared easing; `both` fill-mode avoids first/last
|
|
314
|
+
* frame flashes.
|
|
315
|
+
*/
|
|
316
|
+
@keyframes cooud-overlay-in {
|
|
317
|
+
from {
|
|
318
|
+
opacity: 0;
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
@keyframes cooud-overlay-out {
|
|
322
|
+
to {
|
|
323
|
+
opacity: 0;
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
@keyframes cooud-pop-in {
|
|
327
|
+
from {
|
|
328
|
+
opacity: 0;
|
|
329
|
+
transform: scale(0.95);
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
@keyframes cooud-pop-out {
|
|
333
|
+
to {
|
|
334
|
+
opacity: 0;
|
|
335
|
+
transform: scale(0.95);
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
@keyframes cooud-slide-in-right {
|
|
339
|
+
from {
|
|
340
|
+
transform: translateX(100%);
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
@keyframes cooud-slide-out-right {
|
|
344
|
+
to {
|
|
345
|
+
transform: translateX(100%);
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
@keyframes cooud-slide-in-left {
|
|
349
|
+
from {
|
|
350
|
+
transform: translateX(-100%);
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
@keyframes cooud-slide-out-left {
|
|
354
|
+
to {
|
|
355
|
+
transform: translateX(-100%);
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
@keyframes cooud-slide-in-top {
|
|
359
|
+
from {
|
|
360
|
+
transform: translateY(-100%);
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
@keyframes cooud-slide-out-top {
|
|
364
|
+
to {
|
|
365
|
+
transform: translateY(-100%);
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
@keyframes cooud-slide-in-bottom {
|
|
369
|
+
from {
|
|
370
|
+
transform: translateY(100%);
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
@keyframes cooud-slide-out-bottom {
|
|
374
|
+
to {
|
|
375
|
+
transform: translateY(100%);
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
/* Height collapse/expand — drive off the Radix content-height vars. */
|
|
379
|
+
@keyframes cooud-accordion-down {
|
|
380
|
+
from {
|
|
381
|
+
height: 0;
|
|
382
|
+
}
|
|
383
|
+
to {
|
|
384
|
+
height: var(--radix-accordion-content-height);
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
@keyframes cooud-accordion-up {
|
|
388
|
+
from {
|
|
389
|
+
height: var(--radix-accordion-content-height);
|
|
390
|
+
}
|
|
391
|
+
to {
|
|
392
|
+
height: 0;
|
|
393
|
+
}
|
|
394
|
+
}
|
|
395
|
+
@keyframes cooud-collapsible-down {
|
|
396
|
+
from {
|
|
397
|
+
height: 0;
|
|
398
|
+
}
|
|
399
|
+
to {
|
|
400
|
+
height: var(--radix-collapsible-content-height);
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
@keyframes cooud-collapsible-up {
|
|
404
|
+
from {
|
|
405
|
+
height: var(--radix-collapsible-content-height);
|
|
406
|
+
}
|
|
407
|
+
to {
|
|
408
|
+
height: 0;
|
|
409
|
+
}
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
/*
|
|
413
|
+
* Honour `prefers-reduced-motion` by collapsing animations/transitions — the
|
|
414
|
+
* accessible default every consumer gets. The opt-out is SUBTREE-SCOPED: a
|
|
415
|
+
* container that needs to DEMONSTRATE motion regardless (e.g. the component
|
|
416
|
+
* showcase's preview frame) sets `data-force-motion` on ITSELF, and neither it
|
|
417
|
+
* nor anything inside it is reset — while the rest of the page still honours
|
|
418
|
+
* the user's preference.
|
|
419
|
+
*
|
|
420
|
+
* The gate `:not([data-force-motion] *):not([data-force-motion])` excludes
|
|
421
|
+
* (a) any element with a `[data-force-motion]` ancestor and (b) the marked
|
|
422
|
+
* container itself, so the reset still applies page-wide by default but stops
|
|
423
|
+
* at the boundary of any `data-force-motion` subtree. `:where()` keeps the
|
|
424
|
+
* whole thing at the same (zero) specificity as a bare `*` reset.
|
|
425
|
+
*/
|
|
426
|
+
@media (prefers-reduced-motion: reduce) {
|
|
427
|
+
:where(:not([data-force-motion] *):not([data-force-motion])),
|
|
428
|
+
:where(:not([data-force-motion] *):not([data-force-motion]))::before,
|
|
429
|
+
:where(:not([data-force-motion] *):not([data-force-motion]))::after {
|
|
430
|
+
animation-duration: 0.001ms !important;
|
|
431
|
+
animation-iteration-count: 1 !important;
|
|
432
|
+
transition-duration: 0.001ms !important;
|
|
433
|
+
}
|
|
434
|
+
}
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$comment": "GENERATED by packages/tokens/scripts/build-tokens.ts from src/tokens.ts — do not edit by hand.",
|
|
3
|
+
"defaultTheme": "aurora",
|
|
4
|
+
"defaultMode": "dark",
|
|
5
|
+
"themes": ["aurora", "neutral"],
|
|
6
|
+
"modes": ["light", "dark"],
|
|
7
|
+
"cssVarMap": {
|
|
8
|
+
"primary": "--cooud-primary",
|
|
9
|
+
"primaryForeground": "--cooud-primary-foreground",
|
|
10
|
+
"accent": "--cooud-accent",
|
|
11
|
+
"accentForeground": "--cooud-accent-foreground",
|
|
12
|
+
"surfaceBase": "--cooud-surface-base",
|
|
13
|
+
"surfaceInset": "--cooud-surface-inset",
|
|
14
|
+
"surfaceRaised": "--cooud-surface-raised",
|
|
15
|
+
"surfaceOverlay": "--cooud-surface-overlay",
|
|
16
|
+
"surfaceElevated": "--cooud-surface-elevated",
|
|
17
|
+
"surfaceFloating": "--cooud-surface-floating",
|
|
18
|
+
"fg": "--cooud-fg",
|
|
19
|
+
"fgSecondary": "--cooud-fg-secondary",
|
|
20
|
+
"fgTertiary": "--cooud-fg-tertiary",
|
|
21
|
+
"fgMuted": "--cooud-fg-muted",
|
|
22
|
+
"fgInverse": "--cooud-fg-inverse",
|
|
23
|
+
"border": "--cooud-border",
|
|
24
|
+
"borderStrong": "--cooud-border-strong",
|
|
25
|
+
"borderSoft": "--cooud-border-soft",
|
|
26
|
+
"ring": "--cooud-ring",
|
|
27
|
+
"success": "--cooud-success",
|
|
28
|
+
"warning": "--cooud-warning",
|
|
29
|
+
"error": "--cooud-error",
|
|
30
|
+
"info": "--cooud-info",
|
|
31
|
+
"radius": "--cooud-radius",
|
|
32
|
+
"fontSans": "--cooud-font-sans",
|
|
33
|
+
"fontDisplay": "--cooud-font-display",
|
|
34
|
+
"fontMono": "--cooud-font-mono",
|
|
35
|
+
"chart1": "--cooud-chart-1",
|
|
36
|
+
"chart2": "--cooud-chart-2",
|
|
37
|
+
"chart3": "--cooud-chart-3",
|
|
38
|
+
"chart4": "--cooud-chart-4",
|
|
39
|
+
"chart5": "--cooud-chart-5",
|
|
40
|
+
"shadowXs": "--cooud-shadow-xs",
|
|
41
|
+
"shadowSm": "--cooud-shadow-sm",
|
|
42
|
+
"shadowMd": "--cooud-shadow-md",
|
|
43
|
+
"shadowLg": "--cooud-shadow-lg",
|
|
44
|
+
"shadowGlow": "--cooud-shadow-glow"
|
|
45
|
+
},
|
|
46
|
+
"tokens": {
|
|
47
|
+
"aurora": {
|
|
48
|
+
"light": {
|
|
49
|
+
"primary": "oklch(0.685 0.169 237.3)",
|
|
50
|
+
"primaryForeground": "oklch(0.145 0.005 285.8)",
|
|
51
|
+
"accent": "oklch(0.715 0.143 215.2)",
|
|
52
|
+
"accentForeground": "oklch(0.145 0 0)",
|
|
53
|
+
"surfaceBase": "oklch(1 0 0)",
|
|
54
|
+
"surfaceInset": "oklch(0.985 0 0)",
|
|
55
|
+
"surfaceRaised": "oklch(1 0 0)",
|
|
56
|
+
"surfaceOverlay": "oklch(0.967 0.001 286)",
|
|
57
|
+
"surfaceElevated": "oklch(1 0 0)",
|
|
58
|
+
"surfaceFloating": "oklch(1 0 0)",
|
|
59
|
+
"fg": "oklch(0.235 0.006 285.9)",
|
|
60
|
+
"fgSecondary": "oklch(0.442 0.013 286)",
|
|
61
|
+
"fgTertiary": "oklch(0.552 0.014 286)",
|
|
62
|
+
"fgMuted": "oklch(0.705 0.015 286)",
|
|
63
|
+
"fgInverse": "oklch(0.985 0.001 106.4)",
|
|
64
|
+
"border": "oklch(0 0 0 / 0.1)",
|
|
65
|
+
"borderStrong": "oklch(0 0 0 / 0.14)",
|
|
66
|
+
"borderSoft": "oklch(0 0 0 / 0.06)",
|
|
67
|
+
"ring": "oklch(0.685 0.169 237.3)",
|
|
68
|
+
"success": "oklch(0.52 0.15 162)",
|
|
69
|
+
"warning": "oklch(0.52 0.12 70)",
|
|
70
|
+
"error": "oklch(0.55 0.2 25)",
|
|
71
|
+
"info": "oklch(0.52 0.16 235)",
|
|
72
|
+
"radius": "14px",
|
|
73
|
+
"fontSans": "\"SF Pro Text\", Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
|
|
74
|
+
"fontDisplay": "\"SF Pro Display\", Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
|
|
75
|
+
"fontMono": "\"SF Mono\", \"JetBrains Mono\", ui-monospace, Menlo, Consolas, monospace",
|
|
76
|
+
"chart1": "oklch(0.685 0.169 237.3)",
|
|
77
|
+
"chart2": "oklch(0.715 0.143 215.2)",
|
|
78
|
+
"chart3": "oklch(0.62 0.21 292)",
|
|
79
|
+
"chart4": "oklch(0.7 0.15 162)",
|
|
80
|
+
"chart5": "oklch(0.78 0.16 70)",
|
|
81
|
+
"shadowXs": "0 1px 2px rgba(16,24,40,0.06)",
|
|
82
|
+
"shadowSm": "0 2px 4px rgba(16,24,40,0.08)",
|
|
83
|
+
"shadowMd": "0 6px 12px rgba(16,24,40,0.10), 0 2px 4px rgba(16,24,40,0.06)",
|
|
84
|
+
"shadowLg": "0 12px 24px rgba(16,24,40,0.12), 0 4px 8px rgba(16,24,40,0.08)",
|
|
85
|
+
"shadowGlow": "0 12px 32px rgba(14,165,233,0.22)"
|
|
86
|
+
},
|
|
87
|
+
"dark": {
|
|
88
|
+
"primary": "oklch(0.685 0.169 237.3)",
|
|
89
|
+
"primaryForeground": "oklch(0.145 0.005 285.8)",
|
|
90
|
+
"accent": "oklch(0.715 0.143 215.2)",
|
|
91
|
+
"accentForeground": "oklch(0.145 0 0)",
|
|
92
|
+
"surfaceBase": "oklch(0.145 0.005 285.8)",
|
|
93
|
+
"surfaceInset": "oklch(0.165 0.005 285.8)",
|
|
94
|
+
"surfaceRaised": "oklch(0.195 0.005 285.8)",
|
|
95
|
+
"surfaceOverlay": "oklch(0.235 0.006 285.9)",
|
|
96
|
+
"surfaceElevated": "oklch(0.27 0.006 286)",
|
|
97
|
+
"surfaceFloating": "oklch(0.2 0.006 286)",
|
|
98
|
+
"fg": "oklch(0.985 0.001 106.4)",
|
|
99
|
+
"fgSecondary": "oklch(0.705 0.015 286)",
|
|
100
|
+
"fgTertiary": "oklch(0.62 0.014 286)",
|
|
101
|
+
"fgMuted": "oklch(0.442 0.013 286)",
|
|
102
|
+
"fgInverse": "oklch(0.235 0.006 285.9)",
|
|
103
|
+
"border": "oklch(1 0 0 / 0.1)",
|
|
104
|
+
"borderStrong": "oklch(1 0 0 / 0.14)",
|
|
105
|
+
"borderSoft": "oklch(1 0 0 / 0.06)",
|
|
106
|
+
"ring": "oklch(0.685 0.169 237.3)",
|
|
107
|
+
"success": "oklch(0.715 0.155 162.5)",
|
|
108
|
+
"warning": "oklch(0.769 0.166 70.08)",
|
|
109
|
+
"error": "oklch(0.645 0.222 16.44)",
|
|
110
|
+
"info": "oklch(0.715 0.143 215.2)",
|
|
111
|
+
"radius": "14px",
|
|
112
|
+
"fontSans": "\"SF Pro Text\", Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
|
|
113
|
+
"fontDisplay": "\"SF Pro Display\", Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
|
|
114
|
+
"fontMono": "\"SF Mono\", \"JetBrains Mono\", ui-monospace, Menlo, Consolas, monospace",
|
|
115
|
+
"chart1": "oklch(0.685 0.169 237.3)",
|
|
116
|
+
"chart2": "oklch(0.715 0.143 215.2)",
|
|
117
|
+
"chart3": "oklch(0.62 0.21 292)",
|
|
118
|
+
"chart4": "oklch(0.7 0.15 162)",
|
|
119
|
+
"chart5": "oklch(0.78 0.16 70)",
|
|
120
|
+
"shadowXs": "0 1px 2px rgba(0,0,0,0.20)",
|
|
121
|
+
"shadowSm": "0 2px 4px rgba(0,0,0,0.22)",
|
|
122
|
+
"shadowMd": "0 6px 12px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.16)",
|
|
123
|
+
"shadowLg": "0 12px 24px rgba(0,0,0,0.28), 0 4px 8px rgba(0,0,0,0.18)",
|
|
124
|
+
"shadowGlow": "0 12px 32px rgba(14,165,233,0.32)"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
"neutral": {
|
|
128
|
+
"light": {
|
|
129
|
+
"primary": "oklch(0.205 0 0)",
|
|
130
|
+
"primaryForeground": "oklch(0.985 0 0)",
|
|
131
|
+
"accent": "oklch(0.96 0 0)",
|
|
132
|
+
"accentForeground": "oklch(0.205 0 0)",
|
|
133
|
+
"surfaceBase": "oklch(0.985 0 0)",
|
|
134
|
+
"surfaceInset": "oklch(0.97 0 0)",
|
|
135
|
+
"surfaceRaised": "oklch(1 0 0)",
|
|
136
|
+
"surfaceOverlay": "oklch(0.96 0 0)",
|
|
137
|
+
"surfaceElevated": "oklch(1 0 0)",
|
|
138
|
+
"surfaceFloating": "oklch(1 0 0)",
|
|
139
|
+
"fg": "oklch(0.145 0 0)",
|
|
140
|
+
"fgSecondary": "oklch(0.43 0 0)",
|
|
141
|
+
"fgTertiary": "oklch(0.556 0 0)",
|
|
142
|
+
"fgMuted": "oklch(0.705 0 0)",
|
|
143
|
+
"fgInverse": "oklch(0.985 0 0)",
|
|
144
|
+
"border": "oklch(0.915 0 0)",
|
|
145
|
+
"borderStrong": "oklch(0.86 0 0)",
|
|
146
|
+
"borderSoft": "oklch(0.94 0 0)",
|
|
147
|
+
"ring": "oklch(0.705 0 0)",
|
|
148
|
+
"success": "oklch(0.52 0.15 162)",
|
|
149
|
+
"warning": "oklch(0.52 0.12 70)",
|
|
150
|
+
"error": "oklch(0.55 0.2 25)",
|
|
151
|
+
"info": "oklch(0.52 0.16 235)",
|
|
152
|
+
"radius": "14px",
|
|
153
|
+
"fontSans": "\"SF Pro Text\", Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
|
|
154
|
+
"fontDisplay": "\"SF Pro Display\", Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
|
|
155
|
+
"fontMono": "\"SF Mono\", \"JetBrains Mono\", ui-monospace, Menlo, Consolas, monospace",
|
|
156
|
+
"chart1": "oklch(0.3 0 0)",
|
|
157
|
+
"chart2": "oklch(0.44 0 0)",
|
|
158
|
+
"chart3": "oklch(0.58 0 0)",
|
|
159
|
+
"chart4": "oklch(0.72 0 0)",
|
|
160
|
+
"chart5": "oklch(0.85 0 0)",
|
|
161
|
+
"shadowXs": "0 1px 2px rgba(16,24,40,0.05)",
|
|
162
|
+
"shadowSm": "0 1px 3px rgba(16,24,40,0.08)",
|
|
163
|
+
"shadowMd": "0 4px 8px rgba(16,24,40,0.08), 0 2px 4px rgba(16,24,40,0.04)",
|
|
164
|
+
"shadowLg": "0 12px 24px rgba(16,24,40,0.10), 0 4px 8px rgba(16,24,40,0.06)",
|
|
165
|
+
"shadowGlow": "0 0 0 4px oklch(0.705 0 0 / 0.18)"
|
|
166
|
+
},
|
|
167
|
+
"dark": {
|
|
168
|
+
"primary": "oklch(0.93 0 0)",
|
|
169
|
+
"primaryForeground": "oklch(0.11 0 0)",
|
|
170
|
+
"accent": "oklch(0.27 0 0)",
|
|
171
|
+
"accentForeground": "oklch(0.93 0 0)",
|
|
172
|
+
"surfaceBase": "oklch(0.11 0 0)",
|
|
173
|
+
"surfaceInset": "oklch(0.13 0 0)",
|
|
174
|
+
"surfaceRaised": "oklch(0.16 0 0)",
|
|
175
|
+
"surfaceOverlay": "oklch(0.2 0 0)",
|
|
176
|
+
"surfaceElevated": "oklch(0.23 0 0)",
|
|
177
|
+
"surfaceFloating": "oklch(0.165 0 0)",
|
|
178
|
+
"fg": "oklch(0.93 0 0)",
|
|
179
|
+
"fgSecondary": "oklch(0.7 0 0)",
|
|
180
|
+
"fgTertiary": "oklch(0.62 0 0)",
|
|
181
|
+
"fgMuted": "oklch(0.44 0 0)",
|
|
182
|
+
"fgInverse": "oklch(0.11 0 0)",
|
|
183
|
+
"border": "oklch(1 0 0 / 0.1)",
|
|
184
|
+
"borderStrong": "oklch(1 0 0 / 0.16)",
|
|
185
|
+
"borderSoft": "oklch(1 0 0 / 0.06)",
|
|
186
|
+
"ring": "oklch(0.55 0 0)",
|
|
187
|
+
"success": "oklch(0.715 0.155 162.5)",
|
|
188
|
+
"warning": "oklch(0.769 0.166 70.08)",
|
|
189
|
+
"error": "oklch(0.704 0.191 22.216)",
|
|
190
|
+
"info": "oklch(0.715 0.143 215.2)",
|
|
191
|
+
"radius": "14px",
|
|
192
|
+
"fontSans": "\"SF Pro Text\", Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
|
|
193
|
+
"fontDisplay": "\"SF Pro Display\", Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
|
|
194
|
+
"fontMono": "\"SF Mono\", \"JetBrains Mono\", ui-monospace, Menlo, Consolas, monospace",
|
|
195
|
+
"chart1": "oklch(0.3 0 0)",
|
|
196
|
+
"chart2": "oklch(0.44 0 0)",
|
|
197
|
+
"chart3": "oklch(0.58 0 0)",
|
|
198
|
+
"chart4": "oklch(0.72 0 0)",
|
|
199
|
+
"chart5": "oklch(0.85 0 0)",
|
|
200
|
+
"shadowXs": "0 1px 2px rgba(16,24,40,0.05)",
|
|
201
|
+
"shadowSm": "0 1px 3px rgba(16,24,40,0.08)",
|
|
202
|
+
"shadowMd": "0 4px 8px rgba(16,24,40,0.08), 0 2px 4px rgba(16,24,40,0.04)",
|
|
203
|
+
"shadowLg": "0 12px 24px rgba(16,24,40,0.10), 0 4px 8px rgba(16,24,40,0.06)",
|
|
204
|
+
"shadowGlow": "0 0 0 4px oklch(0.6 0 0 / 0.3)"
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
}
|