Merge pull request #186 from element-hq/florianduros/input-review

Update radio, input and checkbox according to figma design

package.json

@@ -72,7 +72,7 @@
     "@types/react": "^18.2.21",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
-    "@vector-im/compound-design-tokens": "^1.2.0",
+    "@vector-im/compound-design-tokens": "^1.3.0",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.34.4",
     "browserslist-to-esbuild": "^1.2.0",

src/components/Form/Controls/Checkbox/Checkbox.module.css

@@ -57,8 +57,8 @@ limitations under the License.
 
 .input:checked + .ui {
   color: var(--cpd-color-icon-on-solid-primary);
-  background-color: var(--cpd-color-bg-action-primary-rest);
-  border-color: var(--cpd-color-bg-action-primary-rest);
+  background-color: var(--cpd-color-bg-accent-rest);
+  border-color: var(--cpd-color-bg-accent-rest);
 }
 
 .input:focus-visible + .ui {
@@ -92,15 +92,15 @@ limitations under the License.
 @media (hover) {
   .input:not([disabled], [readonly], :checked):hover + .ui {
     color: var(--cpd-color-icon-quaternary);
-    border-color: var(--cpd-color-border-interactive-hovered);
+    border-color: var(--cpd-color-bg-accent-hovered);
 
     /** TODO: have the shadow in the design tokens */
     box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
   }
 
   .input:not([disabled], [readonly]):checked:hover + .ui {
-    border-color: var(--cpd-color-bg-action-primary-hovered);
-    background: var(--cpd-color-bg-action-primary-hovered);
+    border-color: var(--cpd-color-bg-accent-hovered);
+    background: var(--cpd-color-bg-accent-hovered);
   }
 
   .input[data-invalid]:not([disabled], [readonly]):checked:hover + .ui {

src/components/Form/Controls/Radio/Radio.module.css

@@ -58,8 +58,8 @@ limitations under the License.
 }
 
 .input:checked + .ui {
-  background-color: var(--cpd-color-bg-action-primary-rest);
-  border-color: var(--cpd-color-bg-action-primary-rest);
+  background-color: var(--cpd-color-bg-accent-rest);
+  border-color: var(--cpd-color-bg-accent-rest);
 }
 
 .input:checked + .ui::after {
@@ -96,7 +96,7 @@ limitations under the License.
 
 @media (hover) {
   .input:not([disabled], [readonly], :checked):hover + .ui {
-    border-color: var(--cpd-color-border-interactive-hovered);
+    border-color: var(--cpd-color-bg-accent-hovered);
 
     /** TODO: have the shadow in the design tokens */
     box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
@@ -107,8 +107,8 @@ limitations under the License.
   }
 
   .input:not([disabled], [readonly]):checked:hover + .ui {
-    border-color: var(--cpd-color-bg-action-primary-hovered);
-    background: var(--cpd-color-bg-action-primary-hovered);
+    border-color: var(--cpd-color-bg-accent-hovered);
+    background: var(--cpd-color-bg-accent-hovered);
   }
 
   .input[data-invalid]:not([disabled], [readonly]):checked:hover + .ui {

src/components/Form/Controls/Toggle/Toggle.module.css

@@ -52,8 +52,8 @@ limitations under the License.
 }
 
 .input:checked + .ui {
-  background: var(--cpd-color-bg-action-primary-rest);
-  border-color: var(--cpd-color-bg-action-primary-rest);
+  background: var(--cpd-color-bg-accent-rest);
+  border-color: var(--cpd-color-bg-accent-rest);
 }
 
 .ui::after {
@@ -62,7 +62,7 @@ limitations under the License.
   block-size: 100%;
   aspect-ratio: 1 / 1;
   border-radius: 50%;
-  background: var(--cpd-color-bg-action-primary-rest);
+  background: var(--cpd-color-icon-secondary);
   transform: translateX(0);
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
@@ -83,14 +83,14 @@ ring after a simple click */
 
 @media (hover) {
   :checked:not([disabled]):hover + .ui {
-    background: var(--cpd-color-bg-action-primary-hovered);
-    border-color: var(--cpd-color-bg-action-primary-hovered);
+    background: var(--cpd-color-bg-accent-hovered);
+    border-color: var(--cpd-color-bg-accent-hovered);
   }
 }
 
 :checked:active + .ui {
-  background: var(--cpd-color-bg-action-primary-hovered);
-  border-color: var(--cpd-color-bg-action-primary-hovered);
+  background: var(--cpd-color-bg-accent-hovered);
+  border-color: var(--cpd-color-bg-accent-hovered);
 }
 
 .input[readonly] {

src/components/Form/form.module.css

@@ -40,7 +40,7 @@ limitations under the License.
 .inline-field {
   display: flex;
   flex-direction: row;
-  gap: var(--cpd-space-5x);
+  gap: var(--cpd-space-2x);
 }
 
 .inline-field-body {

yarn.lock

@@ -3571,10 +3571,10 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
-"@vector-im/compound-design-tokens@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-1.2.0.tgz#ccb15fffc24cc70d83593bfc5348e6a0198cc08a"
-  integrity sha512-8LSbb38KxvStcOQZDSi7lI4oqtCuHFEgEQi9Q0KUx+5OnklfdyJ638txM1bznX/Cp9lHgMk4dHrTiQHBOE0ZuA==
+"@vector-im/compound-design-tokens@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-1.3.0.tgz#1d04f006a9e56b920432095d08d7c84c0933ebc7"
+  integrity sha512-RXcyEAdxNzekMhVuvxtLPt9zb6yT2N+5cnb2Hul9zwRiF7+XEHpD36+IF6V0QOXk2pkN0wOr3jCvc9eOWOq9SQ==
   dependencies:
     svg2vectordrawable "^2.9.1"
 
@@ -7909,8 +7909,7 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-"prettier-fallback@npm:prettier@^3", prettier@^3.1.1:
-  name prettier-fallback
+"prettier-fallback@npm:prettier@^3":
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
   integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
@@ -7927,6 +7926,11 @@ prettier@3.0.3:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
   integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==
 
+prettier@^3.1.1:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
+  integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
+
 pretty-format@^27.0.2:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"