@kouji-ui/themes 0.1.1 → 0.1.2
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/package.json +1 -1
- package/src/index.css +0 -2
- package/src/themes/orrery-light.css +0 -103
- package/src/themes/orrery.css +0 -108
package/package.json
CHANGED
package/src/index.css
CHANGED
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
/* ─────────────────────────────────────────────────────────────
|
|
2
|
-
orrery-light theme — shared layer
|
|
3
|
-
"Paper": One Light's structure and soft ink, shifted down into real grey.
|
|
4
|
-
Pure neutral (chroma 0.0000). Elevation goes DOWN, not up — the editor is
|
|
5
|
-
the single brightest surface and everything else recedes, and `elevated`
|
|
6
|
-
is capped short of white so popovers never glare.
|
|
7
|
-
──────────────────────────────────────────────────────────── */
|
|
8
|
-
|
|
9
|
-
@layer kj.shared {
|
|
10
|
-
[data-theme="orrery-light"] {
|
|
11
|
-
/* ── shape ── */
|
|
12
|
-
--kj-radius-box: 0.5rem;
|
|
13
|
-
--kj-radius-box-lg: 0.75rem;
|
|
14
|
-
--kj-radius-field: 0.3125rem;
|
|
15
|
-
--kj-radius-selector: 0.3125rem;
|
|
16
|
-
--kj-border: var(--kj-base-border-1);
|
|
17
|
-
--kj-depth: 1;
|
|
18
|
-
|
|
19
|
-
/* ── type ── */
|
|
20
|
-
--kj-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
21
|
-
--kj-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
|
22
|
-
--kj-font-display: var(--kj-font-sans);
|
|
23
|
-
--kj-display-weight: 600;
|
|
24
|
-
--kj-letter-spacing: -0.01em;
|
|
25
|
-
|
|
26
|
-
/* ── motion ── */
|
|
27
|
-
--kj-transition: var(--kj-base-transition-fast);
|
|
28
|
-
|
|
29
|
-
/* ── neutral surfaces ── */
|
|
30
|
-
--kj-bg-body: #dedede;
|
|
31
|
-
--kj-bg-surface: #e8e8e8;
|
|
32
|
-
--kj-bg-field: #e4e4e4;
|
|
33
|
-
--kj-bg-elevated: #f7f7f7;
|
|
34
|
-
--kj-bg-overlay: rgba(30, 30, 30, 0.34);
|
|
35
|
-
--kj-bg-inverse: #1d1e20;
|
|
36
|
-
--kj-bg-disabled: #e4e4e4;
|
|
37
|
-
|
|
38
|
-
/* ── intent surfaces ──
|
|
39
|
-
One Light's own syntax palette fails AA on light (#50a14f = 2.86:1,
|
|
40
|
-
#4078f2 = 3.62:1), so these keep its muted character while clearing
|
|
41
|
-
4.6:1. They are dark enough to carry white ink. */
|
|
42
|
-
--kj-bg-primary: #752cb3;
|
|
43
|
-
--kj-bg-primary-subtle: color-mix(in oklch, #752cb3 12%, #dedede);
|
|
44
|
-
--kj-bg-accent: #752cb3;
|
|
45
|
-
--kj-bg-accent-subtle: color-mix(in oklch, #752cb3 12%, #dedede);
|
|
46
|
-
|
|
47
|
-
--kj-bg-info: #1c6dc8;
|
|
48
|
-
--kj-bg-info-subtle: color-mix(in oklch, #1c6dc8 12%, #dedede);
|
|
49
|
-
--kj-bg-success: #1e7d3e;
|
|
50
|
-
--kj-bg-success-subtle: color-mix(in oklch, #1e7d3e 12%, #dedede);
|
|
51
|
-
--kj-bg-warning: #996100;
|
|
52
|
-
--kj-bg-warning-subtle: color-mix(in oklch, #996100 12%, #dedede);
|
|
53
|
-
--kj-bg-danger: #bf4240;
|
|
54
|
-
--kj-bg-danger-subtle: color-mix(in oklch, #bf4240 12%, #dedede);
|
|
55
|
-
|
|
56
|
-
/* ── fg class A — soft foreground, not near-black (~10:1, not 16:1) ── */
|
|
57
|
-
--kj-fg-default: #3b3b3b; /* 10.0:1 */
|
|
58
|
-
--kj-fg-muted: #515151; /* 7.1:1 */
|
|
59
|
-
--kj-fg-subtle: #6e6e6e; /* 4.6:1 */
|
|
60
|
-
--kj-fg-disabled: #8c8c8c; /* 3.0:1 — non-text / disabled only */
|
|
61
|
-
|
|
62
|
-
/* ── fg class B — every intent fill here is dark enough for white ink,
|
|
63
|
-
which is the inverse of the dark theme's pastel fills. ── */
|
|
64
|
-
--kj-fg-on-primary: #ffffff;
|
|
65
|
-
--kj-fg-on-accent: #ffffff;
|
|
66
|
-
--kj-fg-on-info: #ffffff;
|
|
67
|
-
--kj-fg-on-success: #ffffff;
|
|
68
|
-
--kj-fg-on-warning: #ffffff;
|
|
69
|
-
--kj-fg-on-danger: #ffffff;
|
|
70
|
-
--kj-fg-on-inverse: #dee0e2;
|
|
71
|
-
|
|
72
|
-
/* ── fg class C — intent as text on the body ── */
|
|
73
|
-
--kj-fg-primary: #8d4dcc; /* 4.6:1 */
|
|
74
|
-
--kj-fg-accent: #8d4dcc;
|
|
75
|
-
--kj-fg-info: #1c6dc8;
|
|
76
|
-
--kj-fg-success: #1e7d3e;
|
|
77
|
-
--kj-fg-warning: #996100;
|
|
78
|
-
--kj-fg-danger: #bf4240;
|
|
79
|
-
|
|
80
|
-
/* ── borders ── */
|
|
81
|
-
--kj-border-default: #d1d1d1;
|
|
82
|
-
--kj-border-muted: #e4e4e4;
|
|
83
|
-
--kj-border-strong: #bababa;
|
|
84
|
-
--kj-border-focus: #8d4dcc;
|
|
85
|
-
--kj-border-disabled: #d1d1d1;
|
|
86
|
-
--kj-border-primary: #8d4dcc;
|
|
87
|
-
--kj-border-danger: #bf4240;
|
|
88
|
-
|
|
89
|
-
/* ── shadows — shorter and weaker than dark; light elevation recedes ── */
|
|
90
|
-
--kj-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
|
|
91
|
-
--kj-shadow-md: 0 6px 18px -10px rgba(0, 0, 0, 0.28);
|
|
92
|
-
--kj-shadow-lg: 0 14px 32px -12px rgba(0, 0, 0, 0.34);
|
|
93
|
-
--kj-shadow-focus: 0 0 0 3px color-mix(in oklch, #8d4dcc, transparent 80%);
|
|
94
|
-
|
|
95
|
-
/* ── chart palette — lane identity, darkened for the paper ground ── */
|
|
96
|
-
--kj-chart-1: #6b53b8;
|
|
97
|
-
--kj-chart-2: #3f6d96;
|
|
98
|
-
--kj-chart-3: #3f8664;
|
|
99
|
-
--kj-chart-4: #9a7530;
|
|
100
|
-
--kj-chart-5: #96566c;
|
|
101
|
-
--kj-chart-6: #4d6da2;
|
|
102
|
-
}
|
|
103
|
-
}
|
package/src/themes/orrery.css
DELETED
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
/* ─────────────────────────────────────────────────────────────
|
|
2
|
-
orrery theme — shared layer
|
|
3
|
-
Graphite: a dense IDE palette. Chroma is held flat at ~0.005 OKLCH
|
|
4
|
-
across the whole neutral ramp — elevation is a lightness step plus a
|
|
5
|
-
hairline, never a hue shift. The single violet accent carries meaning;
|
|
6
|
-
everything else stays grey or semantic.
|
|
7
|
-
──────────────────────────────────────────────────────────── */
|
|
8
|
-
|
|
9
|
-
@layer kj.shared {
|
|
10
|
-
[data-theme="orrery"] {
|
|
11
|
-
/* ── shape ── */
|
|
12
|
-
--kj-radius-box: 0.5rem;
|
|
13
|
-
--kj-radius-box-lg: 0.75rem;
|
|
14
|
-
--kj-radius-field: 0.3125rem;
|
|
15
|
-
--kj-radius-selector: 0.3125rem;
|
|
16
|
-
--kj-border: var(--kj-base-border-1);
|
|
17
|
-
--kj-depth: 1;
|
|
18
|
-
|
|
19
|
-
/* ── type — Inter for chrome, JetBrains Mono for code, paths, shas and
|
|
20
|
-
figures. Display is sans: an IDE has no headline face. ── */
|
|
21
|
-
--kj-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
22
|
-
--kj-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
|
23
|
-
--kj-font-display: var(--kj-font-sans);
|
|
24
|
-
--kj-display-weight: 600;
|
|
25
|
-
--kj-letter-spacing: -0.01em;
|
|
26
|
-
|
|
27
|
-
/* ── motion ── */
|
|
28
|
-
--kj-transition: var(--kj-base-transition-fast);
|
|
29
|
-
|
|
30
|
-
/* ── neutral surfaces — the graphite ramp ── */
|
|
31
|
-
--kj-bg-body: #121315;
|
|
32
|
-
--kj-bg-surface: #17181a;
|
|
33
|
-
--kj-bg-field: #232427;
|
|
34
|
-
--kj-bg-elevated: #2c2d30;
|
|
35
|
-
--kj-bg-overlay: rgba(4, 5, 9, 0.58);
|
|
36
|
-
--kj-bg-inverse: #f2f2f2;
|
|
37
|
-
--kj-bg-disabled: #232427;
|
|
38
|
-
|
|
39
|
-
/* ── intent surfaces ──
|
|
40
|
-
Accent aliases primary: graphite is a single-hue system. The `-subtle`
|
|
41
|
-
fills are mixed INTO the body rather than made translucent, so a subtle
|
|
42
|
-
surface stays opaque over any parent. */
|
|
43
|
-
--kj-bg-primary: #b082f7;
|
|
44
|
-
--kj-bg-primary-subtle: color-mix(in oklch, #b082f7 14%, #121315);
|
|
45
|
-
--kj-bg-accent: #b082f7;
|
|
46
|
-
--kj-bg-accent-subtle: color-mix(in oklch, #b082f7 14%, #121315);
|
|
47
|
-
|
|
48
|
-
--kj-bg-info: #5e9cf5;
|
|
49
|
-
--kj-bg-info-subtle: color-mix(in oklch, #5e9cf5 14%, #121315);
|
|
50
|
-
--kj-bg-success: #57c98a;
|
|
51
|
-
--kj-bg-success-subtle: color-mix(in oklch, #57c98a 14%, #121315);
|
|
52
|
-
--kj-bg-warning: #d9a441;
|
|
53
|
-
--kj-bg-warning-subtle: color-mix(in oklch, #d9a441 14%, #121315);
|
|
54
|
-
--kj-bg-danger: #e06c7a;
|
|
55
|
-
--kj-bg-danger-subtle: color-mix(in oklch, #e06c7a 14%, #121315);
|
|
56
|
-
|
|
57
|
-
/* ── fg class A — the ink ramp, contrast-checked against bg-field ── */
|
|
58
|
-
--kj-fg-default: #dee0e2; /* 12.6:1 */
|
|
59
|
-
--kj-fg-muted: #b0b1b3; /* 7.8:1 */
|
|
60
|
-
--kj-fg-subtle: #8a8b8c; /* 4.9:1 */
|
|
61
|
-
--kj-fg-disabled: #68696b; /* 3.0:1 — non-text / disabled only */
|
|
62
|
-
|
|
63
|
-
/* ── fg class B — ink ON a solid intent fill.
|
|
64
|
-
Every intent hue here is a light pastel (they double as ink on the dark
|
|
65
|
-
body), so near-black is the only choice that clears AA on the fill —
|
|
66
|
-
white would land near 2:1 on all of them. */
|
|
67
|
-
--kj-fg-on-primary: #0d0d0f;
|
|
68
|
-
--kj-fg-on-accent: #0d0d0f;
|
|
69
|
-
--kj-fg-on-info: #0d0d0f;
|
|
70
|
-
--kj-fg-on-success: #0d0d0f;
|
|
71
|
-
--kj-fg-on-warning: #0d0d0f;
|
|
72
|
-
--kj-fg-on-danger: #0d0d0f;
|
|
73
|
-
--kj-fg-on-inverse: #3b3b3b;
|
|
74
|
-
|
|
75
|
-
/* ── fg class C — intent as text on the body ── */
|
|
76
|
-
--kj-fg-primary: #c39afc;
|
|
77
|
-
--kj-fg-accent: #c39afc;
|
|
78
|
-
--kj-fg-info: #5e9cf5;
|
|
79
|
-
--kj-fg-success: #57c98a;
|
|
80
|
-
--kj-fg-warning: #d9a441;
|
|
81
|
-
--kj-fg-danger: #e06c7a;
|
|
82
|
-
|
|
83
|
-
/* ── borders — hairlines, not boxes ── */
|
|
84
|
-
--kj-border-default: #353739;
|
|
85
|
-
--kj-border-muted: #232427;
|
|
86
|
-
--kj-border-strong: #444548;
|
|
87
|
-
--kj-border-focus: #a855f7;
|
|
88
|
-
--kj-border-disabled: #353739;
|
|
89
|
-
--kj-border-primary: #a855f7;
|
|
90
|
-
--kj-border-danger: #e06c7a;
|
|
91
|
-
|
|
92
|
-
/* ── shadows — long and soft, lifted off pure black ── */
|
|
93
|
-
--kj-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
94
|
-
--kj-shadow-md: 0 8px 24px -10px rgba(0, 0, 0, 0.65);
|
|
95
|
-
--kj-shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.72);
|
|
96
|
-
--kj-shadow-focus: 0 0 0 3px color-mix(in oklch, #a855f7, transparent 84%);
|
|
97
|
-
|
|
98
|
-
/* ── chart palette — the lane identity colours.
|
|
99
|
-
Series need identity, not intent: six distinguishable hues at matched
|
|
100
|
-
lightness beat six semantic colours that all mean something else. */
|
|
101
|
-
--kj-chart-1: #8f7bd6;
|
|
102
|
-
--kj-chart-2: #5e8fb8;
|
|
103
|
-
--kj-chart-3: #67a888;
|
|
104
|
-
--kj-chart-4: #c09a54;
|
|
105
|
-
--kj-chart-5: #b8798f;
|
|
106
|
-
--kj-chart-6: #6f8fc4;
|
|
107
|
-
}
|
|
108
|
-
}
|