scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement new design for button

Browse Source
This commit is contained in:
Christel Westerberg
2024-05-21 14:33:58 +02:00
parent ade1201c95
commit 1bc8753649
14 changed files with 135 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[lang]/(live)/(protected)/my-pages/layout.module.css
View File

@@ -1,7 +1,7 @@
.layout {
--header-height: 4.5rem;
background-color: var(--Brand-Coffee-Subtle);
background-color: var(--Scandic-Brand-Warm-White);
display: grid;
font-family: var(--ff-fira-sans);
grid-template-rows: var(--header-height) auto 1fr;

3
app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/page.tsx
View File

@@ -16,7 +16,6 @@ export default function EditProfile({ params }: PageArgs<LangParams>) {
<Button
aria-label="Cancel"
asChild
bgcolor="white"
form="edit-profile"
size="small"
type="reset"
@@ -24,12 +23,10 @@ export default function EditProfile({ params }: PageArgs<LangParams>) {
<Link href={profile[params.lang]}>{_("Cancel")}</Link>
</Button>
<Button
bgcolor="quarternary"
disabled={!isValid || isPending}
form="edit-profile"
size="small"
type="submit"
weight="regular"
>
{_("Save")}
</Button>

2
app/[lang]/(live)/(protected)/my-pages/profile/@view/page.tsx
View File

@@ -8,7 +8,7 @@ import type { LangParams, PageArgs } from "@/types/params"
export default function ProfileView({ params }: PageArgs<LangParams>) {
return (
<Button asChild bgcolor="quarternary" size="small" weight="regular">
<Button asChild size="small">
<Link href={profileEdit[params.lang]}>{_("Edit")}</Link>
</Button>
)

2
app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
View File

@@ -1,5 +1,5 @@
.layout {
display: grid;
font-family: var(--ff-fira-sans);
background-color: var(--Brand-Coffee-Subtle);
background-color: var(--Scandic-Brand-Warm-White);
}

2
components/Loyalty/Blocks/DynamicContent/HowItWorks/howItWorks.module.css
View File

@@ -5,7 +5,7 @@
width: 100%;
height: 37rem;
border-radius: 1.6rem;
background-color: var(--Base-Fill-Normal);
background-color: var(--UI-Grey-10);
text-align: center;
margin-right: 1.6rem;
}

2
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
View File

@@ -27,7 +27,7 @@
height: 37rem;
min-width: 32rem;
padding: 4rem 1rem;
background-color: var(--Base-Fill-Normal);
background-color: var(--UI-Grey-10);
border-radius: 1.6rem;
gap: 1.8rem;
}

2
components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
View File

@@ -29,7 +29,7 @@
flex-direction: column;
gap: 10px;
min-height: 280px;
background-color: var(--Base-Fill-Normal);
background-color: var(--UI-Grey-10);
justify-content: center;
align-items: center;
padding: 30px;

2
components/MyPages/Blocks/Benefits/NextLevel/index.tsx
View File

@@ -24,7 +24,7 @@ export default async function NextLevelBenefitsBlock({
<CardGrid variant="twoColumnGrid">
{perks.map((perk) => (
<article key={perk.id} className={styles.card}>
<Button type="button" intent="secondary" disabled>
<Button type="button" disabled>
<Lock height={16} />
Level up to unlock
</Button>

2
components/MyPages/Blocks/Stays/ShowMoreButton/index.tsx
View File

@@ -13,7 +13,7 @@ export default function ShowMoreButton({
<Button
disabled={disabled}
intent="primary"
bgcolor="white"
theme="secondaryDark"
type="button"
onClick={loadMoreData}
>

2
components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
View File

@@ -17,7 +17,7 @@ export default function EmptyUpcomingStaysBlock() {
{_("Where should you go next?")}
</span>
</Title>
<Button intent="primary" bgcolor="quarternary" asChild type="button">
<Button intent="primary" asChild type="button">
<Link className={styles.link} href={"#"} key="getInspired">
{_("Get inspired")}
</Link>

2
components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
View File

@@ -17,7 +17,7 @@ export default function EmptyUpcomingStaysBlock() {
{_("Where should you go next?")}
</span>
</Title>
<Button intent="primary" bgcolor="quarternary" asChild type="button">
<Button intent="primary" asChild type="button">
<Link className={styles.link} href={"#"} key="getInspired">
{_("Get inspired")}
</Link>

215
components/TempDesignSystem/Button/button.module.css
View File

@@ -4,21 +4,43 @@
cursor: pointer;
margin: 0;
padding: 0;
text-align: center;
font-family: var(--ff-fira-sans);
font-weight: 600;
line-height: 150%;
letter-spacing: 1%;
}
.primary {
color: var(--font-color,);
background-color: var(--background-color,);
}
.primary:hover,
.primary:active,
.primary:focus {
background-color: var(--hover-background,);
color: var(--hover-color,);
}
.secondary {
background-color: transparent;
border: 0.1rem solid var(--background-color);
color: var(--background-color,);
}
.secondary:hover,
.secondary:active,
.secondary:focus {
border: 0.1rem solid var(--hover-color,);
color: var(--hover-color);
}
.default {
align-items: center;
background-color: var(--some-white-color, #fff);
border-radius: 4rem;
color: var(--some-grey-color, #111);
display: flex;
font-family: var(--ff-fira-sans);
font-size: 1.8rem;
font-weight: 500;
gap: 1rem;
letter-spacing: 1%;
line-height: 2.2rem;
padding: 0.75rem 1.65rem;
}
.icon {
@@ -26,125 +48,110 @@
align-items: baseline;
}
/* Primary styles */
.primary {
background-color: var(--some-grey-color, #444343);
border: 2px solid transparent;
outline: 1px solid transparent;
border-radius: 46px;
color: var(--Main-Grey-00, #fff);
}
.primary:hover {
background: var(--some-grey-color, #444343);
}
.primary:active,
.primary:focus {
border: var(--some-grey-color, #444343);
outline: var(--some-grey-color, #444343);
}
/* Secondary styles */
.secondary {
border: 1px solid var(--some-grey-color, #444343);
background-color: transparent;
color: var(--some-grey-color, #444343);
border-radius: 46px;
font-size: 12px;
display: flex;
align-items: center;
}
.secondary:hover {
border: 1px solid var(--some-grey-color, #444343);
}
.secondary:active,
.secondary:focus {
border: 1px solid var(--some-grey-color, #444343);
}
/* Disabled styles */
.btn:disabled {
border: 1px solid var(--some-grey-color, #444343);
background-color: transparent;
color: var(--some-grey-color, #444343);
background-color: var(--disabled-background-color);
color: var(--disabled-color);
cursor: not-allowed;
}
/* Sizes */
.small {
border-radius: 3rem;
padding: var(--Spacing-x1) var(--Spacing-x2);
gap: 0.2rem;
font-size: 1.4rem;
height: 2.6rem;
line-height: 1.7rem;
padding: 0.8rem 2.2rem;
}
.average {
border-radius: 4.7rem;
font-size: 1.4rem;
height: 3.2rem;
letter-spacing: 1%;
line-height: 1.6rem;
padding: 0.65rem 1.3rem;
}
.light {
font-weight: 300;
}
.regular {
font-weight: 400;
height: 4rem;
}
.medium {
font-weight: 500;
height: 3rem;
padding: 1.2rem var(--Spacing-x2,);
font-size: 1.6rem;
}
.semiBold {
font-weight: 600;
.large {
padding: var(--Spacing-x2) 2.4rem;
gap: 0.4rem;
font-size: 1.6rem;
}
.bold {
font-weight: 700;
.primaryLight {
--font-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Normal);
--background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Normal,);
--hover-background: var(--Theme-Primary-Light-Button-Primary-Fill-Hover,);
--hover-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover,);
--disabled-background-color: var(
--Theme-Primary-Light-Button-Primary-Fill-Disabled,
);
--disabled-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled,);
}
.black {
font-weight: 900;
.primaryDark {
--font-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal,);
--background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Normal,);
--hover-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover,);
--hover-background: var(--Theme-Primary-Dark-Button-Primary-Fill-Hover,);
--disabled-background-color: var(
--Theme-Primary-Dark-Button-Primary-Fill-Disabled,
);
--disabled-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled,);
}
.primary {
background-color: var(--scandic-blue, #02838e);
border: 0.1rem solid var(--scandic-blue, #02838e);
color: var(--some-white-color, #fff);
.secondaryLight {
--font-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal,);
--background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal,);
--hover-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover,);
--hover-background: var(--Theme-Secondary-Light-Button-Primary-Fill-Hover,);
--disabled-background-color: var(
--Theme-Secondary-Light-Button-Primary-Fill-Disabled,
);
--disabled-color: var(
--Theme-Secondary-Light-Button-Primary-On-Fill-Disabled,
);
}
.secondary {
background-color: var(--some-black-color, #000);
border: 0.1rem solid var(--some-black-color, #000);
color: var(--some-white-color, #fff);
.secondaryDark {
--font-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal,);
--background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal,);
--hover-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover,);
--hover-background: var(--Theme-Secondary-Dark-Button-Primary-Fill-Hover,);
--disabled-background-color: var(
--Theme-Secondary-Dark-Button-Primary-Fill-Disabled,
);
--disabled-color: var(
--Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled,
);
}
.tertiary {
background-color: var(--some-red-color, #d60728);
border: 0.1rem solid var(--some-red-color, #d60728);
color: var(--some-white-color, #fff);
.tertiaryLight {
--font-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal,);
--background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal,);
--hover-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover,);
--hover-background: var(--Theme-Tertiary-Light-Button-Primary-Fill-Hover,);
--disabled-background-color: var(
--Theme-Tertiary-Light-Button-Primary-Fill-Disabled,
);
--disabled-color: var(
--Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled,
);
}
.quarternary {
background-color: var(--some-grey-color, #727272);
border: 0.1rem solid var(--some-black-color, #727272);
color: var(--some-white-color, #fff);
}
.tertiaryDark {
--font-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Normal);
--background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Normal);
--hover-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Hover);
--hover-background: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Hover);
.white {
background-color: var(--some-white-color, #fff);
border: 0.1rem solid var(--some-black-color, #000);
color: var(--some-black-color, #000);
}
.btn:disabled {
background-color: var(--some-grey-color, #d9d9d9);
color: var(--some-grey-color, #757575);
--disabled-background-color: var(
--Theme-Tertiary-Dark-Button-Primary-Fill-Disabled,
);
--disabled-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled,);
}

6
components/TempDesignSystem/Button/index.tsx
View File

@@ -8,23 +8,21 @@ import type { ButtonProps } from "./button"
export default function Button({
asChild = false,
bgcolor,
theme,
className,
disabled,
intent,
size,
variant,
weight,
...props
}: ButtonProps) {
const Comp = asChild ? Slot : "button"
const classNames = buttonVariants({
bgcolor,
theme,
className,
intent,
size,
variant,
weight,
})
return <Comp className={classNames} disabled={disabled} {...props} />
}

28
components/TempDesignSystem/Button/variants.ts
View File

@@ -4,12 +4,13 @@ import styles from "./button.module.css"
export const buttonVariants = cva(styles.btn, {
variants: {
bgcolor: {
primary: styles.primary,
secondary: styles.secondary,
tertiary: styles.tertiary,
quarternary: styles.quarternary,
white: styles.white,
theme: {
primaryLight: styles.primaryLight,
primaryDark: styles.primaryDark,
secondaryLight: styles.secondaryLight,
secondaryDark: styles.secondaryDark,
tertiaryLight: styles.tertiaryLight,
tertiaryDark: styles.tertiaryDark,
},
intent: {
primary: styles.primary,
@@ -17,23 +18,18 @@ export const buttonVariants = cva(styles.btn, {
},
size: {
small: styles.small,
regular: styles.average,
medium: styles.medium,
large: styles.large,
},
variant: {
default: styles.default,
icon: styles.icon,
},
weight: {
light: styles.light,
regular: styles.regular,
medium: styles.medium,
semiBold: styles.semiBold,
bold: styles.bold,
black: styles.black,
},
},
defaultVariants: {
variant: "default",
weight: "regular",
size: "medium",
theme: "primaryLight",
intent: "primary",
},
})