@lux-design-system/design-tokens 1.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (107) hide show
  1. package/LICENSE.md +7 -0
  2. package/README.md +29 -0
  3. package/lib/css/digid/dark/lg.css +236 -0
  4. package/lib/css/digid/dark/md.css +236 -0
  5. package/lib/css/digid/dark/sm.css +236 -0
  6. package/lib/css/digid/dark/xl.css +236 -0
  7. package/lib/css/digid/dark/xs.css +236 -0
  8. package/lib/css/digid/light/lg.css +236 -0
  9. package/lib/css/digid/light/md.css +236 -0
  10. package/lib/css/digid/light/sm.css +236 -0
  11. package/lib/css/digid/light/xl.css +236 -0
  12. package/lib/css/digid/light/xs.css +236 -0
  13. package/lib/css/logius/dark/lg.css +236 -0
  14. package/lib/css/logius/dark/md.css +236 -0
  15. package/lib/css/logius/dark/sm.css +236 -0
  16. package/lib/css/logius/dark/xl.css +236 -0
  17. package/lib/css/logius/dark/xs.css +236 -0
  18. package/lib/css/logius/light/lg.css +236 -0
  19. package/lib/css/logius/light/md.css +236 -0
  20. package/lib/css/logius/light/sm.css +236 -0
  21. package/lib/css/logius/light/xl.css +236 -0
  22. package/lib/css/logius/light/xs.css +236 -0
  23. package/lib/css/mijnoverheid/dark/lg.css +236 -0
  24. package/lib/css/mijnoverheid/dark/md.css +236 -0
  25. package/lib/css/mijnoverheid/dark/sm.css +236 -0
  26. package/lib/css/mijnoverheid/dark/xl.css +236 -0
  27. package/lib/css/mijnoverheid/dark/xs.css +236 -0
  28. package/lib/css/mijnoverheid/light/lg.css +236 -0
  29. package/lib/css/mijnoverheid/light/md.css +236 -0
  30. package/lib/css/mijnoverheid/light/sm.css +236 -0
  31. package/lib/css/mijnoverheid/light/xl.css +236 -0
  32. package/lib/css/mijnoverheid/light/xs.css +236 -0
  33. package/lib/css/nldoc/dark/lg.css +236 -0
  34. package/lib/css/nldoc/dark/md.css +236 -0
  35. package/lib/css/nldoc/dark/sm.css +236 -0
  36. package/lib/css/nldoc/dark/xl.css +236 -0
  37. package/lib/css/nldoc/dark/xs.css +236 -0
  38. package/lib/css/nldoc/light/lg.css +236 -0
  39. package/lib/css/nldoc/light/md.css +236 -0
  40. package/lib/css/nldoc/light/sm.css +236 -0
  41. package/lib/css/nldoc/light/xl.css +236 -0
  42. package/lib/css/nldoc/light/xs.css +236 -0
  43. package/lib/css/nldoc/ridderkerk/dark/lg.css +236 -0
  44. package/lib/css/nldoc/ridderkerk/dark/md.css +236 -0
  45. package/lib/css/nldoc/ridderkerk/dark/sm.css +236 -0
  46. package/lib/css/nldoc/ridderkerk/dark/xl.css +236 -0
  47. package/lib/css/nldoc/ridderkerk/dark/xs.css +236 -0
  48. package/lib/css/nldoc/ridderkerk/light/lg.css +236 -0
  49. package/lib/css/nldoc/ridderkerk/light/md.css +236 -0
  50. package/lib/css/nldoc/ridderkerk/light/sm.css +236 -0
  51. package/lib/css/nldoc/ridderkerk/light/xl.css +236 -0
  52. package/lib/css/nldoc/ridderkerk/light/xs.css +236 -0
  53. package/lib/css/nldoc/rijksoverheid/dark/lg.css +236 -0
  54. package/lib/css/nldoc/rijksoverheid/dark/md.css +236 -0
  55. package/lib/css/nldoc/rijksoverheid/dark/sm.css +236 -0
  56. package/lib/css/nldoc/rijksoverheid/dark/xl.css +236 -0
  57. package/lib/css/nldoc/rijksoverheid/dark/xs.css +236 -0
  58. package/lib/css/nldoc/rijksoverheid/light/lg.css +236 -0
  59. package/lib/css/nldoc/rijksoverheid/light/md.css +236 -0
  60. package/lib/css/nldoc/rijksoverheid/light/sm.css +236 -0
  61. package/lib/css/nldoc/rijksoverheid/light/xl.css +236 -0
  62. package/lib/css/nldoc/rijksoverheid/light/xs.css +236 -0
  63. package/lib/css/nldoc/whd/dark/lg.css +236 -0
  64. package/lib/css/nldoc/whd/dark/md.css +236 -0
  65. package/lib/css/nldoc/whd/dark/sm.css +236 -0
  66. package/lib/css/nldoc/whd/dark/xl.css +236 -0
  67. package/lib/css/nldoc/whd/dark/xs.css +236 -0
  68. package/lib/css/nldoc/whd/light/lg.css +236 -0
  69. package/lib/css/nldoc/whd/light/md.css +236 -0
  70. package/lib/css/nldoc/whd/light/sm.css +236 -0
  71. package/lib/css/nldoc/whd/light/xl.css +236 -0
  72. package/lib/css/nldoc/whd/light/xs.css +236 -0
  73. package/lib/tokens/$metadata.json +36 -0
  74. package/lib/tokens/$themes.json +166 -0
  75. package/lib/tokens/common/default.json +34 -0
  76. package/lib/tokens/component/alert/closable/false.json +18 -0
  77. package/lib/tokens/component/alert/closable/true.json +18 -0
  78. package/lib/tokens/component/alert/default.json +60 -0
  79. package/lib/tokens/component/alert/variant/error.json +18 -0
  80. package/lib/tokens/component/alert/variant/info.json +18 -0
  81. package/lib/tokens/component/alert/variant/success.json +18 -0
  82. package/lib/tokens/component/alert/variant/warning.json +18 -0
  83. package/lib/tokens/component/button/default.json +62 -0
  84. package/lib/tokens/component/button/icon/end.json +28 -0
  85. package/lib/tokens/component/button/icon/none.json +28 -0
  86. package/lib/tokens/component/button/icon/start.json +28 -0
  87. package/lib/tokens/component/button/variant/primary.json +46 -0
  88. package/lib/tokens/component/button/variant/secondary.json +46 -0
  89. package/lib/tokens/component/button/variant/tertairy.json +46 -0
  90. package/lib/tokens/component/button-login/default.json +88 -0
  91. package/lib/tokens/component/link/default.json +38 -0
  92. package/lib/tokens/core/default.json +584 -0
  93. package/lib/tokens/mode/dark (beta).json +296 -0
  94. package/lib/tokens/mode/light.json +295 -0
  95. package/lib/tokens/product/DigiD.json +114 -0
  96. package/lib/tokens/product/Logius.json +114 -0
  97. package/lib/tokens/product/MijnOverheid.json +114 -0
  98. package/lib/tokens/product/NLdoc - Ridderkerk.json +106 -0
  99. package/lib/tokens/product/NLdoc - Rijksoverheid.json +106 -0
  100. package/lib/tokens/product/NLdoc - WHD.json +106 -0
  101. package/lib/tokens/product/NLdoc - default.json +106 -0
  102. package/lib/tokens/viewport (beta)/lg.json +66 -0
  103. package/lib/tokens/viewport (beta)/md.json +66 -0
  104. package/lib/tokens/viewport (beta)/sm.json +66 -0
  105. package/lib/tokens/viewport (beta)/xl.json +66 -0
  106. package/lib/tokens/viewport (beta)/xs.json +66 -0
  107. package/package.json +47 -0
package/lib/css/digid/dark/xs.css ADDED
@@ -0,0 +1,236 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Thu, 20 Jun 2024 07:55:12 GMT
4
+ */
5
+
6
+ :root {
7
+ --logius-font-weight-normal: normal;
8
+ --logius-font-size-m: 18px;
9
+ --logius-font-family-default: Rijksoverheid, Arial;
10
+ --logius-font-line-height-s: 24px;
11
+ --logius-border-style-solid: solid;
12
+ --viewport-rijkslint-wordmark-original-padding-block-start: 1.25rem;
13
+ --viewport-rijkslint-wordmark-75-padding-block-start: 1.25rem;
14
+ --mode-button-login-icon-eidas-background-color: #ffffff00;
15
+ --mode-button-login-icon-eidas-lines-color: #ffffff;
16
+ --mode-button-login-icon-eidas-lock-color: #ffffff;
17
+ --mode-button-login-icon-eidas-stars-color: #ffffff;
18
+ --mode-button-login-icon-eherkenning-e-color: #ffffff;
19
+ --lux-icon-logo-eidas-background-color: #ffffff00;
20
+ --lux-icon-logo-eidas-lines-color: #ffffff;
21
+ --lux-icon-logo-eidas-lock-color: #ffffff;
22
+ --lux-icon-logo-eidas-stars-color: #ffffff;
23
+ --lux-icon-logo-eherkenning-e-color: #ffffff;
24
+ --lux-size-target: 3rem;
25
+ --lux-size-icon: 1rem;
26
+ --lux-grid-max-inline: 77.5rem;
27
+ --lux-grid-margin: 1rem;
28
+ --lux-grid-gutter: 0rem;
29
+ --lux-focus-border-radius: 0.375rem;
30
+ --lux-focus-outline-width: 0.125rem;
31
+ --lux-alert-min-inline-size: 160px;
32
+ --lux-alert-icon-start-size: 24px;
33
+ --lux-button-login-icon-size: 40px;
34
+ --lux-space-7-x: 3.5rem;
35
+ --lux-space-6-x: 3rem;
36
+ --lux-space-5-x: 2.5rem;
37
+ --lux-space-4-x: 2rem;
38
+ --lux-space-3-x: 1.5rem;
39
+ --lux-space-2-x: 1rem;
40
+ --lux-space-105-x: 0.75rem;
41
+ --lux-space-1-x: 0.5rem;
42
+ --lux-space-05-x: 0.25rem;
43
+ --lux-space-025-x: 0.125rem;
44
+ --lux-space-0-x: 0rem;
45
+ --lux-border-width-none: 0rem;
46
+ --lux-border-width-m: 0.125rem;
47
+ --lux-border-width-default: 0.0625rem;
48
+ --lux-border-radius-none: 0rem;
49
+ --lux-border-radius-circle: 62.4375rem;
50
+ --lux-border-radius-default: 0.25rem;
51
+ --lux-color-logoblauw-300: #154273;
52
+ --lux-color-robijnrood-300: #ca005d;
53
+ --lux-color-robijnrood-200: #efb3ce;
54
+ --lux-color-robijnrood-100: #f7d9e7;
55
+ --lux-color-roze-300: #f092cd;
56
+ --lux-color-roze-200: #fbdef0;
57
+ --lux-color-roze-100: #fdeff8;
58
+ --lux-color-rood-400: #542621;
59
+ --lux-color-rood-300: #d52b1e;
60
+ --lux-color-rood-200: #f2bfbc;
61
+ --lux-color-rood-100: #f9dfdd;
62
+ --lux-color-oranje-400: #b35900;
63
+ --lux-color-oranje-300: #e17000;
64
+ --lux-color-oranje-200: #f6d4b3;
65
+ --lux-color-oranje-100: #fbead9;
66
+ --lux-color-donkergeel-400: #bf880d;
67
+ --lux-color-donkergeel-300: #ffb612;
68
+ --lux-color-donkergeel-200: #ffe9b8;
69
+ --lux-color-donkergeel-100: #fff4db;
70
+ --lux-color-geel-300: #f9e11e;
71
+ --lux-color-geel-200: #fdf6bc;
72
+ --lux-color-geel-100: #fefbdd;
73
+ --lux-color-donkerbruin-300: #673327;
74
+ --lux-color-donkerbruin-200: #d1c2be;
75
+ --lux-color-donkerbruin-100: #e8e0df;
76
+ --lux-color-bruin-300: #94710a;
77
+ --lux-color-bruin-200: #dfd4b6;
78
+ --lux-color-bruin-100: #efeada;
79
+ --lux-color-donkergroen-300: #275937;
80
+ --lux-color-donkergroen-200: #becdc3;
81
+ --lux-color-donkergroen-100: #dfe6e1;
82
+ --lux-color-groen-400: #004b17;
83
+ --lux-color-groen-300: #39870c;
84
+ --lux-color-groen-200: #c4dbb6;
85
+ --lux-color-groen-100: #e1eddb;
86
+ --lux-color-mosgroen-300: #777b00;
87
+ --lux-color-mosgroen-200: #d6d7b3;
88
+ --lux-color-mosgroen-100: #ebebd9;
89
+ --lux-color-mintgroen-300: #76d2b6;
90
+ --lux-color-mintgroen-200: #d6f2e9;
91
+ --lux-color-mintgroen-100: #eaf8f4;
92
+ --lux-color-donkerblauw-400: #013f5e;
93
+ --lux-color-donkerblauw-300: #01689b;
94
+ --lux-color-donkerblauw-200: #b3d2e1;
95
+ --lux-color-donkerblauw-100: #d9e8f0;
96
+ --lux-color-hemelblauw-400: #00436c;
97
+ --lux-color-hemelblauw-300: #007bc7;
98
+ --lux-color-hemelblauw-200: #b3d7ee;
99
+ --lux-color-hemelblauw-100: #d9ebf7;
100
+ --lux-color-paars-400: #3b1255;
101
+ --lux-color-paars-300: #42145f;
102
+ --lux-color-paars-200: #c6b9cf;
103
+ --lux-color-paars-100: #e3dce7;
104
+ --lux-color-violet-400: #52002f;
105
+ --lux-color-violet-300: #a90061;
106
+ --lux-color-violet-200: #e5b3d0;
107
+ --lux-color-violet-100: #f2d9e7;
108
+ --lux-color-lichtblauw-300: #8fcae7;
109
+ --lux-color-lichtblauw-200: #ddeff8;
110
+ --lux-color-lichtblauw-100: #eef7fb;
111
+ --lux-color-none: #ffffff00;
112
+ --lux-color-wit: #ffffff;
113
+ --lux-color-zwart: #000000;
114
+ --lux-color-grijs-900: #171717;
115
+ --lux-color-grijs-800: #1d1d1d;
116
+ --lux-color-grijs-700: #282828;
117
+ --lux-color-grijs-600: #383838;
118
+ --lux-color-grijs-500: #696969;
119
+ --lux-color-grijs-400: #a7a7a7;
120
+ --lux-color-grijs-300: #e6e6e6;
121
+ --lux-color-grijs-200: #f3f3f3;
122
+ --lux-color-grijs-100: #fbfbfb;
123
+ --logius-font-weight-regular: var(--logius-font-weight-normal);
124
+ --logius-font-weight-default: var(--logius-font-weight-normal);
125
+ --logius-color-outline-default: var(--lux-color-grijs-100);
126
+ --logius-border-style-default: var(--logius-border-style-solid);
127
+ --mode-rijkslogo-color: var(--lux-color-wit);
128
+ --mode-button-login-active-background-color: var(--lux-color-grijs-500);
129
+ --mode-button-secondary-background-color: var(--lux-color-none);
130
+ --product-button-secondary-background-color: var(--lux-color-none);
131
+ --lux-focus-outline-offset: var(--lux-space-025-x);
132
+ --lux-focus-border-width-oud: var(--lux-border-width-m);
133
+ --lux-link-visited-color: var(--lux-color-paars-200);
134
+ --lux-link-active-color: var(--lux-color-paars-200);
135
+ --lux-link-hover-color: var(--lux-color-lichtblauw-300);
136
+ --lux-link-margin-inline: var(--lux-space-05-x);
137
+ --lux-link-color: var(--lux-color-lichtblauw-200);
138
+ --lux-alert-content-row-gap: var(--lux-space-0-x);
139
+ --lux-alert-close-button-size: var(--lux-size-icon);
140
+ --lux-alert-padding-inline-start: var(--lux-space-105-x);
141
+ --lux-alert-padding-inline-end: var(--lux-space-105-x);
142
+ --lux-alert-padding-block-start: var(--lux-space-105-x);
143
+ --lux-alert-padding-block-end: var(--lux-space-105-x);
144
+ --lux-alert-column-gap: var(--lux-space-1-x);
145
+ --lux-alert-border-width: var(--lux-border-width-default);
146
+ --lux-alert-border-radius: var(--lux-border-radius-default);
147
+ --lux-alert-border-color: var(--lux-color-none);
148
+ --lux-alert-color: var(--lux-color-grijs-700);
149
+ --lux-button-active-border-color: var(--lux-color-none);
150
+ --lux-button-active-background-color: var(--lux-color-none);
151
+ --lux-button-hover-border-color: var(--lux-color-none);
152
+ --lux-button-border-color: var(--lux-color-none);
153
+ --lux-button-background-color: var(--lux-color-none);
154
+ --lux-button-icon-size: var(--lux-size-icon);
155
+ --lux-button-border-width: var(--lux-border-width-default);
156
+ --lux-button-border-radius: var(--lux-border-radius-default);
157
+ --lux-button-min-block-size: var(--lux-size-target);
158
+ --lux-button-min-inline-size: var(--lux-size-target);
159
+ --lux-button-margin-inline: var(--lux-space-1-x);
160
+ --lux-button-padding-block-end: var(--lux-space-1-x);
161
+ --lux-button-padding-inline-end: var(--lux-space-105-x);
162
+ --lux-button-padding-block-start: var(--lux-space-1-x);
163
+ --lux-button-padding-inline-start: var(--lux-space-2-x);
164
+ --lux-button-disabled-border-color: var(--lux-color-none);
165
+ --lux-button-login-line-height: var(--logius-font-line-height-s);
166
+ --lux-button-login-font-size: var(--logius-font-size-m);
167
+ --lux-button-login-font-family: var(--logius-font-family-default);
168
+ --lux-button-login-border-style: var(--logius-border-style-solid);
169
+ --lux-button-login-padding-inline-start: var(--lux-space-05-x);
170
+ --lux-button-login-padding-inline-end: var(--lux-space-2-x);
171
+ --lux-button-login-padding-block-start: var(--lux-space-05-x);
172
+ --lux-button-login-padding-block-end: var(--lux-space-05-x);
173
+ --lux-button-login-min-inline-size: var(--lux-size-target);
174
+ --lux-button-login-min-block-size: var(--lux-size-target);
175
+ --lux-button-login-margin-inline: var(--lux-space-1-x);
176
+ --lux-button-login-border-width: var(--lux-border-width-default);
177
+ --lux-button-login-border-radius: var(--lux-border-radius-default);
178
+ --lux-color-feedback-warning-subdued: var(--lux-color-donkergeel-100);
179
+ --lux-color-feedback-warning-default: var(--lux-color-donkergeel-300);
180
+ --lux-color-feedback-error-subdued: var(--lux-color-rood-100);
181
+ --lux-color-feedback-error-default: var(--lux-color-rood-300);
182
+ --lux-color-feedback-info-subdued: var(--lux-color-hemelblauw-100);
183
+ --lux-color-feedback-info-default: var(--lux-color-hemelblauw-300);
184
+ --lux-color-feedback-success-subdued: var(--lux-color-groen-100);
185
+ --lux-color-feedback-success-default: var(--lux-color-groen-300);
186
+ --lux-color-canvas: var(--lux-color-zwart);
187
+ --lux-color-border-subdued: var(--lux-color-grijs-600);
188
+ --lux-color-border-default: var(--lux-color-grijs-500);
189
+ --lux-color-background-hover: var(--lux-color-grijs-600);
190
+ --lux-color-background-subdued: var(--lux-color-grijs-800);
191
+ --lux-color-background-default: var(--lux-color-grijs-700);
192
+ --lux-color-foreground-on-emphasis: var(--lux-color-wit);
193
+ --lux-color-foreground-subdued: var(--lux-color-grijs-400);
194
+ --lux-color-foreground-default: var(--lux-color-grijs-100);
195
+ --lux-color-brand-hover: var(--lux-color-oranje-400);
196
+ --lux-color-brand-subdued: var(--lux-color-oranje-100);
197
+ --lux-color-brand-default: var(--lux-color-oranje-300);
198
+ --mode-button-secondary-border-color: var(--lux-color-border-default);
199
+ --mode-button-secondary-hover-border-color: var(--lux-color-border-default);
200
+ --mode-button-secondary-hover-color: var(--lux-color-foreground-default);
201
+ --mode-button-secondary-hover-background-color: var(--lux-color-background-hover);
202
+ --mode-button-secondary-color: var(--lux-color-foreground-default);
203
+ --mode-button-tertiary-hover-color: var(--lux-color-foreground-default);
204
+ --mode-button-tertiary-hover-background-color: var(--lux-color-background-hover);
205
+ --mode-button-tertiary-color: var(--lux-color-foreground-default);
206
+ --product-button-tertiary-hover-background-color: var(--lux-color-background-hover);
207
+ --product-button-tertiary-hover-color: var(--lux-color-foreground-default);
208
+ --product-button-tertiary-color: var(--lux-color-foreground-default);
209
+ --product-button-secondary-hover-background-color: var(--lux-color-background-hover);
210
+ --product-button-secondary-hover-color: var(--lux-color-foreground-default);
211
+ --product-button-secondary-hover-border-color: var(--lux-color-border-default);
212
+ --product-button-secondary-color: var(--lux-color-foreground-default);
213
+ --product-button-secondary-border-color: var(--lux-color-border-default);
214
+ --lux-focus-outline-style: var(--logius-border-style-default);
215
+ --lux-focus-outline-color: var(--logius-color-outline-default);
216
+ --lux-link-icon-size: var(--lux-button-icon-size);
217
+ --lux-alert-background-color: var(--lux-color-feedback-warning-subdued);
218
+ --lux-button-disabled-color: var(--lux-color-foreground-subdued);
219
+ --lux-button-disabled-background-color: var(--lux-color-background-subdued);
220
+ --lux-button-login-font-weight: var(--logius-font-weight-default);
221
+ --lux-button-login-hover-color: var(--lux-color-foreground-default);
222
+ --lux-button-login-hover-border-color: var(--lux-color-border-default);
223
+ --lux-button-login-hover-background-color: var(--lux-color-background-hover);
224
+ --lux-button-login-color: var(--lux-color-foreground-default);
225
+ --lux-button-login-border-color: var(--lux-color-border-default);
226
+ --lux-button-login-background-color: var(--lux-color-background-default);
227
+ --lux-button-login-active-color: var(--lux-color-foreground-default);
228
+ --lux-button-login-active-background-color: var(--mode-button-login-active-background-color);
229
+ --lux-color-focus-outline: var(--lux-color-foreground-default);
230
+ --lux-color-border-strong: var(--lux-color-foreground-default);
231
+ --lux-button-active-color: var(--mode-button-tertiary-color);
232
+ --lux-button-hover-color: var(--mode-button-tertiary-hover-color);
233
+ --lux-button-hover-background-color: var(--mode-button-tertiary-hover-background-color);
234
+ --lux-button-color: var(--mode-button-tertiary-color);
235
+ --lux-button-login-active-border-color: var(--lux-color-border-strong);
236
+ }
package/lib/css/digid/light/lg.css ADDED
@@ -0,0 +1,236 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Thu, 20 Jun 2024 07:55:12 GMT
4
+ */
5
+
6
+ :root {
7
+ --logius-font-weight-normal: normal;
8
+ --logius-font-size-m: 18px;
9
+ --logius-font-family-default: Rijksoverheid, Arial;
10
+ --logius-font-line-height-s: 24px;
11
+ --logius-border-style-solid: solid;
12
+ --viewport-rijkslint-wordmark-original-padding-block-start: 3.125rem;
13
+ --viewport-rijkslint-wordmark-75-padding-block-start: 2.5rem;
14
+ --mode-button-login-icon-eidas-background-color: #1d336a;
15
+ --mode-button-login-icon-eidas-lines-color: #6ba6f1;
16
+ --mode-button-login-icon-eidas-lock-color: #ffffff;
17
+ --mode-button-login-icon-eidas-stars-color: #f1cc49;
18
+ --mode-button-login-icon-eherkenning-e-color: #203a70;
19
+ --lux-icon-logo-eidas-background-color: #1d336a;
20
+ --lux-icon-logo-eidas-lines-color: #6ba6f1;
21
+ --lux-icon-logo-eidas-lock-color: #ffffff;
22
+ --lux-icon-logo-eidas-stars-color: #f1cc49;
23
+ --lux-icon-logo-eherkenning-e-color: #203a70;
24
+ --lux-size-target: 3rem;
25
+ --lux-size-icon: 1rem;
26
+ --lux-grid-max-inline: 77.5rem;
27
+ --lux-grid-margin: 2.5rem;
28
+ --lux-grid-gutter: 2rem;
29
+ --lux-focus-border-radius: 0.375rem;
30
+ --lux-focus-outline-width: 0.125rem;
31
+ --lux-alert-min-inline-size: 160px;
32
+ --lux-alert-icon-start-size: 24px;
33
+ --lux-button-login-icon-size: 40px;
34
+ --lux-space-7-x: 3.5rem;
35
+ --lux-space-6-x: 3rem;
36
+ --lux-space-5-x: 2.5rem;
37
+ --lux-space-4-x: 2rem;
38
+ --lux-space-3-x: 1.5rem;
39
+ --lux-space-2-x: 1rem;
40
+ --lux-space-105-x: 0.75rem;
41
+ --lux-space-1-x: 0.5rem;
42
+ --lux-space-05-x: 0.25rem;
43
+ --lux-space-025-x: 0.125rem;
44
+ --lux-space-0-x: 0rem;
45
+ --lux-border-width-none: 0rem;
46
+ --lux-border-width-m: 0.125rem;
47
+ --lux-border-width-default: 0.0625rem;
48
+ --lux-border-radius-none: 0rem;
49
+ --lux-border-radius-circle: 62.4375rem;
50
+ --lux-border-radius-default: 0.25rem;
51
+ --lux-color-logoblauw-300: #154273;
52
+ --lux-color-robijnrood-300: #ca005d;
53
+ --lux-color-robijnrood-200: #efb3ce;
54
+ --lux-color-robijnrood-100: #f7d9e7;
55
+ --lux-color-roze-300: #f092cd;
56
+ --lux-color-roze-200: #fbdef0;
57
+ --lux-color-roze-100: #fdeff8;
58
+ --lux-color-rood-400: #542621;
59
+ --lux-color-rood-300: #d52b1e;
60
+ --lux-color-rood-200: #f2bfbc;
61
+ --lux-color-rood-100: #f9dfdd;
62
+ --lux-color-oranje-400: #b35900;
63
+ --lux-color-oranje-300: #e17000;
64
+ --lux-color-oranje-200: #f6d4b3;
65
+ --lux-color-oranje-100: #fbead9;
66
+ --lux-color-donkergeel-400: #bf880d;
67
+ --lux-color-donkergeel-300: #ffb612;
68
+ --lux-color-donkergeel-200: #ffe9b8;
69
+ --lux-color-donkergeel-100: #fff4db;
70
+ --lux-color-geel-300: #f9e11e;
71
+ --lux-color-geel-200: #fdf6bc;
72
+ --lux-color-geel-100: #fefbdd;
73
+ --lux-color-donkerbruin-300: #673327;
74
+ --lux-color-donkerbruin-200: #d1c2be;
75
+ --lux-color-donkerbruin-100: #e8e0df;
76
+ --lux-color-bruin-300: #94710a;
77
+ --lux-color-bruin-200: #dfd4b6;
78
+ --lux-color-bruin-100: #efeada;
79
+ --lux-color-donkergroen-300: #275937;
80
+ --lux-color-donkergroen-200: #becdc3;
81
+ --lux-color-donkergroen-100: #dfe6e1;
82
+ --lux-color-groen-400: #004b17;
83
+ --lux-color-groen-300: #39870c;
84
+ --lux-color-groen-200: #c4dbb6;
85
+ --lux-color-groen-100: #e1eddb;
86
+ --lux-color-mosgroen-300: #777b00;
87
+ --lux-color-mosgroen-200: #d6d7b3;
88
+ --lux-color-mosgroen-100: #ebebd9;
89
+ --lux-color-mintgroen-300: #76d2b6;
90
+ --lux-color-mintgroen-200: #d6f2e9;
91
+ --lux-color-mintgroen-100: #eaf8f4;
92
+ --lux-color-donkerblauw-400: #013f5e;
93
+ --lux-color-donkerblauw-300: #01689b;
94
+ --lux-color-donkerblauw-200: #b3d2e1;
95
+ --lux-color-donkerblauw-100: #d9e8f0;
96
+ --lux-color-hemelblauw-400: #00436c;
97
+ --lux-color-hemelblauw-300: #007bc7;
98
+ --lux-color-hemelblauw-200: #b3d7ee;
99
+ --lux-color-hemelblauw-100: #d9ebf7;
100
+ --lux-color-paars-400: #3b1255;
101
+ --lux-color-paars-300: #42145f;
102
+ --lux-color-paars-200: #c6b9cf;
103
+ --lux-color-paars-100: #e3dce7;
104
+ --lux-color-violet-400: #52002f;
105
+ --lux-color-violet-300: #a90061;
106
+ --lux-color-violet-200: #e5b3d0;
107
+ --lux-color-violet-100: #f2d9e7;
108
+ --lux-color-lichtblauw-300: #8fcae7;
109
+ --lux-color-lichtblauw-200: #ddeff8;
110
+ --lux-color-lichtblauw-100: #eef7fb;
111
+ --lux-color-none: #ffffff00;
112
+ --lux-color-wit: #ffffff;
113
+ --lux-color-zwart: #000000;
114
+ --lux-color-grijs-900: #171717;
115
+ --lux-color-grijs-800: #1d1d1d;
116
+ --lux-color-grijs-700: #282828;
117
+ --lux-color-grijs-600: #383838;
118
+ --lux-color-grijs-500: #696969;
119
+ --lux-color-grijs-400: #a7a7a7;
120
+ --lux-color-grijs-300: #e6e6e6;
121
+ --lux-color-grijs-200: #f3f3f3;
122
+ --lux-color-grijs-100: #fbfbfb;
123
+ --logius-font-weight-regular: var(--logius-font-weight-normal);
124
+ --logius-font-weight-default: var(--logius-font-weight-normal);
125
+ --logius-color-outline-default: var(--lux-color-grijs-700);
126
+ --logius-border-style-default: var(--logius-border-style-solid);
127
+ --mode-rijkslogo-color: var(--lux-color-zwart);
128
+ --mode-button-login-active-background-color: var(--lux-color-grijs-400);
129
+ --product-button-secondary-background-color: var(--lux-color-none);
130
+ --lux-focus-outline-offset: var(--lux-space-025-x);
131
+ --lux-focus-border-width-oud: var(--lux-border-width-m);
132
+ --lux-link-visited-color: var(--lux-color-paars-300);
133
+ --lux-link-active-color: var(--lux-color-paars-300);
134
+ --lux-link-hover-color: var(--lux-color-donkerblauw-400);
135
+ --lux-link-margin-inline: var(--lux-space-05-x);
136
+ --lux-link-color: var(--lux-color-donkerblauw-300);
137
+ --lux-alert-content-row-gap: var(--lux-space-0-x);
138
+ --lux-alert-close-button-size: var(--lux-size-icon);
139
+ --lux-alert-padding-inline-start: var(--lux-space-105-x);
140
+ --lux-alert-padding-inline-end: var(--lux-space-105-x);
141
+ --lux-alert-padding-block-start: var(--lux-space-105-x);
142
+ --lux-alert-padding-block-end: var(--lux-space-105-x);
143
+ --lux-alert-column-gap: var(--lux-space-1-x);
144
+ --lux-alert-border-width: var(--lux-border-width-default);
145
+ --lux-alert-border-radius: var(--lux-border-radius-default);
146
+ --lux-alert-border-color: var(--lux-color-none);
147
+ --lux-alert-color: var(--lux-color-grijs-700);
148
+ --lux-button-active-border-color: var(--lux-color-none);
149
+ --lux-button-active-background-color: var(--lux-color-none);
150
+ --lux-button-hover-border-color: var(--lux-color-none);
151
+ --lux-button-border-color: var(--lux-color-none);
152
+ --lux-button-background-color: var(--lux-color-none);
153
+ --lux-button-icon-size: var(--lux-size-icon);
154
+ --lux-button-border-width: var(--lux-border-width-default);
155
+ --lux-button-border-radius: var(--lux-border-radius-default);
156
+ --lux-button-min-block-size: var(--lux-size-target);
157
+ --lux-button-min-inline-size: var(--lux-size-target);
158
+ --lux-button-margin-inline: var(--lux-space-1-x);
159
+ --lux-button-padding-block-end: var(--lux-space-1-x);
160
+ --lux-button-padding-inline-end: var(--lux-space-105-x);
161
+ --lux-button-padding-block-start: var(--lux-space-1-x);
162
+ --lux-button-padding-inline-start: var(--lux-space-2-x);
163
+ --lux-button-disabled-border-color: var(--lux-color-none);
164
+ --lux-button-login-line-height: var(--logius-font-line-height-s);
165
+ --lux-button-login-font-size: var(--logius-font-size-m);
166
+ --lux-button-login-font-family: var(--logius-font-family-default);
167
+ --lux-button-login-border-style: var(--logius-border-style-solid);
168
+ --lux-button-login-padding-inline-start: var(--lux-space-05-x);
169
+ --lux-button-login-padding-inline-end: var(--lux-space-2-x);
170
+ --lux-button-login-padding-block-start: var(--lux-space-05-x);
171
+ --lux-button-login-padding-block-end: var(--lux-space-05-x);
172
+ --lux-button-login-min-inline-size: var(--lux-size-target);
173
+ --lux-button-login-min-block-size: var(--lux-size-target);
174
+ --lux-button-login-margin-inline: var(--lux-space-1-x);
175
+ --lux-button-login-border-width: var(--lux-border-width-default);
176
+ --lux-button-login-border-radius: var(--lux-border-radius-default);
177
+ --lux-color-feedback-warning-subdued: var(--lux-color-donkergeel-100);
178
+ --lux-color-feedback-warning-default: var(--lux-color-donkergeel-300);
179
+ --lux-color-feedback-error-subdued: var(--lux-color-rood-100);
180
+ --lux-color-feedback-error-default: var(--lux-color-rood-300);
181
+ --lux-color-feedback-info-subdued: var(--lux-color-hemelblauw-100);
182
+ --lux-color-feedback-info-default: var(--lux-color-hemelblauw-300);
183
+ --lux-color-feedback-success-subdued: var(--lux-color-groen-100);
184
+ --lux-color-feedback-success-default: var(--lux-color-groen-300);
185
+ --lux-color-canvas: var(--lux-color-grijs-200);
186
+ --lux-color-border-subdued: var(--lux-color-grijs-400);
187
+ --lux-color-border-default: var(--lux-color-grijs-500);
188
+ --lux-color-background-hover: var(--lux-color-grijs-300);
189
+ --lux-color-background-subdued: var(--lux-color-grijs-200);
190
+ --lux-color-background-default: var(--lux-color-wit);
191
+ --lux-color-foreground-on-emphasis: var(--lux-color-wit);
192
+ --lux-color-foreground-subdued: var(--lux-color-grijs-500);
193
+ --lux-color-foreground-default: var(--lux-color-grijs-700);
194
+ --lux-color-brand-hover: var(--lux-color-oranje-400);
195
+ --lux-color-brand-subdued: var(--lux-color-oranje-100);
196
+ --lux-color-brand-default: var(--lux-color-oranje-300);
197
+ --mode-button-secondary-background-color: var(--product-button-secondary-background-color);
198
+ --product-button-tertiary-hover-background-color: var(--lux-color-background-hover);
199
+ --product-button-tertiary-hover-color: var(--lux-color-foreground-default);
200
+ --product-button-tertiary-color: var(--lux-color-foreground-default);
201
+ --product-button-secondary-hover-background-color: var(--lux-color-background-hover);
202
+ --product-button-secondary-hover-color: var(--lux-color-foreground-default);
203
+ --product-button-secondary-hover-border-color: var(--lux-color-border-default);
204
+ --product-button-secondary-color: var(--lux-color-foreground-default);
205
+ --product-button-secondary-border-color: var(--lux-color-border-default);
206
+ --lux-focus-outline-style: var(--logius-border-style-default);
207
+ --lux-focus-outline-color: var(--logius-color-outline-default);
208
+ --lux-link-icon-size: var(--lux-button-icon-size);
209
+ --lux-alert-background-color: var(--lux-color-feedback-warning-subdued);
210
+ --lux-button-disabled-color: var(--lux-color-foreground-subdued);
211
+ --lux-button-disabled-background-color: var(--lux-color-background-subdued);
212
+ --lux-button-login-font-weight: var(--logius-font-weight-default);
213
+ --lux-button-login-hover-color: var(--lux-color-foreground-default);
214
+ --lux-button-login-hover-border-color: var(--lux-color-border-default);
215
+ --lux-button-login-hover-background-color: var(--lux-color-background-hover);
216
+ --lux-button-login-color: var(--lux-color-foreground-default);
217
+ --lux-button-login-border-color: var(--lux-color-border-default);
218
+ --lux-button-login-background-color: var(--lux-color-background-default);
219
+ --lux-button-login-active-color: var(--lux-color-foreground-default);
220
+ --lux-button-login-active-background-color: var(--mode-button-login-active-background-color);
221
+ --lux-color-focus-outline: var(--lux-color-foreground-default);
222
+ --lux-color-border-strong: var(--lux-color-foreground-default);
223
+ --mode-button-secondary-border-color: var(--product-button-secondary-border-color);
224
+ --mode-button-secondary-hover-border-color: var(--product-button-secondary-hover-border-color);
225
+ --mode-button-secondary-hover-color: var(--product-button-secondary-hover-color);
226
+ --mode-button-secondary-hover-background-color: var(--product-button-secondary-hover-background-color);
227
+ --mode-button-secondary-color: var(--product-button-secondary-color);
228
+ --mode-button-tertiary-hover-color: var(--product-button-tertiary-hover-color);
229
+ --mode-button-tertiary-hover-background-color: var(--product-button-tertiary-hover-background-color);
230
+ --mode-button-tertiary-color: var(--product-button-tertiary-color);
231
+ --lux-button-login-active-border-color: var(--lux-color-border-strong);
232
+ --lux-button-active-color: var(--mode-button-tertiary-color);
233
+ --lux-button-hover-color: var(--mode-button-tertiary-hover-color);
234
+ --lux-button-hover-background-color: var(--mode-button-tertiary-hover-background-color);
235
+ --lux-button-color: var(--mode-button-tertiary-color);
236
+ }