sit-onyx 0.1.0-alpha.1 → 0.1.0-alpha.2

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 (6) hide show
  1. package/package.json +7 -5
  2. package/src/styles/index.scss +12 -0
  3. package/src/styles/variables-dark.css +158 -0
  4. package/src/styles/variables-light.css +158 -0
  5. package/src/styles/variables-onyx.css +120 -0
  6. package/src/styles/variables-onyx.json +115 -0
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "sit-onyx",
3
3
  "description": "A design system and Vue.js component library created by Schwarz IT",
4
- "version": "0.1.0-alpha.1",
4
+ "version": "0.1.0-alpha.2",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "files": [
8
8
  "dist",
9
- "src/i18n/locales"
9
+ "src/i18n/locales",
10
+ "src/styles"
10
11
  ],
11
12
  "exports": {
12
13
  ".": {
@@ -14,8 +15,9 @@
14
15
  "import": "./dist/index.js",
15
16
  "require": "./dist/index.cjs"
16
17
  },
17
- "./locales": "./src/i18n/locales",
18
- "./style.css": "./dist/style.css"
18
+ "./style.css": "./dist/style.css",
19
+ "./locales/*": "./src/i18n/locales/*",
20
+ "./src/styles/*": "./src/styles/*"
19
21
  },
20
22
  "repository": {
21
23
  "type": "git",
@@ -37,7 +39,7 @@
37
39
  "@storybook/vue3-vite": "^7.6.9",
38
40
  "react": "^18.2.0",
39
41
  "storybook": "^7.6.9",
40
- "@sit-onyx/storybook-utils": "^0.1.0-alpha.1"
42
+ "@sit-onyx/storybook-utils": "^0.1.0-alpha.2"
41
43
  },
42
44
  "scripts": {
43
45
  "dev": "storybook dev -p 6006 --no-open",
package/src/styles/index.scss ADDED
@@ -0,0 +1,12 @@
1
+ // global component styles
2
+ // DO NOT ADD ANY STYLES HERE THAT HAVE SIDE EFFECTS ON THE GLOBAL APPLICATION (e.g. body, <a> etc.)
3
+ @use "@fontsource-variable/source-code-pro";
4
+ @use "@fontsource-variable/source-sans-3";
5
+ @use "variables-onyx.css";
6
+ @use "variables-light.css";
7
+ @use "variables-dark.css";
8
+
9
+ :root {
10
+ --onyx-font-family: "Source Sans 3 Variable", sans-serif;
11
+ --onyx-font-family-mono: "Source Code Pro Variable", monospace;
12
+ }
package/src/styles/variables-dark.css ADDED
@@ -0,0 +1,158 @@
1
+ /**
2
+ * Do not edit directly.
3
+ * This file contains the specific variables for the "dark" theme.
4
+ * Imported from Figma API on Thu, 18 Jan 2024 10:51:34 GMT
5
+ */
6
+ html.dark {
7
+ --onyx-color-base-action-100: var(--onyx-color-themed-action-1100);
8
+ --onyx-color-base-action-200: var(--onyx-color-themed-action-1000);
9
+ --onyx-color-base-action-300: var(--onyx-color-themed-action-900);
10
+ --onyx-color-base-action-400: var(--onyx-color-themed-action-800);
11
+ --onyx-color-base-action-500: var(--onyx-color-themed-action-700);
12
+ --onyx-color-base-action-600: var(--onyx-color-themed-action-600);
13
+ --onyx-color-base-action-700: var(--onyx-color-themed-action-500);
14
+ --onyx-color-base-action-800: var(--onyx-color-themed-action-400);
15
+ --onyx-color-base-action-900: var(--onyx-color-themed-action-300);
16
+ --onyx-color-base-background-blank: var(--onyx-color-themed-neutral-1100);
17
+ --onyx-color-base-background-tinted: var(--onyx-color-themed-neutral-1200);
18
+ --onyx-color-base-border-default: var(--onyx-color-base-neutral-200);
19
+ --onyx-color-base-brand-100: var(--onyx-color-themed-brand-1100);
20
+ --onyx-color-base-brand-200: var(--onyx-color-themed-brand-1000);
21
+ --onyx-color-base-brand-300: var(--onyx-color-themed-brand-900);
22
+ --onyx-color-base-brand-400: var(--onyx-color-themed-brand-800);
23
+ --onyx-color-base-brand-500: var(--onyx-color-themed-brand-700);
24
+ --onyx-color-base-brand-600: var(--onyx-color-themed-brand-600);
25
+ --onyx-color-base-brand-700: var(--onyx-color-themed-brand-500);
26
+ --onyx-color-base-brand-800: var(--onyx-color-themed-brand-400);
27
+ --onyx-color-base-brand-900: var(--onyx-color-themed-brand-300);
28
+ --onyx-color-base-danger-100: var(--onyx-color-universal-red-1100);
29
+ --onyx-color-base-danger-200: var(--onyx-color-universal-red-1000);
30
+ --onyx-color-base-danger-300: var(--onyx-color-universal-red-900);
31
+ --onyx-color-base-danger-400: var(--onyx-color-universal-red-800);
32
+ --onyx-color-base-danger-500: var(--onyx-color-universal-red-700);
33
+ --onyx-color-base-danger-600: var(--onyx-color-universal-red-600);
34
+ --onyx-color-base-danger-700: var(--onyx-color-universal-red-500);
35
+ --onyx-color-base-danger-800: var(--onyx-color-universal-red-400);
36
+ --onyx-color-base-danger-900: var(--onyx-color-universal-red-300);
37
+ --onyx-color-base-greyscale-black: var(--onyx-color-universal-greyscale-black);
38
+ --onyx-color-base-greyscale-white: var(--onyx-color-universal-greyscale-white);
39
+ --onyx-color-base-info-100: var(--onyx-color-universal-purple-1100);
40
+ --onyx-color-base-info-200: var(--onyx-color-universal-purple-1000);
41
+ --onyx-color-base-info-300: var(--onyx-color-universal-purple-900);
42
+ --onyx-color-base-info-400: var(--onyx-color-universal-purple-800);
43
+ --onyx-color-base-info-500: var(--onyx-color-universal-purple-700);
44
+ --onyx-color-base-info-600: var(--onyx-color-universal-purple-600);
45
+ --onyx-color-base-info-700: var(--onyx-color-universal-purple-500);
46
+ --onyx-color-base-info-800: var(--onyx-color-universal-purple-400);
47
+ --onyx-color-base-info-900: var(--onyx-color-universal-purple-300);
48
+ --onyx-color-base-neutral-100: var(--onyx-color-themed-neutral-1100);
49
+ --onyx-color-base-neutral-200: var(--onyx-color-themed-neutral-1000);
50
+ --onyx-color-base-neutral-300: var(--onyx-color-themed-neutral-900);
51
+ --onyx-color-base-neutral-400: var(--onyx-color-themed-neutral-800);
52
+ --onyx-color-base-neutral-500: var(--onyx-color-themed-neutral-700);
53
+ --onyx-color-base-neutral-600: var(--onyx-color-themed-neutral-600);
54
+ --onyx-color-base-neutral-700: var(--onyx-color-themed-neutral-500);
55
+ --onyx-color-base-neutral-800: var(--onyx-color-themed-neutral-400);
56
+ --onyx-color-base-neutral-900: var(--onyx-color-themed-neutral-300);
57
+ --onyx-color-base-quantitatives-100: var(--onyx-color-universal-quantitatives-100);
58
+ --onyx-color-base-quantitatives-200: var(--onyx-color-universal-quantitatives-200);
59
+ --onyx-color-base-quantitatives-300: var(--onyx-color-universal-quantitatives-300);
60
+ --onyx-color-base-quantitatives-400: var(--onyx-color-universal-quantitatives-400);
61
+ --onyx-color-base-quantitatives-500: var(--onyx-color-universal-quantitatives-500);
62
+ --onyx-color-base-quantitatives-600: var(--onyx-color-universal-quantitatives-600);
63
+ --onyx-color-base-quantitatives-700: var(--onyx-color-universal-quantitatives-700);
64
+ --onyx-color-base-quantitatives-800: var(--onyx-color-universal-quantitatives-800);
65
+ --onyx-color-base-quantitatives-900: var(--onyx-color-universal-quantitatives-900);
66
+ --onyx-color-base-quantitatives-1000: var(--onyx-color-universal-quantitatives-1000);
67
+ --onyx-color-base-quantitatives-1100: var(--onyx-color-universal-quantitatives-1100);
68
+ --onyx-color-base-quantitatives-1200: var(--onyx-color-universal-quantitatives-1200);
69
+ --onyx-color-base-success-100: var(--onyx-color-universal-green-1100);
70
+ --onyx-color-base-success-200: var(--onyx-color-universal-green-1000);
71
+ --onyx-color-base-success-300: var(--onyx-color-universal-green-900);
72
+ --onyx-color-base-success-400: var(--onyx-color-universal-green-800);
73
+ --onyx-color-base-success-500: var(--onyx-color-universal-green-700);
74
+ --onyx-color-base-success-600: var(--onyx-color-universal-green-600);
75
+ --onyx-color-base-success-700: var(--onyx-color-universal-green-500);
76
+ --onyx-color-base-success-800: var(--onyx-color-universal-green-400);
77
+ --onyx-color-base-success-900: var(--onyx-color-universal-green-300);
78
+ --onyx-color-base-warning-100: var(--onyx-color-universal-orange-1100);
79
+ --onyx-color-base-warning-200: var(--onyx-color-universal-orange-1000);
80
+ --onyx-color-base-warning-300: var(--onyx-color-universal-orange-900);
81
+ --onyx-color-base-warning-400: var(--onyx-color-universal-orange-800);
82
+ --onyx-color-base-warning-500: var(--onyx-color-universal-orange-700);
83
+ --onyx-color-base-warning-600: var(--onyx-color-universal-orange-600);
84
+ --onyx-color-base-warning-700: var(--onyx-color-universal-orange-500);
85
+ --onyx-color-base-warning-800: var(--onyx-color-universal-orange-400);
86
+ --onyx-color-base-warning-900: var(--onyx-color-universal-orange-300);
87
+ --onyx-color-icon-action-bold: var(--onyx-color-themed-action-400);
88
+ --onyx-color-icon-action-intense: var(--onyx-color-themed-action-500);
89
+ --onyx-color-icon-action-medium: var(--onyx-color-themed-action-700);
90
+ --onyx-color-icon-action-soft: var(--onyx-color-themed-action-900);
91
+ --onyx-color-icon-brand-bold: var(--onyx-color-themed-brand-400);
92
+ --onyx-color-icon-brand-intense: var(--onyx-color-themed-brand-500);
93
+ --onyx-color-icon-brand-medium: var(--onyx-color-themed-brand-700);
94
+ --onyx-color-icon-brand-soft: var(--onyx-color-themed-brand-900);
95
+ --onyx-color-icon-danger-bold: var(--onyx-color-universal-red-400);
96
+ --onyx-color-icon-danger-intense: var(--onyx-color-universal-red-500);
97
+ --onyx-color-icon-danger-medium: var(--onyx-color-universal-red-700);
98
+ --onyx-color-icon-danger-soft: var(--onyx-color-universal-red-900);
99
+ --onyx-color-icon-info-bold: var(--onyx-color-universal-purple-400);
100
+ --onyx-color-icon-info-intense: var(--onyx-color-universal-purple-500);
101
+ --onyx-color-icon-info-medium: var(--onyx-color-universal-purple-700);
102
+ --onyx-color-icon-info-soft: var(--onyx-color-universal-purple-900);
103
+ --onyx-color-icon-neutral-intense: var(--onyx-color-themed-neutral-200);
104
+ --onyx-color-icon-neutral-inverted: var(--onyx-color-themed-neutral-1200);
105
+ --onyx-color-icon-neutral-medium: var(--onyx-color-themed-neutral-400);
106
+ --onyx-color-icon-neutral-soft: var(--onyx-color-themed-neutral-500);
107
+ --onyx-color-icon-success-bold: var(--onyx-color-universal-green-400);
108
+ --onyx-color-icon-success-intense: var(--onyx-color-universal-green-500);
109
+ --onyx-color-icon-success-medium: var(--onyx-color-universal-green-700);
110
+ --onyx-color-icon-success-soft: var(--onyx-color-universal-green-900);
111
+ --onyx-color-icon-warning-bold: var(--onyx-color-universal-orange-400);
112
+ --onyx-color-icon-warning-intense: var(--onyx-color-universal-orange-500);
113
+ --onyx-color-icon-warning-medium: var(--onyx-color-universal-orange-700);
114
+ --onyx-color-icon-warning-soft: var(--onyx-color-universal-orange-900);
115
+ --onyx-color-text-action-bold: var(--onyx-color-themed-action-400);
116
+ --onyx-color-text-action-intense: var(--onyx-color-themed-action-500);
117
+ --onyx-color-text-action-medium: var(--onyx-color-themed-action-700);
118
+ --onyx-color-text-action-soft: var(--onyx-color-themed-action-900);
119
+ --onyx-color-text-brand-bold: var(--onyx-color-themed-brand-400);
120
+ --onyx-color-text-brand-intense: var(--onyx-color-themed-brand-500);
121
+ --onyx-color-text-brand-medium: var(--onyx-color-themed-brand-700);
122
+ --onyx-color-text-brand-soft: var(--onyx-color-themed-brand-900);
123
+ --onyx-color-text-danger-bold: var(--onyx-color-universal-red-400);
124
+ --onyx-color-text-danger-intense: var(--onyx-color-universal-red-500);
125
+ --onyx-color-text-danger-medium: var(--onyx-color-universal-red-700);
126
+ --onyx-color-text-danger-soft: var(--onyx-color-universal-red-900);
127
+ --onyx-color-text-info-bold: var(--onyx-color-universal-purple-400);
128
+ --onyx-color-text-info-intense: var(--onyx-color-universal-purple-500);
129
+ --onyx-color-text-info-medium: var(--onyx-color-universal-purple-700);
130
+ --onyx-color-text-info-soft: var(--onyx-color-universal-purple-900);
131
+ --onyx-color-text-neutral-intense: var(--onyx-color-themed-neutral-200);
132
+ --onyx-color-text-neutral-inverted: var(--onyx-color-themed-neutral-1200);
133
+ --onyx-color-text-neutral-medium: var(--onyx-color-themed-neutral-400);
134
+ --onyx-color-text-neutral-soft: var(--onyx-color-themed-neutral-500);
135
+ --onyx-color-text-success-bold: var(--onyx-color-universal-green-400);
136
+ --onyx-color-text-success-intense: var(--onyx-color-universal-green-500);
137
+ --onyx-color-text-success-medium: var(--onyx-color-universal-green-700);
138
+ --onyx-color-text-success-soft: var(--onyx-color-universal-green-900);
139
+ --onyx-color-text-warning-bold: var(--onyx-color-universal-orange-400);
140
+ --onyx-color-text-warning-intense: var(--onyx-color-universal-orange-500);
141
+ --onyx-color-text-warning-medium: var(--onyx-color-universal-orange-700);
142
+ --onyx-color-text-warning-soft: var(--onyx-color-universal-orange-900);
143
+ --onyx-radius-full: var(--onyx-number-radius-600);
144
+ --onyx-radius-lg: var(--onyx-number-radius-400);
145
+ --onyx-radius-md: var(--onyx-number-radius-300);
146
+ --onyx-radius-sm: var(--onyx-number-radius-200);
147
+ --onyx-radius-xl: var(--onyx-number-radius-500);
148
+ --onyx-radius-xs: var(--onyx-number-radius-100);
149
+ --onyx-spacing-2xl: var(--onyx-number-spacing-800);
150
+ --onyx-spacing-2xs: var(--onyx-number-spacing-200);
151
+ --onyx-spacing-3xl: var(--onyx-number-spacing-900);
152
+ --onyx-spacing-3xs: var(--onyx-number-spacing-100);
153
+ --onyx-spacing-lg: var(--onyx-number-spacing-600);
154
+ --onyx-spacing-md: var(--onyx-number-spacing-500);
155
+ --onyx-spacing-sm: var(--onyx-number-spacing-400);
156
+ --onyx-spacing-xl: var(--onyx-number-spacing-700);
157
+ --onyx-spacing-xs: var(--onyx-number-spacing-300);
158
+ }
package/src/styles/variables-light.css ADDED
@@ -0,0 +1,158 @@
1
+ /**
2
+ * Do not edit directly.
3
+ * This file contains the specific variables for the "light" theme.
4
+ * Imported from Figma API on Thu, 18 Jan 2024 10:51:19 GMT
5
+ */
6
+ :root {
7
+ --onyx-color-base-action-100: var(--onyx-color-themed-action-100);
8
+ --onyx-color-base-action-200: var(--onyx-color-themed-action-200);
9
+ --onyx-color-base-action-300: var(--onyx-color-themed-action-300);
10
+ --onyx-color-base-action-400: var(--onyx-color-themed-action-400);
11
+ --onyx-color-base-action-500: var(--onyx-color-themed-action-500);
12
+ --onyx-color-base-action-600: var(--onyx-color-themed-action-600);
13
+ --onyx-color-base-action-700: var(--onyx-color-themed-action-700);
14
+ --onyx-color-base-action-800: var(--onyx-color-themed-action-800);
15
+ --onyx-color-base-action-900: var(--onyx-color-themed-action-900);
16
+ --onyx-color-base-background-blank: var(--onyx-color-universal-greyscale-white);
17
+ --onyx-color-base-background-tinted: var(--onyx-color-themed-neutral-100);
18
+ --onyx-color-base-border-default: var(--onyx-color-base-neutral-200);
19
+ --onyx-color-base-brand-100: var(--onyx-color-themed-brand-100);
20
+ --onyx-color-base-brand-200: var(--onyx-color-themed-brand-200);
21
+ --onyx-color-base-brand-300: var(--onyx-color-themed-brand-300);
22
+ --onyx-color-base-brand-400: var(--onyx-color-themed-brand-400);
23
+ --onyx-color-base-brand-500: var(--onyx-color-themed-brand-500);
24
+ --onyx-color-base-brand-600: var(--onyx-color-themed-brand-600);
25
+ --onyx-color-base-brand-700: var(--onyx-color-themed-brand-700);
26
+ --onyx-color-base-brand-800: var(--onyx-color-themed-brand-800);
27
+ --onyx-color-base-brand-900: var(--onyx-color-themed-brand-900);
28
+ --onyx-color-base-danger-100: var(--onyx-color-universal-red-100);
29
+ --onyx-color-base-danger-200: var(--onyx-color-universal-red-200);
30
+ --onyx-color-base-danger-300: var(--onyx-color-universal-red-300);
31
+ --onyx-color-base-danger-400: var(--onyx-color-universal-red-400);
32
+ --onyx-color-base-danger-500: var(--onyx-color-universal-red-500);
33
+ --onyx-color-base-danger-600: var(--onyx-color-universal-red-600);
34
+ --onyx-color-base-danger-700: var(--onyx-color-universal-red-700);
35
+ --onyx-color-base-danger-800: var(--onyx-color-universal-red-800);
36
+ --onyx-color-base-danger-900: var(--onyx-color-universal-red-900);
37
+ --onyx-color-base-greyscale-black: var(--onyx-color-universal-greyscale-black);
38
+ --onyx-color-base-greyscale-white: var(--onyx-color-universal-greyscale-white);
39
+ --onyx-color-base-info-100: var(--onyx-color-universal-purple-100);
40
+ --onyx-color-base-info-200: var(--onyx-color-universal-purple-200);
41
+ --onyx-color-base-info-300: var(--onyx-color-universal-purple-300);
42
+ --onyx-color-base-info-400: var(--onyx-color-universal-purple-400);
43
+ --onyx-color-base-info-500: var(--onyx-color-universal-purple-500);
44
+ --onyx-color-base-info-600: var(--onyx-color-universal-purple-600);
45
+ --onyx-color-base-info-700: var(--onyx-color-universal-purple-700);
46
+ --onyx-color-base-info-800: var(--onyx-color-universal-purple-800);
47
+ --onyx-color-base-info-900: var(--onyx-color-universal-purple-900);
48
+ --onyx-color-base-neutral-100: var(--onyx-color-themed-neutral-100);
49
+ --onyx-color-base-neutral-200: var(--onyx-color-themed-neutral-200);
50
+ --onyx-color-base-neutral-300: var(--onyx-color-themed-neutral-300);
51
+ --onyx-color-base-neutral-400: var(--onyx-color-themed-neutral-400);
52
+ --onyx-color-base-neutral-500: var(--onyx-color-themed-neutral-500);
53
+ --onyx-color-base-neutral-600: var(--onyx-color-themed-neutral-600);
54
+ --onyx-color-base-neutral-700: var(--onyx-color-themed-neutral-700);
55
+ --onyx-color-base-neutral-800: var(--onyx-color-themed-neutral-800);
56
+ --onyx-color-base-neutral-900: var(--onyx-color-themed-neutral-900);
57
+ --onyx-color-base-quantitatives-100: var(--onyx-color-universal-quantitatives-100);
58
+ --onyx-color-base-quantitatives-200: var(--onyx-color-universal-quantitatives-200);
59
+ --onyx-color-base-quantitatives-300: var(--onyx-color-universal-quantitatives-300);
60
+ --onyx-color-base-quantitatives-400: var(--onyx-color-universal-quantitatives-400);
61
+ --onyx-color-base-quantitatives-500: var(--onyx-color-universal-quantitatives-500);
62
+ --onyx-color-base-quantitatives-600: var(--onyx-color-universal-quantitatives-600);
63
+ --onyx-color-base-quantitatives-700: var(--onyx-color-universal-quantitatives-700);
64
+ --onyx-color-base-quantitatives-800: var(--onyx-color-universal-quantitatives-800);
65
+ --onyx-color-base-quantitatives-900: var(--onyx-color-universal-quantitatives-900);
66
+ --onyx-color-base-quantitatives-1000: var(--onyx-color-universal-quantitatives-1000);
67
+ --onyx-color-base-quantitatives-1100: var(--onyx-color-universal-quantitatives-1100);
68
+ --onyx-color-base-quantitatives-1200: var(--onyx-color-universal-quantitatives-1200);
69
+ --onyx-color-base-success-100: var(--onyx-color-universal-green-100);
70
+ --onyx-color-base-success-200: var(--onyx-color-universal-green-200);
71
+ --onyx-color-base-success-300: var(--onyx-color-universal-green-300);
72
+ --onyx-color-base-success-400: var(--onyx-color-universal-green-400);
73
+ --onyx-color-base-success-500: var(--onyx-color-universal-green-500);
74
+ --onyx-color-base-success-600: var(--onyx-color-universal-green-600);
75
+ --onyx-color-base-success-700: var(--onyx-color-universal-green-700);
76
+ --onyx-color-base-success-800: var(--onyx-color-universal-green-800);
77
+ --onyx-color-base-success-900: var(--onyx-color-universal-green-900);
78
+ --onyx-color-base-warning-100: var(--onyx-color-universal-orange-100);
79
+ --onyx-color-base-warning-200: var(--onyx-color-universal-orange-200);
80
+ --onyx-color-base-warning-300: var(--onyx-color-universal-orange-300);
81
+ --onyx-color-base-warning-400: var(--onyx-color-universal-orange-400);
82
+ --onyx-color-base-warning-500: var(--onyx-color-universal-orange-500);
83
+ --onyx-color-base-warning-600: var(--onyx-color-universal-orange-600);
84
+ --onyx-color-base-warning-700: var(--onyx-color-universal-orange-700);
85
+ --onyx-color-base-warning-800: var(--onyx-color-universal-orange-800);
86
+ --onyx-color-base-warning-900: var(--onyx-color-universal-orange-900);
87
+ --onyx-color-icon-action-bold: var(--onyx-color-themed-action-700);
88
+ --onyx-color-icon-action-intense: var(--onyx-color-themed-action-500);
89
+ --onyx-color-icon-action-medium: var(--onyx-color-themed-action-300);
90
+ --onyx-color-icon-action-soft: var(--onyx-color-themed-action-200);
91
+ --onyx-color-icon-brand-bold: var(--onyx-color-themed-brand-700);
92
+ --onyx-color-icon-brand-intense: var(--onyx-color-themed-brand-500);
93
+ --onyx-color-icon-brand-medium: var(--onyx-color-themed-brand-300);
94
+ --onyx-color-icon-brand-soft: var(--onyx-color-themed-brand-200);
95
+ --onyx-color-icon-danger-bold: var(--onyx-color-universal-red-700);
96
+ --onyx-color-icon-danger-intense: var(--onyx-color-universal-red-500);
97
+ --onyx-color-icon-danger-medium: var(--onyx-color-universal-red-300);
98
+ --onyx-color-icon-danger-soft: var(--onyx-color-universal-red-200);
99
+ --onyx-color-icon-info-bold: var(--onyx-color-universal-purple-700);
100
+ --onyx-color-icon-info-intense: var(--onyx-color-universal-purple-500);
101
+ --onyx-color-icon-info-medium: var(--onyx-color-universal-purple-300);
102
+ --onyx-color-icon-info-soft: var(--onyx-color-universal-purple-200);
103
+ --onyx-color-icon-neutral-intense: var(--onyx-color-themed-neutral-700);
104
+ --onyx-color-icon-neutral-inverted: var(--onyx-color-universal-greyscale-white);
105
+ --onyx-color-icon-neutral-medium: var(--onyx-color-themed-neutral-500);
106
+ --onyx-color-icon-neutral-soft: var(--onyx-color-themed-neutral-400);
107
+ --onyx-color-icon-success-bold: var(--onyx-color-universal-green-700);
108
+ --onyx-color-icon-success-intense: var(--onyx-color-universal-green-500);
109
+ --onyx-color-icon-success-medium: var(--onyx-color-universal-green-300);
110
+ --onyx-color-icon-success-soft: var(--onyx-color-universal-green-200);
111
+ --onyx-color-icon-warning-bold: var(--onyx-color-universal-orange-700);
112
+ --onyx-color-icon-warning-intense: var(--onyx-color-universal-orange-500);
113
+ --onyx-color-icon-warning-medium: var(--onyx-color-universal-orange-300);
114
+ --onyx-color-icon-warning-soft: var(--onyx-color-universal-orange-200);
115
+ --onyx-color-text-action-bold: var(--onyx-color-themed-action-700);
116
+ --onyx-color-text-action-intense: var(--onyx-color-themed-action-500);
117
+ --onyx-color-text-action-medium: var(--onyx-color-themed-action-300);
118
+ --onyx-color-text-action-soft: var(--onyx-color-themed-action-200);
119
+ --onyx-color-text-brand-bold: var(--onyx-color-themed-brand-700);
120
+ --onyx-color-text-brand-intense: var(--onyx-color-themed-brand-500);
121
+ --onyx-color-text-brand-medium: var(--onyx-color-themed-brand-300);
122
+ --onyx-color-text-brand-soft: var(--onyx-color-themed-brand-200);
123
+ --onyx-color-text-danger-bold: var(--onyx-color-universal-red-700);
124
+ --onyx-color-text-danger-intense: var(--onyx-color-universal-red-500);
125
+ --onyx-color-text-danger-medium: var(--onyx-color-universal-red-300);
126
+ --onyx-color-text-danger-soft: var(--onyx-color-universal-red-200);
127
+ --onyx-color-text-info-bold: var(--onyx-color-universal-purple-700);
128
+ --onyx-color-text-info-intense: var(--onyx-color-universal-purple-500);
129
+ --onyx-color-text-info-medium: var(--onyx-color-universal-purple-300);
130
+ --onyx-color-text-info-soft: var(--onyx-color-universal-purple-200);
131
+ --onyx-color-text-neutral-intense: var(--onyx-color-themed-neutral-700);
132
+ --onyx-color-text-neutral-inverted: var(--onyx-color-universal-greyscale-white);
133
+ --onyx-color-text-neutral-medium: var(--onyx-color-themed-neutral-500);
134
+ --onyx-color-text-neutral-soft: var(--onyx-color-themed-neutral-400);
135
+ --onyx-color-text-success-bold: var(--onyx-color-universal-green-700);
136
+ --onyx-color-text-success-intense: var(--onyx-color-universal-green-500);
137
+ --onyx-color-text-success-medium: var(--onyx-color-universal-green-300);
138
+ --onyx-color-text-success-soft: var(--onyx-color-universal-green-200);
139
+ --onyx-color-text-warning-bold: var(--onyx-color-universal-orange-700);
140
+ --onyx-color-text-warning-intense: var(--onyx-color-universal-orange-500);
141
+ --onyx-color-text-warning-medium: var(--onyx-color-universal-orange-300);
142
+ --onyx-color-text-warning-soft: var(--onyx-color-universal-orange-200);
143
+ --onyx-radius-full: var(--onyx-number-radius-600);
144
+ --onyx-radius-lg: var(--onyx-number-radius-400);
145
+ --onyx-radius-md: var(--onyx-number-radius-300);
146
+ --onyx-radius-sm: var(--onyx-number-radius-200);
147
+ --onyx-radius-xl: var(--onyx-number-radius-500);
148
+ --onyx-radius-xs: var(--onyx-number-radius-100);
149
+ --onyx-spacing-2xl: var(--onyx-number-spacing-800);
150
+ --onyx-spacing-2xs: var(--onyx-number-spacing-200);
151
+ --onyx-spacing-3xl: var(--onyx-number-spacing-900);
152
+ --onyx-spacing-3xs: var(--onyx-number-spacing-100);
153
+ --onyx-spacing-lg: var(--onyx-number-spacing-600);
154
+ --onyx-spacing-md: var(--onyx-number-spacing-500);
155
+ --onyx-spacing-sm: var(--onyx-number-spacing-400);
156
+ --onyx-spacing-xl: var(--onyx-number-spacing-700);
157
+ --onyx-spacing-xs: var(--onyx-number-spacing-300);
158
+ }
package/src/styles/variables-onyx.css ADDED
@@ -0,0 +1,120 @@
1
+ /**
2
+ * Do not edit directly.
3
+ * This file contains the specific variables for the "onyx" theme.
4
+ * Imported from Figma API on Thu, 18 Jan 2024 10:51:42 GMT
5
+ */
6
+ :root {
7
+ --onyx-color-themed-action-100: #e9f7f1;
8
+ --onyx-color-themed-action-200: #caf0df;
9
+ --onyx-color-themed-action-300: #a0e7c8;
10
+ --onyx-color-themed-action-400: #76deb0;
11
+ --onyx-color-themed-action-500: #4cd598;
12
+ --onyx-color-themed-action-600: #42bc85;
13
+ --onyx-color-themed-action-700: #37a373;
14
+ --onyx-color-themed-action-800: #2d8a60;
15
+ --onyx-color-themed-action-900: #22714d;
16
+ --onyx-color-themed-action-1000: #18583a;
17
+ --onyx-color-themed-action-1100: #0d3f28;
18
+ --onyx-color-themed-action-1200: #032615;
19
+ --onyx-color-themed-brand-100: var(--onyx-color-themed-action-100);
20
+ --onyx-color-themed-brand-200: var(--onyx-color-themed-action-200);
21
+ --onyx-color-themed-brand-300: var(--onyx-color-themed-action-300);
22
+ --onyx-color-themed-brand-400: var(--onyx-color-themed-action-400);
23
+ --onyx-color-themed-brand-500: var(--onyx-color-themed-action-500);
24
+ --onyx-color-themed-brand-600: var(--onyx-color-themed-action-600);
25
+ --onyx-color-themed-brand-700: var(--onyx-color-themed-action-700);
26
+ --onyx-color-themed-brand-800: var(--onyx-color-themed-action-800);
27
+ --onyx-color-themed-brand-900: var(--onyx-color-themed-action-900);
28
+ --onyx-color-themed-brand-1000: var(--onyx-color-themed-action-1000);
29
+ --onyx-color-themed-brand-1100: var(--onyx-color-themed-action-1100);
30
+ --onyx-color-themed-brand-1200: var(--onyx-color-themed-action-1200);
31
+ --onyx-color-themed-neutral-100: #fafbfc;
32
+ --onyx-color-themed-neutral-200: #dee5ea;
33
+ --onyx-color-themed-neutral-300: #9ba5ad;
34
+ --onyx-color-themed-neutral-400: #6b7a86;
35
+ --onyx-color-themed-neutral-500: #465a69;
36
+ --onyx-color-themed-neutral-600: #334654;
37
+ --onyx-color-themed-neutral-700: #2a3c4a;
38
+ --onyx-color-themed-neutral-800: #223340;
39
+ --onyx-color-themed-neutral-900: #192a37;
40
+ --onyx-color-themed-neutral-1000: #11212d;
41
+ --onyx-color-themed-neutral-1100: #081723;
42
+ --onyx-color-themed-neutral-1200: #000e19;
43
+ --onyx-color-universal-green-100: #ecf8f2;
44
+ --onyx-color-universal-green-200: #c6e4d5;
45
+ --onyx-color-universal-green-300: #98d1b3;
46
+ --onyx-color-universal-green-400: #6ebe94;
47
+ --onyx-color-universal-green-500: #44aa75;
48
+ --onyx-color-universal-green-600: #3b9b69;
49
+ --onyx-color-universal-green-700: #328c5e;
50
+ --onyx-color-universal-green-800: #297d52;
51
+ --onyx-color-universal-green-900: #216d46;
52
+ --onyx-color-universal-green-1000: #185e3a;
53
+ --onyx-color-universal-green-1100: #064023;
54
+ --onyx-color-universal-green-1200: #064023;
55
+ --onyx-color-universal-greyscale-black: #000000;
56
+ --onyx-color-universal-greyscale-white: #ffffff;
57
+ --onyx-color-universal-orange-100: #faf6f2;
58
+ --onyx-color-universal-orange-200: #f8e7d8;
59
+ --onyx-color-universal-orange-300: #f6d1b1;
60
+ --onyx-color-universal-orange-400: #f4b57e;
61
+ --onyx-color-universal-orange-500: #f2994a;
62
+ --onyx-color-universal-orange-600: #d98841;
63
+ --onyx-color-universal-orange-700: #bf7737;
64
+ --onyx-color-universal-orange-800: #a6662e;
65
+ --onyx-color-universal-orange-900: #8c5625;
66
+ --onyx-color-universal-orange-1000: #73451c;
67
+ --onyx-color-universal-orange-1100: #593412;
68
+ --onyx-color-universal-orange-1200: #402309;
69
+ --onyx-color-universal-purple-100: #f4f1f8;
70
+ --onyx-color-universal-purple-200: #dbcfea;
71
+ --onyx-color-universal-purple-300: #c2addc;
72
+ --onyx-color-universal-purple-400: #a98ace;
73
+ --onyx-color-universal-purple-500: #9068c0;
74
+ --onyx-color-universal-purple-600: #805aae;
75
+ --onyx-color-universal-purple-700: #704c9b;
76
+ --onyx-color-universal-purple-800: #603e89;
77
+ --onyx-color-universal-purple-900: #513077;
78
+ --onyx-color-universal-purple-1000: #412265;
79
+ --onyx-color-universal-purple-1100: #311452;
80
+ --onyx-color-universal-purple-1200: #210640;
81
+ --onyx-color-universal-quantitatives-100: #005795;
82
+ --onyx-color-universal-quantitatives-200: #ff8a25;
83
+ --onyx-color-universal-quantitatives-300: #e51718;
84
+ --onyx-color-universal-quantitatives-400: #36b16b;
85
+ --onyx-color-universal-quantitatives-500: #56d8fc;
86
+ --onyx-color-universal-quantitatives-600: #ff9990;
87
+ --onyx-color-universal-quantitatives-700: #ff3fd1;
88
+ --onyx-color-universal-quantitatives-800: #3c6475;
89
+ --onyx-color-universal-quantitatives-900: #c4bc81;
90
+ --onyx-color-universal-quantitatives-1000: #c3143f;
91
+ --onyx-color-universal-quantitatives-1100: #a09dfa;
92
+ --onyx-color-universal-quantitatives-1200: #00bcc6;
93
+ --onyx-color-universal-red-100: #fbefee;
94
+ --onyx-color-universal-red-200: #f1d2d1;
95
+ --onyx-color-universal-red-300: #e6a7a5;
96
+ --onyx-color-universal-red-400: #dc716e;
97
+ --onyx-color-universal-red-500: #d1332f;
98
+ --onyx-color-universal-red-600: #bc2d2a;
99
+ --onyx-color-universal-red-700: #a82824;
100
+ --onyx-color-universal-red-800: #93221f;
101
+ --onyx-color-universal-red-900: #7e1d19;
102
+ --onyx-color-universal-red-1000: #691714;
103
+ --onyx-color-universal-red-1100: #400c09;
104
+ --onyx-color-universal-red-1200: #400c09;
105
+ --onyx-number-radius-100: 0.125rem;
106
+ --onyx-number-radius-200: 0.25rem;
107
+ --onyx-number-radius-300: 0.5rem;
108
+ --onyx-number-radius-400: 1rem;
109
+ --onyx-number-radius-500: 2rem;
110
+ --onyx-number-radius-600: 62.5rem;
111
+ --onyx-number-spacing-100: 0.125rem;
112
+ --onyx-number-spacing-200: 0.25rem;
113
+ --onyx-number-spacing-300: 0.5rem;
114
+ --onyx-number-spacing-400: 1rem;
115
+ --onyx-number-spacing-500: 1.5rem;
116
+ --onyx-number-spacing-600: 2rem;
117
+ --onyx-number-spacing-700: 3rem;
118
+ --onyx-number-spacing-800: 4rem;
119
+ --onyx-number-spacing-900: 6rem;
120
+ }
package/src/styles/variables-onyx.json ADDED
@@ -0,0 +1,115 @@
1
+ {
2
+ "onyx-color-themed-action-100": "#e9f7f1",
3
+ "onyx-color-themed-action-200": "#caf0df",
4
+ "onyx-color-themed-action-300": "#a0e7c8",
5
+ "onyx-color-themed-action-400": "#76deb0",
6
+ "onyx-color-themed-action-500": "#4cd598",
7
+ "onyx-color-themed-action-600": "#42bc85",
8
+ "onyx-color-themed-action-700": "#37a373",
9
+ "onyx-color-themed-action-800": "#2d8a60",
10
+ "onyx-color-themed-action-900": "#22714d",
11
+ "onyx-color-themed-action-1000": "#18583a",
12
+ "onyx-color-themed-action-1100": "#0d3f28",
13
+ "onyx-color-themed-action-1200": "#032615",
14
+ "onyx-color-themed-brand-100": "#e9f7f1",
15
+ "onyx-color-themed-brand-200": "#caf0df",
16
+ "onyx-color-themed-brand-300": "#a0e7c8",
17
+ "onyx-color-themed-brand-400": "#76deb0",
18
+ "onyx-color-themed-brand-500": "#4cd598",
19
+ "onyx-color-themed-brand-600": "#42bc85",
20
+ "onyx-color-themed-brand-700": "#37a373",
21
+ "onyx-color-themed-brand-800": "#2d8a60",
22
+ "onyx-color-themed-brand-900": "#22714d",
23
+ "onyx-color-themed-brand-1000": "#18583a",
24
+ "onyx-color-themed-brand-1100": "#0d3f28",
25
+ "onyx-color-themed-brand-1200": "#032615",
26
+ "onyx-color-themed-neutral-100": "#fafbfc",
27
+ "onyx-color-themed-neutral-200": "#dee5ea",
28
+ "onyx-color-themed-neutral-300": "#9ba5ad",
29
+ "onyx-color-themed-neutral-400": "#6b7a86",
30
+ "onyx-color-themed-neutral-500": "#465a69",
31
+ "onyx-color-themed-neutral-600": "#334654",
32
+ "onyx-color-themed-neutral-700": "#2a3c4a",
33
+ "onyx-color-themed-neutral-800": "#223340",
34
+ "onyx-color-themed-neutral-900": "#192a37",
35
+ "onyx-color-themed-neutral-1000": "#11212d",
36
+ "onyx-color-themed-neutral-1100": "#081723",
37
+ "onyx-color-themed-neutral-1200": "#000e19",
38
+ "onyx-color-universal-green-100": "#ecf8f2",
39
+ "onyx-color-universal-green-200": "#c6e4d5",
40
+ "onyx-color-universal-green-300": "#98d1b3",
41
+ "onyx-color-universal-green-400": "#6ebe94",
42
+ "onyx-color-universal-green-500": "#44aa75",
43
+ "onyx-color-universal-green-600": "#3b9b69",
44
+ "onyx-color-universal-green-700": "#328c5e",
45
+ "onyx-color-universal-green-800": "#297d52",
46
+ "onyx-color-universal-green-900": "#216d46",
47
+ "onyx-color-universal-green-1000": "#185e3a",
48
+ "onyx-color-universal-green-1100": "#064023",
49
+ "onyx-color-universal-green-1200": "#064023",
50
+ "onyx-color-universal-greyscale-black": "#000000",
51
+ "onyx-color-universal-greyscale-white": "#ffffff",
52
+ "onyx-color-universal-orange-100": "#faf6f2",
53
+ "onyx-color-universal-orange-200": "#f8e7d8",
54
+ "onyx-color-universal-orange-300": "#f6d1b1",
55
+ "onyx-color-universal-orange-400": "#f4b57e",
56
+ "onyx-color-universal-orange-500": "#f2994a",
57
+ "onyx-color-universal-orange-600": "#d98841",
58
+ "onyx-color-universal-orange-700": "#bf7737",
59
+ "onyx-color-universal-orange-800": "#a6662e",
60
+ "onyx-color-universal-orange-900": "#8c5625",
61
+ "onyx-color-universal-orange-1000": "#73451c",
62
+ "onyx-color-universal-orange-1100": "#593412",
63
+ "onyx-color-universal-orange-1200": "#402309",
64
+ "onyx-color-universal-purple-100": "#f4f1f8",
65
+ "onyx-color-universal-purple-200": "#dbcfea",
66
+ "onyx-color-universal-purple-300": "#c2addc",
67
+ "onyx-color-universal-purple-400": "#a98ace",
68
+ "onyx-color-universal-purple-500": "#9068c0",
69
+ "onyx-color-universal-purple-600": "#805aae",
70
+ "onyx-color-universal-purple-700": "#704c9b",
71
+ "onyx-color-universal-purple-800": "#603e89",
72
+ "onyx-color-universal-purple-900": "#513077",
73
+ "onyx-color-universal-purple-1000": "#412265",
74
+ "onyx-color-universal-purple-1100": "#311452",
75
+ "onyx-color-universal-purple-1200": "#210640",
76
+ "onyx-color-universal-quantitatives-100": "#005795",
77
+ "onyx-color-universal-quantitatives-200": "#ff8a25",
78
+ "onyx-color-universal-quantitatives-300": "#e51718",
79
+ "onyx-color-universal-quantitatives-400": "#36b16b",
80
+ "onyx-color-universal-quantitatives-500": "#56d8fc",
81
+ "onyx-color-universal-quantitatives-600": "#ff9990",
82
+ "onyx-color-universal-quantitatives-700": "#ff3fd1",
83
+ "onyx-color-universal-quantitatives-800": "#3c6475",
84
+ "onyx-color-universal-quantitatives-900": "#c4bc81",
85
+ "onyx-color-universal-quantitatives-1000": "#c3143f",
86
+ "onyx-color-universal-quantitatives-1100": "#a09dfa",
87
+ "onyx-color-universal-quantitatives-1200": "#00bcc6",
88
+ "onyx-color-universal-red-100": "#fbefee",
89
+ "onyx-color-universal-red-200": "#f1d2d1",
90
+ "onyx-color-universal-red-300": "#e6a7a5",
91
+ "onyx-color-universal-red-400": "#dc716e",
92
+ "onyx-color-universal-red-500": "#d1332f",
93
+ "onyx-color-universal-red-600": "#bc2d2a",
94
+ "onyx-color-universal-red-700": "#a82824",
95
+ "onyx-color-universal-red-800": "#93221f",
96
+ "onyx-color-universal-red-900": "#7e1d19",
97
+ "onyx-color-universal-red-1000": "#691714",
98
+ "onyx-color-universal-red-1100": "#400c09",
99
+ "onyx-color-universal-red-1200": "#400c09",
100
+ "onyx-number-radius-100": "0.125rem",
101
+ "onyx-number-radius-200": "0.25rem",
102
+ "onyx-number-radius-300": "0.5rem",
103
+ "onyx-number-radius-400": "1rem",
104
+ "onyx-number-radius-500": "2rem",
105
+ "onyx-number-radius-600": "62.5rem",
106
+ "onyx-number-spacing-100": "0.125rem",
107
+ "onyx-number-spacing-200": "0.25rem",
108
+ "onyx-number-spacing-300": "0.5rem",
109
+ "onyx-number-spacing-400": "1rem",
110
+ "onyx-number-spacing-500": "1.5rem",
111
+ "onyx-number-spacing-600": "2rem",
112
+ "onyx-number-spacing-700": "3rem",
113
+ "onyx-number-spacing-800": "4rem",
114
+ "onyx-number-spacing-900": "6rem"
115
+ }