@neo4j-ndl/base 1.3.2 → 1.3.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 1.3.4
+
+### Patch Changes
+
+- d8cb102: Added extra small size of dropdown.
+
+## 1.3.3
+
+### Patch Changes
+
+- f483090: Change theme of the last components to palette
+
 ## 1.3.2
 
 ### Patch Changes

package/lib/cjs/tokens/js/tokens-esm.js

@@ -1,7 +1,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Tue, 09 May 2023 15:04:23 GMT
+* Generated on Thu, 11 May 2023 12:06:23 GMT
 */
 exports.__esModule = true;
 exports.tokens = void 0;

package/lib/cjs/tokens/js/tokens.js

@@ -1,7 +1,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Tue, 09 May 2023 15:04:23 GMT
+* Generated on Thu, 11 May 2023 12:06:23 GMT
 */
 module.exports = {
     "transitions": {

package/lib/esm/tokens/js/tokens-esm.js

@@ -1,6 +1,6 @@
 /**
 * Do not edit directly
-* Generated on Tue, 09 May 2023 15:04:23 GMT
+* Generated on Thu, 11 May 2023 12:06:23 GMT
 */
 export const tokens = {
     "transitions": {

package/lib/esm/tokens/js/tokens.js

@@ -1,7 +1,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Tue, 09 May 2023 15:04:23 GMT
+* Generated on Thu, 11 May 2023 12:06:23 GMT
 */
 module.exports = {
     "transitions": {

package/lib/neo4j-ds-styles.css

@@ -459,7 +459,7 @@ video {
  */
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 15:04:23 GMT
+ * Generated on Thu, 11 May 2023 12:06:23 GMT
  */
 :root {
   --transitions-values-properties-default: all;
@@ -1211,14 +1211,12 @@ a.ndl-btn{
   gap: 0.25rem;
   border-radius: 8px;
   border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(196 200 205 / var(--tw-border-opacity));
+  border-color: rgb(var(--palette-neutral-border-strong));
   background-color: rgb(var(--palette-neutral-bg-weak));
   padding: 0.25rem;
 }
 .ndl-icon-btn-array.ndl-array-floating{
-  --tw-border-opacity: 1;
-  border-color: rgb(238 241 246 / var(--tw-border-opacity));
+  border-color: rgb(var(--palette-neutral-border-weak));
   --tw-shadow: 0px 4px 8px 0px rgba(12, 26, 37, 0.08);
   --tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -1284,8 +1282,7 @@ a.ndl-btn{
   padding-bottom: 0px;
 }
 .ndl-label.ndl-clean .ndl-label-text{
-  --tw-text-opacity: 1;
-  color: rgb(21 30 41 / var(--tw-text-opacity));
+  color: rgb(var(--palette-neutral-text-default));
 }
 .ndl-label.ndl-outlined{
   border-width: 0.5px;
@@ -1610,8 +1607,7 @@ a.ndl-btn{
   width: -moz-fit-content;
   width: fit-content;
   border-radius: 4px;
-  --tw-bg-opacity: 1;
-  background-color: rgb(83 91 102 / var(--tw-bg-opacity));
+  background-color: rgb(var(--palette-neutral-bg-strongest));
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1628,8 +1624,7 @@ a.ndl-btn{
   height: 0px;
   width: 0px;
   border-style: solid;
-  --tw-border-opacity: 1;
-  border-color: rgb(83 91 102 / var(--tw-border-opacity));
+  border-color: rgb(var(--palette-neutral-bg-strongest));
 }
 .ndl-tooltip-wrapper .ndl-tooltip-triangle.ndl-bottom{
   bottom: -8px;
@@ -2343,8 +2338,7 @@ a.ndl-btn{
   padding-right: 0.5rem;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
-  --tw-bg-opacity: 1;
-  background-color: rgb(230 233 238 / var(--tw-bg-opacity));
+  background-color: rgb(var(--palette-neutral-bg-strong));
   font-size: var(--font-size-body-medium);
   font-weight: var(--font-weight-normal);
   letter-spacing: 0.016rem;
@@ -2558,8 +2552,7 @@ a.ndl-btn{
  */
 .ndl-dialog{
   border-radius: 16px;
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(var(--palette-neutral-bg-weak));
   padding: 3rem;
   --tw-shadow: 0px 4px 8px 0px rgba(12, 26, 37, 0.08);
   --tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color);
@@ -2571,20 +2564,16 @@ a.ndl-btn{
     margin-left: 1rem;
   }
 .ndl-dialog .ndl-dialog-type-icon.ndl-info{
-  --tw-text-opacity: 1;
-  color: rgb(0 111 214 / var(--tw-text-opacity));
+  color: rgb(var(--palette-primary-icon));
 }
 .ndl-dialog .ndl-dialog-type-icon.ndl-success{
-  --tw-text-opacity: 1;
-  color: rgb(50 125 96 / var(--tw-text-opacity));
+  color: rgb(var(--palette-success-icon));
 }
 .ndl-dialog .ndl-dialog-type-icon.ndl-warning{
-  --tw-text-opacity: 1;
-  color: rgb(150 108 46 / var(--tw-text-opacity));
+  color: rgb(var(--palette-warning-icon));
 }
 .ndl-dialog .ndl-dialog-type-icon.ndl-danger{
-  --tw-text-opacity: 1;
-  color: rgb(204 37 75 / var(--tw-text-opacity));
+  color: rgb(var(--palette-danger-icon));
 }
 .ndl-dialog .ndl-dialog-close{
   position: absolute;
@@ -2601,8 +2590,7 @@ a.ndl-btn{
   margin-bottom: 1rem;
 }
 .ndl-dialog-description{
-  --tw-text-opacity: 1;
-  color: rgb(83 91 102 / var(--tw-text-opacity));
+  color: rgb(var(--palette-neutral-text-weak));
 }
 .ndl-dialog.ndl-with-icon .ndl-dialog-description{
   min-height: 70px;
@@ -2911,9 +2899,8 @@ a.ndl-btn{
     transform: translate3d(0%, 0%, 0);
     will-change: transform;
     border-style: solid;
-    border-color: rgb(230 233 238 / var(--tw-border-opacity));
-    --tw-border-opacity: 1;
-    border-bottom-color: rgb(1 139 255 / var(--tw-border-opacity));
+    border-color: rgb(var(--palette-neutral-bg-strong));
+    border-bottom-color: rgb(var(--palette-primary-focus));
   }
 /**
  *
@@ -3309,8 +3296,7 @@ a.ndl-btn{
     bottom: 0;
     left: 50%;
     border-bottom-width: 1px;
-    --tw-border-opacity: 1;
-    border-color: rgb(238 241 246 / var(--tw-border-opacity));
+    border-color: rgb(var(--palette-neutral-border-weak));
   }
 /* Add prefix here also, as there is a conflict with native tailwind classes like "<prefix>table-row" */
 .ndl-table .ndl-table-row:last-child:after{
@@ -3322,8 +3308,7 @@ a.ndl-btn{
   align-items: center;
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
-  --tw-text-opacity: 1;
-  color: rgb(113 119 128 / var(--tw-text-opacity));
+  color: rgb(var(--palette-neutral-text-weaker));
   font-size: var(--font-size-body-large);
   font-weight: var(--font-weight-normal);
   letter-spacing: 0.016rem;
@@ -3336,8 +3321,7 @@ a.ndl-btn{
   overflow: visible;
 }
 .ndl-table .ndl-table-row:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 247 250 / var(--tw-bg-opacity));
+  background-color: rgb(var(--palette-neutral-bg-default));
 }
 .ndl-table .ndl-table-row .ndl-table-row-actions{
   display: none;
@@ -3366,8 +3350,7 @@ a.ndl-btn{
   padding-right: 1.75rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
-  --tw-text-opacity: 1;
-  color: rgb(21 30 41 / var(--tw-text-opacity));
+  color: rgb(var(--palette-neutral-text-default));
   font-size: var(--font-size-body-medium);
   font-weight: var(--font-weight-normal);
   letter-spacing: 0.016rem;
@@ -3398,8 +3381,7 @@ a.ndl-btn{
       padding-top: 0.75rem;
       padding-bottom: 0.75rem;
       text-align: left;
-      --tw-text-opacity: 1;
-      color: rgb(83 91 102 / var(--tw-text-opacity));
+      color: rgb(var(--palette-neutral-text-weak));
   font-size: var(--font-size-body-large);
   font-weight: var(--font-weight-normal);
   letter-spacing: 0.016rem;
@@ -3408,10 +3390,8 @@ a.ndl-btn{
 .ndl-table tr th.ndl-table-column-styling.ndl-sortable:hover{
   border-left-width: 1px;
   border-right-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(196 200 205 / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 247 250 / var(--tw-bg-opacity));
+  border-color: rgb(var(--palette-neutral-border-strong));
+  background-color: rgb(var(--palette-neutral-bg-default));
 }
 .ndl-table tr th.ndl-table-column-styling.ndl-sortable:first-child{
   border-left-width: 0px;
@@ -3441,8 +3421,7 @@ a.ndl-btn{
   cursor: col-resize;
 }
 .ndl-table .ndl-table-resizing-bar:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(83 91 102 / var(--tw-bg-opacity));
+  background-color: rgb(var(--palette-neutral-bg-strongest));
 }
 .ndl-table-select {
   /* Reset default select */
@@ -3459,10 +3438,8 @@ a.ndl-btn{
   height: 2.25rem;
   border-radius: 6px;
   border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(196 200 205 / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  border-color: rgb(var(--palette-neutral-border-strong));
+  background-color: rgb(var(--palette-neutral-bg-weak));
   padding-left: 0.75rem;
   padding-right: 1.75rem;
   line-height: 1;
@@ -3517,8 +3494,7 @@ a.ndl-btn{
   margin-right: auto;
 }
 .ndl-drag-and-drop.ndl-drag-disabled{
-  --tw-text-opacity: 1;
-  color: rgb(178 183 189 / var(--tw-text-opacity));
+  color: rgb(var(--palette-neutral-text-weakest));
 }
 .ndl-drag-and-drop.ndl-drag-active{
   --tw-bg-opacity: 1;
@@ -3547,8 +3523,7 @@ a.ndl-btn{
   line-height: 1.25rem;
 }
 .ndl-drag-and-drop .ndl-drag-and-drop-header .ndl-dnd-browse-link:not(:disabled){
-  --tw-text-opacity: 1;
-  color: rgb(0 111 214 / var(--tw-text-opacity));
+  color: rgb(var(--palette-primary-text));
 }
 .ndl-drag-and-drop .ndl-drag-and-drop-header .ndl-upload-img-wrapper{
   position: relative;
@@ -3581,8 +3556,7 @@ a.ndl-btn{
   line-height: 1.25rem;
 }
 .ndl-drag-and-drop:not(.ndl-drag-disabled) .ndl-file-support-text{
-  --tw-text-opacity: 1;
-  color: rgb(113 119 128 / var(--tw-text-opacity));
+  color: rgb(var(--palette-neutral-text-weaker));
 }
 .ndl-drag-and-drop.ndl-drag-active.ndl-file-invalid{
   --tw-bg-opacity: 1;
@@ -3656,27 +3630,35 @@ a.ndl-btn{
 .ndl-dropdown .ndl-dropdown-icon{
   color: rgb(var(--palette-neutral-text-weak));
 }
-.ndl-dropdown .ndl-dropdown-icon.ndl-small {
-      width: 20px;
-      height: 20px;
-    }
-.ndl-dropdown .ndl-dropdown-icon.ndl-large {
-      width: 24px;
-      height: 24px;
-    }
+.ndl-dropdown .ndl-dropdown-icon.ndl-extra-small{
+  height: 1rem;
+  width: 1rem;
+}
+.ndl-dropdown .ndl-dropdown-icon.ndl-small{
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.ndl-dropdown .ndl-dropdown-icon.ndl-large{
+  height: 1.5rem;
+  width: 1.5rem;
+}
 .ndl-dropdown .ndl-indicator {
     width: 1px;
     height: 100%;
     background-color: rgb(var(--palette-neutral-border-strong));
   }
-.ndl-dropdown .ndl-error-icon.ndl-small {
-      width: 20px;
-      height: 20px;
-    }
-.ndl-dropdown .ndl-error-icon.ndl-large {
-      width: 24px;
-      height: 24px;
-    }
+.ndl-dropdown .ndl-error-icon.ndl-extra-small{
+  height: 1rem;
+  width: 1rem;
+}
+.ndl-dropdown .ndl-error-icon.ndl-small{
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.ndl-dropdown .ndl-error-icon.ndl-large{
+  height: 1.5rem;
+  width: 1.5rem;
+}
 .ndl-dropdown .ndl-error-icon{
   color: rgb(var(--palette-danger-icon));
 }
@@ -3742,8 +3724,7 @@ a.ndl-btn{
 .ndl-node-label:not(.ndl-disabled).ndl-selected:after, 
     .ndl-node-label:not(.ndl-disabled):active:after, 
     .ndl-node-label:not(.ndl-disabled):focus-visible:after{
-  --tw-border-opacity: 1;
-  border-color: rgb(1 139 255 / var(--tw-border-opacity));
+  border-color: rgb(var(--palette-primary-focus));
 }
 .ndl-node-label.ndl-disabled{
   cursor: default;
@@ -3759,8 +3740,7 @@ a.ndl-btn{
   padding-bottom: 0.125rem;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(var(--palette-neutral-text-inverse));
   font-size: var(--font-size-label);
   font-weight: var(--font-weight-bold);
   letter-spacing: 0;
@@ -3768,8 +3748,7 @@ a.ndl-btn{
 }
 .ndl-property-key-label.ndl-disabled{
   cursor: default;
-  --tw-text-opacity: 1;
-  color: rgb(178 183 189 / var(--tw-text-opacity));
+  color: rgb(var(--palette-neutral-text-weakest));
 }
 .ndl-property-key-label .ndl-property-key-label-content{
   width: 100%;
@@ -3800,8 +3779,7 @@ a.ndl-btn{
 .ndl-property-key-label:not(.ndl-disabled).ndl-selected:after, 
     .ndl-property-key-label:not(.ndl-disabled):active:after, 
     .ndl-property-key-label:not(.ndl-disabled):focus-visible:after{
-  --tw-border-opacity: 1;
-  border-color: rgb(1 139 255 / var(--tw-border-opacity));
+  border-color: rgb(var(--palette-primary-focus));
 }
 .ndl-relationship-label{
   position: relative;
@@ -3862,15 +3840,13 @@ a.ndl-btn{
   left: -3px;
 }
 .ndl-relationship-label:not(.ndl-disabled).ndl-selected .ndl-hexagon-end-active,  .ndl-relationship-label:not(.ndl-disabled):focus-visible .ndl-hexagon-end-active,  .ndl-relationship-label:not(.ndl-disabled):active .ndl-hexagon-end-active{
-  fill: #018bff;
+  fill: rgb(var(--palette-primary-focus));
 }
 .ndl-relationship-label:not(.ndl-disabled).ndl-selected .ndl-relationship-label-container:after,  .ndl-relationship-label:not(.ndl-disabled):focus-visible .ndl-relationship-label-container:after,  .ndl-relationship-label:not(.ndl-disabled):active .ndl-relationship-label-container:after{
-  --tw-bg-opacity: 1;
-  background-color: rgb(1 139 255 / var(--tw-bg-opacity));
+  background-color: rgb(var(--palette-primary-focus));
 }
 .ndl-relationship-label:not(.ndl-disabled).ndl-selected .ndl-relationship-label-container:before,  .ndl-relationship-label:not(.ndl-disabled):focus-visible .ndl-relationship-label-container:before,  .ndl-relationship-label:not(.ndl-disabled):active .ndl-relationship-label-container:before{
-  --tw-bg-opacity: 1;
-  background-color: rgb(1 139 255 / var(--tw-bg-opacity));
+  background-color: rgb(var(--palette-primary-focus));
 }
 .ndl-relationship-label:focus-visible{
   outline: 2px solid transparent;
@@ -3901,8 +3877,7 @@ a.ndl-btn{
  */
 .ndl-wizard-circle{
   z-index: 2;
-  --tw-text-opacity: 1;
-  color: rgb(21 30 41 / var(--tw-text-opacity));
+  color: rgb(var(--palette-neutral-text-default));
 }
 .ndl-wizard-circle .ndl-text.ndl-horizontal{
   position: absolute;
@@ -3959,12 +3934,10 @@ a.ndl-btn{
   z-index: 1;
 }
 .ndl-wizard-line.ndl-complete{
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 111 214 / var(--tw-bg-opacity));
+  background-color: rgb(var(--palette-primary-text));
 }
 .ndl-wizard-line.ndl-incomplete{
-  --tw-bg-opacity: 1;
-  background-color: rgb(178 183 189 / var(--tw-bg-opacity));
+  background-color: rgb(var(--palette-neutral-text-weakest));
 }
 .ndl-wizard-line.ndl-active.ndl-horizontal {
   background: linear-gradient(

package/lib/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 15:04:23 GMT
+ * Generated on Thu, 11 May 2023 12:06:23 GMT
  */
 
 :root {

package/lib/tokens/js/tokens-raw.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 15:04:23 GMT
+ * Generated on Thu, 11 May 2023 12:06:23 GMT
  */
 
 module.exports = {

package/lib/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
 * Do not edit directly
-* Generated on Tue, 09 May 2023 15:04:23 GMT
+* Generated on Thu, 11 May 2023 12:06:23 GMT
 */
 
 export const tokens = {

package/lib/tokens/scss/tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 09 May 2023 15:04:23 GMT
+// Generated on Thu, 11 May 2023 12:06:23 GMT
 
 $transitions-values-properties-default: all;
 $transitions-values-duration-default: 100ms;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/base",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Neo4j base package for the design system",
   "author": "Neo4j Inc.",
   "homepage": "",