@nimbus-ds/components 5.1.1 → 5.2.1-rc.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.
Files changed (4) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/index.d.ts +93 -10
  3. package/dist/index.js +1 -1
  4. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -2,6 +2,19 @@
2
2
 
3
3
  Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop’s team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
4
4
 
5
+ ## 2023-10-02 `5.3.0`
6
+
7
+ - Update `Checkbox`, `Chip`, `IconButton`, `Radio`, `Toggle` and `Alert` packages with new color tokens from `@nimbus-ds/tokens` package.
8
+
9
+ ## 2023-08-04 `5.2.0`
10
+
11
+ #### 🎉 New features
12
+
13
+ - Added `fontSize` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
14
+ - Added `fontWeight` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
15
+ - Added `lineHeight` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
16
+ - Added `textAlign` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
17
+
5
18
  ## 2023-07-11 `5.1.1`
6
19
 
7
20
  #### 🎉 New features
package/dist/index.d.ts CHANGED
@@ -150,9 +150,7 @@ declare const propertiesBox: {
150
150
  "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
151
151
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
152
152
  };
153
- display: Display[]; /**
154
- * The borderBottomWidth property defines the width of the border at the bottom of a box.
155
- */
153
+ display: Display[];
156
154
  flexDirection: FlexDirection[];
157
155
  flexWrap: FlexWrap[];
158
156
  justifyContent: JustifyContent[];
@@ -177,9 +175,7 @@ declare const propertiesBox: {
177
175
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
178
176
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
179
177
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
180
- "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
181
- * The bottom property participates in setting the vertical position of a positioned box.
182
- */
178
+ "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
183
179
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
184
180
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
185
181
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -205,9 +201,7 @@ declare const propertiesBox: {
205
201
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
206
202
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
207
203
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
208
- "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
209
- * The bottom property participates in setting the vertical position of a positioned box.
210
- */
204
+ "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
211
205
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
212
206
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
213
207
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -333,10 +327,76 @@ declare const propertiesBox: {
333
327
  "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
334
328
  "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
335
329
  "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
336
- "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
330
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
331
+ * The pointerEvents property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
332
+ */
337
333
  "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
338
334
  "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
339
335
  };
336
+ textAlign: TextAlign[];
337
+ fontWeight: {
338
+ regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
339
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
340
+ bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
341
+ };
342
+ fontSize: {
343
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
344
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
345
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
346
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
347
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
348
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
349
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
350
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
351
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
352
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
353
+ "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
354
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
355
+ "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
356
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
357
+ "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
358
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
359
+ "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
360
+ "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
361
+ "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
362
+ "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
363
+ "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
364
+ h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
365
+ h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
366
+ h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
367
+ h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
368
+ h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
369
+ h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
370
+ };
371
+ lineHeight: {
372
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
373
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
374
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
375
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
376
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
377
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
378
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
379
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
380
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
381
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
382
+ "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
383
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
384
+ "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
385
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
386
+ "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
387
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
388
+ "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
389
+ "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
390
+ "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
391
+ "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
392
+ "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
393
+ h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
394
+ h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
395
+ h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
396
+ h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
397
+ h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
398
+ h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
399
+ };
340
400
  };
341
401
  export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
342
402
  export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
@@ -350,6 +410,9 @@ export type BoxGapProperties = keyof typeof propertiesBox.gap;
350
410
  export type BoxGridGapProperties = keyof typeof propertiesBox.gridGap;
351
411
  export type BoxZIndexProperties = keyof typeof propertiesBox.zIndex;
352
412
  export type BoxTransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
413
+ export type BoxFontSizeProperties = keyof typeof propertiesBox.fontSize;
414
+ export type BoxFontWeightProperties = keyof typeof propertiesBox.fontWeight;
415
+ export type BoxLineHeightProperties = keyof typeof propertiesBox.lineHeight;
353
416
  export interface BoxConditions<T> extends Conditions<T> {
354
417
  focus?: T;
355
418
  focusWithin?: T;
@@ -708,6 +771,26 @@ export interface BoxSprinkle {
708
771
  * The marginY property defines the margin area on the top and bottom of a box
709
772
  */
710
773
  marginY?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
774
+ /**
775
+ * The fontSize property sets the size of the box.
776
+ * @default base
777
+ */
778
+ fontSize?: BoxFontSizeProperties | BoxConditions<BoxFontSizeProperties>;
779
+ /**
780
+ * The fontWeight property sets how thick or thin characters in box should be displayed.
781
+ * @default regular
782
+ */
783
+ fontWeight?: BoxFontWeightProperties | BoxConditions<BoxFontWeightProperties>;
784
+ /**
785
+ * The lineHeight property specifies the line height of the box.
786
+ * @default base
787
+ */
788
+ lineHeight?: BoxLineHeightProperties | BoxConditions<BoxLineHeightProperties>;
789
+ /**
790
+ * The textAlign property specifies the horizontal alignment of box.
791
+ * @default left
792
+ */
793
+ textAlign?: TextAlign | BoxConditions<TextAlign>;
711
794
  }
712
795
  declare const fileUploader: {
713
796
  sprinkle: ((props: {