From d1f764af96b6453037bc099a2c385ea978b70dee Mon Sep 17 00:00:00 2001 From: Alexandra Duval Date: Wed, 28 Oct 2026 16:36:28 +0100 Subject: [PATCH] feat: removed not redefined css custom props from components --- scss/_alert.scss | 6 +- scss/_breadcrumb.scss | 6 +- scss/_buttons.scss | 3 +- scss/_dropdown.scss | 53 +++----- scss/_footer.scss | 4 +- scss/_table.scss | 16 +-- scss/_tags.scss | 18 +-- .../__snapshots__/ouds-web-bootstrap.css | 116 ++++++------------ .../snapshot-tests/__snapshots__/ouds-web.css | 116 ++++++------------ 9 files changed, 110 insertions(+), 228 deletions(-) diff --git a/scss/_alert.scss b/scss/_alert.scss index c48290a338..8feac30db6 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -80,8 +80,8 @@ } &::after { - background-color: var(--#{$prefix}alert-icon-internal-color); - mask-image: escape-svg(var(--#{$prefix}alert-icon-internal)); + background-color: var(--#{$prefix}icon-color-content-status-warning-internal-shape); + mask-image: escape-svg(var(--#{$prefix}alert-warning-internal-icon)); } } @@ -235,8 +235,6 @@ --#{$prefix}alert-text-color: #{$ouds-color-content-status-warning}; --#{$prefix}alert-icon: var(--#{$prefix}alert-warning-icon); --#{$prefix}alert-icon-color: var(--#{$prefix}icon-color-content-status-warning-external-shape); - --#{$prefix}alert-icon-internal: var(--#{$prefix}alert-warning-internal-icon); - --#{$prefix}alert-icon-internal-color: var(--#{$prefix}icon-color-content-status-warning-internal-shape); --#{$prefix}alert-bg: #{$ouds-color-surface-status-warning-muted}; --#{$prefix}alert-border-color: #{$ouds-color-border-status-warning}; diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index b52c8b968d..48f8003f2c 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -1,10 +1,8 @@ .breadcrumb { // scss-docs-start breadcrumb-css-vars // OUDS mod: no breadcrumb-color, breadcrumb-padding-x, breadcrumb-padding-y, breadcrumb-margin-bottom, breadcrumb-font-size, breadcrumb-font-weight, breadcrumb-bg, breadcrumb-border-radius, breadcrumb-divider-color, breadcrumb-item-padding-x, breadcrumb-item-active-color - --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; // Additional OUDS variables - --#{$prefix}breadcrumb-divider: #{escape-svg($breadcrumb-divider-icon) "/* rtl:"escape-svg($breadcrumb-divider-flipped) "*/"}; --#{$prefix}breadcrumb-item-gap: #{$ouds-breadcrumb-space-column-gap-links}; // End mod // scss-docs-end breadcrumb-css-vars @@ -27,10 +25,10 @@ width: $ouds-breadcrumb-size-icon; height: $ouds-breadcrumb-size-icon; margin-left: var(--#{$prefix}breadcrumb-item-gap); - color: var(--#{$prefix}breadcrumb-divider-color); + color: $breadcrumb-divider-color; content: ""; background-color: currentcolor; - mask-image: var(--#{$prefix}breadcrumb-divider); + mask-image: #{escape-svg($breadcrumb-divider-icon) "/* rtl:"escape-svg($breadcrumb-divider-flipped) "*/"}; /* rtl:raw: transform: scaleX(-1); diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 9fb2daa26b..fb1c32c765 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -32,7 +32,6 @@ --#{$prefix}btn-padding-y: #{$btn-padding-y}; // OUDS mod: no --#{$prefix}btn-font-family // OUDS mod: no --#{$prefix}btn-font-size - --#{$prefix}btn-font-weight: #{$btn-font-weight}; // OUDS mod: no `--#{$prefix}btn-line-height` --#{$prefix}btn-color: #{$btn-color}; --#{$prefix}btn-bg: transparent; @@ -67,7 +66,7 @@ max-width: px-to-rem($ouds-button-size-max-width); min-height: var(--#{$prefix}btn-min-height); // OUDS mod padding: calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-end) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-start) - var(--#{$prefix}btn-border-width)); // OUDS mod: instead of `var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x)` - font-weight: var(--#{$prefix}btn-font-weight); + font-weight: $btn-font-weight; // OUDS mod: no line-height, already defined by get-font-size color: var(--#{$prefix}btn-color); text-align: center; diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index da27b50629..8c09584fc7 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -17,47 +17,28 @@ // The dropdown menu .dropdown-menu { // scss-docs-start dropdown-css-vars - --#{$prefix}dropdown-zindex: #{$zindex-dropdown}; - --#{$prefix}dropdown-min-width: #{$dropdown-min-width}; // OUDS mod: no --#{$prefix}dropdown-padding-x - --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y}; --#{$prefix}dropdown-spacer: #{$dropdown-spacer}; - --#{$prefix}dropdown-color: #{$dropdown-color}; - --#{$prefix}dropdown-bg: #{$dropdown-bg}; - --#{$prefix}dropdown-border-color: #{$dropdown-border-color}; - --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius}; - --#{$prefix}dropdown-border-width: #{$dropdown-border-width}; --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius}; - --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg}; - --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y}; - --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow}; --#{$prefix}dropdown-link-color: #{$dropdown-link-color}; - --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color}; - --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg}; - --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color}; - --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg}; - --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color}; --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x}; --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y}; - --#{$prefix}dropdown-header-color: #{$dropdown-header-color}; - --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x}; - --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y}; // scss-docs-end dropdown-css-vars position: absolute; - z-index: var(--#{$prefix}dropdown-zindex); + z-index: $zindex-dropdown; display: none; // none by default, but block on "open" of the menu - min-width: var(--#{$prefix}dropdown-min-width); - padding: var(--#{$prefix}dropdown-padding-y) 0; + min-width: $dropdown-min-width; + padding: $dropdown-padding-y 0; margin: 0; // Override default margin of ul - color: var(--#{$prefix}dropdown-color); + color: $dropdown-color; text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) list-style: none; - background-color: var(--#{$prefix}dropdown-bg); - border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color); + background-color: $dropdown-bg; + border: $dropdown-border-width solid $dropdown-border-color; @include get-font-size("label-large", true); - @include border-radius(var(--#{$prefix}dropdown-border-radius)); - box-shadow: var(--#{$prefix}dropdown-box-shadow); + @include border-radius($dropdown-border-radius); + box-shadow: $dropdown-box-shadow; &[data-bs-popper] { top: 100%; @@ -165,9 +146,9 @@ // Dividers (basically an `
`) within the dropdown .dropdown-divider { height: 0; - margin: var(--#{$prefix}dropdown-divider-margin-y) 0; + margin: $dropdown-divider-margin-y 0; overflow: hidden; - border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}dropdown-divider-bg); // OUDS mod + border-top: var(--#{$prefix}border-width) solid $dropdown-divider-bg; // OUDS mod opacity: 1; // Revisit in v6 to de-dupe styles that conflict with
element } @@ -190,21 +171,21 @@ // OUDS mod: no focus &:hover { - color: var(--#{$prefix}dropdown-link-hover-color); + color: $dropdown-link-hover-color; text-decoration: if($link-hover-decoration == underline, none, null); - @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg)); + @include gradient-bg($dropdown-link-hover-bg); } &.active, &:active { - color: var(--#{$prefix}dropdown-link-active-color); + color: $dropdown-link-active-color; text-decoration: none; - @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg)); + @include gradient-bg($dropdown-link-active-bg); } &.disabled, &:disabled { - color: var(--#{$prefix}dropdown-link-disabled-color); + color: $dropdown-link-disabled-color; pointer-events: none; background-color: transparent; // Remove CSS gradients if they're enabled @@ -226,10 +207,10 @@ // Dropdown section headers .dropdown-header { display: block; - padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x); // OUDS mod + padding: $dropdown-header-padding-y $dropdown-header-padding-x; // OUDS mod margin-bottom: 0; // for use with heading elements font-weight: $ouds-font-weight-web-label-moderate; - color: var(--#{$prefix}dropdown-header-color); + color: $dropdown-header-color; white-space: nowrap; // as with > li > a } diff --git a/scss/_footer.scss b/scss/_footer.scss index 76e5321dcb..fe226bedc7 100644 --- a/scss/_footer.scss +++ b/scss/_footer.scss @@ -3,7 +3,6 @@ --#{$prefix}footer-gap: 0; --#{$prefix}footer-padding-top: 0; --#{$prefix}footer-padding-bottom: 0; - --#{$prefix}footer-color: #{$footer-color}; --#{$prefix}footer-title-margin-bottom: 0; // scss-docs-end footer-css-vars --#{$prefix}navbar-padding-y: 0; @@ -14,7 +13,7 @@ --#{$prefix}navbar-nav-letter-spacing: #{$footer-letter-spacing}; display: block; - color: var(--#{$prefix}footer-color); + color: $footer-color; box-shadow: none; > [class*="container"] { @@ -75,7 +74,6 @@ --#{$prefix}footer-gap: #{$footer-gap-xl}; // scss-docs-end footer-nav-css-vars --#{$prefix}navbar-nav-padding-top: #{$footer-nav-list-padding-top}; - --#{$prefix}navbar-nav-padding-x: 0; --#{$prefix}navbar-nav-padding-bottom: #{$footer-nav-list-padding-bottom}; .accordion { diff --git a/scss/_table.scss b/scss/_table.scss index b229acb959..1e1764d473 100644 --- a/scss/_table.scss +++ b/scss/_table.scss @@ -3,7 +3,7 @@ // %active { --#{$prefix}table-color-state: var(--#{$prefix}color-content-default); - --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg); + --#{$prefix}table-bg-state: #{$table-active-bg}; } .table { @@ -13,16 +13,10 @@ --#{$prefix}table-color-state: initial; --#{$prefix}table-bg-state: initial; // End of reset - --#{$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}; width: 100%; margin-bottom: $spacer; @@ -50,10 +44,10 @@ > :not(caption) > * > * { padding: $table-cell-padding-y $table-cell-padding-x calc($table-cell-padding-y + 1px); line-height: $table-line-height; + color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, $table-color)); // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb - color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color))); background-color: var(--#{$prefix}table-bg); - box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg))); + box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, $table-accent-bg)); } > thead > tr { @@ -159,8 +153,8 @@ .table-hover { > tbody > tr:hover > * { - --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color); - --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg); + --#{$prefix}table-color-state: #{$table-hover-color}; + --#{$prefix}table-bg-state: #{$table-hover-bg}; } } diff --git a/scss/_tags.scss b/scss/_tags.scss index 9cf71eac32..f3fffb9b27 100644 --- a/scss/_tags.scss +++ b/scss/_tags.scss @@ -16,13 +16,7 @@ --#{$prefix}tag-border-width: 0px; --#{$prefix}tag-background-color: #{$ouds-color-surface-inverse-high}; --#{$prefix}tag-asset-color: currentcolor; - --#{$prefix}tag-loading-dasharray: 92; - --#{$prefix}tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; - --#{$prefix}tag-positive-icon: var(--#{$prefix}alert-success-icon); - --#{$prefix}tag-info-icon: var(--#{$prefix}alert-info-icon); --#{$prefix}tag-warning-external-icon: var(--#{$prefix}alert-warning-icon); - --#{$prefix}tag-warning-internal-icon: var(--#{$prefix}alert-warning-internal-icon); - --#{$prefix}tag-negative-icon: var(--#{$prefix}alert-error-icon); position: relative; display: inline-flex; @@ -146,11 +140,11 @@ } &.tag-positive .tag-status-icon { - mask-image: escape-svg(var(--#{$prefix}tag-positive-icon)); + mask-image: escape-svg(var(--#{$prefix}alert-success-icon)); } &.tag-info .tag-status-icon { - mask-image: escape-svg(var(--#{$prefix}tag-info-icon)); + mask-image: escape-svg(var(--#{$prefix}alert-info-icon)); } &.tag-warning:not(.tag-muted) .tag-status-icon { @@ -181,12 +175,12 @@ &::after { background-color: var(--#{$prefix}icon-color-content-status-warning-internal-shape); - mask-image: escape-svg(var(--#{$prefix}tag-warning-internal-icon)); + mask-image: escape-svg(var(--#{$prefix}alert-warning-internal-icon)); } } &.tag-negative .tag-status-icon { - mask-image: escape-svg(var(--#{$prefix}tag-negative-icon)); + mask-image: escape-svg(var(--#{$prefix}alert-error-icon)); } &:not(.loading) .tag-loader { @@ -211,10 +205,10 @@ > .tag-loader-inner { fill: none; stroke: var(--#{$prefix}tag-asset-color); - stroke-dasharray: var(--#{$prefix}tag-loading-dasharray); + stroke-dasharray: 92; stroke-width: 8; transform-origin: center; - animation: var(--#{$prefix}tag-loading-animation); + animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; } } } diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css index 6a5ed89018..711ada8946 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css @@ -5409,7 +5409,7 @@ dialog, } .table-active[data-bs-theme=dark], .table tbody tr:has(.control-item-indicator[type=checkbox]:not([role=switch]):checked, [type=checkbox].form-check-input:not([role=switch]):checked, .control-item-indicator[type=radio]:checked, [type=radio].form-check-input:checked) { --bs-table-color-state: var(--bs-color-content-default); - --bs-table-bg-state: var(--bs-table-active-bg); + --bs-table-bg-state: var(--bs-color-bg-inverse-low); } .table { @@ -5417,16 +5417,10 @@ dialog, --bs-table-bg-type: initial; --bs-table-color-state: initial; --bs-table-bg-state: initial; - --bs-table-color: var(--bs-color-content-default); --bs-table-bg: var(--bs-body-bg); --bs-table-border-color: var(--bs-color-border-default); - --bs-table-accent-bg: transparent; --bs-table-striped-color: var(--bs-color-content-default); --bs-table-striped-bg: var(--bs-color-surface-secondary); - --bs-table-active-color: var(--bs-color-content-default); - --bs-table-active-bg: var(--bs-color-bg-inverse-low); - --bs-table-hover-color: var(--bs-color-content-default); - --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), var(--bs-table-hover-bg-factor)); width: 100%; margin-bottom: 1rem; vertical-align: top; @@ -5441,9 +5435,9 @@ dialog, .table > :not(caption) > * > * { padding: 16px 16px 17px; line-height: 1.25; - color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color))); + color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-color-content-default))); background-color: var(--bs-table-bg); - box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); + box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, transparent)); } .table > thead > tr { border-bottom-width: calc(1px * 2); @@ -5500,8 +5494,8 @@ dialog, } .table-hover > tbody > tr:hover > * { - --bs-table-color-state: var(--bs-table-hover-color); - --bs-table-bg-state: var(--bs-table-hover-bg); + --bs-table-color-state: var(--bs-color-content-default); + --bs-table-bg-state: rgba(var(--bs-emphasis-color-rgb), var(--bs-table-hover-bg-factor)); } .table-info { @@ -8102,7 +8096,6 @@ ol.bullet-list > li > ol > li > ol > li::before { .btn, .btn-close { --bs-btn-padding-y: 12px; - --bs-btn-font-weight: 700; --bs-btn-color: var(--bs-color-action-enabled); --bs-btn-bg: transparent; --bs-btn-border-width: 1px; @@ -8128,7 +8121,7 @@ ol.bullet-list > li > ol > li > ol > li::before { max-width: 30rem; min-height: var(--bs-btn-min-height); padding: calc(var(--bs-btn-padding-y) - var(--bs-btn-border-width)) calc(var(--bs-btn-padding-end) - var(--bs-btn-border-width)) calc(var(--bs-btn-padding-y) - var(--bs-btn-border-width)) calc(var(--bs-btn-padding-start) - var(--bs-btn-border-width)); - font-weight: var(--bs-btn-font-weight); + font-weight: 700; color: var(--bs-btn-color); text-align: center; text-decoration: none; @@ -8802,48 +8795,29 @@ ol.bullet-list > li > ol > li > ol > li::before { } .dropdown-menu { - --bs-dropdown-zindex: 1000; - --bs-dropdown-min-width: 10rem; - --bs-dropdown-padding-y: 0; --bs-dropdown-spacer: 0; - --bs-dropdown-color: var(--bs-color-content-default); - --bs-dropdown-bg: var(--bs-color-overlay-dropdown); - --bs-dropdown-border-color: var(--bs-color-border-default); - --bs-dropdown-border-radius: var(--bs-border-radius); - --bs-dropdown-border-width: 0px; --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - 0px); - --bs-dropdown-divider-bg: var(--bs-color-border-default); - --bs-dropdown-divider-margin-y: 0; - --bs-dropdown-box-shadow: 0 2px 3px 0 var(--bs-elevation-color-elevated); --bs-dropdown-link-color: ; - --bs-dropdown-link-hover-color: ; - --bs-dropdown-link-hover-bg: var(--bs-color-action-support-hover); - --bs-dropdown-link-active-color: ; - --bs-dropdown-link-active-bg: var(--bs-color-action-support-pressed); - --bs-dropdown-link-disabled-color: var(--bs-color-content-disabled); --bs-dropdown-item-padding-x: 16px; --bs-dropdown-item-padding-y: 12px; - --bs-dropdown-header-color: var(--bs-color-content-muted); - --bs-dropdown-header-padding-x: 12px; - --bs-dropdown-header-padding-y: 12px; position: absolute; - z-index: var(--bs-dropdown-zindex); + z-index: 1000; display: none; - min-width: var(--bs-dropdown-min-width); - padding: var(--bs-dropdown-padding-y) 0; + min-width: 10rem; + padding: 0 0; margin: 0; - color: var(--bs-dropdown-color); + color: var(--bs-color-content-default); text-align: left; list-style: none; - background-color: var(--bs-dropdown-bg); - border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color); + background-color: var(--bs-color-overlay-dropdown); + border: 0px solid var(--bs-color-border-default); max-width: var(--bs-font-max-width-label-large); font-size: var(--bs-font-size-label-large); line-height: var(--bs-font-line-height-label-large); /* rtl:remove */ letter-spacing: var(--bs-font-letter-spacing-label-large); - border-radius: var(--bs-dropdown-border-radius); - box-shadow: var(--bs-dropdown-box-shadow); + border-radius: var(--bs-border-radius); + box-shadow: 0 2px 3px 0 var(--bs-elevation-color-elevated); } .dropdown-menu[data-bs-popper] { top: 100%; @@ -9079,9 +9053,9 @@ ol.bullet-list > li > ol > li > ol > li::before { .dropdown-divider { height: 0; - margin: var(--bs-dropdown-divider-margin-y) 0; + margin: 0 0; overflow: hidden; - border-top: var(--bs-border-width) solid var(--bs-dropdown-divider-bg); + border-top: var(--bs-border-width) solid var(--bs-color-border-default); opacity: 1; } @@ -9100,16 +9074,14 @@ ol.bullet-list > li > ol > li > ol > li::before { border-radius: var(--bs-dropdown-item-border-radius, 0); } .dropdown-item:hover { - color: var(--bs-dropdown-link-hover-color); - background-color: var(--bs-dropdown-link-hover-bg); + background-color: var(--bs-color-action-support-hover); } .dropdown-item.active, .dropdown-item:active { - color: var(--bs-dropdown-link-active-color); text-decoration: none; - background-color: var(--bs-dropdown-link-active-bg); + background-color: var(--bs-color-action-support-pressed); } .dropdown-item.disabled, .dropdown-item:disabled { - color: var(--bs-dropdown-link-disabled-color); + color: var(--bs-color-content-disabled); pointer-events: none; background-color: transparent; } @@ -9124,10 +9096,10 @@ ol.bullet-list > li > ol > li > ol > li::before { .dropdown-header { display: block; - padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x); + padding: 12px 12px; margin-bottom: 0; font-weight: 500; - color: var(--bs-dropdown-header-color); + color: var(--bs-color-content-muted); white-space: nowrap; } @@ -11077,8 +11049,6 @@ ol.bullet-list > li > ol > li > ol > li::before { } .breadcrumb { - --bs-breadcrumb-divider-color: var(--bs-color-content-default); - --bs-breadcrumb-divider: var(--bs-breadcrumb-divider-icon) /* rtl: var(--bs-breadcrumb-divider-icon) */; --bs-breadcrumb-item-gap: 4px; max-width: initial; padding-left: 0; @@ -11103,11 +11073,11 @@ ol.bullet-list > li > ol > li > ol > li::before { width: 16px; height: 16px; margin-left: var(--bs-breadcrumb-item-gap); - color: var(--bs-breadcrumb-divider-color); + color: var(--bs-color-content-default); content: ""; background-color: currentcolor; - -webkit-mask-image: var(--bs-breadcrumb-divider); - mask-image: var(--bs-breadcrumb-divider); + -webkit-mask-image: var(--bs-breadcrumb-divider-icon) /* rtl: var(--bs-breadcrumb-divider-icon) */; + mask-image: var(--bs-breadcrumb-divider-icon) /* rtl: var(--bs-breadcrumb-divider-icon) */; /* rtl:raw: transform: scaleX(-1); */ @@ -11500,13 +11470,7 @@ ol.bullet-list > li > ol > li > ol > li::before { --bs-tag-border-width: 0px; --bs-tag-background-color: var(--bs-color-surface-inverse-high); --bs-tag-asset-color: currentcolor; - --bs-tag-loading-dasharray: 92; - --bs-tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; - --bs-tag-positive-icon: var(--bs-alert-success-icon); - --bs-tag-info-icon: var(--bs-alert-info-icon); --bs-tag-warning-external-icon: var(--bs-alert-warning-icon); - --bs-tag-warning-internal-icon: var(--bs-alert-warning-internal-icon); - --bs-tag-negative-icon: var(--bs-alert-error-icon); position: relative; display: inline-flex; gap: var(--bs-tag-asset-gap); @@ -11613,12 +11577,12 @@ ol.bullet-list > li > ol > li > ol > li::before { border-radius: 2000px; } .tag.tag-positive .tag-status-icon { - -webkit-mask-image: var(--bs-tag-positive-icon); - mask-image: var(--bs-tag-positive-icon); + -webkit-mask-image: var(--bs-alert-success-icon); + mask-image: var(--bs-alert-success-icon); } .tag.tag-info .tag-status-icon { - -webkit-mask-image: var(--bs-tag-info-icon); - mask-image: var(--bs-tag-info-icon); + -webkit-mask-image: var(--bs-alert-info-icon); + mask-image: var(--bs-alert-info-icon); } .tag.tag-warning:not(.tag-muted) .tag-status-icon { -webkit-mask-image: var(--bs-tag-warning-external-icon); @@ -11646,12 +11610,12 @@ ol.bullet-list > li > ol > li > ol > li::before { } .tag.tag-warning.tag-muted .tag-status-icon::after { background-color: var(--bs-icon-color-content-status-warning-internal-shape); - -webkit-mask-image: var(--bs-tag-warning-internal-icon); - mask-image: var(--bs-tag-warning-internal-icon); + -webkit-mask-image: var(--bs-alert-warning-internal-icon); + mask-image: var(--bs-alert-warning-internal-icon); } .tag.tag-negative .tag-status-icon { - -webkit-mask-image: var(--bs-tag-negative-icon); - mask-image: var(--bs-tag-negative-icon); + -webkit-mask-image: var(--bs-alert-error-icon); + mask-image: var(--bs-alert-error-icon); } .tag:not(.loading) .tag-loader { display: none; @@ -11673,10 +11637,10 @@ ol.bullet-list > li > ol > li > ol > li::before { .tag .tag-loader > .tag-loader-inner { fill: none; stroke: var(--bs-tag-asset-color); - stroke-dasharray: var(--bs-tag-loading-dasharray); + stroke-dasharray: 92; stroke-width: 8; transform-origin: center; - animation: var(--bs-tag-loading-animation); + animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; } [aria-disabled=true] .tag, @@ -11869,9 +11833,9 @@ ol.bullet-list > li > ol > li > ol > li::before { .alert-icon:where(:not(:has(svg, img, .icon)))::after, .alert > svg:where(:not(:has(svg, img, .icon)))::after, .alert > img:where(:not(:has(svg, img, .icon)))::after, .alert > .icon:where(:not(:has(svg, img, .icon)))::after { - background-color: var(--bs-alert-icon-internal-color); - -webkit-mask-image: var(--bs-alert-icon-internal); - mask-image: var(--bs-alert-icon-internal); + background-color: var(--bs-icon-color-content-status-warning-internal-shape); + -webkit-mask-image: var(--bs-alert-warning-internal-icon); + mask-image: var(--bs-alert-warning-internal-icon); } .alert-icon svg, .alert > svg svg, .alert > img svg, @@ -12027,8 +11991,6 @@ ol.bullet-list > li > ol > li > ol > li::before { --bs-alert-text-color: var(--bs-color-content-status-warning); --bs-alert-icon: var(--bs-alert-warning-icon); --bs-alert-icon-color: var(--bs-icon-color-content-status-warning-external-shape); - --bs-alert-icon-internal: var(--bs-alert-warning-internal-icon); - --bs-alert-icon-internal-color: var(--bs-icon-color-content-status-warning-internal-shape); --bs-alert-bg: var(--bs-color-surface-status-warning-muted); --bs-alert-border-color: var(--bs-color-border-status-warning); } @@ -14533,7 +14495,6 @@ ol.bullet-list > li > ol > li > ol > li::before { --bs-footer-gap: 0; --bs-footer-padding-top: 0; --bs-footer-padding-bottom: 0; - --bs-footer-color: var(--bs-color-content-default); --bs-footer-title-margin-bottom: 0; --bs-navbar-padding-y: 0; --bs-navbar-nav-link-padding-y: 0; @@ -14542,7 +14503,7 @@ ol.bullet-list > li > ol > li > ol > li::before { --bs-navbar-nav-line-height: var(--bs-font-line-height-body-small); --bs-navbar-nav-letter-spacing: var(--bs-font-letter-spacing-body-medium); display: block; - color: var(--bs-footer-color); + color: var(--bs-color-content-default); box-shadow: none; } .footer > [class*=container] { @@ -14591,7 +14552,6 @@ ol.bullet-list > li > ol > li > ol > li::before { .footer .footer-nav { --bs-footer-gap: 1.7rem; --bs-navbar-nav-padding-top: 0.85rem; - --bs-navbar-nav-padding-x: 0; --bs-navbar-nav-padding-bottom: 1.3rem; } .footer .footer-nav .accordion { diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css index 62aeb74d8c..bb927627e1 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css @@ -3516,7 +3516,7 @@ dialog, } .table-active[data-bs-theme=dark], .table tbody tr:has(.control-item-indicator[type=checkbox]:not([role=switch]):checked, .control-item-indicator[type=radio]:checked) { --bs-table-color-state: var(--bs-color-content-default); - --bs-table-bg-state: var(--bs-table-active-bg); + --bs-table-bg-state: var(--bs-color-bg-inverse-low); } .table { @@ -3524,16 +3524,10 @@ dialog, --bs-table-bg-type: initial; --bs-table-color-state: initial; --bs-table-bg-state: initial; - --bs-table-color: var(--bs-color-content-default); --bs-table-bg: var(--bs-body-bg); --bs-table-border-color: var(--bs-color-border-default); - --bs-table-accent-bg: transparent; --bs-table-striped-color: var(--bs-color-content-default); --bs-table-striped-bg: var(--bs-color-surface-secondary); - --bs-table-active-color: var(--bs-color-content-default); - --bs-table-active-bg: var(--bs-color-bg-inverse-low); - --bs-table-hover-color: var(--bs-color-content-default); - --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), var(--bs-table-hover-bg-factor)); width: 100%; margin-bottom: 1rem; vertical-align: top; @@ -3548,9 +3542,9 @@ dialog, .table > :not(caption) > * > * { padding: 16px 16px 17px; line-height: 1.25; - color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color))); + color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-color-content-default))); background-color: var(--bs-table-bg); - box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); + box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, transparent)); } .table > thead > tr { border-bottom-width: calc(1px * 2); @@ -3607,8 +3601,8 @@ dialog, } .table-hover > tbody > tr:hover > * { - --bs-table-color-state: var(--bs-table-hover-color); - --bs-table-bg-state: var(--bs-table-hover-bg); + --bs-table-color-state: var(--bs-color-content-default); + --bs-table-bg-state: rgba(var(--bs-emphasis-color-rgb), var(--bs-table-hover-bg-factor)); } .table-info { @@ -6089,7 +6083,6 @@ ol.bullet-list > li > ol > li > ol > li::before { .btn, .btn-close { --bs-btn-padding-y: 12px; - --bs-btn-font-weight: 700; --bs-btn-color: var(--bs-color-action-enabled); --bs-btn-bg: transparent; --bs-btn-border-width: 1px; @@ -6115,7 +6108,7 @@ ol.bullet-list > li > ol > li > ol > li::before { max-width: 30rem; min-height: var(--bs-btn-min-height); padding: calc(var(--bs-btn-padding-y) - var(--bs-btn-border-width)) calc(var(--bs-btn-padding-end) - var(--bs-btn-border-width)) calc(var(--bs-btn-padding-y) - var(--bs-btn-border-width)) calc(var(--bs-btn-padding-start) - var(--bs-btn-border-width)); - font-weight: var(--bs-btn-font-weight); + font-weight: 700; color: var(--bs-btn-color); text-align: center; text-decoration: none; @@ -6789,48 +6782,29 @@ ol.bullet-list > li > ol > li > ol > li::before { } .dropdown-menu { - --bs-dropdown-zindex: 1000; - --bs-dropdown-min-width: 10rem; - --bs-dropdown-padding-y: 0; --bs-dropdown-spacer: 0; - --bs-dropdown-color: var(--bs-color-content-default); - --bs-dropdown-bg: var(--bs-color-overlay-dropdown); - --bs-dropdown-border-color: var(--bs-color-border-default); - --bs-dropdown-border-radius: var(--bs-border-radius); - --bs-dropdown-border-width: 0px; --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - 0px); - --bs-dropdown-divider-bg: var(--bs-color-border-default); - --bs-dropdown-divider-margin-y: 0; - --bs-dropdown-box-shadow: 0 2px 3px 0 var(--bs-elevation-color-elevated); --bs-dropdown-link-color: ; - --bs-dropdown-link-hover-color: ; - --bs-dropdown-link-hover-bg: var(--bs-color-action-support-hover); - --bs-dropdown-link-active-color: ; - --bs-dropdown-link-active-bg: var(--bs-color-action-support-pressed); - --bs-dropdown-link-disabled-color: var(--bs-color-content-disabled); --bs-dropdown-item-padding-x: 16px; --bs-dropdown-item-padding-y: 12px; - --bs-dropdown-header-color: var(--bs-color-content-muted); - --bs-dropdown-header-padding-x: 12px; - --bs-dropdown-header-padding-y: 12px; position: absolute; - z-index: var(--bs-dropdown-zindex); + z-index: 1000; display: none; - min-width: var(--bs-dropdown-min-width); - padding: var(--bs-dropdown-padding-y) 0; + min-width: 10rem; + padding: 0 0; margin: 0; - color: var(--bs-dropdown-color); + color: var(--bs-color-content-default); text-align: left; list-style: none; - background-color: var(--bs-dropdown-bg); - border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color); + background-color: var(--bs-color-overlay-dropdown); + border: 0px solid var(--bs-color-border-default); max-width: var(--bs-font-max-width-label-large); font-size: var(--bs-font-size-label-large); line-height: var(--bs-font-line-height-label-large); /* rtl:remove */ letter-spacing: var(--bs-font-letter-spacing-label-large); - border-radius: var(--bs-dropdown-border-radius); - box-shadow: var(--bs-dropdown-box-shadow); + border-radius: var(--bs-border-radius); + box-shadow: 0 2px 3px 0 var(--bs-elevation-color-elevated); } .dropdown-menu[data-bs-popper] { top: 100%; @@ -7050,9 +7024,9 @@ ol.bullet-list > li > ol > li > ol > li::before { .dropdown-divider { height: 0; - margin: var(--bs-dropdown-divider-margin-y) 0; + margin: 0 0; overflow: hidden; - border-top: var(--bs-border-width) solid var(--bs-dropdown-divider-bg); + border-top: var(--bs-border-width) solid var(--bs-color-border-default); opacity: 1; } @@ -7071,16 +7045,14 @@ ol.bullet-list > li > ol > li > ol > li::before { border-radius: var(--bs-dropdown-item-border-radius, 0); } .dropdown-item:hover { - color: var(--bs-dropdown-link-hover-color); - background-color: var(--bs-dropdown-link-hover-bg); + background-color: var(--bs-color-action-support-hover); } .dropdown-item.active, .dropdown-item:active { - color: var(--bs-dropdown-link-active-color); text-decoration: none; - background-color: var(--bs-dropdown-link-active-bg); + background-color: var(--bs-color-action-support-pressed); } .dropdown-item.disabled, .dropdown-item:disabled { - color: var(--bs-dropdown-link-disabled-color); + color: var(--bs-color-content-disabled); pointer-events: none; background-color: transparent; } @@ -7095,10 +7067,10 @@ ol.bullet-list > li > ol > li > ol > li::before { .dropdown-header { display: block; - padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x); + padding: 12px 12px; margin-bottom: 0; font-weight: 500; - color: var(--bs-dropdown-header-color); + color: var(--bs-color-content-muted); white-space: nowrap; } @@ -8916,8 +8888,6 @@ ol.bullet-list > li > ol > li > ol > li::before { } .breadcrumb { - --bs-breadcrumb-divider-color: var(--bs-color-content-default); - --bs-breadcrumb-divider: var(--bs-breadcrumb-divider-icon) /* rtl: var(--bs-breadcrumb-divider-icon) */; --bs-breadcrumb-item-gap: 4px; max-width: initial; padding-left: 0; @@ -8942,11 +8912,11 @@ ol.bullet-list > li > ol > li > ol > li::before { width: 16px; height: 16px; margin-left: var(--bs-breadcrumb-item-gap); - color: var(--bs-breadcrumb-divider-color); + color: var(--bs-color-content-default); content: ""; background-color: currentcolor; - -webkit-mask-image: var(--bs-breadcrumb-divider); - mask-image: var(--bs-breadcrumb-divider); + -webkit-mask-image: var(--bs-breadcrumb-divider-icon) /* rtl: var(--bs-breadcrumb-divider-icon) */; + mask-image: var(--bs-breadcrumb-divider-icon) /* rtl: var(--bs-breadcrumb-divider-icon) */; /* rtl:raw: transform: scaleX(-1); */ @@ -9339,13 +9309,7 @@ ol.bullet-list > li > ol > li > ol > li::before { --bs-tag-border-width: 0px; --bs-tag-background-color: var(--bs-color-surface-inverse-high); --bs-tag-asset-color: currentcolor; - --bs-tag-loading-dasharray: 92; - --bs-tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; - --bs-tag-positive-icon: var(--bs-alert-success-icon); - --bs-tag-info-icon: var(--bs-alert-info-icon); --bs-tag-warning-external-icon: var(--bs-alert-warning-icon); - --bs-tag-warning-internal-icon: var(--bs-alert-warning-internal-icon); - --bs-tag-negative-icon: var(--bs-alert-error-icon); position: relative; display: inline-flex; gap: var(--bs-tag-asset-gap); @@ -9452,12 +9416,12 @@ ol.bullet-list > li > ol > li > ol > li::before { border-radius: 2000px; } .tag.tag-positive .tag-status-icon { - -webkit-mask-image: var(--bs-tag-positive-icon); - mask-image: var(--bs-tag-positive-icon); + -webkit-mask-image: var(--bs-alert-success-icon); + mask-image: var(--bs-alert-success-icon); } .tag.tag-info .tag-status-icon { - -webkit-mask-image: var(--bs-tag-info-icon); - mask-image: var(--bs-tag-info-icon); + -webkit-mask-image: var(--bs-alert-info-icon); + mask-image: var(--bs-alert-info-icon); } .tag.tag-warning:not(.tag-muted) .tag-status-icon { -webkit-mask-image: var(--bs-tag-warning-external-icon); @@ -9485,12 +9449,12 @@ ol.bullet-list > li > ol > li > ol > li::before { } .tag.tag-warning.tag-muted .tag-status-icon::after { background-color: var(--bs-icon-color-content-status-warning-internal-shape); - -webkit-mask-image: var(--bs-tag-warning-internal-icon); - mask-image: var(--bs-tag-warning-internal-icon); + -webkit-mask-image: var(--bs-alert-warning-internal-icon); + mask-image: var(--bs-alert-warning-internal-icon); } .tag.tag-negative .tag-status-icon { - -webkit-mask-image: var(--bs-tag-negative-icon); - mask-image: var(--bs-tag-negative-icon); + -webkit-mask-image: var(--bs-alert-error-icon); + mask-image: var(--bs-alert-error-icon); } .tag:not(.loading) .tag-loader { display: none; @@ -9512,10 +9476,10 @@ ol.bullet-list > li > ol > li > ol > li::before { .tag .tag-loader > .tag-loader-inner { fill: none; stroke: var(--bs-tag-asset-color); - stroke-dasharray: var(--bs-tag-loading-dasharray); + stroke-dasharray: 92; stroke-width: 8; transform-origin: center; - animation: var(--bs-tag-loading-animation); + animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; } [aria-disabled=true] .tag, @@ -9696,9 +9660,9 @@ ol.bullet-list > li > ol > li > ol > li::before { mask-image: var(--bs-alert-icon); } .alert-icon:where(:not(:has(svg, img, .icon)))::after { - background-color: var(--bs-alert-icon-internal-color); - -webkit-mask-image: var(--bs-alert-icon-internal); - mask-image: var(--bs-alert-icon-internal); + background-color: var(--bs-icon-color-content-status-warning-internal-shape); + -webkit-mask-image: var(--bs-alert-warning-internal-icon); + mask-image: var(--bs-alert-warning-internal-icon); } .alert-icon svg, .alert-icon img, @@ -9846,8 +9810,6 @@ ol.bullet-list > li > ol > li > ol > li::before { --bs-alert-text-color: var(--bs-color-content-status-warning); --bs-alert-icon: var(--bs-alert-warning-icon); --bs-alert-icon-color: var(--bs-icon-color-content-status-warning-external-shape); - --bs-alert-icon-internal: var(--bs-alert-warning-internal-icon); - --bs-alert-icon-internal-color: var(--bs-icon-color-content-status-warning-internal-shape); --bs-alert-bg: var(--bs-color-surface-status-warning-muted); --bs-alert-border-color: var(--bs-color-border-status-warning); } @@ -12237,7 +12199,6 @@ ol.bullet-list > li > ol > li > ol > li::before { --bs-footer-gap: 0; --bs-footer-padding-top: 0; --bs-footer-padding-bottom: 0; - --bs-footer-color: var(--bs-color-content-default); --bs-footer-title-margin-bottom: 0; --bs-navbar-padding-y: 0; --bs-navbar-nav-link-padding-y: 0; @@ -12246,7 +12207,7 @@ ol.bullet-list > li > ol > li > ol > li::before { --bs-navbar-nav-line-height: var(--bs-font-line-height-body-small); --bs-navbar-nav-letter-spacing: var(--bs-font-letter-spacing-body-medium); display: block; - color: var(--bs-footer-color); + color: var(--bs-color-content-default); box-shadow: none; } .footer > [class*=container] { @@ -12295,7 +12256,6 @@ ol.bullet-list > li > ol > li > ol > li::before { .footer .footer-nav { --bs-footer-gap: 1.7rem; --bs-navbar-nav-padding-top: 0.85rem; - --bs-navbar-nav-padding-x: 0; --bs-navbar-nav-padding-bottom: 1.3rem; } .footer .footer-nav .accordion {