Merge branch 'main' into 909-refactor-callout-component

chanzuckerberg · Dec 10, 2024 · 59b6c22 · 59b6c22
2 parents c1c3db7 + fee8ee4
commit 59b6c22
Show file tree

Hide file tree

Showing 8 changed files with 1,177 additions and 296 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [21.7.1](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.7.0...@czi-sds/components@21.7.1) (2024-11-27)
+
+### Bug Fixes
+
+- **inputs:** fix intent prop type ([#899](https://github.com/chanzuckerberg/sci-components/issues/899)) ([064f1b4](https://github.com/chanzuckerberg/sci-components/commit/064f1b46072e26af7fd55af081e9f475d28cf053))
+- **variables:** fix design token variables ([2c1aff5](https://github.com/chanzuckerberg/sci-components/commit/2c1aff5816484ca1a74fa09407044468324f0490))
+
 # [21.7.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.6.3...@czi-sds/components@21.7.0) (2024-11-14)
 
 ### Bug Fixes

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@czi-sds/components",
-  "version": "21.7.0",
+  "version": "21.7.1",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.cjs.d.ts",

diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
@@ -202,10 +202,9 @@
     --sds-corner-m: 4px;
     --sds-corner-s: 2px;
     --sds-corner-none: 0px;
-    --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
-    --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
-      0px 2px 4px 0px rgba(0, 0, 0, 0.15);
-    --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+    --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
+    --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
+    --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
     --sds-drop-shadow-none: none;
     --sds-font-font-family-body: "Inter", sans-serif;
     --sds-font-font-family-body-narrow: "Inter", sans-serif;
@@ -581,10 +580,9 @@
     --sds-corner-m: 4px;
     --sds-corner-s: 2px;
     --sds-corner-none: 0px;
-    --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
-    --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
-      0px 2px 4px 0px rgba(0, 0, 0, 0.15);
-    --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+    --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
+    --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
+    --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
     --sds-drop-shadow-none: none;
     --sds-font-font-family-body: "Inter", sans-serif;
     --sds-font-font-family-body-narrow: "Inter", sans-serif;

diff --git a/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs b/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs
@@ -88,55 +88,84 @@ function transformIconSizes(tokens, options = {}) {
 }
 
 function transformFonts(tokens, keys, options = {}) {
-  const fontSize = { narrow: {}, wide: {} };
-  const lineHeight = { narrow: {}, wide: {} };
-  const letterSpacing = { narrow: {}, wide: {} };
-  const fontVariantNumeric = { narrow: {}, wide: {} };
-  const textTransform = { narrow: {}, wide: {} };
-
-  const TEXT_TRANSFORM = "text-transform";
-  const FONT_VARIANT_NUMERIC = "font-variant-numeric";
-
-  function makeFontValue(fontValue, name) {
-    const parsedWideFont = cssFont.parse(fontValue.font.value);
-    const parsedNarrowFont = cssFont.parse(fontValue.font.narrowValue);
-
-    // Wide Style Fonts
-    fontSize.wide[name] = parsedWideFont.size;
-    lineHeight.wide[name] = parsedWideFont.size;
-    letterSpacing.wide[name] = fontValue["letter-spacing"].value;
-    textTransform.wide[name] = fontValue[TEXT_TRANSFORM]
-      ? fontValue[TEXT_TRANSFORM].value
-      : "none";
-    fontVariantNumeric.wide[name] = fontValue[FONT_VARIANT_NUMERIC]
-      ? fontValue[FONT_VARIANT_NUMERIC].value
-      : "normal";
-
-    // Narrow Style Fonts
-    fontSize.narrow[name] = parsedNarrowFont.size;
-    lineHeight.narrow[name] = parsedNarrowFont.size;
-    letterSpacing.narrow[name] = fontValue["letter-spacing"].narrowValue;
-    textTransform.narrow[name] = fontValue[TEXT_TRANSFORM]
-      ? fontValue[TEXT_TRANSFORM].narrowValue
-      : "none";
-    fontVariantNumeric.narrow[name] = fontValue[FONT_VARIANT_NUMERIC]
-      ? fontValue[FONT_VARIANT_NUMERIC].narrowValue
-      : "normal";
-  }
+  /**
+   * (masoudmanson): This will be used for generating the font
+   * specific tailwind config.
+   */
+  const fontData = {
+    fontSize: {},
+    fontVariantNumeric: {},
+    letterSpacing: {},
+    lineHeight: {},
+    textTransform: {},
+  };
 
-  for (const key of keys) {
-    for (const [size, fonts] of Object.entries(tokens[key])) {
-      for (const [, fontValue] of Object.entries(fonts)) {
-        makeFontValue(fontValue, getName([key, size], options));
-      }
-    }
-  }
+  /**
+   * (masoudmanson): Generates a typography object compatible with Tailwind's typography plugin.
+   * Example usage in a Tailwind config file:
+   *
+   * const typography = require('@tailwindcss/typography')
+   * const sdsTailwindConfig = require("@czi-sds/components/dist/tailwind.json");
+   *
+   * module.exports = {
+   *  mode: 'jit',
+   *  content: [...],
+   *  theme: {
+   *    extend: {
+   *      ...sdsTailwindConfig
+   *    }
+   *  },
+   *  plugins: [typography],
+   *}
+   *
+   * And it can be used in the html like:
+   *
+   * <p class="prose prose-sds-header-xs-600-wide">...</p>
+   */
+  const typography = {};
+
+  keys.forEach((key) => {
+    Object.entries(tokens[key]).forEach(([size, fontVariants]) => {
+      Object.entries(fontVariants).forEach(([_, fontValue]) => {
+        const name = getName([key, size], options);
+        addFontData(typography, fontData, fontValue, name);
+      });
+    });
+  });
 
   return {
-    fontSize,
-    fontVariantNumeric,
-    letterSpacing,
-    lineHeight,
-    textTransform,
+    ...fontData,
+    typography,
   };
 }
+
+function addFontData(typography, data, fontValue, name) {
+  const fontTypes = {
+    narrow: cssFont.parse(fontValue.font.narrowValue),
+    wide: cssFont.parse(fontValue.font.value),
+  };
+
+  Object.entries(fontTypes).forEach(([type, parsedFont]) => {
+    const key = `${name}-${parsedFont.weight}-${type}`;
+    const sharedStyles = {
+      fontFamily: parsedFont.family.join(", "),
+      fontSize: parsedFont.size,
+      fontStyle: parsedFont.style,
+      fontVariantNumeric: fontValue["font-variant-numeric"]?.value || "normal",
+      fontWeight: parsedFont.weight,
+      letterSpacing: fontValue["letter-spacing"].value || "0px",
+      lineHeight: parsedFont.lineHeight,
+      textTransform: fontValue["text-transform"]?.value || "none",
+    };
+
+    // Add to typography
+    typography[key] = { css: sharedStyles };
+
+    // Add to font data
+    data.fontSize[key] = parsedFont.size;
+    data.lineHeight[key] = parsedFont.lineHeight;
+    data.letterSpacing[key] = sharedStyles.letterSpacing;
+    data.textTransform[key] = sharedStyles.textTransform;
+    data.fontVariantNumeric[key] = sharedStyles.fontVariantNumeric;
+  });
+}