@hashicorp/design-system-components 0.3.0 → 0.3.1
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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @hashicorp/design-system-components
|
|
2
2
|
|
|
3
|
+
## 0.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#98](https://github.com/hashicorp/design-system/pull/98) [`411cd9b9`](https://github.com/hashicorp/design-system/commit/411cd9b949e376d38eb1dc4d4af93ae17e6c686a) Thanks [@didoo](https://github.com/didoo)! - refactored the “focus-ring” mixins to support both “action” (default) and “critical“ colors
|
|
8
|
+
|
|
9
|
+
- Updated dependencies [[`411cd9b9`](https://github.com/hashicorp/design-system/commit/411cd9b949e376d38eb1dc4d4af93ae17e6c686a)]:
|
|
10
|
+
- @hashicorp/design-system-tokens@0.7.0
|
|
11
|
+
|
|
3
12
|
## 0.3.0
|
|
4
13
|
|
|
5
14
|
### Minor Changes
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
// - https://github.com/hashicorp/design-system-components/issues/161
|
|
3
3
|
// - https://www.tpgi.com/focus-visible-and-backwards-compatibility/
|
|
4
4
|
|
|
5
|
-
@mixin hds-focus-ring-basic() {
|
|
5
|
+
@mixin hds-focus-ring-basic($color: action) {
|
|
6
6
|
outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
|
|
7
7
|
outline-color: transparent;
|
|
8
8
|
|
|
9
9
|
// default focus for browsers that still rely on ":focus"
|
|
10
10
|
&:focus,
|
|
11
11
|
&.is-focus {
|
|
12
|
-
box-shadow: var(--token-focus-ring-box-shadow);
|
|
12
|
+
box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
|
|
13
13
|
}
|
|
14
14
|
// undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
|
|
15
15
|
&:focus:not(:focus-visible) {
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
}
|
|
18
18
|
// set focus for browsers that support ":focus-visible"
|
|
19
19
|
&:focus-visible {
|
|
20
|
-
box-shadow: var(--token-focus-ring-box-shadow);
|
|
20
|
+
box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
|
|
21
21
|
}
|
|
22
22
|
// remove the focus ring on "active + focused" state (by design)
|
|
23
23
|
&:focus:active,
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
@mixin hds-focus-ring-with-pseudo-element($top: 0, $right: 0, $bottom: 0, $left: 0, $radius: 5px) {
|
|
29
|
+
@mixin hds-focus-ring-with-pseudo-element($top: 0, $right: 0, $bottom: 0, $left: 0, $radius: 5px, $color: action) {
|
|
30
30
|
isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
|
|
31
31
|
outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
|
|
32
32
|
outline-color: transparent;
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
&:focus,
|
|
49
49
|
&.is-focus {
|
|
50
50
|
&::before {
|
|
51
|
-
box-shadow: var(--token-focus-ring-box-shadow);
|
|
51
|
+
box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
// undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
// set focus for browsers that support ":focus-visible"
|
|
61
61
|
&:focus-visible {
|
|
62
62
|
&::before {
|
|
63
|
-
box-shadow: var(--token-focus-ring-box-shadow);
|
|
63
|
+
box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
// remove the focus ring on "active + focused" state (by design)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hashicorp/design-system-components",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "HashiCorp Design System Components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"hashicorp",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"test:ember:percy": "percy exec ember test"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@hashicorp/design-system-tokens": "^0.
|
|
37
|
+
"@hashicorp/design-system-tokens": "^0.7.0",
|
|
38
38
|
"@hashicorp/ember-flight-icons": "^2.0.1",
|
|
39
39
|
"ember-auto-import": "^2.2.3",
|
|
40
40
|
"ember-cli-babel": "^7.26.6",
|