button-component #29

Merged
stne3960 merged 22 commits from button-component into main 2025-12-12 11:52:31 +01:00
9 changed files with 60 additions and 21 deletions
Showing only changes of commit eba4e13cc8 - Show all commits

View File

@ -2,65 +2,101 @@
/* TheSans Font Family */
@font-face {
font-family: "TheSans";
src: url("./assets/TheSansB-W5Plain.woff2") format("woff2");
font-family: "TheSansB W2 ExtraLight";
src: url("./assets/TheSansB-W2ExtraLight.woff2") format("woff2");
font-style: normal;
}
@font-face {
font-family: "TheSans";
src: url("./assets/TheSansB-W5PlainItalic.woff2") format("woff2");
font-family: "TheSansB W2 ExtraLight";
src: url("./assets/TheSansB-W2ExtraLightItalic.woff2") format("woff2");
font-style: italic;
}
@font-face {
font-family: "TheSans Light";
font-family: "TheSansB W3 Light";
src: url("./assets/TheSansB-W3Light.woff2") format("woff2");
font-style: normal;
}
@font-face {
font-family: "TheSans Light";
font-family: "TheSansB W3 Light";
src: url("./assets/TheSansB-W3LightItalic.woff2") format("woff2");
font-style: italic;
}
@font-face {
font-family: "TheSans SemiLight";
font-family: "TheSansB W4 SemiLight";
src: url("./assets/TheSansB-W4SemiLight.woff2") format("woff2");
font-style: normal;
}
@font-face {
font-family: "TheSans SemiLight";
font-family: "TheSansB W4 SemiLight";
src: url("./assets/TheSansB-W4SemiLightItalic.woff2") format("woff2");
font-style: italic;
}
@font-face {
font-family: "TheSans Plain";
font-family: "TheSansB W5 Plain";
src: url("./assets/TheSansB-W5Plain.woff2") format("woff2");
font-style: normal;
}
@font-face {
font-family: "TheSans Plain";
font-family: "TheSansB W5 Plain";
src: url("./assets/TheSansB-W5PlainItalic.woff2") format("woff2");
font-style: italic;
}
@font-face {
font-family: "TheSans SemiBold";
font-family: "TheSansB W6 SemiBold";
src: url("./assets/TheSansB-W6SemiBold.woff2") format("woff2");
font-style: normal;
}
@font-face {
font-family: "TheSans SemiBold";
font-family: "TheSansB W6 SemiBold";
src: url("./assets/TheSansB-W6SemiBoldItalic.woff2") format("woff2");
font-style: italic;
}
@font-face {
font-family: "TheSansB W7 Bold";
src: url("./assets/TheSansB-W7Bold.woff2") format("woff2");
font-style: normal;
}
@font-face {
font-family: "TheSansB W7 Bold";
src: url("./assets/TheSansB-W7BoldItalic.woff2") format("woff2");
font-style: italic;
}
@font-face {
font-family: "TheSansB W8 ExtraBold";
src: url("./assets/TheSansB-W8ExtraBold.woff2") format("woff2");
font-style: normal;
}
@font-face {
font-family: "TheSansB W8 ExtraBold";
src: url("./assets/TheSansB-W8ExtraBoldItalic.woff2") format("woff2");
font-style: italic;
}
@font-face {
font-family: "TheSansB W9 Black";
src: url("./assets/TheSansB-W9Black.woff2") format("woff2");
font-style: normal;
}
@font-face {
font-family: "TheSansB W9 Black";
src: url("./assets/TheSansB-W9BlackItalic.woff2") format("woff2");
font-style: italic;
}
@theme {
/* Colors */
--color-primary: #05305d;
@ -70,6 +106,7 @@
--color-sky-70: #c7e8ed;
--color-sky-35: #e4f4f7;
--color-sky-20: #eff9fa;
--color-base-ink-max: #000000;
--color-base-ink-strong: #4b4b4b;
--color-base-ink-medium: #bababa;
--color-base-ink-soft: #dadada;
@ -141,6 +178,7 @@
--color-sky-70: #2d2b2b;
--color-sky-35: #1f1e1e;
--color-sky-20: #141414;
--color-base-ink-max: #ffffff;
--color-base-ink-strong: #ffffff;
--color-base-ink-medium: #636363;
--color-base-ink-soft: #555555;
@ -159,50 +197,51 @@
--color-su-primary: #002f5f;
--color-su-primary-80: #33587f;
--bottom-nav-height: 4.5rem;
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
font-family: 'TheSans', system-ui, Avenir, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: #000000;
}
/* Text styles - Body */
.body-light-sm {
font-family: "TheSans Light", "TheSans", system-ui, sans-serif;
font-family: "TheSansB W3 Light", system-ui, sans-serif;
font-size: 14px;
}
.body-normal-md {
font-family: "TheSans SemiLight", "TheSans", system-ui, sans-serif;
font-family: "TheSansB W4 SemiLight", system-ui, sans-serif;
font-size: 16px;
}
.body-normal-lg {
font-family: "TheSans SemiLight", "TheSans", system-ui, sans-serif;
font-family: "TheSansB W4 SemiLight", system-ui, sans-serif;
font-size: 18px;
}
.body-semibold-md {
font-family: "TheSans Plain", "TheSans", system-ui, sans-serif;
font-family: "TheSansB W5 Plain", system-ui, sans-serif;
font-size: 16px;
}
.body-semibold-lg {
font-family: "TheSans Plain", "TheSans", system-ui, sans-serif;
font-family: "TheSansB W5 Plain", system-ui, sans-serif;
font-size: 18px;
}
.body-bold-md {
font-family: "TheSans SemiBold", "TheSans", system-ui, sans-serif;
font-family: "TheSansB W6 SemiBold", system-ui, sans-serif;
font-size: 16px;
}
.body-bold-lg {
font-family: "TheSans SemiBold", "TheSans", system-ui, sans-serif;
font-family: "TheSansB W6 SemiBold", system-ui, sans-serif;
font-size: 18px;
}
/* Text styles - Heading */
.heading-semibold-lg {
font-family: "TheSans SemiBold", "TheSans", system-ui, sans-serif;
font-family: "TheSansB W6 SemiBold", system-ui, sans-serif;
font-size: 32px;
}