@eui/styles 19.3.10-snapshot-1764611477507 → 19.3.10-snapshot-1764750641934

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 (3) hide show
  1. package/dist/base/02-tokens/maps-eds-theme.scss +2 -1
  2. package/dist/base/03-vars/vars-eds-theme.scss +31 -27
  3. package/package.json +1 -1
package/dist/base/02-tokens/maps-eds-theme.scss CHANGED
@@ -56,7 +56,8 @@ $fhd: base.new-breakpoint(min-width map.get($breakpoint-map, 'fhd') max-width ma
56
56
 
57
57
  // human naming
58
58
  $eui-bkp-mobile-xs: $xs !default;
59
- $eui-bkp-mobile: $s !default;
59
+ $eui-bkp-mobile-s: $s !default;
60
+ $eui-bkp-mobile: base.new-breakpoint(max-width map.get($breakpoint-map, 'md') - 1) !default;
60
61
  $eui-bkp-mobile-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'md')) !default;
61
62
  $eui-bkp-tablet: $m !default;
62
63
  $eui-bkp-tablet-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg')) !default;
package/dist/base/03-vars/vars-eds-theme.scss CHANGED
@@ -168,58 +168,62 @@
168
168
  --eui-f-semi-bold: var(--eui-f-m-semi-bold);
169
169
  --eui-f-bold: var(--eui-f-m-bold);
170
170
 
171
+ @each $size, $def in maps.$font-size-map {
172
+ --eui-f-s-r-#{$size}: #{$def};
173
+ }
174
+
171
175
  @each $size, $sizeDef in maps.$font-map {
172
176
  $desktop: map.get($sizeDef, 'desktop');
173
- --eui-f-#{$size}-light: normal normal var(--eui-f-weight-light) var(--eui-f-size-#{map.get($desktop, 'font-size')})/var(--eui-f-line-height-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
174
- --eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{map.get($desktop, 'font-size')})/var(--eui-f-line-height-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
175
- --eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{map.get($desktop, 'font-size')})/var(--eui-f-line-height-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
176
- --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{map.get($desktop, 'font-size')})/var(--eui-f-line-height-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
177
- --eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{map.get($desktop, 'font-size')})/var(--eui-f-line-height-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
177
+ --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-r-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
178
+ --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-r-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
179
+ --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-r-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
180
+ --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-r-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
181
+ --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-r-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
182
+ --eui-f-s-#{$size}: var(--eui-f-s-r-#{map.get($desktop, 'font-size')});
178
183
  }
179
184
 
180
185
  @include base.media(maps.$eui-bkp-tablet) {
181
186
  @each $size, $sizeDef in maps.$font-map {
182
187
  $tablet: map.get($sizeDef, 'tablet');
183
- --eui-f-#{$size}-light: normal normal var(--eui-f-weight-light) var(--eui-f-size-#{map.get($tablet, 'font-size')})/var(--eui-f-line-height-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
184
- --eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{map.get($tablet, 'font-size')})/var(--eui-f-line-height-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
185
- --eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{map.get($tablet, 'font-size')})/var(--eui-f-line-height-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
186
- --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{map.get($tablet, 'font-size')})/var(--eui-f-line-height-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
187
- --eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{map.get($tablet, 'font-size')})/var(--eui-f-line-height-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
188
+ --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-r-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
189
+ --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-r-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
190
+ --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-r-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
191
+ --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-r-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
192
+ --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-r-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
193
+ --eui-f-s-#{$size}: var(--eui-f-s-r-#{map.get($tablet, 'font-size')});
188
194
  }
189
195
  }
190
196
 
191
- @include base.media(maps.$eui-bkp-mobile) {
197
+ @include base.media(maps.$eui-bkp-mobile-s) {
192
198
  @each $size, $sizeDef in maps.$font-map {
193
199
  $mobile: map.get($sizeDef, 'mobile');
194
- --eui-f-#{$size}-light: normal normal var(--eui-f-weight-light) var(--eui-f-size-#{map.get($mobile, 'font-size')})/var(--eui-f-line-height-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
195
- --eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{map.get($mobile, 'font-size')})/var(--eui-f-line-height-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
196
- --eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{map.get($mobile, 'font-size')})/var(--eui-f-line-height-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
197
- --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{map.get($mobile, 'font-size')})/var(--eui-f-line-height-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
198
- --eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{map.get($mobile, 'font-size')})/var(--eui-f-line-height-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
200
+ --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-r-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
201
+ --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-r-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
202
+ --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-r-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
203
+ --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-r-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
204
+ --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-r-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
205
+ --eui-f-s-#{$size}: var(--eui-f-s-r-#{map.get($mobile, 'font-size')});
199
206
  }
200
207
  }
201
208
 
202
209
  @include base.media(maps.$eui-bkp-mobile-xs) {
203
210
  @each $size, $sizeDef in maps.$font-map {
204
211
  $mobilexs: map.get($sizeDef, 'mobile-xs');
205
- --eui-f-#{$size}-light: normal normal var(--eui-f-weight-light) var(--eui-f-size-#{map.get($mobilexs, 'font-size')})/var(--eui-f-line-height-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
206
- --eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{map.get($mobilexs, 'font-size')})/var(--eui-f-line-height-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
207
- --eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{map.get($mobilexs, 'font-size')})/var(--eui-f-line-height-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
208
- --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{map.get($mobilexs, 'font-size')})/var(--eui-f-line-height-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
209
- --eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{map.get($mobilexs, 'font-size')})/var(--eui-f-line-height-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
212
+ --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-r-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
213
+ --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-r-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
214
+ --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-r-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
215
+ --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-r-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
216
+ --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-r-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
217
+ --eui-f-s-#{$size}: var(--eui-f-s-r-#{map.get($mobilexs, 'font-size')});
210
218
  }
211
219
  }
212
220
 
213
- @each $size, $def in maps.$font-size-map {
214
- --eui-f-size-#{$size}: #{$def};
215
- }
216
-
217
221
  @each $size, $def in maps.$font-line-height-map {
218
- --eui-f-line-height-#{$size}: #{$def};
222
+ --eui-f-lh-#{$size}: #{$def};
219
223
  }
220
224
 
221
225
  @each $size, $def in maps.$font-weight-map {
222
- --eui-f-weight-#{$size}: #{$def};
226
+ --eui-f-w-#{$size}: #{$def};
223
227
  }
224
228
 
225
229
 
package/package.json CHANGED
@@ -17,7 +17,7 @@
17
17
  "yarn": ">=1.22.4 <2"
18
18
  },
19
19
  "license": "EUPL-1.1",
20
- "version": "19.3.10-snapshot-1764611477507",
20
+ "version": "19.3.10-snapshot-1764750641934",
21
21
  "tag": "snapshot",
22
22
  "dependencies": {},
23
23
  "resolutions": {}