@xola/ui-kit 2.0.0-5 → 2.0.0-52

package/index.css

@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap");
 
 @tailwind base;
 @tailwind components;
@@ -61,7 +62,11 @@ h6 {
     @apply leading-p3 tracking-tightest;
 }
 
-.badge .icon {
+.ui-badge .icon {
     position: relative;
     top: -1px;
 }
+
+.font-bold {
+    @apply antialiased;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xola/ui-kit",
-    "version": "2.0.0-5",
+    "version": "2.0.0-52",
     "description": "Xola UI Kit",
     "license": "MIT",
     "files": [
@@ -9,8 +9,9 @@
         "tailwind.config.js",
         "postcss.config.js"
     ],
-    "main": "./build/ui-kit.umd.js",
-    "module": "./build/ui-kit.es.js",
+    "main": "build/ui-kit.umd.js",
+    "module": "build/ui-kit.es.js",
+    "types": "index.d.ts",
     "scripts": {
         "prepare": "node scripts/prepare && vite build",
         "start": "node scripts/prepare && start-storybook -p 6006 -s public",
@@ -28,8 +29,8 @@
     },
     "dependencies": {
         "@headlessui/react": "^1.4.0",
-        "@tailwindcss/forms": "^0.3.3",
-        "@tailwindcss/line-clamp": "^0.2.1",
+        "@tailwindcss/forms": "^0.4.0",
+        "@tailwindcss/line-clamp": "^0.3.1",
         "@tippyjs/react": "^4.2.5",
         "clsx": "^1.1.1",
         "dayjs": "^1.10.7",
@@ -41,30 +42,32 @@
         "react-day-picker": "^7.4.10",
         "react-hot-toast": "^2.1.0",
         "react-hotkeys-hook": "^3.4.0",
+        "react-select": "^5.1.0",
         "tippy.js": "^6.3.1"
     },
     "devDependencies": {
         "@babel/core": "^7.14.8",
         "@babel/preset-env": "^7.15.6",
-        "@storybook/addon-actions": "^6.3.6",
-        "@storybook/addon-essentials": "^6.3.6",
-        "@storybook/addon-links": "^6.3.6",
+        "@storybook/addon-actions": "^6.4.9",
+        "@storybook/addon-essentials": "^6.4.9",
+        "@storybook/addon-links": "^6.4.9",
         "@storybook/addon-postcss": "^2.0.0",
-        "@storybook/addons": "^6.3.6",
-        "@storybook/react": "^6.3.6",
-        "@storybook/theming": "^6.3.6",
-        "@xola/jslint": "0.0.2",
-        "autoprefixer": "^10.3.1",
+        "@storybook/addons": "^6.4.9",
+        "@storybook/react": "^6.4.9",
+        "@storybook/theming": "^6.4.9",
+        "@xola/jslint": "^1.0.0",
+        "autoprefixer": "^10.4.2",
         "babel-jest": "^27.2.0",
         "babel-loader": "^8.2.2",
         "jest": "^27.2.0",
         "lodash": "^4.17.21",
-        "postcss": "^8.3.6",
-        "prettier": "^2.4.0",
+        "postcss": "^8.4.5",
+        "prettier": "^2.5.1",
+        "prettier-plugin-tailwindcss": "^0.1.7",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "storybook-css-modules-preset": "^1.1.1",
-        "tailwindcss": "^2.2.15",
+        "tailwindcss": "^3.0.18",
         "vite": "^2.5.7"
     },
     "peerDependencies": {
@@ -73,7 +76,7 @@
         "postcss": "^8.3.6",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "tailwindcss": "^2.2.7"
+        "tailwindcss": "^3.0.18"
     },
     "prettier": {
         "semi": true,

package/tailwind.config.js

@@ -8,6 +8,7 @@ const colors = {
     white: "#ffffff",
 
     gray: {
+        hover: "#F7F9FB",
         lighter: "#F0F2F4",
         light: "#E0E3E7",
         DEFAULT: "#BDC0C6",
@@ -23,28 +24,36 @@ const colors = {
         darker: "#0E44A8",
     },
 
+    turquoise: {
+        // TODO: We need other shades to match the scheme
+        DEFAULT: "#3FE2EE",
+    },
+
     green: {
         lighter: "#E2FFEF",
+        lightish: "#C1F9D9",
         light: "#33E781",
         DEFAULT: "#27CE70",
         dark: "#23B965",
-        darker: "#1B8E4E", // Made up by Rushi till Barth gives us a color
+        darker: "#168848",
     },
 
     red: {
-        lighter: "#FFEAEA",
+        lighter: "#FFF0F0",
+        lightish: "#FFE1E1",
         light: "#FFA1A1",
         DEFAULT: "#FF5A5A",
         dark: "#E93737",
-        darker: "#E51919", // Made up by Rushi till Barth gives us a color
+        darker: "#CD1F1F",
     },
 
     yellow: {
         lighter: "#FFFAF0",
+        lightish: "#FFECC6",
         light: "#FFDB8E",
         DEFAULT: "#FFC03D",
         dark: "#EBAA24",
-        darker: "#F0A200", // Made up by Rushi till Barth gives us a color
+        darker: "#987122",
     },
 
     orange: {
@@ -57,10 +66,7 @@ const colors = {
 };
 
 module.exports = {
-    mode: "jit",
-    darkMode: false,
-
-    purge: [
+    content: [
         "./src/**/*.js",
         "./src/**/*.jsx",
         "./src/**/*.ts",
@@ -109,6 +115,7 @@ module.exports = {
             16: "64px",
             20: "80px",
             24: "96px",
+            25: "100px",
             28: "112px",
             32: "128px",
             36: "144px",
@@ -121,6 +128,7 @@ module.exports = {
             60: "240px",
             64: "256px",
             72: "288px",
+            75: "300px",
             80: "320px",
             82: "350px",
             96: "384px",
@@ -153,6 +161,7 @@ module.exports = {
         extend: {
             fontFamily: {
                 sans: ["Inter", ...defaultTheme.fontFamily.sans],
+                mono: ["Roboto Mono", ...defaultTheme.fontFamily.mono],
             },
 
             // P1 - Big 16px 130%
@@ -192,7 +201,7 @@ module.exports = {
 
             letterSpacing: {
                 tightest: "-.4px",
-                // TODO: Other letter spacings are in EM and need to be coverted to px
+                // TODO: Other letter spacings are in EM and need to be converted to px
             },
         },
     },