initial tool setup and basic styles
This commit is contained in:
330
src/styles/base/form.css
Normal file
330
src/styles/base/form.css
Normal file
@@ -0,0 +1,330 @@
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: var(--spacing-snug) 0;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="url"],
|
||||
input[type="tel"],
|
||||
input[type="search"],
|
||||
input[type="number"] {
|
||||
width: 100%;
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
border: none;
|
||||
border-bottom: var(--size-2) solid var(--color-text-secondary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background: transparent;
|
||||
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-bottom-color: var(--color-text-primary);
|
||||
color: var(--color-surface-base);
|
||||
background: var(--color-text-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="time"],
|
||||
input[type="date"],
|
||||
input[type="datetime-local"],
|
||||
input[type="week"],
|
||||
input[type="month"] {
|
||||
width: 100%;
|
||||
margin: var(--spacing-snug) 0;
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
border: none;
|
||||
border-bottom: var(--size-2) solid var(--color-text-secondary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-md);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background: transparent;
|
||||
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active,
|
||||
&:focus-within {
|
||||
border-bottom-color: var(--color-text-primary);
|
||||
color: var(--color-surface-base);
|
||||
background: var(--color-text-primary);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical; /* only allow vertical resizing */
|
||||
|
||||
width: 100%;
|
||||
min-height: var(--size-32);
|
||||
margin: var(--spacing-snug) 0;
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
border: none;
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-md);
|
||||
color: var(--color-surface-base);
|
||||
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
legend {
|
||||
width: 100%;
|
||||
margin: var(--spacing-snug) 0;
|
||||
padding: var(--spacing-snug) var(--spacing-comfortable);
|
||||
border: none;
|
||||
|
||||
font-family: var(--font-display), serif;
|
||||
font-size: var(--typo-size-xl);
|
||||
font-weight: var(--typo-weight-black);
|
||||
color: var(--color-surface-base);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.035em;
|
||||
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
|
||||
position: relative;
|
||||
|
||||
width: var(--size-6);
|
||||
height: var(--size-6);
|
||||
|
||||
appearance: none;
|
||||
background: var(--color-text-primary);
|
||||
|
||||
&:checked {
|
||||
&::after {
|
||||
content: "✔";
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-surface-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
cursor: pointer;
|
||||
|
||||
position: relative;
|
||||
|
||||
width: var(--size-6);
|
||||
height: var(--size-6);
|
||||
border-radius: 50%;
|
||||
|
||||
appearance: none;
|
||||
background: var(--color-text-primary);
|
||||
|
||||
&:checked {
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
width: var(--size-2);
|
||||
height: var(--size-2);
|
||||
border-radius: 50%;
|
||||
|
||||
background: var(--color-surface-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
cursor: pointer;
|
||||
|
||||
width: var(--size-10);
|
||||
height: var(--size-10);
|
||||
padding: 0;
|
||||
border: var(--size-2) solid var(--color-text-primary);
|
||||
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: var(--size-0);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="file"],
|
||||
input[type="image"]{
|
||||
cursor: pointer;
|
||||
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-bottom: var(--size-2) solid var(--color-text-secondary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background: transparent;
|
||||
|
||||
&::file-selector-button {
|
||||
cursor: pointer;
|
||||
|
||||
margin-right: var(--spacing-snug);
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
border: none;
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
font-weight: var(--typo-weight-bold);
|
||||
color: var(--color-surface-base);
|
||||
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-bottom-color: var(--color-text-primary);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
cursor: pointer;
|
||||
|
||||
width: 100%;
|
||||
height: var(--size-2);
|
||||
|
||||
appearance: none;
|
||||
background: var(--color-text-secondary);
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
cursor: pointer;
|
||||
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: none;
|
||||
|
||||
appearance: none;
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
cursor: pointer;
|
||||
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="hidden"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="image"] {
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: var(--size-2) solid var(--color-text-primary);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--color-text-primary);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
||||
padding: var(--spacing-snug) var(--spacing-comfortable);
|
||||
border: var(--size-2) solid var(--color-text-primary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
font-weight: var(--typo-weight-bold);
|
||||
color: var(--color-text-primary);
|
||||
text-transform: uppercase;
|
||||
|
||||
background: var(--color-surface-base);
|
||||
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--color-text-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-surface-base);
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
cursor: pointer;
|
||||
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
padding-right: calc(var(--spacing-snug) + 1.5rem);
|
||||
border: none;
|
||||
border-bottom: var(--size-2) solid var(--color-text-secondary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-md);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right var(--spacing-snug) center;
|
||||
background-size: 1rem;
|
||||
|
||||
&:focus {
|
||||
border-bottom-color: var(--color-text-primary);
|
||||
color: var(--color-surface-base);
|
||||
background-color: var(--color-text-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
& optgroup {
|
||||
font-weight: var(--typo-weight-bold);
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-surface-elevated-2);
|
||||
}
|
||||
|
||||
& option {
|
||||
font-weight: var(--typo-weight-regular);
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-surface-base);
|
||||
}
|
||||
}
|
||||
28
src/styles/base/helpers.css
Normal file
28
src/styles/base/helpers.css
Normal file
@@ -0,0 +1,28 @@
|
||||
.content {
|
||||
max-width: clamp(60ch, 90vw, 90ch);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-comfortable);
|
||||
font-size: clamp(1rem, 2.5vw, 1.25rem);
|
||||
}
|
||||
|
||||
@keyframes slide-down {
|
||||
from {
|
||||
max-height: 2em;
|
||||
}
|
||||
|
||||
to {
|
||||
max-height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-up-ver-top {
|
||||
0% {
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleY(0.4);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
156
src/styles/base/inline.css
Normal file
156
src/styles/base/inline.css
Normal file
@@ -0,0 +1,156 @@
|
||||
em,
|
||||
i {
|
||||
padding: 0.1em 0.2em;
|
||||
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
font-style: normal;
|
||||
color: var(--color-surface-base);
|
||||
letter-spacing: var(--typo-spacing-relaxed);
|
||||
|
||||
background: var(--color-primary)
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: var(--typo-weight-black);
|
||||
letter-spacing: var(--typo-spacing-loose);
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
|
||||
padding: 0.1em 0.2em;
|
||||
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: var(--size-1);
|
||||
text-underline-offset: 2px;
|
||||
|
||||
transition: color 0.5s ease-in-out, background 0.5s ease-in-out;
|
||||
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: var(--color-surface-base);
|
||||
text-decoration: none;
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
&:visited,
|
||||
&:active {
|
||||
color: var(--color-primary-emphasis);
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0.1em 0.3em;
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
color: var(--color-surface-base);
|
||||
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0.1em 0.3em;
|
||||
border: 1px solid var(--color-text-primary);
|
||||
border-radius: 2px;
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-xs);
|
||||
color: var(--color-surface-base);
|
||||
text-transform: uppercase;
|
||||
|
||||
background: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
samp {
|
||||
padding: 0.1em 0.3em;
|
||||
border-left: var(--size-1) solid var(--color-text-tertiary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background: var(--color-surface-elevated-2);
|
||||
}
|
||||
|
||||
var {
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
font-style: normal;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.1em 0.2em;
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
color: var(--color-surface-base);
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: var(--typo-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
sub, sup {
|
||||
font-size: 0.5625em;
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
del,
|
||||
s {
|
||||
color: var(--color-text-tertiary);
|
||||
text-decoration: line-through;
|
||||
text-decoration-thickness: var(--size-1);
|
||||
}
|
||||
|
||||
ins {
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--color-primary);
|
||||
text-decoration-thickness: var(--size-1);
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
abbr {
|
||||
cursor: help;
|
||||
text-decoration: underline dotted;
|
||||
text-underline-offset: var(--size-1);
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-weight: var(--typo-weight-bold);
|
||||
font-style: normal;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
cite {
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
font-style: normal;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
q {
|
||||
font-style: normal;
|
||||
|
||||
&::before {
|
||||
content: "»";
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "«";
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
21
src/styles/base/keyframes.css
Normal file
21
src/styles/base/keyframes.css
Normal file
@@ -0,0 +1,21 @@
|
||||
@keyframes line-up {
|
||||
0% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale3d(1, 0.045, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
51% {
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale3d(1, 0.045, 1);
|
||||
}
|
||||
}
|
||||
113
src/styles/base/lists.css
Normal file
113
src/styles/base/lists.css
Normal file
@@ -0,0 +1,113 @@
|
||||
ul {
|
||||
padding-left: var(--element-list-indent-l1);
|
||||
|
||||
& li {
|
||||
padding-left: var(--spacing-snug);
|
||||
|
||||
&::marker {
|
||||
content: var(--element-ul-symbol-l1);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
& ul {
|
||||
padding-left: var(--element-list-indent-l2);
|
||||
|
||||
& li::marker {
|
||||
content: var(--element-ul-symbol-l2);
|
||||
}
|
||||
|
||||
& ul {
|
||||
padding-left: var(--element-list-indent-l3);
|
||||
|
||||
& li::marker {
|
||||
content: var(--element-ul-symbol-l3);
|
||||
}
|
||||
|
||||
& ul {
|
||||
padding-left: var(--element-list-indent-l4);
|
||||
|
||||
& li::marker {
|
||||
content: var(--element-ul-symbol-l4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: ol-counter-l1;
|
||||
padding-left: var(--element-list-indent-l1);
|
||||
|
||||
& li {
|
||||
counter-increment: ol-counter-l1;
|
||||
padding-left: var(--spacing-comfortable);
|
||||
|
||||
&::marker {
|
||||
content: var(--element-ol-prefix-l1) counter(ol-counter-l1, var(--element-ol-style-l1)) var(--element-ol-suffix-l1);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
& ol {
|
||||
counter-reset: ol-counter-l2;
|
||||
padding-left: var(--element-list-indent-l2);
|
||||
|
||||
& li {
|
||||
counter-increment: ol-counter-l2;
|
||||
|
||||
&::marker {
|
||||
content: var(--element-ol-prefix-l2) counter(ol-counter-l2, var(--element-ol-style-l2)) var(--element-ol-suffix-l2);
|
||||
}
|
||||
}
|
||||
|
||||
& ol {
|
||||
counter-reset: ol-counter-l3;
|
||||
padding-left: var(--element-list-indent-l3);
|
||||
|
||||
& li {
|
||||
counter-increment: ol-counter-l3;
|
||||
|
||||
&::marker {
|
||||
content: var(--element-ol-prefix-l3) counter(ol-counter-l3, var(--element-ol-style-l3)) var(--element-ol-suffix-l3);
|
||||
}
|
||||
}
|
||||
|
||||
& ol {
|
||||
counter-reset: ol-counter-l4;
|
||||
padding-left: var(--element-list-indent-l4);
|
||||
|
||||
& li {
|
||||
counter-increment: ol-counter-l4;
|
||||
|
||||
&::marker {
|
||||
content: var(--element-ol-prefix-l4) counter(ol-counter-l4, var(--element-ol-style-l4)) var(--element-ol-suffix-l4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
padding: var(--spacing-snug);
|
||||
|
||||
font-family: var(--font-display), serif;
|
||||
font-size: var(--typo-size-lg);
|
||||
font-weight: var(--typo-weight-black);
|
||||
line-height: 1.5385;
|
||||
color: var(--color-surface-base);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.035em;
|
||||
|
||||
background: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 var(--spacing-snug) 0;
|
||||
padding: var(--spacing-snug);
|
||||
|
||||
& p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
44
src/styles/base/tables.css
Normal file
44
src/styles/base/tables.css
Normal file
@@ -0,0 +1,44 @@
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
|
||||
width: 100%;
|
||||
margin: var(--spacing-comfortable) 0;
|
||||
border: var(--size-2) solid var(--color-text-primary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
|
||||
& thead th,
|
||||
& th {
|
||||
font-family: var(--font-display), serif;
|
||||
font-weight: var(--typo-weight-black);
|
||||
color: var(--color-surface-base);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
& tbody td,
|
||||
& td {
|
||||
padding: var(--spacing-snug) var(--spacing-cozy);
|
||||
border: var(--size-1) solid var(--color-text-primary);
|
||||
text-align: center;
|
||||
background: var(--color-surface-base)
|
||||
}
|
||||
|
||||
& td:first-child,
|
||||
& th:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
& tfoot td {
|
||||
padding: var(--spacing-snug) var(--spacing-cozy);
|
||||
border: var(--size-px) solid var(--color-text-primary);
|
||||
|
||||
font-weight: var(--typo-weight-bold);
|
||||
color: var(--color-surface-base);
|
||||
|
||||
background: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
254
src/styles/base/typography.css
Normal file
254
src/styles/base/typography.css
Normal file
@@ -0,0 +1,254 @@
|
||||
html {
|
||||
font-size: var(--typo-size-base);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body), sans-serif;
|
||||
font-feature-settings: "kern" 1;
|
||||
font-weight: var(--typo-weight-regular);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: var(--typo-leading-comfortable);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background-color: var(--color-surface-base);
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: var(--font-display), serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: var(--spacing-cozy);
|
||||
padding-bottom: var(--spacing-snug);
|
||||
border-bottom: var(--size-4) solid var(--color-text-primary);
|
||||
|
||||
font-size: var(--typo-size-6xl);
|
||||
font-weight: var(--typo-weight-black);
|
||||
line-height: 1.125;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.0137em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: var(--spacing-relaxed) 0 var(--spacing-cozy) 0;
|
||||
padding-left: var(--spacing-cozy);
|
||||
border-left: var(--size-4) solid var(--color-text-primary);
|
||||
|
||||
font-size: var(--typo-size-5xl);
|
||||
font-weight: var(--typo-weight-black);
|
||||
line-height: 1.1765;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.0096em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: var(--spacing-comfortable) 0 var(--spacing-cozy) 0;
|
||||
border-bottom: var(--size-2) solid var(--color-text-secondary);
|
||||
|
||||
|
||||
font-size: var(--typo-size-4xl);
|
||||
font-weight: var(--typo-weight-extrabold);
|
||||
line-height: 1.2;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.004em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: var(--spacing-comfortable) 0 var(--spacing-snug) 0;
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
|
||||
font-size: var(--typo-size-3xl);
|
||||
font-weight: var(--typo-weight-bold);
|
||||
line-height: 1.125;
|
||||
color: var(--color-surface-base);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.0025em;
|
||||
|
||||
background: var(--color-text-primary);
|
||||
|
||||
}
|
||||
|
||||
h5 {
|
||||
position: relative;
|
||||
|
||||
margin: var(--spacing-cozy) 0 var(--spacing-snug) 0;
|
||||
border-top: var(--size-2) solid var(--color-text-secondary);
|
||||
border-bottom: var(--size-2) solid var(--color-text-secondary);
|
||||
|
||||
font-size: var(--typo-size-2xl);
|
||||
font-weight: var(--typo-weight-extrabold);
|
||||
line-height: 1.28;
|
||||
color: var(--color-text-secondary);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin: var(--spacing-cozy) 0 var(--spacing-snug) 0;
|
||||
|
||||
font-size: var(--typo-size-xl);
|
||||
font-weight: var(--typo-weight-black);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.035em;
|
||||
|
||||
/* &::after {
|
||||
content: "▼";
|
||||
display: block;
|
||||
font-size: 1.25em;
|
||||
} */
|
||||
}
|
||||
|
||||
p {
|
||||
margin: var(--spacing-cozy) 0;
|
||||
font-size: var(--typo-size-md);
|
||||
line-height: var(--typo-leading-normal);
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
h1 + p {
|
||||
font-size: var(--typo-size-xl);
|
||||
font-weight: var(--typo-weight-bold);
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.022em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: var(--spacing-comfortable) 0;
|
||||
padding: var(--spacing-snug) 0 var(--spacing-snug) var(--spacing-comfortable);
|
||||
border-left: var(--size-4) solid var(--color-text-tertiary);
|
||||
color: var(--color-text-tertiary);
|
||||
|
||||
& p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
|
||||
margin: var(--spacing-comfortable) 0;
|
||||
padding: var(--spacing-comfortable);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
line-height: 1.5385;
|
||||
color: var(--color-surface-base);
|
||||
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
hr {
|
||||
position: relative;
|
||||
|
||||
overflow: visible;
|
||||
|
||||
height: var(--size-4);
|
||||
margin: var(--spacing-relaxed) 0;
|
||||
border: none;
|
||||
|
||||
background-color: var(--color-text-primary);
|
||||
|
||||
&::after {
|
||||
content: "▼";
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
padding: 0 var(--spacing-snug);
|
||||
|
||||
font-size: var(--typo-size-4xl);
|
||||
line-height: var(--typo-leading-compressed);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background-color: var(--color-surface-base);
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: var(--spacing-relaxed) 0;
|
||||
padding: var(--spacing-comfortable) 0;
|
||||
border-top: var(--size-3) solid var(--color-text-primary);
|
||||
border-bottom: var(--size-3) solid var(--color-text-primary);
|
||||
|
||||
& blockquote {
|
||||
position: relative;
|
||||
|
||||
margin: var(--spacing-comfortable) 0;
|
||||
padding: var(--spacing-snug) 0 var(--spacing-comfortable) var(--spacing-comfortable);
|
||||
border: none;
|
||||
|
||||
font-size: var(--typo-size-lg);
|
||||
font-weight: var(--typo-weight-extrabold);
|
||||
line-height: var(--typo-leading-loose);
|
||||
color: var(--color-text-tertiary);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
bottom: calc(var(--size-1)*-1);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
width: var(--size-16);
|
||||
height: var(--size-2);
|
||||
|
||||
background: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
& figcaption {
|
||||
margin-top: var(--spacing-snug);
|
||||
|
||||
font-size: var(--typo-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.074em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
details {
|
||||
overflow: hidden;
|
||||
|
||||
& summary {
|
||||
padding: var(--spacing-snug) 0;
|
||||
|
||||
font-family: var(--font-display), serif;
|
||||
font-size: var(--typo-size-lg);
|
||||
font-weight: var(--typo-weight-black);
|
||||
line-height: 1.5385;
|
||||
color: var(--color-surface-base);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.035em;
|
||||
|
||||
background: var(--color-text-secondary);
|
||||
|
||||
&::marker {
|
||||
content: "🞃";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-family: var(--font-body), sans-serif
|
||||
}
|
||||
}
|
||||
|
||||
&[open] {
|
||||
summary {
|
||||
&::marker {
|
||||
content: "🞁";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
293
src/styles/base/variables.css
Normal file
293
src/styles/base/variables.css
Normal file
@@ -0,0 +1,293 @@
|
||||
:root {
|
||||
/* === TYPOGRAPHY === */
|
||||
|
||||
/* == Font Families == */
|
||||
--font-display: 'Geist Variable';
|
||||
--font-body: 'Iosevka Aile';
|
||||
--font-mono: 'Iosevka';
|
||||
|
||||
/* == Font Sizes == */
|
||||
--typo-size-base: 16px;
|
||||
--typo-size-6xl: 4em; /* 64px */
|
||||
--typo-size-5xl: 3.1875em; /* 51px */
|
||||
--typo-size-4xl: 2.5em; /* 40px */
|
||||
--typo-size-3xl: 2em; /* 32px */
|
||||
--typo-size-2xl: 1.5625em; /* 25px */
|
||||
--typo-size-xl: 1.25em; /* 20px */
|
||||
--typo-size-lg: 1.125em; /* 18px */
|
||||
--typo-size-md: 1em; /* 16px */
|
||||
--typo-size-sm: 0.875em; /* 14px */
|
||||
--typo-size-xs: 0.8125em; /* 13px */
|
||||
--typo-size-2xs: 0.625em; /* 10px */
|
||||
|
||||
/* == Line Height == */
|
||||
--typo-leading-compressed: 1.0; /* 1.0 - very tight */
|
||||
--typo-leading-tight: 1.125; /* 1.125 - tight */
|
||||
--typo-leading-snug: 1.25; /* 1.25 - snug */
|
||||
--typo-leading-cozy: 1.375; /* 1.375 - cozy */
|
||||
--typo-leading-normal: 1.5; /* 1.5 - normal */
|
||||
--typo-leading-relaxed: 1.625; /* 1.625 - relaxed */
|
||||
--typo-leading-comfortable: 1.75; /* 1.75 - comfortable */
|
||||
--typo-leading-loose: 1.875; /* 1.875 - loose */
|
||||
--typo-leading-spacious: 2.0; /* 2.0 - very loose */
|
||||
|
||||
/* == Letter Spacing == */
|
||||
--typo-spacing-tightest: -0.05em; /* -0.05em - very tight */
|
||||
--typo-spacing-tighter: -0.025em; /* -0.025em - tight */
|
||||
--typo-spacing-tight: -0.0125em; /* -0.0125em - slightly tight */
|
||||
--typo-spacing-normal: 0em; /* 0 - normal */
|
||||
--typo-spacing-relaxed: 0.025em; /* 0.025em - slightly loose */
|
||||
--typo-spacing-comfortable: 0.05em; /* 0.05em - comfortable */
|
||||
--typo-spacing-loose: 0.1em; /* 0.1em - loose */
|
||||
--typo-spacing-looser: 0.15em; /* 0.15em - very loose */
|
||||
--typo-spacing-loosest: 0.2em; /* 0.2em - extremely loose */
|
||||
|
||||
/* == Font Weight == */
|
||||
--typo-weight-thin: 100;
|
||||
--typo-weight-extralight: 200;
|
||||
--typo-weight-light: 300;
|
||||
--typo-weight-regular: 400;
|
||||
--typo-weight-medium: 500;
|
||||
--typo-weight-semibold: 600;
|
||||
--typo-weight-bold: 700;
|
||||
--typo-weight-extrabold: 800;
|
||||
--typo-weight-black: 900;
|
||||
|
||||
/* === SPACING === */
|
||||
|
||||
/* == Base Size Units == */
|
||||
--size-0: 0;
|
||||
--size-px: 1px;
|
||||
--size-05: 0.125rem; /* 2px */
|
||||
--size-1: 0.25rem; /* 4px */
|
||||
--size-2: 0.5rem; /* 8px */
|
||||
--size-3: 0.75rem; /* 12px */
|
||||
--size-4: 1rem; /* 16px */
|
||||
--size-5: 1.25rem; /* 20px */
|
||||
--size-6: 1.5rem; /* 24px */
|
||||
--size-8: 2rem; /* 32px */
|
||||
--size-10: 2.5rem; /* 40px */
|
||||
--size-12: 3rem; /* 48px */
|
||||
--size-16: 4rem; /* 64px */
|
||||
--size-20: 5rem; /* 80px */
|
||||
--size-24: 6rem; /* 96px */
|
||||
--size-32: 8rem; /* 128px */
|
||||
--size-40: 10rem; /* 160px */
|
||||
--size-48: 12rem; /* 192px */
|
||||
--size-64: 16rem; /* 256px */
|
||||
--size-80: 20rem; /* 320px */
|
||||
--size-96: 24rem; /* 384px */
|
||||
--size-128: 32rem; /* 512px */
|
||||
--size-160: 40rem; /* 640px */
|
||||
--size-192: 48rem; /* 768px */
|
||||
--size-256: 64rem; /* 1024px */
|
||||
--size-320: 80rem; /* 1280px */
|
||||
--size-384: 96rem; /* 1536px */
|
||||
--size-360: 90rem; /* 1440px */
|
||||
--size-400: 100rem; /* 1600px */
|
||||
--size-480: 120rem; /* 1920px */
|
||||
|
||||
/* == Semantic Spacing == */
|
||||
--spacing-none: var(--size-0);
|
||||
--spacing-hairline: var(--size-px);
|
||||
--spacing-tight: var(--size-1);
|
||||
--spacing-snug: var(--size-2);
|
||||
--spacing-cozy: var(--size-4);
|
||||
--spacing-comfortable: var(--size-6);
|
||||
--spacing-relaxed: var(--size-8);
|
||||
--spacing-spacious: var(--size-12);
|
||||
--spacing-generous: var(--size-16);
|
||||
--spacing-luxurious: var(--size-24);
|
||||
--spacing-expansive: var(--size-32);
|
||||
|
||||
/* === LIST STYLING === */
|
||||
|
||||
/* == List Indentation Levels == */
|
||||
--element-list-indent-l1: var(--spacing-cozy);
|
||||
--element-list-indent-l2: var(--spacing-cozy);
|
||||
--element-list-indent-l3: var(--spacing-cozy);
|
||||
--element-list-indent-l4: var(--spacing-cozy);
|
||||
|
||||
/* == Unordered List Symbols == */
|
||||
--element-ul-symbol-l1: '⯃';
|
||||
--element-ul-symbol-l2: '⯁';
|
||||
--element-ul-symbol-l3: '⯆';
|
||||
--element-ul-symbol-l4: '⯀';
|
||||
|
||||
/* == Ordered List Styling == */
|
||||
--element-ol-prefix-l1: '';
|
||||
--element-ol-style-l1: decimal;
|
||||
--element-ol-suffix-l1: '.)';
|
||||
--element-ol-prefix-l2: '';
|
||||
--element-ol-style-l2: lower-alpha;
|
||||
--element-ol-suffix-l2: '.)';
|
||||
--element-ol-prefix-l3: '';
|
||||
--element-ol-style-l3: decimal-leading-zero;
|
||||
--element-ol-suffix-l3: '';
|
||||
--element-ol-prefix-l4: '';
|
||||
--element-ol-style-l4: lower-greek;
|
||||
--element-ol-suffix-l4: '.)';
|
||||
|
||||
/* === COLORS === */
|
||||
|
||||
/* == Default Palette == */
|
||||
|
||||
/* Blacks, Grays & Off-Whites */
|
||||
--color-palette-woodsmoke: oklch(15.5% 0.009 274.276deg); /* Woodsmoke: #0B0C10 */
|
||||
--color-palette-black-ink: oklch(21.9% 0.006 285.911deg); /* Shark: #1A1A1D */
|
||||
--color-palette-charcoal: oklch(26.6% 0.008 240.166deg); /* Shark2: #222629 */
|
||||
--color-palette-charcoal-gray: oklch(33.7% 0.026 266.801deg); /* Bright Gray: #313745 */
|
||||
--color-palette-slate-gray: oklch(33.3% 0 89.876deg); /* Mineshaft: #363636 */
|
||||
--color-palette-gunmetal: oklch(41.1% 0.008 248.035deg); /* Abbey2: #474B4F */
|
||||
--color-palette-carbon: oklch(39.8% 0 89.876deg); /* Tundora: #474747 */
|
||||
--color-palette-steel-gray: oklch(42.5% 0.003 286.26deg); /* Abbey: #4e4e50 */
|
||||
--color-palette-dusty-black: oklch(43.7% 0.013 17.672deg); /* DonJuan: #594F4F */
|
||||
--color-palette-stone: oklch(64.3% 0.005 91.471deg); /* Natural Gray: #8E8D8A */
|
||||
--color-palette-cloud-gray: oklch(53.6% 0.005 236.565deg); /* Nevada: #6B6E70 */
|
||||
--color-palette-silver: oklch(72.9% 0.001 17.185deg); /* Silver Chalice: #A8A7A7 */
|
||||
--color-palette-light-silver: oklch(82.6% 0.002 247.844deg); /* Silversand: #C5C6C7 */
|
||||
--color-palette-pale-gray: oklch(91.3% 0.004 91.449deg); /* Westar: #E3E2DF */
|
||||
--color-palette-pale-stone: oklch(89.7% 0.004 106.481deg); /* Quillgray: #DDDDDA */
|
||||
--color-palette-very-pale-gray: oklch(94.3% 0 89.876deg); /* Gallery: #ECECEC */
|
||||
--color-palette-off-white: oklch(98.1% 0.003 247.858deg); /* Catskill White: #F7F9fB */
|
||||
--color-palette-cat-squeeze: oklch(98.3% 0.004 236.496deg); /* Cat Squeeze: #F7FAFC */
|
||||
--color-palette-smoky-mauve: oklch(50% 0.054 308.622deg); /* Smoky: #6C5B7B */
|
||||
|
||||
/* Reds */
|
||||
--color-palette-oxblood: oklch(30.5% 0.122 12.109deg); /* Bordeaux: #5D001E */
|
||||
--color-palette-deep-maroon: oklch(37.6% 0.109 11.682deg); /* Crown of Thorns: #6F2232 */
|
||||
--color-palette-crimson: oklch(43.2% 0.169 7.14deg); /* Monarch: #950740 */
|
||||
--color-palette-cherry-red: oklch(45.4% 0.168 1.454deg); /* Disco: #9A1750 */
|
||||
--color-palette-ruby: oklch(52.1% 0.206 15.782deg); /* Shiraz: #C3073F */
|
||||
--color-palette-red-clay: oklch(65.1% 0.178 27.507deg); /* Burnt Sienna: #E85A4F */
|
||||
--color-palette-lava: oklch(63.6% 0.193 17.075deg); /* Mandy: #E84A5F */
|
||||
--color-palette-vivid-scarlet: oklch(66.6% 0.221 15.669deg); /* Radical Red: #FE4365 */
|
||||
|
||||
/* Pinks & Magentas */
|
||||
--color-palette-heliotrope: oklch(68.3% 0.217 353.666deg); /* Heliotrope: #F74FA3 */
|
||||
--color-palette-hot-pink: oklch(65.4% 0.2 6.69deg); /* French Rose: #EE4C7C */
|
||||
--color-palette-cerise: oklch(60.7% 0.23 18.554deg); /* Amaranth: #EC2049 */
|
||||
--color-palette-fuchsia: oklch(49.6% 0.181 351.176deg); /* Hibiscus: #A7226E */
|
||||
--color-palette-dusty-rose: oklch(63.2% 0.11 2.384deg); /* Turkish Rose: #C06C84 */
|
||||
--color-palette-berry: oklch(60.8% 0.159 2.621deg); /* Mulberry: #CC527A */
|
||||
--color-palette-petal-pink: oklch(80.5% 0.063 1.992deg); /* Rose Fog: #E3AFBC */
|
||||
--color-palette-coral-pink: oklch(71.2% 0.162 15.607deg); /* Froly: #F67280 */
|
||||
--color-palette-sweet-pink: oklch(79.2% 0.114 21.911deg); /* Sweet Pink: #FC9D9A */
|
||||
|
||||
/* Oranges & Browns */
|
||||
--color-palette-persimmon: oklch(68.6% 0.179 40.01deg); /* Flamingo: #F26B38 */
|
||||
--color-palette-terracotta: oklch(71.3% 0.131 27.646deg); /* Apricot: #E98074 */
|
||||
--color-palette-tan: oklch(82.7% 0.047 76.752deg); /* Akaroa: #D8C3A5 */
|
||||
--color-palette-peach: oklch(88.5% 0.072 57.746deg); /* Flesh: #FECEAB */
|
||||
--color-palette-pastel-orange: oklch(82.1% 0.092 42.408deg); /* Rosebud: #F8B195 */
|
||||
--color-palette-light-apricot: oklch(87.8% 0.066 57.778deg); /* Vivid Tangerine: #F9CDAD */
|
||||
--color-palette-bone-white: oklch(92.7% 0.015 94.206deg); /* Satin Linen: #EAE7DC */
|
||||
|
||||
/* Yellows */
|
||||
--color-palette-ripe-lemon: oklch(83.9% 0.167 91.469deg); /* Ripe Lemon: #F2C51D */
|
||||
--color-palette-bright-canary: oklch(89% 0.157 97.726deg); /* Energy Yellow: #F7DB4F */
|
||||
--color-palette-pale-lemon: oklch(95.6% 0.104 121.573deg); /* Mimosa: #E5FCAD */
|
||||
|
||||
/* Greens */
|
||||
--color-palette-forest-green: oklch(58.1% 0.127 130.001deg); /* Crete: #61892F */
|
||||
--color-palette-lime-green: oklch(74.6% 0.18 129.939deg); /* Atlantis: #86C232 */
|
||||
--color-palette-electric-green: oklch(87.7% 0.227 137.099deg); /* Screaming Green: #87f74f */
|
||||
--color-palette-sage: oklch(75.1% 0.056 144.175deg); /* Norway: #87f74f */
|
||||
--color-palette-mint-green: oklch(84.8% 0.098 151.333deg); /* Chinook: #9de0ad */
|
||||
--color-palette-olive-drab: oklch(82.5% 0.042 107.285deg); /* Olive Drap: #C8C8A9 */
|
||||
--color-palette-seafoam: oklch(71.6% 0.056 165.214deg); /* Acapulco: #83AF9B */
|
||||
|
||||
/* Blues & Teals */
|
||||
--color-palette-dark-navy: oklch(27.3% 0.024 253.693deg); /* Ebony Clay: #1F2833 */
|
||||
--color-palette-deep-teal: oklch(32.4% 0.018 225.132deg); /* Outer Space: #2A363B */
|
||||
--color-palette-royal-blue: oklch(46.1% 0.07 245.64deg); /* Ming: #355C7D */
|
||||
--color-palette-sky-blue: oklch(76.3% 0.129 233.891deg); /* Picton Blue: #4FBFF7 */
|
||||
--color-palette-slate-blue: oklch(55.1% 0.043 210.602deg); /* Cutty Sark: #547980 */
|
||||
--color-palette-turquoise: oklch(61.5% 0.091 198.865deg); /* Lochinvar: #2F9599 */
|
||||
--color-palette-aqua: oklch(68.6% 0.095 190.758deg); /* Keppel: #45ADA8 */
|
||||
--color-palette-electric-blue: oklch(90.8% 0.128 188.419deg); /* Aquamarine: #66FCF1 */
|
||||
--color-palette-powder-blue: oklch(88.2% 0.062 187.276deg); /* Powder Blue: #a9e6df */
|
||||
--color-palette-ice-blue: oklch(99.9% 0.001 197.139deg); /* Twilight Blue: #feffff */
|
||||
|
||||
/* == Semantic Colors == */
|
||||
|
||||
/* Primary Colors */
|
||||
--color-primary: var(--color-palette-lava);
|
||||
--color-primary-surface: var(--color-palette-sweet-pink);
|
||||
--color-primary-emphasis: var(--color-palette-cherry-red);
|
||||
|
||||
/* Secondary Colors */
|
||||
--color-secondary: var(--color-palette-seafoam);
|
||||
--color-secondary-surface: var(--color-palette-olive-drab);
|
||||
--color-secondary-emphasis: var(--color-palette-mint-green);
|
||||
|
||||
/* Tertiary Colors */
|
||||
--color-tertiary: var(--color-palette-bright-canary);
|
||||
--color-tertiary-surface: var(--color-palette-pale-lemon);
|
||||
--color-tertiary-emphasis: var(--color-palette-ripe-lemon);
|
||||
|
||||
/* Quartenary Colors */
|
||||
--color-quarternary: var(--color-palette-powder-blue);
|
||||
--color-quarternary-surface: var(--color-palette-aqua);
|
||||
--color-quarternary-emphasis: var(--color-palette-slate-blue);
|
||||
|
||||
/* Text Base Colors */
|
||||
--color-text-primary: var(--color-palette-black-ink); /* Main Body Texts, headlines */
|
||||
--color-text-secondary: var(--color-palette-charcoal); /* Subheading, Secondary Info */
|
||||
--color-text-tertiary: var(--color-palette-charcoal-gray); /* Captions, Meta Text */
|
||||
--color-text-quarternary: var(--color-palette-carbon); /* Placeholder Text */
|
||||
--color-text-inverse: var(--color-palette-ice-blue); /* Text on dark backgrounds */
|
||||
--color-text-disabled: var(--color-palette-cloud-gray); /* Disabled form labels, inactive text */
|
||||
|
||||
/* Surface Base Colors */
|
||||
--color-surface-base: var(--color-palette-ice-blue); /* Main page background */
|
||||
--color-surface-elevated-1: var(--color-palette-off-white); /* Cards, Panels */
|
||||
--color-surface-elevated-2: var(--color-palette-very-pale-gray); /* Modals, Dropdowns */
|
||||
--color-surface-elevated-3: var(--color-palette-pale-gray); /* Tooltips, popovers */
|
||||
--color-surface-elevated-4: var(--color-palette-light-silver); /* Highest Elevation */
|
||||
--color-surface-inverse: var(--color-palette-black-ink); /* Darkest Surface for Contrast */
|
||||
|
||||
/* Border Base Colors */
|
||||
--color-border-subtle: var(--color-palette-silver); /* Subtle Dividers, Card Borders */
|
||||
--color-border-normal: var(--color-palette-stone); /* Standard Borders, form fields */
|
||||
--color-border-strong: var(--color-palette-charcoal-gray); /* Emphasized Borders */
|
||||
|
||||
/* State Colors */
|
||||
--color-state-error: var(--color-palette-cerise); /* Error Text, Container, icons */
|
||||
--color-state-warning: var(--color-palette-persimmon); /* Warning Text, Container, Icons */
|
||||
--color-state-success: var(--color-palette-lime-green); /* Success Text, Container, Icons */
|
||||
--color-state-info: var(--color-palette-royal-blue); /* Info Text, Container, Icons */
|
||||
|
||||
/* Link Colors */
|
||||
--color-text-link: var(--color-text-tertiary);
|
||||
--color-text-link-hover: var(--color-secondary);
|
||||
--color-text-link-visited: var(--color-palette-fuchsia);
|
||||
|
||||
/* Focus States */
|
||||
--color-focus-ring: var(--color-primary);
|
||||
--color-focus-ring-offset: var(--color-primary);
|
||||
--color-focus-indicator: var(--color-primary-emphasis)
|
||||
|
||||
/* Overlays */;
|
||||
--color-utility-overlay-light: oklch(0% 0 0deg / 10%); /* Light overlays */
|
||||
--color-utility-overlay-medium: oklch(0% 0 0deg / 30%); /* Medium overlays */
|
||||
--color-utility-overlay-heavy: oklch(0% 0 0deg / 60%); /* Heavy overlays, modal backdrops */
|
||||
--color-surface-overlay: var(--color-utility-overlay-medium); /* Modal overlays, backdrop */
|
||||
--color-surface-backdrop: var(--color-utility-overlay-heavy); /* Full screen overlays */
|
||||
|
||||
/* Loading/Skeleton */
|
||||
--color-utility-skeleton-base: var(--color-surface-elevated-2); /* Skeleton loader base */
|
||||
--color-utility-skeleton-shimmer: var(--color-surface-elevated-1); /* Skeleton shimmer effect */
|
||||
|
||||
/* Dividers */
|
||||
--color-utility-divider: var(--color-border-subtle); /* Section dividers, HR elements */
|
||||
--color-utility-divider-strong: var(--color-border-normal); /* Emphasized dividers */
|
||||
|
||||
/* Shadows */
|
||||
--color-utility-shadow: oklch(0% 0 0deg / 10%); /* Drop shadows */
|
||||
--color-utility-shadow-strong: oklch(0% 0 0deg / 25%); /* Strong shadows */
|
||||
|
||||
/* Highlights */
|
||||
--color-utility-highlight: var(--color-tertiary-surface); /* Text highlighting, search results */
|
||||
--color-utility-highlight-strong: var(--color-tertiary); /* Strong highlighting */
|
||||
}
|
||||
Reference in New Issue
Block a user