Improve text sizing treatment

seek-oss · Sep 12, 2024 · 5800256 · 5800256
1 parent 365842e
commit 5800256
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/src/Playroom/Snippets/Snippets.css.ts b/src/Playroom/Snippets/Snippets.css.ts
@@ -47,6 +47,7 @@ export const snippetsContainer = style([
 export const snippet = style([
   sprinkles({
     position: 'relative',
+    display: 'block',
     cursor: 'pointer',
     paddingY: 'large',
     paddingX: 'xlarge',
@@ -57,7 +58,7 @@ export const snippet = style([
     color: colorPaletteVars.foreground.neutral,
     backgroundColor: colorPaletteVars.background.surface,
     '::before': {
-      content: '""',
+      content: '',
       position: 'absolute',
       top: 0,
       bottom: 0,

diff --git a/src/Playroom/Snippets/Snippets.tsx b/src/Playroom/Snippets/Snippets.tsx
@@ -5,10 +5,10 @@ import { useDebouncedCallback } from 'use-debounce';
 import type { PlayroomProps } from '../Playroom';
 import type { Snippet } from '../../../utils';
 import SearchField from './SearchField/SearchField';
-import { Strong } from '../Strong/Strong';
 import { Text } from '../Text/Text';
 
 import * as styles from './Snippets.css';
+import { Stack } from '../Stack/Stack';
 
 type HighlightIndex = number | null;
 type ReturnedSnippet = Snippet | null;
@@ -151,12 +151,14 @@ export default ({ snippets, onHighlight, onClose }: Props) => {
               onMouseDown={() => closeHandler(filteredSnippets[index])}
               title={getLabel(snippet)}
             >
-              <span style={{ display: 'block', position: 'relative' }}>
-                <Text size="large">
-                  <Strong>{snippet.group}</Strong>
-                  <span className={styles.snippetName}>{snippet.name}</span>
+              <Stack space="none">
+                <Text size="large" weight="strong">
+                  {snippet.group}
                 </Text>
-              </span>
+                <Text size="large" tone="secondary">
+                  {snippet.name}
+                </Text>
+              </Stack>
             </li>
           );
         })}

diff --git a/src/Playroom/Text/Text.css.ts b/src/Playroom/Text/Text.css.ts
@@ -13,6 +13,10 @@ export const critical = style({
   color: colorPaletteVars.foreground.critical,
 });
 
+export const secondary = style({
+  color: colorPaletteVars.foreground.secondary,
+});
+
 export const xsmall = sprinkles({
   font: 'xsmall',
 });

diff --git a/src/Playroom/Text/Text.tsx b/src/Playroom/Text/Text.tsx
@@ -6,7 +6,7 @@ import * as styles from './Text.css';
 interface Props {
   size?: 'xsmall' | 'small' | 'standard' | 'large';
   weight?: 'regular' | 'strong';
-  tone?: 'neutral' | 'critical';
+  tone?: 'neutral' | 'secondary' | 'critical';
   as?: ElementType;
   truncate?: boolean;
   children: ReactNode;

diff --git a/src/Playroom/vars.css.ts b/src/Playroom/vars.css.ts
@@ -11,7 +11,7 @@ export const vars = createGlobalTheme(':root', {
       xsmall: `normal 10px ${fontFamily}`,
       small: `normal 12px ${fontFamily}`,
       standard: `normal 14px ${fontFamily}`,
-      large: `normal 16px/1.3em ${fontFamily}`,
+      large: `normal 16px/20px ${fontFamily}`,
     },
     weight: {
       weak: '100',