@brightspace-ui/core 3.127.5 → 3.128.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 (6) hide show
  1. package/components/list/list-item-mixin.js +8 -7
  2. package/components/typography/demo/typography.html +13 -0
  3. package/components/typography/styles.js +43 -9
  4. package/components/typography/typography.js +7 -0
  5. package/components/typography/typography.scss +52 -13
  6. package/package.json +1 -1
package/components/list/list-item-mixin.js CHANGED
@@ -4,7 +4,7 @@ import './list-item-generic-layout.js';
4
4
  import './list-item-placement-marker.js';
5
5
  import '../tooltip/tooltip.js';
6
6
  import '../expand-collapse/expand-collapse-content.js';
7
- import { css, html, nothing } from 'lit';
7
+ import { css, html, nothing, unsafeCSS } from 'lit';
8
8
  import { findComposedAncestor, getComposedParent } from '../../helpers/dom.js';
9
9
  import { interactiveElements, isInteractiveInComposedPath } from '../../helpers/interactive.js';
10
10
  import { classMap } from 'lit/directives/class-map.js';
@@ -40,6 +40,7 @@ function addTabListener() {
40
40
  }
41
41
 
42
42
  const listItemInteractiveFlag = getFlag('GAUD-7495-list-interactive-content', true);
43
+ const useNewStylesFlag = getFlag('GAUD-7495-list-item-new-styles', true);
43
44
 
44
45
  let hasDisplayedKeyboardTooltip = false;
45
46
 
@@ -147,7 +148,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
147
148
  margin-bottom: -1px;
148
149
  }
149
150
  :host([_has-nested-list-add-button]:not([selection-disabled]):not([skeleton])[selected]) [slot="before-content"] {
150
- border-bottom-color: #b6cbe8;
151
+ border-bottom-color: ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')}; /* stylelint-disable-line */
151
152
  }
152
153
  :host(:first-of-type) [slot="control-container"]::before {
153
154
  top: 0;
@@ -320,7 +321,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
320
321
  :host([_focusing-primary-action]) [slot="outside-control-container"],
321
322
  :host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection]) [slot="outside-control-container"],
322
323
  :host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"] {
323
- border-color: #b6cbe8; /* celestine alpha 0.3 */
324
+ border-color: ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')}; /* stylelint-disable-line */
324
325
  margin-bottom: -1px;
325
326
  }
326
327
  /* below hides the border under the d2l-button-add */
@@ -332,13 +333,13 @@ export const ListItemMixin = superclass => class extends composeMixins(
332
333
  :host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection]) [slot="outside-control-container"].hide-bottom-border,
333
334
  :host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"].hide-bottom-border {
334
335
  background-clip: content-box, border-box;
335
- background-image: linear-gradient(white, white), linear-gradient(to right, #b6cbe8 20%, transparent 20%, transparent 80%, #b6cbe8 80%);
336
+ background-image: linear-gradient(white, white), linear-gradient(to right, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 20%, transparent 20%, transparent 80%, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 80%); /* stylelint-disable-line */
336
337
  background-origin: border-box;
337
338
  border: double 1px transparent;
338
339
  border-radius: 6px;
339
340
  }
340
341
  :host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"].hide-bottom-border {
341
- background-image: linear-gradient(#f3fbff, #f3fbff), linear-gradient(to right, #b6cbe8 20%, transparent 20%, transparent 80%, #b6cbe8 80%);
342
+ background-image: linear-gradient(#f3fbff, #f3fbff), linear-gradient(to right, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 20%, transparent 20%, transparent 80%, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 80%); /* stylelint-disable-line */
342
343
  }
343
344
  :host([_hovering-control]) d2l-button-add,
344
345
  :host([_hovering-primary-action]) d2l-button-add,
@@ -346,7 +347,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
346
347
  :host([_focusing-primary-action]) d2l-button-add,
347
348
  :host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) d2l-button-add,
348
349
  :host(:not([selection-disabled]):not([skeleton])[selected]) d2l-button-add {
349
- --d2l-button-add-line-color: #b6cbe8; /* celestine alpha 0.3 */
350
+ --d2l-button-add-line-color: ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')}; /* stylelint-disable-line */
350
351
  }
351
352
  :host([_hovering-control]) [slot="outside-control-container"],
352
353
  :host([_hovering-primary-action]) [slot="outside-control-container"],
@@ -355,7 +356,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
355
356
  }
356
357
  :host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"] {
357
358
  background-color: #f3fbff;
358
- border-color: #b6cbe8; /* celestine alpha 0.3 */
359
+ border-color: ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')}; /* stylelint-disable-line */
359
360
  margin-bottom: -1px;
360
361
  }
361
362
 
package/components/typography/demo/typography.html CHANGED
@@ -74,6 +74,19 @@
74
74
  </div>
75
75
  </d2l-demo-snippet>
76
76
 
77
+ <h2>Noto Sans Thai</h2>
78
+
79
+ <div class="d2l-body-small">Showing a small selection of glyphs from Thai script known to require significantly different rendering characteristics from Latin script. For a detailed comparison, see the <a href="https://github.com/Brightspace/fonts-lib">fonts-lib</a>'s demo.</div>
80
+ <d2l-demo-snippet>
81
+ <div class="d2l-body-standard" style='font-family: "Noto Sans Thai", system-ui, Tahoma;'>
82
+ <p>Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
83
+ <p>ฯ ๆ ๎ ์ ็ ่ ้ ๊ ๋ ญ ฎ ฏ ฐ ํ ะ ั า ๅ ำ ิ ี ึ ื ุ ู เ แ โ ใ ไ พํุู่้</p>
84
+ <p style="font-weight: 700;">ฯ ๆ ๎ ์ ็ ่ ้ ๊ ๋ ญ ฎ ฏ ฐ ํ ะ ั า ๅ ำ ิ ี ึ ื ุ ู เ แ โ ใ ไ พํุู่้</p>
85
+ <p style="font-style: italic;">ฯ ๆ ๎ ์ ็ ่ ้ ๊ ๋ ญ ฎ ฏ ฐ ํ ะ ั า ๅ ำ ิ ี ึ ื ุ ู เ แ โ ใ ไ พํุู่้</p>
86
+ <p style="font-style: italic; font-weight: 700;">ฯ ๆ ๎ ์ ็ ่ ้ ๊ ๋ ญ ฎ ฏ ฐ ํ ะ ั า ๅ ำ ิ ี ึ ื ุ ู เ แ โ ใ ไ พํุู่้</p>
87
+ </div>
88
+ </d2l-demo-snippet>
89
+
77
90
  </d2l-demo-page>
78
91
 
79
92
  </body>
package/components/typography/styles.js CHANGED
@@ -314,10 +314,12 @@ export const _generateBlockquoteStyles = (selector) => {
314
314
 
315
315
  export const blockquoteStyles = _generateBlockquoteStyles('.d2l-blockquote');
316
316
 
317
- const importUrl = 'https://s.brightspace.com/lib/fonts/0.6.1/assets/';
317
+ const importUrl = 'https://s.brightspace.com/lib/fonts/0.6.4/assets/';
318
318
  const fonts = {
319
319
  LatoRegular: 'Lato-400',
320
320
  LatoBold: 'Lato-700',
321
+ NotoSansThaiRegular: 'NotoSansThai-Regular',
322
+ NotoSansThaiBold: 'NotoSansThai-Bold',
321
323
  BCSansLight: 'BCSans-Light',
322
324
  BCSansRegular: 'BCSans-Regular',
323
325
  BCSansBold: 'BCSans-Bold',
@@ -329,47 +331,79 @@ export const fontFacesCss = `@font-face {
329
331
  font-family: 'Lato';
330
332
  font-style: normal;
331
333
  font-weight: 400;
332
- src: url(${new URL(`${fonts.LatoRegular}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.LatoRegular}.woff`, importUrl)}) format('woff');
334
+ src:
335
+ url(${new URL(`${fonts.LatoRegular}.woff2`, importUrl)}) format('woff2'),
336
+ url(${new URL(`${fonts.LatoRegular}.woff`, importUrl)}) format('woff');
333
337
  }
334
338
  @font-face {
335
339
  font-family: 'Lato';
336
340
  font-style: normal;
337
341
  font-weight: 700;
338
- src: url(${new URL(`${fonts.LatoBold}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.LatoBold}.woff`, importUrl)}) format('woff');
342
+ src:
343
+ url(${new URL(`${fonts.LatoBold}.woff2`, importUrl)}) format('woff2'),
344
+ url(${new URL(`${fonts.LatoBold}.woff`, importUrl)}) format('woff');
345
+ }
346
+ @font-face {
347
+ font-family: 'Noto Sans Thai';
348
+ font-style: normal;
349
+ font-weight: 400;
350
+ src:
351
+ url(${new URL(`${fonts.NotoSansThaiRegular}.woff2`, importUrl)}) format('woff2'),
352
+ url(${new URL(`${fonts.NotoSansThaiRegular}.woff`, importUrl)}) format('woff');
353
+ }
354
+ @font-face {
355
+ font-family: 'Noto Sans Thai';
356
+ font-style: normal;
357
+ font-weight: 700;
358
+ src:
359
+ url(${new URL(`${fonts.NotoSansThaiBold}.woff2`, importUrl)}) format('woff2'),
360
+ url(${new URL(`${fonts.NotoSansThaiBold}.woff`, importUrl)}) format('woff');
339
361
  }
340
362
  @font-face {
341
363
  font-family: 'BC Sans';
342
364
  font-style: normal;
343
365
  font-weight: 300;
344
- src: url(${new URL(`${fonts.BCSansLight}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansLight}.woff`, importUrl)}) format('woff');
366
+ src:
367
+ url(${new URL(`${fonts.BCSansLight}.woff2`, importUrl)}) format('woff2'),
368
+ url(${new URL(`${fonts.BCSansLight}.woff`, importUrl)}) format('woff');
345
369
  }
346
370
  @font-face {
347
371
  font-family: 'BC Sans';
348
372
  font-style: normal;
349
373
  font-weight: 400;
350
- src: url(${new URL(`${fonts.BCSansRegular}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansRegular}.woff`, importUrl)}) format('woff');
374
+ src:
375
+ url(${new URL(`${fonts.BCSansRegular}.woff2`, importUrl)}) format('woff2'),
376
+ url(${new URL(`${fonts.BCSansRegular}.woff`, importUrl)}) format('woff');
351
377
  }
352
378
  @font-face {
353
379
  font-family: 'BC Sans';
354
380
  font-style: normal;
355
381
  font-weight: 700;
356
- src: url(${new URL(`${fonts.BCSansBold}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansBold}.woff`, importUrl)}) format('woff');
382
+ src:
383
+ url(${new URL(`${fonts.BCSansBold}.woff2`, importUrl)}) format('woff2'),
384
+ url(${new URL(`${fonts.BCSansBold}.woff`, importUrl)}) format('woff');
357
385
  }
358
386
  @font-face {
359
387
  font-family: 'BC Sans';
360
388
  font-style: italic;
361
389
  font-weight: 300;
362
- src: url(${new URL(`${fonts.BCSansLightItalic}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansLightItalic}.woff`, importUrl)}) format('woff');
390
+ src:
391
+ url(${new URL(`${fonts.BCSansLightItalic}.woff2`, importUrl)}) format('woff2'),
392
+ url(${new URL(`${fonts.BCSansLightItalic}.woff`, importUrl)}) format('woff');
363
393
  }
364
394
  @font-face {
365
395
  font-family: 'BC Sans';
366
396
  font-style: italic;
367
397
  font-weight: 400;
368
- src: url(${new URL(`${fonts.BCSansItalic}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansItalic}.woff`, importUrl)}) format('woff');
398
+ src:
399
+ url(${new URL(`${fonts.BCSansItalic}.woff2`, importUrl)}) format('woff2'),
400
+ url(${new URL(`${fonts.BCSansItalic}.woff`, importUrl)}) format('woff');
369
401
  }
370
402
  @font-face {
371
403
  font-family: 'BC Sans';
372
404
  font-style: italic;
373
405
  font-weight: 700;
374
- src: url(${new URL(`${fonts.BCSansBoldItalic}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansBoldItalic}.woff`, importUrl)}) format('woff');
406
+ src:
407
+ url(${new URL(`${fonts.BCSansBoldItalic}.woff2`, importUrl)}) format('woff2'),
408
+ url(${new URL(`${fonts.BCSansBoldItalic}.woff`, importUrl)}) format('woff');
375
409
  }`;
package/components/typography/typography.js CHANGED
@@ -78,6 +78,13 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
78
78
  font-family: 'Hiragino Kaku Gothic Pro', 'Meiyro', sans-serif;
79
79
  }
80
80
 
81
+ .d2l-typography:lang(th),
82
+ .d2l-typography :lang(th),
83
+ .d2l-typography:lang(tha),
84
+ .d2l-typography :lang(tha) {
85
+ font-family: 'Noto Sans Thai', system-ui, Tahoma;
86
+ }
87
+
81
88
  .d2l-typography .d2l-heading-1 {
82
89
  font-size: 2rem;
83
90
  font-weight: 400;
package/components/typography/typography.scss CHANGED
@@ -19,9 +19,9 @@
19
19
  font-family: "Segoe UI", "Geeza Pro", sans-serif;
20
20
  }
21
21
 
22
- &:lang(zh),
23
- & :lang(zh) {
24
- font-family: "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
22
+ &:lang(ja),
23
+ & :lang(ja) {
24
+ font-family: "Hiragino Kaku Gothic Pro", "Meiyro", sans-serif;
25
25
  }
26
26
 
27
27
  &:lang(ko),
@@ -29,11 +29,18 @@
29
29
  font-family: "Apple SD Gothic Neo", Dotum, sans-serif;
30
30
  }
31
31
 
32
- &:lang(ja),
33
- & :lang(ja) {
32
+ &:lang(th),
33
+ & :lang(th),
34
+ &:lang(tha),
35
+ & :lang(tha) {
34
36
  font-family: "Hiragino Kaku Gothic Pro", "Meiyro", sans-serif;
35
37
  }
36
38
 
39
+ &:lang(zh),
40
+ & :lang(zh) {
41
+ font-family: "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
42
+ }
43
+
37
44
  }
38
45
 
39
46
  @mixin d2l-typography-font-face {
@@ -41,49 +48,81 @@
41
48
  font-family: "Lato";
42
49
  font-style: normal;
43
50
  font-weight: 400;
44
- src: url(https://s.brightspace.com/lib/fonts/0.6.1/assets/Lato-400.woff2) format("woff2"), url(https://s.brightspace.com/lib/fonts/0.6.1/assets/Lato-400.woff) format("woff");
51
+ src:
52
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/Lato-400.woff2) format("woff2"),
53
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/Lato-400.woff) format("woff");
45
54
  }
46
55
  @font-face {
47
56
  font-family: "Lato";
48
57
  font-style: normal;
49
58
  font-weight: 700;
50
- src: url(https://s.brightspace.com/lib/fonts/0.6.1/assets/Lato-700.woff2) format("woff2"), url(https://s.brightspace.com/lib/fonts/0.6.1/assets/Lato-700.woff) format("woff");
59
+ src:
60
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/Lato-700.woff2) format("woff2"),
61
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/Lato-700.woff) format("woff");
62
+ }
63
+ @font-face {
64
+ font-family: 'Noto Sans Thai';
65
+ font-style: normal;
66
+ font-weight: 400;
67
+ src:
68
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/NotoSansThai-Regular.woff2) format('woff2'),
69
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/NotoSansThai-Regular.woff) format('woff');
70
+ }
71
+ @font-face {
72
+ font-family: 'Noto Sans Thai';
73
+ font-style: normal;
74
+ font-weight: 700;
75
+ src:
76
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/NotoSansThai-Bold.woff2) format('woff2'),
77
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/NotoSansThai-Bold.woff) format('woff');
51
78
  }
52
79
  @font-face {
53
80
  font-family: "BC Sans";
54
81
  font-style: normal;
55
82
  font-weight: 300;
56
- src: url(https://s.brightspace.com/lib/fonts/0.6.1/assets/BCSans-Light.woff2) format("woff2"), url(https://s.brightspace.com/lib/fonts/0.6.1/assets/BCSans-Light.woff) format("woff");
83
+ src:
84
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Light.woff2) format("woff2"),
85
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Light.woff) format("woff");
57
86
  }
58
87
  @font-face {
59
88
  font-family: "BC Sans";
60
89
  font-style: normal;
61
90
  font-weight: 400;
62
- src: url(https://s.brightspace.com/lib/fonts/0.6.1/assets/BCSans-Regular.woff2) format("woff2"), url(https://s.brightspace.com/lib/fonts/0.6.1/assets/BCSans-Regular.woff) format("woff");
91
+ src:
92
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Regular.woff2) format("woff2"),
93
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Regular.woff) format("woff");
63
94
  }
64
95
  @font-face {
65
96
  font-family: "BC Sans";
66
97
  font-style: normal;
67
98
  font-weight: 700;
68
- src: url(https://s.brightspace.com/lib/fonts/0.6.1/assets/BCSans-Bold.woff2) format("woff2"), url(https://s.brightspace.com/lib/fonts/0.6.1/assets/BCSans-Bold.woff) format("woff");
99
+ src:
100
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Bold.woff2) format("woff2"),
101
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Bold.woff) format("woff");
69
102
  }
70
103
  @font-face {
71
104
  font-family: "BC Sans";
72
105
  font-style: italic;
73
106
  font-weight: 300;
74
- src: url(https://s.brightspace.com/lib/fonts/0.6.1/assets/BCSans-LightItalic.woff2) format("woff2"), url(https://s.brightspace.com/lib/fonts/0.6.1/assets/BCSans-LightItalic.woff) format("woff");
107
+ src:
108
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-LightItalic.woff2) format("woff2"),
109
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-LightItalic.woff) format("woff");
75
110
  }
76
111
  @font-face {
77
112
  font-family: "BC Sans";
78
113
  font-style: italic;
79
114
  font-weight: 400;
80
- src: url(https://s.brightspace.com/lib/fonts/0.6.1/assets/BCSans-Italic.woff2) format("woff2"), url(https://s.brightspace.com/lib/fonts/0.6.1/assets/BCSans-Italic.woff) format("woff");
115
+ src:
116
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Italic.woff2) format("woff2"),
117
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Italic.woff) format("woff");
81
118
  }
82
119
  @font-face {
83
120
  font-family: "BC Sans";
84
121
  font-style: italic;
85
122
  font-weight: 700;
86
- src: url(https://s.brightspace.com/lib/fonts/0.6.1/assets/BCSans-BoldItalic.woff2) format("woff2"), url(https://s.brightspace.com/lib/fonts/0.6.1/assets/BCSans-BoldItalic.woff) format("woff");
123
+ src:
124
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-BoldItalic.woff2) format("woff2"),
125
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-BoldItalic.woff) format("woff");
87
126
  }
88
127
  }
89
128
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.127.5",
3
+ "version": "3.128.0",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",