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

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 (31) hide show
  1. package/components/digi-calendar-datepicker.js +1 -1
  2. package/components/digi-form-checkbox.js +1 -1
  3. package/components/digi-form-filter.js +1 -1
  4. package/components/digi-header-avatar.js +1 -1
  5. package/components/digi-info-card.js +1 -1
  6. package/components/digi-link-internal.js +1 -1
  7. package/components/{p-8c4cbca6.js → p-a90b746e.js} +1 -1
  8. package/components/{p-4b1d11d0.js → p-fdb31c30.js} +1 -1
  9. package/dist/cjs/digi-button_84.cjs.entry.js +4 -4
  10. package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.css +378 -128
  11. package/dist/collection/components/_form/form-checkbox/form-checkbox.css +378 -128
  12. package/dist/collection/components/_header/header-avatar/header-avatar.css +378 -128
  13. package/dist/collection/components/_link/link-internal/link-internal.css +378 -128
  14. package/dist/collection/design-tokens/components/_logo.variables.scss +2 -0
  15. package/dist/collection/styles/src/_alias.mixin.scss +2 -252
  16. package/dist/collection/styles/src/index.scss +16 -2
  17. package/dist/collection/styles/src/themes/_alias-dark.scss +126 -0
  18. package/dist/collection/styles/src/themes/_alias-light.scss +126 -0
  19. package/dist/digi-arbetsformedlingen/design-tokens/components/_logo.variables.scss +15 -17
  20. package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.css +1 -1
  21. package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
  22. package/dist/digi-arbetsformedlingen/p-ad638968.entry.js +1 -0
  23. package/dist/digi-arbetsformedlingen/styles/src/_alias.mixin.scss +2 -252
  24. package/dist/digi-arbetsformedlingen/styles/src/index.scss +16 -2
  25. package/dist/digi-arbetsformedlingen/styles/src/themes/_alias-dark.scss +126 -0
  26. package/dist/digi-arbetsformedlingen/styles/src/themes/_alias-light.scss +126 -0
  27. package/dist/esm/digi-button_84.entry.js +4 -4
  28. package/hydrate/index.js +4 -4
  29. package/hydrate/index.mjs +4 -4
  30. package/package.json +1 -1
  31. package/dist/digi-arbetsformedlingen/p-922f4556.entry.js +0 -1
package/dist/collection/styles/src/_alias.mixin.scss CHANGED
@@ -1,255 +1,5 @@
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
2
3
  @mixin alias {
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
- }
4
+
255
5
  }
package/dist/collection/styles/src/index.scss CHANGED
@@ -5,14 +5,28 @@
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 'alias.mixin' as alias;
8
+ @use 'themes/alias-light' as alias-light;
9
+ @use 'themes/alias-dark' as alias-dark;
9
10
 
10
11
  :root {
11
12
  @include brand-common.brand-common();
12
13
  @include numeric-common.numeric-common();
13
14
  @include brand-af18.brand-af18();
14
15
  @include brand-af25.brand-af25();
15
- @include alias.alias();
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();
16
30
  }
17
31
 
18
32
  body {
package/dist/collection/styles/src/themes/_alias-dark.scss ADDED
@@ -0,0 +1,126 @@
1
+ @mixin alias-dark {
2
+ --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--dark);
3
+ --digi--color--background--dropdown: var(--digi--color--background--dropdown--dark);
4
+ --digi--color--background--interactive--default--input-elements: var(--digi--color--background--interactive--default--input-elements--dark);
5
+ --digi--color--background--interactive--default--pop-out: var(--digi--color--background--interactive--default--pop-out--dark);
6
+ --digi--color--background--interactive--default--primary: var(--digi--color--background--interactive--default--primary--dark);
7
+ --digi--color--background--interactive--default--primary-inverted: var(--digi--color--background--interactive--default--primary-inverted--dark);
8
+ --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--dark);
9
+ --digi--color--background--interactive--default--quinary-ghost-gra: var(--digi--color--background--interactive--default--quinary-ghost-gra--dark);
10
+ --digi--color--background--interactive--default--secondary: var(--digi--color--background--interactive--default--secondary--dark);
11
+ --digi--color--background--interactive--default--secondary-inverted: var(--digi--color--background--interactive--default--secondary-inverted--dark);
12
+ --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--dark);
13
+ --digi--color--background--interactive--hover--ghost-rider: var(--digi--color--background--interactive--hover--ghost-rider--dark);
14
+ --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--dark);
15
+ --digi--color--background--interactive--hover--primary: var(--digi--color--background--interactive--hover--primary--dark);
16
+ --digi--color--background--interactive--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--dark);
17
+ --digi--color--background--interactive--hover--secondary: var(--digi--color--background--interactive--hover--secondary--dark);
18
+ --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--dark);
19
+ --digi--color--background--interactive--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--dark);
20
+ --digi--color--background--interactive--selected--primary: var(--digi--color--background--interactive--selected--primary--dark);
21
+ --digi--color--background--interactive--selected--primary-stay: var(--digi--color--background--interactive--selected--primary-stay--dark);
22
+ --digi--color--background--interactive--selected--secondary: var(--digi--color--background--interactive--selected--secondary--dark);
23
+ --digi--color--background--interactive--selected--tertiary: var(--digi--color--background--interactive--selected--tertiary--dark);
24
+ --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--dark);
25
+ --digi--color--background--interactive--validation--success: var(--digi--color--background--interactive--validation--success--dark);
26
+ --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--dark);
27
+ --digi--color--background--notification: var(--digi--color--background--notification--dark);
28
+ --digi--color--background--pop-out: var(--digi--color--background--pop-out--dark);
29
+ --digi--color--background--primary: var(--digi--color--background--primary--dark);
30
+ --digi--color--background--primary-elevated: var(--digi--color--background--primary-elevated--dark);
31
+ --digi--color--background--secondary: var(--digi--color--background--secondary--dark);
32
+ --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--dark);
33
+ --digi--color--background--secondary-elevated: var(--digi--color--background--secondary-elevated--dark);
34
+ --digi--color--background--secondary-muted: var(--digi--color--background--secondary-muted--dark);
35
+ --digi--color--background--sentiment--beta--primary: var(--digi--color--background--sentiment--beta--primary--dark);
36
+ --digi--color--background--sentiment--beta--secondary: var(--digi--color--background--sentiment--beta--secondary--dark);
37
+ --digi--color--background--sentiment--error--primary: var(--digi--color--background--sentiment--error--primary--dark);
38
+ --digi--color--background--sentiment--error--secondary: var(--digi--color--background--sentiment--error--secondary--dark);
39
+ --digi--color--background--sentiment--error--tertiary: var(--digi--color--background--sentiment--error--tertiary--dark);
40
+ --digi--color--background--sentiment--error--tertiary-discreet: var(--digi--color--background--sentiment--error--tertiary-discreet--dark);
41
+ --digi--color--background--sentiment--info--primary: var(--digi--color--background--sentiment--info--primary--dark);
42
+ --digi--color--background--sentiment--info--secondary: var(--digi--color--background--sentiment--info--secondary--dark);
43
+ --digi--color--background--sentiment--info--tertiary: var(--digi--color--background--sentiment--info--tertiary--dark);
44
+ --digi--color--background--sentiment--neutral--primary: var(--digi--color--background--sentiment--neutral--primary--dark);
45
+ --digi--color--background--sentiment--neutral--secondary: var(--digi--color--background--sentiment--neutral--secondary--dark);
46
+ --digi--color--background--sentiment--neutral--tertiary: var(--digi--color--background--sentiment--neutral--tertiary--dark);
47
+ --digi--color--background--sentiment--success--primary: var(--digi--color--background--sentiment--success--primary--dark);
48
+ --digi--color--background--sentiment--success--secondary: var(--digi--color--background--sentiment--success--secondary--dark);
49
+ --digi--color--background--sentiment--success--tertiary: var(--digi--color--background--sentiment--success--tertiary--dark);
50
+ --digi--color--background--sentiment--warning--primary: var(--digi--color--background--sentiment--warning--primary--dark);
51
+ --digi--color--background--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--dark);
52
+ --digi--color--background--sentiment--warning--secondary: var(--digi--color--background--sentiment--warning--secondary--dark);
53
+ --digi--color--background--sentiment--warning--tertiary: var(--digi--color--background--sentiment--warning--tertiary--dark);
54
+ --digi--color--background--surface: var(--digi--color--background--surface--dark);
55
+ --digi--color--background--transparent: var(--digi--color--background--transparent--dark);
56
+ --digi--color--border--accent--primary: var(--digi--color--border--accent--primary--dark);
57
+ --digi--color--border--accent--secondary: var(--digi--color--border--accent--secondary--dark);
58
+ --digi--color--border--interactive--default--discreeeeeeet: var(--digi--color--border--interactive--default--discreeeeeeet--dark);
59
+ --digi--color--border--interactive--default--inverted: var(--digi--color--border--interactive--default--inverted--dark);
60
+ --digi--color--border--interactive--default--on-input: var(--digi--color--border--interactive--default--on-input--dark);
61
+ --digi--color--border--interactive--default--on-input-nuance: var(--digi--color--border--interactive--default--on-input-nuance--dark);
62
+ --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--dark);
63
+ --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--dark);
64
+ --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--dark);
65
+ --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--dark);
66
+ --digi--color--border--interactive--selected--primary: var(--digi--color--border--interactive--selected--primary--dark);
67
+ --digi--color--border--interactive--selected--secondary: var(--digi--color--border--interactive--selected--secondary--dark);
68
+ --digi--color--border--interactive--validation--error: var(--digi--color--border--interactive--validation--error--dark);
69
+ --digi--color--border--interactive--validation--success: var(--digi--color--border--interactive--validation--success--dark);
70
+ --digi--color--border--interactive--validation--warning: var(--digi--color--border--interactive--validation--warning--dark);
71
+ --digi--color--border--notification: var(--digi--color--border--notification--dark);
72
+ --digi--color--border--sentiment--error: var(--digi--color--border--sentiment--error--dark);
73
+ --digi--color--border--sentiment--info: var(--digi--color--border--sentiment--info--dark);
74
+ --digi--color--border--sentiment--success: var(--digi--color--border--sentiment--success--dark);
75
+ --digi--color--border--sentiment--warning: var(--digi--color--border--sentiment--warning--dark);
76
+ --digi--color--border--transparent: var(--digi--color--border--transparent--dark);
77
+ --digi--color--divider--cta: var(--digi--color--divider--cta--dark);
78
+ --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--dark);
79
+ --digi--color--divider--primary: var(--digi--color--divider--primary--dark);
80
+ --digi--color--divider--secondary: var(--digi--color--divider--secondary--dark);
81
+ --digi--color--divider--tertiary-hypotes: var(--digi--color--divider--tertiary-hypotes--dark);
82
+ --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--dark);
83
+ --digi--color--icon--brand-primary-secondary-hypotes: var(--digi--color--icon--brand-primary-secondary-hypotes--dark);
84
+ --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--dark);
85
+ --digi--color--icon--cta: var(--digi--color--icon--cta--dark);
86
+ --digi--color--icon--primary: var(--digi--color--icon--primary--dark);
87
+ --digi--color--icon--primary-anti-reverse: var(--digi--color--icon--primary-anti-reverse--dark);
88
+ --digi--color--icon--secondary: var(--digi--color--icon--secondary--dark);
89
+ --digi--color--icon--secondary-reverse: var(--digi--color--icon--secondary-reverse--dark);
90
+ --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--dark);
91
+ --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--dark);
92
+ --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--dark);
93
+ --digi--color--infographic--background: var(--digi--color--infographic--background--dark);
94
+ --digi--color--infographic--brand--primary: var(--digi--color--infographic--brand--primary--dark);
95
+ --digi--color--infographic--brand--primary-alt: var(--digi--color--infographic--brand--primary-alt--dark);
96
+ --digi--color--infographic--brand--secondary: var(--digi--color--infographic--brand--secondary--dark);
97
+ --digi--color--infographic--brand--secondary-alt: var(--digi--color--infographic--brand--secondary-alt--dark);
98
+ --digi--color--infographic--lineart: var(--digi--color--infographic--lineart--dark);
99
+ --digi--color--logotype--primary--symbol: var(--digi--color--logotype--primary--symbol--dark);
100
+ --digi--color--logotype--primary--text: var(--digi--color--logotype--primary--text--dark);
101
+ --digi--color--logotype--secondary--symbol: var(--digi--color--logotype--secondary--symbol--dark);
102
+ --digi--color--logotype--secondary--text: var(--digi--color--logotype--secondary--text--dark);
103
+ --digi--color--marking--indication--marker: var(--digi--color--marking--indication--marker--dark);
104
+ --digi--color--marking--indication--primary: var(--digi--color--marking--indication--primary--dark);
105
+ --digi--color--marking--indication--secondary: var(--digi--color--marking--indication--secondary--dark);
106
+ --digi--color--marking--indication--tertiary: var(--digi--color--marking--indication--tertiary--dark);
107
+ --digi--color--marking--navigation--level-active: var(--digi--color--marking--navigation--level-active--dark);
108
+ --digi--color--marking--navigation--level-inactive: var(--digi--color--marking--navigation--level-inactive--dark);
109
+ --digi--color--marking--navigation--selected: var(--digi--color--marking--navigation--selected--dark);
110
+ --digi--color--misc--skeleton: var(--digi--color--misc--skeleton--dark);
111
+ --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--dark);
112
+ --digi--color--text--description: var(--digi--color--text--description--dark);
113
+ --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--dark);
114
+ --digi--color--text--interactive--brand-primary-secondary-hypotes: var(--digi--color--text--interactive--brand-primary-secondary-hypotes--dark);
115
+ --digi--color--text--interactive--brand-secondary: var(--digi--color--text--interactive--brand-secondary--dark);
116
+ --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--dark);
117
+ --digi--color--text--interactive--primary-discreet: var(--digi--color--text--interactive--primary-discreet--dark);
118
+ --digi--color--text--interactive--secondary: var(--digi--color--text--interactive--secondary--dark);
119
+ --digi--color--text--interactive--secondary-discreet: var(--digi--color--text--interactive--secondary-discreet--dark);
120
+ --digi--color--text--interactive--tertiary: var(--digi--color--text--interactive--tertiary--dark);
121
+ --digi--color--text--interactive--visited: var(--digi--color--text--interactive--visited--dark);
122
+ --digi--color--text--primary: var(--digi--color--text--primary--dark);
123
+ --digi--color--text--primary-stay: var(--digi--color--text--primary-stay--dark);
124
+ --digi--color--text--secondary: var(--digi--color--text--secondary--dark);
125
+ --digi--color--text--secondary-stay: var(--digi--color--text--secondary-stay--dark);
126
+ }
package/dist/collection/styles/src/themes/_alias-light.scss ADDED
@@ -0,0 +1,126 @@
1
+ @mixin alias-light {
2
+ --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--light);
3
+ --digi--color--background--dropdown: var(--digi--color--background--dropdown--light);
4
+ --digi--color--background--interactive--default--input-elements: var(--digi--color--background--interactive--default--input-elements--light);
5
+ --digi--color--background--interactive--default--pop-out: var(--digi--color--background--interactive--default--pop-out--light);
6
+ --digi--color--background--interactive--default--primary: var(--digi--color--background--interactive--default--primary--light);
7
+ --digi--color--background--interactive--default--primary-inverted: var(--digi--color--background--interactive--default--primary-inverted--light);
8
+ --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--light);
9
+ --digi--color--background--interactive--default--quinary-ghost-gra: var(--digi--color--background--interactive--default--quinary-ghost-gra--light);
10
+ --digi--color--background--interactive--default--secondary: var(--digi--color--background--interactive--default--secondary--light);
11
+ --digi--color--background--interactive--default--secondary-inverted: var(--digi--color--background--interactive--default--secondary-inverted--light);
12
+ --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--light);
13
+ --digi--color--background--interactive--hover--ghost-rider: var(--digi--color--background--interactive--hover--ghost-rider--light);
14
+ --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--light);
15
+ --digi--color--background--interactive--hover--primary: var(--digi--color--background--interactive--hover--primary--light);
16
+ --digi--color--background--interactive--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--light);
17
+ --digi--color--background--interactive--hover--secondary: var(--digi--color--background--interactive--hover--secondary--light);
18
+ --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--light);
19
+ --digi--color--background--interactive--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--light);
20
+ --digi--color--background--interactive--selected--primary: var(--digi--color--background--interactive--selected--primary--light);
21
+ --digi--color--background--interactive--selected--primary-stay: var(--digi--color--background--interactive--selected--primary-stay--light);
22
+ --digi--color--background--interactive--selected--secondary: var(--digi--color--background--interactive--selected--secondary--light);
23
+ --digi--color--background--interactive--selected--tertiary: var(--digi--color--background--interactive--selected--tertiary--light);
24
+ --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--light);
25
+ --digi--color--background--interactive--validation--success: var(--digi--color--background--interactive--validation--success--light);
26
+ --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--light);
27
+ --digi--color--background--notification: var(--digi--color--background--notification--light);
28
+ --digi--color--background--pop-out: var(--digi--color--background--pop-out--light);
29
+ --digi--color--background--primary: var(--digi--color--background--primary--light);
30
+ --digi--color--background--primary-elevated: var(--digi--color--background--primary-elevated--light);
31
+ --digi--color--background--secondary: var(--digi--color--background--secondary--light);
32
+ --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--light);
33
+ --digi--color--background--secondary-elevated: var(--digi--color--background--secondary-elevated--light);
34
+ --digi--color--background--secondary-muted: var(--digi--color--background--secondary-muted--light);
35
+ --digi--color--background--sentiment--beta--primary: var(--digi--color--background--sentiment--beta--primary--light);
36
+ --digi--color--background--sentiment--beta--secondary: var(--digi--color--background--sentiment--beta--secondary--light);
37
+ --digi--color--background--sentiment--error--primary: var(--digi--color--background--sentiment--error--primary--light);
38
+ --digi--color--background--sentiment--error--secondary: var(--digi--color--background--sentiment--error--secondary--light);
39
+ --digi--color--background--sentiment--error--tertiary: var(--digi--color--background--sentiment--error--tertiary--light);
40
+ --digi--color--background--sentiment--error--tertiary-discreet: var(--digi--color--background--sentiment--error--tertiary-discreet--light);
41
+ --digi--color--background--sentiment--info--primary: var(--digi--color--background--sentiment--info--primary--light);
42
+ --digi--color--background--sentiment--info--secondary: var(--digi--color--background--sentiment--info--secondary--light);
43
+ --digi--color--background--sentiment--info--tertiary: var(--digi--color--background--sentiment--info--tertiary--light);
44
+ --digi--color--background--sentiment--neutral--primary: var(--digi--color--background--sentiment--neutral--primary--light);
45
+ --digi--color--background--sentiment--neutral--secondary: var(--digi--color--background--sentiment--neutral--secondary--light);
46
+ --digi--color--background--sentiment--neutral--tertiary: var(--digi--color--background--sentiment--neutral--tertiary--light);
47
+ --digi--color--background--sentiment--success--primary: var(--digi--color--background--sentiment--success--primary--light);
48
+ --digi--color--background--sentiment--success--secondary: var(--digi--color--background--sentiment--success--secondary--light);
49
+ --digi--color--background--sentiment--success--tertiary: var(--digi--color--background--sentiment--success--tertiary--light);
50
+ --digi--color--background--sentiment--warning--primary: var(--digi--color--background--sentiment--warning--primary--light);
51
+ --digi--color--background--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--light);
52
+ --digi--color--background--sentiment--warning--secondary: var(--digi--color--background--sentiment--warning--secondary--light);
53
+ --digi--color--background--sentiment--warning--tertiary: var(--digi--color--background--sentiment--warning--tertiary--light);
54
+ --digi--color--background--surface: var(--digi--color--background--surface--light);
55
+ --digi--color--background--transparent: var(--digi--color--background--transparent--light);
56
+ --digi--color--border--accent--primary: var(--digi--color--border--accent--primary--light);
57
+ --digi--color--border--accent--secondary: var(--digi--color--border--accent--secondary--light);
58
+ --digi--color--border--interactive--default--discreeeeeeet: var(--digi--color--border--interactive--default--discreeeeeeet--light);
59
+ --digi--color--border--interactive--default--inverted: var(--digi--color--border--interactive--default--inverted--light);
60
+ --digi--color--border--interactive--default--on-input: var(--digi--color--border--interactive--default--on-input--light);
61
+ --digi--color--border--interactive--default--on-input-nuance: var(--digi--color--border--interactive--default--on-input-nuance--light);
62
+ --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--light);
63
+ --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--light);
64
+ --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--light);
65
+ --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--light);
66
+ --digi--color--border--interactive--selected--primary: var(--digi--color--border--interactive--selected--primary--light);
67
+ --digi--color--border--interactive--selected--secondary: var(--digi--color--border--interactive--selected--secondary--light);
68
+ --digi--color--border--interactive--validation--error: var(--digi--color--border--interactive--validation--error--light);
69
+ --digi--color--border--interactive--validation--success: var(--digi--color--border--interactive--validation--success--light);
70
+ --digi--color--border--interactive--validation--warning: var(--digi--color--border--interactive--validation--warning--light);
71
+ --digi--color--border--notification: var(--digi--color--border--notification--light);
72
+ --digi--color--border--sentiment--error: var(--digi--color--border--sentiment--error--light);
73
+ --digi--color--border--sentiment--info: var(--digi--color--border--sentiment--info--light);
74
+ --digi--color--border--sentiment--success: var(--digi--color--border--sentiment--success--light);
75
+ --digi--color--border--sentiment--warning: var(--digi--color--border--sentiment--warning--light);
76
+ --digi--color--border--transparent: var(--digi--color--border--transparent--light);
77
+ --digi--color--divider--cta: var(--digi--color--divider--cta--light);
78
+ --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--light);
79
+ --digi--color--divider--primary: var(--digi--color--divider--primary--light);
80
+ --digi--color--divider--secondary: var(--digi--color--divider--secondary--light);
81
+ --digi--color--divider--tertiary-hypotes: var(--digi--color--divider--tertiary-hypotes--light);
82
+ --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--light);
83
+ --digi--color--icon--brand-primary-secondary-hypotes: var(--digi--color--icon--brand-primary-secondary-hypotes--light);
84
+ --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--light);
85
+ --digi--color--icon--cta: var(--digi--color--icon--cta--light);
86
+ --digi--color--icon--primary: var(--digi--color--icon--primary--light);
87
+ --digi--color--icon--primary-anti-reverse: var(--digi--color--icon--primary-anti-reverse--light);
88
+ --digi--color--icon--secondary: var(--digi--color--icon--secondary--light);
89
+ --digi--color--icon--secondary-reverse: var(--digi--color--icon--secondary-reverse--light);
90
+ --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--light);
91
+ --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--light);
92
+ --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--light);
93
+ --digi--color--infographic--background: var(--digi--color--infographic--background--light);
94
+ --digi--color--infographic--brand--primary: var(--digi--color--infographic--brand--primary--light);
95
+ --digi--color--infographic--brand--primary-alt: var(--digi--color--infographic--brand--primary-alt--light);
96
+ --digi--color--infographic--brand--secondary: var(--digi--color--infographic--brand--secondary--light);
97
+ --digi--color--infographic--brand--secondary-alt: var(--digi--color--infographic--brand--secondary-alt--light);
98
+ --digi--color--infographic--lineart: var(--digi--color--infographic--lineart--light);
99
+ --digi--color--logotype--primary--symbol: var(--digi--color--logotype--primary--symbol--light);
100
+ --digi--color--logotype--primary--text: var(--digi--color--logotype--primary--text--light);
101
+ --digi--color--logotype--secondary--symbol: var(--digi--color--logotype--secondary--symbol--light);
102
+ --digi--color--logotype--secondary--text: var(--digi--color--logotype--secondary--text--light);
103
+ --digi--color--marking--indication--marker: var(--digi--color--marking--indication--marker--light);
104
+ --digi--color--marking--indication--primary: var(--digi--color--marking--indication--primary--light);
105
+ --digi--color--marking--indication--secondary: var(--digi--color--marking--indication--secondary--light);
106
+ --digi--color--marking--indication--tertiary: var(--digi--color--marking--indication--tertiary--light);
107
+ --digi--color--marking--navigation--level-active: var(--digi--color--marking--navigation--level-active--light);
108
+ --digi--color--marking--navigation--level-inactive: var(--digi--color--marking--navigation--level-inactive--light);
109
+ --digi--color--marking--navigation--selected: var(--digi--color--marking--navigation--selected--light);
110
+ --digi--color--misc--skeleton: var(--digi--color--misc--skeleton--light);
111
+ --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--light);
112
+ --digi--color--text--description: var(--digi--color--text--description--light);
113
+ --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--light);
114
+ --digi--color--text--interactive--brand-primary-secondary-hypotes: var(--digi--color--text--interactive--brand-primary-secondary-hypotes--light);
115
+ --digi--color--text--interactive--brand-secondary: var(--digi--color--text--interactive--brand-secondary--light);
116
+ --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--light);
117
+ --digi--color--text--interactive--primary-discreet: var(--digi--color--text--interactive--primary-discreet--light);
118
+ --digi--color--text--interactive--secondary: var(--digi--color--text--interactive--secondary--light);
119
+ --digi--color--text--interactive--secondary-discreet: var(--digi--color--text--interactive--secondary-discreet--light);
120
+ --digi--color--text--interactive--tertiary: var(--digi--color--text--interactive--tertiary--light);
121
+ --digi--color--text--interactive--visited: var(--digi--color--text--interactive--visited--light);
122
+ --digi--color--text--primary: var(--digi--color--text--primary--light);
123
+ --digi--color--text--primary-stay: var(--digi--color--text--primary-stay--light);
124
+ --digi--color--text--secondary: var(--digi--color--text--secondary--light);
125
+ --digi--color--text--secondary-stay: var(--digi--color--text--secondary-stay--light);
126
+ }
package/dist/digi-arbetsformedlingen/design-tokens/components/_logo.variables.scss CHANGED
@@ -1,18 +1,16 @@
1
- @use '../../../../../../styles/src/digi-styles.utils' as *;
2
-
3
- @mixin digi-logo--variables() {
4
- --digi--logo--img--min-width: #{rem(256)};
5
- --digi--logo--img--max-width:#{rem(292)};
6
- --digi--logo--img--max-width--large: #{rem(368)};
7
- --digi--logo--img--max-width--system: #{rem(44)};
8
-
9
- --digi--logo--padding: 1.375rem;
10
- --digi--logo--padding--wide: var(--digi--gutter--larger);
11
- --digi--logo--padding--large: var(--digi--gutter--medium);
12
- --digi--logo--padding--large--wide: var(--digi--gutter--larger);
13
-
14
- --digi--logo--primary--symbol: var(--digi--color--logotype--primary--symbol);
15
- --digi--logo--secondary--symbol: var(--digi--color--logotype--secondary--symbol);
16
- --digi--logo--primary--text: var(--digi--color--logotype--primary--text);
17
- --digi--logo--secondary--text: var(--digi--color--logotype--secondary--text);
1
+ @mixin digi-title-logo--variables() {
2
+ --digi--title-logo-text-color: var(--digi--color--text--primary);
3
+ --digi--title-logo-font-weight: var(--digi--global--typography--font-weight--bold);
4
+ --digi--title-logo-font-size: var(--digi--typography--title-logo--font-size--mobile);
5
+ --digi--title-logo-font-size-small: var(--digi--global--typography--font-size--large);
6
+ --digi--title-logo-line-height-small: 1.25rem;
7
+ --digi--title-logo-symbol-color: var(--digi--color--logotype--primary--symbol);
8
+ --digi--title-logo-symbol-width: 36px;
9
+ --digi--title-logo-symbol-height: 36px;
10
+ --digi--title-logo-symbol-width-mobile: 44px;
11
+ --digi--title-logo-symbol-height-mobile: 44px;
12
+ --digi--title-logo-text-height: 40px;
13
+ --digi--title-logo-border-width: var(--digi--global--border-width--base);
14
+ --digi--title-logo-vertical-padding: 1.375rem;
15
+ --digi--title-logo-gap: 9px;
18
16
  }