@eui/eds-styles 22.0.0-alpha.42 → 22.0.0-alpha.43

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 (16) hide show
  1. package/dist/base/01-base/mixins.scss +4 -0
  2. package/dist/base/02-tokens/colors-semantic.scss +4 -0
  3. package/dist/base/02-tokens/typography-primitive.scss +15 -14
  4. package/dist/base/02-tokens/typography-semantic.scss +3 -149
  5. package/dist/base/03-vars/typography.scss +5 -3
  6. package/dist/base/04-elements/table.scss +2 -1
  7. package/dist/base/99-utilities/typography.scss +3 -0
  8. package/dist/eds-showcase-exports.css +1 -1
  9. package/dist/eds-showcase-exports.css.map +1 -1
  10. package/dist/eds-utilities.css +1 -1
  11. package/dist/eds-utilities.css.map +1 -1
  12. package/dist/eds-vars.css +1 -1
  13. package/dist/eds-vars.css.map +1 -1
  14. package/dist/eds.css +1 -1
  15. package/dist/eds.css.map +1 -1
  16. package/package.json +1 -1
package/dist/base/01-base/mixins.scss CHANGED
@@ -129,9 +129,12 @@ $default-feature: "min-width";
129
129
  --_eds-input-pad-v: var(--eds-sp-xs);
130
130
  --_eds-input-pad-h: var(--eds-sp-s);
131
131
  --_eds-input-font: var(--eds-f-paragraph-m);
132
+ --_eds-input-font-weight: var(--eds-f-w-regular);
132
133
  --_eds-input-placeholder-font: var(--eds-f-placeholder-m);
134
+ --_eds-input-placeholder-font-weight: var(--eds-f-w-light);
133
135
 
134
136
  font: var(--_eds-input-font);
137
+ font-weight: var(--_eds-input-font-weight);
135
138
  appearance: none;
136
139
  background-color: var(--eds-c-surface-elevation);
137
140
  border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
@@ -150,6 +153,7 @@ $default-feature: "min-width";
150
153
  &::placeholder {
151
154
  color: var(--eds-c-foreground-placeholder);
152
155
  font: var(--_eds-input-placeholder-font);
156
+ font-weight: var(--_eds-input-placeholder-font-weight);
153
157
  opacity: 1;
154
158
  }
155
159
 
package/dist/base/02-tokens/colors-semantic.scss CHANGED
@@ -73,6 +73,10 @@ $color-semantic-map: (
73
73
 
74
74
  surface-inverted: map.get(primitive.$color-map, 'silver-fog-950'),
75
75
  on-surface-inverted: map.get(primitive.$color-map, 'silver-fog-0'),
76
+ surface-inverted--hover: map.get(primitive.$color-map, 'silver-fog-800'),
77
+ on-surface-inverted--hover: map.get(primitive.$color-map, 'silver-fog-0'),
78
+ surface-inverted--pressed: map.get(primitive.$color-map, 'silver-fog-700'),
79
+ on-surface-inverted--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
76
80
  surface-inverted-subtle: map.get(primitive.$color-map, 'silver-fog-950'),
77
81
  on-surface-inverted-subtle: map.get(primitive.$color-map, 'silver-fog-300'),
78
82
  surface-inverted-disabled: map.get(primitive.$color-map, 'silver-fog-950'),
package/dist/base/02-tokens/typography-primitive.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use 'sass:map';
1
2
  @use './ecl/primitives/typography' as ecl-typography;
2
3
 
3
4
  // PRIMITIVE TYPOGRAPHY MAPS
@@ -19,20 +20,20 @@ $font-weight-map: ecl-typography.$font-weight;
19
20
 
20
21
  // semantic font-size link to letter-spacing map
21
22
  $font-size-letter-spacing-map: (
22
- '9xl': -2%,
23
- '8xl': -2%,
24
- '7xl': -2%,
25
- '6xl': -1%,
26
- '5xl': -1%,
27
- '4xl': -1%,
28
- '3xl': -1%,
29
- '2xl': normal,
30
- 'xl': normal,
31
- 'l': normal,
32
- 'm': normal,
33
- 's': normal,
34
- 'xs': normal,
35
- '2xs': normal
23
+ '9xl': map.get(ecl-typography.$letter-spacing, 'neg-s'),
24
+ '8xl': map.get(ecl-typography.$letter-spacing, 'neg-s'),
25
+ '7xl': map.get(ecl-typography.$letter-spacing, 'neg-s'),
26
+ '6xl': map.get(ecl-typography.$letter-spacing, 'neg-xs'),
27
+ '5xl': map.get(ecl-typography.$letter-spacing, 'neg-xs'),
28
+ '4xl': map.get(ecl-typography.$letter-spacing, 'neg-xs'),
29
+ '3xl': map.get(ecl-typography.$letter-spacing, 'neg-xs'),
30
+ '2xl': map.get(ecl-typography.$letter-spacing, 'default'),
31
+ 'xl': map.get(ecl-typography.$letter-spacing, 'default'),
32
+ 'l': map.get(ecl-typography.$letter-spacing, 'default'),
33
+ 'm': map.get(ecl-typography.$letter-spacing, 'default'),
34
+ 's': map.get(ecl-typography.$letter-spacing, 'default'),
35
+ 'xs': map.get(ecl-typography.$letter-spacing, 'default'),
36
+ '2xs': map.get(ecl-typography.$letter-spacing, 'default')
36
37
  );
37
38
 
38
39
 
package/dist/base/02-tokens/typography-semantic.scss CHANGED
@@ -1,149 +1,3 @@
1
- $typography-semantic-map: (
2
- desktop: (
3
- display: (
4
- xl: ( size: 9xl, line-height: 10xl, weight: regular ),
5
- l: ( size: 8xl, line-height: 9xl, weight: semibold ),
6
- ),
7
- heading: (
8
- 2xl: ( size: 6xl, line-height: 6xl, weight: semibold ),
9
- xl: ( size: 5xl, line-height: 4xl, weight: semibold ),
10
- l: ( size: 4xl, line-height: 2xl, weight: semibold ),
11
- m: ( size: 3xl, line-height: xl, weight: semibold ),
12
- s: ( size: xl, line-height: l, weight: semibold ),
13
- s-medium: ( size: xl, line-height: l, weight: medium ),
14
- xs: ( size: l, line-height: l, weight: bold ),
15
- ),
16
- paragraph: (
17
- xl: ( size: 3xl, line-height: 2xl, weight: regular ),
18
- l: ( size: l, line-height: l, weight: regular ),
19
- l-semibold: ( size: l, line-height: l, weight: semibold ),
20
- l-bold: ( size: l, line-height: l, weight: bold ),
21
- m: ( size: m, line-height: m, weight: regular ),
22
- m-semibold: ( size: m, line-height: m, weight: semibold ),
23
- m-bold: ( size: m, line-height: m, weight: bold ),
24
- s: ( size: s, line-height: s, weight: regular ),
25
- s-semibold: ( size: s, line-height: s, weight: semibold ),
26
- s-bold: ( size: s, line-height: s, weight: bold ),
27
- ),
28
- label: (
29
- l: ( size: l, line-height: l, weight: regular ),
30
- l-medium: ( size: l, line-height: l, weight: medium ),
31
- l-semibold: ( size: l, line-height: l, weight: semibold ),
32
- m: ( size: m, line-height: m, weight: regular ),
33
- m-medium: ( size: m, line-height: m, weight: medium ),
34
- m-semibold: ( size: m, line-height: m, weight: semibold ),
35
- s: ( size: s, line-height: s, weight: regular ),
36
- s-medium: ( size: s, line-height: s, weight: medium ),
37
- ),
38
- microcopy: (
39
- m: ( size: xs, line-height: xs, weight: regular ),
40
- m-semibold: ( size: xs, line-height: xs, weight: semibold ),
41
- ),
42
- placeholder: (
43
- m: ( size: m, line-height: m, weight: light ),
44
- s: ( size: s, line-height: s, weight: light ),
45
- ),
46
- supportive: (
47
- m: ( size: 2xs, line-height: 2xs, weight: regular ),
48
- m-medium: ( size: 2xs, line-height: 2xs, weight: medium ),
49
- ),
50
- ),
51
- tablet: (
52
- display: (
53
- xl: ( size: 8xl, line-height: 9xl, weight: regular ),
54
- l: ( size: 7xl, line-height: 6xl, weight: semibold ),
55
- ),
56
- heading: (
57
- 2xl: ( size: 5xl, line-height: 4xl, weight: semibold ),
58
- xl: ( size: 4xl, line-height: 2xl, weight: semibold ),
59
- l: ( size: 2xl, line-height: l, weight: semibold ),
60
- m: ( size: xl, line-height: l, weight: semibold ),
61
- s: ( size: l, line-height: m, weight: semibold ),
62
- s-medium: ( size: l, line-height: m, weight: medium ),
63
- xs: ( size: m, line-height: m, weight: bold ),
64
- ),
65
- paragraph: (
66
- xl: ( size: 2xl, line-height: xl, weight: regular ),
67
- l: ( size: l, line-height: l, weight: regular ),
68
- l-semibold: ( size: l, line-height: l, weight: semibold ),
69
- l-bold: ( size: l, line-height: l, weight: bold ),
70
- m: ( size: m, line-height: m, weight: regular ),
71
- m-semibold: ( size: m, line-height: m, weight: semibold ),
72
- m-bold: ( size: m, line-height: m, weight: bold ),
73
- s: ( size: s, line-height: s, weight: regular ),
74
- s-semibold: ( size: s, line-height: s, weight: semibold ),
75
- s-bold: ( size: s, line-height: s, weight: bold ),
76
- ),
77
- label: (
78
- l: ( size: l, line-height: l, weight: regular ),
79
- l-medium: ( size: l, line-height: l, weight: medium ),
80
- l-semibold: ( size: l, line-height: l, weight: semibold ),
81
- m: ( size: m, line-height: m, weight: regular ),
82
- m-medium: ( size: m, line-height: m, weight: medium ),
83
- m-semibold: ( size: m, line-height: m, weight: semibold ),
84
- s: ( size: s, line-height: s, weight: regular ),
85
- s-medium: ( size: s, line-height: s, weight: medium ),
86
- ),
87
- microcopy: (
88
- m: ( size: xs, line-height: xs, weight: regular ),
89
- m-semibold: ( size: xs, line-height: xs, weight: semibold ),
90
- ),
91
- placeholder: (
92
- m: ( size: m, line-height: m, weight: light ),
93
- s: ( size: s, line-height: s, weight: light ),
94
- ),
95
- supportive: (
96
- m: ( size: 2xs, line-height: 2xs, weight: regular ),
97
- m-medium: ( size: 2xs, line-height: 2xs, weight: medium ),
98
- ),
99
- ),
100
- mobile: (
101
- display: (
102
- xl: ( size: 6xl, line-height: 4xl, weight: regular ),
103
- l: ( size: 5xl, line-height: 2xl, weight: semibold ),
104
- ),
105
- heading: (
106
- 2xl: ( size: 4xl, line-height: 2xl, weight: semibold ),
107
- xl: ( size: 2xl, line-height: l, weight: semibold ),
108
- l: ( size: xl, line-height: m, weight: semibold ),
109
- m: ( size: l, line-height: m, weight: semibold ),
110
- s: ( size: m, line-height: m, weight: semibold ),
111
- s-medium: ( size: m, line-height: m, weight: medium ),
112
- xs: ( size: m, line-height: m, weight: bold ),
113
- ),
114
- paragraph: (
115
- xl: ( size: xl, line-height: l, weight: regular ),
116
- l: ( size: l, line-height: l, weight: regular ),
117
- l-semibold: ( size: l, line-height: l, weight: semibold ),
118
- l-bold: ( size: l, line-height: l, weight: bold ),
119
- m: ( size: m, line-height: m, weight: regular ),
120
- m-semibold: ( size: m, line-height: m, weight: semibold ),
121
- m-bold: ( size: m, line-height: m, weight: bold ),
122
- s: ( size: s, line-height: s, weight: regular ),
123
- s-semibold: ( size: s, line-height: s, weight: semibold ),
124
- s-bold: ( size: s, line-height: s, weight: bold ),
125
- ),
126
- label: (
127
- l: ( size: l, line-height: l, weight: regular ),
128
- l-medium: ( size: l, line-height: l, weight: medium ),
129
- l-semibold: ( size: l, line-height: l, weight: semibold ),
130
- m: ( size: m, line-height: m, weight: regular ),
131
- m-medium: ( size: m, line-height: m, weight: medium ),
132
- m-semibold: ( size: m, line-height: m, weight: semibold ),
133
- s: ( size: s, line-height: s, weight: regular ),
134
- s-medium: ( size: s, line-height: s, weight: medium ),
135
- ),
136
- microcopy: (
137
- m: ( size: xs, line-height: xs, weight: regular ),
138
- m-semibold: ( size: xs, line-height: xs, weight: semibold ),
139
- ),
140
- placeholder: (
141
- m: ( size: m, line-height: m, weight: light ),
142
- s: ( size: s, line-height: s, weight: light ),
143
- ),
144
- supportive: (
145
- m: ( size: 2xs, line-height: 2xs, weight: regular ),
146
- m-medium: ( size: 2xs, line-height: 2xs, weight: medium ),
147
- ),
148
- ),
149
- );
1
+ @use './ecl/semantic/typography' as ecl-typography;
2
+
3
+ $typography-semantic-map: ecl-typography.$typography;
package/dist/base/03-vars/typography.scss CHANGED
@@ -45,9 +45,11 @@
45
45
  }
46
46
 
47
47
  // EDS typography
48
+ // Weightless `font` shorthand: `font-size / line-height font-family`.
49
+ // Apply weight separately at the call site via `--eds-f-w-<weight>`.
48
50
  @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'desktop') {
49
51
  @each $size, $sizeDef in $typeDef {
50
- --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
52
+ --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
51
53
  }
52
54
  }
53
55
 
@@ -58,7 +60,7 @@
58
60
  $desktopSizeDef: map.get($desktopTypeDef, $size);
59
61
  // Only emit override if size or line-height differs from desktop
60
62
  @if map.get($sizeDef, 'size') != map.get($desktopSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($desktopSizeDef, 'line-height') {
61
- --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
63
+ --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
62
64
  }
63
65
  }
64
66
  }
@@ -71,7 +73,7 @@
71
73
  $tabletSizeDef: map.get($tabletTypeDef, $size);
72
74
  // Only emit override if size or line-height differs from tablet
73
75
  @if map.get($sizeDef, 'size') != map.get($tabletSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($tabletSizeDef, 'line-height') {
74
- --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
76
+ --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
75
77
  }
76
78
  }
77
79
  }
package/dist/base/04-elements/table.scss CHANGED
@@ -37,7 +37,8 @@
37
37
  color: var(--eds-c-foreground-default);
38
38
  padding: var(--eds-sp-m) var(--eds-sp-s);
39
39
  vertical-align: middle;
40
- font: var(--eds-f-label-m-semibold);
40
+ font: var(--eds-f-label-m);
41
+ font-weight: var(--eds-f-w-semibold);
41
42
  }
42
43
 
43
44
  tr {
package/dist/base/99-utilities/typography.scss CHANGED
@@ -16,6 +16,9 @@
16
16
  @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'desktop') {
17
17
  @each $size, $sizeDef in $typeDef {
18
18
  .eds-u-f-#{$type}-#{$size} {
19
+ // Size / line-height / letter-spacing only — NOT weight.
20
+ // `--eds-f-*` is a weightless shorthand; weight is applied separately
21
+ // (e.g. via `.eds-u-f-weight-*`).
19
22
  font: var(--eds-f-#{$type}-#{$size}) !important;
20
23
  letter-spacing: var(--eds-f-ls-#{map.get($sizeDef, 'size')}) !important;
21
24
  }