@n8n/design-system 2.35.0 → 2.35.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -309,9 +309,9 @@
309
309
  --easing--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
310
310
 
311
311
  --shadow-color: var(--color--black-alpha-100);
312
+ --shadow-color--outline: var(--color--black-alpha-100);
312
313
 
313
- /* box-shadow: var(--shadow--xs), inset var(--shadow--outline); */
314
- --shadow--outline: 0 0 0 1px light-dark(var(--shadow-color), var(--color--white-alpha-100));
314
+ --shadow--outline: 0 0 0 1px var(--shadow-color--outline);
315
315
  --shadow--2xs: 0 1px var(--shadow-color);
316
316
  --shadow--xs: 0 1px 3px -1px var(--shadow-color);
317
317
  --shadow--sm: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
@@ -319,6 +319,23 @@
319
319
  --shadow--xl: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);
320
320
  }
321
321
 
322
+ /** Redefine this primitive overrides here because Lightning CSS doesnt like light-dark in .scss files **/
323
+ @mixin dark-theme-overrides {
324
+ --shadow-color: var(--color--black-alpha-250);
325
+ --shadow-color--outline: var(--color--white-alpha-100);
326
+ }
327
+
322
328
  :root {
323
329
  @include primitives;
330
+
331
+ /** Make sure that media query preceeds [data-theme] as MacOS theme can override attribute specificity **/
332
+ @media (prefers-color-scheme: dark) {
333
+ body:not([data-theme]) {
334
+ @include dark-theme-overrides;
335
+ }
336
+ }
337
+
338
+ [data-theme='dark'] {
339
+ @include dark-theme-overrides;
340
+ }
324
341
  }
@@ -1236,8 +1236,6 @@
1236
1236
  --command-bar-item--color--background--hover: var(--color--background--light-1);
1237
1237
  --command-bar--shadow:
1238
1238
  0 15px 45px 0 var(--color--black-alpha-400), 0 5px 10px 0 var(--color--black-alpha-200);
1239
-
1240
- --shadow-color: var(--color--black-alpha-250);
1241
1239
  }
1242
1240
 
1243
1241
  :root {