72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import { cva } from "class-variance-authority"
|
|
|
|
import { DEFAULT_THEME, Theme } from "@scandic-hotels/common/utils/theme"
|
|
import styles from "./infoCard.module.css"
|
|
|
|
const variantKeys = {
|
|
theme: {
|
|
"Primary 1": "Primary 1",
|
|
"Primary 2": "Primary 2",
|
|
"Primary 3": "Primary 3",
|
|
Accent: "Accent",
|
|
Image: "Image",
|
|
White: "White",
|
|
},
|
|
height: {
|
|
fixed: "fixed",
|
|
dynamic: "dynamic",
|
|
},
|
|
} as const
|
|
|
|
export const infoCardConfig = {
|
|
variants: {
|
|
theme: {
|
|
[variantKeys.theme["Primary 1"]]: styles["theme-primary-1"],
|
|
[variantKeys.theme["Primary 2"]]: styles["theme-primary-2"],
|
|
[variantKeys.theme["Primary 3"]]: styles["theme-primary-3"],
|
|
[variantKeys.theme["Accent"]]: styles["theme-accent"],
|
|
[variantKeys.theme["Image"]]: styles["theme-image"],
|
|
[variantKeys.theme["White"]]: styles["theme-white"],
|
|
},
|
|
height: {
|
|
[variantKeys.height.fixed]: styles["height-fixed"],
|
|
[variantKeys.height.dynamic]: styles["height-dynamic"],
|
|
},
|
|
// Only Theme.scandic can be used with the Angled variant.
|
|
// The topTitleAngled variant will be applied using the compoundVariants.
|
|
topTitleAngled: {
|
|
true: undefined,
|
|
false: undefined,
|
|
},
|
|
// The hotelTheme is not used to apply styles directly,
|
|
// but is needed for compound variants and to get the correct button color.
|
|
// The class name for the hotelTheme is applied on page level.
|
|
hotelTheme: {
|
|
[Theme.scandic]: undefined,
|
|
[Theme.downtownCamper]: undefined,
|
|
[Theme.haymarket]: undefined,
|
|
[Theme.scandicGo]: undefined,
|
|
[Theme.grandHotel]: undefined,
|
|
[Theme.hotelNorge]: undefined,
|
|
[Theme.marski]: undefined,
|
|
[Theme.theDock]: undefined,
|
|
[Theme.bassinSeven]: undefined,
|
|
},
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
hotelTheme: Theme.scandic,
|
|
topTitleAngled: true,
|
|
class: styles["top-title-angled"],
|
|
},
|
|
],
|
|
defaultVariants: {
|
|
theme: variantKeys.theme["Primary 1"],
|
|
height: variantKeys.height.fixed,
|
|
topTitleAngled: false,
|
|
hotelTheme: DEFAULT_THEME,
|
|
},
|
|
}
|
|
|
|
export const infoCardVariants = cva(styles.infoCard, infoCardConfig)
|