Use new typography tokens

kadena-community · Dec 4, 2023 · 6d30efa · 6d30efa
1 parent f506e2e
commit 6d30efa
Show file tree

Hide file tree

Showing 23 changed files with 214 additions and 363 deletions.
diff --git a/.changeset/two-donkeys-smash.md b/.changeset/two-donkeys-smash.md
@@ -0,0 +1,6 @@
+---
+'@kadena/react-ui': patch
+'@kadena/docs': patch
+---
+
+Update `Text` and `Heading` components to use new design tokens
diff --git a/packages/apps/docs/src/components/LastModifiedDate/LastModifiedDate.tsx b/packages/apps/docs/src/components/LastModifiedDate/LastModifiedDate.tsx
@@ -14,7 +14,7 @@ export const LastModifiedDate: FC<IProps> = ({ date }) => {
   const dateString = formatISODate(date);
   return (
     <Stack justifyContent="flex-end">
-      <Text size="sm">
+      <Text variant="smallest">
         Last updated <time dateTime={dateString}>{dateString}</time>
       </Text>
     </Stack>

diff --git a/packages/apps/docs/src/components/Layout/components/Footer/FooterLink.tsx b/packages/apps/docs/src/components/Layout/components/Footer/FooterLink.tsx
@@ -16,7 +16,7 @@ export const FooterLink: FC<IProps> = React.forwardRef<
   const isInnerLink = href.includes('http');
 
   return (
-    <Text size="md" bold={false}>
+    <Text variant="small" bold={false}>
       {isInnerLink ? (
         <a ref={ref} href={href} className={linkClass}>
           {children}

diff --git a/packages/apps/docs/src/components/Layout/components/Footer/FooterText.tsx b/packages/apps/docs/src/components/Layout/components/Footer/FooterText.tsx
@@ -9,7 +9,7 @@ interface IProps {
 
 export const FooterText: FC<IProps> = ({ children }) => {
   return (
-    <Text size="md" bold={false}>
+    <Text variant="small" bold={false}>
       <span className={textClass}>{children}</span>
     </Text>
   );

diff --git a/packages/apps/docs/src/components/Markdown/Figure/Figure.tsx b/packages/apps/docs/src/components/Markdown/Figure/Figure.tsx
@@ -33,7 +33,7 @@ export const Figure: FC<IProps> = ({ alt, src }) => {
       />
       {alt ? (
         <figcaption className={figCaption}>
-          <Text size="sm" as="span">
+          <Text variant="smallest" as="span">
             {alt}
           </Text>
         </figcaption>

diff --git a/packages/apps/docs/src/components/Search/components/ResultCount.tsx b/packages/apps/docs/src/components/Search/components/ResultCount.tsx
@@ -9,7 +9,7 @@ interface IProps {
 export const ResultCount: FC<IProps> = ({ count }) => {
   if (typeof count !== 'number') return null;
   return (
-    <Text size="md">
+    <Text variant="small">
       {count} Documentation items related to your search term found in this
       space.
     </Text>

diff --git a/packages/apps/docs/src/components/Search/components/StaticResults.tsx b/packages/apps/docs/src/components/Search/components/StaticResults.tsx
@@ -32,7 +32,7 @@ const ItemBreadCrumb: FC<IBreadCrumbProps> = ({ url }) => {
     <>
       {urlArray.map((str, idx) => {
         return (
-          <Text size="sm" bold={idx === 0} key={str + idx}>
+          <Text variant="smallest" bold={idx === 0} key={str + idx}>
             {removeHashFromString(str)} {idx < urlArray.length - 1 ? ' / ' : ''}
           </Text>
         );

diff --git a/packages/apps/tools/src/components/Global/FormItemCard/FormItemCard.tsx b/packages/apps/tools/src/components/Global/FormItemCard/FormItemCard.tsx
@@ -47,7 +47,7 @@ export const FormItemCard: FC<IFormItemCardProps> = ({
           </GridItem>
           <GridItem>
             <div className={helperStyle}>
-              <Text size="sm">
+              <Text variant="smallest">
                 {helperHref ? (
                   <Link className={helperTextIconStyle} href={helperHref}>
                     <span>{helper}</span>

diff --git a/packages/apps/tools/src/components/Global/HoverTag/HoverTag.tsx b/packages/apps/tools/src/components/Global/HoverTag/HoverTag.tsx
@@ -29,7 +29,7 @@ export const HoverTag = ({
       <span data-testid="kda-hover-tag">
         <Tag>
           <div className={containerClass}>
-            <Text variant="code">{tagValue}</Text>
+            <Text as="code">{tagValue}</Text>
             {Icon ? (
               <button
                 className={iconButtonClass}

diff --git a/packages/apps/tools/src/components/Global/OptionsModal/OptionsModal.tsx b/packages/apps/tools/src/components/Global/OptionsModal/OptionsModal.tsx
@@ -99,7 +99,7 @@ export const OptionsModal: FC<IOptionsModalProps> = (props) => {
                       <Text as="span">{value.title}</Text>
                       {value.tag !== undefined ? <Tag>{value.tag}</Tag> : null}
                     </div>
-                    <Text as="p" size="sm">
+                    <Text as="p" variant="smallest">
                       {value.text}
                     </Text>
                   </Stack>

diff --git a/packages/libs/react-ui/design-sync.config.ts b/packages/libs/react-ui/design-sync.config.ts
@@ -11,8 +11,10 @@ const breakpoints = {
 };
 
 const breakpointKeys = Object.keys(breakpoints);
+const fontOverride = () => "'Haas Grotesk Display', -apple-system, sans-serif";
 
 export default defineConfig({
+  // you can switch to different branch by changing the #main to #branch-name
   uri: 'github:kadena-community/design-system/tokens#main',
   out: 'src/styles/tokens',
   defaultMode: 'light',
@@ -32,5 +34,11 @@ export default defineConfig({
         breakpointKeys.some((key) => path.endsWith(key)),
     }),
   ],
+  // TODO: Workaround different font names in figma and google fonts
+  overrides: {
+    'kda.foundation.typography.family.bodyFont': fontOverride,
+    'kda.foundation.typography.family.primaryFont': fontOverride,
+    'kda.foundation.typography.family.headingFont': fontOverride,
+  },
   prettify: true,
 });
diff --git a/packages/libs/react-ui/package.json b/packages/libs/react-ui/package.json
@@ -60,8 +60,8 @@
     "react-stately": "^3.28.0"
   },
   "devDependencies": {
-    "@design-sync/cli": "^0.8.1",
-    "@design-sync/vanilla-extract-plugin": "^0.4.0",
+    "@design-sync/cli": "^0.9.1",
+    "@design-sync/vanilla-extract-plugin": "^0.4.2",
     "@etchteam/storybook-addon-status": "^4.2.4",
     "@kadena-dev/eslint-config": "workspace:*",
     "@kadena-dev/lint-package": "workspace:*",

diff --git a/packages/libs/react-ui/src/components/Typography/Heading/Heading.css.ts b/packages/libs/react-ui/src/components/Typography/Heading/Heading.css.ts
diff --git a/packages/libs/react-ui/src/components/Typography/Heading/Heading.stories.tsx b/packages/libs/react-ui/src/components/Typography/Heading/Heading.stories.tsx
@@ -1,12 +1,7 @@
-import { Heading } from '@components/Typography/Heading/Heading';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import {
-  colorVariants,
-  fontVariants,
-  transformVariants,
-} from '../typography.css';
-import { boldVariants, elementVariants } from './Heading.css';
+import { colorVariants, transformVariants } from '../typography.css';
+import { HEADING_ELEMENTS, Heading } from './Heading';
 
 const meta: Meta<typeof Heading> = {
   title: 'Typography/Heading',
@@ -21,18 +16,15 @@ const meta: Meta<typeof Heading> = {
       control: { type: 'text' },
     },
     as: {
+      options: HEADING_ELEMENTS,
       control: { type: 'select' },
     },
     variant: {
-      options: Object.keys(elementVariants) as (keyof typeof elementVariants)[],
+      options: HEADING_ELEMENTS,
       control: { type: 'select' },
     },
-    font: {
-      options: Object.keys(fontVariants) as (keyof typeof fontVariants)[],
-      control: { type: 'radio' },
-    },
     bold: {
-      options: Object.keys(boldVariants) as (keyof typeof boldVariants)[],
+      options: HEADING_ELEMENTS,
       control: { type: 'boolean' },
     },
     color: {
@@ -54,19 +46,17 @@ type Story = StoryObj<typeof Heading>;
 export const Primary: Story = {
   name: 'Heading',
   args: {
-    children: 'heading',
     as: 'h1',
+    children: 'heading',
     variant: undefined,
-    font: undefined,
     bold: undefined,
     color: undefined,
     transform: undefined,
   },
-  render: ({ font, bold, as, variant, transform, children, color }) => (
+  render: ({ as, bold, variant, transform, children, color }) => (
     <Heading
       as={as}
       variant={variant}
-      font={font}
       bold={bold}
       color={color}
       transform={transform}