Skip to content

chore(lib): removed defined-only once css custom props from components #3947

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
duvalale wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chore(lib): removed defined-only once css custom props from components #3947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions scss/_alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}

Expand Down Expand Up @@ -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};

Expand Down
6 changes: 2 additions & 4 deletions scss/_breadcrumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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;

@MaxLardenois MaxLardenois Oct 28, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should use the value of $breadcrumb-divider-color as it is a bootstrap variable

content: "";
background-color: currentcolor;
mask-image: var(--#{$prefix}breadcrumb-divider);
mask-image: #{escape-svg($breadcrumb-divider-icon) "/* rtl:"escape-svg($breadcrumb-divider-flipped) "*/"};

@MaxLardenois MaxLardenois Oct 28, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should remove the escape-svg and the RTL stuff as it will be done on its own later on.
We should use directly the value of $breadcrumb-divider as it is a Bootstrap variable.


/* rtl:raw:
transform: scaleX(-1);
Expand Down
3 changes: 1 addition & 2 deletions scss/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
53 changes: 17 additions & 36 deletions scss/_dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -165,9 +146,9 @@
// Dividers (basically an `<hr />`) 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 <hr /> element
}

Expand All @@ -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
Expand All @@ -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
}

Expand Down
4 changes: 1 addition & 3 deletions scss/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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"] {
Expand Down Expand Up @@ -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 {
Expand Down
16 changes: 5 additions & 11 deletions scss/_table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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};
}
}

Expand Down
18 changes: 6 additions & 12 deletions scss/_tags.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}
}
}
Expand Down
Loading
Loading