@designsystem-se/af 38.2.1-beta.dark-mode-css-labb → 39.0.1-beta.dark-mode

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 (78) hide show
  1. package/components/digi-badge-status.js +1 -1
  2. package/components/digi-calendar-datepicker.js +1 -1
  3. package/components/digi-code-example.js +6 -6
  4. package/components/digi-context-menu.js +4 -4
  5. package/components/digi-form-checkbox.js +1 -1
  6. package/components/digi-form-error-list.js +1 -1
  7. package/components/digi-form-filter.js +1 -1
  8. package/components/digi-form-select-filter.js +84 -47
  9. package/components/digi-header-avatar.js +1 -1
  10. package/components/digi-info-card.js +1 -1
  11. package/components/digi-link-internal.js +1 -1
  12. package/components/digi-notification-alert.js +1 -1
  13. package/components/digi-progress-indicator.js +1 -1
  14. package/components/digi-progress-list-item.js +1 -1
  15. package/components/{p-78154d00.js → p-90f7d507.js} +1 -1
  16. package/components/p-a162b186.js +177 -0
  17. package/components/p-d516f6af.js +66 -0
  18. package/custom-elements.json +1 -1
  19. package/dist/cjs/digi-arbetsformedlingen.cjs.js +1 -1
  20. package/dist/cjs/digi-badge-status.cjs.entry.js +1 -1
  21. package/dist/cjs/digi-button_84.cjs.entry.js +94 -57
  22. package/dist/cjs/digi-code-example.cjs.entry.js +5 -5
  23. package/dist/cjs/digi-progress-list-item.cjs.entry.js +1 -1
  24. package/dist/cjs/loader.cjs.js +1 -1
  25. package/dist/collection/components/_badge/badge-status/badge-status.css +2 -2
  26. package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.css +131 -381
  27. package/dist/collection/components/_code/code-example/code-example.js +4 -5
  28. package/dist/collection/components/_form/form-checkbox/form-checkbox.css +130 -380
  29. package/dist/collection/components/_form/form-select-filter/form-select-filter.js +85 -48
  30. package/dist/collection/components/_header/header-avatar/header-avatar.css +130 -380
  31. package/dist/collection/components/_link/link-internal/link-internal.css +130 -380
  32. package/dist/collection/components/_navigation/navigation-context-menu/navigation-context-menu.js +6 -6
  33. package/dist/collection/components/_notification/notification-alert/notification-alert.css +1 -1
  34. package/dist/collection/components/_progress/progress-indicator/progress-indicator.css +1 -1
  35. package/dist/collection/components/_progress/progress-list-item/progress-list-item.css +2 -2
  36. package/dist/collection/design-tokens/components/_badge-status.variables.scss +1 -1
  37. package/dist/collection/design-tokens/components/_logo.variables.scss +0 -2
  38. package/dist/collection/design-tokens/components/_notification-alert.variables.scss +1 -1
  39. package/dist/collection/design-tokens/components/_progress-indicator.variables.scss +1 -1
  40. package/dist/collection/styles/src/_alias.mixin.scss +252 -2
  41. package/dist/collection/styles/src/index.scss +2 -16
  42. package/dist/collection/styles/src/themes/_brand-af25.mixin.scss +2 -2
  43. package/dist/collection/styles/src/tokens-documentation/web-AF25.json +308 -154
  44. package/dist/digi-arbetsformedlingen/design-tokens/components/_badge-status.variables.scss +1 -1
  45. package/dist/digi-arbetsformedlingen/design-tokens/components/_logo.variables.scss +17 -15
  46. package/dist/digi-arbetsformedlingen/design-tokens/components/_notification-alert.variables.scss +1 -1
  47. package/dist/digi-arbetsformedlingen/design-tokens/components/_progress-indicator.variables.scss +1 -1
  48. package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.css +1 -1
  49. package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
  50. package/dist/digi-arbetsformedlingen/{p-c1fd535b.entry.js → p-03b818fc.entry.js} +1 -1
  51. package/dist/digi-arbetsformedlingen/p-53880b04.entry.js +1 -0
  52. package/dist/digi-arbetsformedlingen/p-a2fb7d64.entry.js +1 -0
  53. package/dist/digi-arbetsformedlingen/p-f4b540e3.entry.js +1 -0
  54. package/dist/digi-arbetsformedlingen/styles/src/_alias.mixin.scss +252 -2
  55. package/dist/digi-arbetsformedlingen/styles/src/index.scss +2 -16
  56. package/dist/digi-arbetsformedlingen/styles/src/themes/_brand-af25.mixin.scss +2 -2
  57. package/dist/digi-arbetsformedlingen/styles/src/tokens-documentation/web-AF25.json +308 -154
  58. package/dist/esm/digi-arbetsformedlingen.js +1 -1
  59. package/dist/esm/digi-badge-status.entry.js +1 -1
  60. package/dist/esm/digi-button_84.entry.js +94 -57
  61. package/dist/esm/digi-code-example.entry.js +5 -5
  62. package/dist/esm/digi-progress-list-item.entry.js +1 -1
  63. package/dist/esm/loader.js +1 -1
  64. package/dist/types/components/_form/form-select-filter/form-select-filter.d.ts +22 -3
  65. package/dist/types/components/_navigation/navigation-context-menu/navigation-context-menu.d.ts +2 -2
  66. package/dist/types/components.d.ts +6 -6
  67. package/hydrate/index.js +102 -65
  68. package/hydrate/index.mjs +102 -65
  69. package/package.json +4 -2
  70. package/components/p-a90b746e.js +0 -177
  71. package/components/p-fdb31c30.js +0 -66
  72. package/dist/collection/styles/src/themes/_alias-dark.scss +0 -126
  73. package/dist/collection/styles/src/themes/_alias-light.scss +0 -126
  74. package/dist/digi-arbetsformedlingen/p-7ed49934.entry.js +0 -1
  75. package/dist/digi-arbetsformedlingen/p-ad638968.entry.js +0 -1
  76. package/dist/digi-arbetsformedlingen/p-ede12626.entry.js +0 -1
  77. package/dist/digi-arbetsformedlingen/styles/src/themes/_alias-dark.scss +0 -126
  78. package/dist/digi-arbetsformedlingen/styles/src/themes/_alias-light.scss +0 -126
package/dist/collection/components/_navigation/navigation-context-menu/navigation-context-menu.js CHANGED
@@ -45,7 +45,7 @@ export class ContextMenu {
45
45
  syncActiveItem() {
46
46
  if (this.afActiveItem != null) {
47
47
  const menuItems = this.afMenuItems;
48
- this.activeItemIdx = menuItems.findIndex((item) => item.id.toString() === this.afActiveItem);
48
+ this.activeItemIdx = menuItems.findIndex((item) => item.id.toString() === this.afActiveItem.toString());
49
49
  }
50
50
  }
51
51
  syncItems() {
@@ -197,13 +197,13 @@ export class ContextMenu {
197
197
  }
198
198
  render() {
199
199
  const menuItems = this.afMenuItems;
200
- return (h(Host, { key: '3d710f244c36361e7a1db54d6ff91bcfa7dc8f61' }, h("div", { key: '098d2c031d46d62987810f254621d5540709c738', id: `${this.afId}-identifier`, class: {
200
+ return (h(Host, { key: '1e6a37f94799e1cf0d2d6526e1b690e73f59e0a3' }, h("div", { key: '4018c8310a9012a9b4644dbb3175f3e362fd604b', id: `${this.afId}-identifier`, class: {
201
201
  'digi-navigation-context-menu': true,
202
202
  'digi-navigation-context-menu--active': this.visible
203
- } }, h("digi-button", { key: '1bb808252655162e41807b2c05466ca6eb59dcd2', id: `${this.afId}-trigger`, ref: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-dropdown`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: "digi-navigation-context-menu__trigger-button" }, !!this.afIcon && h(this.digiIcon, { key: '3b9dea7016fba1b2fd47cbb554dfc237c677efd9', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: '0fc00e257f1c52097e5e9588128a09d31c0e9470', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), h("div", { key: '3ece43fb02a56fc404a371b3eec3d9bc5255cf6d', class: {
203
+ } }, h("digi-button", { key: '03a920ff0116de47903ab261dca6201463c1b9fc', id: `${this.afId}-trigger`, ref: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-dropdown`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: "digi-navigation-context-menu__trigger-button" }, !!this.afIcon && h(this.digiIcon, { key: '7287a3e266e905dbc90312fe6101602d312f3dd7', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: 'e7d297783ab722447d202df9971ebe6d00fb9fff', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), h("div", { key: 'e7226f3e481a7c8c57acce8948f624546dfded26', class: {
204
204
  'digi-navigation-context-menu__list': true,
205
205
  'digi-navigation-context-menu__list--active': this.visible
206
- } }, h("div", { key: 'd25725930bd2dc57e3cba2d79a80a30d70ca7feb', onKeyDown: (e) => {
206
+ } }, h("div", { key: 'bb9f36a53eaff6fc0e76c5024ba817fb898adac8', onKeyDown: (e) => {
207
207
  this.handleKey(e);
208
208
  }, id: `${this.afId}-dropdown`, style: {
209
209
  visibility: this.visible ? 'visible' : 'hidden'
@@ -450,9 +450,9 @@ export class ContextMenu {
450
450
  "docs": {
451
451
  "tags": [{
452
452
  "name": "en",
453
- "text": "Sets a preselected value. In React this has to be of the type string."
453
+ "text": "Sets a preselected value."
454
454
  }],
455
- "text": "S\u00E4tter ett f\u00F6rvalt v\u00E4rde. I React m\u00E5ste detta vara av typen string."
455
+ "text": "S\u00E4tter ett f\u00F6rvalt v\u00E4rde."
456
456
  },
457
457
  "getter": false,
458
458
  "setter": false,
package/dist/collection/components/_notification/notification-alert/notification-alert.css CHANGED
@@ -22,7 +22,7 @@ License: none (public domain)
22
22
  --digi--notification-alert--icon--color--success: var(--digi--color--icon--secondary);
23
23
  --digi--notification-alert--icon--background--success: var(--digi--color--background--sentiment--success--primary);
24
24
  --digi--notification-alert--border--warning: var(--digi--border-width--secondary) solid var(--digi--color--border--sentiment--warning);
25
- --digi--notification-alert--icon--color--warning: var(--digi--color--icon--primary);
25
+ --digi--notification-alert--icon--color--warning: var(--digi--color--icon--primary-anti-reverse);
26
26
  --digi--notification-alert--icon--background--warning: var(--digi--color--background--sentiment--warning--primary);
27
27
  --digi--notification-alert--border--danger: var(--digi--border-width--secondary) solid var(--digi--color--border--sentiment--error);
28
28
  --digi--notification-alert--icon--color--danger: var(--digi--color--icon--secondary);
package/dist/collection/components/_progress/progress-indicator/progress-indicator.css CHANGED
@@ -24,7 +24,7 @@ License: none (public domain)
24
24
  --digi--progress-indicator--step--line--style: dashed;
25
25
  --digi--progress-indicator--icon--width: 1rem;
26
26
  --digi--progress-indicator--icon--height: 1rem;
27
- --digi--progress-indicator--icon--color: var(--digi--color--icon--secondary);
27
+ --digi--progress-indicator--icon--color: var(--digi--color--marking--indication--marker);
28
28
  --digi--progress-indicator--icon-status--width: 1.75rem;
29
29
  --digi--progress-indicator--icon-status--height: 1.75rem;
30
30
  --digi--progress-indicator--icon--warning--color: var(--digi--color--icon--validation--warning);
package/dist/collection/components/_progress/progress-list-item/progress-list-item.css CHANGED
@@ -61,7 +61,7 @@ License: none (public domain)
61
61
  }
62
62
  :host .digi-progress-list-item--current:host .digi-progress-list-item__indicator--circle {
63
63
  background-color: var(--INDICATOR--CIRCLE--COLOR);
64
- box-shadow: inset 0 0 0 4px var(--INDICATOR--CIRCLE--COLOR), inset 0 0 0 7px #fff;
64
+ box-shadow: inset 0 0 0 4px var(--INDICATOR--CIRCLE--COLOR), inset 0 0 0 7px var(--digi--color--marking--indication--marker);
65
65
  height: 32px;
66
66
  width: 100%;
67
67
  }
@@ -97,7 +97,7 @@ License: none (public domain)
97
97
  }
98
98
  :host .digi-progress-list-item__indicator--icon--digi {
99
99
  color: var(--digi--color--text--secondary);
100
- --digi--icon--color: var(--digi--color--icon--secondary);
100
+ --digi--icon--color: var(--digi--color--marking--indication--marker);
101
101
  margin: auto;
102
102
  max-height: 18px;
103
103
  max-width: 18px;
package/dist/collection/design-tokens/components/_badge-status.variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @mixin digi-badge-status--variables() {
2
2
  --digi--badge-status--color--primary: var(--digi--color--text--secondary);
3
- --digi--badge-status--color--secondary: var(--digi--color--text--primary);
3
+ --digi--badge-status--color--secondary: var(--digi--color--text--primary-stay);
4
4
 
5
5
  --digi--badge-status--background-color--approved--primary: var(--digi--color--background--sentiment--success--secondary);
6
6
  --digi--badge-status--background-color--approved--secondary: var(--digi--color--background--sentiment--success--tertiary);
package/dist/collection/design-tokens/components/_logo.variables.scss CHANGED
@@ -15,6 +15,4 @@
15
15
  --digi--logo--secondary--symbol: var(--digi--color--logotype--secondary--symbol);
16
16
  --digi--logo--primary--text: var(--digi--color--logotype--primary--text);
17
17
  --digi--logo--secondary--text: var(--digi--color--logotype--secondary--text);
18
- }g: 1.375rem;
19
- --digi--title-logo-gap: 9px;
20
18
  }
package/dist/collection/design-tokens/components/_notification-alert.variables.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  --digi--notification-alert--icon--background--success: var(--digi--color--background--sentiment--success--primary);
22
22
 
23
23
  --digi--notification-alert--border--warning: var(--digi--border-width--secondary) solid var(--digi--color--border--sentiment--warning);
24
- --digi--notification-alert--icon--color--warning: var(--digi--color--icon--primary);
24
+ --digi--notification-alert--icon--color--warning: var(--digi--color--icon--primary-anti-reverse);
25
25
  --digi--notification-alert--icon--background--warning: var(--digi--color--background--sentiment--warning--primary);
26
26
 
27
27
  --digi--notification-alert--border--danger: var(--digi--border-width--secondary) solid var(--digi--color--border--sentiment--error);
package/dist/collection/design-tokens/components/_progress-indicator.variables.scss CHANGED
@@ -27,7 +27,7 @@
27
27
 
28
28
  --digi--progress-indicator--icon--width: 1rem;
29
29
  --digi--progress-indicator--icon--height: 1rem;
30
- --digi--progress-indicator--icon--color: var(--digi--color--icon--secondary);
30
+ --digi--progress-indicator--icon--color: var(--digi--color--marking--indication--marker);
31
31
 
32
32
  --digi--progress-indicator--icon-status--width: 1.75rem;
33
33
  --digi--progress-indicator--icon-status--height: 1.75rem;
package/dist/collection/styles/src/_alias.mixin.scss CHANGED
@@ -1,5 +1,255 @@
1
1
  // Genererad av createSCSSMixinsFromFigmaTokens.ts — redigera endast om du vet vad du gör!
2
- // Vi får se om jag vet vad jag gör :P
3
2
  @mixin alias {
4
-
3
+ @media (prefers-color-scheme: light) {
4
+ --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--light);
5
+ --digi--color--background--dropdown: var(--digi--color--background--dropdown--light);
6
+ --digi--color--background--interactive--default--input-elements: var(--digi--color--background--interactive--default--input-elements--light);
7
+ --digi--color--background--interactive--default--pop-out: var(--digi--color--background--interactive--default--pop-out--light);
8
+ --digi--color--background--interactive--default--primary: var(--digi--color--background--interactive--default--primary--light);
9
+ --digi--color--background--interactive--default--primary-inverted: var(--digi--color--background--interactive--default--primary-inverted--light);
10
+ --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--light);
11
+ --digi--color--background--interactive--default--quinary-ghost-gra: var(--digi--color--background--interactive--default--quinary-ghost-gra--light);
12
+ --digi--color--background--interactive--default--secondary: var(--digi--color--background--interactive--default--secondary--light);
13
+ --digi--color--background--interactive--default--secondary-inverted: var(--digi--color--background--interactive--default--secondary-inverted--light);
14
+ --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--light);
15
+ --digi--color--background--interactive--hover--ghost-rider: var(--digi--color--background--interactive--hover--ghost-rider--light);
16
+ --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--light);
17
+ --digi--color--background--interactive--hover--primary: var(--digi--color--background--interactive--hover--primary--light);
18
+ --digi--color--background--interactive--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--light);
19
+ --digi--color--background--interactive--hover--secondary: var(--digi--color--background--interactive--hover--secondary--light);
20
+ --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--light);
21
+ --digi--color--background--interactive--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--light);
22
+ --digi--color--background--interactive--selected--primary: var(--digi--color--background--interactive--selected--primary--light);
23
+ --digi--color--background--interactive--selected--primary-stay: var(--digi--color--background--interactive--selected--primary-stay--light);
24
+ --digi--color--background--interactive--selected--secondary: var(--digi--color--background--interactive--selected--secondary--light);
25
+ --digi--color--background--interactive--selected--tertiary: var(--digi--color--background--interactive--selected--tertiary--light);
26
+ --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--light);
27
+ --digi--color--background--interactive--validation--success: var(--digi--color--background--interactive--validation--success--light);
28
+ --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--light);
29
+ --digi--color--background--notification: var(--digi--color--background--notification--light);
30
+ --digi--color--background--pop-out: var(--digi--color--background--pop-out--light);
31
+ --digi--color--background--primary: var(--digi--color--background--primary--light);
32
+ --digi--color--background--primary-elevated: var(--digi--color--background--primary-elevated--light);
33
+ --digi--color--background--secondary: var(--digi--color--background--secondary--light);
34
+ --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--light);
35
+ --digi--color--background--secondary-elevated: var(--digi--color--background--secondary-elevated--light);
36
+ --digi--color--background--secondary-muted: var(--digi--color--background--secondary-muted--light);
37
+ --digi--color--background--sentiment--beta--primary: var(--digi--color--background--sentiment--beta--primary--light);
38
+ --digi--color--background--sentiment--beta--secondary: var(--digi--color--background--sentiment--beta--secondary--light);
39
+ --digi--color--background--sentiment--error--primary: var(--digi--color--background--sentiment--error--primary--light);
40
+ --digi--color--background--sentiment--error--secondary: var(--digi--color--background--sentiment--error--secondary--light);
41
+ --digi--color--background--sentiment--error--tertiary: var(--digi--color--background--sentiment--error--tertiary--light);
42
+ --digi--color--background--sentiment--error--tertiary-discreet: var(--digi--color--background--sentiment--error--tertiary-discreet--light);
43
+ --digi--color--background--sentiment--info--primary: var(--digi--color--background--sentiment--info--primary--light);
44
+ --digi--color--background--sentiment--info--secondary: var(--digi--color--background--sentiment--info--secondary--light);
45
+ --digi--color--background--sentiment--info--tertiary: var(--digi--color--background--sentiment--info--tertiary--light);
46
+ --digi--color--background--sentiment--neutral--primary: var(--digi--color--background--sentiment--neutral--primary--light);
47
+ --digi--color--background--sentiment--neutral--secondary: var(--digi--color--background--sentiment--neutral--secondary--light);
48
+ --digi--color--background--sentiment--neutral--tertiary: var(--digi--color--background--sentiment--neutral--tertiary--light);
49
+ --digi--color--background--sentiment--success--primary: var(--digi--color--background--sentiment--success--primary--light);
50
+ --digi--color--background--sentiment--success--secondary: var(--digi--color--background--sentiment--success--secondary--light);
51
+ --digi--color--background--sentiment--success--tertiary: var(--digi--color--background--sentiment--success--tertiary--light);
52
+ --digi--color--background--sentiment--warning--primary: var(--digi--color--background--sentiment--warning--primary--light);
53
+ --digi--color--background--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--light);
54
+ --digi--color--background--sentiment--warning--secondary: var(--digi--color--background--sentiment--warning--secondary--light);
55
+ --digi--color--background--sentiment--warning--tertiary: var(--digi--color--background--sentiment--warning--tertiary--light);
56
+ --digi--color--background--surface: var(--digi--color--background--surface--light);
57
+ --digi--color--background--transparent: var(--digi--color--background--transparent--light);
58
+ --digi--color--border--accent--primary: var(--digi--color--border--accent--primary--light);
59
+ --digi--color--border--accent--secondary: var(--digi--color--border--accent--secondary--light);
60
+ --digi--color--border--interactive--default--discreeeeeeet: var(--digi--color--border--interactive--default--discreeeeeeet--light);
61
+ --digi--color--border--interactive--default--inverted: var(--digi--color--border--interactive--default--inverted--light);
62
+ --digi--color--border--interactive--default--on-input: var(--digi--color--border--interactive--default--on-input--light);
63
+ --digi--color--border--interactive--default--on-input-nuance: var(--digi--color--border--interactive--default--on-input-nuance--light);
64
+ --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--light);
65
+ --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--light);
66
+ --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--light);
67
+ --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--light);
68
+ --digi--color--border--interactive--selected--primary: var(--digi--color--border--interactive--selected--primary--light);
69
+ --digi--color--border--interactive--selected--secondary: var(--digi--color--border--interactive--selected--secondary--light);
70
+ --digi--color--border--interactive--validation--error: var(--digi--color--border--interactive--validation--error--light);
71
+ --digi--color--border--interactive--validation--success: var(--digi--color--border--interactive--validation--success--light);
72
+ --digi--color--border--interactive--validation--warning: var(--digi--color--border--interactive--validation--warning--light);
73
+ --digi--color--border--notification: var(--digi--color--border--notification--light);
74
+ --digi--color--border--sentiment--error: var(--digi--color--border--sentiment--error--light);
75
+ --digi--color--border--sentiment--info: var(--digi--color--border--sentiment--info--light);
76
+ --digi--color--border--sentiment--success: var(--digi--color--border--sentiment--success--light);
77
+ --digi--color--border--sentiment--warning: var(--digi--color--border--sentiment--warning--light);
78
+ --digi--color--border--transparent: var(--digi--color--border--transparent--light);
79
+ --digi--color--divider--cta: var(--digi--color--divider--cta--light);
80
+ --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--light);
81
+ --digi--color--divider--primary: var(--digi--color--divider--primary--light);
82
+ --digi--color--divider--secondary: var(--digi--color--divider--secondary--light);
83
+ --digi--color--divider--tertiary-hypotes: var(--digi--color--divider--tertiary-hypotes--light);
84
+ --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--light);
85
+ --digi--color--icon--brand-primary-secondary-hypotes: var(--digi--color--icon--brand-primary-secondary-hypotes--light);
86
+ --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--light);
87
+ --digi--color--icon--cta: var(--digi--color--icon--cta--light);
88
+ --digi--color--icon--primary: var(--digi--color--icon--primary--light);
89
+ --digi--color--icon--primary-anti-reverse: var(--digi--color--icon--primary-anti-reverse--light);
90
+ --digi--color--icon--secondary: var(--digi--color--icon--secondary--light);
91
+ --digi--color--icon--secondary-reverse: var(--digi--color--icon--secondary-reverse--light);
92
+ --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--light);
93
+ --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--light);
94
+ --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--light);
95
+ --digi--color--infographic--background: var(--digi--color--infographic--background--light);
96
+ --digi--color--infographic--brand--primary: var(--digi--color--infographic--brand--primary--light);
97
+ --digi--color--infographic--brand--primary-alt: var(--digi--color--infographic--brand--primary-alt--light);
98
+ --digi--color--infographic--brand--secondary: var(--digi--color--infographic--brand--secondary--light);
99
+ --digi--color--infographic--brand--secondary-alt: var(--digi--color--infographic--brand--secondary-alt--light);
100
+ --digi--color--infographic--lineart: var(--digi--color--infographic--lineart--light);
101
+ --digi--color--logotype--primary--symbol: var(--digi--color--logotype--primary--symbol--light);
102
+ --digi--color--logotype--primary--text: var(--digi--color--logotype--primary--text--light);
103
+ --digi--color--logotype--secondary--symbol: var(--digi--color--logotype--secondary--symbol--light);
104
+ --digi--color--logotype--secondary--text: var(--digi--color--logotype--secondary--text--light);
105
+ --digi--color--marking--indication--marker: var(--digi--color--marking--indication--marker--light);
106
+ --digi--color--marking--indication--primary: var(--digi--color--marking--indication--primary--light);
107
+ --digi--color--marking--indication--secondary: var(--digi--color--marking--indication--secondary--light);
108
+ --digi--color--marking--indication--tertiary: var(--digi--color--marking--indication--tertiary--light);
109
+ --digi--color--marking--navigation--level-active: var(--digi--color--marking--navigation--level-active--light);
110
+ --digi--color--marking--navigation--level-inactive: var(--digi--color--marking--navigation--level-inactive--light);
111
+ --digi--color--marking--navigation--selected: var(--digi--color--marking--navigation--selected--light);
112
+ --digi--color--misc--skeleton: var(--digi--color--misc--skeleton--light);
113
+ --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--light);
114
+ --digi--color--text--description: var(--digi--color--text--description--light);
115
+ --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--light);
116
+ --digi--color--text--interactive--brand-primary-secondary-hypotes: var(--digi--color--text--interactive--brand-primary-secondary-hypotes--light);
117
+ --digi--color--text--interactive--brand-secondary: var(--digi--color--text--interactive--brand-secondary--light);
118
+ --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--light);
119
+ --digi--color--text--interactive--primary-discreet: var(--digi--color--text--interactive--primary-discreet--light);
120
+ --digi--color--text--interactive--secondary: var(--digi--color--text--interactive--secondary--light);
121
+ --digi--color--text--interactive--secondary-discreet: var(--digi--color--text--interactive--secondary-discreet--light);
122
+ --digi--color--text--interactive--tertiary: var(--digi--color--text--interactive--tertiary--light);
123
+ --digi--color--text--interactive--visited: var(--digi--color--text--interactive--visited--light);
124
+ --digi--color--text--primary: var(--digi--color--text--primary--light);
125
+ --digi--color--text--primary-stay: var(--digi--color--text--primary-stay--light);
126
+ --digi--color--text--secondary: var(--digi--color--text--secondary--light);
127
+ --digi--color--text--secondary-stay: var(--digi--color--text--secondary-stay--light);
128
+ }
129
+ @media (prefers-color-scheme: dark) {
130
+ --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--dark);
131
+ --digi--color--background--dropdown: var(--digi--color--background--dropdown--dark);
132
+ --digi--color--background--interactive--default--input-elements: var(--digi--color--background--interactive--default--input-elements--dark);
133
+ --digi--color--background--interactive--default--pop-out: var(--digi--color--background--interactive--default--pop-out--dark);
134
+ --digi--color--background--interactive--default--primary: var(--digi--color--background--interactive--default--primary--dark);
135
+ --digi--color--background--interactive--default--primary-inverted: var(--digi--color--background--interactive--default--primary-inverted--dark);
136
+ --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--dark);
137
+ --digi--color--background--interactive--default--quinary-ghost-gra: var(--digi--color--background--interactive--default--quinary-ghost-gra--dark);
138
+ --digi--color--background--interactive--default--secondary: var(--digi--color--background--interactive--default--secondary--dark);
139
+ --digi--color--background--interactive--default--secondary-inverted: var(--digi--color--background--interactive--default--secondary-inverted--dark);
140
+ --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--dark);
141
+ --digi--color--background--interactive--hover--ghost-rider: var(--digi--color--background--interactive--hover--ghost-rider--dark);
142
+ --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--dark);
143
+ --digi--color--background--interactive--hover--primary: var(--digi--color--background--interactive--hover--primary--dark);
144
+ --digi--color--background--interactive--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--dark);
145
+ --digi--color--background--interactive--hover--secondary: var(--digi--color--background--interactive--hover--secondary--dark);
146
+ --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--dark);
147
+ --digi--color--background--interactive--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--dark);
148
+ --digi--color--background--interactive--selected--primary: var(--digi--color--background--interactive--selected--primary--dark);
149
+ --digi--color--background--interactive--selected--primary-stay: var(--digi--color--background--interactive--selected--primary-stay--dark);
150
+ --digi--color--background--interactive--selected--secondary: var(--digi--color--background--interactive--selected--secondary--dark);
151
+ --digi--color--background--interactive--selected--tertiary: var(--digi--color--background--interactive--selected--tertiary--dark);
152
+ --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--dark);
153
+ --digi--color--background--interactive--validation--success: var(--digi--color--background--interactive--validation--success--dark);
154
+ --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--dark);
155
+ --digi--color--background--notification: var(--digi--color--background--notification--dark);
156
+ --digi--color--background--pop-out: var(--digi--color--background--pop-out--dark);
157
+ --digi--color--background--primary: var(--digi--color--background--primary--dark);
158
+ --digi--color--background--primary-elevated: var(--digi--color--background--primary-elevated--dark);
159
+ --digi--color--background--secondary: var(--digi--color--background--secondary--dark);
160
+ --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--dark);
161
+ --digi--color--background--secondary-elevated: var(--digi--color--background--secondary-elevated--dark);
162
+ --digi--color--background--secondary-muted: var(--digi--color--background--secondary-muted--dark);
163
+ --digi--color--background--sentiment--beta--primary: var(--digi--color--background--sentiment--beta--primary--dark);
164
+ --digi--color--background--sentiment--beta--secondary: var(--digi--color--background--sentiment--beta--secondary--dark);
165
+ --digi--color--background--sentiment--error--primary: var(--digi--color--background--sentiment--error--primary--dark);
166
+ --digi--color--background--sentiment--error--secondary: var(--digi--color--background--sentiment--error--secondary--dark);
167
+ --digi--color--background--sentiment--error--tertiary: var(--digi--color--background--sentiment--error--tertiary--dark);
168
+ --digi--color--background--sentiment--error--tertiary-discreet: var(--digi--color--background--sentiment--error--tertiary-discreet--dark);
169
+ --digi--color--background--sentiment--info--primary: var(--digi--color--background--sentiment--info--primary--dark);
170
+ --digi--color--background--sentiment--info--secondary: var(--digi--color--background--sentiment--info--secondary--dark);
171
+ --digi--color--background--sentiment--info--tertiary: var(--digi--color--background--sentiment--info--tertiary--dark);
172
+ --digi--color--background--sentiment--neutral--primary: var(--digi--color--background--sentiment--neutral--primary--dark);
173
+ --digi--color--background--sentiment--neutral--secondary: var(--digi--color--background--sentiment--neutral--secondary--dark);
174
+ --digi--color--background--sentiment--neutral--tertiary: var(--digi--color--background--sentiment--neutral--tertiary--dark);
175
+ --digi--color--background--sentiment--success--primary: var(--digi--color--background--sentiment--success--primary--dark);
176
+ --digi--color--background--sentiment--success--secondary: var(--digi--color--background--sentiment--success--secondary--dark);
177
+ --digi--color--background--sentiment--success--tertiary: var(--digi--color--background--sentiment--success--tertiary--dark);
178
+ --digi--color--background--sentiment--warning--primary: var(--digi--color--background--sentiment--warning--primary--dark);
179
+ --digi--color--background--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--dark);
180
+ --digi--color--background--sentiment--warning--secondary: var(--digi--color--background--sentiment--warning--secondary--dark);
181
+ --digi--color--background--sentiment--warning--tertiary: var(--digi--color--background--sentiment--warning--tertiary--dark);
182
+ --digi--color--background--surface: var(--digi--color--background--surface--dark);
183
+ --digi--color--background--transparent: var(--digi--color--background--transparent--dark);
184
+ --digi--color--border--accent--primary: var(--digi--color--border--accent--primary--dark);
185
+ --digi--color--border--accent--secondary: var(--digi--color--border--accent--secondary--dark);
186
+ --digi--color--border--interactive--default--discreeeeeeet: var(--digi--color--border--interactive--default--discreeeeeeet--dark);
187
+ --digi--color--border--interactive--default--inverted: var(--digi--color--border--interactive--default--inverted--dark);
188
+ --digi--color--border--interactive--default--on-input: var(--digi--color--border--interactive--default--on-input--dark);
189
+ --digi--color--border--interactive--default--on-input-nuance: var(--digi--color--border--interactive--default--on-input-nuance--dark);
190
+ --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--dark);
191
+ --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--dark);
192
+ --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--dark);
193
+ --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--dark);
194
+ --digi--color--border--interactive--selected--primary: var(--digi--color--border--interactive--selected--primary--dark);
195
+ --digi--color--border--interactive--selected--secondary: var(--digi--color--border--interactive--selected--secondary--dark);
196
+ --digi--color--border--interactive--validation--error: var(--digi--color--border--interactive--validation--error--dark);
197
+ --digi--color--border--interactive--validation--success: var(--digi--color--border--interactive--validation--success--dark);
198
+ --digi--color--border--interactive--validation--warning: var(--digi--color--border--interactive--validation--warning--dark);
199
+ --digi--color--border--notification: var(--digi--color--border--notification--dark);
200
+ --digi--color--border--sentiment--error: var(--digi--color--border--sentiment--error--dark);
201
+ --digi--color--border--sentiment--info: var(--digi--color--border--sentiment--info--dark);
202
+ --digi--color--border--sentiment--success: var(--digi--color--border--sentiment--success--dark);
203
+ --digi--color--border--sentiment--warning: var(--digi--color--border--sentiment--warning--dark);
204
+ --digi--color--border--transparent: var(--digi--color--border--transparent--dark);
205
+ --digi--color--divider--cta: var(--digi--color--divider--cta--dark);
206
+ --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--dark);
207
+ --digi--color--divider--primary: var(--digi--color--divider--primary--dark);
208
+ --digi--color--divider--secondary: var(--digi--color--divider--secondary--dark);
209
+ --digi--color--divider--tertiary-hypotes: var(--digi--color--divider--tertiary-hypotes--dark);
210
+ --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--dark);
211
+ --digi--color--icon--brand-primary-secondary-hypotes: var(--digi--color--icon--brand-primary-secondary-hypotes--dark);
212
+ --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--dark);
213
+ --digi--color--icon--cta: var(--digi--color--icon--cta--dark);
214
+ --digi--color--icon--primary: var(--digi--color--icon--primary--dark);
215
+ --digi--color--icon--primary-anti-reverse: var(--digi--color--icon--primary-anti-reverse--dark);
216
+ --digi--color--icon--secondary: var(--digi--color--icon--secondary--dark);
217
+ --digi--color--icon--secondary-reverse: var(--digi--color--icon--secondary-reverse--dark);
218
+ --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--dark);
219
+ --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--dark);
220
+ --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--dark);
221
+ --digi--color--infographic--background: var(--digi--color--infographic--background--dark);
222
+ --digi--color--infographic--brand--primary: var(--digi--color--infographic--brand--primary--dark);
223
+ --digi--color--infographic--brand--primary-alt: var(--digi--color--infographic--brand--primary-alt--dark);
224
+ --digi--color--infographic--brand--secondary: var(--digi--color--infographic--brand--secondary--dark);
225
+ --digi--color--infographic--brand--secondary-alt: var(--digi--color--infographic--brand--secondary-alt--dark);
226
+ --digi--color--infographic--lineart: var(--digi--color--infographic--lineart--dark);
227
+ --digi--color--logotype--primary--symbol: var(--digi--color--logotype--primary--symbol--dark);
228
+ --digi--color--logotype--primary--text: var(--digi--color--logotype--primary--text--dark);
229
+ --digi--color--logotype--secondary--symbol: var(--digi--color--logotype--secondary--symbol--dark);
230
+ --digi--color--logotype--secondary--text: var(--digi--color--logotype--secondary--text--dark);
231
+ --digi--color--marking--indication--marker: var(--digi--color--marking--indication--marker--dark);
232
+ --digi--color--marking--indication--primary: var(--digi--color--marking--indication--primary--dark);
233
+ --digi--color--marking--indication--secondary: var(--digi--color--marking--indication--secondary--dark);
234
+ --digi--color--marking--indication--tertiary: var(--digi--color--marking--indication--tertiary--dark);
235
+ --digi--color--marking--navigation--level-active: var(--digi--color--marking--navigation--level-active--dark);
236
+ --digi--color--marking--navigation--level-inactive: var(--digi--color--marking--navigation--level-inactive--dark);
237
+ --digi--color--marking--navigation--selected: var(--digi--color--marking--navigation--selected--dark);
238
+ --digi--color--misc--skeleton: var(--digi--color--misc--skeleton--dark);
239
+ --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--dark);
240
+ --digi--color--text--description: var(--digi--color--text--description--dark);
241
+ --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--dark);
242
+ --digi--color--text--interactive--brand-primary-secondary-hypotes: var(--digi--color--text--interactive--brand-primary-secondary-hypotes--dark);
243
+ --digi--color--text--interactive--brand-secondary: var(--digi--color--text--interactive--brand-secondary--dark);
244
+ --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--dark);
245
+ --digi--color--text--interactive--primary-discreet: var(--digi--color--text--interactive--primary-discreet--dark);
246
+ --digi--color--text--interactive--secondary: var(--digi--color--text--interactive--secondary--dark);
247
+ --digi--color--text--interactive--secondary-discreet: var(--digi--color--text--interactive--secondary-discreet--dark);
248
+ --digi--color--text--interactive--tertiary: var(--digi--color--text--interactive--tertiary--dark);
249
+ --digi--color--text--interactive--visited: var(--digi--color--text--interactive--visited--dark);
250
+ --digi--color--text--primary: var(--digi--color--text--primary--dark);
251
+ --digi--color--text--primary-stay: var(--digi--color--text--primary-stay--dark);
252
+ --digi--color--text--secondary: var(--digi--color--text--secondary--dark);
253
+ --digi--color--text--secondary-stay: var(--digi--color--text--secondary-stay--dark);
254
+ }
5
255
  }
package/dist/collection/styles/src/index.scss CHANGED
@@ -5,28 +5,14 @@
5
5
  @use 'themes/brand-common.mixin' as brand-common;
6
6
  @use 'themes/brand-af18.mixin' as brand-af18;
7
7
  @use 'themes/brand-af25.mixin' as brand-af25;
8
- @use 'themes/alias-light' as alias-light;
9
- @use 'themes/alias-dark' as alias-dark;
8
+ @use 'alias.mixin' as alias;
10
9
 
11
10
  :root {
12
11
  @include brand-common.brand-common();
13
12
  @include numeric-common.numeric-common();
14
13
  @include brand-af18.brand-af18();
15
14
  @include brand-af25.brand-af25();
16
-
17
- @include alias-light.alias-light();
18
-
19
- @media (prefers-color-scheme: dark) {
20
- @include alias-dark.alias-dark();
21
- }
22
- }
23
-
24
- html.digi-light {
25
- @include alias-light.alias-light();
26
- }
27
-
28
- html.digi-dark {
29
- @include alias-dark.alias-dark();
15
+ @include alias.alias();
30
16
  }
31
17
 
32
18
  body {
package/dist/collection/styles/src/themes/_brand-af25.mixin.scss CHANGED
@@ -49,7 +49,7 @@
49
49
  --digi--color--background--interactive--validation--success--dark: var(--digi--misc--transparent);
50
50
  --digi--color--background--interactive--validation--warning--dark: var(--digi--misc--transparent);
51
51
  --digi--color--background--notification--dark: var(--digi--sentiment--error--500);
52
- --digi--color--background--pop-out--dark: var(--digi--grayscale--875);
52
+ --digi--color--background--pop-out--dark: var(--digi--grayscale--850);
53
53
  --digi--color--background--primary--dark: var(--digi--grayscale--950);
54
54
  --digi--color--background--primary-elevated--dark: var(--digi--grayscale--850);
55
55
  --digi--color--background--secondary--dark: var(--digi--grayscale--975);
@@ -92,7 +92,7 @@
92
92
  --digi--color--border--interactive--validation--error--dark: var(--digi--sentiment--error--500);
93
93
  --digi--color--border--interactive--validation--success--dark: var(--digi--sentiment--success--500);
94
94
  --digi--color--border--interactive--validation--warning--dark: var(--digi--sentiment--warning--700);
95
- --digi--color--border--notification--dark: var(--digi--misc--transparent);
95
+ --digi--color--border--notification--dark: var(--digi--grayscale--0);
96
96
  --digi--color--border--sentiment--error--dark: var(--digi--sentiment--error--500);
97
97
  --digi--color--border--sentiment--info--dark: var(--digi--sentiment--informative--500);
98
98
  --digi--color--border--sentiment--success--dark: var(--digi--sentiment--success--500);