add new border radius tokens

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;
       }

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;
     }

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') {

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;

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;
       `;

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

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;

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;

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,

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);
         }
       }
     }

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;
       }
     }

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);
     }
   }
 

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 {

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;

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;

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);
     }
   }
 

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;

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%;

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%;
       }

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;

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 {

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 {

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;

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;

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;

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;