diff --git a/.changeset/radii-scale.md b/.changeset/radii-scale.md new file mode 100644 index 000000000..aa45ee349 --- /dev/null +++ b/.changeset/radii-scale.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": minor +--- + +Added `--tblr-radius-*` tokens from a new `$radii` map; `--tblr-border-radius-*` now alias them. diff --git a/core/scss/_props.scss b/core/scss/_props.scss index ef8667ccd..47cdd0df0 100644 --- a/core/scss/_props.scss +++ b/core/scss/_props.scss @@ -87,13 +87,17 @@ // Border radiuses --border-radius-scale: 1; + @each $name, $value in $radii { + --radius-#{$name}: calc(#{$value} * var(--border-radius-scale, 1)); + } @each $name, $value in $border-radiuses { @if $name { - --border-radius-#{$name}: calc(#{$value} * var(--border-radius-scale, 1)); + --border-radius-#{$name}: #{$value}; } @else { --border-radius: #{$value}; } } + --border-radius-2xl: var(--border-radius-xxl); // Deprecated in v5.3.0 for consistency // Buttons and form controls: one scale, in the names Bootstrap 6 uses // scss-docs-start btn-input-css-vars diff --git a/core/scss/_utilities.scss b/core/scss/_utilities.scss index 69c16a6f5..a0e815b1b 100644 --- a/core/scss/_utilities.scss +++ b/core/scss/_utilities.scss @@ -14,6 +14,18 @@ $border-values: ( 0: 0, ) !default; +$rounded-values: ( + null: var(--border-radius), + 0: 0, + 1: var(--border-radius-sm), + 2: var(--border-radius), + 3: var(--border-radius-lg), + 4: var(--border-radius-xl), + 5: var(--border-radius-xxl), + circle: 50%, + pill: var(--border-radius-pill), +) !default; + $utilities-border-colors: map-loop( ( 'red': red, @@ -855,77 +867,27 @@ $utilities: map.merge( 'rounded': ( property: border-radius, class: rounded, - values: ( - null: var(--border-radius), - 0: 0, - 1: var(--border-radius-sm), - 2: var(--border-radius), - 3: var(--border-radius-lg), - 4: var(--border-radius-xl), - 5: var(--border-radius-xxl), - circle: 50%, - pill: var(--border-radius-pill), - ), + values: $rounded-values, ), 'rounded-top': ( property: border-start-start-radius border-start-end-radius, class: rounded-top, - values: ( - null: var(--border-radius), - 0: 0, - 1: var(--border-radius-sm), - 2: var(--border-radius), - 3: var(--border-radius-lg), - 4: var(--border-radius-xl), - 5: var(--border-radius-xxl), - circle: 50%, - pill: var(--border-radius-pill), - ), + values: $rounded-values, ), 'rounded-end': ( property: border-end-end-radius border-start-end-radius, class: rounded-end, - values: ( - null: var(--border-radius), - 0: 0, - 1: var(--border-radius-sm), - 2: var(--border-radius), - 3: var(--border-radius-lg), - 4: var(--border-radius-xl), - 5: var(--border-radius-xxl), - circle: 50%, - pill: var(--border-radius-pill), - ), + values: $rounded-values, ), 'rounded-bottom': ( property: border-end-end-radius border-end-start-radius, class: rounded-bottom, - values: ( - null: var(--border-radius), - 0: 0, - 1: var(--border-radius-sm), - 2: var(--border-radius), - 3: var(--border-radius-lg), - 4: var(--border-radius-xl), - 5: var(--border-radius-xxl), - circle: 50%, - pill: var(--border-radius-pill), - ), + values: $rounded-values, ), 'rounded-start': ( property: border-start-start-radius border-end-start-radius, class: rounded-start, - values: ( - null: var(--border-radius), - 0: 0, - 1: var(--border-radius-sm), - 2: var(--border-radius), - 3: var(--border-radius-lg), - 4: var(--border-radius-xl), - 5: var(--border-radius-xxl), - circle: 50%, - pill: var(--border-radius-pill), - ), + values: $rounded-values, ), 'visibility': ( property: visibility, diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 60e6dd02d..939dbeb7c 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -723,16 +723,27 @@ $border-radius-xl: 1rem !default; $border-radius-xxl: 2rem !default; $border-radius-pill: 100rem !default; -$border-radiuses: ( +$radii: ( 0: 0, - xs: $border-radius-xs, - sm: $border-radius-sm, - md: $border-radius, - lg: $border-radius-lg, - xl: $border-radius-xl, - xxl: $border-radius-xxl, + 1: $border-radius-xs, + 2: $border-radius-sm, + 3: $border-radius, + 4: $border-radius-lg, + 5: $border-radius-xl, + 6: $border-radius-xxl, pill: $border-radius-pill, - null: var(--border-radius-md), +) !default; + +$border-radiuses: ( + 0: var(--radius-0), + xs: var(--radius-1), + sm: var(--radius-2), + md: var(--radius-3), + lg: var(--radius-4), + xl: var(--radius-5), + xxl: var(--radius-6), + pill: var(--radius-pill), + null: var(--radius-3), ) !default; $icon-color: var(--gray-400) !default; diff --git a/core/scss/bootstrap/_root.scss b/core/scss/bootstrap/_root.scss index 99f2cb2ab..69a8e5d7b 100644 --- a/core/scss/bootstrap/_root.scss +++ b/core/scss/bootstrap/_root.scss @@ -100,14 +100,6 @@ --border-style: #{$border-style}; --border-color: light-dark(#{$border-color}, #{$border-color-dark}); --border-color-translucent: light-dark(#{$border-color-translucent}, #{$border-color-translucent-dark}); - - --border-radius: #{$border-radius}; - --border-radius-sm: #{$border-radius-sm}; - --border-radius-lg: #{$border-radius-lg}; - --border-radius-xl: #{$border-radius-xl}; - --border-radius-xxl: #{$border-radius-xxl}; - --border-radius-2xl: var(--border-radius-xxl); // Deprecated in v5.3.0 for consistency - --border-radius-pill: #{$border-radius-pill}; // scss-docs-end root-border-var --box-shadow: #{$box-shadow};