@neo4j-ndl/base 3.1.3 → 3.2.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 +178 -0
- 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
|
@@ -4443,6 +4443,7 @@ a.ndl-btn {
|
|
|
4443
4443
|
.ndl-select-menu-list {
|
|
4444
4444
|
display:flex;
|
|
4445
4445
|
flex-direction:column;
|
|
4446
|
+
gap:2px;
|
|
4446
4447
|
overflow:auto;
|
|
4447
4448
|
padding:8px;
|
|
4448
4449
|
}
|
|
@@ -5279,6 +5280,27 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
|
|
|
5279
5280
|
.ndl-banner .ndl-banner-actions .ndl-cypher-editor .cm-editor .cm-button:not(:disabled):active,.ndl-banner .ndl-banner-actions .ndl-codemirror-editor .cm-editor .cm-button:not(:disabled):active {
|
|
5280
5281
|
background-color:rgb(var(--theme-palette-neutral-pressed));
|
|
5281
5282
|
}
|
|
5283
|
+
.ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions .ndl-cypher-editor .cm-editor .cm-button,.ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions .ndl-codemirror-editor .cm-editor .cm-button {
|
|
5284
|
+
border-color:rgb(var(--theme-palette-neutral-text-inverse));
|
|
5285
|
+
background-color:transparent;
|
|
5286
|
+
color:rgb(var(--theme-palette-neutral-text-inverse));
|
|
5287
|
+
}
|
|
5288
|
+
.ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions .ndl-cypher-editor .cm-editor .cm-button:not(:disabled):hover,.ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions .ndl-codemirror-editor .cm-editor .cm-button:not(:disabled):hover {
|
|
5289
|
+
background-color:rgb(149 154 161 / var(--tw-bg-opacity));
|
|
5290
|
+
--tw-bg-opacity:0.1;
|
|
5291
|
+
}
|
|
5292
|
+
.ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions .ndl-cypher-editor .cm-editor .cm-button:not(:disabled):active,.ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions .ndl-codemirror-editor .cm-editor .cm-button:not(:disabled):active {
|
|
5293
|
+
background-color:rgb(149 154 161 / var(--tw-bg-opacity));
|
|
5294
|
+
--tw-bg-opacity:0.2;
|
|
5295
|
+
}
|
|
5296
|
+
.ndl-theme-dark .ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions .ndl-cypher-editor .cm-editor .cm-button:not(:disabled):hover,.ndl-theme-dark .ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions .ndl-codemirror-editor .cm-editor .cm-button:not(:disabled):hover {
|
|
5297
|
+
background-color:rgb(111 117 126 / var(--tw-bg-opacity));
|
|
5298
|
+
--tw-bg-opacity:0.1;
|
|
5299
|
+
}
|
|
5300
|
+
.ndl-theme-dark .ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions .ndl-cypher-editor .cm-editor .cm-button:not(:disabled):active,.ndl-theme-dark .ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions .ndl-codemirror-editor .cm-editor .cm-button:not(:disabled):active {
|
|
5301
|
+
background-color:rgb(111 117 126 / var(--tw-bg-opacity));
|
|
5302
|
+
--tw-bg-opacity:0.2;
|
|
5303
|
+
}
|
|
5282
5304
|
.ndl-cypher-editor .cm-completionLabel, .ndl-codemirror-editor .cm-completionLabel{
|
|
5283
5305
|
font-family:'Fira Code';
|
|
5284
5306
|
font-weight:700;
|
|
@@ -7434,6 +7456,156 @@ button.ndl-avatar:focus-visible {
|
|
|
7434
7456
|
letter-spacing:0.016rem;
|
|
7435
7457
|
line-height:1.5rem;
|
|
7436
7458
|
}
|
|
7459
|
+
:root{
|
|
7460
|
+
--spotlight-target-pulse-color:rgba(233, 222, 255, 0.5);
|
|
7461
|
+
}
|
|
7462
|
+
.ndl-theme-dark{
|
|
7463
|
+
--spotlight-target-pulse-color:rgba(233, 222, 255, 0.2);
|
|
7464
|
+
}
|
|
7465
|
+
.ndl-spotlight-overlay {
|
|
7466
|
+
visibility:hidden;
|
|
7467
|
+
position:fixed;
|
|
7468
|
+
top:0px;
|
|
7469
|
+
bottom:0px;
|
|
7470
|
+
right:0px;
|
|
7471
|
+
left:0px;
|
|
7472
|
+
z-index:30;
|
|
7473
|
+
background-color:rgba(0, 0, 0, 0.4);
|
|
7474
|
+
transition:opacity 0.2s ease;
|
|
7475
|
+
opacity:0;
|
|
7476
|
+
}
|
|
7477
|
+
.ndl-spotlight-overlay.ndl-spotlight-overlay-open {
|
|
7478
|
+
visibility:visible;
|
|
7479
|
+
opacity:1;
|
|
7480
|
+
}
|
|
7481
|
+
.ndl-spotlight {
|
|
7482
|
+
width:320px;
|
|
7483
|
+
overflow:hidden;
|
|
7484
|
+
border-width:1px;
|
|
7485
|
+
border-color:rgb(var(--theme-palette-discovery-border-strong));
|
|
7486
|
+
background-color:rgb(var(--theme-palette-discovery-bg-strong));
|
|
7487
|
+
padding-bottom:16px;
|
|
7488
|
+
color:rgb(var(--theme-palette-neutral-text-inverse));
|
|
7489
|
+
}
|
|
7490
|
+
.ndl-spotlight .ndl-spotlight-header,
|
|
7491
|
+
.ndl-spotlight .ndl-spotlight-body {
|
|
7492
|
+
margin-top:16px;
|
|
7493
|
+
width:100%;
|
|
7494
|
+
padding-left:16px;
|
|
7495
|
+
padding-right:16px;
|
|
7496
|
+
color:rgb(var(--theme-palette-neutral-text-inverse));
|
|
7497
|
+
}
|
|
7498
|
+
.ndl-spotlight .ndl-spotlight-header + .ndl-spotlight-body {
|
|
7499
|
+
margin-top:4px;
|
|
7500
|
+
}
|
|
7501
|
+
.ndl-spotlight .ndl-spotlight-image {
|
|
7502
|
+
width:100%;
|
|
7503
|
+
}
|
|
7504
|
+
.ndl-spotlight .ndl-spotlight-label {
|
|
7505
|
+
margin-left:16px;
|
|
7506
|
+
margin-right:16px;
|
|
7507
|
+
margin-top:16px;
|
|
7508
|
+
}
|
|
7509
|
+
.ndl-spotlight .ndl-spotlight-icon-wrapper {
|
|
7510
|
+
margin-top:16px;
|
|
7511
|
+
width:100%;
|
|
7512
|
+
padding-left:16px;
|
|
7513
|
+
padding-right:16px;
|
|
7514
|
+
}
|
|
7515
|
+
.ndl-spotlight .ndl-spotlight-icon-wrapper .ndl-icon-svg {
|
|
7516
|
+
width:48px;
|
|
7517
|
+
height:48px;
|
|
7518
|
+
}
|
|
7519
|
+
.ndl-spotlight .ndl-spotlight-footer {
|
|
7520
|
+
margin-top:16px;
|
|
7521
|
+
display:flex;
|
|
7522
|
+
width:100%;
|
|
7523
|
+
flex-direction:row;
|
|
7524
|
+
flex-wrap:wrap;
|
|
7525
|
+
align-items:center;
|
|
7526
|
+
justify-content:space-between;
|
|
7527
|
+
padding-left:16px;
|
|
7528
|
+
padding-right:16px;
|
|
7529
|
+
}
|
|
7530
|
+
.ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions {
|
|
7531
|
+
margin-left:auto;
|
|
7532
|
+
display:flex;
|
|
7533
|
+
flex-direction:row;
|
|
7534
|
+
flex-wrap:wrap;
|
|
7535
|
+
gap:8px;
|
|
7536
|
+
}
|
|
7537
|
+
.ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions .ndl-btn {
|
|
7538
|
+
border-color:rgb(var(--theme-palette-neutral-text-inverse));
|
|
7539
|
+
background-color:transparent;
|
|
7540
|
+
color:rgb(var(--theme-palette-neutral-text-inverse));
|
|
7541
|
+
}
|
|
7542
|
+
.ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions .ndl-btn:not(:disabled):hover {
|
|
7543
|
+
background-color:rgb(149 154 161 / var(--tw-bg-opacity));
|
|
7544
|
+
--tw-bg-opacity:0.1;
|
|
7545
|
+
}
|
|
7546
|
+
.ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions .ndl-btn:not(:disabled):active {
|
|
7547
|
+
background-color:rgb(149 154 161 / var(--tw-bg-opacity));
|
|
7548
|
+
--tw-bg-opacity:0.2;
|
|
7549
|
+
}
|
|
7550
|
+
.ndl-theme-dark .ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions .ndl-btn:not(:disabled):hover {
|
|
7551
|
+
background-color:rgb(111 117 126 / var(--tw-bg-opacity));
|
|
7552
|
+
--tw-bg-opacity:0.1;
|
|
7553
|
+
}
|
|
7554
|
+
.ndl-theme-dark .ndl-spotlight .ndl-spotlight-footer .ndl-spotlight-actions .ndl-btn:not(:disabled):active {
|
|
7555
|
+
background-color:rgb(111 117 126 / var(--tw-bg-opacity));
|
|
7556
|
+
--tw-bg-opacity:0.2;
|
|
7557
|
+
}
|
|
7558
|
+
.ndl-spotlight-target {
|
|
7559
|
+
position:relative;
|
|
7560
|
+
cursor:pointer;
|
|
7561
|
+
outline-style:solid;
|
|
7562
|
+
outline-width:2px;
|
|
7563
|
+
outline-color:rgb(var(--theme-palette-discovery-border-strong));
|
|
7564
|
+
}
|
|
7565
|
+
.ndl-spotlight-target .ndl-spotlight-target-inner {
|
|
7566
|
+
--tw-ring-color:rgb(var(--theme-palette-primary-focus));
|
|
7567
|
+
}
|
|
7568
|
+
.ndl-spotlight-target .ndl-spotlight-target-inner:focus-visible {
|
|
7569
|
+
border-style:none;
|
|
7570
|
+
outline:2px solid transparent;
|
|
7571
|
+
outline-offset:2px;
|
|
7572
|
+
--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
7573
|
+
--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
7574
|
+
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
7575
|
+
--tw-ring-offset-width:4px;
|
|
7576
|
+
}
|
|
7577
|
+
.ndl-spotlight-target .ndl-spotlight-target-inner > *{
|
|
7578
|
+
pointer-events:none;
|
|
7579
|
+
}
|
|
7580
|
+
.ndl-spotlight-target .ndl-spotlight-target-inner .ndl-spotlight-target-inert:focus-visible {
|
|
7581
|
+
border-style:none;
|
|
7582
|
+
outline:2px solid transparent;
|
|
7583
|
+
outline-offset:2px;
|
|
7584
|
+
--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
7585
|
+
--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
7586
|
+
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
7587
|
+
}
|
|
7588
|
+
.ndl-spotlight-target .ndl-spotlight-target-inner .ndl-spotlight-target-inert > *{
|
|
7589
|
+
pointer-events:none;
|
|
7590
|
+
}
|
|
7591
|
+
.ndl-spotlight-target-pulse{
|
|
7592
|
+
animation:pulse-shadow 2s infinite;
|
|
7593
|
+
}
|
|
7594
|
+
.ndl-spotlight-target-open {
|
|
7595
|
+
z-index:31;
|
|
7596
|
+
cursor:default;
|
|
7597
|
+
}
|
|
7598
|
+
@keyframes pulse-shadow{
|
|
7599
|
+
25%{
|
|
7600
|
+
box-shadow:0 0 0 6px rgb(var(--theme-palette-discovery-bg-weak)), 0 0 0 12px var(--spotlight-target-pulse-color);
|
|
7601
|
+
animation-timing-function:ease-in;
|
|
7602
|
+
}
|
|
7603
|
+
50%,
|
|
7604
|
+
100%{
|
|
7605
|
+
box-shadow:0 0 0 6px transparent, 0 0 0 12px transparent;
|
|
7606
|
+
animation-timing-function:ease-out;
|
|
7607
|
+
}
|
|
7608
|
+
}
|
|
7437
7609
|
.n-sr-only {
|
|
7438
7610
|
position:absolute;
|
|
7439
7611
|
width:1px;
|
|
@@ -7463,6 +7635,9 @@ button.ndl-avatar:focus-visible {
|
|
|
7463
7635
|
.n-isolate {
|
|
7464
7636
|
isolation:isolate;
|
|
7465
7637
|
}
|
|
7638
|
+
.n-z-\[32\] {
|
|
7639
|
+
z-index:32;
|
|
7640
|
+
}
|
|
7466
7641
|
.n-m-auto {
|
|
7467
7642
|
margin:auto;
|
|
7468
7643
|
}
|
|
@@ -7717,6 +7892,9 @@ button.ndl-avatar:focus-visible {
|
|
|
7717
7892
|
.n-gap-9 {
|
|
7718
7893
|
gap:36px;
|
|
7719
7894
|
}
|
|
7895
|
+
.n-gap-token-10 {
|
|
7896
|
+
gap:64px;
|
|
7897
|
+
}
|
|
7720
7898
|
.n-gap-token-2 {
|
|
7721
7899
|
gap:2px;
|
|
7722
7900
|
}
|
package/lib/tokens/js/tokens.js
CHANGED