Merged in chore/SW-3145-move-button (pull request #2531)

chore: SW-3145 Moved Button component from TempDS to Design System package

* chore: SW-3145 Moved Button compoenent from TempDS to Design System package


Approved-by: Anton Gunnarsson

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()

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"

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 <footer className={styles.footer}>{children}</footer>
 }

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"
 

apps/scandic-web/components/TempDesignSystem/Button/button.module.css

@@ -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;
-}

apps/scandic-web/components/TempDesignSystem/Button/button.ts

@@ -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<ReactAriaButtonProps, "isDisabled" | "onClick">,
-    VariantProps<typeof buttonVariants> {
-  asChild?: false | undefined | never
-  disabled?: ReactAriaButtonProps["isDisabled"]
-  onClick?: ReactAriaButtonProps["onPress"]
-}
-
-export interface ButtonPropsSlot
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild: true
-}
-
-export type ButtonProps = ButtonPropsSlot | ButtonPropsRAC

apps/scandic-web/components/TempDesignSystem/Button/index.tsx

@@ -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 <Slot className={classNames} {...slotProps} />
-  }
-
-  const { asChild, onClick, disabled, ...racProps } = restProps
-  return (
-    <ButtonRAC
-      className={classNames}
-      isDisabled={disabled}
-      onPress={onClick}
-      {...racProps}
-    />
-  )
-}

apps/scandic-web/components/TempDesignSystem/Button/variants.ts

@@ -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",
-    },
-  ],
-})

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"
 

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

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"

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"

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"

packages/design-system/lib/components/OldDSButton/index.tsx

@@ -51,3 +51,5 @@ export function OldDSButton(props: ButtonProps) {
     />
   )
 }
+
+export type { ButtonPropsRAC, ButtonProps } from './button'