feat(defaulttheme): import all figma design tokens into defaultTheme

chanzuckerberg · Feb 17, 2024 · 6c63b52 · 6c63b52
1 parent 00df2a2
commit 6c63b52
Show file tree

Hide file tree

Showing 14 changed files with 1,132 additions and 743 deletions.
diff --git a/packages/components/src/core/Accordion/style.ts b/packages/components/src/core/Accordion/style.ts
@@ -32,7 +32,7 @@ export const StyledAccordion = styled(Accordion, {
     return css`
       &.MuiAccordion-root {
         box-shadow: ${shadows?.none};
-        font-family: ${typography?.styles?.body?.s?.fontFamily};
+        font-family: ${typography?.fontFamily?.body};
         border-bottom: ${useDivider ? border?.gray[300] : "none"};
         height: fit-content;
 

diff --git a/packages/components/src/core/ButtonIcon/index.stories.tsx b/packages/components/src/core/ButtonIcon/index.stories.tsx
@@ -1,11 +1,11 @@
 import { Args, Meta } from "@storybook/react";
 import React from "react";
-import { defaultAppTheme } from "../styles";
 import RawButtonIcon from "./index";
 import { ButtonIconExtraProps, ButtonIconSizeToTypes } from "./style";
 import CustomSvgIcon from "src/common/customSvgIcon";
 import CustomSdsIcon from "src/common/customSdsIcon";
 import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { SDSAppTheme } from "../styles";
 
 type SDSTypes = NonNullable<
   | ButtonIconExtraProps<"small">["sdsType"]
@@ -107,7 +107,7 @@ export const Default = {
 // Live Preview
 
 const LivePreviewDemo = (): JSX.Element => {
-  const spacings = defaultAppTheme?.spacing;
+  const spacings = SDSAppTheme?.spacing;
 
   const livePreviewStyles: React.CSSProperties = {
     alignItems: "center",

diff --git a/packages/components/src/core/Foundations/index.stories.tsx b/packages/components/src/core/Foundations/index.stories.tsx
@@ -1,8 +1,14 @@
 import { Args, Meta } from "@storybook/react";
 import { BADGE } from "../../common/SDSBadges";
+import { StyledDiv, StyledSpan } from "./style";
 
 const DesignTokens = (props: Args): JSX.Element => {
-  return <p {...props}>Design Tokens go here</p>;
+  return (
+    <StyledDiv {...props}>
+      <span>Design Tokens go here</span>
+      <StyledSpan>12343430032</StyledSpan>
+    </StyledDiv>
+  );
 };
 
 export default {

diff --git a/packages/components/src/core/Foundations/style.ts b/packages/components/src/core/Foundations/style.ts
@@ -0,0 +1,39 @@
+import { styled } from "@mui/material";
+import {
+  fontCodeXs,
+  fontTabularXs,
+  getCorners,
+  getPalette,
+  getSpaces,
+} from "../styles";
+
+export const StyledDiv = styled("div")`
+  ${fontCodeXs};
+
+  ${(props) => {
+    const palette = getPalette(props);
+    const spaces = getSpaces(props);
+    const corners = getCorners(props);
+
+    return `
+      display: flex;
+      justify-content: space-between;
+      background-color: ${palette?.component?.notice?.fill};
+      color: ${palette?.component?.notice?.fillOnFill};
+      padding: ${spaces?.s}px;
+      border-radius: ${corners?.m}px;
+
+      &:hover {
+        background-color: ${palette?.component?.notice?.fillHover};
+      }
+
+      &:active {
+        background-color: ${palette?.component?.notice?.fillPressed};
+      }
+    `;
+  }};
+`;
+
+export const StyledSpan = styled("span")`
+  ${fontTabularXs};
+`;
diff --git a/packages/components/src/core/LoadingIndicator/index.stories.tsx b/packages/components/src/core/LoadingIndicator/index.stories.tsx
@@ -1,6 +1,6 @@
 import { Args, Meta } from "@storybook/react";
 import React from "react";
-import { defaultAppTheme } from "../styles";
+import { SDSAppTheme } from "../styles";
 import RawLoadingIndicator from "./index";
 import { BADGE } from "@geometricpanda/storybook-addon-badges";
 
@@ -41,7 +41,7 @@ export const CustomAriaLabel = {
 // Live Preview
 
 const LivePreviewDemo = (props: Args): JSX.Element => {
-  const spacings = defaultAppTheme?.spacing;
+  const spacings = SDSAppTheme?.spacing;
 
   const livePreviewStyles = {
     display: "grid",