fix(input): style with sass variable

ovh · Jul 29, 2024 · 0a62bc7 · 0a62bc7
1 parent db68a31
commit 0a62bc7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/packages/ods/src/components/input/src/components/ods-input/ods-input.scss b/packages/ods/src/components/input/src/components/ods-input/ods-input.scss
@@ -1,5 +1,6 @@
+@use '~@ovhcloud/ods-themes/src/default/variables' as theme;
 @use '../../../../../style/focus';
-@import '../../../../../style/input';
+@use '../../../../../style/input';
 
 :host(.ods-input) {
   position: relative;
@@ -10,10 +11,10 @@
     display: inline-flex;
     position: absolute;
     top: 0;
-    right: var(--ods-spacing-4);
+    right: 4px;
     border: none;
     background: none;
-    color: var(--ods-color-primary-500);
+    color: theme.$ods-color-primary-500;
 
     &:focus-visible {
       @include focus.ods-focus();
@@ -27,20 +28,20 @@
   &__input {
     $input: &;
 
-    @include ods-input;
+    @include input.ods-input();
 
     &:not(#{$input}--error) {
       &:focus {
-        border-color: var(--ods-form-element-border-color-focused);
+        border-color: theme.$ods-form-element-border-color-focused;
       }
 
       &:hover {
-        border-color: var(--ods-form-element-border-color-hover);
+        border-color: theme.$ods-form-element-border-color-hover;
       }
     }
 
     &--disabled {
-      background: var(--ods-color-neutral-100);
+      background: theme.$ods-color-neutral-100;
       cursor: not-allowed;
       user-select: none;
 
@@ -50,19 +51,19 @@
     }
 
     &--error {
-      border-color: var(--ods-form-element-border-color-critical);
+      border-color: theme.$ods-form-element-border-color-critical;
     }
   }
 
   &__spinner {
     position: absolute;
     top: 0;
-    right: var(--ods-spacing-4);
-    padding: 0 var(--ods-spacing-4);
+    right: 4px;
+    padding: 0 4px;
 
     &::part(spinner) {
-      width: var(--ods-spacing-16);
-      height: var(--ods-spacing-16);
+      width: 16px;
+      height: 16px;
     }
   }
 }
diff --git a/packages/ods/src/style/_input.scss b/packages/ods/src/style/_input.scss
@@ -1,15 +1,15 @@
+@use '~@ovhcloud/ods-themes/src/default/variables' as theme;
 @use './focus';
 
 @mixin ods-input() {
   box-sizing: border-box;
-  border: var(--ods-border-width-sm) solid var(--ods-form-element-border-color-default);
-  border-radius: var(--ods-border-radius-sm);
+  border: theme.$ods-border-width-sm solid theme.$ods-form-element-border-color-default;
+  border-radius: theme.$ods-border-radius-sm;
   cursor: text;
-  padding: var(--ods-spacing-4) var(--ods-spacing-8);
+  padding: 4px 8px;
   width: 100%;
-  height: var(--ods-spacing-32);
+  height: 32px;
   line-height: 16px;
-  font-family: var(--ods-font-family-default);
   font-size: 16px;
 
   &:focus {