fix: align skeleton with text

abelflopes · Aug 14, 2024 · 93b4377 · 93b4377
1 parent 1ec6022
commit 93b4377
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 22 deletions.
diff --git a/packages/components/skeleton/src/styles/index.module.scss b/packages/components/skeleton/src/styles/index.module.scss
@@ -42,7 +42,12 @@
 }
 
 .text {
-  width: calc(100% - (25% * var(--index)));
+  position: relative;
+  top: 50%;
+  display: inline-block;
+  width: calc(50% - (25% * var(--index)));
   min-width: theme.get-spacing(4);
-  height: 1.2em;
+  height: 0.86em;
+  transform: translateY(0.35em);
+  vertical-align: top;
 }
diff --git a/packages/components/text/src/styles/_variables.scss b/packages/components/text/src/styles/_variables.scss
@@ -1,6 +1,19 @@
 @use "@react-ck/theme";
 @use "@react-ck/scss-utils";
 
+$font-sizes: (
+  banner: calc(#{scss-utils.get-css-var(font, base-size)} * 4.3),
+  h1: calc(#{scss-utils.get-css-var(font, base-size)} * 2.1),
+  h2: calc(#{scss-utils.get-css-var(font, base-size)} * 1.7),
+  h3: calc(#{scss-utils.get-css-var(font, base-size)} * 1.5),
+  h4: calc(#{scss-utils.get-css-var(font, base-size)} * 1.2),
+  h5: calc(#{scss-utils.get-css-var(font, base-size)} * 1.1),
+  h6: scss-utils.get-css-var(font, base-size),
+  p: scss-utils.get-css-var(font, base-size),
+  small: calc(#{scss-utils.get-css-var(font, base-size)} * 0.8),
+  extra-small: calc(#{scss-utils.get-css-var(font, base-size)} * 0.7),
+);
+
 // TODO: add values to theme
 
 $text-skins: (
@@ -55,82 +68,82 @@ $text-skins: (
 $text-variations: (
   banner: (
     default: (
-      font-size: calc(#{scss-utils.get-css-var(font, base-size)} * 4.3),
+      font-size: calc(#{scss-utils.map-get-strict($font-sizes, banner)}),
+      line-height: calc(#{scss-utils.map-get-strict($font-sizes, banner)} * 1.4),
       font-weight: 700,
-      line-height: 60px,
     ),
     hover: (),
   ),
   h1: (
     default: (
-      font-size: calc(#{scss-utils.get-css-var(font, base-size)} * 2.1),
+      font-size: calc(#{scss-utils.map-get-strict($font-sizes, h1)}),
+      line-height: calc(#{scss-utils.map-get-strict($font-sizes, h1)} * 1.6),
       font-weight: 600,
-      line-height: 36px,
     ),
     hover: (),
   ),
   h2: (
     default: (
-      font-size: calc(#{scss-utils.get-css-var(font, base-size)} * 1.7),
+      font-size: calc(#{scss-utils.map-get-strict($font-sizes, h2)}),
+      line-height: calc(#{scss-utils.map-get-strict($font-sizes, h2)} * 1.6),
       font-weight: 600,
-      line-height: 36px,
       color: theme.get-color(neutral-dark-4),
     ),
     hover: (),
   ),
   h3: (
     default: (
-      font-size: calc(#{scss-utils.get-css-var(font, base-size)} * 1.5),
+      font-size: calc(#{scss-utils.map-get-strict($font-sizes, h3)}),
+      line-height: calc(#{scss-utils.map-get-strict($font-sizes, h3)} * 1.6),
       font-weight: 600,
-      line-height: 24px,
     ),
     hover: (),
   ),
   h4: (
     default: (
-      font-size: calc(#{scss-utils.get-css-var(font, base-size)} * 1.2),
+      font-size: calc(#{scss-utils.map-get-strict($font-sizes, h4)}),
+      line-height: calc(#{scss-utils.map-get-strict($font-sizes, h4)} * 1.55),
       font-weight: 600,
-      line-height: 22px,
     ),
     hover: (),
   ),
   h5: (
     default: (
-      font-size: calc(#{scss-utils.get-css-var(font, base-size)} * 1.1),
+      font-size: calc(#{scss-utils.map-get-strict($font-sizes, h5)}),
+      line-height: calc(#{scss-utils.map-get-strict($font-sizes, h5)} * 1.5),
       font-weight: 600,
-      line-height: 20px,
     ),
     hover: (),
   ),
   h6: (
     default: (
-      font-size: scss-utils.get-css-var(font, base-size),
+      font-size: calc(#{scss-utils.map-get-strict($font-sizes, h6)}),
+      line-height: calc(#{scss-utils.map-get-strict($font-sizes, h6)} * 1.5),
       font-weight: 600,
-      line-height: 18px,
     ),
     hover: (),
   ),
   p: (
     default: (
-      font-size: scss-utils.get-css-var(font, base-size),
-      line-height: 24px,
+      font-size: calc(#{scss-utils.map-get-strict($font-sizes, p)}),
+      line-height: calc(#{scss-utils.map-get-strict($font-sizes, p)} * 1.5),
       font-weight: 400,
     ),
     hover: (),
   ),
   small: (
     default: (
-      font-size: calc(#{scss-utils.get-css-var(font, base-size)} * 0.8),
+      font-size: calc(#{scss-utils.map-get-strict($font-sizes, small)}),
+      line-height: calc(#{scss-utils.map-get-strict($font-sizes, small)} * 1.5),
       font-weight: 400,
-      line-height: 18px,
     ),
     hover: (),
   ),
   extra-small: (
     default: (
-      font-size: calc(#{scss-utils.get-css-var(font, base-size)} * 0.7),
+      font-size: calc(#{scss-utils.map-get-strict($font-sizes, extra-small)}),
+      line-height: calc(#{scss-utils.map-get-strict($font-sizes, extra-small)} * 1.5),
       font-weight: 400,
-      line-height: 16px,
     ),
     hover: (),
   ),

diff --git a/packages/docs/stories/src/test-skeleton.stories.tsx b/packages/docs/stories/src/test-skeleton.stories.tsx
@@ -6,6 +6,7 @@ import { Grid } from "@react-ck/grid/src";
 import { Skeleton } from "@react-ck/skeleton/src";
 import { Text, type TextProps } from "@react-ck/text/src";
 import { capitalCase } from "change-case";
+import { faker } from "@faker-js/faker";
 
 type Story = StoryObj<unknown>;
 
@@ -49,6 +50,7 @@ export const demo: Story = {
               <Text {...i.combination}>
                 {capitalCase(i.combination.variation ?? "-")}
                 <Skeleton variation="text" />
+                {faker.lorem.sentence()}
               </Text>
             </div>
           </Grid.Column>