@synetics/ui 0.7.0-alpha

package/src/styles/showcase.css

@@ -0,0 +1,653 @@
+/**
+ * Showcase Shell & Component Classes
+ * Uses design-system.css tokens — no hardcoded colors.
+ * Dynamic accents via CSS custom properties (--section-accent, --nav-accent).
+ */
+/* ── App Shell ───────────────────────────────────────────── */
+.app-shell {
+  min-height: 100vh;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  display: flex;
+}
+
+.app-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  /* margin-left handled by inline reactive style */
+}
+
+/* ── App Header ──────────────────────────────────────────── */
+.app-header {
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  padding: 0 var(--spacing-xl);
+  height: var(--header-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  flex-shrink: 0;
+}
+
+.app-header__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.app-header__logo {
+  margin: 0;
+  color: var(--color-primary-500);
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: -0.02em;
+}
+
+.app-header__subtitle {
+  color: var(--color-text-subtle);
+  font-size: var(--font-size-sm);
+}
+
+.app-header__badge {
+  background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
+  color: white;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  padding: 2px 8px;
+  border-radius: var(--radius-full);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.app-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+/* ── Theme Toggle ────────────────────────────────────────── */
+.theme-toggle {
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text-muted);
+  width: 38px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 16px;
+  transition: border-color var(--transition-fast),
+    color var(--transition-fast),
+    background var(--transition-fast);
+}
+
+.theme-toggle:hover {
+  border-color: var(--color-primary-500);
+  background: rgba(59, 130, 246, 0.08);
+}
+
+/* ── App Footer ──────────────────────────────────────────── */
+.app-footer {
+  border-top: 1px solid var(--color-border);
+  padding: var(--spacing-md) var(--spacing-2xl);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--color-text-subtle);
+  font-size: var(--font-size-xs);
+  flex-shrink: 0;
+}
+
+.app-footer__links {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+}
+
+.app-footer a {
+  color: var(--color-text-muted);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+.app-footer a:hover {
+  color: var(--color-primary-500);
+}
+
+/* ── Main content area ───────────────────────────────────── */
+.app-main {
+  flex: 1;
+  padding: var(--spacing-2xl);
+}
+
+/* ── Sidebar ─────────────────────────────────────────────── */
+/* Layout (position/width) handled by inline reactive style */
+.sidebar {
+  /* appearance only */
+}
+
+.sidebar__header {
+  padding: 0 var(--spacing-sm) 0 var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--header-height);
+  flex-shrink: 0;
+  gap: var(--spacing-xs);
+  min-height: var(--header-height);
+}
+
+.sidebar__title {
+  margin: 0;
+  color: var(--color-primary-500);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  /* opacity/max-width handled by inline reactive style */
+  overflow: hidden;
+  transition: opacity var(--transition-fast), max-width var(--transition-base);
+}
+
+.sidebar__toggle {
+  background: transparent;
+  border: 1px solid var(--color-primary-500);
+  color: var(--color-primary-500);
+  width: 34px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 13px;
+  flex-shrink: 0;
+  transition: background var(--transition-fast);
+}
+
+.sidebar__toggle:hover {
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.sidebar__nav {
+  overflow-y: auto;
+  flex: 1;
+  padding: var(--spacing-xs);
+}
+
+/* ── Nav Items ───────────────────────────────────────────── */
+.nav-item {
+  width: 100%;
+  padding: var(--spacing-sm);
+  margin-bottom: 2px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-sans);
+  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
+}
+
+.nav-item:hover {
+  background: var(--color-surface-hover);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+.nav-item--active {
+  background: var(--color-surface-hover);
+  border-color: var(--nav-accent, var(--color-primary-500));
+  color: var(--nav-accent, var(--color-primary-500));
+  font-weight: var(--font-weight-semibold);
+}
+
+.nav-item__emoji {
+  font-size: 18px;
+  flex-shrink: 0;
+  line-height: 1;
+  width: 26px;
+  text-align: center;
+}
+
+.nav-item__label {
+  /* visibility handled by inline reactive style */
+}
+
+/* ── Page Header ─────────────────────────────────────────── */
+.page-header {
+  padding: var(--spacing-lg) var(--spacing-xl);
+  background: var(--color-surface);
+  border-radius: var(--radius-xl);
+  margin-bottom: var(--spacing-xl);
+  border-left: 4px solid var(--section-accent, var(--color-primary-500));
+  box-shadow: var(--shadow-sm);
+}
+
+.page-header__title {
+  margin: 0;
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  color: var(--section-accent, var(--color-primary-500));
+}
+
+.page-header__subtitle {
+  margin: var(--spacing-sm) 0 0 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-relaxed);
+}
+
+/* ── Demo Section ────────────────────────────────────────── */
+.demo-section {
+  background: var(--color-surface);
+  padding: var(--spacing-lg);
+  border-radius: var(--radius-xl);
+  margin-bottom: var(--spacing-xl);
+  border-left: 4px solid var(--section-accent, var(--color-primary-500));
+  box-shadow: var(--shadow-sm);
+}
+
+.demo-section__title {
+  margin: 0 0 var(--spacing-xs) 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--section-accent, var(--color-primary-500));
+}
+
+.demo-section__description {
+  color: var(--color-text-muted);
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-relaxed);
+}
+
+.demo-section__content {
+  background: var(--color-background);
+  padding: var(--spacing-md);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+}
+
+/* ── Demo Button ─────────────────────────────────────────── */
+.demo-btn {
+  border: none;
+  border-radius: var(--radius-md);
+  color: white;
+  cursor: pointer;
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-sm);
+  padding: 10px 20px;
+  background: var(--btn-color, var(--color-primary-500));
+  transition: opacity var(--transition-fast), transform var(--transition-fast);
+}
+
+.demo-btn:hover:not(:disabled) {
+  opacity: 0.88;
+  transform: translateY(-1px);
+}
+
+.demo-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.demo-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.demo-btn--sm {
+  padding: 6px 12px;
+  font-size: var(--font-size-xs);
+}
+
+.demo-btn--lg {
+  padding: 14px 28px;
+  font-size: var(--font-size-base);
+}
+
+/* ── Code Block ──────────────────────────────────────────── */
+.code-block {
+  background: var(--color-neutral-950);
+  padding: var(--spacing-md);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  overflow-x: auto;
+}
+
+[data-theme="light"] .code-block {
+  background: var(--color-neutral-50);
+}
+
+.code-block pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+}
+
+/* ── Console Log Viewer ──────────────────────────────────── */
+.console-log {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-neutral-950);
+  overflow: hidden;
+  margin-top: var(--spacing-lg);
+}
+
+[data-theme="light"] .console-log {
+  background: var(--color-neutral-50);
+}
+
+.console-log__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: rgba(148, 163, 184, 0.08);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.console-log__title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+}
+
+.console-log__clear {
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text-muted);
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: var(--font-size-xs);
+  transition: border-color var(--transition-fast), color var(--transition-fast);
+}
+
+.console-log__clear:hover {
+  border-color: var(--color-error-500);
+  color: var(--color-error-500);
+}
+
+.console-log__entries {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  overflow-y: auto;
+}
+
+.console-log__entry {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  padding: 6px var(--spacing-md);
+  border-bottom: 1px solid rgba(148, 163, 184, 0.05);
+  line-height: var(--line-height-relaxed);
+}
+
+.console-log__empty {
+  padding: var(--spacing-md);
+  color: var(--color-text-subtle);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  font-style: italic;
+}
+
+/* ── Forms Demo Utilities ─────────────────────────────────── */
+.demo-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-left: 3px solid var(--color-primary-500);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  color: var(--color-text);
+  margin-bottom: var(--spacing-md);
+}
+
+.demo-title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+  margin-bottom: var(--spacing-xs);
+}
+
+.demo-desc {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  margin-bottom: var(--spacing-md);
+  line-height: var(--line-height-relaxed);
+}
+
+.status-loading {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  padding: var(--spacing-md) 0;
+}
+
+/* Demo banners */
+.demo-banner {
+  padding: .75rem;
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  border: 1px solid;
+  margin-top: .75rem;
+  line-height: var(--line-height-normal);
+}
+
+.demo-banner--success {
+  background: var(--color-success-100);
+  border-color: var(--color-success-300);
+  color: var(--color-success-800);
+}
+
+[data-theme="dark"] .demo-banner--success {
+  background: rgba(34, 197, 94, 0.14);
+  border-color: var(--color-success-700);
+  color: var(--color-success-300);
+}
+
+.demo-banner--error {
+  background: var(--color-error-100);
+  border-color: var(--color-error-300);
+  color: var(--color-error-800);
+}
+
+[data-theme="dark"] .demo-banner--error {
+  background: rgba(239, 68, 68, 0.14);
+  border-color: var(--color-error-700);
+  color: var(--color-error-300);
+}
+
+.demo-banner--warn {
+  background: var(--color-warning-100);
+  border-color: var(--color-warning-300);
+  color: var(--color-warning-800);
+}
+
+[data-theme="dark"] .demo-banner--warn {
+  background: rgba(245, 158, 11, 0.14);
+  border-color: var(--color-warning-700);
+  color: var(--color-warning-300);
+}
+
+.demo-banner--info {
+  background: var(--color-primary-50);
+  border-color: var(--color-primary-200);
+  color: var(--color-primary-800);
+}
+
+[data-theme="dark"] .demo-banner--info {
+  background: rgba(59, 130, 246, 0.12);
+  border-color: var(--color-primary-700);
+  color: var(--color-primary-300);
+}
+
+/* Step indicators */
+.demo-step {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  border: 2px solid var(--color-border);
+  background: var(--color-surface-hover);
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+
+.demo-step--active {
+  background: var(--color-secondary-500);
+  border-color: var(--color-secondary-500);
+  color: #ffffff;
+}
+
+.demo-step--done {
+  background: var(--color-success-500);
+  border-color: var(--color-success-500);
+  color: #ffffff;
+}
+
+/* Data preview box */
+.demo-data-preview {
+  padding: .75rem;
+  background: var(--color-surface-hover);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  margin-bottom: .75rem;
+}
+
+.demo-data-preview__label {
+  display: block;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-muted);
+  margin-bottom: .25rem;
+}
+
+/* Revealed/conditional section */
+.demo-revealed {
+  padding: .75rem;
+  background: var(--color-success-50);
+  border: 1px solid var(--color-success-200);
+  border-radius: var(--radius-md);
+}
+
+[data-theme="dark"] .demo-revealed {
+  background: rgba(34, 197, 94, 0.08);
+  border-color: var(--color-success-800);
+}
+
+.demo-revealed__note {
+  font-size: var(--font-size-xs);
+  color: var(--color-success-700);
+  margin-bottom: .5rem;
+}
+
+[data-theme="dark"] .demo-revealed__note {
+  color: var(--color-success-400);
+}
+
+/* Demo form buttons */
+.btn-demo {
+  padding: 6px 16px;
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  transition: opacity var(--transition-fast), filter var(--transition-fast);
+}
+
+.btn-demo:disabled,
+.btn-demo[disabled] {
+  opacity: 0.45;
+  cursor: default;
+  pointer-events: none;
+}
+
+.btn-demo:not(:disabled):hover {
+  filter: brightness(1.12);
+}
+
+.btn-demo--primary {
+  background: var(--color-primary-500);
+}
+
+.btn-demo--purple {
+  background: var(--color-secondary-600);
+}
+
+.btn-demo--success {
+  background: var(--color-success-600);
+}
+
+.btn-demo--danger {
+  background: var(--color-error-500);
+}
+
+.btn-demo--neutral {
+  background: var(--color-neutral-500);
+}
+
+.btn-demo--sm {
+  padding: 4px 12px;
+  font-size: var(--font-size-xs);
+}
+
+/* Form field sets: ensure theme-aware label and control colors */
+.form-field-set {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.form-field-set>label,
+.form-field-set>label span {
+  color: var(--color-text);
+}
+
+.form-field-set input,
+.form-field-set select,
+.form-field-set textarea {
+  background-color: var(--color-surface);
+  color: var(--color-text);
+  border-color: var(--color-border);
+}
+
+.form-field-set .field-debug {
+  background: var(--color-surface-hover);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-muted);
+  padding: .25rem .5rem;
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  margin-top: .25rem;
+}

package/src/styles/state-layers.css

@@ -0,0 +1,55 @@
+/**
+ * State Layer System - Material Design 3
+ * 
+ * Provides consistent interaction feedback through opacity overlays
+ * following M3 state layer specifications.
+ */
+:root {
+    /* ==========================================
+   * STATE LAYER OPACITIES (M3 Spec)
+   * ========================================== */
+    --state-hover-opacity: 0.08;
+    --state-focus-opacity: 0.12;
+    --state-pressed-opacity: 0.16;
+    --state-dragged-opacity: 0.16;
+}
+
+/* ==========================================
+ * STATE LAYER BASE
+ * ========================================== */
+.state-layer {
+    position: relative;
+    overflow: hidden;
+}
+
+.state-layer::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: currentColor;
+    opacity: 0;
+    transition: opacity var(--motion-duration-short-2, 100ms) ease;
+    pointer-events: none;
+    z-index: 0;
+}
+
+/* ==========================================
+ * INTERACTION STATES
+ * ========================================== */
+.state-layer:hover::before {
+    opacity: var(--state-hover-opacity);
+}
+
+.state-layer:focus-visible::before {
+    opacity: var(--state-focus-opacity);
+}
+
+.state-layer:active::before {
+    opacity: var(--state-pressed-opacity);
+}
+
+/* Ensure content stays above state layer */
+.state-layer>* {
+    position: relative;
+    z-index: 1;
+}