feat(ui): Skeleton component and responsive typography (#1978)

* feat(ui): add Skeleton component

* feat(ui): implement responsive typography

* feat(ui): add `bodyTechnical` text style

* chore: changeset

.changeset/great-buckets-run.md

@@ -0,0 +1,7 @@
+---
+'@penumbra-zone/ui': minor
+---
+
+- Make Typography font sizes responsive
+- Add `bodyTechnical` Text variant
+- Add Skeleton component

packages/ui/.storybook/preview.tsx

@@ -1,12 +1,12 @@
 import type { Preview } from '@storybook/react';
 import penumbraTheme from './penumbra-theme';
 import { useState } from 'react';
-import { ConditionalWrap } from '../src/ConditionalWrap';
 import { Density } from '../src/Density';
 import { Tabs } from '../src/Tabs';
 
 import './tailwind.css';
 import '../src/theme/fonts.css';
+import '../src/theme/font-sizes.css';
 import '../src/theme/globals.css';
 
 /**

packages/ui/src/Skeleton/index.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Skeleton } from '.';
+import { Text } from '../Text';
+
+const meta: Meta<typeof Skeleton> = {
+  component: Skeleton,
+  tags: ['autodocs', '!dev'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Skeleton>;
+
+export const Basic: Story = {
+  args: {},
+  render: function Render(props) {
+    return (
+      <>
+        <Text color='text.primary'>Resize me</Text>
+        <div className='h-20 w-60 resize overflow-auto'>
+          <Skeleton {...props} />
+        </div>
+      </>
+    );
+  },
+};

packages/ui/src/Skeleton/index.tsx

@@ -0,0 +1,24 @@
+import type { ElementType } from 'react';
+import cn from 'clsx';
+
+export interface SkeletonProps {
+  as?: ElementType;
+  circular?: boolean;
+}
+
+/**
+ * Shimmering skeleton loader. By default, takes the full space of its parent.
+ */
+export const Skeleton = ({ as: Component = 'div', circular }: SkeletonProps) => {
+  return (
+    <Component
+      className={cn(
+        'relative w-full h-full bg-other-tonalFill5 overflow-hidden',
+        'before:content-[""] before:w-full before:h-full before:absolute before:top-1/2 before:left-1/2',
+        'before:animate-shimmer before:-translate-x-1/2 before:-translate-y-1/2',
+        'before:bg-gradient-to-r before:from-transparent before:via-other-tonalFill5 before:to-transparent',
+        circular ? 'rounded-full' : 'rounded-xs',
+      )}
+    />
+  );
+};

packages/ui/src/Text/index.tsx

@@ -2,6 +2,7 @@ import cn from 'clsx';
 
 import {
   body,
+  bodyTechnical,
   detail,
   h1,
   h2,
@@ -10,7 +11,7 @@ import {
   large,
   small,
   detailTechnical,
-  strong,
+  bodyStrong,
   technical,
   xxl,
   p,
@@ -134,13 +135,14 @@ const VARIANT_MAP: Record<TextVariant, { element: ElementType; classes: string }
   xxl: { element: 'span', classes: xxl },
   large: { element: 'span', classes: large },
   p: { element: 'p', classes: p },
-  strong: { element: 'span', classes: strong },
+  strong: { element: 'span', classes: bodyStrong },
   detail: { element: 'span', classes: detail },
   xxs: { element: 'span', classes: xxs },
   small: { element: 'span', classes: small },
   detailTechnical: { element: 'span', classes: detailTechnical },
   technical: { element: 'span', classes: technical },
   body: { element: 'span', classes: body },
+  bodyTechnical: { element: 'span', classes: bodyTechnical },
   tableHeading: { element: 'span', classes: tableHeading },
   tableHeadingMedium: { element: 'span', classes: tableHeadingMedium },
   tableHeadingSmall: { element: 'span', classes: tableHeadingSmall },

packages/ui/src/Text/types.ts

@@ -13,6 +13,7 @@ export type TextVariant =
   | 'detailTechnical'
   | 'technical'
   | 'body'
+  | 'bodyTechnical'
   | 'tableHeading'
   | 'tableHeadingMedium'
   | 'tableHeadingSmall'

packages/ui/src/theme/font-sizes.css

@@ -0,0 +1,186 @@
+/*
+  In Penumbra UI, text styles are responsive. It is measured in `rem` and
+  differ from screen to screen. For example, the base text size is 0.875rem for mobile,
+  1rem for desktop, and 1.125rem for xl screens.
+
+  This helps fit more data on respective screens while keeping the text readable.
+*/
+
+/* MOBILE AND TABLET SCREENS*/
+
+.text-textXs {
+  font-size: 0.6875rem;
+  line-height: 1rem;
+}
+
+.text-textSm {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
+
+.text-textBase {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.text-textLg {
+  font-size: 1rem;
+  line-height: 1.75rem;
+}
+
+.text-textXl {
+  font-size: 1.125rem;
+  line-height: 2rem;
+}
+
+.text-text2xl {
+  font-size: 1.3125rem;
+  line-height: 2.25rem;
+}
+
+.text-text3xl {
+  font-size: 1.625rem;
+  line-height: 2.5rem;
+}
+
+.text-text4xl {
+  font-size: 2rem;
+  line-height: 2.75rem;
+}
+
+.text-text5xl {
+  font-size: 2.625rem;
+  line-height: 3.5rem;
+}
+
+.text-text6xl {
+  font-size: 3.25rem;
+  line-height: 4.25rem;
+}
+
+.text-text7xl {
+  font-size: 3.9375rem;
+  line-height: 5rem;
+}
+
+.text-text8xl {
+  font-size: 5.25rem;
+  line-height: 6.25rem;
+}
+
+.text-text9xl {
+  font-size: 7rem;
+  line-height: 8.25rem;
+}
+
+/* DESKTOP AND LARGE SCREENS */
+
+@screen desktop {
+  .text-textXs {
+    font-size: 0.75rem;
+  }
+
+  .text-textSm {
+    font-size: 0.875rem;
+  }
+
+  .text-textBase {
+    font-size: 1rem;
+  }
+
+  .text-textLg {
+    font-size: 1.125rem;
+  }
+
+  .text-textXl {
+    font-size: 1.25rem;
+  }
+
+  .text-text2xl {
+    font-size: 1.5rem;
+  }
+
+  .text-text3xl {
+    font-size: 1.875rem;
+  }
+
+  .text-text4xl {
+    font-size: 2.25rem;
+  }
+
+  .text-text5xl {
+    font-size: 3rem;
+  }
+
+  .text-text6xl {
+    font-size: 3.75rem;
+  }
+
+  .text-text7xl {
+    font-size: 4.5rem;
+  }
+
+  .text-text8xl {
+    font-size: 6rem;
+  }
+
+  .text-text9xl {
+    font-size: 8rem;
+  }
+}
+
+/* EXTRA LARGE SCREENS */
+
+@screen xl {
+  .text-textXs {
+    font-size: 0.875rem;
+  }
+
+  .text-textSm {
+    font-size: 1rem;
+  }
+
+  .text-textBase {
+    font-size: 1.125rem;
+  }
+
+  .text-textLg {
+    font-size: 1.25rem;
+  }
+
+  .text-textXl {
+    font-size: 1.375rem;
+  }
+
+  .text-text2xl {
+    font-size: 1.6875rem;
+  }
+
+  .text-text3xl {
+    font-size: 2.125rem;
+  }
+
+  .text-text4xl {
+    font-size: 2.5rem;
+  }
+
+  .text-text5xl {
+    font-size: 3.375rem;
+  }
+
+  .text-text6xl {
+    font-size: 4.25rem;
+  }
+
+  .text-text7xl {
+    font-size: 5.0625rem;
+  }
+
+  .text-text8xl {
+    font-size: 6.75rem;
+  }
+
+  .text-text9xl {
+    font-size: 9rem;
+  }
+}

packages/ui/src/theme/index.tsx

@@ -1,5 +1,6 @@
 /** This import of fonts.css creates the 'dist/styles.css' */
 import './fonts.css';
+import './font-sizes.css';
 import './globals.css';
 
 export { tailwindConfig, withPenumbra } from './tailwind-config';

packages/ui/src/theme/theme.ts

@@ -246,6 +246,7 @@ export const theme = {
     buttonDisabled: 'linear-gradient(0deg, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.8) 100%)',
     progressLoading:
       'linear-gradient(90deg,rgba(255, 255, 255, 0) 0%,#fff 50%,rgba(255, 255, 255, 0) 100%)',
+    shimmer: 'linear-gradient(90deg, rgba(250, 250, 250, 0.05) 0%, rgba(250, 250, 250, 0.10) 100%)',
   },
   font: {
     default: 'Poppins',
@@ -297,10 +298,15 @@ export const theme = {
       '0%': { left: '-20%' },
       '100%': { left: '100%' },
     },
+    shimmer: {
+      '0%': { left: '-50%' },
+      '100%': { left: '150%' },
+    },
   },
   animation: {
     scale: 'scale 0.15s ease-out',
     progress: 'progress 1s linear infinite',
+    shimmer: 'shimmer 2s infinite',
   },
 } as const;
 

packages/ui/src/utils/typography.ts

@@ -18,18 +18,22 @@ export const h3 = cn('font-heading text-text4xl font-medium leading-text4xl');
 
 export const h4 = cn('font-heading text-text3xl font-medium leading-text3xl');
 
+export const xxl = cn('font-default text-text2xl font-medium leading-text2xl');
+
 export const large = cn('font-default text-textLg font-medium leading-textLg');
 
 export const body = cn('font-default text-textBase font-normal leading-textBase');
 
-export const strong = cn('font-default text-textBase font-medium leading-textBase');
+export const bodyStrong = cn('font-default text-textBase font-medium leading-textBase');
+
+export const bodyTechnical = cn('font-mono text-textBase font-normal leading-textBase');
+
+export const small = cn('font-default text-textSm font-normal leading-textXs');
 
 export const detail = cn('font-default text-textXs font-medium leading-textXs');
 
 export const detailTechnical = cn('font-mono text-textXs font-normal leading-textXs');
 
-export const small = cn('font-default text-textSm font-normal leading-textXs');
-
 export const xxs = cn('font-default text-textXxs font-normal leading-textXxs');
 
 export const tab = cn('font-default text-textLg font-normal leading-textLg');
@@ -52,8 +56,6 @@ export const tableHeadingSmall = cn('font-default text-textXs font-medium leadin
 
 export const technical = cn('font-mono text-textBase font-medium leading-textBase');
 
-export const xxl = cn('font-default text-text2xl font-medium leading-text2xl');
-
 // equals to body with the bottom margin
 export const p = cn('font-default text-textBase font-normal leading-textBase mb-6 last:mb-0');