chore: adapt components to new tokens

packages/orbit-components/src/Accordion/AccordionSection/index.tsx

@@ -29,7 +29,7 @@ const AccordionSection = ({
 
   return (
     <div
-      className="border-elevation-flat-border-color rounded-normal my-xs bg-elevation-flat relative w-full border border-solid"
+      className="border-elevation-flat-border-color rounded-100 my-xs bg-elevation-flat relative w-full border border-solid"
       data-test={dataTest}
     >
       <Loading loading={loading} type="boxLoader" dataTest={dataTest && `${dataTest}Loading`}>

packages/orbit-components/src/Alert/index.tsx

@@ -74,7 +74,7 @@ const ContentWrapper = ({
   return (
     <div
       className={cx(
-        "flex min-h-[20px] items-center",
+        "min-h-icon-medium flex items-center",
         !inlineActions && "w-full",
         "[&_.orbit-list-item]:text-ink-dark [&_.orbit-text]:text-ink-dark [&_.orbit-heading]:text-ink-dark",
         ...alertDescendantClasses[type],
@@ -130,10 +130,10 @@ const Alert = (props: Props) => {
   return (
     <div
       className={cx(
-        "rounded-large text-ink-dark font-base text-normal p-sm relative box-border flex w-full border border-t-[3px] leading-normal",
+        "rounded-150 text-ink-dark font-base text-normal p-sm relative box-border flex w-full border border-t-[3px] leading-normal",
         closable && "pe-lg",
         "lm:border-s-[3px] lm:border-t",
-        "tb:rounded-normal",
+        "tb:rounded-100",
         suppressed ? "bg-cloud-light border-cloud-normal lm:border-t-cloud-normal" : COLORS[type],
         ACCENT_BORDER[type],
         spaceAfter && spaceAfterClasses[spaceAfter],
@@ -164,7 +164,7 @@ const Alert = (props: Props) => {
         {title && (
           <div
             className={cx(
-              "text-ink-dark flex min-h-[20px] items-center font-bold",
+              "text-ink-dark min-h-icon-medium flex items-center font-bold",
               !!children && (inlineActions ? "mb-0" : "mb-xxs"),
             )}
           >

packages/orbit-components/src/ButtonGroup/index.tsx

@@ -5,7 +5,7 @@ import type { Props } from "./types";
 const ButtonGroup = ({ children, dataTest }: Props) => (
   <div
     data-test={dataTest}
-    className="tb:first:[&>.orbit-button-primitive]:rounded-s-normal tb:last:[&>.orbit-button-primitive]:rounded-e-normal flex space-x-px rtl:space-x-reverse [&>.orbit-button-primitive]:rounded-none first:[&>.orbit-button-primitive]:rounded-s-[6px] last:[&>.orbit-button-primitive]:rounded-e-[6px]"
+    className="tb:first:[&>.orbit-button-primitive]:rounded-s-100 tb:last:[&>.orbit-button-primitive]:rounded-e-100 first:[&>.orbit-button-primitive]:rounded-s-150 last:[&>.orbit-button-primitive]:rounded-e-150 flex space-x-px rtl:space-x-reverse [&>.orbit-button-primitive]:rounded-none"
   >
     {children}
   </div>

packages/orbit-components/src/CallOutBanner/index.tsx

@@ -22,7 +22,7 @@ const CallOutBanner = ({
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events
   <div
     className={cx(
-      "orbit-call-out-banner bg-white-normal rounded-small p-md lm:flex-row lm:p-lg flex flex-col items-start justify-start border border-solid text-start",
+      "orbit-call-out-banner bg-white-normal rounded-50 p-md lm:flex-row lm:p-lg flex flex-col items-start justify-start border border-solid text-start",
       onClick
         ? "shadow-action duration-fast hover:shadow-action-active active:shadow-action-active cursor-pointer border-transparent transition-shadow ease-in-out hover:outline-none active:outline-none"
         : "border-cloud-normal",

packages/orbit-components/src/Card/CardSection/index.tsx

@@ -55,7 +55,7 @@ export default function CardSection({
     <div
       className={cx(
         "duration-fast lm:border-x border-b transition-all ease-in-out",
-        opened && "my-xs rounded-normal shadow-action-active [&+*]:border-t",
+        opened && "my-xs rounded-100 shadow-action-active [&+*]:border-t",
         onClick != null && "hover:bg-white-normal-hover cursor-pointer",
       )}
       data-test={dataTest}

packages/orbit-components/src/Card/index.tsx

@@ -46,7 +46,7 @@ export default function Card({
     <div
       id={id}
       className={cx(
-        "orbit-card font-base bg-white-normal *:border-elevation-flat-border-color lm:first:*:rounded-t-normal lm:last:*:rounded-b-normal w-full first:*:border-t",
+        "orbit-card font-base bg-white-normal *:border-elevation-flat-border-color lm:first:*:rounded-t-100 lm:last:*:rounded-b-100 w-full first:*:border-t",
         spaceAfter != null && spaceAfterClasses[spaceAfter],
       )}
       data-test={dataTest}

packages/orbit-components/src/CarrierLogo/index.tsx

@@ -131,7 +131,7 @@ const CarrierLogo = ({
         <img
           className={cx(
             "max-w-none bg-transparent",
-            rounded ? "rounded-full" : "rounded-normal",
+            rounded ? "rounded-full" : "rounded-100",
             inlineStacked ? "not-first:-ms-xs border border-solid border-white" : "last:self-end",
             carriers.length > 1 && !inlineStacked
               ? [

packages/orbit-components/src/Checkbox/index.tsx

@@ -50,7 +50,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
       )}
     >
       <input
-        className="peer absolute z-[-1] opacity-0"
+        className="-z-default peer absolute opacity-0"
         data-test={dataTest}
         id={id}
         data-state={getFieldDataState(!!hasError)}
@@ -74,7 +74,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
             "border border-solid",
             "flex shrink-0 grow-0 basis-auto items-center justify-center",
             "size-icon-medium",
-            "rounded-large de:rounded-normal",
+            "rounded-150 de:rounded-100",
             "duration-fast transition-all ease-in-out",
             "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2",
             "[&>svg]:size-icon-small [&>svg]:invisible peer-checked:[&>svg]:visible",

packages/orbit-components/src/ChoiceGroup/components/FilterWrapper.tsx

@@ -19,7 +19,7 @@ const FilterWrapper = ({ child, children, onOnlySelection, onlySelectionText }:
   return (
     <div
       className={cx(
-        "h-form-box-small pl-xxs box-border flex w-full items-center rounded-[4px]",
+        "h-form-box-small pl-xxs rounded-100 box-border flex w-full items-center",
         !disabled &&
           "hover:[@media(hover)_and_(pointer:fine)]:bg-blue-light focus-within:[@media(hover)_and_(pointer:fine)]:bg-blue-light group",
       )}

packages/orbit-components/src/CountryFlag/index.tsx

@@ -26,7 +26,7 @@ const CountryFlag = ({ dataTest, size = SIZES.MEDIUM, id, ...props }: Props) =>
 
   return (
     <div
-      className={cx("rounded-small bg-country-flag-background relative shrink-0 overflow-hidden", {
+      className={cx("rounded-50 bg-country-flag-background relative shrink-0 overflow-hidden", {
         "h-country-flag-small w-country-flag-small": size === SIZES.SMALL,
         "h-country-flag-medium w-country-flag-medium": size === SIZES.MEDIUM,
       })}
@@ -41,7 +41,7 @@ const CountryFlag = ({ dataTest, size = SIZES.MEDIUM, id, ...props }: Props) =>
         src={src}
         srcSet={srcSet}
       />
-      <div className="rounded-small shadow-country-flag absolute inset-0 block size-full" />
+      <div className="rounded-50 shadow-country-flag absolute inset-0 block size-full" />
     </div>
   );
 };

packages/orbit-components/src/Coupon/index.tsx

@@ -6,7 +6,7 @@ import type { Props } from "./types";
 
 const Coupon = ({ children, dataTest, id }: Props) => (
   <mark
-    className="orbit-coupon text-small border-cloud-dark py-xxxs px-xxs rounded-normal text-ink-dark inline border border-dashed bg-transparent font-medium uppercase tracking-[0.75px]"
+    className="orbit-coupon text-small border-cloud-dark py-xxxs px-xxs rounded-100 text-ink-dark inline border border-dashed bg-transparent font-medium uppercase tracking-[0.75px]"
     data-test={dataTest}
     id={id}
   >

packages/orbit-components/src/ErrorFormTooltip/Tooltip/index.tsx

@@ -113,13 +113,13 @@ const ErrorFormTooltip = ({
       data-test={dataTest}
       className={cx(
         "flex justify-between overflow-visible",
-        "rounded-large py-xs px-sm z-10 box-border",
+        "rounded-150 py-xs px-sm z-10 box-border",
         "max-h-none w-[min(calc(100%-20px),_100vw)]",
         isHelp ? "pe-sm bg-blue-normal" : "bg-red-normal",
         shown ? "visible opacity-100" : "invisible opacity-0",
         "duration-fast transition-[opacity,visibility] ease-in-out",
         "bottom-[var(--error-form-tooltip-bottom)] left-[var(--error-form-tooltip-left)] right-[var(--error-form-tooltip-right)] top-[var(--error-form-tooltip-top)] [position:var(--error-form-tooltip-position)] [transform:var(--error-form-tooltip-transform)]",
-        "lm:w-auto tb:rounded-normal",
+        "lm:w-auto tb:rounded-100",
         "[&>img]:max-w-full",
       )}
       style={cssVars as React.CSSProperties}

packages/orbit-components/src/HorizontalScroll/HorizontalScroll.ct-story.tsx

@@ -24,7 +24,7 @@ export default function HorizontalScrollVisualStory() {
     <div
       // eslint-disable-next-line react/no-array-index-key -- okay in constants
       key={key}
-      className="rounded-large h-form-box-normal px-md bg-product-normal text-white-foreground font-base flex items-center justify-center"
+      className="rounded-150 h-form-box-normal px-md bg-product-normal text-white-foreground font-base flex items-center justify-center"
     >
       {txt}
     </div>

packages/orbit-components/src/Icon/IconList.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import * as Icons from "../icons";
 
 const IconList = () => (
-  <div className="rounded-large flex flex-row flex-wrap justify-between">
+  <div className="rounded-150 flex flex-row flex-wrap justify-between">
     {Object.keys(Icons)
       .filter(n => n !== "__namedExportsOrder")
       .map(icon => {
@@ -12,7 +12,7 @@ const IconList = () => (
         const iconName = `${icon}`;
         return (
           <div
-            className="gap-lg bg-white-normal mb-lg rounded-large border-cloud-normal px-lg flex w-full flex-row content-center items-center justify-start border border-solid"
+            className="gap-lg bg-white-normal mb-lg rounded-150 border-cloud-normal px-lg flex w-full flex-row content-center items-center justify-start border border-solid"
             style={{ minHeight: "80px" }}
             key={icon}
           >

packages/orbit-components/src/InputField/index.tsx

@@ -28,10 +28,10 @@ export const FakeInput = ({
   <div
     className={cx(
       "orbit-input-field-fake-input",
-      "h-form-box-normal text-form-element-normal z-[1]",
+      "h-form-box-normal text-form-element-normal z-default",
       "absolute left-0 top-0",
       "duration-fast transition-all ease-in-out",
-      "rounded-large tb:rounded-normal box-border w-full",
+      "rounded-150 tb:rounded-100 box-border w-full",
       "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2",
       error ? "shadow-form-element-error" : "shadow-form-element",
       disabled || readOnly

packages/orbit-components/src/InputFile/index.tsx

@@ -106,14 +106,14 @@ const InputFile = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
       )}
       <div
         className={cx(
-          "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-[2px]",
+          "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2",
           "box-border flex items-center",
           "h-form-box-normal ps-[6px]",
           error ? "shadow-form-element-error" : "shadow-form-element",
           !disabled &&
             (error ? "hover:shadow-form-element-error-hover" : "hover:shadow-form-element-hover"),
           "duration-fast transition-shadow ease-in-out",
-          "rounded-normal",
+          "rounded-100",
           disabled
             ? "bg-form-element-disabled-background cursor-not-allowed"
             : "bg-form-element-background cursor-pointer",

packages/orbit-components/src/InputGroup/index.tsx

@@ -132,7 +132,7 @@ const InputGroup = React.forwardRef<HTMLDivElement, Props>(
 
         <div
           className={cx(
-            "text-normal h-form-box-normal duration-fast rounded-large tb:rounded-normal z-[1] w-full transition-shadow ease-in-out",
+            "text-normal h-form-box-normal duration-fast rounded-150 tb:rounded-100 z-default w-full transition-shadow ease-in-out",
             active && "outline-blue-normal outline outline-2",
             disabled ? "bg-form-element-disabled-background" : "bg-form-element-background",
             !errorReal && "shadow-form-element",
@@ -157,7 +157,7 @@ const InputGroup = React.forwardRef<HTMLDivElement, Props>(
                   className={cx(
                     "orbit-input-group-child pe-xs last:p-0 [&_.orbit-input-field-fake-input]:hidden [&_.orbit-input-field-fake-input]:bg-transparent [&_.orbit-input-field-input~.orbit-input-field-fake-input]:shadow-none [&_.orbit-select-container_select]:bg-transparent [&_.orbit-select-container_select]:shadow-none [&_.orbit-select-container_select]:focus:outline-none",
                     // InputField:after
-                    "[&_.orbit-input-field-input-container]:after:duration-fast [&_.orbit-input-field-input-container]:after:absolute [&_.orbit-input-field-input-container]:after:end-0 [&_.orbit-input-field-input-container]:after:top-1/2 [&_.orbit-input-field-input-container]:after:z-[1] [&_.orbit-input-field-input-container]:after:block [&_.orbit-input-field-input-container]:after:h-[24px] [&_.orbit-input-field-input-container]:after:-translate-y-1/2 [&_.orbit-input-field-input-container]:after:border-r [&_.orbit-input-field-input-container]:after:transition-colors [&_.orbit-input-field-input-container]:after:ease-in-out [&_.orbit-input-field-input-container]:last-of-type:after:content-none",
+                    "[&_.orbit-input-field-input-container]:after:duration-fast [&_.orbit-input-field-input-container]:after:z-default [&_.orbit-input-field-input-container]:after:absolute [&_.orbit-input-field-input-container]:after:end-0 [&_.orbit-input-field-input-container]:after:top-1/2 [&_.orbit-input-field-input-container]:after:block [&_.orbit-input-field-input-container]:after:h-[24px] [&_.orbit-input-field-input-container]:after:-translate-y-1/2 [&_.orbit-input-field-input-container]:after:border-r [&_.orbit-input-field-input-container]:after:transition-colors [&_.orbit-input-field-input-container]:after:ease-in-out [&_.orbit-input-field-input-container]:last-of-type:after:content-none",
                     // Select:after
                     "[&_.orbit-select-container]:after:duration-fast [&_.orbit-select-container]:bg-transparent [&_.orbit-select-container]:after:absolute [&_.orbit-select-container]:after:end-0 [&_.orbit-select-container]:after:top-1/2 [&_.orbit-select-container]:after:z-[2] [&_.orbit-select-container]:after:block [&_.orbit-select-container]:after:h-[24px] [&_.orbit-select-container]:after:-translate-y-1/2 [&_.orbit-select-container]:after:border-r [&_.orbit-select-container]:after:transition-colors [&_.orbit-select-container]:after:ease-in-out [&_.orbit-select-container]:last-of-type:after:content-none",
                     Boolean(errorReal) && !active

packages/orbit-components/src/InputSelect/index.tsx

@@ -394,7 +394,7 @@ const InputSelect = React.forwardRef<HTMLInputElement, Props>(
     const dropdown = isOpened && (
       <ul
         className={cx(
-          "font-base bg-white-normal lm:absolute lm:inset-x-0 lm:overflow-y-scroll lm:shadow-action lm:rounded-normal z-[3] flex w-full flex-col",
+          "font-base bg-white-normal lm:absolute lm:inset-x-0 lm:overflow-y-scroll lm:shadow-action lm:rounded-100 z-[3] flex w-full flex-col",
           label
             ? "lm:top-[calc(theme(height.form-box-normal)+theme(spacing.xl))]"
             : "lm:top-[calc(theme(height.form-box-normal)+theme(spacing.xs))]",

packages/orbit-components/src/Itinerary/ItinerarySegment/index.tsx

@@ -69,7 +69,7 @@ const ItinerarySegment = ({
   return (
     <div
       className={cx(
-        "rounded-large pb-sm px-0",
+        "rounded-150 pb-sm px-0",
         spaceAfter && spaceAfterClasses[spaceAfter],
         !noElevation && "shadow-fixed",
         actionable && !noElevation && "hover:shadow-action-active focus:shadow-action-active",

packages/orbit-components/src/Itinerary/ItineraryStatus/index.tsx

@@ -62,15 +62,15 @@ const ItineraryStatus = ({
   return (
     <div
       className={cx(
-        "rounded-large shadow-fixed box-border flex w-full flex-col border-0 border-s-[3px] border-solid",
+        "rounded-150 shadow-fixed box-border flex w-full flex-col border-0 border-s-[3px] border-solid",
         type && borderColorClasses[type],
         spaceAfter && spaceAfterClasses[spaceAfter],
         actionable && "hover:shadow-action-active",
       )}
     >
       <div
         className={cx(
-          "px-xs min-h-xl rounded-tl-normal rounded-tr-large flex items-center rounded-b-none py-0",
+          "px-xs min-h-xl rounded-tl-100 rounded-tr-150 flex items-center rounded-b-none py-0",
           type && backgroundColor[type],
         )}
       >

packages/orbit-components/src/Popover/components/ContentWrapper.tsx

@@ -176,8 +176,8 @@ const PopoverContentWrapper = ({
           "lm:bottom-[var(--popper-bottom)]",
           "lm:[position:var(--popper-position)]",
           "lm:[transform:var(--popper-transform)]",
-          "lm:transition-[opacity] lm:duration-fast lm:ease-in-out",
-          "lm:rounded-normal",
+          "lm:transition-opacity lm:duration-fast lm:ease-in-out",
+          "lm:rounded-100",
           "lm:shadow-raised",
           "lm:max-h-none",
           isInsideModal ? "lm:z-[1000]" : "lm:z-[var(--popover-zIndex)]",
@@ -210,7 +210,7 @@ const PopoverContentWrapper = ({
                 "max-h-[calc(var(--window-height)-var(--actions-height)-32px)]",
               noPadding ? "p-0" : "p-md",
               "lm:max-h-[var(--max-height)]",
-              "lm:rounded-normal",
+              "lm:rounded-100",
               "lm:bottom-auto",
               "lm:left-auto",
               "lm:relative",
@@ -238,7 +238,7 @@ const PopoverContentWrapper = ({
                 "[&_.orbit-button-primitive]:w-full [&_.orbit-button-primitive]:flex-auto",
                 "lm:relative",
                 "lm:bottom-auto lm:left-auto",
-                "lm:rounded-b-normal",
+                "lm:rounded-b-100",
                 "lm:[&_.orbit-button-primitive]:w-auto lm:[&_.orbit-button-primitive]:grow-0",
               )}
             >

packages/orbit-components/src/Select/index.tsx

@@ -162,7 +162,7 @@ const Select = React.forwardRef<HTMLSelectElement, Props>((props, ref) => {
               "border-0",
               customValueText && "!text-transparent",
               "duration-fast transition-shadow ease-in-out",
-              "rounded-large tb:rounded-normal",
+              "rounded-150 tb:rounded-100",
               "[&>option]:text-form-element-filled-foreground",
               "disabled:text-form-element-disabled-foreground disabled:cursor-not-allowed",
             )}

packages/orbit-components/src/SkipLink/index.tsx

@@ -12,7 +12,7 @@ const SkipLink = ({ links, buttonLabel, dataTest, id }: Props) => {
         links.map(({ href, name, onClick }, index) => {
           return (
             <a
-              className="orbit-skip-link ltr:left-md rtl:right-md top-md p-md bg-white-normal z-onTop font-base text-large rounded-normal text-ink-dark absolute underline [&:not(:focus)]:sr-only"
+              className="orbit-skip-link ltr:left-md rtl:right-md top-md p-md bg-white-normal z-onTop font-base text-large rounded-100 text-ink-dark absolute underline [&:not(:focus)]:sr-only"
               key={encodeURIComponent(name + index)}
               href={href}
               tabIndex={onClick && 0}

packages/orbit-components/src/Slider/components/Bar/index.tsx

@@ -27,7 +27,7 @@ export const calculateBarPosition = (
 const BarPart = ({ className, style }: { className: string; style?: React.CSSProperties }) => {
   return (
     <div
-      className={cx("h-xxs rounded-normal absolute top-1/2 -translate-y-1/2", className)}
+      className={cx("h-xxs rounded-100 absolute top-1/2 -translate-y-1/2", className)}
       style={style}
     />
   );

packages/orbit-components/src/Slider/components/Handle/index.tsx

@@ -83,7 +83,7 @@ const Handle = ({
   return (
     <div
       className={cx(
-        "size-lg rounded-circle shadow-action bg-white-normal duration-fast tap-color-none hover:shadow-action-active active:shadow-action-active absolute bottom-0 flex cursor-pointer select-none items-center justify-center transition-shadow ease-in-out",
+        "size-lg shadow-action bg-white-normal duration-fast tap-color-none hover:shadow-action-active active:shadow-action-active absolute bottom-0 flex cursor-pointer select-none items-center justify-center rounded-full transition-shadow ease-in-out",
         onTop && "z-20",
       )}
       style={{
@@ -102,7 +102,7 @@ const Handle = ({
       aria-label={Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel}
       aria-valuetext={ariaValueText}
     >
-      <div className="size-xs bg-blue-normal rounded-circle" />
+      <div className="size-xs bg-blue-normal rounded-full" />
     </div>
   );
 };