add new border radius tokens

src/components/accordion/_accordion.scss

@@ -9,13 +9,13 @@
 
       &: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

@@ -104,7 +104,7 @@ $includeHtml: false !default;
       }
 
       @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/_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/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,11 +176,11 @@ $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-xs);
       }
 
       &.sg-dialog__container--fullscreen {

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

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

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,7 +4,7 @@
 
   width: 100%;
   min-width: 120px;
-  border-radius: 8px;
+  border-radius: var(--border-radius-xs);
   background: var(--track-color);
   position: relative;
   overflow: hidden;

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;

src/docs/styles.scss

@@ -160,7 +160,7 @@
 }
 
 .docblock-source {
-  border-radius: 8px !important;
+  border-radius: var(--border-radius-xs) !important;
 }
 
 .docblock-source button {
@@ -227,7 +227,7 @@ table.docblock-argstable tbody.docblock-argstable-body {
 }
 
 .intro-page-header {
-  border-radius: 8px;
+  border-radius: var(--border-radius-xs);
   width: 320px;
   height: 336px;
   background-image: url('./assets/introduction_phone.jpg');

src/sass/_basics.scss

@@ -1,6 +1,19 @@
 $includeHtml: false !default;
 
 @if ($includeHtml) {
+  :root {
+    --border-radius-none: 0;
+    --border-radius-xxxs: 4px;
+    --border-radius-xxs: 6px;
+    --border-radius-xs: 8px;
+    --border-radius-s: 12px;
+    --border-radius-m: 16px;
+    --border-radius-l: 24px;
+    --border-radius-xl: 32px;
+    --border-radius-xxl: 40px;
+    --border-radius-pill: 999px;
+  }
+
   html {
     font-size: $baseFont;
   }

src/sass/_config.scss

@@ -67,10 +67,29 @@ $componentSizesSetup: (
 );
 
 // Border radius
+// this comment exists to suppress errors about these unused variables
+// till we change them to new ones in brainly-frontend:
+// $borderRadiusDefault $borderRadiusLarge $borderRadiusSmall
 $borderRadiusDefault: 8px;
 $borderRadiusLarge: $borderRadiusDefault * 1.5;
 $borderRadiusSmall: math.div($borderRadiusDefault, 2);
 
+// New Border radius
+// this comment exists to suppress errors about these unused variables:
+// $borderRadiusNone $borderRadiusXXXS $borderRadiusXXS $borderRadiusXS
+// $borderRadiusS $borderRadiusM $borderRadiusM $borderRadiusL $borderRadiusXL
+// $borderRadiusXXL $borderRadiusPill
+$borderRadiusNone: 0;
+$borderRadiusXXXS: 4px;
+$borderRadiusXXS: 6px;
+$borderRadiusXS: 8px;
+$borderRadiusS: 12px;
+$borderRadiusM: 16px;
+$borderRadiusL: 24px;
+$borderRadiusXL: 32px;
+$borderRadiusXXL: 40px;
+$borderRadiusPill: 999px;
+
 // Vertical stack
 $sgHeaderZIndex: 101;
 $overlayZIndex: 999;
@@ -142,6 +161,3 @@ $easingRegular: cubic-bezier(0.35, 0, 0.1, 1);
 $easingEntry: cubic-bezier(0.1, 0, 0, 1);
 $easingExit: cubic-bezier(0.3, 0, 1, 0.8);
 $easingLinear: linear;
-
-// this comment exists to suppress errors about these unused variables:
-// $durationGentle2 $durationGentle1 $durationInstant $durationModerate1 $durationQuick1 $easingRegular