tweak inputs size

sumup-oss · Oct 17, 2024 · ba481ef · ba481ef
1 parent 137a817
commit ba481ef
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 40 deletions.
diff --git a/.changeset/tasty-pugs-sort.md b/.changeset/tasty-pugs-sort.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": patch
+---
+
+Restored the height of the Input, Select, Tag and SelectorGroup components.
diff --git a/packages/circuit-ui/components/Input/Input.module.css b/packages/circuit-ui/components/Input/Input.module.css
@@ -10,25 +10,23 @@
   line-height: var(--cui-body-m-line-height);
   appearance: none;
   background-color: var(--cui-bg-normal);
-  border: none;
+  border: 1px solid var(--cui-border-normal);
   border-radius: var(--cui-border-radius-byte);
   outline: 0;
-  box-shadow: 0 0 0 1px var(--cui-border-normal);
+  box-shadow: none;
   transition:
     box-shadow var(--cui-transitions-default),
+    border var(--cui-transitions-default),
     padding var(--cui-transitions-default);
 }
 
 .base:hover {
-  box-shadow: 0 0 0 1px var(--cui-border-normal-hovered);
+  border: 1px solid var(--cui-border-normal-hovered);
 }
 
 .base:focus {
-  box-shadow: 0 0 0 2px var(--cui-border-accent);
-}
-
-.base:active {
-  box-shadow: 0 0 0 1px var(--cui-border-accent);
+  border: 1px solid var(--cui-border-accent);
+  box-shadow: inset 0 0 0 1px var(--cui-border-accent);
 }
 
 .base::placeholder {
@@ -43,39 +41,33 @@
 /* Validations */
 
 .base[aria-invalid="true"] {
-  box-shadow: 0 0 0 1px var(--cui-border-danger);
+  border: 1px solid var(--cui-border-danger);
 }
 
 .base[aria-invalid="true"]:hover {
-  box-shadow: 0 0 0 1px var(--cui-border-danger-hovered);
+  border: 1px solid var(--cui-border-danger-hovered);
 }
 
 .base[aria-invalid="true"]:focus {
-  box-shadow: 0 0 0 2px var(--cui-border-danger);
-}
-
-.base[aria-invalid="true"]:active {
-  box-shadow: 0 0 0 1px var(--cui-border-danger-pressed);
+  border: 1px solid var(--cui-border-danger);
+  box-shadow: inset 0 0 0 1px var(--cui-border-danger);
 }
 
 .base[aria-invalid="true"]:not(:focus):not([disabled])::placeholder {
   color: var(--cui-fg-danger);
 }
 
 .warning {
-  box-shadow: 0 0 0 1px var(--cui-border-warning);
+  border: 1px solid var(--cui-border-warning);
 }
 
 .warning:hover {
-  box-shadow: 0 0 0 1px var(--cui-border-warning-hovered);
+  border: 1px solid var(--cui-border-warning-hovered);
 }
 
 .warning:focus {
-  box-shadow: 0 0 0 2px var(--cui-border-warning);
-}
-
-.warning:active {
-  box-shadow: 0 0 0 1px var(--cui-border-warning-pressed);
+  border: 1px solid var(--cui-border-warning);
+  box-shadow: inset 0 0 0 1px var(--cui-border-warning);
 }
 
 .warning:not(:focus):not([disabled])::placeholder {
@@ -88,7 +80,7 @@
 .base[disabled] {
   color: var(--cui-fg-normal-disabled);
   background-color: var(--cui-bg-normal-disabled);
-  box-shadow: 0 0 0 1px var(--cui-border-normal-disabled);
+  border: 1px solid var(--cui-border-normal-disabled);
 }
 
 .base[readonly] {

diff --git a/packages/circuit-ui/components/Select/Select.module.css b/packages/circuit-ui/components/Select/Select.module.css
@@ -22,26 +22,23 @@
   appearance: none;
   cursor: pointer;
   background-color: var(--cui-bg-normal);
-  border: 0;
+  border: 1px solid var(--cui-border-normal);
   border-radius: var(--cui-border-radius-byte);
   outline: none;
   box-shadow: none;
-  box-shadow: 0 0 0 1px var(--cui-border-normal);
   transition:
     box-shadow var(--cui-transitions-default),
+    border var(--cui-transitions-default),
     padding var(--cui-transitions-default);
 }
 
 .base:hover {
-  box-shadow: 0 0 0 1px var(--cui-border-normal-hovered);
+  border: 1px solid var(--cui-border-normal-hovered);
 }
 
 .base:focus {
-  box-shadow: 0 0 0 2px var(--cui-border-accent);
-}
-
-.base:active {
-  box-shadow: 0 0 0 1px var(--cui-border-accent);
+  border: 1px solid var(--cui-border-accent);
+  box-shadow: inset 0 0 0 1px var(--cui-border-accent);
 }
 
 .base::-ms-expand {
@@ -51,26 +48,23 @@
 /* Validations */
 
 .base[aria-invalid="true"] {
-  box-shadow: 0 0 0 1px var(--cui-border-danger);
+  border: 1px solid var(--cui-border-danger);
 }
 
 .base[aria-invalid="true"]:hover {
-  box-shadow: 0 0 0 1px var(--cui-border-danger-hovered);
+  border: 1px solid var(--cui-border-danger-hovered);
 }
 
 .base[aria-invalid="true"]:focus {
-  box-shadow: 0 0 0 2px var(--cui-border-danger);
-}
-
-.base[aria-invalid="true"]:active {
-  box-shadow: 0 0 0 1px var(--cui-border-danger-pressed);
+  border: 1px solid var(--cui-border-danger);
+  box-shadow: inset 0 0 0 1px var(--cui-border-danger);
 }
 
 .base:disabled,
 .base[disabled] {
   color: var(--cui-fg-normal-disabled);
   background-color: var(--cui-bg-normal-disabled);
-  box-shadow: 0 0 0 1px var(--cui-border-normal-disabled);
+  border: 1px solid var(--cui-border-normal-disabled);
 }
 
 .has-prefix {

diff --git a/packages/circuit-ui/components/Selector/Selector.module.css b/packages/circuit-ui/components/Selector/Selector.module.css
@@ -56,6 +56,8 @@
   align-items: center;
   justify-content: center;
   height: 100%;
+  margin-top: var(--cui-border-width-kilo);
+  margin-bottom: var(--cui-border-width-kilo);
   color: var(--cui-fg-normal);
   text-align: center;
   white-space: nowrap;

diff --git a/packages/circuit-ui/components/Tag/Tag.module.css b/packages/circuit-ui/components/Tag/Tag.module.css
@@ -8,7 +8,7 @@
 .content {
   display: inline-flex;
   align-items: center;
-  padding: calc(var(--cui-spacings-bit) - 1px) var(--cui-spacings-kilo);
+  padding: var(--cui-spacings-bit) var(--cui-spacings-kilo);
   margin: 0;
   font-size: var(--cui-body-m-font-size);
   line-height: var(--cui-body-m-line-height);