@gouvfr-lasuite/ui-kit 0.4.1 → 0.6.0

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.
@@ -162,7 +162,7 @@ const config = {
162
162
  },
163
163
  tooltip: {
164
164
  padding: "4px 8px",
165
- "background-color": "var(--c--theme--colors--greyscale-1000)",
165
+ "background-color": "ref(theme.colors.greyscale-1000)",
166
166
  },
167
167
  button: {
168
168
  "medium-height": "40px",
@@ -170,64 +170,64 @@ const config = {
170
170
  "border-radius": "4px",
171
171
  "small-height": "26px",
172
172
  primary: {
173
- "background--color": "var(--c--theme--colors--primary-text)",
173
+ "background--color": "ref(theme.colors.primary-text)",
174
174
  "background--color-hover": "#1212ff",
175
175
  "background--color-active": "#2323ff",
176
176
  "background--color-disabled":
177
- "var(--c--theme--colors--greyscale-100)",
177
+ "ref(theme.colors.greyscale-100)",
178
178
  color: "#fff",
179
179
  "color-hover": "#fff",
180
180
  "color-active": "#fff",
181
181
  "color-focus-visible": "#fff",
182
- disabled: "var(--c--theme--colors--greyscale-500)",
182
+ disabled: "ref(theme.colors.greyscale-500)",
183
183
  },
184
184
  "primary-text": {
185
- "background--color": "var(--c--theme--colors--primary-text)",
186
- "background--color-hover": "var(--c--theme--colors--greyscale-100)",
187
- "background--color-active": "var(--c--theme--colors--primary-100)",
185
+ "background--color": "ref(theme.colors.primary-text)",
186
+ "background--color-hover": "ref(theme.colors.greyscale-100)",
187
+ "background--color-active": "ref(theme.colors.primary-100)",
188
188
  "background--color-focus-visible": "#fff",
189
189
  "background--color-disabled":
190
- "var(--c--theme--colors--greyscale-000)",
191
- color: "var(--c--theme--colors--primary-800)",
192
- "color-hover": "var(--c--theme--colors--primary-800)",
193
- disabled: "var(--c--theme--colors--greyscale-400)",
190
+ "ref(theme.colors.greyscale-000)",
191
+ color: "ref(theme.colors.primary-800)",
192
+ "color-hover": "ref(theme.colors.primary-800)",
193
+ disabled: "ref(theme.colors.greyscale-400)",
194
194
  },
195
195
  secondary: {
196
196
  "background--color-hover": "#F6F6F6",
197
197
  "background--color-active": "#EDEDED",
198
198
  "background--color-focus-visible":
199
- "var(--c--theme--colors--greyscale-000)",
200
- "background--disabled": "var(--c--theme--colors--greyscale-000)",
201
- color: "var(--c--theme--colors--primary-800)",
202
- "border--color": "var(--c--theme--colors--greyscale-300)",
203
- "border--color-hover": "var(--c--theme--colors--greyscale-300)",
204
- "border--color-disabled": "var(--c--theme--colors--greyscale-300)",
205
- disabled: "var(--c--theme--colors--greyscale-400)",
199
+ "ref(theme.colors.greyscale-000)",
200
+ "background--disabled": "ref(theme.colors.greyscale-000)",
201
+ color: "ref(theme.colors.primary-800)",
202
+ "border--color": "ref(theme.colors.greyscale-300)",
203
+ "border--color-hover": "ref(theme.colors.greyscale-300)",
204
+ "border--color-disabled": "ref(theme.colors.greyscale-300)",
205
+ disabled: "ref(theme.colors.greyscale-400)",
206
206
  },
207
207
  tertiary: {
208
- "background--color": "var(--c--theme--colors--primary-100)",
208
+ "background--color": "ref(theme.colors.primary-100)",
209
209
  "background--color-focus-visible":
210
- "var(--c--theme--colors--primary-100)",
211
- "background--color-hover": "var(--c--theme--colors--primary-300)",
212
- "background--color-active": "var(--c--theme--colors--primary-300)",
213
- "background--disabled": "var(--c--theme--colors--primary-050)",
214
- color: "var(--c--theme--colors--primary-800)",
215
- disabled: "var(--c--theme--colors--primary-300)",
210
+ "ref(theme.colors.primary-100)",
211
+ "background--color-hover": "ref(theme.colors.primary-300)",
212
+ "background--color-active": "ref(theme.colors.primary-300)",
213
+ "background--disabled": "ref(theme.colors.primary-050)",
214
+ color: "ref(theme.colors.primary-800)",
215
+ disabled: "ref(theme.colors.primary-300)",
216
216
  },
217
217
  "tertiary-text": {
218
- "background--color-hover": "var(--c--theme--colors--greyscale-100)",
219
- "color-hover": "var(--c--theme--colors--primary-text)",
220
- color: "var(--c--theme--colors--primary-600)",
218
+ "background--color-hover": "ref(theme.colors.greyscale-100)",
219
+ "color-hover": "ref(theme.colors.primary-text)",
220
+ color: "ref(theme.colors.primary-600)",
221
221
  },
222
222
  danger: {
223
223
  "color-hover": "white",
224
- "background--color": "var(--c--theme--colors--danger-600)",
224
+ "background--color": "ref(theme.colors.danger-600)",
225
225
  "background--color-hover": "#FF2725",
226
226
  "background--color-focus-visible":
227
- "var(--c--theme--colors--danger-600)",
227
+ "ref(theme.colors.danger-600)",
228
228
  "background--color-disabled":
229
- "var(--c--theme--colors--greyscale-100)",
230
- "color-disabled": "var(--c--theme--colors--greyscale-400)",
229
+ "ref(theme.colors.greyscale-100)",
230
+ "color-disabled": "ref(theme.colors.greyscale-400)",
231
231
  },
232
232
  },
233
233
  datagrid: {
@@ -238,22 +238,22 @@ const config = {
238
238
  },
239
239
  "forms-checkbox": {
240
240
  "border-radius": "4px",
241
- "border-color": "var(--c--theme--colors--primary-800)",
242
- "background-color--hover": "var(--c--theme--colors--greyscale-100)",
243
- "border--color-disabled": "var(--c--theme--colors--greyscale-200)",
244
- "border--color": "var(--c--theme--colors--primary-800)",
245
- "background--disabled": "var(--c--theme--colors--greyscale-200)",
246
- "background--enable": "var(--c--theme--colors--primary-800)",
247
- "check--disabled": "var(--c--theme--colors--greyscale-300)",
248
- "check--enable": "var(--c--theme--colors--greyscale-000)",
249
- color: "var(--c--theme--colors--primary-text)",
250
- "label--color": "var(--c--theme--colors--greyscale-1000)",
251
- "label--size": "var(--c--theme--font--sizes--sm)",
241
+ "border-color": "ref(theme.colors.primary-800)",
242
+ "background-color--hover": "ref(theme.colors.greyscale-100)",
243
+ "border--color-disabled": "ref(theme.colors.greyscale-200)",
244
+ "border--color": "ref(theme.colors.primary-800)",
245
+ "background--disabled": "ref(theme.colors.greyscale-200)",
246
+ "background--enable": "ref(theme.colors.primary-800)",
247
+ "check--disabled": "ref(theme.colors.greyscale-300)",
248
+ "check--enable": "ref(theme.colors.greyscale-000)",
249
+ color: "ref(theme.colors.primary-text)",
250
+ "label--color": "ref(theme.colors.greyscale-1000)",
251
+ "label--size": "ref(theme.font.sizes.sm)",
252
252
  "label--weight": "500",
253
- "text--color": "var(--c--theme--colors--greyscale-600)",
254
- "text--size": "var(--c--theme--font--sizes--s)",
253
+ "text--color": "ref(theme.colors.greyscale-600)",
254
+ "text--size": "ref(theme.font.sizes.s)",
255
255
  "text--weight": "400",
256
- "text--color-disabled": "var(--c--theme--colors--greyscale-300)",
256
+ "text--color-disabled": "ref(theme.colors.greyscale-300)",
257
257
  },
258
258
  "forms-labelledbox": {
259
259
  "label-color--small": "ref(theme.colors.greyscale-950)",
@@ -262,20 +262,20 @@ const config = {
262
262
  "label-color--big--disabled": "ref(theme.colors.greyscale-300)",
263
263
  },
264
264
  "forms-radio": {
265
- "border-color": "var(--c--theme--colors--primary-800)",
266
- "background-color": "var(--c--theme--colors--greyscale-000)",
267
- "accent-color": "var(--c--theme--colors--primary-800)",
268
- "accent-color-disabled": "var(--c--theme--colors--greyscale-300)",
265
+ "border-color": "ref(theme.colors.primary-800)",
266
+ "background-color": "ref(theme.colors.greyscale-000)",
267
+ "accent-color": "ref(theme.colors.primary-800)",
268
+ "accent-color-disabled": "ref(theme.colors.greyscale-300)",
269
269
  },
270
270
  "forms-switch": {
271
- "border--color-disabled": "var(--c--theme--colors--greyscale-300)",
272
- "border--color": "var(--c--theme--colors--primary-800)",
271
+ "border--color-disabled": "ref(theme.colors.greyscale-300)",
272
+ "border--color": "ref(theme.colors.primary-800)",
273
273
  "handle-background-color": "white",
274
274
  "handle-background-color--disabled":
275
- "var(--c--theme--colors--greyscale-000)",
275
+ "ref(theme.colors.greyscale-000)",
276
276
  "rail-background-color--disabled":
277
- "var(--c--theme--colors--greyscale-000)",
278
- "accent-color": "var(--c--theme--colors--primary-800)",
277
+ "ref(theme.colors.greyscale-000)",
278
+ "accent-color": "ref(theme.colors.primary-800)",
279
279
  },
280
280
  "forms-textarea": {
281
281
  "label-color--focus": "ref(theme.colors.greyscale-1000)",
@@ -308,6 +308,36 @@ const config = {
308
308
  "value-color": "ref(theme.colors.greyscale-950)",
309
309
  "font-size": "14px",
310
310
  },
311
+ "badge": {
312
+ "font-size": "ref(theme.font.sizes.xs)",
313
+ "border-radius": "4px",
314
+ "padding-inline": "ref(theme.spacings.xs)",
315
+ "padding-block": "ref(theme.spacings.2xs)",
316
+ "accent": {
317
+ "background-color": "ref(theme.colors.primary-100)",
318
+ "color": "ref(theme.colors.primary-600)",
319
+ },
320
+ "neutral": {
321
+ "background-color": "ref(theme.colors.greyscale-100)",
322
+ "color": "ref(theme.colors.greyscale-600)",
323
+ },
324
+ "danger": {
325
+ "background-color": "ref(theme.colors.danger-100)",
326
+ "color": "ref(theme.colors.danger-600)",
327
+ },
328
+ "success": {
329
+ "background-color": "ref(theme.colors.success-100)",
330
+ "color": "ref(theme.colors.success-600)",
331
+ },
332
+ "warning": {
333
+ "background-color": "ref(theme.colors.warning-100)",
334
+ "color": "ref(theme.colors.warning-600)",
335
+ },
336
+ "info": {
337
+ "background-color": "ref(theme.colors.info-100)",
338
+ "color": "ref(theme.colors.info-600)",
339
+ },
340
+ },
311
341
  },
312
342
  },
313
343
  },