@solibo/solibo-ui 1.2.4 → 2.0.1

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 (32) hide show
  1. package/dist/assets/index.css +1 -1
  2. package/dist/assets/index10.css +1 -1
  3. package/dist/assets/index19.css +1 -1
  4. package/dist/assets/index3.css +1 -1
  5. package/dist/assets/index30.css +1 -1
  6. package/dist/assets/index49.css +1 -1
  7. package/dist/components/branding/index.cjs +15 -1
  8. package/dist/components/branding/index.cjs.map +1 -1
  9. package/dist/components/branding/index.js +25 -26
  10. package/dist/components/branding/index.js.map +1 -1
  11. package/dist/components/dialog/index.js +5 -5
  12. package/dist/components/editor/index.cjs +34 -36
  13. package/dist/components/editor/index.cjs.map +1 -1
  14. package/dist/components/editor/index.js +11616 -6965
  15. package/dist/components/editor/index.js.map +1 -1
  16. package/dist/components/header/index.cjs +1 -1
  17. package/dist/components/header/index.js +19 -19
  18. package/dist/components/link/index.cjs +1 -1
  19. package/dist/components/link/index.cjs.map +1 -1
  20. package/dist/components/link/index.js +11 -11
  21. package/dist/components/list/index.js +7 -7
  22. package/dist/components/portal/index.cjs +1 -1
  23. package/dist/components/portal/index.cjs.map +1 -1
  24. package/dist/components/portal/index.js +19 -19
  25. package/dist/components/portal/index.js.map +1 -1
  26. package/dist/components/sortable/index.js +11 -11
  27. package/dist/components/toggle/index.cjs +1 -1
  28. package/dist/components/toggle/index.js +16 -16
  29. package/dist/index.d.ts +10 -21
  30. package/dist/tokens.css +173 -142
  31. package/dist/tokens.json +617 -912
  32. package/package.json +7 -7
package/dist/tokens.css CHANGED
@@ -29,16 +29,16 @@
29
29
  --colors-categories-content-on-grey: #3f444a;
30
30
  --colors-categories-content-on-pink: #783b65;
31
31
  --colors-categories-content-on-yellow: #65483f;
32
- --colors-green-100: #b0c8c2;
33
- --colors-green-200: #8aaea5;
34
- --colors-green-300: #54887c;
35
- --colors-green-400: #337162;
36
- --colors-green-50: #e6edeb;
37
- --colors-green-500: #004e3b;
38
- --colors-green-600: #004736;
39
- --colors-green-700: #00372a;
40
- --colors-green-800: #002b20;
41
- --colors-green-900: #002119;
32
+ --colors-green-100: #d9e0d7;
33
+ --colors-green-200: #b8c7b3;
34
+ --colors-green-300: #90aa88;
35
+ --colors-green-400: #698c5f;
36
+ --colors-green-50: #eff1ee;
37
+ --colors-green-500: #4a6344;
38
+ --colors-green-600: var(--colors-new-brand-shadow-green);
39
+ --colors-green-700: var(--colors-new-brand-dark-green);
40
+ --colors-green-800: #151b13;
41
+ --colors-green-900: #0c0f0b;
42
42
  --colors-neutral-0: #fff;
43
43
  --colors-neutral-100: #ebebeb;
44
44
  --colors-neutral-200: #dfdfdf;
@@ -58,36 +58,26 @@
58
58
  --colors-new-brand-shadow-green: #263821;
59
59
  --colors-new-brand-shadow-yellow: #7d8233;
60
60
  --colors-new-brand-yellow: #cde517;
61
- --colors-orange-100: #fdd7b0;
62
- --colors-orange-200: #fbc48a;
63
- --colors-orange-300: #faa954;
64
- --colors-orange-400: #f99933;
65
- --colors-orange-50: #fef2e6;
66
- --colors-orange-500: #f77f00;
67
- --colors-orange-600: #e17400;
68
- --colors-orange-700: #af5a00;
69
- --colors-orange-800: #884600;
70
- --colors-orange-900: #683500;
71
- --colors-purple-100: #ccbbfc;
72
- --colors-purple-200: #b39afa;
73
- --colors-purple-300: #906cf8;
74
- --colors-purple-400: #7b4ff7;
75
- --colors-purple-50: #efe9fe;
76
- --colors-purple-500: #5a23f5;
77
- --colors-purple-600: #5220df;
78
- --colors-purple-700: #4019ae;
79
- --colors-purple-800: #321387;
80
- --colors-purple-900: #260f67;
81
- --colors-red-100: #ebb2b1;
82
- --colors-red-200: #e28c8b;
83
- --colors-red-300: #d45856;
84
- --colors-red-400: #cc3835;
85
- --colors-red-50: #f9e6e6;
86
- --colors-red-500: #bf0603;
87
- --colors-red-600: #ae0503;
88
- --colors-red-700: #880402;
89
- --colors-red-800: #690302;
90
- --colors-red-900: #500301;
61
+ --colors-orange-100: #fbe7d3;
62
+ --colors-orange-200: #f1cda7;
63
+ --colors-orange-300: #e6b37a;
64
+ --colors-orange-400: #dc9c50;
65
+ --colors-orange-50: #fff5ea;
66
+ --colors-orange-500: #cf8a33;
67
+ --colors-orange-600: #a96f23;
68
+ --colors-orange-700: #885716;
69
+ --colors-orange-800: #633e0d;
70
+ --colors-orange-900: #442a08;
71
+ --colors-red-100: #f8e2de;
72
+ --colors-red-200: #e9bbb3;
73
+ --colors-red-300: #d1897e;
74
+ --colors-red-400: #aa5449;
75
+ --colors-red-50: #fff4f2;
76
+ --colors-red-500: #862b22;
77
+ --colors-red-600: #702018;
78
+ --colors-red-700: #5a1610;
79
+ --colors-red-800: #43100b;
80
+ --colors-red-900: #2d0906;
91
81
  --colors-semantic-bg-backdrop: #000000d9;
92
82
  --colors-semantic-bg-disabled: var(--colors-neutral-50);
93
83
  --colors-semantic-bg-overlay: var(--colors-neutral-100);
@@ -97,54 +87,70 @@
97
87
  --colors-semantic-border-default: var(--colors-neutral-200);
98
88
  --colors-semantic-border-destructive: var(--colors-red-600);
99
89
  --colors-semantic-border-disabled: var(--colors-neutral-100);
100
- --colors-semantic-border-focus: var(--colors-purple-500);
90
+ --colors-semantic-border-focus: var(--colors-new-brand-shadow-yellow);
101
91
  --colors-semantic-border-on-color: var(--colors-neutral-0);
102
92
  --colors-semantic-border-strong: var(--colors-neutral-300);
103
93
  --colors-semantic-border-subtle: var(--colors-neutral-100);
104
- --colors-semantic-content-destructive: var(--colors-red-600);
105
- --colors-semantic-content-disabled: var(--colors-neutral-300);
106
- --colors-semantic-content-highlight: var(--colors-purple-100);
107
- --colors-semantic-content-link: var(--colors-purple-600);
108
- --colors-semantic-content-link-hover: var(--colors-purple-800);
109
- --colors-semantic-content-link-visited: var(--colors-purple-400);
110
- --colors-semantic-content-on-color: var(--colors-neutral-0);
111
- --colors-semantic-content-primary: var(--colors-neutral-900);
94
+ --colors-semantic-content-destructive: var(--colors-red-700);
95
+ --colors-semantic-content-disabled: var(--colors-neutral-400);
96
+ --colors-semantic-content-highlight: var(--colors-green-200);
97
+ --colors-semantic-content-link: var(--colors-blue-500);
98
+ --colors-semantic-content-link-hover: var(--colors-blue-700);
99
+ --colors-semantic-content-link-visited: var(--colors-blue-600);
100
+ --colors-semantic-content-on-color: var(--colors-semantic-primary-on-primary);
101
+ --colors-semantic-content-primary: var(--colors-green-700);
112
102
  --colors-semantic-content-secondary: var(--colors-neutral-600);
113
- --colors-semantic-content-tertiary: var(--colors-neutral-400);
114
- --colors-semantic-interactive-destructive-bg: var(--colors-red-600);
103
+ --colors-semantic-content-tertiary: var(--colors-neutral-500);
104
+ --colors-semantic-interactive-destructive-bg: var(--colors-red-500);
115
105
  --colors-semantic-interactive-destructive-disabled: var(--colors-red-200);
116
- --colors-semantic-interactive-destructive-hover: var(--colors-red-700);
106
+ --colors-semantic-interactive-destructive-hover: var(--colors-red-600);
117
107
  --colors-semantic-interactive-disabled: var(--colors-neutral-200);
118
- --colors-semantic-interactive-hover: var(--colors-purple-50);
108
+ --colors-semantic-interactive-hover: var(--colors-green-50);
119
109
  --colors-semantic-interactive-hover-overlay: #0000001f;
120
110
  --colors-semantic-interactive-hover-subtle: var(--colors-neutral-100);
121
111
  --colors-semantic-interactive-neutral: var(--colors-neutral-300);
122
- --colors-semantic-interactive-pressed: var(--colors-purple-100);
123
- --colors-semantic-interactive-secondary-bg: var(--colors-neutral-100);
112
+ --colors-semantic-interactive-pressed: var(--colors-green-100);
113
+ --colors-semantic-interactive-secondary-bg: var(--colors-green-100);
124
114
  --colors-semantic-interactive-secondary-destructive-hover: var(--colors-red-50);
125
- --colors-semantic-interactive-secondary-hover: var(--colors-neutral-200);
126
- --colors-semantic-interactive-selected: var(--colors-purple-50);
127
- --colors-semantic-main-nav-bg: var(--colors-green-500);
128
- --colors-semantic-main-nav-hover: var(--colors-green-300);
129
- --colors-semantic-main-nav-selected: var(--colors-green-600);
130
- --colors-semantic-main-nav-selected-border: var(--colors-green-400);
131
- --colors-semantic-main-nav-submenu-bg: var(--colors-green-800);
132
- --colors-semantic-primary-on-primary: var(--colors-neutral-0);
133
- --colors-semantic-primary-on-primary-subtle: var(--colors-purple-700);
134
- --colors-semantic-primary-primary: var(--colors-purple-500);
135
- --colors-semantic-primary-primary-active: var(--colors-purple-800);
136
- --colors-semantic-primary-primary-hover: var(--colors-purple-700);
137
- --colors-semantic-primary-primary-subtle: var(--colors-purple-50);
138
- --colors-semantic-primary-primary-subtle-border: var(--colors-purple-200);
115
+ --colors-semantic-interactive-secondary-hover: var(--colors-green-200);
116
+ --colors-semantic-interactive-selected: var(--colors-green-100);
117
+ --colors-semantic-main-nav-admin-bg: var(--colors-red-800);
118
+ --colors-semantic-main-nav-admin-content: var(--colors-red-100);
119
+ --colors-semantic-main-nav-admin-content-active: var(--colors-neutral-0);
120
+ --colors-semantic-main-nav-admin-hover: var(--colors-red-600);
121
+ --colors-semantic-main-nav-admin-selected: var(--colors-red-600);
122
+ --colors-semantic-main-nav-admin-selected-border: var(--colors-yellow-500);
123
+ --colors-semantic-main-nav-admin-submenu-bg: var(--colors-neutral-900);
124
+ --colors-semantic-main-nav-forvalt-bg: var(--colors-blue-800);
125
+ --colors-semantic-main-nav-forvalt-content: var(--colors-blue-100);
126
+ --colors-semantic-main-nav-forvalt-content-active: var(--colors-neutral-0);
127
+ --colors-semantic-main-nav-forvalt-hover: var(--colors-blue-700);
128
+ --colors-semantic-main-nav-forvalt-selected: var(--colors-blue-700);
129
+ --colors-semantic-main-nav-forvalt-selected-border: var(--colors-yellow-500);
130
+ --colors-semantic-main-nav-forvalt-submenu-bg: var(--colors-blue-900);
131
+ --colors-semantic-main-nav-portal-bg: var(--colors-green-700);
132
+ --colors-semantic-main-nav-portal-content: var(--colors-new-brand-light-yellow);
133
+ --colors-semantic-main-nav-portal-content-active: var(--colors-neutral-0);
134
+ --colors-semantic-main-nav-portal-hover: var(--colors-green-800);
135
+ --colors-semantic-main-nav-portal-selected: var(--colors-green-800);
136
+ --colors-semantic-main-nav-portal-selected-border: var(--colors-yellow-500);
137
+ --colors-semantic-main-nav-portal-submenu-bg: var(--colors-green-900);
138
+ --colors-semantic-primary-on-primary: var(--colors-new-brand-light-yellow);
139
+ --colors-semantic-primary-on-primary-subtle: var(--colors-green-600);
140
+ --colors-semantic-primary-primary: var(--colors-green-700);
141
+ --colors-semantic-primary-primary-active: var(--colors-green-500);
142
+ --colors-semantic-primary-primary-hover: var(--colors-green-600);
143
+ --colors-semantic-primary-primary-subtle: var(--colors-green-100);
144
+ --colors-semantic-primary-primary-subtle-border: var(--colors-green-300);
139
145
  --colors-semantic-roles-bg-board: var(--colors-new-brand-light-yellow);
140
- --colors-semantic-roles-bg-external: var(--colors-solibo-green-100);
146
+ --colors-semantic-roles-bg-external: var(--colors-green-100);
141
147
  --colors-semantic-roles-bg-owner: var(--colors-blue-200);
142
148
  --colors-semantic-roles-bg-renter: var(--colors-blue-50);
143
- --colors-semantic-roles-bg-solibo: var(--colors-solibo-green-700);
144
- --colors-semantic-roles-content-board: var(--colors-solibo-green-700);
145
- --colors-semantic-roles-content-external: var(--colors-solibo-green-800);
146
- --colors-semantic-roles-content-owner: var(--colors-blue-800);
147
- --colors-semantic-roles-content-renter: var(--colors-blue-800);
149
+ --colors-semantic-roles-bg-solibo: var(--colors-green-700);
150
+ --colors-semantic-roles-content-board: var(--colors-green-700);
151
+ --colors-semantic-roles-content-external: var(--colors-green-800);
152
+ --colors-semantic-roles-content-owner: var(--colors-new-brand-dark-green);
153
+ --colors-semantic-roles-content-renter: var(--colors-new-brand-dark-green);
148
154
  --colors-semantic-roles-content-solibo: var(--colors-new-brand-light-yellow);
149
155
  --colors-semantic-status-active-bg: var(--colors-new-brand-yellow);
150
156
  --colors-semantic-status-active-content: var(--colors-new-brand-dark-green);
@@ -158,7 +164,7 @@
158
164
  --colors-semantic-status-info-content-inverse: var(--colors-neutral-0);
159
165
  --colors-semantic-status-pending-bg: var(--colors-neutral-200);
160
166
  --colors-semantic-status-pending-content: var(--colors-neutral-600);
161
- --colors-semantic-status-success-bg: var(--colors-green-50);
167
+ --colors-semantic-status-success-bg: var(--colors-green-100);
162
168
  --colors-semantic-status-success-border: var(--colors-green-300);
163
169
  --colors-semantic-status-success-content: var(--colors-green-800);
164
170
  --colors-semantic-status-success-content-inverse: var(--colors-neutral-0);
@@ -166,32 +172,23 @@
166
172
  --colors-semantic-status-warning-border: var(--colors-orange-300);
167
173
  --colors-semantic-status-warning-content: var(--colors-orange-800);
168
174
  --colors-semantic-status-warning-content-inverse: var(--colors-neutral-0);
169
- --colors-solibo-green-100: #d9e0d7;
170
- --colors-solibo-green-200: #b8c7b3;
171
- --colors-solibo-green-300: #90aa88;
172
- --colors-solibo-green-400: #698c5f;
173
- --colors-solibo-green-50: #eff1ee;
174
- --colors-solibo-green-500: #4a6344;
175
- --colors-solibo-green-600: var(--colors-new-brand-shadow-green);
176
- --colors-solibo-green-700: var(--colors-new-brand-dark-green);
177
- --colors-solibo-green-800: #151b13;
178
- --colors-solibo-green-900: #0c0f0b;
179
- --colors-solibo-yellow-100: #f2f7a4;
180
- --colors-solibo-yellow-200: #e6f078;
181
- --colors-solibo-yellow-300: #daea46;
182
- --colors-solibo-yellow-400: var(--colors-new-brand-yellow);
183
- --colors-solibo-yellow-50: var(--colors-new-brand-light-yellow);
184
- --colors-solibo-yellow-500: #b0c62a;
185
- --colors-solibo-yellow-600: #96a439;
186
- --colors-solibo-yellow-700: var(--colors-new-brand-shadow-yellow);
187
- --colors-solibo-yellow-800: #50551c;
188
- --colors-solibo-yellow-900: #282b0d;
189
- --colors-translucent: #fff9;
190
- --font-body: 'Figtree';
175
+ --colors-translucent: #fff3;
176
+ --colors-yellow-100: #f2f7a4;
177
+ --colors-yellow-200: #e6f078;
178
+ --colors-yellow-300: #daea46;
179
+ --colors-yellow-400: var(--colors-new-brand-yellow);
180
+ --colors-yellow-50: var(--colors-new-brand-light-yellow);
181
+ --colors-yellow-500: #b0c62a;
182
+ --colors-yellow-600: #96a439;
183
+ --colors-yellow-700: var(--colors-new-brand-shadow-yellow);
184
+ --colors-yellow-800: #50551c;
185
+ --colors-yellow-900: #282b0d;
186
+ --font-body: 'Geist';
191
187
  --font-font-weight-bold: 700;
188
+ --font-font-weight-medium: 500;
192
189
  --font-font-weight-regular: 400;
193
190
  --font-font-weight-semibold: 600;
194
- --font-headline: 'Figtree';
191
+ --font-headline: 'Degular';
195
192
  --scale-0: 0px;
196
193
  --scale-1: 1px;
197
194
  --scale-12: 12px;
@@ -214,40 +211,48 @@
214
211
  --scale-88: 88px;
215
212
  --scale-96: 96px;
216
213
  --scale-negative-16: -16px;
217
- --shape-border-radius-radius-2xl: var(--scale-24);
214
+ --shape-border-radius-radius-2xl: var(--scale-16);
218
215
  --shape-border-radius-radius-full: var(--scale-32);
219
- --shape-border-radius-radius-lg: var(--scale-12);
220
- --shape-border-radius-radius-md: var(--scale-8);
216
+ --shape-border-radius-radius-lg: var(--scale-8);
217
+ --shape-border-radius-radius-md: var(--scale-4);
221
218
  --shape-border-radius-radius-none: var(--scale-0);
222
- --shape-border-radius-radius-sm: var(--scale-4);
223
- --shape-border-radius-radius-xl: var(--scale-16);
219
+ --shape-border-radius-radius-sm: var(--scale-2);
220
+ --shape-border-radius-radius-xl: var(--scale-12);
224
221
  --shape-border-width-default: 1px;
225
222
  --shape-border-width-thick: 2px;
226
- --shape-box-shadow-lg-blur: 48px;
223
+ --shape-box-shadow-lg-blur: 12px;
227
224
  --shape-box-shadow-lg-color: var(--colors-box-shadow);
228
225
  --shape-box-shadow-lg-position-x: 0px;
229
- --shape-box-shadow-lg-position-y: 32px;
230
- --shape-box-shadow-lg-spread: -16px;
231
- --shape-box-shadow-md-blur: 24px;
226
+ --shape-box-shadow-lg-position-y: 12px;
227
+ --shape-box-shadow-lg-spread: -12px;
228
+ --shape-box-shadow-md-blur: 8px;
232
229
  --shape-box-shadow-md-color: var(--colors-box-shadow);
233
230
  --shape-box-shadow-md-position-x: 0px;
234
- --shape-box-shadow-md-position-y: 20px;
235
- --shape-box-shadow-md-spread: -12px;
236
- --shape-box-shadow-sm-blur: 16px;
231
+ --shape-box-shadow-md-position-y: 8px;
232
+ --shape-box-shadow-md-spread: -8px;
233
+ --shape-box-shadow-sm-blur: 4px;
237
234
  --shape-box-shadow-sm-color: var(--colors-box-shadow);
238
235
  --shape-box-shadow-sm-position-x: 0px;
239
- --shape-box-shadow-sm-position-y: 12px;
240
- --shape-box-shadow-sm-spread: -8px;
241
- --shape-box-shadow-xl-blur: 64px;
236
+ --shape-box-shadow-sm-position-y: 4px;
237
+ --shape-box-shadow-sm-spread: -4px;
238
+ --shape-box-shadow-xl-blur: 16px;
242
239
  --shape-box-shadow-xl-color: var(--colors-box-shadow);
243
240
  --shape-box-shadow-xl-position-x: 0px;
244
- --shape-box-shadow-xl-position-y: 48px;
245
- --shape-box-shadow-xl-spread: -24px;
246
- --shape-box-shadow-xs-blur: 4px;
241
+ --shape-box-shadow-xl-position-y: 16px;
242
+ --shape-box-shadow-xl-spread: -16px;
243
+ --shape-box-shadow-xs-blur: 2px;
247
244
  --shape-box-shadow-xs-color: var(--colors-box-shadow);
248
245
  --shape-box-shadow-xs-position-x: 0px;
249
- --shape-box-shadow-xs-position-y: 2px;
246
+ --shape-box-shadow-xs-position-y: 1px;
250
247
  --shape-box-shadow-xs-spread: 0px;
248
+ --shape-image-desktop-max-height: 400px;
249
+ --shape-image-desktop-max-width: 320px;
250
+ --shape-image-desktop-min-height: 96px;
251
+ --shape-image-desktop-min-width: 96px;
252
+ --shape-image-mobile-max-height: 320px;
253
+ --shape-image-mobile-max-width: 240px;
254
+ --shape-image-mobile-min-height: 96px;
255
+ --shape-image-mobile-min-width: 96px;
251
256
  --shape-outline-focus: 3px;
252
257
  --shape-outline-selected: 1px;
253
258
  --shape-spacing-2xl: var(--scale-48);
@@ -267,16 +272,17 @@
267
272
  --typography-font-sizes-body-md: var(--scale-16);
268
273
  --typography-font-sizes-body-sm: var(--scale-14);
269
274
  --typography-font-sizes-caption: var(--scale-12);
270
- --typography-font-sizes-display-lg: var(--scale-48);
271
- --typography-font-sizes-display-sm: var(--scale-40);
272
- --typography-font-sizes-h1: var(--scale-28);
273
- --typography-font-sizes-h2: var(--scale-24);
274
- --typography-font-sizes-h3: var(--scale-20);
275
- --typography-font-sizes-h4: var(--scale-16);
275
+ --typography-font-sizes-display-lg: var(--scale-56);
276
+ --typography-font-sizes-display-sm: var(--scale-48);
277
+ --typography-font-sizes-h1: var(--scale-32);
278
+ --typography-font-sizes-h2: var(--scale-28);
279
+ --typography-font-sizes-h3: var(--scale-24);
280
+ --typography-font-sizes-h4: var(--scale-20);
276
281
  --typography-font-sizes-label-lg: var(--scale-16);
277
282
  --typography-font-sizes-label-sm: var(--scale-14);
278
283
  --utils-tokens-blur-default: var(--scale-8);
279
- --utils-tokens-font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
284
+ --utils-tokens-font-family-body: 'Geist', 'Arial', sans-serif;
285
+ --utils-tokens-font-family-headline: 'Degular', 'Arial', sans-serif;
280
286
  --utils-tokens-gradient: linear-gradient(180deg, rgb(255 255 255 / 100%), transparent 50%);
281
287
  --utils-tokens-icon-large: var(--scale-32);
282
288
  --utils-tokens-icon-medium: var(--scale-24);
@@ -293,6 +299,26 @@
293
299
 
294
300
  [data-theme='dark'] {
295
301
  --colors-box-shadow: #000000e0;
302
+ --colors-orange-100: #fdd7b0;
303
+ --colors-orange-200: #fbc48a;
304
+ --colors-orange-300: #faa954;
305
+ --colors-orange-400: #f99933;
306
+ --colors-orange-50: #fef2e6;
307
+ --colors-orange-500: #f77f00;
308
+ --colors-orange-600: #e17400;
309
+ --colors-orange-700: #af5a00;
310
+ --colors-orange-800: #884600;
311
+ --colors-orange-900: #683500;
312
+ --colors-red-100: #ebb2b1;
313
+ --colors-red-200: #e28c8b;
314
+ --colors-red-300: #d45856;
315
+ --colors-red-400: #cc3835;
316
+ --colors-red-50: #f9e6e6;
317
+ --colors-red-500: #bf0603;
318
+ --colors-red-600: #ae0503;
319
+ --colors-red-700: #880402;
320
+ --colors-red-800: #690302;
321
+ --colors-red-900: #500301;
296
322
  --colors-semantic-bg-disabled: var(--colors-neutral-800);
297
323
  --colors-semantic-bg-overlay: var(--colors-neutral-600);
298
324
  --colors-semantic-bg-page: var(--colors-neutral-900);
@@ -301,41 +327,45 @@
301
327
  --colors-semantic-border-default: var(--colors-neutral-500);
302
328
  --colors-semantic-border-destructive: var(--colors-red-300);
303
329
  --colors-semantic-border-disabled: var(--colors-neutral-700);
304
- --colors-semantic-border-focus: var(--colors-purple-400);
305
330
  --colors-semantic-border-on-color: var(--colors-neutral-400);
306
331
  --colors-semantic-border-subtle: var(--colors-neutral-600);
332
+ --colors-semantic-content-destructive: var(--colors-red-600);
307
333
  --colors-semantic-content-disabled: var(--colors-neutral-500);
308
- --colors-semantic-content-highlight: var(--colors-purple-700);
309
- --colors-semantic-content-link: var(--colors-purple-200);
310
- --colors-semantic-content-link-hover: var(--colors-purple-300);
334
+ --colors-semantic-content-highlight: var(--colors-green-700);
335
+ --colors-semantic-content-link: var(--colors-blue-400);
336
+ --colors-semantic-content-link-hover: var(--colors-blue-600);
337
+ --colors-semantic-content-on-color: var(--colors-neutral-0);
311
338
  --colors-semantic-content-primary: var(--colors-neutral-50);
312
339
  --colors-semantic-content-secondary: var(--colors-neutral-200);
313
340
  --colors-semantic-content-tertiary: var(--colors-neutral-300);
341
+ --colors-semantic-interactive-destructive-bg: var(--colors-red-600);
342
+ --colors-semantic-interactive-destructive-hover: var(--colors-red-700);
314
343
  --colors-semantic-interactive-disabled: var(--colors-neutral-500);
315
344
  --colors-semantic-interactive-hover: var(--colors-neutral-500);
316
345
  --colors-semantic-interactive-hover-subtle: var(--colors-neutral-600);
317
346
  --colors-semantic-interactive-neutral: var(--colors-neutral-400);
318
- --colors-semantic-interactive-pressed: var(--colors-purple-700);
347
+ --colors-semantic-interactive-pressed: var(--colors-green-700);
319
348
  --colors-semantic-interactive-secondary-bg: var(--colors-neutral-600);
320
349
  --colors-semantic-interactive-secondary-hover: var(--colors-neutral-500);
321
- --colors-semantic-interactive-selected: var(--colors-purple-900);
322
- --colors-semantic-main-nav-bg: var(--colors-green-800);
323
- --colors-semantic-main-nav-selected-border: var(--colors-green-700);
324
- --colors-semantic-main-nav-submenu-bg: var(--colors-green-500);
325
- --colors-semantic-primary-on-primary-subtle: var(--colors-purple-200);
326
- --colors-semantic-primary-primary: var(--colors-purple-300);
327
- --colors-semantic-primary-primary-active: var(--colors-purple-50);
328
- --colors-semantic-primary-primary-hover: var(--colors-purple-200);
329
- --colors-semantic-primary-primary-subtle: var(--colors-purple-800);
330
- --colors-semantic-primary-primary-subtle-border: var(--colors-purple-600);
350
+ --colors-semantic-interactive-selected: var(--colors-green-400);
351
+ --colors-semantic-main-nav-admin-submenu-bg: var(--colors-red-900);
352
+ --colors-semantic-main-nav-forvalt-hover: var(--colors-neutral-700);
353
+ --colors-semantic-main-nav-forvalt-submenu-bg: var(--colors-neutral-900);
354
+ --colors-semantic-primary-on-primary: var(--colors-neutral-0);
355
+ --colors-semantic-primary-on-primary-subtle: var(--colors-green-200);
356
+ --colors-semantic-primary-primary: var(--colors-green-300);
357
+ --colors-semantic-primary-primary-active: var(--colors-green-50);
358
+ --colors-semantic-primary-primary-hover: var(--colors-green-200);
359
+ --colors-semantic-primary-primary-subtle: var(--colors-green-500);
360
+ --colors-semantic-primary-primary-subtle-border: var(--colors-green-600);
361
+ --colors-semantic-roles-content-owner: var(--colors-blue-800);
362
+ --colors-semantic-roles-content-renter: var(--colors-blue-800);
331
363
  --colors-semantic-status-error-bg: var(--colors-red-200);
332
364
  --colors-semantic-status-info-bg: var(--colors-blue-200);
333
365
  --colors-semantic-status-info-border: var(--colors-blue-400);
334
366
  --colors-semantic-status-success-bg: var(--colors-green-200);
335
- --colors-semantic-status-success-border: var(--colors-green-400);
336
367
  --colors-semantic-status-warning-bg: var(--colors-orange-200);
337
368
  --colors-semantic-status-warning-border: var(--colors-orange-400);
338
- --colors-translucent: #fff3;
339
369
  }
340
370
 
341
371
  @media (width <= 960px) {
@@ -346,5 +376,6 @@
346
376
  --typography-font-sizes-h1: var(--scale-24);
347
377
  --typography-font-sizes-h2: var(--scale-20);
348
378
  --typography-font-sizes-h3: var(--scale-18);
379
+ --typography-font-sizes-h4: var(--scale-16);
349
380
  }
350
381
  }