diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 13f2752c9b..a246e3b508 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"; @import "helpers/icon-link"; @import "helpers/ratio"; @import "helpers/position"; diff --git a/scss/_maps.scss b/scss/_maps.scss index 44fdae2c76..2a1bdd92ae 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -107,6 +107,8 @@ $ouds-font-weights: ( normal: $ouds-font-weight-web-default, bold: $ouds-font-weight-web-strong ) !default; + +$ouds-icon-sizes: ("short", "medium", "tall") !default; // scss-docs-end ouds-maps-fonts // scss-docs-start ouds-maps-opacities diff --git a/scss/_reboot.scss b/scss/_reboot.scss index bf42aec4cb..c5fc2e670a 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -185,8 +185,7 @@ h6 { p { margin-top: 0; margin-bottom: $paragraph-margin-bottom; - // todo lm: Decide if we keep this as-is or not. - // @extend %body-medium; + @extend %body-medium; // OUDS mod } diff --git a/scss/_type.scss b/scss/_type.scss index c4fda5e7c2..43f46dc175 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -101,3 +101,12 @@ content: "\2014\00A0"; // em dash, nbsp } } + +// OUDS mod +// Selection +// TODO LM: Change the used variables once we have the good tokens +::selection { + color: var(--#{$prefix}highlight-color); + background-color: var(--#{$prefix}highlight-bg); +} +// End mod diff --git a/scss/helpers/_icon.scss b/scss/helpers/_icon.scss new file mode 100644 index 0000000000..1399d497a7 --- /dev/null +++ b/scss/helpers/_icon.scss @@ -0,0 +1,120 @@ +[class*="-icon"] { + width: 1em; + height: 1em; + fill: currentcolor; +} + +@each $icon-size in $ouds-icon-sizes { + .hxl-#{$icon-size}-icon { + font-size: var(--#{$prefix}icon-#{$icon-size}-with-heading-xlarge) if($enable-important-utilities, !important, null); + } + + .hl-#{$icon-size}-icon { + font-size: var(--#{$prefix}icon-#{$icon-size}-with-heading-large) if($enable-important-utilities, !important, null); + } + + .hm-#{$icon-size}-icon { + font-size: var(--#{$prefix}icon-#{$icon-size}-with-heading-medium) if($enable-important-utilities, !important, null); + } + + .hs-#{$icon-size}-icon { + font-size: var(--#{$prefix}icon-#{$icon-size}-with-heading-small) if($enable-important-utilities, !important, null); + } + + .bl-#{$icon-size}-icon { + font-size: var(--#{$prefix}icon-#{$icon-size}-with-body-large) if($enable-important-utilities, !important, null); + } + + .bm-#{$icon-size}-icon { + font-size: var(--#{$prefix}icon-#{$icon-size}-with-body-medium) if($enable-important-utilities, !important, null); + } + + .bs-#{$icon-size}-icon { + font-size: var(--#{$prefix}icon-#{$icon-size}-with-body-small) if($enable-important-utilities, !important, null); + } +} + +.lxl-short-icon { + font-size: $ouds-size-icon-with-label-xlarge-size-short if($enable-important-utilities, !important, null); +} + +.lxl-medium-icon { + font-size: $ouds-size-icon-with-label-xlarge-size-medium if($enable-important-utilities, !important, null); +} + +.lxl-tall-icon { + font-size: $ouds-size-icon-with-label-xlarge-size-tall if($enable-important-utilities, !important, null); +} + +// TODO LM: Why is there 2 more sizes for label-large ? +.ll-shorter-icon { + font-size: $ouds-size-icon-with-label-large-size-shorter if($enable-important-utilities, !important, null); +} + +.ll-short-icon { + font-size: $ouds-size-icon-with-label-large-size-short if($enable-important-utilities, !important, null); +} + +.ll-medium-icon { + font-size: $ouds-size-icon-with-label-large-size-medium if($enable-important-utilities, !important, null); +} + +.ll-tall-icon { + font-size: $ouds-size-icon-with-label-large-size-tall if($enable-important-utilities, !important, null); +} + +.ll-taller-icon { + font-size: $ouds-size-icon-with-label-large-size-taller if($enable-important-utilities, !important, null); +} + +.lm-short-icon { + font-size: $ouds-size-icon-with-label-medium-size-short if($enable-important-utilities, !important, null); +} + +.lm-medium-icon { + font-size: $ouds-size-icon-with-label-medium-size-medium if($enable-important-utilities, !important, null); +} + +.lm-tall-icon { + font-size: $ouds-size-icon-with-label-medium-size-tall if($enable-important-utilities, !important, null); +} + +.ls-short-icon { + font-size: $ouds-size-icon-with-label-small-size-short if($enable-important-utilities, !important, null); +} + +.ls-medium-icon { + font-size: $ouds-size-icon-with-label-small-size-medium if($enable-important-utilities, !important, null); +} + +.ls-tall-icon { + font-size: $ouds-size-icon-with-label-small-size-tall if($enable-important-utilities, !important, null); +} + +.decorative-shortest-icon { + font-size: $ouds-size-icon-decorative-shortest if($enable-important-utilities, !important, null); +} + +.decorative-shorter-icon { + font-size: $ouds-size-icon-decorative-shorter if($enable-important-utilities, !important, null); +} + +.decorative-short-icon { + font-size: $ouds-size-icon-decorative-short if($enable-important-utilities, !important, null); +} + +.decorative-medium-icon { + font-size: $ouds-size-icon-decorative-medium if($enable-important-utilities, !important, null); +} + +.decorative-tall-icon { + font-size: $ouds-size-icon-decorative-tall if($enable-important-utilities, !important, null); +} + +.decorative-taller-icon { + font-size: $ouds-size-icon-decorative-taller if($enable-important-utilities, !important, null); +} + +.decorative-tallest-icon { + font-size: $ouds-size-icon-decorative-tallest if($enable-important-utilities, !important, null); +} diff --git a/scss/tokens/_composite.scss b/scss/tokens/_composite.scss index b1b2334dad..a7c125d26c 100644 --- a/scss/tokens/_composite.scss +++ b/scss/tokens/_composite.scss @@ -49,25 +49,6 @@ $ouds-elevation-sticky-navigation-scrolled: $ouds-elevation-x-sticky-navigation- /* rtl:remove */ letter-spacing: var(--#{$prefix}font-letter-spacing-heading-xlarge); - // todo lm: Should we add default svg img height and width ? If yes, then we should add it here. Do we introduce new classes in here ? - - // img, - // svg, - // .#{$prefix}icon, - // .#{$prefix}icon-sm, - // .#{$prefix}icon-lg { - // width: 1em; - // height: 1em; - // font-size: var(--#{$prefix}icon-medium-with-heading-xlarge); - // } - - // .#{$prefix}icon-sm { - // font-size: var(--#{$prefix}icon-small-with-heading-xlarge); - // } - - // .#{$prefix}icon-lg { - // font-size: var(--#{$prefix}icon-large-with-heading-xlarge); - // } } %heading-large { diff --git a/site/content/docs/0.0/helpers/icon.md b/site/content/docs/0.0/helpers/icon.md new file mode 100644 index 0000000000..2c9769e924 --- /dev/null +++ b/site/content/docs/0.0/helpers/icon.md @@ -0,0 +1,124 @@ +--- +layout: docs +title: Icon link +description: Quickly see the icon sizes you should use with a specific typography. +group: helpers +aliases: + - "/docs/helpers/icon-link/" +toc: true +--- + +## Core concept + +Free to use how you want with img, svg or icon font +Inside or outside of the text element + +## Displays + +You should not use any icon with our `.display-*` font sizes, because we prefer to keep the place for the text. + +## Headings + +{{< example >}} +

+ + H1 with tall icon +

+

+ + H1 with medium icon +

+

+ + H1 with short icon +

+ +
+ +

+ + H2 with tall icon +

+

+ + H2 with medium icon +

+

+ + H2 with short icon +

+ +
+ +

+ + H3 with tall icon +

+

+ + H3 with medium icon +

+

+ + H3 with short icon +

+ +
+ +

+ + H4 with tall icon +

+

+ + H4 with medium icon +

+

+ + H4 with short icon +

+{{< /example >}} + +## Regular texts + +{{< example >}} + +{{< /example >}} + + + +## Labels + +{{< example >}} + +{{< /example >}} + +## Decorative + +{{< example >}} + +{{< /example >}} diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 88491a8c10..d77d6b30d4 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -177,6 +177,7 @@ draft: true - title: Focus ring draft: true + - title: Icon - title: Icon link draft: true - title: Position diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html index 7fbacb09b0..75ae6c14f4 100644 --- a/site/layouts/partials/docs-sidebar.html +++ b/site/layouts/partials/docs-sidebar.html @@ -18,7 +18,7 @@
  • {{- if $group.icon }} - + {{- end }} {{ $group.title }} diff --git a/site/static/docs/0.0/assets/img/ouds-web-sprite.svg b/site/static/docs/0.0/assets/img/ouds-web-sprite.svg index e0af766e8f..d290d24ced 100644 --- a/site/static/docs/0.0/assets/img/ouds-web-sprite.svg +++ b/site/static/docs/0.0/assets/img/ouds-web-sprite.svg @@ -1,2 +1,5 @@ + + +