@czi-sds/components 22.17.0 → 22.17.1

package/dist/index.cjs.d.ts

@@ -2215,12 +2215,12 @@ interface DiscreteColorGeneratorOptions {
     isDarkMode?: boolean;
     /**
      * Starting hue in degrees (0-360)
-     * @default 249
+     * @default 250
      */
     start?: number;
     /**
      * Number of rotations around the color wheel
-     * @default 1
+     * @default 0.85
      */
     rotations?: number;
     /**
@@ -2230,7 +2230,7 @@ interface DiscreteColorGeneratorOptions {
     gamma?: number;
     /**
      * Lightness range [min, max] (0-1)
-     * @default [0.3, 0.7]
+     * @default [0.4, 0.7]
      */
     lightness?: [
         number,

package/dist/index.cjs.js

@@ -579,7 +579,7 @@ const SDSLightThemeColors = {
     purple: {
         "100": "#efeafe",
         "200": "#e4dbfc",
-        "300": "#cbbaF8",
+        "300": "#cbbaf8",
         "400": "#b296f2",
         "500": "#8b54e2",
         "600": "#6526b5",
@@ -761,7 +761,7 @@ const percentToHex = (percentOpacity) => {
     // Convert percentage to 0-255 range
     const alphaValue = Math.round((clampedPercent / 100) * 255);
     // Convert to hex and pad with leading zero if needed
-    return alphaValue.toString(16).padStart(2, "0").toUpperCase();
+    return alphaValue.toString(16).padStart(2, "0").toLowerCase();
 };
 /**
  * Adds opacity to a hex color by appending the hex opacity value.
@@ -11324,7 +11324,7 @@ const LegendItem = styled__default.default("div") `
       align-items: center;
       cursor: ${disabled ? "not-allowed" : "pointer"} !important;
       transition: background-color 0.2s ease-in-out;
-      padding: 0 ${spaces?.xxs}px;
+      padding: ${spaces?.xxxs}px ${spaces?.xxs}px;
       border-radius: ${corners?.s}px;
       background-color: ${isSelected ? semanticColors?.base?.backgroundTertiary : "transparent"};
       pointer-events: ${disabled ? "none" : "auto"};
@@ -11341,8 +11341,8 @@ const LegendIcon = styled__default.default("div") `
     const spaces = getSpaces(props);
     const corners = getCorners(props);
     return `
-      width: 8px;
-      height: 8px;
+      width: ${spaces?.m}px;
+      height: ${spaces?.m}px;
       border-radius: ${corners?.s}px;
       background-color: ${color};
       flex-shrink: 0;
@@ -11353,7 +11353,7 @@ const LegendIcon = styled__default.default("div") `
 }}
 `;
 const LegendLabel = styled__default.default("span") `
-  ${fontBodyXxxxs}
+  ${fontBodyMediumXxxs}
   ${(props) => {
     const semanticColors = getSemanticColors(props);
     return `
@@ -11362,13 +11362,13 @@ const LegendLabel = styled__default.default("span") `
 }}
 `;
 const LegendValue = styled__default.default("span") `
-  ${fontBodyXxxxs}
+  ${fontBodyMediumXxxs}
   ${(props) => {
     const semanticColors = getSemanticColors(props);
     const spaces = getSpaces(props);
     return `
       color: ${semanticColors?.base?.textSecondary};
-      margin-left: ${spaces?.xxxs}px;
+      margin-left: ${spaces?.xxs}px;
     `;
 }}
 `;
@@ -25795,7 +25795,7 @@ Object.assign(chroma, {
 const generateDiscreteColors = (count, options = {}) => {
     if (count === 0)
         return [];
-    const { isDarkMode = false, start = 249, rotations = 1, gamma = 0.7, lightness = [0.3, 0.7], correctLightness = true, } = options;
+    const { isDarkMode = false, start = 250, rotations = 0.85, gamma = 0.7, lightness = [0.4, 0.7], correctLightness = true, } = options;
     let scale = chroma
         .cubehelix()
         .start(start)

package/dist/index.esm.d.ts

@@ -2215,12 +2215,12 @@ interface DiscreteColorGeneratorOptions {
     isDarkMode?: boolean;
     /**
      * Starting hue in degrees (0-360)
-     * @default 249
+     * @default 250
      */
     start?: number;
     /**
      * Number of rotations around the color wheel
-     * @default 1
+     * @default 0.85
      */
     rotations?: number;
     /**
@@ -2230,7 +2230,7 @@ interface DiscreteColorGeneratorOptions {
     gamma?: number;
     /**
      * Lightness range [min, max] (0-1)
-     * @default [0.3, 0.7]
+     * @default [0.4, 0.7]
      */
     lightness?: [
         number,

package/dist/index.esm.js

@@ -556,7 +556,7 @@ const SDSLightThemeColors = {
     purple: {
         "100": "#efeafe",
         "200": "#e4dbfc",
-        "300": "#cbbaF8",
+        "300": "#cbbaf8",
         "400": "#b296f2",
         "500": "#8b54e2",
         "600": "#6526b5",
@@ -738,7 +738,7 @@ const percentToHex = (percentOpacity) => {
     // Convert percentage to 0-255 range
     const alphaValue = Math.round((clampedPercent / 100) * 255);
     // Convert to hex and pad with leading zero if needed
-    return alphaValue.toString(16).padStart(2, "0").toUpperCase();
+    return alphaValue.toString(16).padStart(2, "0").toLowerCase();
 };
 /**
  * Adds opacity to a hex color by appending the hex opacity value.
@@ -11301,7 +11301,7 @@ const LegendItem = styled$2("div") `
       align-items: center;
       cursor: ${disabled ? "not-allowed" : "pointer"} !important;
       transition: background-color 0.2s ease-in-out;
-      padding: 0 ${spaces?.xxs}px;
+      padding: ${spaces?.xxxs}px ${spaces?.xxs}px;
       border-radius: ${corners?.s}px;
       background-color: ${isSelected ? semanticColors?.base?.backgroundTertiary : "transparent"};
       pointer-events: ${disabled ? "none" : "auto"};
@@ -11318,8 +11318,8 @@ const LegendIcon = styled$2("div") `
     const spaces = getSpaces(props);
     const corners = getCorners(props);
     return `
-      width: 8px;
-      height: 8px;
+      width: ${spaces?.m}px;
+      height: ${spaces?.m}px;
       border-radius: ${corners?.s}px;
       background-color: ${color};
       flex-shrink: 0;
@@ -11330,7 +11330,7 @@ const LegendIcon = styled$2("div") `
 }}
 `;
 const LegendLabel = styled$2("span") `
-  ${fontBodyXxxxs}
+  ${fontBodyMediumXxxs}
   ${(props) => {
     const semanticColors = getSemanticColors(props);
     return `
@@ -11339,13 +11339,13 @@ const LegendLabel = styled$2("span") `
 }}
 `;
 const LegendValue = styled$2("span") `
-  ${fontBodyXxxxs}
+  ${fontBodyMediumXxxs}
   ${(props) => {
     const semanticColors = getSemanticColors(props);
     const spaces = getSpaces(props);
     return `
       color: ${semanticColors?.base?.textSecondary};
-      margin-left: ${spaces?.xxxs}px;
+      margin-left: ${spaces?.xxs}px;
     `;
 }}
 `;
@@ -25772,7 +25772,7 @@ Object.assign(chroma, {
 const generateDiscreteColors = (count, options = {}) => {
     if (count === 0)
         return [];
-    const { isDarkMode = false, start = 249, rotations = 1, gamma = 0.7, lightness = [0.3, 0.7], correctLightness = true, } = options;
+    const { isDarkMode = false, start = 250, rotations = 0.85, gamma = 0.7, lightness = [0.4, 0.7], correctLightness = true, } = options;
     let scale = chroma
         .cubehelix()
         .start(start)

package/dist/tailwind.json

@@ -1,12 +1,12 @@
 {
   "fontFamily": {
-    "sds-body": "var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Helvetica,Arial,sans-serif",
-    "sds-caps": "var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Helvetica,Arial,sans-serif",
+    "sds-body": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
+    "sds-caps": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
     "sds-code": "\"IBM Plex Mono\", monospace",
-    "sds-header": "var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Helvetica,Arial,sans-serif",
-    "sds-link": "var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Helvetica,Arial,sans-serif",
-    "sds-tabular": "var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Helvetica,Arial,sans-serif",
-    "sds-title": "var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Helvetica,Arial,sans-serif"
+    "sds-header": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
+    "sds-link": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
+    "sds-tabular": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
+    "sds-title": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif"
   },
   "fontSize": {
     "sds-body-l-400-narrow": "16px",
@@ -2965,7 +2965,7 @@
       "sds-color-primitive-green-800": "#001f00",
       "sds-color-primitive-purple-100": "#efeafe",
       "sds-color-primitive-purple-200": "#e4dbfc",
-      "sds-color-primitive-purple-300": "#cbbaF8",
+      "sds-color-primitive-purple-300": "#cbbaf8",
       "sds-color-primitive-purple-400": "#b296f2",
       "sds-color-primitive-purple-500": "#8b54e2",
       "sds-color-primitive-purple-600": "#6526b5",
@@ -3013,7 +3013,7 @@
       "sds-color-semantic-base-background-primary-dark": "#000000",
       "sds-color-semantic-base-background-primary-inverse": "#000000",
       "sds-color-semantic-base-background-secondary": "#ededed66",
-      "sds-color-semantic-base-background-secondary-on-dark": "#3b3b3b9E",
+      "sds-color-semantic-base-background-secondary-on-dark": "#3b3b3b9e",
       "sds-color-semantic-base-background-secondary-inverse": "#3b3b3b",
       "sds-color-semantic-base-background-tertiary": "#ededed",
       "sds-color-semantic-base-border-on-fill": "#ffffff",
@@ -3144,4 +3144,4 @@
     "sds-xxs": "4px",
     "sds-xxxs": "2px"
   }
-}
+}