@agility/plenum-ui 2.0.8 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.8",
+	"version": "2.1.0",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",

package/stories/atoms/buttons/Button/Button.tsx

@@ -165,7 +165,7 @@ const _Button = (
 				{ "px-[17px] py-[9px] text-base": size === "lg" },
 				{ "px-[25px] py-[13px] text-base": size === "xl" },
 				{
-					"bg-violet-800 text-violet-100 hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:focus-visible:ring-0":
+					"bg-violet-800 text-white hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:focus-visible:ring-0":
 						actionType === "primary"
 				},
 				{

package/tailwind.config.js

@@ -1,56 +1,48 @@
+/* eslint-disable no-undef */
+const defaultTheme = require("tailwindcss/defaultTheme")
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	mode: "development",
-
-	content: [
-		"./app/**/*.{js,ts,jsx,tsx}",
-		"./pages/**/*.{js,ts,jsx,tsx}",
-		"./components/**/*/.{js,ts,jsx,tsx}",
-		"./stories/**/*.{js,ts,jsx,tsx}",
-		"./.storybook/*.{js,ts,jsx,tsx}"
-	],
-	safelist: [
-		"text-xs",
-		"text-sm",
-		"text-base",
-		"text-lg",
-		"text-xl",
-		"text-2xl",
-		"text-3xl",
-		"text-4xl",
-		"text-5xl",
-		"text-6xl",
-		"font-thin",
-		"font-extralight",
-		"font-light",
-		"font-normal",
-		"font-medium",
-		"font-semibold",
-		"font-bold",
-		"font-extrabold",
-		"font-black",
-		{
-			pattern:
-				/^(bg|text|border(-(t|r|b|l))?)-((gray)|(red)|(orange)|(yellow)|(blue)|(light-blue)|(cyan)|(green)|(purple)|(teal)|(violet)|(pink)|(rose))-(50|100|200|300|400|500|600|700|800|900)|(mx|my|m|px|py|p)-\d.$/
-		}
-	],
+	content: ["./src/**/*.{js,ts,jsx,tsx}"],
 	theme: {
-		fontFamily: {
-			mulish: ["Mulish", "sans-serif"]
+		screens: {
+			"6xs": "320px",
+			"3xs": "360px",
+			"2xs": "375px",
+			xs: "414px",
+			sm: "640px",
+			md: "768px",
+			lg: "1024px",
+			xl: "1173px",
+			"2xl": "1294px",
+			"3xl": "1424px",
+			"4xl": "1920px",
+			"5xl": "2560px"
 		},
+
 		extend: {
-			backgroundImage: (theme) => ({
-				"label-gradient-focus": "linear-gradient(to top, #FFF 10px, transparent 10px)",
-				"label-gradient-idle": "linear-gradient(to top, #FFF 10px, transparent 10px)"
-			}),
+			flex: {
+				"unset!": "unset !important"
+			},
+			boxShadow: {
+				"actions-bar": "0px 2px 4px rgba(0, 0, 0, 0.06)"
+			},
+			fontFamily: {
+				sans: ["TTInterphasesPro", "monospace"]
+			},
+
 			gridTemplateColumns: {
 				// Simple 16 column grid
-				mainContainer: "max-content 1fr 1fr"
+				mainContainer: "max-content 1fr 1fr",
+				diffContainer: " 0.5fr 3fr",
+				moduleCard: "min-content 1fr"
 			},
+
 			gridTemplateRows: {
 				// Simple 16 column grid
 				header: "max-content 1fr 1fr"
 			},
+
 			colors: {
 				"transparent-white-05": "rgba(255, 255, 255, 0.05)",
 				"transparent-white-10": "rgba(255, 255, 255, 0.1)",
@@ -217,9 +209,11 @@ module.exports = {
 				"rose-800": "#9F1239",
 				"rose-900": "#881337"
 			},
+
 			fontWeight: {
 				medium: 600
 			},
+
 			fontSize: {
 				xs: ["0.75rem", "1rem"],
 				sm: ["0.875rem", "1.25rem"],
@@ -235,11 +229,22 @@ module.exports = {
 				"8xl": ["6rem", "6rem"],
 				"9xl": ["8rem", "8rem"]
 			},
+			transitionTimingFunction: {
+				"in-expo": "cubic-bezier(0.95, 0.05, 0.795, 0.035)",
+				"out-expo": "cubic-bezier(0.19, 1, 0.22, 1)",
+				"tab-underline": "cubic-bezier(.7,0,.28,1)"
+			},
+			transitionProperty: {
+				left: "left",
+				height: "height"
+			},
+
 			animation: {
 				enter: "fadeInLeft 300ms ease-out",
 				exit: "fadeOutLeft 300ms ease-in forwards",
 				quickBounce: "quickBounce 200ms ease-out forwards",
-				fadeIn: "fadeIn 400ms ease-in-out forwards"
+				fadeIn: "fadeIn 400ms ease-in-out forwards",
+				drawLine: "drawLine 1s ease-tab-underline forwards"
 			},
 
 			keyframes: {
@@ -281,13 +286,21 @@ module.exports = {
 						opacity: "0",
 						transform: "translate(-2rem)"
 					}
+				},
+				drawLine: {
+					"0%": {
+						width: "0%"
+					},
+					"100%": {
+						width: "100%"
+					}
 				}
-			},
-			transitionProperty: {
-				left: "left",
-				height: "height"
 			}
 		}
 	},
-	plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography"), require("@headlessui/tailwindcss")]
+	plugins: [
+		require("@tailwindcss/forms"),
+		require("@tailwindcss/typography"),
+		require("@headlessui/tailwindcss")({ prefix: "ui" })
+	]
 }