vueless 0.0.477 → 0.0.478-beta.1

package/{index.js → index.ts}

@@ -1,11 +1,14 @@
-/* eslint-disable vue/max-len, prettier/prettier */
+/* eslint-disable prettier/prettier */
 import { createLocale, LocaleSymbol } from "./composables/useLocale.js";
 import { createLoaderOverlay, LoaderOverlaySymbol } from "./ui.loader-overlay/useLoaderOverlay.js";
 import { createLoaderProgress, LoaderProgressSymbol } from "./ui.loader-progress/useLoaderProgress.js";
-import { themeInit } from "./utils/utilTheme.js";
+import { themeInit } from "./utilsTs/utilTheme.ts";
 
-export { setTitle } from "./utils/utilHelper.js";
-export { setTheme } from "./utils/utilTheme.js";
+import type { App } from 'vue'
+import type { CreateVuelessOptions } from './types.ts'
+
+export { setTitle } from "./utilsTs/utilHelper.ts";
+export { setTheme } from "./utilsTs/utilTheme.ts";
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.js";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en.js";
 export { useLocale } from "./composables/useLocale.js";
@@ -22,14 +25,14 @@ export {
   setDelayedNotify,
   getDelayedNotify,
 } from "./ui.text-notify/utilNotify.js";
-/* eslint-enable vue/max-len, prettier/prettier */
+/* eslint-enable prettier/prettier */
 
-export function createVueless(options = {}) {
+export function createVueless(options: CreateVuelessOptions = {}) {
   const i18n = createLocale(options.i18n);
   const loaderOverlay = createLoaderOverlay();
   const loaderProgress = createLoaderProgress();
 
-  const install = (app) => {
+  const install = (app: App) => {
     app.provide(LocaleSymbol, i18n);
     app.provide(LoaderOverlaySymbol, loaderOverlay);
     app.provide(LoaderProgressSymbol, loaderProgress);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.477",
+  "version": "0.0.478-beta.1",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -21,7 +21,7 @@
   ],
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",
-  "main": "index.js",
+  "main": "index.ts",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -31,13 +31,16 @@
     "dev": "npx @vueless/web-types && node prepare.icons && STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
     "build": "npx @vueless/web-types && node prepare.icons && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
-    "release:prepare": "npx @vueless/web-types && node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node prepare.package",
+    "ts:check": "vue-tsc --build --force",
+    "ts:build": "vue-tsc --build --force --declaration --emitDeclarationOnly",
+    "release:prepare": "npx @vueless/web-types && node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node prepare.package && npm run ts:build",
+    "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
-    "lint": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore src/ .storybook/",
-    "lint:fix": "eslint --ext .vue,.js,.ts --fix --ignore-path .eslintignore src/ .storybook/",
-    "lint:ci": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore --max-warnings=0"
+    "lint": "eslint --no-fix src/ .storybook/",
+    "lint:fix": "eslint --fix src/ .storybook/",
+    "lint:ci": "eslint --no-fix --max-warnings=0"
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.5.7",
@@ -49,30 +52,38 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.12.0",
     "@material-symbols/svg-500": "^0.17.4",
     "@release-it/bumper": "^6.0.1",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/jsdom": "^21.1.7",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.7.7",
     "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vitest/eslint-plugin": "^1.1.7",
+    "@vue/eslint-config-prettier": "^10.0.0",
+    "@vue/eslint-config-typescript": "^14.1.1",
+    "@vue/tsconfig": "^0.5.1",
     "@vueless/plugin-vite": "^0.0.74",
     "@vueless/storybook": "^0.0.37",
     "@vueless/web-types": "^0.0.17",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
-    "eslint": "^8.55.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-tailwindcss": "^3.15.1",
+    "eslint": "^9.12.0",
+    "eslint-plugin-storybook": "^0.10.0--canary.156.ce8985b.0",
+    "eslint-plugin-tailwindcss": "^3.17.5",
     "eslint-plugin-vue": "^9.25.0",
+    "globals": "^15.11.0",
+    "jsdom": "^25.0.1",
     "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
-    "prettier-eslint": "^16.3.0",
+    "prettier": "^3.3.3",
     "release-it": "^17.2.1",
-    "vite": "^5.2.13",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-eslint": "^1.8.1",
     "vue": "^3.5.4",
-    "vue-router": "^4.3.2"
+    "vue-router": "^4.3.2",
+    "vue-tsc": "^2.1.6"
   },
   "resolutions": {
     "jackspeak": "2.3.6"

package/preset.tailwind.js

@@ -10,9 +10,14 @@ import {
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
+  DEFAULT_BRAND_COLOR,
+  DEFAULT_GRAY_COLOR,
+  GRAYSCALE_COLOR,
 } from "./constants.js";
 
 const isStrategyOverride = process.env.VUELESS_STRATEGY === "override";
+const brandColor = process.env.VUELESS_BRAND || DEFAULT_BRAND_COLOR;
+const grayColor = process.env.VUELESS_GRAY || DEFAULT_GRAY_COLOR;
 
 /**
  * Vueless Tailwind CSS `content` config.
@@ -76,6 +81,9 @@ export const vuelessTailwindConfig = {
       fontSize: {
         "2xs": ["0.625rem", "0.875rem"] /* 10px / 14px */,
       },
+      borderRadius: {
+        dynamic: "var(--vl-rounding)",
+      },
       ringWidth: {
         dynamic: "var(--vl-ring)",
       },
@@ -83,10 +91,7 @@ export const vuelessTailwindConfig = {
         dynamic: "var(--vl-ring-offset)",
       },
       ringOffsetColor: {
-        dynamic: "var(--vl-ring-offset-color)",
-      },
-      borderRadius: {
-        dynamic: "var(--vl-rounding)",
+        dynamic: twColorWithOpacity("--vl-ring-offset-color"),
       },
     },
     configViewer: {
@@ -96,8 +101,8 @@ export const vuelessTailwindConfig = {
         "var(--vl-ring-offset)": DEFAULT_RING_OFFSET,
         "var(--vl-ring-offset-color)": DEFAULT_RING_OFFSET_COLOR_LIGHT,
         "var(--vl-rounding)": DEFAULT_ROUNDING,
-        ...getReplacementColors(GRAY_COLOR, GRAY_COLOR),
-        ...getReplacementColors(BRAND_COLOR, GRAY_COLOR),
+        ...getReplacementColors(GRAY_COLOR, grayColor),
+        ...getReplacementColors(BRAND_COLOR, brandColor),
       },
     },
   },
@@ -141,7 +146,7 @@ function twColorWithOpacity(variableName) {
  * @returns { Object } - TailwindCSS color object palette.
  */
 function getPalette(color) {
-  let palette = {
+  const palette = {
     DEFAULT: twColorWithOpacity(`--vl-color-${color}-default`),
   };
 
@@ -159,6 +164,10 @@ function getPalette(color) {
  * @returns { Object } - `tailwind-config-viewer` color replacement object.
  */
 function getReplacementColors(color, tailwindColor) {
+  if (tailwindColor === GRAYSCALE_COLOR || tailwindColor === COOL_COLOR) {
+    tailwindColor = GRAY_COLOR;
+  }
+
   const varsPalette = {
     [twColorWithOpacity(`--vl-color-${color}-default`)]: colors[tailwindColor][600],
   };

package/types.ts

@@ -0,0 +1,223 @@
+import { hasSlotContent } from "./composablesTs/useUI.ts";
+
+// TODO: Import all components here
+import UTextDefaultConfig from "./ui.text-block/config.ts";
+import UButtonDefaultConfig from "./ui.button/config.ts";
+
+import type { ComputedRef } from "vue";
+
+export interface ThemeConfig {
+  /**
+   * Components brand (primary) color.
+   */
+  brand?: BrandColors;
+
+  /**
+   * Components gray (secondary) color.
+   */
+  gray?: GrayColors;
+
+  /**
+   * Default components rounding (border-radius).
+   */
+  rounding?: number;
+
+  /**
+   * Default components ring width.
+   */
+  ring?: number;
+
+  /**
+   * Default components ring offset width.
+   */
+  ringOffset?: number;
+
+  /**
+   * Default components ring color for light theme.
+   */
+  ringOffsetColorLight?: string;
+
+  /**
+   * Default components ring color for dark theme.
+   */
+  ringOffsetColorDark?: string;
+
+  /**
+   * Default dark mode state.
+   */
+  darkMode?: boolean;
+}
+
+export interface Config extends ThemeConfig {
+  /**
+   * Component classes merge behavior.
+   * – merge (default) – smartly merge provided custom classes with default config classes.
+   * – replace – replace default config keys by provided custom keys (override only provided keys, the rest classes will be taken from the default config).
+   * – override – override default config by provided custom config (keeps only custom config, removes all default classes).
+   */
+  strategy?: Strategies;
+
+  /**
+   * Component configs.
+   */
+  component?: Partial<Components>;
+
+  /**
+   * Tailwind-merge config extension for custom classes.
+   * All lists of rules available here:
+   * https://github.com/dcastil/tailwind-merge/blob/v2.3.0/src/lib/default-config.ts.
+   */
+  tailwindMerge?: UnknownObject;
+}
+
+export type UnknownObject = Record<string, unknown>;
+export type ComponentNames = keyof Components; // keys union
+export type Strategies = "merge" | "replace" | "override";
+export type GrayColors = "slate" | "cool" | "zinc" | "neutral" | "stone";
+export type BrandColors =
+  | "grayscale"
+  | "red"
+  | "orange"
+  | "amber"
+  | "yellow"
+  | "lime"
+  | "green"
+  | "emerald"
+  | "teal"
+  | "cyan"
+  | "sky"
+  | "blue"
+  | "indigo"
+  | "violet"
+  | "purple"
+  | "fuchsia"
+  | "pink"
+  | "rose";
+
+export interface Components {
+  UText?: Partial<typeof UTextDefaultConfig>;
+  UButton?: Partial<typeof UButtonDefaultConfig>;
+}
+
+export interface Component {
+  i18n?: UnknownObject;
+  defaults?: Defaults;
+  safelist?: () => TailwindSafelist[];
+  strategy?: Strategies;
+  transition?: Transition;
+  safelistColors?: BrandColors;
+  [key: string]: (CVA & NestedComponent) | object | string | undefined;
+}
+
+export type Defaults = {
+  color?: string;
+  [key: string]: unknown;
+};
+
+export interface NestedComponent {
+  component: string;
+  [key: string]: Record<string, string | object> | string;
+}
+
+export interface Transition {
+  enterFromClass?: string;
+  enterActiveClass?: string;
+  enterToClass?: string;
+  leaveFromClass?: string;
+  leaveActiveClass?: string;
+  leaveToClass?: string;
+}
+
+export interface CVA {
+  base?: string;
+  variants?: UnknownObject;
+  compoundVariants?: CVACompoundVariants[] & never[];
+  defaultVariants?: UnknownObject;
+}
+
+export interface CVACompoundVariants {
+  class: string;
+  [key: string]: string | number | undefined | null;
+}
+
+export interface VueAttrs {
+  id?: string;
+  class?: string;
+  value?: string;
+}
+
+export interface UseAttrs {
+  hasSlotContent: typeof hasSlotContent;
+  [key: string]: object | undefined;
+}
+
+export interface KeyAttrs extends VueAttrs {
+  "vl-component"?: string | null;
+  "vl-key"?: string | null;
+  "vl-child-component"?: string | null;
+  "vl-child-key"?: string | null;
+  config?: UnknownObject;
+  [key: string]: string | UnknownObject | undefined | null;
+}
+
+export interface KeysToExtend {
+  base?: ComputedRef;
+  extend?: ComputedRef;
+}
+
+export interface CreateVuelessOptions {
+  i18n?: Record<string, string | object>;
+}
+
+export interface TailwindSafelist {
+  pattern: string;
+  variants?: string[];
+}
+
+export interface TailwindColorShades {
+  DEFAULT: string;
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  950: string;
+}
+
+export interface VuelessCssVariables {
+  "--vl-ring": string;
+  "--vl-ring-offset": string;
+  "--vl-ring-offset-color": string;
+  "--vl-rounding": string;
+  /* Gray CSS variables */
+  "--vl-color-gray-50": string;
+  "--vl-color-gray-100": string;
+  "--vl-color-gray-200": string;
+  "--vl-color-gray-300": string;
+  "--vl-color-gray-400": string;
+  "--vl-color-gray-500": string;
+  "--vl-color-gray-600": string;
+  "--vl-color-gray-700": string;
+  "--vl-color-gray-800": string;
+  "--vl-color-gray-900": string;
+  "--vl-color-gray-950": string;
+  "--vl-color-gray-default": string;
+  /* Brand CSS variables */
+  "--vl-color-brand-50": string;
+  "--vl-color-brand-100": string;
+  "--vl-color-brand-200": string;
+  "--vl-color-brand-300": string;
+  "--vl-color-brand-400": string;
+  "--vl-color-brand-500": string;
+  "--vl-color-brand-600": string;
+  "--vl-color-brand-700": string;
+  "--vl-color-brand-800": string;
+  "--vl-color-brand-900": string;
+  "--vl-color-brand-950": string;
+  "--vl-color-brand-default": string;
+}

package/ui.button/config.js

@@ -161,4 +161,16 @@ export default /*tw*/ {
     loading: false,
     disabled: false,
   },
+  safelist: (colors) => [
+    { pattern: `border-(${colors})-600` },
+    { pattern: `border-(${colors})-700`, variants: ["hover", "focus"] },
+    { pattern: `border-(${colors})-800`, variants: ["active"] },
+    { pattern: `bg-(${colors})-600` },
+    { pattern: `bg-(${colors})-700`, variants: ["hover", "focus"] },
+    { pattern: `bg-(${colors})-800`, variants: ["active"] },
+    { pattern: `text-(${colors})-600` },
+    { pattern: `text-(${colors})-700`, variants: ["hover", "focus"] },
+    { pattern: `text-(${colors})-800`, variants: ["active"] },
+    { pattern: `ring-(${colors})-700`, variants: ["focus", "focus-within"] },
+  ],
 };

package/ui.button-link/ULink.vue

@@ -256,7 +256,7 @@ const props = defineProps({
 });
 
 const isPresentRoute = computed(() => {
-  for (let key in props.to) return true;
+  for (const key in props.to) return true;
 
   return false;
 });

package/ui.button-link/config.js

@@ -80,4 +80,13 @@ export default /*tw*/ {
     custom: false,
     replace: false,
   },
+  safelist: (colors) => [
+    { pattern: `text-(${colors})-600` },
+    { pattern: `text-(${colors})-700`, variants: ["hover", "focus"] },
+    { pattern: `text-(${colors})-800`, variants: ["active"] },
+    { pattern: `decoration-(${colors})-600` },
+    { pattern: `decoration-(${colors})-700`, variants: ["hover", "focus"] },
+    { pattern: `decoration-(${colors})-800`, variants: ["active"] },
+    { pattern: `ring-(${colors})-700`, variants: ["focus-within"] },
+  ],
 };

package/ui.data-list/UDataList.vue

@@ -366,20 +366,20 @@ function onClickDelete(value, label) {
 }
 
 function prepareSortData(list, parentId) {
-  let sortData = [];
+  const sortData = [];
 
   list.forEach((item) => {
-    let hasItemChildren = item?.children?.length;
+    const hasItemChildren = item?.children?.length;
 
     if (hasItemChildren) {
-      let childrenItem = prepareSortData(item.children, item[props.valueKey]);
+      const childrenItem = prepareSortData(item.children, item[props.valueKey]);
 
       childrenItem.forEach((item) => {
         sortData.push(item);
       });
     }
 
-    let parentItem = { ...item, parentId: 0 || parentId };
+    const parentItem = { ...item, parentId: 0 || parentId };
 
     sortData.push(parentItem);
   });

package/ui.dropdown-badge/config.js

@@ -30,4 +30,5 @@ export default /*tw*/ {
     /* icons */
     dropdownIcon: "keyboard_arrow_down",
   },
+  safelist: (colors) => [{ pattern: `ring-(${colors})-700` }],
 };

package/ui.dropdown-button/config.js

@@ -40,4 +40,5 @@ export default /*tw*/ {
     /* icons */
     dropdownIcon: "keyboard_arrow_down",
   },
+  safelist: (colors) => [{ pattern: `ring-(${colors})-700` }],
 };

package/ui.form-checkbox/config.js

@@ -51,4 +51,13 @@ export default /*tw*/ {
     partiallyCheckedIcon: "remove",
     checkedIcon: "check",
   },
+  safelist: (colors) => [
+    { pattern: `bg-(${colors})-600` },
+    { pattern: `bg-(${colors})-700`, variants: ["hover"] },
+    { pattern: `bg-(${colors})-800`, variants: ["active"] },
+    { pattern: `border-(${colors})-500`, variants: ["focus"] },
+    { pattern: `border-(${colors})-800`, variants: ["active"] },
+    { pattern: `text-(${colors})-600`, variants: ["checked"] },
+    { pattern: `ring-(${colors})-700`, variants: ["focus"] },
+  ],
 };

package/ui.form-color-picker/config.js

@@ -49,4 +49,11 @@ export default /*tw*/ {
     /* icons */
     unselectedIcon: "close",
   },
+  safelist: (colors) => [
+    { pattern: `bg-(${colors})-400`, variants: ["disabled"] },
+    { pattern: `bg-(${colors})-600` },
+    { pattern: `bg-(${colors})-800`, variants: ["active"] },
+    { pattern: `border-(${colors})-400`, variants: ["disabled"] },
+    { pattern: `border-(${colors})-600`, variants: ["hover"] },
+  ],
 };

package/ui.form-input/UInput.vue

@@ -459,7 +459,7 @@ function setLabelPosition() {
     return;
   }
 
-  let leftSlotOrIconWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
+  const leftSlotOrIconWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
 
   const leftPaddingValue = parseFloat(getComputedStyle(inputRef.value).paddingLeft);
 

package/ui.form-input-money/useFormatCurrency.js

@@ -1,6 +1,6 @@
 import { onMounted, nextTick, ref, onBeforeUnmount, toValue, watch } from "vue";
 
-import FormatService from "./utilFormat";
+import FormatService from "./utilFormat.js";
 
 export default function useFormatCurrency(elementId, options) {
   let prevValue = "";

package/ui.form-input-number/UInputNumber.vue

@@ -6,8 +6,9 @@
     :error="error"
     :size="size"
     :align="labelAlign"
-    :data-test="dataTest"
+    centred
     v-bind="labelAttrs"
+    :data-test="dataTest"
   >
     <UButton
       variant="thirdary"
@@ -17,6 +18,7 @@
       round
       :disabled="isRemoveButtonDisabled || disabled"
       v-bind="removeButtonAttrs"
+      :data-test="`${dataTest}-remove`"
       @click="onClickRemove"
     >
       <UIcon
@@ -24,7 +26,6 @@
         :size="size"
         :name="config.defaults.removeIcon"
         :color="isRemoveButtonDisabled ? 'gray' : 'grayscale'"
-        :data-test="`${dataTest}-remove`"
         v-bind="removeIconAttrs"
       />
     </UButton>
@@ -41,6 +42,7 @@
       round
       :disabled="isAddButtonDisabled || disabled"
       v-bind="addButtonAttrs"
+      :data-test="`${dataTest}-add`"
       @click="onClickAdd"
     >
       <UIcon
@@ -48,7 +50,6 @@
         :size="size"
         :name="config.defaults.addIcon"
         :color="isAddButtonDisabled ? 'gray' : 'grayscale'"
-        :data-test="`${dataTest}-add`"
         v-bind="addIconAttrs"
       />
     </UButton>

package/ui.form-label/config.js

@@ -20,8 +20,8 @@ export default /*tw*/ {
       { align: "right", size: "sm", class: "gap-2.5" },
       { align: "right", size: "md", class: "gap-3" },
       { align: "right", size: "lg", class: "gap-3.5" },
-      { align: "left", centred: true, class: "items-center w-auto" },
-      { align: "right", centred: true, class: "items-center w-auto" },
+      { align: "left", centred: true, class: "items-center justify-end w-auto" },
+      { align: "right", centred: true, class: "items-center justify-start w-auto" },
     ],
   },
   content: {

package/ui.form-radio/config.js

@@ -26,4 +26,10 @@ export default /*tw*/ {
     checked: false,
     disabled: false,
   },
+  safelist: (colors) => [
+    { pattern: `border-(${colors})-500`, variants: ["focus"] },
+    { pattern: `border-(${colors})-800`, variants: ["active"] },
+    { pattern: `text-(${colors})-600`, variants: ["checked"] },
+    { pattern: `ring-(${colors})-700`, variants: ["focus"] },
+  ],
 };

package/ui.form-switch/config.js

@@ -79,4 +79,10 @@ export default /*tw*/ {
     onIcon: "check",
     offIcon: "close",
   },
+  safelist: (colors) => [
+    { pattern: `ring-(${colors})-700` },
+    { pattern: `bg-(${colors})-600` },
+    { pattern: `bg-(${colors})-700`, variants: ["hover"] },
+    { pattern: `bg-(${colors})-800`, variants: ["active"] },
+  ],
 };

package/ui.image-avatar/config.js

@@ -43,4 +43,9 @@ export default /*tw*/ {
     /* icons */
     placeholderIcon: "image",
   },
+  safelist: (colors) => [
+    { pattern: `bg-(${colors})-100` },
+    { pattern: `text-(${colors})-600` },
+    { pattern: `border-(${colors})-200` },
+  ],
 };

package/ui.image-icon/config.js

@@ -40,4 +40,9 @@ export default /*tw*/ {
     style: "outlined",
     weight: 500,
   },
+  safelist: (colors) => [
+    { pattern: `text-(${colors})-400` },
+    { pattern: `text-(${colors})-600` },
+    { pattern: `text-(${colors})-800` },
+  ],
 };

package/ui.loader/config.js

@@ -52,4 +52,5 @@ export default /*tw*/ {
     size: "md",
     loading: false,
   },
+  safelist: (colors) => [{ pattern: `bg-(${colors})-600` }],
 };

package/ui.loader-overlay/config.js

@@ -23,4 +23,5 @@ export default /*tw*/ {
     color: "brand",
     loading: undefined,
   },
+  safelist: (colors) => [{ pattern: `bg-(${colors})-600` }],
 };

package/ui.loader-progress/config.js

@@ -15,4 +15,5 @@ export default /*tw*/ {
     color: "brand",
     loading: false,
   },
+  safelist: (colors) => [{ pattern: `bg-(${colors})-600` }],
 };