chore(typography): update typography to SHINE styles (#2028)

* chore(typography): update type sizes; rm .fs-category

* add changeset

* Update font weight classes

* Address review

* build(deps-dev): bump stylelint from 16.24.0 to 16.25.0 (#2032)

Bumps [stylelint](https://github.com/stylelint/stylelint) from 16.24.0 to 16.25.0.
- [Release notes](https://github.com/stylelint/stylelint/releases)
- [Changelog](https://github.com/stylelint/stylelint/blob/main/CHANGELOG.md)
- [Commits](stylelint/stylelint@16.24.0...16.25.0)

---
updated-dependencies:
- dependency-name: stylelint
  dependency-version: 16.25.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Fix prettier-induced semicolon psychosis

* Update responsive type sizes

* Update visual regression images

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: dancormier

.changeset/giant-suns-look.md

@@ -83,7 +83,7 @@
         "sass": "^1.93.2",
         "sinon": "^20.0.0",
         "storybook": "^9.1.5",
-        "stylelint": "^16.21.1",
+        "stylelint": "^16.25.0",
         "stylelint-config-recommended": "^16.0.0",
         "stylelint-config-standard": "^38.0.0",
         "svelte": "^5.39.11",

MIGRATION_GUIDE.md

@@ -37,36 +37,22 @@ p {
 .fs-body3 { font-size: var(--fs-body3) !important; }
 .fs-body2 { font-size: var(--fs-body2) !important; }
 .fs-body1 { font-size: var(--fs-body1) !important; }
-
-.fs-caption,
-.fs-category { font-size: var(--fs-caption) !important; }
+.fs-caption { font-size: var(--fs-caption) !important; }
 .fs-fine { font-size: var(--fs-fine) !important; }
 
 #stacks-internals #screen-sm({
-    .fs-display4 { font-size: 3.8rem !important; }
-    .fs-display3 { font-size: 3.3rem !important; }
-    .fs-display2 { font-size: 3rem !important; }
-    .fs-display1 { font-size: 2.6rem !important; }
-    .fs-headline2 { font-size: 2.3rem !important; }
-    .fs-headline1 { font-size: 2rem !important; }
-    .fs-title { font-size: 1.8rem !important; }
-    .fs-subheading { font-size: 1.6rem !important; }
-    .fs-body3 { font-size: 1.4rem !important; }
-    .fs-body2 { font-size: 1.3rem !important; }
+    .fs-display4 { font-size: calc(var(--fs-display4) * .43) !important; } // 43px
+    .fs-display3 { font-size: calc(var(--fs-display3) * .5139) !important; } // ~37px
+    .fs-display2 { font-size: calc(var(--fs-display2) * .5862) !important; } // ~34px
+    .fs-display1 { font-size: calc(var(--fs-display1) * .6304) !important; }  // ~29px
+    .fs-headline2 { font-size: calc(var(--fs-headline2) * .7224) !important; } // ~26px
+    .fs-headline1 { font-size: calc(var(--fs-headline1) * .8215) !important; } // ~23px
+    .fs-title { font-size: calc(var(--fs-title) * .9094) !important; } // ~20px
+    .fs-subheading { font-size: calc(var(--fs-subheading) * .8998) !important; } // ~18px
+    .fs-body3 { font-size: calc(var(--fs-body3) * .8888) !important; } // ~16px
+    .fs-body2 { font-size: calc(var(--fs-body2) * .9374) !important; } // ~15px
 }, @force-selector: true);
 
-.fs-category {
-    font-weight: 700;
-    text-transform: uppercase;
-
-    // If a top border is desired
-    &.has-border {
-        width: 100%;
-        padding: var(--su4) 0;
-        border-top: var(--su-static1) solid var(--bc-medium);
-    }
-}
-
 //  ============================================================================
 //  $   LINE HEIGHTS
 //  ----------------------------------------------------------------------------
@@ -89,7 +75,8 @@ p {
 
 //  --  Font Weight
 .fw-normal { font-weight: 400 !important; }
-.fw-bold { font-weight: 700 !important; }
+.fw-medium { font-weight: 500 !important; }
+.fw-bold { font-weight: 600 !important; }
 
 //  --  Font Styles
 .fs-normal { font-style: normal !important; }

package-lock.json

@@ -24,13 +24,6 @@ body {
     line-height: var(--lh-base);
 }
 
-#stacks-internals #screen-sm({
-    &,
-    body {
-        font-size: 11px;
-    }
-}, @force-selector: true);
-
 body {
     box-sizing: border-box;
     min-height: 100%;
@@ -41,4 +34,6 @@ body {
     *:after {
         box-sizing: inherit;
     }
+
+    // TODO SHINE set max width here
 }

package.json

@@ -99,44 +99,44 @@ body {
     //  $   FONT SIZES (fs-)
     //      Base font-size is 13px.
     //  ----------------------------------------------------------------------------
-    --fs-fine:           11px;
-    --fs-caption:        12px;
-    --fs-body1:          13px;
+    --fs-fine:           12px;
+    --fs-caption:        13px;
+    --fs-body1:          14px;
 
     //  Relative to the root element
-    --fs-body2:               1.153846154rem;
-    --fs-body3:               1.307692308rem;
-    --fs-subheading:          1.461538462rem;
-    --fs-title:               1.615384615rem;
-    --fs-headline1:           2.076923077rem;
-    --fs-headline2:           2.615384615rem;
-    --fs-display1:            3.307692308rem;
-    --fs-display2:            4.230769231rem;
-    --fs-display3:            5.307692308rem;
-    --fs-display4:            7.615384615rem;
+    --fs-body2:               1.143rem; // 16px
+    --fs-body3:               1.286rem; // 18px
+    --fs-subheading:          1.429rem; // 20px
+    --fs-title:               1.571rem; // 22px
+    --fs-headline1:           2rem;     // 28px
+    --fs-headline2:           2.571rem; // 36px
+    --fs-display1:            3.286rem; // 46px
+    --fs-display2:            4.143rem; // 58px
+    --fs-display3:            5.143rem; // 72px
+    --fs-display4:            7.143rem; // 100px
 
     //  Relative to the parent
-    --fs-body2-relative:      1.153846154em;
-    --fs-body3-relative:      1.307692308em;
-    --fs-subheading-relative: 1.461538462em;
-    --fs-title-relative:      1.615384615em;
-    --fs-headline1-relative:  2.076923077em;
-    --fs-headline2-relative:  2.615384615em;
-    --fs-display1-relative:   3.307692308em;
-    --fs-display2-relative:   4.230769231em;
-    --fs-display3-relative:   5.307692308em;
-    --fs-display4-relative:   7.615384615em;
+    --fs-body2-relative:      1.143rem; // 16px
+    --fs-body3-relative:      1.286rem; // 18px
+    --fs-subheading-relative: 1.429rem; // 20px
+    --fs-title-relative:      1.571rem; // 22px
+    --fs-headline1-relative:  2rem;     // 28px
+    --fs-headline2-relative:  2.571rem; // 36px
+    --fs-display1-relative:   3.286rem; // 46px
+    --fs-display2-relative:   4.143rem; // 58px
+    --fs-display3-relative:   5.143rem; // 72px
+    --fs-display4-relative:   7.143rem; // 100px
 
     // this value is not using spacing units because the calc involved results
     // in unexpected sizing. I'm not sure why, honestly.
-    --fs-base: 13px;
+    --fs-base: 14px;
 
     //  ============================================================================
     //  $   LINE HEIGHT (lh-)
     //  ----------------------------------------------------------------------------
     // Need to remove the unit off the font-size to make line-height unitless
     // FIXME this shouldn't be public. Find a way to use unitless `--fs-base`.
-    --stacks-internals-lh-unit: 13;
+    --stacks-internals-lh-unit: 14;
 
     // Now the various line-height variables
     --lh-xs:    1;

packages/stacks-classic/lib/atomic/typography.less

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bb28be2199a482952f93568a16bdf71c503cc2fa41934a183ff512f4530e1396
-size 1465
+oid sha256:568816f5c155ab3d198f81355a8c19e24c42f5117d8aeabf05a3e2dce85e86c4
+size 1545

packages/stacks-classic/lib/base/body.less

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:25c8ef4633eb10a66566d7cde9fcebe57a01a0f64f45dd73d6b95aee0cd7b974
-size 1322
+oid sha256:3e42fc0037eaf78a2c9057a902a23b19678a77a3d4ebb998d3428feeab198c57
+size 1445

packages/stacks-classic/lib/exports/constants-type.less

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1343d34f1abcd944a847c3ed7b76a0d63f3e772dc007419755a931551e423134
-size 1384
+oid sha256:4fafac0f688d8d9175803097f1b49fb6eb4772a76ff807fa97539be8b58e4ea7
+size 1474