matt/flotilla
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Move theme overrides inside @layer components so utilities in markup can override them

Browse source
This commit is contained in:
Jon Staab 2026-09-25 15:50:06 -07:00
parent 5a32287313
commit d67385632b
8 changed files with 154 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/lib/components/button.css
View file

@ -164,43 +164,42 @@
.button-pill { .button-pill {
@apply rounded-full; @apply rounded-full;
} }
}
/* these are unlayered, so they beat the @layer rules above no matter their /* a theme rule outranks the outline variants above, hence the :not(.button-outline) */
specificity — hence the :not(.button-outline) on every filled variant */ [data-fl-theme="clay"] .button-primary:not(.button-outline),
[data-fl-theme="clay"] .button-primary:not(.button-outline), [data-fl-theme="clay"] .button-secondary:not(.button-outline),
[data-fl-theme="clay"] .button-secondary:not(.button-outline), [data-fl-theme="clay"] .button-error:not(.button-outline) {
[data-fl-theme="clay"] .button-error:not(.button-outline) { box-shadow: var(--shadow-sm), var(--shadow-inset-strong);
box-shadow: var(--shadow-sm), var(--shadow-inset-strong); }
}
/* hover lift + bigger offset shadow; active press + smaller offset shadow */ /* hover lift + bigger offset shadow; active press + smaller offset shadow */
[data-fl-theme="clay"] .button-primary:not(.button-outline):hover { [data-fl-theme="clay"] .button-primary:not(.button-outline):hover {
background: var(--primary-bold); background: var(--primary-bold);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: box-shadow:
6px 6px 0 rgba(var(--shadow-color), 0.3), 6px 6px 0 rgba(var(--shadow-color), 0.3),
var(--shadow-inset-strong); var(--shadow-inset-strong);
} }
[data-fl-theme="clay"] .button-secondary:not(.button-outline):hover { [data-fl-theme="clay"] .button-secondary:not(.button-outline):hover {
background: var(--secondary-bold); background: var(--secondary-bold);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: box-shadow:
6px 6px 0 rgba(var(--shadow-color), 0.3), 6px 6px 0 rgba(var(--shadow-color), 0.3),
var(--shadow-inset-strong); var(--shadow-inset-strong);
} }
[data-fl-theme="clay"] .button-neutral:hover, [data-fl-theme="clay"] .button-neutral:hover,
[data-fl-theme="clay"] .button-outline:hover, [data-fl-theme="clay"] .button-outline:hover,
[data-fl-theme="clay"] .button-error:not(.button-outline):hover { [data-fl-theme="clay"] .button-error:not(.button-outline):hover {
transform: translateY(-2px); transform: translateY(-2px);
} }
[data-fl-theme="clay"] .button-primary:not(.button-outline):active, [data-fl-theme="clay"] .button-primary:not(.button-outline):active,
[data-fl-theme="clay"] .button-secondary:not(.button-outline):active, [data-fl-theme="clay"] .button-secondary:not(.button-outline):active,
[data-fl-theme="clay"] .button-neutral:active, [data-fl-theme="clay"] .button-neutral:active,
[data-fl-theme="clay"] .button-outline:active { [data-fl-theme="clay"] .button-outline:active {
transform: translateY(2px); transform: translateY(2px);
box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3); box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3);
} }
[data-fl-theme="clay"] .button-error:not(.button-outline):active { [data-fl-theme="clay"] .button-error:not(.button-outline):active {
transform: translateY(2px); transform: translateY(2px);
}
} }

36
src/lib/components/card-button.css
View file

@ -43,26 +43,26 @@
@apply text-sm; @apply text-sm;
} }
} }
}
[data-fl-theme="flat"] .card-button { [data-fl-theme="flat"] .card-button {
@apply border border-solid; @apply border border-solid;
}
[data-fl-theme="navy"] .card-button {
@apply border border-solid;
}
[data-fl-theme="clay"] .card-button {
@apply border-2 border-solid shadow-sm;
&:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg), var(--shadow-inset);
} }
&:active { [data-fl-theme="navy"] .card-button {
transform: translateY(2px); @apply border border-solid;
box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3); }
[data-fl-theme="clay"] .card-button {
@apply border-2 border-solid shadow-sm;
&:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg), var(--shadow-inset);
}
&:active {
transform: translateY(2px);
box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3);
}
} }
} }

70
src/lib/components/card.css
View file

@ -51,46 +51,46 @@
.dialog .card { .dialog .card {
box-shadow: none; box-shadow: none;
} }
}
[data-fl-theme="clay"] .card { [data-fl-theme="clay"] .card {
box-shadow: var(--shadow-lg), var(--shadow-inset); box-shadow: var(--shadow-lg), var(--shadow-inset);
} }
[data-fl-theme="clay"] .card-sm { [data-fl-theme="clay"] .card-sm {
box-shadow: var(--shadow), var(--shadow-inset); box-shadow: var(--shadow), var(--shadow-inset);
} }
[data-fl-theme="clay"] .card-primary, [data-fl-theme="clay"] .card-primary,
[data-fl-theme="clay"] .card-secondary { [data-fl-theme="clay"] .card-secondary {
box-shadow: box-shadow:
8px 8px 0 color-mix(in srgb, var(--accent) 28%, transparent), 8px 8px 0 color-mix(in srgb, var(--accent) 28%, transparent),
var(--shadow-inset); var(--shadow-inset);
} }
[data-fl-theme="clay"] .card-sm.card-primary, [data-fl-theme="clay"] .card-sm.card-primary,
[data-fl-theme="clay"] .card-sm.card-secondary { [data-fl-theme="clay"] .card-sm.card-secondary {
box-shadow: box-shadow:
6px 6px 0 color-mix(in srgb, var(--accent) 28%, transparent), 6px 6px 0 color-mix(in srgb, var(--accent) 28%, transparent),
var(--shadow-inset); var(--shadow-inset);
} }
/* cards nested in another card (or a dialog) drop the raised clay treatment and /* cards nested in another card (or a dialog) drop the raised clay treatment and
read flat — no offset shadow / inset, hairline border. */ read flat — no offset shadow / inset, hairline border. */
[data-fl-theme="clay"] .card .card, [data-fl-theme="clay"] .card .card,
[data-fl-theme="clay"] .dialog .card { [data-fl-theme="clay"] .dialog .card {
box-shadow: none; box-shadow: none;
border-width: 1px; border-width: 1px;
} }
[data-fl-theme="clay"] .card-interactive:hover { [data-fl-theme="clay"] .card-interactive:hover {
box-shadow: box-shadow:
10px 10px 0 rgba(var(--shadow-color), 0.18), 10px 10px 0 rgba(var(--shadow-color), 0.18),
var(--shadow-inset); var(--shadow-inset);
} }
/* excludes presses on nested buttons/links, which :active otherwise cascades to too */ /* excludes presses on nested buttons/links, which :active otherwise cascades to too */
[data-fl-theme="clay"] .card-interactive:active:not(:has(button:active, a:active)) { [data-fl-theme="clay"] .card-interactive:active:not(:has(button:active, a:active)) {
transform: translateY(2px); transform: translateY(2px);
box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3); box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3);
}
} }

6
src/lib/components/chat.css
View file

@ -7,8 +7,8 @@
.chat-bubble--user { .chat-bubble--user {
@apply border-primary; @apply border-primary;
} }
}
[data-fl-theme="clay"] .chat-bubble { [data-fl-theme="clay"] .chat-bubble {
box-shadow: var(--shadow-sm), var(--shadow-inset); box-shadow: var(--shadow-sm), var(--shadow-inset);
}
} }

30
src/lib/components/primary-nav.css
View file

@ -67,23 +67,23 @@
.primary-nav__nav-item--active::after { .primary-nav__nav-item--active::after {
@apply h-10; @apply h-10;
} }
}
[data-fl-theme="clay"] .primary-nav { [data-fl-theme="clay"] .primary-nav {
.primary-nav__nav-item:hover { .primary-nav__nav-item:hover {
background-color: color-mix(in srgb, var(--primary) 30%, transparent); background-color: color-mix(in srgb, var(--primary) 30%, transparent);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
.primary-nav__nav-item--active { .primary-nav__nav-item--active {
background-color: var(--primary); background-color: var(--primary);
color: var(--primary-content); color: var(--primary-content);
box-shadow: var(--shadow-sm), var(--shadow-inset); box-shadow: var(--shadow-sm), var(--shadow-inset);
} }
.primary-nav__nav-item:active { .primary-nav__nav-item:active {
background-color: color-mix(in srgb, var(--primary) 50%, transparent); background-color: color-mix(in srgb, var(--primary) 50%, transparent);
transform: translateY(1px); transform: translateY(1px);
box-shadow: none; box-shadow: none;
}
} }
} }

10
src/lib/components/room.css
View file

@ -82,12 +82,12 @@
.room-pins__nav { .room-pins__nav {
@apply flex items-center gap-1 text-sm; @apply flex items-center gap-1 text-sm;
} }
}
[data-fl-theme="clay"] .room { [data-fl-theme="clay"] .room {
@apply bg-surface; @apply bg-surface;
.room__item:hover { .room__item:hover {
@apply bg-surface-less/50; @apply bg-surface-less/50;
}
} }
} }

36
src/lib/components/secondary-nav.css
View file

@ -14,27 +14,27 @@
} }
} }
} }
}
[data-fl-theme="clay"] .secondary-nav { [data-fl-theme="clay"] .secondary-nav {
.secondary-nav__nav-item:hover { .secondary-nav__nav-item:hover {
background-color: color-mix(in srgb, var(--primary) 30%, transparent); background-color: color-mix(in srgb, var(--primary) 30%, transparent);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
.secondary-nav__nav-item--active { .secondary-nav__nav-item--active {
background-color: var(--primary); background-color: var(--primary);
box-shadow: var(--shadow-sm), var(--shadow-inset); box-shadow: var(--shadow-sm), var(--shadow-inset);
&:hover { &:hover {
color: var(--content); color: var(--content);
}
}
.secondary-nav__nav-item:active {
background-color: color-mix(in srgb, var(--primary) 50%, transparent);
transform: translateY(1px);
box-shadow: none;
} }
} }
.secondary-nav__nav-item:active {
background-color: color-mix(in srgb, var(--primary) 50%, transparent);
transform: translateY(1px);
box-shadow: none;
}
} }

48
src/lib/components/space-menu.css
View file

@ -100,36 +100,36 @@
@apply justify-start px-1; @apply justify-start px-1;
} }
} }
}
@media (max-width: 768px) { @media (max-width: 768px) {
[data-theme="dark"] .secondary-nav--mobile-space { [data-theme="dark"] .secondary-nav--mobile-space {
@apply bg-surface-less; @apply bg-surface-less;
} }
[data-fl-theme="clay"] .secondary-nav--mobile-space { [data-fl-theme="clay"] .secondary-nav--mobile-space {
.secondary-nav__nav-item:hover, .secondary-nav__nav-item:hover,
.secondary-nav__nav-item:active { .secondary-nav__nav-item:active {
background-color: var(--surface-less); background-color: var(--surface-less);
transform: none;
box-shadow: none;
}
.secondary-nav__nav-item--active,
.secondary-nav__nav-item--active:hover {
background-color: color-mix(in srgb, var(--primary) 14%, var(--surface));
color: var(--content);
box-shadow: none;
}
}
[data-fl-theme="clay"] .space-menu__status-link:hover,
[data-fl-theme="clay"] .space-menu__status-link:active {
transform: none; transform: none;
box-shadow: none; box-shadow: none;
} }
.secondary-nav__nav-item--active, .space-menu__status .text-sm {
.secondary-nav__nav-item--active:hover { @apply font-medium;
background-color: color-mix(in srgb, var(--primary) 14%, var(--surface));
color: var(--content);
box-shadow: none;
} }
} }
[data-fl-theme="clay"] .space-menu__status-link:hover,
[data-fl-theme="clay"] .space-menu__status-link:active {
transform: none;
box-shadow: none;
}
.space-menu__status .text-sm {
@apply font-medium;
}
} }