@kermodes/theme 0.0.0-stage → 0.3.13-dev.71.ge96feae
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 +16 -3
- package/tailwind.css +68 -0
- package/tokens.css +111 -0
- package/README.md +0 -3
package/package.json
CHANGED
|
@@ -1,6 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kermodes/theme",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.3.13-dev.71.ge96feae",
|
|
4
|
+
"license": "Apache-2.0",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "git+https://github.com/reecetec/kermodes.git",
|
|
8
|
+
"directory": "web/theme"
|
|
9
|
+
},
|
|
10
|
+
"type": "module",
|
|
11
|
+
"exports": {
|
|
12
|
+
"./tokens.css": "./tokens.css",
|
|
13
|
+
"./tailwind.css": "./tailwind.css"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"tokens.css",
|
|
17
|
+
"tailwind.css"
|
|
18
|
+
]
|
|
6
19
|
}
|
package/tailwind.css
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* The tokens as Tailwind v4 theme values, with shadcn/ui's names. An app imports this after
|
|
3
|
+
* Tailwind: `@import 'tailwindcss'; @import '@kermodes/theme/tailwind.css';`
|
|
4
|
+
*/
|
|
5
|
+
@import './tokens.css';
|
|
6
|
+
|
|
7
|
+
/* Dark unless a light theme is set above */
|
|
8
|
+
@custom-variant dark (&:not(:where([data-theme='light'], [data-theme='light'] *)));
|
|
9
|
+
|
|
10
|
+
@theme inline {
|
|
11
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
12
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
13
|
+
--radius-lg: var(--radius);
|
|
14
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
15
|
+
--color-background: var(--background);
|
|
16
|
+
--color-foreground: var(--foreground);
|
|
17
|
+
--color-card: var(--card);
|
|
18
|
+
--color-card-foreground: var(--card-foreground);
|
|
19
|
+
--color-popover: var(--popover);
|
|
20
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
21
|
+
--color-primary: var(--primary);
|
|
22
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
23
|
+
--color-secondary: var(--secondary);
|
|
24
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
25
|
+
--color-muted: var(--muted);
|
|
26
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
27
|
+
--color-faint-foreground: var(--faint-foreground);
|
|
28
|
+
--color-accent: var(--accent);
|
|
29
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
30
|
+
--color-destructive: var(--destructive);
|
|
31
|
+
--color-success: var(--success);
|
|
32
|
+
--color-warning: var(--warning);
|
|
33
|
+
--color-positive: var(--positive);
|
|
34
|
+
--color-negative: var(--negative);
|
|
35
|
+
--color-border: var(--border);
|
|
36
|
+
--color-input: var(--input);
|
|
37
|
+
--color-ring: var(--ring);
|
|
38
|
+
--color-sidebar: var(--sidebar);
|
|
39
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
40
|
+
--color-stripe: var(--stripe);
|
|
41
|
+
--font-sans: var(--font-sans);
|
|
42
|
+
--font-mono: var(--font-mono);
|
|
43
|
+
--ease-out: var(--ease-out);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@layer base {
|
|
47
|
+
* {
|
|
48
|
+
@apply border-border outline-ring/50;
|
|
49
|
+
scrollbar-width: thin;
|
|
50
|
+
scrollbar-color: var(--scrollbar) transparent;
|
|
51
|
+
}
|
|
52
|
+
html,
|
|
53
|
+
body {
|
|
54
|
+
@apply bg-background text-foreground antialiased;
|
|
55
|
+
font-family: var(--font-sans);
|
|
56
|
+
}
|
|
57
|
+
::selection {
|
|
58
|
+
background: var(--selection);
|
|
59
|
+
}
|
|
60
|
+
@media (prefers-reduced-motion: reduce) {
|
|
61
|
+
*,
|
|
62
|
+
::before,
|
|
63
|
+
::after {
|
|
64
|
+
transition-duration: 0s !important;
|
|
65
|
+
animation-duration: 0s !important;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
package/tokens.css
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Kermodes design tokens (docs/theme.md): every colour and primitive of the UI, the notebook
|
|
3
|
+
* grid, and any app built on Kermodes. Components name tokens, never values.
|
|
4
|
+
*
|
|
5
|
+
* Dark is canonical; light redefines every colour under [data-theme='light'], on <html> or any
|
|
6
|
+
* subtree. Translucent colours are 8-digit hex: the grid reads tokens into space-separated
|
|
7
|
+
* colour lists, where rgb(… / …) would split.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
:root,
|
|
11
|
+
[data-theme='dark'] {
|
|
12
|
+
color-scheme: dark;
|
|
13
|
+
|
|
14
|
+
/* Surfaces, darkest first: content, chrome, raised groups, overlays */
|
|
15
|
+
--background: #121214;
|
|
16
|
+
--sidebar: #19191c;
|
|
17
|
+
--muted: #1d1d20;
|
|
18
|
+
--card: #1a1a1d;
|
|
19
|
+
--popover: #262629;
|
|
20
|
+
--secondary: #2a2a2e;
|
|
21
|
+
/* Fills that work on any surface: a row under the pointer, alternate grid rows */
|
|
22
|
+
--accent: #ffffff0f;
|
|
23
|
+
--stripe: #ffffff05;
|
|
24
|
+
|
|
25
|
+
/* Text: three roles. faint is below 4.5:1 on purpose: disabled text and placeholders only */
|
|
26
|
+
--foreground: #f2f2f4;
|
|
27
|
+
--muted-foreground: #a1a1a7;
|
|
28
|
+
--faint-foreground: #6c6c72;
|
|
29
|
+
|
|
30
|
+
/* Lines: dividers are hairlines; a control's edge holds 3:1 */
|
|
31
|
+
--border: #ffffff17;
|
|
32
|
+
--input: #737379;
|
|
33
|
+
|
|
34
|
+
/* The one accent: the current place, the primary action, focus, selection */
|
|
35
|
+
--primary: #7aa7ff;
|
|
36
|
+
--primary-foreground: #0b1220;
|
|
37
|
+
--ring: #7aa7ff;
|
|
38
|
+
--selection: #7aa7ff38;
|
|
39
|
+
--flash: #7aa7ff59;
|
|
40
|
+
|
|
41
|
+
/* States: the word carries the meaning, the colour confirms it */
|
|
42
|
+
--success: #62cc94;
|
|
43
|
+
--warning: #e6b85c;
|
|
44
|
+
--destructive: #ff8f86;
|
|
45
|
+
|
|
46
|
+
/* Data: numbers by sign and dates by type, after Deephaven, toned to the palette */
|
|
47
|
+
--positive: #8dd6a0;
|
|
48
|
+
--negative: #ff9b94;
|
|
49
|
+
--date: #e5c07b;
|
|
50
|
+
--null: #ffffff0a;
|
|
51
|
+
|
|
52
|
+
--scrollbar: #ffffff2e;
|
|
53
|
+
--scrollbar-hover: #ffffff4d;
|
|
54
|
+
--shadow: #00000080;
|
|
55
|
+
|
|
56
|
+
--card-foreground: var(--foreground);
|
|
57
|
+
--popover-foreground: var(--foreground);
|
|
58
|
+
--secondary-foreground: var(--foreground);
|
|
59
|
+
--accent-foreground: var(--foreground);
|
|
60
|
+
--sidebar-foreground: var(--foreground);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
[data-theme='light'] {
|
|
64
|
+
color-scheme: light;
|
|
65
|
+
|
|
66
|
+
--background: #ffffff;
|
|
67
|
+
--sidebar: #f5f5f7;
|
|
68
|
+
--muted: #f3f3f5;
|
|
69
|
+
--card: #ffffff;
|
|
70
|
+
--popover: #ffffff;
|
|
71
|
+
--secondary: #ebebee;
|
|
72
|
+
--accent: #0000000b;
|
|
73
|
+
--stripe: #00000005;
|
|
74
|
+
|
|
75
|
+
--foreground: #1d1d1f;
|
|
76
|
+
--muted-foreground: #6b6b70;
|
|
77
|
+
--faint-foreground: #a1a1a6;
|
|
78
|
+
|
|
79
|
+
--border: #0000001a;
|
|
80
|
+
--input: #86868b;
|
|
81
|
+
|
|
82
|
+
--primary: #2a5fd0;
|
|
83
|
+
--primary-foreground: #ffffff;
|
|
84
|
+
--ring: #2a5fd0;
|
|
85
|
+
--selection: #2a5fd026;
|
|
86
|
+
--flash: #2a5fd040;
|
|
87
|
+
|
|
88
|
+
--success: #1b7a4a;
|
|
89
|
+
--warning: #8a5a00;
|
|
90
|
+
--destructive: #c03a2b;
|
|
91
|
+
|
|
92
|
+
--positive: #1b7a4a;
|
|
93
|
+
--negative: #c03a2b;
|
|
94
|
+
--date: #8a5a00;
|
|
95
|
+
--null: #0000000a;
|
|
96
|
+
|
|
97
|
+
--scrollbar: #00000033;
|
|
98
|
+
--scrollbar-hover: #00000052;
|
|
99
|
+
--shadow: #0000002e;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Theme-independent primitives */
|
|
103
|
+
:root {
|
|
104
|
+
--radius: 0.5rem;
|
|
105
|
+
--font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
106
|
+
--font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono',
|
|
107
|
+
monospace;
|
|
108
|
+
--duration-fast: 150ms;
|
|
109
|
+
--duration-base: 200ms;
|
|
110
|
+
--ease-out: cubic-bezier(0.2, 0, 0, 1);
|
|
111
|
+
}
|
package/README.md
DELETED