hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-13 21:58:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prepare 1.0.0-beta.5

Browse Source
This commit is contained in:
Ronan Berder
2026-06-22 18:19:38 +08:00
parent 9806d6af63
commit cb72d80558
76 changed files with 3361 additions and 1424 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/styles/nova.css
+96 -18
View File
@@ -1,5 +1,22 @@
/* Button */
/* Accordion */
@layer components {
.accordion > details {
@apply not-last:border-b;
}
.accordion > details > summary {
@apply focus-visible:ring-ring/50 focus-visible:border-ring rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3;
}
.accordion > details > summary > svg:last-child {
@apply text-muted-foreground ms-auto size-4;
}
.accordion > details > :not(summary) {
@apply pt-0 pb-2.5 text-sm;
}
/* Button */
.btn {
@apply rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
}
@@ -247,7 +264,7 @@
@apply size-10;
}
.avatar > span:not([data-badge]) {
.avatar > span:not(.avatar-badge) {
@apply bg-muted text-muted-foreground rounded-[inherit];
}
@@ -255,7 +272,7 @@
@apply rounded-[inherit];
}
.avatar > [data-badge] {
.avatar > .avatar-badge {
@apply bg-primary text-primary-foreground ring-background;
}
@@ -301,17 +318,42 @@
@apply text-primary underline-offset-4 hover:underline;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-xl p-1;
/* Breadcrumb */
.breadcrumb > ol {
@apply text-muted-foreground gap-1.5 text-sm;
}
.command-dialog > * {
@apply rounded-xl p-0;
.breadcrumb li {
@apply gap-1;
}
.breadcrumb a {
@apply transition-colors hover:text-foreground;
}
.breadcrumb [aria-current='page'] {
@apply font-normal text-foreground;
}
.breadcrumb li[aria-hidden='true'] > svg {
@apply size-3.5;
}
.breadcrumb li > span[aria-hidden='true'] {
@apply size-5 [&>svg]:size-4;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-xl! p-1;
}
.command-dialog > .command {
@apply bg-popover text-popover-foreground ring-foreground/10 rounded-xl! ring-1 duration-100;
}
.command > header {
@apply m-1 mb-0 h-8 gap-2 rounded-lg border border-input/30 bg-input/30 px-2;
@apply m-1 mb-0 h-8 gap-0 rounded-lg border border-input/30 bg-input/30 px-2;
}
.command > header svg {
@@ -319,7 +361,7 @@
}
.command > header input {
@apply h-full text-sm placeholder:text-muted-foreground;
@apply ps-1.5 text-sm placeholder:text-muted-foreground;
}
.command [role='menu'] {
@@ -343,11 +385,11 @@
}
.command [role='menuitem'] {
@apply gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4;
@apply gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 in-[.command-dialog]:rounded-lg;
}
.command [role='menuitem'].active {
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
@apply bg-muted text-foreground [&_svg]:text-foreground;
}
.command [data-shortcut] {
@@ -361,7 +403,7 @@
/* Combobox */
.combobox > input[role='combobox'] {
@apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors focus-visible:ring-3 aria-invalid:ring-3;
@apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors focus-visible:ring-3 aria-invalid:ring-3;
}
.combobox > svg,
@@ -370,11 +412,15 @@
}
.combobox [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 rounded-lg p-1 shadow-md ring-1 duration-100;
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 gap-0 rounded-lg p-0 shadow-md ring-1 duration-100;
}
.combobox [role='listbox'] {
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto;
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true']))) {
@apply p-0;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
@@ -391,7 +437,7 @@
.combobox [role='option'].active,
.combobox [role='option']:focus-visible {
@apply bg-muted text-foreground [&_svg]:text-foreground;
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
}
.combobox [role='group'] {
@@ -413,6 +459,14 @@
.combobox-chip-remove {
@apply -ms-1 opacity-50 hover:opacity-100 [&_svg]:size-3.5;
}
.combobox [data-popover] > .input-group {
@apply m-1 mb-0 h-8 w-auto border-input/30 bg-input/30 shadow-none focus-within:border-inherit focus-within:ring-0;
}
.combobox [data-popover] > input[role='combobox'] {
@apply mb-1 w-full;
}
/* Select */
*:not(select).select > button {
@apply border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 data-[size=sm]:h-7 gap-1.5 rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] border bg-transparent py-2 ps-2.5 pe-2 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4;
@@ -465,10 +519,15 @@
/* Dialog */
.dialog::backdrop,
.alert-dialog::backdrop,
.command-dialog::backdrop {
@apply bg-black/10 backdrop-blur-xs duration-100;
}
.alert-dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-4 rounded-xl p-4 ring-1 duration-100 sm:max-w-sm;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm;
}
@@ -481,6 +540,15 @@
@apply gap-2;
}
.alert-dialog > * > header {
@apply gap-x-4 gap-y-1.5;
}
.alert-dialog > * > header > figure {
@apply bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md [&>svg:not([class*='size-'])]:size-6;
}
.alert-dialog > * > footer,
.dialog > * > footer {
@apply bg-muted/50 -mx-4 -mb-4 gap-2 rounded-b-xl border-t p-4;
}
@@ -490,11 +558,21 @@
@apply text-base leading-none font-medium;
}
.alert-dialog > * > header > h2,
.alert-dialog > * > [data-title] {
@apply text-base font-medium;
}
.dialog > * > header > p,
.dialog > * > [data-description] {
@apply text-muted-foreground text-sm leading-normal [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
.alert-dialog > * > header > p,
.alert-dialog > * > [data-description] {
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
/* Dropdown Menu */
.dropdown-menu > [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100;
@@ -541,11 +619,11 @@
@apply bg-border -mx-1 my-1 h-px;
}
.dropdown-menu :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-muted-foreground font-sans text-xs tracking-widest;
}
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-accent-foreground;
}