DMC/studentportalen
1
1
Fork 0
Code Issues 24 Pull Requests 3 Actions Projects 1 Wiki Activity

List components #31

Open
stne3960 wants to merge 57 commits from list_item into main
pull from: list_item
merge into: DMC:main
Conversation 10 Commits 57 Files Changed 30 +80 -81
2 changed files with 80 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ed7fb36745 - Show all commits

44
frontend/src/components/Button/Button.tsx
View File

@ -1,7 +1,7 @@
import type { ButtonHTMLAttributes, ReactNode } from 'react'; import type { ButtonHTMLAttributes, ReactNode } from "react";
export type ButtonVariant = 'primary' | 'secondary' | 'red' | 'green'; export type ButtonVariant = "primary" | "secondary" | "red" | "green";
export type ButtonSize = 'sm' | 'md' | 'lg'; export type ButtonSize = "sm" | "md" | "lg";
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
variant?: ButtonVariant; variant?: ButtonVariant;
@ -10,32 +10,35 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
} }
const variantClasses: Record<ButtonVariant, string> = { const variantClasses: Record<ButtonVariant, string> = {
primary: 'bg-primary text-base-canvas border border-primary hover:bg-secondary hover:text-base-canvas hover:border-primary focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border-primary focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100', primary:
secondary: 'bg-base-canvas text-base-ink-strong border border-base-ink-soft hover:bg-base-canvas hover:text-base-ink-strong hover:border-base-ink-medium focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border-primary focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100', "bg-primary text-base-canvas border border-primary hover:bg-secondary hover:text-base-canvas hover:border hover:border-primary focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border focus-visible:border-primary focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100",
red: 'bg-other-red-100 text-su-white border border-other-red-100 focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border-primary focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100', secondary:
green: 'bg-other-green text-su-white border border-other-green focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border-primary focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100', "bg-base-canvas text-base-ink-strong border-solid [border-width:var(--border-width-sm)] border-base-ink-soft hover:bg-base-canvas hover:text-base-ink-strong hover:border-base-ink-medium focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border-primary focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100",
red: "bg-other-red-100 text-su-white focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border-primary focus-visible:border focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100",
green:
"bg-other-green text-su-white focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border-primary focus-visible:border focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100",
}; };
const sizeClasses: Record<ButtonSize, string> = { const sizeClasses: Record<ButtonSize, string> = {
sm: 'h-(--control-height-sm) min-w-(--button-min-width-sm) px-(--button-padding-x-sm) body-normal-md rounded-(--border-radius-sm)', sm: "h-(--control-height-sm) min-w-(--button-min-width-sm) px-(--button-padding-x-sm) body-bold-md rounded-(--border-radius-sm)",
md: 'h-(--control-height-md) min-w-(--button-min-width-md) px-(--button-padding-x-md) body-normal-md rounded-(--border-radius-sm)', md: "h-(--control-height-md) min-w-(--button-min-width-md) px-(--button-padding-x-md) body-bold-md rounded-(--border-radius-sm)",
lg: 'h-(--control-height-lg) min-w-(--button-min-width-lg) px-(--button-padding-x-lg) body-normal-lg rounded-(--border-radius-md)', lg: "h-(--control-height-lg) min-w-(--button-min-width-lg) px-(--button-padding-x-lg) body-bold-lg rounded-(--border-radius-md)",
}; };
const textPaddingClasses: Record<ButtonSize, string> = { const textPaddingClasses: Record<ButtonSize, string> = {
sm: 'px-(--button-text-padding-x-sm)', sm: "px-(--button-text-padding-x-sm)",
md: 'px-(--button-text-padding-x-md)', md: "px-(--button-text-padding-x-md)",
lg: 'px-(--button-text-padding-x-lg)', lg: "px-(--button-text-padding-x-lg)",
}; };
export default function Button({ export default function Button({
variant = 'primary', variant = "primary",
size = 'md', size = "md",
className = '', className = "",
children, children,
...props ...props
}: ButtonProps) { }: ButtonProps) {
const baseClasses = 'inline-flex items-center justify-center cursor-pointer'; const baseClasses = "inline-flex items-center justify-center cursor-pointer";
const classes = [ const classes = [
baseClasses, baseClasses,
@ -44,13 +47,10 @@ export default function Button({
className, className,
] ]
.filter(Boolean) .filter(Boolean)
.join(' '); .join(" ");
return ( return (
<button <button className={classes} {...props}>
className={classes}
{...props}
>
<span className={textPaddingClasses[size]}>{children}</span> <span className={textPaddingClasses[size]}>{children}</span>
</button> </button>
); );

117
frontend/src/index.css
View File

@ -2,86 +2,86 @@
/* TheSans Font Family */ /* TheSans Font Family */
@font-face { @font-face {
font-family: 'TheSans'; font-family: "TheSans";
src: url('./assets/TheSansB-W5Plain.woff2') format('woff2'); src: url("./assets/TheSansB-W5Plain.woff2") format("woff2");
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'TheSans'; font-family: "TheSans";
src: url('./assets/TheSansB-W5PlainItalic.woff2') format('woff2'); src: url("./assets/TheSansB-W5PlainItalic.woff2") format("woff2");
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'TheSans Light'; font-family: "TheSans Light";
src: url('./assets/TheSansB-W3Light.woff2') format('woff2'); src: url("./assets/TheSansB-W3Light.woff2") format("woff2");
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'TheSans Light'; font-family: "TheSans Light";
src: url('./assets/TheSansB-W3LightItalic.woff2') format('woff2'); src: url("./assets/TheSansB-W3LightItalic.woff2") format("woff2");
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'TheSans SemiLight'; font-family: "TheSans SemiLight";
src: url('./assets/TheSansB-W4SemiLight.woff2') format('woff2'); src: url("./assets/TheSansB-W4SemiLight.woff2") format("woff2");
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'TheSans SemiLight'; font-family: "TheSans SemiLight";
src: url('./assets/TheSansB-W4SemiLightItalic.woff2') format('woff2'); src: url("./assets/TheSansB-W4SemiLightItalic.woff2") format("woff2");
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'TheSans Plain'; font-family: "TheSans Plain";
src: url('./assets/TheSansB-W5Plain.woff2') format('woff2'); src: url("./assets/TheSansB-W5Plain.woff2") format("woff2");
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'TheSans Plain'; font-family: "TheSans Plain";
src: url('./assets/TheSansB-W5PlainItalic.woff2') format('woff2'); src: url("./assets/TheSansB-W5PlainItalic.woff2") format("woff2");
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'TheSans SemiBold'; font-family: "TheSans SemiBold";
src: url('./assets/TheSansB-W6SemiBold.woff2') format('woff2'); src: url("./assets/TheSansB-W6SemiBold.woff2") format("woff2");
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'TheSans SemiBold'; font-family: "TheSans SemiBold";
src: url('./assets/TheSansB-W6SemiBoldItalic.woff2') format('woff2'); src: url("./assets/TheSansB-W6SemiBoldItalic.woff2") format("woff2");
font-style: italic; font-style: italic;
} }
@theme { @theme {
/* Colors */ /* Colors */
--color-primary: #05305D; --color-primary: #05305d;
--color-base-canvas: #FFFFFF; --color-base-canvas: #ffffff;
--color-secondary: #34587F; --color-secondary: #34587f;
--color-sky-100: #B0DEE4; --color-sky-100: #b0dee4;
--color-sky-70: #C7E8ED; --color-sky-70: #c7e8ed;
--color-sky-35: #E4F4F7; --color-sky-35: #e4f4f7;
--color-sky-20: #EFF9FA; --color-sky-20: #eff9fa;
--color-base-ink-strong: #4B4B4B; --color-base-ink-strong: #4b4b4b;
--color-base-ink-medium: #BABABA; --color-base-ink-medium: #bababa;
--color-base-ink-soft: #DADADA; --color-base-ink-soft: #dadada;
--color-base-ink-placeholder: #757575; --color-base-ink-placeholder: #757575;
--color-other-red-100: #AA1227; --color-other-red-100: #aa1227;
--color-other-red-10: #F6E6E8; --color-other-red-10: #f6e6e8;
--color-other-green: #539848; --color-other-green: #539848;
--color-su-white: #FFFFFF; --color-su-white: #ffffff;
--color-fire-100: #EB7124; --color-fire-100: #eb7124;
--color-fire-70: #F19B66; --color-fire-70: #f19b66;
--color-fire-35: #F8CDB4; --color-fire-35: #f8cdb4;
--color-fire-20: #FBE2D3; --color-fire-20: #fbe2d3;
/* Font sizes */ /* Font sizes */
--font-size-body-md: 16px; --font-size-body-md: 16px;
@ -134,26 +134,25 @@
} }
.dark { .dark {
--color-primary: #FFFFFF; --color-primary: #ffffff;
--color-base-canvas: #000000; --color-base-canvas: #000000;
--color-secondary: #D9D6D6; --color-secondary: #d9d6d6;
--color-sky-100: #403D3D; --color-sky-100: #403d3d;
--color-sky-70: #2D2B2B; --color-sky-70: #2d2b2b;
--color-sky-35: #1F1E1E; --color-sky-35: #1f1e1e;
--color-sky-20: #141414; --color-sky-20: #141414;
--color-base-ink-strong: #FFFFFF; --color-base-ink-strong: #ffffff;
--color-base-ink-medium: #636363; --color-base-ink-medium: #636363;
--color-base-ink-soft: #555555; --color-base-ink-soft: #555555;
--color-base-ink-placeholder: #959595; --color-base-ink-placeholder: #959595;
--color-other-red-100: #AA1227; --color-other-red-100: #aa1227;
--color-other-red-10: #F6E6E8; --color-other-red-10: #f6e6e8;
--color-other-green: #539848; --color-other-green: #539848;
--color-su-white: #FFFFFF; --color-su-white: #ffffff;
--color-fire-100: #EB7124; --color-fire-100: #eb7124;
--color-fire-70: #F19B66; --color-fire-70: #f19b66;
--color-fire-35: #F8CDB4; --color-fire-35: #f8cdb4;
--color-fire-20: #FBE2D3; --color-fire-20: #fbe2d3;
} }
:root { :root {
@ -167,43 +166,43 @@
/* Text styles - Body */ /* Text styles - Body */
.body-light-sm { .body-light-sm {
font-family: 'TheSans Light', 'TheSans', system-ui, sans-serif; font-family: "TheSans Light", "TheSans", system-ui, sans-serif;
font-size: 14px; font-size: 14px;
} }
.body-normal-md { .body-normal-md {
font-family: 'TheSans SemiLight', 'TheSans', system-ui, sans-serif; font-family: "TheSans SemiLight", "TheSans", system-ui, sans-serif;
font-size: 16px; font-size: 16px;
} }
.body-normal-lg { .body-normal-lg {
font-family: 'TheSans SemiLight', 'TheSans', system-ui, sans-serif; font-family: "TheSans SemiLight", "TheSans", system-ui, sans-serif;
font-size: 18px; font-size: 18px;
} }
.body-semibold-md { .body-semibold-md {
font-family: 'TheSans Plain', 'TheSans', system-ui, sans-serif; font-family: "TheSans Plain", "TheSans", system-ui, sans-serif;
font-size: 16px; font-size: 16px;
} }
.body-semibold-lg { .body-semibold-lg {
font-family: 'TheSans Plain', 'TheSans', system-ui, sans-serif; font-family: "TheSans Plain", "TheSans", system-ui, sans-serif;
font-size: 18px; font-size: 18px;
} }
.body-bold-md { .body-bold-md {
font-family: 'TheSans SemiBold', 'TheSans', system-ui, sans-serif; font-family: "TheSans SemiBold", "TheSans", system-ui, sans-serif;
font-size: 16px; font-size: 16px;
} }
.body-bold-lg { .body-bold-lg {
font-family: 'TheSans SemiBold', 'TheSans', system-ui, sans-serif; font-family: "TheSans SemiBold", "TheSans", system-ui, sans-serif;
font-size: 18px; font-size: 18px;
} }
/* Text styles - Heading */ /* Text styles - Heading */
.heading-semibold-lg { .heading-semibold-lg {
font-family: 'TheSans SemiBold', 'TheSans', system-ui, sans-serif; font-family: "TheSans SemiBold", "TheSans", system-ui, sans-serif;
font-size: 32px; font-size: 32px;
} }