add semantic border radius token for checkbox

shopware · Aug 29, 2024 · 1321454 · 1321454
1 parent f75b143
commit 1321454
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 24 deletions.
diff --git a/.changeset/polite-pugs-explode.md b/.changeset/polite-pugs-explode.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Add semantic border radius token for checkbox
diff --git a/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue b/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue
@@ -234,48 +234,48 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style>
 .mt-field--checkbox__container {
-  .mt-field--checkbox {
+  & .mt-field--checkbox {
     margin-bottom: 22px;
 
-    .mt-inheritance-switch {
+    & .mt-inheritance-switch {
       &.mt-field__inheritance-icon {
         display: flex;
         justify-content: center;
         align-items: center;
       }
     }
 
-    .mt-field--checkbox__content {
+    & .mt-field--checkbox__content {
       display: grid;
       grid-template-columns: 16px 1fr;
       align-items: center;
     }
 
-    .mt-field {
+    & .mt-field {
       margin-bottom: 0;
 
-      .mt-block-field__block {
+      & .mt-block-field__block {
         border: none;
       }
     }
 
-    .mt-field--default {
+    & .mt-field--default {
       display: flex;
     }
 
-    .mt-field__label {
+    & .mt-field__label {
       margin-bottom: 0;
       margin-left: 4px;
     }
 
-    .mt-field__checkbox {
+    & .mt-field__checkbox {
       width: 16px;
       height: 16px;
       position: relative;
 
-      input[type="checkbox"] {
+      & input[type="checkbox"] {
         opacity: 0;
         display: block;
         width: 100%;
@@ -302,7 +302,7 @@ export default defineComponent({
           background: var(--color-interaction-primary-default);
           border-color: var(--color-interaction-primary-default);
 
-          .mt-icon {
+          & .mt-icon {
             display: flex;
             justify-content: center;
             align-items: center;
@@ -314,7 +314,7 @@ export default defineComponent({
           background: var(--color-background-primary-disabled);
           border-color: var(--color-border-primary-default);
 
-          .mt-icon {
+          & .mt-icon {
             color: var(--color-border-primary-default);
           }
         }
@@ -323,14 +323,14 @@ export default defineComponent({
           background-color: var(--color-interaction-primary-default);
           border: 1px solid var(--color-interaction-primary-default);
 
-          .mt-icon {
+          & .mt-icon {
             display: inline-block;
             color: var(--color-icon-static-default);
           }
         }
       }
 
-      .mt-field__checkbox-state {
+      & .mt-field__checkbox-state {
         position: absolute;
         width: 100%;
         height: 100%;
@@ -339,12 +339,12 @@ export default defineComponent({
         background: var(--color-background-primary-default);
         color: var(--color-text-primary-default);
         border: 1px solid var(--color-border-primary-default);
-        border-radius: 4px;
+        border-radius: var(--border-radius-checkbox);
         display: flex;
         justify-content: center;
         align-items: center;
 
-        .mt-icon {
+        & .mt-icon {
           display: none;
           color: var(--color-background-primary-default);
         }
@@ -354,19 +354,17 @@ export default defineComponent({
     &.has--error {
       margin-bottom: 0;
 
-      .mt-field__checkbox-state {
+      & .mt-field__checkbox-state {
         border: 1px solid var(--color-interaction-critical-default);
       }
 
-      .mt-field__label {
+      & .mt-field__label {
         color: var(--color-text-critical-default);
       }
 
-      input[type="checkbox"] {
+      & input[type="checkbox"] {
         &:disabled ~ .mt-field__checkbox-state {
-          border:
-            1px solid var(--color-interaction-critical-default),
-            5%;
+          border: 1px solid var(--color-interaction-critical-default);
         }
 
         &:checked ~ .mt-field__checkbox-state {
@@ -381,7 +379,7 @@ export default defineComponent({
     }
 
     &.is--inherited {
-      input[type="checkbox"] {
+      & input[type="checkbox"] {
         &:checked ~ .mt-field__checkbox-state {
           border-color: var(--color-border-primary-default);
           background: var(--color-background-primary-disabled);
@@ -400,7 +398,7 @@ export default defineComponent({
     }
   }
 
-  .mt-field__error {
+  & .mt-field__error {
     margin-bottom: 14px;
 
     &.checkbox-bordered {