diff --git a/src/themes/packages/default/collections/form.variables b/src/themes/packages/default/collections/form.variables index 1fa17bf29..f52339183 100755 --- a/src/themes/packages/default/collections/form.variables +++ b/src/themes/packages/default/collections/form.variables @@ -41,7 +41,7 @@ @inputPadding: (@inputVerticalPadding + ((1em - @inputLineHeight) / 2)) @inputHorizontalPadding; @inputBackground: #FFFFFF; @inputBorder: 1px solid @borderColor; -@inputBorderRadius: 0.3125em; +@inputBorderRadius: @absoluteBorderRadius; @inputColor: @textColor; @inputTransition: background-color 0.2s ease, diff --git a/src/themes/packages/default/collections/menu.variables b/src/themes/packages/default/collections/menu.variables index 7f09086b1..b9af95e62 100755 --- a/src/themes/packages/default/collections/menu.variables +++ b/src/themes/packages/default/collections/menu.variables @@ -35,7 +35,7 @@ background 0.2s ease, box-shadow 0.2s ease ; -@borderRadius: 0.1875rem; +@borderRadius: @defaultBorderRadius; @dividerSize: 1px; @dividerBackground: linear-gradient( @@ -186,7 +186,7 @@ @secondaryTransition: color 0.2s ease; -@secondaryBorderRadius: 0.3125em; +@secondaryBorderRadius: @defaultBorderRadius; @secondaryMargin: 0.25em; @secondaryVerticalMargin: 0.3em; diff --git a/src/themes/packages/default/elements/button.variables b/src/themes/packages/default/elements/button.variables index d8f29af05..8292b8ec5 100755 --- a/src/themes/packages/default/elements/button.variables +++ b/src/themes/packages/default/elements/button.variables @@ -15,7 +15,7 @@ @textColor: rgba(0, 0, 0, 0.6); @textShadow: none; @invertedTextShadow: none; -@borderRadius: 0.25em; +@borderRadius: @defaultBorderRadius; @borderBoxShadowColor: transparent; @borderBoxShadowWidth: 1px; @verticalAlign: baseline; diff --git a/src/themes/packages/default/elements/input.variables b/src/themes/packages/default/elements/input.variables index a2a678378..840165ddb 100755 --- a/src/themes/packages/default/elements/input.variables +++ b/src/themes/packages/default/elements/input.variables @@ -22,7 +22,7 @@ @border: @borderWidth solid rgba(0, 0, 0, 0.15); @boxShadow: none; -@borderRadius: 0.325em; +@borderRadius: @defaultBorderRadius; @transition: background-color 0.3s ease-out, box-shadow 0.2s ease, diff --git a/src/themes/packages/default/elements/segment.variables b/src/themes/packages/default/elements/segment.variables index 39ccfecec..0e6573a19 100755 --- a/src/themes/packages/default/elements/segment.variables +++ b/src/themes/packages/default/elements/segment.variables @@ -19,7 +19,7 @@ @horizontalPadding: 1em; @margin: 1rem; -@borderRadius: 0.25rem; +@borderRadius: @defaultBorderRadius; /*------------------- Coupling diff --git a/src/themes/packages/default/elements/step.variables b/src/themes/packages/default/elements/step.variables index 8e2744c6f..7bc78f154 100755 --- a/src/themes/packages/default/elements/step.variables +++ b/src/themes/packages/default/elements/step.variables @@ -19,7 +19,7 @@ color 0.1s ease, box-shadow 0.1s ease ; -@borderRadius: 0.3125rem; +@borderRadius: @defaultBorderRadius; @lineHeight: 1.2; @backgroundColor: #FFFFFF; @@ -59,7 +59,7 @@ Group --------------------*/ -@stepsBorderRadius: 0.3125rem; +@stepsBorderRadius: @defaultBorderRadius; @stepsBackground: ''; @stepsBoxShadow: ''; diff --git a/src/themes/packages/default/globals/site.variables b/src/themes/packages/default/globals/site.variables index 50ae74965..e175f011b 100755 --- a/src/themes/packages/default/globals/site.variables +++ b/src/themes/packages/default/globals/site.variables @@ -85,6 +85,16 @@ @transparentWhite : rgba(255, 255, 255, 0.05); @strongTransparentWhite : rgba(255, 255, 255, 0.07); + +/*------------------- + Accents +--------------------*/ + +/* 4px @ 14px */ +@relativeBorderRadius: 0.2857em; +@absoluteBorderRadius: 0.2857rem; +@defaultBorderRadius: @absoluteBorderRadius; + /* Used for differentiating neutrals */ @subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05)); diff --git a/src/themes/packages/default/modules/accordion.variables b/src/themes/packages/default/modules/accordion.variables index 0ffdb6acf..bcce5bf67 100755 --- a/src/themes/packages/default/modules/accordion.variables +++ b/src/themes/packages/default/modules/accordion.variables @@ -58,7 +58,7 @@ /* Styled */ @styledWidth: 600px; @styledBackground: @white; -@styledBorderRadius: 0.3125em; +@styledBorderRadius: @defaultBorderRadius; @styledBoxShadow: @subtleShadow, 0px 0px 0px 1px @borderColor diff --git a/src/themes/packages/default/modules/dropdown.variables b/src/themes/packages/default/modules/dropdown.variables index a925ec9d2..ccba890ef 100755 --- a/src/themes/packages/default/modules/dropdown.variables +++ b/src/themes/packages/default/modules/dropdown.variables @@ -11,7 +11,7 @@ border-radius 0.1s ease, width 0.2s ease ; -@borderRadius: 0.325em; +@borderRadius: @defaultBorderRadius; /*------------------- Content @@ -51,17 +51,6 @@ @itemTextTransform: none; @itemBoxShadow: none; -/* Responsive */ -@itemActualHeight: (@itemVerticalPadding * 2) + @itemLineHeight; - -@mobileMaxItems: 6; -@tabletMaxItems: 8; -@computerMaxItems: 12; -@mobileMaxMenuHeight: (@itemActualHeight * @mobileMaxItems); -@tabletMaxMenuHeight: (@itemActualHeight * @tabletMaxItems); -@computerMaxMenuHeight: (@itemActualHeight * @computerMaxItems); -@widescreenMaxMenuHeight: 9999px; - /* Menu Header */ @menuHeaderColor: @darkTextColor; @@ -126,7 +115,6 @@ b Types @selectionBorderRadius: @borderRadius; @selectionIconOpacity: 0.8; @selectionIconTransition: opacity 0.2s ease; -@selectionMenuMaxHeight: 245px; @selectionMenuBoxShadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08); @selectionMenuItemBoxShadow: none; @@ -140,6 +128,20 @@ b Types border 0.2s @defaultEasing ; +/* Responsive */ +@selectionMobileMaxItems: 3; +@selectionTabletMaxItems: 4; +@selectionComputerMaxItems: 6; +@selectionWidescreenMaxItems: 8; + +/* Derived */ +@selectedBorderEMWidth: 0.0714em; +@selectionItemActualHeight: (@itemVerticalPadding * 2) + @itemLineHeight + @selectedBorderEMWidth; +@selectionMobileMaxMenuHeight: (@selectionItemActualHeight * @selectionMobileMaxItems); +@selectionTabletMaxMenuHeight: (@selectionItemActualHeight * @selectionTabletMaxItems); +@selectionComputerMaxMenuHeight: (@selectionItemActualHeight * @selectionComputerMaxItems); +@selectionWidescreenMaxMenuHeight: (@selectionItemActualHeight * @selectionWidescreenMaxItems); + /* Hover */ @selectionHoverBorderColor: @selectedBorderColor; @selectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); diff --git a/src/themes/packages/default/modules/modal.variables b/src/themes/packages/default/modules/modal.variables index f413ff771..a894c6780 100755 --- a/src/themes/packages/default/modules/modal.variables +++ b/src/themes/packages/default/modules/modal.variables @@ -6,7 +6,7 @@ @border: none; @width: 90%; @xOffset: -(@width / 2); -@borderRadius: 0.25rem; +@borderRadius: @defaultBorderRadius; @boxShadow: 0px 0px 8px rgba(0, 0, 0, 0.8); /* Close Icon */ diff --git a/src/themes/packages/default/modules/nag.variables b/src/themes/packages/default/modules/nag.variables index cada597b3..9b4578963 100644 --- a/src/themes/packages/default/modules/nag.variables +++ b/src/themes/packages/default/modules/nag.variables @@ -59,7 +59,7 @@ /* Top / Bottom */ @top: 0em; @bottom: 0em; -@borderRadius: 0.25em; +@borderRadius: @defaultBorderRadius; @topBorderRadius: 0em 0em @borderRadius @borderRadius; @bottomBorderRadius: @borderRadius @borderRadius 0em 0em; diff --git a/src/themes/packages/default/modules/popup.variables b/src/themes/packages/default/modules/popup.variables index 1fe04ec37..ba5a9931c 100755 --- a/src/themes/packages/default/modules/popup.variables +++ b/src/themes/packages/default/modules/popup.variables @@ -19,7 +19,7 @@ @horizontalPadding: 1em; @fontWeight: normal; @fontStyle: normal; -@borderRadius: 0.25em; +@borderRadius: @defaultBorderRadius; /*------------------- Parts diff --git a/src/themes/packages/default/modules/progress.variables b/src/themes/packages/default/modules/progress.variables index 215e2ef3b..3886870c5 100755 --- a/src/themes/packages/default/modules/progress.variables +++ b/src/themes/packages/default/modules/progress.variables @@ -12,10 +12,10 @@ @lastMargin: 0em 0em (@labelHeight); @background: @subtleTransparentBlack; -@border: 1px solid rgba(0, 0, 0, 0.05); +@border: 1px solid @borderRadius; @boxShadow: none; -@padding: 0.325em; -@borderRadius: 0.325em; +@padding: 0.2857em; +@borderRadius: @defaultBorderRadius; /* Bar */ @barPosition: relative; diff --git a/src/themes/packages/default/views/card.variables b/src/themes/packages/default/views/card.variables index d1622d09e..d38573f41 100755 --- a/src/themes/packages/default/views/card.variables +++ b/src/themes/packages/default/views/card.variables @@ -12,7 +12,7 @@ /* Item */ @background: #FFFFFF; -@borderRadius: 0.325rem; +@borderRadius: @defaultBorderRadius; @display: block; @margin: 1em 0em; @minHeight: 0px; diff --git a/src/themes/packages/github/elements/button.variables b/src/themes/packages/github/elements/button.variables index 465b4f4c5..64d9d62e9 100644 --- a/src/themes/packages/github/elements/button.variables +++ b/src/themes/packages/github/elements/button.variables @@ -11,7 +11,7 @@ @textShadow: 0px 1px 0px rgba(255, 255, 255, 0.9); @invertedTextShadow: 0px -1px 0px rgba(0, 0, 0, 0.25); -@borderRadius: 0.25em; +@borderRadius: @relativeBorderRadius; @verticalPadding: 0.75em; @horizontalPadding: 1.15em;