styling changes from design review

hey-car · Jun 1, 2023 · d0ee6db · d0ee6db
1 parent ae47e77
commit d0ee6db
Show file tree

Hide file tree

Showing 19 changed files with 12 additions and 6 deletions.
diff --git a/...ted Buttons screenshots Interactivity states Icons button active state-snap.png b/...ted Buttons screenshots Interactivity states Icons button active state-snap.png
diff --git a/...ns screenshots Interactivity states Icons button disabled active state-snap.png b/...ns screenshots Interactivity states Icons button disabled active state-snap.png
diff --git a/...ons screenshots Interactivity states Icons button disabled hover state-snap.png b/...ons screenshots Interactivity states Icons button disabled hover state-snap.png
diff --git a/...nted Buttons screenshots Interactivity states Icons button hover state-snap.png b/...nted Buttons screenshots Interactivity states Icons button hover state-snap.png
diff --git a/...ns screenshots Interactivity states Icons button selected active state-snap.png b/...ns screenshots Interactivity states Icons button selected active state-snap.png
diff --git a/...ons screenshots Interactivity states Icons button selected hover state-snap.png b/...ons screenshots Interactivity states Icons button selected hover state-snap.png
diff --git a/...ented Buttons screenshots Standard view Icons Renders buttons disabled-snap.png b/...ented Buttons screenshots Standard view Icons Renders buttons disabled-snap.png
diff --git a/...tons screenshots Standard view Icons Renders buttons with one selected-snap.png b/...tons screenshots Standard view Icons Renders buttons with one selected-snap.png
diff --git a/...ts__/Segmented Buttons screenshots Standard view Icons Renders buttons-snap.png b/...ts__/Segmented Buttons screenshots Standard view Icons Renders buttons-snap.png
diff --git a/...ed Buttons screenshots Standard view No icons Renders buttons disabled-snap.png b/...ed Buttons screenshots Standard view No icons Renders buttons disabled-snap.png
diff --git a/...s screenshots Standard view No icons Renders buttons with one selected-snap.png b/...s screenshots Standard view No icons Renders buttons with one selected-snap.png
diff --git a/..._/Segmented Buttons screenshots Standard view No icons Renders buttons-snap.png b/..._/Segmented Buttons screenshots Standard view No icons Renders buttons-snap.png
diff --git a/...Segmented Buttons screenshots Wide view Icons Renders buttons disabled-snap.png b/...Segmented Buttons screenshots Wide view Icons Renders buttons disabled-snap.png
diff --git a/... Buttons screenshots Wide view Icons Renders buttons with one selected-snap.png b/... Buttons screenshots Wide view Icons Renders buttons with one selected-snap.png
diff --git a/...pshots__/Segmented Buttons screenshots Wide view Icons Renders buttons-snap.png b/...pshots__/Segmented Buttons screenshots Wide view Icons Renders buttons-snap.png
diff --git a/...mented Buttons screenshots Wide view No icons Renders buttons disabled-snap.png b/...mented Buttons screenshots Wide view No icons Renders buttons disabled-snap.png
diff --git a/...ttons screenshots Wide view No icons Renders buttons with one selected-snap.png b/...ttons screenshots Wide view No icons Renders buttons with one selected-snap.png
diff --git a/...ots__/Segmented Buttons screenshots Wide view No icons Renders buttons-snap.png b/...ots__/Segmented Buttons screenshots Wide view No icons Renders buttons-snap.png
diff --git a/packages/segmented-buttons/src/styles/default.module.css b/packages/segmented-buttons/src/styles/default.module.css
@@ -13,14 +13,20 @@
     align-items: center;
     padding: 0 var(--spacing-3);
     width: auto;
-    height: 46px;
+    height: 48px;
     border: solid 1px var(--color-neutral-300);
+    border-right-width: 0 !important;
     background: #fff;
     color: var(--color-neutral-700);
+    font-size: 16px;
     cursor: pointer;
 
+    &:last-child {
+      border-right-width: 1px !important;
+    }
+
     & > svg {
-      margin-right: 10px;
+      margin-right: var(--spacing-2);
     }
 
     &:hover,
@@ -33,23 +39,23 @@
     }
 
     &[aria-checked='true'] {
-      border: solid 1px var(--color-primary-500);
+      border-color: var(--color-primary-500);
       outline: solid 2px var(--color-primary-500);
       outline-offset: -2px;
       background: var(--color-primary-50);
       color: var(--color-primary-500);
 
       &:hover,
       &:focus {
-        border: solid 1px var(--color-primary-600);
+        border-color: var(--color-primary-600);
         outline: solid 2px var(--color-primary-600);
         outline-offset: -2px;
         background: var(--color-primary-100);
         color: var(--color-primary-600);
       }
 
       &:active {
-        border: solid 1px var(--color-primary-700);
+        border-color: var(--color-primary-700);
         outline: solid 2px var(--color-primary-700);
         outline-offset: -2px;
         background: var(--color-primary-100);
@@ -59,7 +65,7 @@
 
     &:disabled {
       background: #fff !important;
-      border: solid 1px var(--color-neutral-300) !important;
+      border-color: var(--color-neutral-300) !important;
       color: var(--color-neutral-300) !important;
       outline: none;
       cursor: not-allowed;