@owodesign/owoui 0.1.0

package/src/styles/ui/skeleton.css

@@ -0,0 +1,99 @@
+.ui-skeleton {
+  --ui-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);
+}
+
+.ui-skeleton[data-tone='emphasis'] {
+  background: var(--skeleton-bg-emphasis);
+}
+
+.ui-skeleton::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: inherit;
+  opacity: 0.84;
+}
+
+.ui-skeleton::after {
+  content: "";
+  position: absolute;
+  inset: -35%;
+  background: var(--skeleton-sheen);
+  transform: translateX(-140%) skewX(-14deg);
+  opacity: 0;
+  will-change: transform, opacity;
+}
+
+.ui-skeleton[data-animation='pulse']::after {
+  display: none;
+}
+
+.ui-skeleton[data-animation='pulse']::before {
+  animation: ui-skeleton-breathe 2.6s var(--ease-standard) infinite;
+}
+
+.ui-skeleton[data-animation='scan']::before {
+  opacity: 1;
+  filter: none;
+}
+
+.ui-skeleton[data-animation='scan']::after {
+  opacity: 1;
+  animation: ui-skeleton-scan var(--ui-skeleton-scan-duration) cubic-bezier(0.3, 0, 0.2, 1) infinite;
+}
+
+@keyframes ui-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 ui-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) {
+  .ui-skeleton::before {
+    animation: none;
+    opacity: 0.94;
+    filter: none;
+  }
+
+  .ui-skeleton::after {
+    animation: none;
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,41 @@
+.ui-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);
+}
+
+.ui-status-notice__icon {
+  color: var(--status-notice-icon);
+}
+
+.ui-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);
+}
+
+.ui-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);
+}
+
+.ui-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);
+}
+
+.ui-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

@@ -0,0 +1,17 @@
+.ui-switch {
+  background: var(--color-n400);
+  --tw-ring-color: var(--ui-control-focus-ring);
+  --tw-ring-offset-color: var(--ui-surface-bg);
+}
+
+.ui-switch[aria-checked="true"] {
+  background: var(--ui-accent-bg);
+}
+
+.ui-switch:hover:not(:disabled) {
+  background: var(--color-n500);
+}
+
+.ui-switch[aria-checked="true"]:hover:not(:disabled) {
+  background: var(--ui-accent-bg-hover);
+}

package/src/styles/ui/toast.css

@@ -0,0 +1,57 @@
+.ui-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(--ui-surface-shadow-strong));
+}
+
+.ui-toast__icon {
+  color: var(--toast-icon);
+}
+
+.ui-toast__title {
+  color: inherit;
+}
+
+.ui-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);
+}
+
+.ui-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);
+}
+
+.ui-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);
+}
+
+.ui-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

@@ -0,0 +1,26 @@
+.ui-tooltip {
+  --tooltip-bg: var(--ui-surface-bg-raised);
+  --tooltip-border: var(--ui-surface-border);
+  --tooltip-text: var(--ui-text-primary);
+  --tooltip-arrow-color: var(--tooltip-bg);
+  background: var(--tooltip-bg);
+  color: var(--tooltip-text);
+  border: 1px solid var(--tooltip-border);
+  box-shadow: var(--tooltip-shadow);
+}
+
+.ui-tooltip__arrow {
+  color: var(--tooltip-arrow-color);
+  filter: drop-shadow(0 1px 0 var(--tooltip-border));
+}
+
+@keyframes tooltip-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/src/tokens.css

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