@servicetitan/anvil2 3.16.1 → 3.18.0

package/dist/token/core/component.js

@@ -2578,11 +2578,11 @@ export const ChipDefaultBackgroundColorActive = {
  * @description non-interactive
  */
 export const ChipDefaultBorderColor = {
-  value: "#eeeeee",
+  value: "#c4c4c4",
   extensions: {
     appearance: {
       dark: {
-        value: "#545454"
+        value: "#707070"
       }
     }
   }
@@ -2591,11 +2591,11 @@ export const ChipDefaultBorderColor = {
  * @type {TokenWithAppearance}
  */
 export const ChipDefaultBorderColorHover = {
-  value: "#c4c4c4",
+  value: "#a8a8a8",
   extensions: {
     appearance: {
       dark: {
-        value: "#707070"
+        value: "#8b8b8b"
       }
     }
   }
@@ -2604,11 +2604,11 @@ export const ChipDefaultBorderColorHover = {
  * @type {TokenWithAppearance}
  */
 export const ChipDefaultBorderColorActive = {
-  value: "#a8a8a8",
+  value: "#8b8b8b",
   extensions: {
     appearance: {
       dark: {
-        value: "#8b8b8b"
+        value: "#a8a8a8"
       }
     }
   }
@@ -2701,7 +2701,7 @@ export const ChipInfoBorderColor = {
   extensions: {
     appearance: {
       dark: {
-        value: "#1d4ca3"
+        value: "#003472"
       }
     }
   }
@@ -2714,7 +2714,7 @@ export const ChipInfoBorderColorHover = {
   extensions: {
     appearance: {
       dark: {
-        value: "#0265dc"
+        value: "#1d4ca3"
       }
     }
   }
@@ -2727,7 +2727,7 @@ export const ChipInfoBorderColorActive = {
   extensions: {
     appearance: {
       dark: {
-        value: "#1a82ff"
+        value: "#0265dc"
       }
     }
   }
@@ -2779,7 +2779,7 @@ export const ChipSuccessBackgroundColor = {
   extensions: {
     appearance: {
       dark: {
-        value: "#022c1c"
+        value: "#04482e"
       }
     }
   }
@@ -2818,7 +2818,7 @@ export const ChipSuccessBorderColor = {
   extensions: {
     appearance: {
       dark: {
-        value: "#05613e"
+        value: "#04482e"
       }
     }
   }
@@ -2831,7 +2831,7 @@ export const ChipSuccessBorderColorHover = {
   extensions: {
     appearance: {
       dark: {
-        value: "#077e50"
+        value: "#05613e"
       }
     }
   }
@@ -2844,7 +2844,7 @@ export const ChipSuccessBorderColorActive = {
   extensions: {
     appearance: {
       dark: {
-        value: "#0aa86c"
+        value: "#077e50"
       }
     }
   }
@@ -2931,7 +2931,7 @@ export const ChipWarningBackgroundColorActive = {
  * @type {TokenWithAppearance}
  */
 export const ChipWarningBorderColor = {
-  value: "#fff0b1",
+  value: "#ffe278",
   extensions: {
     appearance: {
       dark: {
@@ -2944,7 +2944,7 @@ export const ChipWarningBorderColor = {
  * @type {TokenWithAppearance}
  */
 export const ChipWarningBorderColorHover = {
-  value: "#ffe278",
+  value: "#ffc902",
   extensions: {
     appearance: {
       dark: {
@@ -2957,7 +2957,7 @@ export const ChipWarningBorderColorHover = {
  * @type {TokenWithAppearance}
  */
 export const ChipWarningBorderColorActive = {
-  value: "#ffc902",
+  value: "#ffbe00",
   extensions: {
     appearance: {
       dark: {
@@ -3048,11 +3048,11 @@ export const ChipDangerBackgroundColorActive = {
  * @type {TokenWithAppearance}
  */
 export const ChipDangerBorderColor = {
-  value: "#ffd4cc",
+  value: "#ffac9e",
   extensions: {
     appearance: {
       dark: {
-        value: "#a31900"
+        value: "#731100"
       }
     }
   }
@@ -3061,11 +3061,11 @@ export const ChipDangerBorderColor = {
  * @type {TokenWithAppearance}
  */
 export const ChipDangerBorderColorHover = {
-  value: "#ffac9e",
+  value: "#ff8670",
   extensions: {
     appearance: {
       dark: {
-        value: "#d62100"
+        value: "#a31900"
       }
     }
   }
@@ -3074,11 +3074,11 @@ export const ChipDangerBorderColorHover = {
  * @type {TokenWithAppearance}
  */
 export const ChipDangerBorderColorActive = {
-  value: "#ff8670",
+  value: "#ff5b3d",
   extensions: {
     appearance: {
       dark: {
-        value: "#ff3914"
+        value: "#d62100"
       }
     }
   }
@@ -3165,11 +3165,11 @@ export const ChipInProgressBackgroundColorActive = {
  * @type {TokenWithAppearance}
  */
 export const ChipInProgressBorderColor = {
-  value: "#c2f2fb",
+  value: "#7fe5f6",
   extensions: {
     appearance: {
       dark: {
-        value: "#075563"
+        value: "#05424d"
       }
     }
   }
@@ -3178,11 +3178,11 @@ export const ChipInProgressBorderColor = {
  * @type {TokenWithAppearance}
  */
 export const ChipInProgressBorderColorHover = {
-  value: "#7fe5f6",
+  value: "#45d8f2",
   extensions: {
     appearance: {
       dark: {
-        value: "#0a7a8e"
+        value: "#075563"
       }
     }
   }
@@ -3191,11 +3191,11 @@ export const ChipInProgressBorderColorHover = {
  * @type {TokenWithAppearance}
  */
 export const ChipInProgressBorderColorActive = {
-  value: "#45d8f2",
+  value: "#10c2e2",
   extensions: {
     appearance: {
       dark: {
-        value: "#0da2bd"
+        value: "#0a7a8e"
       }
     }
   }
@@ -3286,7 +3286,7 @@ export const ChipTableEntityBorderColor = {
   extensions: {
     appearance: {
       dark: {
-        value: "#445e71"
+        value: "#24333d"
       }
     }
   }
@@ -3299,7 +3299,7 @@ export const ChipTableEntityBorderColorHover = {
   extensions: {
     appearance: {
       dark: {
-        value: "#55768e"
+        value: "#344856"
       }
     }
   }
@@ -3312,7 +3312,7 @@ export const ChipTableEntityBorderColorActive = {
   extensions: {
     appearance: {
       dark: {
-        value: "#7899b0"
+        value: "#445e71"
       }
     }
   }
@@ -3403,7 +3403,7 @@ export const ChipBrownBorderColor = {
   extensions: {
     appearance: {
       dark: {
-        value: "#74462a"
+        value: "#432918"
       }
     }
   }
@@ -3416,7 +3416,7 @@ export const ChipBrownBorderColorHover = {
   extensions: {
     appearance: {
       dark: {
-        value: "#a9663d"
+        value: "#5e3922"
       }
     }
   }
@@ -3429,7 +3429,7 @@ export const ChipBrownBorderColorActive = {
   extensions: {
     appearance: {
       dark: {
-        value: "#c5855e"
+        value: "#74462a"
       }
     }
   }
@@ -3520,7 +3520,7 @@ export const ChipLimeBorderColor = {
   extensions: {
     appearance: {
       dark: {
-        value: "#3a5007"
+        value: "#2a3a03"
       }
     }
   }
@@ -3533,7 +3533,7 @@ export const ChipLimeBorderColorHover = {
   extensions: {
     appearance: {
       dark: {
-        value: "#56750b"
+        value: "#3a5007"
       }
     }
   }
@@ -3546,7 +3546,7 @@ export const ChipLimeBorderColorActive = {
   extensions: {
     appearance: {
       dark: {
-        value: "#6b9013"
+        value: "#56750b"
       }
     }
   }
@@ -3637,7 +3637,7 @@ export const ChipMagentaBorderColor = {
   extensions: {
     appearance: {
       dark: {
-        value: "#831b60"
+        value: "#591342"
       }
     }
   }
@@ -3650,7 +3650,7 @@ export const ChipMagentaBorderColorHover = {
   extensions: {
     appearance: {
       dark: {
-        value: "#be288d"
+        value: "#831b60"
       }
     }
   }
@@ -3663,7 +3663,7 @@ export const ChipMagentaBorderColorActive = {
   extensions: {
     appearance: {
       dark: {
-        value: "#d741a6"
+        value: "#be288d"
       }
     }
   }
@@ -3750,7 +3750,7 @@ export const ChipMauveBackgroundColorActive = {
  * @type {TokenWithAppearance}
  */
 export const ChipMauveBorderColor = {
-  value: "#fff4f0",
+  value: "#ffd1c2",
   extensions: {
     appearance: {
       dark: {
@@ -3763,7 +3763,7 @@ export const ChipMauveBorderColor = {
  * @type {TokenWithAppearance}
  */
 export const ChipMauveBorderColorHover = {
-  value: "#ffe4db",
+  value: "#ffaf94",
   extensions: {
     appearance: {
       dark: {
@@ -3776,7 +3776,7 @@ export const ChipMauveBorderColorHover = {
  * @type {TokenWithAppearance}
  */
 export const ChipMauveBorderColorActive = {
-  value: "#ffd1c2",
+  value: "#ffa78a",
   extensions: {
     appearance: {
       dark: {
@@ -3871,7 +3871,7 @@ export const ChipOrangeBorderColor = {
   extensions: {
     appearance: {
       dark: {
-        value: "#693700"
+        value: "#4d2800"
       }
     }
   }
@@ -3884,7 +3884,7 @@ export const ChipOrangeBorderColorHover = {
   extensions: {
     appearance: {
       dark: {
-        value: "#964f00"
+        value: "#693700"
       }
     }
   }
@@ -3897,7 +3897,7 @@ export const ChipOrangeBorderColorActive = {
   extensions: {
     appearance: {
       dark: {
-        value: "#c16500"
+        value: "#964f00"
       }
     }
   }
@@ -3988,7 +3988,7 @@ export const ChipPurpleBorderColor = {
   extensions: {
     appearance: {
       dark: {
-        value: "#3f2f8e"
+        value: "#2e2267"
       }
     }
   }
@@ -4001,7 +4001,7 @@ export const ChipPurpleBorderColorHover = {
   extensions: {
     appearance: {
       dark: {
-        value: "#5c47c2"
+        value: "#3f2f8e"
       }
     }
   }
@@ -4014,7 +4014,7 @@ export const ChipPurpleBorderColorActive = {
   extensions: {
     appearance: {
       dark: {
-        value: "#7766cc"
+        value: "#5c47c2"
       }
     }
   }
@@ -4244,6 +4244,23 @@ export const ComboboxItemDisabledIconColor = {
  * @type {TokenValue}
  */
 export const ComboboxItemDisabledOpacity = { value: "0.6" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const DataTablePinnedColumnShadowColor = {
+  value: "#04040480",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff80"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenValue}
+ */
+export const DataTablePinnedColumnShadowOpacity = { value: "0.2" };
 /**
  * @type {TokenWithAppearance}
  */

package/dist/token/core/component.scss

@@ -202,9 +202,9 @@ $chip-default-background-color: var(--a2-chip-default-background-color, light-da
 $chip-default-background-color-hover: var(--a2-chip-default-background-color-hover, light-dark(var(--a2-background-color-stronger, var(--a2-color-neutral-50, #eeeeee)), var(--a2-color-neutral-700, #404040)));
 $chip-default-background-color-active: var(--a2-chip-default-background-color-active, light-dark(var(--a2-background-color-stronger, var(--a2-color-neutral-50, #eeeeee)), var(--a2-color-neutral-700, #404040)));
 // non-interactive
-$chip-default-border-color: var(--a2-chip-default-border-color, light-dark(var(--a2-background-color-stronger, var(--a2-color-neutral-50, #eeeeee)), var(--a2-color-neutral-600, #545454)));
-$chip-default-border-color-hover: var(--a2-chip-default-border-color-hover, light-dark(var(--a2-background-color-strongest, var(--a2-color-neutral-200, #c4c4c4)), var(--a2-color-neutral-500, #707070)));
-$chip-default-border-color-active: var(--a2-chip-default-border-color-active, light-dark(var(--a2-background-color-strongest-hover, var(--a2-color-neutral-300, #a8a8a8)), var(--a2-color-neutral-400, #8b8b8b)));
+$chip-default-border-color: var(--a2-chip-default-border-color, var(--a2-background-color-strongest, light-dark(var(--a2-color-neutral-200, #c4c4c4), var(--a2-color-neutral-500, #707070))));
+$chip-default-border-color-hover: var(--a2-chip-default-border-color-hover, var(--a2-background-color-strongest-hover, light-dark(var(--a2-color-neutral-300, #a8a8a8), var(--a2-color-neutral-400, #8b8b8b))));
+$chip-default-border-color-active: var(--a2-chip-default-border-color-active, var(--a2-background-color-strongest-active, light-dark(var(--a2-color-neutral-400, #8b8b8b), var(--a2-color-neutral-300, #a8a8a8))));
 $chip-default-foreground-color: var(--a2-chip-default-foreground-color, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-30, #f6f6f6)));
 $chip-default-foreground-color-hover: var(--a2-chip-default-foreground-color-hover, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-30, #f6f6f6)));
 $chip-default-foreground-color-active: var(--a2-chip-default-foreground-color-active, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-foreground-color-default, var(--a2-color-neutral-950, #040404))));
@@ -213,108 +213,108 @@ $chip-info-background-color: var(--a2-chip-info-background-color, light-dark(var
 $chip-info-background-color-hover: var(--a2-chip-info-background-color-hover, light-dark(var(--a2-color-blue-200, #9ecaff), var(--a2-color-blue-800, #003472)));
 $chip-info-background-color-active: var(--a2-chip-info-background-color-active, light-dark(var(--a2-color-blue-200, #9ecaff), var(--a2-color-blue-800, #003472)));
 // call-out
-$chip-info-border-color: var(--a2-chip-info-border-color, light-dark(var(--a2-color-blue-200, #9ecaff), var(--a2-color-blue-700, #1d4ca3)));
-$chip-info-border-color-hover: var(--a2-chip-info-border-color-hover, light-dark(var(--a2-color-blue-300, #70b1ff), var(--a2-color-blue-600, #0265dc)));
-$chip-info-border-color-active: var(--a2-chip-info-border-color-active, light-dark(var(--a2-color-blue-400, #3d95ff), var(--a2-color-blue-500, #1a82ff)));
+$chip-info-border-color: var(--a2-chip-info-border-color, light-dark(var(--a2-color-blue-200, #9ecaff), var(--a2-color-blue-800, #003472)));
+$chip-info-border-color-hover: var(--a2-chip-info-border-color-hover, light-dark(var(--a2-color-blue-300, #70b1ff), var(--a2-color-blue-700, #1d4ca3)));
+$chip-info-border-color-active: var(--a2-chip-info-border-color-active, light-dark(var(--a2-color-blue-400, #3d95ff), var(--a2-color-blue-600, #0265dc)));
 $chip-info-foreground-color: var(--a2-chip-info-foreground-color, light-dark(var(--a2-color-blue-900, #002047), var(--a2-color-blue-10, #fafcff)));
 $chip-info-foreground-color-hover: var(--a2-chip-info-foreground-color-hover, light-dark(var(--a2-color-blue-900, #002047), var(--a2-color-blue-10, #fafcff)));
 $chip-info-foreground-color-active: var(--a2-chip-info-foreground-color-active, light-dark(var(--a2-color-blue-950, #000b19), var(--a2-foreground-color-default, var(--a2-color-neutral-950, #040404))));
-$chip-success-background-color: var(--a2-chip-success-background-color, light-dark(var(--a2-color-green-100, #b8f5dd), var(--a2-color-green-900, #022c1c)));
+$chip-success-background-color: var(--a2-chip-success-background-color, light-dark(var(--a2-color-green-100, #b8f5dd), var(--a2-color-green-800, #04482e)));
 $chip-success-background-color-hover: var(--a2-chip-success-background-color-hover, light-dark(var(--a2-color-green-200, #70ebbc), var(--a2-color-green-800, #04482e)));
 $chip-success-background-color-active: var(--a2-chip-success-background-color-active, light-dark(var(--a2-color-green-200, #70ebbc), var(--a2-color-green-800, #04482e)));
-$chip-success-border-color: var(--a2-chip-success-border-color, light-dark(var(--a2-color-green-200, #70ebbc), var(--a2-color-green-700, #05613e)));
-$chip-success-border-color-hover: var(--a2-chip-success-border-color-hover, light-dark(var(--a2-color-green-300, #3be3a2), var(--a2-color-green-600, #077e50)));
-$chip-success-border-color-active: var(--a2-chip-success-border-color-active, light-dark(var(--a2-color-green-400, #0bd085), var(--a2-color-green-500, #0aa86c)));
+$chip-success-border-color: var(--a2-chip-success-border-color, light-dark(var(--a2-color-green-200, #70ebbc), var(--a2-color-green-800, #04482e)));
+$chip-success-border-color-hover: var(--a2-chip-success-border-color-hover, light-dark(var(--a2-color-green-300, #3be3a2), var(--a2-color-green-700, #05613e)));
+$chip-success-border-color-active: var(--a2-chip-success-border-color-active, light-dark(var(--a2-color-green-400, #0bd085), var(--a2-color-green-600, #077e50)));
 $chip-success-foreground-color: var(--a2-chip-success-foreground-color, light-dark(var(--a2-color-green-900, #022c1c), var(--a2-color-green-10, #f5fefb)));
 $chip-success-foreground-color-hover: var(--a2-chip-success-foreground-color-hover, light-dark(var(--a2-color-green-900, #022c1c), var(--a2-color-green-10, #f5fefb)));
 $chip-success-foreground-color-active: var(--a2-chip-success-foreground-color-active, light-dark(var(--a2-color-green-950, #010f0a), var(--a2-foreground-color-default, var(--a2-color-neutral-950, #040404))));
 $chip-warning-background-color: var(--a2-chip-warning-background-color, light-dark(var(--a2-color-yellow-100, #fff9e2), var(--a2-color-yellow-900, #382500)));
 $chip-warning-background-color-hover: var(--a2-chip-warning-background-color-hover, light-dark(var(--a2-color-yellow-200, #fff0b1), var(--a2-color-yellow-800, #704b00)));
 $chip-warning-background-color-active: var(--a2-chip-warning-background-color-active, light-dark(var(--a2-color-yellow-200, #fff0b1), var(--a2-color-yellow-800, #704b00)));
-$chip-warning-border-color: var(--a2-chip-warning-border-color, light-dark(var(--a2-color-yellow-200, #fff0b1), var(--a2-color-yellow-800, #704b00)));
-$chip-warning-border-color-hover: var(--a2-chip-warning-border-color-hover, light-dark(var(--a2-color-yellow-300, #ffe278), var(--a2-color-yellow-700, #c98600)));
-$chip-warning-border-color-active: var(--a2-chip-warning-border-color-active, light-dark(var(--a2-color-yellow-400, #ffc902), var(--a2-color-yellow-600, #de9500)));
+$chip-warning-border-color: var(--a2-chip-warning-border-color, light-dark(var(--a2-color-yellow-300, #ffe278), var(--a2-color-yellow-800, #704b00)));
+$chip-warning-border-color-hover: var(--a2-chip-warning-border-color-hover, light-dark(var(--a2-color-yellow-400, #ffc902), var(--a2-color-yellow-700, #c98600)));
+$chip-warning-border-color-active: var(--a2-chip-warning-border-color-active, light-dark(var(--a2-color-yellow-500, #ffbe00), var(--a2-color-yellow-600, #de9500)));
 $chip-warning-foreground-color: var(--a2-chip-warning-foreground-color, light-dark(var(--a2-color-yellow-900, #382500), var(--a2-color-yellow-10, #fffef8)));
 $chip-warning-foreground-color-hover: var(--a2-chip-warning-foreground-color-hover, light-dark(var(--a2-color-yellow-900, #382500), var(--a2-color-yellow-10, #fffef8)));
 $chip-warning-foreground-color-active: var(--a2-chip-warning-foreground-color-active, light-dark(var(--a2-color-yellow-950, #191100), var(--a2-foreground-color-default, var(--a2-color-neutral-950, #040404))));
 $chip-danger-background-color: var(--a2-chip-danger-background-color, light-dark(var(--a2-color-red-50, #ffe9e5), var(--a2-color-red-900, #470b00)));
 $chip-danger-background-color-hover: var(--a2-chip-danger-background-color-hover, light-dark(var(--a2-color-red-100, #ffd4cc), var(--a2-color-red-800, #731100)));
 $chip-danger-background-color-active: var(--a2-chip-danger-background-color-active, light-dark(var(--a2-color-red-100, #ffd4cc), var(--a2-color-red-800, #731100)));
-$chip-danger-border-color: var(--a2-chip-danger-border-color, light-dark(var(--a2-color-red-100, #ffd4cc), var(--a2-color-red-700, #a31900)));
-$chip-danger-border-color-hover: var(--a2-chip-danger-border-color-hover, light-dark(var(--a2-color-red-200, #ffac9e), var(--a2-color-red-600, #d62100)));
-$chip-danger-border-color-active: var(--a2-chip-danger-border-color-active, light-dark(var(--a2-color-red-300, #ff8670), var(--a2-color-red-500, #ff3914)));
+$chip-danger-border-color: var(--a2-chip-danger-border-color, light-dark(var(--a2-color-red-200, #ffac9e), var(--a2-color-red-800, #731100)));
+$chip-danger-border-color-hover: var(--a2-chip-danger-border-color-hover, light-dark(var(--a2-color-red-300, #ff8670), var(--a2-color-red-700, #a31900)));
+$chip-danger-border-color-active: var(--a2-chip-danger-border-color-active, light-dark(var(--a2-color-red-400, #ff5b3d), var(--a2-color-red-600, #d62100)));
 $chip-danger-foreground-color: var(--a2-chip-danger-foreground-color, light-dark(var(--a2-color-red-900, #470b00), var(--a2-color-red-10, #fffbfa)));
 $chip-danger-foreground-color-hover: var(--a2-chip-danger-foreground-color-hover, light-dark(var(--a2-color-red-900, #470b00), var(--a2-color-red-10, #fffbfa)));
 $chip-danger-foreground-color-active: var(--a2-chip-danger-foreground-color-active, light-dark(var(--a2-color-red-950, #0a0200), var(--a2-foreground-color-default, var(--a2-color-neutral-950, #040404))));
 $chip-in-progress-background-color: var(--a2-chip-in-progress-background-color, light-dark(var(--a2-color-cyan-50, #daf7fc), var(--a2-color-cyan-900, #032025)));
 $chip-in-progress-background-color-hover: var(--a2-chip-in-progress-background-color-hover, light-dark(var(--a2-color-cyan-100, #c2f2fb), var(--a2-color-cyan-800, #05424d)));
 $chip-in-progress-background-color-active: var(--a2-chip-in-progress-background-color-active, light-dark(var(--a2-color-cyan-100, #c2f2fb), var(--a2-color-cyan-800, #05424d)));
-$chip-in-progress-border-color: var(--a2-chip-in-progress-border-color, light-dark(var(--a2-color-cyan-100, #c2f2fb), var(--a2-color-cyan-700, #075563)));
-$chip-in-progress-border-color-hover: var(--a2-chip-in-progress-border-color-hover, light-dark(var(--a2-color-cyan-200, #7fe5f6), var(--a2-color-cyan-600, #0a7a8e)));
-$chip-in-progress-border-color-active: var(--a2-chip-in-progress-border-color-active, light-dark(var(--a2-color-cyan-300, #45d8f2), var(--a2-color-cyan-500, #0da2bd)));
+$chip-in-progress-border-color: var(--a2-chip-in-progress-border-color, light-dark(var(--a2-color-cyan-200, #7fe5f6), var(--a2-color-cyan-800, #05424d)));
+$chip-in-progress-border-color-hover: var(--a2-chip-in-progress-border-color-hover, light-dark(var(--a2-color-cyan-300, #45d8f2), var(--a2-color-cyan-700, #075563)));
+$chip-in-progress-border-color-active: var(--a2-chip-in-progress-border-color-active, light-dark(var(--a2-color-cyan-400, #10c2e2), var(--a2-color-cyan-600, #0a7a8e)));
 $chip-in-progress-foreground-color: var(--a2-chip-in-progress-foreground-color, light-dark(var(--a2-color-cyan-900, #032025), var(--a2-color-cyan-10, #f2fcfe)));
 $chip-in-progress-foreground-color-hover: var(--a2-chip-in-progress-foreground-color-hover, light-dark(var(--a2-color-cyan-900, #032025), var(--a2-color-cyan-10, #f2fcfe)));
 $chip-in-progress-foreground-color-active: var(--a2-chip-in-progress-foreground-color-active, light-dark(var(--a2-color-cyan-950, #011013), var(--a2-foreground-color-default, var(--a2-color-neutral-950, #040404))));
 $chip-table-entity-background-color: var(--a2-chip-table-entity-background-color, light-dark(var(--a2-color-blue-grey-100, #dce4ea), var(--a2-color-blue-grey-900, #192329)));
 $chip-table-entity-background-color-hover: var(--a2-chip-table-entity-background-color-hover, light-dark(var(--a2-color-blue-grey-200, #b9c9d5), var(--a2-color-blue-grey-800, #24333d)));
 $chip-table-entity-background-color-active: var(--a2-chip-table-entity-background-color-active, light-dark(var(--a2-color-blue-grey-200, #b9c9d5), var(--a2-color-blue-grey-800, #24333d)));
-$chip-table-entity-border-color: var(--a2-chip-table-entity-border-color, light-dark(var(--a2-color-blue-grey-200, #b9c9d5), var(--a2-color-blue-grey-600, #445e71)));
-$chip-table-entity-border-color-hover: var(--a2-chip-table-entity-border-color-hover, light-dark(var(--a2-color-blue-grey-300, #99b1c2), var(--a2-color-blue-grey-500, #55768e)));
-$chip-table-entity-border-color-active: var(--a2-chip-table-entity-border-color-active, var(--a2-color-blue-grey-400, #7899b0));
+$chip-table-entity-border-color: var(--a2-chip-table-entity-border-color, light-dark(var(--a2-color-blue-grey-200, #b9c9d5), var(--a2-color-blue-grey-800, #24333d)));
+$chip-table-entity-border-color-hover: var(--a2-chip-table-entity-border-color-hover, light-dark(var(--a2-color-blue-grey-300, #99b1c2), var(--a2-color-blue-grey-700, #344856)));
+$chip-table-entity-border-color-active: var(--a2-chip-table-entity-border-color-active, light-dark(var(--a2-color-blue-grey-400, #7899b0), var(--a2-color-blue-grey-600, #445e71)));
 $chip-table-entity-foreground-color: var(--a2-chip-table-entity-foreground-color, light-dark(var(--a2-color-blue-grey-900, #192329), var(--a2-color-blue-grey-10, #f7f9fa)));
 $chip-table-entity-foreground-color-hover: var(--a2-chip-table-entity-foreground-color-hover, light-dark(var(--a2-color-blue-grey-900, #192329), var(--a2-color-blue-grey-10, #f7f9fa)));
 $chip-table-entity-foreground-color-active: var(--a2-chip-table-entity-foreground-color-active, light-dark(var(--a2-color-blue-grey-950, #090d10), var(--a2-foreground-color-default, var(--a2-color-neutral-950, #040404))));
 $chip-brown-background-color: var(--a2-chip-brown-background-color, light-dark(var(--a2-color-brown-100, #eddace), var(--a2-color-brown-900, #1e120b)));
 $chip-brown-background-color-hover: var(--a2-chip-brown-background-color-hover, light-dark(var(--a2-color-brown-200, #e1c1ad), var(--a2-color-brown-800, #432918)));
 $chip-brown-background-color-active: var(--a2-chip-brown-background-color-active, light-dark(var(--a2-color-brown-200, #e1c1ad), var(--a2-color-brown-800, #432918)));
-$chip-brown-border-color: var(--a2-chip-brown-border-color, light-dark(var(--a2-color-brown-200, #e1c1ad), var(--a2-color-brown-600, #74462a)));
-$chip-brown-border-color-hover: var(--a2-chip-brown-border-color-hover, light-dark(var(--a2-color-brown-300, #d4a487), var(--a2-color-brown-500, #a9663d)));
-$chip-brown-border-color-active: var(--a2-chip-brown-border-color-active, var(--a2-color-brown-400, #c5855e));
+$chip-brown-border-color: var(--a2-chip-brown-border-color, light-dark(var(--a2-color-brown-200, #e1c1ad), var(--a2-color-brown-800, #432918)));
+$chip-brown-border-color-hover: var(--a2-chip-brown-border-color-hover, light-dark(var(--a2-color-brown-300, #d4a487), var(--a2-color-brown-700, #5e3922)));
+$chip-brown-border-color-active: var(--a2-chip-brown-border-color-active, light-dark(var(--a2-color-brown-400, #c5855e), var(--a2-color-brown-600, #74462a)));
 $chip-brown-foreground-color: var(--a2-chip-brown-foreground-color, light-dark(var(--a2-color-brown-900, #1e120b), var(--a2-color-brown-10, #fefcfb)));
 $chip-brown-foreground-color-hover: var(--a2-chip-brown-foreground-color-hover, light-dark(var(--a2-color-brown-900, #1e120b), var(--a2-color-brown-10, #fefcfb)));
 $chip-brown-foreground-color-active: var(--a2-chip-brown-foreground-color-active, light-dark(var(--a2-color-brown-950, #0c0704), var(--a2-foreground-color-default, var(--a2-color-neutral-950, #040404))));
 $chip-lime-background-color: var(--a2-chip-lime-background-color, light-dark(var(--a2-color-lime-100, #e3eccf), var(--a2-color-lime-900, #111801)));
 $chip-lime-background-color-hover: var(--a2-chip-lime-background-color-hover, light-dark(var(--a2-color-lime-200, #c3d595), var(--a2-color-lime-800, #2a3a03)));
 $chip-lime-background-color-active: var(--a2-chip-lime-background-color-active, light-dark(var(--a2-color-lime-200, #c3d595), var(--a2-color-lime-800, #2a3a03)));
-$chip-lime-border-color: var(--a2-chip-lime-border-color, light-dark(var(--a2-color-lime-200, #c3d595), var(--a2-color-lime-700, #3a5007)));
-$chip-lime-border-color-hover: var(--a2-chip-lime-border-color-hover, light-dark(var(--a2-color-lime-300, #a8c26a), var(--a2-color-lime-600, #56750b)));
-$chip-lime-border-color-active: var(--a2-chip-lime-border-color-active, light-dark(var(--a2-color-lime-400, #8aad39), var(--a2-color-lime-500, #6b9013)));
+$chip-lime-border-color: var(--a2-chip-lime-border-color, light-dark(var(--a2-color-lime-200, #c3d595), var(--a2-color-lime-800, #2a3a03)));
+$chip-lime-border-color-hover: var(--a2-chip-lime-border-color-hover, light-dark(var(--a2-color-lime-300, #a8c26a), var(--a2-color-lime-700, #3a5007)));
+$chip-lime-border-color-active: var(--a2-chip-lime-border-color-active, light-dark(var(--a2-color-lime-400, #8aad39), var(--a2-color-lime-600, #56750b)));
 $chip-lime-foreground-color: var(--a2-chip-lime-foreground-color, light-dark(var(--a2-color-lime-900, #111801), var(--a2-color-lime-10, #fdfdfc)));
 $chip-lime-foreground-color-hover: var(--a2-chip-lime-foreground-color-hover, light-dark(var(--a2-color-lime-900, #111801), var(--a2-color-lime-10, #fdfdfc)));
 $chip-lime-foreground-color-active: var(--a2-chip-lime-foreground-color-active, light-dark(var(--a2-color-lime-950, #0a0f01), var(--a2-foreground-color-default, var(--a2-color-neutral-950, #040404))));
 $chip-magenta-background-color: var(--a2-chip-magenta-background-color, light-dark(var(--a2-color-magenta-100, #f8ddef), var(--a2-color-magenta-900, #26081c)));
 $chip-magenta-background-color-hover: var(--a2-chip-magenta-background-color-hover, light-dark(var(--a2-color-magenta-200, #efb3db), var(--a2-color-magenta-800, #591342)));
 $chip-magenta-background-color-active: var(--a2-chip-magenta-background-color-active, light-dark(var(--a2-color-magenta-200, #efb3db), var(--a2-color-magenta-800, #591342)));
-$chip-magenta-border-color: var(--a2-chip-magenta-border-color, light-dark(var(--a2-color-magenta-200, #efb3db), var(--a2-color-magenta-700, #831b60)));
-$chip-magenta-border-color-hover: var(--a2-chip-magenta-border-color-hover, light-dark(var(--a2-color-magenta-300, #e892cc), var(--a2-color-magenta-600, #be288d)));
-$chip-magenta-border-color-active: var(--a2-chip-magenta-border-color-active, light-dark(var(--a2-color-magenta-400, #eb61be), var(--a2-color-magenta-500, #d741a6)));
+$chip-magenta-border-color: var(--a2-chip-magenta-border-color, light-dark(var(--a2-color-magenta-200, #efb3db), var(--a2-color-magenta-800, #591342)));
+$chip-magenta-border-color-hover: var(--a2-chip-magenta-border-color-hover, light-dark(var(--a2-color-magenta-300, #e892cc), var(--a2-color-magenta-700, #831b60)));
+$chip-magenta-border-color-active: var(--a2-chip-magenta-border-color-active, light-dark(var(--a2-color-magenta-400, #eb61be), var(--a2-color-magenta-600, #be288d)));
 $chip-magenta-foreground-color: var(--a2-chip-magenta-foreground-color, light-dark(var(--a2-color-magenta-900, #26081c), var(--a2-color-magenta-10, #fefbfd)));
 $chip-magenta-foreground-color-hover: var(--a2-chip-magenta-foreground-color-hover, light-dark(var(--a2-color-magenta-900, #26081c), var(--a2-color-magenta-10, #fefbfd)));
 $chip-magenta-foreground-color-active: var(--a2-chip-magenta-foreground-color-active, light-dark(var(--a2-color-magenta-950, #15040f), var(--a2-foreground-color-default, var(--a2-color-neutral-950, #040404))));
 $chip-mauve-background-color: var(--a2-chip-mauve-background-color, light-dark(var(--a2-color-mauves-100, #fff4f0), var(--a2-color-mauves-900, #411d11)));
 $chip-mauve-background-color-hover: var(--a2-chip-mauve-background-color-hover, light-dark(var(--a2-color-mauves-200, #ffe4db), var(--a2-color-mauves-800, #823a21)));
 $chip-mauve-background-color-active: var(--a2-chip-mauve-background-color-active, light-dark(var(--a2-color-mauves-200, #ffe4db), var(--a2-color-mauves-800, #823a21)));
-$chip-mauve-border-color: var(--a2-chip-mauve-border-color, light-dark(var(--a2-color-mauves-100, #fff4f0), var(--a2-color-mauves-800, #823a21)));
-$chip-mauve-border-color-hover: var(--a2-chip-mauve-border-color-hover, light-dark(var(--a2-color-mauves-200, #ffe4db), var(--a2-color-mauves-700, #d27151)));
-$chip-mauve-border-color-active: var(--a2-chip-mauve-border-color-active, light-dark(var(--a2-color-mauves-300, #ffd1c2), var(--a2-color-mauves-600, #d88569)));
+$chip-mauve-border-color: var(--a2-chip-mauve-border-color, light-dark(var(--a2-color-mauves-300, #ffd1c2), var(--a2-color-mauves-800, #823a21)));
+$chip-mauve-border-color-hover: var(--a2-chip-mauve-border-color-hover, light-dark(var(--a2-color-mauves-400, #ffaf94), var(--a2-color-mauves-700, #d27151)));
+$chip-mauve-border-color-active: var(--a2-chip-mauve-border-color-active, light-dark(var(--a2-color-mauves-500, #ffa78a), var(--a2-color-mauves-600, #d88569)));
 $chip-mauve-foreground-color: var(--a2-chip-mauve-foreground-color, light-dark(var(--a2-color-mauves-900, #411d11), var(--a2-color-mauves-10, #fffbfa)));
 $chip-mauve-foreground-color-hover: var(--a2-chip-mauve-foreground-color-hover, light-dark(var(--a2-color-mauves-900, #411d11), var(--a2-color-mauves-10, #fffbfa)));
 $chip-mauve-foreground-color-active: var(--a2-chip-mauve-foreground-color-active, light-dark(var(--a2-color-mauves-950, #200e08), var(--a2-foreground-color-default, var(--a2-color-neutral-950, #040404))));
 $chip-orange-background-color: var(--a2-chip-orange-background-color, light-dark(var(--a2-color-orange-100, #ffddb7), var(--a2-color-orange-900, #2e1900)));
 $chip-orange-background-color-hover: var(--a2-chip-orange-background-color-hover, light-dark(var(--a2-color-orange-200, #ffc07a), var(--a2-color-orange-800, #4d2800)));
 $chip-orange-background-color-active: var(--a2-chip-orange-background-color-active, light-dark(var(--a2-color-orange-200, #ffc07a), var(--a2-color-orange-800, #4d2800)));
-$chip-orange-border-color: var(--a2-chip-orange-border-color, light-dark(var(--a2-color-orange-200, #ffc07a), var(--a2-color-orange-700, #693700)));
-$chip-orange-border-color-hover: var(--a2-chip-orange-border-color-hover, light-dark(var(--a2-color-orange-300, #ffa037), var(--a2-color-orange-600, #964f00)));
-$chip-orange-border-color-active: var(--a2-chip-orange-border-color-active, light-dark(var(--a2-color-orange-400, #e37700), var(--a2-color-orange-500, #c16500)));
+$chip-orange-border-color: var(--a2-chip-orange-border-color, light-dark(var(--a2-color-orange-200, #ffc07a), var(--a2-color-orange-800, #4d2800)));
+$chip-orange-border-color-hover: var(--a2-chip-orange-border-color-hover, light-dark(var(--a2-color-orange-300, #ffa037), var(--a2-color-orange-700, #693700)));
+$chip-orange-border-color-active: var(--a2-chip-orange-border-color-active, light-dark(var(--a2-color-orange-400, #e37700), var(--a2-color-orange-600, #964f00)));
 $chip-orange-foreground-color: var(--a2-chip-orange-foreground-color, light-dark(var(--a2-color-orange-900, #2e1900), var(--a2-color-orange-10, #fff8f1)));
 $chip-orange-foreground-color-hover: var(--a2-chip-orange-foreground-color-hover, light-dark(var(--a2-color-orange-900, #2e1900), var(--a2-color-orange-10, #fff8f1)));
 $chip-orange-foreground-color-active: var(--a2-chip-orange-foreground-color-active, light-dark(var(--a2-color-orange-950, #140b00), var(--a2-foreground-color-default, var(--a2-color-neutral-950, #040404))));
 $chip-purple-background-color: var(--a2-chip-purple-background-color, light-dark(var(--a2-color-purple-100, #e7e4f6), var(--a2-color-purple-900, #191338)));
 $chip-purple-background-color-hover: var(--a2-chip-purple-background-color-hover, light-dark(var(--a2-color-purple-200, #c9c2eb), var(--a2-color-purple-800, #2e2267)));
 $chip-purple-background-color-active: var(--a2-chip-purple-background-color-active, light-dark(var(--a2-color-purple-200, #c9c2eb), var(--a2-color-purple-800, #2e2267)));
-$chip-purple-border-color: var(--a2-chip-purple-border-color, light-dark(var(--a2-color-purple-200, #c9c2eb), var(--a2-color-purple-700, #3f2f8e)));
-$chip-purple-border-color-hover: var(--a2-chip-purple-border-color-hover, light-dark(var(--a2-color-purple-300, #b1a7e2), var(--a2-color-purple-600, #5c47c2)));
-$chip-purple-border-color-active: var(--a2-chip-purple-border-color-active, light-dark(var(--a2-color-purple-400, #9688d7), var(--a2-color-purple-500, #7766cc)));
+$chip-purple-border-color: var(--a2-chip-purple-border-color, light-dark(var(--a2-color-purple-200, #c9c2eb), var(--a2-color-purple-800, #2e2267)));
+$chip-purple-border-color-hover: var(--a2-chip-purple-border-color-hover, light-dark(var(--a2-color-purple-300, #b1a7e2), var(--a2-color-purple-700, #3f2f8e)));
+$chip-purple-border-color-active: var(--a2-chip-purple-border-color-active, light-dark(var(--a2-color-purple-400, #9688d7), var(--a2-color-purple-600, #5c47c2)));
 $chip-purple-foreground-color: var(--a2-chip-purple-foreground-color, light-dark(var(--a2-color-purple-900, #191338), var(--a2-color-purple-10, #fcfbfe)));
 $chip-purple-foreground-color-hover: var(--a2-chip-purple-foreground-color-hover, light-dark(var(--a2-color-purple-900, #191338), var(--a2-color-purple-10, #fcfbfe)));
 $chip-purple-foreground-color-active: var(--a2-chip-purple-foreground-color-active, light-dark(var(--a2-color-purple-950, #100c25), var(--a2-foreground-color-default, var(--a2-color-neutral-950, #040404))));
@@ -333,6 +333,8 @@ $combobox-item-selected-foreground-color-active: var(--a2-combobox-item-selected
 $combobox-item-disabled-foreground-color: var(--a2-combobox-item-disabled-foreground-color, var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4))));
 $combobox-item-disabled-icon-color: var(--a2-combobox-item-disabled-icon-color, var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4))));
 $combobox-item-disabled-opacity: var(--a2-combobox-item-disabled-opacity, var(--a2-opacity-disabled, 0.6));
+$data-table-pinned-column-shadow-color: var(--a2-data-table-pinned-column-shadow-color, var(--a2-shadow-color-stronger, light-dark(#04040480, #ffffff80)));
+$data-table-pinned-column-shadow-opacity: var(--a2-data-table-pinned-column-shadow-opacity, 0.2);
 $details-summary-foreground-color: var(--a2-details-summary-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
 $details-summary-foreground-color-hover: var(--a2-details-summary-foreground-color-hover, var(--a2-foreground-color-default-hover, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
 $details-summary-foreground-color-active: var(--a2-details-summary-foreground-color-active, var(--a2-foreground-color-default-active, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));

package/dist/token/core/semantic-variables.scss

@@ -152,6 +152,7 @@ $light: (
   illustration-color-character-ink: var(--a2-color-neutral-800, #292929),
   shadow-color-default: color-mix(in srgb, var(--a2-color-neutral-900, #1a1a1a) 8%, transparent),
   shadow-color-strong: color-mix(in srgb, var(--a2-color-neutral-950, #040404) 24%, transparent),
+  shadow-color-stronger: color-mix(in srgb, var(--a2-color-neutral-950, #040404) 50%, transparent),
 );
 $dark: (
   status-color-info: var(--a2-color-blue-300, #70b1ff),
@@ -307,6 +308,7 @@ $dark: (
   illustration-color-character-ink: var(--a2-color-neutral-0, #ffffff),
   shadow-color-default: color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 8%, transparent),
   shadow-color-strong: color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 24%, transparent),
+  shadow-color-stronger: color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 50%, transparent),
 );
 $nonColor: (
   border-radius-none: var(--a2-radius-0, 0rem),

package/dist/token/core/semantic.d.ts

@@ -203,6 +203,7 @@ export declare const OpacityDisabledStrong: TokenObj;
 export declare const OpacityDisabledStronger: TokenObj;
 export declare const ShadowColorDefault: TokenObj;
 export declare const ShadowColorStrong: TokenObj;
+export declare const ShadowColorStronger: TokenObj;
 export declare const ShadowSizeFlat: TokenObj;
 export declare const ShadowSizeFloat: TokenObj;
 export declare const ShadowSizeOverlay: TokenObj;

package/dist/token/core/semantic.js

@@ -2183,6 +2183,19 @@ export const ShadowColorStrong = {
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ShadowColorStronger = {
+  value: "#040404",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff"
+      }
+    }
+  }
+};
 /**
  * @type {TokenValue}
  */

package/dist/token/core/semantic.scss

@@ -201,6 +201,7 @@ $opacity-disabled-strong: var(--a2-opacity-disabled-strong, 0.4);
 $opacity-disabled-stronger: var(--a2-opacity-disabled-stronger, 0.2);
 $shadow-color-default: var(--a2-shadow-color-default, light-dark(color-mix(in srgb, var(--a2-color-neutral-900, #1a1a1a) 8%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 8%, transparent)));
 $shadow-color-strong: var(--a2-shadow-color-strong, light-dark(color-mix(in srgb, var(--a2-color-neutral-950, #040404) 24%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 24%, transparent)));
+$shadow-color-stronger: var(--a2-shadow-color-stronger, light-dark(color-mix(in srgb, var(--a2-color-neutral-950, #040404) 50%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 50%, transparent)));
 $shadow-size-flat: var(--a2-shadow-size-flat, var(--a2-size-0, 0rem) var(--a2-size-0, 0rem) var(--a2-size-0, 0rem));
 $shadow-size-float: var(--a2-shadow-size-float, var(--a2-size-0, 0rem) var(--a2-size-half, 0.125rem) var(--a2-size-2, 0.5rem));
 $shadow-size-overlay: var(--a2-shadow-size-overlay, var(--a2-size-0, 0rem) var(--a2-size-2, 0.5rem) var(--a2-size-6, 1.5rem));