Merge branch 'main' of https://github.com/chanzuckerberg/sci-components…

… into prod
chanzuckerberg · Oct 23, 2024 · ca7772f · ca7772f
2 parents 981104b + 0f3ed1d
commit ca7772f
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 244 deletions.
diff --git a/packages/components/README.md b/packages/components/README.md
@@ -254,6 +254,33 @@ const theme = createTheme(appTheme)
 </StyledEngineProvider>
 ```
 
+To apply custom colors that align with your branding while maintaining the SDS design configurations, use the `makeSdsSemanticAppTheme`. Provide it with a Colors object that follows the SDS model.
+
+```tsx
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+import { makeSdsSemanticAppTheme, makeThemeOptions, type Colors } from "@czi-sds/components";
+import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
+import createTheme from "@mui/material/styles/createTheme";
+
+const CustomColors: Colors = {
+  ...
+}
+
+const customColorAppTheme = makeSdsSemanticAppTheme(CustomColors);
+
+const appTheme = makeThemeOptions(customColorAppTheme)
+
+const theme = createTheme(appTheme)
+
+<StyledEngineProvider injectFirst>
+  <ThemeProvider theme={theme}>
+    <EmotionThemeProvider theme={theme}>
+      <YourApp />
+    </EmotionThemeProvider>
+  </ThemeProvider>
+</StyledEngineProvider>
+```
+
 💡 CZGE example available [here](https://github.com/chanzuckerberg/czgenepi/blob/trunk/src/frontend/src/common/styles/theme.ts).
 
 💡 Material UI docs for custom theming available [here](https://mui.com/material-ui/customization/theming/).

diff --git a/packages/components/src/core/Link/__storybook__/index.stories.tsx b/packages/components/src/core/Link/__storybook__/index.stories.tsx
@@ -3,6 +3,7 @@ import { BADGE } from "@geometricpanda/storybook-addon-badges";
 import { Link } from "./stories/default";
 import { LINK_EXCLUDED_CONTROLS } from "./constants";
 import { ScreenshotTestDemo } from "./stories/screenshot";
+import { LongerTextDemo } from "./stories/longText";
 
 export default {
   argTypes: {
@@ -38,6 +39,12 @@ export const Default = {
   },
 };
 
+// Longer Text
+
+export const LongerText = {
+  render: () => LongerTextDemo(),
+};
+
 // Screenshot test
 
 export const ScreenshotTest = {

diff --git a/packages/components/src/core/Link/__storybook__/stories/longText.tsx b/packages/components/src/core/Link/__storybook__/stories/longText.tsx
@@ -0,0 +1,23 @@
+import { Typography } from "@mui/material";
+import { LONG_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+import RawLink from "src/core/Link";
+
+export const LongerTextDemo = (): JSX.Element => {
+  return (
+    <>
+      <Typography variant="h4" sx={{ mb: 2 }}>
+        Default Link with Long Text
+      </Typography>
+      <RawLink href="#" sdsStyle="default">
+        {LONG_LOREM_IPSUM}
+      </RawLink>
+
+      <Typography variant="h4" sx={{ mb: 2, mt: 6 }}>
+        Dashed Link with Long Text
+      </Typography>
+      <RawLink href="#" sdsStyle="dashed">
+        {LONG_LOREM_IPSUM}
+      </RawLink>
+    </>
+  );
+};
diff --git a/packages/components/src/core/Link/style.ts b/packages/components/src/core/Link/style.ts
@@ -24,82 +24,43 @@ export type LinkProps<C extends React.ElementType = "a"> = RawLinkProps<
 const doNotForwardProps = ["sdsStyle", "sdsSize", "fontWeight"];
 
 const defaultStyle = (props: LinkProps) => {
-  const { sdsSize = "s" } = props;
   const semanticColors = getSemanticColors(props);
 
   return css`
     color: ${semanticColors?.accent?.textAction};
     position: relative;
-
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      height: 1px;
-      margin-top: ${sdsSize === "s" ? -4 : -3}px;
-      width: 100%;
-    }
+    text-decoration: none;
+    text-underline-offset: 2.5px;
 
     &:hover {
       color: ${semanticColors?.accent?.textActionHover};
-
-      &::after {
-        background-color: ${semanticColors?.accent?.borderHover};
-      }
+      text-decoration: underline;
     }
 
     &:focus {
       color: ${semanticColors?.accent?.textActionHover};
-
-      &::after {
-        background-color: ${semanticColors?.accent?.borderHover};
-      }
+      text-decoration: underline;
     }
 
     &:active {
       color: ${semanticColors?.accent?.textActionPressed};
-
-      &::after {
-        background-color: ${semanticColors?.accent?.borderPressed};
-      }
+      text-decoration: underline;
     }
   `;
 };
 
-const dashedStyle = (props: LinkProps) => {
-  const { sdsSize = "s" } = props;
-  const semanticColors = getSemanticColors(props);
-
+const dashedStyle = () => {
   return css`
     color: inherit;
     position: relative;
-
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      height: 1px;
-      margin-top: ${sdsSize === "s" ? -4 : -3}px;
-      margin-left: 1px;
-      width: 100%;
-      background-image: linear-gradient(
-        to right,
-        ${semanticColors?.base?.borderHover} 60%,
-        transparent 60%
-      );
-      background-size: 5px 100%;
-    }
+    text-decoration: underline dashed;
+    text-underline-offset: 2.5px;
 
     &:hover,
-    &:focus {
-      text-decoration: none;
-      &::after {
-        background-image: linear-gradient(
-          to right,
-          ${semanticColors?.base?.borderHover} 60%,
-          ${semanticColors?.base?.borderHover} 60%
-        );
-      }
+    &:focus,
+    &:active,
+    &:focus-visible {
+      text-decoration-style: solid;
     }
   `;
 };
@@ -126,7 +87,7 @@ export const StyledLink = styled(Link, {
 
     return css`
       ${sdsStyle === "default" && defaultStyle(props)}
-      ${sdsStyle === "dashed" && dashedStyle(props)}
+      ${sdsStyle === "dashed" && dashedStyle()}
       ${sdsSize === "s" && smallStyle(props)}
       ${sdsSize === "xs" && extraSmallStyle(props)}
 

diff --git a/packages/components/src/core/styles/common/SDSAppTheme.ts b/packages/components/src/core/styles/common/SDSAppTheme.ts
@@ -466,130 +466,77 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
   },
 };
 
-export const SDSLightAppTheme: AppTheme = {
+/**
+ * Create a SDS App Theme with custom colors that follows the SDS color model.
+ */
+export const makeSdsSemanticAppTheme = (colors: Colors): AppTheme => ({
   ...sharedAppTheme,
-  colors: SDSLightThemeColors,
-};
-
-// (mlila) whenever our theme uses colors, we need to make sure we allow consuming
-// applications to override those colors using their own custom theme.
-// By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
-// we allow other apps to specify their colors once, and have them apply
-// throughout the application, such as in borders, etc without having to manually
-// override every theme property that makes use of colors.
-
-SDSLightAppTheme.borders = {
-  accent: {
-    default: `1px solid ${SDSLightAppTheme.colors.blue[500]}`,
-    focused: `1px solid ${SDSLightAppTheme.colors.blue[500]}`,
-    hover: `1px solid ${SDSLightAppTheme.colors.blue[600]}`,
-    open: `1px solid ${SDSLightAppTheme.colors.blue[500]}`,
-    pressed: `1px solid ${SDSLightAppTheme.colors.blue[700]}`,
-    selected: `1px solid ${SDSLightAppTheme.colors.blue[500]}`,
-  },
-  base: {
-    default: `1px solid ${SDSLightAppTheme.colors.gray[500]}`,
-    disabled: `1px solid ${SDSLightAppTheme.colors.gray[300]}`,
-    divider: `1px solid ${SDSLightAppTheme.colors.gray[200]}`,
-    hover: `1px solid ${SDSLightAppTheme.colors.gray[900]}`,
-    pressed: `1px solid ${SDSLightAppTheme.colors.gray[900]}`,
-    table: `1px solid ${SDSLightAppTheme.colors.gray[300]}`,
-  },
-  beta: {
-    default: `1px solid ${SDSLightAppTheme.colors.purple[600]}`,
-    extraThick: `4px solid ${SDSLightAppTheme.colors.purple[600]}`,
-    thick: `2px solid ${SDSLightAppTheme.colors.purple[600]}`,
-  },
-  info: {
-    default: `1px solid ${SDSLightAppTheme.colors.blue[600]}`,
-    extraThick: `4px solid ${SDSLightAppTheme.colors.blue[600]}`,
-    thick: `2px solid ${SDSLightAppTheme.colors.blue[600]}`,
-  },
-  link: {
-    dashed: `1px dashed`,
-    solid: `1px solid`,
-  },
-  negative: {
-    default: `1px solid ${SDSLightAppTheme.colors.red[600]}`,
-    extraThick: `4px solid ${SDSLightAppTheme.colors.red[600]}`,
-    thick: `2px solid ${SDSLightAppTheme.colors.red[600]}`,
-  },
-  neutral: {
-    default: `1px solid ${SDSLightAppTheme.colors.gray[500]}`,
-    extraThick: `4px solid ${SDSLightAppTheme.colors.gray[500]}`,
-    thick: `2px solid ${SDSLightAppTheme.colors.gray[500]}`,
-  },
-  none: "none",
-  notice: {
-    default: `1px solid ${SDSLightAppTheme.colors.yellow[600]}`,
-    extraThick: `4px solid ${SDSLightAppTheme.colors.yellow[600]}`,
-    thick: `2px solid ${SDSLightAppTheme.colors.yellow[600]}`,
-  },
-  positive: {
-    default: `1px solid ${SDSLightAppTheme.colors.green[600]}`,
-    extraThick: `4px solid ${SDSLightAppTheme.colors.green[600]}`,
-    thick: `2px solid ${SDSLightAppTheme.colors.green[600]}`,
+  // (mlila) whenever our theme uses colors, we need to make sure we allow consuming
+  // applications to override those colors using their own custom theme.
+  // By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
+  // we allow other apps to specify their colors once, and have them apply
+  // throughout the application, such as in borders, etc without having to manually
+  // override every theme property that makes use of colors.
+  borders: {
+    accent: {
+      default: `1px solid ${colors.blue[500]}`,
+      focused: `1px solid ${colors.blue[500]}`,
+      hover: `1px solid ${colors.blue[600]}`,
+      open: `1px solid ${colors.blue[500]}`,
+      pressed: `1px solid ${colors.blue[700]}`,
+      selected: `1px solid ${colors.blue[500]}`,
+    },
+    base: {
+      default: `1px solid ${colors.gray[500]}`,
+      disabled: `1px solid ${colors.gray[300]}`,
+      divider: `1px solid ${colors.gray[200]}`,
+      hover: `1px solid ${colors.gray[900]}`,
+      pressed: `1px solid ${colors.gray[900]}`,
+      table: `1px solid ${colors.gray[300]}`,
+    },
+    beta: {
+      default: `1px solid ${colors.purple[600]}`,
+      extraThick: `4px solid ${colors.purple[600]}`,
+      thick: `2px solid ${colors.purple[600]}`,
+    },
+    info: {
+      default: `1px solid ${colors.blue[600]}`,
+      extraThick: `4px solid ${colors.blue[600]}`,
+      thick: `2px solid ${colors.blue[600]}`,
+    },
+    link: {
+      dashed: `1px dashed`,
+      solid: `1px solid`,
+    },
+    negative: {
+      default: `1px solid ${colors.red[600]}`,
+      extraThick: `4px solid ${colors.red[600]}`,
+      thick: `2px solid ${colors.red[600]}`,
+    },
+    neutral: {
+      default: `1px solid ${colors.gray[500]}`,
+      extraThick: `4px solid ${colors.gray[500]}`,
+      thick: `2px solid ${colors.gray[500]}`,
+    },
+    none: "none",
+    notice: {
+      default: `1px solid ${colors.yellow[600]}`,
+      extraThick: `4px solid ${colors.yellow[600]}`,
+      thick: `2px solid ${colors.yellow[600]}`,
+    },
+    positive: {
+      default: `1px solid ${colors.green[600]}`,
+      extraThick: `4px solid ${colors.green[600]}`,
+      thick: `2px solid ${colors.green[600]}`,
+    },
   },
-};
+  colors,
+});
 
-export const SDSDarkAppTheme: AppTheme = {
-  ...sharedAppTheme,
-  colors: SDSDarkThemeColors,
-};
-
-SDSDarkAppTheme.borders = {
-  accent: {
-    default: `1px solid ${SDSDarkAppTheme.colors.blue[500]}`,
-    focused: `1px solid ${SDSDarkAppTheme.colors.blue[500]}`,
-    hover: `1px solid ${SDSDarkAppTheme.colors.blue[600]}`,
-    open: `1px solid ${SDSDarkAppTheme.colors.blue[500]}`,
-    pressed: `1px solid ${SDSDarkAppTheme.colors.blue[700]}`,
-    selected: `1px solid ${SDSDarkAppTheme.colors.blue[500]}`,
-  },
-  base: {
-    default: `1px solid ${SDSDarkAppTheme.colors.gray[500]}`,
-    disabled: `1px solid ${SDSDarkAppTheme.colors.gray[300]}`,
-    divider: `1px solid ${SDSDarkAppTheme.colors.gray[200]}`,
-    hover: `1px solid ${SDSDarkAppTheme.colors.gray[900]}`,
-    pressed: `1px solid ${SDSDarkAppTheme.colors.gray[900]}`,
-    table: `1px solid ${SDSDarkAppTheme.colors.gray[300]}`,
-  },
-  beta: {
-    default: `1px solid ${SDSDarkAppTheme.colors.purple[600]}`,
-    extraThick: `4px solid ${SDSDarkAppTheme.colors.purple[600]}`,
-    thick: `2px solid ${SDSDarkAppTheme.colors.purple[600]}`,
-  },
-  info: {
-    default: `1px solid ${SDSDarkAppTheme.colors.blue[600]}`,
-    extraThick: `4px solid ${SDSDarkAppTheme.colors.blue[600]}`,
-    thick: `2px solid ${SDSDarkAppTheme.colors.blue[600]}`,
-  },
-  link: {
-    dashed: `1px dashed`,
-    solid: `1px solid`,
-  },
-  negative: {
-    default: `1px solid ${SDSDarkAppTheme.colors.red[600]}`,
-    extraThick: `4px solid ${SDSDarkAppTheme.colors.red[600]}`,
-    thick: `2px solid ${SDSDarkAppTheme.colors.red[600]}`,
-  },
-  neutral: {
-    default: `1px solid ${SDSDarkAppTheme.colors.gray[500]}`,
-    extraThick: `4px solid ${SDSDarkAppTheme.colors.gray[500]}`,
-    thick: `2px solid ${SDSDarkAppTheme.colors.gray[500]}`,
-  },
-  none: "none",
-  notice: {
-    default: `1px solid ${SDSDarkAppTheme.colors.yellow[600]}`,
-    extraThick: `4px solid ${SDSDarkAppTheme.colors.yellow[600]}`,
-    thick: `2px solid ${SDSDarkAppTheme.colors.yellow[600]}`,
-  },
-  positive: {
-    default: `1px solid ${SDSDarkAppTheme.colors.green[600]}`,
-    extraThick: `4px solid ${SDSDarkAppTheme.colors.green[600]}`,
-    thick: `2px solid ${SDSDarkAppTheme.colors.green[600]}`,
-  },
-};
+export const SDSLightAppTheme: AppTheme =
+  makeSdsSemanticAppTheme(SDSLightThemeColors);
+export const SDSDarkAppTheme: AppTheme =
+  makeSdsSemanticAppTheme(SDSDarkThemeColors);
 
 /**
  * Helper function to select the appropriate theme settings.