@solid-design-system/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 (3) hide show
  1. package/dist/tokens.scss +123 -0
  2. package/dist/tokens.tailwind.json +487 -0
  3. package/package.json +74 -0
package/dist/tokens.scss ADDED
@@ -0,0 +1,123 @@
1
+ /* Converted Tailwind Config to scss */
2
+ $sd-backgroundColor-primary-100: (rgb(var(--sd-color-primary-100, 236 240 249)) /* Additional background color (light mode) */);
3
+ $sd-backgroundColor-primary-200: (rgb(var(--sd-color-primary-200, 224 233 243)) /* Additional background color (light mode) on primary-100 */);
4
+ $sd-backgroundColor-primary-300: (rgb(var(--sd-color-primary-300, 200 213 231)) /* Used for chip background */);
5
+ $sd-backgroundColor-primary-500: (rgb(var(--sd-color-primary-500, 70 109 175)) /* Used for hover interaction */);
6
+ $sd-backgroundColor-primary-800: (rgb(var(--sd-color-primary-800, 5 21 48)) /* Used for pressed interaction */);
7
+ $sd-backgroundColor-primary-DEFAULT: (rgb(var(--sd-color-primary, 0 53 142)) /* Inverted background color (light mode)
8
+ Used for primary-button background */);
9
+ $sd-backgroundColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Default background color (light mode) */);
10
+ $sd-backgroundColor-accent-300: (rgb(var(--sd-color-accent-300, 108 194 84)) /* Used for hover interaction */);
11
+ $sd-backgroundColor-accent-500: (rgb(var(--sd-color-accent-500, 66 147 50)) /* Used for pressed interaction */);
12
+ $sd-backgroundColor-accent-DEFAULT: (rgb(var(--sd-color-accent, 67 176 42)) /* Used for cta-button background */);
13
+ $sd-backgroundColor-neutral-100: (rgb(var(--sd-color-neutral-100, 246 246 246)) /* Additional background color (light mode) */);
14
+ $sd-backgroundColor-neutral-200: (rgb(var(--sd-color-neutral-200, 233 233 233)) /* Additional background color (light mode) on neutral-100
15
+ Used for hover interaction */);
16
+ $sd-backgroundColor-neutral-300: (rgb(var(--sd-color-neutral-300, 218 218 218)) /* Used for flag background */);
17
+ $sd-backgroundColor-neutral-400: (rgb(var(--sd-color-neutral-400, 195 195 195)) /* Used for */);
18
+ $sd-backgroundColor-neutral-500: (rgb(var(--sd-color-neutral-500, 174 174 174)) /* Used for disabled state */);
19
+ $sd-backgroundColor-neutral-600: (rgb(var(--sd-color-neutral-600, 136 136 136)) /* Used for inverted disabled state */);
20
+ $sd-backgroundColor-neutral-800: (rgb(var(--sd-color-neutral-800, 81 81 81)) /* Used for badge */);
21
+ $sd-backgroundColor-success: (rgb(var(--sd-color-success, 67 176 42)) /* Used for notifications */);
22
+ $sd-backgroundColor-error: (rgb(var(--sd-color-error, 204 25 55)) /* Used for notifications, badges, toolbar timer */);
23
+ $sd-backgroundColor-info: (rgb(var(--sd-color-info, 21 130 213)) /* Used for notification */);
24
+ $sd-backgroundColor-warning: (rgb(var(--sd-color-warning, 187 141 32)) /* Used for notification */);
25
+ $sd-backgroundColor-transparent: transparent;
26
+ $sd-backgroundColor-inherit: inherit;
27
+ $sd-backgroundColor-current: currentColor;
28
+
29
+ $sd-borderColor-primary-100: (rgb(var(--sd-color-primary-100, 236 240 249)) /* Used for inverted hover interaction */);
30
+ $sd-borderColor-primary-200: (rgb(var(--sd-color-primary-200, 224 233 243)) /* Used for inverted pressed interaction */);
31
+ $sd-borderColor-primary-400: (rgb(var(--sd-color-primary-400, 153 171 208)) /* Used for inverted dividers */);
32
+ $sd-borderColor-primary-500: (rgb(var(--sd-color-primary-500, 70 109 175)) /* Used for hover interaction */);
33
+ $sd-borderColor-primary-800: (rgb(var(--sd-color-primary-800, 5 21 48)) /* Used for pressed interaction */);
34
+ $sd-borderColor-primary-DEFAULT: (rgb(var(--sd-color-primary, 0 53 142)) /* Used for buttons, select field, focus state */);
35
+ $sd-borderColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Used for buttons */);
36
+ $sd-borderColor-accent-300: (rgb(var(--sd-color-accent-300, 108 194 84)) /* Used for radio hover states */);
37
+ $sd-borderColor-accent-DEFAULT: (rgb(var(--sd-color-accent, 67 176 42)) /* Used for brand-shape
38
+ */);
39
+ $sd-borderColor-neutral-200: (rgb(var(--sd-color-neutral-200, 233 233 233)) /* Used for spinner */);
40
+ $sd-borderColor-neutral-300: (rgb(var(--sd-color-neutral-300, 218 218 218)));
41
+ $sd-borderColor-neutral-400: (rgb(var(--sd-color-neutral-400, 195 195 195)) /* Default border color.
42
+ Used for divider, teaser, container, ... */);
43
+ $sd-borderColor-neutral-500: (rgb(var(--sd-color-neutral-500, 174 174 174)) /* Used for disabled state */);
44
+ $sd-borderColor-neutral-600: (rgb(var(--sd-color-neutral-600, 136 136 136)) /* Used for inverted disabled state */);
45
+ $sd-borderColor-neutral-800: (rgb(var(--sd-color-neutral-800, 81 81 81)) /* Used for form fields, switch, radio, checkbox */);
46
+ $sd-borderColor-success: (rgb(var(--sd-color-success, 67 176 42)) /* Used for valid form fields
47
+ */);
48
+ $sd-borderColor-error-400: (rgb(var(--sd-color-error-400, 172 25 56)) /* Used for hover states of invalid form elements */);
49
+ $sd-borderColor-error-DEFAULT: (rgb(var(--sd-color-error, 204 25 55)) /* Used for invalid form fields */);
50
+ $sd-borderColor-transparent: transparent;
51
+ $sd-borderColor-inherit: inherit;
52
+ $sd-borderColor-current: currentColor;
53
+
54
+ $sd-borderRadius-default: (var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */);
55
+ $sd-borderRadius-sm: (var(--sd-border-radius-sm, 0.125rem) /* 2px */);
56
+ $sd-borderRadius-md: (var(--sd-border-radius-md, 0.375rem) /* 6px Inner focus outline */);
57
+ $sd-borderRadius-lg: (var(--sd-border-radius-lg, 0.5rem) /* 8px Outer focus outline */);
58
+ $sd-borderRadius-full: (var(--sd-border-radius-full, 9999px) /* Radius for pill shape buttons */);
59
+ $sd-borderRadius-none: (var(--sd-border-radius-none, 0px));
60
+
61
+ $sd-fontSize-sm: (var(--sd-font-size-sm, 0.875rem) /* 14px */);
62
+ $sd-fontSize-base: (var(--sd-font-size-base, 1rem) /* 16px */);
63
+ $sd-fontSize-lg: (var(--sd-font-size-lg, 1.25rem) /* 20px */);
64
+ $sd-fontSize-xl: (var(--sd-font-size-xl, 1.5rem) /* 24px */);
65
+ $sd-fontSize-2xl: (var(--sd-font-size-2xl, 1.75rem) /* 28px */);
66
+ $sd-fontSize-3xl: (var(--sd-font-size-3xl, 2rem) /* 32px */);
67
+ $sd-fontSize-4xl: (var(--sd-font-size-4xl, 2.5rem) /* 40px */);
68
+
69
+ $sd-fontWeight-normal: 400;
70
+ $sd-fontWeight-bold: 700;
71
+
72
+ $sd-lineHeight-none: (var(--sd-line-height-none, 100%) /* Used for buttons, input fields etc. */);
73
+ $sd-lineHeight-tight: (var(--sd-line-height-tight, 120%) /* Used for display and large titles */);
74
+ $sd-lineHeight-normal: (var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */);
75
+
76
+ $sd-opacity-0: (var(--sd-opacity-0, 0));
77
+ $sd-opacity-5: (var(--sd-opacity-5, 0.05));
78
+ $sd-opacity-10: (var(--sd-opacity-10, 0.1));
79
+ $sd-opacity-20: (var(--sd-opacity-20, 0.2));
80
+ $sd-opacity-30: (var(--sd-opacity-30, 0.3));
81
+ $sd-opacity-50: (var(--sd-opacity-50, 0.5));
82
+ $sd-opacity-70: (var(--sd-opacity-70, 0.7));
83
+ $sd-opacity-75: (var(--sd-opacity-75, 0.75));
84
+ $sd-opacity-85: (var(--sd-opacity-85, 0.85));
85
+ $sd-opacity-90: (var(--sd-opacity-90, 0.9));
86
+
87
+ $sd-spacing-0: (var(--sd-spacing-0, 0px) /* No spacing (manually added) */);
88
+ $sd-spacing-1: (var(--sd-spacing-1, 0.25rem) /* 4px */);
89
+ $sd-spacing-2: (var(--sd-spacing-2, 0.5rem) /* 8px */);
90
+ $sd-spacing-3: (var(--sd-spacing-3, 0.75rem) /* 12px */);
91
+ $sd-spacing-4: (var(--sd-spacing-4, 1rem) /* 16px */);
92
+ $sd-spacing-5: (var(--sd-spacing-5, 1.25rem) /* 20px */);
93
+ $sd-spacing-6: (var(--sd-spacing-6, 1.5rem) /* 24px */);
94
+ $sd-spacing-8: (var(--sd-spacing-8, 2rem) /* 32px */);
95
+ $sd-spacing-10: (var(--sd-spacing-10, 2.5rem) /* 40px */);
96
+ $sd-spacing-12: (var(--sd-spacing-12, 3rem) /* 48px */);
97
+ $sd-spacing-16: (var(--sd-spacing-16, 4rem) /* 64px */);
98
+ $sd-spacing-18: (var(--sd-spacing-18, 5rem) /* 80px */);
99
+ $sd-spacing-24: (var(--sd-spacing-24, 6rem) /* 96px */);
100
+ $sd-spacing-32: (var(--sd-spacing-32, 8rem) /* 128px */);
101
+ $sd-spacing-40: (var(--sd-spacing-40, 10rem) /* 160px */);
102
+ $sd-spacing-0\.5: (var(--sd-spacing-0-5, 0.125rem) /* 2px */);
103
+ $sd-spacing-auto: (var(--sd-spacing-auto, auto) /* Automatic spacing (manually added) */);
104
+ $sd-spacing-2\.5: (var(--sd-spacing-2-5, 0.625rem) /* 10px */);
105
+
106
+ $sd-textColor-black: (rgb(var(--sd-color-black, 24 24 24)) /* Default text color */);
107
+ $sd-textColor-primary-100: (rgb(var(--sd-color-primary-100, 236 240 249)) /* Used for inverted hover interaction button label */);
108
+ $sd-textColor-primary-200: (rgb(var(--sd-color-primary-200, 224 233 243)) /* Used for inverted hover interaction text link and inverted pressed interaction button label */);
109
+ $sd-textColor-primary-400: (rgb(var(--sd-color-primary-400, 153 171 208)) /* Additional text inverted color
110
+ Used for inverted pressed interaction text link */);
111
+ $sd-textColor-primary-500: (rgb(var(--sd-color-primary-500, 70 109 175)) /* Used for hover interaction */);
112
+ $sd-textColor-primary-800: (rgb(var(--sd-color-primary-800, 5 21 48)) /* Used for pressed interaction */);
113
+ $sd-textColor-primary-DEFAULT: (rgb(var(--sd-color-primary, 0 53 142)) /* Primary brand color for text */);
114
+ $sd-textColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Inverted text color */);
115
+ $sd-textColor-accent: (rgb(var(--sd-color-accent, 67 176 42)) /* Accent brand color for highlighted text */);
116
+ $sd-textColor-neutral-500: (rgb(var(--sd-color-neutral-500, 174 174 174)) /* Used for disabled state */);
117
+ $sd-textColor-neutral-600: (rgb(var(--sd-color-neutral-600, 136 136 136)) /* Used for inverted disabled state */);
118
+ $sd-textColor-neutral-700: (rgb(var(--sd-color-neutral-700, 104 104 104)) /* Additional text color */);
119
+ $sd-textColor-success: (rgb(var(--sd-color-success, 67 176 42)) /* Used for success messages */);
120
+ $sd-textColor-error: (rgb(var(--sd-color-error, 204 25 55)) /* Used for error messages */);
121
+ $sd-textColor-transparent: transparent;
122
+ $sd-textColor-inherit: inherit;
123
+ $sd-textColor-current: currentColor;
package/dist/tokens.tailwind.json ADDED
@@ -0,0 +1,487 @@
1
+ {
2
+ "accentColor": {
3
+ "black": "rgb(var(--sd-color-black, 24 24 24) / <alpha-value>) /* Default text color */",
4
+ "primary": {
5
+ "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction button label */",
6
+ "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted hover interaction text link and inverted pressed interaction button label */",
7
+ "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Additional text inverted color\nUsed for inverted pressed interaction text link */",
8
+ "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
9
+ "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
10
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
11
+ },
12
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
13
+ "accent": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Accent brand color for highlighted text */",
14
+ "neutral": {
15
+ "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
16
+ "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
17
+ "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
18
+ },
19
+ "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for success messages */",
20
+ "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
21
+ "transparent": "transparent",
22
+ "inherit": "inherit",
23
+ "current": "currentColor"
24
+ },
25
+ "backgroundColor": {
26
+ "primary": {
27
+ "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Additional background color (light mode) */",
28
+ "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Additional background color (light mode) on primary-100 */",
29
+ "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
30
+ "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
31
+ "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
32
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for primary-button background */"
33
+ },
34
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) */",
35
+ "accent": {
36
+ "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for hover interaction */",
37
+ "500": "rgb(var(--sd-color-accent-500, 66 147 50) / <alpha-value>) /* Used for pressed interaction */",
38
+ "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for cta-button background */"
39
+ },
40
+ "neutral": {
41
+ "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
42
+ "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Additional background color (light mode) on neutral-100\nUsed for hover interaction */",
43
+ "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag background */",
44
+ "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Used for */",
45
+ "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
46
+ "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
47
+ "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
48
+ },
49
+ "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for notifications */",
50
+ "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */",
51
+ "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification */",
52
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notification */",
53
+ "transparent": "transparent",
54
+ "inherit": "inherit",
55
+ "current": "currentColor"
56
+ },
57
+ "borderColor": {
58
+ "primary": {
59
+ "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction */",
60
+ "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted pressed interaction */",
61
+ "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for inverted dividers */",
62
+ "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
63
+ "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
64
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Used for buttons, select field, focus state */"
65
+ },
66
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons */",
67
+ "accent": {
68
+ "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for radio hover states */",
69
+ "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for brand-shape\n */"
70
+ },
71
+ "neutral": {
72
+ "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
73
+ "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>)",
74
+ "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
75
+ "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
76
+ "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
77
+ "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
78
+ },
79
+ "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for valid form fields\n */",
80
+ "error": {
81
+ "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover states of invalid form elements */",
82
+ "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
83
+ },
84
+ "transparent": "transparent",
85
+ "inherit": "inherit",
86
+ "current": "currentColor"
87
+ },
88
+ "borderRadius": {
89
+ "default": "var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */",
90
+ "sm": "var(--sd-border-radius-sm, 0.125rem) /* 2px */",
91
+ "md": "var(--sd-border-radius-md, 0.375rem) /* 6px Inner focus outline */",
92
+ "lg": "var(--sd-border-radius-lg, 0.5rem) /* 8px Outer focus outline */",
93
+ "full": "var(--sd-border-radius-full, 9999px) /* Radius for pill shape buttons */",
94
+ "none": "var(--sd-border-radius-none, 0px)"
95
+ },
96
+ "boxShadowColor": {
97
+ "primary": {
98
+ "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Additional background color (light mode) */",
99
+ "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Additional background color (light mode) on primary-100 */",
100
+ "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
101
+ "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
102
+ "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
103
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for primary-button background */"
104
+ },
105
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) */",
106
+ "accent": {
107
+ "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for hover interaction */",
108
+ "500": "rgb(var(--sd-color-accent-500, 66 147 50) / <alpha-value>) /* Used for pressed interaction */",
109
+ "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for cta-button background */"
110
+ },
111
+ "neutral": {
112
+ "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
113
+ "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Additional background color (light mode) on neutral-100\nUsed for hover interaction */",
114
+ "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag background */",
115
+ "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Used for */",
116
+ "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
117
+ "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
118
+ "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
119
+ },
120
+ "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for notifications */",
121
+ "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */",
122
+ "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification */",
123
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notification */",
124
+ "transparent": "transparent",
125
+ "inherit": "inherit",
126
+ "current": "currentColor"
127
+ },
128
+ "caretColor": {
129
+ "black": "rgb(var(--sd-color-black, 24 24 24) / <alpha-value>) /* Default text color */",
130
+ "primary": {
131
+ "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction button label */",
132
+ "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted hover interaction text link and inverted pressed interaction button label */",
133
+ "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Additional text inverted color\nUsed for inverted pressed interaction text link */",
134
+ "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
135
+ "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
136
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
137
+ },
138
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
139
+ "accent": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Accent brand color for highlighted text */",
140
+ "neutral": {
141
+ "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
142
+ "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
143
+ "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
144
+ },
145
+ "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for success messages */",
146
+ "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
147
+ "transparent": "transparent",
148
+ "inherit": "inherit",
149
+ "current": "currentColor"
150
+ },
151
+ "fill": {
152
+ "primary": {
153
+ "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction */",
154
+ "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted pressed interaction */",
155
+ "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for inverted pressed interaction in text link */",
156
+ "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
157
+ "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
158
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Default icon color */"
159
+ },
160
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted icon color */",
161
+ "accent": {
162
+ "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for hover states */",
163
+ "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for active / selected elements */"
164
+ },
165
+ "neutral": {
166
+ "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for */",
167
+ "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Used for */",
168
+ "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
169
+ "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
170
+ "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for switch */"
171
+ },
172
+ "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for success messages */",
173
+ "error": {
174
+ "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover states of invalid form elements\n */",
175
+ "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages\n */"
176
+ },
177
+ "risk": {
178
+ "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
179
+ "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
180
+ "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
181
+ "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
182
+ "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
183
+ },
184
+ "transparent": "transparent",
185
+ "inherit": "inherit",
186
+ "current": "currentColor"
187
+ },
188
+ "fontFamily": {},
189
+ "fontSize": {
190
+ "sm": "var(--sd-font-size-sm, 0.875rem) /* 14px */",
191
+ "base": "var(--sd-font-size-base, 1rem) /* 16px */",
192
+ "lg": "var(--sd-font-size-lg, 1.25rem) /* 20px */",
193
+ "xl": "var(--sd-font-size-xl, 1.5rem) /* 24px */",
194
+ "2xl": "var(--sd-font-size-2xl, 1.75rem) /* 28px */",
195
+ "3xl": "var(--sd-font-size-3xl, 2rem) /* 32px */",
196
+ "4xl": "var(--sd-font-size-4xl, 2.5rem) /* 40px */"
197
+ },
198
+ "fontStyle": {},
199
+ "fontWeight": {
200
+ "normal": "400",
201
+ "bold": "700"
202
+ },
203
+ "gradientColorStops": {
204
+ "primary": {
205
+ "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Additional background color (light mode) */",
206
+ "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Additional background color (light mode) on primary-100 */",
207
+ "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
208
+ "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
209
+ "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
210
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for primary-button background */"
211
+ },
212
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) */",
213
+ "accent": {
214
+ "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for hover interaction */",
215
+ "500": "rgb(var(--sd-color-accent-500, 66 147 50) / <alpha-value>) /* Used for pressed interaction */",
216
+ "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for cta-button background */"
217
+ },
218
+ "neutral": {
219
+ "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
220
+ "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Additional background color (light mode) on neutral-100\nUsed for hover interaction */",
221
+ "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag background */",
222
+ "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Used for */",
223
+ "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
224
+ "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
225
+ "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
226
+ },
227
+ "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for notifications */",
228
+ "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */",
229
+ "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification */",
230
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notification */",
231
+ "transparent": "transparent",
232
+ "inherit": "inherit",
233
+ "current": "currentColor"
234
+ },
235
+ "lineHeight": {
236
+ "none": "var(--sd-line-height-none, 100%) /* Used for buttons, input fields etc. */",
237
+ "tight": "var(--sd-line-height-tight, 120%) /* Used for display and large titles */",
238
+ "normal": "var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */"
239
+ },
240
+ "opacity": {
241
+ "0": "var(--sd-opacity-0, 0)",
242
+ "5": "var(--sd-opacity-5, 0.05)",
243
+ "10": "var(--sd-opacity-10, 0.1)",
244
+ "20": "var(--sd-opacity-20, 0.2)",
245
+ "30": "var(--sd-opacity-30, 0.3)",
246
+ "50": "var(--sd-opacity-50, 0.5)",
247
+ "70": "var(--sd-opacity-70, 0.7)",
248
+ "75": "var(--sd-opacity-75, 0.75)",
249
+ "85": "var(--sd-opacity-85, 0.85)",
250
+ "90": "var(--sd-opacity-90, 0.9)"
251
+ },
252
+ "outlineColor": {
253
+ "primary": {
254
+ "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction */",
255
+ "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted pressed interaction */",
256
+ "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for inverted dividers */",
257
+ "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
258
+ "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
259
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Used for buttons, select field, focus state */"
260
+ },
261
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons */",
262
+ "accent": {
263
+ "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for radio hover states */",
264
+ "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for brand-shape\n */"
265
+ },
266
+ "neutral": {
267
+ "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
268
+ "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>)",
269
+ "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
270
+ "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
271
+ "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
272
+ "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
273
+ },
274
+ "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for valid form fields\n */",
275
+ "error": {
276
+ "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover states of invalid form elements */",
277
+ "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
278
+ },
279
+ "transparent": "transparent",
280
+ "inherit": "inherit",
281
+ "current": "currentColor"
282
+ },
283
+ "placeholderColor": {
284
+ "black": "rgb(var(--sd-color-black, 24 24 24) / <alpha-value>) /* Default text color */",
285
+ "primary": {
286
+ "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction button label */",
287
+ "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted hover interaction text link and inverted pressed interaction button label */",
288
+ "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Additional text inverted color\nUsed for inverted pressed interaction text link */",
289
+ "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
290
+ "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
291
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
292
+ },
293
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
294
+ "accent": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Accent brand color for highlighted text */",
295
+ "neutral": {
296
+ "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
297
+ "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
298
+ "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
299
+ },
300
+ "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for success messages */",
301
+ "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
302
+ "transparent": "transparent",
303
+ "inherit": "inherit",
304
+ "current": "currentColor"
305
+ },
306
+ "ringColor": {
307
+ "primary": {
308
+ "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction */",
309
+ "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted pressed interaction */",
310
+ "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for inverted dividers */",
311
+ "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
312
+ "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
313
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Used for buttons, select field, focus state */"
314
+ },
315
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons */",
316
+ "accent": {
317
+ "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for radio hover states */",
318
+ "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for brand-shape\n */"
319
+ },
320
+ "neutral": {
321
+ "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
322
+ "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>)",
323
+ "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
324
+ "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
325
+ "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
326
+ "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
327
+ },
328
+ "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for valid form fields\n */",
329
+ "error": {
330
+ "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover states of invalid form elements */",
331
+ "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
332
+ },
333
+ "transparent": "transparent",
334
+ "inherit": "inherit",
335
+ "current": "currentColor"
336
+ },
337
+ "ringOffsetColor": {
338
+ "primary": {
339
+ "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Additional background color (light mode) */",
340
+ "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Additional background color (light mode) on primary-100 */",
341
+ "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
342
+ "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
343
+ "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
344
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for primary-button background */"
345
+ },
346
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) */",
347
+ "accent": {
348
+ "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for hover interaction */",
349
+ "500": "rgb(var(--sd-color-accent-500, 66 147 50) / <alpha-value>) /* Used for pressed interaction */",
350
+ "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for cta-button background */"
351
+ },
352
+ "neutral": {
353
+ "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
354
+ "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Additional background color (light mode) on neutral-100\nUsed for hover interaction */",
355
+ "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag background */",
356
+ "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Used for */",
357
+ "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
358
+ "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
359
+ "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
360
+ },
361
+ "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for notifications */",
362
+ "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */",
363
+ "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification */",
364
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notification */",
365
+ "transparent": "transparent",
366
+ "inherit": "inherit",
367
+ "current": "currentColor"
368
+ },
369
+ "space": {
370
+ "0": "var(--sd-spacing-0, 0px) /* No spacing (manually added) */",
371
+ "1": "var(--sd-spacing-1, 0.25rem) /* 4px */",
372
+ "2": "var(--sd-spacing-2, 0.5rem) /* 8px */",
373
+ "3": "var(--sd-spacing-3, 0.75rem) /* 12px */",
374
+ "4": "var(--sd-spacing-4, 1rem) /* 16px */",
375
+ "5": "var(--sd-spacing-5, 1.25rem) /* 20px */",
376
+ "6": "var(--sd-spacing-6, 1.5rem) /* 24px */",
377
+ "8": "var(--sd-spacing-8, 2rem) /* 32px */",
378
+ "10": "var(--sd-spacing-10, 2.5rem) /* 40px */",
379
+ "12": "var(--sd-spacing-12, 3rem) /* 48px */",
380
+ "16": "var(--sd-spacing-16, 4rem) /* 64px */",
381
+ "18": "var(--sd-spacing-18, 5rem) /* 80px */",
382
+ "24": "var(--sd-spacing-24, 6rem) /* 96px */",
383
+ "32": "var(--sd-spacing-32, 8rem) /* 128px */",
384
+ "40": "var(--sd-spacing-40, 10rem) /* 160px */",
385
+ "0.5": "var(--sd-spacing-0-5, 0.125rem) /* 2px */",
386
+ "auto": "var(--sd-spacing-auto, auto) /* Automatic spacing (manually added) */",
387
+ "2.5": "var(--sd-spacing-2-5, 0.625rem) /* 10px */"
388
+ },
389
+ "spacing": {
390
+ "0": "var(--sd-spacing-0, 0px) /* No spacing (manually added) */",
391
+ "1": "var(--sd-spacing-1, 0.25rem) /* 4px */",
392
+ "2": "var(--sd-spacing-2, 0.5rem) /* 8px */",
393
+ "3": "var(--sd-spacing-3, 0.75rem) /* 12px */",
394
+ "4": "var(--sd-spacing-4, 1rem) /* 16px */",
395
+ "5": "var(--sd-spacing-5, 1.25rem) /* 20px */",
396
+ "6": "var(--sd-spacing-6, 1.5rem) /* 24px */",
397
+ "8": "var(--sd-spacing-8, 2rem) /* 32px */",
398
+ "10": "var(--sd-spacing-10, 2.5rem) /* 40px */",
399
+ "12": "var(--sd-spacing-12, 3rem) /* 48px */",
400
+ "16": "var(--sd-spacing-16, 4rem) /* 64px */",
401
+ "18": "var(--sd-spacing-18, 5rem) /* 80px */",
402
+ "24": "var(--sd-spacing-24, 6rem) /* 96px */",
403
+ "32": "var(--sd-spacing-32, 8rem) /* 128px */",
404
+ "40": "var(--sd-spacing-40, 10rem) /* 160px */",
405
+ "0.5": "var(--sd-spacing-0-5, 0.125rem) /* 2px */",
406
+ "auto": "var(--sd-spacing-auto, auto) /* Automatic spacing (manually added) */",
407
+ "2.5": "var(--sd-spacing-2-5, 0.625rem) /* 10px */"
408
+ },
409
+ "stroke": {
410
+ "primary": {
411
+ "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction */",
412
+ "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted pressed interaction */",
413
+ "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for inverted dividers */",
414
+ "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
415
+ "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
416
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Used for buttons, select field, focus state */"
417
+ },
418
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons */",
419
+ "accent": {
420
+ "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for radio hover states */",
421
+ "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for brand-shape\n */"
422
+ },
423
+ "neutral": {
424
+ "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
425
+ "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>)",
426
+ "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
427
+ "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
428
+ "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
429
+ "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
430
+ },
431
+ "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for valid form fields\n */",
432
+ "error": {
433
+ "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover states of invalid form elements */",
434
+ "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
435
+ },
436
+ "transparent": "transparent",
437
+ "inherit": "inherit",
438
+ "current": "currentColor"
439
+ },
440
+ "tracking": {},
441
+ "textColor": {
442
+ "black": "rgb(var(--sd-color-black, 24 24 24) / <alpha-value>) /* Default text color */",
443
+ "primary": {
444
+ "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction button label */",
445
+ "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted hover interaction text link and inverted pressed interaction button label */",
446
+ "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Additional text inverted color\nUsed for inverted pressed interaction text link */",
447
+ "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
448
+ "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
449
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
450
+ },
451
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
452
+ "accent": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Accent brand color for highlighted text */",
453
+ "neutral": {
454
+ "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
455
+ "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
456
+ "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
457
+ },
458
+ "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for success messages */",
459
+ "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
460
+ "transparent": "transparent",
461
+ "inherit": "inherit",
462
+ "current": "currentColor"
463
+ },
464
+ "textDecorationColor": {
465
+ "black": "rgb(var(--sd-color-black, 24 24 24) / <alpha-value>) /* Default text color */",
466
+ "primary": {
467
+ "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction button label */",
468
+ "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted hover interaction text link and inverted pressed interaction button label */",
469
+ "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Additional text inverted color\nUsed for inverted pressed interaction text link */",
470
+ "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
471
+ "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
472
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
473
+ },
474
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
475
+ "accent": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Accent brand color for highlighted text */",
476
+ "neutral": {
477
+ "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
478
+ "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
479
+ "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
480
+ },
481
+ "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for success messages */",
482
+ "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
483
+ "transparent": "transparent",
484
+ "inherit": "inherit",
485
+ "current": "currentColor"
486
+ }
487
+ }
package/package.json ADDED
@@ -0,0 +1,74 @@
1
+ {
2
+ "name": "@solid-design-system/tokens",
3
+ "version": "1.0.0",
4
+ "description": "Solid Design System: Tokens",
5
+ "main": "index.js",
6
+ "scripts": {
7
+ "build": "node scripts/build.mjs",
8
+ "postversion": "pnpm build",
9
+ "release": "semantic-release --tagFormat 'tokens/${version}' -e semantic-release-monorepo",
10
+ "release.dry": "semantic-release -d --tagFormat 'tokens/${version}' -e semantic-release-monorepo"
11
+ },
12
+ "files": [
13
+ "dist"
14
+ ],
15
+ "exports": {
16
+ "./scss": "./dist/tokens.scss",
17
+ "./tailwind": "./dist/tokens.tailwind.json"
18
+ },
19
+ "keywords": [],
20
+ "homepage": "https://solid-design-system.fe.union-investment.de/x.x.x/storybook/",
21
+ "author": {
22
+ "name": "Union Investment"
23
+ },
24
+ "repository": {
25
+ "type": "git",
26
+ "url": "git+https://github.com/solid-design-system/solid.git"
27
+ },
28
+ "license": "MIT",
29
+ "devDependencies": {
30
+ "@semantic-release/changelog": "^6.0.3",
31
+ "@semantic-release/git": "^10.0.1",
32
+ "semantic-release": "^19.0.5",
33
+ "semantic-release-monorepo": "^7.0.5",
34
+ "tailwindcss-export-config": "^4.1.0"
35
+ },
36
+ "release": {
37
+ "branches": [
38
+ "main"
39
+ ],
40
+ "plugins": [
41
+ "@semantic-release/commit-analyzer",
42
+ "@semantic-release/release-notes-generator",
43
+ [
44
+ "@semantic-release/changelog",
45
+ {
46
+ "changelogFile": "CHANGELOG.md"
47
+ }
48
+ ],
49
+ [
50
+ "@semantic-release/npm",
51
+ {
52
+ "npmPublish": true
53
+ }
54
+ ],
55
+ [
56
+ "@semantic-release/git",
57
+ {
58
+ "message": "chore(release/tokens): ${nextRelease.version} [skip actions]\n\n${nextRelease.notes}",
59
+ "assets": [
60
+ "CHANGELOG.md",
61
+ "package.json"
62
+ ]
63
+ }
64
+ ],
65
+ [
66
+ "@semantic-release/github",
67
+ {
68
+ "successComment": false
69
+ }
70
+ ]
71
+ ]
72
+ },
73
+ "readme": "README.md"
74
+ }