diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx index 3df369dfe..99d3ed5ea 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx @@ -8,7 +8,10 @@ import Body from "@scandic-hotels/design-system/Body" import Caption from "@scandic-hotels/design-system/Caption" import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" +import { + type ButtonProps, + OldDSButton as Button, +} from "@scandic-hotels/design-system/OldDSButton" import Switch from "@scandic-hotels/design-system/Switch" import { Typography } from "@scandic-hotels/design-system/Typography" import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking" @@ -26,7 +29,6 @@ import type { BookingCodeSchema, BookingWidgetSchema, } from "@/types/components/bookingWidget" -import type { ButtonProps } from "@/components/TempDesignSystem/Button/button" export default function BookingCode() { const intl = useIntl() diff --git a/apps/scandic-web/components/GuestsRoomsPicker/Form.tsx b/apps/scandic-web/components/GuestsRoomsPicker/Form.tsx index 7c0f405a8..1f0ccd142 100644 --- a/apps/scandic-web/components/GuestsRoomsPicker/Form.tsx +++ b/apps/scandic-web/components/GuestsRoomsPicker/Form.tsx @@ -5,11 +5,11 @@ import { useFormContext, useWatch } from "react-hook-form" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Tooltip } from "@scandic-hotels/design-system/Tooltip" import { Typography } from "@scandic-hotels/design-system/Typography" import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking" -import Button from "../TempDesignSystem/Button" import { GuestsRoom } from "./GuestsRoom" import styles from "./guests-rooms-picker.module.css" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/index.tsx index 0aeb34735..fea6387b6 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/index.tsx @@ -1,12 +1,13 @@ -import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" +import { + type ButtonProps as _ButtonProps, + OldDSButton as Button, +} from "@scandic-hotels/design-system/OldDSButton" import styles from "./footer.module.css" import type { ButtonHTMLAttributes, PropsWithChildren } from "react" import type { ButtonProps as ReactAriaButtonProps } from "react-aria-components" -import type { ButtonProps as _ButtonProps } from "@/components/TempDesignSystem/Button/button" - export default function Footer({ children }: PropsWithChildren) { return } diff --git a/apps/scandic-web/components/SasTierComparison/index.tsx b/apps/scandic-web/components/SasTierComparison/index.tsx index 375406ee4..b387c4202 100644 --- a/apps/scandic-web/components/SasTierComparison/index.tsx +++ b/apps/scandic-web/components/SasTierComparison/index.tsx @@ -4,6 +4,7 @@ import Image from "next/image" import Body from "@scandic-hotels/design-system/Body" import Caption from "@scandic-hotels/design-system/Caption" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" import Title from "@scandic-hotels/design-system/Title" @@ -11,7 +12,6 @@ import JsonToHtml from "@/components/JsonToHtml" import Link from "@/components/TempDesignSystem/Link" import SectionContainer from "../Section/Container" -import Button from "../TempDesignSystem/Button" import styles from "./sasTierComparison.module.css" diff --git a/apps/scandic-web/components/TempDesignSystem/Button/button.module.css b/apps/scandic-web/components/TempDesignSystem/Button/button.module.css deleted file mode 100644 index 33dae6479..000000000 --- a/apps/scandic-web/components/TempDesignSystem/Button/button.module.css +++ /dev/null @@ -1,843 +0,0 @@ -.btn { - background: none; - border-radius: var(--Corner-radius-rounded); - cursor: pointer; - margin: 0; - padding: 0; - text-align: center; - transition: - background-color 300ms ease, - color 300ms ease; - - font-family: var(--typography-Body-Bold-fontFamily); - font-size: var(--typography-Body-Bold-fontSize); - font-weight: 500; - line-height: var(--typography-Body-Bold-lineHeight); - letter-spacing: 0.084px; - text-decoration: none; -} - -.wrapping { - padding-left: 0 !important; - padding-right: 0 !important; -} - -.fullWidth { - width: 100%; -} - -/* INTENT */ -.primary, -a.primary { - border: none; -} - -.secondary, -a.secondary { - background: none; - border-style: solid; - border-width: 2px; -} - -.tertiary, -a.tertiary { - border: none; -} - -.inverted, -a.inverted { - border: none; -} - -.text, -a.text { - background: none; - border: none; - outline: none; -} - -/* TODO: The variants for combinations of size/text/wrapping should be looked at and iterated on */ -.text:not(.wrapping) { - padding: 0 !important; -} - -/* VARIANTS */ -.default, -a.default { - align-items: center; - display: flex; - gap: var(--Spacing-x1); - justify-content: center; -} - -.btn.icon:is(.small, .medium, .large) { - align-items: center; - display: flex; - gap: var(--Spacing-x1); - justify-content: center; -} - -/* SIZES */ -.btn.small { - font-size: var(--typography-Caption-Bold-fontSize); - line-height: var(--typography-Caption-Bold-lineHeight); - gap: var(--Spacing-x-quarter); - padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2); - /* Special case padding to adjust the missing border */ -} - -.btn.small.secondary { - padding: var(--Spacing-x1) var(--Spacing-x2); -} - -.btn.medium { - gap: var(--Spacing-x-half); - padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2); - /* Special case padding to adjust the missing border */ -} - -.medium.secondary { - padding: var(--Spacing-x-one-and-half) var(--Spacing-x2); -} - -.btn.large { - gap: var(--Spacing-x-half); - padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3); - /* Special case padding to adjust the missing border */ -} - -.large.secondary { - gap: var(--Spacing-x-half); - padding: var(--Spacing-x2) var(--Spacing-x3); -} - -/* DISABLED */ -.btn:disabled { - background-color: var(--disabled-background-color); - color: var(--disabled-color); - cursor: not-allowed; -} - -/* THEMES */ -.basePrimary { - background-color: var(--Base-Button-Primary-Fill-Normal); - color: var(--Base-Button-Primary-On-Fill-Normal); -} - -.basePrimary:active, -.basePrimary:focus, -.basePrimary:hover { - background-color: var(--Base-Button-Primary-Fill-Hover); - color: var(--Base-Button-Primary-On-Fill-Hover); -} - -.basePrimary:disabled { - background-color: var(--Base-Button-Primary-Fill-Disabled); - color: var(--Base-Button-Primary-On-Fill-Disabled); -} - -.icon.basePrimary svg, -.icon.basePrimary svg * { - fill: var(--Base-Button-Primary-On-Fill-Normal); -} - -.icon.basePrimary:active svg, -.icon.basePrimary:focus svg, -.icon.basePrimary:hover svg, -.icon.basePrimary:active svg *, -.icon.basePrimary:focus svg *, -.icon.basePrimary:hover svg * { - fill: var(--Base-Button-Primary-On-Fill-Hover); -} - -.icon.basePrimary:disabled *, -.icon.basePrimary:disabled svg * { - fill: var(--Base-Button-Primary-On-Fill-Disabled); -} - -.baseSecondary { - background-color: var(--Base-Button-Secondary-Fill-Normal); - border-color: var(--Base-Button-Secondary-Border-Normal); - color: var(--Base-Button-Secondary-On-Fill-Normal); -} - -.baseSecondary:active, -.baseSecondary:focus, -.baseSecondary:hover { - background-color: var(--Base-Button-Secondary-Fill-Hover); - border-color: var(--Base-Button-Secondary-Border-Hover); - color: var(--Base-Button-Secondary-On-Fill-Hover); -} - -.baseSecondary:disabled { - background-color: var(--Base-Button-Secondary-Fill-Disabled); - border-color: var(--Base-Button-Secondary-Border-Disabled); - color: var(--Base-Button-Secondary-On-Fill-Disabled); -} - -.icon.baseSecondary svg, -.icon.baseSecondary svg * { - fill: var(--Base-Button-Secondary-On-Fill-Normal); -} - -.icon.baseSecondary:active svg, -.icon.baseSecondary:focus svg, -.icon.baseSecondary:hover svg, -.icon.baseSecondary:active svg *, -.icon.baseSecondary:focus svg *, -.icon.baseSecondary:hover svg * { - fill: var(--Base-Button-Secondary-On-Fill-Hover); -} - -.icon.baseSecondary:disabled svg, -.icon.baseSecondary:disabled svg * { - fill: var(--Base-Button-Secondary-On-Fill-Disabled); -} - -.btn.baseTertiary { - background-color: var(--Base-Button-Tertiary-Fill-Normal); - color: var(--Base-Button-Tertiary-On-Fill-Normal); -} - -.btn.baseTertiary:active, -.btn.baseTertiary:focus, -.btn.baseTertiary:hover { - background-color: var(--Base-Button-Tertiary-Fill-Hover); - color: var(--Base-Button-Tertiary-On-Fill-Hover); -} - -.btn.baseTertiary:disabled { - background-color: var(--Base-Button-Tertiary-Fill-Disabled); - color: var(--Base-Button-Tertiary-On-Fill-Disabled); -} - -.icon.baseTertiary svg, -.icon.baseTertiary svg * { - fill: var(--Base-Button-Tertiary-On-Fill-Normal); -} - -.icon.baseTertiary:active svg, -.icon.baseTertiary:focus svg, -.icon.baseTertiary:hover svg, -.icon.baseTertiary:active svg *, -.icon.baseTertiary:focus svg *, -.icon.baseTertiary:hover svg * { - fill: var(--Base-Button-Tertiary-On-Fill-Hover); -} - -.icon.baseTertiary:disabled svg, -.icon.baseTertiary:disabled svg * { - fill: var(--Base-Button-Tertiary-On-Fill-Disabled); -} - -.baseInverted { - background-color: var(--Base-Button-Inverted-Fill-Normal); - color: var(--Base-Button-Inverted-On-Fill-Normal); -} - -.baseInverted:active, -.baseInverted:focus, -.baseInverted:hover { - background-color: var(--Base-Button-Inverted-Fill-Hover); - color: var(--Base-Button-Inverted-On-Fill-Hover); -} - -.baseInverted:disabled { - background-color: var(--Base-Button-Inverted-Fill-Disabled); - color: var(--Base-Button-Inverted-On-Fill-Disabled); -} - -.icon.baseInverted svg, -.icon.baseInverted svg * { - fill: var(--Base-Button-Inverted-On-Fill-Normal); -} - -.icon.baseInverted:active svg, -.icon.baseInverted:focus svg, -.icon.baseInverted:hover svg, -.icon.baseInverted:active svg *, -.icon.baseInverted:focus svg *, -.icon.baseInverted:hover svg * { - fill: var(--Base-Button-Inverted-On-Fill-Hover); -} - -.icon.baseInverted:disabled svg, -.icon.baseInverted:disabled svg * { - fill: var(--Base-Button-Inverted-On-Fill-Disabled); -} - -.baseText { - color: var(--Base-Button-Text-On-Fill-Normal); -} - -.baseTextInverted { - color: var(--Base-Button-Primary-On-Fill-Normal); -} - -.baseText:active, -.baseText:focus, -.baseText:hover { - color: var(--Base-Button-Text-On-Fill-Hover); - text-decoration: underline; -} - -.baseText:disabled { - color: var(--Base-Button-Text-On-Fill-Disabled); -} - -.icon.baseText svg, -.icon.baseText svg * { - fill: var(--Base-Button-Text-On-Fill-Normal); -} - -.icon.baseText:active svg, -.icon.baseText:focus svg, -.icon.baseText:hover svg, -.icon.baseText:active svg *, -.icon.baseText:focus svg *, -.icon.baseText:hover svg * { - fill: var(--Base-Button-Text-On-Fill-Hover); - text-decoration: underline; -} - -.icon.baseText:disabled svg, -.icon.baseText:disabled svg * { - fill: var(--Base-Button-Text-On-Fill-Disabled); -} - -.primaryStrongPrimary { - background-color: var(--Primary-Strong-Button-Primary-Fill-Normal); - color: var(--Primary-Strong-Button-Primary-On-Fill-Normal); -} - -.primaryStrongPrimary:active, -.primaryStrongPrimary:focus, -.primaryStrongPrimary:hover { - background-color: var(--Primary-Strong-Button-Primary-Fill-Hover); - color: var(--Primary-Strong-Button-Primary-On-Fill-Hover); -} - -.primaryStrongPrimary:disabled { - background-color: var(--Primary-Strong-Button-Primary-Fill-Disabled); - color: var(--Primary-Strong-Button-Primary-On-Fill-Disabled); -} - -.icon.primaryStrongPrimary svg, -.icon.primaryStrongPrimary svg * { - fill: var(--Primary-Strong-Button-Primary-On-Fill-Normal); -} - -.icon.primaryStrongPrimary:active svg, -.icon.primaryStrongPrimary:focus svg, -.icon.primaryStrongPrimary:hover svg, -.icon.primaryStrongPrimary:active svg *, -.icon.primaryStrongPrimary:focus svg *, -.icon.primaryStrongPrimary:hover svg * { - fill: var(--Primary-Strong-Button-Primary-On-Fill-Hover); -} - -.icon.primaryStrongPrimary:disabled svg, -.icon.primaryStrongPrimary:disabled svg * { - fill: var(--Primary-Strong-Button-Primary-On-Fill-Disabled); -} - -.primaryStrongSecondary { - background-color: var(--Primary-Strong-Button-Secondary-Fill-Normal); - border-color: var(--Primary-Strong-Button-Secondary-Border-Normal); - color: var(--Primary-Strong-Button-Secondary-On-Fill-Normal); -} - -.primaryStrongSecondary:active, -.primaryStrongSecondary:focus, -.primaryStrongSecondary:hover { - background-color: var(--Primary-Strong-Button-Secondary-Fill-Hover); - border-color: var(--Primary-Strong-Button-Secondary-Border-Hover); - color: var(--Primary-Strong-Button-Secondary-On-Fill-Hover); -} - -.primaryStrongSecondary:disabled { - background-color: var(--Primary-Strong-Button-Secondary-Fill-Disabled); - border-color: var(--Primary-Strong-Button-Secondary-Border-Disabled); - color: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled); -} - -.icon.primaryStrongSecondary svg, -.icon.primaryStrongSecondary svg * { - fill: var(--Primary-Strong-Button-Secondary-On-Fill-Normal); -} - -.icon.primaryStrongSecondary:active svg, -.icon.primaryStrongSecondary:focus svg, -.icon.primaryStrongSecondary:hover svg, -.icon.primaryStrongSecondary:active svg *, -.icon.primaryStrongSecondary:focus svg *, -.icon.primaryStrongSecondary:hover svg * { - fill: var(--Primary-Strong-Button-Secondary-On-Fill-Hover); -} - -.icon.primaryStrongSecondary:disabled svg, -.icon.primaryStrongSecondary:disabled svg * { - fill: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled); -} - -.primaryDarkPrimary { - background-color: var(--Primary-Dark-Button-Primary-Fill-Normal); - color: var(--Primary-Dark-Button-Primary-On-Fill-Normal); -} - -.primaryDarkPrimary:active, -.primaryDarkPrimary:focus, -.primaryDarkPrimary:hover { - background-color: var(--Primary-Dark-Button-Primary-Fill-Hover); - color: var(--Primary-Dark-Button-Primary-On-Fill-Hover); -} - -.primaryDarkPrimary:disabled { - background-color: var(--Primary-Dark-Button-Primary-Fill-Disabled); - color: var(--Primary-Dark-Button-Primary-On-Fill-Disabled); -} - -.icon.primaryDarkPrimary svg, -.icon.primaryDarkPrimary svg * { - fill: var(--Primary-Dark-Button-Primary-On-Fill-Normal); -} - -.icon.primaryDarkPrimary:active svg, -.icon.primaryDarkPrimary:focus svg, -.icon.primaryDarkPrimary:hover svg, -.icon.primaryDarkPrimary:active svg *, -.icon.primaryDarkPrimary:focus svg *, -.icon.primaryDarkPrimary:hover svg * { - fill: var(--Primary-Dark-Button-Primary-On-Fill-Hover); -} - -.icon.primaryDarkPrimary:disabled svg, -.icon.primaryDarkPrimary:disabled svg * { - fill: var(--Primary-Dark-Button-Primary-On-Fill-Disabled); -} - -.primaryDarkSecondary { - background-color: var(--Primary-Dark-Button-Secondary-Fill-Normal); - border-color: var(--Primary-Dark-Button-Secondary-Border-Normal); - color: var(--Primary-Dark-Button-Secondary-On-Fill-Normal); -} - -.primaryDarkSecondary:active, -.primaryDarkSecondary:focus, -.primaryDarkSecondary:hover { - background-color: var(--Primary-Dark-Button-Secondary-Fill-Hover); - border-color: var(--Primary-Dark-Button-Secondary-Border-Hover); - color: var(--Primary-Dark-Button-Secondary-On-Fill-Hover); -} - -.primaryDarkSecondary:disabled { - background-color: var(--Primary-Dark-Button-Secondary-Fill-Disabled); - border-color: var(--Primary-Dark-Button-Secondary-Border-Disabled); - color: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled); -} - -.icon.primaryDarkSecondary svg, -.icon.primaryDarkSecondary svg * { - fill: var(--Primary-Dark-Button-Secondary-On-Fill-Normal); -} - -.icon.primaryDarkSecondary:active svg, -.icon.primaryDarkSecondary:focus svg, -.icon.primaryDarkSecondary:hover svg, -.icon.primaryDarkSecondary:active svg *, -.icon.primaryDarkSecondary:focus svg *, -.icon.primaryDarkSecondary:hover svg * { - fill: var(--Primary-Dark-Button-Secondary-On-Fill-Hover); -} - -.icon.primaryDarkSecondary:disabled svg, -.icon.primaryDarkSecondary:disabled svg * { - fill: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled); -} - -.primaryLightPrimary { - background-color: var(--Primary-Light-Button-Primary-Fill-Normal); - color: var(--Primary-Light-Button-Primary-On-Fill-Normal); -} - -.primaryLightPrimary:active, -.primaryLightPrimary:focus, -.primaryLightPrimary:hover { - background-color: var(--Primary-Light-Button-Primary-Fill-Hover); - color: var(--Primary-Light-Button-Primary-On-Fill-Hover); -} - -.primaryLightPrimary:disabled { - background-color: var(--Primary-Light-Button-Primary-Fill-Disabled); - color: var(--Primary-Light-Button-Primary-On-Fill-Disabled); -} - -.icon.primaryLightPrimary svg, -.icon.primaryLightPrimary svg * { - fill: var(--Primary-Light-Button-Primary-On-Fill-Normal); -} - -.icon.primaryLightPrimary:active svg, -.icon.primaryLightPrimary:focus svg, -.icon.primaryLightPrimary:hover svg, -.icon.primaryLightPrimary:active svg *, -.icon.primaryLightPrimary:focus svg *, -.icon.primaryLightPrimary:hover svg * { - fill: var(--Primary-Light-Button-Primary-On-Fill-Hover); -} - -.icon.primaryLightPrimary:disabled svg, -.icon.primaryLightPrimary:disabled svg * { - fill: var(--Primary-Light-Button-Primary-On-Fill-Disabled); -} - -.primaryLightSecondary { - background-color: var(--Primary-Light-Button-Secondary-Fill-Normal); - border-color: var(--Primary-Light-Button-Secondary-Border-Normal); - color: var(--Primary-Light-Button-Secondary-On-Fill-Normal); -} - -.primaryLightSecondary:active, -.primaryLightSecondary:focus, -.primaryLightSecondary:hover { - background-color: var(--Primary-Light-Button-Secondary-Fill-Hover); - border-color: var(--Primary-Light-Button-Secondary-Border-Hover); - color: var(--Primary-Light-Button-Secondary-On-Fill-Hover); -} - -.primaryLightSecondary:disabled { - background-color: var(--Primary-Light-Button-Secondary-Fill-Disabled); - border-color: var(--Primary-Light-Button-Secondary-Border-Disabled); - color: var(--Primary-Light-Button-Secondary-On-Fill-Disabled); -} - -.icon.primaryLightSecondary svg, -.icon.primaryLightSecondary svg * { - fill: var(--Primary-Light-Button-Secondary-On-Fill-Normal); -} - -.icon.primaryLightSecondary:active svg, -.icon.primaryLightSecondary:focus svg, -.icon.primaryLightSecondary:hover svg, -.icon.primaryLightSecondary:active svg *, -.icon.primaryLightSecondary:focus svg *, -.icon.primaryLightSecondary:hover svg * { - fill: var(--Primary-Light-Button-Secondary-On-Fill-Hover); -} - -.icon.primaryLightSecondary:disabled svg, -.icon.primaryLightSecondary:disabled svg * { - fill: var(--Primary-Light-Button-Secondary-On-Fill-Disabled); -} - -.secondaryDarkPrimary { - background-color: var(--Secondary-Dark-Button-Primary-Fill-Normal); - color: var(--Secondary-Dark-Button-Primary-On-Fill-Normal); -} - -.secondaryDarkPrimary:active, -.secondaryDarkPrimary:focus, -.secondaryDarkPrimary:hover { - background-color: var(--Secondary-Dark-Button-Primary-Fill-Hover); - color: var(--Secondary-Dark-Button-Primary-On-Fill-Hover); -} - -.secondaryDarkPrimary:disabled { - background-color: var(--Secondary-Dark-Button-Primary-Fill-Disabled); - color: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled); -} - -.icon.secondaryDarkPrimary svg, -.icon.secondaryDarkPrimary svg * { - fill: var(--Secondary-Dark-Button-Primary-On-Fill-Normal); -} - -.icon.secondaryDarkPrimary:active svg, -.icon.secondaryDarkPrimary:focus svg, -.icon.secondaryDarkPrimary:hover svg, -.icon.secondaryDarkPrimary:active svg *, -.icon.secondaryDarkPrimary:focus svg *, -.icon.secondaryDarkPrimary:hover svg * { - fill: var(--Secondary-Dark-Button-Primary-On-Fill-Hover); -} - -.icon.secondaryDarkPrimary:disabled svg, -.icon.secondaryDarkPrimary:disabled svg * { - fill: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled); -} - -.secondaryDarkSecondary { - background-color: var(--Secondary-Dark-Button-Secondary-Fill-Normal); - border-color: var(--Secondary-Dark-Button-Secondary-Border-Normal); - color: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal); -} - -.secondaryDarkSecondary:active, -.secondaryDarkSecondary:focus, -.secondaryDarkSecondary:hover { - background-color: var(--Secondary-Dark-Button-Secondary-Fill-Hover); - border-color: var(--Secondary-Dark-Button-Secondary-Border-Hover); - color: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover); -} - -.secondaryDarkSecondary:disabled { - background-color: var(--Secondary-Dark-Button-Secondary-Fill-Disabled); - border-color: var(--Secondary-Dark-Button-Secondary-Border-Disabled); - color: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled); -} - -.icon.secondaryDarkSecondary svg, -.icon.secondaryDarkSecondary svg * { - fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal); -} - -.icon.secondaryDarkSecondary:active svg, -.icon.secondaryDarkSecondary:focus svg, -.icon.secondaryDarkSecondary:hover svg, -.icon.secondaryDarkSecondary:active svg *, -.icon.secondaryDarkSecondary:focus svg *, -.icon.secondaryDarkSecondary:hover svg * { - fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover); -} - -.icon.secondaryDarkSecondary:disabled svg, -.icon.secondaryDarkSecondary:disabled svg * { - fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled); -} - -.secondaryLightPrimary { - background-color: var(--Secondary-Light-Button-Primary-Fill-Normal); - color: var(--Secondary-Light-Button-Primary-On-Fill-Normal); -} - -.secondaryLightPrimary:active, -.secondaryLightPrimary:focus, -.secondaryLightPrimary:hover { - background-color: var(--Secondary-Light-Button-Primary-Fill-Hover); - color: var(--Secondary-Light-Button-Primary-On-Fill-Hover); -} - -.secondaryLightPrimary:disabled { - background-color: var(--Secondary-Light-Button-Primary-Fill-Disabled); - color: var(--Secondary-Light-Button-Primary-On-Fill-Disabled); -} - -.icon.secondaryLightPrimary svg, -.icon.secondaryLightPrimary svg * { - fill: var(--Secondary-Light-Button-Primary-On-Fill-Normal); -} - -.icon.secondaryLightPrimary:active svg, -.icon.secondaryLightPrimary:focus svg, -.icon.secondaryLightPrimary:hover svg, -.icon.secondaryLightPrimary:active svg *, -.icon.secondaryLightPrimary:focus svg *, -.icon.secondaryLightPrimary:hover svg * { - fill: var(--Secondary-Light-Button-Primary-On-Fill-Hover); -} - -.icon.secondaryLightPrimary:disabled svg, -.icon.secondaryLightPrimary:disabled svg * { - fill: var(--Secondary-Light-Button-Primary-On-Fill-Disabled); -} - -.secondaryLightSecondary { - background-color: var(--Secondary-Light-Button-Secondary-Fill-Normal); - border-color: var(--Secondary-Light-Button-Secondary-Border-Normal); - color: var(--Secondary-Light-Button-Secondary-On-Fill-Normal); -} - -.secondaryLightSecondary:active, -.secondaryLightSecondary:focus, -.secondaryLightSecondary:hover { - background-color: var(--Secondary-Light-Button-Secondary-Fill-Hover); - border-color: var(--Secondary-Light-Button-Secondary-Border-Hover); - color: var(--Secondary-Light-Button-Secondary-On-Fill-Hover); -} - -.secondaryLightSecondary:disabled { - background-color: var(--Secondary-Light-Button-Secondary-Fill-Disabled); - border-color: var(--Secondary-Light-Button-Secondary-Border-Disabled); - color: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled); -} - -.icon.secondaryLightSecondary svg, -.icon.secondaryLightSecondary svg * { - fill: var(--Secondary-Light-Button-Secondary-On-Fill-Normal); -} - -.icon.secondaryLightSecondary:active svg, -.icon.secondaryLightSecondary:focus svg, -.icon.secondaryLightSecondary:hover svg, -.icon.secondaryLightSecondary:active svg *, -.icon.secondaryLightSecondary:focus svg *, -.icon.secondaryLightSecondary:hover svg * { - fill: var(--Secondary-Light-Button-Secondary-On-Fill-Hover); -} - -.icon.secondaryLightSecondary:disabled svg, -.icon.secondaryLightSecondary:disabled svg * { - fill: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled); -} - -.tertiaryDarkPrimary { - background-color: var(--Tertiary-Dark-Button-Primary-Fill-Normal); - color: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal); -} - -.tertiaryDarkPrimary:active, -.tertiaryDarkPrimary:focus, -.tertiaryDarkPrimary:hover { - background-color: var(--Tertiary-Dark-Button-Primary-Fill-Hover); - color: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover); -} - -.tertiaryDarkPrimary:disabled { - background-color: var(--Tertiary-Dark-Button-Primary-Fill-Disabled); - color: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled); -} - -.icon.tertiaryDarkPrimary svg, -.icon.tertiaryDarkPrimary svg * { - fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal); -} - -.icon.tertiaryDarkPrimary:active svg, -.icon.tertiaryDarkPrimary:focus svg, -.icon.tertiaryDarkPrimary:hover svg, -.icon.tertiaryDarkPrimary:active svg *, -.icon.tertiaryDarkPrimary:focus svg *, -.icon.tertiaryDarkPrimary:hover svg * { - fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover); -} - -.icon.tertiaryDarkPrimary:disabled svg, -.icon.tertiaryDarkPrimary:disabled svg * { - fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled); -} - -.tertiaryDarkSecondary { - background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Normal); - border-color: var(--Tertiary-Dark-Button-Secondary-Border-Normal); - color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal); -} - -.tertiaryDarkSecondary:active, -.tertiaryDarkSecondary:focus, -.tertiaryDarkSecondary:hover { - background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Hover); - border-color: var(--Tertiary-Dark-Button-Secondary-Border-Hover); - color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover); -} - -.tertiaryDarkSecondary:disabled { - background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Disabled); - border-color: var(--Tertiary-Dark-Button-Secondary-Border-Disabled); - color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled); -} - -.icon.tertiaryDarkSecondary svg, -.icon.tertiaryDarkSecondary svg * { - fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal); -} - -.icon.tertiaryDarkSecondary:active svg, -.icon.tertiaryDarkSecondary:focus svg, -.icon.tertiaryDarkSecondary:hover svg, -.icon.tertiaryDarkSecondary:active svg *, -.icon.tertiaryDarkSecondary:focus svg *, -.icon.tertiaryDarkSecondary:hover svg * { - fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover); -} - -.icon.tertiaryDarkSecondary:disabled svg, -.icon.tertiaryDarkSecondary:disabled svg * { - fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled); -} - -.tertiaryLightPrimary { - background-color: var(--Tertiary-Light-Button-Primary-Fill-Normal); - color: var(--Tertiary-Light-Button-Primary-On-Fill-Normal); -} - -.tertiaryLightPrimary:active, -.tertiaryLightPrimary:focus, -.tertiaryLightPrimary:hover { - background-color: var(--Tertiary-Light-Button-Primary-Fill-Hover); - color: var(--Tertiary-Light-Button-Primary-On-Fill-Hover); -} - -.tertiaryLightPrimary:disabled { - background-color: var(--Tertiary-Light-Button-Primary-Fill-Disabled); - color: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled); -} - -.icon.tertiaryLightPrimary svg, -.icon.tertiaryLightPrimary svg * { - fill: var(--Tertiary-Light-Button-Primary-On-Fill-Normal); -} - -.icon.tertiaryLightPrimary:active svg, -.icon.tertiaryLightPrimary:focus svg, -.icon.tertiaryLightPrimary:hover svg, -.icon.tertiaryLightPrimary:active svg *, -.icon.tertiaryLightPrimary:focus svg *, -.icon.tertiaryLightPrimary:hover svg * { - fill: var(--Tertiary-Light-Button-Primary-On-Fill-Hover); -} - -.icon.tertiaryLightPrimary:disabled svg, -.icon.tertiaryLightPrimary:disabled svg * { - fill: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled); -} - -.tertiaryLightSecondary { - background-color: var(--Tertiary-Light-Button-Secondary-Fill-Normal); - border-color: var(--Tertiary-Light-Button-Secondary-Border-Normal); - color: var(--Tertiary-Light-Button-Secondary-On-Fill-Normal); -} - -.tertiaryLightSecondary:active, -.tertiaryLightSecondary:focus, -.tertiaryLightSecondary:hover { - background-color: var(--Tertiary-Light-Button-Secondary-Fill-Hover); - border-color: var(--Tertiary-Light-Button-Secondary-Border-Hover); - color: var(--Tertiary-Light-Button-Secondary-On-Fill-Hover); -} - -.tertiaryLightSecondary:disabled { - background-color: var(--Tertiary-Light-Button-Secondary-Fill-Disabled); - border-color: var(--Tertiary-Light-Button-Secondary-Border-Disabled); - color: var(--Tertiary-Light-Button-Secondary-On-Fill-Disabled); -} - -.icon.tertiaryLightSecondary svg, -.icon.tertiaryLightSecondary svg * { - fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Normal); -} - -.icon.tertiaryLightSecondary:active svg, -.icon.tertiaryLightSecondary:focus svg, -.icon.tertiaryLightSecondary:hover svg, -.icon.tertiaryLightSecondary:active svg *, -.icon.tertiaryLightSecondary:focus svg *, -.icon.tertiaryLightSecondary:hover svg * { - fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Hover); -} - -.icon.tertiaryLightSecondary:disabled svg, -.icon.tertiaryLightSecondary:disabled svg * { - fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Disabled); -} - -button.btn.clean { - background: none; - background-color: unset; - border: none; - border-color: unset; - border-radius: unset; - color: unset; - gap: unset; - margin: 0; - padding: 0; -} diff --git a/apps/scandic-web/components/TempDesignSystem/Button/button.ts b/apps/scandic-web/components/TempDesignSystem/Button/button.ts deleted file mode 100644 index 9b9a83717..000000000 --- a/apps/scandic-web/components/TempDesignSystem/Button/button.ts +++ /dev/null @@ -1,20 +0,0 @@ -import type { VariantProps } from "class-variance-authority" -import type { ButtonProps as ReactAriaButtonProps } from "react-aria-components" - -import type { buttonVariants } from "./variants" - -export interface ButtonPropsRAC - extends Omit, - VariantProps { - asChild?: false | undefined | never - disabled?: ReactAriaButtonProps["isDisabled"] - onClick?: ReactAriaButtonProps["onPress"] -} - -export interface ButtonPropsSlot - extends React.ButtonHTMLAttributes, - VariantProps { - asChild: true -} - -export type ButtonProps = ButtonPropsSlot | ButtonPropsRAC diff --git a/apps/scandic-web/components/TempDesignSystem/Button/index.tsx b/apps/scandic-web/components/TempDesignSystem/Button/index.tsx deleted file mode 100644 index 83e3ebe99..000000000 --- a/apps/scandic-web/components/TempDesignSystem/Button/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -"use client" - -import { Slot } from "@radix-ui/react-slot" -import { Button as ButtonRAC } from "react-aria-components" - -import { buttonVariants } from "./variants" - -import type { ButtonProps } from "./button" - -export default function Button(props: ButtonProps) { - const { - className, - clean, - intent, - size, - theme, - fullWidth, - wrapping, - variant, - ...restProps - } = props - - const classNames = buttonVariants({ - className, - clean, - intent, - size, - theme, - fullWidth, - wrapping, - variant, - }) - - if (restProps.asChild) { - const { asChild, ...slotProps } = restProps - return - } - - const { asChild, onClick, disabled, ...racProps } = restProps - return ( - - ) -} diff --git a/apps/scandic-web/components/TempDesignSystem/Button/variants.ts b/apps/scandic-web/components/TempDesignSystem/Button/variants.ts deleted file mode 100644 index 85f2c7cf2..000000000 --- a/apps/scandic-web/components/TempDesignSystem/Button/variants.ts +++ /dev/null @@ -1,154 +0,0 @@ -import { cva } from "class-variance-authority" - -import styles from "./button.module.css" - -export const buttonVariants = cva(styles.btn, { - variants: { - intent: { - inverted: styles.inverted, - primary: styles.primary, - secondary: styles.secondary, - tertiary: styles.tertiary, - text: styles.text, - textInverted: styles.text, - }, - size: { - small: styles.small, - medium: styles.medium, - large: styles.large, - }, - theme: { - base: "", - primaryDark: "", - primaryStrong: "", - primaryLight: "", - secondaryLight: "", - secondaryDark: "", - tertiaryLight: "", - tertiaryDark: "", - }, - variant: { - clean: styles.clean, - default: styles.default, - icon: styles.icon, - }, - wrapping: { - true: styles.wrapping, - }, - clean: { - true: styles.clean, - }, - fullWidth: { - true: styles.fullWidth, - }, - }, - defaultVariants: { - intent: "primary", - size: "medium", - theme: "primaryLight", - variant: "default", - }, - - compoundVariants: [ - { - className: styles.basePrimary, - intent: "primary", - theme: "base", - }, - { - className: styles.baseSecondary, - intent: "secondary", - theme: "base", - }, - { - className: styles.baseTertiary, - intent: "tertiary", - theme: "base", - }, - { - className: styles.baseInverted, - intent: "inverted", - theme: "base", - }, - { - className: styles.primaryDarkPrimary, - intent: "primary", - theme: "primaryDark", - }, - { - className: styles.primaryDarkSecondary, - intent: "secondary", - theme: "primaryDark", - }, - { - className: styles.primaryLightPrimary, - intent: "primary", - theme: "primaryLight", - }, - { - className: styles.primaryLightSecondary, - intent: "secondary", - theme: "primaryLight", - }, - { - className: styles.primaryStrongPrimary, - intent: "primary", - theme: "primaryStrong", - }, - { - className: styles.primaryStrongSecondary, - intent: "secondary", - theme: "primaryStrong", - }, - { - className: styles.secondaryDarkPrimary, - intent: "primary", - theme: "secondaryDark", - }, - { - className: styles.secondaryDarkSecondary, - intent: "secondary", - theme: "secondaryDark", - }, - { - className: styles.secondaryLightPrimary, - intent: "primary", - theme: "secondaryLight", - }, - { - className: styles.secondaryLightSecondary, - intent: "secondary", - theme: "secondaryLight", - }, - { - className: styles.tertiaryDarkPrimary, - intent: "primary", - theme: "tertiaryDark", - }, - { - className: styles.tertiaryDarkSecondary, - intent: "secondary", - theme: "tertiaryDark", - }, - { - className: styles.tertiaryLightPrimary, - intent: "primary", - theme: "tertiaryLight", - }, - { - className: styles.tertiaryLightSecondary, - intent: "secondary", - theme: "tertiaryLight", - }, - { - className: styles.baseText, - intent: "text", - theme: "base", - }, - { - className: styles.baseTextInverted, - intent: "textInverted", - theme: "base", - }, - ], -}) diff --git a/apps/scandic-web/components/TempDesignSystem/Card/utils.ts b/apps/scandic-web/components/TempDesignSystem/Card/utils.ts index 796969073..eb4be5dc1 100644 --- a/apps/scandic-web/components/TempDesignSystem/Card/utils.ts +++ b/apps/scandic-web/components/TempDesignSystem/Card/utils.ts @@ -1,9 +1,9 @@ import type Body from "@scandic-hotels/design-system/Body" +import type { ButtonProps } from "@scandic-hotels/design-system/OldDSButton" import type Title from "@scandic-hotels/design-system/Title" import type { VariantProps } from "class-variance-authority" import type { ComponentProps } from "react" -import type { ButtonProps } from "@/components/TempDesignSystem/Button/button" import type { CardProps } from "@/components/TempDesignSystem/Card/card" import type { biroScriptVariants } from "@/components/TempDesignSystem/Text/BiroScript/variants" diff --git a/apps/scandic-web/components/TempDesignSystem/ShowMoreButton/showMoreButton.ts b/apps/scandic-web/components/TempDesignSystem/ShowMoreButton/showMoreButton.ts index 71e1028d2..a6f8da073 100644 --- a/apps/scandic-web/components/TempDesignSystem/ShowMoreButton/showMoreButton.ts +++ b/apps/scandic-web/components/TempDesignSystem/ShowMoreButton/showMoreButton.ts @@ -1,6 +1,6 @@ +import type { ButtonPropsRAC } from "@scandic-hotels/design-system/OldDSButton" import type { VariantProps } from "class-variance-authority" -import type { ButtonPropsRAC } from "../Button/button" import type { showMoreButtonVariants } from "./variants" export interface ShowMoreButtonProps diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeek/index.tsx b/apps/scandic-web/components/TempDesignSystem/SidePeek/index.tsx index 1d17781ac..ac6ac1e8f 100644 --- a/apps/scandic-web/components/TempDesignSystem/SidePeek/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/SidePeek/index.tsx @@ -5,11 +5,11 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" import { SidePeekContext } from "@/components/SidePeeks/SidePeekProvider" -import Button from "../Button" import SidePeekSEO from "./SidePeekSEO" import styles from "./sidePeek.module.css" diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx b/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx index e827e4b88..8f6aab8b9 100644 --- a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx @@ -5,11 +5,11 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA" -import Button from "../Button" import SidePeekSEO from "./SidePeekSEO" import styles from "./sidePeekSelfControlled.module.css" diff --git a/apps/scandic-web/components/TempDesignSystem/Toasts/index.tsx b/apps/scandic-web/components/TempDesignSystem/Toasts/index.tsx index 6f47d906f..9d5948d88 100644 --- a/apps/scandic-web/components/TempDesignSystem/Toasts/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Toasts/index.tsx @@ -5,8 +5,8 @@ import { MaterialIcon, type MaterialIconSetIconProps, } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" -import Button from "../Button" import { toastVariants } from "./variants" import styles from "./toasts.module.css" diff --git a/packages/design-system/lib/components/OldDSButton/index.tsx b/packages/design-system/lib/components/OldDSButton/index.tsx index 8be105250..e6795203c 100644 --- a/packages/design-system/lib/components/OldDSButton/index.tsx +++ b/packages/design-system/lib/components/OldDSButton/index.tsx @@ -51,3 +51,5 @@ export function OldDSButton(props: ButtonProps) { /> ) } + +export type { ButtonPropsRAC, ButtonProps } from './button'