vueless 0.0.702 → 0.0.704

package/ui.form-calendar/UCalendarMonthView.vue

@@ -134,7 +134,6 @@ const {
         variant="primary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="selectedMonthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -148,7 +147,6 @@ const {
         "
         variant="thirdary"
         color="brand"
-        :ring="false"
         v-bind="currentMonthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -161,7 +159,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="currentFirstMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
@@ -175,7 +172,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="currentLastMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
@@ -189,7 +185,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="firstMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
@@ -203,7 +198,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="lastMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
@@ -220,7 +214,6 @@ const {
         variant="primary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="singleCurrentMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -233,7 +226,6 @@ const {
         variant="primary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="currentMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -249,7 +241,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="singleMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -265,7 +256,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="monthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -278,7 +268,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="activeMonthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -291,7 +280,6 @@ const {
         variant="thirdary"
         color="grayscale"
         size="md"
-        :ring="false"
         v-bind="monthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"

package/ui.form-calendar/UCalendarYearView.vue

@@ -132,7 +132,6 @@ const {
         variant="primary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="selectedYearAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -145,7 +144,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="currentYearAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -158,7 +156,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="currentFirstYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
@@ -172,7 +169,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="currentLastYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
@@ -186,7 +182,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="firstYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
@@ -200,7 +195,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         filled
         v-bind="lastYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
@@ -217,7 +211,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="singleCurrentYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -230,7 +223,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="currentYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale) + 'sd'"
@@ -245,7 +237,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="singleYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -260,7 +251,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="yearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -273,7 +263,6 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        :ring="false"
         v-bind="activeYearAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -286,7 +275,6 @@ const {
         variant="thirdary"
         color="grayscale"
         size="md"
-        :ring="false"
         v-bind="yearAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"

package/ui.form-checkbox/config.ts

@@ -2,9 +2,12 @@ export default /*tw*/ {
   checkboxLabel: "{ULabel}",
   checkbox: {
     base: `
-      border rounded-dynamic-sm bg-white cursor-pointer transition checked:text-{color}-600
-      border-gray-300 hover:border-gray-400 focus:border-{color}-500 active:border-{color}-800
-      focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
+      border border-gray-300 rounded-dynamic-sm bg-white cursor-pointer transition
+      hover:border-gray-400
+      active:border-{color}-600 active:bg-{color}-200
+      focus:ring-0 focus:ring-offset-0
+      checked:text-{color}-600
+      focus-visible:ring-{color}-600 focus-visible:ring-dynamic focus-visible:ring-offset-dynamic
       disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
     `,
     variants: {
@@ -14,10 +17,10 @@ export default /*tw*/ {
         lg: "size-6",
       },
       color: {
-        grayscale: "focus:ring-gray-700/15 focus:border-gray-500 active:border-gray-800 checked:text-gray-900",
+        grayscale: "focus-visible:ring-gray-900 active:bg-gray-200 checked:text-gray-900",
       },
       error: {
-        true: "focus:ring-red-700/15 border-red-300 hover:border-red-400 focus:border-red-500 bg-red-50",
+        true: "!border-red-600 focus:ring-red-600",
       },
     },
   },
@@ -33,7 +36,7 @@ export default /*tw*/ {
         lg: "size-6",
       },
       color: {
-        grayscale: "border-gray-900 bg-gray-900",
+        grayscale: "bg-gray-900 hover:bg-gray-800 active:bg-gray-700",
       },
       disabled: {
         true: "border-gray-400 bg-gray-400",

package/ui.form-color-picker/UColorPicker.vue

@@ -58,7 +58,6 @@ const { listAttrs, colorButtonAttrs, circleAttrs } = useUI<Config>(defaultConfig
       v-tooltip="labels?.[color] || color"
       square
       size="xs"
-      :ring="false"
       color="grayscale"
       variant="thirdary"
       :filled="selectedItem === color"

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -630,7 +630,6 @@ watchEffect(() => {
         square
         filled
         :size="size"
-        :ring="false"
         :disabled="disabled"
         variant="thirdary"
         :left-icon="config.defaults.prevIcon"
@@ -644,7 +643,6 @@ watchEffect(() => {
         square
         filled
         :size="size"
-        :ring="false"
         :disabled="disabled"
         :label="userFormatDate"
         variant="thirdary"
@@ -657,7 +655,6 @@ watchEffect(() => {
         square
         filled
         :size="size"
-        :ring="false"
         :disabled="disabled"
         variant="thirdary"
         :left-icon="config.defaults.nextIcon"

package/ui.form-date-picker-range/UDatePickerRangePeriodMenu.vue

@@ -140,7 +140,6 @@ function getDatePeriodState(date: DatePeriodRange) {
         square
         filled
         size="xs"
-        :ring="false"
         color="grayscale"
         variant="thirdary"
         :label="periodButton.title"
@@ -153,7 +152,6 @@ function getDatePeriodState(date: DatePeriodRange) {
         square
         filled
         size="xs"
-        :ring="false"
         color="grayscale"
         variant="thirdary"
         :label="periodButton.title"
@@ -169,7 +167,6 @@ function getDatePeriodState(date: DatePeriodRange) {
       square
       filled
       size="xs"
-      :ring="false"
       color="grayscale"
       variant="thirdary"
       v-bind="attrs.periodButtonAttrs.value"
@@ -188,7 +185,6 @@ function getDatePeriodState(date: DatePeriodRange) {
       square
       filled
       size="xs"
-      :ring="false"
       color="grayscale"
       variant="thirdary"
       v-bind="attrs.periodButtonActiveAttrs.value"
@@ -207,7 +203,6 @@ function getDatePeriodState(date: DatePeriodRange) {
       square
       filled
       size="xs"
-      :ring="false"
       color="grayscale"
       variant="thirdary"
       :label="locale.ownRange"
@@ -221,7 +216,6 @@ function getDatePeriodState(date: DatePeriodRange) {
       square
       filled
       size="xs"
-      :ring="false"
       color="grayscale"
       variant="thirdary"
       :label="locale.ownRange"
@@ -236,7 +230,6 @@ function getDatePeriodState(date: DatePeriodRange) {
       <UButton
         square
         size="sm"
-        :ring="false"
         color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults?.prevIcon"
@@ -251,7 +244,6 @@ function getDatePeriodState(date: DatePeriodRange) {
       <UButton
         square
         size="sm"
-        :ring="false"
         color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults?.nextIcon"
@@ -269,7 +261,6 @@ function getDatePeriodState(date: DatePeriodRange) {
           v-if="getDatePeriodState(date).isSelected && getDatePeriodState(date).isCurrentDate"
           filled
           size="sm"
-          :ring="false"
           color="brand"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
@@ -282,7 +273,6 @@ function getDatePeriodState(date: DatePeriodRange) {
           v-else-if="getDatePeriodState(date).isSelected"
           filled
           size="sm"
-          :ring="false"
           color="brand"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
@@ -296,7 +286,6 @@ function getDatePeriodState(date: DatePeriodRange) {
           filled
           size="sm"
           color="brand"
-          :ring="false"
           variant="secondary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="attrs.periodDateCurrentAttrs.value"
@@ -307,7 +296,6 @@ function getDatePeriodState(date: DatePeriodRange) {
         <UButton
           v-else
           size="sm"
-          :ring="false"
           color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"

package/ui.form-date-picker-range/config.ts

@@ -2,12 +2,12 @@ export default /*tw*/ {
   wrapper: "relative",
   datepickerInput: "{UInput}",
   datepickerInputActive: {
-    base: "{UInput} {>datepickerInput}",
+    base: "{>datepickerInput}",
     wrapper: {
-      base: "ring-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
+      base: "ring-dynamic ring-offset-0 ring-brand-600 border-brand-600 hover:border-brand-600",
       variants: {
         error: {
-          true: "ring-red-700/15 border-red-500 hover:border-red-500",
+          true: "!border-red-600 ring-red-600",
         },
       },
     },
@@ -22,17 +22,7 @@ export default /*tw*/ {
       },
     },
   },
-  buttonWrapper: {
-    base: `
-      flex rounded-dynamic max-md:justify-between
-      focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
-    `,
-    variants: {
-      opened: {
-        true: "ring-dynamic ring-offset-dynamic ring-brand-700/15",
-      },
-    },
-  },
+  buttonWrapper: "flex rounded-dynamic max-md:justify-between",
   button: "{UButton} shrink-0 grow rounded-none",
   shiftRangeButton: `
     first:rounded-dynamic first:rounded-r-none
@@ -54,12 +44,9 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { error: true, variant: "input", class: "-mt-3" },
-      { description: true, variant: "input", class: "-mt-3" },
-      { description: false, error: false, variant: "input", class: "mt-2" },
-      { error: true, variant: "button", class: "-mt-2" },
-      { description: true, variant: "button", class: "-mt-2" },
-      { description: false, error: false, variant: "button", class: "mt-3" },
+      { error: true, variant: ["button", "input"], class: "-mt-2" },
+      { description: true, variant: ["button", "input"], class: "-mt-2" },
+      { description: false, error: false, variant: ["button", "input"], class: "mt-2" },
     ],
   },
   menuTransition: {

package/ui.form-input/UInput.vue

@@ -287,7 +287,7 @@ const {
           @binding {string} icon-name
         -->
         <slot name="left" :icon-name="leftIcon">
-          <UIcon v-if="leftIcon" internal color="inherit" :name="leftIcon" v-bind="leftIconAttrs" />
+          <UIcon v-if="leftIcon" internal color="gray" :name="leftIcon" v-bind="leftIconAttrs" />
         </slot>
       </span>
 
@@ -332,13 +332,7 @@ const {
           @binding {string} icon-name
         -->
         <slot name="right" :icon-name="rightIcon">
-          <UIcon
-            v-if="rightIcon"
-            internal
-            color="inherit"
-            :name="rightIcon"
-            v-bind="rightIconAttrs"
-          />
+          <UIcon v-if="rightIcon" internal color="gray" :name="rightIcon" v-bind="rightIconAttrs" />
         </slot>
       </div>
     </label>

package/ui.form-input/config.ts

@@ -2,23 +2,16 @@ export default /*tw*/ {
   inputLabel: "{ULabel}",
   wrapper: {
     base: `
-      w-full bg-white relative flex border border-gray-300 rounded-dynamic transition
-      hover:border-gray-400 hover:focus-within:border-brand-500 focus-within:border-brand-500
-      focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
+      border rounded-dynamic border-gray-300 relative flex w-full bg-white transition
+      hover:border-gray-400 hover:focus-within:border-brand-600 focus-within:border-brand-600
+      focus-within:ring-dynamic focus-within:ring-offset-0 focus-within:ring-brand-600
     `,
     variants: {
       error: {
-        true: `
-          border-red-300 bg-red-50
-          hover:border-red-400 hover:focus-within:border-red-500
-          focus-within:border-red-500 focus-within:ring-red-700/15
-        `,
+        true: "!border-red-600 focus-within:ring-red-600",
       },
       disabled: {
-        true: `
-          focus-within:ring-0 focus-within:ring-offset-0 bg-gray-100
-          hover:border-gray-300 focus-within:border-gray-300 hover:focus-within:border-gray-300
-        `,
+        true: "!border-gray-300 focus-within:ring-0 bg-gray-100",
       },
     },
   },
@@ -52,10 +45,7 @@ export default /*tw*/ {
         lg: "text-base placeholder:text-base placeholder:font-normal",
       },
       error: {
-        true: `
-          bg-red-50 placeholder:text-red-300 hover:border-red-400 focus:border-red-500 focus:ring-red-700/15
-          focus-within:border-red-500 focus-within:ring-red-700/15
-        `,
+        true: "placeholder:text-red-300",
       },
       typePassword: {
         true: "tracking-widest !leading-[1.18] [font-family:text-security-disc,serif] [-webkit-text-security:disc]",

package/ui.form-input/storybook/stories.ts

@@ -1,3 +1,4 @@
+import { computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -25,7 +26,8 @@ export default {
   title: "Form Inputs & Controls / Input",
   component: UInput,
   args: {
-    label: "Label",
+    label: "Full Name",
+    modelValue: "Satoshi Nakamoto",
   },
   argTypes: {
     ...getArgTypes(UInput.__name),
@@ -41,13 +43,19 @@ const DefaultTemplate: StoryFn<UInputArgs> = (args: UInputArgs) => ({
   components: { UInput, UIcon },
   setup() {
     const slots = getSlotNames(UInput.__name);
+    const errorMessage = computed(() =>
+      args.modelValue === "" && args.error !== ""
+        ? "This field is required. Please enter a value."
+        : "",
+    );
 
-    return { args, slots };
+    return { args, slots, errorMessage };
   },
   template: `
     <UInput
       v-bind="args"
       v-model="args.modelValue"
+      :error="errorMessage"
       class="max-w-96"
     >
       ${args.slotTemplate || getSlotsFragment("")}
@@ -61,15 +69,15 @@ const EnumVariantTemplate: StoryFn<UInputArgs> = (args: UInputArgs, { argTypes }
     function getDescription(option: string) {
       switch (option) {
         case "string":
-          return "Only letters are allowed";
+          return "Only letters are allowed.";
         case "number":
-          return "Numbers are allowed (including decimals)";
+          return "Numbers are allowed (including decimals).";
         case "integer":
-          return "Only integers are allowed";
+          return "Only integers are allowed.";
         case "stringAndNumber":
-          return "Letters and numbers are allowed";
+          return "Letters and numbers are allowed.";
         case "symbol":
-          return "Special characters are allowed";
+          return "Special characters are allowed.";
         default:
           return "";
       }
@@ -96,18 +104,18 @@ const EnumVariantTemplate: StoryFn<UInputArgs> = (args: UInputArgs, { argTypes }
         :key="index"
         v-bind="args"
         :[args.enum]="option"
-        :label="option"
-        :description="getDescription(option)"
+        :placeholder="args.enum === 'validationRule' ? '' : option"
+        :label="args.enum === 'validationRule' ? option : 'Full Name'"
+        :description="args.enum === 'validationRule' ? getDescription(option) : ''"
         class="max-w-96"
       />
 
       <UInput
         v-if="args.enum === 'validationRule'"
-        v-bind="args"
-        validation-rule="^#([a-fA-F0-9]{3,4}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$"
+        validation-rule="^#([a-fA-F0-9]{0,6}|[a-fA-F0-9]{0,8})$"
         label="Custom RegExp"
-        description="Enter a valid hex color code (e.g., #FF5733)"
-        labelAlign="topWithDesc"
+        description="Enter a valid hex color code (e.g., #FF5733)."
+        label-align="topWithDesc"
         placeholder="#FF5733"
         class="max-w-96"
       />
@@ -119,31 +127,39 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const Placeholder = DefaultTemplate.bind({});
-Placeholder.args = { placeholder: "Type something here..." };
+Placeholder.args = { modelValue: "", placeholder: "Type something here...", error: "" };
 
 export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Provide additional details if necessary." };
 
 export const Error = DefaultTemplate.bind({});
-Error.args = { error: "This field is required. Please enter a value." };
+Error.args = { modelValue: "" };
 
 export const Readonly = DefaultTemplate.bind({});
-Readonly.args = { readonly: true, modelValue: "Pre-filled content that cannot be changed" };
+Readonly.args = {
+  readonly: true,
+  label: "Readonly data",
+  modelValue: "Pre-filled content that cannot be changed",
+};
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
 export const TypePassword = DefaultTemplate.bind({});
-TypePassword.args = { type: "password" };
+TypePassword.args = { label: "Password", modelValue: "donotforgetyourpassword", type: "password" };
 
 export const LabelPlacement = EnumVariantTemplate.bind({});
-LabelPlacement.args = { enum: "labelAlign" };
+LabelPlacement.args = { enum: "labelAlign", label: "Full Name", modelValue: "" };
 
 export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size" };
+Sizes.args = { enum: "size", modelValue: "" };
 
 export const ValidationRules = EnumVariantTemplate.bind({});
-ValidationRules.args = { enum: "validationRule", labelAlign: "topWithDesc" };
+ValidationRules.args = {
+  enum: "validationRule",
+  labelAlign: "topWithDesc",
+  modelValue: "",
+};
 ValidationRules.parameters = {
   docs: {
     description: {
@@ -161,13 +177,11 @@ export const IconProps: StoryFn<UInputArgs> = (args) => ({
   template: `
     <URow>
       <UInput
-        v-bind="args"
         left-icon="feedback"
         label="Your opinion"
         placeholder="Share your feedback with us"
       />
       <UInput
-        v-bind="args"
         right-icon="person"
         label="Username"
         placeholder="Enter your username"

package/ui.form-input/types.ts

@@ -18,7 +18,7 @@ export interface Props {
   /**
    * Label placement.
    */
-  labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
+  labelAlign?: "topInside" | "top" | "topWithDesc" | "left" | "right";
 
   /**
    * Input placeholder.

package/ui.form-input-file/UInputFile.vue

@@ -310,7 +310,7 @@ const {
           <template v-if="Array.isArray(currentFiles) || !currentFiles">
             <UButton
               filled
-              :ring="false"
+              tabindex="-1"
               :for="elementId"
               tag="label"
               variant="thirdary"
@@ -338,7 +338,6 @@ const {
             round
             square
             filled
-            :ring="false"
             variant="thirdary"
             :disabled="disabled"
             :left-icon="config.defaults.clearIcon"

package/ui.form-input-file/config.ts

@@ -4,12 +4,12 @@ export default /*tw*/ {
     base: `
       p-3 size-auto w-full bg-white transition
       rounded-dynamic border border-solid border-gray-300
-      hover:border-gray-400 hover:focus-within:border-brand-500 focus-within:border-brand-500
-      focus-within:ring-brand-700/15 focus-within:ring-dynamic focus-within:ring-offset-dynamic
+      hover:border-gray-400 hover:focus-within:border-brand-600 focus-within:border-brand-600
+      focus-within:ring-brand-600 focus-within:ring-dynamic focus-within:ring-offset-0
     `,
     variants: {
       error: {
-        true: "border-red-300 hover:border-red-400",
+        true: "!border-red-600",
       },
       disabled: {
         true: "pointer-events-none bg-gray-100",
@@ -22,7 +22,7 @@ export default /*tw*/ {
     ],
   },
   dropzoneHover: "border-gray-400 border-dashed",
-  dropzoneError: "hover:border-red-400 border-dashed border-red-300",
+  dropzoneError: "!border-red-600 border-dashed",
   descriptionTop: "{UText} text-gray-700 mb-2",
   descriptionBottom: "{UText} text-gray-700 mt-2",
   content: {
@@ -31,9 +31,6 @@ export default /*tw*/ {
       multiple: {
         false: "items-center",
       },
-      error: {
-        true: "bg-red-50",
-      },
       disabled: {
         true: "bg-gray-200",
       },