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

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

@ -43,26 +43,26 @@
@apply text-sm;
}
}
}
[data-fl-theme="flat"] .card-button {
@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);
[data-fl-theme="flat"] .card-button {
@apply border border-solid;
}
&:active {
transform: translateY(2px);
box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3);
[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 {
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 {
box-shadow: none;
}
}
[data-fl-theme="clay"] .card {
box-shadow: var(--shadow-lg), var(--shadow-inset);
}
[data-fl-theme="clay"] .card {
box-shadow: var(--shadow-lg), var(--shadow-inset);
}
[data-fl-theme="clay"] .card-sm {
box-shadow: var(--shadow), var(--shadow-inset);
}
[data-fl-theme="clay"] .card-sm {
box-shadow: var(--shadow), var(--shadow-inset);
}
[data-fl-theme="clay"] .card-primary,
[data-fl-theme="clay"] .card-secondary {
box-shadow:
8px 8px 0 color-mix(in srgb, var(--accent) 28%, transparent),
var(--shadow-inset);
}
[data-fl-theme="clay"] .card-primary,
[data-fl-theme="clay"] .card-secondary {
box-shadow:
8px 8px 0 color-mix(in srgb, var(--accent) 28%, transparent),
var(--shadow-inset);
}
[data-fl-theme="clay"] .card-sm.card-primary,
[data-fl-theme="clay"] .card-sm.card-secondary {
box-shadow:
6px 6px 0 color-mix(in srgb, var(--accent) 28%, transparent),
var(--shadow-inset);
}
[data-fl-theme="clay"] .card-sm.card-primary,
[data-fl-theme="clay"] .card-sm.card-secondary {
box-shadow:
6px 6px 0 color-mix(in srgb, var(--accent) 28%, transparent),
var(--shadow-inset);
}
/* cards nested in another card (or a dialog) drop the raised clay treatment and
read flat — no offset shadow / inset, hairline border. */
[data-fl-theme="clay"] .card .card,
[data-fl-theme="clay"] .dialog .card {
box-shadow: none;
border-width: 1px;
}
/* cards nested in another card (or a dialog) drop the raised clay treatment and
read flat — no offset shadow / inset, hairline border. */
[data-fl-theme="clay"] .card .card,
[data-fl-theme="clay"] .dialog .card {
box-shadow: none;
border-width: 1px;
}
[data-fl-theme="clay"] .card-interactive:hover {
box-shadow:
10px 10px 0 rgba(var(--shadow-color), 0.18),
var(--shadow-inset);
}
[data-fl-theme="clay"] .card-interactive:hover {
box-shadow:
10px 10px 0 rgba(var(--shadow-color), 0.18),
var(--shadow-inset);
}
/* 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)) {
transform: translateY(2px);
box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3);
/* 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)) {
transform: translateY(2px);
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 {
@apply border-primary;
}
}
[data-fl-theme="clay"] .chat-bubble {
box-shadow: var(--shadow-sm), var(--shadow-inset);
[data-fl-theme="clay"] .chat-bubble {
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 {
@apply h-10;
}
}
[data-fl-theme="clay"] .primary-nav {
.primary-nav__nav-item:hover {
background-color: color-mix(in srgb, var(--primary) 30%, transparent);
box-shadow: var(--shadow-sm);
}
[data-fl-theme="clay"] .primary-nav {
.primary-nav__nav-item:hover {
background-color: color-mix(in srgb, var(--primary) 30%, transparent);
box-shadow: var(--shadow-sm);
}
.primary-nav__nav-item--active {
background-color: var(--primary);
color: var(--primary-content);
box-shadow: var(--shadow-sm), var(--shadow-inset);
}
.primary-nav__nav-item--active {
background-color: var(--primary);
color: var(--primary-content);
box-shadow: var(--shadow-sm), var(--shadow-inset);
}
.primary-nav__nav-item:active {
background-color: color-mix(in srgb, var(--primary) 50%, transparent);
transform: translateY(1px);
box-shadow: none;
.primary-nav__nav-item:active {
background-color: color-mix(in srgb, var(--primary) 50%, transparent);
transform: translateY(1px);
box-shadow: none;
}
}
}

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

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

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

@ -14,27 +14,27 @@
}
}
}
}
[data-fl-theme="clay"] .secondary-nav {
.secondary-nav__nav-item:hover {
background-color: color-mix(in srgb, var(--primary) 30%, transparent);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
[data-fl-theme="clay"] .secondary-nav {
.secondary-nav__nav-item:hover {
background-color: color-mix(in srgb, var(--primary) 30%, transparent);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.secondary-nav__nav-item--active {
background-color: var(--primary);
box-shadow: var(--shadow-sm), var(--shadow-inset);
.secondary-nav__nav-item--active {
background-color: var(--primary);
box-shadow: var(--shadow-sm), var(--shadow-inset);
&:hover {
color: var(--content);
&:hover {
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;
}
}
}
@media (max-width: 768px) {
[data-theme="dark"] .secondary-nav--mobile-space {
@apply bg-surface-less;
}
@media (max-width: 768px) {
[data-theme="dark"] .secondary-nav--mobile-space {
@apply bg-surface-less;
}
[data-fl-theme="clay"] .secondary-nav--mobile-space {
.secondary-nav__nav-item:hover,
.secondary-nav__nav-item:active {
background-color: var(--surface-less);
[data-fl-theme="clay"] .secondary-nav--mobile-space {
.secondary-nav__nav-item:hover,
.secondary-nav__nav-item:active {
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;
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;
.space-menu__status .text-sm {
@apply font-medium;
}
}
[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;
}
}