sit-onyx 1.0.0-beta.75 → 1.0.0-beta.77

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 (24) hide show
  1. package/dist/components/OnyxMoreList/OnyxMoreList.vue.d.ts +17 -9
  2. package/dist/components/OnyxMoreList/types.d.ts +0 -9
  3. package/dist/composables/useMoreList.d.ts +48 -51
  4. package/dist/composables/useResizeObserver.d.ts +11 -1
  5. package/dist/index.cjs +4 -4
  6. package/dist/index.js +1543 -1541
  7. package/dist/style.css +1 -1
  8. package/dist/types/themes.d.ts +2 -1
  9. package/package.json +3 -3
  10. package/src/styles/variables/density-compact.css +1 -1
  11. package/src/styles/variables/density-cozy.css +1 -1
  12. package/src/styles/variables/density-default.css +1 -1
  13. package/src/styles/variables/spacing.css +1 -1
  14. package/src/styles/variables/themes/digits-dark.css +4 -2
  15. package/src/styles/variables/themes/digits-light.css +4 -2
  16. package/src/styles/variables/themes/kaufland-dark.css +4 -2
  17. package/src/styles/variables/themes/kaufland-light.css +4 -2
  18. package/src/styles/variables/themes/lidl-dark.css +4 -2
  19. package/src/styles/variables/themes/lidl-light.css +4 -2
  20. package/src/styles/variables/themes/onyx-dark.css +4 -2
  21. package/src/styles/variables/themes/onyx-light.css +4 -2
  22. package/src/styles/variables/themes/schwarz-dark.css +127 -0
  23. package/src/styles/variables/themes/schwarz-light.css +127 -0
  24. package/src/styles/variables/themes/value.css +3 -1
package/dist/types/themes.d.ts CHANGED
@@ -1 +1,2 @@
1
- export type OnyxTheme = "kaufland" | "lidl" | "onyx" | "digits";
1
+ export declare const ONYX_THEMES: readonly ["onyx", "digits", "kaufland", "lidl", "schwarz"];
2
+ export type OnyxTheme = (typeof ONYX_THEMES)[number];
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sit-onyx",
3
3
  "description": "A design system and Vue.js component library created by Schwarz IT",
4
- "version": "1.0.0-beta.75",
4
+ "version": "1.0.0-beta.77",
5
5
  "type": "module",
6
6
  "author": "Schwarz IT KG",
7
7
  "license": "Apache-2.0",
@@ -50,8 +50,8 @@
50
50
  "storybook-dark-mode": "^4.0.2",
51
51
  "vue": "3.5.13",
52
52
  "vue-component-type-helpers": "^2.1.10",
53
- "@sit-onyx/headless": "^1.0.0-beta.13",
54
- "@sit-onyx/storybook-utils": "^1.0.0-beta.73"
53
+ "@sit-onyx/storybook-utils": "^1.0.0-beta.74",
54
+ "@sit-onyx/headless": "^1.0.0-beta.13"
55
55
  },
56
56
  "scripts": {
57
57
  "dev": "turbo run turbo:dev --filter=.",
package/src/styles/variables/density-compact.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Do not edit directly.
3
3
  * This file contains the specific variables for the "compact" theme.
4
- * Imported from Figma API on Tue, 26 Nov 2024 13:53:24 GMT
4
+ * Imported from Figma API on Tue, 03 Dec 2024 10:20:27 GMT
5
5
  */
6
6
  :where(.onyx-density-compact) {
7
7
  --onyx-density-2xl: var(--onyx-number-spacing-600);
package/src/styles/variables/density-cozy.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Do not edit directly.
3
3
  * This file contains the specific variables for the "cozy" theme.
4
- * Imported from Figma API on Tue, 26 Nov 2024 13:53:24 GMT
4
+ * Imported from Figma API on Tue, 03 Dec 2024 10:20:27 GMT
5
5
  */
6
6
  :where(.onyx-density-cozy) {
7
7
  --onyx-density-2xl: var(--onyx-number-spacing-800);
package/src/styles/variables/density-default.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Do not edit directly.
3
3
  * This file contains the specific variables for the "default" theme.
4
- * Imported from Figma API on Tue, 26 Nov 2024 13:53:18 GMT
4
+ * Imported from Figma API on Tue, 03 Dec 2024 10:20:20 GMT
5
5
  */
6
6
  :where(:root),
7
7
  :where(.onyx-density-default) {
package/src/styles/variables/spacing.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Do not edit directly.
3
3
  * This file contains the specific variables for the "spacing" theme.
4
- * Imported from Figma API on Tue, 26 Nov 2024 13:53:11 GMT
4
+ * Imported from Figma API on Tue, 03 Dec 2024 10:20:12 GMT
5
5
  */
6
6
  :where(:root) {
7
7
  --onyx-spacing-2xl: var(--onyx-number-spacing-700);
package/src/styles/variables/themes/digits-dark.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Do not edit directly.
3
3
  * This file contains the specific variables for the "digits-dark" theme.
4
- * Imported from Figma API on Tue, 26 Nov 2024 13:53:04 GMT
4
+ * Imported from Figma API on Tue, 03 Dec 2024 10:20:05 GMT
5
5
  */
6
6
  :where(.dark),
7
7
  .onyx-theme-digits-dark {
@@ -100,10 +100,11 @@
100
100
  --onyx-color-text-icons-info-intense: var(--onyx-color-purple-500);
101
101
  --onyx-color-text-icons-info-medium: var(--onyx-color-purple-700);
102
102
  --onyx-color-text-icons-info-soft: var(--onyx-color-purple-900);
103
+ --onyx-color-text-icons-neutral-button: var(--onyx-color-grayscale-white);
103
104
  --onyx-color-text-icons-neutral-intense: var(--onyx-color-stone-200);
104
105
  --onyx-color-text-icons-neutral-inverted: var(--onyx-color-stone-1200);
105
106
  --onyx-color-text-icons-neutral-medium: var(--onyx-color-stone-400);
106
- --onyx-color-text-icons-neutral-soft: var(--onyx-color-stone-500);
107
+ --onyx-color-text-icons-neutral-soft: var(--onyx-color-stone-600);
107
108
  --onyx-color-text-icons-primary-bold: var(--onyx-color-onyx-400);
108
109
  --onyx-color-text-icons-primary-intense: var(--onyx-color-onyx-500);
109
110
  --onyx-color-text-icons-primary-medium: var(--onyx-color-onyx-700);
@@ -116,6 +117,7 @@
116
117
  --onyx-color-text-icons-warning-intense: var(--onyx-color-orange-500);
117
118
  --onyx-color-text-icons-warning-medium: var(--onyx-color-orange-700);
118
119
  --onyx-color-text-icons-warning-soft: var(--onyx-color-orange-900);
120
+ --onyx-opacity-backdrop: var(--onyx-number-opacity-medium);
119
121
  --onyx-radius-full: var(--onyx-number-radius-600);
120
122
  --onyx-radius-lg: var(--onyx-number-radius-400);
121
123
  --onyx-radius-md: var(--onyx-number-radius-300);
package/src/styles/variables/themes/digits-light.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Do not edit directly.
3
3
  * This file contains the specific variables for the "digits-light" theme.
4
- * Imported from Figma API on Tue, 26 Nov 2024 13:52:57 GMT
4
+ * Imported from Figma API on Tue, 03 Dec 2024 10:19:58 GMT
5
5
  */
6
6
  :where(:root),
7
7
  .onyx-theme-digits-light {
@@ -100,7 +100,8 @@
100
100
  --onyx-color-text-icons-info-intense: var(--onyx-color-purple-500);
101
101
  --onyx-color-text-icons-info-medium: var(--onyx-color-purple-300);
102
102
  --onyx-color-text-icons-info-soft: var(--onyx-color-purple-200);
103
- --onyx-color-text-icons-neutral-intense: var(--onyx-color-stone-700);
103
+ --onyx-color-text-icons-neutral-button: var(--onyx-color-grayscale-white);
104
+ --onyx-color-text-icons-neutral-intense: var(--onyx-color-stone-900);
104
105
  --onyx-color-text-icons-neutral-inverted: var(--onyx-color-grayscale-white);
105
106
  --onyx-color-text-icons-neutral-medium: var(--onyx-color-stone-600);
106
107
  --onyx-color-text-icons-neutral-soft: var(--onyx-color-stone-500);
@@ -116,6 +117,7 @@
116
117
  --onyx-color-text-icons-warning-intense: var(--onyx-color-orange-500);
117
118
  --onyx-color-text-icons-warning-medium: var(--onyx-color-orange-300);
118
119
  --onyx-color-text-icons-warning-soft: var(--onyx-color-orange-200);
120
+ --onyx-opacity-backdrop: var(--onyx-number-opacity-soft);
119
121
  --onyx-radius-full: var(--onyx-number-radius-600);
120
122
  --onyx-radius-lg: var(--onyx-number-radius-400);
121
123
  --onyx-radius-md: var(--onyx-number-radius-300);
package/src/styles/variables/themes/kaufland-dark.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Do not edit directly.
3
3
  * This file contains the specific variables for the "kaufland-dark" theme.
4
- * Imported from Figma API on Tue, 26 Nov 2024 13:53:04 GMT
4
+ * Imported from Figma API on Tue, 03 Dec 2024 10:20:05 GMT
5
5
  */
6
6
  :where(.dark),
7
7
  .onyx-theme-kaufland-dark {
@@ -100,10 +100,11 @@
100
100
  --onyx-color-text-icons-info-intense: var(--onyx-color-purple-500);
101
101
  --onyx-color-text-icons-info-medium: var(--onyx-color-purple-700);
102
102
  --onyx-color-text-icons-info-soft: var(--onyx-color-purple-900);
103
+ --onyx-color-text-icons-neutral-button: var(--onyx-color-stone-1200);
103
104
  --onyx-color-text-icons-neutral-intense: var(--onyx-color-stone-200);
104
105
  --onyx-color-text-icons-neutral-inverted: var(--onyx-color-stone-1200);
105
106
  --onyx-color-text-icons-neutral-medium: var(--onyx-color-stone-400);
106
- --onyx-color-text-icons-neutral-soft: var(--onyx-color-stone-500);
107
+ --onyx-color-text-icons-neutral-soft: var(--onyx-color-stone-600);
107
108
  --onyx-color-text-icons-primary-bold: var(--onyx-color-kl-100);
108
109
  --onyx-color-text-icons-primary-intense: var(--onyx-color-kl-200);
109
110
  --onyx-color-text-icons-primary-medium: var(--onyx-color-kl-400);
@@ -116,6 +117,7 @@
116
117
  --onyx-color-text-icons-warning-intense: var(--onyx-color-orange-500);
117
118
  --onyx-color-text-icons-warning-medium: var(--onyx-color-orange-700);
118
119
  --onyx-color-text-icons-warning-soft: var(--onyx-color-orange-900);
120
+ --onyx-opacity-backdrop: var(--onyx-number-opacity-medium);
119
121
  --onyx-radius-full: var(--onyx-number-radius-600);
120
122
  --onyx-radius-lg: var(--onyx-number-radius-400);
121
123
  --onyx-radius-md: var(--onyx-number-radius-300);
package/src/styles/variables/themes/kaufland-light.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Do not edit directly.
3
3
  * This file contains the specific variables for the "kaufland-light" theme.
4
- * Imported from Figma API on Tue, 26 Nov 2024 13:52:57 GMT
4
+ * Imported from Figma API on Tue, 03 Dec 2024 10:19:58 GMT
5
5
  */
6
6
  :where(:root),
7
7
  .onyx-theme-kaufland-light {
@@ -100,7 +100,8 @@
100
100
  --onyx-color-text-icons-info-intense: var(--onyx-color-purple-500);
101
101
  --onyx-color-text-icons-info-medium: var(--onyx-color-purple-300);
102
102
  --onyx-color-text-icons-info-soft: var(--onyx-color-purple-200);
103
- --onyx-color-text-icons-neutral-intense: var(--onyx-color-stone-700);
103
+ --onyx-color-text-icons-neutral-button: var(--onyx-color-grayscale-white);
104
+ --onyx-color-text-icons-neutral-intense: var(--onyx-color-stone-900);
104
105
  --onyx-color-text-icons-neutral-inverted: var(--onyx-color-grayscale-white);
105
106
  --onyx-color-text-icons-neutral-medium: var(--onyx-color-stone-600);
106
107
  --onyx-color-text-icons-neutral-soft: var(--onyx-color-stone-500);
@@ -116,6 +117,7 @@
116
117
  --onyx-color-text-icons-warning-intense: var(--onyx-color-orange-500);
117
118
  --onyx-color-text-icons-warning-medium: var(--onyx-color-orange-300);
118
119
  --onyx-color-text-icons-warning-soft: var(--onyx-color-orange-200);
120
+ --onyx-opacity-backdrop: var(--onyx-number-opacity-soft);
119
121
  --onyx-radius-full: var(--onyx-number-radius-600);
120
122
  --onyx-radius-lg: var(--onyx-number-radius-400);
121
123
  --onyx-radius-md: var(--onyx-number-radius-300);
package/src/styles/variables/themes/lidl-dark.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Do not edit directly.
3
3
  * This file contains the specific variables for the "lidl-dark" theme.
4
- * Imported from Figma API on Tue, 26 Nov 2024 13:53:04 GMT
4
+ * Imported from Figma API on Tue, 03 Dec 2024 10:20:05 GMT
5
5
  */
6
6
  :where(.dark),
7
7
  .onyx-theme-lidl-dark {
@@ -100,10 +100,11 @@
100
100
  --onyx-color-text-icons-info-intense: var(--onyx-color-purple-500);
101
101
  --onyx-color-text-icons-info-medium: var(--onyx-color-purple-700);
102
102
  --onyx-color-text-icons-info-soft: var(--onyx-color-purple-900);
103
+ --onyx-color-text-icons-neutral-button: var(--onyx-color-grayscale-white);
103
104
  --onyx-color-text-icons-neutral-intense: var(--onyx-color-stone-200);
104
105
  --onyx-color-text-icons-neutral-inverted: var(--onyx-color-stone-1200);
105
106
  --onyx-color-text-icons-neutral-medium: var(--onyx-color-stone-400);
106
- --onyx-color-text-icons-neutral-soft: var(--onyx-color-stone-500);
107
+ --onyx-color-text-icons-neutral-soft: var(--onyx-color-stone-600);
107
108
  --onyx-color-text-icons-primary-bold: var(--onyx-color-lidl-400);
108
109
  --onyx-color-text-icons-primary-intense: var(--onyx-color-lidl-500);
109
110
  --onyx-color-text-icons-primary-medium: var(--onyx-color-lidl-700);
@@ -116,6 +117,7 @@
116
117
  --onyx-color-text-icons-warning-intense: var(--onyx-color-orange-500);
117
118
  --onyx-color-text-icons-warning-medium: var(--onyx-color-orange-700);
118
119
  --onyx-color-text-icons-warning-soft: var(--onyx-color-orange-900);
120
+ --onyx-opacity-backdrop: var(--onyx-number-opacity-medium);
119
121
  --onyx-radius-full: var(--onyx-number-radius-600);
120
122
  --onyx-radius-lg: var(--onyx-number-radius-400);
121
123
  --onyx-radius-md: var(--onyx-number-radius-300);
package/src/styles/variables/themes/lidl-light.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Do not edit directly.
3
3
  * This file contains the specific variables for the "lidl-light" theme.
4
- * Imported from Figma API on Tue, 26 Nov 2024 13:52:57 GMT
4
+ * Imported from Figma API on Tue, 03 Dec 2024 10:19:58 GMT
5
5
  */
6
6
  :where(:root),
7
7
  .onyx-theme-lidl-light {
@@ -100,7 +100,8 @@
100
100
  --onyx-color-text-icons-info-intense: var(--onyx-color-purple-500);
101
101
  --onyx-color-text-icons-info-medium: var(--onyx-color-purple-300);
102
102
  --onyx-color-text-icons-info-soft: var(--onyx-color-purple-200);
103
- --onyx-color-text-icons-neutral-intense: var(--onyx-color-stone-700);
103
+ --onyx-color-text-icons-neutral-button: var(--onyx-color-grayscale-white);
104
+ --onyx-color-text-icons-neutral-intense: var(--onyx-color-stone-900);
104
105
  --onyx-color-text-icons-neutral-inverted: var(--onyx-color-grayscale-white);
105
106
  --onyx-color-text-icons-neutral-medium: var(--onyx-color-stone-600);
106
107
  --onyx-color-text-icons-neutral-soft: var(--onyx-color-stone-500);
@@ -116,6 +117,7 @@
116
117
  --onyx-color-text-icons-warning-intense: var(--onyx-color-orange-500);
117
118
  --onyx-color-text-icons-warning-medium: var(--onyx-color-orange-300);
118
119
  --onyx-color-text-icons-warning-soft: var(--onyx-color-orange-200);
120
+ --onyx-opacity-backdrop: var(--onyx-number-opacity-soft);
119
121
  --onyx-radius-full: var(--onyx-number-radius-600);
120
122
  --onyx-radius-lg: var(--onyx-number-radius-400);
121
123
  --onyx-radius-md: var(--onyx-number-radius-300);
package/src/styles/variables/themes/onyx-dark.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Do not edit directly.
3
3
  * This file contains the specific variables for the "onyx-dark" theme.
4
- * Imported from Figma API on Tue, 26 Nov 2024 13:52:50 GMT
4
+ * Imported from Figma API on Tue, 03 Dec 2024 10:19:51 GMT
5
5
  */
6
6
  :where(.dark),
7
7
  .onyx-theme-default-dark {
@@ -100,10 +100,11 @@
100
100
  --onyx-color-text-icons-info-intense: var(--onyx-color-purple-500);
101
101
  --onyx-color-text-icons-info-medium: var(--onyx-color-purple-700);
102
102
  --onyx-color-text-icons-info-soft: var(--onyx-color-purple-900);
103
+ --onyx-color-text-icons-neutral-button: var(--onyx-color-grayscale-white);
103
104
  --onyx-color-text-icons-neutral-intense: var(--onyx-color-stone-200);
104
105
  --onyx-color-text-icons-neutral-inverted: var(--onyx-color-stone-1200);
105
106
  --onyx-color-text-icons-neutral-medium: var(--onyx-color-stone-400);
106
- --onyx-color-text-icons-neutral-soft: var(--onyx-color-stone-500);
107
+ --onyx-color-text-icons-neutral-soft: var(--onyx-color-stone-600);
107
108
  --onyx-color-text-icons-primary-bold: var(--onyx-color-onyx-400);
108
109
  --onyx-color-text-icons-primary-intense: var(--onyx-color-onyx-500);
109
110
  --onyx-color-text-icons-primary-medium: var(--onyx-color-onyx-700);
@@ -116,6 +117,7 @@
116
117
  --onyx-color-text-icons-warning-intense: var(--onyx-color-orange-500);
117
118
  --onyx-color-text-icons-warning-medium: var(--onyx-color-orange-700);
118
119
  --onyx-color-text-icons-warning-soft: var(--onyx-color-orange-900);
120
+ --onyx-opacity-backdrop: var(--onyx-number-opacity-medium);
119
121
  --onyx-radius-full: var(--onyx-number-radius-600);
120
122
  --onyx-radius-lg: var(--onyx-number-radius-400);
121
123
  --onyx-radius-md: var(--onyx-number-radius-300);
package/src/styles/variables/themes/onyx-light.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Do not edit directly.
3
3
  * This file contains the specific variables for the "onyx-light" theme.
4
- * Imported from Figma API on Tue, 26 Nov 2024 13:52:43 GMT
4
+ * Imported from Figma API on Tue, 03 Dec 2024 10:19:44 GMT
5
5
  */
6
6
  :where(:root),
7
7
  .onyx-theme-default {
@@ -100,7 +100,8 @@
100
100
  --onyx-color-text-icons-info-intense: var(--onyx-color-purple-500);
101
101
  --onyx-color-text-icons-info-medium: var(--onyx-color-purple-300);
102
102
  --onyx-color-text-icons-info-soft: var(--onyx-color-purple-200);
103
- --onyx-color-text-icons-neutral-intense: var(--onyx-color-stone-700);
103
+ --onyx-color-text-icons-neutral-button: var(--onyx-color-grayscale-white);
104
+ --onyx-color-text-icons-neutral-intense: var(--onyx-color-stone-900);
104
105
  --onyx-color-text-icons-neutral-inverted: var(--onyx-color-grayscale-white);
105
106
  --onyx-color-text-icons-neutral-medium: var(--onyx-color-stone-600);
106
107
  --onyx-color-text-icons-neutral-soft: var(--onyx-color-stone-500);
@@ -116,6 +117,7 @@
116
117
  --onyx-color-text-icons-warning-intense: var(--onyx-color-orange-500);
117
118
  --onyx-color-text-icons-warning-medium: var(--onyx-color-orange-300);
118
119
  --onyx-color-text-icons-warning-soft: var(--onyx-color-orange-200);
120
+ --onyx-opacity-backdrop: var(--onyx-number-opacity-soft);
119
121
  --onyx-radius-full: var(--onyx-number-radius-600);
120
122
  --onyx-radius-lg: var(--onyx-number-radius-400);
121
123
  --onyx-radius-md: var(--onyx-number-radius-300);
package/src/styles/variables/themes/schwarz-dark.css ADDED
@@ -0,0 +1,127 @@
1
+ /**
2
+ * Do not edit directly.
3
+ * This file contains the specific variables for the "schwarz-dark" theme.
4
+ * Imported from Figma API on Tue, 03 Dec 2024 10:20:05 GMT
5
+ */
6
+ :where(.dark),
7
+ .onyx-theme-schwarz-dark {
8
+ --onyx-color-base-background-blank: var(--onyx-color-steel-1100);
9
+ --onyx-color-base-background-tinted: var(--onyx-color-steel-1200);
10
+ --onyx-color-base-danger-100: var(--onyx-color-red-1100);
11
+ --onyx-color-base-danger-200: var(--onyx-color-red-1000);
12
+ --onyx-color-base-danger-300: var(--onyx-color-red-900);
13
+ --onyx-color-base-danger-400: var(--onyx-color-red-800);
14
+ --onyx-color-base-danger-500: var(--onyx-color-red-700);
15
+ --onyx-color-base-danger-600: var(--onyx-color-red-600);
16
+ --onyx-color-base-danger-700: var(--onyx-color-red-500);
17
+ --onyx-color-base-danger-800: var(--onyx-color-red-400);
18
+ --onyx-color-base-danger-900: var(--onyx-color-red-300);
19
+ --onyx-color-base-grayscale-black: var(--onyx-color-grayscale-black);
20
+ --onyx-color-base-grayscale-white: var(--onyx-color-grayscale-white);
21
+ --onyx-color-base-info-100: var(--onyx-color-purple-1100);
22
+ --onyx-color-base-info-200: var(--onyx-color-purple-1000);
23
+ --onyx-color-base-info-300: var(--onyx-color-purple-900);
24
+ --onyx-color-base-info-400: var(--onyx-color-purple-800);
25
+ --onyx-color-base-info-500: var(--onyx-color-purple-700);
26
+ --onyx-color-base-info-600: var(--onyx-color-purple-600);
27
+ --onyx-color-base-info-700: var(--onyx-color-purple-500);
28
+ --onyx-color-base-info-800: var(--onyx-color-purple-400);
29
+ --onyx-color-base-info-900: var(--onyx-color-purple-300);
30
+ --onyx-color-base-neutral-100: var(--onyx-color-steel-1100);
31
+ --onyx-color-base-neutral-200: var(--onyx-color-steel-1000);
32
+ --onyx-color-base-neutral-300: var(--onyx-color-steel-900);
33
+ --onyx-color-base-neutral-400: var(--onyx-color-steel-800);
34
+ --onyx-color-base-neutral-500: var(--onyx-color-steel-700);
35
+ --onyx-color-base-neutral-600: var(--onyx-color-steel-600);
36
+ --onyx-color-base-neutral-700: var(--onyx-color-steel-500);
37
+ --onyx-color-base-neutral-800: var(--onyx-color-steel-400);
38
+ --onyx-color-base-neutral-900: var(--onyx-color-steel-300);
39
+ --onyx-color-base-primary-100: var(--onyx-color-schwarz-1100);
40
+ --onyx-color-base-primary-200: var(--onyx-color-schwarz-1000);
41
+ --onyx-color-base-primary-300: var(--onyx-color-schwarz-900);
42
+ --onyx-color-base-primary-400: var(--onyx-color-schwarz-800);
43
+ --onyx-color-base-primary-500: var(--onyx-color-schwarz-700);
44
+ --onyx-color-base-primary-600: var(--onyx-color-schwarz-600);
45
+ --onyx-color-base-primary-700: var(--onyx-color-schwarz-500);
46
+ --onyx-color-base-primary-800: var(--onyx-color-schwarz-400);
47
+ --onyx-color-base-primary-900: var(--onyx-color-schwarz-300);
48
+ --onyx-color-base-quantitatives-100: var(--onyx-color-quantitatives-150);
49
+ --onyx-color-base-quantitatives-200: var(--onyx-color-quantitatives-250);
50
+ --onyx-color-base-quantitatives-300: var(--onyx-color-quantitatives-350);
51
+ --onyx-color-base-quantitatives-400: var(--onyx-color-quantitatives-450);
52
+ --onyx-color-base-quantitatives-500: var(--onyx-color-quantitatives-550);
53
+ --onyx-color-base-quantitatives-600: var(--onyx-color-quantitatives-650);
54
+ --onyx-color-base-quantitatives-700: var(--onyx-color-quantitatives-750);
55
+ --onyx-color-base-quantitatives-800: var(--onyx-color-quantitatives-850);
56
+ --onyx-color-base-quantitatives-900: var(--onyx-color-quantitatives-950);
57
+ --onyx-color-base-quantitatives-1000: var(--onyx-color-quantitatives-1050);
58
+ --onyx-color-base-quantitatives-1100: var(--onyx-color-quantitatives-1150);
59
+ --onyx-color-base-quantitatives-1200: var(--onyx-color-quantitatives-1250);
60
+ --onyx-color-base-success-100: var(--onyx-color-green-1100);
61
+ --onyx-color-base-success-200: var(--onyx-color-green-1000);
62
+ --onyx-color-base-success-300: var(--onyx-color-green-900);
63
+ --onyx-color-base-success-400: var(--onyx-color-green-800);
64
+ --onyx-color-base-success-500: var(--onyx-color-green-700);
65
+ --onyx-color-base-success-600: var(--onyx-color-green-600);
66
+ --onyx-color-base-success-700: var(--onyx-color-green-500);
67
+ --onyx-color-base-success-800: var(--onyx-color-green-400);
68
+ --onyx-color-base-success-900: var(--onyx-color-green-300);
69
+ --onyx-color-base-warning-100: var(--onyx-color-orange-1100);
70
+ --onyx-color-base-warning-200: var(--onyx-color-orange-1000);
71
+ --onyx-color-base-warning-300: var(--onyx-color-orange-900);
72
+ --onyx-color-base-warning-400: var(--onyx-color-orange-800);
73
+ --onyx-color-base-warning-500: var(--onyx-color-orange-700);
74
+ --onyx-color-base-warning-600: var(--onyx-color-orange-600);
75
+ --onyx-color-base-warning-700: var(--onyx-color-orange-500);
76
+ --onyx-color-base-warning-800: var(--onyx-color-orange-400);
77
+ --onyx-color-base-warning-900: var(--onyx-color-orange-300);
78
+ --onyx-color-component-border-disabled: var(--onyx-color-base-neutral-200);
79
+ --onyx-color-component-border-invalid: var(--onyx-color-base-danger-500);
80
+ --onyx-color-component-border-invalid-hover: var(--onyx-color-base-danger-400);
81
+ --onyx-color-component-border-neutral: var(--onyx-color-base-neutral-300);
82
+ --onyx-color-component-border-primary: var(--onyx-color-base-primary-500);
83
+ --onyx-color-component-border-primary-hover: var(--onyx-color-base-primary-400);
84
+ --onyx-color-component-border-success: var(--onyx-color-base-success-500);
85
+ --onyx-color-component-border-success-hover: var(--onyx-color-base-success-400);
86
+ --onyx-color-component-cta-default: var(--onyx-color-base-primary-500);
87
+ --onyx-color-component-cta-default-hover: var(--onyx-color-base-primary-400);
88
+ --onyx-color-component-cta-disabled: var(--onyx-color-base-neutral-200);
89
+ --onyx-color-component-cta-invalid: var(--onyx-color-base-danger-500);
90
+ --onyx-color-component-cta-invalid-hover: var(--onyx-color-base-danger-400);
91
+ --onyx-color-component-focus-invalid: var(--onyx-color-base-danger-300);
92
+ --onyx-color-component-focus-neutral: var(--onyx-color-base-neutral-500);
93
+ --onyx-color-component-focus-primary: var(--onyx-color-lime-700);
94
+ --onyx-color-component-focus-success: var(--onyx-color-base-success-200);
95
+ --onyx-color-text-icons-danger-bold: var(--onyx-color-red-400);
96
+ --onyx-color-text-icons-danger-intense: var(--onyx-color-red-500);
97
+ --onyx-color-text-icons-danger-medium: var(--onyx-color-red-700);
98
+ --onyx-color-text-icons-danger-soft: var(--onyx-color-red-900);
99
+ --onyx-color-text-icons-info-bold: var(--onyx-color-purple-400);
100
+ --onyx-color-text-icons-info-intense: var(--onyx-color-purple-500);
101
+ --onyx-color-text-icons-info-medium: var(--onyx-color-purple-700);
102
+ --onyx-color-text-icons-info-soft: var(--onyx-color-purple-900);
103
+ --onyx-color-text-icons-neutral-button: var(--onyx-color-grayscale-white);
104
+ --onyx-color-text-icons-neutral-intense: var(--onyx-color-stone-200);
105
+ --onyx-color-text-icons-neutral-inverted: var(--onyx-color-stone-1200);
106
+ --onyx-color-text-icons-neutral-medium: var(--onyx-color-stone-400);
107
+ --onyx-color-text-icons-neutral-soft: var(--onyx-color-stone-600);
108
+ --onyx-color-text-icons-primary-bold: var(--onyx-color-schwarz-400);
109
+ --onyx-color-text-icons-primary-intense: var(--onyx-color-schwarz-500);
110
+ --onyx-color-text-icons-primary-medium: var(--onyx-color-schwarz-700);
111
+ --onyx-color-text-icons-primary-soft: var(--onyx-color-schwarz-900);
112
+ --onyx-color-text-icons-success-bold: var(--onyx-color-green-400);
113
+ --onyx-color-text-icons-success-intense: var(--onyx-color-green-500);
114
+ --onyx-color-text-icons-success-medium: var(--onyx-color-green-700);
115
+ --onyx-color-text-icons-success-soft: var(--onyx-color-green-900);
116
+ --onyx-color-text-icons-warning-bold: var(--onyx-color-orange-400);
117
+ --onyx-color-text-icons-warning-intense: var(--onyx-color-orange-500);
118
+ --onyx-color-text-icons-warning-medium: var(--onyx-color-orange-700);
119
+ --onyx-color-text-icons-warning-soft: var(--onyx-color-orange-900);
120
+ --onyx-opacity-backdrop: var(--onyx-number-opacity-medium);
121
+ --onyx-radius-full: var(--onyx-number-radius-600);
122
+ --onyx-radius-lg: var(--onyx-number-radius-400);
123
+ --onyx-radius-md: var(--onyx-number-radius-300);
124
+ --onyx-radius-sm: var(--onyx-number-radius-200);
125
+ --onyx-radius-xl: var(--onyx-number-radius-500);
126
+ --onyx-radius-xs: var(--onyx-number-radius-100);
127
+ }
package/src/styles/variables/themes/schwarz-light.css ADDED
@@ -0,0 +1,127 @@
1
+ /**
2
+ * Do not edit directly.
3
+ * This file contains the specific variables for the "schwarz-light" theme.
4
+ * Imported from Figma API on Tue, 03 Dec 2024 10:19:58 GMT
5
+ */
6
+ :where(:root),
7
+ .onyx-theme-schwarz-light {
8
+ --onyx-color-base-background-blank: var(--onyx-color-grayscale-white);
9
+ --onyx-color-base-background-tinted: var(--onyx-color-steel-100);
10
+ --onyx-color-base-danger-100: var(--onyx-color-red-100);
11
+ --onyx-color-base-danger-200: var(--onyx-color-red-200);
12
+ --onyx-color-base-danger-300: var(--onyx-color-red-300);
13
+ --onyx-color-base-danger-400: var(--onyx-color-red-400);
14
+ --onyx-color-base-danger-500: var(--onyx-color-red-500);
15
+ --onyx-color-base-danger-600: var(--onyx-color-red-600);
16
+ --onyx-color-base-danger-700: var(--onyx-color-red-700);
17
+ --onyx-color-base-danger-800: var(--onyx-color-red-800);
18
+ --onyx-color-base-danger-900: var(--onyx-color-red-900);
19
+ --onyx-color-base-grayscale-black: var(--onyx-color-grayscale-black);
20
+ --onyx-color-base-grayscale-white: var(--onyx-color-grayscale-white);
21
+ --onyx-color-base-info-100: var(--onyx-color-purple-100);
22
+ --onyx-color-base-info-200: var(--onyx-color-purple-200);
23
+ --onyx-color-base-info-300: var(--onyx-color-purple-300);
24
+ --onyx-color-base-info-400: var(--onyx-color-purple-400);
25
+ --onyx-color-base-info-500: var(--onyx-color-purple-500);
26
+ --onyx-color-base-info-600: var(--onyx-color-purple-600);
27
+ --onyx-color-base-info-700: var(--onyx-color-purple-700);
28
+ --onyx-color-base-info-800: var(--onyx-color-purple-800);
29
+ --onyx-color-base-info-900: var(--onyx-color-purple-900);
30
+ --onyx-color-base-neutral-100: var(--onyx-color-steel-100);
31
+ --onyx-color-base-neutral-200: var(--onyx-color-steel-200);
32
+ --onyx-color-base-neutral-300: var(--onyx-color-steel-300);
33
+ --onyx-color-base-neutral-400: var(--onyx-color-steel-400);
34
+ --onyx-color-base-neutral-500: var(--onyx-color-steel-500);
35
+ --onyx-color-base-neutral-600: var(--onyx-color-steel-600);
36
+ --onyx-color-base-neutral-700: var(--onyx-color-steel-700);
37
+ --onyx-color-base-neutral-800: var(--onyx-color-steel-800);
38
+ --onyx-color-base-neutral-900: var(--onyx-color-steel-900);
39
+ --onyx-color-base-primary-100: var(--onyx-color-schwarz-100);
40
+ --onyx-color-base-primary-200: var(--onyx-color-schwarz-200);
41
+ --onyx-color-base-primary-300: var(--onyx-color-schwarz-300);
42
+ --onyx-color-base-primary-400: var(--onyx-color-schwarz-400);
43
+ --onyx-color-base-primary-500: var(--onyx-color-schwarz-500);
44
+ --onyx-color-base-primary-600: var(--onyx-color-schwarz-600);
45
+ --onyx-color-base-primary-700: var(--onyx-color-schwarz-700);
46
+ --onyx-color-base-primary-800: var(--onyx-color-schwarz-800);
47
+ --onyx-color-base-primary-900: var(--onyx-color-schwarz-900);
48
+ --onyx-color-base-quantitatives-100: var(--onyx-color-quantitatives-100);
49
+ --onyx-color-base-quantitatives-200: var(--onyx-color-quantitatives-200);
50
+ --onyx-color-base-quantitatives-300: var(--onyx-color-quantitatives-300);
51
+ --onyx-color-base-quantitatives-400: var(--onyx-color-quantitatives-400);
52
+ --onyx-color-base-quantitatives-500: var(--onyx-color-quantitatives-500);
53
+ --onyx-color-base-quantitatives-600: var(--onyx-color-quantitatives-600);
54
+ --onyx-color-base-quantitatives-700: var(--onyx-color-quantitatives-700);
55
+ --onyx-color-base-quantitatives-800: var(--onyx-color-quantitatives-800);
56
+ --onyx-color-base-quantitatives-900: var(--onyx-color-quantitatives-900);
57
+ --onyx-color-base-quantitatives-1000: var(--onyx-color-quantitatives-1000);
58
+ --onyx-color-base-quantitatives-1100: var(--onyx-color-quantitatives-1100);
59
+ --onyx-color-base-quantitatives-1200: var(--onyx-color-quantitatives-1200);
60
+ --onyx-color-base-success-100: var(--onyx-color-green-100);
61
+ --onyx-color-base-success-200: var(--onyx-color-green-200);
62
+ --onyx-color-base-success-300: var(--onyx-color-green-300);
63
+ --onyx-color-base-success-400: var(--onyx-color-green-400);
64
+ --onyx-color-base-success-500: var(--onyx-color-green-500);
65
+ --onyx-color-base-success-600: var(--onyx-color-green-600);
66
+ --onyx-color-base-success-700: var(--onyx-color-green-700);
67
+ --onyx-color-base-success-800: var(--onyx-color-green-800);
68
+ --onyx-color-base-success-900: var(--onyx-color-green-900);
69
+ --onyx-color-base-warning-100: var(--onyx-color-orange-100);
70
+ --onyx-color-base-warning-200: var(--onyx-color-orange-200);
71
+ --onyx-color-base-warning-300: var(--onyx-color-orange-300);
72
+ --onyx-color-base-warning-400: var(--onyx-color-orange-400);
73
+ --onyx-color-base-warning-500: var(--onyx-color-orange-500);
74
+ --onyx-color-base-warning-600: var(--onyx-color-orange-600);
75
+ --onyx-color-base-warning-700: var(--onyx-color-orange-700);
76
+ --onyx-color-base-warning-800: var(--onyx-color-orange-800);
77
+ --onyx-color-base-warning-900: var(--onyx-color-orange-900);
78
+ --onyx-color-component-border-disabled: var(--onyx-color-base-neutral-200);
79
+ --onyx-color-component-border-invalid: var(--onyx-color-base-danger-500);
80
+ --onyx-color-component-border-invalid-hover: var(--onyx-color-base-danger-400);
81
+ --onyx-color-component-border-neutral: var(--onyx-color-base-neutral-300);
82
+ --onyx-color-component-border-primary: var(--onyx-color-base-primary-500);
83
+ --onyx-color-component-border-primary-hover: var(--onyx-color-base-primary-400);
84
+ --onyx-color-component-border-success: var(--onyx-color-base-success-500);
85
+ --onyx-color-component-border-success-hover: var(--onyx-color-base-success-400);
86
+ --onyx-color-component-cta-default: var(--onyx-color-base-primary-500);
87
+ --onyx-color-component-cta-default-hover: var(--onyx-color-base-primary-400);
88
+ --onyx-color-component-cta-disabled: var(--onyx-color-base-neutral-200);
89
+ --onyx-color-component-cta-invalid: var(--onyx-color-base-danger-500);
90
+ --onyx-color-component-cta-invalid-hover: var(--onyx-color-base-danger-400);
91
+ --onyx-color-component-focus-invalid: var(--onyx-color-base-danger-300);
92
+ --onyx-color-component-focus-neutral: var(--onyx-color-base-neutral-200);
93
+ --onyx-color-component-focus-primary: var(--onyx-color-lime-300);
94
+ --onyx-color-component-focus-success: var(--onyx-color-base-success-200);
95
+ --onyx-color-text-icons-danger-bold: var(--onyx-color-red-700);
96
+ --onyx-color-text-icons-danger-intense: var(--onyx-color-red-500);
97
+ --onyx-color-text-icons-danger-medium: var(--onyx-color-red-300);
98
+ --onyx-color-text-icons-danger-soft: var(--onyx-color-red-200);
99
+ --onyx-color-text-icons-info-bold: var(--onyx-color-purple-700);
100
+ --onyx-color-text-icons-info-intense: var(--onyx-color-purple-500);
101
+ --onyx-color-text-icons-info-medium: var(--onyx-color-purple-300);
102
+ --onyx-color-text-icons-info-soft: var(--onyx-color-purple-200);
103
+ --onyx-color-text-icons-neutral-button: var(--onyx-color-grayscale-white);
104
+ --onyx-color-text-icons-neutral-intense: var(--onyx-color-stone-900);
105
+ --onyx-color-text-icons-neutral-inverted: var(--onyx-color-grayscale-white);
106
+ --onyx-color-text-icons-neutral-medium: var(--onyx-color-stone-600);
107
+ --onyx-color-text-icons-neutral-soft: var(--onyx-color-stone-500);
108
+ --onyx-color-text-icons-primary-bold: var(--onyx-color-schwarz-900);
109
+ --onyx-color-text-icons-primary-intense: var(--onyx-color-schwarz-700);
110
+ --onyx-color-text-icons-primary-medium: var(--onyx-color-schwarz-500);
111
+ --onyx-color-text-icons-primary-soft: var(--onyx-color-schwarz-400);
112
+ --onyx-color-text-icons-success-bold: var(--onyx-color-green-700);
113
+ --onyx-color-text-icons-success-intense: var(--onyx-color-green-500);
114
+ --onyx-color-text-icons-success-medium: var(--onyx-color-green-300);
115
+ --onyx-color-text-icons-success-soft: var(--onyx-color-green-200);
116
+ --onyx-color-text-icons-warning-bold: var(--onyx-color-orange-700);
117
+ --onyx-color-text-icons-warning-intense: var(--onyx-color-orange-500);
118
+ --onyx-color-text-icons-warning-medium: var(--onyx-color-orange-300);
119
+ --onyx-color-text-icons-warning-soft: var(--onyx-color-orange-200);
120
+ --onyx-opacity-backdrop: var(--onyx-number-opacity-soft);
121
+ --onyx-radius-full: var(--onyx-number-radius-600);
122
+ --onyx-radius-lg: var(--onyx-number-radius-400);
123
+ --onyx-radius-md: var(--onyx-number-radius-300);
124
+ --onyx-radius-sm: var(--onyx-number-radius-200);
125
+ --onyx-radius-xl: var(--onyx-number-radius-500);
126
+ --onyx-radius-xs: var(--onyx-number-radius-100);
127
+ }
package/src/styles/variables/themes/value.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Do not edit directly.
3
3
  * This file contains the specific variables for the "value" theme.
4
- * Imported from Figma API on Tue, 26 Nov 2024 13:52:43 GMT
4
+ * Imported from Figma API on Tue, 03 Dec 2024 10:19:44 GMT
5
5
  */
6
6
  :where(:root),
7
7
  .onyx-theme-default {
@@ -199,6 +199,8 @@
199
199
  --onyx-color-twogo-1000: #023e42;
200
200
  --onyx-color-twogo-1100: #012c2e;
201
201
  --onyx-color-twogo-1200: #00191b;
202
+ --onyx-number-opacity-medium: 3.75rem;
203
+ --onyx-number-opacity-soft: 0.9375rem;
202
204
  --onyx-number-radius-100: 0.125rem;
203
205
  --onyx-number-radius-200: 0.25rem;
204
206
  --onyx-number-radius-300: 0.5rem;