@correlaid/design-tokens 1.0.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 (13) hide show
  1. package/README.md +111 -0
  2. package/build/css/variables.css +98 -0
  3. package/build/js/tokens.cjs +1577 -0
  4. package/build/js/tokens.js +107 -0
  5. package/build/json/tokens.json +124 -0
  6. package/build/scss/_variables.scss +95 -0
  7. package/package.json +37 -0
  8. package/tokens/border.json +11 -0
  9. package/tokens/color.json +52 -0
  10. package/tokens/gradient.json +6 -0
  11. package/tokens/shadow.json +10 -0
  12. package/tokens/spacing.json +15 -0
  13. package/tokens/typography.json +40 -0
package/build/js/tokens.js ADDED
@@ -0,0 +1,107 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const RadiusSm = "0.125rem";
6
+ export const RadiusBase = "0.25rem";
7
+ export const RadiusMd = "0.375rem";
8
+ export const RadiusLg = "0.5rem";
9
+ export const RadiusXl = "0.75rem";
10
+ export const Radius2xl = "1rem";
11
+ export const RadiusFull = "9999px";
12
+ export const ColorWhite = "#fff";
13
+ export const ColorPrimary50 = "#eff6ff";
14
+ export const ColorPrimary100 = "#dbeafe";
15
+ export const ColorPrimary200 = "#bfdbfe";
16
+ export const ColorPrimary300 = "#93c5fd";
17
+ export const ColorPrimary400 = "#60a5fa";
18
+ export const ColorPrimary500 = "#1e40af";
19
+ export const ColorPrimary600 = "#2563eb";
20
+ export const ColorPrimary700 = "#1d4ed8";
21
+ export const ColorPrimary800 = "#1e40af";
22
+ export const ColorPrimary900 = "#0f4799";
23
+ export const ColorGray50 = "#f9fafb";
24
+ export const ColorGray100 = "#f3f4f6";
25
+ export const ColorGray200 = "#e5e7eb";
26
+ export const ColorGray300 = "#d1d5db";
27
+ export const ColorGray400 = "#9ca3af";
28
+ export const ColorGray500 = "#6b7280";
29
+ export const ColorGray600 = "#4b5563";
30
+ export const ColorGray700 = "#374151";
31
+ export const ColorGray800 = "#1f2937";
32
+ export const ColorGray900 = "#111827";
33
+ export const ColorGreenExtraLight = "#e4f3e7";
34
+ export const ColorGreenLight = "#c4e38a";
35
+ export const ColorGreenBase = "#89cc96";
36
+ export const ColorGreenDark = "#26541b";
37
+ export const ColorKey = "#1e40af";
38
+ export const ColorBgLight = "#f2f7fd";
39
+ export const ColorLabBlueLight = "#4787e5";
40
+ export const ColorLabBlueMedium = "#5582dc";
41
+ export const ColorLabBlueDark = "#0f4799";
42
+ export const ColorLabPinkMedium = "#ffa4be";
43
+ export const ColorLabPinkLight = "#f6f2ff";
44
+ export const ColorBlack = "#111827";
45
+ export const ColorBlackLight = "#1f2937";
46
+ export const ColorBlackMuted = "#374151";
47
+ export const ColorLabMuted = "#6f91c2";
48
+ export const ColorGrayMuted = "#6b7280";
49
+ export const ColorText = "#1f2937";
50
+ export const ColorSuccess = "#10b981";
51
+ export const ColorWarning = "#f59e0b";
52
+ export const ColorError = "#ef4444";
53
+ export const ColorInfo = "#1e40af";
54
+ export const GradientLr =
55
+ "linear-gradient(to right, hsl(0deg, 0%, 100%) 0%, hsla(0deg, 0%, 100%, 0.738) 19%, hsla(0deg, 0%, 100%, 0.541) 34%, hsla(0deg, 0%, 100%, 0.382) 47%, hsla(0deg, 0%, 100%, 0.278) 56.5%, hsla(0deg, 0%, 100%, 0.194) 65%, hsla(0deg, 0%, 100%, 0.126) 73%, hsla(0deg, 0%, 100%, 0.075) 80.2%, hsla(0deg, 0%, 100%, 0.042) 86.1%, hsla(0deg, 0%, 100%, 0.021) 91%, hsla(0deg, 0%, 100%, 0.008) 95.2%, hsla(0deg, 0%, 100%, 0.002) 98.2%, hsla(0deg, 0%, 100%, 0) 100%)";
56
+ export const GradientRl =
57
+ "linear-gradient(to left, hsl(0deg, 0%, 100%) 0%, hsla(0deg, 0%, 100%, 0.738) 19%, hsla(0deg, 0%, 100%, 0.541) 34%, hsla(0deg, 0%, 100%, 0.382) 47%, hsla(0deg, 0%, 100%, 0.278) 56.5%, hsla(0deg, 0%, 100%, 0.194) 65%, hsla(0deg, 0%, 100%, 0.126) 73%, hsla(0deg, 0%, 100%, 0.075) 80.2%, hsla(0deg, 0%, 100%, 0.042) 86.1%, hsla(0deg, 0%, 100%, 0.021) 91%, hsla(0deg, 0%, 100%, 0.008) 95.2%, hsla(0deg, 0%, 100%, 0.002) 98.2%, hsla(0deg, 0%, 100%, 0) 100%)";
58
+ export const ShadowSm =
59
+ "0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.03)";
60
+ export const ShadowBase =
61
+ "0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px -1px rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02)";
62
+ export const ShadowMd =
63
+ "0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.08), 0 8px 12px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02)";
64
+ export const ShadowLg =
65
+ "0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.08), 0 16px 24px -4px rgba(0, 0, 0, 0.06), 0 2px 8px 0 rgba(0, 0, 0, 0.04)";
66
+ export const ShadowXl =
67
+ "0 20px 25px -5px rgba(0, 0, 0, 0.14), 0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 32px 48px -8px rgba(0, 0, 0, 0.08), 0 4px 12px 0 rgba(0, 0, 0, 0.05)";
68
+ export const Shadow2xl =
69
+ "0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.12), 0 48px 64px -12px rgba(0, 0, 0, 0.1), 0 8px 16px 0 rgba(0, 0, 0, 0.06)";
70
+ export const Space1 = "0.25rem";
71
+ export const Space2 = "0.5rem";
72
+ export const Space3 = "0.75rem";
73
+ export const Space4 = "1rem";
74
+ export const Space5 = "1.25rem";
75
+ export const Space6 = "1.5rem";
76
+ export const Space8 = "2rem";
77
+ export const Space10 = "2.5rem";
78
+ export const Space12 = "3rem";
79
+ export const Space16 = "4rem";
80
+ export const Space20 = "5rem";
81
+ export const FontFamilyMain =
82
+ "var(--font-roboto), -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, sans-serif";
83
+ export const FontFamilyAccent =
84
+ "var(--font-inter), -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, sans-serif";
85
+ export const FontFamilyMono =
86
+ "ui-monospace, 'Cascadia Code', 'Source Code Pro', menlo, consolas, 'DejaVu Sans Mono', monospace";
87
+ export const FontSizeXs = "0.75rem";
88
+ export const FontSizeSm = "0.875rem";
89
+ export const FontSizeBase = "18px";
90
+ export const FontSizeLg = "1.125rem";
91
+ export const FontSizeXl = "1.25rem";
92
+ export const FontSize2xl = "1.5rem";
93
+ export const FontSize3xl = "1.875rem";
94
+ export const FontSize4xl = "2.25rem";
95
+ export const FontSize5xl = "3rem";
96
+ export const FontWeightLight = "300";
97
+ export const FontWeightNormal = "400";
98
+ export const FontWeightMedium = "500";
99
+ export const FontWeightSemibold = "600";
100
+ export const FontWeightBold = "700";
101
+ export const FontWeightBlack = "800";
102
+ export const FontWeightHeavy = "900";
103
+ export const FontLineHeightTight = "1.25";
104
+ export const FontLineHeightNormal = "1.5";
105
+ export const FontLineHeightRelaxed = "1.75";
106
+ export const FontLineHeightLoose = "2";
107
+ export const CardTitleSize = "1.25rem";
package/build/json/tokens.json ADDED
@@ -0,0 +1,124 @@
1
+ {
2
+ "radius": {
3
+ "sm": "0.125rem",
4
+ "base": "0.25rem",
5
+ "md": "0.375rem",
6
+ "lg": "0.5rem",
7
+ "xl": "0.75rem",
8
+ "2xl": "1rem",
9
+ "full": "9999px"
10
+ },
11
+ "color": {
12
+ "white": "#fff",
13
+ "primary": {
14
+ "50": "#eff6ff",
15
+ "100": "#dbeafe",
16
+ "200": "#bfdbfe",
17
+ "300": "#93c5fd",
18
+ "400": "#60a5fa",
19
+ "500": "#1e40af",
20
+ "600": "#2563eb",
21
+ "700": "#1d4ed8",
22
+ "800": "#1e40af",
23
+ "900": "#0f4799"
24
+ },
25
+ "gray": {
26
+ "50": "#f9fafb",
27
+ "100": "#f3f4f6",
28
+ "200": "#e5e7eb",
29
+ "300": "#d1d5db",
30
+ "400": "#9ca3af",
31
+ "500": "#6b7280",
32
+ "600": "#4b5563",
33
+ "700": "#374151",
34
+ "800": "#1f2937",
35
+ "900": "#111827"
36
+ },
37
+ "green": {
38
+ "extra-light": "#e4f3e7",
39
+ "light": "#c4e38a",
40
+ "base": "#89cc96",
41
+ "dark": "#26541b"
42
+ },
43
+ "key": "#1e40af",
44
+ "bg-light": "#f2f7fd",
45
+ "lab-blue-light": "#4787e5",
46
+ "lab-blue-medium": "#5582dc",
47
+ "lab-blue-dark": "#0f4799",
48
+ "lab-pink-medium": "#ffa4be",
49
+ "lab-pink-light": "#f6f2ff",
50
+ "black": "#111827",
51
+ "black-light": "#1f2937",
52
+ "black-muted": "#374151",
53
+ "lab-muted": "#6f91c2",
54
+ "gray-muted": "#6b7280",
55
+ "text": "#1f2937",
56
+ "success": "#10b981",
57
+ "warning": "#f59e0b",
58
+ "error": "#ef4444",
59
+ "info": "#1e40af"
60
+ },
61
+ "gradient": {
62
+ "lr": "linear-gradient(to right, hsl(0deg, 0%, 100%) 0%, hsla(0deg, 0%, 100%, 0.738) 19%, hsla(0deg, 0%, 100%, 0.541) 34%, hsla(0deg, 0%, 100%, 0.382) 47%, hsla(0deg, 0%, 100%, 0.278) 56.5%, hsla(0deg, 0%, 100%, 0.194) 65%, hsla(0deg, 0%, 100%, 0.126) 73%, hsla(0deg, 0%, 100%, 0.075) 80.2%, hsla(0deg, 0%, 100%, 0.042) 86.1%, hsla(0deg, 0%, 100%, 0.021) 91%, hsla(0deg, 0%, 100%, 0.008) 95.2%, hsla(0deg, 0%, 100%, 0.002) 98.2%, hsla(0deg, 0%, 100%, 0) 100%)",
63
+ "rl": "linear-gradient(to left, hsl(0deg, 0%, 100%) 0%, hsla(0deg, 0%, 100%, 0.738) 19%, hsla(0deg, 0%, 100%, 0.541) 34%, hsla(0deg, 0%, 100%, 0.382) 47%, hsla(0deg, 0%, 100%, 0.278) 56.5%, hsla(0deg, 0%, 100%, 0.194) 65%, hsla(0deg, 0%, 100%, 0.126) 73%, hsla(0deg, 0%, 100%, 0.075) 80.2%, hsla(0deg, 0%, 100%, 0.042) 86.1%, hsla(0deg, 0%, 100%, 0.021) 91%, hsla(0deg, 0%, 100%, 0.008) 95.2%, hsla(0deg, 0%, 100%, 0.002) 98.2%, hsla(0deg, 0%, 100%, 0) 100%)"
64
+ },
65
+ "shadow": {
66
+ "sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.03)",
67
+ "base": "0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px -1px rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02)",
68
+ "md": "0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.08), 0 8px 12px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02)",
69
+ "lg": "0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.08), 0 16px 24px -4px rgba(0, 0, 0, 0.06), 0 2px 8px 0 rgba(0, 0, 0, 0.04)",
70
+ "xl": "0 20px 25px -5px rgba(0, 0, 0, 0.14), 0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 32px 48px -8px rgba(0, 0, 0, 0.08), 0 4px 12px 0 rgba(0, 0, 0, 0.05)",
71
+ "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.12), 0 48px 64px -12px rgba(0, 0, 0, 0.1), 0 8px 16px 0 rgba(0, 0, 0, 0.06)"
72
+ },
73
+ "space": {
74
+ "1": "0.25rem",
75
+ "2": "0.5rem",
76
+ "3": "0.75rem",
77
+ "4": "1rem",
78
+ "5": "1.25rem",
79
+ "6": "1.5rem",
80
+ "8": "2rem",
81
+ "10": "2.5rem",
82
+ "12": "3rem",
83
+ "16": "4rem",
84
+ "20": "5rem"
85
+ },
86
+ "font": {
87
+ "family": {
88
+ "main": "var(--font-roboto), -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, sans-serif",
89
+ "accent": "var(--font-inter), -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, sans-serif",
90
+ "mono": "ui-monospace, 'Cascadia Code', 'Source Code Pro', menlo, consolas, 'DejaVu Sans Mono', monospace"
91
+ },
92
+ "size": {
93
+ "xs": "0.75rem",
94
+ "sm": "0.875rem",
95
+ "base": "18px",
96
+ "lg": "1.125rem",
97
+ "xl": "1.25rem",
98
+ "2xl": "1.5rem",
99
+ "3xl": "1.875rem",
100
+ "4xl": "2.25rem",
101
+ "5xl": "3rem"
102
+ },
103
+ "weight": {
104
+ "light": "300",
105
+ "normal": "400",
106
+ "medium": "500",
107
+ "semibold": "600",
108
+ "bold": "700",
109
+ "black": "800",
110
+ "heavy": "900"
111
+ },
112
+ "line-height": {
113
+ "tight": "1.25",
114
+ "normal": "1.5",
115
+ "relaxed": "1.75",
116
+ "loose": "2"
117
+ }
118
+ },
119
+ "card": {
120
+ "title": {
121
+ "size": "1.25rem"
122
+ }
123
+ }
124
+ }
package/build/scss/_variables.scss ADDED
@@ -0,0 +1,95 @@
1
+
2
+ // Do not edit directly, this file was auto-generated.
3
+
4
+ $radius-sm: 0.125rem;
5
+ $radius-base: 0.25rem;
6
+ $radius-md: 0.375rem;
7
+ $radius-lg: 0.5rem;
8
+ $radius-xl: 0.75rem;
9
+ $radius-2xl: 1rem;
10
+ $radius-full: 9999px;
11
+ $color-white: #fff;
12
+ $color-primary-50: #eff6ff;
13
+ $color-primary-100: #dbeafe;
14
+ $color-primary-200: #bfdbfe;
15
+ $color-primary-300: #93c5fd;
16
+ $color-primary-400: #60a5fa;
17
+ $color-primary-600: #2563eb;
18
+ $color-primary-700: #1d4ed8;
19
+ $color-primary-800: #1e40af;
20
+ $color-primary-900: #0f4799;
21
+ $color-gray-50: #f9fafb;
22
+ $color-gray-100: #f3f4f6;
23
+ $color-gray-200: #e5e7eb;
24
+ $color-gray-300: #d1d5db;
25
+ $color-gray-400: #9ca3af;
26
+ $color-gray-500: #6b7280;
27
+ $color-gray-600: #4b5563;
28
+ $color-gray-700: #374151;
29
+ $color-gray-800: #1f2937;
30
+ $color-gray-900: #111827;
31
+ $color-green-extra-light: #e4f3e7;
32
+ $color-green-light: #c4e38a;
33
+ $color-green-base: #89cc96;
34
+ $color-green-dark: #26541b;
35
+ $color-bg-light: #f2f7fd;
36
+ $color-lab-blue-light: #4787e5;
37
+ $color-lab-blue-medium: #5582dc;
38
+ $color-lab-pink-medium: #ffa4be;
39
+ $color-lab-pink-light: #f6f2ff;
40
+ $color-lab-muted: #6f91c2;
41
+ $color-success: #10b981;
42
+ $color-warning: #f59e0b;
43
+ $color-error: #ef4444;
44
+ $gradient-lr: linear-gradient(to right, hsl(0deg, 0%, 100%) 0%, hsla(0deg, 0%, 100%, 0.738) 19%, hsla(0deg, 0%, 100%, 0.541) 34%, hsla(0deg, 0%, 100%, 0.382) 47%, hsla(0deg, 0%, 100%, 0.278) 56.5%, hsla(0deg, 0%, 100%, 0.194) 65%, hsla(0deg, 0%, 100%, 0.126) 73%, hsla(0deg, 0%, 100%, 0.075) 80.2%, hsla(0deg, 0%, 100%, 0.042) 86.1%, hsla(0deg, 0%, 100%, 0.021) 91%, hsla(0deg, 0%, 100%, 0.008) 95.2%, hsla(0deg, 0%, 100%, 0.002) 98.2%, hsla(0deg, 0%, 100%, 0) 100%);
45
+ $gradient-rl: linear-gradient(to left, hsl(0deg, 0%, 100%) 0%, hsla(0deg, 0%, 100%, 0.738) 19%, hsla(0deg, 0%, 100%, 0.541) 34%, hsla(0deg, 0%, 100%, 0.382) 47%, hsla(0deg, 0%, 100%, 0.278) 56.5%, hsla(0deg, 0%, 100%, 0.194) 65%, hsla(0deg, 0%, 100%, 0.126) 73%, hsla(0deg, 0%, 100%, 0.075) 80.2%, hsla(0deg, 0%, 100%, 0.042) 86.1%, hsla(0deg, 0%, 100%, 0.021) 91%, hsla(0deg, 0%, 100%, 0.008) 95.2%, hsla(0deg, 0%, 100%, 0.002) 98.2%, hsla(0deg, 0%, 100%, 0) 100%);
46
+ $shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.03);
47
+ $shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px -1px rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
48
+ $shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.08), 0 8px 12px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
49
+ $shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.08), 0 16px 24px -4px rgba(0, 0, 0, 0.06), 0 2px 8px 0 rgba(0, 0, 0, 0.04);
50
+ $shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.14), 0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 32px 48px -8px rgba(0, 0, 0, 0.08), 0 4px 12px 0 rgba(0, 0, 0, 0.05);
51
+ $shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.12), 0 48px 64px -12px rgba(0, 0, 0, 0.1), 0 8px 16px 0 rgba(0, 0, 0, 0.06);
52
+ $space-1: 0.25rem;
53
+ $space-2: 0.5rem;
54
+ $space-3: 0.75rem;
55
+ $space-4: 1rem;
56
+ $space-5: 1.25rem;
57
+ $space-6: 1.5rem;
58
+ $space-8: 2rem;
59
+ $space-10: 2.5rem;
60
+ $space-12: 3rem;
61
+ $space-16: 4rem;
62
+ $space-20: 5rem;
63
+ $font-family-main: var(--font-roboto), -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, sans-serif;
64
+ $font-family-accent: var(--font-inter), -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, sans-serif;
65
+ $font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', menlo, consolas, 'DejaVu Sans Mono', monospace;
66
+ $font-size-xs: 0.75rem;
67
+ $font-size-sm: 0.875rem;
68
+ $font-size-base: 18px;
69
+ $font-size-lg: 1.125rem;
70
+ $font-size-xl: 1.25rem;
71
+ $font-size-2xl: 1.5rem;
72
+ $font-size-3xl: 1.875rem;
73
+ $font-size-4xl: 2.25rem;
74
+ $font-size-5xl: 3rem;
75
+ $font-weight-light: 300;
76
+ $font-weight-normal: 400;
77
+ $font-weight-medium: 500;
78
+ $font-weight-semibold: 600;
79
+ $font-weight-bold: 700;
80
+ $font-weight-black: 800;
81
+ $font-weight-heavy: 900;
82
+ $font-line-height-tight: 1.25;
83
+ $font-line-height-normal: 1.5;
84
+ $font-line-height-relaxed: 1.75;
85
+ $font-line-height-loose: 2;
86
+ $color-primary-500: $color-primary-800;
87
+ $color-key: $color-primary-800;
88
+ $color-lab-blue-dark: $color-primary-900;
89
+ $color-black: $color-gray-900;
90
+ $color-black-light: $color-gray-800;
91
+ $color-black-muted: $color-gray-700;
92
+ $color-gray-muted: $color-gray-500;
93
+ $card-title-size: $font-size-xl;
94
+ $color-text: $color-black-light;
95
+ $color-info: $color-key;
package/package.json ADDED
@@ -0,0 +1,37 @@
1
+ {
2
+ "name": "@correlaid/design-tokens",
3
+ "version": "1.0.0",
4
+ "description": "CorrelAid design tokens built with Style Dictionary",
5
+ "type": "module",
6
+ "main": "build/js/tokens.cjs",
7
+ "module": "build/js/tokens.js",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./build/js/tokens.js",
11
+ "require": "./build/js/tokens.cjs"
12
+ },
13
+ "./css": "./build/css/variables.css",
14
+ "./scss": "./build/scss/_variables.scss",
15
+ "./json": "./build/json/tokens.json"
16
+ },
17
+ "scripts": {
18
+ "build": "node config.js",
19
+ "clean": "rm -rf build",
20
+ "prepublishOnly": "npm run build"
21
+ },
22
+ "keywords": [
23
+ "design-tokens",
24
+ "correlaid",
25
+ "design-system",
26
+ "style-dictionary"
27
+ ],
28
+ "author": "CorrelAid",
29
+ "license": "ISC",
30
+ "devDependencies": {
31
+ "style-dictionary": "^5.1.1"
32
+ },
33
+ "files": [
34
+ "build",
35
+ "tokens"
36
+ ]
37
+ }
package/tokens/border.json ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "radius": {
3
+ "sm": { "value": "0.125rem" },
4
+ "base": { "value": "0.25rem" },
5
+ "md": { "value": "0.375rem" },
6
+ "lg": { "value": "0.5rem" },
7
+ "xl": { "value": "0.75rem" },
8
+ "2xl": { "value": "1rem" },
9
+ "full": { "value": "9999px" }
10
+ }
11
+ }
package/tokens/color.json ADDED
@@ -0,0 +1,52 @@
1
+ {
2
+ "color": {
3
+ "white": { "value": "#fff" },
4
+ "primary": {
5
+ "50": { "value": "#eff6ff" },
6
+ "100": { "value": "#dbeafe" },
7
+ "200": { "value": "#bfdbfe" },
8
+ "300": { "value": "#93c5fd" },
9
+ "400": { "value": "#60a5fa" },
10
+ "500": { "value": "{color.primary.800}" },
11
+ "600": { "value": "#2563eb" },
12
+ "700": { "value": "#1d4ed8" },
13
+ "800": { "value": "#1e40af" },
14
+ "900": { "value": "#0f4799" }
15
+ },
16
+ "gray": {
17
+ "50": { "value": "#f9fafb" },
18
+ "100": { "value": "#f3f4f6" },
19
+ "200": { "value": "#e5e7eb" },
20
+ "300": { "value": "#d1d5db" },
21
+ "400": { "value": "#9ca3af" },
22
+ "500": { "value": "#6b7280" },
23
+ "600": { "value": "#4b5563" },
24
+ "700": { "value": "#374151" },
25
+ "800": { "value": "#1f2937" },
26
+ "900": { "value": "#111827" }
27
+ },
28
+ "green": {
29
+ "extra-light": { "value": "#e4f3e7" },
30
+ "light": { "value": "#c4e38a" },
31
+ "base": { "value": "#89cc96" },
32
+ "dark": { "value": "#26541b" }
33
+ },
34
+ "key": { "value": "{color.primary.800}" },
35
+ "bg-light": { "value": "#f2f7fd" },
36
+ "lab-blue-light": { "value": "#4787e5" },
37
+ "lab-blue-medium": { "value": "#5582dc" },
38
+ "lab-blue-dark": { "value": "{color.primary.900}" },
39
+ "lab-pink-medium": { "value": "#ffa4be" },
40
+ "lab-pink-light": { "value": "#f6f2ff" },
41
+ "black": { "value": "{color.gray.900}" },
42
+ "black-light": { "value": "{color.gray.800}" },
43
+ "black-muted": { "value": "{color.gray.700}" },
44
+ "lab-muted": { "value": "#6f91c2" },
45
+ "gray-muted": { "value": "{color.gray.500}" },
46
+ "text": { "value": "{color.black-light}" },
47
+ "success": { "value": "#10b981" },
48
+ "warning": { "value": "#f59e0b" },
49
+ "error": { "value": "#ef4444" },
50
+ "info": { "value": "{color.key}" }
51
+ }
52
+ }
package/tokens/gradient.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "gradient": {
3
+ "lr": { "value": "linear-gradient(to right, hsl(0deg, 0%, 100%) 0%, hsla(0deg, 0%, 100%, 0.738) 19%, hsla(0deg, 0%, 100%, 0.541) 34%, hsla(0deg, 0%, 100%, 0.382) 47%, hsla(0deg, 0%, 100%, 0.278) 56.5%, hsla(0deg, 0%, 100%, 0.194) 65%, hsla(0deg, 0%, 100%, 0.126) 73%, hsla(0deg, 0%, 100%, 0.075) 80.2%, hsla(0deg, 0%, 100%, 0.042) 86.1%, hsla(0deg, 0%, 100%, 0.021) 91%, hsla(0deg, 0%, 100%, 0.008) 95.2%, hsla(0deg, 0%, 100%, 0.002) 98.2%, hsla(0deg, 0%, 100%, 0) 100%)" },
4
+ "rl": { "value": "linear-gradient(to left, hsl(0deg, 0%, 100%) 0%, hsla(0deg, 0%, 100%, 0.738) 19%, hsla(0deg, 0%, 100%, 0.541) 34%, hsla(0deg, 0%, 100%, 0.382) 47%, hsla(0deg, 0%, 100%, 0.278) 56.5%, hsla(0deg, 0%, 100%, 0.194) 65%, hsla(0deg, 0%, 100%, 0.126) 73%, hsla(0deg, 0%, 100%, 0.075) 80.2%, hsla(0deg, 0%, 100%, 0.042) 86.1%, hsla(0deg, 0%, 100%, 0.021) 91%, hsla(0deg, 0%, 100%, 0.008) 95.2%, hsla(0deg, 0%, 100%, 0.002) 98.2%, hsla(0deg, 0%, 100%, 0) 100%)" }
5
+ }
6
+ }
package/tokens/shadow.json ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "shadow": {
3
+ "sm": { "value": "0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.03)" },
4
+ "base": { "value": "0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px -1px rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02)" },
5
+ "md": { "value": "0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.08), 0 8px 12px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02)" },
6
+ "lg": { "value": "0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.08), 0 16px 24px -4px rgba(0, 0, 0, 0.06), 0 2px 8px 0 rgba(0, 0, 0, 0.04)" },
7
+ "xl": { "value": "0 20px 25px -5px rgba(0, 0, 0, 0.14), 0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 32px 48px -8px rgba(0, 0, 0, 0.08), 0 4px 12px 0 rgba(0, 0, 0, 0.05)" },
8
+ "2xl": { "value": "0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.12), 0 48px 64px -12px rgba(0, 0, 0, 0.1), 0 8px 16px 0 rgba(0, 0, 0, 0.06)" }
9
+ }
10
+ }
package/tokens/spacing.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "space": {
3
+ "1": { "value": "0.25rem" },
4
+ "2": { "value": "0.5rem" },
5
+ "3": { "value": "0.75rem" },
6
+ "4": { "value": "1rem" },
7
+ "5": { "value": "1.25rem" },
8
+ "6": { "value": "1.5rem" },
9
+ "8": { "value": "2rem" },
10
+ "10": { "value": "2.5rem" },
11
+ "12": { "value": "3rem" },
12
+ "16": { "value": "4rem" },
13
+ "20": { "value": "5rem" }
14
+ }
15
+ }
package/tokens/typography.json ADDED
@@ -0,0 +1,40 @@
1
+ {
2
+ "font": {
3
+ "family": {
4
+ "main": { "value": "var(--font-roboto), -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, sans-serif" },
5
+ "accent": { "value": "var(--font-inter), -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, sans-serif" },
6
+ "mono": { "value": "ui-monospace, 'Cascadia Code', 'Source Code Pro', menlo, consolas, 'DejaVu Sans Mono', monospace" }
7
+ },
8
+ "size": {
9
+ "xs": { "value": "0.75rem" },
10
+ "sm": { "value": "0.875rem" },
11
+ "base": { "value": "18px" },
12
+ "lg": { "value": "1.125rem" },
13
+ "xl": { "value": "1.25rem" },
14
+ "2xl": { "value": "1.5rem" },
15
+ "3xl": { "value": "1.875rem" },
16
+ "4xl": { "value": "2.25rem" },
17
+ "5xl": { "value": "3rem" }
18
+ },
19
+ "weight": {
20
+ "light": { "value": "300" },
21
+ "normal": { "value": "400" },
22
+ "medium": { "value": "500" },
23
+ "semibold": { "value": "600" },
24
+ "bold": { "value": "700" },
25
+ "black": { "value": "800" },
26
+ "heavy": { "value": "900" }
27
+ },
28
+ "line-height": {
29
+ "tight": { "value": "1.25" },
30
+ "normal": { "value": "1.5" },
31
+ "relaxed": { "value": "1.75" },
32
+ "loose": { "value": "2" }
33
+ }
34
+ },
35
+ "card": {
36
+ "title": {
37
+ "size": { "value": "{font.size.xl}" }
38
+ }
39
+ }
40
+ }