@brightspace-ui/core 3.130.0 → 3.132.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.
- package/components/inputs/input-checkbox.js +10 -2
- package/components/inputs/input-color.js +2 -1
- package/components/inputs/input-label-styles.js +7 -2
- package/components/inputs/input-radio-styles.js +6 -1
- package/components/inputs/input-select-styles.js +9 -3
- package/components/inputs/input-styles.js +9 -1
- package/components/inputs/input-text.js +5 -2
- package/components/list/list-item-mixin.js +19 -4
- package/components/list/list-item-nav-button-mixin.js +2 -1
- package/components/typography/styles.js +12 -1
- package/helpers/prism.js +7 -1
- package/helpers/svg-to-css.js +5 -0
- package/package.json +1 -1
|
@@ -9,6 +9,14 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
9
9
|
import { InputInlineHelpMixin } from './input-inline-help.js';
|
|
10
10
|
import { offscreenStyles } from '../offscreen/offscreen.js';
|
|
11
11
|
import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
|
|
12
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
13
|
+
|
|
14
|
+
export const inputCheck = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
15
|
+
<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"/>\
|
|
16
|
+
</svg>`);
|
|
17
|
+
export const inputCheckIndeterminate = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
18
|
+
<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"/>
|
|
19
|
+
</svg>`);
|
|
12
20
|
|
|
13
21
|
export const cssSizes = {
|
|
14
22
|
inputBoxSize: 1.2,
|
|
@@ -35,10 +43,10 @@ export const checkboxStyles = css`
|
|
|
35
43
|
width: ${cssSizes.inputBoxSize}rem;
|
|
36
44
|
}
|
|
37
45
|
input[type="checkbox"].d2l-input-checkbox:checked {
|
|
38
|
-
background-image:
|
|
46
|
+
background-image: ${inputCheck};
|
|
39
47
|
}
|
|
40
48
|
input[type="checkbox"].d2l-input-checkbox:indeterminate {
|
|
41
|
-
background-image:
|
|
49
|
+
background-image: ${inputCheckIndeterminate};
|
|
42
50
|
}
|
|
43
51
|
input[type="checkbox"].d2l-input-checkbox,
|
|
44
52
|
input[type="checkbox"].d2l-input-checkbox:hover:disabled {
|
|
@@ -15,6 +15,7 @@ import { inputLabelStyles } from './input-label-styles.js';
|
|
|
15
15
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
16
16
|
import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
|
|
17
17
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
18
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
18
19
|
|
|
19
20
|
const DEFAULT_VALUE = '#000000';
|
|
20
21
|
const DEFAULT_VALUE_BG = '#FFFFFF';
|
|
@@ -194,7 +195,7 @@ class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(F
|
|
|
194
195
|
height: 1rem;
|
|
195
196
|
}
|
|
196
197
|
.swatch-transparent {
|
|
197
|
-
background-image:
|
|
198
|
+
background-image: ${svgToCSS(SWATCH_TRANSPARENT)};
|
|
198
199
|
background-position-y: -1.5px;
|
|
199
200
|
background-size: cover;
|
|
200
201
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
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>`);
|
|
2
7
|
|
|
3
8
|
export const inputLabelStyles = css`
|
|
4
9
|
.d2l-input-label {
|
|
@@ -14,7 +19,7 @@ export const inputLabelStyles = css`
|
|
|
14
19
|
}
|
|
15
20
|
:host([required]) .d2l-input-label::after,
|
|
16
21
|
.d2l-input-label-required::after {
|
|
17
|
-
background-image:
|
|
22
|
+
background-image: ${requiredIcon};
|
|
18
23
|
bottom: 0.25rem;
|
|
19
24
|
content: "";
|
|
20
25
|
display: inline-block;
|
|
@@ -42,7 +47,7 @@ export const inputLabelStyles = css`
|
|
|
42
47
|
.d2l-input-label-required::after {
|
|
43
48
|
background-color: FieldText;
|
|
44
49
|
background-image: none;
|
|
45
|
-
mask-image:
|
|
50
|
+
mask-image: ${requiredIcon};
|
|
46
51
|
}
|
|
47
52
|
}
|
|
48
53
|
`;
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css } from 'lit';
|
|
3
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
4
|
+
|
|
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>`);
|
|
3
8
|
|
|
4
9
|
export const radioStyles = css`
|
|
5
10
|
.d2l-input-radio,
|
|
@@ -23,7 +28,7 @@ export const radioStyles = css`
|
|
|
23
28
|
.d2l-input-radio[aria-checked="true"],
|
|
24
29
|
.d2l-input-radio:checked,
|
|
25
30
|
.d2l-input-radio-label > input[type="radio"]:checked {
|
|
26
|
-
background-image:
|
|
31
|
+
background-image: ${radioCheck};
|
|
27
32
|
}
|
|
28
33
|
.d2l-input-radio,
|
|
29
34
|
.d2l-input-radio:hover:disabled,
|
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
import '../colors/colors.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
6
|
|
|
5
7
|
const focusClass = unsafeCSS(getFocusPseudoClass());
|
|
6
8
|
|
|
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>`);
|
|
12
|
+
|
|
7
13
|
export const selectStyles = css`
|
|
8
14
|
.d2l-input-select {
|
|
9
15
|
-webkit-appearance: none;
|
|
10
16
|
-moz-appearance: none;
|
|
11
17
|
appearance: none;
|
|
12
18
|
background-color: #ffffff;
|
|
13
|
-
background-image:
|
|
19
|
+
background-image: ${chevron};
|
|
14
20
|
background-origin: border-box;
|
|
15
21
|
background-position: center right 17px;
|
|
16
22
|
background-repeat: no-repeat;
|
|
@@ -45,7 +51,7 @@ export const selectStyles = css`
|
|
|
45
51
|
outline-offset: -2px;
|
|
46
52
|
}
|
|
47
53
|
.d2l-input-select[aria-invalid="true"] {
|
|
48
|
-
background-image:
|
|
54
|
+
background-image: ${chevron}, ${invalidIcon};
|
|
49
55
|
background-position: center right 17px, center right calc(1px + 11px + 17px);
|
|
50
56
|
background-repeat: no-repeat, no-repeat;
|
|
51
57
|
background-size: 11px 7px, 0.8rem 0.8rem;
|
|
@@ -88,7 +94,7 @@ export const selectStyles = css`
|
|
|
88
94
|
}
|
|
89
95
|
|
|
90
96
|
.d2l-input-select[aria-invalid="true"] {
|
|
91
|
-
background-image:
|
|
97
|
+
background-image: ${invalidIcon};
|
|
92
98
|
background-position: center right calc(1px + 11px + 17px);
|
|
93
99
|
background-repeat: no-repeat;
|
|
94
100
|
background-size: 0.8rem 0.8rem;
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css, unsafeCSS } from 'lit';
|
|
3
3
|
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
|
4
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
4
5
|
|
|
5
6
|
const focusClass = unsafeCSS(getFocusPseudoClass());
|
|
6
7
|
|
|
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>`);
|
|
12
|
+
|
|
7
13
|
export const inputStyles = css`
|
|
8
14
|
.d2l-input {
|
|
9
15
|
background-color: var(--d2l-input-background-color, #ffffff);
|
|
@@ -85,12 +91,13 @@ export const inputStyles = css`
|
|
|
85
91
|
padding-block: calc(0.5rem - 1px);
|
|
86
92
|
}
|
|
87
93
|
textarea.d2l-input[aria-invalid="true"] {
|
|
88
|
-
background-image:
|
|
94
|
+
background-image: ${invalidIcon};
|
|
89
95
|
background-position: top 12px right 18px;
|
|
90
96
|
background-repeat: no-repeat;
|
|
91
97
|
background-size: 0.8rem 0.8rem;
|
|
92
98
|
padding-inline-end: calc(18px + 0.8rem);
|
|
93
99
|
}
|
|
100
|
+
textarea.d2l-input-focus[aria-invalid="true"],
|
|
94
101
|
textarea.d2l-input[aria-invalid="true"]:hover,
|
|
95
102
|
textarea.d2l-input[aria-invalid="true"]:${focusClass} {
|
|
96
103
|
background-position: top calc(12px - 1px) right calc(18px - 1px);
|
|
@@ -99,6 +106,7 @@ export const inputStyles = css`
|
|
|
99
106
|
:host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"] {
|
|
100
107
|
background-position: top 12px left 18px;
|
|
101
108
|
}
|
|
109
|
+
:host([dir="rtl"]) textarea.d2l-input-focus[aria-invalid="true"],
|
|
102
110
|
:host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:${focusClass},
|
|
103
111
|
:host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:hover {
|
|
104
112
|
background-position: top calc(12px - 1px) left calc(18px - 1px);
|
|
@@ -1,6 +1,7 @@
|
|
|
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';
|
|
4
5
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
6
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
|
6
7
|
import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
|
|
@@ -9,7 +10,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
|
9
10
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
11
|
import { InputInlineHelpMixin } from './input-inline-help.js';
|
|
11
12
|
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';
|
|
@@ -258,7 +258,10 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
|
|
|
258
258
|
opacity: 0.5;
|
|
259
259
|
}
|
|
260
260
|
.d2l-input-text-invalid-icon {
|
|
261
|
-
background-image:
|
|
261
|
+
background-image: ${invalidIcon};
|
|
262
|
+
background-position: center center;
|
|
263
|
+
background-repeat: no-repeat;
|
|
264
|
+
background-size: 0.8rem 0.8rem;
|
|
262
265
|
display: flex;
|
|
263
266
|
height: 22px;
|
|
264
267
|
position: absolute;
|
|
@@ -107,6 +107,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
107
107
|
_highlight: { type: Boolean, reflect: true },
|
|
108
108
|
_highlighting: { type: Boolean, reflect: true },
|
|
109
109
|
_listItemInteractiveEnabled: { type: Boolean, reflect: true, attribute: '_list-item-interactive-enabled' },
|
|
110
|
+
_listItemNewStyles: { type: Boolean, reflect: true, attribute: '_list-item-new-styles' },
|
|
110
111
|
_showAddButton: { type: Boolean, attribute: '_show-add-button', reflect: true },
|
|
111
112
|
_siblingHasColor: { state: true },
|
|
112
113
|
};
|
|
@@ -320,11 +321,16 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
320
321
|
:host([_hovering-selection]) [slot="outside-control-container"],
|
|
321
322
|
:host([_focusing-primary-action]) [slot="outside-control-container"],
|
|
322
323
|
:host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection]) [slot="outside-control-container"],
|
|
323
|
-
:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"],
|
|
324
|
-
:host(:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing
|
|
324
|
+
:host(:not([_list-item-new-styles]):not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"],
|
|
325
|
+
:host([_list-item-new-styles]:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing]:not([current])) [slot="outside-control-container"] {
|
|
325
326
|
border-color: ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')}; /* stylelint-disable-line */
|
|
326
327
|
margin-bottom: -1px;
|
|
327
328
|
}
|
|
329
|
+
/* clean up with GAUD-7495-list-item-new-styles flag */
|
|
330
|
+
:host(:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing-elem]:not([current])) [slot="outside-control-container"] {
|
|
331
|
+
border-color: var(--d2l-color-mica);
|
|
332
|
+
margin-bottom: -1px;
|
|
333
|
+
}
|
|
328
334
|
/* below hides the border under the d2l-button-add */
|
|
329
335
|
:host([_hovering-control]) [slot="outside-control-container"].hide-bottom-border,
|
|
330
336
|
:host([_hovering-primary-action]) [slot="outside-control-container"].hide-bottom-border,
|
|
@@ -332,14 +338,22 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
332
338
|
:host([_focusing-primary-action]) [slot="outside-control-container"].hide-bottom-border,
|
|
333
339
|
:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"].hide-bottom-border,
|
|
334
340
|
:host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection]) [slot="outside-control-container"].hide-bottom-border,
|
|
335
|
-
:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"].hide-bottom-border,
|
|
336
|
-
:host(:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing
|
|
341
|
+
:host(:not([_list-item-new-styles]):not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"].hide-bottom-border,
|
|
342
|
+
:host([_list-item-new-styles]:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing]) [slot="outside-control-container"].hide-bottom-border {
|
|
337
343
|
background-clip: content-box, border-box;
|
|
338
344
|
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 */
|
|
339
345
|
background-origin: border-box;
|
|
340
346
|
border: double 1px transparent;
|
|
341
347
|
border-radius: 6px;
|
|
342
348
|
}
|
|
349
|
+
/* clean up with GAUD-7495-list-item-new-styles flag */
|
|
350
|
+
:host(:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing-elem]) [slot="outside-control-container"].hide-bottom-border {
|
|
351
|
+
background-clip: content-box, border-box;
|
|
352
|
+
background-image: linear-gradient(white, white), linear-gradient(to right, var(--d2l-color-mica) 20%, transparent 20%, transparent 80%, var(--d2l-color-mica) 80%);
|
|
353
|
+
background-origin: border-box;
|
|
354
|
+
border: double 1px transparent;
|
|
355
|
+
border-radius: 6px;
|
|
356
|
+
}
|
|
343
357
|
:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"].hide-bottom-border {
|
|
344
358
|
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 */
|
|
345
359
|
}
|
|
@@ -463,6 +477,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
463
477
|
this._hasColorSlot = false;
|
|
464
478
|
this._hasNestedList = false;
|
|
465
479
|
this._listItemInteractiveEnabled = listItemInteractiveFlag;
|
|
480
|
+
this._listItemNewStyles = useNewStylesFlag;
|
|
466
481
|
this._siblingHasColor = false;
|
|
467
482
|
}
|
|
468
483
|
|
|
@@ -113,7 +113,8 @@ export const ListItemNavButtonMixin = superclass => class extends ListItemButton
|
|
|
113
113
|
super._onButtonClick(e);
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
-
#handleFocusIn() {
|
|
116
|
+
#handleFocusIn(e) {
|
|
117
|
+
e.stopPropagation(); // prevent _focusing from being set on the parent
|
|
117
118
|
requestAnimationFrame(() => {
|
|
118
119
|
const activeElement = getComposedActiveElement();
|
|
119
120
|
const parentListItem = findComposedAncestor(activeElement, (node) => node.role === 'row' || node.role === 'listitem');
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css, unsafeCSS } from 'lit';
|
|
3
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
3
4
|
|
|
4
5
|
export const _isValidCssSelector = (selector) => {
|
|
5
6
|
const partIsValid = (part) => {
|
|
@@ -361,6 +362,16 @@ export const _generateLabelStyles = (selector, includeSkeleton = true) => {
|
|
|
361
362
|
};
|
|
362
363
|
export const labelStyles = _generateLabelStyles('.d2l-label-text', true);
|
|
363
364
|
|
|
365
|
+
const quoteIcon = svgToCSS(`<svg width="11" height="11" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
366
|
+
<defs>
|
|
367
|
+
<path id="a" d="M0 0h24v24H0z"/>
|
|
368
|
+
</defs>
|
|
369
|
+
<g transform="translate(-1 -1)" fill="none" fill-rule="evenodd">
|
|
370
|
+
<mask id="b" fill="#fff"><use xlink:href="#a"/></mask>
|
|
371
|
+
<path d="M6 22.667A4.667 4.667 0 0 0 10.667 18c0-1.227-.559-2.5-1.334-3.333C8.481 13.75 7.35 13.333 6 13.333c-.411 0 1.333-6.666 3-9 1.667-2.333 1.333-3 .333-3C8 1.333 5.253 4.586 4 7.255 1.773 12 1.333 15.392 1.333 18A4.667 4.667 0 0 0 6 22.667zm12 0A4.667 4.667 0 0 0 22.667 18c0-1.227-.559-2.5-1.334-3.333-.852-.917-1.983-1.334-3.333-1.334-.411 0 1.333-6.666 3-9 1.667-2.333 1.333-3 .333-3-1.333 0-4.08 3.253-5.333 5.922C13.773 12 13.333 15.392 13.333 18A4.667 4.667 0 0 0 18 22.667z" fill="#D3D9E3" mask="url(#b)"/>
|
|
372
|
+
</g>
|
|
373
|
+
</svg>`);
|
|
374
|
+
|
|
364
375
|
/**
|
|
365
376
|
* A private helper method that should not be used by general consumers
|
|
366
377
|
*/
|
|
@@ -380,7 +391,7 @@ export const _generateBlockquoteStyles = (selector) => {
|
|
|
380
391
|
position: relative;
|
|
381
392
|
}
|
|
382
393
|
${selector}::before {
|
|
383
|
-
content:
|
|
394
|
+
content: ${quoteIcon};
|
|
384
395
|
inset-block-start: 0;
|
|
385
396
|
inset-inline-start: 0;
|
|
386
397
|
position: absolute;
|
package/helpers/prism.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { css, unsafeCSS } from 'lit';
|
|
2
|
+
import { svgToCSS } from './svg-to-css.js';
|
|
2
3
|
|
|
3
4
|
const prismLocation = 'https://s.brightspace.com/lib/prismjs/1.28.0';
|
|
4
5
|
//const prismLocation = '/node_modules/prismjs'; // for local debugging
|
|
@@ -145,6 +146,11 @@ const generateColorVariables = (mode, theme) => {
|
|
|
145
146
|
`;
|
|
146
147
|
};
|
|
147
148
|
|
|
149
|
+
const transparentIcon = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
|
|
150
|
+
<path fill="gray" d="M0 0h2v2H0z"/>
|
|
151
|
+
<path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
|
152
|
+
</svg>`);
|
|
153
|
+
|
|
148
154
|
export const codeStyles = css`
|
|
149
155
|
|
|
150
156
|
${unsafeCSS(generateColorVariables(colorModes.LIGHT))}
|
|
@@ -301,7 +307,7 @@ export const codeStyles = css`
|
|
|
301
307
|
* <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
|
302
308
|
* </svg>
|
|
303
309
|
*/
|
|
304
|
-
background:
|
|
310
|
+
background: ${transparentIcon};
|
|
305
311
|
/* Prevent visual glitches where one pixel from the repeating pattern could be seen */
|
|
306
312
|
background-position: center;
|
|
307
313
|
background-size: 110%;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.132.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",
|