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

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