@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/digi-arbetsformedlingen/p-f4b540e3.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as a,h as i,H as s}from"./p-52e3bb32.js";import{a as d,B as r,b as t}from"./p-a4a001e1.js";const g=class{constructor(i){a(this,i),this.afText=void 0,this.afType=d.NEUTRAL,this.afSize=r.LARGE,this.afVariation=t.PRIMARY,this.afAriaLabel=void 0}get cssModifiers(){return{[`digi-badge-status--${this.afType}--${this.afVariation}`]:!!this.afVariation,[`digi-badge-status--${this.afSize}`]:!!this.afSize}}render(){return i(s,{key:"1d40b541fb0af83bd5a9556ea868bc3f0748dc3a"},i("div",{key:"ab8eeadaf141d519ac5816605bf0a6832579fce6",class:Object.assign({"digi-badge-status":!0},this.cssModifiers),"aria-label":this.afAriaLabel},i("span",{key:"39d8f58959f911573668f14b9157f5408ac90b49",class:"digi-badge-status__text"},this.afText)))}};g.style=".sc-digi-badge-status-h{--digi--badge-status--color--primary:var(--digi--color--text--secondary);--digi--badge-status--color--secondary:var(--digi--color--text--primary-stay);--digi--badge-status--background-color--approved--primary:var(--digi--color--background--sentiment--success--secondary);--digi--badge-status--background-color--approved--secondary:var(--digi--color--background--sentiment--success--tertiary);--digi--badge-status--background-color--denied--primary:var(--digi--color--background--sentiment--error--secondary);--digi--badge-status--background-color--denied--secondary:var(--digi--color--background--sentiment--error--tertiary);--digi--badge-status--background-color--missing--primary:var(--digi--color--background--sentiment--warning--secondary);--digi--badge-status--background-color--missing--secondary:var(--digi--color--background--sentiment--warning--tertiary);--digi--badge-status--color--missing:var(--digi--color--text--primary);--digi--badge-status--background-color--prompt--primary:var(--digi--color--background--sentiment--info--secondary);--digi--badge-status--background-color--prompt--secondary:var(--digi--color--background--sentiment--info--tertiary);--digi--badge-status--background-color--beta--primary:var(--digi--color--background--sentiment--beta--primary);--digi--badge-status--background-color--beta--secondary:var(--digi--color--background--sentiment--beta--secondary);--digi--badge-status--background-color--neutral--primary:var(--digi--color--background--sentiment--neutral--primary);--digi--badge-status--background-color--neutral--secondary:var(--digi--color--background--sentiment--neutral--secondary)}.sc-digi-badge-status-h .digi-badge-status.sc-digi-badge-status{display:inline-flex;align-items:center;height:1.5rem;border-radius:var(--digi--global--border-radius--base);padding-left:0.5rem;padding-right:0.5rem;font-size:var(--digi--global--typography--font-size--small);font-weight:600;border-width:var(--digi--border-width--secondary);border-style:solid;border-color:transparent;color:var(--COLOR);background-color:var(--BACKGROUND-COLOR);box-sizing:border-box}.sc-digi-badge-status-h .digi-badge-status--approved--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--approved--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--approved--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--approved--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--denied--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--denied--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--denied--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--denied--secondary);--COLOR:var(digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--missing--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--missing--primary);--COLOR:var(--digi--color--text--primary-stay)}.sc-digi-badge-status-h .digi-badge-status--missing--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--missing--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--prompt--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--prompt--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--prompt--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--prompt--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--beta--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--beta--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--beta--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--beta--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--neutral--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--neutral--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--neutral--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--neutral--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status__text.sc-digi-badge-status{text-align:center;font-family:var(--digi--global--typography--font-family--default)}.sc-digi-badge-status-h .digi-badge-status--small.sc-digi-badge-status{height:1.25rem;padding-left:0.4375rem;padding-right:0.4375rem;font-size:var(--digi--global--typography--font-size--smaller)}";export{g as digi_badge_status}
package/dist/digi-arbetsformedlingen/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/digi-arbetsformedlingen/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/digi-arbetsformedlingen/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);