@fibery/ui-kit 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -15,7 +15,8 @@
     "src/Loaders.js",
     "src/loading-sausage.tsx",
     "src/icons/**/*.ts*",
-    "src/Select"
+    "src/Select",
+    "src/Pallete.ts"
   ],
   "license": "UNLICENSED",
   "scripts": {

package/src/Pallete.ts

@@ -0,0 +1,241 @@
+export const slate = {
+  slate1: "hsl(206, 30.0%, 98.8%)",
+  slate2: "hsl(210, 16.7%, 97.6%)",
+  slate3: "hsl(209, 13.3%, 95.3%)",
+  slate4: "hsl(209, 12.2%, 93.2%)",
+  slate5: "hsl(208, 11.7%, 91.1%)",
+  slate6: "hsl(208, 11.3%, 88.9%)",
+  slate7: "hsl(207, 11.1%, 85.9%)",
+  slate8: "hsl(205, 10.7%, 78.0%)",
+  slate9: "hsl(205, 8.0%, 62.1%)",
+  slate10: "hsl(205, 9.0%, 47.3%)",
+  slate11: "hsl(204, 14.0%, 37.3%)",
+  slate12: "hsl(200, 7.0%, 8.8%)",
+};
+
+export const slateDark = {
+  slate1: "hsl(200, 7.0%, 8.8%)",
+  slate2: "hsl(195, 7.1%, 11.0%)",
+  slate3: "hsl(197, 6.8%, 13.6%)",
+  slate4: "hsl(198, 6.6%, 15.8%)",
+  slate5: "hsl(199, 6.4%, 17.9%)",
+  slate6: "hsl(201, 6.2%, 20.5%)",
+  slate7: "hsl(203, 6.0%, 24.3%)",
+  slate8: "hsl(207, 5.6%, 31.6%)",
+  slate9: "hsl(206, 6.0%, 43.9%)",
+  slate10: "hsl(206, 5.2%, 49.5%)",
+  slate11: "hsl(206, 6.0%, 63.0%)",
+  slate12: "hsl(210, 6.0%, 93.0%)",
+};
+
+export const sage = {
+  sage1: "hsl(155, 30.0%, 98.8%)",
+  sage2: "hsl(150, 16.7%, 97.6%)",
+  sage3: "hsl(151, 10.6%, 95.2%)",
+  sage4: "hsl(151, 8.8%, 93.0%)",
+  sage5: "hsl(151, 7.8%, 90.8%)",
+  sage6: "hsl(152, 7.2%, 88.4%)",
+  sage7: "hsl(153, 6.7%, 85.3%)",
+  sage8: "hsl(154, 6.1%, 77.5%)",
+  sage9: "hsl(155, 3.5%, 55.5%)",
+  sage10: "hsl(154, 2.8%, 51.7%)",
+  sage11: "hsl(155, 3.0%, 43.0%)",
+  sage12: "hsl(155, 24.0%, 9.0%)",
+};
+
+export const sageDark = {
+  sage1: "hsl(160, 7.0%, 8.4%)",
+  sage2: "hsl(150, 7.4%, 10.6%)",
+  sage3: "hsl(150, 6.7%, 13.1%)",
+  sage4: "hsl(150, 6.4%, 15.3%)",
+  sage5: "hsl(150, 6.1%, 17.4%)",
+  sage6: "hsl(150, 5.8%, 19.9%)",
+  sage7: "hsl(150, 5.5%, 23.6%)",
+  sage8: "hsl(150, 5.1%, 30.6%)",
+  sage9: "hsl(155, 6.0%, 42.5%)",
+  sage10: "hsl(153, 4.8%, 48.2%)",
+  sage11: "hsl(155, 5.0%, 61.8%)",
+  sage12: "hsl(155, 6.0%, 93.0%)",
+};
+
+export const teal = {
+  teal1: "hsl(165, 60.0%, 98.8%)",
+  teal2: "hsl(169, 64.7%, 96.7%)",
+  teal3: "hsl(169, 59.8%, 94.0%)",
+  teal4: "hsl(169, 53.1%, 90.2%)",
+  teal5: "hsl(170, 47.1%, 85.0%)",
+  teal6: "hsl(170, 42.6%, 77.9%)",
+  teal7: "hsl(170, 39.9%, 68.1%)",
+  teal8: "hsl(172, 42.1%, 52.5%)",
+  teal9: "hsl(173, 80.0%, 36.0%)",
+  teal10: "hsl(173, 83.4%, 32.5%)",
+  teal11: "hsl(174, 90.0%, 25.2%)",
+  teal12: "hsl(170, 50.0%, 12.5%)",
+};
+
+export const tealDark = {
+  teal1: "hsl(168, 48.0%, 6.5%)",
+  teal2: "hsl(169, 77.8%, 7.1%)",
+  teal3: "hsl(170, 76.1%, 9.2%)",
+  teal4: "hsl(171, 75.8%, 11.0%)",
+  teal5: "hsl(171, 75.7%, 12.8%)",
+  teal6: "hsl(172, 75.8%, 15.1%)",
+  teal7: "hsl(172, 76.7%, 18.6%)",
+  teal8: "hsl(173, 80.2%, 23.7%)",
+  teal9: "hsl(173, 80.0%, 36.0%)",
+  teal10: "hsl(174, 83.9%, 38.2%)",
+  teal11: "hsl(174, 90.0%, 40.7%)",
+  teal12: "hsl(166, 73.0%, 93.1%)",
+};
+
+export const indigo = {
+  indigo1: "hsl(225, 60.0%, 99.4%)",
+  indigo2: "hsl(223, 100%, 98.6%)",
+  indigo3: "hsl(223, 98.4%, 97.1%)",
+  indigo4: "hsl(223, 92.9%, 95.0%)",
+  indigo5: "hsl(224, 87.1%, 92.0%)",
+  indigo6: "hsl(224, 81.9%, 87.8%)",
+  indigo7: "hsl(225, 77.4%, 82.1%)",
+  indigo8: "hsl(226, 75.4%, 74.5%)",
+  indigo9: "hsl(226, 70.0%, 55.5%)",
+  indigo10: "hsl(226, 58.6%, 51.3%)",
+  indigo11: "hsl(226, 55.0%, 45.0%)",
+  indigo12: "hsl(226, 62.0%, 17.0%)",
+};
+
+export const indigoDark = {
+  indigo1: "hsl(229, 24.0%, 10.0%)",
+  indigo2: "hsl(230, 36.4%, 12.9%)",
+  indigo3: "hsl(228, 43.3%, 17.5%)",
+  indigo4: "hsl(227, 47.2%, 21.0%)",
+  indigo5: "hsl(227, 50.0%, 24.1%)",
+  indigo6: "hsl(226, 52.9%, 28.2%)",
+  indigo7: "hsl(226, 56.0%, 34.5%)",
+  indigo8: "hsl(226, 58.2%, 44.1%)",
+  indigo9: "hsl(226, 70.0%, 55.5%)",
+  indigo10: "hsl(227, 75.2%, 61.6%)",
+  indigo11: "hsl(228, 100%, 75.9%)",
+  indigo12: "hsl(226, 83.0%, 96.3%)",
+};
+
+export const red = {
+  red1: "hsl(359, 100%, 99.4%)",
+  red2: "hsl(359, 100%, 98.6%)",
+  red3: "hsl(360, 100%, 96.8%)",
+  red4: "hsl(360, 97.9%, 94.8%)",
+  red5: "hsl(360, 90.2%, 91.9%)",
+  red6: "hsl(360, 81.7%, 87.8%)",
+  red7: "hsl(359, 74.2%, 81.7%)",
+  red8: "hsl(359, 69.5%, 74.3%)",
+  red9: "hsl(358, 75.0%, 59.0%)",
+  red10: "hsl(358, 69.4%, 55.2%)",
+  red11: "hsl(358, 65.0%, 48.7%)",
+  red12: "hsl(354, 50.0%, 14.6%)",
+};
+
+export const redDark = {
+  red1: "hsl(353, 23.0%, 9.8%)",
+  red2: "hsl(357, 34.4%, 12.0%)",
+  red3: "hsl(356, 43.4%, 16.4%)",
+  red4: "hsl(356, 47.6%, 19.2%)",
+  red5: "hsl(356, 51.1%, 21.9%)",
+  red6: "hsl(356, 55.2%, 25.9%)",
+  red7: "hsl(357, 60.2%, 31.8%)",
+  red8: "hsl(358, 65.0%, 40.4%)",
+  red9: "hsl(358, 75.0%, 59.0%)",
+  red10: "hsl(358, 85.3%, 64.0%)",
+  red11: "hsl(358, 100%, 69.5%)",
+  red12: "hsl(351, 89.0%, 96.0%)",
+};
+
+export const blue = {
+  blue1: "hsl(206, 100%, 99.2%)",
+  blue2: "hsl(210, 100%, 98.0%)",
+  blue3: "hsl(209, 100%, 96.5%)",
+  blue4: "hsl(210, 98.8%, 94.0%)",
+  blue5: "hsl(209, 95.0%, 90.1%)",
+  blue6: "hsl(209, 81.2%, 84.5%)",
+  blue7: "hsl(208, 77.5%, 76.9%)",
+  blue8: "hsl(206, 81.9%, 65.3%)",
+  blue9: "hsl(206, 100%, 50.0%)",
+  blue10: "hsl(208, 100%, 47.3%)",
+  blue11: "hsl(211, 100%, 43.2%)",
+  blue12: "hsl(211, 100%, 15.0%)",
+};
+
+export const blueDark = {
+  blue1: "hsl(212, 35.0%, 9.2%)",
+  blue2: "hsl(216, 50.0%, 11.8%)",
+  blue3: "hsl(214, 59.4%, 15.3%)",
+  blue4: "hsl(214, 65.8%, 17.9%)",
+  blue5: "hsl(213, 71.2%, 20.2%)",
+  blue6: "hsl(212, 77.4%, 23.1%)",
+  blue7: "hsl(211, 85.1%, 27.4%)",
+  blue8: "hsl(211, 89.7%, 34.1%)",
+  blue9: "hsl(206, 100%, 50.0%)",
+  blue10: "hsl(209, 100%, 60.6%)",
+  blue11: "hsl(210, 100%, 66.1%)",
+  blue12: "hsl(206, 98.0%, 95.8%)",
+};
+
+export const yellow = {
+  yellow1: "hsl(60, 54.0%, 98.5%)",
+  yellow2: "hsl(52, 100%, 95.5%)",
+  yellow3: "hsl(55, 100%, 90.9%)",
+  yellow4: "hsl(54, 100%, 86.6%)",
+  yellow5: "hsl(52, 97.9%, 82.0%)",
+  yellow6: "hsl(50, 89.4%, 76.1%)",
+  yellow7: "hsl(47, 80.4%, 68.0%)",
+  yellow8: "hsl(48, 100%, 46.1%)",
+  yellow9: "hsl(53, 92.0%, 50.0%)",
+  yellow10: "hsl(50, 100%, 48.5%)",
+  yellow11: "hsl(42, 100%, 29.0%)",
+  yellow12: "hsl(40, 55.0%, 13.5%)",
+};
+
+export const yellowDark = {
+  yellow1: "hsl(45, 100%, 5.5%)",
+  yellow2: "hsl(46, 100%, 6.7%)",
+  yellow3: "hsl(45, 100%, 8.7%)",
+  yellow4: "hsl(45, 100%, 10.4%)",
+  yellow5: "hsl(47, 100%, 12.1%)",
+  yellow6: "hsl(49, 100%, 14.3%)",
+  yellow7: "hsl(49, 90.3%, 18.4%)",
+  yellow8: "hsl(50, 100%, 22.0%)",
+  yellow9: "hsl(53, 92.0%, 50.0%)",
+  yellow10: "hsl(54, 100%, 68.0%)",
+  yellow11: "hsl(48, 100%, 47.0%)",
+  yellow12: "hsl(53, 100%, 91.0%)",
+};
+
+export const blackA = {
+  blackA0: "#000000",
+  blackA1: "hsla(0, 0%, 0%, 0.012)",
+  blackA2: "hsla(0, 0%, 0%, 0.027)",
+  blackA3: "hsla(0, 0%, 0%, 0.047)",
+  blackA4: "hsla(0, 0%, 0%, 0.071)",
+  blackA5: "hsla(0, 0%, 0%, 0.090)",
+  blackA6: "hsla(0, 0%, 0%, 0.114)",
+  blackA7: "hsla(0, 0%, 0%, 0.141)",
+  blackA8: "hsla(0, 0%, 0%, 0.220)",
+  blackA9: "hsla(0, 0%, 0%, 0.439)",
+  blackA10: "hsla(0, 0%, 0%, 0.478)",
+  blackA11: "hsla(0, 0%, 0%, 0.565)",
+  blackA12: "hsla(0, 0%, 0%, 0.910)",
+};
+
+export const whiteA = {
+  whiteA0: "#FFFFFF",
+  whiteA1: "hsla(0, 0%, 100%, 0)",
+  whiteA2: "hsla(0, 0%, 100%, 0.013)",
+  whiteA3: "hsla(0, 0%, 100%, 0.034)",
+  whiteA4: "hsla(0, 0%, 100%, 0.056)",
+  whiteA5: "hsla(0, 0%, 100%, 0.086)",
+  whiteA6: "hsla(0, 0%, 100%, 0.124)",
+  whiteA7: "hsla(0, 0%, 100%, 0.176)",
+  whiteA8: "hsla(0, 0%, 100%, 0.249)",
+  whiteA9: "hsla(0, 0%, 100%, 0.386)",
+  whiteA10: "hsla(0, 0%, 100%, 0.446)",
+  whiteA11: "hsla(0, 0%, 100%, 0.592)",
+  whiteA12: "hsla(0, 0%, 100%, 0.923)",
+};