@orangecheck/design 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/index.js +10 -10
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +10 -10
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/styles/themes/gold.css +108 -0
  6. package/dist/styles/themes/lightning.css +107 -0
  7. package/dist/styles/themes.css +2 -2
  8. package/dist/tokens.js +10 -10
  9. package/dist/tokens.js.map +1 -1
  10. package/dist/tokens.mjs +10 -10
  11. package/dist/tokens.mjs.map +1 -1
  12. package/package.json +3 -2
  13. package/dist/styles/themes/aurora.css +0 -129
  14. package/dist/styles/themes/midnight.css +0 -105
package/dist/styles/themes/aurora.css DELETED
@@ -1,129 +0,0 @@
1
- /*
2
- * Skin: aurora (demonstrator) — exercises the ELEVATION dimension.
3
- *
4
- * Where the other skins keep OrangeCheck's flat, hard-bordered ethos, aurora
5
- * flips it: soft elevation (overrides the Tailwind --shadow-* scale, which the
6
- * default theme leaves near-flat), generous radius, and a cool teal accent.
7
- * This proves a theme can change shadow posture + shape + color together.
8
- *
9
- * Selectors use :root[data-oc-theme] (to beat the :root fallback that
10
- * lightningcss merges) AND bare [data-oc-theme] (for scoped panels like the
11
- * Themes/Matrix). Shadow vars are unlayered here, so they override Tailwind's
12
- * @layer-theme defaults regardless of specificity.
13
- */
14
-
15
- :root[data-oc-theme='aurora'],
16
- [data-oc-theme='aurora'] {
17
- /* Generous, friendly radius. */
18
- --radius: 0.75rem;
19
-
20
- /* Keep Inter / JetBrains; identity comes from elevation + teal + shape. */
21
- --oc-font-sans: var(--font-sans-display, 'Inter', ui-sans-serif, system-ui, sans-serif);
22
- --oc-font-mono: var(--font-mono-display, 'JetBrains Mono', ui-monospace, monospace);
23
-
24
- /* Soft elevation — the new dimension. Default skins keep the near-flat
25
- OrangeCheck shadows; aurora makes surfaces float. */
26
- --oc-shadow-2xs: 0 1px 2px 0 oklch(0.55 0.05 220 / 0.08);
27
- --oc-shadow-xs: 0 1px 3px 0 oklch(0.55 0.05 220 / 0.12);
28
- --oc-shadow-sm: 0 2px 4px 0 oklch(0.5 0.06 220 / 0.14), 0 1px 2px -1px oklch(0.5 0.06 220 / 0.14);
29
- --oc-shadow-md:
30
- 0 6px 12px -2px oklch(0.5 0.06 220 / 0.16), 0 3px 6px -3px oklch(0.5 0.06 220 / 0.14);
31
- --oc-shadow-lg:
32
- 0 14px 24px -4px oklch(0.5 0.07 220 / 0.18), 0 6px 10px -6px oklch(0.5 0.07 220 / 0.16);
33
- --oc-shadow-xl:
34
- 0 24px 36px -8px oklch(0.5 0.07 220 / 0.2), 0 10px 16px -8px oklch(0.5 0.07 220 / 0.16);
35
-
36
- /* Light — airy cool paper, teal ink */
37
- --background: oklch(0.99 0.006 210);
38
- --foreground: oklch(0.18 0.025 225);
39
-
40
- --card: oklch(1 0 0);
41
- --card-foreground: oklch(0.18 0.025 225);
42
-
43
- --popover: oklch(1 0 0);
44
- --popover-foreground: oklch(0.18 0.025 225);
45
-
46
- /* Teal/cyan primary. */
47
- --primary: oklch(0.6 0.13 205);
48
- --primary-foreground: oklch(0.99 0.01 210);
49
-
50
- --secondary: oklch(0.96 0.01 210);
51
- --secondary-foreground: oklch(0.18 0.025 225);
52
-
53
- --muted: oklch(0.96 0.01 210);
54
- --muted-foreground: oklch(0.47 0.02 220);
55
-
56
- --accent: oklch(0.95 0.018 200);
57
- --accent-foreground: oklch(0.24 0.03 220);
58
-
59
- --border: oklch(0.9 0.012 215);
60
- --input: oklch(0.92 0.012 215);
61
- --ring: oklch(0.6 0.13 205);
62
-
63
- --destructive: oklch(0.55 0.08 30);
64
- --destructive-foreground: oklch(0.98 0 0);
65
-
66
- --warning: oklch(0.68 0.09 75);
67
- --warning-foreground: oklch(0.15 0 0);
68
-
69
- --info: oklch(0.62 0.09 230);
70
- --info-foreground: oklch(0.98 0 0);
71
-
72
- --success: oklch(0.62 0.1 165);
73
- --success-foreground: oklch(0.98 0 0);
74
-
75
- --brand: oklch(0.64 0.14 200);
76
- --brand-foreground: oklch(0.99 0.01 210);
77
- }
78
-
79
- :root[data-oc-theme='aurora'].dark,
80
- [data-oc-theme='aurora'].dark {
81
- /* Dark — deep cyan-slate, luminous teal, elevation still reads via larger
82
- blurred shadows. */
83
- --oc-shadow-2xs: 0 1px 2px 0 oklch(0 0 0 / 0.5);
84
- --oc-shadow-xs: 0 1px 3px 0 oklch(0 0 0 / 0.55);
85
- --oc-shadow-sm: 0 2px 4px 0 oklch(0 0 0 / 0.6), 0 1px 2px -1px oklch(0 0 0 / 0.6);
86
- --oc-shadow-md: 0 6px 12px -2px oklch(0 0 0 / 0.65), 0 3px 6px -3px oklch(0 0 0 / 0.6);
87
- --oc-shadow-lg: 0 14px 24px -4px oklch(0 0 0 / 0.7), 0 6px 10px -6px oklch(0 0 0 / 0.6);
88
- --oc-shadow-xl: 0 24px 36px -8px oklch(0 0 0 / 0.72), 0 10px 16px -8px oklch(0 0 0 / 0.6);
89
-
90
- --background: oklch(0.16 0.022 230);
91
- --foreground: oklch(0.96 0.006 210);
92
-
93
- --card: oklch(0.2 0.026 228);
94
- --card-foreground: oklch(0.96 0.006 210);
95
-
96
- --popover: oklch(0.2 0.026 228);
97
- --popover-foreground: oklch(0.96 0.006 210);
98
-
99
- --primary: oklch(0.74 0.13 200);
100
- --primary-foreground: oklch(0.16 0.022 230);
101
-
102
- --secondary: oklch(0.25 0.028 228);
103
- --secondary-foreground: oklch(0.96 0.006 210);
104
-
105
- --muted: oklch(0.23 0.024 228);
106
- --muted-foreground: oklch(0.66 0.025 215);
107
-
108
- --accent: oklch(0.28 0.032 220);
109
- --accent-foreground: oklch(0.96 0.006 210);
110
-
111
- --border: oklch(0.3 0.03 225);
112
- --input: oklch(0.3 0.03 225);
113
- --ring: oklch(0.74 0.13 200);
114
-
115
- --destructive: oklch(0.6 0.1 30);
116
- --destructive-foreground: oklch(0.95 0 0);
117
-
118
- --warning: oklch(0.72 0.1 75);
119
- --warning-foreground: oklch(0.12 0 0);
120
-
121
- --info: oklch(0.67 0.09 230);
122
- --info-foreground: oklch(0.95 0 0);
123
-
124
- --success: oklch(0.7 0.12 165);
125
- --success-foreground: oklch(0.14 0.02 230);
126
-
127
- --brand: oklch(0.74 0.13 200);
128
- --brand-foreground: oklch(0.16 0.022 230);
129
- }
package/dist/styles/themes/midnight.css DELETED
@@ -1,105 +0,0 @@
1
- /*
2
- * Skin: midnight (demonstrator)
3
- *
4
- * Proves the multi-theme rail: a cool indigo accent on deep slate. Same token
5
- * contract, same radius, same semantic roles — only the values shift. Declares
6
- * the COMPLETE token set in both modes so it fully overrides the default. No
7
- * bare `:root`/`.dark` arms here; only the default skin owns the fallback.
8
- */
9
-
10
- :root[data-oc-theme='midnight'],
11
- [data-oc-theme='midnight'] {
12
- /* Softer, more rounded than the sharp default — a calmer, SaaS-ier shape. */
13
- --radius: 0.625rem;
14
-
15
- /* Geometric humanist sans for the calmer feel; mono stays JetBrains. */
16
- --oc-font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
17
- --oc-font-mono: var(--font-mono-display, 'JetBrains Mono', ui-monospace, monospace);
18
-
19
- /* Light — cool paper, indigo ink */
20
- --background: oklch(0.985 0.004 255);
21
- --foreground: oklch(0.16 0.02 265);
22
-
23
- --card: oklch(1 0 0);
24
- --card-foreground: oklch(0.16 0.02 265);
25
-
26
- --popover: oklch(1 0 0);
27
- --popover-foreground: oklch(0.16 0.02 265);
28
-
29
- /* Indigo is the primary. */
30
- --primary: oklch(0.55 0.18 265);
31
- --primary-foreground: oklch(0.98 0.01 255);
32
-
33
- --secondary: oklch(0.96 0.005 255);
34
- --secondary-foreground: oklch(0.16 0.02 265);
35
-
36
- --muted: oklch(0.96 0.005 255);
37
- --muted-foreground: oklch(0.46 0.02 265);
38
-
39
- --accent: oklch(0.95 0.012 265);
40
- --accent-foreground: oklch(0.22 0.03 265);
41
-
42
- --border: oklch(0.88 0.008 265);
43
- --input: oklch(0.9 0.008 265);
44
- --ring: oklch(0.55 0.18 265);
45
-
46
- --destructive: oklch(0.55 0.08 30);
47
- --destructive-foreground: oklch(0.98 0 0);
48
-
49
- --warning: oklch(0.65 0.08 75);
50
- --warning-foreground: oklch(0.15 0 0);
51
-
52
- --info: oklch(0.6 0.08 240);
53
- --info-foreground: oklch(0.98 0 0);
54
-
55
- --success: oklch(0.6 0.08 165);
56
- --success-foreground: oklch(0.98 0 0);
57
-
58
- /* Brand accent — bright indigo. */
59
- --brand: oklch(0.6 0.2 265);
60
- --brand-foreground: oklch(0.98 0.01 255);
61
- }
62
-
63
- :root[data-oc-theme='midnight'].dark,
64
- [data-oc-theme='midnight'].dark {
65
- /* Dark — deep slate, luminous indigo */
66
- --background: oklch(0.13 0.02 265);
67
- --foreground: oklch(0.96 0.005 255);
68
-
69
- --card: oklch(0.17 0.022 265);
70
- --card-foreground: oklch(0.96 0.005 255);
71
-
72
- --popover: oklch(0.17 0.022 265);
73
- --popover-foreground: oklch(0.96 0.005 255);
74
-
75
- --primary: oklch(0.68 0.17 265);
76
- --primary-foreground: oklch(0.12 0.02 265);
77
-
78
- --secondary: oklch(0.22 0.025 265);
79
- --secondary-foreground: oklch(0.96 0.005 255);
80
-
81
- --muted: oklch(0.2 0.022 265);
82
- --muted-foreground: oklch(0.64 0.02 265);
83
-
84
- --accent: oklch(0.25 0.03 265);
85
- --accent-foreground: oklch(0.96 0.005 255);
86
-
87
- --border: oklch(0.27 0.025 265);
88
- --input: oklch(0.27 0.025 265);
89
- --ring: oklch(0.68 0.17 265);
90
-
91
- --destructive: oklch(0.6 0.1 30);
92
- --destructive-foreground: oklch(0.95 0 0);
93
-
94
- --warning: oklch(0.7 0.1 75);
95
- --warning-foreground: oklch(0.12 0 0);
96
-
97
- --info: oklch(0.65 0.09 240);
98
- --info-foreground: oklch(0.95 0 0);
99
-
100
- --success: oklch(0.65 0.1 165);
101
- --success-foreground: oklch(0.95 0 0);
102
-
103
- --brand: oklch(0.68 0.18 265);
104
- --brand-foreground: oklch(0.12 0.02 265);
105
- }