diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index 1eca9eda74..1643d3601a 100644 --- 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 index c2a1cadeb1..acc0cd1f04 100644 --- 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 index 26d4bc47b7..656701053b 100644 --- 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 index 7947eef37d..b246d64c8c 100644 --- 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 index 1906f36139..c49c28cc72 100644 --- 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 index cd1ff4b850..fd88d44264 100644 --- 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 index 85d81c0e33..ec3b8ca12c 100644 --- 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 index 0758482613..caea11cca2 100644 --- 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 index 602412227e..6a5b27241a 100644 --- 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 index 4daf877b45..17fd07f07f 100644 --- 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 index 311854eb60..2edd2e4864 100644 --- 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 index 7cecdd1a78..e247b6ebc8 100644 --- 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 index 5f9ea035c0..82c5479c79 100644 --- 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 index 5f1af20d1a..31f26c92cb 100644 --- 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 index d6d5bba387..ef2a91cf29 100644 --- 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 index fd10f5863e..ec1023f000 100644 --- 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 index 22ac02d1ff..99f3ebf94a 100644 --- 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 index 0663a13fe8..fcf4becebf 100644 --- 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 index 8610a2d964..1f745af3a6 100644 --- 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 index 9a01597db6..eb5fddbd68 100644 --- 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 index b3309235bf..7281aeb07c 100644 --- 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 index 741b4ccd61..561c3d2f8c 100644 --- 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 index 3295e83e7f..b28285b467 100644 --- 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 index f8dc6c3fb0..dd47d0f2e8 100644 --- 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 index eb35fd80fa..37d4e26ce6 100644 --- 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 index 6fc789ebb2..8f99176ec6 100644 --- 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 new file mode 100644 index 0000000000..fe20d4c746 --- /dev/null +++ b/src/docs/stories/border-radius.stories.mdx @@ -0,0 +1,131 @@ +import {Meta} from '@storybook/addon-docs'; +import PageHeader from 'blocks/PageHeader'; + + + +Border radius + +A border radius refers to the amount of curvature or rounding applied to the corners of a rectangular shape or element. Essentially, it determines how None or smooth the corners of an element appear. In addition to its aesthetic impact, border radius can also affect the perceived weight and texture of an element. Overall, border radius is a critical element in creating visually appealing and user-friendly interfaces, helping to guide users' attention and enhance their experience with the design. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ CSS + + SASS + + Value + + Usage +
+ --border-radius-none + + $borderRadiusNone + 0pxlanding page containers, marketing materials, marketing pages
+ --border-radius-xxxs + + $borderRadiusXXXS + 4pxicons, badges
+ --border-radius-xxs + + $borderRadiusXXS + 6pxlabels
+ --border-radius-xs + + $borderRadiusXS + 8px + tertiary containers, (containers inside of other containers), clickable + tabs +
+ --border-radius-s + + $borderRadiusS + 12px + tertiary containers (containers inside of other containers), clickable + tabs +
+ --border-radius-m + + $borderRadiusM + 16pxsecondary containers (Questions, Answers, Side-Rail Boxes)
+ --border-radius-l + + $borderRadiusL + 24pxprimary containers (Modals, Tooltips, Bottom Drawers)
+ --border-radius-xl + + $borderRadiusXL + 32pxinputs, primary containers
+ --border-radius-xxl + + $borderRadiusXXL + 40pxtooltips, bottom drawer/sheet menus
+ --border-radius-pill + + $borderRadiusPill + 999pxbuttons, chips, tabs
diff --git a/src/docs/styles.scss b/src/docs/styles.scss index 205c5f5194..e93ba86957 100644 --- a/src/docs/styles.scss +++ b/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'); diff --git a/src/sass/_basics.scss b/src/sass/_basics.scss index 1eff303ea2..0ad2c6073b 100644 --- a/src/sass/_basics.scss +++ b/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; } diff --git a/src/sass/_config.scss b/src/sass/_config.scss index 19476ade00..e8cd431021 100644 --- a/src/sass/_config.scss +++ b/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; @@ -125,7 +144,6 @@ $formElementLargeFontSize: 18px; $formElementDefaultLineHeight: 24px; $formElementValidColor: $green-40; $formElementInvalidColor: $red-40; -$formElementSmallBorderRadius: 16px; $formElementStandardBorderRadius: 20px; $formElementLargeBorderRadius: 28px; @@ -142,6 +160,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