@eui/styles 19.1.2 → 19.1.3-snapshot-1744273107050

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.
@@ -1,121 +1,82 @@
1
- // generated with : https://uicolors.app/create
1
+ $primary-blue-25: #f8f9ff;
2
+ $primary-blue-50: #f0f4fe;
3
+ $primary-blue-75: #e6ecfc;
4
+ $primary-blue-100: #dce5fd;
5
+ $primary-blue-200: #c2d2fb;
6
+ $primary-blue-300: #98b6f8;
7
+ $primary-blue-400: #5e88f1;
8
+ $primary-blue-500: #3860ed;
9
+ $primary-blue-600: #2d49e3;
10
+ $primary-blue-700: #2537d0;
11
+ $primary-blue-800: #242ea9;
12
+ $primary-blue-900: #232c85;
13
+ $primary-blue-950: #1a1d51;
14
+ $primary-yellow-50: #fff9ed;
15
+ $primary-yellow-100: #fff1d4;
16
+ $primary-yellow-200: #ffdfa9;
17
+ $primary-yellow-300: #ffbe5c;
18
+ $primary-yellow-400: #fea439;
19
+ $primary-yellow-500: #fc8713;
20
+ $primary-yellow-600: #ed6c09;
21
+ $primary-yellow-700: #c55109;
22
+ $primary-yellow-800: #9c4010;
23
+ $primary-yellow-900: #7e3610;
24
+ $primary-yellow-950: #441a06;
25
+ $primary-neutral-25: #fafafb;
26
+ $primary-neutral-50: #f6f7f9;
27
+ $primary-neutral-100: #e9ebee;
28
+ $primary-neutral-200: #d9dce2;
29
+ $primary-neutral-300: #bec3ce;
30
+ $primary-neutral-400: #a4abb9;
31
+ $primary-neutral-500: #8a92a3;
32
+ $primary-neutral-600: #646e83;
33
+ $primary-neutral-700: #576278;
34
+ $primary-neutral-800: #3f4a62;
35
+ $primary-neutral-900: #26324b;
36
+ $primary-neutral-950: #1e283c;
37
+ $alert-error-50: #fef2f3;
38
+ $alert-error-100: #ffc9cc;
39
+ $alert-error-200: #ffc9cc;
40
+ $alert-error-300: #fda4a9;
41
+ $alert-error-400: #fa6f76;
42
+ $alert-error-500: #f1424b;
43
+ $alert-error-600: #df232d;
44
+ $alert-error-700: #ae1820;
45
+ $alert-error-800: #9b1920;
46
+ $alert-error-900: #801c21;
47
+ $alert-error-950: #46090c;
48
+ $alert-warning-50: #fefbe8;
49
+ $alert-warning-100: #fff7c2;
50
+ $alert-warning-200: #ffed89;
51
+ $alert-warning-300: #ffdb45;
52
+ $alert-warning-400: #fcc614;
53
+ $alert-warning-500: #e3ac00;
54
+ $alert-warning-600: #bf8c00;
55
+ $alert-warning-700: #956e00;
56
+ $alert-warning-800: #795d00;
57
+ $alert-warning-900: #5e4a00;
58
+ $alert-warning-950: #352b00;
59
+ $alert-success-50: #f1fcf3;
60
+ $alert-success-100: #defae5;
61
+ $alert-success-200: #bef4cc;
62
+ $alert-success-300: #8ce9a6;
63
+ $alert-success-400: #52d676;
64
+ $alert-success-500: #2bbc53;
65
+ $alert-success-600: #1e9b41;
66
+ $alert-success-700: #1d833b;
67
+ $alert-success-800: #1a612f;
68
+ $alert-success-900: #184f29;
69
+ $alert-success-950: #072c13;
70
+ $alert-info-50: #f0f9ff;
71
+ $alert-info-100: #dff1ff;
72
+ $alert-info-200: #b9e4fe;
73
+ $alert-info-300: #7bd0fe;
74
+ $alert-info-400: #34b8fc;
75
+ $alert-info-500: #0aa0ed;
76
+ $alert-info-600: #007acb;
77
+ $alert-info-700: #006ab5;
78
+ $alert-info-800: #005288;
79
+ $alert-info-900: #004370;
80
+ $alert-info-950: #002a4a;
2
81
 
3
- $color-congress-blue-50: #ebf9ff;
4
- $color-congress-blue-100: #d1f2ff;
5
- $color-congress-blue-200: #aee9ff;
6
- $color-congress-blue-300: #76deff;
7
- $color-congress-blue-400: #35c9ff;
8
- $color-congress-blue-500: #07a7ff;
9
- $color-congress-blue-600: #0081ff;
10
- $color-congress-blue-700: #0068ff;
11
- $color-congress-blue-800: #0056d7;
12
- $color-congress-blue-900: #004494; // root
13
- $color-congress-blue-950: #062f65;
14
- $color-royal-blue-50: #f0f4fe;
15
- $color-royal-blue-100: #dce5fd;
16
- $color-royal-blue-200: #c2d2fb;
17
- $color-royal-blue-300: #98b6f8;
18
- $color-royal-blue-400: #6790f3;
19
- $color-royal-blue-500: #3860ed; // root
20
- $color-royal-blue-600: #2d49e3;
21
- $color-royal-blue-700: #2537d0;
22
- $color-royal-blue-800: #242ea9;
23
- $color-royal-blue-900: #232c85;
24
- $color-royal-blue-950: #1a1d51;
25
- $color-gold-50: #fefde8;
26
- $color-gold-100: #fffbc2;
27
- $color-gold-200: #fff587;
28
- $color-gold-300: #ffe843;
29
- $color-gold-400: #ffd617; // root
30
- $color-gold-500: #efbc03;
31
- $color-gold-600: #ce9100;
32
- $color-gold-700: #a46704;
33
- $color-gold-800: #88500b;
34
- $color-gold-900: #734110;
35
- $color-gold-950: #432105;
36
- $color-flush-orange-50: #fff9ed;
37
- $color-flush-orange-100: #fff1d4;
38
- $color-flush-orange-200: #ffdfa9;
39
- $color-flush-orange-300: #ffc672;
40
- $color-flush-orange-400: #fea339;
41
- $color-flush-orange-500: #fc8713; // root
42
- $color-flush-orange-600: #ed6b09;
43
- $color-flush-orange-700: #c4500a;
44
- $color-flush-orange-800: #9c3f10;
45
- $color-flush-orange-900: #7d3611;
46
- $color-flush-orange-950: #441906;
47
-
48
-
49
- // keep neutral untouched
50
- $color-neutral-160: #131313;
51
- $color-neutral-140: #1d1d1d;
52
- $color-neutral-130: #222;
53
- $color-neutral-120: #262626;
54
- $color-neutral-110: #2b2b2b;
55
- $color-neutral-100: #303030;
56
- $color-neutral-80: #595959;
57
- $color-neutral-60: #838383;
58
- $color-neutral-40: #acacac;
59
- $color-neutral-20: #d6d6d6;
60
- $color-neutral-10: #eaeaea;
61
- $color-neutral-5: #f5f5f5;
62
- $color-neutral-3: #f9f9f9;
63
- $color-neutral-0: #fff;
64
-
65
- // $color-manatee-50: #f5f7f8;
66
- // $color-manatee-100: #edf0f2;
67
- // $color-manatee-200: #dee3e7;
68
- // $color-manatee-300: #cad1d7;
69
- // $color-manatee-400: #b3bcc6;
70
- // $color-manatee-500: #9fa7b5;
71
- // $color-manatee-600: #8a92a3; // root
72
- // $color-manatee-700: #757c8d;
73
- // $color-manatee-800: #606673;
74
- // $color-manatee-900: #51565e;
75
- // $color-manatee-950: #2f3137;
76
-
77
- $color-coral-red-50: #fef2f3;
78
- $color-coral-red-100: #fee2e3;
79
- $color-coral-red-200: #ffc9cc;
80
- $color-coral-red-300: #fda4a9;
81
- $color-coral-red-400: #fa6f76;
82
- $color-coral-red-500: #f1424b; // root
83
- $color-coral-red-600: #de242e;
84
- $color-coral-red-700: #bb1a22;
85
- $color-coral-red-800: #9a1a21;
86
- $color-coral-red-900: #801c21;
87
- $color-coral-red-950: #46090c;
88
- $color-golden-grass-50: #fffde7;
89
- $color-golden-grass-100: #fffbc1;
90
- $color-golden-grass-200: #fff386;
91
- $color-golden-grass-300: #ffe441;
92
- $color-golden-grass-400: #ffd10d;
93
- $color-golden-grass-500: #e3ac00; // root
94
- $color-golden-grass-600: #d18c00;
95
- $color-golden-grass-700: #a66302;
96
- $color-golden-grass-800: #894d0a;
97
- $color-golden-grass-900: #743f0f;
98
- $color-golden-grass-950: #442004;
99
- $color-fern-50: #f1fcf3;
100
- $color-fern-100: #defae5;
101
- $color-fern-200: #bef4cc;
102
- $color-fern-300: #8ce9a5;
103
- $color-fern-400: #52d676;
104
- $color-fern-500: #2bbc53; // root
105
- $color-fern-600: #1e9b40;
106
- $color-fern-700: #1b7a35;
107
- $color-fern-800: #1a612e;
108
- $color-fern-900: #175029;
109
- $color-fern-950: #072c13;
110
- $color-curious-blue-50: #f0f9ff;
111
- $color-curious-blue-100: #dff1ff;
112
- $color-curious-blue-200: #b9e4fe;
113
- $color-curious-blue-300: #7bd0fe;
114
- $color-curious-blue-400: #34b8fc;
115
- $color-curious-blue-500: #0aa0ed; // root
116
- $color-curious-blue-600: #007fcb;
117
- $color-curious-blue-700: #0065a4;
118
- $color-curious-blue-800: #055687;
119
- $color-curious-blue-900: #0a4770;
120
- $color-curious-blue-950: #072d4a;
121
82
 
@@ -1,133 +1,116 @@
1
+ @use '../../base/default/color' as default;
1
2
  @use '../../base/ds2025/color' as base;
2
3
 
3
4
  $theme-ds2025-map: (
4
5
  branding: (
5
- 120: base.$color-congress-blue-950,
6
- 100: base.$color-congress-blue-900,
7
- 80: base.$color-congress-blue-800
6
+ 120: default.$color-branding-120,
7
+ 100: default.$color-branding-100,
8
+ 80: default.$color-branding-80
8
9
  ),
9
10
  primary: (
10
- 160: base.$color-royal-blue-950,
11
- 140: base.$color-royal-blue-900,
12
- 130: base.$color-royal-blue-800,
13
- 120: base.$color-royal-blue-700,
14
- 110: base.$color-royal-blue-600,
15
- 100: base.$color-royal-blue-500,
16
- 80: base.$color-royal-blue-400,
17
- 60: base.$color-royal-blue-300,
18
- 40: base.$color-royal-blue-200,
19
- 20: base.$color-royal-blue-100,
20
- 10: base.$color-royal-blue-50,
21
- 5: base.$color-royal-blue-50,
22
- 0: base.$color-royal-blue-50
11
+ 160: base.$primary-blue-950,
12
+ 140: base.$primary-blue-900,
13
+ 130: base.$primary-blue-800,
14
+ 120: base.$primary-blue-700,
15
+ 110: base.$primary-blue-600,
16
+ 100: base.$primary-blue-500,
17
+ 80: base.$primary-blue-400,
18
+ 60: base.$primary-blue-300,
19
+ 40: base.$primary-blue-200,
20
+ 20: base.$primary-blue-100,
21
+ 10: base.$primary-blue-75,
22
+ 5: base.$primary-blue-50,
23
+ 0: base.$primary-blue-25
23
24
  ),
24
- // keep eUI neutral shades
25
25
  neutral: (
26
- 160: base.$color-neutral-160,
27
- 140: base.$color-neutral-140,
28
- 130: base.$color-neutral-130,
29
- 120: base.$color-neutral-120,
30
- 110: base.$color-neutral-110,
31
- 100: base.$color-neutral-100,
32
- 80: base.$color-neutral-80,
33
- 60: base.$color-neutral-60,
34
- 40: base.$color-neutral-40,
35
- 20: base.$color-neutral-20,
36
- 10: base.$color-neutral-10,
37
- 5: base.$color-neutral-5,
38
- 3: base.$color-neutral-3,
39
- 0: base.$color-neutral-0
26
+ 160: base.$primary-neutral-950,
27
+ 140: base.$primary-neutral-950,
28
+ 130: base.$primary-neutral-950,
29
+ 120: base.$primary-neutral-900,
30
+ 110: base.$primary-neutral-800,
31
+ 100: base.$primary-neutral-700,
32
+ 80: base.$primary-neutral-600,
33
+ 60: base.$primary-neutral-500,
34
+ 40: base.$primary-neutral-400,
35
+ 20: base.$primary-neutral-300,
36
+ 10: base.$primary-neutral-200,
37
+ 5: base.$primary-neutral-100,
38
+ 3: default.$color-neutral-3, // as the 50 is too dark for bg-lighter
39
+ 0: default.$color-neutral-0
40
40
  ),
41
- // neutral: (
42
- // 160: base.$color-manatee-950,
43
- // 140: base.$color-manatee-950,
44
- // 130: base.$color-manatee-950,
45
- // 120: base.$color-manatee-900,
46
- // 110: base.$color-manatee-800,
47
- // 100: base.$color-manatee-700,
48
- // 80: base.$color-manatee-600,
49
- // 60: base.$color-manatee-500,
50
- // 40: base.$color-manatee-400,
51
- // 20: base.$color-manatee-300,
52
- // 10: base.$color-manatee-200,
53
- // 5: base.$color-manatee-100,
54
- // 3: base.$color-manatee-50,
55
- // 2: base.$color-manatee-50,
56
- // 0: base.$color-manatee-50
57
- // ),
58
41
  accent: (
59
- 160: base.$color-gold-950,
60
- 140: base.$color-gold-900,
61
- 130: base.$color-gold-800,
62
- 120: base.$color-gold-700,
63
- 110: base.$color-gold-600,
64
- 100: base.$color-gold-500,
65
- 80: base.$color-gold-400,
66
- 60: base.$color-gold-300,
67
- 40: base.$color-gold-200,
68
- 20: base.$color-gold-100,
69
- 10: base.$color-gold-50,
70
- 5: base.$color-gold-50,
71
- 0: base.$color-gold-50
42
+ 160: base.$primary-yellow-950,
43
+ 140: base.$primary-yellow-900,
44
+ 130: base.$primary-yellow-800,
45
+ 120: base.$primary-yellow-700,
46
+ 110: base.$primary-yellow-600,
47
+ 100: base.$primary-yellow-500,
48
+ 80: base.$primary-yellow-400,
49
+ 60: base.$primary-yellow-300,
50
+ 40: base.$primary-yellow-200,
51
+ 20: base.$primary-yellow-100,
52
+ 10: base.$primary-yellow-50,
53
+ 5: base.$primary-yellow-50,
54
+ 0: base.$primary-yellow-50
72
55
  ),
73
56
  info: (
74
- 160: base.$color-curious-blue-950,
75
- 140: base.$color-curious-blue-900,
76
- 130: base.$color-curious-blue-800,
77
- 120: base.$color-curious-blue-700,
78
- 110: base.$color-curious-blue-600,
79
- 100: base.$color-curious-blue-500,
80
- 80: base.$color-curious-blue-400,
81
- 60: base.$color-curious-blue-300,
82
- 40: base.$color-curious-blue-200,
83
- 20: base.$color-curious-blue-100,
84
- 10: base.$color-curious-blue-50,
85
- 5: base.$color-curious-blue-50,
86
- 0: base.$color-curious-blue-50
57
+ 160: base.$alert-info-950,
58
+ 140: base.$alert-info-900,
59
+ 130: base.$alert-info-800,
60
+ 120: base.$alert-info-700,
61
+ 110: base.$alert-info-600,
62
+ 100: base.$alert-info-500,
63
+ 80: base.$alert-info-400,
64
+ 60: base.$alert-info-300,
65
+ 40: base.$alert-info-200,
66
+ 20: base.$alert-info-100,
67
+ 10: base.$alert-info-50,
68
+ 5: base.$alert-info-50,
69
+ 0: base.$alert-info-50
87
70
  ),
88
71
  success: (
89
- 160: base.$color-fern-950,
90
- 140: base.$color-fern-900,
91
- 130: base.$color-fern-800,
92
- 120: base.$color-fern-700,
93
- 110: base.$color-fern-600,
94
- 100: base.$color-fern-500,
95
- 80: base.$color-fern-400,
96
- 60: base.$color-fern-300,
97
- 40: base.$color-fern-200,
98
- 20: base.$color-fern-100,
99
- 10: base.$color-fern-50,
100
- 5: base.$color-fern-50,
101
- 0: base.$color-fern-50
72
+ 160: base.$alert-success-950,
73
+ 140: base.$alert-success-900,
74
+ 130: base.$alert-success-800,
75
+ 120: base.$alert-success-700,
76
+ 110: base.$alert-success-600,
77
+ 100: base.$alert-success-500,
78
+ 80: base.$alert-success-400,
79
+ 60: base.$alert-success-300,
80
+ 40: base.$alert-success-200,
81
+ 20: base.$alert-success-100,
82
+ 10: base.$alert-success-50,
83
+ 5: base.$alert-success-50,
84
+ 0: base.$alert-success-50
102
85
  ),
103
86
  warning: (
104
- 160: base.$color-golden-grass-950,
105
- 140: base.$color-golden-grass-900,
106
- 130: base.$color-golden-grass-800,
107
- 120: base.$color-golden-grass-700,
108
- 110: base.$color-golden-grass-600,
109
- 100: base.$color-golden-grass-500,
110
- 80: base.$color-golden-grass-400,
111
- 60: base.$color-golden-grass-300,
112
- 40: base.$color-golden-grass-200,
113
- 20: base.$color-golden-grass-100,
114
- 10: base.$color-golden-grass-50,
115
- 5: base.$color-golden-grass-50,
116
- 0: base.$color-golden-grass-50
87
+ 160: base.$alert-warning-950,
88
+ 140: base.$alert-warning-900,
89
+ 130: base.$alert-warning-800,
90
+ 120: base.$alert-warning-700,
91
+ 110: base.$alert-warning-600,
92
+ 100: base.$alert-warning-500,
93
+ 80: base.$alert-warning-400,
94
+ 60: base.$alert-warning-300,
95
+ 40: base.$alert-warning-200,
96
+ 20: base.$alert-warning-100,
97
+ 10: base.$alert-warning-50,
98
+ 5: base.$alert-warning-50,
99
+ 0: base.$alert-warning-50
117
100
  ),
118
101
  danger: (
119
- 160: base.$color-coral-red-950,
120
- 140: base.$color-coral-red-900,
121
- 130: base.$color-coral-red-800,
122
- 120: base.$color-coral-red-700,
123
- 110: base.$color-coral-red-600,
124
- 100: base.$color-coral-red-500,
125
- 80: base.$color-coral-red-400,
126
- 60: base.$color-coral-red-300,
127
- 40: base.$color-coral-red-200,
128
- 20: base.$color-coral-red-100,
129
- 10: base.$color-coral-red-50,
130
- 5: base.$color-coral-red-50,
131
- 0: base.$color-coral-red-50
102
+ 160: base.$alert-error-950,
103
+ 140: base.$alert-error-900,
104
+ 130: base.$alert-error-800,
105
+ 120: base.$alert-error-700,
106
+ 110: base.$alert-error-600,
107
+ 100: base.$alert-error-500,
108
+ 80: base.$alert-error-400,
109
+ 60: base.$alert-error-300,
110
+ 40: base.$alert-error-200,
111
+ 20: base.$alert-error-100,
112
+ 10: base.$alert-error-50,
113
+ 5: base.$alert-error-50,
114
+ 0: base.$alert-error-50
132
115
  )
133
116
  );
@@ -2,4 +2,5 @@
2
2
 
3
3
  html.eui-t-ds2025 {
4
4
  --eui-c-bg: #fcfcfc;
5
+ --eui-c-text: var(--eui-bc-neutral-160); // bc-neutral-100 is too light for text
5
6
  }
@@ -1,7 +1,8 @@
1
1
  @use '../../02-tokens/base-maps/ds2025' as tokens;
2
2
 
3
- html.eui-t-ds2025 {
4
- @each $spacing, $value in tokens.$spacing-map {
5
- --eui-s-#{$spacing}: #{$value};
6
- }
7
- }
3
+ // temp disabling the spacings as it affects eUI too much everywhere
4
+ // html.eui-t-ds2025 {
5
+ // @each $spacing, $value in tokens.$spacing-map {
6
+ // --eui-s-#{$spacing}: #{$value};
7
+ // }
8
+ // }