From dfc211d95cb5fd28ba6212804ad5821ea8129ae7 Mon Sep 17 00:00:00 2001 From: Samuel Collin Date: Thu, 16 Jan 2025 18:02:03 +0100 Subject: [PATCH 1/2] feat(links): link implement WIP --- scss/_links.scss | 75 +++++++++++ scss/_reboot.scss | 21 ++- scss/_root.scss | 2 - scss/_variables.scss | 3 +- scss/helpers/_icon-link.scss | 2 - scss/ouds-web.scss | 1 + scss/tokens/_component.scss | 34 ++--- site/content/docs/0.0/components/links.md | 150 ++++++++++++++++++++++ site/content/docs/0.0/content/reboot.md | 14 +- site/data/sidebar.yml | 1 + 10 files changed, 271 insertions(+), 32 deletions(-) create mode 100644 scss/_links.scss create mode 100644 site/content/docs/0.0/components/links.md diff --git a/scss/_links.scss b/scss/_links.scss new file mode 100644 index 0000000000..6fa70276aa --- /dev/null +++ b/scss/_links.scss @@ -0,0 +1,75 @@ +// +// Orange component link +// + +%chevron-properties { + display: inline-block; + width: $ouds-navigation-link-size-icon-medium; + height: $ouds-navigation-link-size-icon-medium; + vertical-align: middle; + content: ""; + background-color: $ouds-navigation-link-color-arrow-enabled; + mask: var(--#{$prefix}chevron-icon) no-repeat; +} + +.link { + // scss-docs-start link-css-vars + --#{$prefix}link-color-rgb: #{$ouds-navigation-link-color-content-enabled}; + // scss-docs-end link-css-vars + + @include get-font-size("label-large"); + display: block; + min-width: $ouds-navigation-link-size-min-width-medium; + min-height: $ouds-navigation-link-size-min-height-medium; + padding: $ouds-navigation-link-space-padding-block $ouds-navigation-link-space-padding-inline; + font-weight: $link-font-weight; + color: var(--#{$prefix}link-color-rgb); + text-decoration: $link-decoration;// OUDS mod + + &:hover, + &:focus-visible, + &:focus[data-focus-visible-added] { + --#{$prefix}link-color-rgb: #{$ouds-navigation-link-color-content-hover}; + + text-decoration: $link-hover-decoration; + } + + &:active { + --#{$prefix}link-color-rgb: #{$ouds-navigation-link-color-content-pressed}; + } + + &.link-sm{ + @include get-font-size("label-medium"); + min-width: $ouds-navigation-link-size-min-width-small; + min-height: $ouds-navigation-link-size-min-height-small; + } + + &.link-chevron { + + &:not(:hover):not(:active):not(:focus) { + text-decoration: none; + } + + &:not(.back)::after { + @extend %chevron-properties; + margin-left: $ouds-navigation-link-space-column-gap-arrow-medium; + transform: $linked-chevron-transform; + } + + &.link-sm::after { + width: $ouds-navigation-link-size-icon-small; + height: $ouds-navigation-link-size-icon-small; + margin-left: $ouds-navigation-link-space-column-gap-arrow-small; + } + + &[aria-disabled="true"]::after { + background-color: var(--#{$prefix}color-action-disabled); + } + + &.back::before { + @extend %chevron-properties; + margin-right: $ouds-navigation-link-space-column-gap-arrow-medium; + } + } +} + diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 3731320e55..ca16daf17a 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -350,13 +350,28 @@ sup { top: -.5em; } // Links a { - color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1)); + --#{$prefix}link-color-rgb: #{$ouds-navigation-link-color-content-enabled}; // OUDS mod + + color: var(--#{$prefix}link-color-rgb); text-decoration: $link-decoration; - &:hover { - --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb); + &:hover, + &:focus-visible, + &:focus[data-focus-visible-added] { + --#{$prefix}link-color-rgb: #{$ouds-navigation-link-color-content-hover}; + text-decoration: $link-hover-decoration; } + + &:active { + --#{$prefix}link-color-rgb: #{$ouds-navigation-link-color-content-pressed}; + } +} + +// OUDS mod: disabled links +a[aria-disabled="true"] { + color: var(--#{$prefix}color-action-disabled); + pointer-events: none; } // And undo these styles for placeholder links/named anchors (without href). diff --git a/scss/_root.scss b/scss/_root.scss index 1893958728..1bbcf33311 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -243,7 +243,6 @@ --#{$prefix}heading-color: #{$headings-color}; --#{$prefix}link-color: #{$link-color}; - --#{$prefix}link-color-rgb: #{to-rgb($link-color)}; --#{$prefix}link-decoration: #{$link-decoration}; --#{$prefix}link-hover-color: #{$link-hover-color}; @@ -484,7 +483,6 @@ --#{$prefix}link-color: #{$link-color-dark}; --#{$prefix}link-hover-color: #{$link-hover-color-dark}; - --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)}; --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)}; --#{$prefix}code-color: #{$code-color-dark}; diff --git a/scss/_variables.scss b/scss/_variables.scss index c81772838c..08977b26e8 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -367,7 +367,7 @@ $escaped-characters: ( // OUDS mod //// SVG as Data-URi -$chevron-icon: url("data:image/svg+xml,") !default; +$chevron-icon: url("data:image/svg+xml,") !default; $cross-icon: url("data:image/svg+xml,") !default; $cross-icon-stroke: url("data:image/svg+xml,") !default; $check-icon: url("data:image/svg+xml,") !default; @@ -491,6 +491,7 @@ $body-emphasis-color: $ouds-color-content-default-light !default; // OUDS $link-color: $black !default; // OUDS mod $link-decoration: underline !default; +$link-font-weight: $ouds-font-weight-strong !default; $link-shade-percentage: 20% !default; $link-hover-color: $primary !default; // OUDS mod $link-hover-decoration: null !default; diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss index 3ff636ff5b..3f8bcb335c 100644 --- a/scss/helpers/_icon-link.scss +++ b/scss/helpers/_icon-link.scss @@ -1,5 +1,3 @@ -@import "chevron-link"; // OUDS mod - .icon-link { display: inline-flex; gap: $icon-link-gap; diff --git a/scss/ouds-web.scss b/scss/ouds-web.scss index d3d72c6c3c..e2203deff8 100644 --- a/scss/ouds-web.scss +++ b/scss/ouds-web.scss @@ -25,6 +25,7 @@ @import "grid"; @import "tables"; @import "forms"; +@import "links"; @import "buttons"; @import "transitions"; @import "dropdown"; diff --git a/scss/tokens/_component.scss b/scss/tokens/_component.scss index 1b4bc9d715..e41f8395e2 100644 --- a/scss/tokens/_component.scss +++ b/scss/tokens/_component.scss @@ -262,29 +262,29 @@ $ouds-indicator-skeleton-color-gradient-middle: var(--#{$prefix}color-opacity-lo // Navigation // scss-docs-start ouds-component-navigation -// $ouds-navigation-link-size-min-height-medium: $ouds-dimension-600 !default; -// $ouds-navigation-link-size-min-height-small: $ouds-dimension-550 !default; -// $ouds-navigation-link-size-min-width-medium: $ouds-dimension-600 !default; -// $ouds-navigation-link-size-min-width-small: $ouds-dimension-550 !default; +$ouds-navigation-link-size-min-height-medium: $ouds-dimension-600 !default; +$ouds-navigation-link-size-min-height-small: $ouds-dimension-550 !default; +$ouds-navigation-link-size-min-width-medium: $ouds-dimension-600 !default; +$ouds-navigation-link-size-min-width-small: $ouds-dimension-550 !default; // $ouds-navigation-link-color-content-disabled-mono: $ouds-color-repository-opacity-black-medium !default; // $ouds-navigation-link-color-content-enabled-mono: $ouds-color-repository-neutral-emphasized-black !default; // $ouds-navigation-link-color-content-focus-mono: $ouds-color-repository-neutral-emphasized-black !default; // $ouds-navigation-link-color-content-hover-mono: $ouds-color-repository-neutral-emphasized-black !default; // $ouds-navigation-link-color-content-pressed-mono: $ouds-color-repository-opacity-black-higher !default; -// $ouds-navigation-link-color-arrow-enabled: var(--#{$prefix}color-content-brand-primary) !default; -// $ouds-navigation-link-color-arrow-focus: var(--#{$prefix}color-content-brand-primary) !default; -// $ouds-navigation-link-color-arrow-hover: var(--#{$prefix}color-content-brand-primary) !default; -// $ouds-navigation-link-color-arrow-pressed: var(--#{$prefix}color-content-brand-primary) !default; -// $ouds-navigation-link-color-content-enabled: var(--#{$prefix}color-action-enabled) !default; +$ouds-navigation-link-color-arrow-enabled: var(--#{$prefix}color-content-brand-primary) !default; +$ouds-navigation-link-color-arrow-focus: var(--#{$prefix}color-content-brand-primary) !default; +$ouds-navigation-link-color-arrow-hover: var(--#{$prefix}color-content-brand-primary) !default; +$ouds-navigation-link-color-arrow-pressed: var(--#{$prefix}color-content-brand-primary) !default; +$ouds-navigation-link-color-content-enabled: var(--#{$prefix}color-action-enabled) !default; // $ouds-navigation-link-color-content-focus: var(--#{$prefix}color-action-focus) !default; -// $ouds-navigation-link-color-content-hover: var(--#{$prefix}color-action-hover) !default; -// $ouds-navigation-link-color-content-pressed: var(--#{$prefix}color-action-pressed) !default; -// $ouds-navigation-link-size-icon-medium: $ouds-size-icon-with-label-large-size-xs !default; -// $ouds-navigation-link-size-icon-small: $ouds-size-icon-with-label-medium-size-sm !default; -// $ouds-navigation-link-space-column-gap-arrow-medium: $ouds-space-column-gap-shorter !default; -// $ouds-navigation-link-space-column-gap-arrow-small: $ouds-space-column-gap-shortest !default; +$ouds-navigation-link-color-content-hover: var(--#{$prefix}color-action-hover) !default; +$ouds-navigation-link-color-content-pressed: var(--#{$prefix}color-action-pressed) !default; +$ouds-navigation-link-size-icon-medium: $ouds-size-icon-with-label-large-size-xs !default; +$ouds-navigation-link-size-icon-small: $ouds-size-icon-with-label-medium-size-sm !default; +$ouds-navigation-link-space-column-gap-arrow-medium: $ouds-space-column-gap-shorter !default; +$ouds-navigation-link-space-column-gap-arrow-small: $ouds-space-column-gap-shortest !default; // $ouds-navigation-link-space-column-gap-icon-medium: $ouds-space-column-gap-short !default; // $ouds-navigation-link-space-column-gap-icon-small: $ouds-space-column-gap-shorter !default; -// $ouds-navigation-link-space-padding-block: $ouds-space-padding-block-medium !default; -// $ouds-navigation-link-space-padding-inline: $ouds-space-padding-inline-none !default; +$ouds-navigation-link-space-padding-block: $ouds-space-padding-block-medium !default; +$ouds-navigation-link-space-padding-inline: $ouds-space-padding-inline-none !default; // scss-docs-end ouds-component-navigation diff --git a/site/content/docs/0.0/components/links.md b/site/content/docs/0.0/components/links.md new file mode 100644 index 0000000000..d93bb85eaa --- /dev/null +++ b/site/content/docs/0.0/components/links.md @@ -0,0 +1,150 @@ +--- +layout: docs +title: Links +description: Use OUDS Web's customer link styles for links as a key navigational element, enabling users to move between pages, sections, or external resources. +group: components +aliases: + - "/docs/components/links/" +toc: true +--- + +## Base class + +OUDS Web has a base `.link` class that sets up basic styles such as padding and content alignment. By default, `.link` controls have a transparent border and background color, but still defines basic focus, hover and active styles. + +{{< example >}} +This is an example of a base link +This is an example of a small base link +This is an example of a link with chevron +This is an example of a link with chevron + + + This is an example of a link with icon + +{{< /example >}} + +The `.link` class is intended to be used in conjunction with our link variants used to display chevron or icon, or to serve as a basis for your own custom styles. + +## Link chevron + +Add `.link-chevron` to enhance your link with a chevron. + +{{< example >}} +This is a sample link with chevron +{{< /example >}} + +## Icon link + +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 >}} +When icons are purely decorative, they should be hidden from assistive technologies using `aria-hidden="true"`, as we've done in our examples. For icons that convey meaning, provide an appropriate text alternative by adding `role="img"` and an appropriate `aria-label="..."` to the 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. + +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This helper should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. +{{< /design-callout-alert >}} + +{{< example >}} + + + Icon link + +{{< /example >}} + +{{< example >}} + + Icon link + + +{{< /example >}} +
+ +### Style on hover + +Add `.icon-link-hover` to move the icon to the right on hover. + +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This helper should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. +{{< /design-callout-alert >}} + +{{< example >}} + + Icon link + + +{{< /example >}} +
+ +## Customize + +Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles. + +### CSS variables + +Modify the `--bs-link-*` and `--bs-icon-link-*` CSS variables as needed to change the default appearance. + +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This helper should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. +{{< /design-callout-alert >}} + +Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable: + +{{< example >}} + + + Icon link + +{{< /example >}} + +Customize the color by overriding the `--bs-link-*` CSS variable: + +{{< example >}} + + Icon link + + +{{< /example >}} +
+ +### Sass variables + +Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project. + +{{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}} + +### Sass utilities API + +Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset. + +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This helper should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. +{{< /design-callout-alert >}} + +{{< example >}} + + Icon link + + +{{< /example >}} +
diff --git a/site/content/docs/0.0/content/reboot.md b/site/content/docs/0.0/content/reboot.md index 01ac6722c2..70d3e81ce8 100644 --- a/site/content/docs/0.0/content/reboot.md +++ b/site/content/docs/0.0/content/reboot.md @@ -114,25 +114,25 @@ All `

` elements have their `margin-top` removed and `margin-bottom: 16px` set

This is an example paragraph.

{{< /example >}} - +This is an example of a visited link +{{< /example >}} ## Horizontal rules diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 7854a62d25..158a065192 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -122,6 +122,7 @@ draft: true - title: Dropdowns draft: true + - title: Links - title: Footer draft: true - title: List group From 85bb572ca95e38d94c938a1e51167f27eb82e346 Mon Sep 17 00:00:00 2001 From: Samuel Collin Date: Wed, 22 Jan 2025 09:36:14 +0100 Subject: [PATCH 2/2] feat: link component update and doc updates --- scss/_helpers.scss | 1 - scss/_links.scss | 50 +++++++-- scss/_reboot.scss | 10 +- scss/_variables.scss | 14 ++- scss/helpers/_chevron-link.scss | 23 ---- scss/helpers/_icon-link.scss | 25 ----- scss/tokens/_component.scss | 6 +- site/assets/scss/_sidebar.scss | 2 + site/assets/scss/_toc.scss | 2 + site/content/docs/0.0/components/links.md | 110 ++++---------------- site/content/docs/0.0/content/reboot.md | 6 +- site/content/docs/0.0/content/typography.md | 8 -- site/content/docs/0.0/helpers/icon-link.md | 11 -- site/content/docs/0.0/utilities/link.md | 11 -- site/data/sidebar.yml | 4 - 15 files changed, 88 insertions(+), 195 deletions(-) delete mode 100644 scss/helpers/_chevron-link.scss delete mode 100644 scss/helpers/_icon-link.scss delete mode 100644 site/content/docs/0.0/helpers/icon-link.md delete mode 100644 site/content/docs/0.0/utilities/link.md diff --git a/scss/_helpers.scss b/scss/_helpers.scss index a246e3b508..5bf85d0cd9 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -3,7 +3,6 @@ @import "helpers/colored-links"; @import "helpers/focus-ring"; @import "helpers/icon"; -@import "helpers/icon-link"; @import "helpers/ratio"; @import "helpers/position"; @import "helpers/stacks"; diff --git a/scss/_links.scss b/scss/_links.scss index 6fa70276aa..e866711894 100644 --- a/scss/_links.scss +++ b/scss/_links.scss @@ -3,22 +3,24 @@ // %chevron-properties { - display: inline-block; + display: inline-flex; + align-items: center; width: $ouds-navigation-link-size-icon-medium; height: $ouds-navigation-link-size-icon-medium; - vertical-align: middle; content: ""; background-color: $ouds-navigation-link-color-arrow-enabled; mask: var(--#{$prefix}chevron-icon) no-repeat; } -.link { +.link, +.link-chevron, +.icon-link { // scss-docs-start link-css-vars --#{$prefix}link-color-rgb: #{$ouds-navigation-link-color-content-enabled}; // scss-docs-end link-css-vars @include get-font-size("label-large"); - display: block; + display: inline-flex; min-width: $ouds-navigation-link-size-min-width-medium; min-height: $ouds-navigation-link-size-min-height-medium; padding: $ouds-navigation-link-space-padding-block $ouds-navigation-link-space-padding-inline; @@ -26,10 +28,15 @@ color: var(--#{$prefix}link-color-rgb); text-decoration: $link-decoration;// OUDS mod - &:hover, + &:hover { + --#{$prefix}link-color-rgb: #{$ouds-navigation-link-color-content-hover}; + + text-decoration: $link-hover-decoration; + } + &:focus-visible, &:focus[data-focus-visible-added] { - --#{$prefix}link-color-rgb: #{$ouds-navigation-link-color-content-hover}; + --#{$prefix}link-color-rgb: #{$ouds-navigation-link-color-content-focus}; text-decoration: $link-hover-decoration; } @@ -53,7 +60,7 @@ &:not(.back)::after { @extend %chevron-properties; margin-left: $ouds-navigation-link-space-column-gap-arrow-medium; - transform: $linked-chevron-transform; + transform: $ouds-link-chevron-after-transform; } &.link-sm::after { @@ -69,7 +76,36 @@ &.back::before { @extend %chevron-properties; margin-right: $ouds-navigation-link-space-column-gap-arrow-medium; + transform: $ouds-link-chevron-before-transform; } } + + &.icon-link { + display: inline-flex; + gap: $ouds-navigation-link-space-column-gap-icon-medium; + align-items: center; + backface-visibility: hidden; + + > .bi { + flex-shrink: 0; + width: $ouds-navigation-link-size-icon-medium; + height: $ouds-navigation-link-size-icon-medium; + fill: currentcolor; + @include transition($icon-link-icon-transition); + } + } + + &.icon-link-hover { + &:hover, + &:focus-visible { + > .bi { + transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform); + } + } + } +} + +.visited-links a:not(.icon-link):not(.link-chevron):visited { + color: var(--#{$prefix}color-action-visited); } diff --git a/scss/_reboot.scss b/scss/_reboot.scss index ca16daf17a..34d2ce7c13 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -352,13 +352,19 @@ sup { top: -.5em; } a { --#{$prefix}link-color-rgb: #{$ouds-navigation-link-color-content-enabled}; // OUDS mod + font-weight: $link-font-weight; color: var(--#{$prefix}link-color-rgb); text-decoration: $link-decoration; - &:hover, + &:hover { + --#{$prefix}link-color-rgb: #{$ouds-navigation-link-color-content-hover}; + + text-decoration: $link-hover-decoration; + } + &:focus-visible, &:focus[data-focus-visible-added] { - --#{$prefix}link-color-rgb: #{$ouds-navigation-link-color-content-hover}; + --#{$prefix}link-color-rgb: #{$ouds-navigation-link-color-content-focus}; text-decoration: $link-hover-decoration; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 08977b26e8..43b7411614 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -500,17 +500,15 @@ $stretched-link-pseudo-element: after !default; $stretched-link-z-index: 1 !default; // OUDS mod -$linked-chevron-icon-width: subtract(.5rem, 1px) !default; -$linked-chevron-icon-height: $spacer * .5 !default; -$linked-chevron-transform: rotate(.5turn) translateY(1px) !default; -$linked-chevron-margin-left: $spacer * .25 !default; +$ouds-link-chevron-before-transform: translateY(2px) !default; +$ouds-link-chevron-after-transform: rotate(.5turn) translateY(-2px) !default; // End mod // Icon links +// $icon-link-gap: .3125rem !default; // OUDS mod: instead of `.375rem` +// $icon-link-underline-offset: .25em !default; +// $icon-link-icon-size: 1em !default; // scss-docs-start icon-link-variables -$icon-link-gap: .3125rem !default; // OUDS mod: instead of `.375rem` -$icon-link-underline-offset: .25em !default; -$icon-link-icon-size: 1em !default; $icon-link-icon-transition: .2s ease-in-out transform !default; $icon-link-icon-transform: translate3d(.25em, 0, 0) !default; // scss-docs-end icon-link-variables @@ -2220,7 +2218,7 @@ $back-to-top-title-color: var(--#{$prefix}body-color) !default; $back-to-top-title-bg-color: var(--#{$prefix}body-bg) !default; $back-to-top-bg: var(--#{$prefix}highlight-color) !default; $back-to-top-icon: var(--#{$prefix}chevron-icon) !default; -$back-to-top-icon-width: add(.5rem, 1px) !default; +$back-to-top-icon-width: add(3rem, 1px) !default; $back-to-top-icon-height: subtract(1rem, 1px) !default; // scss-docs-end back-to-top diff --git a/scss/helpers/_chevron-link.scss b/scss/helpers/_chevron-link.scss deleted file mode 100644 index ff0ba3aba6..0000000000 --- a/scss/helpers/_chevron-link.scss +++ /dev/null @@ -1,23 +0,0 @@ -// OUDS mod -.link-chevron { - font-weight: $font-weight-bold; - text-decoration: if($link-decoration == none, null, none); - background-color: transparent; - - &::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-color: currentcolor; - mask: var(--#{$prefix}chevron-icon) no-repeat; - transform: $linked-chevron-transform; - } - - &:hover { - text-decoration: $link-decoration; - } -} -// End mod diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss deleted file mode 100644 index 3f8bcb335c..0000000000 --- a/scss/helpers/_icon-link.scss +++ /dev/null @@ -1,25 +0,0 @@ -.icon-link { - 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-underline-offset: $icon-link-underline-offset; - backface-visibility: hidden; - - > .bi { - flex-shrink: 0; - width: $icon-link-icon-size; - height: $icon-link-icon-size; - fill: currentcolor; - @include transition($icon-link-icon-transition); - } -} - -.icon-link-hover { - &:hover, - &:focus-visible { - > .bi { - transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform); - } - } -} diff --git a/scss/tokens/_component.scss b/scss/tokens/_component.scss index e41f8395e2..673062be09 100644 --- a/scss/tokens/_component.scss +++ b/scss/tokens/_component.scss @@ -276,15 +276,15 @@ $ouds-navigation-link-color-arrow-focus: var(--#{$prefix}color-content-brand-pri $ouds-navigation-link-color-arrow-hover: var(--#{$prefix}color-content-brand-primary) !default; $ouds-navigation-link-color-arrow-pressed: var(--#{$prefix}color-content-brand-primary) !default; $ouds-navigation-link-color-content-enabled: var(--#{$prefix}color-action-enabled) !default; -// $ouds-navigation-link-color-content-focus: var(--#{$prefix}color-action-focus) !default; +$ouds-navigation-link-color-content-focus: var(--#{$prefix}color-action-focus) !default; $ouds-navigation-link-color-content-hover: var(--#{$prefix}color-action-hover) !default; $ouds-navigation-link-color-content-pressed: var(--#{$prefix}color-action-pressed) !default; $ouds-navigation-link-size-icon-medium: $ouds-size-icon-with-label-large-size-xs !default; $ouds-navigation-link-size-icon-small: $ouds-size-icon-with-label-medium-size-sm !default; $ouds-navigation-link-space-column-gap-arrow-medium: $ouds-space-column-gap-shorter !default; $ouds-navigation-link-space-column-gap-arrow-small: $ouds-space-column-gap-shortest !default; -// $ouds-navigation-link-space-column-gap-icon-medium: $ouds-space-column-gap-short !default; -// $ouds-navigation-link-space-column-gap-icon-small: $ouds-space-column-gap-shorter !default; +$ouds-navigation-link-space-column-gap-icon-medium: $ouds-space-column-gap-short !default; +$ouds-navigation-link-space-column-gap-icon-small: $ouds-space-column-gap-shorter !default; $ouds-navigation-link-space-padding-block: $ouds-space-padding-block-medium !default; $ouds-navigation-link-space-padding-inline: $ouds-space-padding-inline-none !default; // scss-docs-end ouds-component-navigation diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index 58d10905a0..a8b531f7c7 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -51,6 +51,8 @@ padding: .1875rem .5rem; margin-top: .125rem; margin-left: 1.375rem; // OUDS mod: changed value + font-size: var(--#{$prefix}font-size-body-small); // OUDS mod: instead of `1rem` + font-weight: 400; // OUDS mod: no 'bold' for the sidebar links // OUDS mod: no `color` text-decoration: if($link-decoration == none, null, none); diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss index a59f52efef..c6c7bfc8bb 100644 --- a/site/assets/scss/_toc.scss +++ b/site/assets/scss/_toc.scss @@ -27,6 +27,8 @@ a { display: block; padding: $ouds-space-fixed-shortest 0 $ouds-space-fixed-shortest $ouds-space-fixed-medium; // OUDS mod + font-size: var(--#{$prefix}font-size-body-small); // OUDS mod: instead of `1rem` + font-weight: 400; // OUDS mod: no 'bold' for the sidebar links color: inherit; text-decoration: none; // OUDS mod: no border-left diff --git a/site/content/docs/0.0/components/links.md b/site/content/docs/0.0/components/links.md index d93bb85eaa..be8dd99cc2 100644 --- a/site/content/docs/0.0/components/links.md +++ b/site/content/docs/0.0/components/links.md @@ -10,29 +10,27 @@ toc: true ## Base class -OUDS Web has a base `.link` class that sets up basic styles such as padding and content alignment. By default, `.link` controls have a transparent border and background color, but still defines basic focus, hover and active styles. +OUDS Web has a base `.link` class that sets up basic styles such as padding and content alignment. By default, `.link` controls have a transparent border and background color, but still defines basic focus, hover and active styles. Add `.link-sm` for small size. + +Visited links don't have a specific style by default. The `:visited` status can be styled with the additional `.visited-links` utility class that can be applied to a parent element to style all the child links. {{< example >}} -This is an example of a base link -This is an example of a small base link -This is an example of a link with chevron -This is an example of a link with chevron - - - This is an example of a link with icon - +
This is an example of a base link
+
This is an example of a small base link
+
+ This is an example of a visited link +
{{< /example >}} The `.link` class is intended to be used in conjunction with our link variants used to display chevron or icon, or to serve as a basis for your own custom styles. ## Link chevron -Add `.link-chevron` to enhance your link with a chevron. +Add `.link-chevron` to enhance your link with a chevron on the right side. Use the additional `.back` class to display the chevron on the left side. {{< example >}} -This is a sample link with chevron +
This is an example of a link with chevron
+
This is an example of a link with chevron
{{< /example >}} ## Icon link @@ -45,34 +43,20 @@ Icon links assume [Bootstrap Icons](https://icons.getbootstrap.com) are being us When icons are purely decorative, they should be hidden from assistive technologies using `aria-hidden="true"`, as we've done in our examples. For icons that convey meaning, provide an appropriate text alternative by adding `role="img"` and an appropriate `aria-label="..."` to the 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. -
-See Bootstrap examples that are incompatible with Orange Design System. -
-{{< design-callout-alert >}} -This helper should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. -{{< /design-callout-alert >}} - -{{< example >}} - - - Icon link - -{{< /example >}} - {{< example >}} - - Icon link - + + + This is an example of a link with an icon {{< /example >}} -
### Style on hover +{{< bootstrap-compatibility >}} Add `.icon-link-hover` to move the icon to the right on hover.
@@ -89,62 +73,8 @@ This helper should be used carefully because the rendering provided in the follo {{< /example >}}
+{{< /bootstrap-compatibility >}} -## Customize - -Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles. - -### CSS variables - -Modify the `--bs-link-*` and `--bs-icon-link-*` CSS variables as needed to change the default appearance. - -
-See Bootstrap examples that are incompatible with Orange Design System. -
-{{< design-callout-alert >}} -This helper should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. -{{< /design-callout-alert >}} - -Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable: - -{{< example >}} - - - Icon link - -{{< /example >}} - -Customize the color by overriding the `--bs-link-*` CSS variable: - -{{< example >}} - - Icon link - - -{{< /example >}} -
- -### Sass variables - -Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project. +### Component tokens -{{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}} - -### Sass utilities API - -Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset. - -
-See Bootstrap examples that are incompatible with Orange Design System. -
-{{< design-callout-alert >}} -This helper should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. -{{< /design-callout-alert >}} - -{{< example >}} - - Icon link - - -{{< /example >}} -
+{{< scss-docs name="ouds-component-navigation" file="scss/tokens/_component.scss" >}} diff --git a/site/content/docs/0.0/content/reboot.md b/site/content/docs/0.0/content/reboot.md index 70d3e81ce8..ae327f6c73 100644 --- a/site/content/docs/0.0/content/reboot.md +++ b/site/content/docs/0.0/content/reboot.md @@ -128,10 +128,12 @@ Links have a disabled style when using an `aria-disabled="true"` attribute. This is an example of a disabled link {{< /example >}} -The `:visited` status can be styled with the additional `.visited` utility class. +Visited links don't have a specific style by default. The `:visited` status can be styled with the additional `.visited-links` utility class that can be applied to a parent element to style all the child links. {{< example >}} -This is an example of a visited link +
+ This is an example of a visited link +
{{< /example >}} ## Horizontal rules diff --git a/site/content/docs/0.0/content/typography.md b/site/content/docs/0.0/content/typography.md index b71c14020f..304f9f6be7 100644 --- a/site/content/docs/0.0/content/typography.md +++ b/site/content/docs/0.0/content/typography.md @@ -301,14 +301,6 @@ Use text utilities as needed to change the alignment of your blockquote. {{< /example >}} - -