@brightspace-ui/core 2.8.0 → 2.9.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/components/button/button-icon.js +3 -3
  2. package/components/button/floating-buttons.js +1 -1
  3. package/components/card/demo/card.html +1 -1
  4. package/components/colors/colors.js +5 -5
  5. package/components/colors/colors.scss +5 -5
  6. package/components/colors/screenshots/basic-greys.png +0 -0
  7. package/components/dropdown/dropdown-content-styles.js +4 -4
  8. package/components/html-block/html-block.js +1 -1
  9. package/components/icons/README.md +1 -1
  10. package/components/icons/icon-styles.js +1 -1
  11. package/components/icons/images/tier2/check-box-unchecked.svg +1 -1
  12. package/components/icons/images/tier2/check-box.svg +1 -1
  13. package/components/inputs/input-select-styles.js +1 -1
  14. package/components/inputs/input-styles.js +1 -1
  15. package/components/inputs/sass/select.scss +1 -1
  16. package/components/inputs/sass/text.scss +1 -1
  17. package/components/menu/menu.js +3 -3
  18. package/components/status-indicator/status-indicator.js +3 -3
  19. package/generated/icons/tier2/check-box-unchecked.js +1 -1
  20. package/generated/icons/tier2/check-box.js +1 -1
  21. package/package.json +1 -1
  22. package/templates/primary-secondary/primary-secondary.js +1 -1
package/components/button/button-icon.js CHANGED
@@ -60,7 +60,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
60
60
  --d2l-button-icon-min-height: calc(2rem + 2px);
61
61
  --d2l-button-icon-min-width: calc(2rem + 2px);
62
62
  --d2l-button-icon-h-align: calc(((2rem + 2px - 0.9rem) / 2) * -1);
63
- --d2l-icon-fill-color: var(--d2l-button-icon-fill-color, var(--d2l-color-ferrite));
63
+ --d2l-icon-fill-color: var(--d2l-button-icon-fill-color, var(--d2l-color-tungsten));
64
64
  display: inline-block;
65
65
  }
66
66
  :host([hidden]) {
@@ -75,7 +75,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
75
75
  }
76
76
  :host([theme="dark"]) {
77
77
  --d2l-button-icon-background-color: transparent;
78
- --d2l-button-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* ferrite @70% @90% */
78
+ --d2l-button-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
79
79
  --d2l-button-icon-focus-box-shadow: 0 0 0 2px black, 0 0 0 4px var(--d2l-color-celestine-plus-1);
80
80
  --d2l-icon-fill-color: var(--d2l-color-sylvite);
81
81
  --d2l-button-icon-fill-color-hover: var(--d2l-color-sylvite);
@@ -112,7 +112,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
112
112
  button:hover,
113
113
  button:focus,
114
114
  :host([active]) button {
115
- --d2l-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-color-ferrite));
115
+ --d2l-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-color-tungsten));
116
116
  background-color: var(--d2l-button-icon-background-color-hover);
117
117
  }
118
118
  button.focus-visible {
package/components/button/floating-buttons.js CHANGED
@@ -61,7 +61,7 @@ class FloatingButtons extends RtlMixin(LitElement) {
61
61
  background-color: #ffffff;
62
62
  background-color: rgba(255, 255, 255, 0.88);
63
63
  border-top-color: var(--d2l-color-mica);
64
- box-shadow: 0 -2px 4px rgba(73, 76, 78, 0.2); /* ferrite */
64
+ box-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */
65
65
  }
66
66
 
67
67
  :host([_floating]:not([always-float])) .d2l-floating-buttons-container {
package/components/card/demo/card.html CHANGED
@@ -31,7 +31,7 @@
31
31
  }
32
32
  .badge > img {
33
33
  background-color: white;
34
- border: 1px solid #494c4e;
34
+ border: 1px solid #202122; /* ferrite */
35
35
  border-radius: 6px;
36
36
  height: 70px;
37
37
  object-fit: cover;
package/components/colors/colors.js CHANGED
@@ -8,11 +8,11 @@ if (!document.head.querySelector('#d2l-colors')) {
8
8
  --d2l-color-sylvite: #f1f5fb;
9
9
  --d2l-color-gypsum: #e3e9f1;
10
10
  --d2l-color-mica: #cdd5dc;
11
- --d2l-color-corundum: #b5bdc2;
12
- --d2l-color-chromite: #9ea5a9;
13
- --d2l-color-galena: #868c8f;
14
- --d2l-color-tungsten: #6e7376;
15
- --d2l-color-ferrite: #494c4e;
11
+ --d2l-color-corundum: #b1b9be;
12
+ --d2l-color-chromite: #90989d;
13
+ --d2l-color-galena: #6e7477;
14
+ --d2l-color-tungsten: #494c4e;
15
+ --d2l-color-ferrite: #202122;
16
16
 
17
17
  /* zircon */
18
18
  --d2l-color-zircon-plus-2: #e0feff;
package/components/colors/colors.scss CHANGED
@@ -3,11 +3,11 @@ $d2l-color-regolith: #f9fbff !default;
3
3
  $d2l-color-sylvite: #f1f5fb !default;
4
4
  $d2l-color-gypsum: #e3e9f1 !default;
5
5
  $d2l-color-mica: #cdd5dc !default;
6
- $d2l-color-corundum: #b5bdc2 !default;
7
- $d2l-color-chromite: #9ea5a9 !default;
8
- $d2l-color-galena: #868c8f !default;
9
- $d2l-color-tungsten: #6e7376 !default;
10
- $d2l-color-ferrite: #494c4e !default;
6
+ $d2l-color-corundum: #b1b9be !default;
7
+ $d2l-color-chromite: #90989d !default;
8
+ $d2l-color-galena: #6e7477 !default;
9
+ $d2l-color-tungsten: #494c4e !default;
10
+ $d2l-color-ferrite: #202122 !default;
11
11
 
12
12
  // zircon
13
13
  $d2l-color-zircon-plus-2: #e0feff !default;
package/components/dropdown/dropdown-content-styles.js CHANGED
@@ -24,8 +24,8 @@ export const dropdownContentStyles = css`
24
24
  :host([theme="dark"]) {
25
25
  --d2l-dropdown-above-animation-name: d2l-dropdown-above-animation-dark;
26
26
  --d2l-dropdown-animation-name: d2l-dropdown-animation-dark;
27
- --d2l-dropdown-background-color: #333536; /* ferrite @ 70% */
28
- --d2l-dropdown-border-color: var(--d2l-color-ferrite);
27
+ --d2l-dropdown-background-color: #333536; /* tungsten @ 70% */
28
+ --d2l-dropdown-border-color: var(--d2l-color-tungsten);
29
29
  --d2l-dropdown-foreground-color: var(--d2l-color-sylvite);
30
30
  --d2l-dropdown-shadow-color: rgba(0, 0, 0, 1);
31
31
  opacity: 0.9;
@@ -66,7 +66,7 @@ export const dropdownContentStyles = css`
66
66
  background-color: var(--d2l-dropdown-background-color);
67
67
  border: 1px solid var(--d2l-dropdown-border-color);
68
68
  border-radius: 0.1rem;
69
- box-shadow: -4px -4px 12px -5px rgba(73, 76, 78, 0.2); /* ferrite */
69
+ box-shadow: -4px -4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
70
70
  height: 16px;
71
71
  -webkit-transform: rotate(45deg);
72
72
  transform: rotate(45deg);
@@ -80,7 +80,7 @@ export const dropdownContentStyles = css`
80
80
  }
81
81
 
82
82
  :host([opened-above]) .d2l-dropdown-content-pointer > div {
83
- box-shadow: 4px 4px 12px -5px rgba(73, 76, 78, 0.2); /* ferrite */
83
+ box-shadow: 4px 4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
84
84
  }
85
85
 
86
86
  :host([no-pointer]) .d2l-dropdown-content-pointer {
package/components/html-block/html-block.js CHANGED
@@ -96,7 +96,7 @@ export const htmlBlockContentStyles = css`
96
96
  a:visited,
97
97
  a:link,
98
98
  a:active {
99
- color: var(--d2l-color-ferrite, #494c4e);
99
+ color: var(--d2l-color-ferrite, #202122);
100
100
  }
101
101
  }
102
102
  mjx-assistive-mml math {
package/components/icons/README.md CHANGED
@@ -80,7 +80,7 @@ When contributing changes to icons, the SVG files should be properly formatted.
80
80
  - not contain negative values
81
81
  - there should be no `<title>` element
82
82
  - there should be no inline `<style>` -- all style for line fills should be applied directly to the SVG elements
83
- - color of SVG elements should be "ferrite" (`#494c4e`)
83
+ - color of SVG elements should be "tungsten" (`#494c4e`)
84
84
 
85
85
  The best way to have most of these rules applied for you automatically is to put the icon through [SVGOMG](https://jakearchibald.github.io/svgomg/) with these options selected:
86
86
  * `Prettify code` - ON
package/components/icons/icon-styles.js CHANGED
@@ -5,7 +5,7 @@ export const iconStyles = css`
5
5
  :host {
6
6
  -webkit-align-items: center;
7
7
  align-items: center;
8
- color: var(--d2l-color-ferrite);
8
+ color: var(--d2l-color-tungsten);
9
9
  display: -ms-inline-flexbox;
10
10
  display: -webkit-inline-flex;
11
11
  display: inline-flex;
package/components/icons/images/tier2/check-box-unchecked.svg CHANGED
@@ -1,3 +1,3 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
- <rect fill="#f9fbff" stroke-width="1" stroke="#868c8f" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
2
+ <rect fill="#f9fbff" stroke-width="1" stroke="#6e7477" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
3
3
  </svg>
package/components/icons/images/tier2/check-box.svg CHANGED
@@ -1,4 +1,4 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
- <rect fill="#f9fbff" stroke-width="1" stroke="#868c8f" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
2
+ <rect fill="#f9fbff" stroke-width="1" stroke="#6e7477" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
3
3
  <path fill="#494c4e" d="M19.707,7.293a1,1,0,0,0-1.414,0L10,15.586,6.707,12.293a1,1,0,0,0-1.414,1.414l4,4a1,1,0,0,0,1.414,0l9-9A1,1,0,0,0,19.707,7.293Z"/>
4
4
  </svg>
package/components/inputs/input-select-styles.js CHANGED
@@ -33,7 +33,7 @@ export const selectStyles = css`
33
33
  background-color: #ffffff;
34
34
  border-color: var(--d2l-color-galena);
35
35
  border-width: 1px;
36
- box-shadow: inset 0 2px 0 0 rgba(181, 189, 194, 0.2); /* corundum */
36
+ box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
37
37
  padding: 0.4rem 0.75rem;
38
38
  }
39
39
  .d2l-input-select,
package/components/inputs/input-styles.js CHANGED
@@ -6,7 +6,7 @@ export const inputStyles = css`
6
6
  background-color: var(--d2l-input-background-color, #ffffff);
7
7
  border-radius: var(--d2l-input-border-radius, 0.3rem);
8
8
  border-style: solid;
9
- box-shadow: inset 0 2px 0 0 rgba(181, 189, 194, 0.2); /* corundum */
9
+ box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
10
10
  box-sizing: border-box;
11
11
  color: var(--d2l-color-ferrite);
12
12
  display: inline-block;
package/components/inputs/sass/select.scss CHANGED
@@ -27,7 +27,7 @@
27
27
  background-color: #ffffff;
28
28
  border-color: $d2l-color-galena;
29
29
  border-width: 1px;
30
- box-shadow: inset 0 2px 0 0 rgba(181, 189, 194, .2); /* corundum */
30
+ box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
31
31
  padding: 0.4rem 0.75rem;
32
32
  }
33
33
  &,
package/components/inputs/sass/text.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  border-radius: 0.3rem;
11
11
  border-style: solid;
12
12
  border-width: 1px;
13
- box-shadow: inset 0 2px 0 0 rgba(181, 189, 194, .2), /* corundum */;
13
+ box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2), /* corundum */;
14
14
  box-sizing: border-box;
15
15
  color: $d2l-color-ferrite;
16
16
  display: inline-block;
package/components/menu/menu.js CHANGED
@@ -65,12 +65,12 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
65
65
  }
66
66
 
67
67
  :host([theme="dark"]) {
68
- --d2l-menu-background-color: #333536; /* ferrite @ 70% */
68
+ --d2l-menu-background-color: #333536; /* tungsten @ 70% */
69
69
  --d2l-menu-background-color-hover: #123559; /* celestine-1 @ 50% */
70
- --d2l-menu-border-color: var(--d2l-color-ferrite);
70
+ --d2l-menu-border-color: var(--d2l-color-tungsten);
71
71
  --d2l-menu-foreground-color: var(--d2l-color-sylvite);
72
72
  --d2l-menu-foreground-color-hover: #ffffff;
73
- --d2l-menu-separator-color: var(--d2l-color-tungsten);
73
+ --d2l-menu-separator-color: var(--d2l-color-galena);
74
74
  --d2l-icon-fill-color: var(--d2l-color-mica);
75
75
  background-color: var(--d2l-menu-background-color); /* so that opacity on disabled items works */
76
76
  }
package/components/status-indicator/status-indicator.js CHANGED
@@ -68,8 +68,8 @@ class StatusIndicator extends LitElement {
68
68
  }
69
69
  :host([state="none"]),
70
70
  :host([state="null"]) {
71
- border-color: var(--d2l-color-ferrite);
72
- color: var(--d2l-color-ferrite);
71
+ border-color: var(--d2l-color-tungsten);
72
+ color: var(--d2l-color-tungsten);
73
73
  }
74
74
 
75
75
  :host([bold]) {
@@ -84,7 +84,7 @@ class StatusIndicator extends LitElement {
84
84
  }
85
85
  :host([bold][state="none"]),
86
86
  :host([bold][state="null"]) {
87
- background-color: var(--d2l-color-ferrite);
87
+ background-color: var(--d2l-color-tungsten);
88
88
  }
89
89
  `;
90
90
  }
package/generated/icons/tier2/check-box-unchecked.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // auto-generated
2
2
  export const val = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
3
- <rect fill="#f9fbff" stroke-width="1" stroke="#868c8f" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
3
+ <rect fill="#f9fbff" stroke-width="1" stroke="#6e7477" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
4
4
  </svg>
5
5
  `;
package/generated/icons/tier2/check-box.js CHANGED
@@ -1,6 +1,6 @@
1
1
  // auto-generated
2
2
  export const val = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
3
- <rect fill="#f9fbff" stroke-width="1" stroke="#868c8f" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
3
+ <rect fill="#f9fbff" stroke-width="1" stroke="#6e7477" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
4
4
  <path fill="#494c4e" d="M19.707,7.293a1,1,0,0,0-1.414,0L10,15.586,6.707,12.293a1,1,0,0,0-1.414,1.414l4,4a1,1,0,0,0,1.414,0l9-9A1,1,0,0,0,19.707,7.293Z"/>
5
5
  </svg>
6
6
  `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.8.0",
3
+ "version": "2.9.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",
package/templates/primary-secondary/primary-secondary.js CHANGED
@@ -674,7 +674,7 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
674
674
 
675
675
  footer {
676
676
  background-color: white;
677
- box-shadow: 0 -2px 4px rgba(73, 76, 78, 0.2); /* ferrite */
677
+ box-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */
678
678
  padding: 0.75rem 1rem;
679
679
  z-index: 1; /* ensures the footer box-shadow is over main areas with background colours set */
680
680
  }