feat: border-radius tokens (#65)

* refactor: implement pin mixin * refactor: set button pin default * feat: new border-radius tokens
gravity-ui · Jan 27, 2022 · d73c8ee · d73c8ee
1 parent c3128c8
commit d73c8ee
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 178 deletions.
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -1,4 +1,5 @@
 @import '../variables';
+@import '../../../styles/mixins';
 
 $block: '.#{$ns}button';
 
@@ -17,25 +18,20 @@ $block: '.#{$ns}button';
 }
 
 #{$block} {
+    @include button-reset();
     display: inline-block;
     position: relative;
     overflow: visible;
     box-sizing: border-box;
-    margin: 0;
-    padding: 0;
     font-family: var(--yc-font-family);
     font-weight: normal;
     user-select: none;
     text-align: center;
     white-space: nowrap;
     text-decoration: none;
     background: transparent;
-    outline: none;
-    border: none;
-    border-radius: 4px;
     touch-action: manipulation;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    cursor: pointer;
     transition: transform 0.1s ease-out, color 0.15s linear;
     transform: scale(1);
 
@@ -47,7 +43,6 @@ $block: '.#{$ns}button';
         left: 0;
         right: 0;
         bottom: 0;
-        border-radius: 4px;
         transition: background-color 0.15s linear;
     }
 
@@ -59,7 +54,6 @@ $block: '.#{$ns}button';
         left: 0;
         right: 0;
         bottom: 0;
-        border-radius: 4px;
     }
 
     &:focus::after {
@@ -96,6 +90,8 @@ $block: '.#{$ns}button';
                     margin-right: 22px;
                 }
             }
+
+            --yc-button-border-radius: var(--yc-border-radius-s);
         }
 
         &_m {
@@ -118,6 +114,8 @@ $block: '.#{$ns}button';
                     margin-right: 25px;
                 }
             }
+
+            --yc-button-border-radius: var(--yc-border-radius-m);
         }
 
         &_l {
@@ -140,6 +138,8 @@ $block: '.#{$ns}button';
                     margin-right: 33px;
                 }
             }
+
+            --yc-button-border-radius: var(--yc-border-radius-l);
         }
 
         &_xl {
@@ -162,6 +162,8 @@ $block: '.#{$ns}button';
                     margin-right: 40px;
                 }
             }
+
+            --yc-button-border-radius: var(--yc-border-radius-xl);
         }
     }
 
@@ -395,110 +397,7 @@ $block: '.#{$ns}button';
         }
     }
 
-    &_pin {
-        &_round-round {
-            // default
-        }
-
-        &_brick-brick {
-            &::before,
-            &::after {
-                border-radius: 0;
-            }
-        }
-
-        &_clear-clear {
-            &::before,
-            &::after {
-                border-radius: 0;
-                border-left: 0;
-                border-right: 0;
-            }
-        }
-
-        &_circle-circle {
-            &::before,
-            &::after {
-                border-radius: 100px;
-            }
-        }
-
-        &_round-brick {
-            &::before,
-            &::after {
-                border-radius: 4px 0 0 4px;
-            }
-        }
-
-        &_brick-round {
-            &::before,
-            &::after {
-                border-radius: 0 4px 4px 0;
-            }
-        }
-
-        &_round-clear {
-            &::before,
-            &::after {
-                border-radius: 4px 0 0 4px;
-                border-right: 0;
-            }
-        }
-
-        &_clear-round {
-            &::before,
-            &::after {
-                border-radius: 0 4px 4px 0;
-                border-left: 0;
-            }
-        }
-
-        &_brick-clear {
-            &::before,
-            &::after {
-                border-radius: 0;
-                border-right: 0;
-            }
-        }
-
-        &_clear-brick {
-            &::before,
-            &::after {
-                border-radius: 0;
-                border-left: 0;
-            }
-        }
-
-        &_circle-brick {
-            &::before,
-            &::after {
-                border-radius: 100px 0 0 100px;
-            }
-        }
-
-        &_brick-circle {
-            &::before,
-            &::after {
-                border-radius: 0 100px 100px 0;
-            }
-        }
-
-        &_circle-clear {
-            &::before,
-            &::after {
-                border-radius: 100px 0 0 100px;
-                border-right: 0;
-            }
-        }
-
-        &_clear-circle {
-            &::before,
-            &::after {
-                border-radius: 0 100px 100px 0;
-                border-left: 0;
-            }
-        }
-    }
+    @include pin($block, ('::before', '::after'), var(--yc-button-border-radius));
 
     &__text {
         display: inline-block;

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -74,7 +74,7 @@ const PureButton = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, Butto
         {
             view = 'normal',
             size = 'm',
-            pin,
+            pin = 'round-round',
             selected = false,
             disabled = false,
             loading = false,

diff --git a/src/components/RadioButton/RadioButton.scss b/src/components/RadioButton/RadioButton.scss
@@ -1,4 +1,5 @@
 @import '../variables';
+@import '../../../styles/mixins';
 
 $block: '.#{$ns}radio-button';
 
@@ -8,10 +9,12 @@ $block: '.#{$ns}radio-button';
     flex-direction: row;
     font-family: var(--yc-font-family);
     font-weight: normal;
-    border-radius: 4px;
+    border-radius: var(--yc-radio-button-border-radius);
     background-color: var(--yc-color-base-generic);
     position: relative;
 
+    --yc-radio-button-inner-border-radius: calc(var(--yc-radio-button-border-radius) - 3px);
+
     &__plate {
         position: absolute;
         top: 0;
@@ -27,7 +30,7 @@ $block: '.#{$ns}radio-button';
         flex: 1 1 auto;
         user-select: none;
         text-align: center;
-        border-radius: 2px;
+        border-radius: var(--yc-radio-button-inner-border-radius);
         cursor: pointer;
         transform: scale(1);
         transition: color 0.15s linear;
@@ -40,7 +43,7 @@ $block: '.#{$ns}radio-button';
             left: 3px;
             right: 3px;
             bottom: 3px;
-            border-radius: 2px;
+            border-radius: var(--yc-radio-button-inner-border-radius);
         }
 
         &-control {
@@ -99,7 +102,7 @@ $block: '.#{$ns}radio-button';
         left: 3px;
         right: 3px;
         bottom: 3px;
-        border-radius: 2px;
+        border-radius: var(--yc-radio-button-inner-border-radius);
     }
 
     &__option::before {
@@ -124,6 +127,8 @@ $block: '.#{$ns}radio-button';
                     margin: 0 10px;
                 }
             }
+
+            --yc-radio-button-border-radius: var(--yc-border-radius-s);
         }
 
         &_m {
@@ -136,6 +141,8 @@ $block: '.#{$ns}radio-button';
                     margin: 0 13px;
                 }
             }
+
+            --yc-radio-button-border-radius: var(--yc-border-radius-m);
         }
 
         &_l {
@@ -148,6 +155,8 @@ $block: '.#{$ns}radio-button';
                     margin: 0 18px;
                 }
             }
+
+            --yc-radio-button-border-radius: var(--yc-border-radius-l);
         }
 
         &_xl {
@@ -160,6 +169,8 @@ $block: '.#{$ns}radio-button';
                     margin: 0 25px;
                 }
             }
+
+            --yc-radio-button-border-radius: var(--yc-border-radius-xl);
         }
     }
 

diff --git a/src/components/TextInput/TextInput.scss b/src/components/TextInput/TextInput.scss
@@ -1,4 +1,5 @@
 @import '../variables';
+@import '../../../styles/mixins';
 
 $block: '.#{$ns}text-input';
 
@@ -89,6 +90,8 @@ $block: '.#{$ns}text-input';
             #{$block}__clear {
                 height: 24px;
             }
+
+            --yc-text-input-border-radius: var(--yc-border-radius-s);
         }
 
         &_m {
@@ -102,6 +105,8 @@ $block: '.#{$ns}text-input';
             #{$block}__clear {
                 height: 28px;
             }
+
+            --yc-text-input-border-radius: var(--yc-border-radius-m);
         }
 
         &_l {
@@ -115,6 +120,8 @@ $block: '.#{$ns}text-input';
             #{$block}__clear {
                 height: 36px;
             }
+
+            --yc-text-input-border-radius: var(--yc-border-radius-l);
         }
 
         &_xl {
@@ -128,6 +135,8 @@ $block: '.#{$ns}text-input';
             #{$block}__clear {
                 height: 44px;
             }
+
+            --yc-text-input-border-radius: var(--yc-border-radius-xl);
         }
     }
 
@@ -159,67 +168,7 @@ $block: '.#{$ns}text-input';
         }
     }
 
-    &_pin {
-        &_round-round {
-            #{$block}__control {
-                border-radius: 3px;
-            }
-        }
-
-        &_brick-brick {
-            #{$block}__control {
-                border-radius: 0;
-            }
-        }
-
-        &_clear-clear {
-            #{$block}__control {
-                border-radius: 0;
-                border-left: 0;
-                border-right: 0;
-            }
-        }
-
-        &_round-brick {
-            #{$block}__control {
-                border-radius: 3px 0 0 3px;
-            }
-        }
-
-        &_brick-round {
-            #{$block}__control {
-                border-radius: 0 3px 3px 0;
-            }
-        }
-
-        &_round-clear {
-            #{$block}__control {
-                border-radius: 3px 0 0 3px;
-                border-right: 0;
-            }
-        }
-
-        &_clear-round {
-            #{$block}__control {
-                border-radius: 0 3px 3px 0;
-                border-left: 0;
-            }
-        }
-
-        &_brick-clear {
-            #{$block}__control {
-                border-radius: 0;
-                border-right: 0;
-            }
-        }
-
-        &_clear-brick {
-            #{$block}__control {
-                border-radius: 0;
-                border-left: 0;
-            }
-        }
-    }
+    @include pin($block, #{$block}__control, var(--yc-text-input-border-radius), $append: false);
 
     &_disabled {
         #{$block}__control {