Remove colors not from design system (#477)

Co-authored-by: oskarvu <[email protected]>

packages/app/.storybook/styles.css

@@ -3,9 +3,13 @@
   min-height: 400px;
 }
 
+body {
+  background-color: rgb(var(--neutral-50));
+}
+
 /*
 prevents reapplying same values when using WithClassname
-decorator in root of story file but doesnt apply to component itself
+decorator in root of story file but doesn't apply to component itself
 */
 #storybook-root > [data-sb="decorator"] {
   min-width: 375px;

packages/app/src/css/main.css

@@ -4,67 +4,10 @@
 
 @layer base {
   :root {
-    --body-background: 210 20% 98%;
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-
-    --primary: #0b2140;
-    --primary-bg: 227, 85%, 59%;
-    --primary-foreground: 0 0% 100%;
-    --primary-hover: 215, 71%, 15%;
-
-    --secondary: 240, 20%, 98%;
-    --secondary-foreground: 215, 71%, 15%;
-
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --nav-primary: 63 102 239;
     --nav-shadow: rgba(11, 33, 64, 0.08);
 
     --tooltip-shadow: rgba(9, 24, 44, 0.07);
 
-    --ring: 240 5% 64.9%;
-
-    --radius: 0.5rem;
-
-    --panel-border: rgba(35, 66, 84, 0.1);
-    --panel-bg: #f9f9fb;
-    --input-background: #f9f9fb;
-    --icon-foreground: 106 118 146;
-
-    --product-green: 109 194 117;
-    --product-orange: 242 153 20;
-    --product-red: 252 80 56;
-    --product-blue: 62 100 239;
-    --product-dai: 245 172 55;
-    --product-sdai: 38 182 62;
-    --prompt-foreground: #6a7692;
-    --success-background: #e2f1ec;
-    --checkbox: #0b2140;
-    --product-dark-blue: 37, 87, 214;
-
-    --spark: 242 166 43;
-
-    --main-blue: 64 102 239;
-
-    --sec-green: 109 194 117;
-
     --base-white: 255 255 255;
     --base-black: 16 16 20;
 
@@ -162,46 +105,9 @@
     --page-borrow: 255 137 93;
     --page-farms: 224 61 204;
   }
-
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-
-    --ring: 240 3.7% 15.9%;
-  }
 }
 
 @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-body text-foreground;
-  }
   input {
     background: none;
   }

packages/app/src/features/dialogs/savings/migrate/downgrade/views/DowngradeUSDSToDaiView.tsx

@@ -41,7 +41,7 @@ export function DowngradeUSDSToDaiView({
         Downgrade {fromToken.symbol} to {toToken.symbol}
       </DialogTitle>
 
-      <div className="mb-2 text-secondary text-sm leading-snug">
+      <div className="typography-label-5 mb-2 text-secondary">
         You can downgrade from USDS to DAI whenever you choose, and you are free to switch back from DAI to USDS in the
         future, at your own sole discretion.{' '}
         <Link to={links.docs.downgradeUsds} external>

packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.tsx

@@ -16,7 +16,7 @@ export function SelectNetworkDialogView({ chains }: SelectNetworkDialogViewProps
         {chains.map((chain) => (
           <button
             className={cn(
-              'relative isolate flex flex-col rounded-sm border border-border-primary',
+              'relative isolate flex flex-col rounded-sm border border-primary',
               'hover:-translate-y-1 hover:shadow-lg',
               'focus-visible:border-transparent focus-visible:outline-none focus-visible:ring focus-visible:ring-reskin-primary-200 focus-visible:ring-offset-0',
               'cursor-pointer transition-all duration-300',

packages/app/src/features/farm-details/components/header/Header.tsx

@@ -18,7 +18,7 @@ export function Header({ token, farmName, chainId, chainMismatch }: HeaderProps)
     <div className="flex flex-col gap-4">
       <div className="flex items-center gap-3 px-3 md:ml-5 lg:px-0">
         <TokenIcon token={token} className="h-8 w-8" />
-        <h1 className="typography-heading-1 text-sky-950">{farmName}</h1>
+        <h1 className="typography-heading-1 text-primary">{farmName}</h1>
       </div>
       {chainMismatch && (
         <Alert variant="warning">

packages/app/src/features/market-details/components/my-wallet/components/ActionRow.tsx

@@ -14,7 +14,7 @@ interface ActionRowProps {
 
 export function ActionRow({ token, value, label, buttonText, onAction }: ActionRowProps) {
   return (
-    <div className="grid grid-cols-[_1fr,_70px] border-slate-700/10 border-t py-4">
+    <div className="grid grid-cols-[_1fr,_70px] border-primary border-t py-4">
       <ActionDetails label={label} token={token} value={value} />
       <Button variant="secondary" disabled={value.isZero()} size="s" onClick={onAction}>
         {buttonText}

packages/app/src/features/market-details/components/status-panel/EModeStatusPanel.stories.ts

@@ -36,19 +36,18 @@ export const ETHTablet: Story = {
   name: 'ETH Correlated (Tablet)',
 }
 
-export const DAIDesktop: Story = {
-  name: 'DAI Correlated',
+export const SdaiDesktop: Story = {
+  name: 'sDAI Correlated',
   args: {
     categoryId: 2,
-    token: tokens.sDAI,
     eModeCategoryTokens: [tokens.sDAI.symbol, tokens.USDC.symbol, tokens.USDT.symbol],
   },
 }
-export const DAIMobile: Story = {
-  ...getMobileStory(DAIDesktop),
-  name: 'DAI Correlated (Mobile)',
+export const SdaiMobile: Story = {
+  ...getMobileStory(SdaiDesktop),
+  name: 'sDAI Correlated (Mobile)',
 }
-export const DAITablet: Story = {
-  ...getTabletStory(DAIDesktop),
-  name: 'DAI Correlated (Tablet)',
+export const SdaiTablet: Story = {
+  ...getTabletStory(SdaiDesktop),
+  name: 'sDAI Correlated (Tablet)',
 }

packages/app/src/features/market-details/components/status-panel/EModeStatusPanel.tsx

@@ -2,7 +2,6 @@ import { paths } from '@/config/paths'
 import { formatPercentage } from '@/domain/common/format'
 import { eModeCategoryIdToName } from '@/domain/e-mode/constants'
 import { EModeCategoryId } from '@/domain/e-mode/types'
-import { Token } from '@/domain/types/Token'
 import { TokenSymbol } from '@/domain/types/TokenSymbol'
 import { InfoTile } from '@/features/market-details/components/info-tile/InfoTile'
 import { Link } from '@/ui/atoms/link/Link'
@@ -14,15 +13,13 @@ import { Header } from './components/Header'
 import { InfoTilesGrid } from './components/InfoTilesGrid'
 import { StatusPanelGrid } from './components/StatusPanelGrid'
 import { StatusIcon } from './components/status-icon/StatusIcon'
-import { TokenBadge } from './components/token-badge/TokenBadge'
 
 export interface EModeStatusPanelProps {
   maxLtv: Percentage
   liquidationThreshold: Percentage
   liquidationPenalty: Percentage
   categoryId: EModeCategoryId
   eModeCategoryTokens: TokenSymbol[]
-  token?: Token
 }
 
 export function EModeStatusPanel({
@@ -31,15 +28,13 @@ export function EModeStatusPanel({
   liquidationPenalty,
   categoryId,
   eModeCategoryTokens,
-  token,
 }: EModeStatusPanelProps) {
   const categoryName = eModeCategoryIdToName[categoryId]
 
   return (
     <StatusPanelGrid>
       <StatusIcon status="yes" />
       <Header status="yes" variant="e-mode" />
-      {token && <TokenBadge symbol={token.symbol} />}
       <InfoTilesGrid>
         <InfoTile>
           <InfoTile.Label>Max LTV</InfoTile.Label>
@@ -65,7 +60,7 @@ export function EModeStatusPanel({
             <EModeBadge categoryId={categoryId} />
           </InfoTile.Value>
         </InfoTile>
-        <p className="col-span-1 text-slate-500 text-xs sm:col-span-3">
+        <p className="typography-body-6 col-span-1 text-secondary sm:col-span-3">
           E-Mode for {categoryName} assets increases your LTV within the {categoryName} category. This means that when
           E-Mode is enabled, you will have higher borrowing power for assets in this category:{' '}
           {eModeCategoryTokens.join(', ')}. You can enter E-Mode from your{' '}

packages/app/src/features/market-details/components/status-panel/components/Subheader.tsx

@@ -16,7 +16,7 @@ export function Subheader({ status }: SubheaderProps) {
       <Content variant="orange">
         In Isolation Mode you can only borrow stablecoins up to the debt ceiling and cannot use any other asset as
         collateral.{' '}
-        <Link to={links.docs.isolationMode} variant="underline" external>
+        <Link to={links.docs.isolationMode} external>
           Learn more
         </Link>
         .
@@ -70,11 +70,11 @@ function Content({ children, variant }: ContentProps) {
   return <p className={cn(variants({ variant }), 'col-span-2 col-start-2 mt-1.5 mb-3')}>{children}</p>
 }
 
-const variants = cva('text-xs leading-none', {
+const variants = cva('typography-body-6', {
   variants: {
     variant: {
-      orange: 'text-product-orange',
-      red: 'text-product-red',
+      orange: 'text-system-warning-primary',
+      red: 'text-system-error-primary',
     },
   },
 })

packages/app/src/features/market-details/views/components/TokenLinksDropdown.tsx

@@ -82,11 +82,11 @@ function TokenLinksDropdownItem({ address, token, label }: TokenLinksDropdownIte
       <div className="flex max-w-60 flex-1 flex-col gap-1">
         <div className="flex items-center gap-1">
           <TokenIcon token={token} className="h-4 w-4" />
-          <div className="flex flex-row items-center gap-2.5 font-normal text-secondary lg:gap-1 group-hover:text-nav-primary lg:text-xs">
+          <div className="typography-label-6 flex flex-row items-center gap-2.5 text-secondary lg:gap-1 group-hover:text-brand-primary">
             {label}
           </div>
         </div>
-        <div className="flex items-center gap-2 font-semibold text-primary">
+        <div className="typography-body-5 flex items-center gap-2 text-primary">
           <Address address={address} postfix={<BoxArrowTopRight className="h-3.5 w-3.5" />} />
         </div>
       </div>

packages/app/src/features/markets/components/markets-table/components/AssetNameCell.tsx

@@ -31,8 +31,10 @@ export function AssetNameCell({ token, reserveStatus, 'data-testid': dataTestId
         </div>
       )}
       <div className="flex min-w-0 flex-col xl:flex-row xl:items-baseline xl:gap-2">
-        <TokenName token={token} className={cn(isPaused && 'text-red-600')} />
-        <p className={cn('typography-label-6 text-secondary', isPaused && 'text-red-300')}>{token.symbol}</p>
+        <TokenName token={token} className={cn(isPaused && 'text-system-error-secondary')} />
+        <p className={cn('typography-label-6 text-secondary', isPaused && 'text-system-error-secondary/60')}>
+          {token.symbol}
+        </p>
       </div>
       {isFrozen && <FrozenPill data-testid={testIds.markets.frozenPill} />}
       {isPaused && <PausedPill data-testid={testIds.markets.pausedPill} />}

packages/app/src/features/markets/components/summary-tile/components/Tile.tsx

@@ -34,7 +34,7 @@ export function Tile({ icon: Icon, title, USDValue, description, 'data-testid':
           {description && (
             <Tooltip>
               <TooltipTrigger>
-                <HelpCircle size={16} className="text-icon-foreground/50" />
+                <HelpCircle size={16} className="text-secondary/50" />
               </TooltipTrigger>
               <TooltipContent>{description}</TooltipContent>
             </Tooltip>