@owodesign/owoui 0.1.4 → 0.1.6

package/src/styles/ui/dropdown-menu.css

@@ -1,132 +0,0 @@
-.owo-dropdown-menu__content {
-  min-width: 12rem;
-  overflow-y: auto;
-  border: 1px solid var(--owo-cmp-surface-border);
-  border-radius: var(--owo-cmp-control-radius-lg);
-  background: var(--owo-cmp-surface-bg-raised);
-  box-shadow: var(--_owo-dropdown-menu-shadow, var(--owo-cmp-surface-shadow-strong));
-  padding: 0.375rem;
-  color: var(--owo-cmp-text-primary);
-  outline: none;
-  z-index: var(--owo-cmp-z-dropdown);
-  animation: owo-dropdown-menu-in var(--owo-cmp-motion-duration-fast) var(--owo-cmp-motion-ease-standard);
-}
-
-.owo-dropdown-menu__content[data-side="top"] {
-  transform-origin: bottom center;
-}
-
-.owo-dropdown-menu__content[data-side="bottom"] {
-  transform-origin: top center;
-}
-
-.owo-dropdown-menu__content[data-side="left"] {
-  transform-origin: center right;
-}
-
-.owo-dropdown-menu__content[data-side="right"] {
-  transform-origin: center left;
-}
-
-.owo-dropdown-menu__group + .owo-dropdown-menu__group {
-  margin-top: 0.375rem;
-  padding-top: 0.375rem;
-  border-top: 1px solid color-mix(in srgb, var(--owo-cmp-surface-border) 80%, transparent);
-}
-
-.owo-dropdown-menu__label {
-  padding: 0.35rem 0.625rem 0.25rem;
-  font-size: 0.675rem;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--owo-cmp-text-muted);
-}
-
-.owo-dropdown-menu__separator {
-  margin: 0.375rem 0.25rem;
-  border-top: 1px solid color-mix(in srgb, var(--owo-cmp-surface-border) 82%, transparent);
-}
-
-.owo-dropdown-menu__item {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  gap: 0.75rem;
-  border: 0;
-  border-radius: calc(var(--owo-cmp-control-radius-md) - 0.125rem);
-  background: transparent;
-  padding: 0.625rem 0.75rem;
-  text-align: left;
-  color: inherit;
-  cursor: default;
-  transition:
-    background-color var(--owo-cmp-motion-duration-fast) var(--owo-cmp-motion-ease-standard),
-    color var(--owo-cmp-motion-duration-fast) var(--owo-cmp-motion-ease-standard);
-}
-
-.owo-dropdown-menu__item:hover,
-.owo-dropdown-menu__item[data-highlighted] {
-  background: var(--owo-cmp-surface-bg-inset);
-}
-
-.owo-dropdown-menu__item[data-selected] {
-  background: color-mix(in srgb, var(--owo-cmp-accent-bg) 10%, var(--owo-cmp-surface-bg-raised));
-}
-
-.owo-dropdown-menu__item[data-selected] .owo-dropdown-menu__item-main {
-  color: var(--owo-cmp-text-primary);
-  font-weight: 600;
-}
-
-.owo-dropdown-menu__item[data-disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.owo-dropdown-menu__item[data-destructive] {
-  color: var(--owo-cmp-danger-text);
-}
-
-.owo-dropdown-menu__item--inset {
-  padding-left: 1rem;
-}
-
-.owo-dropdown-menu__item-main {
-  min-width: 0;
-  flex: 1 1 auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.owo-dropdown-menu__shortcut,
-.owo-dropdown-menu__indicator,
-.owo-dropdown-menu__submenu-indicator {
-  flex: 0 0 auto;
-  color: var(--owo-cmp-text-muted);
-  font-size: 0.75rem;
-}
-
-.owo-dropdown-menu__indicator {
-  min-width: 1rem;
-  text-align: center;
-  color: var(--owo-cmp-accent-bg);
-  font-weight: 700;
-}
-
-.owo-dropdown-menu__sub-trigger[data-state="open"] {
-  background: var(--owo-cmp-surface-bg-inset);
-}
-
-@keyframes owo-dropdown-menu-in {
-  from {
-    opacity: 0;
-    transform: scale(0.98);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}

package/src/styles/ui/field.css

@@ -1,12 +0,0 @@
-.owo-field {
-  --field-label: var(--owo-cmp-text-secondary);
-  --field-help: var(--owo-cmp-text-muted);
-}
-
-.owo-field__label {
-  color: var(--field-label);
-}
-
-.owo-field__help {
-  color: var(--field-help);
-}

package/src/styles/ui/icon-button.css

@@ -1,29 +0,0 @@
-.owo-icon-button {
-  --icon-button-bg: transparent;
-  --icon-button-bg-hover: var(--owo-cmp-surface-bg-inset);
-  --icon-button-bg-active: var(--owo-cmp-surface-bg-subtle);
-  --icon-button-text: var(--owo-cmp-text-muted);
-  --icon-button-ring: var(--owo-cmp-control-focus-ring);
-  background: var(--icon-button-bg);
-  color: var(--icon-button-text);
-}
-
-.owo-icon-button:hover {
-  background: var(--icon-button-bg-hover);
-  color: var(--owo-cmp-text-primary);
-}
-
-.owo-icon-button:active {
-  background: var(--icon-button-bg-active);
-}
-
-.owo-icon-button:focus-visible {
-  --tw-ring-color: var(--icon-button-ring);
-}
-
-.owo-icon-button[data-variant="subtle"] {
-  --icon-button-bg: var(--owo-cmp-surface-bg-inset);
-  --icon-button-bg-hover: var(--owo-cmp-surface-bg-subtle);
-  --icon-button-bg-active: var(--owo-cmp-surface-bg-raised);
-  --icon-button-text: var(--owo-cmp-text-primary);
-}

package/src/styles/ui/input.css

@@ -1,16 +0,0 @@
-.owo-input {
-  --field-bg: var(--owo-cmp-surface-bg);
-  --field-border: var(--owo-cmp-surface-border);
-  --field-text: var(--owo-cmp-text-primary);
-  --field-placeholder: var(--owo-cmp-text-muted);
-  --field-ring: var(--owo-cmp-control-focus-ring);
-  background: var(--field-bg);
-  border: 1px solid var(--field-border);
-  color: var(--field-text);
-  --tw-ring-color: var(--field-ring);
-}
-
-.owo-input[data-tone="warning"] {
-  --field-border: var(--owo-cmp-warning-border);
-  --field-ring: var(--owo-cmp-warning-border);
-}

package/src/styles/ui/panel.css

@@ -1,23 +0,0 @@
-.owo-panel {
-  --panel-bg: var(--owo-cmp-surface-bg);
-  --panel-border: var(--owo-cmp-surface-border);
-  --panel-section-border: var(--owo-cmp-surface-border);
-  --panel-shadow: none;
-  background: var(--panel-bg);
-  border-color: var(--panel-border);
-  box-shadow: var(--panel-shadow);
-}
-
-.owo-panel-header,
-.owo-panel-footer {
-  border-color: var(--panel-section-border);
-}
-
-.owo-panel[data-variant="subtle"] {
-  --panel-bg: var(--owo-cmp-surface-bg-subtle);
-}
-
-.owo-panel[data-variant="raised"] {
-  --panel-bg: var(--owo-cmp-surface-bg-raised);
-  --panel-shadow: var(--owo-cmp-surface-shadow);
-}

package/src/styles/ui/segmented-control.css

@@ -1,28 +0,0 @@
-.owo-segmented-control {
-  --segmented-bg: var(--owo-cmp-surface-bg-inset);
-  --segmented-border: var(--owo-cmp-surface-border);
-  --segmented-item-text: var(--owo-cmp-text-muted);
-  --segmented-item-hover-text: var(--owo-cmp-text-secondary);
-  --segmented-item-active-bg: var(--owo-cmp-surface-bg-raised);
-  --segmented-item-active-text: var(--owo-cmp-text-primary);
-  --segmented-ring: var(--owo-cmp-control-focus-ring);
-  background: var(--segmented-bg);
-  --tw-ring-color: var(--segmented-border);
-}
-
-.owo-segmented-control__item {
-  color: var(--segmented-item-text);
-}
-
-.owo-segmented-control__item:hover {
-  color: var(--segmented-item-hover-text);
-}
-
-.owo-segmented-control__item[data-active="true"] {
-  background: var(--segmented-item-active-bg);
-  color: var(--segmented-item-active-text);
-}
-
-.owo-segmented-control__item:focus-visible {
-  --tw-ring-color: var(--segmented-ring);
-}

package/src/styles/ui/select.css

@@ -1,52 +0,0 @@
-.owo-select__trigger {
-  --select-bg: var(--owo-cmp-surface-bg);
-  --select-border: var(--owo-cmp-surface-border);
-  --select-text: var(--owo-cmp-text-primary);
-  --select-ring: var(--owo-cmp-control-focus-ring);
-
-  background: var(--select-bg);
-  border: 0.5px solid var(--select-border);
-  color: var(--select-text);
-  --tw-ring-color: var(--select-ring);
-}
-
-.owo-select__trigger:hover:not(:disabled) {
-  --select-border: var(--owo-cmp-surface-border-strong);
-}
-
-.owo-select__trigger[data-open] {
-  --select-border: var(--owo-cmp-surface-border-strong);
-}
-
-.owo-select__trigger[data-tone="warning"] {
-  --select-border: var(--owo-cmp-warning-border);
-  --select-ring: var(--owo-cmp-warning-border);
-}
-
-.owo-select__trigger:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.owo-select__placeholder {
-  color: var(--owo-cmp-text-muted);
-}
-
-.owo-select__chevron {
-  color: var(--owo-cmp-text-muted);
-}
-
-.owo-select__dropdown {
-  background: var(--owo-cmp-surface-bg-raised);
-  --tw-ring-color: var(--owo-cmp-surface-border);
-  box-shadow: var(--select-dropdown-shadow);
-}
-
-.owo-select__option[data-focused] {
-  background: var(--owo-cmp-surface-bg-inset);
-}
-
-.owo-select__option[data-selected] {
-  color: var(--owo-cmp-accent-bg);
-  font-weight: 500;
-}

package/src/styles/ui/skeleton.css

@@ -1,99 +0,0 @@
-.owo-skeleton {
-  --_owo-skeleton-scan-duration: 3.6s;
-  position: relative;
-  overflow: hidden;
-  background: var(--skeleton-bg);
-  box-shadow: inset 0 1px 0 var(--skeleton-top-highlight);
-  transform: translateZ(0);
-}
-
-.owo-skeleton[data-tone='emphasis'] {
-  background: var(--skeleton-bg-emphasis);
-}
-
-.owo-skeleton::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: inherit;
-  opacity: 0.84;
-}
-
-.owo-skeleton::after {
-  content: "";
-  position: absolute;
-  inset: -35%;
-  background: var(--skeleton-sheen);
-  transform: translateX(-140%) skewX(-14deg);
-  opacity: 0;
-  will-change: transform, opacity;
-}
-
-.owo-skeleton[data-animation='pulse']::after {
-  display: none;
-}
-
-.owo-skeleton[data-animation='pulse']::before {
-  animation: owo-skeleton-breathe 2.6s var(--owo-cmp-motion-ease-standard) infinite;
-}
-
-.owo-skeleton[data-animation='scan']::before {
-  opacity: 1;
-  filter: none;
-}
-
-.owo-skeleton[data-animation='scan']::after {
-  opacity: 1;
-  animation: owo-skeleton-scan var(--_owo-skeleton-scan-duration) cubic-bezier(0.3, 0, 0.2, 1) infinite;
-}
-
-@keyframes owo-skeleton-breathe {
-  0%,
-  100% {
-    opacity: 0.8;
-    filter: saturate(0.96) brightness(0.98);
-  }
-
-  50% {
-    opacity: 1;
-    filter: saturate(1.04) brightness(1.04);
-  }
-}
-
-@keyframes owo-skeleton-scan {
-  0% {
-    transform: translateX(-140%) skewX(-14deg);
-    opacity: 0;
-  }
-
-  18% {
-    opacity: 0.82;
-  }
-
-  52% {
-    transform: translateX(6%) skewX(-14deg);
-    opacity: 1;
-  }
-
-  82% {
-    opacity: 0.82;
-  }
-
-  100% {
-    transform: translateX(140%) skewX(-14deg);
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .owo-skeleton::before {
-    animation: none;
-    opacity: 0.94;
-    filter: none;
-  }
-
-  .owo-skeleton::after {
-    animation: none;
-    opacity: 0;
-  }
-}

package/src/styles/ui/status-notice.css

@@ -1,49 +0,0 @@
-.owo-status-notice {
-  --status-notice-bg: var(--feedback-neutral-bg);
-  --status-notice-border: var(--feedback-neutral-border);
-  --status-notice-text: var(--feedback-neutral-text);
-  --status-notice-icon: var(--feedback-neutral-icon);
-  background: var(--status-notice-bg);
-  border-color: var(--status-notice-border);
-  color: var(--status-notice-text);
-}
-
-.owo-status-notice__icon {
-  color: var(--status-notice-icon);
-}
-
-.owo-status-notice__title {
-  color: var(--owo-cmp-text-primary);
-}
-
-.owo-status-notice[data-layout="vertical"] .owo-status-notice__title {
-  color: var(--status-notice-text);
-}
-
-.owo-status-notice[data-tone="info"] {
-  --status-notice-bg: var(--feedback-info-bg);
-  --status-notice-border: var(--feedback-info-border);
-  --status-notice-text: var(--feedback-info-text);
-  --status-notice-icon: var(--feedback-info-icon);
-}
-
-.owo-status-notice[data-tone="success"] {
-  --status-notice-bg: var(--feedback-success-bg);
-  --status-notice-border: var(--feedback-success-border);
-  --status-notice-text: var(--feedback-success-text);
-  --status-notice-icon: var(--feedback-success-icon);
-}
-
-.owo-status-notice[data-tone="warning"] {
-  --status-notice-bg: var(--feedback-warning-bg);
-  --status-notice-border: var(--feedback-warning-border);
-  --status-notice-text: var(--feedback-warning-text);
-  --status-notice-icon: var(--feedback-warning-icon);
-}
-
-.owo-status-notice[data-tone="danger"] {
-  --status-notice-bg: var(--feedback-danger-bg);
-  --status-notice-border: var(--feedback-danger-border);
-  --status-notice-text: var(--feedback-danger-text);
-  --status-notice-icon: var(--feedback-danger-icon);
-}

package/src/styles/ui/switch.css

@@ -1,17 +0,0 @@
-.owo-switch {
-  background: var(--owo-cmp-surface-border-strong);
-  --tw-ring-color: var(--owo-cmp-control-focus-ring);
-  --tw-ring-offset-color: var(--owo-cmp-surface-bg);
-}
-
-.owo-switch[aria-checked="true"] {
-  background: var(--owo-cmp-accent-bg);
-}
-
-.owo-switch:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--owo-cmp-surface-border-strong) 82%, var(--owo-cmp-text-muted));
-}
-
-.owo-switch[aria-checked="true"]:hover:not(:disabled) {
-  background: var(--owo-cmp-accent-bg-hover);
-}

package/src/styles/ui/tabs.css

@@ -1,33 +0,0 @@
-.owo-tabs__list {
-  --tabs-border: var(--owo-cmp-surface-border);
-  border-color: var(--tabs-border);
-}
-
-.owo-tabs__trigger {
-  --tabs-text: var(--owo-cmp-text-muted);
-  --tabs-hover-text: var(--owo-cmp-text-secondary);
-  --tabs-active-text: var(--owo-cmp-text-primary);
-  --tabs-active-border: var(--owo-cmp-accent-border);
-  --tabs-active-bg: color-mix(in srgb, var(--owo-cmp-accent-bg-muted) 35%, transparent);
-  --tabs-ring: var(--owo-cmp-control-focus-ring);
-  border-bottom-color: transparent;
-  color: var(--tabs-text);
-}
-
-.owo-tabs__trigger:hover {
-  color: var(--tabs-hover-text);
-}
-
-.owo-tabs__trigger[data-state="active"] {
-  background: var(--tabs-active-bg);
-  border-bottom-color: var(--tabs-active-border);
-  color: var(--tabs-active-text);
-}
-
-.owo-tabs__trigger:focus-visible {
-  --tw-ring-color: var(--tabs-ring);
-}
-
-.owo-tabs__content {
-  color: var(--owo-cmp-text-primary);
-}

package/src/styles/ui/textarea.css

@@ -1,8 +0,0 @@
-.owo-textarea {
-  min-height: calc(1.5em * 3 + 1rem);
-  line-height: 1.5;
-}
-
-.owo-textarea[data-auto-resize="true"] {
-  overflow-y: hidden;
-}

package/src/styles/ui/toast.css

@@ -1,57 +0,0 @@
-.owo-toast {
-  --toast-bg: var(--feedback-neutral-bg);
-  --toast-border: var(--feedback-neutral-border);
-  --toast-text: var(--feedback-neutral-text);
-  --toast-icon: var(--feedback-neutral-icon);
-  background: var(--toast-bg);
-  border-color: var(--toast-border);
-  color: var(--toast-text);
-  box-shadow: var(--toast-shadow, var(--owo-cmp-surface-shadow-strong));
-}
-
-.owo-toast__icon {
-  color: var(--toast-icon);
-}
-
-.owo-toast__title {
-  color: inherit;
-}
-
-.owo-toast[data-tone="success"] {
-  --toast-bg: var(--feedback-success-bg);
-  --toast-border: var(--feedback-success-border);
-  --toast-text: var(--feedback-success-text);
-  --toast-icon: var(--feedback-success-icon);
-}
-
-.owo-toast[data-tone="warning"] {
-  --toast-bg: var(--feedback-warning-bg);
-  --toast-border: var(--feedback-warning-border);
-  --toast-text: var(--feedback-warning-text);
-  --toast-icon: var(--feedback-warning-icon);
-}
-
-.owo-toast[data-tone="danger"] {
-  --toast-bg: var(--feedback-danger-bg);
-  --toast-border: var(--feedback-danger-border);
-  --toast-text: var(--feedback-danger-text);
-  --toast-icon: var(--feedback-danger-icon);
-}
-
-.owo-toast[data-tone="info"] {
-  --toast-bg: var(--feedback-info-bg);
-  --toast-border: var(--feedback-info-border);
-  --toast-text: var(--feedback-info-text);
-  --toast-icon: var(--feedback-info-icon);
-}
-
-@keyframes toast-in {
-  from {
-    opacity: 0;
-    transform: translateY(8px) scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}

package/src/styles/ui/tooltip.css

@@ -1,31 +0,0 @@
-.owo-tooltip {
-  --tooltip-bg: var(--owo-cmp-surface-bg-raised);
-  --tooltip-border: var(--owo-cmp-surface-border);
-  --tooltip-text: var(--owo-cmp-text-primary);
-  --tooltip-arrow-color: var(--tooltip-bg);
-  background: var(--tooltip-bg);
-  color: var(--tooltip-text);
-  border: 1px solid var(--tooltip-border);
-  box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--tooltip-border) 55%, transparent),
-    var(--tooltip-shadow);
-  backdrop-filter: blur(10px);
-}
-
-.owo-tooltip__arrow {
-  color: var(--tooltip-arrow-color);
-  filter:
-    drop-shadow(0 1px 0 var(--tooltip-border))
-    drop-shadow(0 0 0.5px color-mix(in srgb, var(--tooltip-border) 55%, transparent));
-}
-
-@keyframes tooltip-in {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}

package/src/tokens.css

@@ -1 +0,0 @@
-@import "./styles/tokens.css";