@sondalab/ui-kit 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/README.md +25 -0
- package/package.json +22 -0
- package/themes/dark.css +24 -0
- package/themes/high-contrast.css +24 -0
- package/themes/light.css +24 -0
- package/tokens.css +49 -0
package/README.md
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# @sondalab/ui-kit
|
|
2
|
+
|
|
3
|
+
Sondalab design tokens as CSS custom properties (`--sl-*`). CSS-only: no components, no build step — import the stylesheets and theme via a `data-sl-theme` attribute.
|
|
4
|
+
|
|
5
|
+
```css
|
|
6
|
+
@import "@sondalab/ui-kit/tokens.css"; /* shared: type, spacing, radii, motion, shadow, z */
|
|
7
|
+
@import "@sondalab/ui-kit/themes/light.css"; /* [data-sl-theme="light"] surfaces, text, borders, status, accent */
|
|
8
|
+
@import "@sondalab/ui-kit/themes/dark.css";
|
|
9
|
+
@import "@sondalab/ui-kit/themes/high-contrast.css";
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
```html
|
|
13
|
+
<html data-sl-theme="dark"> … </html>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
**Per-product accent.** The bundled accent is the Sondalab default (amber `--sl-accent-default`, teal `--sl-accent-depth`). A product keeps its own signature by overriding the accent tokens after the import:
|
|
17
|
+
|
|
18
|
+
```css
|
|
19
|
+
[data-sl-theme="dark"] { --sl-accent-default: #2ee6c0; --sl-focus-ring: #2ee6c0; }
|
|
20
|
+
[data-sl-theme="light"] { --sl-accent-default: #0e9c84; --sl-focus-ring: #0e9c84; }
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
**Fonts** (load separately, e.g. Google Fonts): Fraunces (display), Instrument Sans (body), Martian Mono (mono).
|
|
24
|
+
|
|
25
|
+
Generated from the canonical `sondalab.tokens.json` — do not hand-edit the CSS.
|
package/package.json
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@sondalab/ui-kit",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Sondalab design tokens as CSS custom properties: shared grammar + per-product accent, with light / dark / high-contrast themes.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "marcellobarile",
|
|
7
|
+
"publishConfig": { "access": "public" },
|
|
8
|
+
"type": "module",
|
|
9
|
+
"exports": {
|
|
10
|
+
"./tokens.css": "./tokens.css",
|
|
11
|
+
"./themes/light.css": "./themes/light.css",
|
|
12
|
+
"./themes/dark.css": "./themes/dark.css",
|
|
13
|
+
"./themes/high-contrast.css": "./themes/high-contrast.css"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"tokens.css",
|
|
17
|
+
"themes/light.css",
|
|
18
|
+
"themes/dark.css",
|
|
19
|
+
"themes/high-contrast.css",
|
|
20
|
+
"README.md"
|
|
21
|
+
]
|
|
22
|
+
}
|
package/themes/dark.css
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* GENERATED from sondalab.tokens.json — do not edit. Run `npm run gen:tokens`. */
|
|
2
|
+
[data-sl-theme="dark"] {
|
|
3
|
+
--sl-bg-canvas: #070A0D;
|
|
4
|
+
--sl-bg-surface: #0F151A;
|
|
5
|
+
--sl-bg-surface-raised: #131C23;
|
|
6
|
+
--sl-bg-overlay: rgba(0,0,0,0.6);
|
|
7
|
+
--sl-border-subtle: rgba(218,227,228,0.07);
|
|
8
|
+
--sl-border-default: rgba(218,227,228,0.13);
|
|
9
|
+
--sl-border-strong: rgba(218,227,228,0.28);
|
|
10
|
+
--sl-text-primary: #DAE3E4;
|
|
11
|
+
--sl-text-secondary: #9AA9AD;
|
|
12
|
+
--sl-text-muted: #6E8088;
|
|
13
|
+
--sl-text-on-accent: #0A0A0B;
|
|
14
|
+
--sl-status-success: #4ade80;
|
|
15
|
+
--sl-status-warning: #fbbf24;
|
|
16
|
+
--sl-status-danger: #f87171;
|
|
17
|
+
--sl-status-info: #38bdf8;
|
|
18
|
+
--sl-accent-default: #F5A83C;
|
|
19
|
+
--sl-accent-hover: #F7B863;
|
|
20
|
+
--sl-accent-active: #E0942A;
|
|
21
|
+
--sl-accent-subtle: rgba(245,168,60,0.16);
|
|
22
|
+
--sl-accent-depth: #35A0B4;
|
|
23
|
+
--sl-focus-ring: #F5A83C;
|
|
24
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* GENERATED from sondalab.tokens.json — do not edit. Run `npm run gen:tokens`. */
|
|
2
|
+
[data-sl-theme="high-contrast"] {
|
|
3
|
+
--sl-bg-canvas: #000000;
|
|
4
|
+
--sl-bg-surface: #000000;
|
|
5
|
+
--sl-bg-surface-raised: #0a0a0a;
|
|
6
|
+
--sl-bg-overlay: rgba(0,0,0,0.85);
|
|
7
|
+
--sl-border-subtle: #ffffff;
|
|
8
|
+
--sl-border-default: #ffffff;
|
|
9
|
+
--sl-border-strong: #ffff00;
|
|
10
|
+
--sl-text-primary: #ffffff;
|
|
11
|
+
--sl-text-secondary: #ffffff;
|
|
12
|
+
--sl-text-muted: #cccccc;
|
|
13
|
+
--sl-text-on-accent: #000000;
|
|
14
|
+
--sl-status-success: #00ff00;
|
|
15
|
+
--sl-status-warning: #ffaa00;
|
|
16
|
+
--sl-status-danger: #ff5555;
|
|
17
|
+
--sl-status-info: #00ffff;
|
|
18
|
+
--sl-accent-default: #ffff00;
|
|
19
|
+
--sl-accent-hover: #ffffa0;
|
|
20
|
+
--sl-accent-active: #cccc00;
|
|
21
|
+
--sl-accent-subtle: #1a1a00;
|
|
22
|
+
--sl-accent-depth: #00ffff;
|
|
23
|
+
--sl-focus-ring: #ffff00;
|
|
24
|
+
}
|
package/themes/light.css
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* GENERATED from sondalab.tokens.json — do not edit. Run `npm run gen:tokens`. */
|
|
2
|
+
[data-sl-theme="light"] {
|
|
3
|
+
--sl-bg-canvas: #ECE4D4;
|
|
4
|
+
--sl-bg-surface: #F6F1E6;
|
|
5
|
+
--sl-bg-surface-raised: #FFFFFF;
|
|
6
|
+
--sl-bg-overlay: rgba(21,33,31,0.4);
|
|
7
|
+
--sl-border-subtle: rgba(21,33,31,0.09);
|
|
8
|
+
--sl-border-default: rgba(21,33,31,0.16);
|
|
9
|
+
--sl-border-strong: rgba(21,33,31,0.28);
|
|
10
|
+
--sl-text-primary: #15211F;
|
|
11
|
+
--sl-text-secondary: #475754;
|
|
12
|
+
--sl-text-muted: #6E7B78;
|
|
13
|
+
--sl-text-on-accent: #FFFFFF;
|
|
14
|
+
--sl-status-success: #16a34a;
|
|
15
|
+
--sl-status-warning: #d97706;
|
|
16
|
+
--sl-status-danger: #dc2626;
|
|
17
|
+
--sl-status-info: #0284c7;
|
|
18
|
+
--sl-accent-default: #B56A0C;
|
|
19
|
+
--sl-accent-hover: #A05F0A;
|
|
20
|
+
--sl-accent-active: #8A5109;
|
|
21
|
+
--sl-accent-subtle: rgba(197,122,22,0.12);
|
|
22
|
+
--sl-accent-depth: #14606C;
|
|
23
|
+
--sl-focus-ring: #B56A0C;
|
|
24
|
+
}
|
package/tokens.css
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/* GENERATED from sondalab.tokens.json — do not edit. Run `npm run gen:tokens`. */
|
|
2
|
+
:root {
|
|
3
|
+
--sl-font-display: "Fraunces", Georgia, serif;
|
|
4
|
+
--sl-font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
5
|
+
--sl-font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
|
6
|
+
--sl-space-0: 0;
|
|
7
|
+
--sl-space-1: 0.25rem;
|
|
8
|
+
--sl-space-2: 0.5rem;
|
|
9
|
+
--sl-space-3: 0.75rem;
|
|
10
|
+
--sl-space-4: 1rem;
|
|
11
|
+
--sl-space-5: 1.5rem;
|
|
12
|
+
--sl-space-6: 2rem;
|
|
13
|
+
--sl-space-8: 3rem;
|
|
14
|
+
--sl-radius-sm: 4px;
|
|
15
|
+
--sl-radius-md: 6px;
|
|
16
|
+
--sl-radius-lg: 10px;
|
|
17
|
+
--sl-radius-pill: 9999px;
|
|
18
|
+
--sl-text-xs: 0.75rem;
|
|
19
|
+
--sl-text-sm: 0.875rem;
|
|
20
|
+
--sl-text-md: 1rem;
|
|
21
|
+
--sl-text-lg: 1.125rem;
|
|
22
|
+
--sl-text-xl: 1.5rem;
|
|
23
|
+
--sl-text-2xl: 2rem;
|
|
24
|
+
--sl-line-tight: 1.2;
|
|
25
|
+
--sl-line-normal: 1.5;
|
|
26
|
+
--sl-line-relaxed: 1.6;
|
|
27
|
+
--sl-line-loose: 1.7;
|
|
28
|
+
--sl-z-base: 1;
|
|
29
|
+
--sl-z-overlay: 50;
|
|
30
|
+
--sl-z-modal: 100;
|
|
31
|
+
--sl-z-toast: 200;
|
|
32
|
+
--sl-motion-fast: 120ms;
|
|
33
|
+
--sl-motion-mid: 220ms;
|
|
34
|
+
--sl-motion-slow: 360ms;
|
|
35
|
+
--sl-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
36
|
+
--sl-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
|
|
37
|
+
--sl-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
|
|
38
|
+
--sl-shadow-lg: 0 12px 32px rgba(0,0,0,0.16);
|
|
39
|
+
--sl-focus-ring-width: 2px;
|
|
40
|
+
--sl-focus-ring-offset: 2px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@media (prefers-reduced-motion: reduce) {
|
|
44
|
+
:root {
|
|
45
|
+
--sl-motion-fast: 0ms;
|
|
46
|
+
--sl-motion-mid: 0ms;
|
|
47
|
+
--sl-motion-slow: 0ms;
|
|
48
|
+
}
|
|
49
|
+
}
|