@tangible/ui 0.0.1

package/styles/index.scss

@@ -0,0 +1,71 @@
+@use "./system" as sys with (
+  $prefix: tui-
+);
+@use "./components" as components;
+@use "./utilities" as utilities;
+
+@layer resets, defaults, components, utilities;
+
+@include sys.emit-color-roles(sys.$prefix);
+@include sys.emit-color-roles-dark(sys.$prefix);
+@include sys.emit-color-roles-auto(sys.$prefix);
+
+.#{sys.$prefix}interface {
+  --#{sys.$prefix}spacing-base: 4px;
+  @include sys.emit-spacing-primitives(#{sys.$prefix});
+  @include sys.emit-spacing-aliases(#{sys.$prefix});
+
+  --#{sys.$prefix}fontSize-multiplier: calc(1rem / 16);
+  @include sys.emit-fontsize-aliases(#{sys.$prefix});
+
+  --#{sys.$prefix}palette-color-white: #fff;
+  --#{sys.$prefix}palette-color-black: #000;
+  
+  @include sys.emit-scale-vars(sys.$prefix, sys.$radius, sys.$font);
+
+  --#{sys.$prefix}typography-size: var(--#{sys.$prefix}font-size-base);
+  --#{sys.$prefix}typography-line-height: 1.4;
+  --#{sys.$prefix}typography-font-family: inherit;
+  --#{sys.$prefix}typography-color-base: currentColor;
+  --#{sys.$prefix}typography-color-contrast-high: var(--#{sys.$prefix}color-fg);
+  --#{sys.$prefix}typography-color-contrast-low: var(--#{sys.$prefix}color-fg-muted);
+  --#{sys.$prefix}typography-color-headings: var(--#{sys.$prefix}color-fg);
+
+  --#{sys.$prefix}shadow-color: 0, 0, 0;
+  --#{sys.$prefix}shadow-xs: 0 1px 2px rgba(var(--#{sys.$prefix}shadow-color), 0.05);
+  --#{sys.$prefix}shadow-sm: 0 1px 3px rgba(var(--#{sys.$prefix}shadow-color), 0.1),
+                    0 1px 2px rgba(var(--#{sys.$prefix}shadow-color), 0.06);
+  --#{sys.$prefix}shadow-md: 0 4px 6px rgba(var(--#{sys.$prefix}shadow-color), 0.1),
+                    0 2px 4px rgba(var(--#{sys.$prefix}shadow-color), 0.06);
+  --#{sys.$prefix}shadow-lg: 0 10px 15px rgba(var(--#{sys.$prefix}shadow-color), 0.1),
+                    0 4px 6px rgba(var(--#{sys.$prefix}shadow-color), 0.05);
+}
+@layer resets {
+  .#{sys.$prefix}interface {
+    font-size: var(--#{sys.$prefix}typography-size);
+    line-height: var(--#{sys.$prefix}typography-line-height);
+    // Inherit host color by default for light mode integration.
+    // When data-theme is set, take over color scheme entirely.
+    color: inherit;
+
+    &[data-theme] {
+      color: var(--#{sys.$prefix}color-fg);
+    }
+
+    // Button element reset — kill common theme button styling
+    button,
+    [type="button"],
+    [type="submit"],
+    [type="reset"] {
+      box-shadow: none;
+      text-transform: none;
+      letter-spacing: normal;
+    }
+  }
+}
+
+@layer components { @include components.bundle(); }
+@layer utilities  { @include utilities.bundle(); }
+
+// Shared keyframes (must be outside layers for browser compatibility)
+@include sys.keyframes();

package/styles/system/_constants.scss

@@ -0,0 +1,12 @@
+// =============================================================================
+// SCSS Constants
+//
+// IMPORTANT: Keep in sync with src/constants.ts (TS source of truth).
+// If you change $prefix here, update PREFIX in constants.ts.
+// =============================================================================
+
+$prefix: tui- !default;
+$container-name: tuiContainer !default;
+$radius: (xs: 2px, sm: 4px, md: 8px, lg: 12px) !default;
+$space : (1: .25rem, 2: .5rem, 3: .75rem, 4: 1rem) !default;
+$font  : (base-size: 16px, line: 1.5) !default;

package/styles/system/_motion.scss

@@ -0,0 +1,47 @@
+// =============================================================================
+// Motion / Animation
+// =============================================================================
+//
+// Shared keyframes and animation utilities.
+// Components should @use this module to access animations.
+//
+// =============================================================================
+
+@use "./constants" as c;
+
+// -----------------------------------------------------------------------------
+// Keyframes
+// -----------------------------------------------------------------------------
+
+/// Continuous rotation - used for loading spinners
+@mixin keyframes() {
+  @keyframes #{c.$prefix}spin {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}
+
+@keyframes #{c.$prefix}fadeFromOpaque {
+  from {
+    opacity: 1;
+  }
+}
+
+@keyframes #{c.$prefix}fadeToOpaque {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes #{c.$prefix}fadeFromTransparent {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes #{c.$prefix}fadeToTransparent {
+  to {
+    opacity: 0;
+  }
+}

package/styles/system/_palette-fns.scss

@@ -0,0 +1,10 @@
+@use "sass:map";
+@use "./_palettes.scss" as palettes;
+
+@function tone($hue, $tier, $p: palettes.$palette) {
+  $scale: map.get($p, $hue);
+  @if $scale == null { @error "Unknown hue `#{$hue}`."; }
+  $value: map.get($scale, $tier);
+  @if $value == null { @error "Unknown tier `#{$tier}` for hue `#{$hue}`."; }
+  @return $value;
+}

package/styles/system/_palettes.scss

@@ -0,0 +1,80 @@
+$palette: (
+  "gray": (
+    25:  #fafafa,
+    50:  #F9FAFB,
+    100: #F3F4F6,
+    200: #E5E7EB,
+    300: #D1D5DB,
+    400: #9CA3AF,
+    500: #6B7280,
+    600: #4B5563,
+    700: #374151,
+    800: #202836,
+    900: #111928,
+  ),
+  "blue": (
+    25:  #e2e9ff,
+    50:  #c7d6ff,
+    100: #a0b5fe,
+    200: #7b93ff,
+    300: #5373f2,
+    400: #3858e9,
+    500: #2942d1,
+    600: #1d35b4,
+    700: #1b2398,
+    800: #101375,
+    900: #090949,
+  ),
+  "green": (
+    25:  #d8f3dc,
+    50:  #b7e7be,
+    100: #68de7c,
+    200: #1ed14b,
+    300: #00ba37,
+    400: #00a32a,
+    500: #008a20,
+    600: #007017,
+    700: #005c12,
+    800: #00450c,
+    900: #003008,
+  ),
+  "purple": (
+    25:  #f9e6ff,
+    50:  #eacaf3,
+    100: #dcb1e7,
+    200: #ce9adb,
+    300: #c184d0,
+    400: #a85fb8,
+    500: #9143a0,
+    600: #7a2f88,
+    700: #652071,
+    800: #4f1659,
+    900: #25082a,
+  ),
+  "red": (
+    25:  #fce3e5,
+    50:  #facfd2,
+    100: #ffabaf,
+    200: #ff8085,
+    300: #f86368,
+    400: #e65054,
+    500: #d63638,
+    600: #b32d2e,
+    700: #8a2424,
+    800: #691c1c,
+    900: #451313,
+  ),
+  "yellow": (
+    25:  #f9f1d2,
+    50:  #f5e6ab,
+    100: #f2d675,
+    200: #f0c33c,
+    300: #dba617,
+    400: #bd8600,
+    500: #996800,
+    600: #755100,
+    700: #614200,
+    800: #4a3200,
+    900: #362400,
+  ),
+) !default;

package/styles/system/_tokens.scss

@@ -0,0 +1,249 @@
+@use "sass:meta";
+@use "sass:map";
+@use "sass:math";
+@use "sass:string";
+@use "./_palette-fns" as pf;
+
+// ----------------------
+// Config
+// ----------------------
+$spacing-multiplier-default: 4 !default;   // 1 step = 4px
+$spacing-steps: 1 2 3 4 5 6 8 10 12 16 20 24 30 40 50 !default;
+
+$font-multiplier-default: 16 !default;            // baseline root px
+$font-steps: 10 12 14 16 18 20 24 28 32 !default; // emitted primitives
+$font-aliases: (xs:12, sm:14, md:16, lg:20, xl:24, xxl:32) !default;
+$brand: 'blue';
+
+// ----------------------
+// Helpers
+// ----------------------
+@function _step($v) { @return if(math.is-unitless($v), $v, $v / 1px); }
+
+@function _px-var($prefix, $ns, $px) {
+  $n: _step($px);
+  @return string.unquote('--' + $prefix + $ns + '-' + $n + 'px');
+}
+@mixin emit-color-roles($prefix:'#{$prefix}', $brand:'blue', $neutral:'gray') {
+  :where(.#{$prefix}interface) {
+    /* ========================
+       PRIMITIVES
+       ======================== */
+
+    /* Motion */
+    --#{$prefix}motion-duration: 200ms;
+    --#{$prefix}motion-timing: ease-in-out;
+
+    /* Opacity */
+    --#{$prefix}opacity-disabled: 0.75;
+    --#{$prefix}opacity-backdrop: 0.5;
+
+    /* Focus Ring (a11y) */
+    --#{$prefix}focus-ring-width: 2px;
+    --#{$prefix}focus-ring-offset: 2px;
+    --#{$prefix}focus-ring-color: #2563eb;
+
+    /* Border */
+    --#{$prefix}border-width: 1px;
+
+    /* Z-Index Layers */
+    --#{$prefix}layer-surface:  0;
+    --#{$prefix}layer-elevated: 2;
+    --#{$prefix}layer-overlay:  100;
+    --#{$prefix}layer-modal:    1000;
+    --#{$prefix}layer-top:      9999;
+
+    /* ========================
+       COLORS
+       ======================== */
+
+    /* Neutral: surfaces */
+    --#{$prefix}color-bg:             #fff;
+    --#{$prefix}color-bg-surface:      #{pf.tone($neutral, 25)};
+    --#{$prefix}color-bg-elevated:    #fff;
+    --#{$prefix}color-bg-inverted:    #{pf.tone($neutral, 900)};
+    --#{$prefix}color-bg-overlay:     rgba(0, 0, 0, var(--#{$prefix}opacity-backdrop));
+
+    /* Neutral: text */
+    --#{$prefix}color-fg:             #{pf.tone($neutral, 900)};
+    --#{$prefix}color-fg-muted:       #{pf.tone($neutral, 500)};
+    --#{$prefix}color-fg-on-accent:   #fff;
+    --#{$prefix}color-fg-inverted:    #{pf.tone($neutral, 25)};
+
+    /* Neutral: borders/dividers */
+    --#{$prefix}color-border:          #{pf.tone($neutral, 200)};
+    --#{$prefix}color-divider:         #{pf.tone($neutral, 100)};
+
+    /* Primary */
+    --#{$prefix}theme-primary-strongest: #{pf.tone('blue', 900)};
+    --#{$prefix}theme-primary-stronger:  #{pf.tone('blue', 700)};
+    --#{$prefix}theme-primary-strong:    #{pf.tone('blue', 600)};
+    --#{$prefix}theme-primary-base:      #{pf.tone('blue', 500)};
+    --#{$prefix}theme-primary-soft:      #{pf.tone('blue', 200)};
+    --#{$prefix}theme-primary-subtle:    #{pf.tone('blue', 50)};
+    --#{$prefix}theme-primary-subtlest:  #{pf.tone('blue', 25)};
+
+    /* Secondary */
+    --#{$prefix}theme-secondary-strongest: #{pf.tone('gray', 900)};
+    --#{$prefix}theme-secondary-stronger:  #{pf.tone('gray', 800)};
+    --#{$prefix}theme-secondary-strong:    #{pf.tone('gray', 700)};
+    --#{$prefix}theme-secondary-base:      #{pf.tone('gray', 500)};
+    --#{$prefix}theme-secondary-soft:      #{pf.tone('gray', 400)};
+    --#{$prefix}theme-secondary-subtle:    #{pf.tone('gray', 200)};
+    --#{$prefix}theme-secondary-subtlest:  #{pf.tone('gray', 100)};
+
+    /* Success */
+    --#{$prefix}theme-success-strongest: #{pf.tone('green', 900)};
+    --#{$prefix}theme-success-stronger:  #{pf.tone('green', 700)};
+    --#{$prefix}theme-success-strong:    #{pf.tone('green', 600)};
+    --#{$prefix}theme-success-base:      #{pf.tone('green', 500)};
+    --#{$prefix}theme-success-soft:      #{pf.tone('green', 300)};
+    --#{$prefix}theme-success-subtle:    #{pf.tone('green', 50)};
+    --#{$prefix}theme-success-subtlest:  #{pf.tone('green', 25)};
+
+    /* Info */
+    --#{$prefix}theme-info-strongest: #{pf.tone('blue', 900)};
+    --#{$prefix}theme-info-stronger:  #{pf.tone('blue', 700)};
+    --#{$prefix}theme-info-strong:    #{pf.tone('blue', 600)};
+    --#{$prefix}theme-info-base:      #{pf.tone('blue', 500)};
+    --#{$prefix}theme-info-soft:      #{pf.tone('blue', 200)};
+    --#{$prefix}theme-info-subtle:    #{pf.tone('blue', 50)};
+    --#{$prefix}theme-info-subtlest:  #{pf.tone('blue', 25)};
+
+    /* Warning */
+    --#{$prefix}theme-warning-strongest: #{pf.tone('yellow', 900)};
+    --#{$prefix}theme-warning-stronger:  #{pf.tone('yellow', 700)};
+    --#{$prefix}theme-warning-strong:    #{pf.tone('yellow', 600)};
+    --#{$prefix}theme-warning-base:      #{pf.tone('yellow', 500)};
+    --#{$prefix}theme-warning-soft:      #{pf.tone('yellow', 300)};
+    --#{$prefix}theme-warning-subtle:    #{pf.tone('yellow', 50)};
+    --#{$prefix}theme-warning-subtlest:  #{pf.tone('yellow', 25)};
+
+    /* Danger */
+    --#{$prefix}theme-danger-strongest: #{pf.tone('red', 900)};
+    --#{$prefix}theme-danger-stronger:  #{pf.tone('red', 700)};
+    --#{$prefix}theme-danger-strong:    #{pf.tone('red', 600)};
+    --#{$prefix}theme-danger-base:      #{pf.tone('red', 500)};
+    --#{$prefix}theme-danger-soft:      #{pf.tone('red', 300)};
+    --#{$prefix}theme-danger-subtle:    #{pf.tone('red', 50)};
+    --#{$prefix}theme-danger-subtlest:  #{pf.tone('red', 25)};
+
+    /* A11y (legacy alias - prefer --focus-ring-color) */
+    --#{$prefix}color-focus-ring: var(--#{$prefix}focus-ring-color);
+  }
+}
+
+// ----------------------
+// Dark Mode
+// ----------------------
+
+// Private: actual dark override declarations
+@mixin _dark-overrides($prefix:'tui-', $brand:'blue', $neutral:'gray') {
+  /* Backgrounds */
+  --#{$prefix}color-bg:             #{pf.tone($neutral, 900)};
+  --#{$prefix}color-bg-surface:     #{pf.tone($neutral, 800)};
+  --#{$prefix}color-bg-elevated:    #{pf.tone($neutral, 700)};
+  --#{$prefix}color-bg-inverted:    #{pf.tone($neutral, 50)};
+  --#{$prefix}color-bg-overlay:     rgba(0, 0, 0, 0.7);
+
+  /* Text */
+  --#{$prefix}color-fg:             #{pf.tone($neutral, 50)};
+  --#{$prefix}color-fg-muted:       #{pf.tone($neutral, 400)};
+  --#{$prefix}color-fg-on-accent:   #fff;
+  --#{$prefix}color-fg-inverted:    #{pf.tone($neutral, 900)};
+
+  /* Borders */
+  --#{$prefix}color-border:         #{pf.tone($neutral, 700)};
+  --#{$prefix}color-divider:        #{pf.tone($neutral, 800)};
+
+  /* Theme colors - adjust for dark mode contrast */
+  --#{$prefix}theme-primary-base:      #{pf.tone($brand, 400)};
+  --#{$prefix}theme-primary-soft:      #{pf.tone($brand, 500)};
+  --#{$prefix}theme-primary-strong:    #{pf.tone($brand, 300)};
+  --#{$prefix}theme-primary-stronger:  #{pf.tone($brand, 200)};
+  --#{$prefix}theme-primary-strongest: #{pf.tone($brand, 100)};
+  --#{$prefix}theme-primary-subtlest:  #{pf.tone($brand, 900)};
+  --#{$prefix}theme-primary-subtle:    #{pf.tone($brand, 800)};
+
+  /* Secondary */
+  --#{$prefix}theme-secondary-subtlest:  #{pf.tone($neutral, 800)};
+  --#{$prefix}theme-secondary-subtle:    #{pf.tone($neutral, 700)};
+  --#{$prefix}theme-secondary-soft:      #{pf.tone($neutral, 600)};
+  --#{$prefix}theme-secondary-strong:    #{pf.tone($neutral, 300)};
+  --#{$prefix}theme-secondary-stronger:  #{pf.tone($neutral, 200)};
+  --#{$prefix}theme-secondary-strongest: #{pf.tone($neutral, 100)};
+
+  --#{$prefix}theme-success-base:      #{pf.tone('green', 400)};
+  --#{$prefix}theme-success-strong:    #{pf.tone('green', 300)};
+  --#{$prefix}theme-success-stronger:  #{pf.tone('green', 200)};
+  --#{$prefix}theme-success-strongest: #{pf.tone('green', 100)};
+  --#{$prefix}theme-success-subtlest:  #{pf.tone('green', 900)};
+
+  --#{$prefix}theme-warning-base:      #{pf.tone('yellow', 400)};
+  --#{$prefix}theme-warning-strong:    #{pf.tone('yellow', 300)};
+  --#{$prefix}theme-warning-stronger:  #{pf.tone('yellow', 200)};
+  --#{$prefix}theme-warning-subtlest:  #{pf.tone('yellow', 900)};
+
+  --#{$prefix}theme-danger-base:      #{pf.tone('red', 400)};
+  --#{$prefix}theme-danger-strong:    #{pf.tone('red', 300)};
+  --#{$prefix}theme-danger-stronger:  #{pf.tone('red', 200)};
+  --#{$prefix}theme-danger-strongest: #{pf.tone('red', 100)};
+  --#{$prefix}theme-danger-subtlest:  #{pf.tone('red', 900)};
+
+  /* Focus ring - brighter for dark backgrounds */
+  --#{$prefix}focus-ring-color:     #{pf.tone($brand, 400)};
+
+  /* Shadows - more pronounced in dark mode */
+  --#{$prefix}shadow-color:         0, 0, 0;
+}
+
+// Public: explicit dark mode (data-theme="dark")
+@mixin emit-color-roles-dark($prefix:'#{$prefix}', $brand:'blue', $neutral:'gray') {
+  :where(.#{$prefix}interface)[data-theme="dark"] {
+    @include _dark-overrides($prefix, $brand, $neutral);
+  }
+}
+
+// Public: auto mode - respects system preference (data-theme="auto")
+@mixin emit-color-roles-auto($prefix:'#{$prefix}', $brand:'blue', $neutral:'gray') {
+  @media (prefers-color-scheme: dark) {
+    :where(.#{$prefix}interface)[data-theme="auto"] {
+      @include _dark-overrides($prefix, $brand, $neutral);
+    }
+  }
+}
+
+@mixin emit-spacing-primitives($prefix, $steps: $spacing-steps) {
+  @each $n in $steps {
+    --#{$prefix}palette-spacing-#{$n}: calc(var(--#{$prefix}spacing-base) * #{$n});
+  }
+}
+
+// Aliases → reference primitives (keeps one source of truth)
+@mixin emit-spacing-aliases(
+  $prefix,
+  $aliases: (xxs:1, xs:2, sm:3, md:4, lg:6, xl:8, xxl:16)
+) {
+  @each $name, $n in $aliases {
+    --#{$prefix}spacing-#{$name}: var(--#{$prefix}palette-spacing-#{$n});
+  }
+}
+
+// ----------------------
+// Font-size primitives
+// --<prefix>palette-fontSize-16px: calc(16 * multiplier)
+// ----------------------
+@mixin emit-fontsize-aliases($prefix, $aliases: $font-aliases) {
+  @each $name, $px in $aliases {
+    --#{$prefix}typography-size-#{$name}: calc(#{$px} * var(--#{$prefix}fontSize-multiplier, calc(1rem / #{$font-multiplier-default})));
+  }
+}
+
+// ----------------------
+// Scale vars (optional convenience block)
+// ----------------------
+@mixin emit-scale-vars($prefix, $radius, $font) {
+    @each $k, $v in $radius { --#{$prefix}radius-#{$k}: #{$v}; }
+    --#{$prefix}font-size-base: #{map.get($font, base-size)};
+    --#{$prefix}line: #{map.get($font, line)};
+}

package/styles/system/index.scss

@@ -0,0 +1,4 @@
+@forward "constants";
+@forward "palettes";
+@forward "tokens";
+@forward "motion";