Merge branch 'master' into feature/OR-142

packages/components/src/input/src/Input.css

@@ -1,19 +1,21 @@
 .o-ui {
-    --o-ui-input-padding: var(--o-ui-sp-3);
+    --o-ui-input-padding: var(--hop-space-inset-squish-md);
     --o-ui-input-padding-with-icon: var(--o-ui-sp-7);
     --o-ui-input-padding-with-button: var(--o-ui-sp-8);
     --o-ui-input-padding-loading: var(--o-ui-sp-8);
-    --o-ui-input-border-color: var(--o-ui-b-alias-mid-break);
-    --o-ui-input-border-radius: var(--o-ui-br-2);
-    --o-ui-input-background-color: var(--o-ui-bg-alias-mid-break);
+    --o-ui-input-border-color: var(--hop-neutral-border);
+    --o-ui-input-border-radius: var(--hop-shape-rounded-md);
+    --o-ui-input-background-color: var(--hop-neutral-surface);
 }
 
 .o-ui-input {
     display: inline-flex;
     position: relative;
     transition: var(--o-ui-focus-ring-transition);
-    color: var(--o-ui-text-alias-primary);
-    width: var(--o-ui-sz-16);
+    color: var(--hop-neutral-text);
+    font-family: var(--hop-body-md-font-family);
+    font-size: var(--hop-body-md-font-size);
+    width: 20rem;
     align-items: center;
 }
 
@@ -25,8 +27,8 @@
     border: none;
     width: 100%;
     background-color: inherit;
-    color: inherit;
-    min-height: calc(var(--o-ui-sz-6) - 2px);
+    color: var(--hop-neutral-text);
+    min-height: calc(2.5rem - 2px);
     margin: 0;
     padding: 0;
 }
@@ -47,7 +49,7 @@
 .o-ui-text-input,
 .o-ui-text-area textarea,
 .o-ui-number-input {
-    font-size: var(--o-ui-fs-3);
+    font-size: var(--hop-body-sm-font-size);
     padding: 0;
     border-radius: var(--o-ui-input-border-radius);
     border: 1px solid var(--o-ui-input-border-color);
@@ -60,7 +62,7 @@
 .o-ui-text-input input,
 .o-ui-text-area textarea,
 .o-ui-number-input input {
-    padding: 0 var(--o-ui-input-padding);
+    padding: var(--o-ui-input-padding);
 }
 
 .o-ui-text-input input,
@@ -96,26 +98,27 @@
 .o-ui-input input:-webkit-autofill,
 .o-ui-input textarea:-webkit-autofill {
     -webkit-box-shadow: 0 0 0 1000px var(--o-ui-bg-alias-accent-faint) inset !important;
-    -webkit-text-fill-color: var(--o-ui-text-alias-primary) !important;
+    -webkit-text-fill-color: var(--hop-neutral-text) !important;
 }
 
 /* STATE | HOVER */
 .o-ui-input:not(.o-ui-input-focus):not(.o-ui-input-disabled):hover,
 .o-ui-input:not(.o-ui-input-focus):hover textarea:not(:disabled) {
-    border-color: var(--o-ui-b-alias-high-break);
+    border-color: var(--hop-neutral-border-hover);
+    background-color: var(--hop-neutral-surface-hover);
 }
 
 /* PLACEHOLDER */
 .o-ui-input input::placeholder,
 .o-ui-input textarea::placeholder {
-    color: var(--o-ui-text-alias-input-placeholder);
+    color: var(--hop-neutral-text-weakest);
     opacity: 1;
-    font-size: var(--o-ui-fs-3);
+    font-size: var(--hop-body-md-font-size);
 }
 
 .o-ui-input-disabled input::placeholder,
 .o-ui-input textarea:disabled::placeholder {
-    color: var(--o-ui-text-alias-secondary);
+    color: var(--hop-neutral-text-disabled);
 }
 
 /* FLUID */
@@ -126,19 +129,19 @@
 /* INVALID */
 .o-ui-input-invalid:not(.o-ui-input-disabled),
 .o-ui-input-invalid:not(.o-ui-input-disabled) textarea {
-    --o-ui-input-border-color: var(--o-ui-b-alias-alert);
+    --o-ui-input-border-color: var(--hop-danger-border-strong);
 }
 
 /* INVALID | DISABLED */
 .o-ui-input-invalid.o-ui-input-disabled,
 .o-ui-input-invalid.o-ui-text-area textarea:disabled {
-    background-color: var(--o-ui-bg-alias-alert-light);
-    --o-ui-input-border-color: var(--o-ui-bg-alias-alert-light);
+    background-color: var(--hop-neutral-border-disabled);
+    --o-ui-input-border-color: var(--hop-neutral-surface-disabled);
 }
 
 .o-ui-input.o-ui-input-invalid:not(.o-ui-text-area):focus-within,
 .o-ui-input-focus.o-ui-input-invalid {
-    box-shadow: var(--o-ui-focus-ring-inset-md);
+    box-shadow: 0 0 0 0.12rem var(--hop-neutral-surface), 0 0 0 0.219rem var(--hop-primary-border-focus);
 }
 
 /* STATE | HOVER | INVALID */
@@ -154,6 +157,7 @@
     flex-shrink: 0;
     margin-right: 0.5rem;
     margin-left: 0.5rem;
+    color: var(--hop-neutral-icon);
 }
 
 /* ICON | MEDIUM */
@@ -164,7 +168,6 @@
 /* BUTTON | INPUT */
 .o-ui-text-input .o-ui-input-button,
 .o-ui-number-input .o-ui-input-button {
-    position: inline-flex !important;
     display: flex;
     text-align: center;
     margin-right: .625rem;
@@ -182,17 +185,22 @@
 .o-ui-number-input:not(.o-ui-input-disabled):focus-within,
 .o-ui-text-area:not(.o-ui-input-disabled).o-ui-input-has-focus textarea,
 .o-ui-input-focus:not(.o-ui-input-disabled):not(.o-ui-has-button-disabled) {
-    box-shadow: var(--o-ui-focus-ring-inset-md) !important;
+    box-shadow: 0 0 0 0.12rem var(--hop-neutral-surface), 0 0 0 0.219rem var(--hop-primary-border-focus);
     outline: transparent;
 }
 
 /* STATES | DISABLED */
 .o-ui-text-input.o-ui-input-disabled,
 .o-ui-number-input.o-ui-input-disabled,
 .o-ui-input textarea:disabled {
-    opacity: var(--o-ui-disabled-opacity);
-    background-color: var(--o-ui-input-background-color);
+    background-color: var(--hop-neutral-surface-disabled);
     cursor: not-allowed;
+    --o-ui-input-border-color: var(--hop-neutral-border-disabled);
+}
+
+/* STATES | ACTIVE */
+.o-ui-text-input.o-ui-input-has-active {
+    --o-ui-input-border-color: var(--hop-neutral-border-active);
 }
 
 .o-ui-input-disabled > * {
@@ -223,4 +231,4 @@
 .o-ui-number-input.o-ui-input-loading,
 .o-ui-text-area.o-ui-input-loading textarea {
     padding-right: var(--o-ui-input-padding-loading);
-}
+}

packages/components/src/input/src/index.ts

@@ -2,6 +2,7 @@ export * from "./useGroupInput";
 export * from "./useInput";
 export * from "./useInputContent";
 export * from "./useInputHasFocus";
+export * from "./useInputHasActive";
 export * from "./adaptInputStylingProps";
 export * from "./types";
 

packages/components/src/input/src/useInputHasActive.ts

@@ -0,0 +1,18 @@
+import { useEventCallback } from "../../shared";
+import { useState } from "react";
+
+export function useInputHasActive() {
+    const [hasActive, setHasActive] = useState(false);
+
+    return {
+        hasActive,
+        inputProps: {
+            onBlur: useEventCallback(() => {
+                setHasActive(false);
+            }),
+            onFocus: useEventCallback(() => {
+                setHasActive(true);
+            })
+        }
+    };
+}

packages/components/src/styling/src/styled-system/props-handler.ts

@@ -229,24 +229,37 @@ const BackgroundColorAliases = {
     "decorative-option1-weakest": "decorative-option1-surface-weakest",
     "decorative-option1-weak": "decorative-option1-surface-weak",
     "decorative-option2-hover": "decorative-option2-surface-hover",
+    "decorative-option2-strong": "decorative-option2-surface-strong",
+    "decorative-option2-weakest": "decorative-option2-surface-weakest",
     "decorative-option2-weak": "decorative-option2-surface-weak",
     "decorative-option3-hover": "decorative-option3-surface-hover",
     "decorative-option3-strong": "decorative-option3-surface-strong",
     "decorative-option3-weakest": "decorative-option3-surface-weakest",
     "decorative-option3-weak": "decorative-option3-surface-weak",
     "decorative-option4-hover": "decorative-option4-surface-hover",
     "decorative-option4-strong": "decorative-option4-surface-strong",
+    "decorative-option4-weakest": "decorative-option4-surface-weakest",
+    "decorative-option4-weak": "decorative-option4-surface-weak",
     "decorative-option6-strong": "decorative-option6-surface-strong",
     "decorative-option6-hover": "decorative-option6-surface-hover",
+    "decorative-option6-weakest": "decorative-option6-surface-weakest",
     "decorative-option6-weak": "decorative-option6-surface-weak",
     "decorative-option5-hover": "decorative-option5-surface-hover",
     "decorative-option5-strong": "decorative-option5-surface-strong",
+    "decorative-option5-weakest": "decorative-option5-surface-weakest",
+    "decorative-option5-weak": "decorative-option5-surface-weak",
     "decorative-option7-hover": "decorative-option7-surface-hover",
     "decorative-option7-strong": "decorative-option7-surface-strong",
-    "decorative-option8-strong": "decorative-option8-surface-strong",
+    "decorative-option7-weakest": "decorative-option7-surface-weakest",
+    "decorative-option7-weak": "decorative-option7-surface-weak",
     "decorative-option8-hover": "decorative-option8-surface-hover",
+    "decorative-option8-strong": "decorative-option8-surface-strong",
+    "decorative-option8-weakest": "decorative-option8-surface-weakest",
+    "decorative-option8-weak": "decorative-option8-surface-weak",
     "decorative-option9-hover": "decorative-option9-surface-hover",
     "decorative-option9-strong": "decorative-option9-surface-strong",
+    "decorative-option9-weakest": "decorative-option9-surface-weakest",
+    "decorative-option9-weak": "decorative-option9-surface-weak",
     "primary-active": "primary-surface-active",
     "primary-hover": "primary-surface-hover",
     "primary-strong-hover": "primary-surface-strong-hover",

packages/components/src/styling/src/theming/hopper-theme.css

@@ -456,7 +456,7 @@
     --hop-neutral-text-hover: var(--hop-rock-700);
     --hop-decorative-option1-text: var(--hop-sapphire-900);
     --hop-decorative-option1-icon: var(--hop-sapphire-900);
-    --hop-decorative-option1-text-weak: var(--hop-sapphire-50);
+    --hop-decorative-option1-text-weak: var(--hop-sapphire-300);
     --hop-decorative-option1-border: var(--hop-sapphire-100);
     --hop-decorative-option1-surface: var(--hop-sapphire-100);
     --hop-decorative-option1-surface-hover: var(--hop-sapphire-200);
@@ -465,13 +465,15 @@
     --hop-decorative-option1-surface-weak: var(--hop-sapphire-50);
     --hop-decorative-option2-border: var(--hop-quetzal-100);
     --hop-decorative-option2-icon: var(--hop-quetzal-900);
-    --hop-decorative-option2-text-weak: var(--hop-quetzal-50);
+    --hop-decorative-option2-text-weak: var(--hop-quetzal-300);
     --hop-decorative-option2-text: var(--hop-quetzal-900);
     --hop-decorative-option2-surface-hover: var(--hop-quetzal-100);
     --hop-decorative-option2-surface: var(--hop-quetzal-75);
-    --hop-decorative-option2-surface-weak: var(--hop-quetzal-100);
+    --hop-decorative-option2-surface-strong: var(--hop-quetzal-100);
+    --hop-decorative-option2-surface-weak: var(--hop-quetzal-50);
+    --hop-decorative-option2-surface-weakest: var(--hop-quetzal-25);
     --hop-decorative-option3-border: var(--hop-koi-100);
-    --hop-decorative-option3-text-weak: var(--hop-koi-50);
+    --hop-decorative-option3-text-weak: var(--hop-koi-300);
     --hop-decorative-option3-text: var(--hop-koi-900);
     --hop-decorative-option3-icon: var(--hop-koi-900);
     --hop-decorative-option3-surface: var(--hop-koi-200);
@@ -486,6 +488,8 @@
     --hop-decorative-option4-surface: var(--hop-moss-75);
     --hop-decorative-option4-surface-hover: var(--hop-moss-100);
     --hop-decorative-option4-surface-strong: var(--hop-moss-100);
+    --hop-decorative-option4-surface-weak: var(--hop-moss-50);
+    --hop-decorative-option4-surface-weakest: var(--hop-moss-25);
     --hop-decorative-option6-border: var(--hop-sunken-treasure-100);
     --hop-decorative-option6-text-weak: var(--hop-sunken-treasure-200);
     --hop-decorative-option6-text: var(--hop-sunken-treasure-900);
@@ -494,30 +498,39 @@
     --hop-decorative-option6-surface-strong: var(--hop-sunken-treasure-100);
     --hop-decorative-option6-surface-hover: var(--hop-sunken-treasure-100);
     --hop-decorative-option6-surface-weak: var(--hop-sunken-treasure-50);
+    --hop-decorative-option6-surface-weakest: var(--hop-sunken-treasure-25);
     --hop-decorative-option5-border: var(--hop-coastal-100);
     --hop-decorative-option5-icon: var(--hop-coastal-900);
     --hop-decorative-option5-surface: var(--hop-coastal-75);
     --hop-decorative-option5-surface-hover: var(--hop-coastal-100);
     --hop-decorative-option5-surface-strong: var(--hop-coastal-100);
+    --hop-decorative-option5-surface-weak: var(--hop-coastal-50);
+    --hop-decorative-option5-surface-weakest: var(--hop-coastal-25);
     --hop-decorative-option5-text: var(--hop-coastal-900);
-    --hop-decorative-option5-text-weak: var(--hop-coastal-50);
+    --hop-decorative-option5-text-weak: var(--hop-coastal-300);
     --hop-decorative-option7-border: var(--hop-toad-100);
     --hop-decorative-option7-text: var(--hop-toad-900);
     --hop-decorative-option7-text-weak: var(--hop-toad-500);
     --hop-decorative-option7-surface: var(--hop-toad-75);
     --hop-decorative-option7-surface-hover: var(--hop-toad-75);
     --hop-decorative-option7-surface-strong: var(--hop-toad-75);
+    --hop-decorative-option7-surface-weak: var(--hop-toad-50);
+    --hop-decorative-option7-surface-weakest: var(--hop-toad-25);
     --hop-decorative-option7-icon: var(--hop-toad-900);
     --hop-decorative-option8-border: var(--hop-amanita-100);
     --hop-decorative-option8-text: var(--hop-amanita-900);
     --hop-decorative-option8-surface: var(--hop-amanita-100);
     --hop-decorative-option8-text-weak: var(--hop-amanita-300);
     --hop-decorative-option8-surface-strong: var(--hop-amanita-100);
     --hop-decorative-option8-surface-hover: var(--hop-amanita-200);
+    --hop-decorative-option8-surface-weak: var(--hop-amanita-50);
+    --hop-decorative-option8-surface-weakest: var(--hop-amanita-25);
     --hop-decorative-option8-icon: var(--hop-amanita-900);
     --hop-decorative-option9-border: var(--hop-rock-100);
-    --hop-decorative-option9-text-weak: var(--hop-rock-50);
+    --hop-decorative-option9-text-weak: var(--hop-rock-300);
     --hop-decorative-option9-text: var(--hop-samoyed);
+    --hop-decorative-option9-surface-weakest: var(--hop-rock-25);
+    --hop-decorative-option9-surface-weak: var(--hop-rock-50);
     --hop-decorative-option9-surface-hover: var(--hop-rock-500);
     --hop-decorative-option9-surface-strong: var(--hop-rock-800);
     --hop-decorative-option9-surface: var(--hop-rock-400);
@@ -654,40 +667,51 @@
     --hop-primary-surface-active: var(--hop-sapphire-800);
     --hop-decorative-option9-border: var(--hop-rock-400);
     --hop-decorative-option9-icon: var(--hop-samoyed);
+    --hop-decorative-option9-surface-weakest: var(--hop-rock-25);
+    --hop-decorative-option9-surface-weak: var(--hop-rock-50);
     --hop-decorative-option9-surface-strong: var(--hop-rock-800);
     --hop-decorative-option9-surface-hover: var(--hop-rock-500);
     --hop-decorative-option9-surface: var(--hop-rock-400);
     --hop-decorative-option9-text: var(--hop-samoyed);
-    --hop-decorative-option9-text-weak: var(--hop-rock-50);
+    --hop-decorative-option9-text-weak: var(--hop-rock-300);
     --hop-decorative-option8-border: var(--hop-amanita-400);
     --hop-decorative-option8-icon: var(--hop-amanita-900);
+    --hop-decorative-option8-surface-weakest: var(--hop-amanita-25);
+    --hop-decorative-option8-surface-weak: var(--hop-amanita-50);
     --hop-decorative-option8-surface-strong: var(--hop-amanita-100);
     --hop-decorative-option8-surface-hover: var(--hop-amanita-200);
     --hop-decorative-option8-text-weak: var(--hop-amanita-300);
     --hop-decorative-option8-surface: var(--hop-amanita-100);
     --hop-decorative-option8-text: var(--hop-amanita-900);
     --hop-decorative-option7-border: var(--hop-toad-400);
     --hop-decorative-option7-icon: var(--hop-toad-900);
+    --hop-decorative-option7-surface-weakest: var(--hop-toad-25);
+    --hop-decorative-option7-surface-weak: var(--hop-toad-50);
     --hop-decorative-option7-surface-strong: var(--hop-toad-75);
     --hop-decorative-option7-surface-hover: var(--hop-toad-75);
     --hop-decorative-option7-surface: var(--hop-toad-50);
     --hop-decorative-option7-text-weak: var(--hop-toad-500);
     --hop-decorative-option7-text: var(--hop-toad-900);
-    --hop-decorative-option5-text-weak: var(--hop-coastal-50);
+    --hop-decorative-option5-text-weak: var(--hop-coastal-300);
     --hop-decorative-option5-text: var(--hop-coastal-900);
+    --hop-decorative-option5-surface-weakest: var(--hop-coastal-25);
+    --hop-decorative-option5-surface-weak: var(--hop-coastal-50);
     --hop-decorative-option5-surface-strong: var(--hop-coastal-100);
     --hop-decorative-option5-surface-hover: var(--hop-coastal-100);
     --hop-decorative-option5-surface: var(--hop-coastal-75);
     --hop-decorative-option5-border: var(--hop-coastal-400);
     --hop-decorative-option5-icon: var(--hop-coastal-900);
-    --hop-decorative-option6-surface-weak: var(--hop-sunken-treasure-25);
+    --hop-decorative-option6-surface-weakest: var(--hop-sunken-treasure-25);
+    --hop-decorative-option6-surface-weak: var(--hop-sunken-treasure-50);
     --hop-decorative-option6-surface-strong: var(--hop-sunken-treasure-100);
     --hop-decorative-option6-surface-hover: var(--hop-sunken-treasure-100);
     --hop-decorative-option6-surface: var(--hop-sunken-treasure-75);
     --hop-decorative-option6-border: var(--hop-sunken-treasure-400);
     --hop-decorative-option6-icon: var(--hop-sunken-treasure-900);
     --hop-decorative-option6-text: var(--hop-sunken-treasure-900);
     --hop-decorative-option6-text-weak: var(--hop-sunken-treasure-200);
+    --hop-decorative-option4-surface-weakest: var(--hop-moss-25);
+    --hop-decorative-option4-surface-weak: var(--hop-moss-50);
     --hop-decorative-option4-surface-strong: var(--hop-moss-100);
     --hop-decorative-option4-surface-hover: var(--hop-moss-100);
     --hop-decorative-option4-surface: var(--hop-moss-75);
@@ -703,20 +727,22 @@
     --hop-decorative-option3-border: var(--hop-koi-400);
     --hop-decorative-option3-icon: var(--hop-koi-900);
     --hop-decorative-option3-text: var(--hop-koi-900);
-    --hop-decorative-option3-text-weak: var(--hop-koi-50);
+    --hop-decorative-option3-text-weak: var(--hop-koi-300);
+    --hop-decorative-option2-surface-weakest: var(--hop-quetzal-25);
+    --hop-decorative-option2-surface-weak: var(--hop-quetzal-50);
     --hop-decorative-option2-surface-strong: var(--hop-quetzal-100);
     --hop-decorative-option2-surface-hover: var(--hop-quetzal-100);
     --hop-decorative-option2-surface: var(--hop-quetzal-75);
     --hop-decorative-option2-text: var(--hop-quetzal-900);
-    --hop-decorative-option2-text-weak: var(--hop-quetzal-50);
+    --hop-decorative-option2-text-weak: var(--hop-quetzal-300);
     --hop-decorative-option2-border: var(--hop-quetzal-400);
     --hop-decorative-option2-icon: var(--hop-quetzal-900);
     --hop-decorative-option1-surface-strong: var(--hop-sapphire-200);
     --hop-decorative-option1-surface-weakest: var(--hop-sapphire-25);
     --hop-decorative-option1-surface-weak: var(--hop-sapphire-50);
     --hop-decorative-option1-surface-hover: var(--hop-sapphire-200);
     --hop-decorative-option1-surface: var(--hop-sapphire-100);
-    --hop-decorative-option1-text-weak: var(--hop-sapphire-50);
+    --hop-decorative-option1-text-weak: var(--hop-sapphire-300);
     --hop-decorative-option1-border: var(--hop-sapphire-400);
     --hop-decorative-option1-icon: var(--hop-sapphire-900);
     --hop-decorative-option1-text: var(--hop-sapphire-900);