diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index a261385fd2..c7607bdad2 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,11 +2,11 @@ "files": [ { "path": "./dist/css/boosted-grid.css", - "maxSize": "12.75 kB" + "maxSize": "13.25 kB" }, { "path": "./dist/css/boosted-grid.min.css", - "maxSize": "12.0 kB" + "maxSize": "12.25 kB" }, { "path": "./dist/css/boosted-reboot.css", @@ -18,19 +18,19 @@ }, { "path": "./dist/css/boosted-utilities.css", - "maxSize": "11.5 kB" + "maxSize": "12.5 kB" }, { "path": "./dist/css/boosted-utilities.min.css", - "maxSize": "10.75 kB" + "maxSize": "11.5 kB" }, { "path": "./dist/css/boosted.css", - "maxSize": "41.5 kB" + "maxSize": "42.0 kB" }, { "path": "./dist/css/boosted.min.css", - "maxSize": "38.25 kB" + "maxSize": "38.75 kB" }, { "path": "./dist/js/boosted.bundle.js", diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 6126781cde..13f2752c9b 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -2,6 +2,7 @@ @import "helpers/color-bg"; @import "helpers/colored-links"; @import "helpers/focus-ring"; +@import "helpers/icon-link"; @import "helpers/ratio"; @import "helpers/position"; @import "helpers/stacks"; diff --git a/scss/_maps.scss b/scss/_maps.scss index fd2b275018..8f0966a3f2 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -130,6 +130,8 @@ $utilities-border-subtle: ( ) !default; // scss-docs-end utilities-border-colors +$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default; + $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; $gutters: $spacers !default; diff --git a/scss/_root.scss b/scss/_root.scss index 74367f38bd..7215fa1e9a 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -152,7 +152,7 @@ // scss-docs-start root-dark-rule // Boosted mod [class*="bg-black"], -[class*="-dark"]:not(.border-dark):not(.text-dark):not(.btn-dark):not(.focus-ring-dark), +[class*="-dark"]:not(.border-dark):not(.text-dark):not(.btn-dark):not(.focus-ring-dark):not(.link-underline-dark):not(.link-dark), [class*="bg-secondary"] { --#{$prefix}primary-text-rgb: #{to-rgb($brand-orange)}; --#{$prefix}link-color: #{$link-color-inverted}; diff --git a/scss/_type.scss b/scss/_type.scss index 5a716f3b79..f0da26bfa3 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -239,35 +239,6 @@ h2, } } -// -// Links // Boosted mod -// -.link-chevron { - font-weight: $font-weight-bold; - text-decoration: if($link-decoration == none, null, none); - - &::after { - display: inline-block; - width: $linked-chevron-icon-width; - height: $linked-chevron-icon-height; - margin-left: $linked-chevron-margin-left; - vertical-align: middle; - content: ""; - background-image: var(--#{$boosted-prefix}chevron-icon); - background-repeat: no-repeat; - transform: $linked-chevron-transform; - } - - &:hover { - text-decoration: $link-decoration; - - &::after { - filter: $orange-filter; - } - } -} -// End mod - // // Misc // diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 1d6b846191..eb54cd9311 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -613,6 +613,56 @@ $utilities: map-merge( values: $utilities-text-emphasis-colors ), // scss-docs-end utils-color + // scss-docs-start utils-links + "link-opacity": ( + css-var: true, + class: link-opacity, + state: hover, + values: ( + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ) + ), + "link-offset": ( + property: text-underline-offset, + class: link-offset, + state: hover, + values: ( + 1: .125em, + 2: .25em, + 3: .375em, + ) + ), + "link-underline": ( + // css-var: true, + property: text-decoration-color, + class: link-underline, + local-vars: ( + "link-underline-opacity": 1 + ), + values: map-merge( + $utilities-links-underline, + ( + null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)), + ) + ) + ), + "link-underline-opacity": ( + css-var: true, + class: link-underline-opacity, + state: hover, + values: ( + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ), + ), + // scss-docs-end utils-links // scss-docs-start utils-bg-color "background-color": ( property: background-color, diff --git a/scss/helpers/_chevron-link.scss b/scss/helpers/_chevron-link.scss new file mode 100644 index 0000000000..c74ccb46d9 --- /dev/null +++ b/scss/helpers/_chevron-link.scss @@ -0,0 +1,26 @@ +// Boosted mod +.link-chevron { + font-weight: $font-weight-bold; + text-decoration: if($link-decoration == none, null, none); + + &::after { + display: inline-block; + width: $linked-chevron-icon-width; + height: $linked-chevron-icon-height; + margin-left: $linked-chevron-margin-left; + vertical-align: middle; + content: ""; + background-image: var(--#{$boosted-prefix}chevron-icon); + background-repeat: no-repeat; + transform: $linked-chevron-transform; + } + + &:hover { + text-decoration: $link-decoration; + + &::after { + filter: $orange-filter; + } + } +} +// End mod diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss index 0f0d6b3fe4..c2e2f8a4ef 100644 --- a/scss/helpers/_colored-links.scss +++ b/scss/helpers/_colored-links.scss @@ -1,12 +1,18 @@ +// stylelint-disable function-name-case + +// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 @each $color, $value in ("primary": $accessible-orange, "light": $light) { // Boosted mod: restrict to primary and light .link-#{$color} { - color: $value if($enable-important-utilities, !important, null); + --#{$prefix}link-color-rgb: #{to-rgb($value)}; + text-decoration-color: RGBA(to-rgb($value), var(--#{$prefix}link-underline-opacity, 1)); background-color: color-contrast($value) if($enable-important-utilities, !important, null); // Boosted mod: ensure contrast @if $link-shade-percentage != 0 { // Boosted mod: no &:focus &:hover { - color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) if($enable-important-utilities, !important, null); + $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); + --#{$prefix}link-color-rgb: #{to-rgb($hover-color)}; + text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)); } } } diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss new file mode 100644 index 0000000000..45d4d09a35 --- /dev/null +++ b/scss/helpers/_icon-link.scss @@ -0,0 +1,26 @@ +@import "chevron-link"; // Boosted mod + +.icon-link { + display: inline-flex; + gap: .3125rem; // Boosted mod: instead of .375rem + align-items: center; + text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5)); + text-underline-offset: .5rem; + backface-visibility: hidden; + + > .bi { + flex-shrink: 0; + width: 1em; + height: 1em; + @include transition(.2s ease-in-out transform); + } +} + +.icon-link-hover { + &:hover, + &:focus-visible { + > .bi { + transform: var(--#{$prefix}icon-link-transform, translate3d(.25em, 0, 0)); + } + } +} diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index 29cd6220e0..b0fb4a36c0 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -12,7 +12,7 @@ > h2, > h3, > h4 { - --#{$prefix}heading-color: #fff; + --bs-heading-color: var(--bs-emphasis-color); } > h2:not(:first-child) { @@ -80,7 +80,7 @@ } .bd-title { - --#{$prefix}heading-color: #fff; + --bs-heading-color: var(--bs-emphasis-color); @include font-size(3rem); } @@ -96,26 +96,6 @@ fill: currentcolor; } -.icon-link { - display: flex; - align-items: center; - // Boosted mod: no text-decoration-color - text-underline-offset: .5rem; - backface-visibility: hidden; - - .bi { - width: .75em; // Boosted mod - height: .75em; // Boosted mod - transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list - } - - &:hover { - .bi { - transform: translate3d(5px, 0, 0); - } - } -} - .border-lg-start { @include media-breakpoint-up(lg) { border-left: var(--bs-border-width) solid $border-color; diff --git a/site/content/docs/5.3/content/typography.md b/site/content/docs/5.3/content/typography.md index f99389c510..908a6aa14d 100644 --- a/site/content/docs/5.3/content/typography.md +++ b/site/content/docs/5.3/content/typography.md @@ -303,11 +303,7 @@ Links in content are black and underlined. They adapt to their context otherwise ### With chevron -Add `.link-chevron` to bold your link and enhance them with a chevron. - -{{< example >}} -This is a sample link with chevron -{{< /example >}} +Use our [link chevron helper]({{< docsref "/helpers/icon-link#link-chevron" >}}) to bold your link and enhance them with a chevron. ## Lists diff --git a/site/content/docs/5.3/helpers/colored-links.md b/site/content/docs/5.3/helpers/colored-links.md index eaba1d0c9c..2c86f7302f 100644 --- a/site/content/docs/5.3/helpers/colored-links.md +++ b/site/content/docs/5.3/helpers/colored-links.md @@ -5,13 +5,28 @@ description: Colored links with hover states group: helpers aliases: - "/docs/helpers/colored-links/" -toc: false +toc: true --- -You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. +## Link colors +You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. + + {{< example >}} -Primary link -Light link +

Primary link

+

Light link

{{< /example >}} + + +## Link utilities + +{{< added-in "5.3.0" >}} + +Colored links can also be modified by [our link utilities]({{< docsref "/utilities/link/" >}}). + +{{< example >}} +

Primary link

+

Light link

+{{< /example >}} diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md new file mode 100644 index 0000000000..10f4bcc1fc --- /dev/null +++ b/site/content/docs/5.3/helpers/icon-link.md @@ -0,0 +1,82 @@ +--- +layout: docs +title: Icon link +description: Quickly create stylized hyperlinks with Solaris icons. +group: helpers +aliases: + - "/docs/icon-link/" + - "/docs/helpers/icon-link/" +toc: true +added: 5.3 +--- + +## Link chevron + +Add `.link-chevron` to bold your link and enhance them with a chevron. + +{{< example >}} +This is a sample link with chevron +{{< /example >}} + +## Icon link + +{{< ods-incompatibility-alert >}} +This helper should be used carefully because the rendering provided in the following examples does not exist in the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. +{{< /ods-incompatibility-alert >}} + +The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text's `font-size`. + +Icon links assume [Bootstrap Icons](https://icons.getbootstrap.com) are being used, but you should use [Solaris icons]({{< docsref "/extend/icons" >}}) in an Orange project. + +{{< callout >}} +Icons used here are likely to be purely decorative, which means they should be hidden from assistive technologies using `aria-hidden="true"`, as we've done in our examples. For icons that are more than decorative, provide an appropriate text alternative via `alt` for `` elements `role="img"` and `aria-label` for SVGs. +{{< /callout >}} + +### Example + +Take a regular `` element, add `.icon-link`, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored. + +{{< example >}} + + + Icon link + +{{< /example >}} + +{{< example >}} + + Icon link + + +{{< /example >}} + +### Style on hover + +Add `.icon-link-hover` to move the icon to the right on hover. + +{{< example >}} + + Icon link + + +{{< /example >}} + +Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable: + +{{< example >}} + + + Icon link + +{{< /example >}} + +### Pairs with link utilities + +Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset. + +{{< example >}} + + Icon link + + +{{< /example >}} \ No newline at end of file diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index deaee77886..b1ace04674 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -170,6 +170,12 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz - New Added a new focus ring helper associated to `.focus-ring` and `.focus-ring-{color}` classes. +- New Added new set of link utilities associated to `.link-opacity-*`, `.link-opacity-*-hover`, `.link-offset-*`, `.link-underline-*` and `.link-underline-opacity-*`. + +- New Added new icon link helper associated to `.icon-link` and `.link-hover`. They can be paired with our link utilities. + +- Warning For advanced Sass users, `.link-chevron` is no more defined within `scss/_type.scss` but in `scss/helpers/_chevron-link.scss`. Depending on your needs, it may be imported either from `scss/helpers/_chevron-links.scss` directly or from `scss/helpers/_icon-link.scss` for the complete icon link bundle. + ### CSS and Sass variables - Adds additional variables for alerts, `.btn-close`, and `.offcanvas`. @@ -409,6 +415,7 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
  • $success-text-dark
  • $success-text
  • $table-caption-color-inverted
    • +
  • $utilities-links-underline
  • $warning-bg-subtle-dark
  • $warning-bg-subtle
  • $warning-border-subtle-dark
    • diff --git a/site/content/docs/5.3/utilities/link.md b/site/content/docs/5.3/utilities/link.md new file mode 100644 index 0000000000..d0c168263e --- /dev/null +++ b/site/content/docs/5.3/utilities/link.md @@ -0,0 +1,105 @@ +--- +layout: docs +title: Link +description: Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more. +group: utilities +aliases: + - "/docs/utilities/link/" +toc: true +added: 5.3 +--- + +{{< ods-incompatibility-alert >}} +Link utilities should be used carefully because the rendering provided in the following examples does not exist in the Orange Design System specifications. But still, these utilities could help in some cases to build specific ues cases or other reusable components. +{{< /ods-incompatibility-alert >}} + +## Link opacity + +Change the alpha opacity of the link `rgba()` color value with utilities. Please be aware that changes to a color's opacity can lead to links with [*insufficient* contrast]({{< docsref "getting-started/accessibility#color-contrast" >}}). + +{{< example >}} +

    Link opacity 10

    +

    Link opacity 25

    +

    Link opacity 50

    +

    Link opacity 75

    +

    Link opacity 100

    +{{< /example >}} + +You can even change the opacity level on hover. + +{{< example >}} +

    Link hover opacity 10

    +

    Link hover opacity 25

    +

    Link hover opacity 50

    +

    Link hover opacity 75

    +

    Link hover opacity 100

    +{{< /example >}} + +## Link underlines + +### Underline color + +Change the underline's color independent of the link text color. + +{{< example >}} +{{< link-underline-colors.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +

    {{ .name | title }} underline

    +{{- end -}} +{{< /link-underline-colors.inline >}} +{{< /example >}} + +### Underline offset + +Change the underline's distance from your text. Offset is set in `em` units to automatically scale with the element's current `font-size`. + +{{< example >}} +

    Default link

    +

    Offset 1 link

    +

    Offset 2 link

    +

    Offset 3 link

    +{{< /example >}} + +### Underline opacity + +Change the underline's opacity. Requires adding `.link-underline` to first set an `rgba()` color we use to then modify the alpha opacity. + +{{< example >}} +

    Underline opacity 10

    +

    Underline opacity 25

    +

    Underline opacity 50

    +

    Underline opacity 75

    +

    Underline opacity 100

    +{{< /example >}} + +### Hover variants + +Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-underline-opacity` utilities include `:hover` variants by default. Mix and match to create unique link styles. + +{{< example >}} + + Underline opacity 10 + +{{< /example >}} + +## Colored links + +[Colored link helpers]({{< docsref "/helpers/colored-links/" >}}) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset. + + +{{< example >}} +

    Primary link

    +

    Light link

    +{{< /example >}} + + + +## Sass + +In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more. + +### Utilities API + +Link utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-links" file="scss/_utilities.scss" >}} diff --git a/site/content/docs/5.3/utilities/object-fit.md b/site/content/docs/5.3/utilities/object-fit.md index 9a284f126d..502691627c 100644 --- a/site/content/docs/5.3/utilities/object-fit.md +++ b/site/content/docs/5.3/utilities/object-fit.md @@ -3,6 +3,8 @@ layout: docs title: Object fit description: Use the object fit utilities to modify how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an `` or `