Move Primary Colors to CSS in JS

Signed-off-by: praveenjuge <[email protected]>

index.js

@@ -1,3 +1,5 @@
+const defaultTheme = require("tailwindcss/defaultTheme");
+
 module.exports = require("tailwindcss/plugin")(
   function ({ addComponents }) {
     addComponents([
@@ -25,9 +27,9 @@ module.exports = require("tailwindcss/plugin")(
       extend: {
         colors: {
           primary: {
-            light: "#EDE9FE",
-            DEFAULT: "#6D28D9",
-            dark: "#4C1D95",
+            light: defaultTheme.colors.purple[100],
+            DEFAULT: defaultTheme.colors.purple[700],
+            dark: defaultTheme.colors.purple[900],
           },
         },
       },

src/avatar.js

@@ -1,7 +1,6 @@
 module.exports = Avatar = () => ({
   ".avatar": {
-    "--tw-bg-opacity": "1",
-    backgroundColor: "rgba(237, 233, 254, var(--tw-bg-opacity))",
+    "@apply bg-primary-light text-primary": {},
     borderRadius: "9999px",
     display: "flex",
     alignItems: "center",
@@ -13,13 +12,8 @@ module.exports = Avatar = () => ({
     lineHeight: "1.5rem",
     position: "relative",
     textAlign: "center",
-    "--tw-text-opacity": "1",
-    color: "rgba(109, 40, 217, var(--tw-text-opacity))",
     textTransform: "uppercase",
     textDecoration: ["none", "none"],
-    WebkitUserSelect: "none",
-    MozUserSelect: "none",
-    msUserSelect: "none",
     userSelect: "none",
     width: ["3rem", "100%"],
     maxWidth: "3rem",

src/button.js

@@ -8,9 +8,6 @@ module.exports = Button = (styles) => ({
     pointerEvents: "auto",
     textAlign: "center",
     textDecoration: "none",
-    WebkitUserSelect: "none",
-    MozUserSelect: "none",
-    msUserSelect: "none",
     userSelect: "none",
     verticalAlign: "middle",
     "--tw-translate-x": "0",
@@ -31,7 +28,6 @@ module.exports = Button = (styles) => ({
     paddingLeft: "0.85rem",
     paddingRight: "0.85rem",
     willChange: "transform",
-    WebkitBackfaceVisibility: "hidden",
     backfaceVisibility: "hidden",
   },
   ".btn:focus, .prose a.btn:focus": {
@@ -83,15 +79,10 @@ module.exports = Button = (styles) => ({
   },
   // Colors
   ".btn-primary, .prose a.btn-primary": {
-    "--tw-bg-opacity": "1",
-    backgroundColor: "rgba(109, 40, 217, var(--tw-bg-opacity))",
+    "@apply bg-primary hover:bg-primary-dark": {},
     "--tw-text-opacity": "1",
     color: "rgba(255, 255, 255, var(--tw-text-opacity))",
   },
-  ".btn-primary:hover, .prose a.btn-primary:hover": {
-    "--tw-bg-opacity": "1",
-    backgroundColor: "rgba(76, 29, 149, var(--tw-bg-opacity))",
-  },
   ".btn-secondary, .prose a.btn-secondary": {
     "--tw-bg-opacity": "1",
     backgroundColor: "rgba(100, 116, 139, var(--tw-bg-opacity))",
@@ -163,25 +154,15 @@ module.exports = Button = (styles) => ({
     backgroundColor: "rgba(226, 232, 240, var(--tw-bg-opacity))",
   },
   ".btn-link, .prose a.btn-link": {
+    "@apply text-primary-dark": {},
     backgroundColor: "transparent",
-    "--tw-text-opacity": "1",
-    color: "rgba(76, 29, 149, var(--tw-text-opacity))",
   },
   ".btn-link:hover, .prose a.btn-link:hover": {
     "--tw-bg-opacity": "1",
     backgroundColor: "rgba(203, 213, 225, var(--tw-bg-opacity))",
   },
   ".btn-light-primary, .prose a.btn-light-primary": {
-    "--tw-bg-opacity": "1",
-    backgroundColor: "rgba(237, 233, 254, var(--tw-bg-opacity))",
-    "--tw-text-opacity": "1",
-    color: "rgba(109, 40, 217, var(--tw-text-opacity))",
-  },
-  ".btn-light-primary:hover, .prose a.btn-light-primary:hover": {
-    "--tw-bg-opacity": "1",
-    backgroundColor: "rgba(109, 40, 217, var(--tw-bg-opacity))",
-    "--tw-text-opacity": "1",
-    color: "rgba(237, 233, 254, var(--tw-text-opacity))",
+    "@apply bg-primary-light text-primary hover:bg-primary hover:text-primary-light": {},
   },
   ".btn-light-secondary, .prose a.btn-light-secondary": {
     "--tw-bg-opacity": "1",
@@ -232,28 +213,20 @@ module.exports = Button = (styles) => ({
     color: "rgba(120, 53, 15, var(--tw-text-opacity))",
   },
   ".btn-light-link, .prose a.btn-light-link": {
+    "@apply text-primary-light hover:text-primary": {},
     backgroundColor: "transparent",
-    "--tw-text-opacity": "1",
-    color: "rgba(237, 233, 254, var(--tw-text-opacity))",
   },
   ".btn-light-link:hover, .prose a.btn-light-link:hover": {
     "--tw-bg-opacity": "1",
     backgroundColor: "rgba(226, 232, 240, var(--tw-bg-opacity))",
-    "--tw-text-opacity": "1",
-    color: "rgba(109, 40, 217, var(--tw-text-opacity))",
   },
   ".btn-outline-primary:hover, .prose a.btn-outline-primary:hover": {
-    "--tw-bg-opacity": "1",
-    backgroundColor: "rgba(76, 29, 149, var(--tw-bg-opacity))",
-    "--tw-border-opacity": "1",
-    borderColor: "rgba(76, 29, 149, var(--tw-border-opacity))",
     "--tw-text-opacity": "1",
     color: "rgba(255, 255, 255, var(--tw-text-opacity))",
   },
   ".btn-outline-primary, .prose a.btn-outline-primary": {
+    "@apply text-primary hover:bg-primary-dark hover:border-primary-dark": {},
     borderWidth: "1px",
-    "--tw-text-opacity": "1",
-    color: "rgba(109, 40, 217, var(--tw-text-opacity))",
   },
   ".btn-outline-secondary:hover, .prose a.btn-outline-secondary:hover": {
     "--tw-bg-opacity": "1",
@@ -334,10 +307,9 @@ module.exports = Button = (styles) => ({
     color: "rgba(15, 23, 42, var(--tw-text-opacity))",
   },
   ".btn-outline-link, .prose a.btn-outline-link": {
+    "@apply text-primary-dark": {},
     borderColor: "transparent",
     borderWidth: "1px",
-    "--tw-text-opacity": "1",
-    color: "rgba(76, 29, 149, var(--tw-text-opacity))",
   },
   ".btn-outline-link:hover, .prose a.btn-outline-link:hover": {
     "--tw-border-opacity": "1",

src/forms.js

@@ -1,7 +1,5 @@
 module.exports = Forms = () => ({
   ".form-input": {
-    WebkitAppearance: "none",
-    MozAppearance: "none",
     appearance: "none",
     "--tw-bg-opacity": "1",
     backgroundColor: "rgba(255, 255, 255, var(--tw-bg-opacity))",
@@ -39,16 +37,16 @@ module.exports = Forms = () => ({
     "--tw-placeholder-opacity": "1",
     color: "rgba(148, 163, 184, var(--tw-placeholder-opacity))",
   },
-  // Hover and Focus
-  ".form-input:hover, .form-select:hover, .form-checkbox:hover, .form-radio:hover": {
-    "--tw-border-opacity": "1",
-    borderColor: "rgba(71, 85, 105, var(--tw-border-opacity))",
-  },
+  // Focus
   ".form-input:focus, .form-select:focus, .form-checkbox:focus, .form-radio:focus": {
-    "--tw-border-opacity": "1",
-    borderColor: "rgba(109, 40, 217, var(--tw-border-opacity))",
+    "@apply focus:border-primary focus:ring-primary": {},
     outline: "2px solid transparent",
     outlineOffset: "2px",
+    "--tw-ring-offset-shadow": "var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+    "--tw-ring-shadow": "var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)",
+    boxShadow: "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
+    "--tw-ring-offset-width": "0px",
+    "--tw-ring-opacity": ["1", "1"],
   },
   // Sizes
   ".form-input-sm": {
@@ -89,8 +87,6 @@ module.exports = Forms = () => ({
   },
   // Select, Checkbox, Radio
   ".form-select": {
-    WebkitAppearance: "none",
-    MozAppearance: "none",
     appearance: "none",
     "--tw-bg-opacity": "1",
     backgroundColor: "rgba(255, 255, 255, var(--tw-bg-opacity))",
@@ -124,8 +120,7 @@ module.exports = Forms = () => ({
     backgroundSize: "1.5em 1.5em",
   },
   ".form-checkbox, .form-radio": {
-    WebkitAppearance: "none",
-    MozAppearance: "none",
+    "@apply text-primary": {},
     appearance: "none",
     "--tw-bg-opacity": "1",
     backgroundColor: "rgba(255, 255, 255, var(--tw-bg-opacity))",
@@ -138,11 +133,6 @@ module.exports = Forms = () => ({
     display: "inline-flex",
     flexShrink: 0,
     height: "1rem",
-    "--tw-text-opacity": "1",
-    color: "rgba(109, 40, 217, var(--tw-text-opacity))",
-    WebkitUserSelect: "none",
-    MozUserSelect: "none",
-    msUserSelect: "none",
     userSelect: "none",
     verticalAlign: "middle",
     width: "1rem",
@@ -223,31 +213,26 @@ module.exports = Forms = () => ({
     width: "100%",
   },
   ".form-input::-webkit-slider-thumb": {
-    WebkitAppearance: "none",
+    "@apply bg-primary": {},
     appearance: "none",
-    "--tw-bg-opacity": "1",
-    backgroundColor: "rgba(109, 40, 217, var(--tw-bg-opacity))",
     borderRadius: "0.25rem",
     borderStyle: "none",
     height: "1.5rem",
     marginTop: "-0.5rem",
     width: "1rem",
   },
   ".form-input::-moz-range-thumb": {
-    MozAppearance: "none",
+    "@apply bg-primary": {},
     appearance: "none",
-    "--tw-bg-opacity": "1",
-    backgroundColor: "rgba(109, 40, 217, var(--tw-bg-opacity))",
     borderRadius: "0.25rem",
     borderStyle: "none",
     height: "1.5rem",
     marginTop: "-0.5rem",
     width: "1rem",
   },
   ".form-input::-ms-thumb": {
+    "@apply bg-primary": {},
     appearance: "none",
-    "--tw-bg-opacity": "1",
-    backgroundColor: "rgba(109, 40, 217, var(--tw-bg-opacity))",
     borderRadius: "0.25rem",
     borderStyle: "none",
     height: "1.5rem",

src/list.js

@@ -56,14 +56,12 @@ module.exports = List = () => ({
   ".prose .list-item::before": { content: "none" },
   // Active
   ".list-item.list-active": {
-    "--tw-bg-opacity": "1",
-    backgroundColor: "rgba(109, 40, 217, var(--tw-bg-opacity))",
+    "@apply bg-primary": {},
     "--tw-text-opacity": "1",
     color: "rgba(255, 255, 255, var(--tw-text-opacity))",
   },
-  "a.list-item.list-active:hover": {
-    "--tw-bg-opacity": "1",
-    backgroundColor: "rgba(76, 29, 149, var(--tw-bg-opacity))",
+  "a.list-item.list-active": {
+    "@apply hover:bg-primary-dark": {},
   },
   // Disabled
   ".list-disabled, a.list-item.list-disabled": {

src/pagination.js

@@ -53,20 +53,12 @@ module.exports = Pagination = () => ({
     outline: "2px solid transparent !important",
     outlineOffset: "2px !important",
   },
+  // Active
   ".pagination-active, .prose a.pagination-active": {
-    "--tw-bg-opacity": "1",
-    backgroundColor: "rgba(109, 40, 217, var(--tw-bg-opacity))",
+    "@apply bg-primary hover:bg-primary-dark focus:bg-primary-dark": {},
     "--tw-text-opacity": "1",
     color: "rgba(255, 255, 255, var(--tw-text-opacity))",
   },
-  ".pagination-active:hover, .prose a.pagination-active:hover": {
-    "--tw-bg-opacity": "1",
-    backgroundColor: "rgba(76, 29, 149, var(--tw-bg-opacity))",
-  },
-  ".pagination-active:focus, .prose a.pagination-active:focus": {
-    "--tw-bg-opacity": "1",
-    backgroundColor: "rgba(76, 29, 149, var(--tw-bg-opacity))",
-  },
   // Sizes
   ".pagination-sm .pagination-link, .pagination-sm .pagination-disabled, .prose .pagination-sm a.pagination-link, .prose .pagination-sm .pagination-disabled": {
     height: "1.5rem",

src/progress.js

@@ -1,7 +1,5 @@
 module.exports = Progress = () => ({
   ".progress": {
-    WebkitAppearance: "none",
-    MozAppearance: "none",
     appearance: "none",
     borderRadius: "9999px",
     borderWidth: "0px",

src/tabs.js

@@ -82,15 +82,6 @@ module.exports = Tabs = () => ({
   },
   // Active
   ".tab-link.active": {
-    "--tw-border-opacity": "1",
-    borderColor: "rgba(109, 40, 217, var(--tw-border-opacity))",
-    "--tw-text-opacity": "1",
-    color: "rgba(109, 40, 217, var(--tw-text-opacity))",
-  },
-  ".tab-link.active:hover": {
-    "--tw-border-opacity": "1",
-    borderColor: "rgba(76, 29, 149, var(--tw-border-opacity))",
-    "--tw-text-opacity": "1",
-    color: "rgba(76, 29, 149, var(--tw-text-opacity))",
+    "@apply text-primary border-primary hover:text-primary-dark hover:border-primary-dark": {},
   },
 });