@solibo/solibo-ui 1.2.4 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) 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/header/index.cjs +1 -1
  12. package/dist/components/header/index.js +19 -19
  13. package/dist/components/link/index.cjs +1 -1
  14. package/dist/components/link/index.cjs.map +1 -1
  15. package/dist/components/link/index.js +11 -11
  16. package/dist/components/portal/index.cjs +1 -1
  17. package/dist/components/portal/index.cjs.map +1 -1
  18. package/dist/components/portal/index.js +19 -19
  19. package/dist/components/portal/index.js.map +1 -1
  20. package/dist/components/toggle/index.cjs +1 -1
  21. package/dist/components/toggle/index.js +16 -16
  22. package/dist/index.d.ts +10 -21
  23. package/dist/tokens.css +173 -142
  24. package/dist/tokens.json +617 -912
  25. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -76,16 +76,10 @@ declare type BaseCardProps = {
76
76
  onClick?: React.MouseEventHandler<HTMLElement>;
77
77
  };
78
78
 
79
- export declare const Branding: ({ name, size, variant }: BrandingProps) => JSX.Element;
79
+ export declare const Branding: ({ size }: BrandingProps) => JSX.Element;
80
80
 
81
81
  declare type BrandingProps = {
82
- name: keyof typeof brandingSVG;
83
82
  size?: number | string;
84
- variant?: keyof typeof variants_4;
85
- };
86
-
87
- declare const brandingSVG: {
88
- logo: string;
89
83
  };
90
84
 
91
85
  export declare function Button({ badge, children, className, disabled, icon, intent, isLoading, onClick, ref, size, variant, ...props }: ButtonProps): JSX.Element;
@@ -100,7 +94,7 @@ declare type ButtonProps = React.ComponentPropsWithRef<'button'> & {
100
94
  isLoading?: boolean;
101
95
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
102
96
  size?: keyof typeof sizes_2;
103
- variant?: keyof typeof variants_5;
97
+ variant?: keyof typeof variants_4;
104
98
  };
105
99
 
106
100
  export declare const Card: ({ actions, badge, checkbox, children, emphasis, header, icon, image, imagePosition, onClick, preview, variant, }: CardProps) => JSX.Element;
@@ -149,7 +143,7 @@ export declare type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {
149
143
  maxVisibleButtons?: number;
150
144
  overflow?: 'menu';
151
145
  overflowAccessibleLabel?: string;
152
- variant?: keyof typeof variants_6;
146
+ variant?: keyof typeof variants_5;
153
147
  };
154
148
 
155
149
  export declare const Croppable: ({ children, fill, height, image, label, onCroppableChange, onFileChange, onImageChange, onTransformChange, transform, standalone, }: CroppableProps) => JSX.Element;
@@ -354,7 +348,7 @@ declare type HeaderProps = {
354
348
  cta?: React.ReactNode;
355
349
  header?: React.ReactNode;
356
350
  subHeader?: React.ReactNode;
357
- variant?: keyof typeof variants_7;
351
+ variant?: keyof typeof variants_6;
358
352
  };
359
353
 
360
354
  export declare const Icon: ({ gap, name, size, variant, weight }: IconProps) => JSX.Element;
@@ -731,7 +725,7 @@ export declare type NavProps = React.HTMLAttributes<HTMLElement> & {
731
725
  children?: React.ReactNode;
732
726
  className?: string;
733
727
  horizontal?: boolean;
734
- variant?: keyof typeof variants_8;
728
+ variant?: keyof typeof variants_7;
735
729
  };
736
730
 
737
731
  declare const Object_2: ({ accessibleLabel, url, ...props }: ObjectProps) => JSX.Element;
@@ -953,7 +947,7 @@ export declare const Tooltip: ({ variant, children, iconName, ...props }: Toolti
953
947
  declare type TooltipProps = {
954
948
  children?: React.ReactNode;
955
949
  iconName?: IconName;
956
- variant?: keyof typeof variants_9;
950
+ variant?: keyof typeof variants_8;
957
951
  };
958
952
 
959
953
  declare type UnlinkedChipAttributes = Omit<ComponentPropsWithoutRef<'button'>, 'children' | 'onClick'>;
@@ -983,37 +977,32 @@ declare const variants_3: {
983
977
  };
984
978
 
985
979
  declare const variants_4: {
986
- default: string;
987
- white: string;
988
- };
989
-
990
- declare const variants_5: {
991
980
  primary: string;
992
981
  secondary: string;
993
982
  simple: string;
994
983
  tertiary: string;
995
984
  };
996
985
 
997
- declare const variants_6: {
986
+ declare const variants_5: {
998
987
  default: string;
999
988
  embedded: string;
1000
989
  fixed: string;
1001
990
  inline: string;
1002
991
  };
1003
992
 
1004
- declare const variants_7: {
993
+ declare const variants_6: {
1005
994
  default: string;
1006
995
  jumbo: string;
1007
996
  };
1008
997
 
1009
- declare const variants_8: {
998
+ declare const variants_7: {
1010
999
  default: string;
1011
1000
  pills: string;
1012
1001
  sidebar: string;
1013
1002
  tabs: string;
1014
1003
  };
1015
1004
 
1016
- declare const variants_9: {
1005
+ declare const variants_8: {
1017
1006
  default: string;
1018
1007
  static: string;
1019
1008
  };
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
  }