@brightspace-ui/core 3.232.0 → 3.233.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 (8) hide show
  1. package/components/colors/colors.js +17 -2
  2. package/components/inputs/input-checkbox.js +27 -31
  3. package/components/inputs/input-label-styles.js +9 -6
  4. package/components/inputs/input-radio-styles.js +18 -16
  5. package/components/inputs/input-select-styles.js +20 -18
  6. package/components/inputs/input-styles.js +19 -17
  7. package/components/inputs/input-text.js +4 -4
  8. package/package.json +1 -1
package/components/colors/colors.js CHANGED
@@ -111,8 +111,10 @@ const lightVariables = new Map([
111
111
  ['--d2l-theme-text-color-static-standard', '--d2l-color-ferrite'],
112
112
  ['--d2l-theme-text-color-static-subtle', '--d2l-color-tungsten'],
113
113
  // figma - undefined
114
+ ['--d2l-theme-background-color-interactive-faint-disabled', '#f9fbff80'], /* --d2l-theme-background-color-interactive-faint-default at 50% opacity, remove once color-mix is widely supported */
114
115
  ['--d2l-theme-badge-background-color', '--d2l-color-gypsum'],
115
116
  ['--d2l-theme-badge-text-color', '--d2l-theme-text-color-static-standard'],
117
+ ['--d2l-theme-border-color-disabled', '--d2l-color-corundum'],
116
118
  ['--d2l-theme-notification-background-color', '--d2l-color-carnelian-minus-1'],
117
119
  ['--d2l-theme-notification-text-color', '#ffffff'],
118
120
  ['--d2l-theme-text-color-static-disabled', '#20212280'], /* --d2l-theme-text-color-static-standard at 50% opacity, remove once color-mix is widely supported */
@@ -125,7 +127,12 @@ const lightVariables = new Map([
125
127
  ['--d2l-theme-shadow-attached-block-start', '0 2px 4px 0 rgba(0, 0, 0, 0.03)'],
126
128
  ['--d2l-theme-shadow-attached-block-end', '0 -2px 4px 0 rgba(0, 0, 0, 0.03)'],
127
129
  ['--d2l-theme-shadow-floating', '0 2px 12px 0 rgba(0, 0, 0, 0.15)'],
128
- ['--d2l-theme-shadow-inset', 'inset 0 2px 0 0 rgba(177, 185, 190, 0.2)'], /* corundum */
130
+ ['--d2l-theme-shadow-inset-offset-x', '0'],
131
+ ['--d2l-theme-shadow-inset-offset-y', '2px'],
132
+ ['--d2l-theme-shadow-inset-blur-radius', '0'],
133
+ ['--d2l-theme-shadow-inset-spread-radius', '0'],
134
+ ['--d2l-theme-shadow-inset-color', 'rgba(177, 185, 190, 0.2)'],
135
+ ['--d2l-theme-shadow-inset', 'inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) var(--d2l-theme-shadow-inset-spread-radius) var(--d2l-theme-shadow-inset-color)'], /* corundum */
129
136
  // feedback (old semantic names)
130
137
  ['--d2l-color-feedback-error', '--d2l-theme-status-color-error'],
131
138
  ['--d2l-color-feedback-warning', '--d2l-theme-status-color-warning'],
@@ -176,8 +183,10 @@ const darkVariables = new Map([
176
183
  ['--d2l-theme-text-color-static-standard', '--d2l-color-mica'],
177
184
  ['--d2l-theme-text-color-static-subtle', '--d2l-color-chromite'],
178
185
  // figma - undefined
186
+ ['--d2l-theme-background-color-interactive-faint-disabled', '#20212280'], /* --d2l-theme-background-color-interactive-faint-default at 50% opacity, remove once color-mix is widely supported */
179
187
  ['--d2l-theme-badge-background-color', '#303335'],
180
188
  ['--d2l-theme-badge-text-color', '--d2l-theme-text-color-static-standard'],
189
+ ['--d2l-theme-border-color-disabled', '#303233'], /* --d2l-theme-border-color-standard (tungsten) at 50% opacity */
181
190
  ['--d2l-theme-notification-background-color', '--d2l-color-carnelian-minus-1'],
182
191
  ['--d2l-theme-notification-text-color', '#ffffff'],
183
192
  ['--d2l-theme-text-color-static-disabled', '#cdd5dc80'], /* --d2l-theme-text-color-static-standard at 50% opacity, remove once color-mix is widely supported */
@@ -190,7 +199,12 @@ const darkVariables = new Map([
190
199
  ['--d2l-theme-shadow-attached-block-start', '0 2px 4px 0 rgba(0, 0, 0, 0.85)'],
191
200
  ['--d2l-theme-shadow-attached-block-end', '0 -2px 4px 0 rgba(0, 0, 0, 0.85)'],
192
201
  ['--d2l-theme-shadow-floating', '0 2px 12px 0 rgba(0, 0, 0, 0.85)'],
193
- ['--d2l-theme-shadow-inset', 'inset 0 2px 0 0 rgba(177, 185, 190, 0.2)'], /* corundum */
202
+ ['--d2l-theme-shadow-inset-offset-x', '0'],
203
+ ['--d2l-theme-shadow-inset-offset-y', '2px'],
204
+ ['--d2l-theme-shadow-inset-blur-radius', '0'],
205
+ ['--d2l-theme-shadow-inset-spread-radius', '0'],
206
+ ['--d2l-theme-shadow-inset-color', 'rgba(177, 185, 190, 0.2)'],
207
+ ['--d2l-theme-shadow-inset', 'inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) var(--d2l-theme-shadow-inset-spread-radius) var(--d2l-theme-shadow-inset-color)'], /* corundum */
194
208
  // feedback (old semantic names)
195
209
  ['--d2l-color-feedback-error', '--d2l-theme-status-color-error'],
196
210
  ['--d2l-color-feedback-warning', '--d2l-theme-status-color-warning'],
@@ -249,6 +263,7 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
249
263
  }
250
264
 
251
265
  @supports (color: color-mix(in srgb, black 50%, transparent)) {
266
+ --d2l-theme-background-color-interactive-faint-disabled: color-mix(in srgb, var(--d2l-theme-background-color-interactive-faint-default) 50%, transparent);
252
267
  --d2l-theme-text-color-static-disabled: color-mix(in srgb, var(--d2l-theme-text-color-static-standard) 50%, transparent);
253
268
  }
254
269
  `;
package/components/inputs/input-checkbox.js CHANGED
@@ -1,4 +1,3 @@
1
- import '../colors/colors.js';
2
1
  import '../expand-collapse/expand-collapse-content.js';
3
2
  import '../tooltip/tooltip.js';
4
3
  import { css, html, LitElement, nothing } from 'lit';
@@ -9,15 +8,22 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
9
8
  import { ifDefined } from 'lit/directives/if-defined.js';
10
9
  import { InputInlineHelpMixin } from './input-inline-help.js';
11
10
  import { offscreenStyles } from '../offscreen/offscreen.js';
11
+ import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
12
12
  import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
13
- import { svgToCSS } from '../../helpers/svg-to-css.js';
14
13
 
15
- export const inputCheck = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
16
- <path fill="#494C4E" d="M8.4 16.6c.6.6 1.5.6 2.1 0l8-8c.6-.6.6-1.5 0-2.1-.6-.6-1.5-.6-2.1 0l-6.9 7-1.9-1.9c-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1l2.9 2.9z"/>\
17
- </svg>`);
18
- export const inputCheckIndeterminate = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
19
- <path fill="#494C4E" d="M7.5,11h9c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-9C6.7,14,6,13.3,6,12.5l0,0C6,11.7,6.7,11,7.5,11z"/>
20
- </svg>`);
14
+ registerSemanticVariableForSvgImageUrl(
15
+ '--d2l-input-checkbox-check-image',
16
+ `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
17
+ <path fill="var(--d2l-theme-icon-color-standard)" d="M8.4 16.6c.6.6 1.5.6 2.1 0l8-8c.6-.6.6-1.5 0-2.1-.6-.6-1.5-.6-2.1 0l-6.9 7-1.9-1.9c-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1l2.9 2.9z"/>\
18
+ </svg>`
19
+ );
20
+
21
+ registerSemanticVariableForSvgImageUrl(
22
+ '--d2l-input-checkbox-indeterminate-image',
23
+ `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
24
+ <path fill="var(--d2l-theme-icon-color-standard)" d="M7.5,11h9c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-9C6.7,14,6,13.3,6,12.5l0,0C6,11.7,6.7,11,7.5,11z"/>
25
+ </svg>`
26
+ );
21
27
 
22
28
  export const cssSizes = {
23
29
  inputBoxSize: 1.2,
@@ -27,23 +33,13 @@ export const cssSizes = {
27
33
  export const checkboxStyles = css`
28
34
  input[type="checkbox"].d2l-input-checkbox {
29
35
  --d2l-input-checkbox-background-image: none;
30
- --d2l-input-checkbox-background-color: var(--d2l-color-regolith);
36
+ --d2l-input-checkbox-background-color: var(--d2l-theme-background-color-interactive-faint-default);
31
37
  --d2l-input-checkbox-background-image-disabled:
32
38
  linear-gradient(
33
- /* regolith at 50% */
34
- rgba(249, 251, 255, 0.5),
35
- rgba(249, 251, 255, 0.5)
39
+ var(--d2l-theme-background-color-interactive-faint-disabled),
40
+ var(--d2l-theme-background-color-interactive-faint-disabled)
36
41
  ),
37
42
  var(--d2l-input-checkbox-background-image);
38
-
39
- @supports (color: color-mix(in srgb, black 50%, transparent)) {
40
- --d2l-input-checkbox-background-image-disabled:
41
- linear-gradient(
42
- color-mix(in srgb, var(--d2l-input-checkbox-background-color) 50%, transparent),
43
- color-mix(in srgb, var(--d2l-input-checkbox-background-color) 50%, transparent)
44
- ),
45
- var(--d2l-input-checkbox-background-image);
46
- }
47
43
  -webkit-appearance: none;
48
44
  -moz-appearance: none;
49
45
  appearance: none;
@@ -62,32 +58,32 @@ export const checkboxStyles = css`
62
58
  width: ${cssSizes.inputBoxSize}rem;
63
59
  }
64
60
  input[type="checkbox"].d2l-input-checkbox:checked {
65
- --d2l-input-checkbox-background-image: ${inputCheck};
61
+ --d2l-input-checkbox-background-image: var(--d2l-input-checkbox-check-image);
66
62
  }
67
63
  input[type="checkbox"].d2l-input-checkbox:indeterminate {
68
- --d2l-input-checkbox-background-image: ${inputCheckIndeterminate};
64
+ --d2l-input-checkbox-background-image: var(--d2l-input-checkbox-indeterminate-image);
69
65
  }
70
66
  input[type="checkbox"].d2l-input-checkbox,
71
67
  input[type="checkbox"].d2l-input-checkbox:hover:disabled {
72
68
  background-color: var(--d2l-input-checkbox-background-color);
73
- border-color: var(--d2l-color-galena);
69
+ border-color: var(--d2l-theme-border-color-emphasized);
74
70
  border-width: 1px;
75
71
  }
76
72
  input[type="checkbox"].d2l-input-checkbox:hover:disabled {
77
- border-color: var(--d2l-color-corundum);
73
+ border-color: var(--d2l-theme-border-color-disabled);
78
74
  }
79
75
  input[type="checkbox"].d2l-input-checkbox:hover,
80
76
  input[type="checkbox"].d2l-input-checkbox:focus,
81
77
  input[type="checkbox"].d2l-input-checkbox.d2l-input-checkbox-focus,
82
78
  :host(.d2l-hovering) input[type="checkbox"]:not(:disabled).d2l-input-checkbox {
83
- border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-color-celestine));
79
+ border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-theme-border-color-focus));
84
80
  border-width: 2px;
85
81
  outline: none;
86
82
  }
87
83
  input[type="checkbox"].d2l-input-checkbox:disabled,
88
84
  input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
89
85
  background-image: var(--d2l-input-checkbox-background-image-disabled);
90
- border-color: var(--d2l-color-corundum);
86
+ border-color: var(--d2l-theme-border-color-disabled);
91
87
  }
92
88
  @media (forced-colors: active) {
93
89
  input[type="checkbox"].d2l-input-checkbox:checked,
@@ -110,15 +106,15 @@ export const checkboxStyles = css`
110
106
 
111
107
  input[type="checkbox"].d2l-input-checkbox:disabled,
112
108
  input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
113
- opacity: 0.5;
109
+ opacity: var(--d2l-theme-opacity-disabled-control);
114
110
  }
115
111
 
116
112
  input[type="checkbox"].d2l-input-checkbox:checked::after {
117
- mask-image: ${inputCheck};
113
+ mask-image: var(--d2l-input-checkbox-check-image);
118
114
  }
119
115
 
120
116
  input[type="checkbox"].d2l-input-checkbox:indeterminate::after {
121
- mask-image: ${inputCheckIndeterminate};
117
+ mask-image: var(--d2l-input-checkbox-indeterminate-image);
122
118
  }
123
119
  }
124
120
  `;
@@ -215,7 +211,7 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
215
211
  display: inline-block;
216
212
  }
217
213
  .d2l-input-checkbox-text {
218
- color: var(--d2l-color-ferrite);
214
+ color: var(--d2l-theme-text-color-static-standard);
219
215
  display: inline-block;
220
216
  font-size: 0.8rem;
221
217
  font-weight: 400;
package/components/inputs/input-label-styles.js CHANGED
@@ -1,9 +1,12 @@
1
1
  import { css } from 'lit';
2
- import { svgToCSS } from '../../helpers/svg-to-css.js';
2
+ import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
3
3
 
4
- const requiredIcon = svgToCSS(`<svg width="5" height="6" viewBox="0 0 5 6" xmlns="http://www.w3.org/2000/svg">
5
- <path d="M2.38 5.141V3.86c0-.093.006-.184.018-.273.011-.089.031-.173.059-.252a.927.927 0 0 1-.182.175c-.07.051-.145.103-.224.154l-1.106.644-.413-.7 1.113-.644c.084-.051.167-.093.248-.126.082-.033.167-.056.256-.07a.816.816 0 0 1-.256-.07 2.356 2.356 0 0 1-.248-.133L.532 1.914l.406-.7 1.113.658c.08.051.155.104.228.157a.966.966 0 0 1 .185.179 1.002 1.002 0 0 1-.066-.252 2.091 2.091 0 0 1-.018-.273V.388h.826v1.281c0 .098-.006.192-.017.283a1.003 1.003 0 0 1-.067.256c.051-.065.112-.125.182-.179.07-.053.147-.106.231-.157l1.106-.644.413.7-1.113.637a1.954 1.954 0 0 1-.248.13 1.07 1.07 0 0 1-.256.073c.159.028.327.093.504.196l1.113.651-.406.7-1.113-.651a3.307 3.307 0 0 1-.231-.154 1.122 1.122 0 0 1-.189-.175c.06.15.091.322.091.518v1.288H2.38z" fill="#494C4E" fill-rule="evenodd"/>
6
- </svg>`);
4
+ registerSemanticVariableForSvgImageUrl(
5
+ '--d2l-input-label-required-image',
6
+ `<svg width="5" height="6" viewBox="0 0 5 6" xmlns="http://www.w3.org/2000/svg">
7
+ <path d="M2.38 5.141V3.86c0-.093.006-.184.018-.273.011-.089.031-.173.059-.252a.927.927 0 0 1-.182.175c-.07.051-.145.103-.224.154l-1.106.644-.413-.7 1.113-.644c.084-.051.167-.093.248-.126.082-.033.167-.056.256-.07a.816.816 0 0 1-.256-.07 2.356 2.356 0 0 1-.248-.133L.532 1.914l.406-.7 1.113.658c.08.051.155.104.228.157a.966.966 0 0 1 .185.179 1.002 1.002 0 0 1-.066-.252 2.091 2.091 0 0 1-.018-.273V.388h.826v1.281c0 .098-.006.192-.017.283a1.003 1.003 0 0 1-.067.256c.051-.065.112-.125.182-.179.07-.053.147-.106.231-.157l1.106-.644.413.7-1.113.637a1.954 1.954 0 0 1-.248.13 1.07 1.07 0 0 1-.256.073c.159.028.327.093.504.196l1.113.651-.406.7-1.113-.651a3.307 3.307 0 0 1-.231-.154 1.122 1.122 0 0 1-.189-.175c.06.15.091.322.091.518v1.288H2.38z" fill="var(--d2l-theme-icon-color-standard)" fill-rule="evenodd"/>
8
+ </svg>`
9
+ );
7
10
 
8
11
  export const inputLabelStyles = css`
9
12
  .d2l-input-label {
@@ -19,7 +22,7 @@ export const inputLabelStyles = css`
19
22
  }
20
23
  :host([required]) .d2l-input-label::after,
21
24
  .d2l-input-label-required::after {
22
- background-image: ${requiredIcon};
25
+ background-image: var(--d2l-input-label-required-image);
23
26
  bottom: 0.25rem;
24
27
  content: "";
25
28
  display: inline-block;
@@ -47,7 +50,7 @@ export const inputLabelStyles = css`
47
50
  .d2l-input-label-required::after {
48
51
  background-color: FieldText;
49
52
  background-image: none;
50
- mask-image: ${requiredIcon};
53
+ mask-image: var(--d2l-input-label-required-image);
51
54
  }
52
55
  }
53
56
  `;
package/components/inputs/input-radio-styles.js CHANGED
@@ -1,10 +1,12 @@
1
- import '../colors/colors.js';
2
1
  import { css } from 'lit';
3
- import { svgToCSS } from '../../helpers/svg-to-css.js';
2
+ import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
4
3
 
5
- const radioCheck = svgToCSS(`<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
6
- <circle cx="5" cy="5" r="5" fill="#494c4e"></circle>
7
- </svg>`);
4
+ registerSemanticVariableForSvgImageUrl(
5
+ '--d2l-input-radio-check-image',
6
+ `<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
7
+ <circle cx="5" cy="5" r="5" fill="var(--d2l-theme-icon-color-standard)"></circle>
8
+ </svg>`
9
+ );
8
10
 
9
11
  export const radioStyles = css`
10
12
  .d2l-input-radio,
@@ -28,15 +30,15 @@ export const radioStyles = css`
28
30
  .d2l-input-radio[aria-checked="true"],
29
31
  .d2l-input-radio:checked,
30
32
  .d2l-input-radio-label > input[type="radio"]:checked {
31
- background-image: ${radioCheck};
33
+ background-image: var(--d2l-input-radio-check-image);
32
34
  }
33
35
  .d2l-input-radio,
34
36
  .d2l-input-radio:hover:disabled,
35
37
  .d2l-input-radio:hover.d2l-disabled,
36
38
  .d2l-input-radio-label > input[type="radio"],
37
39
  .d2l-input-radio-label > input[type="radio"]:hover:disabled {
38
- background-color: var(--d2l-color-regolith);
39
- border-color: var(--d2l-color-galena);
40
+ background-color: var(--d2l-theme-background-color-interactive-faint-default);
41
+ border-color: var(--d2l-theme-border-color-emphasized);
40
42
  border-width: 1px;
41
43
  }
42
44
  .d2l-input-radio.d2l-hovering,
@@ -44,22 +46,22 @@ export const radioStyles = css`
44
46
  .d2l-input-radio:focus,
45
47
  .d2l-input-radio-label > input[type="radio"]:hover,
46
48
  .d2l-input-radio-label > input[type="radio"]:focus {
47
- border-color: var(--d2l-input-radio-border-color-hover-focus, var(--d2l-color-celestine));
49
+ border-color: var(--d2l-input-radio-border-color-hover-focus, var(--d2l-theme-border-color-focus));
48
50
  border-width: 2px;
49
51
  outline: none;
50
52
  }
51
53
  .d2l-input-radio[aria-invalid="true"],
52
54
  .d2l-input-radio-label > input[type="radio"][aria-invalid="true"] {
53
- border-color: var(--d2l-color-cinnabar);
55
+ border-color: var(--d2l-theme-status-color-error);
54
56
  }
55
57
  .d2l-input-radio:disabled,
56
58
  .d2l-input-radio.d2l-disabled,
57
59
  .d2l-input-radio-label > input[type="radio"]:disabled {
58
- opacity: 0.5;
60
+ opacity: var(--d2l-theme-opacity-disabled-control);
59
61
  }
60
62
  .d2l-input-radio-label {
61
63
  align-items: center;
62
- color: var(--d2l-color-ferrite);
64
+ color: var(--d2l-theme-text-color-static-standard);
63
65
  display: flex;
64
66
  font-size: 0.8rem;
65
67
  font-weight: 400;
@@ -72,7 +74,7 @@ export const radioStyles = css`
72
74
  }
73
75
  .d2l-input-radio-label-disabled:not(.d2l-input-radio-label-disabled-tooltip),
74
76
  .d2l-input-radio-label-disabled-tooltip > * {
75
- opacity: 0.5;
77
+ opacity: var(--d2l-theme-opacity-disabled-control);
76
78
  }
77
79
  .d2l-input-radio-label-disabled:not(.d2l-input-radio-label-disabled-tooltip) > .d2l-input-radio,
78
80
  .d2l-input-radio-label-disabled:not(.d2l-input-radio-label-disabled-tooltip) > input[type="radio"] {
@@ -87,8 +89,8 @@ export const radioStyles = css`
87
89
  .d2l-input-radio-label-disabled-tooltip .d2l-input-radio-label > input[type="radio"]:hover,
88
90
  .d2l-input-radio-label-disabled-tooltip .d2l-input-radio-label > input[type="radio"]:focus {
89
91
  background-blend-mode: lighten;
90
- background-color: color-mix(in srgb, var(--d2l-color-regolith) 50%, transparent); /* mock background opacity */
91
- border-color: var(--d2l-input-radio-border-color-hover-focus, var(--d2l-color-celestine));
92
+ background-color: var(--d2l-theme-background-color-interactive-faint-disabled);
93
+ border-color: var(--d2l-input-radio-border-color-hover-focus, var(--d2l-theme-border-color-focus));
92
94
  border-width: 2px;
93
95
  opacity: 1;
94
96
  outline: none;
@@ -119,7 +121,7 @@ export const radioStyles = css`
119
121
  display: block;
120
122
  height: 1.2rem;
121
123
  left: 50%;
122
- mask-image: ${radioCheck};
124
+ mask-image: var(--d2l-input-radio-check-image);
123
125
  mask-position: center center;
124
126
  mask-repeat: no-repeat;
125
127
  mask-size: 0.5rem 0.5rem;
package/components/inputs/input-select-styles.js CHANGED
@@ -1,30 +1,32 @@
1
- import '../colors/colors.js';
1
+ import './input-styles.js';
2
2
  import { css, unsafeCSS } from 'lit';
3
3
  import { getFocusPseudoClass } from '../../helpers/focus.js';
4
- import { invalidIcon } from './input-styles.js';
5
- import { svgToCSS } from '../../helpers/svg-to-css.js';
4
+ import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
6
5
 
7
6
  const focusClass = unsafeCSS(getFocusPseudoClass());
8
7
 
9
- const chevron = svgToCSS(`<svg width="11" height="7" viewBox="0 0 11 7" xmlns="http://www.w3.org/2000/svg">
10
- <path d="M1 2l4.5 4M10 2L5.5 6" stroke="#565A5C" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"/>
11
- </svg>`);
8
+ registerSemanticVariableForSvgImageUrl(
9
+ '--d2l-input-select-chevron-image',
10
+ `<svg width="11" height="7" viewBox="0 0 11 7" xmlns="http://www.w3.org/2000/svg">
11
+ <path d="M1 2l4.5 4M10 2L5.5 6" stroke="var(--d2l-theme-icon-color-standard)" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"/>
12
+ </svg>`
13
+ );
12
14
 
13
15
  export const selectStyles = css`
14
16
  .d2l-input-select {
15
17
  -webkit-appearance: none;
16
18
  -moz-appearance: none;
17
19
  appearance: none;
18
- background-color: #ffffff;
19
- background-image: ${chevron};
20
+ background-color: var(--d2l-theme-background-color-base);
21
+ background-image: var(--d2l-input-select-chevron-image);
20
22
  background-origin: border-box;
21
23
  background-position: center var(--d2l-inline-end, right) 17px;
22
24
  background-repeat: no-repeat;
23
25
  background-size: 11px 7px;
24
26
  border: none;
25
27
  border-radius: 0.3rem;
26
- box-shadow: inset 0 2px 0 1px rgba(177, 185, 190, 0.2); /* corundum */
27
- color: var(--d2l-color-ferrite);
28
+ box-shadow: inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) 1px var(--d2l-theme-shadow-inset-color);
29
+ color: var(--d2l-theme-text-color-static-standard);
28
30
  display: inline-block;
29
31
  font-family: inherit;
30
32
  font-size: 0.8rem;
@@ -34,7 +36,7 @@ export const selectStyles = css`
34
36
  line-height: 1.2rem;
35
37
  margin: 0;
36
38
  max-height: calc(2rem + 2px);
37
- outline: 1px solid var(--d2l-color-galena);
39
+ outline: 1px solid var(--d2l-theme-border-color-emphasized);
38
40
  outline-offset: -1px;
39
41
  padding-block: calc(0.4rem + 1px);
40
42
  padding-inline: calc(0.75rem + 1px) calc(2px + 0.8rem + 1px + 11px + 16px + 1px);
@@ -43,12 +45,12 @@ export const selectStyles = css`
43
45
 
44
46
  .d2l-input-select:not([disabled]):hover,
45
47
  .d2l-input-select:not([disabled]):${focusClass} {
46
- box-shadow: inset 0 2px 0 2px rgba(177, 185, 190, 0.2); /* corundum */
47
- outline: 2px solid var(--d2l-color-celestine);
48
+ box-shadow: inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) 2px var(--d2l-theme-shadow-inset-color);
49
+ outline: 2px solid var(--d2l-theme-border-color-focus);
48
50
  outline-offset: -2px;
49
51
  }
50
52
  .d2l-input-select[aria-invalid="true"] {
51
- background-image: ${chevron}, ${invalidIcon};
53
+ background-image: var(--d2l-input-select-chevron-image), var(--d2l-input-invalid-image);
52
54
  background-position: center var(--d2l-inline-end, right) 17px, center var(--d2l-inline-end, right) calc(1px + 11px + 17px);
53
55
  background-repeat: no-repeat, no-repeat;
54
56
  background-size: 11px 7px, 0.8rem 0.8rem;
@@ -56,10 +58,10 @@ export const selectStyles = css`
56
58
  .d2l-input-select[aria-invalid="true"],
57
59
  .d2l-input-select[aria-invalid="true"]:${focusClass},
58
60
  .d2l-input-select[aria-invalid="true"]:hover {
59
- outline-color: var(--d2l-color-cinnabar);
61
+ outline-color: var(--d2l-theme-status-color-error);
60
62
  }
61
63
  .d2l-input-select:disabled {
62
- opacity: 0.5;
64
+ opacity: var(--d2l-theme-opacity-disabled-control);
63
65
  }
64
66
 
65
67
  @media (prefers-contrast: more) {
@@ -88,7 +90,7 @@ export const selectStyles = css`
88
90
  }
89
91
 
90
92
  .d2l-input-select[aria-invalid="true"] {
91
- background-image: ${invalidIcon};
93
+ background-image: var(--d2l-input-invalid-image);
92
94
  background-position: center var(--d2l-inline-end, right) calc(1px + 11px + 17px);
93
95
  background-repeat: no-repeat;
94
96
  background-size: 0.8rem 0.8rem;
@@ -97,7 +99,7 @@ export const selectStyles = css`
97
99
  .d2l-input-select[aria-invalid="true"],
98
100
  .d2l-input-select[aria-invalid="true"]:${focusClass},
99
101
  .d2l-input-select[aria-invalid="true"]:hover {
100
- outline-color: var(--d2l-color-cinnabar);
102
+ outline-color: var(--d2l-theme-status-color-error);
101
103
  }
102
104
  }
103
105
  `;
package/components/inputs/input-styles.js CHANGED
@@ -1,23 +1,25 @@
1
- import '../colors/colors.js';
2
1
  import { css, unsafeCSS } from 'lit';
3
2
  import { getFocusPseudoClass } from '../../helpers/focus.js';
4
- import { svgToCSS } from '../../helpers/svg-to-css.js';
3
+ import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
5
4
 
6
5
  const focusClass = unsafeCSS(getFocusPseudoClass());
7
6
 
8
- export const invalidIcon = svgToCSS(`<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
9
- <path fill="#cd2026" d="M17.79 15.11l-7-14a2 2 0 0 0-3.58 0l-7 14a1.975 1.975 0 0 0 .09 1.94A2 2 0 0 0 2 18h14a1.994 1.994 0 0 0 1.7-.95 1.967 1.967 0 0 0 .09-1.94zM9 16a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 9 16zm.98-4.806a1 1 0 0 1-1.96 0l-.99-5A1 1 0 0 1 8.01 5h1.983a1 1 0 0 1 .98 1.194z"/>
10
- <path fill="#FFF" d="M9 16a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 9 16zm.98-4.806a1 1 0 0 1-1.96 0l-.99-5A1 1 0 0 1 8.01 5h1.983a1 1 0 0 1 .98 1.194z"/>
11
- </svg>`);
7
+ registerSemanticVariableForSvgImageUrl(
8
+ '--d2l-input-invalid-image',
9
+ `<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
10
+ <path fill="var(--d2l-theme-status-color-error)" d="M17.79 15.11l-7-14a2 2 0 0 0-3.58 0l-7 14a1.975 1.975 0 0 0 .09 1.94A2 2 0 0 0 2 18h14a1.994 1.994 0 0 0 1.7-.95 1.967 1.967 0 0 0 .09-1.94zM9 16a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 9 16zm.98-4.806a1 1 0 0 1-1.96 0l-.99-5A1 1 0 0 1 8.01 5h1.983a1 1 0 0 1 .98 1.194z"/>
11
+ <path fill="var(--d2l-theme-background-color-base)" d="M9 16a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 9 16zm.98-4.806a1 1 0 0 1-1.96 0l-.99-5A1 1 0 0 1 8.01 5h1.983a1 1 0 0 1 .98 1.194z"/>
12
+ </svg>`
13
+ );
12
14
 
13
15
  export const inputStyles = css`
14
16
  .d2l-input {
15
- background-color: var(--d2l-input-background-color, #ffffff);
17
+ background-color: var(--d2l-input-background-color, var(--d2l-theme-background-color-base));
16
18
  border-radius: var(--d2l-input-border-radius, 0.3rem);
17
19
  border-style: solid;
18
- box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
20
+ box-shadow: var(--d2l-theme-shadow-inset);
19
21
  box-sizing: border-box;
20
- color: var(--d2l-color-ferrite);
22
+ color: var(--d2l-theme-text-color-static-standard);
21
23
  display: inline-block;
22
24
  font-family: inherit;
23
25
  font-size: 0.8rem;
@@ -37,34 +39,34 @@ export const inputStyles = css`
37
39
  .d2l-input:hover:disabled,
38
40
  .d2l-input:${focusClass}:disabled,
39
41
  [aria-invalid="true"].d2l-input:disabled {
40
- border-color: var(--d2l-input-border-color, var(--d2l-color-galena));
42
+ border-color: var(--d2l-input-border-color, var(--d2l-theme-border-color-emphasized));
41
43
  border-width: 1px;
42
44
  padding: var(--d2l-input-padding, 0.4rem 0.75rem);
43
45
  }
44
46
  .d2l-input::placeholder {
45
- color: var(--d2l-color-galena);
47
+ color: var(--d2l-theme-text-color-static-faint);
46
48
  font-size: 0.8rem;
47
49
  font-weight: 400;
48
50
  opacity: 1; /* Firefox has non-1 default */
49
51
  }
50
52
  .d2l-input::-ms-input-placeholder {
51
- color: var(--d2l-color-galena);
53
+ color: var(--d2l-theme-text-color-static-faint);
52
54
  font-size: 0.8rem;
53
55
  font-weight: 400;
54
56
  }
55
57
  .d2l-input:hover,
56
58
  .d2l-input:${focusClass},
57
59
  .d2l-input-focus {
58
- border-color: var(--d2l-color-celestine);
60
+ border-color: var(--d2l-theme-border-color-focus);
59
61
  border-width: 2px;
60
62
  outline: none;
61
63
  padding: var(--d2l-input-padding-focus, calc(0.4rem - 1px) calc(0.75rem - 1px));
62
64
  }
63
65
  [aria-invalid="true"].d2l-input {
64
- border-color: var(--d2l-color-cinnabar);
66
+ border-color: var(--d2l-theme-status-color-error);
65
67
  }
66
68
  .d2l-input:disabled {
67
- opacity: 0.5;
69
+ opacity: var(--d2l-theme-opacity-disabled-control);
68
70
  }
69
71
  .d2l-input::-webkit-search-cancel-button,
70
72
  .d2l-input::-webkit-search-decoration {
@@ -90,7 +92,7 @@ export const inputStyles = css`
90
92
  padding-block: calc(0.5rem - 1px);
91
93
  }
92
94
  textarea.d2l-input[aria-invalid="true"] {
93
- background-image: ${invalidIcon};
95
+ background-image: var(--d2l-input-invalid-image);
94
96
  background-position: top 12px var(--d2l-inline-end, right) 18px;
95
97
  background-repeat: no-repeat;
96
98
  background-size: 0.8rem 0.8rem;
@@ -109,7 +111,7 @@ export const inputStyles = css`
109
111
  @media (prefers-contrast: more) {
110
112
  [aria-invalid="true"].d2l-input {
111
113
  background-color: Field;
112
- border-color: var(--d2l-color-cinnabar);
114
+ border-color: var(--d2l-theme-status-color-error);
113
115
  box-shadow: none;
114
116
  color: FieldText;
115
117
  forced-color-adjust: none;
package/components/inputs/input-text.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import '../colors/colors.js';
2
2
  import '../tooltip/tooltip.js';
3
3
  import { css, html, LitElement, nothing } from 'lit';
4
- import { inputStyles, invalidIcon } from './input-styles.js';
5
4
  import { classMap } from 'lit/directives/class-map.js';
6
5
  import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
7
6
  import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
@@ -10,6 +9,7 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
10
9
  import { ifDefined } from 'lit/directives/if-defined.js';
11
10
  import { InputInlineHelpMixin } from './input-inline-help.js';
12
11
  import { inputLabelStyles } from './input-label-styles.js';
12
+ import { inputStyles } from './input-styles.js';
13
13
  import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
14
14
  import { offscreenStyles } from '../offscreen/offscreen.js';
15
15
  import { PerfMonitor } from '../../helpers/perfMonitor.js';
@@ -250,7 +250,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
250
250
  right: 0;
251
251
  }
252
252
  .d2l-input-unit {
253
- color: var(--d2l-color-galena);
253
+ color: var(--d2l-theme-text-color-static-faint);
254
254
  font-size: 0.7rem;
255
255
  margin-top: 0.05rem;
256
256
  }
@@ -264,10 +264,10 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
264
264
  margin-right: 12px;
265
265
  }
266
266
  :host([disabled]) .d2l-input-unit {
267
- opacity: 0.5;
267
+ opacity: var(--d2l-theme-opacity-disabled-control);
268
268
  }
269
269
  .d2l-input-text-invalid-icon {
270
- background-image: ${invalidIcon};
270
+ background-image: var(--d2l-input-invalid-image);
271
271
  background-position: center center;
272
272
  background-repeat: no-repeat;
273
273
  background-size: 0.8rem 0.8rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.232.0",
3
+ "version": "3.233.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",