diff --git a/packages/orange-compact/config.yml b/packages/orange-compact/config.yml index 596512d135..01cda83d64 100644 --- a/packages/orange-compact/config.yml +++ b/packages/orange-compact/config.yml @@ -12,7 +12,6 @@ authors: "Orange and OUDS Web Orange Compact contributo current_version: "1.2.0" current_ruby_version: "1.2.0" docs_version: "1.2" -rfs_version: "v10.0.0" bootstrap_current_version: "5.3.6" bootstrap_docs_version: "5.3" bootstrap_github_org: "https://github.com/twbs" diff --git a/packages/orange-compact/scss/ouds-web-grid.scss b/packages/orange-compact/scss/ouds-web-grid.scss index f6c0cb5e29..c58ce8d1cf 100644 --- a/packages/orange-compact/scss/ouds-web-grid.scss +++ b/packages/orange-compact/scss/ouds-web-grid.scss @@ -15,8 +15,6 @@ $include-column-box-sizing: true !default; @import "@ouds/web-common/scss/mixins/grid"; @import "@ouds/web-common/scss/mixins/utilities"; -@import "@ouds/web-common/scss/vendor/rfs"; - @import "@ouds/web-common/scss/containers"; @import "@ouds/web-common/scss/grid"; diff --git a/packages/orange/config.yml b/packages/orange/config.yml index 45e9f1b343..3236b61e3c 100644 --- a/packages/orange/config.yml +++ b/packages/orange/config.yml @@ -12,7 +12,6 @@ authors: "Orange and OUDS Web contributors" current_version: "1.2.0" current_ruby_version: "1.2.0" docs_version: "1.2" -rfs_version: "v10.0.0" bootstrap_current_version: "5.3.6" bootstrap_docs_version: "5.3" bootstrap_github_org: "https://github.com/twbs" diff --git a/packages/orange/scss/ouds-web-grid.scss b/packages/orange/scss/ouds-web-grid.scss index 22f2dd97bb..812980e92e 100644 --- a/packages/orange/scss/ouds-web-grid.scss +++ b/packages/orange/scss/ouds-web-grid.scss @@ -15,8 +15,6 @@ $include-column-box-sizing: true !default; @import "@ouds/web-common/scss/mixins/grid"; @import "@ouds/web-common/scss/mixins/utilities"; -@import "@ouds/web-common/scss/vendor/rfs"; - @import "@ouds/web-common/scss/containers"; @import "@ouds/web-common/scss/grid"; diff --git a/packages/sosh/config.yml b/packages/sosh/config.yml index b421869297..56e891a064 100644 --- a/packages/sosh/config.yml +++ b/packages/sosh/config.yml @@ -12,7 +12,6 @@ authors: "Orange and OUDS Web Sosh contributors" current_version: "1.2.0" current_ruby_version: "1.2.0" docs_version: "1.2" -rfs_version: "v10.0.0" bootstrap_current_version: "5.3.6" bootstrap_docs_version: "5.3" bootstrap_github_org: "https://github.com/twbs" diff --git a/packages/sosh/scss/ouds-web-grid.scss b/packages/sosh/scss/ouds-web-grid.scss index acfa3c8cdd..5123f0ad4e 100644 --- a/packages/sosh/scss/ouds-web-grid.scss +++ b/packages/sosh/scss/ouds-web-grid.scss @@ -15,8 +15,6 @@ $include-column-box-sizing: true !default; @import "@ouds/web-common/scss/mixins/grid"; @import "@ouds/web-common/scss/mixins/utilities"; -@import "@ouds/web-common/scss/vendor/rfs"; - @import "@ouds/web-common/scss/containers"; @import "@ouds/web-common/scss/grid"; diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 0707036bce..601fcea5c2 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -43,7 +43,7 @@ align-items: center; width: 100%; padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x); - @include font-size(var(--#{$prefix}accordion-btn-font-size)); // OUDS mod + font-size: var(--#{$prefix}accordion-btn-font-size); // OUDS mod font-weight: var(--#{$prefix}accordion-btn-font-weight); // OUDS mod line-height: var(--#{$prefix}accordion-btn-line-height); // OUDS mod color: var(--#{$prefix}accordion-btn-color); diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 35d3a02337..c3864ad892 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -31,7 +31,7 @@ // OUDS mod: no --#{$prefix}btn-padding-x --#{$prefix}btn-padding-y: #{$btn-padding-y}; // OUDS mod: no --#{$prefix}btn-font-family - // OUDS mod: no `@include rfs($btn-font-size, --#{$prefix}btn-font-size)` + // OUDS mod: no --#{$prefix}btn-font-size --#{$prefix}btn-font-weight: #{$btn-font-weight}; // OUDS mod: no `--#{$prefix}btn-line-height` --#{$prefix}btn-color: #{$btn-color}; diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 8785059561..e6d2eccac3 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -24,7 +24,7 @@ // OUDS mod: no --#{$prefix}dropdown-padding-x --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y}; --#{$prefix}dropdown-spacer: #{$dropdown-spacer}; - @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size); + --#{$prefix}dropdown-font-size: #{$dropdown-font-size}; --#{$prefix}dropdown-line-height: #{$dropdown-line-height}; // OUDS mod --#{$prefix}dropdown-color: #{$dropdown-color}; --#{$prefix}dropdown-bg: #{$dropdown-bg}; @@ -55,7 +55,7 @@ min-width: var(--#{$prefix}dropdown-min-width); padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-y); margin: 0; // Override default margin of ul - @include font-size(var(--#{$prefix}dropdown-font-size)); + font-size: var(--#{$prefix}dropdown-font-size); line-height: var(--#{$prefix}dropdown-line-height); // OUDS mod color: var(--#{$prefix}dropdown-color); text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) @@ -224,7 +224,7 @@ display: block; padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x); margin-bottom: 0; // for use with heading elements - @include font-size($font-size-sm); + font-size: $font-size-sm; color: var(--#{$prefix}dropdown-header-color); white-space: nowrap; // as with > li > a } diff --git a/scss/_images.scss b/scss/_images.scss index 9d4b43e94c..e9ef93e740 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -37,6 +37,6 @@ } .figure-caption { - @include font-size($figure-caption-font-size); + font-size: $figure-caption-font-size; color: $figure-caption-color; } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index aaf11695f0..36ce47ae4d 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -2,9 +2,6 @@ // // Used in conjunction with global variables to enable certain theme features. -// Vendor -@import "vendor/rfs"; - // Deprecate @import "mixins/deprecate"; diff --git a/scss/_nav.scss b/scss/_nav.scss index 4a90c326cd..63a6d7bbfe 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -7,7 +7,7 @@ // scss-docs-start nav-css-vars --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x}; --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y}; - @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size); + --#{$prefix}nav-link-font-size: #{$nav-link-font-size}; --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight}; --#{$prefix}nav-link-color: #{$nav-link-color}; --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color}; @@ -26,7 +26,7 @@ display: flex; // OUDS mod: instead of `block` align-items: center; // OUDS mod padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x); - @include font-size(var(--#{$prefix}nav-link-font-size)); + font-size: var(--#{$prefix}nav-link-font-size); font-weight: var(--#{$prefix}nav-link-font-weight); color: var(--#{$prefix}nav-link-color); text-decoration: if($link-decoration == none, null, none); diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 1b3ef6909a..873a03bad3 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -122,7 +122,7 @@ --bs-dropdown-min-width: 8.75rem; @include media-breakpoint-down(lg) { - @include rfs($font-size-sm, --bs-dropdown-font-size); + --bs-dropdown-font-size: #{$font-size-sm}; --bs-dropdown-line-height: #{$line-height-sm}; --bs-dropdown-item-padding-y: #{$dropdown-item-padding-y + .0625rem}; } @@ -147,7 +147,7 @@ margin-top: var(--#{$prefix}navbar-brand-margin-y); margin-right: var(--#{$prefix}navbar-brand-margin-end); margin-bottom: var(--#{$prefix}navbar-brand-margin-y); - @include font-size(var(--#{$prefix}navbar-brand-font-size)); + font-size: var(--#{$prefix}navbar-brand-font-size); line-height: 1; color: var(--#{$prefix}navbar-brand-color); text-decoration: if($link-decoration == none, null, none); @@ -195,7 +195,7 @@ // scss-docs-start navbar-nav-css-vars --#{$prefix}nav-link-padding-x: var(--#{$prefix}navbar-nav-link-padding-x); // OUDS mod --#{$prefix}nav-link-padding-y: var(--#{$prefix}navbar-nav-link-padding-y); // OUDS mod - @include rfs(var(--#{$prefix}navbar-nav-font-size, $font-size-base), --#{$prefix}nav-link-font-size); // OUDS mod + --#{$prefix}nav-link-font-size: var(--#{$prefix}navbar-nav-font-size, $font-size-base); // OUDS mod --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight}; --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color); --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color); @@ -207,7 +207,7 @@ flex-direction: column; // cannot use `inherit` to get the `.navbar`s value padding: var(--#{$prefix}navbar-nav-padding-top) var(--#{$prefix}navbar-nav-padding-x) var(--#{$prefix}navbar-nav-padding-bottom); // OUDS mod margin-bottom: 0; - @include font-size(var(--#{$prefix}navbar-nav-font-size)); // OUDS mod + font-size: var(--#{$prefix}navbar-nav-font-size); // OUDS mod line-height: var(--#{$prefix}navbar-nav-line-height, $line-height-base); // OUDS mod letter-spacing: var(--#{$prefix}navbar-nav-letter-spacing, $letter-spacing-base); // OUDS mod // OUDS mod: Handle .nav-link and .nav-icon slightly differently than Bs @@ -326,7 +326,7 @@ .navbar-toggler { padding: var(--#{$prefix}navbar-toggler-padding-y) calc(var(--#{$prefix}navbar-toggler-padding-x) / 2) var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x); // OUDS mod margin-right: calc(-.5 * var(--#{$prefix}navbar-toggler-padding-x)); // OUDS mod - @include font-size(var(--#{$prefix}navbar-toggler-font-size)); + font-size: var(--#{$prefix}navbar-toggler-font-size); line-height: 1; color: var(--#{$prefix}navbar-color); background-color: transparent; // remove default button style diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 60a56d441b..60389fe0a8 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -5,7 +5,7 @@ --#{$prefix}pagination-padding-end: #{$pagination-padding-end}; // OUDS mod --#{$prefix}pagination-margin-y: #{$pagination-margin-y}; // OUDS mod --#{$prefix}pagination-margin-x-first-last: #{$pagination-margin-x-first-last}; // OUDS mod - @include rfs($pagination-font-size, --#{$prefix}pagination-font-size); + --#{$prefix}pagination-font-size: #{$pagination-font-size}; --#{$prefix}pagination-font-weight: #{$font-weight-bold}; // OUDS mod --#{$prefix}pagination-color: #{$pagination-color}; --#{$prefix}pagination-bg: #{$pagination-bg}; @@ -47,7 +47,7 @@ align-items: center; // OUDS mod justify-content: center; // OUDS mod padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x); - @include font-size(var(--#{$prefix}pagination-font-size)); + font-size: var(--#{$prefix}pagination-font-size); font-weight: var(--#{$prefix}pagination-font-weight); // OUDS mod color: var(--#{$prefix}pagination-color); text-decoration: if($link-decoration == none, null, none); diff --git a/scss/_popover.scss b/scss/_popover.scss index 187cd6b322..b32e7a4c67 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -2,7 +2,7 @@ // scss-docs-start popover-css-vars --#{$prefix}popover-zindex: #{$zindex-popover}; --#{$prefix}popover-max-width: #{$popover-max-width}; - @include rfs($popover-font-size, --#{$prefix}popover-font-size); + --#{$prefix}popover-font-size: #{$popover-font-size}; --#{$prefix}popover-line-height: #{$popover-line-height}; // OUDS mod --#{$prefix}popover-font-weight: #{$popover-font-weight}; // OUDS mod --#{$prefix}popover-bg: #{$popover-bg}; @@ -15,7 +15,7 @@ --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y}; --#{$prefix}popover-header-padding-top: #{$popover-header-padding-top}; // OUDS mod --#{$prefix}popover-header-padding-bottom: #{$popover-header-padding-bottom}; // OUDS mod - @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size); + --#{$prefix}popover-header-font-size: #{$popover-header-font-size}; --#{$prefix}popover-header-line-height: #{$popover-header-line-height}; // OUDS mod --#{$prefix}popover-header-color: #{$popover-header-color}; --#{$prefix}popover-header-bg: #{$popover-header-bg}; @@ -35,7 +35,7 @@ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); - @include font-size(var(--#{$prefix}popover-font-size)); + font-size: var(--#{$prefix}popover-font-size); line-height: var(--#{$prefix}popover-line-height); // OUDS mod // Allow breaking very long words so they don't overflow the popover's bounds word-wrap: break-word; @@ -187,9 +187,9 @@ .popover-header { padding: var(--#{$prefix}popover-header-padding-y, var(--#{$prefix}popover-header-padding-top)) var(--#{$prefix}popover-header-padding-x) var(--#{$prefix}popover-header-padding-y, var(--#{$prefix}popover-header-padding-bottom)); // OUDS mod: instead of `var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x)` margin-bottom: 0; // Reset the default from Reboot + font-size: var(--#{$prefix}popover-header-font-size); font-weight: var(--#{$prefix}popover-font-weight); // OUDS mod line-height: var(--#{$prefix}popover-header-line-height); // OUDS mod - @include font-size(var(--#{$prefix}popover-header-font-size)); color: var(--#{$prefix}popover-header-color); /* rtl:remove */ diff --git a/scss/_progress.scss b/scss/_progress.scss index d5466e8f6b..2c2457a761 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -12,7 +12,7 @@ .progress-stacked { // scss-docs-start progress-css-vars --#{$prefix}progress-height: #{$progress-height}; - @include rfs($progress-font-size, --#{$prefix}progress-font-size); + --#{$prefix}progress-font-size: #{$progress-font-size}; --#{$prefix}progress-bg: #{$progress-bg}; --#{$prefix}progress-border-radius: #{$progress-border-radius}; --#{$prefix}progress-box-shadow: #{$progress-box-shadow}; @@ -26,7 +26,7 @@ display: flex; height: var(--#{$prefix}progress-height); overflow: hidden; // force rounded corners by cropping it - @include font-size(var(--#{$prefix}progress-font-size)); + font-size: var(--#{$prefix}progress-font-size); background-color: var(--#{$prefix}progress-bg); @include border-radius(var(--#{$prefix}progress-border-radius)); @include box-shadow(var(--#{$prefix}progress-box-shadow)); diff --git a/scss/_reboot.scss b/scss/_reboot.scss index e6b7f73c32..e11384ea37 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -27,7 +27,7 @@ #{$ouds-root-selector} { // OUDS mod: instead of `:root` @if $font-size-root != null { - @include font-size(var(--#{$prefix}root-font-size)); + font-size: var(--#{$prefix}root-font-size); } // OUDS mod: Improve focus visibility when fixed/sticky header is used @@ -66,7 +66,7 @@ margin: 0; // 1 font-family: var(--#{$prefix}body-font-family); font-synthesis: none; // OUDS mod // 5 - @include font-size(var(--#{$prefix}body-font-size)); + font-size: var(--#{$prefix}body-font-size); font-weight: var(--#{$prefix}body-font-weight); line-height: var(--#{$prefix}body-line-height); color: var(--#{$prefix}color-content-default); // OUDS mod: instead of `var(--#{$prefix}body-color)` @@ -129,32 +129,32 @@ hr { h1 { @extend %heading; - @include get-font-size("heading-xlarge"); // OUDS mod: instead of `@include font-size($h1-font-size)` + @include get-font-size("heading-xlarge"); // OUDS mod: instead of `font-size: $h1-font-size` } h2 { @extend %heading; - @include get-font-size("heading-large"); // OUDS mod: instead of `@include font-size($h2-font-size)` + @include get-font-size("heading-large"); // OUDS mod: instead of `font-size: $h2-font-size` } h3 { @extend %heading; - @include get-font-size("heading-medium"); // OUDS mod: instead of `@include font-size($h3-font-size)` + @include get-font-size("heading-medium"); // OUDS mod: instead of `font-size: $h3-font-size` } h4 { @extend %heading; - @include get-font-size("heading-small"); // OUDS mod: instead of `@include font-size($h4-font-size)` + @include get-font-size("heading-small"); // OUDS mod: instead of `font-size: $h4-font-size` } h5 { @extend %heading; - @include get-font-size("body-large"); // OUDS mod: instead of `@include font-size($h5-font-size)` + @include get-font-size("body-large"); // OUDS mod: instead of `font-size: $h5-font-size` } h6 { @extend %heading; - @include get-font-size("body-medium"); // OUDS mod: instead of `@include font-size($h6-font-size)` + @include get-font-size("body-medium"); // OUDS mod: instead of `font-size: $h6-font-size` } // scss-docs-end ouds-font-implementation @@ -289,7 +289,7 @@ strong { // Add the correct font size in all browsers small { - @include get-font-size("body-small"); // OUDS mod: instead of `@include font-size($small-font-size)` + @include get-font-size("body-small"); // OUDS mod: instead of `font-size: $small-font-size` } @@ -310,7 +310,7 @@ mark { sub, sup { position: relative; - @include font-size($sub-sup-font-size); + font-size: $sub-sup-font-size; line-height: 0; vertical-align: baseline; } @@ -391,7 +391,7 @@ code, kbd, samp { font-family: $font-family-code; - @include font-size(1em); // Correct the odd `em` font sizing in all browsers. + font-size: 1em; // Correct the odd `em` font sizing in all browsers. } // 1. Remove browser default top margin @@ -403,12 +403,12 @@ pre { margin-top: 0; // 1 margin-bottom: $ouds-space-fixed-medium; // 2 // OUDS mod: instead of `1rem` overflow: auto; // 3 - @include get-font-size("code-medium"); // OUDS mod: instead of `@include font-size($code-font-size)` + @include get-font-size("code-medium"); // OUDS mod: instead of `font-size: $code-font-size` color: $pre-color; // Account for some code outputs that place code tags in pre tags code { - @include font-size(inherit); + font-size: inherit; color: inherit; word-break: normal; } @@ -416,7 +416,7 @@ pre { var, // OUDS mod code { - @include font-size($code-font-size); + font-size: $code-font-size; font-style: normal; // OUDS mod: is italic in all browsers color: var(--#{$prefix}color-content-muted); word-wrap: break-word; @@ -429,14 +429,14 @@ a > :is(var, code) { kbd { padding: $kbd-padding-y $kbd-padding-x; - @include font-size($kbd-font-size); + font-size: $kbd-font-size; color: $kbd-color; background-color: $kbd-bg; @include border-radius($border-radius-sm, $border-radius-sm); // OUDS mod: instead of `@include border-radius($border-radius-sm)` kbd { padding: 0; - @include font-size(1em); + font-size: 1em; font-weight: $nested-kbd-font-weight; } } @@ -547,7 +547,7 @@ optgroup, textarea { margin: 0; // 1 font-family: inherit; - @include font-size(inherit); + font-size: inherit; line-height: inherit; /* rtl:remove */ @@ -641,7 +641,7 @@ legend { margin-bottom: $legend-margin-bottom; font-weight: $legend-font-weight; // OUDS mod: no line-height - @include get-font-size("body-large"); // OUDS mod: instead of `@include font-size($legend-font-size)` + @include get-font-size("body-large"); // OUDS mod: instead of `font-size: $legend-font-size` + * { clear: left; // 2 diff --git a/scss/_root.scss b/scss/_root.scss index 7d54879514..70bb597bf9 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -245,7 +245,7 @@ --#{$prefix}root-font-size: #{$font-size-root}; } --#{$prefix}body-font-family: #{inspect($font-family-base)}; - @include rfs($font-size-base, --#{$prefix}body-font-size); + --#{$prefix}body-font-size: #{$font-size-base}; --#{$prefix}body-font-weight: #{$font-weight-base}; --#{$prefix}body-line-height: #{$line-height-base}; --#{$prefix}body-letter-spacing: #{$letter-spacing-base}; // OUDS mod diff --git a/scss/_toasts.scss b/scss/_toasts.scss index 8f6996d357..59d8ccc6b5 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -5,7 +5,7 @@ --#{$prefix}toast-padding-y: #{$toast-padding-y}; --#{$prefix}toast-spacing: #{$toast-spacing}; --#{$prefix}toast-max-width: #{$toast-max-width}; - @include rfs($toast-font-size, --#{$prefix}toast-font-size); + --#{$prefix}toast-font-size: #{$toast-font-size}; --#{$prefix}toast-color: #{$toast-color}; --#{$prefix}toast-bg: #{$toast-background-color}; --#{$prefix}toast-border-width: #{$toast-border-width}; @@ -19,7 +19,7 @@ width: var(--#{$prefix}toast-max-width); max-width: 100%; - @include font-size(var(--#{$prefix}toast-font-size)); + font-size: var(--#{$prefix}toast-font-size); color: var(--#{$prefix}toast-color); pointer-events: auto; background-color: var(--#{$prefix}toast-bg); diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 9cde52e154..5166ebbacb 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -6,7 +6,7 @@ --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x}; --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y}; --#{$prefix}tooltip-margin: #{$tooltip-margin}; - @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size); + --#{$prefix}tooltip-font-size: #{$tooltip-font-size}; --#{$prefix}tooltip-font-weight: #{$tooltip-font-weight}; // OUDS mod: extra CSS variable --#{$prefix}tooltip-line-height: #{$tooltip-line-height}; // OUDS mod --#{$prefix}tooltip-color: #{$tooltip-color}; @@ -27,7 +27,7 @@ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); - @include font-size(var(--#{$prefix}tooltip-font-size)); + font-size: var(--#{$prefix}tooltip-font-size); font-weight: var(--#{$prefix}tooltip-font-weight); // OUDS mod line-height: var(--#{$prefix}tooltip-line-height); // OUDS mod // Allow breaking very long words so they don't overflow the tooltip's bounds diff --git a/scss/_type.scss b/scss/_type.scss index c1d1415238..f9eca36bf8 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -27,7 +27,7 @@ .lead { - @include get-font-size("body-large"); // OUDS mod: instead of `@include font-size($lead-font-size)` + @include get-font-size("body-large"); // OUDS mod: instead of `font-size: $lead-font-size` font-weight: $lead-font-weight; } @@ -39,7 +39,7 @@ font-weight: $display-font-weight; line-height: $display-line-height; @extend %heading; // OUDS mod - @include get-font-size($font-size); // OUDS mod: instead of `@include font-size($font-size)` + @include get-font-size($font-size); // OUDS mod: instead of `font-size: $font-size` } } @@ -86,7 +86,7 @@ margin-bottom: $blockquote-margin-y; > p { - @include get-font-size("body-large"); // OUDS mod: instead of `@include font-size($blockquote-font-size)` in `.blockquote` + @include get-font-size("body-large"); // OUDS mod: instead of `font-size: $blockquote-font-size` in `.blockquote` } > :last-child { @@ -97,7 +97,7 @@ .blockquote-footer { margin-top: -$blockquote-margin-y; margin-bottom: $blockquote-margin-y; - @include get-font-size("body-small"); // OUDS mod: instead of `@include font-size($blockquote-footer-font-size)` + @include get-font-size("body-small"); // OUDS mod: instead of `font-size: $blockquote-footer-font-size` color: $blockquote-footer-color; &::before { diff --git a/scss/_variables.scss b/scss/_variables.scss index 490ebd3a74..a2677af483 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -378,7 +378,6 @@ $enable-grid-classes: true !default; $enable-container-classes: true !default; $enable-cssgrid: false !default; $enable-button-pointers: true !default; -$enable-rfs: false !default; $enable-validation-icons: true !default; $enable-negative-margins: false !default; $enable-deprecation-messages: false !default; diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index be814d8494..26014e489d 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -7,7 +7,7 @@ width: 100%; padding: calc($input-padding-y - 1px) $input-padding-x calc($input-padding-y + 1px); // OUDS mod font-family: $input-font-family; - @include font-size($input-font-size); + font-size: $input-font-size; font-weight: $input-font-weight; line-height: $input-line-height; color: $input-color; @@ -159,8 +159,8 @@ .form-control-sm { min-height: $input-height-sm; padding: $input-padding-y-sm $input-padding-x-sm calc($input-padding-y-sm + 1px); // OUDS mod + font-size: $input-font-size-sm; line-height: $line-height-sm; // OUDS mod - @include font-size($input-font-size-sm); @include border-radius($input-border-radius-sm); &::file-selector-button { @@ -172,8 +172,8 @@ .form-control-lg { min-height: $input-height-lg; + font-size: $input-font-size-lg; line-height: $input-line-height-lg; // OUDS mod - @include font-size($input-font-size-lg); @include border-radius($input-border-radius-lg); &::file-selector-button { diff --git a/scss/forms/_form-text.scss b/scss/forms/_form-text.scss index 08940ef09f..dd2f810226 100644 --- a/scss/forms/_form-text.scss +++ b/scss/forms/_form-text.scss @@ -4,7 +4,7 @@ .form-text { margin-top: $form-text-margin-top; - @include get-font-size("label-medium"); // OUDS mod: instead of @include font-size($form-text-font-size); + @include get-font-size("label-medium"); // OUDS mod: instead of font-size: $form-text-font-size; // OUDS mod: no font-style // OUDS mod: no font-weight color: $form-text-color; diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index af6ecda37c..15cf27671f 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -49,7 +49,7 @@ display: flex; align-items: center; padding: $input-group-addon-padding-y $input-group-addon-padding-x; - @include font-size($input-font-size); // Match inputs + font-size: $input-font-size; // Match inputs font-weight: $input-group-addon-font-weight; line-height: $input-line-height; color: $input-group-addon-color; @@ -71,8 +71,8 @@ .input-group-lg > .input-group-text, .input-group-lg > .btn { padding: $input-padding-y-lg $input-padding-x-lg; + font-size: $input-font-size-lg; line-height: var(--#{$prefix}font-line-height-body-large); // OUDS mod - @include font-size($input-font-size-lg); @include border-radius($input-border-radius-lg); } @@ -81,8 +81,8 @@ .input-group-sm > .input-group-text, .input-group-sm > .btn { padding: $input-padding-y-sm $input-padding-x-sm; + font-size: $input-font-size-sm; line-height: $line-height-sm; // OUDS mod - @include font-size($input-font-size-sm); @include border-radius($input-border-radius-sm); } diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss index d99439f7b0..72307c1994 100644 --- a/scss/forms/_labels.scss +++ b/scss/forms/_labels.scss @@ -4,7 +4,7 @@ .form-label { margin-bottom: $form-label-margin-bottom; - @include font-size($form-label-font-size); + font-size: $form-label-font-size; font-style: $form-label-font-style; font-weight: $form-label-font-weight; color: $form-label-color; @@ -70,7 +70,7 @@ padding-top: calc($input-padding-y + $input-border-width); padding-bottom: calc($input-padding-y + $input-border-width); margin-bottom: 0; // Override the `` default - @include font-size(inherit); // Override the `` default + font-size: inherit; // Override the `` default font-style: $form-label-font-style; font-weight: $form-label-font-weight; line-height: $input-line-height; @@ -80,11 +80,11 @@ .col-form-label-lg { padding-top: calc($input-padding-y-lg + $input-border-width); padding-bottom: calc($input-padding-y-lg + $input-border-width); - @include font-size($input-font-size-lg); + font-size: $input-font-size-lg; } .col-form-label-sm { padding-top: calc($input-padding-y-sm + $input-border-width); padding-bottom: calc($input-padding-y-sm + $input-border-width); - @include font-size($input-font-size-sm); + font-size: $input-font-size-sm; } diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 212deb077b..871f73b8eb 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -77,7 +77,7 @@ @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { --#{$prefix}btn-padding-y: #{$padding-y}; --#{$prefix}btn-padding-x: #{$padding-x}; - @include rfs($font-size, --#{$prefix}btn-font-size); + --#{$prefix}btn-font-size: #{$font-size}; --#{$prefix}btn-border-radius: #{$border-radius}; } // scss-docs-end btn-size-mixin diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 7628e5ccdd..f1ebd5d88e 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -58,7 +58,7 @@ display: none; width: 100%; margin-top: $form-feedback-margin-top; - @include font-size($form-feedback-font-size); + font-size: $form-feedback-font-size; font-style: $form-feedback-font-style; font-weight: $font-weight-bold; // OUDS mod line-height: $form-feedback-line-height; // OUDS mod diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss index 754c444dce..889910c3a2 100644 --- a/scss/mixins/_pagination.scss +++ b/scss/mixins/_pagination.scss @@ -4,7 +4,7 @@ @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) { --#{$prefix}pagination-padding-x: #{$padding-x}; --#{$prefix}pagination-padding-y: #{$padding-y}; - @include rfs($font-size, --#{$prefix}pagination-font-size); + --#{$prefix}pagination-font-size: #{$font-size}; --#{$prefix}pagination-border-radius: #{$border-radius}; } // scss-docs-end pagination-mixin diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index 22172f76b8..0382f39b34 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -1,6 +1,6 @@ // Utility generator // Used to generate utilities & print utilities -@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) { +@mixin generate-utility($utility, $infix: "") { $values: map-get($utility, values); $bootstrap-compatibility: map-get($utility, bootstrap-compatibility); // OUDS mod @@ -33,19 +33,6 @@ // Don't prefix if value key is null (e.g. with shadow class) $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, ""); - @if map-get($utility, rfs) { - // Inside the media query - @if $is-rfs-media-query { - $val: rfs-value($value); - - // Do not render anything if fluid and non fluid values are the same - $value: if($val == rfs-fluid-value($value), null, $val); - } - @else { - $value: rfs-fluid-value($value); - } - } - $is-css-var: map-get($utility, css-var); $is-local-vars: map-get($utility, local-vars); $is-rtl: map-get($utility, rtl); diff --git a/scss/tests/mixins/_utilities.test.scss b/scss/tests/mixins/_utilities.test.scss index 2ac331c96a..bf1a9a42ea 100644 --- a/scss/tests/mixins/_utilities.test.scss +++ b/scss/tests/mixins/_utilities.test.scss @@ -1,7 +1,6 @@ $prefix: bs-; $enable-important-utilities: false; -// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it // OUDS mod @import "../../config"; @import "../../functions"; // Added because needed by "variables" @@ -318,37 +317,6 @@ $enable-important-utilities: false; } } } - - @include describe("rfs") { - @include it("sets the fluid value when not inside media query") { - @include test-generate-utility( - ( - property: padding, - values: 1rem, - rfs: true - ) - ) { - .padding-1rem { - padding: rfs-fluid-value(1rem); - } - } - } - - @include it("sets the value when inside the media query") { - @include test-generate-utility( - ( - property: padding, - values: 1rem, - rfs: true - ), - $is-rfs-media-query: true - ) { - .padding-1rem { - padding: rfs-value(1rem); - } - } - } - } } @include describe("$infix") { diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss index 62e1d398e3..5b9b6651cb 100644 --- a/scss/utilities/_api.scss +++ b/scss/utilities/_api.scss @@ -16,24 +16,6 @@ } } -// RFS rescaling -@media (min-width: $rfs-mq-value) { - @each $breakpoint in map-keys($grid-breakpoints) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - - @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) { - // Loop over each utility property - @each $key, $utility in $utilities { - // The utility can be disabled with `false`, thus check if the utility is a map first - // Only proceed if responsive media queries are enabled or if it's the base media query - @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") { - @include generate-utility($utility, $infix, true); - } - } - } - } -} - // Print utilities @media print { diff --git a/scss/vendor/_rfs.scss b/scss/vendor/_rfs.scss deleted file mode 100644 index aa1f82b961..0000000000 --- a/scss/vendor/_rfs.scss +++ /dev/null @@ -1,348 +0,0 @@ -// stylelint-disable scss/dimension-no-non-numeric-values - -// SCSS RFS mixin -// -// Automated responsive values for font sizes, paddings, margins and much more -// -// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE) - -// Configuration - -// Base value -$rfs-base-value: 1.25rem !default; -$rfs-unit: rem !default; - -@if $rfs-unit != rem and $rfs-unit != px { - @error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`."; -} - -// Breakpoint at where values start decreasing if screen width is smaller -$rfs-breakpoint: 1200px !default; -$rfs-breakpoint-unit: px !default; - -@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem { - @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`."; -} - -// Resize values based on screen height and width -$rfs-two-dimensional: false !default; - -// Factor of decrease -$rfs-factor: 10 !default; - -@if type-of($rfs-factor) != number or $rfs-factor <= 1 { - @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1."; -} - -// Mode. Possibilities: "min-media-query", "max-media-query" -$rfs-mode: min-media-query !default; - -// Generate enable or disable classes. Possibilities: false, "enable" or "disable" -$rfs-class: false !default; - -// 1 rem = $rfs-rem-value px -$rfs-rem-value: 16 !default; - -// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14 -$rfs-safari-iframe-resize-bug-fix: false !default; - -// Disable RFS by setting $enable-rfs to false -$enable-rfs: true !default; - -// Cache $rfs-base-value unit -$rfs-base-value-unit: unit($rfs-base-value); - -@function divide($dividend, $divisor, $precision: 10) { - $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1); - $dividend: abs($dividend); - $divisor: abs($divisor); - @if $dividend == 0 { - @return 0; - } - @if $divisor == 0 { - @error "Cannot divide by 0"; - } - $remainder: $dividend; - $result: 0; - $factor: 10; - @while ($remainder > 0 and $precision >= 0) { - $quotient: 0; - @while ($remainder >= $divisor) { - $remainder: $remainder - $divisor; - $quotient: $quotient + 1; - } - $result: $result * 10 + $quotient; - $factor: $factor * .1; - $remainder: $remainder * 10; - $precision: $precision - 1; - @if ($precision < 0 and $remainder >= $divisor * 5) { - $result: $result + 1; - } - } - $result: $result * $factor * $sign; - $dividend-unit: unit($dividend); - $divisor-unit: unit($divisor); - $unit-map: ( - "px": 1px, - "rem": 1rem, - "em": 1em, - "%": 1% - ); - @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) { - $result: $result * map-get($unit-map, $dividend-unit); - } - @return $result; -} - -// Remove px-unit from $rfs-base-value for calculations -@if $rfs-base-value-unit == px { - $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1); -} -@else if $rfs-base-value-unit == rem { - $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value)); -} - -// Cache $rfs-breakpoint unit to prevent multiple calls -$rfs-breakpoint-unit-cache: unit($rfs-breakpoint); - -// Remove unit from $rfs-breakpoint for calculations -@if $rfs-breakpoint-unit-cache == px { - $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1); -} -@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" { - $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value)); -} - -// Calculate the media query value -$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit}); -$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width); -$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height); - -// Internal mixin used to determine which media query needs to be used -@mixin _rfs-media-query { - @if $rfs-two-dimensional { - @if $rfs-mode == max-media-query { - @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) { - @content; - } - } - @else { - @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) { - @content; - } - } - } - @else { - @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) { - @content; - } - } -} - -// Internal mixin that adds disable classes to the selector if needed. -@mixin _rfs-rule { - @if $rfs-class == disable and $rfs-mode == max-media-query { - // Adding an extra class increases specificity, which prevents the media query to override the property - &, - .disable-rfs &, - &.disable-rfs { - @content; - } - } - @else if $rfs-class == enable and $rfs-mode == min-media-query { - .enable-rfs &, - &.enable-rfs { - @content; - } - } @else { - @content; - } -} - -// Internal mixin that adds enable classes to the selector if needed. -@mixin _rfs-media-query-rule { - - @if $rfs-class == enable { - @if $rfs-mode == min-media-query { - @content; - } - - @include _rfs-media-query () { - .enable-rfs &, - &.enable-rfs { - @content; - } - } - } - @else { - @if $rfs-class == disable and $rfs-mode == min-media-query { - .disable-rfs &, - &.disable-rfs { - @content; - } - } - @include _rfs-media-query () { - @content; - } - } -} - -// Helper function to get the formatted non-responsive value -@function rfs-value($values) { - // Convert to list - $values: if(type-of($values) != list, ($values,), $values); - - $val: ""; - - // Loop over each value and calculate value - @each $value in $values { - @if $value == 0 { - $val: $val + " 0"; - } - @else { - // Cache $value unit - $unit: if(type-of($value) == "number", unit($value), false); - - @if $unit == px { - // Convert to rem if needed - $val: $val + " " + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value); - } - @else if $unit == rem { - // Convert to px if needed - $val: $val + " " + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value); - } @else { - // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value - $val: $val + " " + $value; - } - } - } - - // Remove first space - @return unquote(str-slice($val, 2)); -} - -// Helper function to get the responsive value calculated by RFS -@function rfs-fluid-value($values) { - // Convert to list - $values: if(type-of($values) != list, ($values,), $values); - - $val: ""; - - // Loop over each value and calculate value - @each $value in $values { - @if $value == 0 { - $val: $val + " 0"; - } @else { - // Cache $value unit - $unit: if(type-of($value) == "number", unit($value), false); - - // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value - @if not $unit or $unit != px and $unit != rem { - $val: $val + " " + $value; - } @else { - // Remove unit from $value for calculations - $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value))); - - // Only add the media query if the value is greater than the minimum value - @if abs($value) <= $rfs-base-value or not $enable-rfs { - $val: $val + " " + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px); - } - @else { - // Calculate the minimum value - $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor); - - // Calculate difference between $value and the minimum value - $value-diff: abs($value) - $value-min; - - // Base value formatting - $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px); - - // Use negative value if needed - $min-width: if($value < 0, -$min-width, $min-width); - - // Use `vmin` if two-dimensional is enabled - $variable-unit: if($rfs-two-dimensional, vmin, vw); - - // Calculate the variable width between 0 and $rfs-breakpoint - $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit}; - - // Return the calculated value - $val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")"; - } - } - } - } - - // Remove first space - @return unquote(str-slice($val, 2)); -} - -// RFS mixin -@mixin rfs($values, $property: font-size) { - @if $values != null { - $val: rfs-value($values); - $fluid-val: rfs-fluid-value($values); - - // Do not print the media query if responsive & non-responsive values are the same - @if $val == $fluid-val { - #{$property}: $val; - } - @else { - @include _rfs-rule () { - #{$property}: if($rfs-mode == max-media-query, $val, $fluid-val); - - // Include safari iframe resize fix if needed - min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null); - } - - @include _rfs-media-query-rule () { - #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val); - } - } - } -} - -// Shorthand helper mixins -@mixin font-size($value) { - @include rfs($value); -} - -@mixin padding($value) { - @include rfs($value, padding); -} - -@mixin padding-top($value) { - @include rfs($value, padding-top); -} - -@mixin padding-right($value) { - @include rfs($value, padding-right); -} - -@mixin padding-bottom($value) { - @include rfs($value, padding-bottom); -} - -@mixin padding-left($value) { - @include rfs($value, padding-left); -} - -@mixin margin($value) { - @include rfs($value, margin); -} - -@mixin margin-top($value) { - @include rfs($value, margin-top); -} - -@mixin margin-right($value) { - @include rfs($value, margin-right); -} - -@mixin margin-bottom($value) { - @include rfs($value, margin-bottom); -} - -@mixin margin-left($value) { - @include rfs($value, margin-left); -} diff --git a/site/src/content/docs/dual-mode.mdx b/site/src/content/docs/dual-mode.mdx index 5e07d864e0..b64f12dab9 100644 --- a/site/src/content/docs/dual-mode.mdx +++ b/site/src/content/docs/dual-mode.mdx @@ -141,7 +141,7 @@ In this scenario, you will have access to all the components available in OUDS W --#{$prefix}root-font-size: #{$font-size-root}; } --#{$prefix}body-font-family: #{inspect($font-family-base)}; - @include rfs($font-size-base, --#{$prefix}body-font-size); + --#{$prefix}body-font-size: #{$font-size-base}; --#{$prefix}body-font-weight: #{$font-weight-base}; --#{$prefix}body-line-height: #{$line-height-base}; @if $body-text-align != null { diff --git a/site/src/content/docs/foundation/options.mdx b/site/src/content/docs/foundation/options.mdx index 47696d032b..7f34f78041 100644 --- a/site/src/content/docs/foundation/options.mdx +++ b/site/src/content/docs/foundation/options.mdx @@ -33,7 +33,6 @@ You can find and customize these variables for key global options in OUDS Web’ | `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | | `$enable-reduced-motion` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]([[docsref:/getting-started/accessibility#reduced-motion]]), which suppresses certain animations/transitions based on the users’ browser/operating system preferences. | | `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. | -| `$enable-rfs` | `true` or `false` (default) | Globally enables [RFS]([[docsref:/getting-started/rfs]]). | | `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. | | `$enable-smooth-scroll` | `true` (default) or `false` | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query]([[docsref:/getting-started/accessibility#reduced-motion]]) | | `$enable-fixed-header` | `true` (default) or `false` | Set `scroll-padding-top` rule to root element, preventing focus from being hidden under a fixed header. | */} diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx index a317ea36ef..be5e57d8ac 100644 --- a/site/src/content/docs/getting-started/migration-from-boosted.mdx +++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx @@ -785,6 +785,10 @@ See [our new Text Area page]([[docsref:/components/text-area]]) for more informa - Warning `scss/mixins/_alert.scss` doesn’t exist anymore. If you were importing it in your project, please make sure to remove it. +- Warning `scss/vendor/_rfs.scss` has been removed. It was deprecated and should not have been used. + +- Breaking `font-size()` mixin has been removed. Please refer to `get-font-size()` mixin instead. + - New OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables.
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx index 8c1cd4d3ae..e2a40d67e6 100644 --- a/site/src/content/docs/getting-started/migration.mdx +++ b/site/src/content/docs/getting-started/migration.mdx @@ -9,6 +9,20 @@ aliases: toc: true --- +## v1.3.0 + +
+ +### CSS and Sass variables + +- Warning `scss/vendor/_rfs.scss` has been removed. It was deprecated and should not have been used. + +- Warning `font-size()` mixin has been removed. Please refer to `get-font-size()` mixin instead. + +### Dual mode + +1. Change the `@include rfs($font-size-base, --#{$prefix}body-font-size);` into `--#{$prefix}body-font-size: #{$font-size-base};`. + ## v1.2.0
@@ -35,12 +49,13 @@ toc: true #### Colors -- New We replaced the color palette page with a new and improved colors page, it lists all existing semantic colors available in OUDS Web. Read more in our [colors page]([[docsref:/foundation/colors]]). +- New We replaced the color palette page with a new and improved colors page, it lists all existing semantic colors available in OUDS Web. Read more in our [colors page]([[docsref:/foundation/colors]]). ### Dual mode 1. Update `@ouds/web-common` and `@ouds/web-[theme]` to v1.2.0. 2. Remove `@import "boosted/scss/nav";`, `@import "boosted/scss/navbar";`, `@import "boosted/scss/footer";`, and `@import "boosted/scss/orange-navbar";` from the Boosted custom import stack. +3. Change the `@include rfs($font-size-base, --#{$prefix}body-font-size);` into `--#{$prefix}body-font-size: #{$font-size-base};`. ## v1.1.0 diff --git a/site/src/content/docs/utilities/api.mdx b/site/src/content/docs/utilities/api.mdx index 17d6576b56..adbaf720f8 100644 --- a/site/src/content/docs/utilities/api.mdx +++ b/site/src/content/docs/utilities/api.mdx @@ -26,7 +26,6 @@ The `$utilities` map contains all our utilities and is later merged with your cu | [`responsive`](#responsive) | Optional | `false` | Boolean indicating if responsive classes should be generated. | | [`print`](#print) | Optional | `false` | Boolean indicating if print classes need to be generated. | | `rtl` | Optional | `true` | Boolean indicating if utility should be kept in RTL. | -{/* | `rfs` | Optional | `false` | Boolean to enable [fluid rescaling with RFS]([[docsref:/getting-started/rfs]]). | */} ## API explained diff --git a/site/src/libs/config.ts b/site/src/libs/config.ts index fb72c0494e..38e7d916e3 100644 --- a/site/src/libs/config.ts +++ b/site/src/libs/config.ts @@ -2,7 +2,7 @@ import fs from 'node:fs' import path from 'node:path' import yaml from 'js-yaml' import { z } from 'zod' -import { zPrefixedVersionSemver, zVersionMajorMinor, zVersionSemver } from './validation' +import { zVersionMajorMinor, zVersionSemver } from './validation' // The config schema used to validate the config file content and ensure all values required by the site are valid. const configSchema = z.object({ @@ -60,7 +60,6 @@ const configSchema = z.object({ web: z.string().url() }), repo: z.string().url(), - rfs_version: zPrefixedVersionSemver, subtitle: z.string(), title: z.string(), toc: z.object({ diff --git a/site/src/libs/validation.ts b/site/src/libs/validation.ts index 1a360bba62..73ec40f330 100644 --- a/site/src/libs/validation.ts +++ b/site/src/libs/validation.ts @@ -7,7 +7,6 @@ const unboundSemverRegex = /(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?/ export const zVersionSemver = z.string().regex(new RegExp(`^${unboundSemverRegex.source}$`)) -export const zPrefixedVersionSemver = z.string().regex(new RegExp(`^v${unboundSemverRegex.source}$`)) export const zHexColor = z.string().regex(/^#(?:[0-9a-fA-F]{3}){1,2}$/) // TODO: Tried something with `/^(?:#(?:[0-9a-fA-F]{3}){1,2})|(?:rgba\(\d{1,3}, \d{1,3}, \d{1,3}, \d(?:\.\d{1,2})?\))$/`, but didn't worked for our opacity colors, see data.ts, l:84 export const zNamedHexColors = (count: number) => { diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss index 541fb3fbff..b952142feb 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -398,7 +398,7 @@ } pre code { - @include font-size(inherit); + font-size: inherit; color: var(--#{$prefix}color-content-default); // OUDS mod: instead of `var(--bs-body-color)` word-wrap: normal; }