@brightspace-ui/core 3.68.0 → 3.70.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/inputs/sass/checkbox.scss +4 -4
  2. package/components/inputs/sass/radio.scss +5 -5
  3. package/components/inputs/sass/select.scss +6 -6
  4. package/components/inputs/sass/text.scss +6 -6
  5. package/components/inputs/sass/textarea.scss +4 -4
  6. package/components/link/link.scss +6 -6
  7. package/components/typography/typography.scss +3 -3
  8. package/package.json +3 -3
package/components/inputs/sass/checkbox.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import "../../colors/colors.scss";
1
+ @use "../../colors/colors.scss";
2
2
 
3
3
  @mixin d2l-input-checkbox() {
4
4
  -webkit-appearance: none;
@@ -21,13 +21,13 @@
21
21
  }
22
22
  &,
23
23
  &:hover:disabled {
24
- background-color: $d2l-color-regolith;
25
- border-color: $d2l-color-galena;
24
+ background-color: colors.$d2l-color-regolith;
25
+ border-color: colors.$d2l-color-galena;
26
26
  border-width: 1px;
27
27
  }
28
28
  &:hover,
29
29
  &:focus {
30
- border-color: $d2l-color-celestine;
30
+ border-color: colors.$d2l-color-celestine;
31
31
  border-width: 2px;
32
32
  outline-width: 0;
33
33
  }
package/components/inputs/sass/radio.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import "../../colors/colors.scss";
1
+ @use "../../colors/colors.scss";
2
2
 
3
3
  @mixin d2l-input-radio() {
4
4
  -webkit-appearance: none;
@@ -21,18 +21,18 @@
21
21
  }
22
22
  &,
23
23
  &:hover:disabled {
24
- background-color: $d2l-color-regolith;
25
- border-color: $d2l-color-galena;
24
+ background-color: colors.$d2l-color-regolith;
25
+ border-color: colors.$d2l-color-galena;
26
26
  border-width: 1px;
27
27
  }
28
28
  &:hover,
29
29
  &:focus {
30
- border-color: $d2l-color-celestine;
30
+ border-color: colors.$d2l-color-celestine;
31
31
  border-width: 2px;
32
32
  outline-width: 0;
33
33
  }
34
34
  &[aria-invalid="true"] {
35
- border-color: $d2l-color-cinnabar;
35
+ border-color: colors.$d2l-color-cinnabar;
36
36
  }
37
37
  &:disabled {
38
38
  opacity: 0.5;
package/components/inputs/sass/select.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import "../../colors/colors.scss";
1
+ @use "../../colors/colors.scss";
2
2
 
3
3
  @mixin d2l-input-select() {
4
4
  -webkit-appearance: none;
@@ -11,7 +11,7 @@
11
11
  border-radius: 0.3rem;
12
12
  border-style: solid;
13
13
  box-sizing: border-box;
14
- color: $d2l-color-ferrite;
14
+ color: colors.$d2l-color-ferrite;
15
15
  display: inline-block;
16
16
  font-family: inherit;
17
17
  font-size: 0.8rem;
@@ -25,7 +25,7 @@
25
25
  &,
26
26
  &:hover:disabled {
27
27
  background-color: #ffffff;
28
- border-color: $d2l-color-galena;
28
+ border-color: colors.$d2l-color-galena;
29
29
  border-width: 1px;
30
30
  box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
31
31
  padding: 0.4rem 0.75rem;
@@ -44,7 +44,7 @@
44
44
  }
45
45
  &:hover,
46
46
  &:focus {
47
- border-color: $d2l-color-celestine;
47
+ border-color: colors.$d2l-color-celestine;
48
48
  border-width: 2px;
49
49
  outline-style: none; /* Safari */
50
50
  outline-width: 0;
@@ -56,7 +56,7 @@
56
56
  background-position: center right 17px, center right calc(1px + 11px + 17px);
57
57
  background-repeat: no-repeat, no-repeat;
58
58
  background-size: 11px 7px, 0.8rem 0.8rem;
59
- border-color: $d2l-color-cinnabar;
59
+ border-color: colors.$d2l-color-cinnabar;
60
60
  }
61
61
  &:disabled {
62
62
  opacity: 0.5;
@@ -65,7 +65,7 @@
65
65
  &:focus::-ms-value,
66
66
  &:hover::-ms-value {
67
67
  background-color: transparent;
68
- color: $d2l-color-ferrite;
68
+ color: colors.$d2l-color-ferrite;
69
69
  }
70
70
  /* IE11 to hide the native chevron */
71
71
  &::-ms-expand {
package/components/inputs/sass/text.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import "../../colors/colors.scss";
1
+ @use "../../colors/colors.scss";
2
2
 
3
3
  @mixin d2l-input-text(
4
4
  $include-pseudo-classes: true,
@@ -12,7 +12,7 @@
12
12
  border-width: 1px;
13
13
  box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2), /* corundum */;
14
14
  box-sizing: border-box;
15
- color: $d2l-color-ferrite;
15
+ color: colors.$d2l-color-ferrite;
16
16
  display: inline-block;
17
17
  font-family: inherit;
18
18
  font-size: 0.8rem;
@@ -27,26 +27,26 @@
27
27
  width: 100%;
28
28
  &::placeholder,
29
29
  &::-ms-input-placeholder {
30
- color: $d2l-color-galena;
30
+ color: colors.$d2l-color-galena;
31
31
  font-size: 0.8rem;
32
32
  font-weight: 400;
33
33
  opacity: 1; /* Firefox has non-1 default */
34
34
  }
35
35
  &:hover,
36
36
  &:focus {
37
- border-color: $d2l-color-celestine;
37
+ border-color: colors.$d2l-color-celestine;
38
38
  border-width: 2px;
39
39
  outline-style: none;
40
40
  outline-width: 0;
41
41
  padding: $padding-focus;
42
42
  }
43
43
  &[aria-invalid="true"] {
44
- border-color: $d2l-color-cinnabar;
44
+ border-color: colors.$d2l-color-cinnabar;
45
45
  }
46
46
  &,
47
47
  &:hover:disabled,
48
48
  &[aria-invalid="true"]:disabled {
49
- border-color: $d2l-color-galena;
49
+ border-color: colors.$d2l-color-galena;
50
50
  border-width: 1px;
51
51
  padding: $padding;
52
52
  }
package/components/inputs/sass/textarea.scss CHANGED
@@ -1,14 +1,14 @@
1
- @import "../../colors/colors.scss";
2
- @import "./text.scss";
1
+ @use "../../colors/colors.scss";
2
+ @use "./text.scss";
3
3
 
4
4
  @mixin d2l-input-textarea() {
5
- @include d2l-input-text(
5
+ overflow: auto;
6
+ @include text.d2l-input-text(
6
7
  $include-pseudo-classes: false,
7
8
  $line-height: normal,
8
9
  $padding: 0.5rem 0.75rem,
9
10
  $padding-focus: calc(0.5rem - 1px) calc(0.75rem - 1px)
10
11
  );
11
- overflow: auto;
12
12
  &[aria-invalid="true"] {
13
13
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBmaWxsPSIjY2QyMDI2IiBkPSJNMTcuNzkgMTUuMTFsLTctMTRhMiAyIDAgMCAwLTMuNTggMGwtNyAxNGExLjk3NSAxLjk3NSAwIDAgMCAuMDkgMS45NEEyIDIgMCAwIDAgMiAxOGgxNGExLjk5NCAxLjk5NCAwIDAgMCAxLjctLjk1IDEuOTY3IDEuOTY3IDAgMCAwIC4wOS0xLjk0ek05IDE2YTEuNSAxLjUgMCAxIDEgMS41LTEuNUExLjUgMS41IDAgMCAxIDkgMTZ6bS45OC00LjgwNmExIDEgMCAwIDEtMS45NiAwbC0uOTktNUExIDEgMCAwIDEgOC4wMSA1aDEuOTgzYTEgMSAwIDAgMSAuOTggMS4xOTR6Ii8+Cjwvc3ZnPgo=");
14
14
  background-position: top 12px right 18px;
package/components/link/link.scss CHANGED
@@ -1,27 +1,27 @@
1
- @import "../colors/colors.scss";
1
+ @use "../colors/colors.scss";
2
2
 
3
3
  @mixin d2l-link() {
4
4
  &,
5
5
  &:visited,
6
6
  &:link,
7
7
  &:active {
8
- color: $d2l-color-celestine;
8
+ color: colors.$d2l-color-celestine;
9
9
  cursor: pointer;
10
10
  text-decoration: none;
11
11
  }
12
12
  &:hover {
13
- color: $d2l-color-celestine-minus-1;
13
+ color: colors.$d2l-color-celestine-minus-1;
14
14
  text-decoration: underline;
15
15
  }
16
16
  &:focus-visible {
17
17
  border-radius: 2px;
18
- outline: 2px solid $d2l-color-celestine;
18
+ outline: 2px solid colors.$d2l-color-celestine;
19
19
  outline-offset: 1px;
20
20
  text-decoration: underline;
21
21
  }
22
22
  .d2l-focus-visible-not-supported &:focus {
23
23
  border-radius: 2px;
24
- outline: 2px solid $d2l-color-celestine;
24
+ outline: 2px solid colors.$d2l-color-celestine;
25
25
  outline-offset: 1px;
26
26
  text-decoration: underline;
27
27
  }
@@ -36,7 +36,7 @@
36
36
  }
37
37
  @media print {
38
38
  &, &:visited, &:link, &:active {
39
- color: $d2l-color-ferrite;
39
+ color: colors.$d2l-color-ferrite;
40
40
  }
41
41
  }
42
42
  }
package/components/typography/typography.scss CHANGED
@@ -1,8 +1,8 @@
1
- @import "../colors/colors.scss";
1
+ @use "../colors/colors.scss";
2
2
 
3
3
  @mixin d2l-typography {
4
4
 
5
- color: $d2l-color-ferrite;
5
+ color: colors.$d2l-color-ferrite;
6
6
  display: block;
7
7
  font-family: "Lato", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
8
8
  font-size: 0.95rem;
@@ -108,7 +108,7 @@
108
108
  }
109
109
 
110
110
  @mixin d2l-body-small {
111
- color: $d2l-color-tungsten;
111
+ color: colors.$d2l-color-tungsten;
112
112
  font-size: 0.7rem;
113
113
  font-weight: 400;
114
114
  line-height: 1rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.68.0",
3
+ "version": "3.70.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",
@@ -11,7 +11,7 @@
11
11
  "build:clean": "node ./cli/clean.js",
12
12
  "build:icons": "node ./cli/icon-generator.js",
13
13
  "build:illustrations": "node ./cli/empty-state-illustration-generator.js",
14
- "build:sass": "node-sass --output-style expanded ./test/sass.scss > ./test/sass.output.css",
14
+ "build:sass": "sass ./test/sass.scss > ./test/sass.output.css",
15
15
  "build:wca": "wca analyze \"{components,templates}/**/*.js\" --format json --outFile custom-elements.json",
16
16
  "build": "npm run build:clean && npm run build:icons && npm run build:illustrations && npm run build:sass && npm run build:wca",
17
17
  "build-static": "rollup -c ./rollup/rollup.config.js",
@@ -59,10 +59,10 @@
59
59
  "eslint-config-brightspace": "^1.2.1",
60
60
  "glob-all": "^3",
61
61
  "messageformat-validator": "^2",
62
- "node-sass": "^9",
63
62
  "rollup": "^4",
64
63
  "rollup-plugin-copy": "^3",
65
64
  "rollup-plugin-delete": "^2",
65
+ "sass": "^1",
66
66
  "sinon": "^19",
67
67
  "stylelint": "^16",
68
68
  "web-component-analyzer": "^2"