@epilot/volt-ui-experimental-griffel 0.2.1 → 0.3.0

package/dist/tokens.json

@@ -1,7 +1,7 @@
 {
-  "$comment": "GENERATED. Design token values for consumers that do not render this package's React components. Compile these into your own CSS under your own names at your own build time; do not reference this package's runtime custom properties, whose names are content-hashed and change with their values.",
+  "$comment": "GENERATED. Design token values for consumers that do not render this package's React components. Compile these into your own CSS under your own names at your own build time; do not reference this package's runtime custom properties, whose names are content-hashed and change with their values. `themes.light`/`themes.dark` are mode-resolved; `densities.compact`/`densities.normal`/`densities.comfortable` resolve the component layer's geometry tokens (WP9A-ACCEPTANCE-WP9B1) and carry no mode of their own — do not read a value out of `themes` for a key that only exists under `densities`, or the reverse. This file is copied verbatim to this package's public `tokens.json` export (`package.json`'s `build` script, `cp src/tokens/values.generated.json dist/tokens.json`).",
   "package": "@epilot/volt-ui-experimental-griffel",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "themes": {
     "light": {
       "accent-1": "#fcfdfe",
@@ -548,6 +548,7 @@
       "sem-accent-high-contrast": "#00224bee",
       "sem-accent-light": "#005bb8f0",
       "sem-accent-on-high-contrast": "#fcfdfe",
+      "sem-accent-on-soft": "#00224bee",
       "sem-accent-on-solid": "#ffffff",
       "sem-accent-soft": "#0066e614",
       "sem-accent-soft-hover": "#006ef823",
@@ -563,6 +564,7 @@
       "sem-blue-high-contrast": "#002359ee",
       "sem-blue-light": "#006dcbf2",
       "sem-blue-on-high-contrast": "#fbfdff",
+      "sem-blue-on-soft": "#002359ee",
       "sem-blue-on-solid": "#ffffff",
       "sem-blue-soft": "#008ff519",
       "sem-blue-soft-hover": "#009eff2a",
@@ -579,6 +581,7 @@
       "sem-bronze-high-contrast": "#1d0600d4",
       "sem-bronze-light": "#3d0f00ab",
       "sem-bronze-on-high-contrast": "#fdfcfc",
+      "sem-bronze-on-soft": "#1d0600d4",
       "sem-bronze-on-solid": "#ffffff",
       "sem-bronze-soft": "#92250015",
       "sem-bronze-soft-hover": "#80280020",
@@ -594,6 +597,7 @@
       "sem-cyan-high-contrast": "#00323ef2",
       "sem-cyan-light": "#007491ef",
       "sem-cyan-on-high-contrast": "#fafdfe",
+      "sem-cyan-on-soft": "#00323ef2",
       "sem-cyan-on-solid": "#ffffff",
       "sem-cyan-soft": "#00c2d121",
       "sem-cyan-soft-hover": "#00bcd435",
@@ -609,6 +613,7 @@
       "sem-error-high-contrast": "#5a0400ec",
       "sem-error-light": "#ce0200e1",
       "sem-error-on-high-contrast": "#fffcfc",
+      "sem-error-on-soft": "#5a0400ec",
       "sem-error-on-solid": "#ffffff",
       "sem-error-soft": "#ff220017",
       "sem-error-soft-hover": "#ff25002a",
@@ -618,12 +623,14 @@
       "sem-error-surface-hover": "#ff220017",
       "sem-error-ui": "#ed1d0062",
       "sem-error-ui-hover": "#df1b007f",
+      "sem-focus-ring": "#0f65bc",
       "sem-gray-contrast": "#ffffff",
       "sem-gray-default": "#020008e0",
       "sem-gray-disabled": "#08003145",
       "sem-gray-high-contrast": "#020008e0",
       "sem-gray-light": "#0400119c",
       "sem-gray-on-high-contrast": "#fdfcfd",
+      "sem-gray-on-soft": "#020008e0",
       "sem-gray-on-solid": "#ffffff",
       "sem-gray-soft": "#30004010",
       "sem-gray-soft-hover": "#20003618",
@@ -639,6 +646,7 @@
       "sem-green-high-contrast": "#002616e6",
       "sem-green-light": "#00713fde",
       "sem-green-on-high-contrast": "#fbfefc",
+      "sem-green-on-soft": "#002616e6",
       "sem-green-on-solid": "#ffffff",
       "sem-green-soft": "#00a43319",
       "sem-green-soft-hover": "#00a83829",
@@ -654,6 +662,7 @@
       "sem-indigo-high-contrast": "#001046e0",
       "sem-indigo-light": "#002bb7c5",
       "sem-indigo-on-high-contrast": "#fdfdfe",
+      "sem-indigo-on-soft": "#001046e0",
       "sem-indigo-on-solid": "#ffffff",
       "sem-indigo-soft": "#0047f112",
       "sem-indigo-soft-hover": "#0044ff1e",
@@ -669,6 +678,7 @@
       "sem-info-high-contrast": "#002359ee",
       "sem-info-light": "#006dcbf2",
       "sem-info-on-high-contrast": "#fbfdff",
+      "sem-info-on-soft": "#002359ee",
       "sem-info-on-solid": "#ffffff",
       "sem-info-soft": "#008ff519",
       "sem-info-soft-hover": "#009eff2a",
@@ -687,6 +697,7 @@
       "sem-lime-high-contrast": "#1e2900e3",
       "sem-lime-light": "#375f00d0",
       "sem-lime-on-high-contrast": "#fcfdfa",
+      "sem-lime-on-soft": "#1e2900e3",
       "sem-lime-on-solid": "#1d211c",
       "sem-lime-soft": "#96c80029",
       "sem-lime-soft-hover": "#8fc60042",
@@ -702,6 +713,7 @@
       "sem-mauve-high-contrast": "#020008e0",
       "sem-mauve-light": "#0400119c",
       "sem-mauve-on-high-contrast": "#fdfcfd",
+      "sem-mauve-on-soft": "#020008e0",
       "sem-mauve-on-solid": "#ffffff",
       "sem-mauve-soft": "#30004010",
       "sem-mauve-soft-hover": "#20003618",
@@ -717,6 +729,7 @@
       "sem-mint-high-contrast": "#00312ae9",
       "sem-mint-light": "#007763fd",
       "sem-mint-on-high-contrast": "#f9fefd",
+      "sem-mint-on-soft": "#00312ae9",
       "sem-mint-on-solid": "#1a211e",
       "sem-mint-soft": "#00d29e22",
       "sem-mint-soft-hover": "#00cc9937",
@@ -732,6 +745,7 @@
       "sem-orange-high-contrast": "#431200e2",
       "sem-orange-light": "#cc4e00",
       "sem-orange-on-high-contrast": "#fefcfb",
+      "sem-orange-on-soft": "#431200e2",
       "sem-orange-on-solid": "#ffffff",
       "sem-orange-soft": "#ff9c0029",
       "sem-orange-soft-hover": "#ff91014a",
@@ -747,6 +761,7 @@
       "sem-pink-high-contrast": "#59003bed",
       "sem-pink-light": "#b60074d6",
       "sem-pink-on-high-contrast": "#fffcfe",
+      "sem-pink-on-soft": "#59003bed",
       "sem-pink-on-solid": "#ffffff",
       "sem-pink-soft": "#f4008c16",
       "sem-pink-soft-hover": "#e2008b23",
@@ -762,6 +777,7 @@
       "sem-purple-high-contrast": "#250049df",
       "sem-purple-light": "#52009aba",
       "sem-purple-on-high-contrast": "#fefcfe",
+      "sem-purple-on-soft": "#250049df",
       "sem-purple-on-solid": "#ffffff",
       "sem-purple-soft": "#8e00f112",
       "sem-purple-soft-hover": "#8d00e51d",
@@ -777,6 +793,7 @@
       "sem-red-high-contrast": "#5a0400ec",
       "sem-red-light": "#ce0200e1",
       "sem-red-on-high-contrast": "#fffcfc",
+      "sem-red-on-soft": "#5a0400ec",
       "sem-red-on-solid": "#ffffff",
       "sem-red-soft": "#ff220017",
       "sem-red-soft-hover": "#ff25002a",
@@ -792,6 +809,7 @@
       "sem-sky-high-contrast": "#002540e2",
       "sem-sky-light": "#00749e",
       "sem-sky-on-high-contrast": "#f9feff",
+      "sem-sky-on-soft": "#002540e2",
       "sem-sky-on-solid": "#1c2024",
       "sem-sky-soft": "#00b3ee1e",
       "sem-sky-soft-hover": "#00ace42e",
@@ -807,6 +825,7 @@
       "sem-success-high-contrast": "#002616e6",
       "sem-success-light": "#00713fde",
       "sem-success-on-high-contrast": "#fbfefc",
+      "sem-success-on-soft": "#002616e6",
       "sem-success-on-solid": "#ffffff",
       "sem-success-soft": "#00a43319",
       "sem-success-soft-hover": "#00a83829",
@@ -822,6 +841,7 @@
       "sem-teal-high-contrast": "#00332df2",
       "sem-teal-light": "#008573",
       "sem-teal-on-high-contrast": "#fafefd",
+      "sem-teal-on-soft": "#00332df2",
       "sem-teal-on-solid": "#ffffff",
       "sem-teal-soft": "#00c69d1f",
       "sem-teal-soft-hover": "#00c39633",
@@ -837,6 +857,7 @@
       "sem-warning-high-contrast": "#431200e2",
       "sem-warning-light": "#cc4e00",
       "sem-warning-on-high-contrast": "#fefcfb",
+      "sem-warning-on-soft": "#431200e2",
       "sem-warning-on-solid": "#ffffff",
       "sem-warning-soft": "#ff9c0029",
       "sem-warning-soft-hover": "#ff91014a",
@@ -852,6 +873,7 @@
       "sem-yellow-high-contrast": "#2e2000e0",
       "sem-yellow-light": "#9e6c00",
       "sem-yellow-on-high-contrast": "#fdfdf9",
+      "sem-yellow-on-soft": "#2e2000e0",
       "sem-yellow-on-solid": "#21201c",
       "sem-yellow-soft": "#ffee0047",
       "sem-yellow-soft-hover": "#ffe3016b",
@@ -902,13 +924,21 @@
       "sky-indicator": "#7ce2fe",
       "sky-surface": "#eef9fdcc",
       "sky-track": "#7ce2fe",
+      "spacing-element-0-5": "0.125rem",
       "spacing-element-1": "0.25rem",
+      "spacing-element-1-5": "0.375rem",
       "spacing-element-2": "0.5rem",
+      "spacing-element-2-5": "0.625rem",
       "spacing-element-3": "0.75rem",
       "spacing-group-1": "0.5rem",
       "spacing-group-2": "1rem",
+      "spacing-layout-0-5": "1.25rem",
       "spacing-layout-1": "1.5rem",
+      "spacing-layout-1-5": "1.75rem",
       "spacing-layout-2": "2rem",
+      "spacing-layout-2-5": "2.25rem",
+      "spacing-layout-3": "2.5rem",
+      "spacing-layout-4": "3rem",
       "spacing-none": "0px",
       "success-1": "#fbfefc",
       "success-10": "#2b9a66",
@@ -1601,6 +1631,7 @@
       "sem-accent-high-contrast": "#c5e4ff",
       "sem-accent-light": "#71b8ff",
       "sem-accent-on-high-contrast": "#07121f",
+      "sem-accent-on-soft": "#c5e4ff",
       "sem-accent-on-solid": "#ffffff",
       "sem-accent-soft": "#0060fe44",
       "sem-accent-soft-hover": "#005dff65",
@@ -1616,6 +1647,7 @@
       "sem-blue-high-contrast": "#c2e6ff",
       "sem-blue-light": "#70b8ff",
       "sem-blue-on-high-contrast": "#0d1520",
+      "sem-blue-on-soft": "#c2e6ff",
       "sem-blue-on-solid": "#ffffff",
       "sem-blue-soft": "#0077ff3a",
       "sem-blue-soft-hover": "#0075ff57",
@@ -1632,6 +1664,7 @@
       "sem-bronze-high-contrast": "#fff1e9ec",
       "sem-bronze-light": "#ffd7c6d1",
       "sem-bronze-on-high-contrast": "#141110",
+      "sem-bronze-on-soft": "#fff1e9ec",
       "sem-bronze-on-solid": "#ffffff",
       "sem-bronze-soft": "#faceb817",
       "sem-bronze-soft-hover": "#facdb622",
@@ -1647,6 +1680,7 @@
       "sem-cyan-high-contrast": "#bbf3fef7",
       "sem-cyan-light": "#52e1fee5",
       "sem-cyan-on-high-contrast": "#0b161a",
+      "sem-cyan-on-soft": "#bbf3fef7",
       "sem-cyan-on-solid": "#ffffff",
       "sem-cyan-soft": "#00befd28",
       "sem-cyan-soft-hover": "#00baff3b",
@@ -1662,6 +1696,7 @@
       "sem-error-high-contrast": "#ffcdc4",
       "sem-error-light": "#ff9081",
       "sem-error-on-high-contrast": "#190e0c",
+      "sem-error-on-soft": "#ffcdc4",
       "sem-error-on-solid": "#ffffff",
       "sem-error-soft": "#fe000037",
       "sem-error-soft-hover": "#fe000053",
@@ -1671,12 +1706,14 @@
       "sem-error-surface-hover": "#fe000037",
       "sem-error-ui": "#fe11119a",
       "sem-error-ui-hover": "#ff191acc",
+      "sem-focus-ring": "#71b8ff",
       "sem-gray-contrast": "#ffffff",
       "sem-gray-default": "#fdfdffef",
       "sem-gray-disabled": "#eee7ff5d",
       "sem-gray-high-contrast": "#fdfdffef",
       "sem-gray-light": "#f5f1ffb7",
       "sem-gray-on-high-contrast": "#121113",
+      "sem-gray-on-soft": "#fdfdffef",
       "sem-gray-on-solid": "#ffffff",
       "sem-gray-soft": "#ebeaf814",
       "sem-gray-soft-hover": "#eee5f81d",
@@ -1692,6 +1729,7 @@
       "sem-green-high-contrast": "#bbffd7f0",
       "sem-green-light": "#46fea5d4",
       "sem-green-on-high-contrast": "#0e1512",
+      "sem-green-on-soft": "#bbffd7f0",
       "sem-green-on-solid": "#ffffff",
       "sem-green-soft": "#22ff991e",
       "sem-green-soft-hover": "#11ff992d",
@@ -1707,6 +1745,7 @@
       "sem-indigo-high-contrast": "#d6e1ff",
       "sem-indigo-light": "#9eb1ff",
       "sem-indigo-on-high-contrast": "#11131f",
+      "sem-indigo-on-soft": "#d6e1ff",
       "sem-indigo-on-solid": "#ffffff",
       "sem-indigo-soft": "#2f62ff3c",
       "sem-indigo-soft-hover": "#3566ff57",
@@ -1722,6 +1761,7 @@
       "sem-info-high-contrast": "#c2e6ff",
       "sem-info-light": "#70b8ff",
       "sem-info-on-high-contrast": "#0d1520",
+      "sem-info-on-soft": "#c2e6ff",
       "sem-info-on-solid": "#ffffff",
       "sem-info-soft": "#0077ff3a",
       "sem-info-soft-hover": "#0075ff57",
@@ -1740,6 +1780,7 @@
       "sem-lime-high-contrast": "#e9febff7",
       "sem-lime-light": "#d1fe77e4",
       "sem-lime-on-high-contrast": "#11130c",
+      "sem-lime-on-soft": "#e9febff7",
       "sem-lime-on-solid": "#1d211c",
       "sem-lime-soft": "#9bfd4c1a",
       "sem-lime-soft-hover": "#a7fe5c29",
@@ -1755,6 +1796,7 @@
       "sem-mauve-high-contrast": "#fdfdffef",
       "sem-mauve-light": "#f5f1ffb7",
       "sem-mauve-on-high-contrast": "#121113",
+      "sem-mauve-on-soft": "#fdfdffef",
       "sem-mauve-on-solid": "#ffffff",
       "sem-mauve-soft": "#ebeaf814",
       "sem-mauve-soft-hover": "#eee5f81d",
@@ -1770,6 +1812,7 @@
       "sem-mint-high-contrast": "#cbfee9f5",
       "sem-mint-light": "#67ffded2",
       "sem-mint-on-high-contrast": "#0e1515",
+      "sem-mint-on-soft": "#cbfee9f5",
       "sem-mint-on-solid": "#1a211e",
       "sem-mint-soft": "#00fff61d",
       "sem-mint-soft-hover": "#00fff42c",
@@ -1785,6 +1828,7 @@
       "sem-orange-high-contrast": "#ffe0c2",
       "sem-orange-light": "#ffa057",
       "sem-orange-on-high-contrast": "#17120e",
+      "sem-orange-on-soft": "#ffe0c2",
       "sem-orange-on-solid": "#ffffff",
       "sem-orange-soft": "#fb6a0025",
       "sem-orange-soft-hover": "#ff590039",
@@ -1800,6 +1844,7 @@
       "sem-pink-high-contrast": "#ffd3ecfd",
       "sem-pink-light": "#ff8dcc",
       "sem-pink-on-high-contrast": "#191117",
+      "sem-pink-on-soft": "#ffd3ecfd",
       "sem-pink-on-solid": "#ffffff",
       "sem-pink-soft": "#fe37cc29",
       "sem-pink-soft-hover": "#fc1ec43f",
@@ -1815,6 +1860,7 @@
       "sem-purple-high-contrast": "#f1ddfffa",
       "sem-purple-light": "#d19dff",
       "sem-purple-on-high-contrast": "#18111b",
+      "sem-purple-on-soft": "#f1ddfffa",
       "sem-purple-on-solid": "#ffffff",
       "sem-purple-soft": "#c150ff2d",
       "sem-purple-soft-hover": "#bb53fd42",
@@ -1830,6 +1876,7 @@
       "sem-red-high-contrast": "#ffcdc4",
       "sem-red-light": "#ff9081",
       "sem-red-on-high-contrast": "#190e0c",
+      "sem-red-on-soft": "#ffcdc4",
       "sem-red-on-solid": "#ffffff",
       "sem-red-soft": "#fe000037",
       "sem-red-soft-hover": "#fe000053",
@@ -1845,6 +1892,7 @@
       "sem-sky-high-contrast": "#c2f3ff",
       "sem-sky-light": "#7cd3ffef",
       "sem-sky-on-high-contrast": "#0d141f",
+      "sem-sky-on-soft": "#c2f3ff",
       "sem-sky-on-solid": "#1c2024",
       "sem-sky-soft": "#1184fc33",
       "sem-sky-soft-hover": "#128fff49",
@@ -1860,6 +1908,7 @@
       "sem-success-high-contrast": "#bbffd7f0",
       "sem-success-light": "#46fea5d4",
       "sem-success-on-high-contrast": "#0e1512",
+      "sem-success-on-soft": "#bbffd7f0",
       "sem-success-on-solid": "#ffffff",
       "sem-success-soft": "#22ff991e",
       "sem-success-soft-hover": "#11ff992d",
@@ -1875,6 +1924,7 @@
       "sem-teal-high-contrast": "#b8ffebef",
       "sem-teal-light": "#0afed5d6",
       "sem-teal-on-high-contrast": "#0d1514",
+      "sem-teal-on-soft": "#b8ffebef",
       "sem-teal-on-solid": "#ffffff",
       "sem-teal-soft": "#00ffe61e",
       "sem-teal-soft-hover": "#00ffe92d",
@@ -1890,6 +1940,7 @@
       "sem-warning-high-contrast": "#ffe0c2",
       "sem-warning-light": "#ffa057",
       "sem-warning-on-high-contrast": "#17120e",
+      "sem-warning-on-soft": "#ffe0c2",
       "sem-warning-on-solid": "#ffffff",
       "sem-warning-soft": "#fb6a0025",
       "sem-warning-soft-hover": "#ff590039",
@@ -1905,6 +1956,7 @@
       "sem-yellow-high-contrast": "#fef6baf6",
       "sem-yellow-light": "#fee949f5",
       "sem-yellow-on-high-contrast": "#14120b",
+      "sem-yellow-on-soft": "#fef6baf6",
       "sem-yellow-on-solid": "#21201c",
       "sem-yellow-soft": "#ffaa001e",
       "sem-yellow-soft-hover": "#fdb70028",
@@ -1955,13 +2007,21 @@
       "sky-indicator": "#7ce2fe",
       "sky-surface": "#13233b80",
       "sky-track": "#7ce2fe",
+      "spacing-element-0-5": "0.125rem",
       "spacing-element-1": "0.25rem",
+      "spacing-element-1-5": "0.375rem",
       "spacing-element-2": "0.5rem",
+      "spacing-element-2-5": "0.625rem",
       "spacing-element-3": "0.75rem",
       "spacing-group-1": "0.5rem",
       "spacing-group-2": "1rem",
+      "spacing-layout-0-5": "1.25rem",
       "spacing-layout-1": "1.5rem",
+      "spacing-layout-1-5": "1.75rem",
       "spacing-layout-2": "2rem",
+      "spacing-layout-2-5": "2.25rem",
+      "spacing-layout-3": "2.5rem",
+      "spacing-layout-4": "3rem",
       "spacing-none": "0px",
       "success-1": "#0e1512",
       "success-10": "#33b074",
@@ -2109,5 +2169,70 @@
       "yellow-surface": "#231f1380",
       "yellow-track": "#ffe629"
     }
+  },
+  "densities": {
+    "compact": {
+      "button-base-min-height": "2rem",
+      "button-base-padding-inline": "0.75rem",
+      "button-icon-size": "1.75rem",
+      "field-input-height": "1.25rem",
+      "field-padding-x": "0.5rem",
+      "field-padding-y": "0.25rem",
+      "field-set-gap": "1.5rem",
+      "list-index-min-width": "1.5rem",
+      "list-index-padding-x": "0.375rem",
+      "list-item-gap": "0.5rem",
+      "list-item-min-height": "2rem",
+      "list-item-padding-x": "0.5rem",
+      "list-item-padding-y": "0.25rem",
+      "select-content-gap": "0.125rem",
+      "select-content-padding": "0.25rem",
+      "select-item-padding-left": "0.25rem",
+      "select-item-padding-y": "0.25rem",
+      "table-cell-padding-y": "0.375rem",
+      "table-head-height": "2rem"
+    },
+    "normal": {
+      "button-base-min-height": "2rem",
+      "button-base-padding-inline": "1rem",
+      "button-icon-size": "2rem",
+      "field-input-height": "1.5rem",
+      "field-padding-x": "0.75rem",
+      "field-padding-y": "0.5rem",
+      "field-set-gap": "2rem",
+      "list-index-min-width": "1.75rem",
+      "list-index-padding-x": "0.5rem",
+      "list-item-gap": "0.75rem",
+      "list-item-min-height": "2.5rem",
+      "list-item-padding-x": "0.75rem",
+      "list-item-padding-y": "0.5rem",
+      "select-content-gap": "0.25rem",
+      "select-content-padding": "0.5rem",
+      "select-item-padding-left": "0.5rem",
+      "select-item-padding-y": "0.375rem",
+      "table-cell-padding-y": "0.5rem",
+      "table-head-height": "2.25rem"
+    },
+    "comfortable": {
+      "button-base-min-height": "2.5rem",
+      "button-base-padding-inline": "1.25rem",
+      "button-icon-size": "2.5rem",
+      "field-input-height": "1.75rem",
+      "field-padding-x": "1rem",
+      "field-padding-y": "0.75rem",
+      "field-set-gap": "2.5rem",
+      "list-index-min-width": "2rem",
+      "list-index-padding-x": "0.5rem",
+      "list-item-gap": "1rem",
+      "list-item-min-height": "3rem",
+      "list-item-padding-x": "1rem",
+      "list-item-padding-y": "0.75rem",
+      "select-content-gap": "0.375rem",
+      "select-content-padding": "0.75rem",
+      "select-item-padding-left": "0.75rem",
+      "select-item-padding-y": "0.625rem",
+      "table-cell-padding-y": "0.75rem",
+      "table-head-height": "2.5rem"
+    }
   }
 }