srcdev-nuxt-components 9.3.12 → 9.4.0

package/app/components/05.forms/input-checkbox-radio/CONSUMER-STYLING.md

@@ -0,0 +1,68 @@
+# InputCheckboxRadioCore / InputCheckboxRadioButton — Consumer Styling Guide
+
+## Public token API
+
+Every colour token below is `var(--input-checkbox-*, {default})` — set the `--input-checkbox-*`
+name to override just this component; leave it unset and it inherits the shared `--theme-*` slot
+(or `--theme-checkbox-symbol-surface`/`--theme-input-surface` family) every other themed component
+also falls back to. See `theming-component-token-pattern.md` for why this two-tier shape exists.
+
+Defaults are unchanged from before this migration — this is a token-rename pass (giving each
+property its own override point), not a redesign, unlike `InputButtonCore`'s flat/darker-hover
+treatment. Geometry (`--input-checked-element-size`, `--form-element-*`, etc.) is separate and
+untouched — see `theming-form-geometry-tokens.md`.
+
+### The control itself (`InputCheckboxRadioCore` — the square/circle)
+
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-checkbox-surface` | `var(--theme-checkbox-symbol-surface)` | Background |
+| `--input-checkbox-border` | `var(--theme-border)` | Border colour |
+| `--input-checkbox-border-focus` | `var(--theme-border-focus)` | Outline colour on `:focus-visible` (non-button style only — see note) |
+| `--input-checkbox-icon-color` | `var(--theme-text)` | Checked-state icon colour |
+
+> The `:focus-visible` outline only applies to the plain checkbox/radio style
+> (`:not(.button)`) — `InputCheckboxRadioButton`'s pill/button style has its own focus treatment,
+> below, via `:has(.input-checkbox-radio-core:focus-visible)` on the outer label.
+
+### The pill/button style (`InputCheckboxRadioButton` — e.g. a "Services of interest" option list)
+
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-checkbox-button-surface` | `var(--theme-input-surface)` | Background (resting) |
+| `--input-checkbox-button-border` | `var(--theme-border)` | Border colour (resting and hover — unchanged between the two by default) |
+| `--input-checkbox-button-surface-hover` | `var(--theme-input-surface-hover)` | Background on hover |
+| `--input-checkbox-button-ring-hover` | `var(--theme-ring)` | Outline colour on hover |
+| `--input-checkbox-button-surface-focus` | `var(--theme-surface-subtle)` | Background when the inner control has `:focus-visible` |
+| `--input-checkbox-button-ring-focus` | `var(--theme-border-focus)` | Outline colour when the inner control has `:focus-visible` |
+| `--input-checkbox-button-label-color` | `var(--colour-text-default)` | Option label text colour |
+| `--input-checkbox-button-icon-color` | `var(--theme-text)` | Trailing decorator icon colour (the `+` in the corner) |
+
+---
+
+## Global theming — app-level CSS file
+
+```css
+:where(html) {
+  --input-checkbox-button-surface: var(--rose-09);
+  --input-checkbox-button-surface-hover: var(--rose-08);
+  --input-checkbox-button-ring-focus: var(--rose-04);
+}
+```
+
+Only declare the tokens you want to change — everything else keeps inheriting the shared
+`--theme-*`/`--theme-input-*` tokens.
+
+---
+
+## Per-instance overrides
+
+```vue
+<InputCheckboxRadioButton
+  id="balayage"
+  type="checkbox"
+  name="services"
+  label="Balayage"
+  style="--input-checkbox-button-surface-hover: var(--gold-08);"
+/>
+```

package/app/components/05.forms/input-checkbox-radio/InputCheckboxRadioButton.vue

@@ -100,23 +100,28 @@ const flexDirection = ref(props.direction);
   &.inline {
     --_white-space: nowrap;
   }
-  background-color: var(--theme-input-surface);
-  border: var(--form-element-border-width) solid var(--theme-border);
+
+  /* Public --input-checkbox-button-* tokens, inline-fallback to the shared theme tokens (see
+     theming-component-token-pattern.md) — overriding one here doesn't touch every other themed
+     input/control that also reads --theme-input-surface/--theme-border, etc. Defaults are
+     unchanged from before this migration — this is a token-rename pass, not a redesign. */
+  background-color: var(--input-checkbox-button-surface, var(--theme-input-surface));
+  border: var(--form-element-border-width) solid var(--input-checkbox-button-border, var(--theme-border));
   outline: var(--form-element-outline-width) solid transparent;
 
   box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem transparent;
 
   &:hover {
-    background-color: var(--theme-input-surface-hover);
-    border-color: var(--theme-border);
-    outline-color: var(--theme-ring);
+    background-color: var(--input-checkbox-button-surface-hover, var(--theme-input-surface-hover));
+    border-color: var(--input-checkbox-button-border, var(--theme-border));
+    outline-color: var(--input-checkbox-button-ring-hover, var(--theme-ring));
     outline-offset: var(--form-element-outline-offset-focus);
     cursor: pointer;
   }
 
   &:has(.input-checkbox-radio-core:focus-visible) {
-    background-color: var(--theme-surface-subtle);
-    outline-color: var(--theme-border-focus);
+    background-color: var(--input-checkbox-button-surface-focus, var(--theme-surface-subtle));
+    outline-color: var(--input-checkbox-button-ring-focus, var(--theme-border-focus));
     outline-offset: var(--form-element-outline-offset-focus);
   }
 
@@ -127,12 +132,17 @@ const flexDirection = ref(props.direction);
   .input-checkbox-radio-options-button-label {
     display: flex;
     flex-grow: 1;
-    color: var(--colour-text-default);
+    color: var(--input-checkbox-button-label-color, var(--colour-text-default));
     font-size: var(--input-font-size);
     width: 100%;
     min-height: var(--input-element-line-height);
     align-items: center;
     justify-content: center;
+    /* justify-content only centers the label as a single block — once text actually wraps
+       (e.g. "Half Head Highlights"), that block fills the full available width and each
+       individual line falls back to its default left-alignment inside it. text-align is what
+       centers wrapped lines relative to each other. */
+    text-align: center;
     padding-block: 0.8rem;
     padding-inline: 0.8rem;
     white-space: var(--_white-space);
@@ -146,7 +156,7 @@ const flexDirection = ref(props.direction);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--theme-text);
+    color: var(--input-checkbox-button-icon-color, var(--theme-text));
 
     .icon {
       height: var(--input-checkbox-decorator-icon-size);

package/app/components/05.forms/input-checkbox-radio/InputCheckboxRadioCore.vue

@@ -112,8 +112,11 @@ const inputClasses = computed(() => [
   grid-template-areas: "element-stack";
   place-content: center;
 
-  background-color: var(--theme-checkbox-symbol-surface);
-  border: 0.1rem solid var(--theme-border);
+  /* Public --input-checkbox-* tokens, inline-fallback to the shared theme tokens (see
+     theming-component-token-pattern.md) — overriding one here doesn't touch every other
+     themed input/control that also reads --theme-checkbox-symbol-surface/--theme-border. */
+  background-color: var(--input-checkbox-surface, var(--theme-checkbox-symbol-surface));
+  border: 0.1rem solid var(--input-checkbox-border, var(--theme-border));
   outline: var(--form-element-outline-width) solid transparent;
 
   height: var(--input-checked-element-size);
@@ -139,7 +142,7 @@ const inputClasses = computed(() => [
 
   &:not(:is(.button)) {
     &:has(input:focus-visible) {
-      outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
+      outline: var(--form-element-outline-width-focus) solid var(--input-checkbox-border-focus, var(--theme-border-focus));
       outline-offset: var(--form-element-outline-offset-focus);
     }
   }
@@ -150,7 +153,7 @@ const inputClasses = computed(() => [
 
       .input-checked-icon-checked,
       .icon {
-        color: var(--theme-text);
+        color: var(--input-checkbox-icon-color, var(--theme-text));
       }
     }
   }
@@ -164,7 +167,7 @@ const inputClasses = computed(() => [
 
     .input-checked-icon-checked,
     .icon {
-      color: var(--theme-text);
+      color: var(--input-checkbox-icon-color, var(--theme-text));
       height: var(--input-checked-icon-size);
       width: var(--input-checked-icon-size);
       box-shadow: var(--_box-shadow);

package/app/components/05.forms/input-checkbox-radio/stories/InputCheckboxRadioButton.stories.ts

@@ -0,0 +1,93 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { ref } from "vue";
+import StorybookComponent from "../InputCheckboxRadioButton.vue";
+
+interface InputCheckboxRadioButtonStoryArgs {
+  type: "checkbox" | "radio";
+  label: string;
+  isPill: boolean;
+  fieldHasError: boolean;
+  displayAsDisc: boolean;
+}
+
+export default {
+  title: "Components/Forms/Input Checkbox Radio/InputCheckboxRadioButton",
+  component: StorybookComponent,
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["checkbox", "radio"],
+      table: { category: "Basic" },
+    },
+    label: { control: "text", table: { category: "Basic" } },
+    isPill: { control: "boolean", table: { category: "Styling" } },
+    fieldHasError: { control: "boolean", table: { category: "States" } },
+    displayAsDisc: { control: "boolean", table: { category: "Styling" } },
+  },
+  args: {
+    type: "checkbox",
+    label: "Balayage",
+    isPill: false,
+    fieldHasError: false,
+    displayAsDisc: false,
+  },
+} as Meta<InputCheckboxRadioButtonStoryArgs>;
+
+const Template: StoryFn<InputCheckboxRadioButtonStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const modelValue = ref(false);
+    return { args, modelValue };
+  },
+  template: `
+    <div style="margin: 36px; max-width: 260px;">
+      <StorybookComponent
+        id="single-option"
+        name="single"
+        :type="args.type"
+        :label="args.label"
+        :is-pill="args.isPill"
+        :field-has-error="args.fieldHasError"
+        :display-as-disc="args.displayAsDisc"
+        v-model="modelValue"
+      />
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+// "Services of interest" pattern — the actual multi-option checkbox-pill layout this component
+// is normally used in (as opposed to Default's single isolated control).
+const OptionGroupTemplate: StoryFn = () => ({
+  components: { StorybookComponent },
+  setup() {
+    const services = [
+      "Balayage",
+      "Highlights",
+      "Half Head Highlights",
+      "Full Colour",
+      "Lowlights",
+      "Toner & Gloss",
+    ];
+    const selected = ref<string[]>([]);
+    return { services, selected };
+  },
+  template: `
+    <div style="margin: 36px; max-width: 480px; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;">
+      <StorybookComponent
+        v-for="service in services"
+        :key="service"
+        :id="'service-' + service"
+        name="services"
+        type="checkbox"
+        :label="service"
+        :true-value="service"
+        :multiple-options="true"
+        v-model="selected"
+      />
+    </div>
+  `,
+});
+
+export const OptionGroup = OptionGroupTemplate.bind({});

package/app/components/05.forms/input-checkbox-radio/stories/InputCheckboxRadioCore.stories.ts

@@ -0,0 +1,75 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { ref } from "vue";
+import StorybookComponent from "../InputCheckboxRadioCore.vue";
+import type { FormUiTheme } from "~/types/forms/types.forms.d";
+
+interface InputCheckboxRadioCoreStoryArgs {
+  type: "checkbox" | "radio";
+  id: string;
+  name: string;
+  required: boolean;
+  theme: FormUiTheme;
+  fieldHasError: boolean;
+  displayAsDisc: boolean;
+}
+
+export default {
+  title: "Components/Forms/Input Checkbox Radio/InputCheckboxRadioCore",
+  component: StorybookComponent,
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["checkbox", "radio"],
+      description: "Control type",
+      table: { category: "Basic" },
+    },
+    id: { control: "text", table: { category: "Basic" } },
+    name: { control: "text", table: { category: "Basic" } },
+    required: { control: "boolean", table: { category: "Basic" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    fieldHasError: { control: "boolean", table: { category: "States" } },
+    displayAsDisc: {
+      control: "boolean",
+      description: "Checkbox only — render as a filled disc instead of a check icon",
+      table: { category: "Styling" },
+    },
+  },
+  args: {
+    type: "checkbox",
+    id: "core-checkbox",
+    name: "coreCheckbox",
+    required: false,
+    theme: "default",
+    fieldHasError: false,
+    displayAsDisc: false,
+  },
+} as Meta<InputCheckboxRadioCoreStoryArgs>;
+
+const Template: StoryFn<InputCheckboxRadioCoreStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const modelValue = ref(false);
+    return { args, modelValue };
+  },
+  template: `
+    <div style="margin: 36px;">
+      <StorybookComponent v-bind="args" v-model="modelValue" />
+    </div>
+  `,
+});
+
+export const Checkbox = Template.bind({});
+Checkbox.args = { type: "checkbox" };
+
+export const Radio = Template.bind({});
+Radio.args = { type: "radio" };
+
+export const CheckboxAsDisc = Template.bind({});
+CheckboxAsDisc.args = { type: "checkbox", displayAsDisc: true };
+
+export const ErrorState = Template.bind({});
+ErrorState.args = { type: "checkbox", fieldHasError: true, theme: "error" };

package/app/components/05.forms/input-number/CONSUMER-STYLING.md

@@ -0,0 +1,41 @@
+# InputNumberCore — Consumer Styling Guide
+
+## Public token API
+
+Every colour token below is `var(--input-number-*, {default})` — set the `--input-number-*` name
+to override just this component; leave it unset and it inherits the shared `--theme-input-*`/
+`--theme-*` token every other themed component also falls back to. See
+`theming-component-token-pattern.md` for why this two-tier shape exists.
+
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-number-surface` | `var(--theme-input-surface)` | Wrapper and input background |
+| `--input-number-border` | `var(--theme-border)` | Border colour |
+| `--input-number-text-color` | `var(--theme-input-text-color-normal)` | Input text colour |
+| `--input-number-divider-color` | `var(--theme-input-surface-hover)` | Divider between the input and an embedded left/right `InputButtonCore` |
+
+Geometry (`--form-textarea-padding-*`, `--input-font-size`, `--input-element-line-height`, etc.)
+is shared across every `05.forms` component and untouched by this — see
+`theming-form-geometry-tokens.md`.
+
+---
+
+## Global theming — app-level CSS file
+
+```css
+:where(html) {
+  --input-number-surface: var(--rose-09);
+  --input-number-border: var(--rose-05);
+}
+```
+
+Only declare the tokens you want to change — everything else keeps inheriting the shared
+`--theme-input-*`/`--theme-*` tokens.
+
+---
+
+## Per-instance overrides
+
+```vue
+<InputNumberCore id="quantity" name="quantity" :min="1" :max="10" style="--input-number-border: var(--gold-04);" />
+```

package/app/components/05.forms/input-number/InputNumberCore.vue

@@ -66,14 +66,20 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
   --_focus-box-shadow: var(--box-shadow-off);
   --_min-width: v-bind(minLength);
 
+  /* Public --input-number-* tokens, inline-fallback to the shared --theme-* tokens (see
+     theming-component-token-pattern.md) — overriding one here doesn't touch every other themed
+     input/control that also reads --theme-input-surface/--theme-border. */
+  --_surface: var(--input-number-surface, var(--theme-input-surface));
+  --_border: var(--input-number-border, var(--theme-border));
+
   display: flex;
   align-items: center;
 
   width: fit-content;
 
-  background-color: var(--theme-input-surface);
+  background-color: var(--_surface);
   border-radius: var(--form-element-border-width);
-  border: var(--form-element-border-width) solid var(--theme-border);
+  border: var(--form-element-border-width) solid var(--_border);
   outline: var(--form-element-outline-width) solid transparent;
   box-shadow: var(--_focus-box-shadow);
 
@@ -106,8 +112,8 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
     outline: none;
     box-shadow: none;
 
-    background-color: var(--theme-input-surface);
-    color: var(--theme-input-text-color-normal);
+    background-color: var(--_surface);
+    color: var(--input-number-text-color, var(--theme-input-text-color-normal));
     font-family: var(--font-family);
     font-size: var(--input-font-size);
     line-height: var(--input-element-line-height);
@@ -144,12 +150,12 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
 
     .left-slot {
       margin-inline-end: 0;
-      border-right: 2px solid var(--theme-input-surface-hover);
+      border-right: 2px solid var(--input-number-divider-color, var(--theme-input-surface-hover));
     }
 
     .right-slot {
       margin-inline-end: 0;
-      border-left: 2px solid var(--theme-input-surface-hover);
+      border-left: 2px solid var(--input-number-divider-color, var(--theme-input-surface-hover));
     }
   }
 }

package/app/components/05.forms/input-select/CONSUMER-STYLING.md

@@ -1,42 +1,48 @@
 # InputSelectCore — Consumer Styling Guide
 
-## Two override paths
+## Public token API
+
+Every colour token below is `var(--input-select-*, {default})` — set the `--input-select-*` name
+to override just this component; leave it unset and it inherits the shared `--theme-input-*`/
+`--theme-*` token every other themed component also falls back to. See
+`theming-component-token-pattern.md` for why this two-tier shape exists.
+
+(Before 2026-08-25 this component used a private `--_input-select-*` naming scheme presented as a
+"local override path" — that's gone. A private, underscore-prefixed custom property was never a
+real override point; renaming it public with a real fallback is the actual fix, not a second
+documented path to reach for.)
+
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-select-surface` | `var(--theme-input-surface)` | Wrapper/select background |
+| `--input-select-surface-hover` | `var(--theme-input-surface-hover)` | Option row background on hover |
+| `--input-select-border` | `var(--theme-border)` | Border colour (`.normal`/`.underlined`/open picker, resting) |
+| `--input-select-border-hover` | `var(--theme-border-focus)` | Outline colour on hover (mouse) |
+| `--input-select-border-focus` | `var(--theme-border-focus)` | Outline colour on `:focus-visible` (keyboard/assistive) |
+
+Geometry (`--input-padding-*`, `--input-min-height`, `--input-select-option-min-height`,
+`--form-element-*`, etc.) is shared across every `05.forms` component and untouched by this — see
+`theming-form-geometry-tokens.md`.
 
-Same public/private split as `InputTextCore` (see that component's `CONSUMER-STYLING.md` for the
-full rationale) — `.input-select-wrapper` now exposes local tokens, one indirection step below the
-global `--theme-*` ones they default from:
-
-```css
---_input-select-surface: var(--theme-input-surface);
---_input-select-surface-hover: var(--theme-input-surface-hover);
---_input-select-border: var(--theme-border);
---_input-select-border-focus: var(--theme-border-focus);
---_input-select-outline-color: var(--_input-select-border-focus);
-```
+---
 
-- **Global override**: redeclare `--theme-input-surface` / `--theme-border` / `--theme-border-focus`
-  / `--theme-input-surface-hover` wherever you'd normally set theme tokens.
-- **Local override** (this component only, guaranteed to win):
+## Global theming — app-level CSS file
 
 ```css
-.input-select-wrapper {
-  --_input-select-border: var(--slate-06);
-  --_input-select-border-focus: var(--slate-04);
-  --_input-select-surface: var(--slate-01);
+:where(html) {
+  --input-select-surface: var(--rose-09);
+  --input-select-border: var(--rose-05);
+  --input-select-border-focus: var(--rose-03);
 }
 ```
 
-## Note on `--_input-select-outline-color`
-
-Before 2026-08-22 this was referenced (on the open-picker outline) but never declared anywhere —
-a dangling private token that silently resolved to the property's initial value (same failure mode
-as the `--theme-button-surface` typo documented in the layer's `CLAUDE.md`, pitfall list). It's now
-properly defined, defaulting to `--_input-select-border-focus`.
+Only declare the tokens you want to change — everything else keeps inheriting the shared
+`--theme-input-*`/`--theme-*` tokens.
 
 ---
 
-## Other tokens
+## Per-instance overrides
 
-Generic form-geometry tokens (`--input-padding-inline`, `--input-min-height`, `--input-font-size`,
-`--form-element-border-width`, `--form-input-border-radius`, etc.) are shared across every
-`05.forms` component and declared in `setup/04.elements/forms/*.css` — not component-local.
+```vue
+<InputSelectCore id="country" name="country" style="--input-select-border-focus: var(--gold-04);" />
+```

package/app/components/05.forms/input-select/InputSelectCore.vue

@@ -73,17 +73,24 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
 <style lang="css">
 @layer components {
 .input-select-wrapper {
-  /* Local overrides, one indirection step below the global --theme-* tokens they default from —
-     a consumer can target `.input-select-wrapper { --_input-select-border: ...; }` directly for
-     a guaranteed-specific override, instead of relying solely on redefining the global token.
-     See CONSUMER-STYLING.md. */
-  --_input-select-surface: var(--theme-input-surface);
-  --_input-select-surface-hover: var(--theme-input-surface-hover);
-  --_input-select-border: var(--theme-border);
-  --_input-select-border-focus: var(--theme-border-focus);
-  --_input-select-outline-color: var(--_input-select-border-focus);
-
-  background-color: var(--_input-select-surface);
+  /* Public --input-select-* tokens, inline-fallback to the shared --theme-* tokens (see
+     theming-component-token-pattern.md) — overriding one here doesn't touch every other themed
+     input/control that also reads --theme-input-surface/--theme-border. --_surface etc. are
+     private locals purely so the rest of this rule can reuse the resolved value without
+     repeating the fallback chain at every property — they are not themselves an override point,
+     see CONSUMER-STYLING.md. --_outline-color stays private/computed: it's always just an alias
+     for --_border-focus with no independent meaning of its own. */
+  --_surface: var(--input-select-surface, var(--theme-input-surface));
+  --_surface-hover: var(--input-select-surface-hover, var(--theme-input-surface-hover));
+  --_border: var(--input-select-border, var(--theme-border));
+  /* Split so hover (mouse) and :focus-visible (keyboard/assistive) can diverge — both default to
+     the same --theme-border-focus today, identical appearance to before this token existed, but
+     each now has its own override point. */
+  --_border-hover: var(--input-select-border-hover, var(--theme-border-focus));
+  --_border-focus: var(--input-select-border-focus, var(--theme-border-focus));
+  --_outline-color: var(--_border-focus);
+
+  background-color: var(--_surface);
   overflow: hidden;
 
   z-index: 2;
@@ -91,18 +98,23 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
   transition: all var(--theme-form-transition-duration) ease-in-out;
 
   &.normal {
-    border: var(--form-element-border-width) solid var(--_input-select-border);
+    border: var(--form-element-border-width) solid var(--_border);
     border-radius: var(--form-input-border-radius);
     outline: var(--form-element-outline-width) solid transparent;
   }
 
   &.underlined {
-    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_input-select-border);
-    background-color: var(--_input-select-surface);
+    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_border);
+    background-color: var(--_surface);
   }
 
-  &:has(select:focus-visible, :hover) {
-    outline: var(--form-element-outline-width-focus) solid var(--_input-select-border-focus);
+  &:has(:hover) {
+    outline: var(--form-element-outline-width-focus) solid var(--_border-hover);
+    outline-offset: var(--form-element-outline-offset-focus);
+  }
+
+  &:has(select:focus-visible) {
+    outline: var(--form-element-outline-width-focus) solid var(--_border-focus);
     outline-offset: var(--form-element-outline-offset-focus);
   }
 
@@ -117,7 +129,7 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
       content: '';
       width: 0.8em;
       height: 0.5em;
-      background-color: var(--_input-select-border);
+      background-color: var(--_border);
       clip-path: polygon(100% 0%, 0 0%, 50% 100%);
     } */
 
@@ -140,8 +152,8 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
 
     &:open::picker(select) {
       opacity: 1;
-      border: var(--form-element-border-width) solid var(--_input-select-border);
-      outline: var(--form-element-outline-width) solid var(--_input-select-outline-color);
+      border: var(--form-element-border-width) solid var(--_border);
+      outline: var(--form-element-outline-width) solid var(--_outline-color);
 
       @starting-style {
         opacity: 0;
@@ -168,7 +180,7 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
       transition: all var(--theme-form-transition-duration) ease-in-out;
 
       &:hover {
-        background-color: var(--_input-select-surface-hover);
+        background-color: var(--_surface-hover);
       }
 
       .input-select-core-option-decorator-icon {