@neo4j-ndl/base 2.0.2 → 2.0.4

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 (14) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/lib/cjs/tokens/js/storybook-design-token.js +1 -1
  3. package/lib/cjs/tokens/js/tokens-esm.js +1 -1
  4. package/lib/cjs/tokens/js/tokens.js +1 -1
  5. package/lib/esm/tokens/js/storybook-design-token.js +1 -1
  6. package/lib/esm/tokens/js/tokens-esm.js +1 -1
  7. package/lib/esm/tokens/js/tokens.js +1 -1
  8. package/lib/neo4j-ds-styles.css +51 -56
  9. package/lib/tokens/css/tokens.css +1 -1
  10. package/lib/tokens/js/tokens-raw.js +1 -1
  11. package/lib/tokens/js/tokens.js +1 -1
  12. package/lib/tokens/scss/tokens.scss +1 -1
  13. package/lib/types/tokens/js/storybook-design-token.d.ts +1 -1
  14. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # Change Log
2
2
 
3
+ ## 2.0.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [#685](https://github.com/neo4j/neo4j-design/pull/685) [`21caf1d`](https://github.com/neo4j/neo4j-design/commit/21caf1defc7aea5fb6907092567b5b988a5d93c6) Thanks [@konsalex](https://github.com/konsalex)! - fix icon button sizing (this should have been a breaking change, ui may break in some products)
8
+
9
+ ## 2.0.3
10
+
11
+ ### Patch Changes
12
+
13
+ - [#684](https://github.com/neo4j/neo4j-design/pull/684) [`c2e04dd`](https://github.com/neo4j/neo4j-design/commit/c2e04dd2e2b74bb3220c0dcb88c315b6bdffffae) Thanks [@konsalex](https://github.com/konsalex)! - fix text input and area sizings (this should have been a breaking change, ui may break in some products)
14
+
3
15
  ## 2.0.2
4
16
 
5
17
  ### Patch Changes
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 Mon, 16 Oct 2023 11:28:28 GMT
25
+ * Generated on Tue, 17 Oct 2023 10:11:00 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 Mon, 16 Oct 2023 11:28:28 GMT
25
+ * Generated on Tue, 17 Oct 2023 10:11:00 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 Mon, 16 Oct 2023 11:28:28 GMT
25
+ * Generated on Tue, 17 Oct 2023 10:11:00 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 Mon, 16 Oct 2023 11:28:28 GMT
24
+ * Generated on Tue, 17 Oct 2023 10:11:00 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 Mon, 16 Oct 2023 11:28:28 GMT
24
+ * Generated on Tue, 17 Oct 2023 10:11:00 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 Mon, 16 Oct 2023 11:28:28 GMT
25
+ * Generated on Tue, 17 Oct 2023 10:11:00 GMT
26
26
  */
27
27
  module.exports = {
28
28
  "transitions": {
package/lib/neo4j-ds-styles.css CHANGED
@@ -1174,7 +1174,7 @@ a.ndl-btn{
1174
1174
  text-decoration-line:none;
1175
1175
  }
1176
1176
  .ndl-icon-btn{
1177
- transition:background-color var(--transitions-stripped);
1177
+ transition:background-color var(--transitions-stripped-quick);
1178
1178
  display:inline-flex;
1179
1179
  cursor:pointer;
1180
1180
  align-items:center;
@@ -1220,13 +1220,12 @@ a.ndl-btn{
1220
1220
  cursor:not-allowed;
1221
1221
  color:rgb(var(--theme-palette-neutral-text-weakest));
1222
1222
  }
1223
- .ndl-icon-btn.ndl-small,
1224
- .ndl-icon-btn.ndl-extra-small{
1225
- width:24px;
1226
- height:24px;
1223
+ .ndl-icon-btn.ndl-small{
1224
+ width:20px;
1225
+ height:20px;
1227
1226
  font-size:16px;
1228
1227
  }
1229
- .ndl-icon-btn.ndl-small .ndl-icon, .ndl-icon-btn.ndl-extra-small .ndl-icon{
1228
+ .ndl-icon-btn.ndl-small .ndl-icon{
1230
1229
  width:16px;
1231
1230
  height:16px;
1232
1231
  }
@@ -1248,14 +1247,10 @@ a.ndl-btn{
1248
1247
  width:24px;
1249
1248
  height:24px;
1250
1249
  }
1251
- .ndl-icon-btn.ndl-extra-small:not(.ndl-grouped){
1250
+ .ndl-icon-btn.ndl-small:not(.ndl-grouped){
1252
1251
  width:24px;
1253
1252
  height:24px;
1254
1253
  }
1255
- .ndl-icon-btn.ndl-small:not(.ndl-grouped){
1256
- width:32px;
1257
- height:32px;
1258
- }
1259
1254
  .ndl-icon-btn.ndl-medium:not(.ndl-grouped){
1260
1255
  width:36px;
1261
1256
  height:36px;
@@ -2105,8 +2100,8 @@ a.ndl-btn{
2105
2100
  .ndl-form-item .ndl-form-item-wrapper .ndl-information-icon-large{
2106
2101
  margin-top:2px;
2107
2102
  margin-left:3px;
2108
- height:16px;
2109
- width:16px;
2103
+ height:20px;
2104
+ width:20px;
2110
2105
  color:rgb(var(--theme-palette-neutral-text-weak));
2111
2106
  }
2112
2107
  .ndl-form-item.ndl-type-text .ndl-form-item-label{
@@ -2245,11 +2240,11 @@ a.ndl-btn{
2245
2240
  top:calc(50% - 12px);
2246
2241
  right:16px;
2247
2242
  }
2248
- .ndl-form-item.ndl-small input[type='text'],
2249
- .ndl-form-item.ndl-small input[type='email'],
2250
- .ndl-form-item.ndl-small input[type='password'],
2251
- .ndl-form-item.ndl-small input[type='number'],
2252
- .ndl-form-item.ndl-small input[type='url']{
2243
+ .ndl-form-item.ndl-medium input[type='text'],
2244
+ .ndl-form-item.ndl-medium input[type='email'],
2245
+ .ndl-form-item.ndl-medium input[type='password'],
2246
+ .ndl-form-item.ndl-medium input[type='number'],
2247
+ .ndl-form-item.ndl-medium input[type='url']{
2253
2248
  height:36px;
2254
2249
  padding-top:8px;
2255
2250
  padding-bottom:8px;
@@ -2258,46 +2253,46 @@ a.ndl-btn{
2258
2253
  letter-spacing:0.016rem;
2259
2254
  line-height:1.25rem;
2260
2255
  }
2261
- .ndl-form-item.ndl-small input[type='text']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-small input[type='email']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-small input[type='password']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-small input[type='number']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-small input[type='url']:-moz-read-only:not(:disabled){
2256
+ .ndl-form-item.ndl-medium input[type='text']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='email']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='password']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='number']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='url']:-moz-read-only:not(:disabled){
2262
2257
  height:20px;
2263
2258
  }
2264
- .ndl-form-item.ndl-small input[type='text']:read-only:not(:disabled), .ndl-form-item.ndl-small input[type='email']:read-only:not(:disabled), .ndl-form-item.ndl-small input[type='password']:read-only:not(:disabled), .ndl-form-item.ndl-small input[type='number']:read-only:not(:disabled), .ndl-form-item.ndl-small input[type='url']:read-only:not(:disabled){
2259
+ .ndl-form-item.ndl-medium input[type='text']:read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='email']:read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='password']:read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='number']:read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='url']:read-only:not(:disabled){
2265
2260
  height:20px;
2266
2261
  }
2267
- .ndl-form-item.ndl-small .ndl-form-item-label{
2262
+ .ndl-form-item.ndl-medium .ndl-form-item-label{
2268
2263
  font-size:var(--font-size-body-medium);
2269
2264
  font-weight:var(--font-weight-normal);
2270
2265
  letter-spacing:0.016rem;
2271
2266
  line-height:1.25rem;
2272
2267
  }
2273
- .ndl-form-item.ndl-small.ndl-has-left-icon input[type='text'],
2274
- .ndl-form-item.ndl-small.ndl-has-left-icon input[type='email'],
2275
- .ndl-form-item.ndl-small.ndl-has-left-icon input[type='password'],
2276
- .ndl-form-item.ndl-small.ndl-has-left-icon input[type='number'],
2277
- .ndl-form-item.ndl-small.ndl-has-left-icon input[type='url']{
2268
+ .ndl-form-item.ndl-medium.ndl-has-left-icon input[type='text'],
2269
+ .ndl-form-item.ndl-medium.ndl-has-left-icon input[type='email'],
2270
+ .ndl-form-item.ndl-medium.ndl-has-left-icon input[type='password'],
2271
+ .ndl-form-item.ndl-medium.ndl-has-left-icon input[type='number'],
2272
+ .ndl-form-item.ndl-medium.ndl-has-left-icon input[type='url']{
2278
2273
  padding-left:36px;
2279
2274
  }
2280
- .ndl-form-item.ndl-small.ndl-has-icon .ndl-icon{
2275
+ .ndl-form-item.ndl-medium.ndl-has-icon .ndl-icon{
2281
2276
  position:absolute;
2282
2277
  height:20px;
2283
2278
  width:20px;
2284
2279
  }
2285
- .ndl-form-item.ndl-small.ndl-has-icon .ndl-icon.ndl-left-icon{
2280
+ .ndl-form-item.ndl-medium.ndl-has-icon .ndl-icon.ndl-left-icon{
2286
2281
  top:calc(50% - 10px);
2287
2282
  left:12px;
2288
2283
  }
2289
- .ndl-form-item.ndl-small.ndl-has-icon .ndl-right-icon{
2284
+ .ndl-form-item.ndl-medium.ndl-has-icon .ndl-right-icon{
2290
2285
  top:calc(50% - 10px);
2291
2286
  right:12px;
2292
2287
  }
2293
- .ndl-form-item.ndl-extra-small{
2288
+ .ndl-form-item.ndl-small{
2294
2289
  line-height:1.25rem;
2295
2290
  }
2296
- .ndl-form-item.ndl-extra-small input[type='text'],
2297
- .ndl-form-item.ndl-extra-small input[type='email'],
2298
- .ndl-form-item.ndl-extra-small input[type='password'],
2299
- .ndl-form-item.ndl-extra-small input[type='number'],
2300
- .ndl-form-item.ndl-extra-small input[type='url']{
2291
+ .ndl-form-item.ndl-small input[type='text'],
2292
+ .ndl-form-item.ndl-small input[type='email'],
2293
+ .ndl-form-item.ndl-small input[type='password'],
2294
+ .ndl-form-item.ndl-small input[type='number'],
2295
+ .ndl-form-item.ndl-small input[type='url']{
2301
2296
  height:24px;
2302
2297
  padding-top:2px;
2303
2298
  padding-bottom:2px;
@@ -2308,42 +2303,42 @@ a.ndl-btn{
2308
2303
  letter-spacing:0.016rem;
2309
2304
  line-height:1.25rem;
2310
2305
  }
2311
- .ndl-form-item.ndl-extra-small input[type='text']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-extra-small input[type='email']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-extra-small input[type='password']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-extra-small input[type='number']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-extra-small input[type='url']:-moz-read-only:not(:disabled){
2306
+ .ndl-form-item.ndl-small input[type='text']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-small input[type='email']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-small input[type='password']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-small input[type='number']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-small input[type='url']:-moz-read-only:not(:disabled){
2312
2307
  height:24px;
2313
2308
  }
2314
- .ndl-form-item.ndl-extra-small input[type='text']:read-only:not(:disabled), .ndl-form-item.ndl-extra-small input[type='email']:read-only:not(:disabled), .ndl-form-item.ndl-extra-small input[type='password']:read-only:not(:disabled), .ndl-form-item.ndl-extra-small input[type='number']:read-only:not(:disabled), .ndl-form-item.ndl-extra-small input[type='url']:read-only:not(:disabled){
2309
+ .ndl-form-item.ndl-small input[type='text']:read-only:not(:disabled), .ndl-form-item.ndl-small input[type='email']:read-only:not(:disabled), .ndl-form-item.ndl-small input[type='password']:read-only:not(:disabled), .ndl-form-item.ndl-small input[type='number']:read-only:not(:disabled), .ndl-form-item.ndl-small input[type='url']:read-only:not(:disabled){
2315
2310
  height:24px;
2316
2311
  }
2317
- .ndl-form-item.ndl-extra-small .ndl-form-item-label{
2312
+ .ndl-form-item.ndl-small .ndl-form-item-label{
2318
2313
  font-size:var(--font-size-body-medium);
2319
2314
  font-weight:var(--font-weight-normal);
2320
2315
  letter-spacing:0.016rem;
2321
2316
  line-height:1.25rem;
2322
2317
  }
2323
- .ndl-form-item.ndl-extra-small.ndl-has-left-icon input[type='text'],
2324
- .ndl-form-item.ndl-extra-small.ndl-has-left-icon input[type='email'],
2325
- .ndl-form-item.ndl-extra-small.ndl-has-left-icon input[type='password'],
2326
- .ndl-form-item.ndl-extra-small.ndl-has-left-icon input[type='number'],
2327
- .ndl-form-item.ndl-extra-small.ndl-has-left-icon input[type='url']{
2318
+ .ndl-form-item.ndl-small.ndl-has-left-icon input[type='text'],
2319
+ .ndl-form-item.ndl-small.ndl-has-left-icon input[type='email'],
2320
+ .ndl-form-item.ndl-small.ndl-has-left-icon input[type='password'],
2321
+ .ndl-form-item.ndl-small.ndl-has-left-icon input[type='number'],
2322
+ .ndl-form-item.ndl-small.ndl-has-left-icon input[type='url']{
2328
2323
  padding-left:28px;
2329
2324
  }
2330
- .ndl-form-item.ndl-extra-small.ndl-has-right-icon input[type='text'],
2331
- .ndl-form-item.ndl-extra-small.ndl-has-right-icon input[type='email'],
2332
- .ndl-form-item.ndl-extra-small.ndl-has-right-icon input[type='password'],
2333
- .ndl-form-item.ndl-extra-small.ndl-has-right-icon input[type='number'],
2334
- .ndl-form-item.ndl-extra-small.ndl-has-right-icon input[type='url']{
2325
+ .ndl-form-item.ndl-small.ndl-has-right-icon input[type='text'],
2326
+ .ndl-form-item.ndl-small.ndl-has-right-icon input[type='email'],
2327
+ .ndl-form-item.ndl-small.ndl-has-right-icon input[type='password'],
2328
+ .ndl-form-item.ndl-small.ndl-has-right-icon input[type='number'],
2329
+ .ndl-form-item.ndl-small.ndl-has-right-icon input[type='url']{
2335
2330
  padding-right:28px;
2336
2331
  }
2337
- .ndl-form-item.ndl-extra-small.ndl-has-icon .ndl-icon{
2332
+ .ndl-form-item.ndl-small.ndl-has-icon .ndl-icon{
2338
2333
  position:absolute;
2339
2334
  height:16px;
2340
2335
  width:16px;
2341
2336
  }
2342
- .ndl-form-item.ndl-extra-small.ndl-has-icon .ndl-icon.ndl-left-icon{
2337
+ .ndl-form-item.ndl-small.ndl-has-icon .ndl-icon.ndl-left-icon{
2343
2338
  top:calc(50% - 8px);
2344
2339
  left:8px;
2345
2340
  }
2346
- .ndl-form-item.ndl-extra-small.ndl-has-icon .ndl-right-icon{
2341
+ .ndl-form-item.ndl-small.ndl-has-icon .ndl-right-icon{
2347
2342
  top:calc(50% - 8px);
2348
2343
  right:8px;
2349
2344
  }
@@ -5140,8 +5135,8 @@ a.ndl-cypher-editor .cm-editor .cm-button, a .ndl-codemirror-editor .cm-editor
5140
5135
  .ndl-textarea .ndl-textarea-wrapper .ndl-information-icon-large{
5141
5136
  margin-top:2px;
5142
5137
  margin-left:3px;
5143
- height:16px;
5144
- width:16px;
5138
+ height:20px;
5139
+ width:20px;
5145
5140
  color:rgb(var(--theme-palette-neutral-text-weak));
5146
5141
  }
5147
5142
  .ndl-textarea.ndl-type-text .ndl-textarea-label{
@@ -5217,7 +5212,7 @@ a.ndl-cypher-editor .cm-editor .cm-button, a .ndl-codemirror-editor .cm-editor
5217
5212
  width:24px;
5218
5213
  color:rgb(var(--theme-palette-neutral-text-weak));
5219
5214
  }
5220
- .ndl-textarea.ndl-small textarea{
5215
+ .ndl-textarea.ndl-small textarea, .ndl-textarea.ndl-medium textarea{
5221
5216
  padding-top:8px;
5222
5217
  padding-bottom:8px;
5223
5218
  font-size:var(--font-size-body-medium);
@@ -5225,13 +5220,13 @@ a.ndl-cypher-editor .cm-editor .cm-button, a .ndl-codemirror-editor .cm-editor
5225
5220
  letter-spacing:0.016rem;
5226
5221
  line-height:1.25rem;
5227
5222
  }
5228
- .ndl-textarea.ndl-small .ndl-textarea-label{
5223
+ .ndl-textarea.ndl-small .ndl-textarea-label, .ndl-textarea.ndl-medium .ndl-textarea-label{
5229
5224
  font-size:var(--font-size-body-medium);
5230
5225
  font-weight:var(--font-weight-normal);
5231
5226
  letter-spacing:0.016rem;
5232
5227
  line-height:1.25rem;
5233
5228
  }
5234
- .ndl-textarea.ndl-small.ndl-has-icon .ndl-icon{
5229
+ .ndl-textarea.ndl-small.ndl-has-icon .ndl-icon, .ndl-textarea.ndl-medium.ndl-has-icon .ndl-icon{
5235
5230
  height:20px;
5236
5231
  width:20px;
5237
5232
  position:absolute;
package/lib/tokens/css/tokens.css CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  /**
23
23
  * Do not edit directly
24
- * Generated on Mon, 16 Oct 2023 11:28:28 GMT
24
+ * Generated on Tue, 17 Oct 2023 10:11:00 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 Mon, 16 Oct 2023 11:28:28 GMT
24
+ * Generated on Tue, 17 Oct 2023 10:11:00 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 Mon, 16 Oct 2023 11:28:28 GMT
24
+ * Generated on Tue, 17 Oct 2023 10:11:00 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 Mon, 16 Oct 2023 11:28:28 GMT
3
+ // Generated on Tue, 17 Oct 2023 10:11:00 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 Mon, 16 Oct 2023 11:28:28 GMT
24
+ * Generated on Tue, 17 Oct 2023 10:11:00 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": "2.0.2",
3
+ "version": "2.0.4",
4
4
  "description": "Neo4j base package for the design system",
5
5
  "author": "Neo4j Inc.",
6
6
  "homepage": "https://www.neo4j.design",