@neo4j-ndl/base 3.6.3 → 3.7.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/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 +174 -23
- 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
|
@@ -3298,7 +3298,6 @@ a.ndl-btn {
|
|
|
3298
3298
|
max-width:none;
|
|
3299
3299
|
align-items:center;
|
|
3300
3300
|
gap:4px;
|
|
3301
|
-
overflow:hidden;
|
|
3302
3301
|
border-radius:6px;
|
|
3303
3302
|
border-width:1px;
|
|
3304
3303
|
border-style:solid;
|
|
@@ -6045,26 +6044,26 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
|
|
|
6045
6044
|
background-color:rgb(var(--theme-palette-primary-bg-status));
|
|
6046
6045
|
color:rgb(var(--theme-palette-neutral-text-inverse));
|
|
6047
6046
|
}
|
|
6048
|
-
.ndl-breadcrumbs {
|
|
6047
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old {
|
|
6049
6048
|
display:flex;
|
|
6050
6049
|
height:32px;
|
|
6051
6050
|
place-items:center;
|
|
6052
6051
|
align-items:flex-start;
|
|
6053
6052
|
gap:10px;
|
|
6054
6053
|
}
|
|
6055
|
-
.ndl-breadcrumbs ol {
|
|
6054
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old ol {
|
|
6056
6055
|
display:flex;
|
|
6057
6056
|
flex-wrap:wrap;
|
|
6058
6057
|
align-items:center;
|
|
6059
6058
|
}
|
|
6060
|
-
.ndl-breadcrumbs li {
|
|
6059
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old li {
|
|
6061
6060
|
display:flex;
|
|
6062
6061
|
}
|
|
6063
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-base-item {
|
|
6062
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-base-item {
|
|
6064
6063
|
align-items:center;
|
|
6065
6064
|
border-radius:6px;
|
|
6066
6065
|
}
|
|
6067
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-base-item-link {
|
|
6066
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-base-item-link {
|
|
6068
6067
|
border-radius:6px;
|
|
6069
6068
|
padding-left:4px;
|
|
6070
6069
|
padding-right:4px;
|
|
@@ -6072,23 +6071,23 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
|
|
|
6072
6071
|
outline:2px solid transparent;
|
|
6073
6072
|
outline-offset:2px;
|
|
6074
6073
|
}
|
|
6075
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-base-item-link:focus-visible {
|
|
6074
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-base-item-link:focus-visible {
|
|
6076
6075
|
outline-width:2px;
|
|
6077
6076
|
outline-offset:-2px;
|
|
6078
6077
|
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
6079
6078
|
}
|
|
6080
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-base-item-link-active {
|
|
6079
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-base-item-link-active {
|
|
6081
6080
|
color:rgb(var(--theme-palette-neutral-text-default));
|
|
6082
6081
|
}
|
|
6083
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-base-item-link:hover {
|
|
6082
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-base-item-link:hover {
|
|
6084
6083
|
color:rgb(var(--theme-palette-neutral-text-default));
|
|
6085
6084
|
text-decoration-line:underline;
|
|
6086
6085
|
}
|
|
6087
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-item {
|
|
6086
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-item {
|
|
6088
6087
|
display:flex;
|
|
6089
6088
|
align-items:center;
|
|
6090
6089
|
}
|
|
6091
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-item-link {
|
|
6090
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-item-link {
|
|
6092
6091
|
cursor:default;
|
|
6093
6092
|
border-radius:6px;
|
|
6094
6093
|
padding-left:4px;
|
|
@@ -6097,23 +6096,23 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
|
|
|
6097
6096
|
outline:2px solid transparent;
|
|
6098
6097
|
outline-offset:2px;
|
|
6099
6098
|
}
|
|
6100
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-item-link:focus-visible {
|
|
6099
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-item-link:focus-visible {
|
|
6101
6100
|
outline-width:2px;
|
|
6102
6101
|
outline-offset:-2px;
|
|
6103
6102
|
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
6104
6103
|
}
|
|
6105
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-item-link-interactable:hover {
|
|
6104
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-item-link-interactable:hover {
|
|
6106
6105
|
cursor:pointer;
|
|
6107
6106
|
color:rgb(var(--theme-palette-neutral-text-default));
|
|
6108
6107
|
text-decoration-line:underline;
|
|
6109
6108
|
}
|
|
6110
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-item-link-active {
|
|
6109
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-item-link-active {
|
|
6111
6110
|
color:rgb(var(--theme-palette-neutral-text-default));
|
|
6112
6111
|
}
|
|
6113
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-item-menu {
|
|
6112
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-item-menu {
|
|
6114
6113
|
display:flex;
|
|
6115
6114
|
}
|
|
6116
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-separator:not(:only-child):before {
|
|
6115
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-separator:not(:only-child):before {
|
|
6117
6116
|
margin-left:4px;
|
|
6118
6117
|
margin-right:4px;
|
|
6119
6118
|
color:rgb(var(--theme-palette-neutral-border-strong));
|
|
@@ -6124,35 +6123,35 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
|
|
|
6124
6123
|
line-height:1.25rem;
|
|
6125
6124
|
content:'/';
|
|
6126
6125
|
}
|
|
6127
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis-menu {
|
|
6126
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-ellipsis-menu {
|
|
6128
6127
|
margin-left:1px;
|
|
6129
6128
|
margin-right:1px;
|
|
6130
6129
|
display:flex;
|
|
6131
6130
|
align-items:center;
|
|
6132
6131
|
}
|
|
6133
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis-menu-hidden{
|
|
6132
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-ellipsis-menu-hidden{
|
|
6134
6133
|
opacity:0;
|
|
6135
6134
|
}
|
|
6136
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis--menu-button:hover {
|
|
6135
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-ellipsis--menu-button:hover {
|
|
6137
6136
|
cursor:pointer;
|
|
6138
6137
|
text-decoration-line:underline;
|
|
6139
6138
|
}
|
|
6140
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis-menu-button {
|
|
6139
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-ellipsis-menu-button {
|
|
6141
6140
|
border-radius:6px;
|
|
6142
6141
|
display:flex;
|
|
6143
6142
|
align-self:center;
|
|
6144
6143
|
height:22px;
|
|
6145
6144
|
}
|
|
6146
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis-menu-button:focus {
|
|
6145
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-ellipsis-menu-button:focus {
|
|
6147
6146
|
outline:2px solid transparent;
|
|
6148
6147
|
outline-offset:2px;
|
|
6149
6148
|
}
|
|
6150
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis-menu-button:focus-visible {
|
|
6149
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-ellipsis-menu-button:focus-visible {
|
|
6151
6150
|
outline-width:2px;
|
|
6152
6151
|
outline-offset:2px;
|
|
6153
6152
|
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
6154
6153
|
}
|
|
6155
|
-
.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis-menu-button:hover {
|
|
6154
|
+
.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-ellipsis-menu-button:hover {
|
|
6156
6155
|
text-decoration-line:underline;
|
|
6157
6156
|
}
|
|
6158
6157
|
.ndl-breadcrumbs-ellipsis-menu-item {
|
|
@@ -6183,6 +6182,140 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
|
|
|
6183
6182
|
.ndl-breadcrumbs-group-item {
|
|
6184
6183
|
display:flex;
|
|
6185
6184
|
}
|
|
6185
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) {
|
|
6186
|
+
display:flex;
|
|
6187
|
+
align-items:center;
|
|
6188
|
+
justify-content:flex-start;
|
|
6189
|
+
}
|
|
6190
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-list {
|
|
6191
|
+
display:flex;
|
|
6192
|
+
flex-wrap:wrap;
|
|
6193
|
+
align-items:center;
|
|
6194
|
+
justify-content:flex-start;
|
|
6195
|
+
gap:4px;
|
|
6196
|
+
}
|
|
6197
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-list .ndl-breadcrumbs-item {
|
|
6198
|
+
display:flex;
|
|
6199
|
+
align-items:center;
|
|
6200
|
+
gap:4px;
|
|
6201
|
+
}
|
|
6202
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-list .ndl-breadcrumbs-item:not(:first-child):before {
|
|
6203
|
+
color:rgb(var(--theme-palette-neutral-border-strong));
|
|
6204
|
+
--tw-content:'/';
|
|
6205
|
+
content:var(--tw-content);
|
|
6206
|
+
font-family:var(--font-font-family-body-label), sans-serif;
|
|
6207
|
+
font-size:var(--font-size-label);
|
|
6208
|
+
font-weight:var(--font-weight-bold);
|
|
6209
|
+
letter-spacing:0;
|
|
6210
|
+
line-height:1.25rem;
|
|
6211
|
+
}
|
|
6212
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-list .ndl-breadcrumbs-item .ndl-breadcrumbs-item-inner {
|
|
6213
|
+
display:flex;
|
|
6214
|
+
flex-direction:row;
|
|
6215
|
+
align-items:center;
|
|
6216
|
+
gap:1px;
|
|
6217
|
+
}
|
|
6218
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-list .ndl-breadcrumbs-item .ndl-breadcrumbs-item-inner:hover:has(:is(button, a).ndl-breadcrumbs-button:nth-child(2))
|
|
6219
|
+
:is(button, a).ndl-breadcrumbs-button:not(:hover):not(:active) {
|
|
6220
|
+
background-color:rgb(var(--theme-palette-neutral-hover));
|
|
6221
|
+
}
|
|
6222
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-list .ndl-breadcrumbs-item .ndl-breadcrumbs-item-inner:hover:has(:is(button, a).ndl-breadcrumbs-button:nth-child(2))
|
|
6223
|
+
:is(button, a).ndl-breadcrumbs-button:hover:after {
|
|
6224
|
+
pointer-events:none;
|
|
6225
|
+
position:absolute;
|
|
6226
|
+
inset:0px;
|
|
6227
|
+
background-color:rgb(var(--theme-palette-neutral-hover));
|
|
6228
|
+
--tw-content:'';
|
|
6229
|
+
content:var(--tw-content);
|
|
6230
|
+
}
|
|
6231
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button {
|
|
6232
|
+
position:relative;
|
|
6233
|
+
display:flex;
|
|
6234
|
+
height:32px;
|
|
6235
|
+
flex-direction:row;
|
|
6236
|
+
align-items:center;
|
|
6237
|
+
gap:8px;
|
|
6238
|
+
overflow:hidden;
|
|
6239
|
+
padding-left:6px;
|
|
6240
|
+
padding-right:6px;
|
|
6241
|
+
font-family:var(--font-font-family-body-medium), sans-serif;
|
|
6242
|
+
font-size:var(--font-size-body-medium);
|
|
6243
|
+
font-weight:var(--font-weight-normal);
|
|
6244
|
+
letter-spacing:0.016rem;
|
|
6245
|
+
line-height:1.25rem;
|
|
6246
|
+
}
|
|
6247
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button:nth-child(-n + 1 of .ndl-breadcrumbs-button) {
|
|
6248
|
+
border-top-left-radius:6px;
|
|
6249
|
+
border-bottom-left-radius:6px;
|
|
6250
|
+
padding-right:6px;
|
|
6251
|
+
padding-left:8px;
|
|
6252
|
+
}
|
|
6253
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button:nth-last-child(-n + 1 of .ndl-breadcrumbs-button) {
|
|
6254
|
+
border-top-right-radius:6px;
|
|
6255
|
+
border-bottom-right-radius:6px;
|
|
6256
|
+
padding-right:8px;
|
|
6257
|
+
}
|
|
6258
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button:is(button, a) {
|
|
6259
|
+
outline:2px solid transparent;
|
|
6260
|
+
outline-offset:2px;
|
|
6261
|
+
}
|
|
6262
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button:is(button, a):hover {
|
|
6263
|
+
background-color:rgb(var(--theme-palette-neutral-hover));
|
|
6264
|
+
}
|
|
6265
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button:is(button, a):focus-visible {
|
|
6266
|
+
outline-width:2px;
|
|
6267
|
+
outline-offset:-2px;
|
|
6268
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
6269
|
+
}
|
|
6270
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button:is(button, a):active {
|
|
6271
|
+
background-color:rgb(var(--theme-palette-neutral-pressed));
|
|
6272
|
+
}
|
|
6273
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button .ndl-icon-svg {
|
|
6274
|
+
width:16px;
|
|
6275
|
+
height:16px;
|
|
6276
|
+
flex-shrink:0;
|
|
6277
|
+
color:rgb(var(--theme-palette-neutral-icon));
|
|
6278
|
+
}
|
|
6279
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-select {
|
|
6280
|
+
width:32px;
|
|
6281
|
+
height:32px;
|
|
6282
|
+
padding-left:8px;
|
|
6283
|
+
padding-right:8px;
|
|
6284
|
+
}
|
|
6285
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-select:first-child {
|
|
6286
|
+
padding-left:8px;
|
|
6287
|
+
}
|
|
6288
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-link {
|
|
6289
|
+
margin-left:4px;
|
|
6290
|
+
margin-right:4px;
|
|
6291
|
+
border-radius:6px;
|
|
6292
|
+
color:rgb(var(--theme-palette-neutral-text-weaker));
|
|
6293
|
+
font-family:var(--font-font-family-body-medium), sans-serif;
|
|
6294
|
+
font-size:var(--font-size-body-medium);
|
|
6295
|
+
font-weight:var(--font-weight-normal);
|
|
6296
|
+
letter-spacing:0.016rem;
|
|
6297
|
+
line-height:1.25rem;
|
|
6298
|
+
}
|
|
6299
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-link:is(button, a) {
|
|
6300
|
+
cursor:pointer;
|
|
6301
|
+
outline:2px solid transparent;
|
|
6302
|
+
outline-offset:2px;
|
|
6303
|
+
}
|
|
6304
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-link:is(button, a):hover {
|
|
6305
|
+
color:rgb(var(--theme-palette-neutral-text-default));
|
|
6306
|
+
text-decoration-line:underline;
|
|
6307
|
+
}
|
|
6308
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-link:is(button, a):focus-visible {
|
|
6309
|
+
outline-width:2px;
|
|
6310
|
+
outline-offset:0px;
|
|
6311
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
6312
|
+
}
|
|
6313
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-link:is(button, a):active {
|
|
6314
|
+
color:rgb(var(--theme-palette-neutral-text-default));
|
|
6315
|
+
}
|
|
6316
|
+
.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-link.ndl-breadcrumbs-link-current {
|
|
6317
|
+
color:rgb(var(--theme-palette-neutral-text-default));
|
|
6318
|
+
}
|
|
6186
6319
|
.ndl-avatar {
|
|
6187
6320
|
position:relative;
|
|
6188
6321
|
display:flex;
|
|
@@ -8258,6 +8391,9 @@ button.ndl-avatar:focus-visible {
|
|
|
8258
8391
|
.n-mr-token-3 {
|
|
8259
8392
|
margin-right:4px;
|
|
8260
8393
|
}
|
|
8394
|
+
.n-mr-token-4 {
|
|
8395
|
+
margin-right:8px;
|
|
8396
|
+
}
|
|
8261
8397
|
.n-mt-10 {
|
|
8262
8398
|
margin-top:40px;
|
|
8263
8399
|
}
|
|
@@ -8347,6 +8483,9 @@ button.ndl-avatar:focus-visible {
|
|
|
8347
8483
|
.n-h-5 {
|
|
8348
8484
|
height:20px;
|
|
8349
8485
|
}
|
|
8486
|
+
.n-h-6 {
|
|
8487
|
+
height:24px;
|
|
8488
|
+
}
|
|
8350
8489
|
.n-h-7 {
|
|
8351
8490
|
height:28px;
|
|
8352
8491
|
}
|
|
@@ -8392,6 +8531,9 @@ button.ndl-avatar:focus-visible {
|
|
|
8392
8531
|
.n-w-80 {
|
|
8393
8532
|
width:320px;
|
|
8394
8533
|
}
|
|
8534
|
+
.n-w-\[26px\] {
|
|
8535
|
+
width:26px;
|
|
8536
|
+
}
|
|
8395
8537
|
.n-w-\[300px\] {
|
|
8396
8538
|
width:300px;
|
|
8397
8539
|
}
|
|
@@ -112627,6 +112769,15 @@ html{
|
|
|
112627
112769
|
.hover\:n-text-warning-text\/95:hover {
|
|
112628
112770
|
color:rgb(var(--theme-palette-warning-text) / 0.95);
|
|
112629
112771
|
}
|
|
112772
|
+
.focus-visible\:n-outline-2:focus-visible {
|
|
112773
|
+
outline-width:2px;
|
|
112774
|
+
}
|
|
112775
|
+
.focus-visible\:n-outline-offset-\[3px\]:focus-visible {
|
|
112776
|
+
outline-offset:3px;
|
|
112777
|
+
}
|
|
112778
|
+
.focus-visible\:n-outline-palette-primary-focus:focus-visible {
|
|
112779
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
112780
|
+
}
|
|
112630
112781
|
.active\:n-bg-danger-bg-status:active {
|
|
112631
112782
|
background-color:rgb(var(--theme-palette-danger-bg-status));
|
|
112632
112783
|
}
|
package/lib/tokens/js/tokens.js
CHANGED