@mcp-b/design-tokens 0.1.1 → 0.1.3

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 (10) hide show
  1. package/package.json +2 -2
  2. package/src/borders.css +7 -7
  3. package/src/motion.css +9 -9
  4. package/src/palettes.css +55 -55
  5. package/src/seeds.css +5 -5
  6. package/src/semantic-dark.css +109 -82
  7. package/src/semantic-light.css +103 -93
  8. package/src/spacing.css +20 -20
  9. package/src/themes.css +2 -2
  10. package/src/typography.css +28 -29
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@mcp-b/design-tokens",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "Shared design tokens for MCP-B React applications.",
5
- "homepage": "https://github.com/WebMCP-org/design-system#readme",
5
+ "homepage": "https://mcp-b-design-system-storybook.alexmnahas.workers.dev",
6
6
  "bugs": {
7
7
  "url": "https://github.com/WebMCP-org/design-system/issues"
8
8
  },
package/src/borders.css CHANGED
@@ -9,11 +9,11 @@
9
9
  [data-theme="dark"] {
10
10
  --sigvelo-border-style: solid;
11
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%;
12
+ --sigvelo-radius-xs: 0.1875rem; /* 3px */
13
+ --sigvelo-radius-sm: 0.25rem; /* 4px */
14
+ --sigvelo-radius-md: 0.375rem; /* 6px */
15
+ --sigvelo-radius-lg: 0.5625rem; /* 9px */
16
+ --sigvelo-radius-xl: 0.75rem; /* 12px */
17
+ --sigvelo-radius-full: 9999px;
18
+ --sigvelo-radius-circle: 50%;
19
19
  }
package/src/motion.css CHANGED
@@ -1,17 +1,17 @@
1
1
  :root {
2
- --sigvelo-motion-duration-fast: 150ms;
3
- --sigvelo-motion-duration-medium: 240ms;
4
- --sigvelo-motion-duration-slow: 360ms;
2
+ --sigvelo-duration-fast: 150ms;
3
+ --sigvelo-duration-medium: 240ms;
4
+ --sigvelo-duration-slow: 360ms;
5
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);
6
+ --sigvelo-ease-standard: cubic-bezier(0.2, 0, 0, 1);
7
+ --sigvelo-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
8
+ --sigvelo-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
9
9
  }
10
10
 
11
11
  @media (prefers-reduced-motion: reduce) {
12
12
  :root {
13
- --sigvelo-motion-duration-fast: 0ms;
14
- --sigvelo-motion-duration-medium: 0ms;
15
- --sigvelo-motion-duration-slow: 0ms;
13
+ --sigvelo-duration-fast: 0ms;
14
+ --sigvelo-duration-medium: 0ms;
15
+ --sigvelo-duration-slow: 0ms;
16
16
  }
17
17
  }
package/src/palettes.css CHANGED
@@ -14,67 +14,67 @@
14
14
  [data-theme="light"],
15
15
  [data-theme="dark"] {
16
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%);
17
+ --sigvelo-color-primary-50: color-mix(in oklab, var(--sigvelo-color-primary-seed), white 95%);
18
+ --sigvelo-color-primary-100: color-mix(in oklab, var(--sigvelo-color-primary-seed), white 87%);
19
+ --sigvelo-color-primary-200: color-mix(in oklab, var(--sigvelo-color-primary-seed), white 70%);
20
+ --sigvelo-color-primary-300: color-mix(in oklab, var(--sigvelo-color-primary-seed), white 47%);
21
+ --sigvelo-color-primary-400: color-mix(in oklab, var(--sigvelo-color-primary-seed), white 23%);
22
+ --sigvelo-color-primary-500: var(--sigvelo-color-primary-seed);
23
+ --sigvelo-color-primary-600: color-mix(in oklab, var(--sigvelo-color-primary-seed), black 15.5%);
24
+ --sigvelo-color-primary-700: color-mix(in oklab, var(--sigvelo-color-primary-seed), black 28.25%);
25
+ --sigvelo-color-primary-800: color-mix(in oklab, var(--sigvelo-color-primary-seed), black 43.5%);
26
+ --sigvelo-color-primary-900: color-mix(in oklab, var(--sigvelo-color-primary-seed), black 58.5%);
27
+ --sigvelo-color-primary-950: color-mix(in oklab, var(--sigvelo-color-primary-seed), black 73.75%);
28
28
 
29
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%);
30
+ --sigvelo-color-neutral-50: color-mix(in oklab, var(--sigvelo-color-neutral-seed), white 95%);
31
+ --sigvelo-color-neutral-100: color-mix(in oklab, var(--sigvelo-color-neutral-seed), white 87%);
32
+ --sigvelo-color-neutral-200: color-mix(in oklab, var(--sigvelo-color-neutral-seed), white 70%);
33
+ --sigvelo-color-neutral-300: color-mix(in oklab, var(--sigvelo-color-neutral-seed), white 47%);
34
+ --sigvelo-color-neutral-400: color-mix(in oklab, var(--sigvelo-color-neutral-seed), white 23%);
35
+ --sigvelo-color-neutral-500: var(--sigvelo-color-neutral-seed);
36
+ --sigvelo-color-neutral-600: color-mix(in oklab, var(--sigvelo-color-neutral-seed), black 15.5%);
37
+ --sigvelo-color-neutral-700: color-mix(in oklab, var(--sigvelo-color-neutral-seed), black 28.25%);
38
+ --sigvelo-color-neutral-800: color-mix(in oklab, var(--sigvelo-color-neutral-seed), black 43.5%);
39
+ --sigvelo-color-neutral-900: color-mix(in oklab, var(--sigvelo-color-neutral-seed), black 58.5%);
40
+ --sigvelo-color-neutral-950: color-mix(in oklab, var(--sigvelo-color-neutral-seed), black 73.75%);
41
41
 
42
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%);
43
+ --sigvelo-color-success-50: color-mix(in oklab, var(--sigvelo-color-success-seed), white 95%);
44
+ --sigvelo-color-success-100: color-mix(in oklab, var(--sigvelo-color-success-seed), white 87%);
45
+ --sigvelo-color-success-200: color-mix(in oklab, var(--sigvelo-color-success-seed), white 70%);
46
+ --sigvelo-color-success-300: color-mix(in oklab, var(--sigvelo-color-success-seed), white 47%);
47
+ --sigvelo-color-success-400: color-mix(in oklab, var(--sigvelo-color-success-seed), white 23%);
48
+ --sigvelo-color-success-500: var(--sigvelo-color-success-seed);
49
+ --sigvelo-color-success-600: color-mix(in oklab, var(--sigvelo-color-success-seed), black 15.5%);
50
+ --sigvelo-color-success-700: color-mix(in oklab, var(--sigvelo-color-success-seed), black 28.25%);
51
+ --sigvelo-color-success-800: color-mix(in oklab, var(--sigvelo-color-success-seed), black 43.5%);
52
+ --sigvelo-color-success-900: color-mix(in oklab, var(--sigvelo-color-success-seed), black 58.5%);
53
+ --sigvelo-color-success-950: color-mix(in oklab, var(--sigvelo-color-success-seed), black 73.75%);
54
54
 
55
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%);
56
+ --sigvelo-color-warning-50: color-mix(in oklab, var(--sigvelo-color-warning-seed), white 95%);
57
+ --sigvelo-color-warning-100: color-mix(in oklab, var(--sigvelo-color-warning-seed), white 87%);
58
+ --sigvelo-color-warning-200: color-mix(in oklab, var(--sigvelo-color-warning-seed), white 70%);
59
+ --sigvelo-color-warning-300: color-mix(in oklab, var(--sigvelo-color-warning-seed), white 47%);
60
+ --sigvelo-color-warning-400: color-mix(in oklab, var(--sigvelo-color-warning-seed), white 23%);
61
+ --sigvelo-color-warning-500: var(--sigvelo-color-warning-seed);
62
+ --sigvelo-color-warning-600: color-mix(in oklab, var(--sigvelo-color-warning-seed), black 15.5%);
63
+ --sigvelo-color-warning-700: color-mix(in oklab, var(--sigvelo-color-warning-seed), black 28.25%);
64
+ --sigvelo-color-warning-800: color-mix(in oklab, var(--sigvelo-color-warning-seed), black 43.5%);
65
+ --sigvelo-color-warning-900: color-mix(in oklab, var(--sigvelo-color-warning-seed), black 58.5%);
66
+ --sigvelo-color-warning-950: color-mix(in oklab, var(--sigvelo-color-warning-seed), black 73.75%);
67
67
 
68
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%);
69
+ --sigvelo-color-danger-50: color-mix(in oklab, var(--sigvelo-color-danger-seed), white 95%);
70
+ --sigvelo-color-danger-100: color-mix(in oklab, var(--sigvelo-color-danger-seed), white 87%);
71
+ --sigvelo-color-danger-200: color-mix(in oklab, var(--sigvelo-color-danger-seed), white 70%);
72
+ --sigvelo-color-danger-300: color-mix(in oklab, var(--sigvelo-color-danger-seed), white 47%);
73
+ --sigvelo-color-danger-400: color-mix(in oklab, var(--sigvelo-color-danger-seed), white 23%);
74
+ --sigvelo-color-danger-500: var(--sigvelo-color-danger-seed);
75
+ --sigvelo-color-danger-600: color-mix(in oklab, var(--sigvelo-color-danger-seed), black 15.5%);
76
+ --sigvelo-color-danger-700: color-mix(in oklab, var(--sigvelo-color-danger-seed), black 28.25%);
77
+ --sigvelo-color-danger-800: color-mix(in oklab, var(--sigvelo-color-danger-seed), black 43.5%);
78
+ --sigvelo-color-danger-900: color-mix(in oklab, var(--sigvelo-color-danger-seed), black 58.5%);
79
+ --sigvelo-color-danger-950: color-mix(in oklab, var(--sigvelo-color-danger-seed), black 73.75%);
80
80
  }
package/src/seeds.css CHANGED
@@ -12,9 +12,9 @@
12
12
  .sigvelo-dark,
13
13
  [data-theme="light"],
14
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;
15
+ --sigvelo-color-primary-seed: #4a97f4;
16
+ --sigvelo-color-neutral-seed: #8b8c93;
17
+ --sigvelo-color-success-seed: #5dbb55;
18
+ --sigvelo-color-warning-seed: #e89a26;
19
+ --sigvelo-color-danger-seed: #ef5655;
20
20
  }
package/src/semantic-dark.css CHANGED
@@ -6,99 +6,126 @@
6
6
  [data-theme="dark"] {
7
7
  color-scheme: dark;
8
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);
9
+ --sigvelo-color-canvas: var(--sigvelo-color-neutral-950);
10
+ --sigvelo-color-surface: color-mix(in oklab, var(--sigvelo-color-neutral-950), white 2.5%);
11
+ --sigvelo-color-text: var(--sigvelo-color-neutral-200);
12
+ --sigvelo-color-text-muted: var(--sigvelo-color-neutral-500);
13
+ --sigvelo-color-focus: var(--sigvelo-color-primary-bg);
16
14
  --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%);
15
+ var(--sigvelo-color-focus);
16
+ --sigvelo-color-backdrop: rgb(0 0 0 / 0.5);
17
+ --sigvelo-color-selection-bg: var(--sigvelo-color-primary-700);
18
+ --sigvelo-color-selection-text: var(--sigvelo-color-text);
19
+ --sigvelo-color-shadow: black;
20
+ --sigvelo-shadow-xs: 0 1px 2px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 8%);
21
+ --sigvelo-shadow-sm: 0 2px 4px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 12%);
22
+ --sigvelo-shadow-md: 0 4px 8px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 16%);
23
+ --sigvelo-shadow-lg: 0 8px 16px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 20%);
24
+ --sigvelo-shadow-xl: 0 12px 20px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 24%);
30
25
 
31
26
  /* 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);
27
+ --sigvelo-color-primary-bg-subtle: color-mix(
28
+ in oklab,
29
+ var(--sigvelo-color-primary-900),
30
+ white 1%
31
+ );
32
+ --sigvelo-color-primary-bg-muted: var(--sigvelo-color-primary-800);
33
+ --sigvelo-color-primary-bg: color-mix(in oklab, var(--sigvelo-color-primary-600), black 7.5%);
34
+ --sigvelo-color-primary-bg-strong: var(--sigvelo-color-primary-200);
35
+ --sigvelo-color-primary-bg-stronger: var(--sigvelo-color-primary-100);
36
+ --sigvelo-color-primary-text-on-subtle: var(--sigvelo-color-primary-100);
37
+ --sigvelo-color-primary-text-on-bg: white;
38
+ --sigvelo-color-primary-text-on-strong: black;
39
+ --sigvelo-color-primary-text: var(--sigvelo-color-primary-500);
40
+ --sigvelo-color-primary-border-subtle: color-mix(
41
+ in oklab,
42
+ var(--sigvelo-color-primary-900),
43
+ white 7.5%
44
+ );
45
+ --sigvelo-color-primary-border-muted: var(--sigvelo-color-primary-800);
46
+ --sigvelo-color-primary-border: var(--sigvelo-color-primary-600);
44
47
 
45
48
  /* 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);
49
+ --sigvelo-color-neutral-bg-subtle: color-mix(
50
+ in oklab,
51
+ var(--sigvelo-color-neutral-900),
52
+ white 1%
53
+ );
54
+ --sigvelo-color-neutral-bg-muted: var(--sigvelo-color-neutral-800);
55
+ --sigvelo-color-neutral-bg: color-mix(in oklab, var(--sigvelo-color-neutral-600), black 7.5%);
56
+ --sigvelo-color-neutral-bg-strong: var(--sigvelo-color-neutral-200);
57
+ --sigvelo-color-neutral-bg-stronger: var(--sigvelo-color-neutral-100);
58
+ --sigvelo-color-neutral-text-on-subtle: var(--sigvelo-color-neutral-100);
59
+ --sigvelo-color-neutral-text-on-bg: white;
60
+ --sigvelo-color-neutral-text-on-strong: black;
61
+ --sigvelo-color-neutral-text: var(--sigvelo-color-neutral-500);
62
+ --sigvelo-color-neutral-border-subtle: color-mix(
63
+ in oklab,
64
+ var(--sigvelo-color-neutral-900),
65
+ white 7.5%
66
+ );
67
+ --sigvelo-color-neutral-border-muted: var(--sigvelo-color-neutral-800);
68
+ --sigvelo-color-neutral-border: var(--sigvelo-color-neutral-600);
58
69
 
59
70
  /* 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);
71
+ --sigvelo-color-success-bg-subtle: color-mix(
72
+ in oklab,
73
+ var(--sigvelo-color-success-900),
74
+ white 1%
75
+ );
76
+ --sigvelo-color-success-bg-muted: var(--sigvelo-color-success-800);
77
+ --sigvelo-color-success-bg: color-mix(in oklab, var(--sigvelo-color-success-600), black 16%);
78
+ --sigvelo-color-success-bg-strong: var(--sigvelo-color-success-200);
79
+ --sigvelo-color-success-bg-stronger: var(--sigvelo-color-success-100);
80
+ --sigvelo-color-success-text-on-subtle: var(--sigvelo-color-success-100);
81
+ --sigvelo-color-success-text-on-bg: white;
82
+ --sigvelo-color-success-text-on-strong: black;
83
+ --sigvelo-color-success-text: var(--sigvelo-color-success-500);
84
+ --sigvelo-color-success-border-subtle: color-mix(
85
+ in oklab,
86
+ var(--sigvelo-color-success-900),
87
+ white 7.5%
88
+ );
89
+ --sigvelo-color-success-border-muted: var(--sigvelo-color-success-800);
90
+ --sigvelo-color-success-border: var(--sigvelo-color-success-600);
72
91
 
73
92
  /* 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);
93
+ --sigvelo-color-warning-bg-subtle: color-mix(
94
+ in oklab,
95
+ var(--sigvelo-color-warning-900),
96
+ white 1%
97
+ );
98
+ --sigvelo-color-warning-bg-muted: var(--sigvelo-color-warning-800);
99
+ --sigvelo-color-warning-bg: color-mix(in oklab, var(--sigvelo-color-warning-600), black 18%);
100
+ --sigvelo-color-warning-bg-strong: var(--sigvelo-color-warning-200);
101
+ --sigvelo-color-warning-bg-stronger: var(--sigvelo-color-warning-100);
102
+ --sigvelo-color-warning-text-on-subtle: var(--sigvelo-color-warning-100);
103
+ --sigvelo-color-warning-text-on-bg: white;
104
+ --sigvelo-color-warning-text-on-strong: black;
105
+ --sigvelo-color-warning-text: var(--sigvelo-color-warning-500);
106
+ --sigvelo-color-warning-border-subtle: color-mix(
107
+ in oklab,
108
+ var(--sigvelo-color-warning-900),
109
+ white 7.5%
110
+ );
111
+ --sigvelo-color-warning-border-muted: var(--sigvelo-color-warning-800);
112
+ --sigvelo-color-warning-border: var(--sigvelo-color-warning-600);
86
113
 
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(
114
+ /* Danger */
115
+ --sigvelo-color-danger-bg-subtle: color-mix(in oklab, var(--sigvelo-color-danger-900), white 1%);
116
+ --sigvelo-color-danger-bg-muted: var(--sigvelo-color-danger-800);
117
+ --sigvelo-color-danger-bg: color-mix(in oklab, var(--sigvelo-color-danger-600), black 7.5%);
118
+ --sigvelo-color-danger-bg-strong: var(--sigvelo-color-danger-200);
119
+ --sigvelo-color-danger-bg-stronger: var(--sigvelo-color-danger-100);
120
+ --sigvelo-color-danger-text-on-subtle: var(--sigvelo-color-danger-100);
121
+ --sigvelo-color-danger-text-on-bg: white;
122
+ --sigvelo-color-danger-text-on-strong: black;
123
+ --sigvelo-color-danger-text: var(--sigvelo-color-danger-500);
124
+ --sigvelo-color-danger-border-subtle: color-mix(
98
125
  in oklab,
99
- var(--sigvelo-destructive-900),
126
+ var(--sigvelo-color-danger-900),
100
127
  white 7.5%
101
128
  );
102
- --sigvelo-destructive-stroke-soft: var(--sigvelo-destructive-800);
103
- --sigvelo-destructive-stroke-mid: var(--sigvelo-destructive-600);
129
+ --sigvelo-color-danger-border-muted: var(--sigvelo-color-danger-800);
130
+ --sigvelo-color-danger-border: var(--sigvelo-color-danger-600);
104
131
  }
package/src/semantic-light.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  * Light Theme Semantic Colors
3
3
  *
4
- * Semantic aliases for fill, text, and stroke across all color intents.
4
+ * Semantic aliases for background, text, and border across all color intents.
5
5
  * Use these tokens in components instead of raw palette values.
6
6
  */
7
7
 
@@ -10,114 +10,124 @@
10
10
  [data-theme="light"] {
11
11
  color-scheme: light;
12
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);
13
+ --sigvelo-color-canvas: white;
14
+ --sigvelo-color-surface: white;
15
+ --sigvelo-color-text: var(--sigvelo-color-neutral-900);
16
+ --sigvelo-color-text-muted: var(--sigvelo-color-neutral-700);
17
+ --sigvelo-color-focus: var(--sigvelo-color-primary-bg);
20
18
  --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
19
+ var(--sigvelo-color-focus);
20
+ --sigvelo-color-backdrop: rgb(0 0 0 / 0.5);
21
+ --sigvelo-color-selection-bg: var(--sigvelo-color-primary-300);
22
+ --sigvelo-color-selection-text: var(--sigvelo-color-text);
23
+ --sigvelo-color-shadow: black;
24
+ --sigvelo-shadow-xs: 0 0.0625rem 0.0625rem
25
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 4%);
26
+ --sigvelo-shadow-sm: 0 0.125rem 0.1875rem
27
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 8%);
28
+ --sigvelo-shadow-md: 0 0.1875rem 0.375rem
29
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 10%);
30
+ --sigvelo-shadow-lg: 0 0.375rem 0.75rem
31
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 12%);
32
+ --sigvelo-shadow-xl: 0 0.5rem 1rem
33
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 14%);
34
+ --sigvelo-inset-shadow-xs: inset 0 0.125rem 0.125rem -0.125rem
37
35
  color-mix(in oklab, black, transparent 94%);
38
- --sigvelo-inset-shadow-soft: inset 0 0.25rem 0.25rem -0.25rem
36
+ --sigvelo-inset-shadow-sm: inset 0 0.25rem 0.25rem -0.25rem
39
37
  color-mix(in oklab, black, transparent 90%);
40
- --sigvelo-inset-shadow-mid: inset 0 0.5rem 0.5rem -0.5rem
38
+ --sigvelo-inset-shadow-md: inset 0 0.5rem 0.5rem -0.5rem
41
39
  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
40
+ --sigvelo-inset-shadow-lg: inset 0 1rem 1rem -1rem color-mix(in oklab, black, transparent 85%);
41
+ --sigvelo-inset-shadow-xl: inset 0 1.5rem 1.5rem -1.5rem
44
42
  color-mix(in oklab, black, transparent 82%);
45
43
 
46
44
  /* 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);
45
+ --sigvelo-color-primary-bg-subtle: var(--sigvelo-color-primary-100);
46
+ --sigvelo-color-primary-bg-muted: var(--sigvelo-color-primary-200);
47
+ --sigvelo-color-primary-bg: color-mix(in oklab, var(--sigvelo-color-primary-600), black 2.5%);
48
+ --sigvelo-color-primary-bg-strong: var(--sigvelo-color-primary-800);
49
+ --sigvelo-color-primary-bg-stronger: var(--sigvelo-color-primary-900);
50
+ --sigvelo-color-primary-text-on-subtle: var(--sigvelo-color-primary-900);
51
+ --sigvelo-color-primary-text-on-bg: white;
52
+ --sigvelo-color-primary-text-on-strong: white;
53
+ --sigvelo-color-primary-text: color-mix(in oklab, var(--sigvelo-color-primary-600), black 12.5%);
54
+ --sigvelo-color-primary-border-subtle: color-mix(
55
+ in oklab,
56
+ var(--sigvelo-color-primary-100),
57
+ black 3%
58
+ );
59
+ --sigvelo-color-primary-border-muted: var(--sigvelo-color-primary-300);
60
+ --sigvelo-color-primary-border: var(--sigvelo-color-primary-500);
59
61
 
60
62
  /* 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);
63
+ --sigvelo-color-neutral-bg-subtle: var(--sigvelo-color-neutral-100);
64
+ --sigvelo-color-neutral-bg-muted: var(--sigvelo-color-neutral-200);
65
+ --sigvelo-color-neutral-bg: color-mix(in oklab, var(--sigvelo-color-neutral-600), black 2.5%);
66
+ --sigvelo-color-neutral-bg-strong: var(--sigvelo-color-neutral-800);
67
+ --sigvelo-color-neutral-bg-stronger: var(--sigvelo-color-neutral-900);
68
+ --sigvelo-color-neutral-text-on-subtle: var(--sigvelo-color-neutral-900);
69
+ --sigvelo-color-neutral-text-on-bg: white;
70
+ --sigvelo-color-neutral-text-on-strong: white;
71
+ --sigvelo-color-neutral-text: color-mix(in oklab, var(--sigvelo-color-neutral-600), black 12.5%);
72
+ --sigvelo-color-neutral-border-subtle: color-mix(
73
+ in oklab,
74
+ var(--sigvelo-color-neutral-100),
75
+ black 3%
76
+ );
77
+ --sigvelo-color-neutral-border-muted: var(--sigvelo-color-neutral-300);
78
+ --sigvelo-color-neutral-border: var(--sigvelo-color-neutral-500);
73
79
 
74
80
  /* 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);
81
+ --sigvelo-color-success-bg-subtle: var(--sigvelo-color-success-100);
82
+ --sigvelo-color-success-bg-muted: var(--sigvelo-color-success-200);
83
+ --sigvelo-color-success-bg: color-mix(in oklab, var(--sigvelo-color-success-600), black 12%);
84
+ --sigvelo-color-success-bg-strong: var(--sigvelo-color-success-800);
85
+ --sigvelo-color-success-bg-stronger: var(--sigvelo-color-success-900);
86
+ --sigvelo-color-success-text-on-subtle: var(--sigvelo-color-success-900);
87
+ --sigvelo-color-success-text-on-bg: white;
88
+ --sigvelo-color-success-text-on-strong: white;
89
+ --sigvelo-color-success-text: color-mix(in oklab, var(--sigvelo-color-success-600), black 12.5%);
90
+ --sigvelo-color-success-border-subtle: color-mix(
91
+ in oklab,
92
+ var(--sigvelo-color-success-100),
93
+ black 3%
94
+ );
95
+ --sigvelo-color-success-border-muted: var(--sigvelo-color-success-300);
96
+ --sigvelo-color-success-border: var(--sigvelo-color-success-500);
87
97
 
88
98
  /* 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(
99
+ --sigvelo-color-warning-bg-subtle: var(--sigvelo-color-warning-100);
100
+ --sigvelo-color-warning-bg-muted: var(--sigvelo-color-warning-200);
101
+ --sigvelo-color-warning-bg: color-mix(in oklab, var(--sigvelo-color-warning-600), black 15%);
102
+ --sigvelo-color-warning-bg-strong: var(--sigvelo-color-warning-800);
103
+ --sigvelo-color-warning-bg-stronger: var(--sigvelo-color-warning-900);
104
+ --sigvelo-color-warning-text-on-subtle: var(--sigvelo-color-warning-900);
105
+ --sigvelo-color-warning-text-on-bg: white;
106
+ --sigvelo-color-warning-text-on-strong: white;
107
+ --sigvelo-color-warning-text: color-mix(in oklab, var(--sigvelo-color-warning-600), black 12.5%);
108
+ --sigvelo-color-warning-border-subtle: color-mix(
112
109
  in oklab,
113
- var(--sigvelo-destructive-600),
114
- black 12.5%
110
+ var(--sigvelo-color-warning-100),
111
+ black 3%
115
112
  );
116
- --sigvelo-destructive-stroke-softer: color-mix(
113
+ --sigvelo-color-warning-border-muted: var(--sigvelo-color-warning-300);
114
+ --sigvelo-color-warning-border: var(--sigvelo-color-warning-500);
115
+
116
+ /* Danger */
117
+ --sigvelo-color-danger-bg-subtle: var(--sigvelo-color-danger-100);
118
+ --sigvelo-color-danger-bg-muted: var(--sigvelo-color-danger-200);
119
+ --sigvelo-color-danger-bg: color-mix(in oklab, var(--sigvelo-color-danger-600), black 2.5%);
120
+ --sigvelo-color-danger-bg-strong: var(--sigvelo-color-danger-800);
121
+ --sigvelo-color-danger-bg-stronger: var(--sigvelo-color-danger-900);
122
+ --sigvelo-color-danger-text-on-subtle: var(--sigvelo-color-danger-900);
123
+ --sigvelo-color-danger-text-on-bg: white;
124
+ --sigvelo-color-danger-text-on-strong: white;
125
+ --sigvelo-color-danger-text: color-mix(in oklab, var(--sigvelo-color-danger-600), black 12.5%);
126
+ --sigvelo-color-danger-border-subtle: color-mix(
117
127
  in oklab,
118
- var(--sigvelo-destructive-100),
128
+ var(--sigvelo-color-danger-100),
119
129
  black 3%
120
130
  );
121
- --sigvelo-destructive-stroke-soft: var(--sigvelo-destructive-300);
122
- --sigvelo-destructive-stroke-mid: var(--sigvelo-destructive-500);
131
+ --sigvelo-color-danger-border-muted: var(--sigvelo-color-danger-300);
132
+ --sigvelo-color-danger-border: var(--sigvelo-color-danger-500);
123
133
  }
package/src/spacing.css CHANGED
@@ -8,34 +8,34 @@
8
8
  [data-theme="light"],
9
9
  [data-theme="dark"] {
10
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;
11
+ --sigvelo-spacing-1: 0.25rem;
12
+ --sigvelo-spacing-2: 0.5rem;
13
+ --sigvelo-spacing-4: 1rem;
14
+ --sigvelo-spacing-6: 1.5rem;
15
+ --sigvelo-spacing-8: 2rem;
16
+ --sigvelo-spacing-12: 3rem;
17
17
 
18
- --sigvelo-content-spacing: 1.75rem;
18
+ --sigvelo-spacing-content: 1.75rem;
19
19
 
20
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;
21
+ --sigvelo-control-height-xs: 1.75rem;
22
+ --sigvelo-control-height-sm: 2.25rem;
23
+ --sigvelo-control-height-md: 2.75rem;
24
+ --sigvelo-control-height-lg: 3.25rem;
25
+ --sigvelo-control-height-xl: 3.75rem;
26
26
 
27
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;
28
+ --sigvelo-control-text-xs: 0.75rem;
29
+ --sigvelo-control-text-sm: 0.875rem;
30
+ --sigvelo-control-text-md: 1rem;
31
+ --sigvelo-control-text-lg: 1.25rem;
32
+ --sigvelo-control-text-xl: 1.5rem;
33
33
 
34
34
  /* Form control misc */
35
- --sigvelo-form-control-required-content: "*";
36
- --sigvelo-form-control-placeholder-color: color-mix(
35
+ --sigvelo-control-required-content: "*";
36
+ --sigvelo-control-placeholder-color: color-mix(
37
37
  in oklab,
38
- var(--sigvelo-text-muted),
38
+ var(--sigvelo-color-text-muted),
39
39
  transparent 25%
40
40
  );
41
41
 
package/src/themes.css CHANGED
@@ -4,12 +4,12 @@
4
4
 
5
5
  :root {
6
6
  color-scheme: light dark;
7
- accent-color: var(--sigvelo-primary-fill-mid);
7
+ accent-color: var(--sigvelo-color-primary-bg);
8
8
  }
9
9
 
10
10
  .sigvelo-light,
11
11
  .sigvelo-dark,
12
12
  [data-theme="light"],
13
13
  [data-theme="dark"] {
14
- color: var(--sigvelo-text-body);
14
+ color: var(--sigvelo-color-text);
15
15
  }
package/src/typography.css CHANGED
@@ -7,46 +7,45 @@
7
7
  .sigvelo-dark,
8
8
  [data-theme="light"],
9
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:
10
+ --sigvelo-font-sans: system-ui, sans-serif;
11
+ --sigvelo-font-heading: var(--sigvelo-font-sans);
12
+ --sigvelo-font-mono:
13
13
  SFMono-Regular, Consolas, Menlo, Monaco, "liberation mono", "Courier New", monospace;
14
- --sigvelo-font-size: 16px;
14
+ --sigvelo-text-root: 16px;
15
15
 
16
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;
17
+ --sigvelo-text-xs: 0.75rem;
18
+ --sigvelo-text-sm: 0.875rem;
19
+ --sigvelo-text-base: 1rem;
20
+ --sigvelo-text-lg: 1.125rem;
21
+ --sigvelo-text-xl: 1.25rem;
22
+ --sigvelo-text-2xl: 1.5rem;
23
+ --sigvelo-text-3xl: 1.875rem;
24
+ --sigvelo-text-4xl: 2.25rem;
25
+ --sigvelo-text-5xl: 3rem;
26
26
 
27
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);
28
+ --sigvelo-text-fluid-sm: clamp(0.8125rem, 0.75rem + 0.2vw, 0.875rem);
29
+ --sigvelo-text-fluid-base: clamp(0.9375rem, 0.875rem + 0.2vw, 1rem);
30
+ --sigvelo-text-fluid-lg: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
31
+ --sigvelo-text-fluid-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
32
+ --sigvelo-text-fluid-2xl: clamp(1.5rem, 1.25rem + 0.75vw, 2rem);
33
+ --sigvelo-text-fluid-3xl: clamp(1.875rem, 1.5rem + 1.2vw, 2.75rem);
34
34
 
35
35
  --sigvelo-font-weight-normal: 400;
36
36
  --sigvelo-font-weight-semibold: 500;
37
37
  --sigvelo-font-weight-bold: 700;
38
38
 
39
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;
40
+ --sigvelo-leading-body: 1.6;
41
+ --sigvelo-leading-tight: 1.2;
42
+ --sigvelo-leading-snug: 1.375;
43
+ --sigvelo-leading-normal: 1.5;
44
+ --sigvelo-leading-relaxed: 1.625;
45
+ --sigvelo-leading-loose: 2;
46
46
 
47
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;
48
+ --sigvelo-tracking-normal: 0;
49
+ --sigvelo-tracking-wide: 0.025em;
50
+ --sigvelo-tracking-wider: 0.05em;
52
51
  }