diff --git a/.changeset/violet-pears-draw.md b/.changeset/violet-pears-draw.md new file mode 100644 index 0000000000..de23f45793 --- /dev/null +++ b/.changeset/violet-pears-draw.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks": patch +--- + +Add predefined line-height to font size atomic classes (.fs-fine, .fs-caption, etc...) diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md index 5c514f17a7..a78242f46d 100755 --- a/MIGRATION_GUIDE.md +++ b/MIGRATION_GUIDE.md @@ -21,6 +21,7 @@ #### Typography - `.fs-category` removed +- Atomic classes now have a predefined line-height associated to them ### Components diff --git a/packages/stacks-classic/lib/atomic/typography.less b/packages/stacks-classic/lib/atomic/typography.less index a589f324a6..5dd8a2d91b 100644 --- a/packages/stacks-classic/lib/atomic/typography.less +++ b/packages/stacks-classic/lib/atomic/typography.less @@ -26,19 +26,58 @@ p { // $ TEXT SIZES // ---------------------------------------------------------------------------- // Declare font sizes -.fs-display4 { font-size: var(--fs-display4) !important; } -.fs-display3 { font-size: var(--fs-display3) !important; } -.fs-display2 { font-size: var(--fs-display2) !important; } -.fs-display1 { font-size: var(--fs-display1) !important; } -.fs-headline2 { font-size: var(--fs-headline2) !important; } -.fs-headline1 { font-size: var(--fs-headline1) !important; } -.fs-title { font-size: var(--fs-title) !important; } -.fs-subheading { font-size: var(--fs-subheading) !important; } -.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 { font-size: var(--fs-caption) !important; } -.fs-fine { font-size: var(--fs-fine) !important; } +.fs-display4 { + font-size: var(--fs-display4) !important; + line-height: 1.18; +} +.fs-display3 { + font-size: var(--fs-display3) !important; + line-height: 1.20; +} +.fs-display2 { + font-size: var(--fs-display2) !important; + line-height: 1.28; +} +.fs-display1 { + font-size: var(--fs-display1) !important; + line-height: 1.34; +} +.fs-headline2 { + font-size: var(--fs-headline2) !important; + line-height: 1.40; +} +.fs-headline1 { + font-size: var(--fs-headline1) !important; + line-height: 1.40; +} +.fs-title { + font-size: var(--fs-title) !important; + line-height: 1.40; +} +.fs-subheading { + font-size: var(--fs-subheading) !important; + line-height: 1.40; +} +.fs-body3 { + font-size: var(--fs-body3) !important; + line-height: 1.40; +} +.fs-body2 { + font-size: var(--fs-body2) !important; + line-height: 1.40; +} +.fs-body1 { + font-size: var(--fs-body1) !important; + line-height: 1.40; +} +.fs-caption { + font-size: var(--fs-caption) !important; + line-height: 1.40; +} +.fs-fine { + font-size: var(--fs-fine) !important; + line-height: 1.36; +} #stacks-internals #screen-sm({ .fs-display4 { font-size: calc(var(--fs-display4) * .43) !important; } // 43px diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-dark-muted.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-dark-muted.ico index 6157828c2a..187b0c8dbd 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-dark-muted.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-dark-muted.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:85fad68885ff5d8dd598016ba0b0411d904a12db41cfccf7c0ca7ddc3102afb8 -size 8094 +oid sha256:8b9f7085f2ca38c645a59e2c92b65984841c971b62da057807dae57b65be46dd +size 8153 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-dark-stacked.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-dark-stacked.ico index 6d0154f979..bed12065ac 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-dark-stacked.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-dark-stacked.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:47e635b6a6d07f7258c2ec23dc09c4e789a0510a7f1cbdca7b369220724968f1 -size 8238 +oid sha256:24a5503e96fa97540a6918dbaac167fc45f2e05154ee4d7d0f83f3a0ca0886c6 +size 8243 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-dark.ico index 950eabca87..2ff403b566 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:480f923f4579e941db6abd38744add51718c09d2bb2e2da821ae81093a6b45e2 -size 8042 +oid sha256:6e96751eee5599137d694fa29585bdeac9397f58b57c15559b2413c0a056fd65 +size 8036 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-dark-muted.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-dark-muted.ico index b5283412bf..6a794523a4 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-dark-muted.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-dark-muted.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:186de9c1b1f3aa9c8d03ad622eb527ba547dd6f23b846e21b405bd272bde8319 -size 8207 +oid sha256:a927a963c340957959fa9cbcdd74c55ae0f19d493446a3156862fe16fb1c9f4e +size 8213 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-dark-stacked.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-dark-stacked.ico index b2ed0d2f4e..3e70085754 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-dark-stacked.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-dark-stacked.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1b2a98d5421a4ca38e5641bfa780070547f918a0192f9a51dc4b68f78e247509 -size 8361 +oid sha256:973ab7e47f66bb3588d82cf269f11e8fc0cac7eb30224a6baa169d11acf041c4 +size 8360 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-dark.ico index 2a6847610b..05a86b780f 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:35f1e1cdd3fc8d869c4d96a9af4ad8964725e542affbe4d35915cb37fd05bc18 -size 8173 +oid sha256:e903907e6a41b9b5c73ef237242e5567eaef4cb14010180a6231d0f4bb782890 +size 8165 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-light-muted.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-light-muted.ico index f612f19def..01413dcdd2 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-light-muted.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-light-muted.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:375708d126e4b679346b85327b1373f468e5a7190c4ecb4e51674100d86d8278 -size 8412 +oid sha256:5b8325effda4ba37ea7929a8647f0f58f408ea4ee7bf50ae89b4d06a97a6ac95 +size 8439 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-light-stacked.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-light-stacked.ico index 7ad21aac64..70ef516309 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-light-stacked.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-light-stacked.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5fefce7f58c20c081021c4cd89f854367dae5f1972b28d5bf7d51d82ceda4662 -size 8549 +oid sha256:4c107c92ed20ffdd097718079b0b4b35d877fda0e6d5f464fca6f3a04ec3002e +size 8548 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-light.ico index 689fc1584d..0deb471023 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ad45b7dd18bd2732592e701a62ca60e3066447a10bd32096536e6c55b1785202 -size 8345 +oid sha256:b899a224a14d4540c4a62d413b57ae439c854ced4449c7036dc272a632296dfc +size 8320 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-light-muted.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-light-muted.ico index 1a89426735..3824b60e23 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-light-muted.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-light-muted.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f0eaf04717c4575b3079db865430de9fec0b072404bf059dd1f733e9426f5d86 -size 8301 +oid sha256:ff18821002fabfeef7d6ce8981798e56f943635b93223a5e741d2a88f5eccbbe +size 8274 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-light-stacked.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-light-stacked.ico index 4a1d4f95cc..53ea988c94 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-light-stacked.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-light-stacked.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7d948481985c20bc589243e7ca5608634d0a44c4da57c967017c9fce4165c493 -size 8475 +oid sha256:f35ff196dbf6cd2dfb633afa86ecf387719c982093aa4087ea7d4787880914ad +size 8473 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-light.ico index b31b2eca1a..1745c5522b 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-card-light.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-card-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:238b5cae24256209d5c86fe3dae6f9e6f081571bca329d0b9b8742801b292c49 -size 8307 +oid sha256:b5a3dc6350e3e69dbf0207ec27b20db336cf82270bba6d9d8c242e900fa8659f +size 8277 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-dark-muted.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-dark-muted.ico index 262602cae1..94d771201a 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-dark-muted.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-dark-muted.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:69ca93775ea05239f3e87492277a88a918d66558193de09e6996cd664b4f8f2e -size 10782 +oid sha256:86c1defc10ce3ba3a46737ab86a55035d18d23d17a5bdcdb9028ea10b957f7cb +size 10745 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-dark-stacked.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-dark-stacked.ico index 7a11b492f4..06fea764dd 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-dark-stacked.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-dark-stacked.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:127d1c7745c475bda9a218934d3600a2d69bb875fa6f3ed00a8dc78ceade1c35 -size 10972 +oid sha256:be41190039f19fbad1c2f269d439e07f48e67481f95b1e41fc607250bc9105e4 +size 10923 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-dark.ico index ae94484898..f85d442d3a 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-dark.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:dc66883caa4cab7a9b881350b626aaa41bd72fb5e94f9bb3f9ae36e523683e58 -size 10840 +oid sha256:2324274fbca6f2c27ba515fff5ae60ecd6bb952205d920a3557ff2e75c4a343f +size 10786 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-dark-muted.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-dark-muted.ico index 93c9badbe2..b97689e1a0 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-dark-muted.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-dark-muted.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:98bfa3de010e0e430d4b392f7b608f92de913336e31b316526954c1285540124 -size 11031 +oid sha256:88fe4a1123b6d766e6a8c1974cf53413314d21986c87f60b04a88aa0d9d6900f +size 11074 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-dark-stacked.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-dark-stacked.ico index a7f61aca12..46e7a5ed30 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-dark-stacked.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-dark-stacked.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:96486bff49a5f52318906bb75613647e1b234d0815970fb668024613ab3f7922 -size 11268 +oid sha256:8f1ac8fa9e9e938a4c571a97f73d9775dee65729b6bd9199227a37a68f3ae71a +size 11247 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-dark.ico index 90a894175f..10e1e7ca30 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:38b3be65162434b90dabaf145bbb401fff00803295ee840b50cf32c810faa426 -size 11126 +oid sha256:202c0ed381f163dcebd38e83f746c9c479c33b8d0b5e6bae68fde546a19b9df0 +size 11096 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-light-muted.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-light-muted.ico index bf9c909fd3..d492a5c72c 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-light-muted.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-light-muted.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:dde910a8842316cc9097ec36fc3fbcc0d50f2bb833d613755d444121b2d1229c -size 11207 +oid sha256:32a203fe5edc17ee1c7c6febe6c38fbd0ce85d7fa79607ed93147a34ad706f1d +size 11167 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-light-stacked.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-light-stacked.ico index 48933fb525..a6140cd5c9 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-light-stacked.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-light-stacked.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9e6f0d4841005ef66a3dd2f968f903cfb1a494e55e48c2f0411899b0c0fb1c53 -size 11371 +oid sha256:9d2c41a20e09635588033ebacb31283c7065706253cdd4f05f538c6b28ff7a77 +size 11343 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-light.ico index e62615a194..434e19829e 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:358a0fd3705fff73de5851053a5fcfa410ba2d1e15b2a4aec900e2e9018914c8 -size 11231 +oid sha256:a422a6165230d8c876daa8059b8fb7b2dc25cb2c3e2a5a61dfc28d85b4ea09a9 +size 11198 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-light-muted.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-light-muted.ico index 41abe29139..e3192bfd12 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-light-muted.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-light-muted.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6d13d02c2580219f2b8359532270f55b1192fa45a617451e25c1e5429d757d27 -size 11107 +oid sha256:233889000f6de7cdfe0b08fa35210bfb00e95b2cb1fe90384e57a193c30d9c11 +size 11070 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-light-stacked.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-light-stacked.ico index 700eef54cf..7e0e18b972 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-light-stacked.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-light-stacked.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bc4a5c87889efff7597a1df0a856d302a34c7c6f592abb9e3cac0fb8b36bff2b -size 11314 +oid sha256:6e4608d5485aa5d594ff01bffc675d869407df264fd5a7a5420e25b21906dcf3 +size 11287 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-light.ico index 5633348ffb..1aa7623801 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-card-light.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-card-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a5b386f75ddf690a8f8c28f475285718efa14afd1a905e7ab3f6a317ccb786bc -size 11253 +oid sha256:e9812261c66774f64338b41145511a23ae746645411d117a620c6cd7c8f9a438 +size 11215 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-dark-muted.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-dark-muted.ico index 0d7a70d635..f1ce791a4f 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-dark-muted.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-dark-muted.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:598393d54dc4864deba63703be5aaa5dd0d9a9ce83f88504a4854d013cd57b48 -size 10310 +oid sha256:998d460351377fe9831c98bd7e3fdc896b4a8d0863dc546c4eee470295f24fb3 +size 10311 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-dark-stacked.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-dark-stacked.ico index ad2b142ae9..2b3573aaf4 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-dark-stacked.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-dark-stacked.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d9f83fca766d587775423ade8be4dabd8d9323376dc06f89e34d6e4b04a6944c -size 10473 +oid sha256:75ea9ad42d16e8d4ce0e7f081238e1b1687d413d509bd3558a512728b42ab19d +size 10471 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-dark.ico index d9b0c264cc..a7f4e3a361 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:68858aaa1dc901589ca61821bf1d2ee55fc6c7f7a7e77245bad2f5da83b50739 +oid sha256:99cfda022cc3a4785ced9f0521486e8c259ef0660dea161e71a583daa2012bff size 10171 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-dark-muted.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-dark-muted.ico index 706cc9c33d..35404c9342 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-dark-muted.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-dark-muted.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0cfb886049083e93be09fb7c86edbf5e0871cdbff19aa1f366c702f440a73bc9 +oid sha256:3579b44962ebb6c3d206c6eb124efecba9f0e0ce037cc9d021a31d262f0a83d0 size 10226 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-dark-stacked.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-dark-stacked.ico index dcfb2a7178..97d0c08cb1 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-dark-stacked.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-dark-stacked.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5f8bfb7cadbf092ee0fea9fc4771b1c8e6c4db02cf17833ab2d65d570a73eb49 +oid sha256:7bd22ad7710ceaecbbb65f41f7ac18de3148b702c06976f4076c0f22b8d5cde7 size 10467 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-dark.ico index fcca82e3e4..0263f8fbae 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:82eba8ffba08a5b88d65e9443b8fe08f8f79489af03198eee8b0aeb63e8d17d5 -size 10128 +oid sha256:e7f76d3c01de0d72fa97d5ac596b456b09bcccbc0d6fd7a906cc4193c7f1faee +size 10127 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-light-muted.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-light-muted.ico index 162dd4cc5e..3038f8e596 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-light-muted.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-light-muted.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4e22936813da3792c0644b3eb8513c16fbacb623f000147c6cfa84c08ce512bf +oid sha256:690a4ddabdac45705219f861f42abd75a750edd513e5b1bfb5137a5a6d234c92 size 10467 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-light-stacked.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-light-stacked.ico index ddb0747a9f..d3163125b7 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-light-stacked.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-light-stacked.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:173506525d16e0b1ab2b676f72ccad6352e7b6d15476fb4f0abf2f24586e9815 +oid sha256:19a4a2d28d8dda54ee3c50626879112a0fd61c3944c22969933115655e7bdcd9 size 10817 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-light.ico index ce8c1ef419..881122e391 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e1fb842531db103c3726061349f78339e7b101b33942de44deb5d192979da4dd +oid sha256:9dc6e1346c0f795319860e14b93c71a5ff41f63b98ea901bc30d3edab30c0618 size 10496 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-light-muted.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-light-muted.ico index 5788f24233..7d352ee126 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-light-muted.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-light-muted.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0f2dba793fdb1853ce6d1bd66f5da02765e7dd25485609fc4b89ada4e11d827c -size 10199 +oid sha256:d9bc086a09c5895696981d52d235fa26853f4f34fb5b7b5abfdfee77a389c757 +size 10200 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-light-stacked.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-light-stacked.ico index e6dc16c7c7..f6ce850e3c 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-light-stacked.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-light-stacked.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:43419e6d3cbbe9e305c7f09ac40ea02cae0e84949a9e40ee37f4e667319499bf +oid sha256:c929439ffff6b4ba38e28d99dea62c5e79bad5f5b16867aaae0bb05f8a76cc6b size 10738 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-light.ico index 9e9f5bbbf5..b7250c8ab8 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-card-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-card-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5a9ae8b2e20636b526c836fff7880238e3d49f90afcdb8ab914d48cd5cc0f3cc +oid sha256:10410f229f0032f0a01a72af44345fdb6e36e5894aba48639cdd0653c1f8f5fa size 10463 diff --git a/packages/stacks-docs/_data/typography.json b/packages/stacks-docs/_data/typography.json index a33f9b3778..aaa19eaa7f 100644 --- a/packages/stacks-docs/_data/typography.json +++ b/packages/stacks-docs/_data/typography.json @@ -4,78 +4,91 @@ "term": "fine", "define": "12px", "responsive": "12px", + "line-height": "1.36", "label": "Fine" }, { "term": "caption", "define": "13px", "responsive": "13px", + "line-height": "1.40", "label": "Caption" }, { "term": "body1", "define": "14px", "responsive": "14px", + "line-height": "1.40", "label": "Body 1" }, { "term": "body2", "define": "16px", "responsive": "15px", + "line-height": "1.40", "label": "Body 2" }, { "term": "body3", "define": "18px", "responsive": "16px", + "line-height": "1.40", "label": "Body 3" }, { "term": "subheading", "define": "20px", "responsive": "18px", + "line-height": "1.40", "label": "Subheading" }, { "term": "title", "define": "22px", "responsive": "20px", + "line-height": "1.40", "label": "Title" }, { "term": "headline1", "define": "28px", "responsive": "23px", + "line-height": "1.40", "label": "Headline 1" }, { "term": "headline2", "define": "36px", "responsive": "26px", + "line-height": "1.40", "label": "Headline 2" }, { "term": "display1", "define": "46px", "responsive": "29px", + "line-height": "1.34", "label": "Display 1" }, { "term": "display2", "define": "58px", "responsive": "34px", + "line-height": "1.28", "label": "Display 2" }, { "term": "display3", "define": "72px", "responsive": "37px", + "line-height": "1.20", "label": "Display 3" }, { "term": "display4", "define": "100px", "responsive": "43px", + "line-height": "1.18", "label": "Display 4" } ], diff --git a/packages/stacks-docs/product/foundation/typography.html b/packages/stacks-docs/product/foundation/typography.html index 8cc81f3064..8f97ad8751 100644 --- a/packages/stacks-docs/product/foundation/typography.html +++ b/packages/stacks-docs/product/foundation/typography.html @@ -174,6 +174,7 @@ Class Size + Line Height Responsive Size @@ -182,6 +183,7 @@ .fs-{{ term.term }} {{ term.define }} + {{ term.line-height }} {{ term.responsive }} {% endfor %} @@ -208,11 +210,10 @@ {% endhighlight %}
{% for term in typography.fontsize %} -
-
{{ term.label }}
-
- {{ term.define }} - {{ term.responsive }} +
+
{{ term.label }}
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
{% endfor %}