feat(lib): Add Typography as components and h2 heading marker

.github/skills/token-system/references/architecture.md

@@ -34,6 +34,7 @@ Figma (design decisions)
 - Font-family stack strings
 - Embedded SVG icon data URIs
 - Sass maps
+- Heading marker SVG and dimensions (`$ouds-heading-large-marker-img/-width/-height`, set to `null` for a brand without a marker)
 
 ---
 

.github/skills/validate-tokens/SKILL.md

@@ -21,7 +21,7 @@ Read all 3 files and extract `$ouds-*` definitions:
 
 ## Step 2 — Identify component SCSS files
 
-All `scss/_*.scss` + `scss/forms/_*.scss`, excluding: `_variables.scss`, `_config.scss`, `_functions.scss`, `_mixins.scss`, `_maps.scss`, `_root.scss`, `_reboot.scss`, `_utilities.scss`, `_helpers.scss`, `_grid.scss`, `_containers.scss`, `_images.scss`, `_type.scss`, `_transitions.scss`, `_forms.scss`, `_variables-dark.scss`
+All `scss/_*.scss` + `scss/forms/_*.scss`, excluding: `_variables.scss`, `_config.scss`, `_functions.scss`, `_mixins.scss`, `_maps.scss`, `_root.scss`, `_reboot.scss`, `_utilities.scss`, `_helpers.scss`, `_grid.scss`, `_containers.scss`, `_images.scss`, `_transitions.scss`, `_forms.scss`, `_variables-dark.scss`
 
 ---
 

packages/migrate/src/migrate.spec.mjs

@@ -77,7 +77,7 @@ describe('Migrate', () => {
     })
 
     expect(getReplacementsWarnings()).toEqual([
-      'initialism class is deprecated in tests/source-boosted.html. See: https://web.unified-design-system.orange.com/docs/foundation/typography',
+      'initialism class is deprecated in tests/source-boosted.html. See: https://web.unified-design-system.orange.com/docs/foundation/reboot',
       'container class is deprecated in tests/source-boosted.html. See: https://web.unified-design-system.orange.com/docs/layout/containers',
       'container-md class is deprecated in tests/source-boosted.html. See: https://web.unified-design-system.orange.com/docs/layout/containers',
       'bg-supporting-purple class is deprecated in tests/source-boosted.html. See: https://web.unified-design-system.orange.com/docs/utilities/background',

packages/migrate/src/replacements/common.mjs

@@ -20,7 +20,7 @@ export const commonReplacements = [
   ['display-4', 'h1'],
   ['display-5', 'h2'],
   ['display-6', 'h3'],
-  [...warnForClass('initialism', { link: 'https://web.unified-design-system.orange.com/docs/foundation/typography' })],
+  [...warnForClass('initialism', { link: 'https://web.unified-design-system.orange.com/docs/foundation/reboot' })],
 
   // Layout
   [...warnForClass('container', { link: 'https://web.unified-design-system.orange.com/docs/layout/containers' })],

packages/orange-compact/scss/ouds-web.scss

@@ -15,7 +15,7 @@
 // Layout & components
 @import "@ouds/web-common/scss/root";
 @import "@ouds/web-common/scss/reboot";
-@import "@ouds/web-common/scss/type";
+@import "@ouds/web-common/scss/typography";
 @import "@ouds/web-common/scss/images";
 @import "@ouds/web-common/scss/containers";
 @import "@ouds/web-common/scss/grid";

packages/orange-compact/scss/tokens/_composite.scss

@@ -63,6 +63,12 @@ $ouds-font-family-monospace-stack:
   Menlo,
   monospace !default;
 // scss-docs-end ouds-composite-font-monospace
+// scss-docs-start ouds-composite-typography
+// NB: Set here the marker SVG exported from Figma, including paddings, with no `fill` attributes. Set it to null if there is not marker available for this theme.
+$ouds-heading-large-marker-img: url("data:image/svg+xml,<svg width='30' height='12' viewBox='0 0 30 12' xmlns='http://www.w3.org/2000/svg'><rect y='4' width='30' height='6'/></svg>") !default;
+$ouds-heading-large-marker-width: 30px !default;
+$ouds-heading-large-marker-height: 12px !default;
+// scss-docs-end ouds-composite-typography
 // stylelint-enable value-keyword-case, scss/dollar-variable-colon-space-after
 
 //// ****** ICONS as data URIs ******

packages/orange/scss/ouds-web.scss

@@ -15,7 +15,7 @@
 // Layout & components
 @import "@ouds/web-common/scss/root";
 @import "@ouds/web-common/scss/reboot";
-@import "@ouds/web-common/scss/type";
+@import "@ouds/web-common/scss/typography";
 @import "@ouds/web-common/scss/images";
 @import "@ouds/web-common/scss/containers";
 @import "@ouds/web-common/scss/grid";

packages/orange/scss/tokens/_composite.scss

@@ -63,6 +63,12 @@ $ouds-font-family-monospace-stack:
   Menlo,
   monospace !default;
 // scss-docs-end ouds-composite-font-monospace
+// scss-docs-start ouds-composite-typography
+// NB: Set here the marker SVG exported from Figma, including paddings, with no `fill` attributes. Set it to null if there is not marker available for this theme.
+$ouds-heading-large-marker-img: url("data:image/svg+xml,<svg width='30' height='12' viewBox='0 0 30 12' xmlns='http://www.w3.org/2000/svg'><rect y='4' width='30' height='6'/></svg>") !default;
+$ouds-heading-large-marker-width: 30px !default;
+$ouds-heading-large-marker-height: 12px !default;
+// scss-docs-end ouds-composite-typography
 // stylelint-enable value-keyword-case, scss/dollar-variable-colon-space-after
 
 //// ****** ICONS as data URIs ******

packages/sosh/scss/ouds-web.scss

@@ -15,7 +15,7 @@
 // Layout & components
 @import "@ouds/web-common/scss/root";
 @import "@ouds/web-common/scss/reboot";
-@import "@ouds/web-common/scss/type";
+@import "@ouds/web-common/scss/typography";
 @import "@ouds/web-common/scss/images";
 @import "@ouds/web-common/scss/containers";
 @import "@ouds/web-common/scss/grid";

packages/sosh/scss/tokens/_composite.scss

@@ -54,6 +54,12 @@ $ouds-font-family-monospace-stack:
   Menlo,
   monospace !default;
 // scss-docs-end ouds-composite-font-monospace
+// scss-docs-start ouds-composite-typography
+// NB: Set here the marker SVG exported from Figma, including paddings, with no `fill` attributes. Set it to null if there is not marker available for this theme.
+$ouds-heading-large-marker-img: null !default;
+$ouds-heading-large-marker-width: 0 !default;
+$ouds-heading-large-marker-height: 0 !default;
+// scss-docs-end ouds-composite-typography
 // stylelint-enable value-keyword-case, scss/dollar-variable-colon-space-after
 
 //// ****** ICONS as data URIs ******

scss/_reboot.scss

@@ -260,8 +260,29 @@ dd {
 
 // Blockquote
 
+.blockquote, // deprecated in OUDS Web v1.6
 blockquote {
   margin: 0 0 $ouds-space-fixed-medium; // OUDS mod: instead of `0 0 1rem`
+
+  > p {
+    @include get-font-size("body-large");
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.blockquote-footer, // deprecated in OUDS Web v1.6
+blockquote + figcaption {
+  margin-top: -$ouds-space-fixed-medium;
+  margin-bottom: $ouds-space-fixed-medium;
+  @include get-font-size("body-small");
+  color: var(--#{$prefix}color-content-muted);
+
+  &::before {
+    content: "\2014\00A0"; // em dash, nbsp
+  }
 }
 
 // OUDS mod: No italic
@@ -397,7 +418,6 @@ pre {
   margin-bottom: $ouds-space-fixed-medium; // 2 // OUDS mod: instead of `1rem`
   overflow: auto; // 3
   @include get-font-size("code-medium"); // OUDS mod: instead of `font-size: $code-font-size`
-  color: $pre-color;
 
   // Account for some code outputs that place code tags in pre tags
   code {
@@ -411,7 +431,6 @@ var, // OUDS mod
 code {
   font-size: $code-font-size;
   font-style: normal; // OUDS mod: <var> is italic in all browsers
-  color: var(--#{$prefix}color-content-muted);
   word-wrap: break-word;
 }
 

scss/_type.scss → scss/_typography.scss

@@ -25,6 +25,18 @@
   @extend h6;
 }
 
+@if ($ouds-typography-heading-large-marker and $ouds-heading-large-marker-img) {
+  .h2.marker::after,
+  h2.marker::after, // stylelint-disable-line selector-no-qualifying-type
+  .fs-hl.marker::after { // TODO not sure of this one because `.fs-hl` is not completely an equivalent of h2 (it is not bold)
+    display: block;
+    width: $ouds-heading-large-marker-width;
+    height: $ouds-heading-large-marker-height;
+    content: "";
+    background-color: $ouds-typography-color-content-marker;
+    mask-image: #{escape-svg($ouds-heading-large-marker-img)};
+  }
+}
 
 .lead {
   @include get-font-size("body-large"); // OUDS mod: instead of `font-size: $lead-font-size`
@@ -78,29 +90,3 @@
 // Misc
 //
 
-// Builds on `abbr`
-// OUDS mod: no .initialism
-
-// Blockquotes
-.blockquote {
-  margin-bottom: $blockquote-margin-y;
-
-  > p {
-    @include get-font-size("body-large"); // OUDS mod: instead of `font-size: $blockquote-font-size` in `.blockquote`
-  }
-
-  > :last-child {
-    margin-bottom: 0;
-  }
-}
-
-.blockquote-footer {
-  margin-top: -$blockquote-margin-y;
-  margin-bottom: $blockquote-margin-y;
-  @include get-font-size("body-small"); // OUDS mod: instead of `font-size: $blockquote-footer-font-size`
-  color: $blockquote-footer-color;
-
-  &::before {
-    content: "\2014\00A0"; // em dash, nbsp
-  }
-}

scss/_variables.scss

@@ -747,11 +747,6 @@ $text-muted:                  var(--#{$prefix}secondary-color) !default; // Depr
 
 // OUDS mod: no $initialism-font-size
 
-$blockquote-margin-y:         $ouds-space-fixed-medium !default; // OUDS mod: instead of `1rem`
-// OUDS mod: no `$blockquote-font-size`
-$blockquote-footer-color:     var(--#{$prefix}color-content-muted) !default; // OUDS mod: instead of `$gray-600`
-// OUDS mod: no `$blockquote-footer-font-size`
-
 $hr-margin-y:                 $ouds-space-fixed-medium !default; // OUDS mod: instead of `$spacer !default;`
 $hr-color:                    $ouds-color-border-default !default; // OUDS mod: instead of `inherit !default;`
 
@@ -1930,8 +1925,6 @@ $kbd-font-size:                     $code-font-size !default;
 $kbd-color:                         var(--#{$prefix}color-content-inverse) !default; // OUDS mod: instead of `var(--#{$prefix}body-bg)`
 $kbd-bg:                            var(--#{$prefix}color-surface-inverse-high) !default; // OUDS mod: instead of `var(--#{$prefix}body-color)`
 $nested-kbd-font-weight:            null !default; // Deprecated in Bootstrap v5.2.0, removing in v6
-
-$pre-color:                         var(--#{$prefix}color-content-muted) !default; // instead of `null`
 // End mod
 
 //

scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css

@@ -1238,9 +1238,38 @@ dd {
   margin-left: 0;
 }
 
+.blockquote,
 blockquote {
   margin: 0 0 16px;
 }
+.blockquote > p,
+blockquote > p {
+  max-width: var(--bs-font-max-width-body-large);
+  font-size: var(--bs-font-size-body-large);
+  line-height: var(--bs-font-line-height-body-large);
+  /* rtl:remove */
+  letter-spacing: var(--bs-font-letter-spacing-body-large);
+}
+.blockquote > :last-child,
+blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.blockquote-footer,
+blockquote + figcaption {
+  margin-top: -16px;
+  margin-bottom: 16px;
+  max-width: var(--bs-font-max-width-body-small);
+  font-size: var(--bs-font-size-body-small);
+  line-height: var(--bs-font-line-height-body-small);
+  /* rtl:remove */
+  letter-spacing: var(--bs-font-letter-spacing-body-small);
+  color: var(--bs-color-content-muted);
+}
+.blockquote-footer::before,
+blockquote + figcaption::before {
+  content: "— ";
+}
 
 i,
 em,
@@ -1341,7 +1370,6 @@ pre {
   line-height: var(--bs-font-line-height-code-medium);
   /* rtl:remove */
   letter-spacing: var(--bs-font-letter-spacing-code-medium);
-  color: var(--bs-color-content-muted);
 }
 pre code {
   font-size: inherit;
@@ -1353,7 +1381,6 @@ var,
 code {
   font-size: 0.875em;
   font-style: normal;
-  color: var(--bs-color-content-muted);
   word-wrap: break-word;
 }
 
@@ -1600,6 +1627,18 @@ dialog,
   opacity: 0.5;
 }
 
+.h2.marker::after,
+h2.marker::after,
+.fs-hl.marker::after {
+  display: block;
+  width: 30px;
+  height: 12px;
+  content: "";
+  background-color: var(--bs-color-content-brand-primary);
+  -webkit-mask-image: url("data:image/svg+xml,%3csvg width='30' height='12' viewBox='0 0 30 12' xmlns='http://www.w3.org/2000/svg'%3e%3crect y='4' width='30' height='6'/%3e%3c/svg%3e");
+  mask-image: url("data:image/svg+xml,%3csvg width='30' height='12' viewBox='0 0 30 12' xmlns='http://www.w3.org/2000/svg'%3e%3crect y='4' width='30' height='6'/%3e%3c/svg%3e");
+}
+
 .lead {
   max-width: var(--bs-font-max-width-body-large);
   font-size: var(--bs-font-size-body-large);
@@ -1711,34 +1750,6 @@ dialog,
   margin-right: 0.25rem;
 }
 
-.blockquote {
-  margin-bottom: 16px;
-}
-.blockquote > p {
-  max-width: var(--bs-font-max-width-body-large);
-  font-size: var(--bs-font-size-body-large);
-  line-height: var(--bs-font-line-height-body-large);
-  /* rtl:remove */
-  letter-spacing: var(--bs-font-letter-spacing-body-large);
-}
-.blockquote > :last-child {
-  margin-bottom: 0;
-}
-
-.blockquote-footer {
-  margin-top: -16px;
-  margin-bottom: 16px;
-  max-width: var(--bs-font-max-width-body-small);
-  font-size: var(--bs-font-size-body-small);
-  line-height: var(--bs-font-line-height-body-small);
-  /* rtl:remove */
-  letter-spacing: var(--bs-font-letter-spacing-body-small);
-  color: var(--bs-color-content-muted);
-}
-.blockquote-footer::before {
-  content: "— ";
-}
-
 .img-fluid {
   max-width: 100%;
   height: auto;