From f5a2c44ca49bf112719f0cbb2e07a1f3ee466fdb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 2 Oct 2024 11:47:27 +0200 Subject: [PATCH 1/4] feat: introduce '$ouds-border-radius-9999` raw token and create a `px-to-rem` function --- scss/_functions.scss | 7 +++++++ scss/_ouds-maps.scss | 2 +- scss/_variables.scss | 2 +- scss/tokens/_raw.scss | 1 + scss/tokens/_semantic.scss | 2 +- site/content/docs/0.0/migration-from-boosted.md | 1 + site/content/docs/0.0/migration.md | 1 + 7 files changed, 13 insertions(+), 3 deletions(-) diff --git a/scss/_functions.scss b/scss/_functions.scss index 1d8a232942..417f714542 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -301,3 +301,10 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 } @return $result; } + +// OUDS mod +@function px-to-rem($value) { + $rem-value: $value * .0625; // Assumes the browser default, typically `16px` + @return #{$rem-value}rem; +} +// End mod diff --git a/scss/_ouds-maps.scss b/scss/_ouds-maps.scss index 69c905a545..40851401fe 100644 --- a/scss/_ouds-maps.scss +++ b/scss/_ouds-maps.scss @@ -6,7 +6,7 @@ $ouds-border-radiuses: ( "short": $ouds-border-radius-short, "medium": $ouds-border-radius-medium, "tall": $ouds-border-radius-tall, - "pill": $ouds-border-radius-pill, + "pill": px-to-rem($ouds-border-radius-pill), "circle": 50% ) !default; diff --git a/scss/_variables.scss b/scss/_variables.scss index 7f5c3d1000..fb72427ba7 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -631,7 +631,7 @@ $border-radius-sm: $ouds-border-radius-short !default; // OUDS mod: i $border-radius-lg: $ouds-border-radius-medium !default; // OUDS mod: instead of `.5rem` $border-radius-xl: $ouds-border-radius-tall !default; //OUDS mod: instead of `1rem` $border-radius-xxl: $ouds-border-radius-tall * 1.5 !default; // OUDS mod: instead of `2rem` -$border-radius-pill: $ouds-border-radius-pill !default; // OUDS mod: instead of `50rem` +$border-radius-pill: px-to-rem($ouds-border-radius-pill) !default; // OUDS mod: instead of `50rem` // scss-docs-end border-radius-variables // fusv-disable $border-radius-2xl: $border-radius-xxl !default; // Deprecated in Bootstrap v5.3.0 diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss index 3656c6c525..7f0bad4c87 100644 --- a/scss/tokens/_raw.scss +++ b/scss/tokens/_raw.scss @@ -20,6 +20,7 @@ $ouds-border-radius-300: $ouds-border-base * 3 !default; // $ouds-border-radius-500: $ouds-border-base * 5 !default; // $ouds-border-radius-600: $ouds-border-base * 6 !default; // $ouds-border-radius-800: $ouds-border-base * 8 !default; +$ouds-border-radius-9999: 2000 !default; // $ouds-border-style-none: none !default; $ouds-border-style-solid: solid !default; diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss index 8da69b1404..7427accebd 100644 --- a/scss/tokens/_semantic.scss +++ b/scss/tokens/_semantic.scss @@ -9,7 +9,7 @@ $ouds-border-radius-default: $ouds-border-radius-0 !default; $ouds-border-radius-short: $ouds-border-radius-75 !default; $ouds-border-radius-medium: $ouds-border-radius-150 !default; $ouds-border-radius-tall: $ouds-border-radius-300 !default; -$ouds-border-radius-pill: 125rem !default; +$ouds-border-radius-pill: $ouds-border-radius-9999 !default; $ouds-border-style-default: $ouds-border-style-solid !default; $ouds-border-style-drag: $ouds-border-style-dashed !default; diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index dd93d3d7b0..537e90d4c9 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -122,6 +122,7 @@ Technically, it means that you can get rid of the following things:
  • $ouds-border-radius-75
  • $ouds-border-radius-150
  • $ouds-border-radius-300
    • +
  • $ouds-border-radius-9999
  • $ouds-border-radius-default
  • $ouds-border-radius-medium
  • $ouds-border-radius-none
    • diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md index 34dc52ba9c..9202473f37 100644 --- a/site/content/docs/0.0/migration.md +++ b/site/content/docs/0.0/migration.md @@ -61,6 +61,7 @@ toc: true
  • $ouds-border-radius-75
  • $ouds-border-radius-150
  • $ouds-border-radius-300
    • +
  • $ouds-border-radius-9999
  • $ouds-border-radius-default
  • $ouds-border-radius-medium
  • $ouds-border-radius-none
    • From 0e03ca3c178f6bef0e42985647cda07272117686 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 2 Oct 2024 16:57:06 +0200 Subject: [PATCH 2/4] Add a `strip-units` function to make sure every value is accepted (15 or 15px) --- scss/_functions.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/scss/_functions.scss b/scss/_functions.scss index 417f714542..556d239957 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -303,8 +303,12 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 } // OUDS mod +@function strip-units($value) { + @return divide($value, $value * 0 + 1) +} + @function px-to-rem($value) { - $rem-value: $value * .0625; // Assumes the browser default, typically `16px` + $rem-value: strip-units($value) * .0625; // Assumes the browser default, typically `16px` @return #{$rem-value}rem; } // End mod From 2fa20a58e25f993545ca8d1d0aee729ea0cb6b45 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 2 Oct 2024 16:59:17 +0200 Subject: [PATCH 3/4] . --- scss/_functions.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_functions.scss b/scss/_functions.scss index 556d239957..9958d18ecb 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -304,7 +304,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 // OUDS mod @function strip-units($value) { - @return divide($value, $value * 0 + 1) + @return divide($value, $value * 0 + 1); } @function px-to-rem($value) { From e1fe493322edb95bac26b3d1120ac1beb7306ade Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 3 Oct 2024 09:42:44 +0200 Subject: [PATCH 4/4] Add px to border-radius-9999 --- scss/tokens/_raw.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss index 7f0bad4c87..036b6591ac 100644 --- a/scss/tokens/_raw.scss +++ b/scss/tokens/_raw.scss @@ -20,7 +20,7 @@ $ouds-border-radius-300: $ouds-border-base * 3 !default; // $ouds-border-radius-500: $ouds-border-base * 5 !default; // $ouds-border-radius-600: $ouds-border-base * 6 !default; // $ouds-border-radius-800: $ouds-border-base * 8 !default; -$ouds-border-radius-9999: 2000 !default; +$ouds-border-radius-9999: 2000px !default; // $ouds-border-style-none: none !default; $ouds-border-style-solid: solid !default;