@design-system-rte/core 0.7.0 → 0.10.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.
Files changed (22) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/assets/icons/cancel_filled.svg +3 -0
  3. package/assets/icons/cancel_outlined.svg +3 -0
  4. package/components/text-input/text-input.interface.d.ts +21 -0
  5. package/css/bleu_iceberg.css +1 -1
  6. package/css/rte-themes.css +1 -1
  7. package/css/vert_foret.css +1 -1
  8. package/design-tokens/main-internal.scss +3 -0
  9. package/design-tokens/main.scss +1 -0
  10. package/design-tokens/scripts/sourceFiles/primitives.json +2075 -0
  11. package/design-tokens/scripts/sourceFiles/tokens.json +9642 -0
  12. package/design-tokens/scripts/tokens-generators/colors.ts +7 -0
  13. package/design-tokens/tokens/_gradient.scss +54 -0
  14. package/design-tokens/tokens/_mixins.scss +50 -10
  15. package/design-tokens/tokens/_themes.scss +6 -0
  16. package/design-tokens/tokens/themes/_bleu-iceberg-dark.scss +9 -18
  17. package/design-tokens/tokens/themes/_bleu-iceberg-light.scss +9 -18
  18. package/design-tokens/tokens/themes/_vert-foret-dark.scss +9 -18
  19. package/design-tokens/tokens/themes/_vert-foret-light.scss +9 -18
  20. package/design-tokens/tokens/themes/_violet-dark.scss +9 -18
  21. package/design-tokens/tokens/themes/_violet-light.scss +9 -18
  22. package/package.json +1 -1
package/design-tokens/scripts/tokens-generators/colors.ts CHANGED
@@ -67,6 +67,13 @@ export function generateThemesFile() {
67
67
  scss += `${INDENT.repeat(1)}"dark": $${theme}-dark,\n`;
68
68
  scss += `);\n`;
69
69
  });
70
+
71
+ scss += `\n$themes: (\n`;
72
+ Object.values(ColorTheme).forEach((theme) => {
73
+ scss += `${INDENT.repeat(1)}"${theme.replace(/-/g, "_")}": $${theme},\n`;
74
+ });
75
+ scss += `);`;
76
+
70
77
  const filePath = path.join(tokensOutputDir, "_themes.scss");
71
78
  generateScssFile(scss, filePath);
72
79
  }
package/design-tokens/tokens/_gradient.scss ADDED
@@ -0,0 +1,54 @@
1
+ @use 'sass:map';
2
+ @use 'themes' as *;
3
+
4
+ @mixin neutral-top-bottom {
5
+ background: linear-gradient(180deg, hsla(0, 4%, 5%, 1), hsla(0, 4%, 5%, 0));
6
+ }
7
+
8
+ @mixin neutral-top-bottom-light {
9
+ background: linear-gradient(180deg, hsla(0, 4%, 5%, 0.6), hsla(0, 4%, 5%, 0));
10
+ }
11
+
12
+ @mixin neutral-top-bottom-smooth {
13
+ background: linear-gradient(180deg,
14
+ hsla(0, 4%, 5%, 0.84), hsla(0, 4%, 5%, 0.8), hsla(0, 4%, 5%, 0.75), hsla(0, 4%, 5%, 0.71), hsla(0, 4%, 5%, 0.67), hsla(0, 4%, 5%, 0.63), hsla(0, 4%, 5%, 0.59), hsla(0, 4%, 5%, 0.54), hsla(0, 4%, 5%, 0.49), hsla(0, 4%, 5%, 0.44), hsla(0, 4%, 5%, 0.38), hsla(0, 4%, 5%, 0.32), hsla(0, 4%, 5%, 0.25), hsla(0, 4%, 5%, 0.18), hsla(0, 4%, 5%, 0.09), hsla(0, 4%, 5%, 0));
15
+ }
16
+
17
+ @mixin neutral-bottom-top {
18
+ background: linear-gradient(0deg, hsla(0, 4%, 5%, 1), hsla(0, 4%, 5%, 0));
19
+ }
20
+
21
+ @mixin neutral-bottom-top-light {
22
+ background: linear-gradient(0deg, hsla(0, 4%, 5%, 0.6), hsla(0, 4%, 5%, 0));
23
+ }
24
+
25
+ @mixin neutral-bottom-top-smooth {
26
+ background: linear-gradient(0deg,
27
+ hsla(0, 4%, 5%, 0.84), hsla(0, 4%, 5%, 0.8), hsla(0, 4%, 5%, 0.75), hsla(0, 4%, 5%, 0.71), hsla(0, 4%, 5%, 0.67), hsla(0, 4%, 5%, 0.63), hsla(0, 4%, 5%, 0.59), hsla(0, 4%, 5%, 0.54), hsla(0, 4%, 5%, 0.49), hsla(0, 4%, 5%, 0.44), hsla(0, 4%, 5%, 0.38), hsla(0, 4%, 5%, 0.32), hsla(0, 4%, 5%, 0.25), hsla(0, 4%, 5%, 0.18), hsla(0, 4%, 5%, 0.09), hsla(0, 4%, 5%, 0));
28
+ }
29
+
30
+ @mixin neutral-left-right {
31
+ background: linear-gradient(90deg, hsla(0, 4%, 5%, 1), hsla(0, 4%, 5%, 0));
32
+ }
33
+
34
+ @mixin neutral-left-right-light {
35
+ background: linear-gradient(90deg, hsla(0, 4%, 5%, 0.6), hsla(0, 4%, 5%, 0));
36
+ }
37
+
38
+ @mixin neutral-left-right-smooth {
39
+ background: linear-gradient(90deg,
40
+ hsla(0, 4%, 5%, 0.84), hsla(0, 4%, 5%, 0.8), hsla(0, 4%, 5%, 0.75), hsla(0, 4%, 5%, 0.71), hsla(0, 4%, 5%, 0.67), hsla(0, 4%, 5%, 0.63), hsla(0, 4%, 5%, 0.59), hsla(0, 4%, 5%, 0.54), hsla(0, 4%, 5%, 0.49), hsla(0, 4%, 5%, 0.44), hsla(0, 4%, 5%, 0.38), hsla(0, 4%, 5%, 0.32), hsla(0, 4%, 5%, 0.25), hsla(0, 4%, 5%, 0.18), hsla(0, 4%, 5%, 0.09), hsla(0, 4%, 5%, 0));
41
+ }
42
+
43
+ @mixin neutral-right-left {
44
+ background: linear-gradient(270deg, hsla(0, 4%, 5%, 1), hsla(0, 4%, 5%, 0));
45
+ }
46
+
47
+ @mixin neutral-right-left-light {
48
+ background: linear-gradient(270deg, hsla(0, 4%, 5%, 0.6), hsla(0, 4%, 5%, 0));
49
+ }
50
+
51
+ @mixin neutral-right-left-smooth {
52
+ background: linear-gradient(270deg,
53
+ hsla(0, 4%, 5%, 0.84), hsla(0, 4%, 5%, 0.8), hsla(0, 4%, 5%, 0.75), hsla(0, 4%, 5%, 0.71), hsla(0, 4%, 5%, 0.67), hsla(0, 4%, 5%, 0.63), hsla(0, 4%, 5%, 0.59), hsla(0, 4%, 5%, 0.54), hsla(0, 4%, 5%, 0.49), hsla(0, 4%, 5%, 0.44), hsla(0, 4%, 5%, 0.38), hsla(0, 4%, 5%, 0.32), hsla(0, 4%, 5%, 0.25), hsla(0, 4%, 5%, 0.18), hsla(0, 4%, 5%, 0.09), hsla(0, 4%, 5%, 0));
54
+ }
package/design-tokens/tokens/_mixins.scss CHANGED
@@ -2,19 +2,11 @@
2
2
  @use 'typography' as *;
3
3
  @use 'sass:map';
4
4
 
5
- $themes: (
6
- "bleu_iceberg": $bleu-iceberg,
7
- "violet": $violet,
8
- "vert_foret": $vert-foret
9
- );
10
-
11
5
  @mixin apply-theme($targetTheme: bleu_iceberg, $mode: light) {
12
- $targetTheme: map.get($themes, $targetTheme, $mode);
13
-
14
- @include extract-custom-properties-from-theme($targetTheme);
6
+ $selectedTheme: map.get($themes, $targetTheme, $mode);
7
+ @include extract-custom-properties-from-theme($selectedTheme);
15
8
  }
16
9
 
17
-
18
10
  @mixin theme-selector($targetTheme: bleu_iceberg, $mode: light) {
19
11
  $theme: map.get($themes, $targetTheme, $mode);
20
12
 
@@ -247,4 +239,52 @@ $themes: (
247
239
  font-size: $button-l-semibold-font-size;
248
240
  line-height: $button-l-semibold-line-height;
249
241
  letter-spacing: $button-l-semibold-letter-spacing;
242
+ }
243
+
244
+ @mixin typography-text-input {
245
+ font-feature-settings: "liga" off, "clig" off;
246
+ font-style: normal;
247
+ }
248
+
249
+ @mixin typography-text-input-m {
250
+ @include typography-text-input;
251
+ font-family: $text-m-regular-font-family;
252
+ font-weight: $text-m-regular-font-weight;
253
+ font-size: $text-m-regular-font-size;
254
+ line-height: $text-m-regular-line-height;
255
+ letter-spacing: $text-m-regular-letter-spacing;
256
+ }
257
+
258
+ @mixin typography-text-input-tertiary-regular {
259
+ @include typography-text-input;
260
+ font-family: $text-s-regular-font-family;
261
+ font-weight: $text-s-regular-font-weight;
262
+ font-size: $text-s-regular-font-size;
263
+ line-height: $text-s-regular-line-height;
264
+ letter-spacing: $text-s-regular-letter-spacing;
265
+ }
266
+
267
+ @mixin typography-text-input-s-bold {
268
+ @include typography-text-input;
269
+ font-family: $text-s-bold-font-family;
270
+ font-weight: $text-s-bold-font-weight;
271
+ font-size: $text-s-bold-font-size;
272
+ line-height: $text-s-bold-line-height;
273
+ letter-spacing: $text-s-bold-letter-spacing;
274
+ }
275
+
276
+ @mixin typography-text-s-regular {
277
+ font-family: $text-s-regular-font-family;
278
+ font-size: $text-s-regular-font-size;
279
+ font-weight: $text-s-regular-font-weight;
280
+ line-height: $text-s-regular-line-height;
281
+ letter-spacing: $text-s-regular-letter-spacing;
282
+ }
283
+
284
+ @mixin typography-text-m-regular {
285
+ font-family: $text-m-regular-font-family;
286
+ font-size: $text-m-regular-font-size;
287
+ font-weight: $text-m-regular-font-weight;
288
+ line-height: $text-m-regular-line-height;
289
+ letter-spacing: $text-m-regular-letter-spacing;
250
290
  }
package/design-tokens/tokens/_themes.scss CHANGED
@@ -12,3 +12,9 @@ $vert-foret: (
12
12
  "light": $vert-foret-light,
13
13
  "dark": $vert-foret-dark,
14
14
  );
15
+
16
+ $themes: (
17
+ "bleu_iceberg": $bleu-iceberg,
18
+ "violet": $violet,
19
+ "vert_foret": $vert-foret,
20
+ );
package/design-tokens/tokens/themes/_bleu-iceberg-dark.scss CHANGED
@@ -4,7 +4,10 @@
4
4
  $bleu-iceberg-dark: (
5
5
  "background-default": $greyscale-900,
6
6
  "background-hover": $greyscale-800,
7
- "background-pressed": $greyscale-700,
7
+ "background-neutral-regular-default": $greyscale-700,
8
+ "background-neutral-regular-hover": $greyscale-550,
9
+ "background-neutral-bold-default": $greyscale-200,
10
+ "background-neutral-bold-hover": $greyscale-50,
8
11
  "background-disabled": $greyscale-800,
9
12
  "background-inverse": $core-white,
10
13
  "background-brand-default": $bleu-iceberg-300,
@@ -20,13 +23,13 @@ $bleu-iceberg-dark: (
20
23
  "background-danger-default": $rouge-indications-400,
21
24
  "background-danger-hover": $rouge-indications-500,
22
25
  "background-danger-pressed": $rouge-indications-600,
26
+ "background-status-info-regular": $bleu-digital-400,
23
27
  "background-status-info-subtle": $bleu-digital-100,
24
- "background-status-info": $bleu-digital-400,
25
- "background-status-warning": $jaune-500,
28
+ "background-status-warning-regular": $jaune-500,
26
29
  "background-status-warning-subtle": $jaune-100,
27
- "background-status-success": $vert-digital-400,
30
+ "background-status-success-regular": $vert-digital-400,
28
31
  "background-status-success-subtle": $vert-digital-200,
29
- "background-status-alert": $rouge-indications-500,
32
+ "background-status-alert-regular": $rouge-indications-500,
30
33
  "background-status-alert-subtle": $rouge-indications-100,
31
34
  "border-primary": $greyscale-400,
32
35
  "border-secondary": $greyscale-600,
@@ -93,8 +96,6 @@ $bleu-iceberg-dark: (
93
96
  "content-secondary": $greyscale-100,
94
97
  "content-tertiary": $greyscale-300,
95
98
  "content-primary-inverse": $greyscale-900,
96
- "content-secondary-inverse": $greyscale-800,
97
- "content-tertiary-inverse": $greyscale-600,
98
99
  "content-disabled": $greyscale-700,
99
100
  "content-brand-default": $bleu-iceberg-0,
100
101
  "content-brand-hover": $bleu-iceberg-50,
@@ -107,19 +108,10 @@ $bleu-iceberg-dark: (
107
108
  "content-link-visited-press": $violet-300,
108
109
  "content-danger": $rouge-indications-400,
109
110
  "content-danger-hover": $rouge-indications-500,
110
- "content-danger-press": $rouge-indications-600,
111
111
  "content-danger-inverse": $core-white,
112
- "content-info": $bleu-digital-500,
113
- "content-info-inverse": $core-white,
114
- "content-info-bold": $bleu-digital-400,
115
- "content-warning": $jaune-indications-400,
116
- "content-warning-inverse": $core-white,
117
- "content-warning-bold": $jaune-indications-300,
118
- "content-success": $vert-digital-600,
119
- "content-success-inverse": $core-white,
120
- "content-success-bold": $vert-digital-500,
121
112
  "content-decorative": $greyscale-900,
122
113
  "content-status": $greyscale-900,
114
+ "content-success": $vert-digital-600,
123
115
  "decorative-neutral": $greyscale-50,
124
116
  "decorative-bleu-iceberg": $bleu-iceberg-200,
125
117
  "decorative-vert-foret": $vert-foret-100,
@@ -153,7 +145,6 @@ $bleu-iceberg-dark: (
153
145
  "elevation-shadow-key": rgba(0, 0, 0, 0.28),
154
146
  "elevation-shadow-key-darker": rgba(0, 0, 0, 0.48),
155
147
  "elevation-shadow-key-brand": rgba(0, 0, 0, 0.21),
156
- "gradient-default": #ffffff,
157
148
  // TODO remove this color (not a real token)
158
149
  "background-brand-hover-opacity-20": $bleu-iceberg-200-opacity-20,
159
150
  // TODO remove this color (not a real token)
package/design-tokens/tokens/themes/_bleu-iceberg-light.scss CHANGED
@@ -4,7 +4,10 @@
4
4
  $bleu-iceberg-light: (
5
5
  "background-default": $core-white,
6
6
  "background-hover": $greyscale-50,
7
- "background-pressed": $greyscale-100,
7
+ "background-neutral-regular-default": $greyscale-100,
8
+ "background-neutral-regular-hover": $greyscale-250,
9
+ "background-neutral-bold-default": $greyscale-600,
10
+ "background-neutral-bold-hover": $greyscale-750,
8
11
  "background-disabled": $greyscale-0,
9
12
  "background-inverse": $greyscale-900,
10
13
  "background-brand-default": $bleu-iceberg-600,
@@ -20,13 +23,13 @@ $bleu-iceberg-light: (
20
23
  "background-danger-default": $rouge-indications-600,
21
24
  "background-danger-hover": $rouge-indications-700,
22
25
  "background-danger-pressed": $rouge-indications-800,
26
+ "background-status-info-regular": $bleu-digital-400,
23
27
  "background-status-info-subtle": $bleu-digital-100,
24
- "background-status-info": $bleu-digital-400,
25
- "background-status-warning": $jaune-500,
28
+ "background-status-warning-regular": $jaune-500,
26
29
  "background-status-warning-subtle": $jaune-100,
27
- "background-status-success": $vert-digital-400,
30
+ "background-status-success-regular": $vert-digital-400,
28
31
  "background-status-success-subtle": $vert-digital-200,
29
- "background-status-alert": $rouge-indications-500,
32
+ "background-status-alert-regular": $rouge-indications-500,
30
33
  "background-status-alert-subtle": $rouge-indications-100,
31
34
  "border-primary": $greyscale-600,
32
35
  "border-secondary": $greyscale-400,
@@ -93,8 +96,6 @@ $bleu-iceberg-light: (
93
96
  "content-secondary": $greyscale-800,
94
97
  "content-tertiary": $greyscale-600,
95
98
  "content-primary-inverse": $core-white,
96
- "content-secondary-inverse": $greyscale-100,
97
- "content-tertiary-inverse": $greyscale-300,
98
99
  "content-disabled": $greyscale-200,
99
100
  "content-brand-default": $bleu-iceberg-600,
100
101
  "content-brand-hover": $bleu-iceberg-700,
@@ -107,19 +108,10 @@ $bleu-iceberg-light: (
107
108
  "content-link-visited-press": $violet-800,
108
109
  "content-danger": $rouge-indications-600,
109
110
  "content-danger-hover": $rouge-indications-700,
110
- "content-danger-press": $rouge-indications-800,
111
111
  "content-danger-inverse": $core-white,
112
- "content-info": $bleu-digital-500,
113
- "content-info-inverse": $core-white,
114
- "content-info-bold": $bleu-digital-600,
115
- "content-warning": $jaune-indications-400,
116
- "content-warning-inverse": $core-white,
117
- "content-warning-bold": $jaune-indications-500,
118
- "content-success": $vert-digital-600,
119
- "content-success-inverse": $core-white,
120
- "content-success-bold": $vert-digital-700,
121
112
  "content-decorative": $greyscale-900,
122
113
  "content-status": $greyscale-900,
114
+ "content-success": $vert-digital-600,
123
115
  "decorative-neutral": $greyscale-50,
124
116
  "decorative-bleu-iceberg": $bleu-iceberg-200,
125
117
  "decorative-vert-foret": $vert-foret-100,
@@ -153,7 +145,6 @@ $bleu-iceberg-light: (
153
145
  "elevation-shadow-key": rgba(0, 0, 0, 0.14),
154
146
  "elevation-shadow-key-darker": rgba(0, 0, 0, 0.24),
155
147
  "elevation-shadow-key-brand": rgba(0, 0, 0, 0.31),
156
- "gradient-default": #ffffff,
157
148
  // TODO remove this color (not a real token)
158
149
  "background-brand-hover-opacity-20": $bleu-iceberg-700-opacity-20,
159
150
  // TODO remove this color (not a real token)
package/design-tokens/tokens/themes/_vert-foret-dark.scss CHANGED
@@ -4,7 +4,10 @@
4
4
  $vert-foret-dark: (
5
5
  "background-default": $greyscale-900,
6
6
  "background-hover": $greyscale-800,
7
- "background-pressed": $greyscale-700,
7
+ "background-neutral-regular-default": $greyscale-700,
8
+ "background-neutral-regular-hover": $greyscale-550,
9
+ "background-neutral-bold-default": $greyscale-200,
10
+ "background-neutral-bold-hover": $greyscale-50,
8
11
  "background-disabled": $greyscale-800,
9
12
  "background-inverse": $core-white,
10
13
  "background-brand-default": $vert-foret-300,
@@ -20,13 +23,13 @@ $vert-foret-dark: (
20
23
  "background-danger-default": $rouge-indications-400,
21
24
  "background-danger-hover": $rouge-indications-500,
22
25
  "background-danger-pressed": $rouge-indications-600,
26
+ "background-status-info-regular": $bleu-digital-400,
23
27
  "background-status-info-subtle": $bleu-digital-100,
24
- "background-status-info": $bleu-digital-400,
25
- "background-status-warning": $jaune-500,
28
+ "background-status-warning-regular": $jaune-500,
26
29
  "background-status-warning-subtle": $jaune-100,
27
- "background-status-success": $vert-digital-400,
30
+ "background-status-success-regular": $vert-digital-400,
28
31
  "background-status-success-subtle": $vert-digital-200,
29
- "background-status-alert": $rouge-indications-500,
32
+ "background-status-alert-regular": $rouge-indications-500,
30
33
  "background-status-alert-subtle": $rouge-indications-100,
31
34
  "border-primary": $greyscale-400,
32
35
  "border-secondary": $greyscale-600,
@@ -93,8 +96,6 @@ $vert-foret-dark: (
93
96
  "content-secondary": $greyscale-100,
94
97
  "content-tertiary": $greyscale-300,
95
98
  "content-primary-inverse": $greyscale-900,
96
- "content-secondary-inverse": $greyscale-800,
97
- "content-tertiary-inverse": $greyscale-600,
98
99
  "content-disabled": $greyscale-700,
99
100
  "content-brand-default": $vert-foret-0,
100
101
  "content-brand-hover": $vert-foret-50,
@@ -107,19 +108,10 @@ $vert-foret-dark: (
107
108
  "content-link-visited-press": $violet-300,
108
109
  "content-danger": $rouge-indications-400,
109
110
  "content-danger-hover": $rouge-indications-500,
110
- "content-danger-press": $rouge-indications-600,
111
111
  "content-danger-inverse": $core-white,
112
- "content-info": $bleu-digital-500,
113
- "content-info-inverse": $core-white,
114
- "content-info-bold": $bleu-digital-400,
115
- "content-warning": $jaune-indications-400,
116
- "content-warning-inverse": $core-white,
117
- "content-warning-bold": $jaune-indications-300,
118
- "content-success": $vert-digital-600,
119
- "content-success-inverse": $core-white,
120
- "content-success-bold": $vert-digital-500,
121
112
  "content-decorative": $greyscale-900,
122
113
  "content-status": $greyscale-900,
114
+ "content-success": $vert-digital-600,
123
115
  "decorative-neutral": $greyscale-50,
124
116
  "decorative-bleu-iceberg": $bleu-iceberg-200,
125
117
  "decorative-vert-foret": $vert-foret-100,
@@ -153,7 +145,6 @@ $vert-foret-dark: (
153
145
  "elevation-shadow-key": rgba(0, 0, 0, 0.28),
154
146
  "elevation-shadow-key-darker": rgba(0, 0, 0, 0.48),
155
147
  "elevation-shadow-key-brand": rgba(0, 0, 0, 0.21),
156
- "gradient-default": #ffffff,
157
148
  // TODO remove this color (not a real token)
158
149
  "background-brand-hover-opacity-20": $vert-foret-200-opacity-20,
159
150
  // TODO remove this color (not a real token)
package/design-tokens/tokens/themes/_vert-foret-light.scss CHANGED
@@ -4,7 +4,10 @@
4
4
  $vert-foret-light: (
5
5
  "background-default": $core-white,
6
6
  "background-hover": $greyscale-50,
7
- "background-pressed": $greyscale-100,
7
+ "background-neutral-regular-default": $greyscale-100,
8
+ "background-neutral-regular-hover": $greyscale-250,
9
+ "background-neutral-bold-default": $greyscale-600,
10
+ "background-neutral-bold-hover": $greyscale-750,
8
11
  "background-disabled": $greyscale-0,
9
12
  "background-inverse": $greyscale-900,
10
13
  "background-brand-default": $vert-foret-600,
@@ -20,13 +23,13 @@ $vert-foret-light: (
20
23
  "background-danger-default": $rouge-indications-600,
21
24
  "background-danger-hover": $rouge-indications-700,
22
25
  "background-danger-pressed": $rouge-indications-800,
26
+ "background-status-info-regular": $bleu-digital-400,
23
27
  "background-status-info-subtle": $bleu-digital-100,
24
- "background-status-info": $bleu-digital-400,
25
- "background-status-warning": $jaune-500,
28
+ "background-status-warning-regular": $jaune-500,
26
29
  "background-status-warning-subtle": $jaune-100,
27
- "background-status-success": $vert-digital-400,
30
+ "background-status-success-regular": $vert-digital-400,
28
31
  "background-status-success-subtle": $vert-digital-200,
29
- "background-status-alert": $rouge-indications-500,
32
+ "background-status-alert-regular": $rouge-indications-500,
30
33
  "background-status-alert-subtle": $rouge-indications-100,
31
34
  "border-primary": $greyscale-600,
32
35
  "border-secondary": $greyscale-400,
@@ -93,8 +96,6 @@ $vert-foret-light: (
93
96
  "content-secondary": $greyscale-800,
94
97
  "content-tertiary": $greyscale-600,
95
98
  "content-primary-inverse": $core-white,
96
- "content-secondary-inverse": $greyscale-100,
97
- "content-tertiary-inverse": $greyscale-300,
98
99
  "content-disabled": $greyscale-200,
99
100
  "content-brand-default": $vert-foret-600,
100
101
  "content-brand-hover": $vert-foret-700,
@@ -107,19 +108,10 @@ $vert-foret-light: (
107
108
  "content-link-visited-press": $violet-800,
108
109
  "content-danger": $rouge-indications-600,
109
110
  "content-danger-hover": $rouge-indications-700,
110
- "content-danger-press": $rouge-indications-800,
111
111
  "content-danger-inverse": $core-white,
112
- "content-info": $bleu-digital-500,
113
- "content-info-inverse": $core-white,
114
- "content-info-bold": $bleu-digital-600,
115
- "content-warning": $jaune-indications-400,
116
- "content-warning-inverse": $core-white,
117
- "content-warning-bold": $jaune-indications-500,
118
- "content-success": $vert-digital-600,
119
- "content-success-inverse": $core-white,
120
- "content-success-bold": $vert-digital-700,
121
112
  "content-decorative": $greyscale-900,
122
113
  "content-status": $greyscale-900,
114
+ "content-success": $vert-digital-600,
123
115
  "decorative-neutral": $greyscale-50,
124
116
  "decorative-bleu-iceberg": $bleu-iceberg-200,
125
117
  "decorative-vert-foret": $vert-foret-100,
@@ -153,7 +145,6 @@ $vert-foret-light: (
153
145
  "elevation-shadow-key": rgba(0, 0, 0, 0.14),
154
146
  "elevation-shadow-key-darker": rgba(0, 0, 0, 0.24),
155
147
  "elevation-shadow-key-brand": rgba(0, 0, 0, 0.31),
156
- "gradient-default": #ffffff,
157
148
  // TODO remove this color (not a real token)
158
149
  "background-brand-hover-opacity-20": $vert-foret-700-opacity-20,
159
150
  // TODO remove this color (not a real token)
package/design-tokens/tokens/themes/_violet-dark.scss CHANGED
@@ -4,7 +4,10 @@
4
4
  $violet-dark: (
5
5
  "background-default": $greyscale-900,
6
6
  "background-hover": $greyscale-800,
7
- "background-pressed": $greyscale-700,
7
+ "background-neutral-regular-default": $greyscale-700,
8
+ "background-neutral-regular-hover": $greyscale-550,
9
+ "background-neutral-bold-default": $greyscale-200,
10
+ "background-neutral-bold-hover": $greyscale-50,
8
11
  "background-disabled": $greyscale-800,
9
12
  "background-inverse": $core-white,
10
13
  "background-brand-default": $violet-300,
@@ -20,13 +23,13 @@ $violet-dark: (
20
23
  "background-danger-default": $rouge-indications-400,
21
24
  "background-danger-hover": $rouge-indications-500,
22
25
  "background-danger-pressed": $rouge-indications-600,
26
+ "background-status-info-regular": $bleu-digital-400,
23
27
  "background-status-info-subtle": $bleu-digital-100,
24
- "background-status-info": $bleu-digital-400,
25
- "background-status-warning": $jaune-500,
28
+ "background-status-warning-regular": $jaune-500,
26
29
  "background-status-warning-subtle": $jaune-100,
27
- "background-status-success": $vert-digital-400,
30
+ "background-status-success-regular": $vert-digital-400,
28
31
  "background-status-success-subtle": $vert-digital-200,
29
- "background-status-alert": $rouge-indications-500,
32
+ "background-status-alert-regular": $rouge-indications-500,
30
33
  "background-status-alert-subtle": $rouge-indications-100,
31
34
  "border-primary": $greyscale-400,
32
35
  "border-secondary": $greyscale-600,
@@ -93,8 +96,6 @@ $violet-dark: (
93
96
  "content-secondary": $greyscale-100,
94
97
  "content-tertiary": $greyscale-300,
95
98
  "content-primary-inverse": $greyscale-900,
96
- "content-secondary-inverse": $greyscale-800,
97
- "content-tertiary-inverse": $greyscale-600,
98
99
  "content-disabled": $greyscale-700,
99
100
  "content-brand-default": $violet-0,
100
101
  "content-brand-hover": $violet-50,
@@ -107,19 +108,10 @@ $violet-dark: (
107
108
  "content-link-visited-press": $violet-300,
108
109
  "content-danger": $rouge-indications-400,
109
110
  "content-danger-hover": $rouge-indications-500,
110
- "content-danger-press": $rouge-indications-600,
111
111
  "content-danger-inverse": $core-white,
112
- "content-info": $bleu-digital-500,
113
- "content-info-inverse": $core-white,
114
- "content-info-bold": $bleu-digital-400,
115
- "content-warning": $jaune-indications-400,
116
- "content-warning-inverse": $core-white,
117
- "content-warning-bold": $jaune-indications-300,
118
- "content-success": $vert-digital-600,
119
- "content-success-inverse": $core-white,
120
- "content-success-bold": $vert-digital-500,
121
112
  "content-decorative": $greyscale-900,
122
113
  "content-status": $greyscale-900,
114
+ "content-success": $vert-digital-600,
123
115
  "decorative-neutral": $greyscale-50,
124
116
  "decorative-bleu-iceberg": $bleu-iceberg-200,
125
117
  "decorative-vert-foret": $vert-foret-100,
@@ -153,7 +145,6 @@ $violet-dark: (
153
145
  "elevation-shadow-key": rgba(0, 0, 0, 0.28),
154
146
  "elevation-shadow-key-darker": rgba(0, 0, 0, 0.48),
155
147
  "elevation-shadow-key-brand": rgba(0, 0, 0, 0.21),
156
- "gradient-default": #ffffff,
157
148
  // TODO remove this color (not a real token)
158
149
  "background-brand-hover-opacity-20": $violet-200-opacity-20,
159
150
  // TODO remove this color (not a real token)
package/design-tokens/tokens/themes/_violet-light.scss CHANGED
@@ -4,7 +4,10 @@
4
4
  $violet-light: (
5
5
  "background-default": $core-white,
6
6
  "background-hover": $greyscale-50,
7
- "background-pressed": $greyscale-100,
7
+ "background-neutral-regular-default": $greyscale-100,
8
+ "background-neutral-regular-hover": $greyscale-250,
9
+ "background-neutral-bold-default": $greyscale-600,
10
+ "background-neutral-bold-hover": $greyscale-750,
8
11
  "background-disabled": $greyscale-0,
9
12
  "background-inverse": $greyscale-900,
10
13
  "background-brand-default": $violet-600,
@@ -20,13 +23,13 @@ $violet-light: (
20
23
  "background-danger-default": $rouge-indications-600,
21
24
  "background-danger-hover": $rouge-indications-700,
22
25
  "background-danger-pressed": $rouge-indications-800,
26
+ "background-status-info-regular": $bleu-digital-400,
23
27
  "background-status-info-subtle": $bleu-digital-100,
24
- "background-status-info": $bleu-digital-400,
25
- "background-status-warning": $jaune-500,
28
+ "background-status-warning-regular": $jaune-500,
26
29
  "background-status-warning-subtle": $jaune-100,
27
- "background-status-success": $vert-digital-400,
30
+ "background-status-success-regular": $vert-digital-400,
28
31
  "background-status-success-subtle": $vert-digital-200,
29
- "background-status-alert": $rouge-indications-500,
32
+ "background-status-alert-regular": $rouge-indications-500,
30
33
  "background-status-alert-subtle": $rouge-indications-100,
31
34
  "border-primary": $greyscale-600,
32
35
  "border-secondary": $greyscale-400,
@@ -93,8 +96,6 @@ $violet-light: (
93
96
  "content-secondary": $greyscale-800,
94
97
  "content-tertiary": $greyscale-600,
95
98
  "content-primary-inverse": $core-white,
96
- "content-secondary-inverse": $greyscale-100,
97
- "content-tertiary-inverse": $greyscale-300,
98
99
  "content-disabled": $greyscale-200,
99
100
  "content-brand-default": $violet-600,
100
101
  "content-brand-hover": $violet-700,
@@ -107,19 +108,10 @@ $violet-light: (
107
108
  "content-link-visited-press": $violet-800,
108
109
  "content-danger": $rouge-indications-600,
109
110
  "content-danger-hover": $rouge-indications-700,
110
- "content-danger-press": $rouge-indications-800,
111
111
  "content-danger-inverse": $core-white,
112
- "content-info": $bleu-digital-500,
113
- "content-info-inverse": $core-white,
114
- "content-info-bold": $bleu-digital-600,
115
- "content-warning": $jaune-indications-400,
116
- "content-warning-inverse": $core-white,
117
- "content-warning-bold": $jaune-indications-500,
118
- "content-success": $vert-digital-600,
119
- "content-success-inverse": $core-white,
120
- "content-success-bold": $vert-digital-700,
121
112
  "content-decorative": $greyscale-900,
122
113
  "content-status": $greyscale-900,
114
+ "content-success": $vert-digital-600,
123
115
  "decorative-neutral": $greyscale-50,
124
116
  "decorative-bleu-iceberg": $bleu-iceberg-200,
125
117
  "decorative-vert-foret": $vert-foret-100,
@@ -153,7 +145,6 @@ $violet-light: (
153
145
  "elevation-shadow-key": rgba(0, 0, 0, 0.14),
154
146
  "elevation-shadow-key-darker": rgba(0, 0, 0, 0.24),
155
147
  "elevation-shadow-key-brand": rgba(0, 0, 0, 0.31),
156
- "gradient-default": #ffffff,
157
148
  // TODO remove this color (not a real token)
158
149
  "background-brand-hover-opacity-20": $violet-700-opacity-20,
159
150
  // TODO remove this color (not a real token)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@design-system-rte/core",
3
- "version": "0.7.0",
3
+ "version": "0.10.0",
4
4
  "main": "index.js",
5
5
  "scripts": {
6
6
  "lint": "eslint .",