@brightspace-ui/core 3.68.0 → 3.70.0

Sign up to get free protection for your applications and to get access to all the features.
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"