@neo4j-ndl/base 1.8.5 → 1.8.7
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 +12 -0
- package/lib/cjs/tokens/js/storybook-design-token.js +1 -1
- package/lib/cjs/tokens/js/tokens-esm.js +1 -1
- package/lib/cjs/tokens/js/tokens.js +1 -1
- package/lib/esm/tokens/js/storybook-design-token.js +1 -1
- package/lib/esm/tokens/js/tokens-esm.js +1 -1
- package/lib/esm/tokens/js/tokens.js +1 -1
- package/lib/neo4j-ds-styles.css +29 -10
- package/lib/tokens/css/tokens.css +1 -1
- package/lib/tokens/js/tokens-raw.js +1 -1
- package/lib/tokens/js/tokens.js +1 -1
- package/lib/tokens/scss/tokens.scss +1 -1
- package/lib/types/tokens/js/storybook-design-token.d.ts +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 1.8.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 7aac73a: fix switch styles on pressed state
|
|
8
|
+
|
|
9
|
+
## 1.8.6
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 7f3fcac: added checked icon mark in switch component for better accessibility
|
|
14
|
+
|
|
3
15
|
## 1.8.5
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/lib/neo4j-ds-styles.css
CHANGED
|
@@ -459,7 +459,7 @@ video {
|
|
|
459
459
|
*/
|
|
460
460
|
/**
|
|
461
461
|
* Do not edit directly
|
|
462
|
-
* Generated on
|
|
462
|
+
* Generated on Wed, 12 Jul 2023 08:50:09 GMT
|
|
463
463
|
*/
|
|
464
464
|
:root {
|
|
465
465
|
--transitions-values-properties-default: all;
|
|
@@ -1944,40 +1944,40 @@ a.ndl-btn{
|
|
|
1944
1944
|
box-sizing: content-box;
|
|
1945
1945
|
transition: background-color var(--transitions-stripped);
|
|
1946
1946
|
}
|
|
1947
|
-
.ndl-form-item input[type='checkbox'][role='switch']:
|
|
1947
|
+
.ndl-form-item input[type='checkbox'][role='switch']:active:checked{
|
|
1948
1948
|
outline: 2px solid transparent;
|
|
1949
1949
|
outline-offset: 2px;
|
|
1950
1950
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1951
1951
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
1952
1952
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
1953
|
-
--tw-ring-color: var(--palette-primary-
|
|
1953
|
+
--tw-ring-color: var(--palette-primary-pressed-weak);
|
|
1954
1954
|
--tw-ring-offset-width: 1px;
|
|
1955
1955
|
}
|
|
1956
|
-
.ndl-form-item input[type='checkbox'][role='switch']:
|
|
1956
|
+
.ndl-form-item input[type='checkbox'][role='switch']:active:not(:checked){
|
|
1957
1957
|
outline: 2px solid transparent;
|
|
1958
1958
|
outline-offset: 2px;
|
|
1959
1959
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1960
1960
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
1961
1961
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
1962
|
-
--tw-ring-color: var(--palette-neutral-
|
|
1962
|
+
--tw-ring-color: var(--palette-neutral-pressed);
|
|
1963
1963
|
--tw-ring-offset-width: 1px;
|
|
1964
1964
|
}
|
|
1965
|
-
.ndl-form-item input[type='checkbox'][role='switch']:
|
|
1965
|
+
.ndl-form-item input[type='checkbox'][role='switch']:hover:checked:not(:disabled):not(:active){
|
|
1966
1966
|
outline: 2px solid transparent;
|
|
1967
1967
|
outline-offset: 2px;
|
|
1968
1968
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1969
1969
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
1970
1970
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
1971
|
-
--tw-ring-color: var(--palette-primary-
|
|
1971
|
+
--tw-ring-color: var(--palette-primary-hover-weak);
|
|
1972
1972
|
--tw-ring-offset-width: 1px;
|
|
1973
1973
|
}
|
|
1974
|
-
.ndl-form-item input[type='checkbox'][role='switch']:
|
|
1974
|
+
.ndl-form-item input[type='checkbox'][role='switch']:hover:not(:checked):not(:disabled):not(:active){
|
|
1975
1975
|
outline: 2px solid transparent;
|
|
1976
1976
|
outline-offset: 2px;
|
|
1977
1977
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1978
1978
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
1979
1979
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
1980
|
-
--tw-ring-color: var(--palette-neutral-
|
|
1980
|
+
--tw-ring-color: var(--palette-neutral-hover);
|
|
1981
1981
|
--tw-ring-offset-width: 1px;
|
|
1982
1982
|
}
|
|
1983
1983
|
.ndl-form-item input[type='checkbox'][role='switch']:focus-visible:enabled:not(:disabled){
|
|
@@ -1989,13 +1989,13 @@ a.ndl-btn{
|
|
|
1989
1989
|
.ndl-form-item input[type='checkbox'][role='switch']::before {
|
|
1990
1990
|
inline-size: var(--thumb-size);
|
|
1991
1991
|
block-size: var(--thumb-size);
|
|
1992
|
-
border-radius: 9999px;
|
|
1993
1992
|
|
|
1994
1993
|
transition: transform var(--transitions-stripped),
|
|
1995
1994
|
box-shadow var(--transitions-stripped);
|
|
1996
1995
|
content: '';
|
|
1997
1996
|
grid-area: track;
|
|
1998
1997
|
transform: translateX(0);
|
|
1998
|
+
border-radius: 9999px;
|
|
1999
1999
|
background-color: rgb(var(--palette-neutral-bg-weak));
|
|
2000
2000
|
--tw-shadow: 0px 1px 2px 0px rgba(12, 26, 37, 0.18);
|
|
2001
2001
|
--tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
|
|
@@ -2006,6 +2006,25 @@ a.ndl-btn{
|
|
|
2006
2006
|
}
|
|
2007
2007
|
.ndl-form-item input[type='checkbox'][role='switch']::after {
|
|
2008
2008
|
content: '';
|
|
2009
|
+
opacity: 0;
|
|
2010
|
+
}
|
|
2011
|
+
.ndl-form-item input[type='checkbox'][role='switch']:checked::after {
|
|
2012
|
+
content: '';
|
|
2013
|
+
opacity: 1;
|
|
2014
|
+
transition: opacity var(--transitions-stripped);
|
|
2015
|
+
background-color: rgb(var(--palette-primary-text));
|
|
2016
|
+
width: 100%;
|
|
2017
|
+
height: 100%;
|
|
2018
|
+
/* Trick to make CSS variables work properly with SVG masks */
|
|
2019
|
+
/* Source: https://stackoverflow.com/a/76006610/3247715 */
|
|
2020
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 6.375L5.25 9.375L9.75 2.625' stroke='%23006FD6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
2021
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 6.375L5.25 9.375L9.75 2.625' stroke='%23006FD6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
2022
|
+
-webkit-mask-repeat: no-repeat;
|
|
2023
|
+
mask-repeat: no-repeat;
|
|
2024
|
+
-webkit-mask-size: 12px;
|
|
2025
|
+
mask-size: 12px;
|
|
2026
|
+
-webkit-mask-position: calc(100% - 4px) 5px;
|
|
2027
|
+
mask-position: calc(100% - 4px) 5px;
|
|
2009
2028
|
}
|
|
2010
2029
|
.ndl-form-item input[type='checkbox'][role='switch']:checked{
|
|
2011
2030
|
background-color: rgb(var(--palette-primary-icon));
|
package/lib/tokens/js/tokens.js
CHANGED