@mt-gloss/styles 0.0.3

package/README.md

@@ -0,0 +1,23 @@
+# @mt-gloss/styles
+
+SCSS mixins, base styles, and component styles for MarketTime UI components.
+
+## Install
+
+```bash
+npm install @mt-gloss/styles @mt-gloss/tokens
+```
+
+## Peer Dependencies
+
+- @mt-gloss/tokens ^0.1.0
+
+## Usage
+
+Import in your SCSS:
+
+```scss
+@use '@mt-gloss/styles/src/index' as *;
+```
+
+Or configure your Vite/webpack SCSS preprocessor to load the entry point.

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@mt-gloss/styles",
+  "version": "0.0.3",
+  "type": "module",
+  "files": [
+    "src/**/*.scss"
+  ],
+  "sideEffects": [
+    "**/*.scss"
+  ],
+  "peerDependencies": {
+    "@mt-gloss/tokens": ">=0.0.1"
+  }
+}

package/src/index.scss

@@ -0,0 +1,35 @@
+// ============================================
+// GLOSS UI KIT v4.4 — MAIN ENTRY POINT
+// ============================================
+
+// Foundations
+@use '../../tokens/src/tokens' as *;
+@use './lib/mixins' as *;
+@use '../../tokens/src/root';
+@forward '../../tokens/src/tokens';
+@forward './lib/mixins';
+@forward './lib/base';
+
+// Components
+@forward './lib/components/buttons';
+@forward './lib/components/inputs';
+@forward './lib/components/cards';
+@forward './lib/components/dropdowns';
+@forward './lib/components/select';
+@forward './lib/components/selection';
+@forward './lib/components/feedback';
+@forward './lib/components/async';
+@forward './lib/components/accordion';
+@forward './lib/components/tooltip';
+@forward './lib/components/textarea';
+@forward './lib/components/animations';
+@forward './lib/components/form';
+@forward './lib/components/links';
+@forward './lib/components/segmented-control';
+@forward './lib/components/slider';
+@forward './lib/components/composed-inputs';
+@forward './lib/components/datepicker';
+@forward './lib/components/specialized';
+@forward './lib/components/badge';
+@forward './lib/components/chips';
+@forward './lib/components/menu';

package/src/lib/_base.scss

@@ -0,0 +1,27 @@
+// ============================================
+// GLOSS UI KIT v4.4 — BASE & RESET
+// ============================================
+
+@use '../../../tokens/src/tokens' as *;
+
+// Google Fonts
+@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+// --- RESET ---
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+  font-size: 16px;
+}
+
+body {
+  font-family: $font-body;
+  background: $alias-bg-page;
+  color: $alias-text-primary;
+  line-height: 1.5;
+}

package/src/lib/_dashboard-bridge.scss

@@ -0,0 +1,93 @@
+@use '../../../tokens/src/tokens' as *;
+
+// ============================================
+// DASHBOARD TOKEN BRIDGE
+// ============================================
+// Maps CSS custom properties used by dashboard components
+// to gloss-styles token values (or hardcoded dashboard originals).
+//
+// Usage: @import '@mt-gloss/styles/dashboard-bridge';
+//   or:  @use './dashboard-bridge';
+//
+// Dashboard components use var(--token, fallback) inline.
+// This bridge provides the canonical values.
+// Components degrade gracefully without it via their fallbacks.
+//
+// Token audit:
+//   ~30 tokens map directly to gloss-styles SCSS variables
+//   ~20 tokens are net-new (marked /* NEW */) — candidates for
+//   future absorption into the core token system
+// ============================================
+
+:root {
+  // ---- Color: Interactive ----
+  --color-interactive: #4f46e5;                         /* NOTE: dashboard indigo-600, differs from $alias-primary (#2563eb blue-600) */
+  --color-interactive-pressed: #4338ca;                  /* NOTE: dashboard indigo-700, differs from $alias-primary-active (#1e40af blue-800) */
+
+  // ---- Color: Semantic ----
+  --color-positive: #{$color-green-500};                 /* maps to: $color-green-500 (#22c55e) */
+  --color-negative: #{$color-red-500};                   /* maps to: $color-red-500 (#ef4444) */
+  --color-warning: #{$color-amber-500};                  /* maps to: $color-amber-500 (#f59e0b) */
+
+  // ---- Color: Text (5) ----
+  --color-text-primary: #{$color-gray-700};              /* maps to: $color-gray-700 (#374151) */
+  --color-text-secondary: #{$color-gray-500};            /* maps to: $color-gray-500 (#6b7280) */
+  --color-text-strong: #{$color-gray-900};               /* maps to: $color-gray-900 (#111827) */
+  --color-text-muted: #{$color-gray-400};                /* maps to: $color-gray-400 (#9ca3af) */
+  --color-text-placeholder: #{$color-gray-300};          /* maps to: $color-gray-300 (#d1d5db) */
+
+  // ---- Color: Surface (3) ----
+  --color-surface-primary: #{$color-white};              /* maps to: $color-white (#ffffff) */
+  --color-surface-secondary: #{$color-gray-50};          /* maps to: $color-gray-50 (#f9fafb) */
+  --color-surface-tertiary: #{$color-gray-100};          /* maps to: $color-gray-100 (#f3f4f6) */
+
+  // ---- Color: Border (2) ----
+  --color-border-subtle: #{$color-gray-200};             /* maps to: $color-gray-200 (#e5e7eb) */
+  --color-border-default: #{$color-gray-300};            /* maps to: $color-gray-300 (#d1d5db) */
+
+  // ---- Color: Overlay (4) ----
+  --overlay-light: rgba(0, 0, 0, 0.04);                 /* NEW: no gloss-styles equivalent */
+  --overlay-subtle: rgba(0, 0, 0, 0.06);                /* NEW: no gloss-styles equivalent */
+  --overlay-border-light: rgba(0, 0, 0, 0.05);          /* NEW: no gloss-styles equivalent */
+  --card-border: 1px solid rgba(0, 0, 0, 0.08);         /* NEW: no gloss-styles equivalent */
+
+  // ---- Typography (9) ----
+  --font-sans: #{$font-body};                            /* maps to: $font-body ('Plus Jakarta Sans', sans-serif) */
+  --font-chrome: #{$font-body};                          /* maps to: $font-body */
+  --font-medium: 500;                                    /* NEW: no gloss-styles equivalent (font weight) */
+  --font-normal: 400;                                    /* NEW: no gloss-styles equivalent (font weight) */
+  --text-xs: #{$text-xs};                                /* maps to: $text-xs (0.6875rem) */
+  --text-sm: #{$text-sm};                                /* maps to: $text-sm (0.8125rem) */
+  --text-base: #{$text-base};                            /* maps to: $text-base (0.9375rem) */
+  --tracking-tight: -0.01em;                             /* NEW: no gloss-styles equivalent (letter-spacing) */
+  --tracking-wider: 0.05em;                              /* NEW: no gloss-styles equivalent (letter-spacing) */
+
+  // ---- Shadow (2) ----
+  --shadow-card: #{$shadow-card};                        /* maps to: $shadow-card */
+  --shadow-card-hover: #{$shadow-elevation-hover};       /* maps to: $shadow-elevation-hover */
+
+  // ---- Radius (2) ----
+  --radius-lg: 12px;                                     /* NOTE: dashboard original 12px, differs from $radius-lg (14px) */
+  --radius-sm: #{$radius-xs};                            /* maps to: $radius-xs (4px) — NOTE: name mismatch, dashboard --radius-sm = gloss $radius-xs */
+
+  // ---- Skeleton (7) ----
+  --skeleton-base: #{$color-gray-200};                   /* maps to: $color-gray-200 (#e5e7eb) */
+  --skeleton-header-base: #{$color-gray-300};            /* maps to: $color-gray-300 (#d1d5db) */
+  --skeleton-radius: #{$radius-sm};                      /* maps to: $radius-sm (6px) */
+  --skeleton-breathe-duration: 2s;                       /* NEW: no gloss-styles equivalent (animation) */
+  --skeleton-fade-duration: 150ms;                       /* NEW: no gloss-styles equivalent (animation) */
+  --skeleton-progress-height: 2px;                       /* NEW: no gloss-styles equivalent */
+  --skeleton-progress-color: var(--color-interactive);   /* NEW: references --color-interactive above */
+
+  // ---- Table (2) ----
+  --table-row-divider: #{$color-gray-100};               /* maps to: $color-gray-100 (#f3f4f6) */
+  --table-row-hover-bg: rgba(0, 0, 0, 0.02);            /* NEW: no gloss-styles equivalent */
+
+  // ---- Chip (6) ----
+  --chip-bg: rgba(0, 0, 0, 0.08);                       /* NEW: no gloss-styles equivalent */
+  --chip-bg-hover: rgba(0, 0, 0, 0.12);                 /* NEW: no gloss-styles equivalent */
+  --chip-text: rgba(0, 0, 0, 0.87);                     /* NEW: no gloss-styles equivalent */
+  --chip-radius: 16px;                                   /* NOTE: dashboard original 16px, differs from $radius-full (9999px) */
+  --chip-height: 28px;                                   /* NEW: no gloss-styles equivalent */
+  --chip-padding-x: 10px;                                /* NEW: no gloss-styles equivalent */
+}

package/src/lib/_mixins.scss

@@ -0,0 +1,80 @@
+// ============================================
+// GLOSS UI KIT v4.4 — MIXINS
+// ============================================
+
+@use '../../../tokens/src/tokens' as *;
+
+// --- TRANSITION CHOREOGRAPHY ---
+// These mixins define the specific timing and delays that create
+// the "choreographed motion" effect where borders react instantly
+// and shadows follow with a slight delay
+
+@mixin input-transition-hover {
+  transition: border-color 0.1s ease-out, box-shadow 0.1s ease-out, background 0.2s ease;
+}
+
+@mixin input-transition-focus {
+  transition: border-color 0.1s ease-out, box-shadow 0.2s ease-out 0.1s, background 0.2s ease;
+}
+
+@mixin input-transition-default {
+  transition: 
+    border-color 0.2s ease-out 0.1s,
+    box-shadow 0.1s ease-out,
+    background 0.2s ease;
+}
+
+@mixin button-transition {
+  transition: transform 200ms ease-out, box-shadow 200ms ease-out, background 100ms;
+}
+
+// --- PHYSICS (SHADOW MIXINS) ---
+// Apply consistent shadow patterns for depth hierarchy
+
+@mixin shadow-input-default {
+  box-shadow: $shadow-input-default;
+}
+
+@mixin shadow-input-focus {
+  box-shadow: $shadow-input-focus;
+}
+
+@mixin shadow-elevation-hover {
+  box-shadow: $shadow-elevation-hover;
+}
+
+@mixin shadow-button-default {
+  box-shadow: $shadow-button-default;
+}
+
+@mixin shadow-button-hover {
+  box-shadow: $shadow-button-hover;
+}
+
+@mixin shadow-button-active {
+  box-shadow: $shadow-button-active;
+}
+
+@mixin shadow-card {
+  box-shadow: $shadow-card;
+}
+
+// --- KEYFRAME ANIMATIONS ---
+@keyframes spinner {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideDownFade {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes dash-rotate {
+  0% { stroke-dashoffset: 400; }
+  100% { stroke-dashoffset: 0; }
+}

package/src/lib/_tokens.scss

@@ -0,0 +1,4 @@
+// Token forwarder — canonical source is now libs/tokens/src/_tokens.scss
+// This file exists so component SCSS files within gloss-styles can continue
+// to @use './tokens' or @use '../tokens' without path changes.
+@forward '../../../tokens/src/tokens';

package/src/lib/components/_accordion.scss

@@ -0,0 +1,236 @@
+// ============================================
+// COMPONENT: ACCORDION / DETAILS
+// ============================================
+
+@use '../tokens' as *;
+@use '../mixins' as *;
+
+.gloss-details {
+  margin-bottom: $space-4;
+  background: $alias-bg-surface;
+  border: 1px solid $alias-border-default;
+  border-radius: $radius-lg;
+  overflow: hidden;
+  transition: all 0.2s;
+
+  &[open] {
+    box-shadow: $shadow-card;
+    border-color: $color-blue-200;
+
+    .gloss-details__summary {
+      color: $alias-primary;
+      background: $alias-bg-muted;
+      border-bottom: 1px solid $alias-border-default;
+
+      &::after {
+        content: '−';
+      }
+    }
+  }
+}
+
+.gloss-details__summary {
+  padding: $space-4 $space-6;
+  cursor: pointer;
+  list-style: none;
+  font-family: $font-display;
+  font-size: $text-lg;
+  color: $alias-text-primary;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::after {
+    content: '+';
+    font-family: $font-body;
+    font-weight: 400;
+    font-size: 1.5rem;
+    color: $alias-text-tertiary;
+  }
+}
+
+.gloss-details__content {
+  padding: $space-6;
+  display: flex;
+  gap: $space-6;
+  align-items: flex-start;
+}
+
+// ============================================
+// REACT ACCORDION COMPONENT
+// ============================================
+
+// Animation variables
+$accordion-duration: 200ms;
+$accordion-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275); // Spring easing
+$accordion-easing-out: cubic-bezier(0, 0, 0.2, 1);
+
+// --- ACCORDION CONTAINER ---
+.gloss-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: $space-1;
+}
+
+// --- ACCORDION ITEM ---
+.gloss-accordion-item {
+  display: flex;
+  flex-direction: column;
+
+  &--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+// --- ACCORDION TRIGGER ---
+.gloss-accordion-trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: $space-3 $space-4;
+  background: transparent;
+  border: none;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  font-family: $font-body;
+  font-size: $text-sm;
+  font-weight: 600;
+  color: $alias-text-primary;
+  text-align: left;
+  transition:
+    background-color 150ms $accordion-easing-out,
+    transform 100ms $accordion-easing;
+
+  &:hover:not(:disabled) {
+    background-color: $color-gray-50;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $alias-border-focus;
+    outline-offset: 2px;
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  // Icon slot (left)
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: $space-3;
+    color: $alias-text-secondary;
+    flex-shrink: 0;
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  // Label
+  &__label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Right-aligned container (count or chevron)
+  &__end {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
+  // Count badge
+  &__count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 $space-2;
+    background: $color-gray-800;
+    color: $color-white;
+    font-size: $text-xs;
+    font-weight: 600;
+    border-radius: $radius-full;
+    animation: accordion-count-in 150ms $accordion-easing-out forwards;
+  }
+
+  // Chevron icon
+  &__chevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $alias-text-secondary;
+    transition: transform $accordion-duration $accordion-easing-out;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+// --- ACCORDION CONTENT ---
+.gloss-accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows $accordion-duration $accordion-easing,
+    opacity 150ms $accordion-easing-out;
+
+  &--expanded {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+
+  &__inner {
+    overflow: hidden;
+  }
+}
+
+// --- OPEN STATE MODIFIERS ---
+.gloss-accordion-item--open {
+  .gloss-accordion-trigger__chevron {
+    transform: rotate(0deg);
+  }
+}
+
+// --- ANIMATION KEYFRAMES ---
+@keyframes accordion-count-in {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// --- REDUCED MOTION ---
+@media (prefers-reduced-motion: reduce) {
+  .gloss-accordion-trigger,
+  .gloss-accordion-trigger__chevron,
+  .gloss-accordion-content {
+    transition-duration: 0.01ms !important;
+  }
+}