@code-coaching/vuetiful 0.0.0

package/src/tailwind/generated/intellisense-classes.cjs

@@ -0,0 +1,558 @@
+/* This file is generated by Code Coaching scripts/convert-css-to-tailwind-intellisense.js */
+module.exports = {
+  ".hide-scrollbar::-webkit-scrollbar": {
+    "display": "none",
+  },
+  ".hide-scrollbar": {
+    "-ms-overflow-style": "none ",
+    "scrollbar-width": "none ",
+  },
+  ".divider-vertical": {
+    "@apply inline-block border-l border-solid border-surface-300-600-token min-h-[10px] mx-auto": {},
+  },
+  ".hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_": {
+    "@apply text-red-400": {},
+  },
+  ".hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_": {
+    "@apply text-purple-400": {},
+  },
+  ".hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable": {
+    "@apply text-sky-300": {},
+  },
+  ".hljs-meta .hljs-string,.hljs-regexp,.hljs-string": {
+    "@apply text-blue-400": {},
+  },
+  ".hljs-built_in,.hljs-symbol": {
+    "@apply text-amber-400": {},
+  },
+  ".hljs-code,.hljs-comment,.hljs-formula": {
+    "@apply text-neutral-500": {},
+  },
+  ".hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag": {
+    "@apply text-green-400": {},
+  },
+  ".hljs-subst": {
+    "@apply text-pink-300": {},
+  },
+  ".hljs-section": {
+    "@apply font-bold text-sky-400": {},
+  },
+  ".hljs-bullet": {
+    "@apply text-yellow-400": {},
+  },
+  ".hljs-emphasis": {
+    "@apply italic text-neutral-200": {},
+  },
+  ".hljs-strong": {
+    "@apply font-bold text-neutral-200": {},
+  },
+  ".hljs-addition": {
+    "@apply text-lime-300 bg-green-700": {},
+  },
+  ".hljs-deletion": {
+    "@apply text-rose-300 bg-rose-700": {},
+  },
+  ".variant-outline-primary": {
+    "@apply ring-[1px] ring-primary-500 dark:ring-primary-500 ring-inset": {},
+  },
+  ".variant-outline-secondary": {
+    "@apply ring-[1px] ring-secondary-500 dark:ring-secondary-500 ring-inset": {},
+  },
+  ".variant-outline-tertiary": {
+    "@apply ring-[1px] ring-tertiary-500 dark:ring-tertiary-500 ring-inset": {},
+  },
+  ".variant-outline-success": {
+    "@apply ring-[1px] ring-success-500 dark:ring-success-500 ring-inset": {},
+  },
+  ".variant-outline-warning": {
+    "@apply ring-[1px] ring-warning-500 dark:ring-warning-500 ring-inset": {},
+  },
+  ".variant-outline-error": {
+    "@apply ring-[1px] ring-error-500 dark:ring-error-500 ring-inset": {},
+  },
+  ".variant-outline,.variant-outline-surface": {
+    "@apply ring-[1px] ring-surface-500 dark:ring-surface-500 ring-inset": {},
+  },
+  ".variant-filled": {
+    "@apply bg-surface-900-50-token text-surface-50-900-token": {},
+  },
+  ".variant-filled-primary": {
+    "@apply bg-primary-500 dark:bg-primary-500 text-on-primary-token dark:text-on-primary-token": {},
+  },
+  ".variant-filled-secondary": {
+    "@apply bg-secondary-500 dark:bg-secondary-500 text-on-secondary-token dark:text-on-secondary-token": {},
+  },
+  ".variant-filled-tertiary": {
+    "@apply bg-tertiary-500 dark:bg-tertiary-500 text-on-tertiary-token dark:text-on-tertiary-token": {},
+  },
+  ".variant-filled-success": {
+    "@apply bg-success-500 dark:bg-success-500 text-on-success-token dark:text-on-success-token": {},
+  },
+  ".variant-filled-warning": {
+    "@apply bg-warning-500 dark:bg-warning-500 text-on-warning-token dark:text-on-warning-token": {},
+  },
+  ".variant-filled-error": {
+    "@apply bg-error-500 dark:bg-error-500 text-on-error-token dark:text-on-error-token": {},
+  },
+  ".variant-filled-surface": {
+    "@apply bg-surface-400-500-token text-on-surface-token dark:text-on-surface-token": {},
+  },
+  ".variant-ringed": {
+    "@apply bg-transparent dark:bg-transparent variant-outline": {},
+  },
+  ".variant-ringed-primary": {
+    "@apply bg-transparent dark:bg-transparent variant-outline-primary": {},
+  },
+  ".variant-ringed-secondary": {
+    "@apply bg-transparent dark:bg-transparent variant-outline-secondary": {},
+  },
+  ".variant-ringed-tertiary": {
+    "@apply bg-transparent dark:bg-transparent variant-outline-tertiary": {},
+  },
+  ".variant-ringed-success": {
+    "@apply bg-transparent dark:bg-transparent variant-outline-success": {},
+  },
+  ".variant-ringed-warning": {
+    "@apply bg-transparent dark:bg-transparent variant-outline-warning": {},
+  },
+  ".variant-ringed-error": {
+    "@apply bg-transparent dark:bg-transparent variant-outline-error": {},
+  },
+  ".variant-ringed-surface": {
+    "@apply bg-transparent dark:bg-transparent variant-outline-surface": {},
+  },
+  ".variant-ghost-primary": {
+    "@apply bg-primary-500/20 dark:bg-primary-500/20 variant-outline-primary": {},
+  },
+  ".variant-ghost-secondary": {
+    "@apply bg-secondary-500/20 dark:bg-secondary-500/20 variant-outline-secondary": {},
+  },
+  ".variant-ghost-tertiary": {
+    "@apply bg-tertiary-500/20 dark:bg-tertiary-500/20 variant-outline-tertiary": {},
+  },
+  ".variant-ghost-success": {
+    "@apply bg-success-500/20 dark:bg-success-500/20 variant-outline-success": {},
+  },
+  ".variant-ghost-warning": {
+    "@apply bg-warning-500/20 dark:bg-warning-500/20 variant-outline-warning": {},
+  },
+  ".variant-ghost-error": {
+    "@apply bg-error-500/20 dark:bg-error-500/20 variant-outline-error": {},
+  },
+  ".variant-ghost,.variant-ghost-surface": {
+    "@apply bg-surface-500/20 dark:bg-surface-500/20 variant-outline-surface": {},
+  },
+  ".variant-soft-primary": {
+    "@apply bg-primary-400/20 dark:bg-primary-500/20 text-primary-700-200-token !ring-0": {},
+  },
+  ".variant-soft-secondary": {
+    "@apply bg-secondary-400/20 dark:bg-secondary-500/20 text-secondary-700-200-token !ring-0": {},
+  },
+  ".variant-soft-tertiary": {
+    "@apply bg-tertiary-400/20 dark:bg-tertiary-500/20 text-tertiary-700-200-token !ring-0": {},
+  },
+  ".variant-soft-success": {
+    "@apply bg-success-400/20 dark:bg-success-500/20 text-success-700-200-token !ring-0": {},
+  },
+  ".variant-soft-warning": {
+    "@apply bg-warning-400/20 dark:bg-warning-500/20 text-warning-700-200-token !ring-0": {},
+  },
+  ".variant-soft-error": {
+    "@apply bg-error-400/20 dark:bg-error-500/20 text-error-700-200-token !ring-0": {},
+  },
+  ".variant-soft,.variant-soft-surface": {
+    "@apply bg-surface-400/20 dark:bg-surface-500/20 text-surface-700-200-token !ring-0": {},
+  },
+  ".variant-glass-primary": {
+    "@apply bg-primary-500/20 dark:bg-primary-500/20 backdrop-blur-lg": {},
+  },
+  ".variant-glass-secondary": {
+    "@apply bg-secondary-500/20 dark:bg-secondary-500/20 backdrop-blur-lg": {},
+  },
+  ".variant-glass-tertiary": {
+    "@apply bg-tertiary-500/20 dark:bg-tertiary-500/20 backdrop-blur-lg": {},
+  },
+  ".variant-glass-success": {
+    "@apply bg-success-500/20 dark:bg-success-500/20 backdrop-blur-lg": {},
+  },
+  ".variant-glass-warning": {
+    "@apply bg-warning-500/20 dark:bg-warning-500/20 backdrop-blur-lg": {},
+  },
+  ".variant-glass-error": {
+    "@apply bg-error-500/20 dark:bg-error-500/20 backdrop-blur-lg": {},
+  },
+  ".variant-glass-surface": {
+    "@apply bg-surface-500/20 dark:bg-surface-500/20 backdrop-blur-lg": {},
+  },
+  ".variant-glass": {
+    "@apply bg-surface-50/30 dark:bg-surface-900/30 backdrop-blur-lg": {},
+  },
+  ".alert": {
+    "@apply flex flex-col items-start lg:items-center lg:flex-row p-4 space-y-4 lg:space-y-0 lg:space-x-4": {},
+    "@apply text-surface-900-50-token": {},
+    "@apply rounded-container-token": {},
+  },
+  ".alert-message": {
+    "@apply flex-auto space-y-2": {},
+  },
+  ".alert-actions": {
+    "@apply flex items-center space-x-2": {},
+  },
+  ".badge": {
+    "@apply inline-flex justify-center items-center space-x-2 whitespace-nowrap": {},
+    "@apply font-semibold text-xs": {},
+    "@apply px-2 py-1": {},
+    "@apply rounded-token": {},
+  },
+  ".badge-icon": {
+    "@apply w-5 h-5 flex justify-center items-center rounded-full": {},
+    "@apply font-semibold text-xs": {},
+    "@apply shadow": {},
+  },
+  ".badge-glass": {
+    "@apply bg-surface-500/20 dark:bg-surface-500/20 backdrop-blur-lg": {},
+    "@apply ring-[1px] ring-neutral-900/5 dark:ring-neutral-50/5 ring-inset": {},
+  },
+  ".breadcrumb,.breadcrumb-nonresponsive": {
+    "@apply flex items-center space-x-4 w-full hide-scrollbar overflow-x-auto": {},
+  },
+  ".crumb": {
+    "@apply flex justify-center items-center space-x-2": {},
+  },
+  ".crumb-separator": {
+    "@apply flex text-surface-700-200-token opacity-50": {},
+  },
+  ".breadcrumb li": {
+    "@apply hidden md:block": {},
+  },
+  ".breadcrumb li:nth-last-child(3),.breadcrumb li:nth-last-child(2),.breadcrumb li:nth-last-child(1)": {
+    "@apply block": {},
+  },
+  ".button-base-styles": {
+    "@apply text-base px-5 py-[9px]": {},
+    "@apply text-center whitespace-nowrap": {},
+    "@apply inline-flex justify-center items-center space-x-2": {},
+    "@apply hover:brightness-[1.15]": {},
+    "@apply transition-all": {},
+  },
+  ".btn": {
+    "@apply button-base-styles rounded-token active:scale-[95%] active:brightness-90": {},
+  },
+  ".btn-sm": {
+    "@apply text-sm px-3 py-1.5": {},
+  },
+  ".btn-lg": {
+    "@apply text-lg px-7 py-3": {},
+  },
+  ".btn-xl": {
+    "@apply text-xl px-9 py-4": {},
+  },
+  ".btn-icon": {
+    "@apply btn": {},
+    "@apply text-base aspect-square w-[43px]": {},
+    "@apply rounded-full": {},
+  },
+  ".btn-icon-sm": {
+    "@apply text-sm aspect-square w-[33px]": {},
+  },
+  ".btn-icon-base": {
+    "@apply text-base aspect-square w-[43px]": {},
+  },
+  ".btn-icon-lg": {
+    "@apply text-lg aspect-square w-[53px]": {},
+  },
+  ".btn-icon-xl": {
+    "@apply text-xl aspect-square w-[63px]": {},
+  },
+  ".btn-group": {
+    "@apply inline-flex flex-row space-x-0 overflow-hidden rounded-token": {},
+    "isolation": "isolate",
+  },
+  ".btn-group-vertical": {
+    "@apply btn-group flex-col space-y-0 rounded-container-token": {},
+    "isolation": "isolate",
+  },
+  ".btn-group button,.btn-group a,.btn-group-vertical button,.btn-group-vertical a": {
+    "@apply button-base-styles hover:bg-surface-50/[3%] active:bg-surface-900/[3%]": {},
+    "@apply !no-underline !text-inherit": {},
+  },
+  ".btn-group * + *": {
+    "@apply border-t-0 border-l border-surface-500/20": {},
+  },
+  ".btn-group-vertical * + *": {
+    "@apply border-t border-l-0 border-surface-500/20": {},
+  },
+  ".card": {
+    "@apply bg-surface-100-800-token": {},
+    "@apply ring-outline-token": {},
+    "@apply rounded-container-token": {},
+  },
+  ".card-header": {
+    "@apply p-4 pb-0": {},
+  },
+  ".card-footer": {
+    "@apply p-4 pt-0": {},
+  },
+  ".card-hover": {
+    "@apply transition-all hover:scale-[101%] hover:shadow-xl": {},
+  },
+  ".chip": {
+    "@apply px-3 py-1.5 whitespace-nowrap cursor-pointer": {},
+    "@apply text-xs text-center": {},
+    "@apply rounded": {},
+    "@apply inline-flex justify-center items-center space-x-2": {},
+    "@apply hover:brightness-[1.15]": {},
+    "@apply transition-all": {},
+  },
+  ".chip-disabled,.chip:disabled": {
+    "@apply !opacity-50 !cursor-not-allowed active:scale-100": {},
+  },
+  ".legend": {
+    "@apply font-heading-token text-xl md:text-2xl": {},
+  },
+  ".label": {
+    "@apply space-y-1": {},
+  },
+  ".input,.textarea,.select,.input-group": {
+    "@apply w-full transition duration-200": {},
+    "@apply bg-surface-200-700-token focus:brightness-105 hover:brightness-105": {},
+    "@apply !ring-0": {},
+    "@apply border-token border-surface-400-500-token focus-within:border-primary-500": {},
+  },
+  ".input,.input-group": {
+    "@apply rounded-token": {},
+  },
+  ".textarea,.select": {
+    "@apply rounded-container-token": {},
+  },
+  ".select": {
+    "@apply p-2 pr-8 space-y-1": {},
+  },
+  ".select[size]": {
+    "@apply bg-none": {},
+  },
+  ".select optgroup": {
+    "@apply space-y-1 font-bold": {},
+  },
+  ".select optgroup option": {
+    "@apply ml-0 pl-0": {},
+  },
+  ".select optgroup option:first-of-type": {
+    "@apply mt-3": {},
+  },
+  ".select optgroup option:last-child": {
+    "@apply !mb-3": {},
+  },
+  ".select option": {
+    "@apply bg-surface-200-700-token px-4 py-2 rounded-token cursor-pointer": {},
+  },
+  ".select option:checked": {
+    "background": "rgb(var(--color-primary-500)) linear-gradient(0deg, rgb(var(--color-primary-500)) 0%, rgb(var(--color-primary-500)) 100%);",
+    "@apply text-on-primary-token": {},
+  },
+  ".checkbox,.radio": {
+    "@apply w-5 h-5 !ring-0 rounded cursor-pointer": {},
+    "@apply bg-surface-200-700-token focus:brightness-105 hover:brightness-105": {},
+    "@apply border-token border-surface-400-500-token focus:border-primary-500": {},
+  },
+  ".checkbox:checked,.radio:checked": {
+    "@apply bg-primary-500 hover:bg-primary-500 focus:bg-primary-500 focus:ring-0": {},
+  },
+  ".radio": {
+    "@apply rounded-token": {},
+  },
+  ".input[type='file']": {
+    "@apply p-1": {},
+  },
+  ".input[type='color']": {
+    "@apply border-none w-10 h-10 overflow-hidden rounded-token cursor-pointer": {},
+    "-webkit-appearance": "none ",
+  },
+  ".input[type='color']::-webkit-color-swatch-wrapper": {
+    "@apply p-0": {},
+  },
+  ".input[type='color']::-webkit-color-swatch": {
+    "@apply border-none hover:brightness-110": {},
+  },
+  ".input[type='color']::-moz-color-swatch": {
+    "@apply border-none": {},
+  },
+  ".input:disabled,.textarea:disabled,.select:disabled": {
+    "@apply !opacity-50 !cursor-not-allowed hover:!brightness-100": {},
+  },
+  ".input[readonly],.textarea[readonly],.select[readonly]": {
+    "@apply !border-0 !cursor-not-allowed hover:!brightness-100": {},
+  },
+  ".input-group": {
+    "@apply grid overflow-hidden": {},
+  },
+  ".input-group input,.input-group select": {
+    "@apply border-0 ring-0 bg-transparent": {},
+  },
+  ".input-group select option": {
+    "@apply bg-surface-200-700-token": {},
+  },
+  ".input-group div,.input-group a,.input-group button": {
+    "@apply px-4 flex justify-between items-center": {},
+  },
+  ".input-group-divider input,.input-group-divider select,.input-group-divider div,.input-group-divider a": {
+    "@apply border-l border-surface-400-500-token focus:border-surface-400-500-token": {},
+    "@apply !ring-0": {},
+    "@apply !min-w-fit": {},
+  },
+  ".input-group-divider *:first-child": {
+    "@apply !border-l-0": {},
+  },
+  ".input-group-shim": {
+    "@apply bg-surface-400/10 text-surface-600-300-token": {},
+  },
+  ".input-success": {
+    "@apply !bg-success-200 !border-success-500 !text-success-700": {},
+  },
+  ".input-success::-moz-placeholder": {
+    "@apply text-success-700": {},
+  },
+  ".input-success:-ms-input-placeholder": {
+    "@apply text-success-700": {},
+  },
+  ".input-success::placeholder": {
+    "@apply text-success-700": {},
+  },
+  ".input-warning": {
+    "@apply !bg-warning-200 !border-warning-500 !text-warning-700": {},
+  },
+  ".input-warning::-moz-placeholder": {
+    "@apply text-warning-700": {},
+  },
+  ".input-warning:-ms-input-placeholder": {
+    "@apply text-warning-700": {},
+  },
+  ".input-warning::placeholder": {
+    "@apply text-warning-700": {},
+  },
+  ".input-error": {
+    "@apply !bg-error-200 !border-error-500 !text-error-500": {},
+  },
+  ".input-error::-moz-placeholder": {
+    "@apply text-error-500": {},
+  },
+  ".input-error:-ms-input-placeholder": {
+    "@apply text-error-500": {},
+  },
+  ".input-error::placeholder": {
+    "@apply text-error-500": {},
+  },
+  ".variant-form-material": {
+    "@apply !rounded-tl !rounded-tr !rounded-bl-none !rounded-br-none": {},
+    "@apply bg-surface-500/10 dark:bg-surface-500/20": {},
+    "@apply border-0 border-b-2": {},
+    "@apply backdrop-blur": {},
+  },
+  ".variant-form-material[type='file']": {
+    "@apply !py-1.5": {},
+  },
+  ".list,.list-dl,.list-nav ul": {
+    "@apply list-none": {},
+    "@apply space-y-1": {},
+  },
+  ".list li": {
+    "@apply flex items-center space-x-4 whitespace-nowrap": {},
+    "@apply p-2": {},
+    "@apply rounded-token": {},
+  },
+  ".list-dl div": {
+    "@apply flex items-center space-x-4 whitespace-nowrap": {},
+    "@apply p-2": {},
+    "@apply rounded-token": {},
+  },
+  ".list-nav a,.list-nav button,.list-option": {
+    "@apply flex items-center space-x-4 whitespace-nowrap": {},
+    "@apply px-4 py-2": {},
+    "@apply bg-primary-hover-token": {},
+    "@apply cursor-pointer": {},
+    "@apply rounded-token": {},
+  },
+  ".logo-cloud": {
+    "@apply grid overflow-hidden": {},
+    "@apply rounded-container-token": {},
+  },
+  ".logo-item": {
+    "@apply: flex-auto text-center space-x-4 shadow": {},
+    "@apply flex justify-center items-center space-x-4": {},
+    "@apply bg-surface-100-800-token": {},
+    "@apply text-base font-bold text-black dark:text-white": {},
+    "@apply py-4 md:py-8": {},
+  },
+  ".w-modal-slim": {
+    "@apply w-full max-w-[400px]": {},
+  },
+  ".w-modal": {
+    "@apply w-full max-w-[640px]": {},
+  },
+  ".w-modal-wide": {
+    "@apply w-full max-w-[80%]": {},
+  },
+  ".placeholder": {
+    "@apply bg-surface-300-600-token h-5": {},
+    "@apply rounded-token": {},
+  },
+  ".placeholder-circle": {
+    "@apply bg-surface-300-600-token aspect-square rounded-full": {},
+  },
+  ".table-container": {
+    "@apply overflow-x-auto w-full rounded-container-token": {},
+  },
+  ".table": {
+    "@apply w-full overflow-hidden table-auto": {},
+    "@apply bg-surface-100-800-token": {},
+    "@apply rounded-container-token": {},
+  },
+  ".table-hover tbody tr": {
+    "@apply hover:bg-surface-500/20 even:hover:bg-surface-500/20": {},
+  },
+  ".table-interactive tbody tr": {
+    "@apply hover:bg-primary-hover-token even:hover:bg-primary-hover-token cursor-pointer": {},
+  },
+  ".table-sort-asc": {
+    "@apply after:opacity-50 after:!content-['↓']": {},
+  },
+  ".table-sort-dsc": {
+    "@apply after:opacity-50 after:!content-['↑']": {},
+  },
+  ".table thead": {
+    "@apply bg-surface-200-700-token border-b border-surface-500/20": {},
+  },
+  ".table thead tr": {
+    "@apply capitalize text-left": {},
+  },
+  ".table thead th": {
+    "@apply font-bold p-4": {},
+  },
+  ".table tbody tr": {
+    "@apply border-b border-surface-500/20 even:bg-surface-500/5": {},
+  },
+  ".table tbody td": {
+    "@apply text-sm px-3 py-4 align-top whitespace-nowrap lg:whitespace-normal": {},
+  },
+  ".table-compact tbody td": {
+    "@apply !py-3": {},
+  },
+  ".table-comfortable tbody td": {
+    "@apply !py-5": {},
+  },
+  ".table tfoot": {
+    "@apply bg-surface-100-800-token": {},
+  },
+  ".table tfoot tr": {
+    "@apply capitalize text-left": {},
+  },
+  ".table tfoot th,.table tfoot td": {
+    "@apply p-4": {},
+  },
+  ".table-row-checked": {
+    "@apply !bg-secondary-500/20": {},
+  },
+  ".table-cell-fit": {
+    "@apply w-[1%] whitespace-nowrap": {},
+  },
+};

package/src/tailwind/intellisense.cjs

@@ -0,0 +1,21 @@
+// The Vuetiful Intellisense Tailwind Plugin
+// Tailwind Docs: https://tailwindcss.com/docs/plugins
+// Vuetiful Docs: https://www.vuetiful.dev/docs/get-started
+
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(({ addComponents }) => {
+  // The following will generate the non-token classes PURELY for Intellisense.
+  // These are excluded from production, which means we still need to lean into
+  // using the `all.css` stylesheet to import non-token styles.
+  if (process.env.NODE_ENV !== "production") {
+    // try/catch because it will throw when allComponents.cjs isn't generated yet
+    try {
+      const all = require("./generated/intellisense-classes.cjs");
+      addComponents(all, {
+        respectImportant: true,
+        respectPrefix: true,
+      });
+    } catch {}
+  }
+});

package/src/tailwind/settings.cjs

@@ -0,0 +1,20 @@
+// Common Shared Settings and Constants
+
+module.exports = {
+	colorNames: ['primary', 'secondary', 'tertiary', 'success', 'warning', 'error', 'surface'],
+	colorShades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+	colorPairings: [
+		// forward:
+		{ light: 50, dark: 900 },
+		{ light: 100, dark: 800 },
+		{ light: 200, dark: 700 },
+		{ light: 300, dark: 600 },
+		{ light: 400, dark: 500 },
+		// backwards
+		{ light: 900, dark: 50 },
+		{ light: 800, dark: 100 },
+		{ light: 700, dark: 200 },
+		{ light: 600, dark: 300 },
+		{ light: 500, dark: 400 }
+	]
+};

package/src/tailwind/theme/colors.cjs

@@ -0,0 +1,20 @@
+// Extends Tailwind with Vuetiful theme-specific colors values
+// Doc: https://tailwindcss.com/docs/customizing-colors#using-css-variables
+
+const settings = require("../settings.cjs");
+
+// ex: `50: 'rgb(var(--color-primary-50) / <alpha-value>)'`
+function generatePaletteShades(colorName) {
+  const shadeObj = {};
+  settings.colorShades.forEach(
+    (s) => (shadeObj[s] = `rgb(var(--color-${colorName}-${s}) / <alpha-value>)`)
+  );
+  return shadeObj;
+}
+
+// Generate a a color shade palette 50-900 per each color available
+module.exports = () => {
+  const paletteObj = {};
+  settings.colorNames.forEach((n) => (paletteObj[n] = generatePaletteShades(n)));
+  return paletteObj;
+};

package/src/tailwind/tokens/backgrounds.cjs

@@ -0,0 +1,48 @@
+// Design Tokens: Background
+// Doc: https://www.vuetiful.dev/docs/tokens
+
+const settings = require("../settings.cjs");
+
+// Defaults
+const backdropAlpha = 0.7;
+const hoverAlpha = 0.1;
+
+module.exports = () => {
+  const classes = {};
+  settings.colorNames.forEach((n) => {
+    // Backdrops
+    // Example: .bg-primary-backdrop-token
+    classes[`.bg-${n}-backdrop-token`] = {
+      "background-color": `rgb(var(--color-${n}-400) / ${backdropAlpha})`,
+    };
+    classes[`.dark .bg-${n}-backdrop-token`] = {
+      "background-color": `rgb(var(--color-${n}-900) / ${backdropAlpha})`,
+    };
+
+    // Hover
+    // Example: .bg-primary-hover-token
+    classes[`.bg-${n}-hover-token:hover`] = {
+      "background-color": `rgb(var(--color-${n}-500) / ${hoverAlpha})`,
+    };
+
+    // Active
+    // Example: .bg-primary-active-token
+    classes[`.bg-${n}-active-token`] = {
+      "background-color": `rgb(var(--color-${n}-500)) !important`,
+      color: `rgb(var(--on-${n}))`,
+      fill: `rgb(var(--on-${n}))`,
+    };
+
+    // Color Pairings
+    // Example: .bg-primary-50-900-token | .bg-primary-900-50-token
+    settings.colorPairings.forEach((p) => {
+      classes[`.bg-${n}-${p.light}-${p.dark}-token`] = {
+        "background-color": `rgb(var(--color-${n}-${p.light}))`,
+      };
+      classes[`.dark .bg-${n}-${p.light}-${p.dark}-token`] = {
+        "background-color": `rgb(var(--color-${n}-${p.dark}))`,
+      };
+    });
+  });
+  return classes;
+};

package/src/tailwind/tokens/border-radius.cjs

@@ -0,0 +1,21 @@
+// Design Tokens: Border Radius
+// Doc: https://www.vuetiful.dev/docs/tokens
+
+// const settings = require('../settings.cjs');
+
+module.exports = () => {
+	return {
+		// Base
+		'.rounded-token': { 'border-radius': 'var(--theme-rounded-base)' },
+		'.rounded-tl-token': { 'border-top-left-radius': 'var(--theme-rounded-base)' },
+		'.rounded-tr-token': { 'border-top-right-radius': 'var(--theme-rounded-base)' },
+		'.rounded-bl-token': { 'border-bottom-left-radius': 'var(--theme-rounded-base)' },
+		'.rounded-br-token': { 'border-bottom-right-radius': 'var(--theme-rounded-base)' },
+		// Container
+		'.rounded-container-token': { 'border-radius': 'var(--theme-rounded-container)' },
+		'.rounded-tl-container-token': { 'border-top-left-radius': 'var(--theme-rounded-container)' },
+		'.rounded-tr-container-token': { 'border-top-right-radius': 'var(--theme-rounded-container)' },
+		'.rounded-bl-container-token': { 'border-bottom-left-radius': 'var(--theme-rounded-container)' },
+		'.rounded-br-container-token': { 'border-bottom-right-radius': 'var(--theme-rounded-container)' }
+	};
+};