🎨(react) enhance Input component styles

update Input token and css files with new css variables introduce
with the new tokens architectures

packages/react/src/components/Forms/Input/InputPassword.tsx

@@ -8,29 +8,27 @@ export const InputPassword = (props: Omit<InputProps, "rightIcon">) => {
   const { className, ...otherProps } = props;
   const customClassName = "c__input--password";
   const { t } = useCunningham();
+
   return (
     <Input
       {...otherProps}
-      className={className + " " + customClassName}
+      className={`${className} ${customClassName}`}
       type={showPassword ? "text" : "password"}
       rightIcon={
-        showPassword ? (
-          <Button
-            onClick={() => setShowPassword(false)}
-            icon={<span className="material-icons">visibility_off</span>}
-            color="tertiary-text"
-            size="small"
-            aria-label={t("components.forms.input.password.hide_password")}
-          />
-        ) : (
-          <Button
-            onClick={() => setShowPassword(true)}
-            icon={<span className="material-icons">visibility</span>}
-            color="tertiary-text"
-            size="small"
-            aria-label={t("components.forms.input.password.show_password")}
-          />
-        )
+        <Button
+          onClick={() => setShowPassword(!showPassword)}
+          icon={
+            <span className="material-icons">
+              {showPassword ? "visibility_off" : "visibility"}
+            </span>
+          }
+          color="tertiary"
+          variant="neutral"
+          size="small"
+          aria-label={t(
+            `components.forms.input.password.${showPassword ? "hide" : "show"}_password`
+          )}
+        />
       }
     />
   );

packages/react/src/components/Forms/Input/_index.scss

@@ -5,7 +5,11 @@
   border-style: var(--c--components--forms-input--border-style);
   background-color: var(--c--components--forms-input--background-color);
   display: flex;
-  transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out), border-radius var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+  transition:
+    border var(--c--globals--transitions--duration)
+      var(--c--globals--transitions--ease-out),
+    border-radius var(--c--globals--transitions--duration)
+      var(--c--globals--transitions--ease-out);
   padding: 0 1rem;
   gap: 1rem;
   cursor: text;
@@ -25,7 +29,7 @@
     flex-grow: 1;
     text-overflow: ellipsis;
     background-color: transparent;
-    font-family: var(--c--theme--font--families--base);
+    font-family: var(--c--globals--font--families--base);
     @extend %text-style;
 
     &__icon-left,
@@ -34,12 +38,13 @@
       align-items: center;
     }
 
-    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
       -webkit-appearance: none;
       margin: 0;
     }
 
-    &[type=number] {
+    &[type="number"] {
       -moz-appearance: textfield;
     }
 
@@ -54,21 +59,28 @@
 
   label {
     position: absolute;
-    font-size: var(--c--theme--font--sizes--s);
+    font-size: var(--c--globals--font--sizes--s);
     left: 0;
     top: 0.75rem;
-    transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
-    color: var(--c--theme--colors--greyscale-600);
+    transition: all var(--c--globals--transitions--duration)
+      var(--c--globals--transitions--ease-out);
+    color: var(--c--components--forms-input--label-color);
 
     &.placeholder {
+      color: var(--c--components--forms-input--placeholder-color) !important;
       @extend %text-style;
       top: 18px;
     }
   }
 
   &:hover {
-    border-radius: var(--c--components--forms-input--border-radius--hover);
-    border-color: var(--c--components--forms-input--border-color--hover);
+    &:not(.c__input__wrapper--disabled) {
+      border-radius: var(--c--components--forms-input--border-radius--hover);
+      border-color: var(--c--components--forms-input--border-color--hover);
+
+      box-shadow: 0 0 0 1px
+        var(--c--components--forms-input--border-color--hover);
+    }
   }
 
   /** Modifiers. */
@@ -78,8 +90,11 @@
   }
 
   &:focus-within {
+    box-shadow: 0 0 0 1px var(--c--components--forms-input--border-color--focus) !important;
     border-radius: var(--c--components--forms-input--border-radius--focus);
-    border-color: var(--c--components--forms-input--border-color--focus) !important;
+    border-color: var(
+      --c--components--forms-input--border-color--focus
+    ) !important;
 
     label {
       color: var(--c--components--forms-input--label-color--focus);
@@ -88,46 +103,47 @@
 
   &--disabled {
     cursor: default;
-    border-color: var(--c--theme--colors--greyscale-200);
+    border-color: var(--c--contextuals--border--semantic--neutral--tertiary);
 
     .c__input {
       color: var(--c--components--forms-input--value-color--disabled);
     }
 
     &:hover {
-      border-color: var(--c--theme--colors--greyscale-200);
+      border-color: var(--c--contextuals--border--semantic--neutral--tertiary);
     }
   }
 
   &--success {
-    border-color: var(--c--theme--colors--success-600);
+    border-color: var(--c--contextuals--border--semantic--success--primary);
 
     .labelled-box label {
-      color: var(--c--theme--colors--success-600);
+      color: var(--c--contextuals--border--semantic--success--primary);
     }
 
     &:not(.c__input__wrapper--disabled) {
       &:hover {
-        border-color: var(--c--theme--colors--success-800);
-        color: var(--c--theme--colors--success-800);
+        border-color: var(--c--contextuals--border--semantic--success--primary);
+        color: var(--c--contextuals--content--semantic--success--primary);
 
         .labelled-box label {
-          color: var(--c--theme--colors--success-800);
+          color: var(--c--contextuals--content--semantic--success--primary);
         }
       }
     }
   }
 
   &--error {
-    border-color: var(--c--theme--colors--danger-600);
+    border-color: var(--c--contextuals--border--semantic--error--secondary);
 
     &:not(.c__input__wrapper--disabled) {
       &:hover {
-        border-color: var(--c--theme--colors--danger-800);
-        color: var(--c--theme--colors--danger-800);
+        // border-color: var(--c--contextuals--border--semantic--error--primary);
+        // color: var(--c--contextuals--content--semantic--error--primary);
+        // box-shadow: 0 0 0 1px var(--c--contextuals--border--semantic--error--primary);
 
         label {
-          color: var(--c--theme--colors--danger-800);
+          // color: var(--c--contextuals--content--semantic--error--primary);
         }
       }
     }
@@ -139,4 +155,3 @@
     font-size: 1.5rem;
   }
 }
-

packages/react/src/components/Forms/Input/index.spec.tsx

@@ -232,6 +232,7 @@ describe("<Input/>", () => {
       text: "my text",
       textItems: ["my text item 1", "my text item 2"],
       rightText: "my right text",
+      disabled: false,
     };
 
     render(<Input {...propsInput} />);

packages/react/src/components/Forms/Input/index.stories.tsx

@@ -163,7 +163,7 @@ export const Controlled = () => {
   const [value, setValue] = React.useState("I am controlled");
   return (
     <div>
-      <div className="clr-greyscale-900">
+      <div className="clr-gray-900">
         Value: <span>{value}</span>
       </div>
       <Input
@@ -259,7 +259,7 @@ export const ReactHookForm = () => {
       mode: "onChange",
       reValidateMode: "onChange",
       resolver: yupResolver(inputExampleSchema),
-    },
+    }
   );
 
   return (

packages/react/src/components/Forms/Input/tokens.ts

@@ -1,18 +1,22 @@
 import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => ({
-  "font-weight": defaults.theme.font.weights.regular,
-  "font-size": defaults.theme.font.sizes.l,
+  "font-weight": defaults.globals.font.weights.regular,
+  "font-size": defaults.globals.font.sizes.md,
   "border-radius": "8px",
-  "border-radius--hover": "2px",
-  "border-radius--focus": "2px",
+  "border-radius--hover": "4px",
+  "border-radius--focus": "4px",
   "border-width": "1px",
-  "border-color": defaults.theme.colors["greyscale-300"],
-  "border-color--hover": defaults.theme.colors["greyscale-500"],
-  "border-color--focus": defaults.theme.colors["primary-600"],
+  "border-width--hover": "1px",
+  "border-width--focus": "1px",
+  "border-color": defaults.contextuals.border.semantic.neutral.tertiary,
+  "border-color--hover": defaults.contextuals.border.semantic.neutral.tertiary,
+  "border-color--focus": defaults.contextuals.border.semantic.brand.primary,
   "border-style": "solid",
-  "label-color--focus": defaults.theme.colors["primary-600"],
-  "background-color": defaults.theme.colors["greyscale-000"],
-  "value-color": defaults.theme.colors["greyscale-900"],
-  "value-color--disabled": defaults.theme.colors["greyscale-800"],
+  "placeholder-color": defaults.contextuals.content.semantic.neutral.tertiary,
+  "label-color": defaults.contextuals.content.semantic.neutral.tertiary,
+  "label-color--focus": defaults.contextuals.content.semantic.brand.primary,
+  "background-color": defaults.contextuals.background.surface.secondary,
+  "value-color": defaults.contextuals.content.semantic.neutral.primary,
+  "value-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
 });