add new border radius tokens (#2717)

clxandstuff · web-flow · commit 82144cef284b · 2023-04-24T09:16:13.000+02:00
* add new border radius tokens

* add border radius css variables

* use border radius css variables

* prevent border radius unused variables error
diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
@@ -4,18 +4,18 @@
     transition: $durationQuick2 $easingLinear border-color;
 
     &--no-gap {
-      border-radius: 0;
+      border-radius: var(--border-radius-none);
       border-top: none;
 
       &:first-child {
         border-top: 2px solid $gray-20;
-        border-top-left-radius: $borderRadiusDefault;
-        border-top-right-radius: $borderRadiusDefault;
+        border-top-left-radius: var(--border-radius-xs);
+        border-top-right-radius: var(--border-radius-xs);
       }
 
       &:last-child {
-        border-bottom-left-radius: $borderRadiusDefault;
-        border-bottom-right-radius: $borderRadiusDefault;
+        border-bottom-left-radius: var(--border-radius-xs);
+        border-bottom-right-radius: var(--border-radius-xs);
       }
     }
 
@@ -66,7 +66,7 @@
         width: 40px;
         height: 40px;
         content: '';
-        border-radius: 50%;
+        border-radius: var(--border-radius-pill);
         transition: $durationQuick2 $easingLinear background-color,
           $durationQuick2 $easingRegular transform;
       }
diff --git a/src/components/avatar/_avatar.scss b/src/components/avatar/_avatar.scss
@@ -19,7 +19,7 @@ $includeHtml: false !default;
 
     width: $avatarSmallSize;
     height: $avatarSmallSize;
-    border-radius: 50%;
+    border-radius: var(--border-radius-pill);
     // workaround for the Chrome bug - crbug.com/157218
     -webkit-perspective: 1px;
 
@@ -42,7 +42,7 @@ $includeHtml: false !default;
     &__wrapper-link {
       @include applyFocus();
 
-      border-radius: 50%;
+      border-radius: var(--border-radius-pill);
       display: block;
       width: min-content;
     }
diff --git a/src/components/box/_box.scss b/src/components/box/_box.scss
@@ -100,11 +100,11 @@ $includeHtml: false !default;
       }
 
       @include makeResponsive($variant, 'sg-box--no-border-radius') {
-        border-radius: 0;
+        border-radius: var(--border-radius-none);
       }
 
       @include makeResponsive($variant, 'sg-box--border-radius') {
-        border-radius: $borderRadiusDefault;
+        border-radius: var(--border-radius-xs);
       }
 
       @include makeResponsive($variant, 'sg-box--border') {
diff --git a/src/components/bubble/_bubble.scss b/src/components/bubble/_bubble.scss
@@ -24,7 +24,7 @@ $includeHtml: false !default;
   .sg-bubble {
     background: $bubbleBackground;
     border-color: $bubbleBackground;
-    border-radius: $borderRadiusDefault;
+    border-radius: var(--border-radius-xs);
     box-shadow: $shadowMedium;
     padding: gutter(0.5) gutter(1);
     position: relative;
diff --git a/src/components/buttons/UnstyledButton.stories.mdx b/src/components/buttons/UnstyledButton.stories.mdx
@@ -53,7 +53,7 @@ import UnstyledButtonA11y from './stories/UnstyledButton.a11y.mdx';
         padding: 0 8px;
         background-color: var(--yellow-40);
         transform: translate3d(0, 50%, 0);
-        border-radius: 8px;
+        border-radius: var(--border-radius-xs);
         color: var(--white);
         font-weight: bold;
       `;
diff --git a/src/components/buttons/_buttons.scss b/src/components/buttons/_buttons.scss
@@ -110,14 +110,14 @@ $largeButtonSize: componentSize(l);
   }
 
   &--s {
-    border-radius: 16px;
+    border-radius: var(--border-radius-m);
     height: $smallButtonSize;
     padding: 0 spacing(s);
     font-size: 12px;
     line-height: 12px;
 
     .sg-button__hover-overlay {
-      border-radius: 16px;
+      border-radius: var(--border-radius-m);
     }
 
     // Proxima is broken
diff --git a/src/components/buttons/_buttons_solid_round.scss b/src/components/buttons/_buttons_solid_round.scss
@@ -42,7 +42,7 @@ $includeHtml: false !default;
       justify-content: center;
       width: $buttonRoundAddSize;
       height: $buttonRoundAddSize;
-      border-radius: 50%;
+      border-radius: var(--border-radius-pill);
       line-height: $buttonRoundAddSize;
       text-align: center;
       background-color: $buttonRoundColor;
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -11,7 +11,7 @@ $includeHtml: false !default;
     display: inline-flex;
     align-items: flex-start;
     flex-wrap: wrap;
-    border-radius: $borderRadiusDefault;
+    border-radius: var(--border-radius-xs);
     border: $cardBorderColor solid $cardBorderSize;
     overflow: hidden;
     background-color: $white;
diff --git a/src/components/chip/_chip.scss b/src/components/chip/_chip.scss
@@ -5,7 +5,7 @@
   display: inline-flex;
   position: relative;
   background: var(--white);
-  border-radius: 8px;
+  border-radius: var(--border-radius-xs);
   // transform: scale(10) translate(20px, 20px);
 
   &__input {
@@ -92,7 +92,7 @@
     border: 2px solid var(--chipBorderColor);
     display: flex;
     align-items: center;
-    border-radius: 8px;
+    border-radius: var(--border-radius-xs);
     transition: box-shadow $durationQuick1 $easingExit,
       border-color $durationModerate1 $easingLinear,
       transform $durationModerate2 $easingRegular,
diff --git a/src/components/counters/_counters.scss b/src/components/counters/_counters.scss
@@ -5,7 +5,7 @@ $counterSizeXS: componentSize(xs);
 
 @if ($includeHtml) {
   .sg-counter {
-    border-radius: $borderRadiusLarge;
+    border-radius: var(--border-radius-s);
     padding: 0 spacing(xs);
     min-width: $counterSizeXS;
     min-height: $counterSizeXS;
@@ -132,7 +132,7 @@ $counterSizeXS: componentSize(xs);
         &::before {
           height: 12px;
           width: 12px;
-          border-radius: 6px;
+          border-radius: var(--border-radius-xxs);
         }
       }
     }
diff --git a/src/components/dialog/_dialog.scss b/src/components/dialog/_dialog.scss
@@ -176,15 +176,15 @@ $dialogMaxWidthMap: (
 
     &--appearance-dialog {
       background-color: $white;
-      border-radius: 24px 24px 0 0;
+      border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
       box-shadow: $dialogBoxShadow;
 
       @include sgResponsive(md) {
-        border-radius: $borderRadiusDefault;
+        border-radius: var(--border-radius-l);
       }
 
       &.sg-dialog__container--fullscreen {
-        border-radius: 0;
+        border-radius: var(--border-radius-none);
         box-shadow: none;
       }
     }
diff --git a/src/components/file-handler/_file-handler.scss b/src/components/file-handler/_file-handler.scss
@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
   height: componentSize(m);
-  border-radius: 6px;
+  border-radius: var(--border-radius-xxs);
   padding: spacing(xs);
   padding-right: 12px;
   cursor: default;
@@ -19,7 +19,7 @@
     & img {
       width: 24px;
       max-height: 24px;
-      border-radius: 4px;
+      border-radius: var(--border-radius-xxxs);
     }
   }
 
diff --git a/src/components/form-elements/_select.scss b/src/components/form-elements/_select.scss
@@ -124,7 +124,7 @@ $includeHtml: false !default;
       .sg-select__element {
         height: $formElementSizeS;
         font-size: $formElementSmallFontSize;
-        border-radius: $formElementSmallBorderRadius;
+        border-radius: var(--border-radius-m);
         padding: 0 26px 0 (spacing(xs) + 6px);
 
         &::-ms-expand {
diff --git a/src/components/form-elements/_textarea.scss b/src/components/form-elements/_textarea.scss
@@ -99,7 +99,7 @@ $includeHtml: false !default;
 
     &--simple {
       border: none;
-      border-radius: 0;
+      border-radius: var(--border-radius-none);
 
       &:focus {
         box-shadow: none;
diff --git a/src/components/form-elements/checkbox/_checkbox.scss b/src/components/form-elements/checkbox/_checkbox.scss
@@ -171,13 +171,13 @@ $checkboxClickableArea: 32px;
 
   &__icon-wrapper {
     display: inline-flex;
-    border-radius: $borderRadiusSmall;
+    border-radius: var(--border-radius-xxxs);
   }
 
   &__icon {
     width: $checkboxSize;
     height: $checkboxSize;
-    border-radius: $borderRadiusSmall;
+    border-radius: var(--border-radius-xxxs);
     border: 2px solid var(--checkboxColor);
 
     animation-duration: $durationQuick1, $durationModerate1;
diff --git a/src/components/form-elements/radio/_radio.scss b/src/components/form-elements/radio/_radio.scss
@@ -140,7 +140,7 @@ $radioCheckedBorderWidth: 5px;
     margin: auto;
     width: $radioSize;
     height: $radioSize;
-    border-radius: 50%;
+    border-radius: var(--border-radius-pill);
     box-shadow: 0px 0px 0px var(--radioBorderWidth) var(--radioRingColor) inset;
     transition: box-shadow 0s;
 
@@ -159,7 +159,7 @@ $radioCheckedBorderWidth: 5px;
       top: 0;
       width: 100%;
       height: 100%;
-      border-radius: 100%;
+      border-radius: var(--border-radius-pill);
     }
   }
 
diff --git a/src/components/icon-as-button/_icon-as-button.scss b/src/components/icon-as-button/_icon-as-button.scss
@@ -109,7 +109,7 @@ $includeHtml: false !default;
     &--with-border {
       .sg-icon-as-button__hole {
         border: solid $iconAsButtonColor 1px;
-        border-radius: 50%;
+        border-radius: var(--border-radius-pill);
       }
     }
 
@@ -187,12 +187,12 @@ $includeHtml: false !default;
 
     &--action {
       transition: background 0.3s ease-out, color 0.3s ease-out;
-      border-radius: 50%;
+      border-radius: var(--border-radius-pill);
     }
 
     &--transparent {
       transition: background 0.3s ease-out, color 0.3s ease-out;
-      border-radius: 50%;
+      border-radius: var(--border-radius-pill);
 
       &:active {
         background: $iconAsButtonTransparentColor;
@@ -208,7 +208,7 @@ $includeHtml: false !default;
     &--action-active {
       background: $iconAsButtonColor;
       color: $iconAsButtonActionColor;
-      border-radius: 50%;
+      border-radius: var(--border-radius-pill);
 
       &.sg-icon-as-button--adaptive {
         color: inherit;
diff --git a/src/components/labels/_labels.scss b/src/components/labels/_labels.scss
@@ -3,7 +3,7 @@
   justify-content: center;
   align-items: center;
   height: componentSize(xs);
-  border-radius: 6px;
+  border-radius: var(--border-radius-xxs);
   padding: spacing(xs);
   cursor: default;
   max-width: 100%;
diff --git a/src/components/layout/_layout.scss b/src/components/layout/_layout.scss
@@ -50,7 +50,7 @@ $includeHtml: false !default;
 
       @include sgBreakpoint(medium-up) {
         margin-top: $layoutContainerMarginTop + rhythm(1);
-        border-radius: $borderRadiusDefault;
+        border-radius: var(--border-radius-xs);
         max-width: $layoutMediumContentMaxWidth;
       }
 
@@ -114,7 +114,7 @@ $includeHtml: false !default;
       &--full-page {
         padding: 0;
         margin: 0;
-        border-radius: 0;
+        border-radius: var(--border-radius-none);
         width: 100%;
         max-width: 100%;
       }
diff --git a/src/components/media/_media.scss b/src/components/media/_media.scss
@@ -8,7 +8,7 @@ $mediaItemSecondaryColor: $gray-70;
   padding: rhythm(math.div(1, 2));
   line-height: rhythm(1);
   min-height: rhythm(2.5);
-  border-radius: $borderRadiusSmall;
+  border-radius: var(--border-radius-xxxs);
 
   &--no-padding {
     padding: 0;
diff --git a/src/components/popup-menu/popup-menu.scss b/src/components/popup-menu/popup-menu.scss
@@ -19,7 +19,7 @@ $includeHtml: false !default;
     display: flex;
     justify-content: space-around;
     align-items: center;
-    border-radius: $borderRadiusDefault $borderRadiusDefault 0 0;
+    border-radius: var(--border-radius-xs) var(--border-radius-xs) 0 0;
     box-shadow: $shadowMedium;
 
     &::before {
diff --git a/src/components/progress-bar/_progress-bar.scss b/src/components/progress-bar/_progress-bar.scss
@@ -4,13 +4,13 @@
 
   width: 100%;
   min-width: 120px;
-  border-radius: 8px;
+  border-radius: var(--border-radius-xs);
   background: var(--track-color);
   position: relative;
   overflow: hidden;
 
   &--no-border-radius {
-    border-radius: 0;
+    border-radius: var(--border-radius-none);
   }
 
   &--invisible-track {
diff --git a/src/components/select-menu/_select-menu.scss b/src/components/select-menu/_select-menu.scss
@@ -196,7 +196,7 @@
     }
 
     &__popup {
-      border-radius: 16px;
+      border-radius: var(--border-radius-m);
       box-shadow: $shadowLarge !important;
       overflow: hidden;
       display: inline-flex;
@@ -271,7 +271,7 @@
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
-      border-radius: $borderRadiusDefault;
+      border-radius: var(--border-radius-xs);
       cursor: default;
       transition: background-color $durationModerate1 $easingLinear,
         transform $durationModerate2 $easingRegular;
diff --git a/src/components/spinner/_spinner.scss b/src/components/spinner/_spinner.scss
@@ -2,7 +2,7 @@
 .sg-spinner {
   background-color: transparent;
   border: 3px solid $gray-70;
-  border-radius: 50%;
+  border-radius: var(--border-radius-pill);
   border-top-color: transparent;
   border-right-color: transparent;
   display: inline-block;
diff --git a/src/components/subject-icons/_subject-icon-box.scss b/src/components/subject-icons/_subject-icon-box.scss
@@ -2,7 +2,7 @@ $subjectIconBoxBackground: $blue-30;
 $subjectIconBoxDarkerBackground: $blue-40;
 
 .sg-subject-icon-box {
-  border-radius: 50%;
+  border-radius: var(--border-radius-pill);
   background-color: $subjectIconBoxBackground;
   display: inline-block;
   font-size: 0;
diff --git a/src/components/toplayer/_toplayer.scss b/src/components/toplayer/_toplayer.scss
@@ -11,7 +11,7 @@ $includeHtml: false !default;
     display: flex;
     flex-direction: column;
     overflow: visible;
-    border-radius: $borderRadiusDefault;
+    border-radius: var(--border-radius-xs);
     width: 100%;
     box-shadow: $shadowLarge;
     background-color: $toplayerBackgroundColor;
diff --git a/src/docs/stories/border-radius.stories.mdx b/src/docs/stories/border-radius.stories.mdx
diff --git a/src/docs/styles.scss b/src/docs/styles.scss
diff --git a/src/sass/_basics.scss b/src/sass/_basics.scss
diff --git a/src/sass/_config.scss b/src/sass/_config.scss

Original file line number	Diff line number	Diff line change
`@@ -100,11 +100,11 @@ $includeHtml: false !default;`
`100`	`100`	`}`
`101`	`101`
`102`	`102`	`@include makeResponsive($variant, 'sg-box--no-border-radius') {`
`103`		`- border-radius: 0;`
	`103`	`+ border-radius: var(--border-radius-none);`
`104`	`104`	`}`
`105`	`105`
`106`	`106`	`@include makeResponsive($variant, 'sg-box--border-radius') {`
`107`		`- border-radius: $borderRadiusDefault;`
	`107`	`+ border-radius: var(--border-radius-xs);`
`108`	`108`	`}`
`109`	`109`
`110`	`110`	`@include makeResponsive($variant, 'sg-box--border') {`
Original file line number	Diff line number	Diff line change
`@@ -110,14 +110,14 @@ $largeButtonSize: componentSize(l);`
`110`	`110`	`}`
`111`	`111`
`112`	`112`	`&--s {`
`113`		`- border-radius: 16px;`
	`113`	`+ border-radius: var(--border-radius-m);`
`114`	`114`	`height: $smallButtonSize;`
`115`	`115`	`padding: 0 spacing(s);`
`116`	`116`	`font-size: 12px;`
`117`	`117`	`line-height: 12px;`
`118`	`118`
`119`	`119`	`.sg-button__hover-overlay {`
`120`		`- border-radius: 16px;`
	`120`	`+ border-radius: var(--border-radius-m);`
`121`	`121`	`}`
`122`	`122`
`123`	`123`	`// Proxima is broken`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ $counterSizeXS: componentSize(xs);`
`5`	`5`
`6`	`6`	`@if ($includeHtml) {`
`7`	`7`	`.sg-counter {`
`8`		`- border-radius: $borderRadiusLarge;`
	`8`	`+ border-radius: var(--border-radius-s);`
`9`	`9`	`padding: 0 spacing(xs);`
`10`	`10`	`min-width: $counterSizeXS;`
`11`	`11`	`min-height: $counterSizeXS;`
`@@ -132,7 +132,7 @@ $counterSizeXS: componentSize(xs);`
`132`	`132`	`&::before {`
`133`	`133`	`height: 12px;`
`134`	`134`	`width: 12px;`
`135`		`- border-radius: 6px;`
	`135`	`+ border-radius: var(--border-radius-xxs);`
`136`	`136`	`}`
`137`	`137`	`}`
`138`	`138`	`}`