@neo4j-ndl/base 3.1.4 → 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.
Files changed (13) hide show
  1. package/lib/cjs/tokens/js/storybook-design-token.js +1 -1
  2. package/lib/cjs/tokens/js/tokens-esm.js +1 -1
  3. package/lib/cjs/tokens/js/tokens.js +1 -1
  4. package/lib/esm/tokens/js/storybook-design-token.js +1 -1
  5. package/lib/esm/tokens/js/tokens-esm.js +1 -1
  6. package/lib/esm/tokens/js/tokens.js +1 -1
  7. package/lib/neo4j-ds-styles.css +177 -0
  8. package/lib/tokens/css/tokens.css +1 -1
  9. package/lib/tokens/js/tokens-raw.js +1 -1
  10. package/lib/tokens/js/tokens.js +1 -1
  11. package/lib/tokens/scss/tokens.scss +1 -1
  12. package/lib/types/tokens/js/storybook-design-token.d.ts +1 -1
  13. package/package.json +1 -1
package/lib/cjs/tokens/js/storybook-design-token.js CHANGED
@@ -22,7 +22,7 @@
22
22
  "use strict";
23
23
  /**
24
24
  * Do not edit directly
25
- * Generated on Fri, 17 Jan 2025 07:57:41 GMT
25
+ * Generated on Mon, 20 Jan 2025 07:44:57 GMT
26
26
  */
27
27
  Object.defineProperty(exports, "__esModule", { value: true });
28
28
  exports.tokens = void 0;
package/lib/cjs/tokens/js/tokens-esm.js CHANGED
@@ -22,7 +22,7 @@
22
22
  "use strict";
23
23
  /**
24
24
  * Do not edit directly
25
- * Generated on Fri, 17 Jan 2025 07:57:41 GMT
25
+ * Generated on Mon, 20 Jan 2025 07:44:57 GMT
26
26
  */
27
27
  Object.defineProperty(exports, "__esModule", { value: true });
28
28
  exports.tokens = void 0;
package/lib/cjs/tokens/js/tokens.js CHANGED
@@ -22,7 +22,7 @@
22
22
  "use strict";
23
23
  /**
24
24
  * Do not edit directly
25
- * Generated on Fri, 17 Jan 2025 07:57:41 GMT
25
+ * Generated on Mon, 20 Jan 2025 07:44:57 GMT
26
26
  */
27
27
  module.exports = {
28
28
  "transitions": {
package/lib/esm/tokens/js/storybook-design-token.js CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  /**
23
23
  * Do not edit directly
24
- * Generated on Fri, 17 Jan 2025 07:57:41 GMT
24
+ * Generated on Mon, 20 Jan 2025 07:44:57 GMT
25
25
  */
26
26
  export const tokens = {
27
27
  "transitions": [
package/lib/esm/tokens/js/tokens-esm.js CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  /**
23
23
  * Do not edit directly
24
- * Generated on Fri, 17 Jan 2025 07:57:41 GMT
24
+ * Generated on Mon, 20 Jan 2025 07:44:57 GMT
25
25
  */
26
26
  export const tokens = {
27
27
  "transitions": {
package/lib/esm/tokens/js/tokens.js CHANGED
@@ -22,7 +22,7 @@
22
22
  "use strict";
23
23
  /**
24
24
  * Do not edit directly
25
- * Generated on Fri, 17 Jan 2025 07:57:41 GMT
25
+ * Generated on Mon, 20 Jan 2025 07:44:57 GMT
26
26
  */
27
27
  module.exports = {
28
28
  "transitions": {
package/lib/neo4j-ds-styles.css CHANGED
@@ -5280,6 +5280,27 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
5280
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 {
5281
5281
  background-color:rgb(var(--theme-palette-neutral-pressed));
5282
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
+ }
5283
5304
  .ndl-cypher-editor .cm-completionLabel, .ndl-codemirror-editor .cm-completionLabel{
5284
5305
  font-family:'Fira Code';
5285
5306
  font-weight:700;
@@ -7435,6 +7456,156 @@ button.ndl-avatar:focus-visible {
7435
7456
  letter-spacing:0.016rem;
7436
7457
  line-height:1.5rem;
7437
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
+ }
7438
7609
  .n-sr-only {
7439
7610
  position:absolute;
7440
7611
  width:1px;
@@ -7464,6 +7635,9 @@ button.ndl-avatar:focus-visible {
7464
7635
  .n-isolate {
7465
7636
  isolation:isolate;
7466
7637
  }
7638
+ .n-z-\[32\] {
7639
+ z-index:32;
7640
+ }
7467
7641
  .n-m-auto {
7468
7642
  margin:auto;
7469
7643
  }
@@ -7718,6 +7892,9 @@ button.ndl-avatar:focus-visible {
7718
7892
  .n-gap-9 {
7719
7893
  gap:36px;
7720
7894
  }
7895
+ .n-gap-token-10 {
7896
+ gap:64px;
7897
+ }
7721
7898
  .n-gap-token-2 {
7722
7899
  gap:2px;
7723
7900
  }
package/lib/tokens/css/tokens.css CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  /**
23
23
  * Do not edit directly
24
- * Generated on Fri, 17 Jan 2025 07:57:41 GMT
24
+ * Generated on Mon, 20 Jan 2025 07:44:57 GMT
25
25
  */
26
26
 
27
27
  :root {
package/lib/tokens/js/tokens-raw.js CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  /**
23
23
  * Do not edit directly
24
- * Generated on Fri, 17 Jan 2025 07:57:41 GMT
24
+ * Generated on Mon, 20 Jan 2025 07:44:57 GMT
25
25
  */
26
26
 
27
27
  module.exports = {
package/lib/tokens/js/tokens.js CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  /**
23
23
  * Do not edit directly
24
- * Generated on Fri, 17 Jan 2025 07:57:41 GMT
24
+ * Generated on Mon, 20 Jan 2025 07:44:57 GMT
25
25
  */
26
26
 
27
27
  export const tokens = {
package/lib/tokens/scss/tokens.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 17 Jan 2025 07:57:41 GMT
3
+ // Generated on Mon, 20 Jan 2025 07:44:57 GMT
4
4
 
5
5
  $transitions-values-properties-default: all;
6
6
  $transitions-values-duration-quick: 100ms;
package/lib/types/tokens/js/storybook-design-token.d.ts CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  /**
23
23
  * Do not edit directly
24
- * Generated on Fri, 17 Jan 2025 07:57:41 GMT
24
+ * Generated on Mon, 20 Jan 2025 07:44:57 GMT
25
25
  */
26
26
  export const tokens: {
27
27
  transitions: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neo4j-ndl/base",
3
- "version": "3.1.4",
3
+ "version": "3.2.0",
4
4
  "description": "Neo4j base package for the design system",
5
5
  "author": "Neo4j Inc.",
6
6
  "homepage": "https://www.neo4j.design",