chore: update tests

Small test adjustments from the CSS vars changes

packages/orbit-components/src/Box/__tests__/index.test.tsx

@@ -172,7 +172,10 @@ describe("#Box", () => {
     );
 
     expect(screen.getByTestId(`${dataTest}-${radius}`)).toHaveStyle({
-      "border-radius": BORDER_RADIUS[radius],
+      "border-radius":
+        radius === "100"
+          ? `var(--border-radius-100, ${BORDER_RADIUS[radius]})`
+          : BORDER_RADIUS[radius],
     });
   });
 

packages/orbit-components/src/utils/Grid/__tests__/__snapshots__/index.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Grid should match snapshot 1`] = `
   <style
     id="orbit-theme-css-vars"
   >
-    :root {--palette-blue-light:232, 244, 253;--palette-blue-light-hover:222, 240, 252;--palette-blue-light-active:199, 228, 250;--palette-blue-normal:0, 112, 200;--palette-blue-normal-hover:1, 97, 172;--palette-blue-normal-active:1, 80, 142;--palette-blue-dark:0, 90, 163;--palette-blue-dark-hover:0, 79, 143;--palette-blue-dark-active:0, 62, 112;--palette-blue-darker:0, 56, 102;--palette-bundle-basic:215, 51, 28;--palette-bundle-medium:59, 30, 176;--palette-cloud-light:245, 247, 249;--palette-cloud-light-hover:229, 234, 239;--palette-cloud-light-active:214, 222, 230;--palette-cloud-normal:232, 237, 241;--palette-cloud-normal-hover:220, 227, 233;--palette-cloud-normal-active:202, 212, 222;--palette-cloud-dark:186, 199, 213;--palette-cloud-dark-hover:166, 182, 200;--palette-cloud-dark-active:148, 168, 190;--palette-green-light:234, 245, 234;--palette-green-light-hover:225, 239, 226;--palette-green-light-active:205, 228, 207;--palette-green-normal:10, 147, 43;--palette-green-normal-hover:35, 139, 49;--palette-green-normal-active:29, 114, 40;--palette-green-dark:45, 119, 56;--palette-green-dark-hover:39, 104, 49;--palette-green-dark-active:31, 81, 38;--palette-green-darker:28, 74, 35;--palette-ink-dark:37, 42, 49;--palette-ink-dark-hover:24, 27, 32;--palette-ink-dark-active:11, 12, 15;--palette-ink-light:105, 125, 149;--palette-ink-light-hover:93, 115, 142;--palette-ink-light-active:74, 97, 124;--palette-ink-normal:79, 94, 113;--palette-ink-normal-hover:62, 78, 99;--palette-ink-normal-active:50, 66, 86;--palette-orange-light:254, 242, 230;--palette-orange-light-hover:252, 236, 218;--palette-orange-light-active:250, 226, 198;--palette-orange-normal:207, 108, 0;--palette-orange-normal-hover:184, 96, 0;--palette-orange-normal-active:173, 87, 0;--palette-orange-dark:167, 84, 0;--palette-orange-dark-hover:149, 74, 0;--palette-orange-dark-active:128, 63, 0;--palette-orange-darker:102, 50, 0;--palette-product-light:225, 244, 243;--palette-product-light-hover:214, 240, 236;--palette-product-light-active:191, 232, 226;--palette-product-normal:0, 165, 142;--palette-product-normal-hover:0, 149, 128;--palette-product-normal-active:0, 132, 114;--palette-product-dark:0, 122, 105;--palette-product-dark-hover:0, 112, 96;--palette-product-dark-active:0, 102, 87;--palette-product-darker:0, 77, 65;--palette-red-light:250, 234, 234;--palette-red-light-hover:248, 226, 226;--palette-red-light-active:243, 206, 206;--palette-red-normal:210, 28, 28;--palette-red-normal-hover:185, 25, 25;--palette-red-normal-active:157, 21, 21;--palette-red-dark:151, 12, 12;--palette-red-dark-hover:137, 11, 11;--palette-red-dark-active:109, 9, 9;--palette-red-darker:99, 8, 8;--palette-social-facebook:59, 89, 152;--palette-social-facebook-hover:56, 84, 144;--palette-social-facebook-active:53, 79, 136;--palette-white:255, 255, 255;--palette-white-normal:255, 255, 255;--palette-white-hover:241, 244, 247;--palette-white-active:231, 236, 241;}
+    :root {--button-primary-subtle-background:225, 244, 243;--button-primary-subtle-background-hover:214, 240, 236;--button-primary-subtle-background-active:191, 232, 226;--button-primary-subtle-foreground:0, 122, 105;--button-primary-subtle-foreground-hover:0, 112, 96;--button-primary-subtle-foreground-active:0, 102, 87;--button-primary-background:0, 165, 142;--button-primary-background-hover:0, 149, 128;--button-primary-background-active:0, 132, 114;--button-primary-foreground:255, 255, 255;--button-primary-foreground-hover:255, 255, 255;--button-primary-foreground-active:255, 255, 255;--button-primary-border-color-focus:0, 165, 142;--border-radius-100:4px;--palette-blue-light:232, 244, 253;--palette-blue-light-hover:222, 240, 252;--palette-blue-light-active:199, 228, 250;--palette-blue-normal:0, 112, 200;--palette-blue-normal-hover:1, 97, 172;--palette-blue-normal-active:1, 80, 142;--palette-blue-dark:0, 90, 163;--palette-blue-dark-hover:0, 79, 143;--palette-blue-dark-active:0, 62, 112;--palette-blue-darker:0, 56, 102;--palette-bundle-basic:215, 51, 28;--palette-bundle-medium:59, 30, 176;--palette-cloud-light:245, 247, 249;--palette-cloud-light-hover:229, 234, 239;--palette-cloud-light-active:214, 222, 230;--palette-cloud-normal:232, 237, 241;--palette-cloud-normal-hover:220, 227, 233;--palette-cloud-normal-active:202, 212, 222;--palette-cloud-dark:186, 199, 213;--palette-cloud-dark-hover:166, 182, 200;--palette-cloud-dark-active:148, 168, 190;--palette-green-light:234, 245, 234;--palette-green-light-hover:225, 239, 226;--palette-green-light-active:205, 228, 207;--palette-green-normal:10, 147, 43;--palette-green-normal-hover:35, 139, 49;--palette-green-normal-active:29, 114, 40;--palette-green-dark:45, 119, 56;--palette-green-dark-hover:39, 104, 49;--palette-green-dark-active:31, 81, 38;--palette-green-darker:28, 74, 35;--palette-ink-dark:37, 42, 49;--palette-ink-dark-hover:24, 27, 32;--palette-ink-dark-active:11, 12, 15;--palette-ink-light:105, 125, 149;--palette-ink-light-hover:93, 115, 142;--palette-ink-light-active:74, 97, 124;--palette-ink-normal:79, 94, 113;--palette-ink-normal-hover:62, 78, 99;--palette-ink-normal-active:50, 66, 86;--palette-orange-light:254, 242, 230;--palette-orange-light-hover:252, 236, 218;--palette-orange-light-active:250, 226, 198;--palette-orange-normal:207, 108, 0;--palette-orange-normal-hover:184, 96, 0;--palette-orange-normal-active:173, 87, 0;--palette-orange-dark:167, 84, 0;--palette-orange-dark-hover:149, 74, 0;--palette-orange-dark-active:128, 63, 0;--palette-orange-darker:102, 50, 0;--palette-product-light:225, 244, 243;--palette-product-light-hover:214, 240, 236;--palette-product-light-active:191, 232, 226;--palette-product-normal:0, 165, 142;--palette-product-normal-hover:0, 149, 128;--palette-product-normal-active:0, 132, 114;--palette-product-dark:0, 122, 105;--palette-product-dark-hover:0, 112, 96;--palette-product-dark-active:0, 102, 87;--palette-product-darker:0, 77, 65;--palette-red-light:250, 234, 234;--palette-red-light-hover:248, 226, 226;--palette-red-light-active:243, 206, 206;--palette-red-normal:210, 28, 28;--palette-red-normal-hover:185, 25, 25;--palette-red-normal-active:157, 21, 21;--palette-red-dark:151, 12, 12;--palette-red-dark-hover:137, 11, 11;--palette-red-dark-active:109, 9, 9;--palette-red-darker:99, 8, 8;--palette-social-facebook:59, 89, 152;--palette-social-facebook-hover:56, 84, 144;--palette-social-facebook-active:53, 79, 136;--palette-white:255, 255, 255;--palette-white-normal:255, 255, 255;--palette-white-hover:241, 244, 247;--palette-white-active:231, 236, 241;}
   </style>
   <div
     class="inline-grid w-[var(--grid-width)] max-w-[var(--grid-max-width)] mm:max-w-[var(--mm-grid-max-width)] lm:max-w-[var(--lm-grid-max-width)] tb:max-w-[var(--tb-grid-max-width)] de:max-w-[var(--de-grid-max-width)] ld:max-w-[var(--ld-grid-max-width)] grid-cols-[var(--grid-columns)] grid-rows-[var(--grid-rows)] gap-x-[var(--grid-column-gap)] gap-y-[var(--grid-row-gap)]"