design-zystem 1.0.219 → 1.0.221

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 (5) hide show
  1. package/dist/index.d.mts +25 -0
  2. package/dist/index.d.ts +25 -0
  3. package/dist/index.js +38 -10
  4. package/dist/index.mjs +38 -10
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -870,8 +870,24 @@ declare const colors: {
870
870
  readonly yellow_100: "#FEEDD5";
871
871
  readonly yellow_300: "#F8AF2D";
872
872
  readonly yellow_400: "#DF8F00";
873
+ readonly yellow_500: "#FFD700";
874
+ readonly orange_50: "#FFEEE6";
875
+ readonly orange_100: "#FFCEB8";
876
+ readonly orange_300: "#FFAF8A";
877
+ readonly orange_400: "#FF8F5C";
878
+ readonly orange_500: "#FF641C";
879
+ readonly orange_600: "#FF5100";
873
880
  readonly purple_50: "#EDE9FE";
874
881
  readonly purple_700: "#7230DB";
882
+ readonly pink_50: "#FDF2F8";
883
+ readonly pink_100: "#FCE7F3";
884
+ readonly pink_300: "#FBCFE8";
885
+ readonly pink_400: "#F9A8D4";
886
+ readonly pink_500: "#CF0F9E";
887
+ readonly pink_600: "#EC4899";
888
+ readonly pink_700: "#DB2777";
889
+ readonly pink_800: "#BE185D";
890
+ readonly pink_900: "#9D174D";
875
891
  readonly green: "#12B76A";
876
892
  readonly green_50: "#DCFCE7";
877
893
  readonly green_100: "#12B76A";
@@ -882,6 +898,15 @@ declare const colors: {
882
898
  readonly badge_green_bg: "#DCFCE7";
883
899
  readonly badge_purple_text: "#7230DB";
884
900
  readonly badge_purple_bg: "#EDE9FE";
901
+ readonly brown_50: "#EFEBE9";
902
+ readonly brown_100: "#D7CCC8";
903
+ readonly brown_300: "#A1887F";
904
+ readonly brown_400: "#8D6E63";
905
+ readonly brown_500: "#795548";
906
+ readonly brown_600: "#CD7F32";
907
+ readonly brown_700: "#5D4037";
908
+ readonly brown_800: "#4E342E";
909
+ readonly brown_900: "#3E2723";
885
910
  readonly gradient_blue_deep: "linear-gradient(131.36deg, rgb(3, 62, 113) 0%, rgb(0, 87, 138) 20%, rgb(1, 113, 164) 40%, rgb(1, 113, 164) 50%, rgb(0, 87, 138) 80%, rgb(3, 62, 113) 100%)";
886
911
  readonly text: "#343A40";
887
912
  readonly light_blue: "#F1F5F9";
package/dist/index.d.ts CHANGED
@@ -870,8 +870,24 @@ declare const colors: {
870
870
  readonly yellow_100: "#FEEDD5";
871
871
  readonly yellow_300: "#F8AF2D";
872
872
  readonly yellow_400: "#DF8F00";
873
+ readonly yellow_500: "#FFD700";
874
+ readonly orange_50: "#FFEEE6";
875
+ readonly orange_100: "#FFCEB8";
876
+ readonly orange_300: "#FFAF8A";
877
+ readonly orange_400: "#FF8F5C";
878
+ readonly orange_500: "#FF641C";
879
+ readonly orange_600: "#FF5100";
873
880
  readonly purple_50: "#EDE9FE";
874
881
  readonly purple_700: "#7230DB";
882
+ readonly pink_50: "#FDF2F8";
883
+ readonly pink_100: "#FCE7F3";
884
+ readonly pink_300: "#FBCFE8";
885
+ readonly pink_400: "#F9A8D4";
886
+ readonly pink_500: "#CF0F9E";
887
+ readonly pink_600: "#EC4899";
888
+ readonly pink_700: "#DB2777";
889
+ readonly pink_800: "#BE185D";
890
+ readonly pink_900: "#9D174D";
875
891
  readonly green: "#12B76A";
876
892
  readonly green_50: "#DCFCE7";
877
893
  readonly green_100: "#12B76A";
@@ -882,6 +898,15 @@ declare const colors: {
882
898
  readonly badge_green_bg: "#DCFCE7";
883
899
  readonly badge_purple_text: "#7230DB";
884
900
  readonly badge_purple_bg: "#EDE9FE";
901
+ readonly brown_50: "#EFEBE9";
902
+ readonly brown_100: "#D7CCC8";
903
+ readonly brown_300: "#A1887F";
904
+ readonly brown_400: "#8D6E63";
905
+ readonly brown_500: "#795548";
906
+ readonly brown_600: "#CD7F32";
907
+ readonly brown_700: "#5D4037";
908
+ readonly brown_800: "#4E342E";
909
+ readonly brown_900: "#3E2723";
885
910
  readonly gradient_blue_deep: "linear-gradient(131.36deg, rgb(3, 62, 113) 0%, rgb(0, 87, 138) 20%, rgb(1, 113, 164) 40%, rgb(1, 113, 164) 50%, rgb(0, 87, 138) 80%, rgb(3, 62, 113) 100%)";
886
911
  readonly text: "#343A40";
887
912
  readonly light_blue: "#F1F5F9";
package/dist/index.js CHANGED
@@ -255,9 +255,27 @@ var colors = {
255
255
  yellow_100: "#FEEDD5",
256
256
  yellow_300: "#F8AF2D",
257
257
  yellow_400: "#DF8F00",
258
+ yellow_500: "#FFD700",
259
+ // ORANGE
260
+ orange_50: "#FFEEE6",
261
+ orange_100: "#FFCEB8",
262
+ orange_300: "#FFAF8A",
263
+ orange_400: "#FF8F5C",
264
+ orange_500: "#FF641C",
265
+ orange_600: "#FF5100",
258
266
  // PURPLE
259
267
  purple_50: "#EDE9FE",
260
268
  purple_700: "#7230DB",
269
+ // PINK
270
+ pink_50: "#FDF2F8",
271
+ pink_100: "#FCE7F3",
272
+ pink_300: "#FBCFE8",
273
+ pink_400: "#F9A8D4",
274
+ pink_500: "#CF0F9E",
275
+ pink_600: "#EC4899",
276
+ pink_700: "#DB2777",
277
+ pink_800: "#BE185D",
278
+ pink_900: "#9D174D",
261
279
  // GREEN
262
280
  green: "#12B76A",
263
281
  green_50: "#DCFCE7",
@@ -270,6 +288,16 @@ var colors = {
270
288
  badge_green_bg: "#DCFCE7",
271
289
  badge_purple_text: "#7230DB",
272
290
  badge_purple_bg: "#EDE9FE",
291
+ // BROWN
292
+ brown_50: "#EFEBE9",
293
+ brown_100: "#D7CCC8",
294
+ brown_300: "#A1887F",
295
+ brown_400: "#8D6E63",
296
+ brown_500: "#795548",
297
+ brown_600: "#CD7F32",
298
+ brown_700: "#5D4037",
299
+ brown_800: "#4E342E",
300
+ brown_900: "#3E2723",
273
301
  // GRADIENTS
274
302
  gradient_blue_deep: "linear-gradient(131.36deg, rgb(3, 62, 113) 0%, rgb(0, 87, 138) 20%, rgb(1, 113, 164) 40%, rgb(1, 113, 164) 50%, rgb(0, 87, 138) 80%, rgb(3, 62, 113) 100%)",
275
303
  // Misc
@@ -588,17 +616,17 @@ var Icon_default = Icon;
588
616
  var import_styled_components7 = __toESM(require("styled-components"));
589
617
  var import_jsx_runtime8 = require("react/jsx-runtime");
590
618
  var StyledDivider = import_styled_components7.default.div`
591
- background-color: ${({ color }) => color || "#DCDCDC"};
592
- ${({ orientation, thickness }) => orientation === "vertical" ? `
593
- width: ${thickness || "1px"};
619
+ background-color: ${({ $color }) => $color || "#DCDCDC"};
620
+ ${({ $orientation, $thickness }) => $orientation === "vertical" ? `
621
+ width: ${$thickness || "1px"};
594
622
  height: 100%;
595
623
  align-self: stretch;
596
624
  ` : `
597
- height: ${thickness || "1px"};
625
+ height: ${$thickness || "1px"};
598
626
  width: 100%;
599
627
  `}
600
- margin-top: ${({ ySpacing }) => ySpacing || "0px"};
601
- margin-bottom: ${({ ySpacing }) => ySpacing || "0px"};
628
+ margin-top: ${({ $ySpacing }) => $ySpacing || "0px"};
629
+ margin-bottom: ${({ $ySpacing }) => $ySpacing || "0px"};
602
630
  border: none;
603
631
  `;
604
632
  var Divider = (_a) => {
@@ -618,10 +646,10 @@ var Divider = (_a) => {
618
646
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
619
647
  StyledDivider,
620
648
  __spreadValues({
621
- orientation,
622
- color,
623
- thickness,
624
- ySpacing,
649
+ $orientation: orientation,
650
+ $color: color,
651
+ $thickness: thickness,
652
+ $ySpacing: ySpacing,
625
653
  className,
626
654
  role: "separator"
627
655
  }, rest)
package/dist/index.mjs CHANGED
@@ -163,9 +163,27 @@ var colors = {
163
163
  yellow_100: "#FEEDD5",
164
164
  yellow_300: "#F8AF2D",
165
165
  yellow_400: "#DF8F00",
166
+ yellow_500: "#FFD700",
167
+ // ORANGE
168
+ orange_50: "#FFEEE6",
169
+ orange_100: "#FFCEB8",
170
+ orange_300: "#FFAF8A",
171
+ orange_400: "#FF8F5C",
172
+ orange_500: "#FF641C",
173
+ orange_600: "#FF5100",
166
174
  // PURPLE
167
175
  purple_50: "#EDE9FE",
168
176
  purple_700: "#7230DB",
177
+ // PINK
178
+ pink_50: "#FDF2F8",
179
+ pink_100: "#FCE7F3",
180
+ pink_300: "#FBCFE8",
181
+ pink_400: "#F9A8D4",
182
+ pink_500: "#CF0F9E",
183
+ pink_600: "#EC4899",
184
+ pink_700: "#DB2777",
185
+ pink_800: "#BE185D",
186
+ pink_900: "#9D174D",
169
187
  // GREEN
170
188
  green: "#12B76A",
171
189
  green_50: "#DCFCE7",
@@ -178,6 +196,16 @@ var colors = {
178
196
  badge_green_bg: "#DCFCE7",
179
197
  badge_purple_text: "#7230DB",
180
198
  badge_purple_bg: "#EDE9FE",
199
+ // BROWN
200
+ brown_50: "#EFEBE9",
201
+ brown_100: "#D7CCC8",
202
+ brown_300: "#A1887F",
203
+ brown_400: "#8D6E63",
204
+ brown_500: "#795548",
205
+ brown_600: "#CD7F32",
206
+ brown_700: "#5D4037",
207
+ brown_800: "#4E342E",
208
+ brown_900: "#3E2723",
181
209
  // GRADIENTS
182
210
  gradient_blue_deep: "linear-gradient(131.36deg, rgb(3, 62, 113) 0%, rgb(0, 87, 138) 20%, rgb(1, 113, 164) 40%, rgb(1, 113, 164) 50%, rgb(0, 87, 138) 80%, rgb(3, 62, 113) 100%)",
183
211
  // Misc
@@ -496,17 +524,17 @@ var Icon_default = Icon;
496
524
  import styled7 from "styled-components";
497
525
  import { jsx as jsx8 } from "react/jsx-runtime";
498
526
  var StyledDivider = styled7.div`
499
- background-color: ${({ color }) => color || "#DCDCDC"};
500
- ${({ orientation, thickness }) => orientation === "vertical" ? `
501
- width: ${thickness || "1px"};
527
+ background-color: ${({ $color }) => $color || "#DCDCDC"};
528
+ ${({ $orientation, $thickness }) => $orientation === "vertical" ? `
529
+ width: ${$thickness || "1px"};
502
530
  height: 100%;
503
531
  align-self: stretch;
504
532
  ` : `
505
- height: ${thickness || "1px"};
533
+ height: ${$thickness || "1px"};
506
534
  width: 100%;
507
535
  `}
508
- margin-top: ${({ ySpacing }) => ySpacing || "0px"};
509
- margin-bottom: ${({ ySpacing }) => ySpacing || "0px"};
536
+ margin-top: ${({ $ySpacing }) => $ySpacing || "0px"};
537
+ margin-bottom: ${({ $ySpacing }) => $ySpacing || "0px"};
510
538
  border: none;
511
539
  `;
512
540
  var Divider = (_a) => {
@@ -526,10 +554,10 @@ var Divider = (_a) => {
526
554
  return /* @__PURE__ */ jsx8(
527
555
  StyledDivider,
528
556
  __spreadValues({
529
- orientation,
530
- color,
531
- thickness,
532
- ySpacing,
557
+ $orientation: orientation,
558
+ $color: color,
559
+ $thickness: thickness,
560
+ $ySpacing: ySpacing,
533
561
  className,
534
562
  role: "separator"
535
563
  }, rest)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "design-zystem",
3
- "version": "1.0.219",
3
+ "version": "1.0.221",
4
4
  "description": "A React design system of importable components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",