feat(SW-2178): Changed to new buttons for summary inside enter details

Approved-by: Michael Zetterberg
Approved-by: Matilda Landström

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -3,6 +3,7 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -12,7 +13,6 @@ import { dt } from "@/lib/dt"
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import Modal from "@/components/Modal"
-import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import IconChip from "@/components/TempDesignSystem/IconChip"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -109,10 +109,9 @@ export default function SummaryUI({
           {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
         </Body>
         <Button
-          intent="text"
+          onPress={handleToggleSummary}
-          size="small"
           className={styles.chevronButton}
-          onClick={handleToggleSummary}
+          variant="Icon"
         >
           <MaterialIcon
             icon="keyboard_arrow_down"
@@ -219,10 +218,17 @@ export default function SummaryUI({
                 </Caption>
                 <Modal
                   trigger={
-                    <Button intent="text">
+                    <Button
-                      <Caption color="burgundy" type="underline">
+                      variant="Text"
-                        {intl.formatMessage({ id: "Rate details" })}
+                      typography="Body/Supporting text (caption)/smBold"
-                      </Caption>
+                      wrapping={false}
+                    >
+                      {intl.formatMessage({ id: "Rate details" })}
+                      <MaterialIcon
+                        icon="chevron_right"
+                        size={20}
+                        color="CurrentColor"
+                      />
                     </Button>
                   }
                   title={

apps/scandic-web/components/HotelReservation/PriceDetailsModal.tsx

@@ -1,11 +1,10 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import Modal from "@/components/Modal"
-import Button from "@/components/TempDesignSystem/Button"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 export default function PriceDetailsModal({
   children,
@@ -16,10 +15,12 @@ export default function PriceDetailsModal({
     <Modal
       title={intl.formatMessage({ id: "Price details" })}
       trigger={
-        <Button intent="text">
+        <Button
-          <Caption color="burgundy">
+          variant="Text"
-            {intl.formatMessage({ id: "Price details" })}
+          typography="Body/Supporting text (caption)/smBold"
-          </Caption>
+          wrapping={false}
+        >
+          {intl.formatMessage({ id: "Price details" })}
           <MaterialIcon icon="chevron_right" color="CurrentColor" size={20} />
         </Button>
       }

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx

@@ -2,6 +2,7 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { dt } from "@/lib/dt"
@@ -9,7 +10,6 @@ import { dt } from "@/lib/dt"
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import Modal from "@/components/Modal"
-import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -79,12 +79,7 @@ export default function Summary({
           />
           {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
         </Body>
-        <Button
+        <Button onPress={toggleSummaryOpen} variant="Icon">
-          intent="text"
-          size="small"
-          className={styles.chevronButton}
-          onClick={toggleSummaryOpen}
-        >
           <MaterialIcon
             icon="keyboard_arrow_down"
             size={20}
@@ -181,10 +176,17 @@ export default function Summary({
                 </Caption>
                 <Modal
                   trigger={
-                    <Button intent="text">
+                    <Button
-                      <Caption color="burgundy" type="underline">
+                      variant="Text"
-                        {intl.formatMessage({ id: "Rate details" })}
+                      typography="Body/Supporting text (caption)/smBold"
-                      </Caption>
+                      wrapping={false}
+                    >
+                      {intl.formatMessage({ id: "Rate details" })}
+                      <MaterialIcon
+                        icon="chevron_right"
+                        size={20}
+                        color="CurrentColor"
+                      />
                     </Button>
                   }
                   title={room.cancellationText}

packages/design-system/.storybook/preview.tsx

@@ -2,8 +2,8 @@ import { withThemeByClassName } from '@storybook/addon-themes'
 
 import type { Preview, ReactRenderer } from '@storybook/react'
 
-import '../lib/style.css'
 import '../lib/fonts.css'
+import '../lib/style.css'
 
 export const themes = {
   themes: {
@@ -30,6 +30,18 @@ const preview: Preview = {
         order: ['Introduction', 'Global', 'Components', 'Compositions', '*'],
       },
     },
+    backgrounds: {
+      values: [
+        // 👇 Scandic
+        { name: 'Scandic Primary', value: '#FAF6F2' },
+        { name: 'Scandic Subtle', value: '#F2ECE6' },
+        { name: 'Scandic Primary Dark', value: '#4D001B' },
+        // 👇 Default values
+        { name: 'Storybook Dark', value: '#333' },
+        { name: 'Storybook Light', value: '#F7F9F2' },
+      ],
+      default: 'Scandic Primary',
+    },
   },
   tags: ['autodocs'],
 }

packages/design-system/lib/components/Button/Button.stories.tsx

@@ -2,9 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { fn } from '@storybook/test'
 
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { config as typographyConfig } from '../Typography/variants'
 import { Button } from './Button'
 import { config as buttonConfig } from './variants'
-import { config as typographyConfig } from '../Typography/variants'
 
 const meta: Meta<typeof Button> = {
   title: 'Components/Button',
@@ -22,6 +23,28 @@ const meta: Meta<typeof Button> = {
     variant: {
       control: 'select',
       options: Object.keys(buttonConfig.variants.variant),
+      default: 'Primary',
+    },
+    color: {
+      control: 'select',
+      options: Object.keys(buttonConfig.variants.color),
+      type: 'string',
+      description:
+        'The color variant, only applies to the variants `Primary`, `Secondary` and `Text`. Defaults to `Primary`.',
+    },
+    size: {
+      control: 'select',
+      options: Object.keys(buttonConfig.variants.size),
+      type: 'string',
+      description:
+        'The size of the button. Defaults to `Large`. This variant does not apply to the `Icon` variant.',
+    },
+    wrapping: {
+      control: 'radio',
+      options: Object.keys(buttonConfig.variants.wrapping),
+      type: 'boolean',
+      description:
+        'Only applies to variant `Text`. If `true`, the button will keep the default padding set on the buttons. Defaults to `true`.',
     },
   },
 }
@@ -67,6 +90,44 @@ export const PrimarySmall: Story = {
   },
 }
 
+export const PrimaryInvertedDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: 'Primary inverted button',
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Primary',
+    color: 'Inverted',
+  },
+}
+
+export const PrimaryInvertedDisabled: Story = {
+  args: {
+    ...PrimaryInvertedDefault.args,
+    isDisabled: true,
+  },
+}
+
+export const PrimaryInvertedLarge: Story = {
+  args: {
+    ...PrimaryInvertedDefault.args,
+    size: 'Large',
+  },
+}
+
+export const PrimaryInvertedMedium: Story = {
+  args: {
+    ...PrimaryInvertedDefault.args,
+    size: 'Medium',
+  },
+}
+
+export const PrimaryInvertedSmall: Story = {
+  args: {
+    ...PrimaryInvertedDefault.args,
+    size: 'Small',
+  },
+}
+
 export const SecondaryDefault: Story = {
   args: {
     onPress: fn(),
@@ -104,6 +165,44 @@ export const SecondarySmall: Story = {
   },
 }
 
+export const SecondaryInvertedDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: 'Secondary inverted button',
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Secondary',
+    color: 'Inverted',
+  },
+}
+
+export const SecondaryInvertedDisabled: Story = {
+  args: {
+    ...SecondaryInvertedDefault.args,
+    isDisabled: true,
+  },
+}
+
+export const SecondaryInvertedLarge: Story = {
+  args: {
+    ...SecondaryInvertedDefault.args,
+    size: 'Large',
+  },
+}
+
+export const SecondaryInvertedMedium: Story = {
+  args: {
+    ...SecondaryInvertedDefault.args,
+    size: 'Medium',
+  },
+}
+
+export const SecondaryInvertedSmall: Story = {
+  args: {
+    ...SecondaryInvertedDefault.args,
+    size: 'Small',
+  },
+}
+
 export const TertiaryDefault: Story = {
   args: {
     onPress: fn(),
@@ -141,43 +240,6 @@ export const TertiarySmall: Story = {
   },
 }
 
-export const InvertedDefault: Story = {
-  args: {
-    onPress: fn(),
-    children: 'Inverted button',
-    typography: 'Body/Paragraph/mdBold',
-    variant: 'Inverted',
-  },
-}
-
-export const InvertedDisabled: Story = {
-  args: {
-    ...InvertedDefault.args,
-    isDisabled: true,
-  },
-}
-
-export const InvertedLarge: Story = {
-  args: {
-    ...InvertedDefault.args,
-    size: 'Large',
-  },
-}
-
-export const InvertedMedium: Story = {
-  args: {
-    ...InvertedDefault.args,
-    size: 'Medium',
-  },
-}
-
-export const InvertedSmall: Story = {
-  args: {
-    ...InvertedDefault.args,
-    size: 'Small',
-  },
-}
-
 export const TextDefault: Story = {
   args: {
     onPress: fn(),
@@ -187,6 +249,13 @@ export const TextDefault: Story = {
   },
 }
 
+export const TextDisabled: Story = {
+  args: {
+    ...TextDefault.args,
+    isDisabled: true,
+  },
+}
+
 export const TextLarge: Story = {
   args: {
     ...TextDefault.args,
@@ -207,3 +276,100 @@ export const TextSmall: Story = {
     size: 'Small',
   },
 }
+
+export const TextNoWrapping: Story = {
+  args: {
+    ...TextDefault.args,
+    children: 'Text button with wrapping false',
+    wrapping: false,
+  },
+}
+
+export const TextInvertedDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: 'Text inverted button',
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Text',
+    color: 'Inverted',
+  },
+}
+
+export const TextInvertedDisabled: Story = {
+  args: {
+    ...TextInvertedDefault.args,
+    isDisabled: true,
+  },
+}
+
+export const TextInvertedLarge: Story = {
+  args: {
+    ...TextInvertedDefault.args,
+    size: 'Large',
+  },
+}
+
+export const TextInvertedMedium: Story = {
+  args: {
+    ...TextInvertedDefault.args,
+    size: 'Medium',
+  },
+}
+
+export const TextInvertedSmall: Story = {
+  args: {
+    ...TextInvertedDefault.args,
+    size: 'Small',
+  },
+}
+
+export const TextWithIcon: Story = {
+  args: {
+    onPress: fn(),
+    children: (
+      <>
+        Text with icon
+        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
+      </>
+    ),
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Text',
+  },
+}
+
+export const TextWithIconInverted: Story = {
+  args: {
+    onPress: fn(),
+    children: (
+      <>
+        Text with icon
+        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
+      </>
+    ),
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Text',
+    color: 'Inverted',
+  },
+}
+
+export const Icon: Story = {
+  args: {
+    onPress: fn(),
+    children: <MaterialIcon icon="favorite" size={24} />,
+    variant: 'Icon',
+  },
+}
+
+export const IconWithColor: Story = {
+  args: {
+    onPress: fn(),
+    children: (
+      <MaterialIcon
+        icon="check_circle"
+        size={24}
+        color="Icon/Feedback/Success"
+      />
+    ),
+    variant: 'Icon',
+  },
+}

packages/design-system/lib/components/Button/Button.tsx

@@ -10,6 +10,7 @@ export function Button({
   variant,
   color,
   size,
+  wrapping,
 
   typography,
   className,
@@ -20,6 +21,7 @@ export function Button({
     variant,
     color,
     size,
+    wrapping,
 
     typography,
     className,

packages/design-system/lib/components/Button/button.module.css

@@ -6,6 +6,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
+  &:disabled {
+    cursor: unset;
+  }
 }
 
 .size-large {
@@ -38,6 +42,24 @@
   color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
 }
 
+.variant-primary.color-inverted {
+  background-color: var(--Component-Button-Inverted-Fill-Default);
+  border-color: var(--Component-Button-Inverted-Border-Default);
+  color: var(--Component-Button-Inverted-On-fill-Default);
+}
+
+.variant-primary.color-inverted:hover {
+  background-color: var(--Component-Button-Inverted-Fill-Hover);
+  border-color: var(--Component-Button-Inverted-Border-Hover);
+  color: var(--Component-Button-Inverted-On-fill-Hover);
+}
+
+.variant-primary.color-inverted:disabled {
+  background-color: var(--Component-Button-Inverted-Fill-Disabled);
+  border-color: var(--Component-Button-Inverted-Border-Disabled);
+  color: var(--Component-Button-Inverted-On-fill-Disabled);
+}
+
 .variant-secondary {
   background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
   border-color: var(--Component-Button-Brand-Secondary-Border-Default);
@@ -56,6 +78,24 @@
   color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
 }
 
+.variant-secondary.color-inverted {
+  background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
+  border-color: var(--Component-Button-Brand-Secondary-Border-Inverted);
+  color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
+}
+
+.variant-secondary.color-inverted:hover {
+  background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
+  border-color: var(--Component-Button-Brand-Secondary-Border-Hover-inverted);
+  color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
+}
+
+.variant-secondary.color-inverted:disabled {
+  background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
+  border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
+  color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
+}
+
 .variant-tertiary {
   background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
   border-color: var(--Component-Button-Brand-Tertiary-Border-Default);
@@ -95,9 +135,36 @@
 .variant-text {
   background-color: transparent;
   border-color: transparent;
-  /* TODO: Missing text variant tokens for button */
+  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
-  color: var(--Scandic-Red-100);
+  padding-left: 0;
-  padding: var(--Space-x15) 0;
+  padding-right: 0;
+}
+
+.variant-text:hover {
+  color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
+  text-decoration: underline;
+}
+
+.variant-text:disabled {
+  color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
+  text-decoration: none;
+}
+
+.variant-text.no-wrapping {
+  padding: var(--Space-x025) 0;
+  border-width: 0;
+}
+
+.variant-text.color-inverted {
+  color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
+}
+
+.variant-text.color-inverted:hover {
+  color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
+}
+
+.variant-text.color-inverted:disabled {
+  color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
 }
 
 .variant-icon {
@@ -107,7 +174,3 @@
   padding: 0;
   margin: 0;
 }
-
-.color-icon-default {
-  color: var(--Icon-Default);
-}

packages/design-system/lib/components/Button/variants.ts

@@ -21,18 +21,22 @@ export const config = {
     color: {
       Primary: styles['color-primary'],
       Inverted: styles['color-inverted'],
-      IconDefault: styles['color-icon-default'],
     },
     size: {
       Small: styles['size-small'],
       Medium: styles['size-medium'],
       Large: styles['size-large'],
     },
+    wrapping: {
+      true: undefined,
+      false: styles['no-wrapping'],
+    },
   },
   defaultVariants: {
     variant: 'Primary',
     color: 'Primary',
     size: 'Large',
+    wrapping: true,
   },
 } as const
 

packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { fn } from '@storybook/test'
 
-import { MaterialSymbol } from 'react-material-symbols'
+import { MaterialIcon } from '../Icons/MaterialIcon/MaterialIcon.tsx'
 import { ChipButton } from './ChipButton.tsx'
 import { config as chipButtonConfig } from './variants'
 
@@ -35,7 +35,7 @@ export const Default: Story = {
     children: (
       <>
         Button Chip
-        <MaterialSymbol icon="chevron_right" size={20} />
+        <MaterialIcon icon="chevron_right" size={20} />
       </>
     ),
   },
@@ -48,7 +48,7 @@ export const Outlined: Story = {
     children: (
       <>
         Button Chip
-        <MaterialSymbol icon="keyboard_arrow_down" size={20} />
+        <MaterialIcon icon="keyboard_arrow_down" size={20} />
       </>
     ),
   },

packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx

@@ -15,6 +15,7 @@ export interface MaterialIconProps
 export type MaterialIconSetIconProps = Omit<MaterialIconProps, 'icon'>
 export function MaterialIcon({
   color,
+  size = 24,
   className,
   isFilled = false,
   ...props
@@ -23,7 +24,12 @@ export function MaterialIcon({
   return (
     // The span is used to prevent the MaterialSymbol from being underlined when used inside a link or button
     <span>
-      <MaterialSymbol className={classNames} {...props} fill={isFilled} />
+      <MaterialSymbol
+        className={classNames}
+        size={size}
+        {...props}
+        fill={isFilled}
+      />
     </span>
   )
 }

packages/design-system/lib/components/RateCard/Campaign/index.tsx

@@ -1,11 +1,11 @@
 import { Typography } from '../../Typography'
 import { Rate, RateTermDetails } from '../types'
 
-import styles from '../rate-card.module.css'
 import { Button } from '../../Button'
-import { variants } from '../variants'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
 import Modal from '../Modal'
+import styles from '../rate-card.module.css'
+import { variants } from '../variants'
 
 interface CampaignRateCardProps {
   name: string
@@ -67,11 +67,11 @@ export default function CampaignRateCard({
                   title={rateTitle}
                   subtitle={paymentTerm}
                   trigger={
-                    <Button variant="Icon" color="IconDefault" size="Small">
+                    <Button variant="Icon" size="Small">
                       <MaterialIcon
                         icon="info"
                         size={20}
-                        color="CurrentColor"
+                        color="Icon/Default"
                       />
                     </Button>
                   }

packages/design-system/lib/components/RateCard/Code/index.tsx

@@ -1,11 +1,11 @@
 import { Rate, RateTermDetails } from '../types'
 
-import styles from '../rate-card.module.css'
-import { Typography } from '../../Typography'
 import { Button } from '../../Button'
-import { variants } from '../variants'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { Typography } from '../../Typography'
 import Modal from '../Modal'
+import styles from '../rate-card.module.css'
+import { variants } from '../variants'
 
 interface CodeRateCardProps {
   name: string
@@ -63,11 +63,11 @@ export default function CodeRateCard({
                   title={rateTitle}
                   subtitle={paymentTerm}
                   trigger={
-                    <Button variant="Icon" color="IconDefault" size="Small">
+                    <Button variant="Icon" size="Small">
                       <MaterialIcon
                         icon="info"
                         size={20}
-                        color="CurrentColor"
+                        color="Icon/Default"
                       />
                     </Button>
                   }

packages/design-system/lib/components/RateCard/NoRateAvailable/index.tsx

@@ -1,8 +1,8 @@
-import styles from '../rate-card.module.css'
-import { Typography } from '../../Typography'
 import { Button } from '../../Button'
-import { variants } from '../variants'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { Typography } from '../../Typography'
+import styles from '../rate-card.module.css'
+import { variants } from '../variants'
 
 interface NoRateAvailableCardProps {
   variant: 'Regular' | 'Campaign' | 'Code' | 'Points'
@@ -34,8 +34,8 @@ export default function NoRateAvailableCard({
         <header>
           <Typography variant="Tag/sm">
             <h3 className={`${styles.title} ${styles.textDisabled}`}>
-              <Button variant="Icon" color="IconDefault" size="Small">
+              <Button variant="Icon" size="Small">
-                <MaterialIcon icon="info" size={20} color="CurrentColor" />
+                <MaterialIcon icon="info" size={20} color="Icon/Default" />
               </Button>
               {`${rateTitle} / ${paymentTerm}`}
             </h3>

packages/design-system/lib/components/RateCard/Points/index.tsx

@@ -1,13 +1,13 @@
 import { Typography } from '../../Typography'
 import { RatePointsOption, RateTermDetails } from '../types'
 
-import styles from '../rate-card.module.css'
-import { Button } from '../../Button'
-import { Radio } from '../../Radio'
 import { RadioGroup } from 'react-aria-components'
-import { variants } from '../variants'
+import { Button } from '../../Button'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { Radio } from '../../Radio'
 import Modal from '../Modal'
+import styles from '../rate-card.module.css'
+import { variants } from '../variants'
 
 interface PointsRateCardProps {
   rateTitle: string
@@ -49,8 +49,8 @@ export default function PointsRateCard({
                 title={rateTitle}
                 subtitle={paymentTerm}
                 trigger={
-                  <Button variant="Icon" color="IconDefault" size="Small">
+                  <Button variant="Icon" size="Small">
-                    <MaterialIcon icon="info" size={20} color="CurrentColor" />
+                    <MaterialIcon icon="info" size={20} color="Icon/Default" />
                   </Button>
                 }
               >

packages/design-system/lib/components/RateCard/Regular/index.tsx

@@ -1,11 +1,11 @@
 import { Rate, RateTermDetails } from '../types'
 
-import styles from '../rate-card.module.css'
-import { Typography } from '../../Typography'
 import { Button } from '../../Button'
-import { variants } from '../variants'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { Typography } from '../../Typography'
 import Modal from '../Modal'
+import styles from '../rate-card.module.css'
+import { variants } from '../variants'
 
 interface RegularRateCardProps {
   name: string
@@ -56,11 +56,11 @@ export default function RegularRateCard({
                   title={rateTitle}
                   subtitle={paymentTerm}
                   trigger={
-                    <Button variant="Icon" color="IconDefault" size="Small">
+                    <Button variant="Icon" size="Small">
                       <MaterialIcon
                         icon="info"
                         size={20}
-                        color="CurrentColor"
+                        color="Icon/Default"
                       />
                     </Button>
                   }