use button border radius token for button and segmented control

shopware · Aug 27, 2024 · bebea2e · bebea2e
1 parent e644cef
commit bebea2e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/yellow-deers-join.md b/.changeset/yellow-deers-join.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Use button border radius token for buttons and segmented control
diff --git a/packages/component-library/src/components/form/mt-button/mt-button.vue b/packages/component-library/src/components/form/mt-button/mt-button.vue
@@ -153,7 +153,7 @@ $mt-button-transition: all 0.15s ease-out;
   color: $color-darkgray-200;
   transition: $mt-button-transition;
   display: inline-block;
-  border-radius: var(--border-radius-xs);
+  border-radius: var(--border-radius-button);
   padding: 2px 24px;
   font-size: var(--font-size-xs);
   line-height: 34px;

diff --git a/...component-library/src/components/navigation/mt-segmented-control/mt-segmented-control.vue b/...component-library/src/components/navigation/mt-segmented-control/mt-segmented-control.vue
@@ -214,7 +214,7 @@ export default defineComponent({
   width: max-content;
   background-color: var(--color-elevation-surface-overlay);
   border: 1px solid var(--color-border-primary-default);
-  border-radius: var(--border-radius-xs);
+  border-radius: var(--border-radius-button);
   padding: 2px;
 
   .mt-floating-ui {
@@ -232,7 +232,7 @@ export default defineComponent({
     position: relative;
     cursor: pointer;
     border: none;
-    border-radius: var(--border-radius-xs);
+    border-radius: var(--border-radius-button);
     padding: 6px 12px;
     font-family: var(--font-family-body);
     font-size: var(--font-size-2xs);
@@ -351,7 +351,7 @@ export default defineComponent({
     gap: 0;
 
     .mt-floating-ui .mt-segmented-control__action {
-      border-radius: 0;
+      border-radius: var(--border-radius-none);
       border-right: 1px solid var(--color-border-primary-default);
     }