@mcp-b/design-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.
Files changed (12) hide show
  1. package/package.json +50 -0
  2. package/src/borders.css +19 -0
  3. package/src/focus.css +13 -0
  4. package/src/index.css +10 -0
  5. package/src/motion.css +17 -0
  6. package/src/palettes.css +80 -0
  7. package/src/seeds.css +20 -0
  8. package/src/semantic-dark.css +104 -0
  9. package/src/semantic-light.css +123 -0
  10. package/src/spacing.css +44 -0
  11. package/src/themes.css +15 -0
  12. package/src/typography.css +52 -0
package/package.json ADDED
@@ -0,0 +1,50 @@
1
+ {
2
+ "name": "@mcp-b/design-tokens",
3
+ "version": "0.1.0",
4
+ "description": "Shared design tokens for MCP-B React applications.",
5
+ "homepage": "https://github.com/WebMCP-org/design-system#readme",
6
+ "bugs": {
7
+ "url": "https://github.com/WebMCP-org/design-system/issues"
8
+ },
9
+ "license": "MIT",
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "git+https://github.com/WebMCP-org/design-system.git",
13
+ "directory": "packages/design-tokens"
14
+ },
15
+ "files": [
16
+ "src"
17
+ ],
18
+ "type": "module",
19
+ "sideEffects": [
20
+ "**/*.css"
21
+ ],
22
+ "exports": {
23
+ ".": "./src/index.css",
24
+ "./index.css": "./src/index.css",
25
+ "./borders": "./src/borders.css",
26
+ "./borders.css": "./src/borders.css",
27
+ "./focus": "./src/focus.css",
28
+ "./focus.css": "./src/focus.css",
29
+ "./motion": "./src/motion.css",
30
+ "./motion.css": "./src/motion.css",
31
+ "./palettes": "./src/palettes.css",
32
+ "./palettes.css": "./src/palettes.css",
33
+ "./seeds": "./src/seeds.css",
34
+ "./seeds.css": "./src/seeds.css",
35
+ "./semantic-dark": "./src/semantic-dark.css",
36
+ "./semantic-dark.css": "./src/semantic-dark.css",
37
+ "./semantic-light": "./src/semantic-light.css",
38
+ "./semantic-light.css": "./src/semantic-light.css",
39
+ "./spacing": "./src/spacing.css",
40
+ "./spacing.css": "./src/spacing.css",
41
+ "./themes": "./src/themes.css",
42
+ "./themes.css": "./src/themes.css",
43
+ "./typography": "./src/typography.css",
44
+ "./typography.css": "./src/typography.css",
45
+ "./package.json": "./package.json"
46
+ },
47
+ "publishConfig": {
48
+ "access": "public"
49
+ }
50
+ }
package/src/borders.css ADDED
@@ -0,0 +1,19 @@
1
+ /*
2
+ * Border Tokens
3
+ */
4
+
5
+ :root,
6
+ .sigvelo-light,
7
+ .sigvelo-dark,
8
+ [data-theme="light"],
9
+ [data-theme="dark"] {
10
+ --sigvelo-border-style: solid;
11
+ --sigvelo-border-width: 1px;
12
+ --sigvelo-border-radius-xs: 0.1875rem; /* 3px */
13
+ --sigvelo-border-radius-sm: 0.25rem; /* 4px */
14
+ --sigvelo-border-radius-md: 0.375rem; /* 6px */
15
+ --sigvelo-border-radius-lg: 0.5625rem; /* 9px */
16
+ --sigvelo-border-radius-xl: 0.75rem; /* 12px */
17
+ --sigvelo-border-radius-pill: 9999px;
18
+ --sigvelo-border-radius-circle: 50%;
19
+ }
package/src/focus.css ADDED
@@ -0,0 +1,13 @@
1
+ /*
2
+ * Focus Tokens
3
+ */
4
+
5
+ :root,
6
+ .sigvelo-light,
7
+ .sigvelo-dark,
8
+ [data-theme="light"],
9
+ [data-theme="dark"] {
10
+ --sigvelo-focus-width: 3px;
11
+ --sigvelo-focus-offset: 1px;
12
+ --sigvelo-backdrop-filter: blur(6px);
13
+ }
package/src/index.css ADDED
@@ -0,0 +1,10 @@
1
+ @import "./seeds.css";
2
+ @import "./palettes.css";
3
+ @import "./typography.css";
4
+ @import "./borders.css";
5
+ @import "./focus.css";
6
+ @import "./spacing.css";
7
+ @import "./motion.css";
8
+ @import "./semantic-light.css";
9
+ @import "./semantic-dark.css";
10
+ @import "./themes.css";
package/src/motion.css ADDED
@@ -0,0 +1,17 @@
1
+ :root {
2
+ --sigvelo-motion-duration-fast: 150ms;
3
+ --sigvelo-motion-duration-medium: 240ms;
4
+ --sigvelo-motion-duration-slow: 360ms;
5
+
6
+ --sigvelo-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
7
+ --sigvelo-motion-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
8
+ --sigvelo-motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
9
+ }
10
+
11
+ @media (prefers-reduced-motion: reduce) {
12
+ :root {
13
+ --sigvelo-motion-duration-fast: 0ms;
14
+ --sigvelo-motion-duration-medium: 0ms;
15
+ --sigvelo-motion-duration-slow: 0ms;
16
+ }
17
+ }
package/src/palettes.css ADDED
@@ -0,0 +1,80 @@
1
+ /*
2
+ * Color Palettes
3
+ *
4
+ * Generated from seed colors via color-mix(in oklab). Palettes are static in
5
+ * both light and dark mode — 100 is always light and 900 is always dark.
6
+ *
7
+ * Use semantic tokens (fill/text/stroke) instead of these primitives when
8
+ * building components that support dark mode.
9
+ */
10
+
11
+ :root,
12
+ .sigvelo-light,
13
+ .sigvelo-dark,
14
+ [data-theme="light"],
15
+ [data-theme="dark"] {
16
+ /* Primary */
17
+ --sigvelo-primary-50: color-mix(in oklab, var(--sigvelo-primary-seed), white 95%);
18
+ --sigvelo-primary-100: color-mix(in oklab, var(--sigvelo-primary-seed), white 87%);
19
+ --sigvelo-primary-200: color-mix(in oklab, var(--sigvelo-primary-seed), white 70%);
20
+ --sigvelo-primary-300: color-mix(in oklab, var(--sigvelo-primary-seed), white 47%);
21
+ --sigvelo-primary-400: color-mix(in oklab, var(--sigvelo-primary-seed), white 23%);
22
+ --sigvelo-primary-500: var(--sigvelo-primary-seed);
23
+ --sigvelo-primary-600: color-mix(in oklab, var(--sigvelo-primary-seed), black 15.5%);
24
+ --sigvelo-primary-700: color-mix(in oklab, var(--sigvelo-primary-seed), black 28.25%);
25
+ --sigvelo-primary-800: color-mix(in oklab, var(--sigvelo-primary-seed), black 43.5%);
26
+ --sigvelo-primary-900: color-mix(in oklab, var(--sigvelo-primary-seed), black 58.5%);
27
+ --sigvelo-primary-950: color-mix(in oklab, var(--sigvelo-primary-seed), black 73.75%);
28
+
29
+ /* Neutral */
30
+ --sigvelo-neutral-50: color-mix(in oklab, var(--sigvelo-neutral-seed), white 95%);
31
+ --sigvelo-neutral-100: color-mix(in oklab, var(--sigvelo-neutral-seed), white 87%);
32
+ --sigvelo-neutral-200: color-mix(in oklab, var(--sigvelo-neutral-seed), white 70%);
33
+ --sigvelo-neutral-300: color-mix(in oklab, var(--sigvelo-neutral-seed), white 47%);
34
+ --sigvelo-neutral-400: color-mix(in oklab, var(--sigvelo-neutral-seed), white 23%);
35
+ --sigvelo-neutral-500: var(--sigvelo-neutral-seed);
36
+ --sigvelo-neutral-600: color-mix(in oklab, var(--sigvelo-neutral-seed), black 15.5%);
37
+ --sigvelo-neutral-700: color-mix(in oklab, var(--sigvelo-neutral-seed), black 28.25%);
38
+ --sigvelo-neutral-800: color-mix(in oklab, var(--sigvelo-neutral-seed), black 43.5%);
39
+ --sigvelo-neutral-900: color-mix(in oklab, var(--sigvelo-neutral-seed), black 58.5%);
40
+ --sigvelo-neutral-950: color-mix(in oklab, var(--sigvelo-neutral-seed), black 73.75%);
41
+
42
+ /* Constructive */
43
+ --sigvelo-success-50: color-mix(in oklab, var(--sigvelo-success-seed), white 95%);
44
+ --sigvelo-success-100: color-mix(in oklab, var(--sigvelo-success-seed), white 87%);
45
+ --sigvelo-success-200: color-mix(in oklab, var(--sigvelo-success-seed), white 70%);
46
+ --sigvelo-success-300: color-mix(in oklab, var(--sigvelo-success-seed), white 47%);
47
+ --sigvelo-success-400: color-mix(in oklab, var(--sigvelo-success-seed), white 23%);
48
+ --sigvelo-success-500: var(--sigvelo-success-seed);
49
+ --sigvelo-success-600: color-mix(in oklab, var(--sigvelo-success-seed), black 15.5%);
50
+ --sigvelo-success-700: color-mix(in oklab, var(--sigvelo-success-seed), black 28.25%);
51
+ --sigvelo-success-800: color-mix(in oklab, var(--sigvelo-success-seed), black 43.5%);
52
+ --sigvelo-success-900: color-mix(in oklab, var(--sigvelo-success-seed), black 58.5%);
53
+ --sigvelo-success-950: color-mix(in oklab, var(--sigvelo-success-seed), black 73.75%);
54
+
55
+ /* Caution */
56
+ --sigvelo-warning-50: color-mix(in oklab, var(--sigvelo-warning-seed), white 95%);
57
+ --sigvelo-warning-100: color-mix(in oklab, var(--sigvelo-warning-seed), white 87%);
58
+ --sigvelo-warning-200: color-mix(in oklab, var(--sigvelo-warning-seed), white 70%);
59
+ --sigvelo-warning-300: color-mix(in oklab, var(--sigvelo-warning-seed), white 47%);
60
+ --sigvelo-warning-400: color-mix(in oklab, var(--sigvelo-warning-seed), white 23%);
61
+ --sigvelo-warning-500: var(--sigvelo-warning-seed);
62
+ --sigvelo-warning-600: color-mix(in oklab, var(--sigvelo-warning-seed), black 15.5%);
63
+ --sigvelo-warning-700: color-mix(in oklab, var(--sigvelo-warning-seed), black 28.25%);
64
+ --sigvelo-warning-800: color-mix(in oklab, var(--sigvelo-warning-seed), black 43.5%);
65
+ --sigvelo-warning-900: color-mix(in oklab, var(--sigvelo-warning-seed), black 58.5%);
66
+ --sigvelo-warning-950: color-mix(in oklab, var(--sigvelo-warning-seed), black 73.75%);
67
+
68
+ /* Destructive */
69
+ --sigvelo-destructive-50: color-mix(in oklab, var(--sigvelo-destructive-seed), white 95%);
70
+ --sigvelo-destructive-100: color-mix(in oklab, var(--sigvelo-destructive-seed), white 87%);
71
+ --sigvelo-destructive-200: color-mix(in oklab, var(--sigvelo-destructive-seed), white 70%);
72
+ --sigvelo-destructive-300: color-mix(in oklab, var(--sigvelo-destructive-seed), white 47%);
73
+ --sigvelo-destructive-400: color-mix(in oklab, var(--sigvelo-destructive-seed), white 23%);
74
+ --sigvelo-destructive-500: var(--sigvelo-destructive-seed);
75
+ --sigvelo-destructive-600: color-mix(in oklab, var(--sigvelo-destructive-seed), black 15.5%);
76
+ --sigvelo-destructive-700: color-mix(in oklab, var(--sigvelo-destructive-seed), black 28.25%);
77
+ --sigvelo-destructive-800: color-mix(in oklab, var(--sigvelo-destructive-seed), black 43.5%);
78
+ --sigvelo-destructive-900: color-mix(in oklab, var(--sigvelo-destructive-seed), black 58.5%);
79
+ --sigvelo-destructive-950: color-mix(in oklab, var(--sigvelo-destructive-seed), black 73.75%);
80
+ }
package/src/seeds.css ADDED
@@ -0,0 +1,20 @@
1
+ /*
2
+ * Color Seeds
3
+ *
4
+ * These base tokens seed the color palettes. For best results, use a midtone
5
+ * color such as any of the 500-level colors from https://color.surf/
6
+ *
7
+ * Avoid using seed colors directly in stylesheets.
8
+ */
9
+
10
+ :root,
11
+ .sigvelo-light,
12
+ .sigvelo-dark,
13
+ [data-theme="light"],
14
+ [data-theme="dark"] {
15
+ --sigvelo-primary-seed: #4a97f4;
16
+ --sigvelo-neutral-seed: #8b8c93;
17
+ --sigvelo-success-seed: #5dbb55;
18
+ --sigvelo-warning-seed: #e89a26;
19
+ --sigvelo-destructive-seed: #ef5655;
20
+ }
package/src/semantic-dark.css ADDED
@@ -0,0 +1,104 @@
1
+ /*
2
+ * Dark Theme Semantic Colors
3
+ */
4
+
5
+ .sigvelo-dark,
6
+ [data-theme="dark"] {
7
+ color-scheme: dark;
8
+
9
+ --sigvelo-silent: black;
10
+ --sigvelo-strident: white;
11
+ --sigvelo-background-color: var(--sigvelo-neutral-950);
12
+ --sigvelo-paper-color: color-mix(in oklab, var(--sigvelo-neutral-950), white 2.5%);
13
+ --sigvelo-text-body: var(--sigvelo-neutral-200);
14
+ --sigvelo-text-muted: var(--sigvelo-neutral-500);
15
+ --sigvelo-focus-color: var(--sigvelo-primary-fill-mid);
16
+ --sigvelo-focus-ring: var(--sigvelo-border-style) var(--sigvelo-focus-width)
17
+ var(--sigvelo-focus-color);
18
+ --sigvelo-backdrop-color: rgb(0 0 0 / 0.5);
19
+ --sigvelo-selection-background-color: var(--sigvelo-primary-700);
20
+ --sigvelo-selection-color: var(--sigvelo-text-body);
21
+ --sigvelo-shadow-color: black;
22
+ --sigvelo-shadow-softer: 0 1px 2px
23
+ color-mix(in oklab, transparent, var(--sigvelo-shadow-color) 8%);
24
+ --sigvelo-shadow-soft: 0 2px 4px color-mix(in oklab, transparent, var(--sigvelo-shadow-color) 12%);
25
+ --sigvelo-shadow-mid: 0 4px 8px color-mix(in oklab, transparent, var(--sigvelo-shadow-color) 16%);
26
+ --sigvelo-shadow-loud: 0 8px 16px
27
+ color-mix(in oklab, transparent, var(--sigvelo-shadow-color) 20%);
28
+ --sigvelo-shadow-louder: 0 12px 20px
29
+ color-mix(in oklab, transparent, var(--sigvelo-shadow-color) 24%);
30
+
31
+ /* Primary */
32
+ --sigvelo-primary-fill-softer: color-mix(in oklab, var(--sigvelo-primary-900), white 1%);
33
+ --sigvelo-primary-fill-soft: var(--sigvelo-primary-800);
34
+ --sigvelo-primary-fill-mid: color-mix(in oklab, var(--sigvelo-primary-600), black 7.5%);
35
+ --sigvelo-primary-fill-loud: var(--sigvelo-primary-200);
36
+ --sigvelo-primary-fill-louder: var(--sigvelo-primary-100);
37
+ --sigvelo-primary-text-on-soft: var(--sigvelo-primary-100);
38
+ --sigvelo-primary-text-on-mid: white;
39
+ --sigvelo-primary-text-on-loud: black;
40
+ --sigvelo-primary-text-colorful: var(--sigvelo-primary-500);
41
+ --sigvelo-primary-stroke-softer: color-mix(in oklab, var(--sigvelo-primary-900), white 7.5%);
42
+ --sigvelo-primary-stroke-soft: var(--sigvelo-primary-800);
43
+ --sigvelo-primary-stroke-mid: var(--sigvelo-primary-600);
44
+
45
+ /* Neutral */
46
+ --sigvelo-neutral-fill-softer: color-mix(in oklab, var(--sigvelo-neutral-900), white 1%);
47
+ --sigvelo-neutral-fill-soft: var(--sigvelo-neutral-800);
48
+ --sigvelo-neutral-fill-mid: color-mix(in oklab, var(--sigvelo-neutral-600), black 7.5%);
49
+ --sigvelo-neutral-fill-loud: var(--sigvelo-neutral-200);
50
+ --sigvelo-neutral-fill-louder: var(--sigvelo-neutral-100);
51
+ --sigvelo-neutral-text-on-soft: var(--sigvelo-neutral-100);
52
+ --sigvelo-neutral-text-on-mid: white;
53
+ --sigvelo-neutral-text-on-loud: black;
54
+ --sigvelo-neutral-text-colorful: var(--sigvelo-neutral-500);
55
+ --sigvelo-neutral-stroke-softer: color-mix(in oklab, var(--sigvelo-neutral-900), white 7.5%);
56
+ --sigvelo-neutral-stroke-soft: var(--sigvelo-neutral-800);
57
+ --sigvelo-neutral-stroke-mid: var(--sigvelo-neutral-600);
58
+
59
+ /* Constructive */
60
+ --sigvelo-success-fill-softer: color-mix(in oklab, var(--sigvelo-success-900), white 1%);
61
+ --sigvelo-success-fill-soft: var(--sigvelo-success-800);
62
+ --sigvelo-success-fill-mid: color-mix(in oklab, var(--sigvelo-success-600), black 16%);
63
+ --sigvelo-success-fill-loud: var(--sigvelo-success-200);
64
+ --sigvelo-success-fill-louder: var(--sigvelo-success-100);
65
+ --sigvelo-success-text-on-soft: var(--sigvelo-success-100);
66
+ --sigvelo-success-text-on-mid: white;
67
+ --sigvelo-success-text-on-loud: black;
68
+ --sigvelo-success-text-colorful: var(--sigvelo-success-500);
69
+ --sigvelo-success-stroke-softer: color-mix(in oklab, var(--sigvelo-success-900), white 7.5%);
70
+ --sigvelo-success-stroke-soft: var(--sigvelo-success-800);
71
+ --sigvelo-success-stroke-mid: var(--sigvelo-success-600);
72
+
73
+ /* Caution */
74
+ --sigvelo-warning-fill-softer: color-mix(in oklab, var(--sigvelo-warning-900), white 1%);
75
+ --sigvelo-warning-fill-soft: var(--sigvelo-warning-800);
76
+ --sigvelo-warning-fill-mid: color-mix(in oklab, var(--sigvelo-warning-600), black 18%);
77
+ --sigvelo-warning-fill-loud: var(--sigvelo-warning-200);
78
+ --sigvelo-warning-fill-louder: var(--sigvelo-warning-100);
79
+ --sigvelo-warning-text-on-soft: var(--sigvelo-warning-100);
80
+ --sigvelo-warning-text-on-mid: white;
81
+ --sigvelo-warning-text-on-loud: black;
82
+ --sigvelo-warning-text-colorful: var(--sigvelo-warning-500);
83
+ --sigvelo-warning-stroke-softer: color-mix(in oklab, var(--sigvelo-warning-900), white 7.5%);
84
+ --sigvelo-warning-stroke-soft: var(--sigvelo-warning-800);
85
+ --sigvelo-warning-stroke-mid: var(--sigvelo-warning-600);
86
+
87
+ /* Destructive */
88
+ --sigvelo-destructive-fill-softer: color-mix(in oklab, var(--sigvelo-destructive-900), white 1%);
89
+ --sigvelo-destructive-fill-soft: var(--sigvelo-destructive-800);
90
+ --sigvelo-destructive-fill-mid: color-mix(in oklab, var(--sigvelo-destructive-600), black 7.5%);
91
+ --sigvelo-destructive-fill-loud: var(--sigvelo-destructive-200);
92
+ --sigvelo-destructive-fill-louder: var(--sigvelo-destructive-100);
93
+ --sigvelo-destructive-text-on-soft: var(--sigvelo-destructive-100);
94
+ --sigvelo-destructive-text-on-mid: white;
95
+ --sigvelo-destructive-text-on-loud: black;
96
+ --sigvelo-destructive-text-colorful: var(--sigvelo-destructive-500);
97
+ --sigvelo-destructive-stroke-softer: color-mix(
98
+ in oklab,
99
+ var(--sigvelo-destructive-900),
100
+ white 7.5%
101
+ );
102
+ --sigvelo-destructive-stroke-soft: var(--sigvelo-destructive-800);
103
+ --sigvelo-destructive-stroke-mid: var(--sigvelo-destructive-600);
104
+ }
package/src/semantic-light.css ADDED
@@ -0,0 +1,123 @@
1
+ /*
2
+ * Light Theme Semantic Colors
3
+ *
4
+ * Semantic aliases for fill, text, and stroke across all color intents.
5
+ * Use these tokens in components instead of raw palette values.
6
+ */
7
+
8
+ :root,
9
+ .sigvelo-light,
10
+ [data-theme="light"] {
11
+ color-scheme: light;
12
+
13
+ --sigvelo-silent: white;
14
+ --sigvelo-strident: black;
15
+ --sigvelo-background-color: white;
16
+ --sigvelo-paper-color: white;
17
+ --sigvelo-text-body: var(--sigvelo-neutral-900);
18
+ --sigvelo-text-muted: var(--sigvelo-neutral-700);
19
+ --sigvelo-focus-color: var(--sigvelo-primary-fill-mid);
20
+ --sigvelo-focus-ring: var(--sigvelo-border-style) var(--sigvelo-focus-width)
21
+ var(--sigvelo-focus-color);
22
+ --sigvelo-backdrop-color: rgb(0 0 0 / 0.5);
23
+ --sigvelo-selection-background-color: var(--sigvelo-primary-300);
24
+ --sigvelo-selection-color: var(--sigvelo-text-body);
25
+ --sigvelo-shadow-color: black;
26
+ --sigvelo-shadow-softer: 0 0.0625rem 0.0625rem
27
+ color-mix(in oklab, transparent, var(--sigvelo-shadow-color) 4%);
28
+ --sigvelo-shadow-soft: 0 0.125rem 0.1875rem
29
+ color-mix(in oklab, transparent, var(--sigvelo-shadow-color) 8%);
30
+ --sigvelo-shadow-mid: 0 0.1875rem 0.375rem
31
+ color-mix(in oklab, transparent, var(--sigvelo-shadow-color) 10%);
32
+ --sigvelo-shadow-loud: 0 0.375rem 0.75rem
33
+ color-mix(in oklab, transparent, var(--sigvelo-shadow-color) 12%);
34
+ --sigvelo-shadow-louder: 0 0.5rem 1rem
35
+ color-mix(in oklab, transparent, var(--sigvelo-shadow-color) 14%);
36
+ --sigvelo-inset-shadow-softer: inset 0 0.125rem 0.125rem -0.125rem
37
+ color-mix(in oklab, black, transparent 94%);
38
+ --sigvelo-inset-shadow-soft: inset 0 0.25rem 0.25rem -0.25rem
39
+ color-mix(in oklab, black, transparent 90%);
40
+ --sigvelo-inset-shadow-mid: inset 0 0.5rem 0.5rem -0.5rem
41
+ color-mix(in oklab, black, transparent 88%);
42
+ --sigvelo-inset-shadow-loud: inset 0 1rem 1rem -1rem color-mix(in oklab, black, transparent 85%);
43
+ --sigvelo-inset-shadow-louder: inset 0 1.5rem 1.5rem -1.5rem
44
+ color-mix(in oklab, black, transparent 82%);
45
+
46
+ /* Primary */
47
+ --sigvelo-primary-fill-softer: var(--sigvelo-primary-100);
48
+ --sigvelo-primary-fill-soft: var(--sigvelo-primary-200);
49
+ --sigvelo-primary-fill-mid: color-mix(in oklab, var(--sigvelo-primary-600), black 2.5%);
50
+ --sigvelo-primary-fill-loud: var(--sigvelo-primary-800);
51
+ --sigvelo-primary-fill-louder: var(--sigvelo-primary-900);
52
+ --sigvelo-primary-text-on-soft: var(--sigvelo-primary-900);
53
+ --sigvelo-primary-text-on-mid: white;
54
+ --sigvelo-primary-text-on-loud: white;
55
+ --sigvelo-primary-text-colorful: color-mix(in oklab, var(--sigvelo-primary-600), black 12.5%);
56
+ --sigvelo-primary-stroke-softer: color-mix(in oklab, var(--sigvelo-primary-100), black 3%);
57
+ --sigvelo-primary-stroke-soft: var(--sigvelo-primary-300);
58
+ --sigvelo-primary-stroke-mid: var(--sigvelo-primary-500);
59
+
60
+ /* Neutral */
61
+ --sigvelo-neutral-fill-softer: var(--sigvelo-neutral-100);
62
+ --sigvelo-neutral-fill-soft: var(--sigvelo-neutral-200);
63
+ --sigvelo-neutral-fill-mid: color-mix(in oklab, var(--sigvelo-neutral-600), black 2.5%);
64
+ --sigvelo-neutral-fill-loud: var(--sigvelo-neutral-800);
65
+ --sigvelo-neutral-fill-louder: var(--sigvelo-neutral-900);
66
+ --sigvelo-neutral-text-on-soft: var(--sigvelo-neutral-900);
67
+ --sigvelo-neutral-text-on-mid: white;
68
+ --sigvelo-neutral-text-on-loud: white;
69
+ --sigvelo-neutral-text-colorful: color-mix(in oklab, var(--sigvelo-neutral-600), black 12.5%);
70
+ --sigvelo-neutral-stroke-softer: color-mix(in oklab, var(--sigvelo-neutral-100), black 3%);
71
+ --sigvelo-neutral-stroke-soft: var(--sigvelo-neutral-300);
72
+ --sigvelo-neutral-stroke-mid: var(--sigvelo-neutral-500);
73
+
74
+ /* Constructive */
75
+ --sigvelo-success-fill-softer: var(--sigvelo-success-100);
76
+ --sigvelo-success-fill-soft: var(--sigvelo-success-200);
77
+ --sigvelo-success-fill-mid: color-mix(in oklab, var(--sigvelo-success-600), black 12%);
78
+ --sigvelo-success-fill-loud: var(--sigvelo-success-800);
79
+ --sigvelo-success-fill-louder: var(--sigvelo-success-900);
80
+ --sigvelo-success-text-on-soft: var(--sigvelo-success-900);
81
+ --sigvelo-success-text-on-mid: white;
82
+ --sigvelo-success-text-on-loud: white;
83
+ --sigvelo-success-text-colorful: color-mix(in oklab, var(--sigvelo-success-600), black 12.5%);
84
+ --sigvelo-success-stroke-softer: color-mix(in oklab, var(--sigvelo-success-100), black 3%);
85
+ --sigvelo-success-stroke-soft: var(--sigvelo-success-300);
86
+ --sigvelo-success-stroke-mid: var(--sigvelo-success-500);
87
+
88
+ /* Caution */
89
+ --sigvelo-warning-fill-softer: var(--sigvelo-warning-100);
90
+ --sigvelo-warning-fill-soft: var(--sigvelo-warning-200);
91
+ --sigvelo-warning-fill-mid: color-mix(in oklab, var(--sigvelo-warning-600), black 15%);
92
+ --sigvelo-warning-fill-loud: var(--sigvelo-warning-800);
93
+ --sigvelo-warning-fill-louder: var(--sigvelo-warning-900);
94
+ --sigvelo-warning-text-on-soft: var(--sigvelo-warning-900);
95
+ --sigvelo-warning-text-on-mid: white;
96
+ --sigvelo-warning-text-on-loud: white;
97
+ --sigvelo-warning-text-colorful: color-mix(in oklab, var(--sigvelo-warning-600), black 12.5%);
98
+ --sigvelo-warning-stroke-softer: color-mix(in oklab, var(--sigvelo-warning-100), black 3%);
99
+ --sigvelo-warning-stroke-soft: var(--sigvelo-warning-300);
100
+ --sigvelo-warning-stroke-mid: var(--sigvelo-warning-500);
101
+
102
+ /* Destructive */
103
+ --sigvelo-destructive-fill-softer: var(--sigvelo-destructive-100);
104
+ --sigvelo-destructive-fill-soft: var(--sigvelo-destructive-200);
105
+ --sigvelo-destructive-fill-mid: color-mix(in oklab, var(--sigvelo-destructive-600), black 2.5%);
106
+ --sigvelo-destructive-fill-loud: var(--sigvelo-destructive-800);
107
+ --sigvelo-destructive-fill-louder: var(--sigvelo-destructive-900);
108
+ --sigvelo-destructive-text-on-soft: var(--sigvelo-destructive-900);
109
+ --sigvelo-destructive-text-on-mid: white;
110
+ --sigvelo-destructive-text-on-loud: white;
111
+ --sigvelo-destructive-text-colorful: color-mix(
112
+ in oklab,
113
+ var(--sigvelo-destructive-600),
114
+ black 12.5%
115
+ );
116
+ --sigvelo-destructive-stroke-softer: color-mix(
117
+ in oklab,
118
+ var(--sigvelo-destructive-100),
119
+ black 3%
120
+ );
121
+ --sigvelo-destructive-stroke-soft: var(--sigvelo-destructive-300);
122
+ --sigvelo-destructive-stroke-mid: var(--sigvelo-destructive-500);
123
+ }
package/src/spacing.css ADDED
@@ -0,0 +1,44 @@
1
+ /*
2
+ * Spacing & Form Control Tokens
3
+ */
4
+
5
+ :root,
6
+ .sigvelo-light,
7
+ .sigvelo-dark,
8
+ [data-theme="light"],
9
+ [data-theme="dark"] {
10
+ /* Spacing scale */
11
+ --sigvelo-space-xs: 0.25rem;
12
+ --sigvelo-space-sm: 0.5rem;
13
+ --sigvelo-space-md: 1rem;
14
+ --sigvelo-space-lg: 1.5rem;
15
+ --sigvelo-space-xl: 2rem;
16
+ --sigvelo-space-2xl: 3rem;
17
+
18
+ --sigvelo-content-spacing: 1.75rem;
19
+
20
+ /* Form control heights per size */
21
+ --sigvelo-form-control-height-xs: 1.75rem;
22
+ --sigvelo-form-control-height-sm: 2.25rem;
23
+ --sigvelo-form-control-height-md: 2.75rem;
24
+ --sigvelo-form-control-height-lg: 3.25rem;
25
+ --sigvelo-form-control-height-xl: 3.75rem;
26
+
27
+ /* Form control font sizes per size */
28
+ --sigvelo-form-control-font-size-xs: 0.75rem;
29
+ --sigvelo-form-control-font-size-sm: 0.875rem;
30
+ --sigvelo-form-control-font-size-md: 1rem;
31
+ --sigvelo-form-control-font-size-lg: 1.25rem;
32
+ --sigvelo-form-control-font-size-xl: 1.5rem;
33
+
34
+ /* Form control misc */
35
+ --sigvelo-form-control-required-content: "*";
36
+ --sigvelo-form-control-placeholder-color: color-mix(
37
+ in oklab,
38
+ var(--sigvelo-text-muted),
39
+ transparent 25%
40
+ );
41
+
42
+ /* Button */
43
+ --sigvelo-button-active-offset: 1.5px;
44
+ }
package/src/themes.css ADDED
@@ -0,0 +1,15 @@
1
+ /*
2
+ * Global theme styles
3
+ */
4
+
5
+ :root {
6
+ color-scheme: light dark;
7
+ accent-color: var(--sigvelo-primary-fill-mid);
8
+ }
9
+
10
+ .sigvelo-light,
11
+ .sigvelo-dark,
12
+ [data-theme="light"],
13
+ [data-theme="dark"] {
14
+ color: var(--sigvelo-text-body);
15
+ }
package/src/typography.css ADDED
@@ -0,0 +1,52 @@
1
+ /*
2
+ * Typography Tokens
3
+ */
4
+
5
+ :root,
6
+ .sigvelo-light,
7
+ .sigvelo-dark,
8
+ [data-theme="light"],
9
+ [data-theme="dark"] {
10
+ --sigvelo-font-family: system-ui, sans-serif;
11
+ --sigvelo-font-family-heading: var(--sigvelo-font-family);
12
+ --sigvelo-font-family-code:
13
+ SFMono-Regular, Consolas, Menlo, Monaco, "liberation mono", "Courier New", monospace;
14
+ --sigvelo-font-size: 16px;
15
+
16
+ /* Type scale */
17
+ --sigvelo-font-size-xs: 0.75rem;
18
+ --sigvelo-font-size-sm: 0.875rem;
19
+ --sigvelo-font-size-md: 1rem;
20
+ --sigvelo-font-size-lg: 1.125rem;
21
+ --sigvelo-font-size-xl: 1.25rem;
22
+ --sigvelo-font-size-2xl: 1.5rem;
23
+ --sigvelo-font-size-3xl: 1.875rem;
24
+ --sigvelo-font-size-4xl: 2.25rem;
25
+ --sigvelo-font-size-5xl: 3rem;
26
+
27
+ /* Fluid type scale */
28
+ --sigvelo-font-size-fluid-sm: clamp(0.8125rem, 0.75rem + 0.2vw, 0.875rem);
29
+ --sigvelo-font-size-fluid-md: clamp(0.9375rem, 0.875rem + 0.2vw, 1rem);
30
+ --sigvelo-font-size-fluid-lg: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
31
+ --sigvelo-font-size-fluid-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
32
+ --sigvelo-font-size-fluid-2xl: clamp(1.5rem, 1.25rem + 0.75vw, 2rem);
33
+ --sigvelo-font-size-fluid-3xl: clamp(1.875rem, 1.5rem + 1.2vw, 2.75rem);
34
+
35
+ --sigvelo-font-weight-normal: 400;
36
+ --sigvelo-font-weight-semibold: 500;
37
+ --sigvelo-font-weight-bold: 700;
38
+
39
+ /* Line heights */
40
+ --sigvelo-line-height: 1.6;
41
+ --sigvelo-line-height-tight: 1.2;
42
+ --sigvelo-line-height-snug: 1.375;
43
+ --sigvelo-line-height-normal: 1.5;
44
+ --sigvelo-line-height-relaxed: 1.625;
45
+ --sigvelo-line-height-loose: 2;
46
+
47
+ /* Letter spacing */
48
+ --sigvelo-letter-spacing-tight: -0.025em;
49
+ --sigvelo-letter-spacing-normal: 0;
50
+ --sigvelo-letter-spacing-wide: 0.025em;
51
+ --sigvelo-letter-spacing-wider: 0.05em;
52
+ }