@skalar-saas/design-system 0.1.160 → 0.2.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 (32) hide show
  1. package/README.md +83 -68
  2. package/dist/design-system.css +1 -1
  3. package/dist/{index-jPW4J51n.cjs → index-CvxKpepD.cjs} +2 -2
  4. package/dist/{index-jPW4J51n.cjs.map → index-CvxKpepD.cjs.map} +1 -1
  5. package/dist/{index-DpOd1Khq.js → index-D9aA2m7f.js} +2 -2
  6. package/dist/{index-DpOd1Khq.js.map → index-D9aA2m7f.js.map} +1 -1
  7. package/dist/{index-wbeGpWS7.js → index-DYdvRd97.js} +6343 -6105
  8. package/dist/index-DYdvRd97.js.map +1 -0
  9. package/dist/{index-CFw7Locn.cjs → index-Ymrs1TGO.cjs} +40 -40
  10. package/dist/index-Ymrs1TGO.cjs.map +1 -0
  11. package/dist/index.d.ts +6 -0
  12. package/dist/index.js +1 -1
  13. package/dist/index.mjs +300 -297
  14. package/dist/shared/ui/ActivityFeed/ActivityFeed.d.ts +44 -0
  15. package/dist/shared/ui/ActivityFeed/index.d.ts +2 -0
  16. package/dist/shared/ui/AlertCallout/AlertCallout.d.ts +37 -0
  17. package/dist/shared/ui/AlertCallout/index.d.ts +2 -0
  18. package/dist/shared/ui/DateRangePicker/DateRangePicker.d.ts +3 -1
  19. package/dist/shared/ui/DateRangePicker/DateRangePicker.stories.d.ts +1 -1
  20. package/dist/shared/ui/OptionsEditor/OptionsEditor.d.ts +32 -0
  21. package/dist/shared/ui/OptionsEditor/index.d.ts +1 -0
  22. package/dist/shared/ui/Planner/Planner.d.ts +11 -1
  23. package/dist/shared/ui/Planner/index.d.ts +1 -1
  24. package/dist/shared/ui/Stepper/Stepper.d.ts +25 -15
  25. package/dist/shared/ui/Switcher/Switcher.d.ts +5 -1
  26. package/package.json +116 -117
  27. package/src/styles/theme.css +536 -536
  28. package/tailwind.preset.js +278 -278
  29. package/dist/index-CFw7Locn.cjs.map +0 -1
  30. package/dist/index-wbeGpWS7.js.map +0 -1
  31. package/src/README.md +0 -110
  32. package/src/styles/README.md +0 -81
package/tailwind.preset.js CHANGED
@@ -1,278 +1,278 @@
1
- /**
2
- * Skalar Design System - Tailwind CSS Preset
3
- *
4
- * This preset extends Tailwind CSS with the Skalar Design System theme.
5
- * Import this in your tailwind.config.js to use the design system tokens.
6
- *
7
- * @example
8
- * // In your tailwind.config.js:
9
- * import skalarPreset from '@skalar-app/design-system/preset';
10
- *
11
- * export default {
12
- * presets: [skalarPreset],
13
- * content: ['./src/**\/*.{js,ts,jsx,tsx}'],
14
- * }
15
- */
16
-
17
- export default {
18
- darkMode: 'class', // Enable dark mode via class
19
- theme: {
20
- extend: {
21
- fontFamily: {
22
- inter: ['var(--font-inter)', 'sans-serif'],
23
- 'space-grotesk': ['var(--font-space-grotesk)', 'sans-serif'],
24
- },
25
- colors: {
26
- background: 'var(--background)',
27
- foreground: 'var(--foreground)',
28
-
29
- // Primitive colors
30
- black: 'var(--black)',
31
- white: 'var(--white)',
32
-
33
- // Info colors
34
- info: {
35
- em: 'var(--info-em)',
36
- main: 'var(--info-main)',
37
- 'accent-1': 'var(--info-accent-1)',
38
- 'accent-2': 'var(--info-accent-2)',
39
- 'accent-3': 'var(--info-accent-3)',
40
- },
41
-
42
- // Success colors
43
- success: {
44
- em: 'var(--text-success-em)',
45
- main: 'var(--success-main)',
46
- 'accent-1': 'var(--success-accent-1)',
47
- 'accent-2': 'var(--success-accent-2)',
48
- 'accent-3': 'var(--success-accent-3)',
49
- },
50
-
51
- // Warning colors
52
- warning: {
53
- em: 'var(--text-warning-em)',
54
- main: 'var(--warning-main)',
55
- 'accent-0': 'var(--warning-accent-0)',
56
- 'accent-1': 'var(--warning-accent-1)',
57
- 'accent-3': 'var(--warning-accent-3)',
58
- },
59
-
60
- // Danger colors
61
- danger: {
62
- em: 'var(--danger-em)',
63
- main: 'var(--danger-main)',
64
- 'accent-1': 'var(--danger-accent-1)',
65
- 'accent-2': 'var(--danger-accent-2)',
66
- 'accent-3': 'var(--danger-accent-3)',
67
- },
68
-
69
- // ========================================
70
- // SEMANTIC TOKENS (NEW - USE THESE!)
71
- // ========================================
72
-
73
- // Surface colors
74
- surface: {
75
- bg: 'var(--surface-bg)',
76
- 1: 'var(--surface-1)',
77
- 2: 'var(--surface-2)',
78
- 3: 'var(--surface-3)',
79
- 4: 'var(--surface-4)',
80
- },
81
-
82
- // Alternative surface syntax (for convenience)
83
- 'surface-bg': 'var(--surface-bg)',
84
- 'surface-1': 'var(--surface-1)',
85
- 'surface-2': 'var(--surface-2)',
86
- 'surface-3': 'var(--surface-3)',
87
- 'surface-4': 'var(--surface-4)',
88
-
89
- // Text emphasis colors
90
- text: {
91
- disabled: 'var(--text-disabled)',
92
- placeholder: 'var(--placeholder)',
93
- 'low-em': 'var(--low-em)',
94
- 'med-em': 'var(--med-em)',
95
- 'high-em': 'var(--high-em)',
96
- },
97
-
98
- // Alternative text syntax (for convenience)
99
- disabled: 'var(--text-disabled)',
100
- placeholder: 'var(--placeholder)',
101
- 'low-em': 'var(--low-em)',
102
- 'med-em': 'var(--med-em)',
103
- 'high-em': 'var(--high-em)',
104
-
105
- // Brand colors
106
- brand: {
107
- primary: {
108
- main: 'var(--brand-primary-main)',
109
- 'accent-3': 'var(--brand-primary-accent-3)',
110
- },
111
- secondary: {
112
- main: 'var(--brand-secondary-main)',
113
- 'accent-3': 'var(--brand-secondary-accent-3)',
114
- },
115
- },
116
-
117
- // Alternative brand syntax (for convenience)
118
- 'brand-primary-main': 'var(--brand-primary-main)',
119
- 'brand-primary-accent-3': 'var(--brand-primary-accent-3)',
120
- 'brand-secondary-main': 'var(--brand-secondary-main)',
121
- 'brand-secondary-accent-3': 'var(--brand-secondary-accent-3)',
122
- },
123
-
124
- spacing: {
125
- 0: 'var(--spacing-0)',
126
- 1: 'var(--spacing-1)',
127
- 2: 'var(--spacing-2)',
128
- 3: 'var(--spacing-3)',
129
- 4: 'var(--spacing-4)',
130
- 5: 'var(--spacing-5)',
131
- 6: 'var(--spacing-6)',
132
- 7: 'var(--spacing-7)',
133
- 8: 'var(--spacing-8)',
134
- 9: 'var(--spacing-9)',
135
- 10: 'var(--spacing-10)',
136
- 11: 'var(--spacing-11)',
137
- 12: 'var(--spacing-12)',
138
- 13: 'var(--spacing-13)',
139
- 14: 'var(--spacing-14)',
140
- 15: 'var(--spacing-15)',
141
- 16: 'var(--spacing-16)',
142
- 17: 'var(--spacing-17)',
143
- 18: 'var(--spacing-18)',
144
- 19: 'var(--spacing-19)',
145
- 20: 'var(--spacing-20)',
146
- 21: 'var(--spacing-21)',
147
- 22: 'var(--spacing-22)',
148
- 23: 'var(--spacing-23)',
149
- 24: 'var(--spacing-24)',
150
- 25: 'var(--spacing-25)',
151
- 26: 'var(--spacing-26)',
152
- },
153
-
154
- borderRadius: {
155
- 0: 'var(--spacing-0)',
156
- 1: 'var(--spacing-1)',
157
- 2: 'var(--spacing-2)',
158
- 3: 'var(--spacing-3)',
159
- 4: 'var(--spacing-4)',
160
- 5: 'var(--spacing-5)',
161
- 6: 'var(--spacing-6)',
162
- 7: 'var(--spacing-7)',
163
- 8: 'var(--spacing-8)',
164
- 9: 'var(--spacing-9)',
165
- 10: 'var(--spacing-10)',
166
- 11: 'var(--spacing-11)',
167
- 12: 'var(--spacing-12)',
168
- 13: 'var(--spacing-13)',
169
- 14: 'var(--spacing-14)',
170
- 15: 'var(--spacing-15)',
171
- 16: 'var(--spacing-16)',
172
- 17: 'var(--spacing-17)',
173
- 18: 'var(--spacing-18)',
174
- 19: 'var(--spacing-19)',
175
- 20: 'var(--spacing-20)',
176
- 21: 'var(--spacing-21)',
177
- 22: 'var(--spacing-22)',
178
- 23: 'var(--spacing-23)',
179
- 24: 'var(--spacing-24)',
180
- 25: 'var(--spacing-25)',
181
- 26: 'var(--spacing-26)',
182
- },
183
-
184
- boxShadow: {
185
- 'e1': 'var(--shadow-e1)',
186
- 'e2': 'var(--shadow-e2)',
187
- 'e3': 'var(--shadow-e3)',
188
- },
189
-
190
- // ========================================
191
- // LAYOUT SYSTEM
192
- // ========================================
193
-
194
- /**
195
- * Container max-width utilities
196
- * Usage: max-w-container, max-w-container-narrow, etc.
197
- */
198
- maxWidth: {
199
- 'container': 'var(--layout-container-max-width)',
200
- 'container-narrow': 'var(--layout-container-narrow)',
201
- 'container-medium': 'var(--layout-container-medium)',
202
- 'container-wide': 'var(--layout-container-wide)',
203
- },
204
-
205
- /**
206
- * Sidebar width utilities
207
- * Usage: w-sidebar, w-sidebar-collapsed, w-sidebar-nav
208
- */
209
- width: {
210
- 'sidebar': 'var(--layout-sidebar-width)',
211
- 'sidebar-collapsed': 'var(--layout-sidebar-collapsed)',
212
- 'sidebar-nav': 'var(--layout-sidebar-navigation)',
213
- },
214
-
215
- /**
216
- * Min-width utilities for sidebars
217
- * Usage: min-w-sidebar, min-w-sidebar-collapsed
218
- */
219
- minWidth: {
220
- 'sidebar': 'var(--layout-sidebar-width)',
221
- 'sidebar-collapsed': 'var(--layout-sidebar-collapsed)',
222
- 'sidebar-nav': 'var(--layout-sidebar-navigation)',
223
- },
224
-
225
- /**
226
- * Navbar height utilities
227
- * Usage: h-navbar, h-navbar-header, h-navbar-tabs
228
- */
229
- height: {
230
- 'navbar': 'var(--layout-navbar-total-height)',
231
- 'navbar-header': 'var(--layout-navbar-header-height)',
232
- 'navbar-tabs': 'var(--layout-navbar-tabs-height)',
233
- },
234
-
235
- /**
236
- * Min-height utilities for navbar
237
- * Usage: min-h-navbar, min-h-navbar-header
238
- */
239
- minHeight: {
240
- 'navbar': 'var(--layout-navbar-total-height)',
241
- 'navbar-header': 'var(--layout-navbar-header-height)',
242
- 'navbar-tabs': 'var(--layout-navbar-tabs-height)',
243
- },
244
-
245
- /**
246
- * Container padding utilities (for horizontal padding)
247
- * Usage: px-container-mobile, px-container-tablet, px-container-desktop
248
- */
249
- padding: {
250
- 'container-mobile': 'var(--layout-container-padding-mobile)',
251
- 'container-tablet': 'var(--layout-container-padding-tablet)',
252
- 'container-desktop': 'var(--layout-container-padding-desktop)',
253
- 'container-desktop-lg': 'var(--layout-container-padding-desktop-lg)',
254
- },
255
-
256
- /**
257
- * Margin utilities for container padding (useful for negative margins)
258
- * Usage: mx-container-mobile, -mx-container-desktop
259
- */
260
- margin: {
261
- 'container-mobile': 'var(--layout-container-padding-mobile)',
262
- 'container-tablet': 'var(--layout-container-padding-tablet)',
263
- 'container-desktop': 'var(--layout-container-padding-desktop)',
264
- 'container-desktop-lg': 'var(--layout-container-padding-desktop-lg)',
265
- },
266
-
267
- /**
268
- * Inset utilities for sticky positioning with navbar offset
269
- * Usage: top-navbar, top-navbar-header
270
- */
271
- inset: {
272
- 'navbar': 'var(--layout-navbar-total-height)',
273
- 'navbar-header': 'var(--layout-navbar-header-height)',
274
- 'navbar-tabs': 'var(--layout-navbar-tabs-height)',
275
- },
276
- },
277
- },
278
- };
1
+ /**
2
+ * Skalar Design System - Tailwind CSS Preset
3
+ *
4
+ * This preset extends Tailwind CSS with the Skalar Design System theme.
5
+ * Import this in your tailwind.config.js to use the design system tokens.
6
+ *
7
+ * @example
8
+ * // In your tailwind.config.js:
9
+ * import skalarPreset from '@skalar-app/design-system/preset';
10
+ *
11
+ * export default {
12
+ * presets: [skalarPreset],
13
+ * content: ['./src/**\/*.{js,ts,jsx,tsx}'],
14
+ * }
15
+ */
16
+
17
+ export default {
18
+ darkMode: 'class', // Enable dark mode via class
19
+ theme: {
20
+ extend: {
21
+ fontFamily: {
22
+ inter: ['var(--font-inter)', 'sans-serif'],
23
+ 'space-grotesk': ['var(--font-space-grotesk)', 'sans-serif'],
24
+ },
25
+ colors: {
26
+ background: 'var(--background)',
27
+ foreground: 'var(--foreground)',
28
+
29
+ // Primitive colors
30
+ black: 'var(--black)',
31
+ white: 'var(--white)',
32
+
33
+ // Info colors
34
+ info: {
35
+ em: 'var(--info-em)',
36
+ main: 'var(--info-main)',
37
+ 'accent-1': 'var(--info-accent-1)',
38
+ 'accent-2': 'var(--info-accent-2)',
39
+ 'accent-3': 'var(--info-accent-3)',
40
+ },
41
+
42
+ // Success colors
43
+ success: {
44
+ em: 'var(--text-success-em)',
45
+ main: 'var(--success-main)',
46
+ 'accent-1': 'var(--success-accent-1)',
47
+ 'accent-2': 'var(--success-accent-2)',
48
+ 'accent-3': 'var(--success-accent-3)',
49
+ },
50
+
51
+ // Warning colors
52
+ warning: {
53
+ em: 'var(--text-warning-em)',
54
+ main: 'var(--warning-main)',
55
+ 'accent-0': 'var(--warning-accent-0)',
56
+ 'accent-1': 'var(--warning-accent-1)',
57
+ 'accent-3': 'var(--warning-accent-3)',
58
+ },
59
+
60
+ // Danger colors
61
+ danger: {
62
+ em: 'var(--danger-em)',
63
+ main: 'var(--danger-main)',
64
+ 'accent-1': 'var(--danger-accent-1)',
65
+ 'accent-2': 'var(--danger-accent-2)',
66
+ 'accent-3': 'var(--danger-accent-3)',
67
+ },
68
+
69
+ // ========================================
70
+ // SEMANTIC TOKENS (NEW - USE THESE!)
71
+ // ========================================
72
+
73
+ // Surface colors
74
+ surface: {
75
+ bg: 'var(--surface-bg)',
76
+ 1: 'var(--surface-1)',
77
+ 2: 'var(--surface-2)',
78
+ 3: 'var(--surface-3)',
79
+ 4: 'var(--surface-4)',
80
+ },
81
+
82
+ // Alternative surface syntax (for convenience)
83
+ 'surface-bg': 'var(--surface-bg)',
84
+ 'surface-1': 'var(--surface-1)',
85
+ 'surface-2': 'var(--surface-2)',
86
+ 'surface-3': 'var(--surface-3)',
87
+ 'surface-4': 'var(--surface-4)',
88
+
89
+ // Text emphasis colors
90
+ text: {
91
+ disabled: 'var(--text-disabled)',
92
+ placeholder: 'var(--placeholder)',
93
+ 'low-em': 'var(--low-em)',
94
+ 'med-em': 'var(--med-em)',
95
+ 'high-em': 'var(--high-em)',
96
+ },
97
+
98
+ // Alternative text syntax (for convenience)
99
+ disabled: 'var(--text-disabled)',
100
+ placeholder: 'var(--placeholder)',
101
+ 'low-em': 'var(--low-em)',
102
+ 'med-em': 'var(--med-em)',
103
+ 'high-em': 'var(--high-em)',
104
+
105
+ // Brand colors
106
+ brand: {
107
+ primary: {
108
+ main: 'var(--brand-primary-main)',
109
+ 'accent-3': 'var(--brand-primary-accent-3)',
110
+ },
111
+ secondary: {
112
+ main: 'var(--brand-secondary-main)',
113
+ 'accent-3': 'var(--brand-secondary-accent-3)',
114
+ },
115
+ },
116
+
117
+ // Alternative brand syntax (for convenience)
118
+ 'brand-primary-main': 'var(--brand-primary-main)',
119
+ 'brand-primary-accent-3': 'var(--brand-primary-accent-3)',
120
+ 'brand-secondary-main': 'var(--brand-secondary-main)',
121
+ 'brand-secondary-accent-3': 'var(--brand-secondary-accent-3)',
122
+ },
123
+
124
+ spacing: {
125
+ 0: 'var(--spacing-0)',
126
+ 1: 'var(--spacing-1)',
127
+ 2: 'var(--spacing-2)',
128
+ 3: 'var(--spacing-3)',
129
+ 4: 'var(--spacing-4)',
130
+ 5: 'var(--spacing-5)',
131
+ 6: 'var(--spacing-6)',
132
+ 7: 'var(--spacing-7)',
133
+ 8: 'var(--spacing-8)',
134
+ 9: 'var(--spacing-9)',
135
+ 10: 'var(--spacing-10)',
136
+ 11: 'var(--spacing-11)',
137
+ 12: 'var(--spacing-12)',
138
+ 13: 'var(--spacing-13)',
139
+ 14: 'var(--spacing-14)',
140
+ 15: 'var(--spacing-15)',
141
+ 16: 'var(--spacing-16)',
142
+ 17: 'var(--spacing-17)',
143
+ 18: 'var(--spacing-18)',
144
+ 19: 'var(--spacing-19)',
145
+ 20: 'var(--spacing-20)',
146
+ 21: 'var(--spacing-21)',
147
+ 22: 'var(--spacing-22)',
148
+ 23: 'var(--spacing-23)',
149
+ 24: 'var(--spacing-24)',
150
+ 25: 'var(--spacing-25)',
151
+ 26: 'var(--spacing-26)',
152
+ },
153
+
154
+ borderRadius: {
155
+ 0: 'var(--spacing-0)',
156
+ 1: 'var(--spacing-1)',
157
+ 2: 'var(--spacing-2)',
158
+ 3: 'var(--spacing-3)',
159
+ 4: 'var(--spacing-4)',
160
+ 5: 'var(--spacing-5)',
161
+ 6: 'var(--spacing-6)',
162
+ 7: 'var(--spacing-7)',
163
+ 8: 'var(--spacing-8)',
164
+ 9: 'var(--spacing-9)',
165
+ 10: 'var(--spacing-10)',
166
+ 11: 'var(--spacing-11)',
167
+ 12: 'var(--spacing-12)',
168
+ 13: 'var(--spacing-13)',
169
+ 14: 'var(--spacing-14)',
170
+ 15: 'var(--spacing-15)',
171
+ 16: 'var(--spacing-16)',
172
+ 17: 'var(--spacing-17)',
173
+ 18: 'var(--spacing-18)',
174
+ 19: 'var(--spacing-19)',
175
+ 20: 'var(--spacing-20)',
176
+ 21: 'var(--spacing-21)',
177
+ 22: 'var(--spacing-22)',
178
+ 23: 'var(--spacing-23)',
179
+ 24: 'var(--spacing-24)',
180
+ 25: 'var(--spacing-25)',
181
+ 26: 'var(--spacing-26)',
182
+ },
183
+
184
+ boxShadow: {
185
+ 'e1': 'var(--shadow-e1)',
186
+ 'e2': 'var(--shadow-e2)',
187
+ 'e3': 'var(--shadow-e3)',
188
+ },
189
+
190
+ // ========================================
191
+ // LAYOUT SYSTEM
192
+ // ========================================
193
+
194
+ /**
195
+ * Container max-width utilities
196
+ * Usage: max-w-container, max-w-container-narrow, etc.
197
+ */
198
+ maxWidth: {
199
+ 'container': 'var(--layout-container-max-width)',
200
+ 'container-narrow': 'var(--layout-container-narrow)',
201
+ 'container-medium': 'var(--layout-container-medium)',
202
+ 'container-wide': 'var(--layout-container-wide)',
203
+ },
204
+
205
+ /**
206
+ * Sidebar width utilities
207
+ * Usage: w-sidebar, w-sidebar-collapsed, w-sidebar-nav
208
+ */
209
+ width: {
210
+ 'sidebar': 'var(--layout-sidebar-width)',
211
+ 'sidebar-collapsed': 'var(--layout-sidebar-collapsed)',
212
+ 'sidebar-nav': 'var(--layout-sidebar-navigation)',
213
+ },
214
+
215
+ /**
216
+ * Min-width utilities for sidebars
217
+ * Usage: min-w-sidebar, min-w-sidebar-collapsed
218
+ */
219
+ minWidth: {
220
+ 'sidebar': 'var(--layout-sidebar-width)',
221
+ 'sidebar-collapsed': 'var(--layout-sidebar-collapsed)',
222
+ 'sidebar-nav': 'var(--layout-sidebar-navigation)',
223
+ },
224
+
225
+ /**
226
+ * Navbar height utilities
227
+ * Usage: h-navbar, h-navbar-header, h-navbar-tabs
228
+ */
229
+ height: {
230
+ 'navbar': 'var(--layout-navbar-total-height)',
231
+ 'navbar-header': 'var(--layout-navbar-header-height)',
232
+ 'navbar-tabs': 'var(--layout-navbar-tabs-height)',
233
+ },
234
+
235
+ /**
236
+ * Min-height utilities for navbar
237
+ * Usage: min-h-navbar, min-h-navbar-header
238
+ */
239
+ minHeight: {
240
+ 'navbar': 'var(--layout-navbar-total-height)',
241
+ 'navbar-header': 'var(--layout-navbar-header-height)',
242
+ 'navbar-tabs': 'var(--layout-navbar-tabs-height)',
243
+ },
244
+
245
+ /**
246
+ * Container padding utilities (for horizontal padding)
247
+ * Usage: px-container-mobile, px-container-tablet, px-container-desktop
248
+ */
249
+ padding: {
250
+ 'container-mobile': 'var(--layout-container-padding-mobile)',
251
+ 'container-tablet': 'var(--layout-container-padding-tablet)',
252
+ 'container-desktop': 'var(--layout-container-padding-desktop)',
253
+ 'container-desktop-lg': 'var(--layout-container-padding-desktop-lg)',
254
+ },
255
+
256
+ /**
257
+ * Margin utilities for container padding (useful for negative margins)
258
+ * Usage: mx-container-mobile, -mx-container-desktop
259
+ */
260
+ margin: {
261
+ 'container-mobile': 'var(--layout-container-padding-mobile)',
262
+ 'container-tablet': 'var(--layout-container-padding-tablet)',
263
+ 'container-desktop': 'var(--layout-container-padding-desktop)',
264
+ 'container-desktop-lg': 'var(--layout-container-padding-desktop-lg)',
265
+ },
266
+
267
+ /**
268
+ * Inset utilities for sticky positioning with navbar offset
269
+ * Usage: top-navbar, top-navbar-header
270
+ */
271
+ inset: {
272
+ 'navbar': 'var(--layout-navbar-total-height)',
273
+ 'navbar-header': 'var(--layout-navbar-header-height)',
274
+ 'navbar-tabs': 'var(--layout-navbar-tabs-height)',
275
+ },
276
+ },
277
+ },
278
+ };