Migrate components

This commit is contained in:
Beau Findlay
2026-01-31 15:51:29 +00:00
parent ee136857d1
commit 2105d3b85d
32 changed files with 2003 additions and 692 deletions

View File

@@ -1,11 +1,13 @@
/* Base Styles */
body {
background-color: var(--color-black);
color: var(--color-slate-50);
font-family: var(--font-mono);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
background-color: var(--color-black);
color: var(--color-slate-50);
font-family: var(--font-mono);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Typography */
@@ -15,76 +17,78 @@ h3,
h4,
h5,
h6 {
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
}
h1 {
font-size: var(--font-size-3xl);
font-size: var(--font-size-3xl);
}
h2 {
font-size: var(--font-size-2xl);
font-size: var(--font-size-2xl);
}
h3 {
font-size: var(--font-size-xl);
font-size: var(--font-size-xl);
}
p {
margin-bottom: var(--space-4);
margin-bottom: var(--space-4);
}
/* Links */
a {
color: var(--color-slate-50);
transition: color var(--transition-base) var(--transition-timing);
color: var(--color-slate-50);
display: inline-block;
transition: transform var(--transition-base) var(--transition-timing);
}
a:hover {
color: var(--color-slate-300);
transform: translateY(2px);
color: var(--color-slate-50);
}
a:focus-visible {
outline: 2px solid var(--color-slate-50);
outline-offset: 2px;
outline: 2px solid var(--color-slate-50);
outline-offset: 2px;
}
/* Focus */
*:focus-visible {
outline: 2px solid var(--color-slate-50);
outline-offset: 2px;
outline: 2px solid var(--color-slate-50);
outline-offset: 2px;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid var(--color-slate-50);
outline-offset: 2px;
outline: 2px solid var(--color-slate-50);
outline-offset: 2px;
}
/* Selection */
::selection {
background-color: var(--color-slate-50);
color: var(--color-black);
background-color: var(--color-slate-50);
color: var(--color-black);
}
/* Scrollbar */
body::-webkit-scrollbar {
width: 10px;
width: 10px;
}
body::-webkit-scrollbar-track {
background: var(--color-white);
background: var(--color-white);
}
body::-webkit-scrollbar-thumb {
background-color: var(--color-black);
border: 1px solid var(--color-white);
background-color: var(--color-black);
border: 1px solid var(--color-white);
}
body {
scrollbar-width: thin;
scrollbar-color: var(--color-black) var(--color-white);
scrollbar-width: thin;
scrollbar-color: var(--color-black) var(--color-white);
}