@neo4j-ndl/base 3.2.11 → 3.3.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/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 +140 -165
- 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/lib/neo4j-ds-styles.css
CHANGED
|
@@ -1228,13 +1228,11 @@ h6,
|
|
|
1228
1228
|
font-weight:700;
|
|
1229
1229
|
outline:2px solid transparent;
|
|
1230
1230
|
outline-offset:2px;
|
|
1231
|
-
--tw-ring-color:rgb(var(--theme-palette-primary-focus));
|
|
1232
1231
|
}
|
|
1233
1232
|
.ndl-btn:focus-visible {
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
--tw-ring-offset-width:2px;
|
|
1233
|
+
outline-width:2px;
|
|
1234
|
+
outline-offset:2px;
|
|
1235
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
1238
1236
|
}
|
|
1239
1237
|
.ndl-btn.ndl-loading {
|
|
1240
1238
|
cursor:default;
|
|
@@ -1323,33 +1321,16 @@ a.ndl-btn {
|
|
|
1323
1321
|
gap:2px;
|
|
1324
1322
|
border-radius:8px;
|
|
1325
1323
|
color:rgb(var(--theme-palette-neutral-text-weak));
|
|
1324
|
+
outline:2px solid transparent;
|
|
1325
|
+
outline-offset:2px;
|
|
1326
|
+
}
|
|
1327
|
+
.ndl-icon-btn:focus-visible {
|
|
1328
|
+
outline-width:2px;
|
|
1329
|
+
outline-offset:2px;
|
|
1330
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
1326
1331
|
}
|
|
1327
1332
|
.ndl-icon-btn:not(.ndl-clean) {
|
|
1328
1333
|
background-color:rgb(var(--theme-palette-neutral-bg-weak));
|
|
1329
|
-
--tw-ring-color:rgb(var(--theme-palette-primary-focus));
|
|
1330
|
-
}
|
|
1331
|
-
.ndl-icon-btn:not(.ndl-clean):focus {
|
|
1332
|
-
outline-width:0px;
|
|
1333
|
-
}
|
|
1334
|
-
.ndl-icon-btn:not(.ndl-clean):focus-visible {
|
|
1335
|
-
outline-width:0px;
|
|
1336
|
-
--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1337
|
-
--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
1338
|
-
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
1339
|
-
--tw-ring-offset-width:2px;
|
|
1340
|
-
}
|
|
1341
|
-
.ndl-icon-btn.ndl-clean {
|
|
1342
|
-
--tw-ring-color:rgb(var(--theme-palette-primary-focus));
|
|
1343
|
-
}
|
|
1344
|
-
.ndl-icon-btn.ndl-clean:focus {
|
|
1345
|
-
outline-width:0px;
|
|
1346
|
-
}
|
|
1347
|
-
.ndl-icon-btn.ndl-clean:focus-visible {
|
|
1348
|
-
outline-width:0px;
|
|
1349
|
-
--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1350
|
-
--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
1351
|
-
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
1352
|
-
--tw-ring-offset-width:0px;
|
|
1353
1334
|
}
|
|
1354
1335
|
.ndl-icon-btn.ndl-danger {
|
|
1355
1336
|
color:rgb(var(--theme-palette-danger-icon));
|
|
@@ -1647,13 +1628,12 @@ a.ndl-btn {
|
|
|
1647
1628
|
.ndl-tabs .ndl-tab.ndl-filled-tab.ndl-disabled {
|
|
1648
1629
|
color:rgb(var(--theme-palette-neutral-text-weakest));
|
|
1649
1630
|
}
|
|
1650
|
-
.ndl-tabs .ndl-tab.ndl-filled-tab:focus-visible{
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
}
|
|
1631
|
+
.ndl-tabs .ndl-tab.ndl-filled-tab:focus-visible {
|
|
1632
|
+
outline-style:solid;
|
|
1633
|
+
outline-width:2px;
|
|
1634
|
+
outline-offset:-2px;
|
|
1635
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
1636
|
+
}
|
|
1657
1637
|
.ndl-tabs .ndl-tab.ndl-filled-tab:hover:not(.ndl-disabled):not(.ndl-selected){
|
|
1658
1638
|
background-color:rgb(var(--theme-palette-neutral-hover));
|
|
1659
1639
|
}
|
|
@@ -2043,47 +2023,40 @@ a.ndl-btn {
|
|
|
2043
2023
|
box-sizing:content-box;
|
|
2044
2024
|
transition:background-color var(--transitions-stripped-quick);
|
|
2045
2025
|
}
|
|
2046
|
-
.ndl-form-item input[type='checkbox'][role='switch']:
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
2051
|
-
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2052
|
-
--tw-ring-color:rgb(var(--theme-palette-primary-pressed-weak));
|
|
2053
|
-
--tw-ring-offset-width:1px;
|
|
2026
|
+
.ndl-form-item input[type='checkbox'][role='switch']:disabled {
|
|
2027
|
+
cursor:not-allowed;
|
|
2028
|
+
background-color:rgb(var(--theme-palette-neutral-bg-strong));
|
|
2029
|
+
outline-width:0px;
|
|
2054
2030
|
}
|
|
2055
|
-
.ndl-form-item input[type='checkbox'][role='switch']:
|
|
2056
|
-
outline:
|
|
2057
|
-
outline-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2061
|
-
--tw-ring-color:rgb(var(--theme-palette-neutral-pressed));
|
|
2062
|
-
--tw-ring-offset-width:1px;
|
|
2031
|
+
.ndl-form-item input[type='checkbox'][role='switch']:not(:disabled):active:checked {
|
|
2032
|
+
outline-style:solid;
|
|
2033
|
+
outline-width:3px;
|
|
2034
|
+
outline-offset:0px;
|
|
2035
|
+
outline-color:rgb(var(--theme-palette-primary-pressed-weak));
|
|
2063
2036
|
}
|
|
2064
|
-
.ndl-form-item input[type='checkbox'][role='switch']:
|
|
2065
|
-
outline:
|
|
2066
|
-
outline-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2070
|
-
--tw-ring-color:rgb(var(--theme-palette-primary-hover-weak));
|
|
2071
|
-
--tw-ring-offset-width:1px;
|
|
2037
|
+
.ndl-form-item input[type='checkbox'][role='switch']:not(:disabled):active:not(:checked) {
|
|
2038
|
+
outline-style:solid;
|
|
2039
|
+
outline-width:3px;
|
|
2040
|
+
outline-offset:0px;
|
|
2041
|
+
outline-color:rgb(var(--theme-palette-neutral-pressed));
|
|
2072
2042
|
}
|
|
2073
|
-
.ndl-form-item input[type='checkbox'][role='switch']:
|
|
2074
|
-
outline:
|
|
2075
|
-
outline-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2043
|
+
.ndl-form-item input[type='checkbox'][role='switch']:not(:disabled):hover:checked:not(:active) {
|
|
2044
|
+
outline-style:solid;
|
|
2045
|
+
outline-width:3px;
|
|
2046
|
+
outline-offset:0px;
|
|
2047
|
+
outline-color:rgb(var(--theme-palette-primary-hover-weak));
|
|
2048
|
+
}
|
|
2049
|
+
.ndl-form-item input[type='checkbox'][role='switch']:not(:disabled):hover:not(:checked):not(:active) {
|
|
2050
|
+
outline-style:solid;
|
|
2051
|
+
outline-width:3px;
|
|
2052
|
+
outline-offset:0px;
|
|
2053
|
+
outline-color:rgb(var(--theme-palette-neutral-hover));
|
|
2081
2054
|
}
|
|
2082
|
-
.ndl-form-item input[type='checkbox'][role='switch']:focus-visible:enabled
|
|
2055
|
+
.ndl-form-item input[type='checkbox'][role='switch']:not(:disabled):focus-visible:enabled {
|
|
2083
2056
|
outline-style:solid;
|
|
2084
2057
|
outline-width:2px;
|
|
2085
2058
|
outline-offset:1px;
|
|
2086
|
-
outline-color:rgb(var(--theme-palette-primary-
|
|
2059
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
2087
2060
|
}
|
|
2088
2061
|
.ndl-form-item input[type='checkbox'][role='switch']::before{
|
|
2089
2062
|
inline-size:var(--thumb-size);
|
|
@@ -2128,25 +2101,11 @@ a.ndl-btn {
|
|
|
2128
2101
|
.ndl-form-item input[type='checkbox'][role='switch']:checked::before{
|
|
2129
2102
|
transform:translateX(calc(var(--track-size) - var(--thumb-size)));
|
|
2130
2103
|
}
|
|
2131
|
-
.ndl-form-item input[type='checkbox'][role='switch']:indeterminate {
|
|
2132
|
-
background-color:rgb(var(--theme-palette-neutral-bg-strong));
|
|
2133
|
-
}
|
|
2134
2104
|
.ndl-form-item input[type='checkbox'][role='switch']:indeterminate::before{
|
|
2135
2105
|
transform:translateX(
|
|
2136
2106
|
calc(var(--track-size) - var(--thumb-size) * 1.5)
|
|
2137
2107
|
);
|
|
2138
2108
|
}
|
|
2139
|
-
.ndl-form-item input[type='checkbox'][role='switch']:disabled {
|
|
2140
|
-
cursor:not-allowed;
|
|
2141
|
-
background-color:rgb(var(--theme-palette-neutral-bg-strong));
|
|
2142
|
-
outline:2px solid transparent;
|
|
2143
|
-
outline-offset:2px;
|
|
2144
|
-
}
|
|
2145
|
-
.ndl-form-item input[type='checkbox'][role='switch']:active:disabled {
|
|
2146
|
-
--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
2147
|
-
--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
2148
|
-
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2149
|
-
}
|
|
2150
2109
|
.ndl-form-item input[type='radio'] {
|
|
2151
2110
|
border-radius:9999px;
|
|
2152
2111
|
}
|
|
@@ -2749,7 +2708,6 @@ a.ndl-btn {
|
|
|
2749
2708
|
border-width:1px;
|
|
2750
2709
|
border-color:rgb(var(--theme-palette-neutral-border-strong));
|
|
2751
2710
|
background-color:rgb(var(--theme-palette-neutral-bg-weak));
|
|
2752
|
-
padding:24px;
|
|
2753
2711
|
--tw-shadow:var(--theme-shadow-overlay);
|
|
2754
2712
|
--tw-shadow-colored:var(--theme-shadow-overlay);
|
|
2755
2713
|
box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
@@ -2759,6 +2717,7 @@ a.ndl-btn {
|
|
|
2759
2717
|
}
|
|
2760
2718
|
.ndl-datepicker .react-datepicker {
|
|
2761
2719
|
width:100%;
|
|
2720
|
+
padding:24px;
|
|
2762
2721
|
}
|
|
2763
2722
|
.ndl-datepicker .ndl-datepicker-header {
|
|
2764
2723
|
display:flex;
|
|
@@ -2772,6 +2731,16 @@ a.ndl-btn {
|
|
|
2772
2731
|
display:flex;
|
|
2773
2732
|
gap:16px;
|
|
2774
2733
|
}
|
|
2734
|
+
.ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects button {
|
|
2735
|
+
border-radius:4px;
|
|
2736
|
+
outline:2px solid transparent;
|
|
2737
|
+
outline-offset:2px;
|
|
2738
|
+
}
|
|
2739
|
+
.ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects button:focus-visible {
|
|
2740
|
+
outline-width:2px;
|
|
2741
|
+
outline-offset:2px;
|
|
2742
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
2743
|
+
}
|
|
2775
2744
|
.ndl-datepicker .ndl-datepicker-header .ndl-datepicker-chevron {
|
|
2776
2745
|
width:16px;
|
|
2777
2746
|
height:16px;
|
|
@@ -3482,16 +3451,14 @@ a.ndl-btn {
|
|
|
3482
3451
|
flex-grow:1;
|
|
3483
3452
|
}
|
|
3484
3453
|
.ndl-data-grid-root .ndl-data-grid-scrollable:focus {
|
|
3454
|
+
z-index:1;
|
|
3485
3455
|
outline:2px solid transparent;
|
|
3486
3456
|
outline-offset:2px;
|
|
3487
|
-
--tw-ring-color:rgb(var(--theme-palette-primary-focus));
|
|
3488
|
-
--tw-ring-offset-color:rgb(var(--theme-palette-neutral-bg-weak));
|
|
3489
3457
|
}
|
|
3490
3458
|
.ndl-data-grid-root .ndl-data-grid-scrollable:focus:focus-visible {
|
|
3491
|
-
|
|
3492
|
-
|
|
3493
|
-
|
|
3494
|
-
--tw-ring-offset-width:1px;
|
|
3459
|
+
outline-width:2px;
|
|
3460
|
+
outline-offset:1px;
|
|
3461
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
3495
3462
|
}
|
|
3496
3463
|
.ndl-data-grid-root .ndl-data-grid-scrollable:has(+ .ndl-data-grid-navigation)
|
|
3497
3464
|
.ndl-data-grid-tbody
|
|
@@ -5115,13 +5082,11 @@ a.ndl-btn {
|
|
|
5115
5082
|
font-weight:700;
|
|
5116
5083
|
outline:2px solid transparent;
|
|
5117
5084
|
outline-offset:2px;
|
|
5118
|
-
--tw-ring-color:rgb(var(--theme-palette-primary-focus));
|
|
5119
5085
|
}
|
|
5120
5086
|
.ndl-cypher-editor .cm-editor .cm-button:focus-visible, .ndl-codemirror-editor .cm-editor .cm-button:focus-visible {
|
|
5121
|
-
|
|
5122
|
-
|
|
5123
|
-
|
|
5124
|
-
--tw-ring-offset-width:2px;
|
|
5087
|
+
outline-width:2px;
|
|
5088
|
+
outline-offset:2px;
|
|
5089
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
5125
5090
|
}
|
|
5126
5091
|
.ndl-cypher-editor .cm-editor .cm-button.ndl-loading, .ndl-codemirror-editor .cm-editor .cm-button.ndl-loading {
|
|
5127
5092
|
cursor:default;
|
|
@@ -5958,6 +5923,7 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
|
|
|
5958
5923
|
.ndl-breadcrumbs ol {
|
|
5959
5924
|
display:flex;
|
|
5960
5925
|
flex-wrap:wrap;
|
|
5926
|
+
align-items:center;
|
|
5961
5927
|
}
|
|
5962
5928
|
.ndl-breadcrumbs li {
|
|
5963
5929
|
display:flex;
|
|
@@ -5967,19 +5933,16 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
|
|
|
5967
5933
|
border-radius:6px;
|
|
5968
5934
|
}
|
|
5969
5935
|
.ndl-breadcrumbs .ndl-breadcrumbs-base-item-link {
|
|
5970
|
-
padding:0px;
|
|
5971
5936
|
border-radius:6px;
|
|
5937
|
+
padding:0px;
|
|
5972
5938
|
color:rgb(var(--theme-palette-neutral-text-weaker));
|
|
5973
|
-
|
|
5974
|
-
|
|
5975
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-base-item-link:focus {
|
|
5976
|
-
outline-width:0px;
|
|
5939
|
+
outline:2px solid transparent;
|
|
5940
|
+
outline-offset:2px;
|
|
5977
5941
|
}
|
|
5978
5942
|
.ndl-breadcrumbs .ndl-breadcrumbs-base-item-link:focus-visible {
|
|
5979
|
-
|
|
5980
|
-
|
|
5981
|
-
|
|
5982
|
-
--tw-ring-offset-width:0px;
|
|
5943
|
+
outline-width:2px;
|
|
5944
|
+
outline-offset:1px;
|
|
5945
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
5983
5946
|
}
|
|
5984
5947
|
.ndl-breadcrumbs .ndl-breadcrumbs-base-item-link-active {
|
|
5985
5948
|
color:rgb(var(--theme-palette-neutral-text-default));
|
|
@@ -5995,20 +5958,15 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
|
|
|
5995
5958
|
align-items:center;
|
|
5996
5959
|
}
|
|
5997
5960
|
.ndl-breadcrumbs .ndl-breadcrumbs-item-link {
|
|
5998
|
-
padding-top:1px;
|
|
5999
|
-
padding-bottom:1px;
|
|
6000
5961
|
border-radius:6px;
|
|
6001
5962
|
color:rgb(var(--theme-palette-neutral-text-weaker));
|
|
6002
|
-
|
|
6003
|
-
|
|
6004
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-item-link:focus {
|
|
6005
|
-
outline-width:0px;
|
|
5963
|
+
outline:2px solid transparent;
|
|
5964
|
+
outline-offset:2px;
|
|
6006
5965
|
}
|
|
6007
5966
|
.ndl-breadcrumbs .ndl-breadcrumbs-item-link:focus-visible {
|
|
6008
|
-
|
|
6009
|
-
|
|
6010
|
-
|
|
6011
|
-
--tw-ring-offset-width:0px;
|
|
5967
|
+
outline-width:2px;
|
|
5968
|
+
outline-offset:1px;
|
|
5969
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
6012
5970
|
}
|
|
6013
5971
|
.ndl-breadcrumbs .ndl-breadcrumbs-item-link:hover {
|
|
6014
5972
|
color:rgb(var(--theme-palette-neutral-text-default));
|
|
@@ -6050,30 +6008,19 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
|
|
|
6050
6008
|
display:flex;
|
|
6051
6009
|
align-self:center;
|
|
6052
6010
|
height:22px;
|
|
6053
|
-
--tw-ring-color:rgb(var(--theme-palette-primary-focus));
|
|
6054
6011
|
}
|
|
6055
6012
|
.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis-menu-button:focus {
|
|
6056
|
-
outline
|
|
6013
|
+
outline:2px solid transparent;
|
|
6014
|
+
outline-offset:2px;
|
|
6057
6015
|
}
|
|
6058
6016
|
.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis-menu-button:focus-visible {
|
|
6059
|
-
|
|
6060
|
-
|
|
6061
|
-
|
|
6062
|
-
--tw-ring-offset-width:0px;
|
|
6017
|
+
outline-width:2px;
|
|
6018
|
+
outline-offset:1px;
|
|
6019
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
6063
6020
|
}
|
|
6064
6021
|
.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis-menu-button:hover {
|
|
6065
6022
|
text-decoration-line:underline;
|
|
6066
6023
|
}
|
|
6067
|
-
.ndl-breadcrumbs-item-link:focus {
|
|
6068
|
-
border-radius:6px;
|
|
6069
|
-
background-color:rgb(var(--theme-palette-neutral-bg-weak));
|
|
6070
|
-
outline-width:0px;
|
|
6071
|
-
--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
6072
|
-
--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
6073
|
-
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
6074
|
-
--tw-ring-color:rgb(var(--theme-palette-primary-focus));
|
|
6075
|
-
--tw-ring-offset-width:3px;
|
|
6076
|
-
}
|
|
6077
6024
|
.ndl-breadcrumbs-ellipsis-menu-item {
|
|
6078
6025
|
padding-top:4px;
|
|
6079
6026
|
padding-bottom:4px;
|
|
@@ -6335,14 +6282,11 @@ button.ndl-avatar .ndl-avatar-letters:active:not(.ndl-avatar-disabled) {
|
|
|
6335
6282
|
button.ndl-avatar {
|
|
6336
6283
|
outline:2px solid transparent;
|
|
6337
6284
|
outline-offset:2px;
|
|
6338
|
-
--tw-ring-color:rgb(var(--theme-palette-primary-focus));
|
|
6339
|
-
--tw-ring-offset-color:rgb(var(--theme-palette-neutral-bg-weak));
|
|
6340
6285
|
}
|
|
6341
6286
|
button.ndl-avatar:focus-visible {
|
|
6342
|
-
|
|
6343
|
-
|
|
6344
|
-
|
|
6345
|
-
--tw-ring-offset-width:1px;
|
|
6287
|
+
outline-width:2px;
|
|
6288
|
+
outline-offset:1px;
|
|
6289
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
6346
6290
|
}
|
|
6347
6291
|
.ndl-slider{
|
|
6348
6292
|
display:flex;
|
|
@@ -6411,10 +6355,9 @@ button.ndl-avatar:focus-visible {
|
|
|
6411
6355
|
background-color:rgb(var(--theme-palette-primary-pressed-weak));
|
|
6412
6356
|
}
|
|
6413
6357
|
.ndl-slider .ndl-track .ndl-thumb.ndl-focus {
|
|
6414
|
-
|
|
6415
|
-
|
|
6416
|
-
|
|
6417
|
-
--tw-ring-color:rgb(var(--theme-palette-primary-focus));
|
|
6358
|
+
outline-style:solid;
|
|
6359
|
+
outline-width:2px;
|
|
6360
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
6418
6361
|
}
|
|
6419
6362
|
.ndl-slider .ndl-filled-track{
|
|
6420
6363
|
height:4px;
|
|
@@ -6517,7 +6460,6 @@ button.ndl-avatar:focus-visible {
|
|
|
6517
6460
|
border-color:rgb(var(--theme-palette-neutral-border-strong));
|
|
6518
6461
|
outline:2px solid transparent;
|
|
6519
6462
|
outline-offset:2px;
|
|
6520
|
-
--tw-ring-color:rgb(var(--theme-palette-primary-focus));
|
|
6521
6463
|
font-family:var(--font-font-family-body-medium), sans-serif;
|
|
6522
6464
|
font-size:var(--font-size-body-medium);
|
|
6523
6465
|
font-weight:var(--font-weight-normal);
|
|
@@ -6525,9 +6467,9 @@ button.ndl-avatar:focus-visible {
|
|
|
6525
6467
|
line-height:1.25rem;
|
|
6526
6468
|
}
|
|
6527
6469
|
.ndl-dropdown-btn:focus-visible {
|
|
6528
|
-
|
|
6529
|
-
|
|
6530
|
-
|
|
6470
|
+
outline-width:2px;
|
|
6471
|
+
outline-offset:-2px;
|
|
6472
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
6531
6473
|
}
|
|
6532
6474
|
.ndl-dropdown-btn.ndl-small {
|
|
6533
6475
|
height:24px;
|
|
@@ -6591,10 +6533,9 @@ button.ndl-avatar:focus-visible {
|
|
|
6591
6533
|
box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
6592
6534
|
}
|
|
6593
6535
|
.ndl-dropdown-btn.ndl-open {
|
|
6594
|
-
|
|
6595
|
-
|
|
6596
|
-
|
|
6597
|
-
--tw-ring-color:rgb(var(--theme-palette-primary-focus));
|
|
6536
|
+
outline-width:2px;
|
|
6537
|
+
outline-offset:-2px;
|
|
6538
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
6598
6539
|
}
|
|
6599
6540
|
.ndl-dropdown-btn-left-wrapper {
|
|
6600
6541
|
display:flex;
|
|
@@ -6623,20 +6564,21 @@ button.ndl-avatar:focus-visible {
|
|
|
6623
6564
|
background-color:rgb(var(--theme-palette-neutral-bg-on-bg-weak));
|
|
6624
6565
|
padding-left:2px;
|
|
6625
6566
|
padding-right:2px;
|
|
6626
|
-
outline:2px solid transparent;
|
|
6627
|
-
outline-offset:2px;
|
|
6628
|
-
--tw-ring-color:rgb(var(--theme-palette-primary-focus));
|
|
6629
|
-
}
|
|
6630
|
-
.ndl-inline-code:focus-visible {
|
|
6631
|
-
--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
6632
|
-
--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
6633
|
-
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
6634
|
-
}
|
|
6635
|
-
.ndl-inline-code:not(:focus) {
|
|
6636
6567
|
outline-style:solid;
|
|
6637
6568
|
outline-width:1px;
|
|
6638
6569
|
outline-offset:-1px;
|
|
6639
6570
|
outline-color:rgb(var(--theme-palette-neutral-border-weak));
|
|
6571
|
+
font-family:var(--font-font-family-code), 'monospace';
|
|
6572
|
+
font-size:var(--font-size-code);
|
|
6573
|
+
font-weight:var(--font-weight-normal);
|
|
6574
|
+
letter-spacing:0;
|
|
6575
|
+
line-height:1.25rem;
|
|
6576
|
+
}
|
|
6577
|
+
.ndl-inline-code:focus-visible {
|
|
6578
|
+
outline-style:solid;
|
|
6579
|
+
outline-width:2px;
|
|
6580
|
+
outline-offset:-2px;
|
|
6581
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
6640
6582
|
}
|
|
6641
6583
|
.ndl-inline-code:hover:not(.ndl-disabled) {
|
|
6642
6584
|
background-color:rgb(var(--theme-palette-neutral-hover));
|
|
@@ -7527,16 +7469,14 @@ button.ndl-avatar:focus-visible {
|
|
|
7527
7469
|
.ndl-spotlight-target {
|
|
7528
7470
|
position:relative;
|
|
7529
7471
|
cursor:pointer;
|
|
7530
|
-
|
|
7472
|
+
outline:2px solid transparent;
|
|
7473
|
+
outline-offset:2px;
|
|
7531
7474
|
}
|
|
7532
7475
|
.ndl-spotlight-target:focus-visible {
|
|
7533
7476
|
border-style:none;
|
|
7534
|
-
outline:2px
|
|
7477
|
+
outline-width:2px;
|
|
7535
7478
|
outline-offset:2px;
|
|
7536
|
-
|
|
7537
|
-
--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
7538
|
-
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
7539
|
-
--tw-ring-offset-width:2px;
|
|
7479
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
7540
7480
|
}
|
|
7541
7481
|
.ndl-spotlight-target .ndl-spotlight-target-inert:focus-visible {
|
|
7542
7482
|
border-style:none;
|
|
@@ -7592,6 +7532,41 @@ button.ndl-avatar:focus-visible {
|
|
|
7592
7532
|
animation-timing-function:ease-out;
|
|
7593
7533
|
}
|
|
7594
7534
|
}
|
|
7535
|
+
@keyframes ndl-loading-bar{
|
|
7536
|
+
0%{
|
|
7537
|
+
transform:translateX(-100%);
|
|
7538
|
+
}
|
|
7539
|
+
100%{
|
|
7540
|
+
transform:translateX(130%);
|
|
7541
|
+
}
|
|
7542
|
+
}
|
|
7543
|
+
.ndl-loading-bar {
|
|
7544
|
+
position:relative;
|
|
7545
|
+
height:3px;
|
|
7546
|
+
width:100%;
|
|
7547
|
+
overflow:hidden;
|
|
7548
|
+
}
|
|
7549
|
+
.ndl-loading-bar.ndl-loading-bar-rail {
|
|
7550
|
+
background-color:rgb(var(--theme-palette-neutral-bg-strong));
|
|
7551
|
+
}
|
|
7552
|
+
.ndl-loading-bar::before{
|
|
7553
|
+
content:'';
|
|
7554
|
+
transform:translateX(-100%);
|
|
7555
|
+
animation:1.5s linear infinite ndl-loading-bar;
|
|
7556
|
+
position:absolute;
|
|
7557
|
+
top:0;
|
|
7558
|
+
left:0;
|
|
7559
|
+
width:100%;
|
|
7560
|
+
height:100%;
|
|
7561
|
+
transition:transform 0.5s;
|
|
7562
|
+
background:linear-gradient(
|
|
7563
|
+
90deg,
|
|
7564
|
+
transparent 0%,
|
|
7565
|
+
rgb(var(--theme-palette-primary-bg-status)) 30%,
|
|
7566
|
+
rgb(var(--theme-palette-primary-bg-status)) 70%,
|
|
7567
|
+
transparent 100%
|
|
7568
|
+
);
|
|
7569
|
+
}
|
|
7595
7570
|
.n-absolute {
|
|
7596
7571
|
position:absolute;
|
|
7597
7572
|
}
|
package/lib/tokens/js/tokens.js
CHANGED