fix(input): update styles to the latest (#391) (#393)

fix #391

docs/components/input-segments.md

@@ -165,7 +165,7 @@ interface Props {
 
 type Color =
   | 'neutral' 
-  | 'mute' 
+  | 'mute'
   | 'info' 
   | 'success' 
   | 'warning' 
@@ -197,8 +197,9 @@ interface Option<T extends string | number | boolean> {
 }
 
 type Mode =
-  | 'neutral'
+  | 'default'
   | 'mute'
+  | 'neutral'
   | 'info'
   | 'success'
   | 'warning'
@@ -388,26 +389,4 @@ You may customize the various styles of the component via global input related C
 
 ### Button styles
 
-Each option styles shares the style of `<SButton>`. Here are the list of all available variables. Note that `neutral` mode of `<SInputSegments>` uses `mute` variant of `<SButton>`.
-
-```css
-  --button-fill-mute-border-color: var(--c-divider-1);
-  --button-fill-mute-text-color: var(--c-text-1);
-  --button-fill-mute-bg-color: var(--c-mute);
-
-  --button-fill-info-border-color: var(--c-info-light);
-  --button-fill-info-text-color: var(--c-text-dark-1);
-  --button-fill-info-bg-color: var(--c-info-bg);
-
-  --button-fill-success-border-color: var(--c-success-light);
-  --button-fill-success-text-color: var(--c-text-dark-1);
-  --button-fill-success-bg-color: var(--c-success-bg);
-
-  --button-fill-warning-border-color: var(--c-warning-light);
-  --button-fill-warning-text-color: var(--c-text-dark-1);
-  --button-fill-warning-bg-color: var(--c-warning-bg);
-
-  --button-fill-danger-border-color: var(--c-danger-light);
-  --button-fill-danger-text-color: var(--c-text-dark-1);
-  --button-fill-danger-bg-color: var(--c-danger-bg);
-```
+Each option styles shares the style of [`<SButton>`](button#styles). Refer to the component docs for available CSS variables.

lib/components/SInputBase.vue

@@ -190,7 +190,7 @@ function getErrorMsg(validation: Validatable) {
 .help-text {
   max-width: 65ch;
   margin: 0;
-  padding: 4px 0 0;
+  padding: 6px 0 0;
   line-height: 20px;
   font-size: 12px;
   font-weight: 400;

lib/components/SInputDate.vue

@@ -162,6 +162,14 @@ function emitBlur() {
     color: var(--input-placeholder-color);
   }
 
+  &:hover {
+    border-color: var(--input-hover-border-color);
+  }
+
+  &:focus {
+    border-color: var(--input-focus-border-color);
+  }
+
   &.disabled {
     border-color: var(--input-disabled-border-color);
     background-color: var(--input-disabled-bg-color);

lib/components/SInputDropdown.vue

@@ -195,7 +195,7 @@ function handleArray(value: OptionValue) {
   .box-content {
     padding: 3px 30px 3px 12px;
     line-height: 24px;
-    font-size: 14px;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 
   .box-icon {
@@ -212,7 +212,7 @@ function handleArray(value: OptionValue) {
   .box-content {
     padding: 5px 30px 5px 8px;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-small-font-size));
   }
 
   .box-icon {
@@ -229,7 +229,7 @@ function handleArray(value: OptionValue) {
   .box-content {
     padding: 11px 44px 11px 16px;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 
   .box-icon {
@@ -255,7 +255,7 @@ function handleArray(value: OptionValue) {
 
 .SInputDropdown.has-error {
   .box {
-    border-color: var(--c-danger);
+    border-color: var(--input-error-border-color);
   }
 }
 
@@ -265,37 +265,22 @@ function handleArray(value: OptionValue) {
 
 .box {
   position: relative;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--input-border-color);
   border-radius: 6px;
   width: 100%;
   color: var(--input-text);
-  background-color: var(--c-bg);
+  background-color: var(--input-bg-color);;
   cursor: pointer;
-  transition: border-color .25s, background-color .25s;
+  transition: border-color 0.25s, background-color 0.25s;
 
   &:hover {
-    border-color: var(--c-black);
-  }
-
-  &:focus,
-  &:hover.focus {
-    border-color: var(--c-info);
-  }
-
-  .dark &:hover {
-    border-color: var(--c-gray);
-  }
-
-  .dark &:focus,
-  .dark &:hover:focus {
-    border-color: var(--c-info);
+    border-color: var(--input-hover-border-color);
   }
 }
 
 .box-placeholder {
   padding: 2px 4px;
-  font-weight: 500;
-  color: var(--c-text-3);
+  color: var(--input-placeholder-color);
   overflow: hidden;
   white-space: nowrap;
 }

lib/components/SInputFile.vue

@@ -130,7 +130,7 @@ function onChange(e: Event) {
   .button {
     padding: 0 8px;
     line-height: 26px;
-    font-size: 13px;
+    font-size: 12px;
     font-weight: 500;
   }
 
@@ -150,7 +150,7 @@ function onChange(e: Event) {
   .button {
     padding: 0 12px;
     line-height: 30px;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
   }
 
@@ -184,18 +184,23 @@ function onChange(e: Event) {
   &:hover {
     border-color: var(--input-hover-border-color);
   }
+
+  &:hover .button {
+    border-color: var(--c-border-mute-2);
+    background-color: var(--c-bg-mute-2);
+  }
 }
 
 .action {
   flex-shrink: 0;
 }
 
 .button {
-  border: 1px solid var(--c-divider);
-  border-radius: 4px;
+  border: 1px solid var(--c-border-mute-1);
+  border-radius: 3px;
   color: var(--c-text-1);
-  background-color: var(--c-mute);
-  transition: background-color 0.25s;
+  background-color: var(--c-bg-mute-1);
+  transition: border-color 0.25s, background-color 0.25s;
 }
 
 .text {

lib/components/SInputHMS.vue

@@ -307,7 +307,8 @@ function createRequiredTouched(): boolean[] {
 }
 
 .input {
-  font-family: var(--input-value-font-family, var(--font-family-number));
+  font-family: var(--input-value-font-family, var(--font-family-base));
+  font-feature-settings: "tnum";
   line-height: 24px;
   background-color: transparent;
 

lib/components/SInputSegments.vue

@@ -6,7 +6,8 @@ import SInputBase from './SInputBase.vue'
 import SInputSegmentsOption, { type Mode } from './SInputSegmentsOption.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type Color = 'default' | 'mute' | 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 export interface Option<T extends string | number | boolean> {
   label: string
@@ -24,7 +25,7 @@ const props = defineProps<{
   help?: string
   checkIcon?: IconifyIcon
   checkText?: string
-  checkColor?: Color
+  checkColor?: CheckColor
   options: Option<T>[]
   block?: boolean
   disabled?: boolean
@@ -78,7 +79,7 @@ function onSelect(value: T) {
         :size="size ?? 'small'"
         :label="option.label"
         :value="option.value"
-        :mode="option.mode ?? 'neutral'"
+        :mode="option.mode ?? 'default'"
         :active="_value === option.value"
         :disabled="disabled ? true : option.disabled ?? false"
         @click="onSelect(option.value)"

lib/components/SInputSegmentsOption.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T extends string | number | boolean">
 export type Size = 'mini' | 'small' | 'medium'
-export type Mode = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type Mode = 'default' | 'mute' | 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
   size: Size
@@ -67,7 +67,7 @@ function onClick() {
     width: 1px;
     height: 16px;
     border-radius: 4px;
-    background-color: var(--c-divider-2);
+    background-color: var(--c-divider);
     content: "";
     transition: opacity 0.25s;
   }
@@ -108,18 +108,24 @@ function onClick() {
   }
 }
 
-.SInputSegmentsOption.neutral.active {
-  border-color: var(--button-fill-mute-border-color);
-  color: var(--button-fill-mute-text-color);
-  background-color: var(--button-fill-mute-bg-color);
+.SInputSegmentsOption.default.active {
+  border-color: var(--button-fill-default-border-color);
+  color: var(--button-fill-default-text-color);
+  background-color: var(--button-fill-default-bg-color);
 }
 
 .SInputSegmentsOption.mute.active {
   border-color: var(--button-fill-mute-border-color);
-  color: var(--c-text-2);
+  color: var(--button-fill-mute-text-color);
   background-color: var(--button-fill-mute-bg-color);
 }
 
+.SInputSegmentsOption.neutral.active {
+  border-color: var(--button-fill-neutral-border-color);
+  color: var(--button-fill-neutral-text-color);
+  background-color: var(--button-fill-neutral-bg-color);
+}
+
 .SInputSegmentsOption.info.active {
   border-color: var(--button-fill-info-border-color);
   color: var(--button-fill-info-text-color);

lib/components/SInputYMD.vue

@@ -304,7 +304,7 @@ function createRequiredTouched(): boolean[] {
 
 .input {
   line-height: 24px;
-  font-family: var(--input-value-font-family, var(--font-family-number));
+  font-family: var(--input-value-font-family, var(--font-family-base));
   font-feature-settings: "tnum";
   background-color: transparent;
 

stories/components/SInputSegments.02_Modes.story.vue

@@ -6,15 +6,16 @@ const title = 'Components / SInputSegments / 02. Modes'
 const docs = '/components/input-segments'
 
 const options = [
-  { label: 'Neutral', value: 'neutral', mode: 'neutral' } as const,
+  { label: 'Default', value: 'default', mode: 'default' } as const,
   { label: 'Mute', value: 'mute', mode: 'mute' } as const,
+  { label: 'Neutral', value: 'neutral', mode: 'neutral' } as const,
   { label: 'Info', value: 'info', mode: 'info' } as const,
   { label: 'Success', value: 'success', mode: 'success' } as const,
   { label: 'Warning', value: 'warning', mode: 'warning' } as const,
   { label: 'Danger', value: 'danger', mode: 'danger' } as const
 ]
 
-const value = ref('neutral')
+const value = ref('default')
 </script>
 
 <template>