@brightspace-ui/core 3.227.2 → 3.227.4

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 (5) hide show
  1. package/components/colors/colors.js +11 -0
  2. package/components/count-badge/count-badge-icon.js +1 -1
  3. package/components/count-badge/count-badge-mixin.js +4 -4
  4. package/components/icons/icon-styles.js +1 -1
  5. package/package.json +1 -1
package/components/colors/colors.js CHANGED
@@ -2,6 +2,7 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
2
2
  const style = globalThis.document.createElement('style');
3
3
  style.id = 'd2l-colors';
4
4
 
5
+ // Note: do not use these semantic variables outside of core yet - they are subject to change
5
6
  const lightPalette = `
6
7
  --d2l-theme-background-color-base: #ffffff;
7
8
  --d2l-theme-background-color-elevated: var(--d2l-theme-background-color-base);
@@ -18,6 +19,8 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
18
19
  --d2l-theme-background-color-interactive-translucent-default: #00000080;
19
20
  --d2l-theme-background-color-interactive-translucent-hover: var(--d2l-theme-brand-color-primary-default);
20
21
  --d2l-theme-background-color-sunken: #f6f7f8;
22
+ --d2l-theme-badge-background-color: var(--d2l-color-gypsum);
23
+ --d2l-theme-badge-text-color: var(--d2l-theme-text-color-static-standard);
21
24
  --d2l-theme-border-color-emphasized: var(--d2l-color-galena);
22
25
  --d2l-theme-border-color-focus: var(--d2l-color-celestine);
23
26
  --d2l-theme-border-color-standard: var(--d2l-color-mica);
@@ -28,6 +31,8 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
28
31
  --d2l-theme-icon-color-faint: var(--d2l-theme-border-color-standard);
29
32
  --d2l-theme-icon-color-inverted: #ffffff;
30
33
  --d2l-theme-icon-color-standard: var(--d2l-color-tungsten);
34
+ --d2l-theme-notification-background-color: var(--d2l-color-carnelian-minus-1);
35
+ --d2l-theme-notification-text-color: #ffffff;
31
36
  --d2l-theme-shadow-attached-color: #00000008;
32
37
  --d2l-theme-shadow-floating-color: #00000026;
33
38
  --d2l-theme-status-color-default: var(--d2l-color-celestine);
@@ -54,6 +59,8 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
54
59
  --d2l-theme-shadow-inset: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
55
60
 
56
61
  `;
62
+
63
+ // Note: do not use these semantic variables outside of core yet - they are subject to change
57
64
  const darkPalette = `
58
65
  --d2l-theme-background-color-base: #161718;
59
66
  --d2l-theme-background-color-elevated: var(--d2l-color-ferrite);
@@ -70,6 +77,8 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
70
77
  --d2l-theme-background-color-interactive-translucent-default: #00000080;
71
78
  --d2l-theme-background-color-interactive-translucent-hover: var(--d2l-theme-brand-color-primary-default);
72
79
  --d2l-theme-background-color-sunken: #000000;
80
+ --d2l-theme-badge-background-color: #303335;
81
+ --d2l-theme-badge-text-color: var(--d2l-theme-text-color-static-standard);
73
82
  --d2l-theme-border-color-emphasized: var(--d2l-color-galena);
74
83
  --d2l-theme-border-color-focus: var(--d2l-color-celestine-plus-1);
75
84
  --d2l-theme-border-color-standard: var(--d2l-color-tungsten);
@@ -80,6 +89,8 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
80
89
  --d2l-theme-icon-color-faint: var(--d2l-theme-border-color-standard);
81
90
  --d2l-theme-icon-color-inverted: #ffffff;
82
91
  --d2l-theme-icon-color-standard: var(--d2l-color-corundum);
92
+ --d2l-theme-notification-background-color: var(--d2l-color-carnelian-minus-1);
93
+ --d2l-theme-notification-text-color: #ffffff;
83
94
  --d2l-theme-shadow-attached-color: #000000d9;
84
95
  --d2l-theme-shadow-floating-color: #000000d9;
85
96
  --d2l-theme-status-color-default: var(--d2l-theme-brand-color-primary-default);
package/components/count-badge/count-badge-icon.js CHANGED
@@ -66,7 +66,7 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
66
66
 
67
67
  render() {
68
68
  let numberStyles = {
69
- border: '2px solid white',
69
+ border: '2px solid var(--d2l-theme-background-color-base)',
70
70
  position: 'absolute',
71
71
  visibility: this.skeleton ? 'hidden' : undefined,
72
72
  };
package/components/count-badge/count-badge-mixin.js CHANGED
@@ -115,13 +115,13 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
115
115
  }
116
116
 
117
117
  :host([type="notification"]) .d2l-count-badge-number {
118
- background-color: var(--d2l-color-carnelian-minus-1);
119
- color: white;
118
+ background-color: var(--d2l-theme-notification-background-color);
119
+ color: var(--d2l-theme-notification-text-color);
120
120
  }
121
121
 
122
122
  :host([type="count"]) .d2l-count-badge-number {
123
- background-color: var(--d2l-count-badge-background-color, var(--d2l-color-gypsum));
124
- color: var(--d2l-count-badge-foreground-color, var(--d2l-color-ferrite));
123
+ background-color: var(--d2l-count-badge-background-color, var(--d2l-theme-badge-background-color));
124
+ color: var(--d2l-count-badge-foreground-color, var(--d2l-theme-badge-text-color));
125
125
  }
126
126
 
127
127
  :host([size="small"]) .d2l-count-badge-number {
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-tungsten);
8
+ color: var(--d2l-theme-icon-color-standard);
9
9
  display: -ms-inline-flexbox;
10
10
  display: -webkit-inline-flex;
11
11
  display: inline-flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.227.2",
3
+ "version": "3.227.4",
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",