@brightspace-ui/core 3.210.0 → 3.211.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 (7) hide show
  1. package/components/colors/colors.js +25 -0
  2. package/components/demo/demo-page-settings.js +1 -0
  3. package/components/demo/demo-page.js +1 -1
  4. package/components/demo/demo-snippet.js +5 -5
  5. package/components/demo/demo-theme.js +7 -0
  6. package/components/demo/styles.css +1 -1
  7. package/package.json +1 -1
package/components/colors/colors.js CHANGED
@@ -1,6 +1,18 @@
1
1
  if (globalThis.document !== undefined && !globalThis.document.head.querySelector('#d2l-colors')) {
2
2
  const style = globalThis.document.createElement('style');
3
3
  style.id = 'd2l-colors';
4
+
5
+ const lightPalette = `
6
+ --d2l-color-background-base: var(--d2l-color-sylvite);
7
+ --d2l-color-background-default: #ffffff;
8
+ --d2l-color-border-medium: var(--d2l-color-mica);
9
+ `;
10
+ const darkPalette = `
11
+ --d2l-color-background-base: #000000;
12
+ --d2l-color-background-default: #18191a; /* new color */
13
+ --d2l-color-border-medium: var(--d2l-color-tungsten);
14
+ `;
15
+
4
16
  style.textContent = `
5
17
  html {
6
18
  /* basic grays (lightest to darkest) */
@@ -90,6 +102,19 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
90
102
  --d2l-color-feedback-success: var(--d2l-color-olivine);
91
103
  --d2l-color-feedback-action: var(--d2l-color-celestine);
92
104
  }
105
+
106
+ /* semantic palette */
107
+ html {
108
+ ${lightPalette}
109
+ }
110
+ html[data-theme="dark"] {
111
+ ${darkPalette}
112
+ }
113
+ @media (prefers-color-scheme: dark) {
114
+ html[data-theme="os"] {
115
+ ${darkPalette}
116
+ }
117
+ }
93
118
  `;
94
119
  globalThis.document.head.appendChild(style);
95
120
  }
package/components/demo/demo-page-settings.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import './demo-flags.js';
2
+ import './demo-theme.js';
2
3
  import '../button/button.js';
3
4
  import '../inputs/input-checkbox-group.js';
4
5
  import '../inputs/input-checkbox.js';
package/components/demo/demo-page.js CHANGED
@@ -31,7 +31,7 @@ class DemoPage extends LitElement {
31
31
  static get styles() {
32
32
  return [ css`
33
33
  :host {
34
- background-color: var(--d2l-color-sylvite);
34
+ background-color: var(--d2l-color-background-base);
35
35
  display: block;
36
36
  padding: 30px;
37
37
  }
package/components/demo/demo-snippet.js CHANGED
@@ -24,8 +24,8 @@ class DemoSnippet extends LitElement {
24
24
  static get styles() {
25
25
  return css`
26
26
  :host {
27
- background-color: white;
28
- border: 1px solid var(--d2l-color-tungsten);
27
+ background-color: var(--d2l-color-background-default);
28
+ border: 1px solid var(--d2l-color-border-medium);
29
29
  border-radius: 6px;
30
30
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
31
31
  display: block;
@@ -41,7 +41,7 @@ class DemoSnippet extends LitElement {
41
41
  display: flex;
42
42
  }
43
43
  .d2l-demo-snippet-demo-wrapper.fullscreen {
44
- background-color: white;
44
+ background-color: var(--d2l-color-background-default);
45
45
  height: 100vh;
46
46
  inset: 0;
47
47
  overflow: auto;
@@ -67,7 +67,7 @@ class DemoSnippet extends LitElement {
67
67
  padding: 0;
68
68
  }
69
69
  .d2l-demo-snippet-settings {
70
- border-inline-start: 1px solid var(--d2l-color-mica);
70
+ border-inline-start: 1px solid var(--d2l-color-border-medium);
71
71
  flex: 0 0 auto;
72
72
  padding: 6px;
73
73
  }
@@ -76,7 +76,7 @@ class DemoSnippet extends LitElement {
76
76
  top: 0;
77
77
  }
78
78
  d2l-dropdown.settings-dropdown {
79
- background-color: white;
79
+ background-color: var(--d2l-color-background-default);
80
80
  border-radius: 6px;
81
81
  outline: 1px solid var(--d2l-color-celestine-minus-1);
82
82
  position: fixed;
package/components/demo/demo-theme.js ADDED
@@ -0,0 +1,7 @@
1
+ const urlParams = new URLSearchParams(window.location.search);
2
+ const theme = urlParams.get('theme');
3
+ if (theme) {
4
+ document.documentElement.dataset.theme = theme;
5
+ } else {
6
+ delete document.documentElement.dataset.theme;
7
+ }
package/components/demo/styles.css CHANGED
@@ -1,5 +1,5 @@
1
1
  html {
2
- background-color: var(--d2l-color-sylvite);
2
+ background-color: var(--d2l-color-background-base);
3
3
  font-size: 20px;
4
4
  }
5
5
  body {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.210.0",
3
+ "version": "3.211.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",