regression: replace old css vars with the new design system tokens (#8354)

* chore: replace old css vars * fix: replace shadow and primary colors * chore: remove hardcoded colors
2025-12-17 16:28:22 +05:30 · 2025-12-17 16:28:22 +05:30 · 1f06b67c66
commit 1f06b67c66
parent 1338e9d2a4
111 changed files with 180 additions and 245 deletions
--- a/packages/propel/src/card/helper.tsx
+++ b/packages/propel/src/card/helper.tsx
@ -21,7 +21,7 @@ export interface ICardProperties {
 const DEFAULT_STYLE = "bg-surface-1 rounded-lg border-[0.5px] border-subtle w-full flex flex-col";
 export const containerStyle: ICardProperties = {
  [ECardVariant.WITHOUT_SHADOW]: "",
-  [ECardVariant.WITH_SHADOW]: "hover:shadow-custom-shadow-4xl duration-300",
+  [ECardVariant.WITH_SHADOW]: "hover:shadow-raised-200 duration-300",
 };
 export const spacings = {
  [ECardSpacing.SM]: "p-4",
--- a/packages/propel/src/charts/bar-chart/root.tsx
+++ b/packages/propel/src/charts/bar-chart/root.tsx
@ -127,7 +127,7 @@ export const BarChart = React.memo(function BarChart<K extends string, T extends
          barSize={barSize}
          className="recharts-wrapper"
        >
-          <CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
+          <CartesianGrid stroke="--alpha(var(--border-color-subtle) / 80%)" vertical={false} />
          <XAxis
            dataKey={xAxis.key}
            tick={(props) => {
--- a/packages/propel/src/charts/pie-chart/root.tsx
+++ b/packages/propel/src/charts/pie-chart/root.tsx
@ -84,7 +84,7 @@ export const PieChart = React.memo(function PieChart<K extends string, T extends
                      y={props.y}
                      textAnchor={props.textAnchor}
                      dominantBaseline={props.dominantBaseline}
-                      fill="rgba(var(--color-text-200))"
+                      fill="var(--text-color-secondary)"
                      opacity={!!activeLegend && activeLegend !== payload.key ? 0.1 : 1}
                    >
                      {customLabel?.(payload.count) ?? payload.count}
--- a/packages/propel/src/design-system/design-system-philosophy.stories.tsx
+++ b/packages/propel/src/design-system/design-system-philosophy.stories.tsx
@ -305,7 +305,7 @@ export const TextColorHierarchy: Story = {
          <p className="text-secondary mb-3">Secondary text for descriptions and supporting content</p>
          <p className="text-tertiary mb-3 text-13">Tertiary text for labels and metadata</p>
          <input
-            className="placeholder-placeholder border-subtle rounded border px-3 py-2"
+            className="placeholder-(--text-color-placeholder) border-subtle rounded border px-3 py-2"
            placeholder="Placeholder text for inputs"
          />
        </div>
--- a/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
+++ b/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
@ -36,7 +36,7 @@ export function EmojiRoot(props: EmojiRootProps) {
          <EmojiPicker.Search
            placeholder={searchPlaceholder}
            disabled={searchDisabled}
-            className="block rounded-md bg-transparent placeholder-custom-text-400 focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 p-0 h-full w-full flex-grow-0 focus:border-accent-strong"
+            className="block rounded-md bg-transparent placeholder-(--text-color-placeholder) focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 p-0 h-full w-full flex-grow-0 focus:border-accent-strong"
          />
        </div>
        <EmojiPicker.SkinToneSelector
--- a/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
+++ b/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
@ -48,7 +48,7 @@ export function IconRoot(props: IconRootProps) {
                placeholder="Search"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
-                className="block rounded-md bg-transparent placeholder-custom-text-400 focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 border-none p-0 h-full w-full"
+                className="block rounded-md bg-transparent placeholder-(--text-color-placeholder) focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 border-none p-0 h-full w-full"
              />
            </div>
          </div>
@ -72,7 +72,7 @@ export function IconRoot(props: IconRootProps) {
                  setHexValue(value);
                  if (/^[0-9A-Fa-f]{6}$/.test(value)) setActiveColor(adjustColorForContrast(`#${value}`));
                }}
-                className="block placeholder-custom-text-400 focus:outline-none px-3 py-2 border-[0.5px] border-subtle flex-grow pl-0 text-11 text-secondary rounded-sm border-none bg-transparent ring-0"
+                className="block placeholder-(--text-color-placeholder) focus:outline-none px-3 py-2 border-[0.5px] border-subtle flex-grow pl-0 text-11 text-secondary rounded-sm border-none bg-transparent ring-0"
                autoFocus
              />
            </div>
--- a/packages/propel/src/icons/calendar-after-icon.tsx
+++ b/packages/propel/src/icons/calendar-after-icon.tsx
@ -8,7 +8,7 @@ export function CalendarAfterIcon({ className = "fill-current", ...rest }: ISvgI
      <g clipPath="url(#clip0_3309_70901)">
        <path
          d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
-          fill="rgb(var(--color-text-200))"
+          fill="var(--text-color-secondary)"
        />
      </g>
      <defs>
--- a/packages/propel/src/icons/calendar-before-icon.tsx
+++ b/packages/propel/src/icons/calendar-before-icon.tsx
@ -8,13 +8,13 @@ export function CalendarBeforeIcon({ className = "fill-current", ...rest }: ISvg
      <g clipPath="url(#clip0_3309_70907)">
        <path
          d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
-          fill="rgb(var(--color-text-200))"
+          fill="var(--text-color-secondary)"
        />
        <g clipPath="url(#clip1_3309_70907)">
          <path
            d="M3.99967 17.1667L1.33301 14.5L3.99967 11.8334L4.34967 12.1834L2.28301 14.25H8V14.75H2.28301L4.34967 16.8167L3.99967 17.1667Z"
-            fill="rgb(var(--color-text-200))"
-            stroke="rgb(var(--color-text-200))"
+            fill="var(--text-color-secondary)"
+            stroke="var(--text-color-secondary)"
            strokeWidth="0.5"
          />
        </g>
--- a/packages/propel/src/icons/github-icon.tsx
+++ b/packages/propel/src/icons/github-icon.tsx
@ -17,7 +17,7 @@ export function GithubIcon({ width = "24", height = "24", className, color }: IS
          fillRule="evenodd"
          clipRule="evenodd"
          d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
-          fill={color ? color : "rgb(var(--color-text-200))"}
+          fill={color ? color : "var(--text-color-secondary)"}
        />
      </g>
      <defs>
--- a/packages/propel/src/icons/gitlab-icon.tsx
+++ b/packages/propel/src/icons/gitlab-icon.tsx
@ -17,7 +17,7 @@ export function GitlabIcon({ width = "24", height = "24", className, color }: IS
          fillRule="evenodd"
          clipRule="evenodd"
          d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
-          fill={color ? color : "rgb(var(--color-text-200))"}
+          fill={color ? color : "var(--text-color-secondary)"}
        />
      </g>
      <defs>
--- a/packages/propel/src/menu/menu.stories.tsx
+++ b/packages/propel/src/menu/menu.stories.tsx
@ -161,7 +161,7 @@ export const WithSubmenu: Story = {
        <Menu.MenuItem onClick={() => alert("Open")}>Open</Menu.MenuItem>
        <Menu.SubMenu
          trigger="Export"
-          className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg"
+          className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200"
        >
          <Menu.MenuItem onClick={() => alert("Export as PDF")}>Export as PDF</Menu.MenuItem>
          <Menu.MenuItem onClick={() => alert("Export as CSV")}>Export as CSV</Menu.MenuItem>
@ -220,7 +220,7 @@ export const ComplexMenu: Story = {
        </Menu.MenuItem>
        <Menu.SubMenu
          trigger="Settings"
-          className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg"
+          className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200"
        >
          <Menu.MenuItem onClick={() => alert("General Settings")}>General</Menu.MenuItem>
          <Menu.MenuItem onClick={() => alert("Privacy Settings")}>Privacy</Menu.MenuItem>
--- a/packages/propel/src/menu/menu.tsx
+++ b/packages/propel/src/menu/menu.tsx
@ -180,7 +180,7 @@ function Menu(props: TMenuProps) {
          <BaseMenu.Popup
            tabIndex={tabIndex}
            className={cn(
-              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none min-w-[12rem] whitespace-nowrap",
              {
                "max-h-60": maxHeight === "lg",
                "max-h-48": maxHeight === "md",
--- a/packages/propel/src/spinners/circular-spinner.tsx
+++ b/packages/propel/src/spinners/circular-spinner.tsx
@ -25,7 +25,7 @@ export function Spinner({ height = "32px", width = "32px", className = "" }: ISp
          fill="currentColor"
        />
        <path
-          className="fill-custom-primary-100"
+          className="fill-accent-primary"
          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
        />
      </svg>