@asafarim/design-tokens 0.4.5 → 0.4.9

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 (74) hide show
  1. package/CHANGELOG.md +26 -20
  2. package/LICENSE +21 -21
  3. package/README.md +139 -139
  4. package/css/index.css +8 -8
  5. package/css/tokens.base.css +168 -168
  6. package/css/tokens.dark.css +162 -162
  7. package/css/tokens.density.comfortable.css +6 -6
  8. package/css/tokens.density.compact.css +6 -6
  9. package/css/tokens.high-contrast.css +162 -162
  10. package/css/tokens.light.css +162 -162
  11. package/css/tokens.rtl.css +3 -3
  12. package/css/tokens.utilities.css +16 -16
  13. package/package.json +2 -2
  14. package/src/build/index.ts +5 -5
  15. package/src/build/toCssVars.ts +31 -31
  16. package/src/build/toJson.ts +20 -20
  17. package/src/build/validate.ts +90 -90
  18. package/src/core/types.ts +29 -29
  19. package/src/core/utils.ts +42 -42
  20. package/src/index.ts +60 -60
  21. package/src/themes/dark.ts +64 -64
  22. package/src/themes/densityComfortable.ts +11 -11
  23. package/src/themes/densityCompact.ts +11 -11
  24. package/src/themes/highContrast.ts +60 -60
  25. package/src/themes/index.ts +21 -21
  26. package/src/themes/light.ts +64 -64
  27. package/src/tokens/color/accent.ts +20 -20
  28. package/src/tokens/color/brand.ts +41 -41
  29. package/src/tokens/color/dataViz.ts +20 -20
  30. package/src/tokens/color/gradients.ts +13 -13
  31. package/src/tokens/color/index.ts +7 -7
  32. package/src/tokens/color/neutral.ts +32 -32
  33. package/src/tokens/color/overlays.ts +21 -21
  34. package/src/tokens/color/semantic.ts +36 -36
  35. package/src/tokens/effects/blur.ts +7 -7
  36. package/src/tokens/effects/index.ts +4 -4
  37. package/src/tokens/effects/opacity.ts +11 -11
  38. package/src/tokens/effects/shadows.ts +20 -20
  39. package/src/tokens/effects/textures.ts +11 -11
  40. package/src/tokens/iconography/index.ts +2 -2
  41. package/src/tokens/iconography/sizes.ts +9 -9
  42. package/src/tokens/iconography/strokeWidths.ts +7 -7
  43. package/src/tokens/index.ts +21 -21
  44. package/src/tokens/motion/duration.ts +7 -7
  45. package/src/tokens/motion/easing.ts +8 -8
  46. package/src/tokens/motion/index.ts +4 -4
  47. package/src/tokens/motion/reducedMotion.ts +9 -9
  48. package/src/tokens/motion/transitions.ts +16 -16
  49. package/src/tokens/shape/borders.ts +7 -7
  50. package/src/tokens/shape/index.ts +3 -3
  51. package/src/tokens/shape/radii.ts +9 -9
  52. package/src/tokens/shape/strokes.ts +7 -7
  53. package/src/tokens/spacing/density.ts +12 -12
  54. package/src/tokens/spacing/grid.ts +28 -28
  55. package/src/tokens/spacing/index.ts +5 -5
  56. package/src/tokens/spacing/layout.ts +20 -20
  57. package/src/tokens/spacing/rtl.ts +20 -20
  58. package/src/tokens/spacing/scale.ts +15 -15
  59. package/src/tokens/typography/families.ts +14 -14
  60. package/src/tokens/typography/headings.ts +29 -29
  61. package/src/tokens/typography/index.ts +7 -7
  62. package/src/tokens/typography/letterSpacing.ts +7 -7
  63. package/src/tokens/typography/lineHeights.ts +13 -13
  64. package/src/tokens/typography/responsive.ts +21 -21
  65. package/src/tokens/typography/sizes.ts +14 -14
  66. package/src/tokens/typography/weights.ts +13 -13
  67. package/src/tokens/ui/button.ts +25 -25
  68. package/src/tokens/ui/focus.ts +7 -7
  69. package/src/tokens/ui/index.ts +5 -5
  70. package/src/tokens/ui/input.ts +12 -12
  71. package/src/tokens/ui/overlay.ts +6 -6
  72. package/src/tokens/ui/surface.ts +9 -9
  73. package/src/tokens/zindex/index.ts +1 -1
  74. package/src/tokens/zindex/scale.ts +12 -12
package/src/themes/dark.ts CHANGED
@@ -1,64 +1,64 @@
1
- import type { ThemeDefinition } from "../core/types";
2
- import { brand } from "../tokens/color/brand";
3
- import { neutral } from "../tokens/color/neutral";
4
- import { semantic } from "../tokens/color/semantic";
5
- import { overlays } from "../tokens/color/overlays";
6
-
7
- export const dark: ThemeDefinition = {
8
- name: "dark",
9
- tokens: {
10
- "--asm-color-bg": "#0B1220",
11
- "--asm-color-surface": "#0F172A",
12
- "--asm-color-surface-muted": "#111B2E",
13
- "--asm-color-panel": "#0F172A",
14
- "--asm-color-modal": "#0F172A",
15
-
16
- "--asm-color-text": "#E5E7EB",
17
- "--asm-color-text-muted": "#9CA3AF",
18
- "--asm-color-border": "#1F2937",
19
-
20
- "--asm-color-brand-primary-50": brand.primary50.value,
21
- "--asm-color-brand-primary-500": brand.primary500.value,
22
- "--asm-color-brand-primary-600": brand.primary500.value,
23
- "--asm-color-brand-primary-700": brand.primary600.value,
24
-
25
- "--asm-color-semantic-success": semantic.success.value,
26
- "--asm-color-semantic-warning": semantic.warning.value,
27
- "--asm-color-semantic-error": semantic.error.value,
28
- "--asm-color-semantic-info": semantic.info.value,
29
-
30
- "--asm-color-button-primary-bg": brand.primary500.value,
31
- "--asm-color-button-primary-bg-hover": brand.primary600.value,
32
- "--asm-color-button-primary-bg-active": brand.primary600.value,
33
- "--asm-color-button-primary-text": neutral.white.value,
34
-
35
- "--asm-color-button-secondary-bg": "#111B2E",
36
- "--asm-color-button-secondary-text": "#E5E7EB",
37
-
38
- "--asm-color-button-ghost-bg-hover": "rgba(229, 231, 235, 0.08)",
39
-
40
- "--asm-color-button-destructive-bg": "#F87171",
41
- "--asm-color-button-destructive-text": "#0B1220",
42
-
43
- "--asm-color-button-disabled-bg": "#1F2937",
44
- "--asm-color-button-disabled-text": "#9CA3AF",
45
-
46
- "--asm-color-input-bg": "#0B1220",
47
- "--asm-color-input-text": "#E5E7EB",
48
- "--asm-color-input-border": "#1F2937",
49
- "--asm-color-input-border-hover": "#374151",
50
- "--asm-color-input-border-focus": brand.primary500.value,
51
- "--asm-color-input-placeholder": "#9CA3AF",
52
- "--asm-color-input-error-border": "#F87171",
53
- "--asm-color-input-success-border": "#22C55E",
54
-
55
- "--asm-color-focus-ring": brand.primary500.value,
56
-
57
- "--asm-color-overlay-scrim": overlays.scrimStrong.value,
58
-
59
- "--asm-color-dataviz-gridline": "#1F2937",
60
- "--asm-color-dataviz-axis": "#9CA3AF",
61
- "--asm-color-dataviz-tooltip-bg": "#111827",
62
- "--asm-color-dataviz-tooltip-text": "#F9FAFB"
63
- }
64
- };
1
+ import type { ThemeDefinition } from "../core/types";
2
+ import { brand } from "../tokens/color/brand";
3
+ import { neutral } from "../tokens/color/neutral";
4
+ import { semantic } from "../tokens/color/semantic";
5
+ import { overlays } from "../tokens/color/overlays";
6
+
7
+ export const dark: ThemeDefinition = {
8
+ name: "dark",
9
+ tokens: {
10
+ "--asm-color-bg": "#0B1220",
11
+ "--asm-color-surface": "#0F172A",
12
+ "--asm-color-surface-muted": "#111B2E",
13
+ "--asm-color-panel": "#0F172A",
14
+ "--asm-color-modal": "#0F172A",
15
+
16
+ "--asm-color-text": "#E5E7EB",
17
+ "--asm-color-text-muted": "#9CA3AF",
18
+ "--asm-color-border": "#1F2937",
19
+
20
+ "--asm-color-brand-primary-50": brand.primary50.value,
21
+ "--asm-color-brand-primary-500": brand.primary500.value,
22
+ "--asm-color-brand-primary-600": brand.primary500.value,
23
+ "--asm-color-brand-primary-700": brand.primary600.value,
24
+
25
+ "--asm-color-semantic-success": semantic.success.value,
26
+ "--asm-color-semantic-warning": semantic.warning.value,
27
+ "--asm-color-semantic-error": semantic.error.value,
28
+ "--asm-color-semantic-info": semantic.info.value,
29
+
30
+ "--asm-color-button-primary-bg": brand.primary500.value,
31
+ "--asm-color-button-primary-bg-hover": brand.primary600.value,
32
+ "--asm-color-button-primary-bg-active": brand.primary600.value,
33
+ "--asm-color-button-primary-text": neutral.white.value,
34
+
35
+ "--asm-color-button-secondary-bg": "#111B2E",
36
+ "--asm-color-button-secondary-text": "#E5E7EB",
37
+
38
+ "--asm-color-button-ghost-bg-hover": "rgba(229, 231, 235, 0.08)",
39
+
40
+ "--asm-color-button-destructive-bg": "#F87171",
41
+ "--asm-color-button-destructive-text": "#0B1220",
42
+
43
+ "--asm-color-button-disabled-bg": "#1F2937",
44
+ "--asm-color-button-disabled-text": "#9CA3AF",
45
+
46
+ "--asm-color-input-bg": "#0B1220",
47
+ "--asm-color-input-text": "#E5E7EB",
48
+ "--asm-color-input-border": "#1F2937",
49
+ "--asm-color-input-border-hover": "#374151",
50
+ "--asm-color-input-border-focus": brand.primary500.value,
51
+ "--asm-color-input-placeholder": "#9CA3AF",
52
+ "--asm-color-input-error-border": "#F87171",
53
+ "--asm-color-input-success-border": "#22C55E",
54
+
55
+ "--asm-color-focus-ring": brand.primary500.value,
56
+
57
+ "--asm-color-overlay-scrim": overlays.scrimStrong.value,
58
+
59
+ "--asm-color-dataviz-gridline": "#1F2937",
60
+ "--asm-color-dataviz-axis": "#9CA3AF",
61
+ "--asm-color-dataviz-tooltip-bg": "#111827",
62
+ "--asm-color-dataviz-tooltip-text": "#F9FAFB"
63
+ }
64
+ };
package/src/themes/densityComfortable.ts CHANGED
@@ -1,11 +1,11 @@
1
- import type { DensityDefinition } from "../core/types";
2
-
3
- export const densityComfortable: DensityDefinition = {
4
- name: "comfortable",
5
- tokens: {
6
- "--asm-density-factor": 1.05,
7
- "--asm-space-component-gap": "18px",
8
- "--asm-space-control-padding-y": "10px",
9
- "--asm-space-control-padding-x": "14px"
10
- }
11
- };
1
+ import type { DensityDefinition } from "../core/types";
2
+
3
+ export const densityComfortable: DensityDefinition = {
4
+ name: "comfortable",
5
+ tokens: {
6
+ "--asm-density-factor": 1.05,
7
+ "--asm-space-component-gap": "18px",
8
+ "--asm-space-control-padding-y": "10px",
9
+ "--asm-space-control-padding-x": "14px"
10
+ }
11
+ };
package/src/themes/densityCompact.ts CHANGED
@@ -1,11 +1,11 @@
1
- import type { DensityDefinition } from "../core/types";
2
-
3
- export const densityCompact: DensityDefinition = {
4
- name: "compact",
5
- tokens: {
6
- "--asm-density-factor": 0.9,
7
- "--asm-space-component-gap": "12px",
8
- "--asm-space-control-padding-y": "6px",
9
- "--asm-space-control-padding-x": "10px"
10
- }
11
- };
1
+ import type { DensityDefinition } from "../core/types";
2
+
3
+ export const densityCompact: DensityDefinition = {
4
+ name: "compact",
5
+ tokens: {
6
+ "--asm-density-factor": 0.9,
7
+ "--asm-space-component-gap": "12px",
8
+ "--asm-space-control-padding-y": "6px",
9
+ "--asm-space-control-padding-x": "10px"
10
+ }
11
+ };
package/src/themes/highContrast.ts CHANGED
@@ -1,60 +1,60 @@
1
- import type { ThemeDefinition } from "../core/types";
2
-
3
- export const highContrast: ThemeDefinition = {
4
- name: "high-contrast",
5
- tokens: {
6
- "--asm-color-bg": "#000000",
7
- "--asm-color-surface": "#000000",
8
- "--asm-color-surface-muted": "#000000",
9
- "--asm-color-panel": "#000000",
10
- "--asm-color-modal": "#000000",
11
-
12
- "--asm-color-text": "#FFFFFF",
13
- "--asm-color-text-muted": "#FFFFFF",
14
- "--asm-color-border": "#FFFFFF",
15
-
16
- "--asm-color-brand-primary-50": "#FFFFFF",
17
- "--asm-color-brand-primary-500": "#FFFFFF",
18
- "--asm-color-brand-primary-600": "#FFFFFF",
19
- "--asm-color-brand-primary-700": "#FFFFFF",
20
-
21
- "--asm-color-semantic-success": "#00FF00",
22
- "--asm-color-semantic-warning": "#FFFF00",
23
- "--asm-color-semantic-error": "#FF0000",
24
- "--asm-color-semantic-info": "#00FFFF",
25
-
26
- "--asm-color-button-primary-bg": "#FFFFFF",
27
- "--asm-color-button-primary-bg-hover": "#FFFFFF",
28
- "--asm-color-button-primary-bg-active": "#FFFFFF",
29
- "--asm-color-button-primary-text": "#000000",
30
-
31
- "--asm-color-button-secondary-bg": "#000000",
32
- "--asm-color-button-secondary-text": "#FFFFFF",
33
-
34
- "--asm-color-button-ghost-bg-hover": "#FFFFFF",
35
-
36
- "--asm-color-button-destructive-bg": "#FF0000",
37
- "--asm-color-button-destructive-text": "#000000",
38
-
39
- "--asm-color-button-disabled-bg": "#000000",
40
- "--asm-color-button-disabled-text": "#FFFFFF",
41
-
42
- "--asm-color-input-bg": "#000000",
43
- "--asm-color-input-text": "#FFFFFF",
44
- "--asm-color-input-border": "#FFFFFF",
45
- "--asm-color-input-border-hover": "#FFFFFF",
46
- "--asm-color-input-border-focus": "#FFFFFF",
47
- "--asm-color-input-placeholder": "#FFFFFF",
48
- "--asm-color-input-error-border": "#FF0000",
49
- "--asm-color-input-success-border": "#00FF00",
50
-
51
- "--asm-color-focus-ring": "#FFFFFF",
52
-
53
- "--asm-color-overlay-scrim": "rgba(255, 255, 255, 0.9)",
54
-
55
- "--asm-color-dataviz-gridline": "#FFFFFF",
56
- "--asm-color-dataviz-axis": "#FFFFFF",
57
- "--asm-color-dataviz-tooltip-bg": "#FFFFFF",
58
- "--asm-color-dataviz-tooltip-text": "#000000"
59
- }
60
- };
1
+ import type { ThemeDefinition } from "../core/types";
2
+
3
+ export const highContrast: ThemeDefinition = {
4
+ name: "high-contrast",
5
+ tokens: {
6
+ "--asm-color-bg": "#000000",
7
+ "--asm-color-surface": "#000000",
8
+ "--asm-color-surface-muted": "#000000",
9
+ "--asm-color-panel": "#000000",
10
+ "--asm-color-modal": "#000000",
11
+
12
+ "--asm-color-text": "#FFFFFF",
13
+ "--asm-color-text-muted": "#FFFFFF",
14
+ "--asm-color-border": "#FFFFFF",
15
+
16
+ "--asm-color-brand-primary-50": "#FFFFFF",
17
+ "--asm-color-brand-primary-500": "#FFFFFF",
18
+ "--asm-color-brand-primary-600": "#FFFFFF",
19
+ "--asm-color-brand-primary-700": "#FFFFFF",
20
+
21
+ "--asm-color-semantic-success": "#00FF00",
22
+ "--asm-color-semantic-warning": "#FFFF00",
23
+ "--asm-color-semantic-error": "#FF0000",
24
+ "--asm-color-semantic-info": "#00FFFF",
25
+
26
+ "--asm-color-button-primary-bg": "#FFFFFF",
27
+ "--asm-color-button-primary-bg-hover": "#FFFFFF",
28
+ "--asm-color-button-primary-bg-active": "#FFFFFF",
29
+ "--asm-color-button-primary-text": "#000000",
30
+
31
+ "--asm-color-button-secondary-bg": "#000000",
32
+ "--asm-color-button-secondary-text": "#FFFFFF",
33
+
34
+ "--asm-color-button-ghost-bg-hover": "#FFFFFF",
35
+
36
+ "--asm-color-button-destructive-bg": "#FF0000",
37
+ "--asm-color-button-destructive-text": "#000000",
38
+
39
+ "--asm-color-button-disabled-bg": "#000000",
40
+ "--asm-color-button-disabled-text": "#FFFFFF",
41
+
42
+ "--asm-color-input-bg": "#000000",
43
+ "--asm-color-input-text": "#FFFFFF",
44
+ "--asm-color-input-border": "#FFFFFF",
45
+ "--asm-color-input-border-hover": "#FFFFFF",
46
+ "--asm-color-input-border-focus": "#FFFFFF",
47
+ "--asm-color-input-placeholder": "#FFFFFF",
48
+ "--asm-color-input-error-border": "#FF0000",
49
+ "--asm-color-input-success-border": "#00FF00",
50
+
51
+ "--asm-color-focus-ring": "#FFFFFF",
52
+
53
+ "--asm-color-overlay-scrim": "rgba(255, 255, 255, 0.9)",
54
+
55
+ "--asm-color-dataviz-gridline": "#FFFFFF",
56
+ "--asm-color-dataviz-axis": "#FFFFFF",
57
+ "--asm-color-dataviz-tooltip-bg": "#FFFFFF",
58
+ "--asm-color-dataviz-tooltip-text": "#000000"
59
+ }
60
+ };
package/src/themes/index.ts CHANGED
@@ -1,21 +1,21 @@
1
- export { light } from "./light";
2
- export { dark } from "./dark";
3
- export { highContrast } from "./highContrast";
4
- export { densityCompact } from "./densityCompact";
5
- export { densityComfortable } from "./densityComfortable";
6
-
7
- import { light } from "./light";
8
- import { dark } from "./dark";
9
- import { highContrast } from "./highContrast";
10
- import { densityCompact } from "./densityCompact";
11
- import { densityComfortable } from "./densityComfortable";
12
-
13
- export const themes = {
14
- light,
15
- dark,
16
- highContrast,
17
- density: {
18
- compact: densityCompact,
19
- comfortable: densityComfortable
20
- }
21
- } as const;
1
+ export { light } from "./light";
2
+ export { dark } from "./dark";
3
+ export { highContrast } from "./highContrast";
4
+ export { densityCompact } from "./densityCompact";
5
+ export { densityComfortable } from "./densityComfortable";
6
+
7
+ import { light } from "./light";
8
+ import { dark } from "./dark";
9
+ import { highContrast } from "./highContrast";
10
+ import { densityCompact } from "./densityCompact";
11
+ import { densityComfortable } from "./densityComfortable";
12
+
13
+ export const themes = {
14
+ light,
15
+ dark,
16
+ highContrast,
17
+ density: {
18
+ compact: densityCompact,
19
+ comfortable: densityComfortable
20
+ }
21
+ } as const;
package/src/themes/light.ts CHANGED
@@ -1,64 +1,64 @@
1
- import type { ThemeDefinition } from "../core/types";
2
- import { brand } from "../tokens/color/brand";
3
- import { neutral } from "../tokens/color/neutral";
4
- import { semantic } from "../tokens/color/semantic";
5
- import { overlays } from "../tokens/color/overlays";
6
-
7
- export const light: ThemeDefinition = {
8
- name: "light",
9
- tokens: {
10
- "--asm-color-bg": neutral.gray50.value,
11
- "--asm-color-surface": neutral.white.value,
12
- "--asm-color-surface-muted": "#F3F4F6",
13
- "--asm-color-panel": neutral.white.value,
14
- "--asm-color-modal": neutral.white.value,
15
-
16
- "--asm-color-text": neutral.gray900.value,
17
- "--asm-color-text-muted": neutral.gray500.value,
18
- "--asm-color-border": neutral.gray300.value,
19
-
20
- "--asm-color-brand-primary-50": brand.primary50.value,
21
- "--asm-color-brand-primary-500": brand.primary500.value,
22
- "--asm-color-brand-primary-600": brand.primary600.value,
23
- "--asm-color-brand-primary-700": brand.primary700.value,
24
-
25
- "--asm-color-semantic-success": semantic.success.value,
26
- "--asm-color-semantic-warning": semantic.warning.value,
27
- "--asm-color-semantic-error": semantic.error.value,
28
- "--asm-color-semantic-info": semantic.info.value,
29
-
30
- "--asm-color-button-primary-bg": brand.primary600.value,
31
- "--asm-color-button-primary-bg-hover": brand.primary700.value,
32
- "--asm-color-button-primary-bg-active": brand.primary700.value,
33
- "--asm-color-button-primary-text": neutral.white.value,
34
-
35
- "--asm-color-button-secondary-bg": neutral.white.value,
36
- "--asm-color-button-secondary-text": neutral.gray900.value,
37
-
38
- "--asm-color-button-ghost-bg-hover": "rgba(17, 24, 39, 0.06)",
39
-
40
- "--asm-color-button-destructive-bg": semantic.error.value,
41
- "--asm-color-button-destructive-text": neutral.white.value,
42
-
43
- "--asm-color-button-disabled-bg": neutral.gray300.value,
44
- "--asm-color-button-disabled-text": neutral.gray700.value,
45
-
46
- "--asm-color-input-bg": neutral.white.value,
47
- "--asm-color-input-text": neutral.gray900.value,
48
- "--asm-color-input-border": neutral.gray300.value,
49
- "--asm-color-input-border-hover": neutral.gray500.value,
50
- "--asm-color-input-border-focus": brand.primary600.value,
51
- "--asm-color-input-placeholder": neutral.gray500.value,
52
- "--asm-color-input-error-border": semantic.error.value,
53
- "--asm-color-input-success-border": semantic.success.value,
54
-
55
- "--asm-color-focus-ring": brand.primary500.value,
56
-
57
- "--asm-color-overlay-scrim": overlays.scrim.value,
58
-
59
- "--asm-color-dataviz-gridline": neutral.gray300.value,
60
- "--asm-color-dataviz-axis": neutral.gray500.value,
61
- "--asm-color-dataviz-tooltip-bg": neutral.gray900.value,
62
- "--asm-color-dataviz-tooltip-text": neutral.gray50.value
63
- }
64
- };
1
+ import type { ThemeDefinition } from "../core/types";
2
+ import { brand } from "../tokens/color/brand";
3
+ import { neutral } from "../tokens/color/neutral";
4
+ import { semantic } from "../tokens/color/semantic";
5
+ import { overlays } from "../tokens/color/overlays";
6
+
7
+ export const light: ThemeDefinition = {
8
+ name: "light",
9
+ tokens: {
10
+ "--asm-color-bg": neutral.gray50.value,
11
+ "--asm-color-surface": neutral.white.value,
12
+ "--asm-color-surface-muted": "#F3F4F6",
13
+ "--asm-color-panel": neutral.white.value,
14
+ "--asm-color-modal": neutral.white.value,
15
+
16
+ "--asm-color-text": neutral.gray900.value,
17
+ "--asm-color-text-muted": neutral.gray500.value,
18
+ "--asm-color-border": neutral.gray300.value,
19
+
20
+ "--asm-color-brand-primary-50": brand.primary50.value,
21
+ "--asm-color-brand-primary-500": brand.primary500.value,
22
+ "--asm-color-brand-primary-600": brand.primary600.value,
23
+ "--asm-color-brand-primary-700": brand.primary700.value,
24
+
25
+ "--asm-color-semantic-success": semantic.success.value,
26
+ "--asm-color-semantic-warning": semantic.warning.value,
27
+ "--asm-color-semantic-error": semantic.error.value,
28
+ "--asm-color-semantic-info": semantic.info.value,
29
+
30
+ "--asm-color-button-primary-bg": brand.primary600.value,
31
+ "--asm-color-button-primary-bg-hover": brand.primary700.value,
32
+ "--asm-color-button-primary-bg-active": brand.primary700.value,
33
+ "--asm-color-button-primary-text": neutral.white.value,
34
+
35
+ "--asm-color-button-secondary-bg": neutral.white.value,
36
+ "--asm-color-button-secondary-text": neutral.gray900.value,
37
+
38
+ "--asm-color-button-ghost-bg-hover": "rgba(17, 24, 39, 0.06)",
39
+
40
+ "--asm-color-button-destructive-bg": semantic.error.value,
41
+ "--asm-color-button-destructive-text": neutral.white.value,
42
+
43
+ "--asm-color-button-disabled-bg": neutral.gray300.value,
44
+ "--asm-color-button-disabled-text": neutral.gray700.value,
45
+
46
+ "--asm-color-input-bg": neutral.white.value,
47
+ "--asm-color-input-text": neutral.gray900.value,
48
+ "--asm-color-input-border": neutral.gray300.value,
49
+ "--asm-color-input-border-hover": neutral.gray500.value,
50
+ "--asm-color-input-border-focus": brand.primary600.value,
51
+ "--asm-color-input-placeholder": neutral.gray500.value,
52
+ "--asm-color-input-error-border": semantic.error.value,
53
+ "--asm-color-input-success-border": semantic.success.value,
54
+
55
+ "--asm-color-focus-ring": brand.primary500.value,
56
+
57
+ "--asm-color-overlay-scrim": overlays.scrim.value,
58
+
59
+ "--asm-color-dataviz-gridline": neutral.gray300.value,
60
+ "--asm-color-dataviz-axis": neutral.gray500.value,
61
+ "--asm-color-dataviz-tooltip-bg": neutral.gray900.value,
62
+ "--asm-color-dataviz-tooltip-text": neutral.gray50.value
63
+ }
64
+ };
package/src/tokens/color/accent.ts CHANGED
@@ -1,20 +1,20 @@
1
- import type { Token } from "../../core/types";
2
-
3
- export const accent = {
4
- purple500: {
5
- value: "#8B5CF6",
6
- description: "Accent purple for special contexts (e.g., highlights)."
7
- } satisfies Token,
8
- cyan500: {
9
- value: "#06B6D4",
10
- description: "Accent cyan for special contexts (e.g., data accents)."
11
- } satisfies Token,
12
- pink500: {
13
- value: "#EC4899",
14
- description: "Accent pink for special contexts."
15
- } satisfies Token,
16
- lime500: {
17
- value: "#84CC16",
18
- description: "Accent lime for special contexts."
19
- } satisfies Token
20
- } as const;
1
+ import type { Token } from "../../core/types";
2
+
3
+ export const accent = {
4
+ purple500: {
5
+ value: "#8B5CF6",
6
+ description: "Accent purple for special contexts (e.g., highlights)."
7
+ } satisfies Token,
8
+ cyan500: {
9
+ value: "#06B6D4",
10
+ description: "Accent cyan for special contexts (e.g., data accents)."
11
+ } satisfies Token,
12
+ pink500: {
13
+ value: "#EC4899",
14
+ description: "Accent pink for special contexts."
15
+ } satisfies Token,
16
+ lime500: {
17
+ value: "#84CC16",
18
+ description: "Accent lime for special contexts."
19
+ } satisfies Token
20
+ } as const;
package/src/tokens/color/brand.ts CHANGED
@@ -1,41 +1,41 @@
1
- import type { Token } from "../../core/types";
2
-
3
- export const brand = {
4
- primary50: {
5
- value: "#EEF2FF",
6
- description: "Primary brand color scale - 50 (lightest)."
7
- } satisfies Token,
8
- primary100: {
9
- value: "#E0E7FF",
10
- description: "Primary brand color scale - 100."
11
- } satisfies Token,
12
- primary200: {
13
- value: "#C7D2FE",
14
- description: "Primary brand color scale - 200."
15
- } satisfies Token,
16
- primary300: {
17
- value: "#A5B4FC",
18
- description: "Primary brand color scale - 300."
19
- } satisfies Token,
20
- primary400: {
21
- value: "#818CF8",
22
- description: "Primary brand color scale - 400."
23
- } satisfies Token,
24
- primary500: {
25
- value: "#3A5AFE",
26
- description: "Primary brand color scale - 500 (core brand blue).",
27
- meta: { wcag: "Use for primary actions; pair with onPrimary tokens." }
28
- } satisfies Token,
29
- primary600: {
30
- value: "#304FFE",
31
- description: "Primary brand color scale - 600."
32
- } satisfies Token,
33
- primary700: {
34
- value: "#1E40FF",
35
- description: "Primary brand color scale - 700 (darkest brand accent)."
36
- } satisfies Token,
37
- secondary500: {
38
- value: "#14B8A6",
39
- description: "Optional secondary brand accent (teal)."
40
- } satisfies Token
41
- } as const;
1
+ import type { Token } from "../../core/types";
2
+
3
+ export const brand = {
4
+ primary50: {
5
+ value: "#EEF2FF",
6
+ description: "Primary brand color scale - 50 (lightest)."
7
+ } satisfies Token,
8
+ primary100: {
9
+ value: "#E0E7FF",
10
+ description: "Primary brand color scale - 100."
11
+ } satisfies Token,
12
+ primary200: {
13
+ value: "#C7D2FE",
14
+ description: "Primary brand color scale - 200."
15
+ } satisfies Token,
16
+ primary300: {
17
+ value: "#A5B4FC",
18
+ description: "Primary brand color scale - 300."
19
+ } satisfies Token,
20
+ primary400: {
21
+ value: "#818CF8",
22
+ description: "Primary brand color scale - 400."
23
+ } satisfies Token,
24
+ primary500: {
25
+ value: "#3A5AFE",
26
+ description: "Primary brand color scale - 500 (core brand blue).",
27
+ meta: { wcag: "Use for primary actions; pair with onPrimary tokens." }
28
+ } satisfies Token,
29
+ primary600: {
30
+ value: "#304FFE",
31
+ description: "Primary brand color scale - 600."
32
+ } satisfies Token,
33
+ primary700: {
34
+ value: "#1E40FF",
35
+ description: "Primary brand color scale - 700 (darkest brand accent)."
36
+ } satisfies Token,
37
+ secondary500: {
38
+ value: "#14B8A6",
39
+ description: "Optional secondary brand accent (teal)."
40
+ } satisfies Token
41
+ } as const;
package/src/tokens/color/dataViz.ts CHANGED
@@ -1,20 +1,20 @@
1
- import type { Token } from "../../core/types";
2
-
3
- export const dataViz = {
4
- series1: { value: "#3A5AFE", description: "DataViz series color 1 (brand primary)." } satisfies Token,
5
- series2: { value: "#14B8A6", description: "DataViz series color 2 (brand secondary)." } satisfies Token,
6
- series3: { value: "#8B5CF6", description: "DataViz series color 3." } satisfies Token,
7
- series4: { value: "#F59E0B", description: "DataViz series color 4." } satisfies Token,
8
- series5: { value: "#EF4444", description: "DataViz series color 5." } satisfies Token,
9
- series6: { value: "#0EA5E9", description: "DataViz series color 6." } satisfies Token,
10
- series7: { value: "#84CC16", description: "DataViz series color 7." } satisfies Token,
11
- series8: { value: "#EC4899", description: "DataViz series color 8." } satisfies Token,
12
- series9: { value: "#6366F1", description: "DataViz series color 9." } satisfies Token,
13
- series10: { value: "#F97316", description: "DataViz series color 10." } satisfies Token,
14
- series11: { value: "#22C55E", description: "DataViz series color 11." } satisfies Token,
15
- series12: { value: "#A855F7", description: "DataViz series color 12." } satisfies Token,
16
- gridline: { value: "#D1D5DB", description: "DataViz gridline color." } satisfies Token,
17
- axis: { value: "#6B7280", description: "DataViz axis label color." } satisfies Token,
18
- tooltipBg: { value: "#111827", description: "DataViz tooltip background color." } satisfies Token,
19
- tooltipText: { value: "#F9FAFB", description: "DataViz tooltip text color." } satisfies Token
20
- } as const;
1
+ import type { Token } from "../../core/types";
2
+
3
+ export const dataViz = {
4
+ series1: { value: "#3A5AFE", description: "DataViz series color 1 (brand primary)." } satisfies Token,
5
+ series2: { value: "#14B8A6", description: "DataViz series color 2 (brand secondary)." } satisfies Token,
6
+ series3: { value: "#8B5CF6", description: "DataViz series color 3." } satisfies Token,
7
+ series4: { value: "#F59E0B", description: "DataViz series color 4." } satisfies Token,
8
+ series5: { value: "#EF4444", description: "DataViz series color 5." } satisfies Token,
9
+ series6: { value: "#0EA5E9", description: "DataViz series color 6." } satisfies Token,
10
+ series7: { value: "#84CC16", description: "DataViz series color 7." } satisfies Token,
11
+ series8: { value: "#EC4899", description: "DataViz series color 8." } satisfies Token,
12
+ series9: { value: "#6366F1", description: "DataViz series color 9." } satisfies Token,
13
+ series10: { value: "#F97316", description: "DataViz series color 10." } satisfies Token,
14
+ series11: { value: "#22C55E", description: "DataViz series color 11." } satisfies Token,
15
+ series12: { value: "#A855F7", description: "DataViz series color 12." } satisfies Token,
16
+ gridline: { value: "#D1D5DB", description: "DataViz gridline color." } satisfies Token,
17
+ axis: { value: "#6B7280", description: "DataViz axis label color." } satisfies Token,
18
+ tooltipBg: { value: "#111827", description: "DataViz tooltip background color." } satisfies Token,
19
+ tooltipText: { value: "#F9FAFB", description: "DataViz tooltip text color." } satisfies Token
20
+ } as const;