Add icon colors classes (#482)

Co-authored-by: oskarvu <[email protected]>
marsfoundation · Dec 10, 2024 · 38d6d35 · 38d6d35
1 parent 58d2ddb
commit 38d6d35
Show file tree

Hide file tree

Showing 27 changed files with 148 additions and 141 deletions.
diff --git a/packages/app/.storybook/styles.css b/packages/app/.storybook/styles.css
@@ -4,7 +4,7 @@
 }
 
 body {
-  background-color: rgb(var(--neutral-50));
+  background-color: rgb(250, 250, 250);
 }
 
 /*

diff --git a/packages/app/src/css/main.css b/packages/app/src/css/main.css
@@ -35,8 +35,8 @@
     --primary-900: 73 0 209;
     --primary-950: 58 0 166;
 
-    --success-100: 224 255 248;
-    --success-200: 140 255 228;
+    --success-100: 218 251 244;
+    --success-200: 143 252 226;
     --success-300: 87 247 213;
     --success-400: 35 235 195;
     --success-500: 0 217 177;
@@ -49,57 +49,57 @@
     --warning-100: 255 248 229;
     --warning-200: 255 230 164;
     --warning-300: 255 218 121;
-    --warning-400: 255 205 78;
-    --warning-500: 250 189 33;
+    --warning-400: 255 205 77;
+    --warning-500: 250 189 32;
     --warning-600: 237 170 0;
     --warning-700: 217 155 0;
     --warning-800: 189 135 0;
-    --warning-900: 154 110 0;
+    --warning-900: 153 110 0;
     --warning-950: 122 88 0;
 
     --error-100: 255 222 222;
     --error-200: 255 204 204;
     --error-300: 255 181 181;
     --error-400: 255 150 154;
     --error-500: 255 120 129;
-    --error-600: 251 87 104;
+    --error-600: 250 87 104;
     --error-700: 237 55 79;
     --error-800: 217 24 56;
     --error-900: 189 0 38;
     --error-950: 145 0 29;
 
-    --green-100: 219 251 227;
-    --green-200: 187 246 202;
-    --green-300: 149 239 172;
-    --green-400: 102 230 136;
-    --green-500: 36 200 78;
-    --green-600: 11 181 57;
-    --green-700: 5 161 64;
-    --green-800: 3 141 50;
-    --green-900: 1 95 33;
-    --green-950: 0 58 17;
-
-    --orange-100: 255 228 214;
-    --orange-200: 255 210 189;
-    --orange-300: 255 187 158;
-    --orange-400: 255 164 129;
-    --orange-500: 254 137 93;
-    --orange-600: 247 109 55;
-    --orange-700: 232 83 20;
-    --orange-800: 209 66 1;
-    --orange-900: 178 59 0;
-    --orange-950: 140 49 0;
-
-    --magenta-100: 255 219 249;
-    --magenta-200: 254 190 241;
-    --magenta-300: 255 161 233;
-    --magenta-400: 255 130 222;
-    --magenta-500: 255 99 209;
-    --magenta-600: 250 67 189;
-    --magenta-700: 235 35 161;
-    --magenta-800: 209 0 125;
-    --magenta-900: 173 0 97;
-    --magenta-950: 132 1 71;
+    --savings-100: 219 251 227;
+    --savings-200: 187 246 202;
+    --savings-300: 149 239 172;
+    --savings-400: 103 230 136;
+    --savings-500: 35 200 78;
+    --savings-600: 11 181 57;
+    --savings-700: 6 162 63;
+    --savings-800: 1 141 50;
+    --savings-900: 0 94 33;
+    --savings-950: 0 58 16;
+
+    --borrow-100: 255 228 214;
+    --borrow-200: 255 210 189;
+    --borrow-300: 255 187 158;
+    --borrow-400: 255 164 128;
+    --borrow-500: 254 137 93;
+    --borrow-600: 247 109 54;
+    --borrow-700: 232 83 19;
+    --borrow-800: 209 66 0;
+    --borrow-900: 178 60 0;
+    --borrow-950: 140 49 0;
+
+    --farms-100: 255 219 249;
+    --farms-200: 254 190 241;
+    --farms-300: 255 161 233;
+    --farms-400: 255 130 222;
+    --farms-500: 255 99 209;
+    --farms-600: 250 67 189;
+    --farms-700: 235 35 161;
+    --farms-800: 209 0 125;
+    --farms-900: 173 0 97;
+    --farms-950: 132 1 71;
 
     --page-savings: 0 200 53;
     --page-borrow: 255 137 93;

diff --git a/packages/app/src/features/actions/components/action-row/ActionRow.tsx b/packages/app/src/features/actions/components/action-row/ActionRow.tsx
@@ -59,7 +59,7 @@ const iconVariants = cva(
       variant: {
         disabled: 'bg-secondary text-primary',
         ready: 'bg-brand-primary text-brand-primary',
-        loading: 'bg-orange-600/10 text-orange-600',
+        loading: 'bg-brand-primary text-brand-primary',
         success: 'bg-system-success-primary text-system-success-primary',
         error: 'bg-system-error-primary text-system-error-primary',
       },

diff --git a/packages/app/src/features/actions/components/actions/stories/AllActions.stories.ts b/packages/app/src/features/actions/components/actions/stories/AllActions.stories.ts
@@ -10,7 +10,7 @@ const meta: Meta<typeof Actions> = {
   parameters: {
     layout: 'fullscreen',
   },
-  decorators: [WithTooltipProvider(), WithClassname('max-w-[856px] p-0')],
+  decorators: [WithTooltipProvider(), WithClassname('max-w-[856px] p-0 bg-primary')],
 }
 
 export default meta

diff --git a/packages/app/src/features/actions/components/actions/stories/AllHandlerStates.stories.ts b/packages/app/src/features/actions/components/actions/stories/AllHandlerStates.stories.ts
@@ -8,7 +8,7 @@ import { allActionHandlers } from './allActionHandlers'
 const meta: Meta<typeof Actions> = {
   title: 'Features/Actions/ActionsGrid/AllHandlersStates',
   component: Actions,
-  decorators: [WithTooltipProvider(), WithClassname('max-w-3xl')],
+  decorators: [WithTooltipProvider(), WithClassname('max-w-3xl bg-primary')],
   parameters: {
     layout: 'fullscreen',
   },

diff --git a/packages/app/src/features/dialogs/e-mode/components/EModeCategoryTile.tsx b/packages/app/src/features/dialogs/e-mode/components/EModeCategoryTile.tsx
@@ -25,7 +25,7 @@ export function EModeCategoryTile({ eModeCategory }: EModeCategoryTileProps) {
         'rounded-sm bg-primary p-2 outline outline-1 outline-primary sm:p-4',
         'transition-all duration-200 hover:shadow-lg',
         'focus-visible:outline-0 focus-visible:ring focus-visible:ring-primary-200 focus-visible:ring-offset-0',
-        eModeCategory.isSelected && 'outline-0 ring-1 ring-orange-200 ring-offset-0',
+        eModeCategory.isSelected && 'outline-0 ring-1 ring-borrow-200 ring-offset-0',
       )}
     >
       <Badge variant={variant === 'active' ? 'success' : 'neutral'} appearance="soft" size="sm">

diff --git a/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.tsx b/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.tsx
@@ -43,7 +43,7 @@ export function SandboxDialogView({
           'Fast – no need to sign transactions',
         ].map((item, index) => (
           <li key={index} className="typography-heading-6 flex items-center gap-2.5">
-            <CheckIcon className="icon-sm text-system-success-primary" />
+            <CheckIcon className="icon-sm icon-system-success-primary" />
             {item}
           </li>
         ))}

diff --git a/packages/app/src/features/dialogs/savings/deposit/components/UpgradeToSusdsSwitch.tsx b/packages/app/src/features/dialogs/savings/deposit/components/UpgradeToSusdsSwitch.tsx
@@ -20,13 +20,13 @@ export function UpgradeToSusdsSwitch({
   apyImprovement,
 }: UpgradeToSusdsSwitchProps) {
   return (
-    <div className="flex w-full items-center justify-between rounded-sm bg-green-100 px-4 py-5">
+    <div className="flex w-full items-center justify-between rounded-sm bg-savings-100 px-4 py-5">
       <div className="flex items-center gap-2">
         <img src={assets.token.susds} className="h-5" />
         <div className="typography-label-4 text-primary">
           Deposit into Savings USDS and get{' '}
           {apyImprovement ? (
-            <span className="text-green-600">{formatPercentage(apyImprovement)} higher APY</span>
+            <span className="text-savings-600">{formatPercentage(apyImprovement)} higher APY</span>
           ) : (
             'more!'
           )}

diff --git a/packages/app/src/features/farm-details/components/back-nav/BackNav.tsx b/packages/app/src/features/farm-details/components/back-nav/BackNav.tsx
@@ -10,7 +10,7 @@ interface BackNavProps {
 
 export function BackNav({ chainId }: BackNavProps) {
   return (
-    <div className="flex items-center gap-1 px-3 sm:px-0">
+    <div className="flex items-center gap-3 px-3 sm:px-0">
       <LinkButton to={paths.farms} variant="transparent" size="s">
         <ButtonIcon icon={ArrowLeftIcon} />
         Back to Farms

diff --git a/.../features/farm-details/dialogs/unstake/components/claim-rewards-switch/ExitFarmSwitch.tsx b/.../features/farm-details/dialogs/unstake/components/claim-rewards-switch/ExitFarmSwitch.tsx
@@ -43,7 +43,7 @@ export function ExitFarmSwitch({ checked, onSwitch, reward }: UpgradeToSusdsSwit
 const variants = cva('flex w-full items-center justify-between rounded-sm px-4 py-3', {
   variants: {
     checked: {
-      true: 'bg-green-100',
+      true: 'bg-savings-100',
       false: 'bg-secondary',
     },
   },

diff --git a/packages/app/src/features/market-details/components/status-panel/EModeStatusPanel.tsx b/packages/app/src/features/market-details/components/status-panel/EModeStatusPanel.tsx
@@ -89,7 +89,7 @@ function WithArrow({ children, reverseArrow }: WithArrowProps) {
 
   return (
     <div className="flex min-w-[72px] flex-row items-center justify-between gap-1 sm:min-w-fit">
-      <Arrow className="icon-xs text-system-success-primary" />
+      <Arrow className="icon-xs icon-system-success-primary" />
       {children}
     </div>
   )

diff --git a/packages/app/src/features/markets/components/summary-tile/components/Tile.tsx b/packages/app/src/features/markets/components/summary-tile/components/Tile.tsx
@@ -18,7 +18,7 @@ export function Tile({ icon: Icon, title, USDValue, description, 'data-testid':
   return (
     <div className="flex items-center gap-2 md:gap-3" data-testid={dataTestId}>
       <div className="flex rounded-full bg-primary p-1.5 lg:p-4 md:p-3">
-        <Icon className="h-6 w-6 text-orange-400 lg:h-8 md:h-7 lg:w-8 md:w-7" />
+        <Icon className="h-6 w-6 text-borrow-400 lg:h-8 md:h-7 lg:w-8 md:w-7" />
       </div>
       <div className="flex flex-col">
         <div className="flex items-center gap-1">

diff --git a/packages/app/src/features/savings/components/savings-opportunity/components/Explainer.tsx b/packages/app/src/features/savings/components/savings-opportunity/components/Explainer.tsx
@@ -24,7 +24,7 @@ export function Explainer({ stablecoinValue, savingsMeta, originChainId }: Expla
         {savings?.inputTokens.map((symbol) => (
           <img key={symbol} src={getTokenImage(TokenSymbol(symbol))} className="h-6 w-6" />
         ))}
-        <ArrowRightIcon className="icon-xs text-primary-inverse" />
+        <ArrowRightIcon className="icon-xs icon-primary-inverse" />
         {[sdaiSymbol, susdsSymbol].filter(Boolean).map((symbol) => (
           <img key={symbol} src={getTokenImage(TokenSymbol(symbol))} className="h-6 w-6" />
         ))}

diff --git a/packages/app/src/features/savings/components/upgrade-savings-banner/UpgradeSavingsBanner.tsx b/packages/app/src/features/savings/components/upgrade-savings-banner/UpgradeSavingsBanner.tsx
@@ -62,7 +62,7 @@ export function UpgradeSavingsBanner({ onUpgradeSavingsClick, apyImprovement }:
 function Benefit({ children }: { children: ReactNode }) {
   return (
     <div className="flex items-center gap-2">
-      <CheckIcon className="icon-xs shrink-0 text-system-success-primary" />
+      <CheckIcon className="icon-xs icon-system-success-primary shrink-0" />
       <div className="typography-label-5">{children}</div>
     </div>
   )

diff --git a/packages/app/src/ui/atoms/icon-box/IconBox.tsx b/packages/app/src/ui/atoms/icon-box/IconBox.tsx
@@ -41,10 +41,10 @@ IconBox.displayName = 'IconBox'
 export const iconBoxVariants = cva('inline-flex items-center justify-center rounded-full', {
   variants: {
     variant: {
-      success: 'bg-fg-system-success-secondary text-primary-inverse',
-      warning: 'bg-fg-system-warning-primary text-primary-inverse',
-      info: 'bg-brand-secondary text-brand-primary',
-      error: 'bg-fg-system-error-secondary text-primary-inverse',
+      success: 'icon-primary-inverse bg-fg-system-success-secondary',
+      warning: 'icon-primary-inverse bg-fg-system-warning-primary',
+      info: 'icon-brand-primary bg-brand-secondary',
+      error: 'icon-primary-inverse bg-fg-system-error-secondary',
     },
     size: {
       xl: 'h-[120px] w-[120px] p-6',

diff --git a/packages/app/src/ui/atoms/menu-item/MenuItem.tsx b/packages/app/src/ui/atoms/menu-item/MenuItem.tsx
@@ -49,7 +49,7 @@ export function MenuItemIcon({
   return (
     <Icon
       className={cn(
-        'icon-xs text-secondary group-focus-visible:text-brand-primary group-hover:text-brand-primary',
+        'icon-xs icon-secondary group-focus-visible:text-brand-primary group-hover:text-brand-primary',
         className,
       )}
     />

diff --git a/packages/app/src/ui/molecules/alert/Alert.tsx b/packages/app/src/ui/molecules/alert/Alert.tsx
@@ -35,7 +35,7 @@ Alert.displayName = 'Alert'
 const alertVariants = cva('typography-label-6 grid grid-cols-[auto_1fr] items-center gap-3 rounded-sm p-4', {
   variants: {
     variant: {
-      info: 'bg-brand-primary text-brand-primary',
+      info: 'bg-brand-secondary text-brand-primary',
       warning: 'bg-system-warning-primary text-system-warning-primary',
       error: 'bg-system-error-primary text-system-error-primary',
     },

diff --git a/packages/app/src/ui/molecules/block-explorer-address-link/BlockExplorerAddressLink.tsx b/packages/app/src/ui/molecules/block-explorer-address-link/BlockExplorerAddressLink.tsx
@@ -31,7 +31,7 @@ export function BlockExplorerAddressLink({
       )}
       data-testid={testId}
     >
-      <Address address={address} postfix={<SquareArrowOutUpRight className="icon-xs shrink-0 text-secondary" />} />
+      <Address address={address} postfix={<SquareArrowOutUpRight className="icon-xs icon-secondary shrink-0" />} />
     </Link>
   ) : (
     <span className={cn('flex w-full max-w-64 items-center gap-1', className)} data-testid={testId}>

diff --git a/packages/app/src/ui/molecules/copy-button/CopyButton.tsx b/packages/app/src/ui/molecules/copy-button/CopyButton.tsx
@@ -36,7 +36,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
             {...props}
           >
             {copied ? (
-              <CheckIcon className="icon-xxs animate-reveal text-system-success-primary" />
+              <CheckIcon className="icon-xxs icon-system-success-primary animate-reveal" />
             ) : (
               // @note it prevents icon from being animated on initial render
               <CopyIcon className={cn('icon-xxs', mounted && 'animate-reveal')} />

diff --git a/packages/app/src/ui/organisms/transaction-overview/TransactionOverview.tsx b/packages/app/src/ui/organisms/transaction-overview/TransactionOverview.tsx
@@ -30,7 +30,7 @@ function TransactionOverview({ children, showSkyBadge = false }: TransactionOver
             <div className="typography-label-6 text-brand-primary">Powered by Sky</div>
             <Tooltip>
               <TooltipTrigger asChild>
-                <InfoIcon className="icon-xs text-brand-primary" />
+                <InfoIcon className="icon-xs icon-brand-primary" />
               </TooltipTrigger>
               <TooltipContent>The transaction uses infrastructure provided by the Sky Ecosystem.</TooltipContent>
             </Tooltip>

diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewApyChange.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewApyChange.tsx
@@ -18,7 +18,7 @@ export function TransactionOverviewApyChange({ currentApy, updatedApy }: Transac
       >
         {formatPercentage(currentApy)}
       </div>
-      <MoveRightIcon className="icon-xxs text-secondary" />
+      <MoveRightIcon className="icon-xxs icon-secondary" />
       <div
         data-testid={testIds.dialog.savings.transactionOverview.apyChange.after}
         className={cn(

diff --git a/...ges/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewAvailableAssets.tsx b/...ges/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewAvailableAssets.tsx
@@ -22,7 +22,7 @@ export function TransactionOverviewAvailableAssets({ categoryName, tokens }: Tra
   return (
     <div className="typography-label-4 flex items-center gap-2.5 text-primary">
       <div data-testid={testIds.dialog.eMode.transactionOverview.availableAssets.category}>{categoryName}</div>
-      <MoveRightIcon className="icon-xxs text-secondary" />
+      <MoveRightIcon className="icon-xxs icon-secondary" />
       <div data-testid={testIds.dialog.eMode.transactionOverview.availableAssets.assets}>
         {tokens.map((token) => token.symbol).join(', ')}
       </div>

diff --git a/.../app/src/ui/organisms/transaction-overview/rows/TransactionOverviewHealthFactorChange.tsx b/.../app/src/ui/organisms/transaction-overview/rows/TransactionOverviewHealthFactorChange.tsx
@@ -26,7 +26,7 @@ export function TransactionOverviewHealthFactorChange({
           <HealthFactorBadge healthFactor={currentHealthFactor} data-testid={testIds.dialog.healthFactor.before} />
           {updatedHealthFactor && (
             <>
-              <MoveRightIcon className="icon-xxs text-secondary" />
+              <MoveRightIcon className="icon-xxs icon-secondary" />
               <HealthFactorBadge healthFactor={updatedHealthFactor} data-testid={testIds.dialog.healthFactor.after} />
             </>
           )}

diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewMaxLtvChange.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewMaxLtvChange.tsx
@@ -26,7 +26,7 @@ export function TransactionOverviewMaxLtvChange({
   return (
     <div className="typography-label-4 flex items-center gap-2.5 text-primary">
       <div data-testid={testIds.dialog.eMode.transactionOverview.maxLtv.before}>{formatPercentage(currentMaxLTV)}</div>
-      <MoveRightIcon className="icon-xxs text-secondary" />
+      <MoveRightIcon className="icon-xxs icon-secondary" />
       <div data-testid={testIds.dialog.eMode.transactionOverview.maxLtv.after}>{formatPercentage(updatedMaxLTV)}</div>
     </div>
   )

diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewRoute.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewRoute.tsx
@@ -50,7 +50,7 @@ export function TransactionOverviewRoute({ route }: TransactionOverviewRouteProp
                 </div>
               </div>
             )}
-            {index !== route.length - 1 && <MoveRightIcon className="icon-xxs mt-[3px] flex-shrink-0 text-secondary" />}
+            {index !== route.length - 1 && <MoveRightIcon className="icon-xxs icon-secondary mt-[3px] flex-shrink-0" />}
           </Fragment>
         ))}
       </div>

diff --git a/...s/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewTokenAmountChange.tsx b/...s/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewTokenAmountChange.tsx
@@ -19,7 +19,7 @@ export function TransactionOverviewTokenAmountChange({
       <TokenAmount token={token} amount={currentAmount} />
       {updatedAmount && (
         <>
-          <MoveRightIcon className="icon-xxs mt-[3px] text-secondary" />
+          <MoveRightIcon className="icon-xxs icon-secondary mt-[3px]" />
           <TokenAmount token={token} amount={updatedAmount} />
         </>
       )}
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ @@
     }
     body {
-      background-color: rgb(var(--neutral-50));
+      background-color: rgb(250, 250, 250);
     }
     /*
@@ Expand Down @@