@fea-ui/styles 0.1.0-alpha.1 → 0.1.0-alpha.10

package/src/components/input.css

@@ -1,37 +1,35 @@
-/** Base Styling */
-.input {
-  @apply bg-input text-input-foreground rounded border;
-  @apply w-full px-3 py-2;
-
-  @apply transition-all motion-reduce:transition-none;
-
-  @media (hover: hover) {
-    &:hover:not([data-disabled]) {
-      @apply brightness-90;
-    }
-  }
-
-  &:disabled {
-    @apply status-disabled;
-  }
-
-  &:valid {
-    @apply status-valid;
-  }
-
-  &:invalid:not(:placeholder-shown) {
-    @apply status-invalid;
-  }
+.input,
+.textarea {
+	@apply bg-input text-input-foreground rounded border;
+	@apply w-full px-3 py-2;
+
+	@apply transition-[brightness] motion-reduce:transition-none;
+
+	&::placeholder {
+		@apply text-muted-foreground;
+	}
+
+	&[data-focused] {
+		@apply status-focused;
+	}
+
+	&:disabled {
+		@apply status-disabled;
+	}
+
+	&[data-invalid] {
+		@apply border-danger;
+	}
 }
 
 .input--sm {
-  @apply h-8 text-sm;
+	@apply h-8 text-sm;
 }
 
 .input--md {
-  @apply h-10;
+	@apply h-10;
 }
 
 .input--lg {
-  @apply h-12;
+	@apply h-12;
 }

package/src/components/label.css

@@ -1,4 +1,8 @@
 /** Base Styling */
 .label {
-	@apply flex items-center gap-2 select-none;
+	@apply font-medium text-foreground leading-none;
+}
+
+[data-required="true"] .label {
+	@apply after:content-['*'] after:ml-0.5 after:text-danger;
 }

package/src/components/link.css

@@ -1,29 +1,35 @@
 /** Base Styling */
 .link {
-  @apply text-link underline-offset-2 transition-colors;
+	@apply text-link underline-offset-2 inline-flex items-center;
 
-  &:visited {
-    @apply text-link/70;
-  }
+	@apply transition-[color] motion-reduce:transition-none;
 
-  &:hover {
-    @apply text-link/80;
-  }
+	&:visited {
+		@apply text-link/70;
+	}
 
-  &[data-active] {
-    @apply font-semibold;
-  }
+	&:hover {
+		@apply text-link/80;
+	}
 
-  &:disabled,
-  [data-disabled] {
-    @apply text-muted cursor-not-allowed;
-  }
+	&[data-active] {
+		@apply font-semibold;
+	}
+
+	&:disabled,
+	[data-disabled] {
+		@apply text-muted cursor-not-allowed;
+	}
+
+	svg {
+		@apply size-4 text-muted-foreground;
+	}
 }
 
 .link--underline {
-  @apply underline;
+	@apply underline;
 }
 
 .link--no-underline {
-  @apply no-underline;
+	@apply no-underline;
 }

package/src/components/list.css

@@ -1,8 +1,8 @@
 /** Base Styling */
 .list {
-  @apply flex flex-col gap-1;
+	@apply flex flex-col gap-1;
 }
 
 .list__item {
-  @apply cursor-pointer;
+	@apply cursor-pointer;
 }

package/src/components/menu.css

@@ -0,0 +1,48 @@
+.menu__positioner {
+	@apply outline-0;
+}
+
+.menu__popup {
+	@apply p-3 rounded;
+
+	@apply bg-popover text-popover-foreground shadow;
+
+	@apply transition-[transform,scale] motion-reduce:transition-none;
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		@apply opacity-0 scale-90;
+	}
+}
+
+.menu__arrow {
+	@apply flex text-popover size-6;
+
+	&[data-side="top"] {
+		@apply -bottom-3 rotate-180;
+	}
+
+	&[data-side="right"] {
+		@apply -start-3 rotate-90;
+	}
+
+	&[data-side="bottom"] {
+		@apply -top-3;
+	}
+
+	&[data-side="left"] {
+		@apply -end-3 -rotate-90;
+	}
+}
+
+.menu__item {
+	@apply select-none relative flex items-center px-3 py-2 rounded text-sm leading-none cursor-pointer;
+
+	&:focus {
+		@apply outline-none bg-secondary text-secondary-foreground;
+	}
+}
+
+.menu__separator {
+	@apply my-2 h-px bg-border;
+}

package/src/components/meter.css

@@ -18,7 +18,7 @@
 .meter__indicator {
 	@apply block rounded;
 
-	@apply transition-all motion-reduce:transition-none;
+	@apply transition-[width] motion-reduce:transition-none;
 }
 
 /** Variants */

package/src/components/navbar.css

@@ -1,38 +1,36 @@
 /** Base Styling */
 .navbar {
-  @apply bg-secondary/50 border-border relative z-50 flex h-[var(--navbar-height)] w-full items-center justify-between border-b px-4 py-2;
+	@apply bg-surface/50 border-border relative z-50 flex h-(--navbar-height) w-full items-center justify-between border-b px-4 py-2;
 }
 
 .navbar__container {
-  @apply mx-auto flex w-full max-w-7xl items-center justify-between;
+	@apply mx-auto flex w-full max-w-7xl items-center justify-between;
 }
 
 .navbar__content {
-  @apply flex items-center gap-2;
+	@apply flex items-center gap-2;
 }
 
 .navbar__toggle {
-  @apply md:hidden;
+	@apply md:hidden;
+
+	svg {
+		@apply size-5 me-2;
+	}
 }
 
 .navbar__list {
-  @apply hidden md:flex md:items-center md:gap-6;
+	@apply flex items-center gap-4;
 }
 
 .navbar__list-item {
-  @apply list-none;
+	@apply list-none;
 }
 
 .navbar__menu {
-  @apply bg-secondary/50 absolute top-16 left-0 hidden w-full flex-col border border-b py-4 md:hidden;
-
-  @apply transition-[height] motion-reduce:transition-none;
-
-  &[data-expanded="true"] {
-    @apply flex;
-  }
+	@apply flex flex-col gap-1;
 }
 
 .navbar__menu-item {
-  @apply w-full list-none px-4 py-2;
+	@apply w-full list-none px-4 py-2;
 }

package/src/components/popover.css

@@ -0,0 +1,11 @@
+.popover {
+	@apply bg-overlay text-overlay-foreground rounded shadow;
+	@apply px-3 py-2;
+
+	@apply transition-[opacity,scale] motion-reduce:transition-none;
+
+	&[data-entering],
+	&[data-exiting] {
+		@apply opacity-0 scale-90;
+	}
+}

package/src/components/progress.css

@@ -0,0 +1,72 @@
+/** Base Styling */
+.progress {
+	@apply grid grid-cols-2 items-center gap-1;
+}
+
+.progress__label {
+	@apply font-medium;
+}
+
+.progress__value {
+	@apply col-start-2 m-0 text-right text-sm leading-5;
+}
+
+.progress__track {
+	@apply col-span-2 block w-48 overflow-hidden rounded shadow-inner;
+}
+
+.progress__indicator {
+	@apply block rounded;
+
+	@apply transition-[width] motion-reduce:transition-none;
+}
+
+/** Variants */
+.progress--primary .progress__track {
+	@apply bg-primary/10;
+}
+
+.progress--primary .progress__indicator {
+	@apply bg-primary;
+}
+
+.progress--secondary .progress__track {
+	@apply bg-secondary/10;
+}
+
+.progress--secondary .progress__indicator {
+	@apply bg-secondary;
+}
+
+.progress--success .progress__track {
+	@apply bg-success/10;
+}
+
+.progress--success .progress__indicator {
+	@apply bg-success;
+}
+
+.progress--danger .progress__track {
+	@apply bg-danger/10;
+}
+
+.progress--danger .progress__indicator {
+	@apply bg-danger;
+}
+
+/** Sizes */
+.progress--sm .progress__track {
+	@apply h-2;
+}
+
+.progress--sm .progress__label {
+	@apply text-sm;
+}
+
+.progress--md .progress__track {
+	@apply h-3;
+}
+
+.progress--lg .progress__track {
+	@apply h-4;
+}

package/src/components/radio.css

@@ -0,0 +1,31 @@
+.radio__group {
+	@apply flex flex-col gap-4;
+}
+
+.radio {
+	@apply flex size-5 items-center justify-center rounded-full;
+
+	&[data-unchecked] {
+		@apply border-border bg-secondary;
+	}
+
+	&[data-checked] {
+		@apply border-primary bg-primary;
+	}
+
+	&:focus-visible {
+		@apply status-focused;
+	}
+}
+
+.radio__indicator {
+	@apply flex items-center justify-center;
+
+	&[data-unchecked] {
+		@apply hidden;
+	}
+
+	&::before {
+		@apply block size-2 rounded-full bg-background content-[''];
+	}
+}

package/src/components/sidebar.css

@@ -0,0 +1,65 @@
+.sidebar {
+	@apply flex h-full w-full;
+}
+
+.sidebar__panel {
+	@apply fixed top-0 left-0 h-full w-64;
+
+	@apply flex flex-col;
+
+	@apply bg-surface shadow-lg text-surface-foreground;
+
+	@apply transition-transform duration-300 ease-in-out motion-reduce:transition-none;
+}
+
+.sidebar__header {
+	@apply flex items-center justify-between gap-3 p-4;
+	@apply border-b;
+}
+
+.sidebar__content {
+	@apply flex-1 p-4;
+}
+
+.sidebar__footer {
+	@apply border-t;
+	@apply p-4;
+}
+
+.sidebar__outlet {
+	@apply md:ml-64;
+
+	@apply transition-[margin] duration-300 ease-in-out motion-reduce:transition-none;
+}
+
+/**
+ * State
+ */
+
+[data-open="false"] {
+	.sidebar__panel {
+		@apply -translate-x-full;
+	}
+
+	.sidebar__outlet {
+		@apply ml-0;
+	}
+}
+
+.sidebar__trigger {
+	@apply cursor-pointer;
+	@apply size-8 flex items-center justify-center;
+	@apply rounded border-border text-muted-foreground;
+
+	@apply transition-[color] motion-reduce:transition-none;
+
+	@media (hover: hover) {
+		&:hover {
+			@apply text-foreground;
+		}
+	}
+
+	:focus-visible {
+		@apply status-focused;
+	}
+}

package/src/components/slider.css

@@ -0,0 +1,25 @@
+.slider__control {
+	@apply flex w-full touch-none select-none items-center py-3;
+}
+
+.slider__track {
+	@apply relative h-1 w-full rounded bg-secondary shadow-inner shadow-secondary select-none;
+}
+
+.slider__indicator {
+	@apply absolute rounded bg-primary select-none;
+}
+
+.slider__thumb {
+	@apply size-4 rounded-full bg-primary outline outline-border select-none;
+
+	@apply transition-[box-shadow,transform,outline] motion-reduce:transition-none;
+
+	&:focus-visible {
+		@apply status-focused;
+	}
+
+	&:active {
+		@apply scale-90;
+	}
+}

package/src/components/switch.css

@@ -1,40 +1,40 @@
 /** Base Styling */
 .switch {
-  @apply cursor-pointer;
+	@apply cursor-pointer;
 
-  @apply bg-secondary/50 relative flex cursor-pointer rounded-full border-2;
+	@apply bg-secondary/50 relative flex cursor-pointer rounded-full border-2;
 
-  &:active {
-    @apply bg-secondary;
-  }
+	&:active {
+		@apply bg-secondary;
+	}
 
-  &:focus-visible {
-    @apply status-focused;
-  }
+	&:focus-visible {
+		@apply status-focused;
+	}
 
-  &[data-disabled] {
-    @apply status-disabled;
-  }
+	&[data-disabled] {
+		@apply status-disabled;
+	}
 }
 
 .switch__thumb {
-  @apply bg-primary aspect-square h-full rounded-full shadow;
+	@apply bg-primary aspect-square h-full rounded-full shadow;
 
-  @apply transition-[translate] motion-reduce:transition-none;
+	@apply transition-[translate] motion-reduce:transition-none;
 
-  &[data-checked] {
-    @apply translate-x-full;
-  }
+	&[data-checked] {
+		@apply translate-x-full;
+	}
 }
 
 .switch--sm {
-  @apply h-4 w-7;
+	@apply h-4 w-7;
 }
 
 .switch--md {
-  @apply h-6 w-10;
+	@apply h-6 w-10;
 }
 
 .switch--lg {
-  @apply h-8 w-14;
+	@apply h-8 w-14;
 }

package/src/components/table.css

@@ -1 +1,32 @@
 /** Base Styling */
+.table {
+	@apply w-full border-collapse bg-surface text-surface-foreground;
+}
+
+.table__thead {
+	@apply bg-secondary text-secondary-foreground;
+}
+
+.table__th {
+	@apply border-border px-4 py-2 text-left font-medium;
+}
+
+.table__tbody {
+	@apply divide-y divide-border;
+}
+
+.table__tr {
+	@apply cursor-pointer;
+
+	&:hover {
+		@apply bg-secondary/50;
+	}
+}
+
+.table__td {
+	@apply border-border px-4 py-2;
+}
+
+.table__caption {
+	@apply mt-2 text-sm text-secondary-foreground;
+}

package/src/components/tabs.css

@@ -1,49 +1,49 @@
 /** Base Styling */
 .tabs {
-  @apply bg-card/50 text-secondary-foreground rounded border;
+	@apply bg-surface/50 text-secondary-foreground rounded border;
 }
 
 .tabs__list {
-  @apply bg-card relative z-0 flex gap-1 rounded-t border-b px-1;
+	@apply bg-surface relative z-0 flex gap-1 rounded-t border-b px-1;
 }
 
 .tabs__tab {
-  @apply m-0 flex appearance-none items-center justify-center border-0 bg-transparent outline-none;
-  @apply text-muted-foreground break-keep whitespace-nowrap select-none;
-  @apply h-8 px-2 py-0;
-
-  &[data-active] {
-    @apply text-foreground;
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      @apply text-foreground;
-    }
-  }
-
-  &:focus-visible {
-    @apply relative;
-
-    &::before {
-      content: "";
-      @apply outline-primary absolute inset-x-0 inset-y-1 rounded outline-2 -outline-offset-1;
-    }
-  }
+	@apply m-0 flex appearance-none items-center justify-center border-0 bg-transparent outline-none;
+	@apply text-muted-foreground break-keep whitespace-nowrap select-none;
+	@apply h-8 px-2 py-0;
+
+	&[data-active] {
+		@apply text-foreground;
+	}
+
+	@media (hover: hover) {
+		&:hover {
+			@apply text-foreground;
+		}
+	}
+
+	&:focus-visible {
+		@apply relative;
+
+		&::before {
+			content: "";
+			@apply outline-primary absolute inset-x-0 inset-y-1 rounded outline-2 -outline-offset-1;
+		}
+	}
 }
 
 .tabs__indicator {
-  @apply bg-primary absolute bottom-0 left-0 -z-10 h-px;
-  @apply transition-[translate,width] motion-reduce:transition-none;
+	width: var(--active-tab-width);
 
-  translate: var(--active-tab-left) -50%;
-  width: var(--active-tab-width);
+	translate: var(--active-tab-left) -50%;
+	@apply bg-primary absolute bottom-0 left-0 -z-10 h-px;
+	@apply transition-[translate,width] motion-reduce:transition-none;
 }
 
 .tabs__panel {
-  @apply relative flex h-32 items-center justify-center outline-none;
+	@apply relative flex h-32 items-center justify-center outline-none;
 
-  &:focus-visible {
-    @apply status-focused;
-  }
+	&:focus-visible {
+		@apply status-focused;
+	}
 }

package/src/components/text-field.css

@@ -0,0 +1,4 @@
+/** Base Styling */
+.text-field {
+	@apply flex flex-col gap-1;
+}

package/src/components/text.css

@@ -1,4 +1,4 @@
 /** Base Styling */
 .text {
-  @apply text-danger;
+	@apply text-danger;
 }

package/src/components/toggle-button.css

@@ -1,8 +1,8 @@
 /** Base Styling */
 .toggle-button {
-  @apply brightness-50;
+	@apply brightness-50;
 
-  &[data-pressed] {
-    @apply brightness-100;
-  }
+	&[data-pressed] {
+		@apply brightness-100;
+	}
 }