@czi-sds/components 23.3.0 → 23.3.1

package/dist/tailwind.json

@@ -2689,18 +2689,20 @@
     }
   },
   "height": {
+    "sds-icon-xxs": "10px",
+    "sds-icon-xs": "12px",
+    "sds-icon-s": "16px",
     "sds-icon-input": "16px",
     "sds-icon-l": "24px",
-    "sds-icon-s": "16px",
-    "sds-icon-xl": "32px",
-    "sds-icon-xs": "12px"
+    "sds-icon-xl": "32px"
   },
   "width": {
+    "sds-icon-xxs": "10px",
+    "sds-icon-xs": "12px",
+    "sds-icon-s": "16px",
     "sds-icon-input": "16px",
     "sds-icon-l": "24px",
-    "sds-icon-s": "16px",
-    "sds-icon-xl": "32px",
-    "sds-icon-xs": "12px"
+    "sds-icon-xl": "32px"
   },
   "borderRadius": {
     "sds-rounded": "20px",
@@ -2793,6 +2795,14 @@
       "sds-color-semantic-accent-fill-hover": "#dcd9ff",
       "sds-color-semantic-accent-fill-pressed": "#f1f0ff",
       "sds-color-semantic-accent-fill-primary": "#6e4ff9",
+      "sds-color-semantic-accent-fill-interaction": "#dcd9ff",
+      "sds-color-semantic-accent-foreground": "#beb5ff",
+      "sds-color-semantic-accent-foreground-on-dark": "#beb5ff",
+      "sds-color-semantic-accent-foreground-interaction": "#dcd9ff",
+      "sds-color-semantic-accent-foreground-interaction-on-dark": "#dcd9ff",
+      "sds-color-semantic-accent-foreground-pressed": "#f1f0ff",
+      "sds-color-semantic-accent-foreground-pressed-on-dark": "#f1f0ff",
+      "sds-color-semantic-accent-foreground-active": "#beb5ff",
       "sds-color-semantic-accent-ornament": "#beb5ff",
       "sds-color-semantic-accent-ornament-focus": "#beb5ff",
       "sds-color-semantic-accent-ornament-hover": "#dcd9ff",
@@ -2801,6 +2811,7 @@
       "sds-color-semantic-accent-ornament-selected": "#beb5ff",
       "sds-color-semantic-accent-surface-primary": "#6e4ff9",
       "sds-color-semantic-accent-surface-secondary": "#1d004d",
+      "sds-color-semantic-accent-surface-secondary-on-dark": "#1d004d",
       "sds-color-semantic-accent-text-action": "#beb5ff",
       "sds-color-semantic-accent-text-action-hover": "#dcd9ff",
       "sds-color-semantic-accent-text-action-pressed": "#f1f0ff",
@@ -2823,19 +2834,27 @@
       "sds-color-semantic-base-border-primary-inverse": "#cdcdcd",
       "sds-color-semantic-base-border-primary-pressed-inverse": "#ffffff",
       "sds-color-semantic-base-border-secondary": "#696969",
+      "sds-color-semantic-base-border-secondary-on-dark": "#696969",
       "sds-color-semantic-base-divider": "#494949",
       "sds-color-semantic-base-divider-on-dark": "#494949",
       "sds-color-semantic-base-divider-inverse": "#494949",
       "sds-color-semantic-base-fill-disabled": "#333333",
-      "sds-color-semantic-base-fill-interaction": "#69696952",
-      "sds-color-semantic-base-fill-interaction-on-dark": "#69696952",
+      "sds-color-semantic-base-fill-primary-interaction": "#69696952",
+      "sds-color-semantic-base-fill-primary-interaction-on-dark": "#69696952",
       "sds-color-semantic-base-fill-hover-inverse": "#69696952",
       "sds-color-semantic-base-fill-open-inverse": "#69696952",
-      "sds-color-semantic-base-fill-pressed": "#69696966",
-      "sds-color-semantic-base-fill-pressed-on-dark": "#69696966",
+      "sds-color-semantic-base-fill-primary-pressed": "#69696966",
+      "sds-color-semantic-base-fill-primary-pressed-on-dark": "#69696966",
       "sds-color-semantic-base-fill-pressed-inverse": "#69696952",
       "sds-color-semantic-base-fill-primary": "#333333",
       "sds-color-semantic-base-fill-selected": "#ffffff",
+      "sds-color-semantic-base-fill-secondary": "#494949",
+      "sds-color-semantic-base-fill-secondary-interaction": "#94949442",
+      "sds-color-semantic-base-fill-secondary-pressed": "#94949475",
+      "sds-color-semantic-base-fill-secondary-on-dark": "#494949",
+      "sds-color-semantic-base-fill-secondary-interaction-on-dark": "#94949457",
+      "sds-color-semantic-base-fill-secondary-pressed-on-dark": "#94949475",
+      "sds-color-semantic-base-fill-disabled-on-dark": "#333333",
       "sds-color-semantic-base-ornament-disabled": "#696969",
       "sds-color-semantic-base-ornament-disabled-on-dark": "#696969",
       "sds-color-semantic-base-ornament-disabled-inverse": "#696969",
@@ -2876,6 +2895,13 @@
       "sds-color-semantic-beta-surface-primary": "#9261e6",
       "sds-color-semantic-beta-surface-secondary": "#331252",
       "sds-color-semantic-beta-text": "#cebef8",
+      "sds-color-semantic-beta-fill-interaction": "#e4dcfc",
+      "sds-color-semantic-beta-foreground": "#cebef8",
+      "sds-color-semantic-beta-foreground-on-dark": "#cebef8",
+      "sds-color-semantic-beta-foreground-interaction": "#e4dcfc",
+      "sds-color-semantic-beta-foreground-interaction-on-dark": "#e4dcfc",
+      "sds-color-semantic-beta-foreground-pressed": "#f0ebfe",
+      "sds-color-semantic-beta-foreground-pressed-on-dark": "#f0ebfe",
       "sds-color-semantic-info-border": "#a2c9ff",
       "sds-color-semantic-info-fill-hover": "#cde3ff",
       "sds-color-semantic-info-fill-pressed": "#e2eeff",
@@ -2885,6 +2911,13 @@
       "sds-color-semantic-info-surface-primary": "#2876f9",
       "sds-color-semantic-info-surface-secondary": "#0f1d4a",
       "sds-color-semantic-info-text": "#a2c9ff",
+      "sds-color-semantic-info-fill-interaction": "#cde3ff",
+      "sds-color-semantic-info-foreground": "#a2c9ff",
+      "sds-color-semantic-info-foreground-on-dark": "#a2c9ff",
+      "sds-color-semantic-info-foreground-interaction": "#cde3ff",
+      "sds-color-semantic-info-foreground-interaction-on-dark": "#cde3ff",
+      "sds-color-semantic-info-foreground-pressed": "#e2eeff",
+      "sds-color-semantic-info-foreground-pressed-on-dark": "#e2eeff",
       "sds-color-semantic-negative-border": "#ff988a",
       "sds-color-semantic-negative-fill-hover": "#ffbdb3",
       "sds-color-semantic-negative-fill-pressed": "#ffd8d1",
@@ -2894,6 +2927,13 @@
       "sds-color-semantic-negative-surface-primary": "#df453c",
       "sds-color-semantic-negative-surface-secondary": "#330603",
       "sds-color-semantic-negative-text": "#ff988a",
+      "sds-color-semantic-negative-fill-interaction": "#ffbdb3",
+      "sds-color-semantic-negative-foreground": "#ff988a",
+      "sds-color-semantic-negative-foreground-on-dark": "#ff988a",
+      "sds-color-semantic-negative-foreground-interaction": "#ffbdb3",
+      "sds-color-semantic-negative-foreground-interaction-on-dark": "#ffbdb3",
+      "sds-color-semantic-negative-foreground-pressed": "#ffd8d1",
+      "sds-color-semantic-negative-foreground-pressed-on-dark": "#ffd8d1",
       "sds-color-semantic-neutral-border": "#ededed",
       "sds-color-semantic-neutral-fill-hover": "#cdcdcd",
       "sds-color-semantic-neutral-fill-pressed": "#ededed",
@@ -2903,6 +2943,13 @@
       "sds-color-semantic-neutral-surface-primary": "#949494",
       "sds-color-semantic-neutral-surface-secondary": "#494949",
       "sds-color-semantic-neutral-text": "#ededed",
+      "sds-color-semantic-neutral-fill-interaction": "#cdcdcd",
+      "sds-color-semantic-neutral-foreground": "#ededed",
+      "sds-color-semantic-neutral-foreground-on-dark": "#ededed",
+      "sds-color-semantic-neutral-foreground-interaction": "#fafafa",
+      "sds-color-semantic-neutral-foreground-interaction-on-dark": "#fafafa",
+      "sds-color-semantic-neutral-foreground-pressed": "#ffffff",
+      "sds-color-semantic-neutral-foreground-pressed-on-dark": "#ffffff",
       "sds-color-semantic-notice-border": "#e5bc63",
       "sds-color-semantic-notice-fill-hover": "#f5d789",
       "sds-color-semantic-notice-fill-pressed": "#ffe6a8",
@@ -2912,6 +2959,13 @@
       "sds-color-semantic-notice-surface-primary": "#bd8804",
       "sds-color-semantic-notice-surface-secondary": "#361b07",
       "sds-color-semantic-notice-text": "#e5bc63",
+      "sds-color-semantic-notice-fill-interaction": "#f5d789",
+      "sds-color-semantic-notice-foreground": "#e5bc63",
+      "sds-color-semantic-notice-foreground-on-dark": "#e5bc63",
+      "sds-color-semantic-notice-foreground-interaction": "#f5d789",
+      "sds-color-semantic-notice-foreground-interaction-on-dark": "#f5d789",
+      "sds-color-semantic-notice-foreground-pressed": "#ffe6a8",
+      "sds-color-semantic-notice-foreground-pressed-on-dark": "#ffe6a8",
       "sds-color-semantic-positive-border": "#85d898",
       "sds-color-semantic-positive-fill-hover": "#bcecc5",
       "sds-color-semantic-positive-fill-pressed": "#daf4de",
@@ -2920,7 +2974,14 @@
       "sds-color-semantic-positive-ornament": "#85d898",
       "sds-color-semantic-positive-surface-primary": "#2b8e4b",
       "sds-color-semantic-positive-surface-secondary": "#082608",
-      "sds-color-semantic-positive-text": "#85d898"
+      "sds-color-semantic-positive-text": "#85d898",
+      "sds-color-semantic-positive-fill-interaction": "#bcecc5",
+      "sds-color-semantic-positive-foreground": "#85d898",
+      "sds-color-semantic-positive-foreground-on-dark": "#85d898",
+      "sds-color-semantic-positive-foreground-interaction": "#bcecc5",
+      "sds-color-semantic-positive-foreground-interaction-on-dark": "#bcecc5",
+      "sds-color-semantic-positive-foreground-pressed": "#daf4de",
+      "sds-color-semantic-positive-foreground-pressed-on-dark": "#daf4de"
     },
     "light": {
       "sds-color-primitive-blue-100": "#edf3fd",
@@ -2993,6 +3054,14 @@
       "sds-color-semantic-accent-fill-hover": "#4e18cc",
       "sds-color-semantic-accent-fill-pressed": "#330296",
       "sds-color-semantic-accent-fill-primary": "#6e4ff9",
+      "sds-color-semantic-accent-fill-interaction": "#4e18cc",
+      "sds-color-semantic-accent-foreground": "#6e4ff9",
+      "sds-color-semantic-accent-foreground-on-dark": "#9d8bff",
+      "sds-color-semantic-accent-foreground-interaction": "#4e18cc",
+      "sds-color-semantic-accent-foreground-interaction-on-dark": "#beb5ff",
+      "sds-color-semantic-accent-foreground-pressed": "#330296",
+      "sds-color-semantic-accent-foreground-pressed-on-dark": "#dcd9ff",
+      "sds-color-semantic-accent-foreground-active": "#6e4ff9",
       "sds-color-semantic-accent-ornament": "#6e4ff9",
       "sds-color-semantic-accent-ornament-focus": "#6e4ff9",
       "sds-color-semantic-accent-ornament-hover": "#4e18cc",
@@ -3001,6 +3070,7 @@
       "sds-color-semantic-accent-ornament-selected": "#6e4ff9",
       "sds-color-semantic-accent-surface-primary": "#6e4ff9",
       "sds-color-semantic-accent-surface-secondary": "#f1f0ff",
+      "sds-color-semantic-accent-surface-secondary-on-dark": "#1d004d",
       "sds-color-semantic-accent-text-action": "#6e4ff9",
       "sds-color-semantic-accent-text-action-hover": "#4e18cc",
       "sds-color-semantic-accent-text-action-pressed": "#330296",
@@ -3023,19 +3093,27 @@
       "sds-color-semantic-base-border-primary-inverse": "#c3c3c3",
       "sds-color-semantic-base-border-primary-pressed-inverse": "#ffffff",
       "sds-color-semantic-base-border-secondary": "#c3c3c3",
+      "sds-color-semantic-base-border-secondary-on-dark": "#767676",
       "sds-color-semantic-base-divider": "#dfdfdf",
       "sds-color-semantic-base-divider-on-dark": "#3b3b3b",
       "sds-color-semantic-base-divider-inverse": "#3b3b3b",
       "sds-color-semantic-base-fill-disabled": "#ededed",
-      "sds-color-semantic-base-fill-interaction": "#c3c3c333",
-      "sds-color-semantic-base-fill-interaction-on-dark": "#c3c3c333",
+      "sds-color-semantic-base-fill-primary-interaction": "#c3c3c333",
+      "sds-color-semantic-base-fill-primary-interaction-on-dark": "#c3c3c333",
       "sds-color-semantic-base-fill-hover-inverse": "#c3c3c333",
       "sds-color-semantic-base-fill-open-inverse": "#c3c3c357",
-      "sds-color-semantic-base-fill-pressed": "#c3c3c34d",
-      "sds-color-semantic-base-fill-pressed-on-dark": "#c3c3c33d",
+      "sds-color-semantic-base-fill-primary-pressed": "#c3c3c34d",
+      "sds-color-semantic-base-fill-primary-pressed-on-dark": "#c3c3c33d",
       "sds-color-semantic-base-fill-pressed-inverse": "#c3c3c357",
       "sds-color-semantic-base-fill-primary": "#ffffff",
       "sds-color-semantic-base-fill-selected": "#000000",
+      "sds-color-semantic-base-fill-secondary": "#dfdfdf",
+      "sds-color-semantic-base-fill-secondary-interaction": "#a5a5a557",
+      "sds-color-semantic-base-fill-secondary-pressed": "#a5a5a599",
+      "sds-color-semantic-base-fill-secondary-on-dark": "#3b3b3b",
+      "sds-color-semantic-base-fill-secondary-interaction-on-dark": "#a5a5a552",
+      "sds-color-semantic-base-fill-secondary-pressed-on-dark": "#a5a5a575",
+      "sds-color-semantic-base-fill-disabled-on-dark": "#3b3b3b",
       "sds-color-semantic-base-ornament-disabled": "#c3c3c3",
       "sds-color-semantic-base-ornament-disabled-on-dark": "#767676",
       "sds-color-semantic-base-ornament-disabled-inverse": "#767676",
@@ -3076,6 +3154,13 @@
       "sds-color-semantic-beta-surface-primary": "#8b54e2",
       "sds-color-semantic-beta-surface-secondary": "#efeafe",
       "sds-color-semantic-beta-text": "#6526b5",
+      "sds-color-semantic-beta-fill-interaction": "#6526b5",
+      "sds-color-semantic-beta-foreground": "#6526b5",
+      "sds-color-semantic-beta-foreground-on-dark": "#cbbaf8",
+      "sds-color-semantic-beta-foreground-interaction": "#490092",
+      "sds-color-semantic-beta-foreground-interaction-on-dark": "#e4dbfc",
+      "sds-color-semantic-beta-foreground-pressed": "#26004c",
+      "sds-color-semantic-beta-foreground-pressed-on-dark": "#efeafe",
       "sds-color-semantic-info-border": "#0041b9",
       "sds-color-semantic-info-fill-hover": "#0041b9",
       "sds-color-semantic-info-fill-pressed": "#002d90",
@@ -3085,6 +3170,13 @@
       "sds-color-semantic-info-surface-primary": "#1a6cef",
       "sds-color-semantic-info-surface-secondary": "#edf3fd",
       "sds-color-semantic-info-text": "#0041b9",
+      "sds-color-semantic-info-fill-interaction": "#0041b9",
+      "sds-color-semantic-info-foreground": "#0041b9",
+      "sds-color-semantic-info-foreground-on-dark": "#9dc6ff",
+      "sds-color-semantic-info-foreground-interaction": "#002d90",
+      "sds-color-semantic-info-foreground-interaction-on-dark": "#cce1ff",
+      "sds-color-semantic-info-foreground-pressed": "#00114a",
+      "sds-color-semantic-info-foreground-pressed-on-dark": "#edf3fd",
       "sds-color-semantic-negative-border": "#b80017",
       "sds-color-semantic-negative-fill-hover": "#b80017",
       "sds-color-semantic-negative-fill-pressed": "#6f0008",
@@ -3094,6 +3186,13 @@
       "sds-color-semantic-negative-surface-primary": "#db2131",
       "sds-color-semantic-negative-surface-secondary": "#ffe8e6",
       "sds-color-semantic-negative-text": "#b80017",
+      "sds-color-semantic-negative-fill-interaction": "#b80017",
+      "sds-color-semantic-negative-foreground": "#b80017",
+      "sds-color-semantic-negative-foreground-on-dark": "#ffafa8",
+      "sds-color-semantic-negative-foreground-interaction": "#6f0008",
+      "sds-color-semantic-negative-foreground-interaction-on-dark": "#ffd6d2",
+      "sds-color-semantic-negative-foreground-pressed": "#340000",
+      "sds-color-semantic-negative-foreground-pressed-on-dark": "#ffe8e6",
       "sds-color-semantic-neutral-border": "#3b3b3b",
       "sds-color-semantic-neutral-fill-hover": "#3b3b3b",
       "sds-color-semantic-neutral-fill-pressed": "#1b1b1b",
@@ -3103,6 +3202,13 @@
       "sds-color-semantic-neutral-surface-primary": "#767676",
       "sds-color-semantic-neutral-surface-secondary": "#dfdfdf",
       "sds-color-semantic-neutral-text": "#3b3b3b",
+      "sds-color-semantic-neutral-fill-interaction": "#3b3b3b",
+      "sds-color-semantic-neutral-foreground": "#3b3b3b",
+      "sds-color-semantic-neutral-foreground-on-dark": "#c3c3c3",
+      "sds-color-semantic-neutral-foreground-interaction": "#1b1b1b",
+      "sds-color-semantic-neutral-foreground-interaction-on-dark": "#dfdfdf",
+      "sds-color-semantic-neutral-foreground-pressed": "#000000",
+      "sds-color-semantic-neutral-foreground-pressed-on-dark": "#ededed",
       "sds-color-semantic-notice-border": "#b07300",
       "sds-color-semantic-notice-fill-hover": "#b07300",
       "sds-color-semantic-notice-fill-pressed": "#7c3e00",
@@ -3112,6 +3218,13 @@
       "sds-color-semantic-notice-surface-primary": "#da9900",
       "sds-color-semantic-notice-surface-secondary": "#fff3db",
       "sds-color-semantic-notice-text": "#b07300",
+      "sds-color-semantic-notice-fill-interaction": "#b07300",
+      "sds-color-semantic-notice-foreground": "#b07300",
+      "sds-color-semantic-notice-foreground-on-dark": "#ffca5c",
+      "sds-color-semantic-notice-foreground-interaction": "#7c3e00",
+      "sds-color-semantic-notice-foreground-interaction-on-dark": "#ffdb97",
+      "sds-color-semantic-notice-foreground-pressed": "#541700",
+      "sds-color-semantic-notice-foreground-pressed-on-dark": "#fff3db",
       "sds-color-semantic-positive-border": "#105b2b",
       "sds-color-semantic-positive-fill-hover": "#105b2b",
       "sds-color-semantic-positive-fill-pressed": "#07431d",
@@ -3120,7 +3233,14 @@
       "sds-color-semantic-positive-ornament": "#105b2b",
       "sds-color-semantic-positive-surface-primary": "#238444",
       "sds-color-semantic-positive-surface-secondary": "#ebf9ed",
-      "sds-color-semantic-positive-text": "#105b2b"
+      "sds-color-semantic-positive-text": "#105b2b",
+      "sds-color-semantic-positive-fill-interaction": "#105b2b",
+      "sds-color-semantic-positive-foreground": "#105b2b",
+      "sds-color-semantic-positive-foreground-on-dark": "#7fd693",
+      "sds-color-semantic-positive-foreground-interaction": "#07431d",
+      "sds-color-semantic-positive-foreground-interaction-on-dark": "#b9ecc3",
+      "sds-color-semantic-positive-foreground-pressed": "#001f00",
+      "sds-color-semantic-positive-foreground-pressed-on-dark": "#ebf9ed"
     }
   },
   "spacing": {