From: Mark Otto Date: Thu, 18 Dec 2025 22:54:44 +0000 (-0800) Subject: Prefix CSS variables with PostCSS (#41951) X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1fc1c796c68b939e4878f80f44d35da9f09f8e75;p=thirdparty%2Fbootstrap.git Prefix CSS variables with PostCSS (#41951) * Add custom property prefixing postcss plugin * Remove $prefix variable, replace with PostCSS plugin to prefix CSS variables --- diff --git a/build/postcss.config.mjs b/build/postcss.config.mjs index 5085844e6e..60b468834f 100644 --- a/build/postcss.config.mjs +++ b/build/postcss.config.mjs @@ -1,3 +1,6 @@ +import postcssPrefixCustomProperties from 'postcss-prefix-custom-properties' +import autoprefixer from 'autoprefixer' + const mapConfig = { inline: false, annotation: true, @@ -7,10 +10,12 @@ const mapConfig = { export default context => { return { map: context.file.dirname.includes('examples') ? false : mapConfig, - plugins: { - autoprefixer: { - cascade: false - } - } + plugins: [ + postcssPrefixCustomProperties({ + prefix: 'bs-', + ignore: [/^--bs-/, /^--bd-/] + }), + autoprefixer({ cascade: false }) + ] } } diff --git a/package-lock.json b/package-lock.json index f969af475c..f2f49625e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,9 @@ } ], "license": "MIT", + "dependencies": { + "postcss-prefix-custom-properties": "^0.1.0" + }, "devDependencies": { "@astrojs/check": "^0.9.6", "@astrojs/markdown-remark": "^6.3.10", @@ -431,6 +434,27 @@ } } }, + "node_modules/@astrojs/language-server/node_modules/volar-service-emmet": { + "version": "0.0.63", + "resolved": "https://registry.npmjs.org/volar-service-emmet/-/volar-service-emmet-0.0.63.tgz", + "integrity": "sha512-dP96bxXsbfWH8D4n+jWnFD/zVDnm+1LgCV12yIwPIhmpJyElEnzmaKR7EGBZVf3tIkKmUObnU8YATZBn5iG9eQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@emmetio/css-parser": "^0.4.0", + "@emmetio/html-matcher": "^1.3.0", + "@vscode/emmet-helper": "^2.9.3", + "vscode-uri": "^3.0.8" + }, + "peerDependencies": { + "@volar/language-service": "~2.4.0" + }, + "peerDependenciesMeta": { + "@volar/language-service": { + "optional": true + } + } + }, "node_modules/@astrojs/markdown-remark": { "version": "6.3.10", "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-6.3.10.tgz", @@ -13248,7 +13272,6 @@ "version": "3.3.11", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", - "dev": true, "funding": [ { "type": "github", @@ -14136,7 +14159,6 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", - "dev": true, "license": "ISC" }, "node_modules/picomatch": { @@ -14199,7 +14221,6 @@ "version": "8.5.6", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", - "dev": true, "funding": [ { "type": "opencollective", @@ -14377,6 +14398,18 @@ "dev": true, "license": "MIT" }, + "node_modules/postcss-prefix-custom-properties": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/postcss-prefix-custom-properties/-/postcss-prefix-custom-properties-0.1.0.tgz", + "integrity": "sha512-sAKQSRw+KTl9G549Q9awV/ra06fOZNEIVIIRTwiSTbvkV1t8z7WPqNQ5XBbxF1fV2mp0yQFObavc5J/GxP0a6g==", + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "peerDependencies": { + "postcss": "^8.4.0" + } + }, "node_modules/postcss-reporter": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.1.0.tgz", @@ -14493,7 +14526,6 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true, "license": "MIT" }, "node_modules/preact": { @@ -16565,7 +16597,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", - "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -18641,27 +18672,6 @@ } } }, - "node_modules/volar-service-emmet": { - "version": "0.0.67", - "resolved": "https://registry.npmjs.org/volar-service-emmet/-/volar-service-emmet-0.0.67.tgz", - "integrity": "sha512-UDBL5x7KptmuJZNCCXMlCndMhFult/tj+9jXq3FH1ZGS1E4M/1U5hC06pg1c6e4kn+vnR6bqmvX0vIhL4f98+A==", - "dev": true, - "license": "MIT", - "dependencies": { - "@emmetio/css-parser": "^0.4.1", - "@emmetio/html-matcher": "^1.3.0", - "@vscode/emmet-helper": "^2.9.3", - "vscode-uri": "^3.0.8" - }, - "peerDependencies": { - "@volar/language-service": "~2.4.0" - }, - "peerDependenciesMeta": { - "@volar/language-service": { - "optional": true - } - } - }, "node_modules/volar-service-html": { "version": "0.0.67", "resolved": "https://registry.npmjs.org/volar-service-html/-/volar-service-html-0.0.67.tgz", diff --git a/package.json b/package.json index 036f27bed7..6f7915dc19 100644 --- a/package.json +++ b/package.json @@ -204,5 +204,11 @@ "peerDependencies": { "@floating-ui/dom": "^1.7.0" } + }, + "overrides": { + "volar-service-emmet": "0.0.63" + }, + "dependencies": { + "postcss-prefix-custom-properties": "^0.1.0" } } diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 6857a746ac..b0a96d5772 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -10,11 +10,11 @@ // scss-docs-start accordion-variables $accordion-padding-y: 1rem !default; $accordion-padding-x: 1.25rem !default; -$accordion-color: var(--#{$prefix}color-body) !default; -$accordion-bg: var(--#{$prefix}bg-body) !default; -$accordion-border-width: var(--#{$prefix}border-width) !default; -$accordion-border-color: var(--#{$prefix}border-color) !default; -$accordion-border-radius: var(--#{$prefix}border-radius-lg) !default; +$accordion-color: var(--color-body) !default; +$accordion-bg: var(--bg-body) !default; +$accordion-border-width: var(--border-width) !default; +$accordion-border-color: var(--border-color) !default; +$accordion-border-radius: var(--border-radius-lg) !default; $accordion-inner-border-radius: calc(#{$accordion-border-radius} - #{$accordion-border-width}) !default; $accordion-body-padding-y: $accordion-padding-y !default; @@ -22,11 +22,11 @@ $accordion-body-padding-x: $accordion-padding-x !default; $accordion-button-padding-y: $accordion-padding-y !default; $accordion-button-padding-x: $accordion-padding-x !default; -$accordion-button-color: var(--#{$prefix}fg-2) !default; -$accordion-button-bg: var(--#{$prefix}accordion-bg) !default; +$accordion-button-color: var(--fg-2) !default; +$accordion-button-bg: var(--accordion-bg) !default; $accordion-transition: $btn-transition, border-radius .15s ease !default; -$accordion-button-active-bg: var(--#{$prefix}bg-2) !default; -$accordion-button-active-color: var(--#{$prefix}fg) !default; +$accordion-button-active-bg: var(--bg-2) !default; +$accordion-button-active-color: var(--fg) !default; $accordion-icon-width: 1.25rem !default; $accordion-icon-transition: transform .2s ease-in-out !default; @@ -37,25 +37,25 @@ $accordion-button-icon: url("data:image/svg+xml, .accordion-header .accordion-button { &.collapsed { - @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius)); + @include border-bottom-radius(var(--accordion-inner-border-radius)); } } > .accordion-collapse { - @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); + @include border-bottom-radius(var(--accordion-border-radius)); } } } .accordion-body { - padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x); + padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x); } @@ -174,8 +174,8 @@ $accordion-button-icon: url("data:image/svg+xml, li > a } // Dropdown text .dropdown-item-text { display: block; - padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x); - color: var(--#{$prefix}fg-2); + padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x); + color: var(--fg-2); } // Dark dropdowns .dropdown-menu-dark { // scss-docs-start dropdown-dark-css-vars - --#{$prefix}dropdown-color: #{$dropdown-dark-color}; - --#{$prefix}dropdown-bg: #{$dropdown-dark-bg}; - --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color}; - --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow}; - --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color}; - --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color}; - --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg}; - --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg}; - --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color}; - --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg}; - --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color}; - --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color}; + --dropdown-color: #{$dropdown-dark-color}; + --dropdown-bg: #{$dropdown-dark-bg}; + --dropdown-border-color: #{$dropdown-dark-border-color}; + --dropdown-box-shadow: #{$dropdown-dark-box-shadow}; + --dropdown-link-color: #{$dropdown-dark-link-color}; + --dropdown-link-hover-color: #{$dropdown-dark-link-hover-color}; + --dropdown-divider-bg: #{$dropdown-dark-divider-bg}; + --dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg}; + --dropdown-link-active-color: #{$dropdown-dark-link-active-color}; + --dropdown-link-active-bg: #{$dropdown-dark-link-active-bg}; + --dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color}; + --dropdown-header-color: #{$dropdown-dark-header-color}; // scss-docs-end dropdown-dark-css-vars } } diff --git a/scss/_functions.scss b/scss/_functions.scss index 2c1e9feb1c..6c396c997b 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -49,11 +49,11 @@ // stylelint-disable scss/dollar-variable-pattern @function rgba-css-var($identifier, $target) { @if $identifier == "body" and $target == "bg" { - @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity)); + @return rgba(var(--#{$identifier}-bg-rgb), var(--#{$target}-opacity)); } @if $identifier == "body" and $target == "text" { - @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity)); + @return rgba(var(--#{$identifier}-color-rgb), var(--#{$target}-opacity)); } @else { - @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity)); + @return rgba(var(--#{$identifier}-rgb), var(--#{$target}-opacity)); } } @@ -83,7 +83,7 @@ @function varify($list) { $result: null; @each $entry in $list { - $result: list.append($result, var(--#{$prefix}#{$entry}), space); + $result: list.append($result, var(--#{$entry}), space); } @return $result; } diff --git a/scss/_list-group.scss b/scss/_list-group.scss index a51591fe56..7d6c74753e 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -7,50 +7,50 @@ @use "layout/breakpoints" as *; // scss-docs-start list-group-variables -$list-group-color: var(--#{$prefix}color-body) !default; -$list-group-bg: var(--#{$prefix}bg-body) !default; -$list-group-border-color: var(--#{$prefix}border-color) !default; -$list-group-border-width: var(--#{$prefix}border-width) !default; -$list-group-border-radius: var(--#{$prefix}border-radius) !default; +$list-group-color: var(--color-body) !default; +$list-group-bg: var(--bg-body) !default; +$list-group-border-color: var(--border-color) !default; +$list-group-border-width: var(--border-width) !default; +$list-group-border-radius: var(--border-radius) !default; $list-group-item-padding-y: $spacer * .5 !default; $list-group-item-padding-x: $spacer !default; -$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default; +$list-group-hover-bg: var(--tertiary-bg) !default; $list-group-active-color: $component-active-color !default; $list-group-active-bg: $component-active-bg !default; $list-group-active-border-color: $list-group-active-bg !default; -$list-group-disabled-color: var(--#{$prefix}secondary-color) !default; +$list-group-disabled-color: var(--secondary-color) !default; $list-group-disabled-bg: $list-group-bg !default; -$list-group-action-color: var(--#{$prefix}secondary-color) !default; -$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default; +$list-group-action-color: var(--secondary-color) !default; +$list-group-action-hover-color: var(--emphasis-color) !default; -$list-group-action-active-color: var(--#{$prefix}color-body) !default; -$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default; +$list-group-action-active-color: var(--color-body) !default; +$list-group-action-active-bg: var(--secondary-bg) !default; // scss-docs-end list-group-variables @layer components { .list-group { // scss-docs-start list-group-css-vars - --#{$prefix}list-group-color: #{$list-group-color}; - --#{$prefix}list-group-bg: #{$list-group-bg}; - --#{$prefix}list-group-border-color: #{$list-group-border-color}; - --#{$prefix}list-group-border-width: #{$list-group-border-width}; - --#{$prefix}list-group-border-radius: #{$list-group-border-radius}; - --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x}; - --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y}; - --#{$prefix}list-group-action-color: #{$list-group-action-color}; - --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color}; - --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg}; - --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color}; - --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg}; - --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color}; - --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg}; - --#{$prefix}list-group-active-color: #{$list-group-active-color}; - --#{$prefix}list-group-active-bg: #{$list-group-active-bg}; - --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color}; + --list-group-color: #{$list-group-color}; + --list-group-bg: #{$list-group-bg}; + --list-group-border-color: #{$list-group-border-color}; + --list-group-border-width: #{$list-group-border-width}; + --list-group-border-radius: #{$list-group-border-radius}; + --list-group-item-padding-x: #{$list-group-item-padding-x}; + --list-group-item-padding-y: #{$list-group-item-padding-y}; + --list-group-action-color: #{$list-group-action-color}; + --list-group-action-hover-color: #{$list-group-action-hover-color}; + --list-group-action-hover-bg: #{$list-group-hover-bg}; + --list-group-action-active-color: #{$list-group-action-active-color}; + --list-group-action-active-bg: #{$list-group-action-active-bg}; + --list-group-disabled-color: #{$list-group-disabled-color}; + --list-group-disabled-bg: #{$list-group-disabled-bg}; + --list-group-active-color: #{$list-group-active-color}; + --list-group-active-bg: #{$list-group-active-bg}; + --list-group-active-border-color: #{$list-group-active-border-color}; // scss-docs-end list-group-css-vars display: flex; @@ -59,7 +59,7 @@ $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default; // No need to set list-style: none; since .list-group-item is block level padding-inline-start: 0; // reset padding because ul and ol margin-bottom: 0; - @include border-radius(var(--#{$prefix}list-group-border-radius)); + @include border-radius(var(--list-group-border-radius)); } .list-group-numbered { @@ -80,12 +80,12 @@ $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default; .list-group-item { position: relative; display: block; - padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x); - color: var(--#{$prefix}theme-text, var(--#{$prefix}list-group-color)); + padding: var(--list-group-item-padding-y) var(--list-group-item-padding-x); + color: var(--theme-text, var(--list-group-color)); // stylelint-disable-next-line scss/at-function-named-arguments text-decoration: if(sass($link-decoration == none): null); - background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}list-group-bg)); - border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}theme-border, var(--#{$prefix}list-group-border-color)); + background-color: var(--theme-bg-subtle, var(--list-group-bg)); + border: var(--list-group-border-width) solid var(--theme-border, var(--list-group-border-color)); &:first-child { @include border-top-radius(inherit); @@ -97,17 +97,17 @@ $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default; &.disabled, &:disabled { - color: var(--#{$prefix}list-group-disabled-color); + color: var(--list-group-disabled-color); pointer-events: none; - background-color: var(--#{$prefix}list-group-disabled-bg); + background-color: var(--list-group-disabled-bg); } // Include both here for ``s and `` element. $body-text-align: null !default; -$body-color: var(--#{$prefix}color-body) !default; -$body-bg: var(--#{$prefix}bg-body) !default; +$body-color: var(--color-body) !default; +$body-bg: var(--bg-body) !default; // Links // @@ -164,7 +164,7 @@ $border-widths: ( 5: 5px ) !default; $border-style: solid !default; -$border-color: color-mix(in oklch, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)) !default; +$border-color: color-mix(in oklch, var(--gray-100), var(--gray-200)) !default; $border-color-translucent: rgba($black, .175) !default; // scss-docs-end border-variables @@ -187,13 +187,13 @@ $box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default; // scss-docs-start focus-ring-variables $focus-ring-width: .25rem !default; $focus-ring-opacity: .25 !default; -$focus-ring-color: var(--#{$prefix}primary-focus-ring) !default; +$focus-ring-color: var(--primary-focus-ring) !default; $focus-ring-blur: 0 !default; $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default; // scss-docs-end focus-ring-variables -$component-active-color: var(--#{$prefix}primary-contrast) !default; -$component-active-bg: var(--#{$prefix}primary-bg) !default; +$component-active-color: var(--primary-contrast) !default; +$component-active-bg: var(--primary-bg) !default; $transition-base: all .2s ease-in-out !default; $transition-fade: opacity .15s linear !default; @@ -221,8 +221,8 @@ $aspect-ratios: ( $font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; // stylelint-enable value-keyword-case -$font-family-base: var(--#{$prefix}font-sans-serif) !default; -$font-family-code: var(--#{$prefix}font-monospace) !default; +$font-family-base: var(--font-sans-serif) !default; +$font-family-code: var(--font-monospace) !default; // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins // $font-size-base affects the font size of the body text @@ -245,55 +245,55 @@ $line-height-base: 1.5 !default; $line-height-sm: 1.25 !default; $line-height-lg: 2 !default; -$h1-font-size: var(--#{$prefix}font-size-3xl) !default; -$h2-font-size: var(--#{$prefix}font-size-2xl) !default; -$h3-font-size: var(--#{$prefix}font-size-xl) !default; -$h4-font-size: var(--#{$prefix}font-size-lg) !default; -$h5-font-size: var(--#{$prefix}font-size-md) !default; -$h6-font-size: var(--#{$prefix}font-size-sm) !default; +$h1-font-size: var(--font-size-3xl) !default; +$h2-font-size: var(--font-size-2xl) !default; +$h3-font-size: var(--font-size-xl) !default; +$h4-font-size: var(--font-size-lg) !default; +$h5-font-size: var(--font-size-md) !default; +$h6-font-size: var(--font-size-sm) !default; // scss-docs-end font-variables // Font sizes with line-height for utilities $font-sizes: ( "xs": ( - "font-size": var(--#{$prefix}font-size-xs), - "line-height": var(--#{$prefix}line-height-xs) + "font-size": var(--font-size-xs), + "line-height": var(--line-height-xs) ), "sm": ( - "font-size": var(--#{$prefix}font-size-sm), - "line-height": var(--#{$prefix}line-height-sm) + "font-size": var(--font-size-sm), + "line-height": var(--line-height-sm) ), "md": ( - "font-size": var(--#{$prefix}font-size-md), - "line-height": var(--#{$prefix}line-height-md) + "font-size": var(--font-size-md), + "line-height": var(--line-height-md) ), "lg": ( - "font-size": var(--#{$prefix}font-size-lg), - "line-height": var(--#{$prefix}line-height-lg) + "font-size": var(--font-size-lg), + "line-height": var(--line-height-lg) ), "xl": ( - "font-size": var(--#{$prefix}font-size-xl), - "line-height": var(--#{$prefix}line-height-xl) + "font-size": var(--font-size-xl), + "line-height": var(--line-height-xl) ), "2xl": ( - "font-size": var(--#{$prefix}font-size-2xl), - "line-height": var(--#{$prefix}line-height-2xl) + "font-size": var(--font-size-2xl), + "line-height": var(--line-height-2xl) ), "3xl": ( - "font-size": var(--#{$prefix}font-size-3xl), - "line-height": var(--#{$prefix}line-height-3xl) + "font-size": var(--font-size-3xl), + "line-height": var(--line-height-3xl) ), "4xl": ( - "font-size": var(--#{$prefix}font-size-4xl), - "line-height": var(--#{$prefix}line-height-4xl) + "font-size": var(--font-size-4xl), + "line-height": var(--line-height-4xl) ), "5xl": ( - "font-size": var(--#{$prefix}font-size-5xl), - "line-height": var(--#{$prefix}line-height-5xl) + "font-size": var(--font-size-5xl), + "line-height": var(--line-height-5xl) ), "6xl": ( - "font-size": var(--#{$prefix}font-size-6xl), - "line-height": var(--#{$prefix}line-height-6xl) + "font-size": var(--font-size-6xl), + "line-height": var(--line-height-6xl) ), ) !default; @@ -315,18 +315,18 @@ $initialism-font-size: $small-font-size !default; $blockquote-margin-y: $spacer !default; $blockquote-font-size: $font-size-base * 1.25 !default; -$blockquote-footer-color: var(--#{$prefix}gray-600) !default; +$blockquote-footer-color: var(--gray-600) !default; $blockquote-footer-font-size: $small-font-size !default; $hr-margin-y: $spacer !default; $hr-color: inherit !default; $hr-border-color: null !default; // Allows for inherited colors -$hr-border-width: var(--#{$prefix}border-width) !default; +$hr-border-width: var(--border-width) !default; $hr-opacity: .25 !default; // scss-docs-start vr-variables -$vr-border-width: var(--#{$prefix}border-width) !default; +$vr-border-width: var(--border-width) !default; // scss-docs-end vr-variables $legend-margin-bottom: .5rem !default; @@ -339,7 +339,7 @@ $list-inline-padding: .5rem !default; $mark-padding: .1875em !default; $mark-color: $body-color !default; -$mark-bg: var(--#{$prefix}yellow-100) !default; +$mark-bg: var(--yellow-100) !default; // scss-docs-end type-variables @@ -362,7 +362,7 @@ $input-btn-padding-y-lg: .5rem !default; $input-btn-padding-x-lg: 1rem !default; $input-btn-font-size-lg: $font-size-lg !default; -$input-btn-border-width: var(--#{$prefix}border-width) !default; +$input-btn-border-width: var(--border-width) !default; // scss-docs-end input-btn-variables @@ -402,12 +402,12 @@ $offcanvas-padding-x: $spacer !default; $offcanvas-horizontal-width: 400px !default; $offcanvas-vertical-height: 30vh !default; $offcanvas-transition-duration: .3s !default; -$offcanvas-border-color: var(--#{$prefix}border-color-translucent) !default; -$offcanvas-border-width: var(--#{$prefix}border-width) !default; +$offcanvas-border-color: var(--border-color-translucent) !default; +$offcanvas-border-width: var(--border-width) !default; $offcanvas-title-line-height: $line-height-base !default; -$offcanvas-bg-color: var(--#{$prefix}bg-body) !default; -$offcanvas-color: var(--#{$prefix}color-body) !default; -$offcanvas-box-shadow: var(--#{$prefix}box-shadow-sm) !default; +$offcanvas-bg-color: var(--bg-body) !default; +$offcanvas-color: var(--color-body) !default; +$offcanvas-box-shadow: var(--box-shadow-sm) !default; $offcanvas-backdrop-bg: $black !default; $offcanvas-backdrop-opacity: .5 !default; // scss-docs-end offcanvas-variables @@ -415,13 +415,13 @@ $offcanvas-backdrop-opacity: .5 !default; // Code $code-font-size: 95% !default; -$code-color: var(--#{$prefix}secondary-text) !default; +$code-color: var(--secondary-text) !default; $kbd-padding-y: .1875rem !default; $kbd-padding-x: .375rem !default; $kbd-font-size: $code-font-size !default; -$kbd-color: var(--#{$prefix}bg-body) !default; -$kbd-bg: var(--#{$prefix}color-body) !default; +$kbd-color: var(--bg-body) !default; +$kbd-bg: var(--color-body) !default; $pre-color: null !default; @@ -434,18 +434,18 @@ $pre-color: null !default; // // scss-docs-start sass-dark-mode-vars -// $body-color-dark: var(--#{$prefix}gray-200) !default; -// $body-bg-dark: var(--#{$prefix}gray-975) !default; +// $body-color-dark: var(--gray-200) !default; +// $body-bg-dark: var(--gray-975) !default; // $body-secondary-color-dark: rgba($body-color-dark, .75) !default; -// $body-secondary-bg-dark: var(--#{$prefix}gray-800) !default; +// $body-secondary-bg-dark: var(--gray-800) !default; // $body-tertiary-color-dark: rgba($body-color-dark, .5) !default; -// $body-tertiary-bg-dark: color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900)) !default; +// $body-tertiary-bg-dark: color-mix(in srgb, var(--gray-800), var(--gray-900)) !default; $body-emphasis-color-dark: $white !default; -$border-color-dark: var(--#{$prefix}gray-700) !default; +$border-color-dark: var(--gray-700) !default; $border-color-translucent-dark: rgba($white, .15) !default; $headings-color-dark: inherit !default; // $mark-color-dark: $body-color-dark !default; -// $mark-bg-dark: var(--#{$prefix}yellow-800) !default; +// $mark-bg-dark: var(--yellow-800) !default; // @@ -453,9 +453,9 @@ $headings-color-dark: inherit !default; // // scss-docs-start form-validation-colors-dark -$form-valid-color-dark: var(--#{$prefix}green-300) !default; -$form-valid-border-color-dark: var(--#{$prefix}green-300) !default; -$form-invalid-color-dark: var(--#{$prefix}red-300) !default; -$form-invalid-border-color-dark: var(--#{$prefix}red-300) !default; +$form-valid-color-dark: var(--green-300) !default; +$form-valid-border-color-dark: var(--green-300) !default; +$form-invalid-color-dark: var(--red-300) !default; +$form-invalid-border-color-dark: var(--red-300) !default; // scss-docs-end form-validation-colors-dark // scss-docs-end sass-dark-mode-vars diff --git a/scss/buttons/_button-variables.scss b/scss/buttons/_button-variables.scss index 0053908706..f89ac33c91 100644 --- a/scss/buttons/_button-variables.scss +++ b/scss/buttons/_button-variables.scss @@ -6,7 +6,7 @@ @use "../forms/form-variables" as *; // scss-docs-start btn-variables -$btn-color: var(--#{$prefix}fg-body) !default; +$btn-color: var(--fg-body) !default; $btn-padding-y: $input-btn-padding-y !default; $btn-padding-x: $input-btn-padding-x !default; $btn-font-family: $input-btn-font-family !default; @@ -16,12 +16,12 @@ $btn-white-space: null !default; // Set to `nowrap` to prevent text $btn-padding-y-xs: .125rem !default; $btn-padding-x-xs: .375rem !default; -$btn-font-size-xs: var(--#{$prefix}font-size-xs) !default; +$btn-font-size-xs: var(--font-size-xs) !default; $btn-line-height-xs: 1.125rem !default; $btn-padding-y-sm: $input-btn-padding-y-sm !default; $btn-padding-x-sm: $input-btn-padding-x-sm !default; -$btn-font-size-sm: var(--#{$prefix}font-size-sm) !default; +$btn-font-size-sm: var(--font-size-sm) !default; $btn-line-height-sm: 1.125rem !default; $btn-padding-y-lg: $input-btn-padding-y-lg !default; @@ -32,7 +32,7 @@ $btn-line-height-lg: 1.25rem !default; // Intentionally left for folks who want it // $btn-padding-y-xl: .75rem !default; // $btn-padding-x-xl: 1.25rem !default; -// $btn-font-size-xl: var(--#{$prefix}font-size-lg) !default; +// $btn-font-size-xl: var(--font-size-lg) !default; // $btn-line-height-xl: 1.5rem !default; $btn-border-width: $input-btn-border-width !default; @@ -40,16 +40,16 @@ $btn-border-width: $input-btn-border-width !default; $btn-font-weight: $font-weight-normal !default; $btn-disabled-opacity: .65 !default; -$btn-link-color: var(--#{$prefix}link-color) !default; -$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default; -$btn-link-disabled-color: var(--#{$prefix}fg-3) !default; +$btn-link-color: var(--link-color) !default; +$btn-link-hover-color: var(--link-hover-color) !default; +$btn-link-disabled-color: var(--fg-3) !default; // Allows for customizing button radius independently from global border radius -$btn-border-radius: var(--#{$prefix}border-radius) !default; -$btn-border-radius-xs: var(--#{$prefix}border-radius-sm) !default; -$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default; -$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default; -$btn-border-radius-xl: var(--#{$prefix}border-radius-lg) !default; +$btn-border-radius: var(--border-radius) !default; +$btn-border-radius-xs: var(--border-radius-sm) !default; +$btn-border-radius-sm: var(--border-radius-sm) !default; +$btn-border-radius-lg: var(--border-radius-lg) !default; +$btn-border-radius-xl: var(--border-radius-lg) !default; $btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; // scss-docs-end btn-variables diff --git a/scss/buttons/_button.scss b/scss/buttons/_button.scss index a014f8a4c7..fe7424ae2e 100644 --- a/scss/buttons/_button.scss +++ b/scss/buttons/_button.scss @@ -135,59 +135,59 @@ $btn-variant-selectors: () !default; .btn, #{$btn-variant-selectors} { // scss-docs-start btn-css-vars - --#{$prefix}btn-min-height: 2.25rem; - --#{$prefix}btn-padding-x: #{$btn-padding-x}; - --#{$prefix}btn-padding-y: #{$btn-padding-y}; - --#{$prefix}btn-font-family: #{$btn-font-family}; - --#{$prefix}btn-font-size: #{$btn-font-size}; - --#{$prefix}btn-font-weight: #{$btn-font-weight}; - --#{$prefix}btn-line-height: #{$btn-line-height}; - --#{$prefix}btn-color: #{$btn-color}; - --#{$prefix}btn-border-width: #{$btn-border-width}; - --#{$prefix}btn-border-color: transparent; - --#{$prefix}btn-border-radius: #{$btn-border-radius}; - --#{$prefix}btn-hover-border-color: transparent; - --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; + --btn-min-height: 2.25rem; + --btn-padding-x: #{$btn-padding-x}; + --btn-padding-y: #{$btn-padding-y}; + --btn-font-family: #{$btn-font-family}; + --btn-font-size: #{$btn-font-size}; + --btn-font-weight: #{$btn-font-weight}; + --btn-line-height: #{$btn-line-height}; + --btn-color: #{$btn-color}; + --btn-border-width: #{$btn-border-width}; + --btn-border-color: transparent; + --btn-border-radius: #{$btn-border-radius}; + --btn-hover-border-color: transparent; + --btn-disabled-opacity: #{$btn-disabled-opacity}; // scss-docs-end btn-css-vars display: inline-flex; - gap: var(--#{$prefix}btn-gap, .25rem); + gap: var(--btn-gap, .25rem); align-items: center; justify-content: center; - min-height: var(--#{$prefix}btn-min-height); - padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x); - font-family: var(--#{$prefix}btn-font-family); - font-size: var(--#{$prefix}btn-font-size); - font-weight: var(--#{$prefix}btn-font-weight); - line-height: var(--#{$prefix}btn-line-height); - color: var(--#{$prefix}btn-color); + min-height: var(--btn-min-height); + padding: var(--btn-padding-y) var(--btn-padding-x); + font-family: var(--btn-font-family); + font-size: var(--btn-font-size); + font-weight: var(--btn-font-weight); + line-height: var(--btn-line-height); + color: var(--btn-color); text-decoration: none; white-space: $btn-white-space; vertical-align: middle; // stylelint-disable-next-line scss/at-function-named-arguments cursor: if(sass($enable-button-pointers): pointer; else: null); user-select: none; - background-color: var(--#{$prefix}btn-bg, var(--#{$prefix}bg-2)); - border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color); - @include border-radius(var(--#{$prefix}btn-border-radius)); + background-color: var(--btn-bg, var(--bg-2)); + border: var(--btn-border-width) solid var(--btn-border-color); + @include border-radius(var(--btn-border-radius)); @include transition($btn-transition); &:hover { - color: var(--#{$prefix}btn-hover-color); - background-color: var(--#{$prefix}btn-hover-bg, var(--#{$prefix}bg-3)); - border-color: var(--#{$prefix}btn-hover-border-color); + color: var(--btn-hover-color); + background-color: var(--btn-hover-bg, var(--bg-3)); + border-color: var(--btn-hover-border-color); } &:focus-visible { @include focus-ring(true); - --#{$prefix}focus-ring-offset: 1px; + --focus-ring-offset: 1px; } &.active, &.show { - color: var(--#{$prefix}btn-active-color); - background-color: var(--#{$prefix}btn-active-bg, var(--#{$prefix}bg-3)); - border-color: var(--#{$prefix}btn-active-border-color); + color: var(--btn-active-color); + background-color: var(--btn-active-bg, var(--bg-3)); + border-color: var(--btn-active-border-color); &:focus-visible { @include focus-ring(true); @@ -197,13 +197,13 @@ $btn-variant-selectors: () !default; &:disabled, &.disabled, fieldset:disabled & { - color: var(--#{$prefix}btn-disabled-color); + color: var(--btn-disabled-color); pointer-events: none; - background-color: var(--#{$prefix}btn-disabled-bg, var(--#{$prefix}bg-1)); + background-color: var(--btn-disabled-bg, var(--bg-1)); // stylelint-disable-next-line scss/at-function-named-arguments background-image: if(sass($enable-gradients): none; else: null); - border-color: var(--#{$prefix}btn-disabled-border-color); - opacity: var(--#{$prefix}btn-disabled-opacity); + border-color: var(--btn-disabled-border-color); + opacity: var(--btn-disabled-opacity); } } @@ -215,26 +215,26 @@ $btn-variant-selectors: () !default; .btn-#{$variant} { @each $property, $value in map.get($button-variants, $variant, "base") { @if $value == "transparent" { - --#{$prefix}btn-#{$property}: transparent; + --btn-#{$property}: transparent; } @else { - --#{$prefix}btn-#{$property}: var(--#{$prefix}theme-#{$value}); + --btn-#{$property}: var(--theme-#{$value}); } } @each $property, $value in map.get($button-variants, $variant, "active") { @if $value == "transparent" { - --#{$prefix}btn-active-#{$property}: transparent; + --btn-active-#{$property}: transparent; } @else if $value == "bg-subtle" { - --#{$prefix}btn-active-#{$property}: var(--#{$prefix}theme-#{$value}); + --btn-active-#{$property}: var(--theme-#{$value}); } @else { - --#{$prefix}btn-active-#{$property}: oklch(from var(--#{$prefix}theme-#{$value}) calc(l * .9) calc(c * 1.15) h); + --btn-active-#{$property}: oklch(from var(--theme-#{$value}) calc(l * .9) calc(c * 1.15) h); } } @each $property, $value in map.get($button-variants, $variant, "base") { @if $value == "transparent" { - --#{$prefix}btn-disabled-#{$property}: transparent; + --btn-disabled-#{$property}: transparent; } @else { - --#{$prefix}btn-disabled-#{$property}: var(--#{$prefix}theme-#{$value}); + --btn-disabled-#{$property}: var(--theme-#{$value}); } } @@ -242,21 +242,21 @@ $btn-variant-selectors: () !default; &:hover { @each $property, $value in map.get($button-variants, $variant, "hover") { @if $value == "transparent" { - --#{$prefix}btn-hover-#{$property}: transparent; + --btn-hover-#{$property}: transparent; } @else if meta.type-of($value) == "list" { $first-value: list.nth($value, 1); $second-value: list.nth($value, 2); - --#{$prefix}btn-hover-#{$property}: color-mix(in oklch, var(--#{$prefix}theme-#{$first-value}) 50%, var(--#{$prefix}theme-#{$second-value})); + --btn-hover-#{$property}: color-mix(in oklch, var(--theme-#{$first-value}) 50%, var(--theme-#{$second-value})); } @else if $value == "bg-subtle" { - --#{$prefix}btn-hover-#{$property}: var(--#{$prefix}theme-#{$value}); + --btn-hover-#{$property}: var(--theme-#{$value}); } @else { - --#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}theme-#{$value}) calc(l * .95) calc(c * 1.1) h); + --btn-hover-#{$property}: oklch(from var(--theme-#{$value}) calc(l * .95) calc(c * 1.1) h); } } } &:focus-visible { - outline-color: var(--#{$prefix}theme-focus-ring); + outline-color: var(--theme-focus-ring); } &:active, @@ -264,11 +264,11 @@ $btn-variant-selectors: () !default; &.btn-check:has(input:checked) { @each $property, $value in map.get($button-variants, $variant, "active") { @if $value == "transparent" { - --#{$prefix}btn-active-#{$property}: transparent; + --btn-active-#{$property}: transparent; } @else if $value == "bg-subtle" { - --#{$prefix}btn-active-#{$property}: var(--#{$prefix}theme-#{$value}); + --btn-active-#{$property}: var(--theme-#{$value}); } @else { - --#{$prefix}btn-active-#{$property}: oklch(from var(--#{$prefix}theme-#{$value}) calc(l * .9) calc(c * 1.15) h); + --btn-active-#{$property}: oklch(from var(--theme-#{$value}) calc(l * .9) calc(c * 1.15) h); } } } @@ -279,9 +279,9 @@ $btn-variant-selectors: () !default; &.btn-check:has(input:disabled) { @each $property, $value in map.get($button-variants, $variant, "base") { @if $value == "transparent" { - --#{$prefix}btn-disabled-#{$property}: transparent; + --btn-disabled-#{$property}: transparent; } @else { - --#{$prefix}btn-disabled-#{$property}: var(--#{$prefix}theme-#{$value}); + --btn-disabled-#{$property}: var(--theme-#{$value}); } } } @@ -295,29 +295,29 @@ $btn-variant-selectors: () !default; // Make a button look and behave like a link .btn-link { - --#{$prefix}btn-font-weight: #{$font-weight-normal}; - --#{$prefix}btn-color: #{$btn-link-color}; - --#{$prefix}btn-bg: transparent; - --#{$prefix}btn-border-color: transparent; - --#{$prefix}btn-hover-color: #{$btn-link-hover-color}; - --#{$prefix}btn-hover-border-color: transparent; - --#{$prefix}btn-active-color: #{$btn-link-hover-color}; - --#{$prefix}btn-active-border-color: transparent; - --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color}; - --#{$prefix}btn-disabled-border-color: transparent; - - text-decoration: var(--#{$prefix}link-decoration); + --btn-font-weight: #{$font-weight-normal}; + --btn-color: #{$btn-link-color}; + --btn-bg: transparent; + --btn-border-color: transparent; + --btn-hover-color: #{$btn-link-hover-color}; + --btn-hover-border-color: transparent; + --btn-active-color: #{$btn-link-hover-color}; + --btn-active-border-color: transparent; + --btn-disabled-color: #{$btn-link-disabled-color}; + --btn-disabled-border-color: transparent; + + text-decoration: var(--link-decoration); @if $enable-gradients { background-image: none; } &:focus-visible { - color: var(--#{$prefix}btn-color); + color: var(--btn-color); } &:hover { - color: var(--#{$prefix}btn-hover-color); + color: var(--btn-hover-color); } // No need for an active state here @@ -333,12 +333,12 @@ $btn-variant-selectors: () !default; @each $size, $properties in $button-sizes { .btn-#{$size}, .btn-group-#{$size} > [class*="btn-"] { - --#{$prefix}btn-min-height: #{map.get($properties, "min-height")}; - --#{$prefix}btn-padding-y: #{map.get($properties, "padding-y")}; - --#{$prefix}btn-padding-x: #{map.get($properties, "padding-x")}; - --#{$prefix}btn-font-size: #{map.get($properties, "font-size")}; - --#{$prefix}btn-line-height: #{map.get($properties, "line-height")}; - --#{$prefix}btn-border-radius: #{map.get($properties, "border-radius")}; + --btn-min-height: #{map.get($properties, "min-height")}; + --btn-padding-y: #{map.get($properties, "padding-y")}; + --btn-padding-x: #{map.get($properties, "padding-x")}; + --btn-font-size: #{map.get($properties, "font-size")}; + --btn-line-height: #{map.get($properties, "line-height")}; + --btn-border-radius: #{map.get($properties, "border-radius")}; } } @@ -365,27 +365,27 @@ $btn-variant-selectors: () !default; } &:has(input:checked) { - color: var(--#{$prefix}btn-active-color); - background-color: var(--#{$prefix}btn-active-bg, var(--#{$prefix}bg-3)); + color: var(--btn-active-color); + background-color: var(--btn-active-bg, var(--bg-3)); // stylelint-disable-next-line scss/at-function-named-arguments background-image: if(sass($enable-gradients): none; else: null); - border-color: var(--#{$prefix}btn-active-border-color); - @include box-shadow(var(--#{$prefix}btn-active-shadow)); + border-color: var(--btn-active-border-color); + @include box-shadow(var(--btn-active-shadow)); } &:has(input:focus-visible) { @include focus-ring(true); - --#{$prefix}focus-ring-offset: 1px; + --focus-ring-offset: 1px; } &:has(input:disabled) { - color: var(--#{$prefix}btn-disabled-color); + color: var(--btn-disabled-color); pointer-events: none; - background-color: var(--#{$prefix}btn-disabled-bg, var(--#{$prefix}bg-1)); + background-color: var(--btn-disabled-bg, var(--bg-1)); // stylelint-disable-next-line scss/at-function-named-arguments background-image: if(sass($enable-gradients): none; else: null); - border-color: var(--#{$prefix}btn-disabled-border-color); - opacity: var(--#{$prefix}btn-disabled-opacity); + border-color: var(--btn-disabled-border-color); + opacity: var(--btn-disabled-opacity); @include box-shadow(none); } } @@ -396,39 +396,39 @@ $btn-variant-selectors: () !default; // Add visual depth with gradients and shadows. Customize via CSS variables. .btn-styled { - --#{$prefix}btn-gradient-start: rgb(255 255 255 / 12.5%); - --#{$prefix}btn-gradient-end: rgb(0 0 0 / 7.5%); - --#{$prefix}btn-border-mix-color: #000; - --#{$prefix}btn-border-mix-amount: 10%; - --#{$prefix}btn-border-hover-mix-amount: 12.5%; - --#{$prefix}btn-border-active-mix-amount: 20%; - --#{$prefix}btn-shadow: 0 1px 2px rgb(0 0 0 / 15%), inset 0 1px 0 rgb(255 255 255 / 10%); - --#{$prefix}btn-active-shadow: inset 0 2px 4px rgba(0, 0, 0, .15); + --btn-gradient-start: rgb(255 255 255 / 12.5%); + --btn-gradient-end: rgb(0 0 0 / 7.5%); + --btn-border-mix-color: #000; + --btn-border-mix-amount: 10%; + --btn-border-hover-mix-amount: 12.5%; + --btn-border-active-mix-amount: 20%; + --btn-shadow: 0 1px 2px rgb(0 0 0 / 15%), inset 0 1px 0 rgb(255 255 255 / 10%); + --btn-active-shadow: inset 0 2px 4px rgba(0, 0, 0, .15); background-image: linear-gradient( to bottom, - var(--#{$prefix}btn-gradient-start), - var(--#{$prefix}btn-gradient-end) + var(--btn-gradient-start), + var(--btn-gradient-end) ); - border-color: color-mix(in lab, var(--#{$prefix}theme-bg), var(--#{$prefix}btn-border-mix-color) var(--#{$prefix}btn-border-mix-amount)); - box-shadow: var(--#{$prefix}btn-shadow); + border-color: color-mix(in lab, var(--theme-bg), var(--btn-border-mix-color) var(--btn-border-mix-amount)); + box-shadow: var(--btn-shadow); &:hover { background-image: linear-gradient( to bottom, - var(--#{$prefix}btn-gradient-start), - var(--#{$prefix}btn-gradient-end) + var(--btn-gradient-start), + var(--btn-gradient-end) ); - border-color: color-mix(in lab, var(--#{$prefix}theme-bg), var(--#{$prefix}btn-border-mix-color) var(--#{$prefix}btn-border-hover-mix-amount)); + border-color: color-mix(in lab, var(--theme-bg), var(--btn-border-mix-color) var(--btn-border-hover-mix-amount)); } &:active, &.active { background-image: none; - border-color: color-mix(in lab, var(--#{$prefix}theme-bg), var(--#{$prefix}btn-border-mix-color) var(--#{$prefix}btn-border-active-mix-amount)); - box-shadow: var(--#{$prefix}btn-active-shadow); + border-color: color-mix(in lab, var(--theme-bg), var(--btn-border-mix-color) var(--btn-border-active-mix-amount)); + box-shadow: var(--btn-active-shadow); } &:disabled, diff --git a/scss/buttons/_close.scss b/scss/buttons/_close.scss index de65bd13c5..d44ef8edf0 100644 --- a/scss/buttons/_close.scss +++ b/scss/buttons/_close.scss @@ -7,7 +7,7 @@ // scss-docs-start close-variables $btn-close-size: 1.25rem !default; -$btn-close-color: var(--#{$prefix}fg-body) !default; +$btn-close-color: var(--fg-body) !default; $btn-close-opacity: .5 !default; $btn-close-hover-opacity: .75 !default; $btn-close-focus-opacity: .85 !default; @@ -22,23 +22,23 @@ $btn-close-disabled-opacity: .25 !default; @layer components { .btn-close { // scss-docs-start close-css-vars - --#{$prefix}btn-close-size: #{$btn-close-size}; - --#{$prefix}btn-close-color: #{$btn-close-color}; - --#{$prefix}btn-close-opacity: #{$btn-close-opacity}; - --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity}; - --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity}; - --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity}; + --btn-close-size: #{$btn-close-size}; + --btn-close-color: #{$btn-close-color}; + --btn-close-opacity: #{$btn-close-opacity}; + --btn-close-hover-opacity: #{$btn-close-hover-opacity}; + --btn-close-focus-opacity: #{$btn-close-focus-opacity}; + --btn-close-disabled-opacity: #{$btn-close-disabled-opacity}; // scss-docs-end close-css-vars box-sizing: content-box; - width: var(--#{$prefix}btn-close-size); - height: var(--#{$prefix}btn-close-size); + width: var(--btn-close-size); + height: var(--btn-close-size); padding: 0; - color: var(--#{$prefix}btn-close-color); + color: var(--btn-close-color); background: transparent; border: 0; // for button elements - @include border-radius(var(--#{$prefix}border-radius-sm)); - opacity: var(--#{$prefix}btn-close-opacity); + @include border-radius(var(--border-radius-sm)); + opacity: var(--btn-close-opacity); > svg { display: block; @@ -49,21 +49,21 @@ $btn-close-disabled-opacity: .25 !default; // Override 's hover style &:hover { - color: var(--#{$prefix}btn-close-color); + color: var(--btn-close-color); text-decoration: none; - opacity: var(--#{$prefix}btn-close-hover-opacity); + opacity: var(--btn-close-hover-opacity); } &:focus { @include focus-ring(); - opacity: var(--#{$prefix}btn-close-focus-opacity); + opacity: var(--btn-close-focus-opacity); } &:disabled, &.disabled { pointer-events: none; user-select: none; - opacity: var(--#{$prefix}btn-close-disabled-opacity); + opacity: var(--btn-close-disabled-opacity); } } } diff --git a/scss/content/_images.scss b/scss/content/_images.scss index 9d127a0a8c..c5b4b206ae 100644 --- a/scss/content/_images.scss +++ b/scss/content/_images.scss @@ -6,16 +6,16 @@ // scss-docs-start thumbnail-variables $thumbnail-padding: .25rem !default; -$thumbnail-bg: var(--#{$prefix}bg-body) !default; -$thumbnail-border-width: var(--#{$prefix}border-width) !default; -$thumbnail-border-color: var(--#{$prefix}border-color) !default; -$thumbnail-border-radius: var(--#{$prefix}border-radius) !default; -$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default; +$thumbnail-bg: var(--bg-body) !default; +$thumbnail-border-width: var(--border-width) !default; +$thumbnail-border-color: var(--border-color) !default; +$thumbnail-border-radius: var(--border-radius) !default; +$thumbnail-box-shadow: var(--box-shadow-sm) !default; // scss-docs-end thumbnail-variables // scss-docs-start figure-variables $figure-caption-font-size: $small-font-size !default; -$figure-caption-color: var(--#{$prefix}secondary-color) !default; +$figure-caption-color: var(--secondary-color) !default; // scss-docs-end figure-variables @layer content { diff --git a/scss/content/_prose.scss b/scss/content/_prose.scss index e2321bfb7b..cbb7fa5354 100644 --- a/scss/content/_prose.scss +++ b/scss/content/_prose.scss @@ -3,22 +3,22 @@ @layer content { .prose { - --#{$prefix}content-font-size: var(--#{$prefix}font-size-sm); - --#{$prefix}content-gap: 20px; - --#{$prefix}heading-color: light-dark(var(--bs-gray-900), var(--bs-white)); + --content-font-size: var(--font-size-sm); + --content-gap: 20px; + --heading-color: light-dark(var(--gray-900), var(--white)); position: relative; display: flex; flex-direction: column; - gap: var(--#{$prefix}content-gap); + gap: var(--content-gap); max-width: 1000px; margin-inline: auto; - font-size: var(--#{$prefix}content-font-size); + font-size: var(--content-font-size); line-height: 1.5; @media (width >= 1024px) { - --#{$prefix}content-font-size: var(--#{$prefix}font-size-md); - --#{$prefix}content-gap: 24px; + --content-font-size: var(--font-size-md); + --content-gap: 24px; } p, @@ -32,18 +32,18 @@ } :where(ul, ol):not([class]) li:not(:last-child) { - margin-bottom: calc(var(--#{$prefix}content-gap) / 4); + margin-bottom: calc(var(--content-gap) / 4); } li ul, li ol { - margin-top: calc(var(--#{$prefix}content-gap) / 4); + margin-top: calc(var(--content-gap) / 4); } hr { - margin: calc(var(--#{$prefix}content-gap) * 1.5) 0; + margin: calc(var(--content-gap) * 1.5) 0; border: 0; - border-block-start: 1px solid var(--#{$prefix}border-color); + border-block-start: 1px solid var(--border-color); } h1, @@ -53,7 +53,7 @@ h5, h6 { margin-top: 0; - margin-bottom: calc(var(--#{$prefix}content-gap) / -2); + margin-bottom: calc(var(--content-gap) / -2); font-weight: 500; line-height: 1.25; @@ -66,7 +66,7 @@ h1, h2 { &:not(:first-child) { - margin-top: calc(var(--#{$prefix}content-gap) * 1.5); + margin-top: calc(var(--content-gap) * 1.5); } } @@ -75,7 +75,7 @@ h5, h6 { &:not(:first-child) { - margin-top: calc(var(--#{$prefix}content-gap) * 1.25); + margin-top: calc(var(--content-gap) * 1.25); } } @@ -100,15 +100,15 @@ } a:not([class]) { - color: var(--#{$prefix}link-color); + color: var(--link-color); text-decoration: underline; - text-decoration-color: color-mix(in srgb, var(--#{$prefix}link-color) 25%, transparent); + text-decoration-color: color-mix(in srgb, var(--link-color) 25%, transparent); text-underline-offset: 4px; @include transition(.1s text-decoration-color ease-in-out); } a:not([class]):hover { - text-decoration-color: var(--#{$prefix}link-hover-color); + text-decoration-color: var(--link-hover-color); } img { @@ -116,9 +116,9 @@ } blockquote { - padding-inline-start: calc(var(--#{$prefix}content-gap) / 2); + padding-inline-start: calc(var(--content-gap) / 2); margin: 0; - border-inline-start: 4px solid var(--#{$prefix}border-color); + border-inline-start: 4px solid var(--border-color); } table { @@ -132,7 +132,7 @@ th { padding: 6px 12px; text-align: inherit; - border: 1px solid var(--#{$prefix}border-color); + border: 1px solid var(--border-color); } } diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss index be9707bb5a..ac2197eea4 100644 --- a/scss/content/_reboot.scss +++ b/scss/content/_reboot.scss @@ -32,8 +32,8 @@ :root { @if $font-size-root != null { - font-size: var(--#{$prefix}root-font-size); - // @include font-size(var(--#{$prefix}root-font-size)); + font-size: var(--root-font-size); + // @include font-size(var(--root-font-size)); } @if $enable-smooth-scroll { @@ -54,13 +54,13 @@ // scss-docs-start reboot-body-rules body { margin: 0; // 1 - font-family: var(--#{$prefix}body-font-family); - 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-body); - text-align: var(--#{$prefix}body-text-align); - background-color: var(--#{$prefix}bg-body); // 2 + font-family: var(--body-font-family); + font-size: var(--body-font-size); + font-weight: var(--body-font-weight); + line-height: var(--body-line-height); + color: var(--color-body); + text-align: var(--body-text-align); + background-color: var(--bg-body); // 2 -webkit-text-size-adjust: 100%; // 3 -webkit-tap-highlight-color: rgba($black, 0); // 4 } @@ -93,7 +93,7 @@ font-style: $headings-font-style; font-weight: $headings-font-weight; line-height: $headings-line-height; - color: var(--#{$prefix}heading-color); + color: var(--heading-color); } h1, @@ -231,8 +231,8 @@ mark, .mark { padding: $mark-padding; - color: var(--#{$prefix}highlight-color); - background-color: var(--#{$prefix}highlight-bg); + color: var(--highlight-color); + background-color: var(--highlight-bg); } @@ -256,15 +256,15 @@ // Links a { - color: var(--#{$prefix}link-color); - text-decoration: var(--#{$prefix}link-decoration); + color: var(--link-color); + text-decoration: var(--link-decoration); text-underline-offset: $link-underline-offset; &:hover { - // --#{$prefix}link-color: var(--#{$prefix}link-hover-color); - // --#{$prefix}link-decoration: var(--#{$prefix}link-hover-decoration, var(--#{$prefix}link-decoration)); - color: var(--#{$prefix}link-hover-color); - text-decoration: var(--#{$prefix}link-hover-decoration, var(--#{$prefix}link-decoration)); + // --link-color: var(--link-hover-color); + // --link-decoration: var(--link-hover-decoration, var(--link-decoration)); + color: var(--link-hover-color); + text-decoration: var(--link-hover-decoration, var(--link-decoration)); } } @@ -314,7 +314,7 @@ code { font-size: $code-font-size; - color: var(--#{$prefix}code-color); + color: var(--code-color); word-wrap: break-word; // Streamline the style when inside anchors to avoid broken underline and more @@ -369,7 +369,7 @@ // padding-bottom: $table-cell-padding-y; // color: $table-caption-color; padding-block: .5rem; - color: var(--#{$prefix}secondary-color); + color: var(--secondary-color); text-align: start; } diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss index b3a2c42051..c9761539c3 100644 --- a/scss/content/_tables.scss +++ b/scss/content/_tables.scss @@ -16,33 +16,33 @@ $table-cell-padding-x-sm: .25rem !default; $table-cell-vertical-align: top !default; -$table-color: var(--#{$prefix}color-body) !default; -$table-bg: var(--#{$prefix}bg-body) !default; +$table-color: var(--color-body) !default; +$table-bg: var(--bg-body) !default; $table-accent-bg: transparent !default; // $table-th-font-weight: null !default; $table-striped-color: $table-color !default; $table-striped-bg-factor: .05 !default; -$table-striped-bg: color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-striped-bg-factor)}, transparent) !default; +$table-striped-bg: color-mix(in srgb, var(--table-color) #{math.percentage($table-striped-bg-factor)}, transparent) !default; $table-active-color: $table-color !default; $table-active-bg-factor: .1 !default; -$table-active-bg: color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-active-bg-factor)}, transparent) !default; +$table-active-bg: color-mix(in srgb, var(--table-color) #{math.percentage($table-active-bg-factor)}, transparent) !default; $table-hover-color: $table-color !default; $table-hover-bg-factor: .075 !default; -$table-hover-bg: color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-hover-bg-factor)}, transparent) !default; +$table-hover-bg: color-mix(in srgb, var(--table-color) #{math.percentage($table-hover-bg-factor)}, transparent) !default; -$table-border-width: var(--#{$prefix}border-width) !default; -$table-border-color: var(--#{$prefix}border-color) !default; +$table-border-width: var(--border-width) !default; +$table-border-color: var(--border-color) !default; $table-striped-order: odd !default; $table-striped-columns-order: even !default; $table-group-separator-color: currentcolor !default; -// $table-caption-color: var(--#{$prefix}secondary-color) !default; +// $table-caption-color: var(--secondary-color) !default; // scss-docs-end table-variables @@ -54,29 +54,29 @@ $table-group-separator-color: currentcolor !default; @layer content { .table { // Reset needed for nesting tables - --#{$prefix}table-color-type: initial; - --#{$prefix}table-bg-type: initial; - --#{$prefix}table-color-state: initial; - --#{$prefix}table-bg-state: initial; + --table-color-type: initial; + --table-bg-type: initial; + --table-color-state: initial; + --table-bg-state: initial; // End of reset // scss-docs-start table-css-variables - --#{$prefix}table-color: #{$table-color}; - --#{$prefix}table-bg: #{$table-bg}; - --#{$prefix}table-border-color: #{$table-border-color}; - --#{$prefix}table-accent-bg: #{$table-accent-bg}; - --#{$prefix}table-striped-color: #{$table-striped-color}; - --#{$prefix}table-striped-bg: #{$table-striped-bg}; - --#{$prefix}table-active-color: #{$table-active-color}; - --#{$prefix}table-active-bg: #{$table-active-bg}; - --#{$prefix}table-hover-color: #{$table-hover-color}; - --#{$prefix}table-hover-bg: #{$table-hover-bg}; + --table-color: #{$table-color}; + --table-bg: #{$table-bg}; + --table-border-color: #{$table-border-color}; + --table-accent-bg: #{$table-accent-bg}; + --table-striped-color: #{$table-striped-color}; + --table-striped-bg: #{$table-striped-bg}; + --table-active-color: #{$table-active-color}; + --table-active-bg: #{$table-active-bg}; + --table-hover-color: #{$table-hover-color}; + --table-hover-bg: #{$table-hover-bg}; // scss-docs-end table-css-variables width: 100%; margin-bottom: $spacer; vertical-align: $table-cell-vertical-align; - border-color: var(--#{$prefix}theme-border, var(--#{$prefix}table-border-color)); + border-color: var(--theme-border, var(--table-border-color)); // Target th & td // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class. @@ -86,10 +86,10 @@ $table-group-separator-color: currentcolor !default; > :not(caption) > * > * { padding: $table-cell-padding-y $table-cell-padding-x; // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb - color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)))); - background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-bg)); + color: var(--table-color-state, var(--table-color-type, var(--theme-text, var(--table-color)))); + background-color: var(--theme-bg-subtle, var(--table-bg)); border-block-end-width: $table-border-width; - box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-accent-bg)))); + box-shadow: inset 0 0 0 9999px var(--table-bg-state, var(--table-bg-type, var(--theme-bg-subtle, var(--table-accent-bg)))); } > tbody { @@ -164,16 +164,16 @@ $table-group-separator-color: currentcolor !default; // For rows .table-striped { > tbody > tr:nth-of-type(#{$table-striped-order}) > * { - --#{$prefix}table-color-type: var(--#{$prefix}theme-text, var(--#{$prefix}table-striped-color)); - --#{$prefix}table-bg-type: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-striped-bg-factor)}, transparent); + --table-color-type: var(--theme-text, var(--table-striped-color)); + --table-bg-type: color-mix(in srgb, var(--theme-text, var(--table-color)) #{math.percentage($table-striped-bg-factor)}, transparent); } } // For columns .table-striped-columns { > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) { - --#{$prefix}table-color-type: var(--#{$prefix}theme-text, var(--#{$prefix}table-striped-color)); - --#{$prefix}table-bg-type: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-striped-bg-factor)}, transparent); + --table-color-type: var(--theme-text, var(--table-striped-color)); + --table-bg-type: color-mix(in srgb, var(--theme-text, var(--table-color)) #{math.percentage($table-striped-bg-factor)}, transparent); } } @@ -182,8 +182,8 @@ $table-group-separator-color: currentcolor !default; // The `.table-active` class can be added to highlight rows or cells .table-active { - --#{$prefix}table-color-state: var(--#{$prefix}theme-text, var(--#{$prefix}table-active-color)); - --#{$prefix}table-bg-state: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-active-bg-factor)}, transparent); + --table-color-state: var(--theme-text, var(--table-active-color)); + --table-bg-state: color-mix(in srgb, var(--theme-text, var(--table-color)) #{math.percentage($table-active-bg-factor)}, transparent); } // Hover effect @@ -192,8 +192,8 @@ $table-group-separator-color: currentcolor !default; .table-hover { > tbody > tr:hover > * { - --#{$prefix}table-color-state: var(--#{$prefix}theme-text, var(--#{$prefix}table-hover-color)); - --#{$prefix}table-bg-state: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-hover-bg-factor)}, transparent); + --table-color-state: var(--theme-text, var(--table-hover-color)); + --table-bg-state: color-mix(in srgb, var(--theme-text, var(--table-color)) #{math.percentage($table-hover-bg-factor)}, transparent); } } diff --git a/scss/forms/_check.scss b/scss/forms/_check.scss index b20df8ba91..6c597219b2 100644 --- a/scss/forms/_check.scss +++ b/scss/forms/_check.scss @@ -9,36 +9,36 @@ @use "form-variables" as *; // scss-docs-start check-variables -$check-border-color: var(--#{$prefix}border-color) !default; -$check-checked-bg: var(--#{$prefix}primary-base) !default; +$check-border-color: var(--border-color) !default; +$check-checked-bg: var(--primary-base) !default; $check-checked-border-color: $check-checked-bg !default; -$check-indeterminate-bg: var(--#{$prefix}primary-base) !default; +$check-indeterminate-bg: var(--primary-base) !default; $check-indeterminate-border-color: $check-indeterminate-bg !default; -$check-disabled-bg: var(--#{$prefix}bg-3) !default; +$check-disabled-bg: var(--bg-3) !default; $check-disabled-opacity: .65 !default; // scss-docs-end check-variables @layer forms { b-checkgroup { display: flex; - gap: var(--#{$prefix}gap, .5rem); - align-items: var(--#{$prefix}align-items, start); + gap: var(--gap, .5rem); + align-items: var(--align-items, start); .description { - color: var(--#{$prefix}secondary-text); + color: var(--secondary-text); } } .check { // scss-docs-start check-css-variables - --#{$prefix}check-bg: transparent; - --#{$prefix}check-border-color: #{$check-border-color}; - --#{$prefix}check-checked-bg: #{$check-checked-bg}; - --#{$prefix}check-checked-border-color: #{$check-checked-border-color}; - --#{$prefix}check-indeterminate-bg: #{$check-indeterminate-bg}; - --#{$prefix}check-indeterminate-border-color: #{$check-indeterminate-border-color}; - --#{$prefix}check-disabled-bg: #{$check-disabled-bg}; - --#{$prefix}check-disabled-opacity: #{$check-disabled-opacity}; + --check-bg: transparent; + --check-border-color: #{$check-border-color}; + --check-checked-bg: #{$check-checked-bg}; + --check-checked-border-color: #{$check-checked-border-color}; + --check-indeterminate-bg: #{$check-indeterminate-bg}; + --check-indeterminate-border-color: #{$check-indeterminate-border-color}; + --check-disabled-bg: #{$check-disabled-bg}; + --check-disabled-opacity: #{$check-disabled-opacity}; // scss-docs-end check-css-variables display: grid; @@ -56,15 +56,15 @@ $check-disabled-opacity: .65 !default; :where(input) { appearance: none; // later: maybe set a tertiary bg color? - background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-bg)); - border: 1px solid var(--#{$prefix}theme-bg, var(--#{$prefix}check-border-color)); + background-color: var(--theme-bg, var(--check-bg)); + border: 1px solid var(--theme-bg, var(--check-border-color)); // stylelint-disable-next-line property-disallowed-list border-radius: .25em; } :where(input:checked, input:indeterminate) { - background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-checked-bg)); - border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-checked-border-color)); + background-color: var(--theme-bg, var(--check-checked-bg)); + border-color: var(--theme-bg, var(--check-checked-border-color)); } :where(input:focus-visible) { @@ -74,20 +74,20 @@ $check-disabled-opacity: .65 !default; &:has(input:checked) .checked, &:has(input:indeterminate) .indeterminate { display: block; - color: var(--#{$prefix}primary-contrast); + color: var(--primary-contrast); stroke: currentcolor; } &:has(input:disabled) { - --#{$prefix}check-bg: var(--#{$prefix}check-disabled-bg); + --check-bg: var(--check-disabled-bg); ~ label { - color: var(--#{$prefix}secondary-text); + color: var(--secondary-text); cursor: default; } } &:has(input:disabled:checked) { - opacity: var(--#{$prefix}check-disabled-opacity); + opacity: var(--check-disabled-opacity); } :where(svg) { diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index aec2e663da..57716ba192 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -15,7 +15,7 @@ $form-floating-input-padding-b: .625rem !default; $form-floating-label-height: 1.5em !default; $form-floating-label-opacity: .65 !default; $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default; -$form-floating-label-disabled-color: var(--#{$prefix}gray-600) !default; +$form-floating-label-disabled-color: var(--gray-600) !default; $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default; // scss-docs-end form-floating-variables @@ -40,7 +40,7 @@ $form-floating-transition: opacity .1s ease-in-out, transform .1s e height: 100%; // allow textareas padding: $form-floating-padding-y $form-floating-padding-x; overflow: hidden; - color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity}); + color: rgba(var(--body-color-rgb), #{$form-floating-label-opacity}); text-align: start; text-overflow: ellipsis; white-space: nowrap; diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index d0e40d62d6..07b8b134da 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -13,33 +13,33 @@ @layer forms { .form-control { - --#{$prefix}control-min-height: #{$control-min-height}; - --#{$prefix}control-padding-y: #{$control-padding-y}; - --#{$prefix}control-padding-x: #{$control-padding-x}; - --#{$prefix}control-font-size: #{$control-font-size}; - --#{$prefix}control-line-height: #{$control-line-height}; - --#{$prefix}control-color: #{$control-color}; - --#{$prefix}control-bg: #{$control-bg}; - --#{$prefix}control-border-width: #{$control-border-width}; - --#{$prefix}control-border-color: #{$control-border-color}; - --#{$prefix}control-border-radius: #{$control-border-radius}; - --#{$prefix}control-select-bg-color: #{$control-select-indicator-color}; - --#{$prefix}control-select-bg: #{escape-svg($control-select-indicator)}; - --#{$prefix}control-select-bg-position: #{$control-select-bg-position}; - --#{$prefix}control-select-bg-size: #{$control-select-bg-size}; + --control-min-height: #{$control-min-height}; + --control-padding-y: #{$control-padding-y}; + --control-padding-x: #{$control-padding-x}; + --control-font-size: #{$control-font-size}; + --control-line-height: #{$control-line-height}; + --control-color: #{$control-color}; + --control-bg: #{$control-bg}; + --control-border-width: #{$control-border-width}; + --control-border-color: #{$control-border-color}; + --control-border-radius: #{$control-border-radius}; + --control-select-bg-color: #{$control-select-indicator-color}; + --control-select-bg: #{escape-svg($control-select-indicator)}; + --control-select-bg-position: #{$control-select-bg-position}; + --control-select-bg-size: #{$control-select-bg-size}; display: block; width: 100%; - min-height: var(--#{$prefix}control-min-height); - padding: var(--#{$prefix}control-padding-y) var(--#{$prefix}control-padding-x); - font-size: var(--#{$prefix}control-font-size); - line-height: var(--#{$prefix}control-line-height); - color: var(--#{$prefix}control-color); + min-height: var(--control-min-height); + padding: var(--control-padding-y) var(--control-padding-x); + font-size: var(--control-font-size); + line-height: var(--control-line-height); + color: var(--control-color); appearance: none; - background-color: var(--#{$prefix}control-bg); + background-color: var(--control-bg); background-clip: padding-box; - border: var(--#{$prefix}control-border-width) solid var(--#{$prefix}control-border-color); - @include border-radius(var(--#{$prefix}control-border-radius), 0); + border: var(--control-border-width) solid var(--control-border-color); + @include border-radius(var(--control-border-radius), 0); @include box-shadow($input-box-shadow); @include transition($input-transition); @@ -57,7 +57,7 @@ background-color: $input-focus-bg; border-color: $input-focus-border-color; @include focus-ring(true); - --#{$prefix}focus-ring-offset: -1px; + --focus-ring-offset: -1px; } &::-webkit-date-and-time-value { @@ -110,17 +110,17 @@ // File input buttons theming &::file-selector-button { - min-height: var(--#{$prefix}control-min-height); - padding: var(--#{$prefix}control-padding-y) var(--#{$prefix}control-padding-x); - margin: calc(var(--#{$prefix}control-padding-y) * -1) calc(var(--#{$prefix}control-padding-x) * -1); - margin-inline-end: var(--#{$prefix}control-padding-x); + min-height: var(--control-min-height); + padding: var(--control-padding-y) var(--control-padding-x); + margin: calc(var(--control-padding-y) * -1) calc(var(--control-padding-x) * -1); + margin-inline-end: var(--control-padding-x); color: $form-file-button-color; @include gradient-bg($form-file-button-bg); pointer-events: none; border-color: inherit; border-style: solid; border-width: 0; - border-inline-end-width: var(--#{$prefix}control-border-width); + border-inline-end-width: var(--control-border-width); border-radius: 0; // stylelint-disable-line property-disallowed-list @include transition($btn-transition); } @@ -158,21 +158,21 @@ // stylelint-disable selector-no-qualifying-type select.form-control { - padding-inline-end: calc(var(--#{$prefix}control-padding-x) * 3); - background-image: var(--#{$prefix}control-select-bg); + padding-inline-end: calc(var(--control-padding-x) * 3); + background-image: var(--control-select-bg); background-repeat: no-repeat; - background-position: var(--#{$prefix}control-select-bg-position); - background-size: var(--#{$prefix}control-select-bg-size); + background-position: var(--control-select-bg-position); + background-size: var(--control-select-bg-size); &[multiple], &[size]:not([size="1"]) { - padding-inline-end: var(--#{$prefix}control-padding-x); + padding-inline-end: var(--control-padding-x); background-image: none; } @if $enable-dark-mode { @include color-mode(dark) { - --#{$prefix}control-select-indicator: #{escape-svg($control-select-indicator-dark)}; + --control-select-indicator: #{escape-svg($control-select-indicator-dark)}; } } } @@ -186,21 +186,21 @@ // Repeated in `_input_group.scss` to avoid Sass extend issues. .form-control-sm { - --#{$prefix}control-min-height: #{$control-min-height-sm}; - --#{$prefix}control-padding-y: #{$control-padding-y-sm}; - --#{$prefix}control-padding-x: #{$control-padding-x-sm}; - --#{$prefix}control-font-size: #{$control-font-size-sm}; - --#{$prefix}control-line-height: #{$control-line-height-sm}; - --#{$prefix}control-border-radius: #{$control-border-radius-sm}; + --control-min-height: #{$control-min-height-sm}; + --control-padding-y: #{$control-padding-y-sm}; + --control-padding-x: #{$control-padding-x-sm}; + --control-font-size: #{$control-font-size-sm}; + --control-line-height: #{$control-line-height-sm}; + --control-border-radius: #{$control-border-radius-sm}; } .form-control-lg { - --#{$prefix}control-min-height: #{$control-min-height-lg}; - --#{$prefix}control-padding-y: #{$control-padding-y-lg}; - --#{$prefix}control-padding-x: #{$control-padding-x-lg}; - --#{$prefix}control-font-size: #{$control-font-size-lg}; - --#{$prefix}control-line-height: #{$control-line-height-lg}; - --#{$prefix}control-border-radius: #{$control-border-radius-lg}; + --control-min-height: #{$control-min-height-lg}; + --control-padding-y: #{$control-padding-y-lg}; + --control-padding-x: #{$control-padding-x-lg}; + --control-font-size: #{$control-font-size-lg}; + --control-line-height: #{$control-line-height-lg}; + --control-border-radius: #{$control-border-radius-lg}; } // // Make sure textareas don't shrink too much when resized diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss index 16dfae13fd..0b3830302a 100644 --- a/scss/forms/_form-range.scss +++ b/scss/forms/_form-range.scss @@ -12,9 +12,9 @@ $form-range-track-width: 100% !default; $form-range-track-height: .5rem !default; $form-range-track-cursor: pointer !default; -$form-range-track-bg: var(--#{$prefix}secondary-bg) !default; +$form-range-track-bg: var(--secondary-bg) !default; $form-range-track-border-radius: 1rem !default; -$form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default; +$form-range-track-box-shadow: var(--box-shadow-inset) !default; $form-range-thumb-width: 1rem !default; $form-range-thumb-height: $form-range-thumb-width !default; @@ -23,14 +23,14 @@ $form-range-thumb-border: 0 !default; $form-range-thumb-border-radius: 1rem !default; $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default; -$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default; +$form-range-thumb-disabled-bg: var(--secondary-color) !default; $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; // scss-docs-end form-range-variables @layer forms { .form-range { width: 100%; - height: calc(#{$form-range-thumb-height} + (var(--#{$prefix}focus-ring-width) * 2)); + height: calc(#{$form-range-thumb-height} + (var(--focus-ring-width) * 2)); padding: 0; // Need to reset padding appearance: none; background-color: transparent; @@ -42,11 +42,11 @@ $form-range-thumb-transition: background-color .15s ease-in-out, bo // Pseudo-elements must be split across multiple rulesets to have an effect. &::-webkit-slider-thumb { @include focus-ring(true); - --#{$prefix}focus-ring-offset: 1px; + --focus-ring-offset: 1px; } &::-moz-range-thumb { @include focus-ring(true); - --#{$prefix}focus-ring-offset: 1px; + --focus-ring-offset: 1px; } } diff --git a/scss/forms/_form-text.scss b/scss/forms/_form-text.scss index eae06858e8..42af082ebd 100644 --- a/scss/forms/_form-text.scss +++ b/scss/forms/_form-text.scss @@ -7,7 +7,7 @@ $form-text-margin-top: .25rem !default; $form-text-font-size: $small-font-size !default; $form-text-font-style: null !default; $form-text-font-weight: null !default; -$form-text-color: var(--#{$prefix}secondary-color) !default; +$form-text-color: var(--secondary-color) !default; // scss-docs-end form-text-variables @layer forms { diff --git a/scss/forms/_form-variables.scss b/scss/forms/_form-variables.scss index f9dc02e82a..76d4fddff1 100644 --- a/scss/forms/_form-variables.scss +++ b/scss/forms/_form-variables.scss @@ -9,25 +9,25 @@ $control-padding-y: .375rem !default; $control-padding-x: .75rem !default; $control-font-size: $font-size-base !default; $control-line-height: $line-height-base !default; -$control-color: var(--#{$prefix}color-body) !default; -$control-bg: var(--#{$prefix}bg-body) !default; -$control-border-width: var(--#{$prefix}border-width) !default; -$control-border-color: var(--#{$prefix}border-color) !default; -$control-border-radius: var(--#{$prefix}border-radius) !default; +$control-color: var(--color-body) !default; +$control-bg: var(--bg-body) !default; +$control-border-width: var(--border-width) !default; +$control-border-color: var(--border-color) !default; +$control-border-radius: var(--border-radius) !default; $control-padding-y-sm: .25rem !default; $control-padding-x-sm: .5rem !default; $control-font-size-sm: $font-size-sm !default; $control-line-height-sm: $line-height-sm !default; -$control-border-radius-sm: var(--#{$prefix}border-radius-sm) !default; +$control-border-radius-sm: var(--border-radius-sm) !default; $control-padding-y-lg: .5rem !default; $control-padding-x-lg: 1rem !default; $control-font-size-lg: $font-size-lg !default; $control-line-height-lg: $line-height-lg !default; -$control-border-radius-lg: var(--#{$prefix}border-radius-lg) !default; +$control-border-radius-lg: var(--border-radius-lg) !default; -$control-select-indicator-color: var(--#{$prefix}gray-600) !default; +$control-select-indicator-color: var(--gray-600) !default; $control-select-indicator: url("data:image/svg+xml,") !default; $control-select-bg-position: right $control-padding-x center !default; $control-select-bg-size: 16px 12px !default; @@ -57,7 +57,7 @@ $input-btn-padding-y-lg: .5rem !default; $input-btn-padding-x-lg: 1rem !default; $input-btn-font-size-lg: $font-size-lg !default; -// $input-btn-border-width: var(--#{$prefix}border-width) !default; +// $input-btn-border-width: var(--border-width) !default; // scss-docs-end input-btn-variables // scss-docs-start form-input-variables @@ -76,26 +76,26 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default; $input-padding-x-lg: $input-btn-padding-x-lg !default; $input-font-size-lg: $input-btn-font-size-lg !default; -$input-bg: var(--#{$prefix}bg-body) !default; +$input-bg: var(--bg-body) !default; $input-disabled-color: null !default; -$input-disabled-bg: var(--#{$prefix}secondary-bg) !default; +$input-disabled-bg: var(--secondary-bg) !default; $input-disabled-border-color: null !default; -$input-color: var(--#{$prefix}color-body) !default; -$input-border-color: var(--#{$prefix}border-color) !default; -$input-border-width: var(--#{$prefix}border-width) !default; -$input-box-shadow: var(--#{$prefix}box-shadow-inset) !default; +$input-color: var(--color-body) !default; +$input-border-color: var(--border-color) !default; +$input-border-width: var(--border-width) !default; +$input-box-shadow: var(--box-shadow-inset) !default; -$input-border-radius: var(--#{$prefix}border-radius) !default; -$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default; -$input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default; +$input-border-radius: var(--border-radius) !default; +$input-border-radius-sm: var(--border-radius-sm) !default; +$input-border-radius-lg: var(--border-radius-lg) !default; $input-focus-bg: $input-bg !default; -$input-focus-border-color: var(--#{$prefix}primary-border) !default; +$input-focus-border-color: var(--primary-border) !default; $input-focus-color: $input-color !default; -$input-placeholder-color: var(--#{$prefix}secondary-color) !default; -$input-plaintext-color: var(--#{$prefix}color-body) !default; +$input-placeholder-color: var(--secondary-color) !default; +$input-plaintext-color: var(--color-body) !default; $input-height-border: calc(#{$input-border-width} * 2) !default; @@ -117,16 +117,16 @@ $form-color-width: 3rem !default; // scss-docs-start form-file-variables $form-file-button-color: $input-color !default; -$form-file-button-bg: var(--#{$prefix}tertiary-bg) !default; -$form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default; +$form-file-button-bg: var(--tertiary-bg) !default; +$form-file-button-hover-bg: var(--secondary-bg) !default; // scss-docs-end form-file-variables // scss-docs-start form-feedback-variables $form-feedback-margin-top: .5rem !default; $form-feedback-font-size: $font-size-sm !default; $form-feedback-font-style: null !default; -$form-feedback-valid-color: var(--#{$prefix}success) !default; -$form-feedback-invalid-color: var(--#{$prefix}danger) !default; +$form-feedback-valid-color: var(--success) !default; +$form-feedback-invalid-color: var(--danger) !default; $form-feedback-icon-valid-color: $form-feedback-valid-color !default; $form-feedback-icon-valid: url("data:image/svg+xml,") !default; @@ -144,20 +144,20 @@ $form-invalid-border-color: $form-feedback-invalid-color !default; // scss-docs-start form-validation-states $form-validation-states: ( "valid": ( - "color": var(--#{$prefix}form-valid-color), + "color": var(--form-valid-color), "icon": $form-feedback-icon-valid, "tooltip-color": #fff, - "tooltip-bg-color": var(--#{$prefix}success), - // "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity), - "border-color": var(--#{$prefix}form-valid-border-color), + "tooltip-bg-color": var(--success), + // "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--success-rgb), $input-btn-focus-color-opacity), + "border-color": var(--form-valid-border-color), ), "invalid": ( - "color": var(--#{$prefix}form-invalid-color), + "color": var(--form-invalid-color), "icon": $form-feedback-icon-invalid, "tooltip-color": #fff, - "tooltip-bg-color": var(--#{$prefix}danger), - // "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity), - "border-color": var(--#{$prefix}form-invalid-border-color), + "tooltip-bg-color": var(--danger), + // "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--danger-rgb), $input-btn-focus-color-opacity), + "border-color": var(--form-invalid-border-color), ) ) !default; // scss-docs-end form-validation-states diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index b302b81845..50cb0a1610 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -11,7 +11,7 @@ $input-group-addon-padding-y: $input-padding-y !default; $input-group-addon-padding-x: $input-padding-x !default; // $input-group-addon-font-weight: $input-font-weight !default; $input-group-addon-color: $input-color !default; -$input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default; +$input-group-addon-bg: var(--tertiary-bg) !default; $input-group-addon-border-color: $input-border-color !default; // scss-docs-end input-group-variables diff --git a/scss/forms/_radio.scss b/scss/forms/_radio.scss index bac10eb92a..b04df330b3 100644 --- a/scss/forms/_radio.scss +++ b/scss/forms/_radio.scss @@ -9,32 +9,32 @@ @use "form-variables" as *; // scss-docs-start radio-variables -$radio-border-color: var(--#{$prefix}border-color) !default; -$radio-checked-bg: var(--#{$prefix}primary-base) !default; +$radio-border-color: var(--border-color) !default; +$radio-checked-bg: var(--primary-base) !default; $radio-checked-border-color: $radio-checked-bg !default; -$radio-disabled-bg: var(--#{$prefix}bg-3) !default; +$radio-disabled-bg: var(--bg-3) !default; $radio-disabled-opacity: .65 !default; // scss-docs-end radio-variables @layer forms { b-radiogroup { display: flex; - gap: var(--#{$prefix}gap, .5rem); - align-items: var(--#{$prefix}align-items, start); + gap: var(--gap, .5rem); + align-items: var(--align-items, start); .description { - color: var(--#{$prefix}secondary-text); + color: var(--secondary-text); } } .radio { // scss-docs-start radio-css-variables - --#{$prefix}radio-bg: transparent; - --#{$prefix}radio-border-color: #{$radio-border-color}; - --#{$prefix}radio-checked-bg: #{$radio-checked-bg}; - --#{$prefix}radio-checked-border-color: #{$radio-checked-border-color}; - --#{$prefix}radio-disabled-bg: #{$radio-disabled-bg}; - --#{$prefix}radio-disabled-opacity: #{$radio-disabled-opacity}; + --radio-bg: transparent; + --radio-border-color: #{$radio-border-color}; + --radio-checked-bg: #{$radio-checked-bg}; + --radio-checked-border-color: #{$radio-checked-border-color}; + --radio-disabled-bg: #{$radio-disabled-bg}; + --radio-disabled-opacity: #{$radio-disabled-opacity}; // scss-docs-end radio-css-variables position: relative; @@ -43,15 +43,15 @@ $radio-disabled-opacity: .65 !default; height: 1rem; margin-block: .125rem; appearance: none; - background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-bg)); - border: 1px solid var(--#{$prefix}theme-bg, var(--#{$prefix}radio-border-color)); + background-color: var(--theme-bg, var(--radio-bg)); + border: 1px solid var(--theme-bg, var(--radio-border-color)); // stylelint-disable-next-line property-disallowed-list border-radius: 50%; &:checked { - color: var(--#{$prefix}theme-contrast, var(--#{$prefix}primary-contrast)); - background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-bg)); - border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-border-color)); + color: var(--theme-contrast, var(--primary-contrast)); + background-color: var(--theme-bg, var(--radio-checked-bg)); + border-color: var(--theme-bg, var(--radio-checked-border-color)); &::before { position: absolute; @@ -64,10 +64,10 @@ $radio-disabled-opacity: .65 !default; } &:disabled { - --#{$prefix}radio-bg: var(--#{$prefix}radio-disabled-bg); + --radio-bg: var(--radio-disabled-bg); ~ label { - color: var(--#{$prefix}secondary-text); + color: var(--secondary-text); cursor: default; } } diff --git a/scss/forms/_switch.scss b/scss/forms/_switch.scss index 57285c9080..9e81780f5f 100644 --- a/scss/forms/_switch.scss +++ b/scss/forms/_switch.scss @@ -12,18 +12,18 @@ @layer forms { .switch { // scss-docs-start switch-css-variables - --#{$prefix}switch-height: 1.25rem; - --#{$prefix}switch-width: calc(var(--#{$prefix}switch-height) * 1.5); - --#{$prefix}switch-padding: .0625rem; - --#{$prefix}switch-bg: var(--#{$prefix}secondary-bg); - --#{$prefix}switch-border-width: var(--#{$prefix}border-width); - --#{$prefix}switch-border-color: var(--#{$prefix}border-color); - --#{$prefix}switch-indicator-bg: var(--#{$prefix}white); - --#{$prefix}switch-checked-bg: var(--#{$prefix}primary-base); - --#{$prefix}switch-checked-border-color: var(--#{$prefix}switch-checked-bg); - --#{$prefix}switch-checked-indicator-bg: var(--#{$prefix}white); - --#{$prefix}switch-disabled-bg: var(--#{$prefix}secondary-bg); - --#{$prefix}switch-disabled-indicator-bg: var(--#{$prefix}secondary-text); + --switch-height: 1.25rem; + --switch-width: calc(var(--switch-height) * 1.5); + --switch-padding: .0625rem; + --switch-bg: var(--secondary-bg); + --switch-border-width: var(--border-width); + --switch-border-color: var(--border-color); + --switch-indicator-bg: var(--white); + --switch-checked-bg: var(--primary-base); + --switch-checked-border-color: var(--switch-checked-bg); + --switch-checked-indicator-bg: var(--white); + --switch-disabled-bg: var(--secondary-bg); + --switch-disabled-indicator-bg: var(--secondary-text); // scss-docs-end switch-css-variables position: relative; @@ -31,11 +31,11 @@ flex-shrink: 0; align-items: stretch; justify-content: flex-start; - width: var(--#{$prefix}switch-width); - height: var(--#{$prefix}switch-height); - padding: var(--#{$prefix}switch-padding); - background-color: var(--#{$prefix}switch-bg); - border: var(--#{$prefix}switch-border-width) solid var(--#{$prefix}switch-border-color); + width: var(--switch-width); + height: var(--switch-height); + padding: var(--switch-padding); + background-color: var(--switch-bg); + border: var(--switch-border-width) solid var(--switch-border-color); // stylelint-disable-next-line property-disallowed-list border-radius: 10rem; box-shadow: inset 0 1px 2px rgba($black, .05); @@ -45,10 +45,10 @@ &::before { flex-shrink: 0; - width: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2) - var(--#{$prefix}switch-border-width) * 2); - height: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2) - var(--#{$prefix}switch-border-width) * 2); + width: calc(var(--switch-height) - calc(var(--switch-padding) * 2) - var(--switch-border-width) * 2); + height: calc(var(--switch-height) - calc(var(--switch-padding) * 2) - var(--switch-border-width) * 2); content: ""; - background-color: var(--#{$prefix}switch-indicator-bg); + background-color: var(--switch-indicator-bg); // stylelint-disable-next-line property-disallowed-list border-radius: 50%; box-shadow: 0 1px 2px rgba($black, .1); @@ -67,27 +67,27 @@ } &:has(input:checked) { - padding-inline-start: calc(var(--#{$prefix}switch-height) / 2 + var(--#{$prefix}switch-padding)); - background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}switch-checked-bg)); - border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}switch-checked-border-color)); + padding-inline-start: calc(var(--switch-height) / 2 + var(--switch-padding)); + background-color: var(--theme-bg, var(--switch-checked-bg)); + border-color: var(--theme-bg, var(--switch-checked-border-color)); } &:has(input:disabled) { - --#{$prefix}switch-bg: var(--#{$prefix}switch-disabled-bg); - --#{$prefix}switch-indicator-bg: var(--#{$prefix}switch-disabled-indicator-bg); + --switch-bg: var(--switch-disabled-bg); + --switch-indicator-bg: var(--switch-disabled-indicator-bg); &::before { opacity: .4; } ~ label { - color: var(--#{$prefix}secondary-text); + color: var(--secondary-text); cursor: default; } } } .switch-sm { - --#{$prefix}switch-height: 1em; + --switch-height: 1em; } .switch-lg { - --#{$prefix}switch-height: 2em; + --switch-height: 2em; } } diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss index c6834a78fa..cdd6d2e058 100644 --- a/scss/forms/_validation.scss +++ b/scss/forms/_validation.scss @@ -111,7 +111,7 @@ // @if $enable-validation-icons { // &:not([multiple]):not([size]), // &:not([multiple])[size="1"] { - // --#{$prefix}form-select-bg-icon: #{escape-svg($icon)}; + // --form-select-bg-icon: #{escape-svg($icon)}; // padding-right: $form-select-feedback-icon-padding-end; // background-position: $form-select-bg-position, $form-select-feedback-icon-position; // background-size: $form-select-bg-size, $form-select-feedback-icon-size; diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss index 1e8aeea56c..410e25806c 100644 --- a/scss/helpers/_color-bg.scss +++ b/scss/helpers/_color-bg.scss @@ -7,10 +7,10 @@ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 @each $color, $value in $new-theme-colors { .text-bg-#{$color} { - color: var(--#{$prefix}#{$color}-text); - --#{$prefix}bg: var(--#{$prefix}#{$color}-bg-subtle); + color: var(--#{$color}-text); + --bg: var(--#{$color}-bg-subtle); // color: color-contrast($value); - // background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)); + // background-color: RGBA(var(--#{$color}-rgb), var(--bg-opacity, 1)); } } } diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss index 369493ba9b..fdd8b458ea 100644 --- a/scss/helpers/_colored-links.scss +++ b/scss/helpers/_colored-links.scss @@ -6,17 +6,17 @@ @layer helpers { @each $color, $value in $new-theme-colors { .link-#{$color} { - --#{$prefix}link-color: var(--#{$prefix}#{$color}-text); - // text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}-text), transparent var(--#{$prefix}link-underline-opacity)); + --link-color: var(--#{$color}-text); + // text-decoration-color: color-mix(in srgb, var(--#{$color}-text), transparent var(--link-underline-opacity)); @if $link-shade-percentage != 0 { &:hover, &:focus { - --#{$prefix}link-color: var(--#{$prefix}#{$color}-text-emphasis); - --#{$prefix}link-hover-color: var(--#{$prefix}#{$color}-text-emphasis); + --link-color: var(--#{$color}-text-emphasis); + --link-hover-color: var(--#{$color}-text-emphasis); // $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); - // color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity)); - // text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}-text), transparent var(--#{$prefix}link-underline-opacity)); + // color: color-mix(in srgb, $hover-color, transparent var(--link-opacity)); + // text-decoration-color: color-mix(in srgb, var(--#{$color}-text), transparent var(--link-underline-opacity)); } } } @@ -24,14 +24,14 @@ // One-off special link helper as a bridge until v6 .link-body-emphasis { - color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity)); - text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity)); + color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-opacity)); + text-decoration-color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-underline-opacity)); @if $link-shade-percentage != 0 { &:hover, &:focus { - color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity, .75)); - text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity, .75)); + color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-opacity, .75)); + text-decoration-color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-underline-opacity, .75)); } } } diff --git a/scss/helpers/_focus-ring.scss b/scss/helpers/_focus-ring.scss index 02fccb7d0d..602c033365 100644 --- a/scss/helpers/_focus-ring.scss +++ b/scss/helpers/_focus-ring.scss @@ -2,6 +2,6 @@ @layer helpers { .focus-ring:focus-visible { - outline: var(--#{$prefix}focus-ring); + outline: var(--focus-ring); } } diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss index b1014e79ae..591be0260c 100644 --- a/scss/helpers/_icon-link.scss +++ b/scss/helpers/_icon-link.scss @@ -7,7 +7,7 @@ display: inline-flex; gap: $icon-link-gap; align-items: center; - text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5)); + text-decoration-color: rgba(var(--link-color-rgb), var(--link-opacity, .5)); text-underline-offset: $icon-link-underline-offset; backface-visibility: hidden; @@ -24,7 +24,7 @@ &:hover, &:focus-visible { > .bi { - transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform); + transform: var(--icon-link-transform, $icon-link-icon-transform); } } } diff --git a/scss/layout/_containers.scss b/scss/layout/_containers.scss index d19bc720ad..b508411bc2 100644 --- a/scss/layout/_containers.scss +++ b/scss/layout/_containers.scss @@ -7,10 +7,10 @@ // Container mixins @mixin make-container($gutter: $container-padding-x) { - --#{$prefix}gutter-x: #{$gutter}; - --#{$prefix}gutter-y: 0; + --gutter-x: #{$gutter}; + --gutter-y: 0; width: 100%; - padding-inline: calc(var(--#{$prefix}gutter-x) * .5); + padding-inline: calc(var(--gutter-x) * .5); margin-inline: auto; } diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss index 51b17d661b..8f068e3cfb 100644 --- a/scss/layout/_grid.scss +++ b/scss/layout/_grid.scss @@ -8,7 +8,7 @@ :root { @each $name, $value in $grid-breakpoints { - --#{$prefix}breakpoint-#{$name}: #{$value}; + --breakpoint-#{$name}: #{$value}; } } @@ -27,14 +27,14 @@ @if $enable-cssgrid { .grid { - --#{$prefix}columns: #{$grid-columns}; - --#{$prefix}rows: 1; - --#{$prefix}gap: #{$grid-gutter-width}; + --columns: #{$grid-columns}; + --rows: 1; + --gap: #{$grid-gutter-width}; display: grid; - grid-template-rows: repeat(var(--#{$prefix}rows), 1fr); - grid-template-columns: repeat(var(--#{$prefix}columns), 1fr); - gap: var(--#{$prefix}gap); + grid-template-rows: repeat(var(--rows), 1fr); + grid-template-columns: repeat(var(--columns), 1fr); + gap: var(--gap); } @@ -47,12 +47,12 @@ } .grid-fill { - --#{$prefix}gap: #{$grid-gutter-width}; + --gap: #{$grid-gutter-width}; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: row; - gap: var(--#{$prefix}gap); + gap: var(--gap); } // .g-col-auto { @@ -61,13 +61,13 @@ // mdo-do: add to utilities? // .grid-cols-3 { - // --#{$prefix}columns: 3; + // --columns: 3; // } // .grid-cols-4 { - // --#{$prefix}columns: 4; + // --columns: 4; // } // .grid-cols-6 { - // --#{$prefix}columns: 6; + // --columns: 6; // } // .grid-full { diff --git a/scss/mixins/_focus-ring.scss b/scss/mixins/_focus-ring.scss index 62fcebe322..fd39eadef6 100644 --- a/scss/mixins/_focus-ring.scss +++ b/scss/mixins/_focus-ring.scss @@ -3,11 +3,11 @@ @mixin focus-ring($offset: false, $color: null) { @if $color != null { - outline: var(--#{$prefix}focus-ring-width) solid #{$color}; + outline: var(--focus-ring-width) solid #{$color}; } @else { - outline: var(--#{$prefix}focus-ring); + outline: var(--focus-ring); } @if $offset { - outline-offset: var(--#{$prefix}focus-ring-offset); + outline-offset: var(--focus-ring-offset); } } diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index b6f82acaec..ea1b9e8d14 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -96,7 +96,7 @@ @if $enable-validation-icons { &:not([multiple]):not([size]), &:not([multiple])[size="1"] { - --#{$prefix}form-select-bg-icon: #{escape-svg($icon)}; + --form-select-bg-icon: #{escape-svg($icon)}; padding-inline-end: $form-select-feedback-icon-padding-end; background-position: $form-select-bg-position, $form-select-feedback-icon-position; background-size: $form-select-bg-size, $form-select-feedback-icon-size; diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss index d50b4b8aab..f4d2d4f2a1 100644 --- a/scss/mixins/_gradients.scss +++ b/scss/mixins/_gradients.scss @@ -8,7 +8,7 @@ background-color: $color; @if $enable-gradients { - background-image: var(--#{$prefix}gradient); + background-image: var(--gradient); } } // scss-docs-end gradient-bg-mixin @@ -17,18 +17,18 @@ // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. -@mixin gradient-x($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $start-percent: 0%, $end-percent: 100%) { +@mixin gradient-x($start-color: var(--gray-700), $end-color: var(--gray-800), $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); } // Vertical gradient, from top to bottom // // Creates two color stops, start and end, by specifying a color and position for each color stop. -@mixin gradient-y($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $start-percent: null, $end-percent: null) { +@mixin gradient-y($start-color: var(--gray-700), $end-color: var(--gray-800), $start-percent: null, $end-percent: null) { background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); } -@mixin gradient-directional($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $deg: 45deg) { +@mixin gradient-directional($start-color: var(--gray-700), $end-color: var(--gray-800), $deg: 45deg) { background-image: linear-gradient($deg, $start-color, $end-color); } @@ -40,7 +40,7 @@ background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); } -@mixin gradient-radial($inner-color: var(--#{$prefix}gray-700), $outer-color: var(--#{$prefix}gray-800)) { +@mixin gradient-radial($inner-color: var(--gray-700), $outer-color: var(--gray-800)) { background-image: radial-gradient(circle, $inner-color, $outer-color); } diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 384002a683..c17415b034 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -9,13 +9,13 @@ // Generate semantic grid columns with these mixins. @mixin make-row($gutter: $grid-gutter-width) { - --#{$prefix}gutter-x: #{$gutter}; - --#{$prefix}gutter-y: 0; + --gutter-x: #{$gutter}; + --gutter-y: 0; display: flex; flex-wrap: wrap; // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed - margin-inline: calc(-.5 * var(--#{$prefix}gutter-x)); - margin-top: calc(-1 * var(--#{$prefix}gutter-y)); + margin-inline: calc(-.5 * var(--gutter-x)); + margin-top: calc(-1 * var(--gutter-y)); } @mixin make-col-ready() { @@ -28,8 +28,8 @@ flex-shrink: 0; width: 100%; max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid - padding-inline: calc(var(--#{$prefix}gutter-x) * .5); - margin-top: var(--#{$prefix}gutter-y); + padding-inline: calc(var(--gutter-x) * .5); + margin-top: var(--gutter-y); } @mixin make-col($size: false, $columns: $grid-columns) { @@ -120,12 +120,12 @@ @each $key, $value in $gutters { .g#{$infix}-#{$key}, .gx#{$infix}-#{$key} { - --#{$prefix}gutter-x: #{$value}; + --gutter-x: #{$value}; } .g#{$infix}-#{$key}, .gy#{$infix}-#{$key} { - --#{$prefix}gutter-y: #{$value}; + --gutter-y: #{$value}; } } } diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index 6556e69c1a..aaa214b208 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -22,12 +22,12 @@ // 1. Property map with null values (CSS var receives the utility value): // "bg-color": ( // property: ( -// "--#{$prefix}bg": null, -// "background-color": var(--#{$prefix}bg) +// "--bg": null, +// "background-color": var(--bg) // ), // class: bg, // values: ( -// primary: var(--#{$prefix}blue-500), +// primary: var(--blue-500), // ) // ) // Generates: @@ -190,12 +190,12 @@ @if meta.type-of($variables) == "list" { // If variables is a list, each variable gets the utility value @each $var-name in $variables { - --#{$prefix}#{$var-name}: #{$value}; + --#{$var-name}: #{$value}; } } @else if meta.type-of($variables) == "map" { // If variables is a map, use the provided values (for static variables) @each $var-key, $var-value in $variables { - --#{$prefix}#{$var-key}: #{$var-value}; + --#{$var-key}: #{$var-value}; } } } @@ -212,12 +212,12 @@ @if meta.type-of($variables) == "list" { // If variables is a list, each variable gets the utility value @each $var-name in $variables { - --#{$prefix}#{$var-name}: #{$value}; + --#{$var-name}: #{$value}; } } @else if meta.type-of($variables) == "map" { // If variables is a map, use the provided values (for static variables) @each $var-key, $var-value in $variables { - --#{$prefix}#{$var-key}: #{$var-value}; + --#{$var-key}: #{$var-value}; } } } diff --git a/scss/tests/mixins/_utilities.test.scss b/scss/tests/mixins/_utilities.test.scss index 96f3f2b387..0927641e44 100644 --- a/scss/tests/mixins/_utilities.test.scss +++ b/scss/tests/mixins/_utilities.test.scss @@ -1,10 +1,8 @@ -@use "../../config" as *; @use "../../variables" as *; @use "../../functions" as *; @use "../../mixins/utilities" as *; $true-terminal-output: false; -$prefix: bs-; // Important: Do not import rfs to check that the mixin just calls the appropriate functions from it // @import "../../mixins/utilities"; diff --git a/scss/tests/modules/_configuration.test.scss b/scss/tests/modules/_configuration.test.scss index 656ea7eb25..8569944ced 100644 --- a/scss/tests/modules/_configuration.test.scss +++ b/scss/tests/modules/_configuration.test.scss @@ -43,7 +43,7 @@ $true-terminal-output: false; padding-y: 1rem; padding-x: 1rem; // stylelint-disable-next-line property-disallowed-list - border-radius: var(--bs-border-radius); + border-radius: var(--border-radius); } } } diff --git a/site/postcss.config.cjs b/site/postcss.config.cjs index 944b80abf4..0b3b9443c6 100644 --- a/site/postcss.config.cjs +++ b/site/postcss.config.cjs @@ -1,3 +1,9 @@ module.exports = { - plugins: [require('autoprefixer')] + plugins: [ + require('postcss-prefix-custom-properties')({ + prefix: 'bs-', + ignore: [/^--bs-/, /^--bd-/] + }), + require('autoprefixer') + ] } diff --git a/site/src/assets/examples/breadcrumbs/breadcrumbs.css b/site/src/assets/examples/breadcrumbs/breadcrumbs.css index a6be558618..b45d856404 100644 --- a/site/src/assets/examples/breadcrumbs/breadcrumbs.css +++ b/site/src/assets/examples/breadcrumbs/breadcrumbs.css @@ -1,5 +1,5 @@ .breadcrumb-chevron { - --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); + --bs-bs-bs-bs-bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); gap: .5rem; } .breadcrumb-chevron .breadcrumb-item { @@ -34,9 +34,9 @@ height: 50px; margin-top: -25px; content: ""; - background-color: var(--bs-tertiary-bg); + background-color: var(--bs-bs-bs-bs-bs-tertiary-bg); border-top-right-radius: .5rem; - box-shadow: 1px -1px var(--bs-border-color); + box-shadow: 1px -1px var(--bs-bs-bs-bs-bs-border-color); transform: scale(.707) rotate(45deg); } .breadcrumb-custom .breadcrumb-item:first-child { diff --git a/site/src/assets/examples/carousel/carousel.css b/site/src/assets/examples/carousel/carousel.css index be0af524a6..c2b88a9254 100644 --- a/site/src/assets/examples/carousel/carousel.css +++ b/site/src/assets/examples/carousel/carousel.css @@ -5,7 +5,7 @@ body { padding-top: 3rem; padding-bottom: 3rem; - color: rgb(var(--bs-tertiary-color-rgb)); + color: rgb(var(--bs-bs-bs-bs-bs-tertiary-color-rgb)); } diff --git a/site/src/assets/examples/cheatsheet/cheatsheet.css b/site/src/assets/examples/cheatsheet/cheatsheet.css index 5721a028e9..086b4bc4f3 100644 --- a/site/src/assets/examples/cheatsheet/cheatsheet.css +++ b/site/src/assets/examples/cheatsheet/cheatsheet.css @@ -26,29 +26,29 @@ body { padding: .1875rem .5rem; margin-top: .125rem; margin-left: .3125rem; - color: var(--bs-body-color); + color: var(--bs-bs-bs-bs-bs-body-color); } .bd-aside a:hover, .bd-aside a:focus { - color: var(--bs-body-color); + color: var(--bs-bs-bs-bs-bs-body-color); background-color: rgba(121, 82, 179, .1); } .bd-aside .active { font-weight: 600; - color: var(--bs-body-color); + color: var(--bs-bs-bs-bs-bs-body-color); } .bd-aside .btn { padding: .25rem .5rem; font-weight: 600; - color: var(--bs-body-color); + color: var(--bs-bs-bs-bs-bs-body-color); } .bd-aside .btn:hover, .bd-aside .btn:focus { - color: var(--bs-body-color); + color: var(--bs-bs-bs-bs-bs-body-color); background-color: rgba(121, 82, 179, .1); } diff --git a/site/src/assets/examples/dropdowns/dropdowns.css b/site/src/assets/examples/dropdowns/dropdowns.css index f633e2cd83..be88699843 100644 --- a/site/src/assets/examples/dropdowns/dropdowns.css +++ b/site/src/assets/examples/dropdowns/dropdowns.css @@ -1,23 +1,23 @@ .dropdown-item-danger { - color: var(--bs-red); + color: var(--bs-bs-bs-bs-bs-red); } .dropdown-item-danger:hover, .dropdown-item-danger:focus { color: #fff; - background-color: var(--bs-red); + background-color: var(--bs-bs-bs-bs-bs-red); } .dropdown-item-danger.active { - background-color: var(--bs-red); + background-color: var(--bs-bs-bs-bs-bs-red); } .btn-hover-light { - color: var(--bs-body-color); - background-color: var(--bs-body-bg); + color: var(--bs-bs-bs-bs-bs-body-color); + background-color: var(--bs-bs-bs-bs-bs-body-bg); } .btn-hover-light:hover, .btn-hover-light:focus { - color: var(--bs-link-hover-color); - background-color: var(--bs-tertiary-bg); + color: var(--bs-bs-bs-bs-bs-link-hover-color); + background-color: var(--bs-bs-bs-bs-bs-tertiary-bg); } .cal-month, @@ -43,11 +43,11 @@ } .cal-btn:not([disabled]) { font-weight: 500; - color: var(--bs-emphasis-color); + color: var(--bs-bs-bs-bs-bs-emphasis-color); } .cal-btn:hover, .cal-btn:focus { - background-color: var(--bs-secondary-bg); + background-color: var(--bs-bs-bs-bs-bs-secondary-bg); } .cal-btn[disabled] { border: 0; diff --git a/site/src/assets/examples/headers/headers.css b/site/src/assets/examples/headers/headers.css index f887573feb..7efa9cddfe 100644 --- a/site/src/assets/examples/headers/headers.css +++ b/site/src/assets/examples/headers/headers.css @@ -1,5 +1,5 @@ .form-control-dark { - border-color: var(--bs-gray); + border-color: var(--bs-bs-bs-bs-bs-gray); } .form-control-dark:focus { border-color: #fff; diff --git a/site/src/assets/examples/jumbotrons/jumbotrons.css b/site/src/assets/examples/jumbotrons/jumbotrons.css index d7d065ed64..4cb0086fb1 100644 --- a/site/src/assets/examples/jumbotrons/jumbotrons.css +++ b/site/src/assets/examples/jumbotrons/jumbotrons.css @@ -1 +1 @@ -.border-dashed { --bs-border-style: dashed; } +.border-dashed { --bs-bs-bs-bs-bs-border-style: dashed; } diff --git a/site/src/assets/examples/list-groups/list-groups.css b/site/src/assets/examples/list-groups/list-groups.css index b90cfa0655..fe37764890 100644 --- a/site/src/assets/examples/list-groups/list-groups.css +++ b/site/src/assets/examples/list-groups/list-groups.css @@ -23,12 +23,12 @@ clip: rect(0, 0, 0, 0); } .list-group-item-check:hover + .list-group-item { - background-color: var(--bs-secondary-bg); + background-color: var(--bs-bs-bs-bs-bs-secondary-bg); } .list-group-item-check:checked + .list-group-item { color: #fff; - background-color: var(--bs-primary); - border-color: var(--bs-primary); + background-color: var(--bs-bs-bs-bs-bs-primary); + border-color: var(--bs-bs-bs-bs-bs-primary); } .list-group-item-check[disabled] + .list-group-item, .list-group-item-check:disabled + .list-group-item { @@ -47,13 +47,13 @@ } .list-group-radio .list-group-item:hover, .list-group-radio .list-group-item:focus { - background-color: var(--bs-secondary-bg); + background-color: var(--bs-bs-bs-bs-bs-secondary-bg); } .list-group-radio .form-check-input:checked + .list-group-item { - background-color: var(--bs-body); - border-color: var(--bs-primary); - box-shadow: 0 0 0 2px var(--bs-primary); + background-color: var(--bs-bs-bs-bs-bs-body); + border-color: var(--bs-bs-bs-bs-bs-primary); + box-shadow: 0 0 0 2px var(--bs-bs-bs-bs-bs-primary); } .list-group-radio .form-check-input[disabled] + .list-group-item, .list-group-radio .form-check-input:disabled + .list-group-item { diff --git a/site/src/assets/examples/pricing/pricing.css b/site/src/assets/examples/pricing/pricing.css index c65d0208f3..9b188337de 100644 --- a/site/src/assets/examples/pricing/pricing.css +++ b/site/src/assets/examples/pricing/pricing.css @@ -1,5 +1,5 @@ body { - background-image: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg)); + background-image: linear-gradient(180deg, var(--bs-bs-bs-bs-bs-secondary-bg), var(--bs-bs-bs-bs-bs-body-bg) 100px, var(--bs-bs-bs-bs-bs-body-bg)); } .container { diff --git a/site/src/assets/examples/sidebars/sidebars.css b/site/src/assets/examples/sidebars/sidebars.css index f6a8f1c53d..8875425b42 100644 --- a/site/src/assets/examples/sidebars/sidebars.css +++ b/site/src/assets/examples/sidebars/sidebars.css @@ -20,13 +20,13 @@ main { .btn-toggle { padding: .25rem .5rem; font-weight: 600; - color: var(--bs-emphasis-color); + color: var(--bs-bs-bs-bs-bs-emphasis-color); background-color: transparent; } .btn-toggle:hover, .btn-toggle:focus { - color: rgba(var(--bs-emphasis-color-rgb), .85); - background-color: var(--bs-tertiary-bg); + color: rgba(var(--bs-bs-bs-bs-bs-emphasis-color-rgb), .85); + background-color: var(--bs-bs-bs-bs-bs-tertiary-bg); } .btn-toggle::before { @@ -42,7 +42,7 @@ main { } .btn-toggle[aria-expanded="true"] { - color: rgba(var(--bs-emphasis-color-rgb), .85); + color: rgba(var(--bs-bs-bs-bs-bs-emphasis-color-rgb), .85); } .btn-toggle[aria-expanded="true"]::before { transform: rotate(90deg); @@ -55,7 +55,7 @@ main { } .btn-toggle-nav a:hover, .btn-toggle-nav a:focus { - background-color: var(--bs-tertiary-bg); + background-color: var(--bs-bs-bs-bs-bs-tertiary-bg); } .scrollarea { diff --git a/site/src/components/home/Customize.astro b/site/src/components/home/Customize.astro index ca5d0598fd..29d09de118 100644 --- a/site/src/components/home/Customize.astro +++ b/site/src/components/home/Customize.astro @@ -28,7 +28,6 @@ import Code from '@shortcodes/Code.astro' code={`// Variable overrides first $primary: #900; $enable-shadows: true; -$prefix: "mo-"; // Then import Bootstrap @import "../node_modules/bootstrap/scss/bootstrap";`} @@ -46,12 +45,9 @@ $prefix: "mo-"; // Variable overrides second $primary: #900; $enable-shadows: true; -$prefix: "mo-"; // Required Bootstrap imports @import "../node_modules/bootstrap/scss/variables"; -@import "../node_modules/bootstrap/scss/variables-dark"; -@import "../node_modules/bootstrap/scss/maps"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; diff --git a/site/src/content/docs/customize/css-variables.mdx b/site/src/content/docs/customize/css-variables.mdx index 488d695559..299da50c84 100644 --- a/site/src/content/docs/customize/css-variables.mdx +++ b/site/src/content/docs/customize/css-variables.mdx @@ -34,9 +34,22 @@ Whenever possible, we'll assign CSS variables at the base component level (e.g., ## Prefix -Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that’s required on every CSS variable. +Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable. -Customize the prefix via the `$prefix` Sass variable. By default, it’s set to `bs-` (note the trailing dash). +The `bs-` prefix is added automatically via [PostCSS](https://postcss.org/) using the `postcss-prefix-custom-properties` plugin during our build process. This means you write unprefixed custom properties in the source Sass (e.g., `--border-radius`) and they become prefixed in the compiled CSS (e.g., `--bs-border-radius`). + +If you're building your own custom version of Bootstrap's CSS and want to change the prefix, update the `prefix` option in your PostCSS configuration: + +```js +// postcss.config.js +import postcssPrefixCustomProperties from 'postcss-prefix-custom-properties' + +export default { + plugins: [ + postcssPrefixCustomProperties({ prefix: 'custom-' }) + ] +} +``` ## Examples diff --git a/site/src/content/docs/guides/contribute.mdx b/site/src/content/docs/guides/contribute.mdx index 395b218b7b..7ff652b31e 100644 --- a/site/src/content/docs/guides/contribute.mdx +++ b/site/src/content/docs/guides/contribute.mdx @@ -37,11 +37,15 @@ Bootstrap uses [Dart Sass](https://sass-lang.com/dart-sass/) for compiling our S Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don’t lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding. -## Autoprefixer +## PostCSS -Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3. +Bootstrap uses [PostCSS](https://postcss.org/) to process our compiled CSS with several plugins: -We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [.browserslistrc]([[config:repo]]/blob/v[[config:current_version]]/.browserslistrc) for details. +- **[Autoprefixer](https://github.com/postcss/autoprefixer)** automatically adds vendor prefixes to CSS properties at build time. This saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins. We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [.browserslistrc]([[config:repo]]/blob/v[[config:current_version]]/.browserslistrc) for details. + +- **[postcss-prefix-custom-properties](https://github.com/nicolo-ribaudo/postcss-prefix-custom-properties)** adds the `bs-` prefix to all CSS custom properties (variables). This allows us to write clean, unprefixed variable names in our Sass source (e.g., `--border-radius`) that become prefixed in the compiled CSS (e.g., `--bs-border-radius`). + +Our PostCSS configuration is located in `build/postcss.config.mjs`. ## Local documentation diff --git a/site/src/content/docs/migration.mdx b/site/src/content/docs/migration.mdx index 118872e7e1..cceae46bc1 100644 --- a/site/src/content/docs/migration.mdx +++ b/site/src/content/docs/migration.mdx @@ -68,8 +68,8 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb - Dropped support for Node Sass, including no longer testing any of our source CSS against it. - Rearranged several Sass files in the process. - Removed `add()` and `subtract()` functions. Use `calc()` instead. +- **CSS variable prefixing now handled by PostCSS.** The `$prefix` Sass variable has been removed. CSS custom properties are now written without a prefix in the Sass source and prefixed automatically via `postcss-prefix-custom-properties` during the build. To customize the prefix, update your PostCSS configuration instead of Sass. - **Removes all deprecated Sass variables and values:** - - Removed `$variable-prefix`, use `$prefix` instead. - Removed `$nested-kbd-font-weight`, no replacement. - Removed `muted`, `black-50`, and `white-50` from text colors utilities map - Consolidated carousel dark variables, removing `$carousel-dark-indicator-active-bg`, `$carousel-dark-caption-color`, and `$carousel-dark-control-icon-filter` for their reassigned counterparts. diff --git a/site/src/content/docs/utilities/api.mdx b/site/src/content/docs/utilities/api.mdx index a6344c0dde..677080b11a 100644 --- a/site/src/content/docs/utilities/api.mdx +++ b/site/src/content/docs/utilities/api.mdx @@ -132,17 +132,19 @@ $utilities: ( selector: "attr-includes", class: "ratio-", property: aspect-ratio, - values: var(--#{$prefix}ratio), + values: var(--ratio), ), // Create a CSS variable utility that matches the attribute selector utility "aspect-ratio": ( - property: --#{$prefix}ratio, + property: --ratio, class: ratio, values: $aspect-ratios ), ); ``` +Note that the `--ratio` custom property will automatically be prefixed to `--bs-ratio` in the compiled CSS via PostCSS. + Which outputs the following: ```css diff --git a/site/src/scss/_anchor.scss b/site/src/scss/_anchor.scss index 39fb593771..4d4f445a5e 100644 --- a/site/src/scss/_anchor.scss +++ b/site/src/scss/_anchor.scss @@ -6,7 +6,7 @@ .anchor-link { padding: 0 .175rem; font-weight: 400; - color: color-mix(in srgb, var(--#{$prefix}link-color), transparent .5); + color: color-mix(in srgb, var(--link-color), transparent .5); text-decoration: none; opacity: 0; @include transition(color .15s ease-in-out, opacity .15s ease-in-out); @@ -19,7 +19,7 @@ &:hover, :hover > &, :target > & { - color: var(--#{$prefix}link-color); + color: var(--link-color); text-decoration: none; opacity: 0; @include transition(color .15s ease-in-out, opacity .15s ease-in-out); @@ -32,7 +32,7 @@ &:hover, :hover > &, :target > & { - color: var(--#{$prefix}link-color); + color: var(--link-color); text-decoration: none; opacity: 1; } diff --git a/site/src/scss/_callouts.scss b/site/src/scss/_callouts.scss index 503e5c3cfd..b2da95f388 100644 --- a/site/src/scss/_callouts.scss +++ b/site/src/scss/_callouts.scss @@ -9,9 +9,9 @@ @layer custom { .bd-callout { - --#{$prefix}link-color: var(--bd-callout-color); - --#{$prefix}link-hover-color: var(--bd-callout-color); - --#{$prefix}code-color: var(--bd-callout-code-color); + --link-color: var(--bd-callout-color); + --link-hover-color: var(--bd-callout-color); + --code-color: var(--bd-callout-code-color); padding: 1.25rem; margin-top: 1.25rem; diff --git a/site/src/scss/_colors.scss b/site/src/scss/_colors.scss index a16ba00780..08bdaec8ea 100644 --- a/site/src/scss/_colors.scss +++ b/site/src/scss/_colors.scss @@ -110,15 +110,15 @@ // .bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; } // .bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; } -// .bd-gray-100 { color: color-contrast(var(--#{$prefix}gray-100)); background-color: var(--#{$prefix}gray-100); } -// .bd-gray-200 { color: color-contrast(var(--#{$prefix}gray-200)); background-color: var(--#{$prefix}gray-200); } -// .bd-gray-300 { color: color-contrast(var(--#{$prefix}gray-300)); background-color: var(--#{$prefix}gray-300); } -// .bd-gray-400 { color: color-contrast(var(--#{$prefix}gray-400)); background-color: var(--#{$prefix}gray-400); } -// .bd-gray-500 { color: color-contrast(var(--#{$prefix}gray-500)); background-color: var(--#{$prefix}gray-500); } -// .bd-gray-600 { color: color-contrast(var(--#{$prefix}gray-600)); background-color: var(--#{$prefix}gray-600); } -// .bd-gray-700 { color: color-contrast(var(--#{$prefix}gray-700)); background-color: var(--#{$prefix}gray-700); } -// .bd-gray-800 { color: color-contrast(var(--#{$prefix}gray-800)); background-color: var(--#{$prefix}gray-800); } -// .bd-gray-900 { color: color-contrast(var(--#{$prefix}gray-900)); background-color: var(--#{$prefix}gray-900); } +// .bd-gray-100 { color: color-contrast(var(--gray-100)); background-color: var(--gray-100); } +// .bd-gray-200 { color: color-contrast(var(--gray-200)); background-color: var(--gray-200); } +// .bd-gray-300 { color: color-contrast(var(--gray-300)); background-color: var(--gray-300); } +// .bd-gray-400 { color: color-contrast(var(--gray-400)); background-color: var(--gray-400); } +// .bd-gray-500 { color: color-contrast(var(--gray-500)); background-color: var(--gray-500); } +// .bd-gray-600 { color: color-contrast(var(--gray-600)); background-color: var(--gray-600); } +// .bd-gray-700 { color: color-contrast(var(--gray-700)); background-color: var(--gray-700); } +// .bd-gray-800 { color: color-contrast(var(--gray-800)); background-color: var(--gray-800); } +// .bd-gray-900 { color: color-contrast(var(--gray-900)); background-color: var(--gray-900); } // .bd-white { // color: color-contrast($white); diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss index 3d2e09df73..ee76895a11 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -24,7 +24,7 @@ --bd-example-inner-radius: calc(var(--bs-border-radius) - 1px); margin: 0 ($bd-gutter-x * -.5); - font-size: var(--#{$prefix}font-size-sm); + font-size: var(--font-size-sm); background-color: var(--bd-pre-bg); border: solid var(--bs-border-color); border-width: 1px 0; @@ -68,7 +68,7 @@ position: relative; display: flow-root; padding: var(--bd-example-padding); - font-size: var(--#{$prefix}font-size-base); + font-size: var(--font-size-base); // margin: 0 ($bd-gutter-x * -.5) 1rem; background-color: var(--bs-bg-body); diff --git a/site/src/scss/_content.scss b/site/src/scss/_content.scss index c3c04c8173..ae74f66a92 100644 --- a/site/src/scss/_content.scss +++ b/site/src/scss/_content.scss @@ -11,7 +11,7 @@ @layer custom { .bd-content { @media (width >= 1024px) { - font-size: var(--#{$prefix}font-size-md); + font-size: var(--font-size-md); } > ul li, diff --git a/site/src/scss/_navbar.scss b/site/src/scss/_navbar.scss index 56101f5c64..baec248caa 100644 --- a/site/src/scss/_navbar.scss +++ b/site/src/scss/_navbar.scss @@ -94,7 +94,7 @@ border-inline-start: 0; @include media-breakpoint-down(lg) { - box-shadow: var(--#{$prefix}box-shadow-lg); + box-shadow: var(--box-shadow-lg); } } @@ -113,7 +113,7 @@ // @include rfs(.875rem, --bs-dropdown-font-size); // @include font-size(.875rem); // @include border-radius(.5rem); - box-shadow: var(--#{$prefix}dropdown-box-shadow); + box-shadow: var(--dropdown-box-shadow); li + li { margin-top: .125rem; diff --git a/site/src/scss/_variables.scss b/site/src/scss/_variables.scss index 4a0289ebd7..c1fb1b7cac 100644 --- a/site/src/scss/_variables.scss +++ b/site/src/scss/_variables.scss @@ -25,7 +25,7 @@ $bd-callout-variants: info, warning, danger !default; --bd-violet-bg: var(--bd-violet); --bd-toc-color: light-dark(var(--bd-violet), var(--bs-indigo-300)); --bd-sidebar-link-bg: light-dark(color-mix(in srgb, var(--bd-violet), transparent 90%), color-mix(in srgb, var(--bd-violet), transparent 70%)); - --bd-callout-link: var(--#{$prefix}blue-600); + --bd-callout-link: var(--blue-600); --bd-callout-code-color: light-dark(var(--bs-pink-600), var(--bs-pink-300)); --bd-pre-bg: var(--bs-bg-body); --bd-swatch-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .1)); @@ -34,10 +34,10 @@ $bd-callout-variants: info, warning, danger !default; // @include color-mode(dark, true) { // --bd-violet: #{mix($bd-violet, $white, 75%)}; // --bd-violet-bg: #{$bd-violet}; - // --bd-toc-color: var(--#{$prefix}emphasis-color); + // --bd-toc-color: var(--emphasis-color); // --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5); // --bd-callout-link: #{to-rgb($blue-300)}; // --bd-callout-code-color: #{$pink-300}; - // --bd-pre-bg: #{color.adjust(var(--#{$prefix}gray-900), $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments + // --bd-pre-bg: #{color.adjust(var(--gray-900), $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments // } }