@ttt-productions/theme-core 0.1.20 → 0.1.23

package/dist/styles/base.css

@@ -1,11 +1,8 @@
-@layer base {
-    html, body {
-      background-color: hsl(var(--background));
-      color: hsl(var(--foreground));
-    }
-  
-    * {
-      border-color: hsl(var(--border));
-    }
-  }
-  
+html, body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+* {
+  border-color: hsl(var(--border));
+}

package/dist/styles/components.css

@@ -1,7 +1,7 @@
 @layer components {
   /* =========================================================
-     FOUNDATIONS (icon + layout bundles) — replaces inline utils
-     ========================================================= */
+      FOUNDATIONS (icon + layout bundles) — replaces inline utils
+      ========================================================= */
 
   /* Icons */
   .icon-xxs { @apply h-3 w-3; }
@@ -34,8 +34,8 @@
   .stack-6 { @apply space-y-6; }
 
   /* =========================================================
-     PAGE LAYOUT
-     ========================================================= */
+      PAGE LAYOUT
+      ========================================================= */
   .page-container {
     @apply flex-1 w-full mx-auto py-4;
   }
@@ -65,8 +65,8 @@
   }
 
   /* =========================================================
-     TYPOGRAPHY (high-level)
-     ========================================================= */
+      TYPOGRAPHY (high-level)
+      ========================================================= */
   .text-body {
     @apply text-sm font-medium;
     color: hsl(var(--foreground));
@@ -136,16 +136,16 @@
   }
 
   /* =========================================================
-     LINKS
-     ========================================================= */
+      LINKS
+      ========================================================= */
   .auth-link {
     @apply text-sm underline font-semibold;
     color: hsl(var(--primary));
   }
 
   /* =========================================================
-     CHAT
-     ========================================================= */
+      CHAT
+      ========================================================= */
   .chat-date-separator {
     @apply text-xs font-bold bg-muted px-3 py-1 rounded-full;
     color: hsl(var(--foreground));
@@ -192,20 +192,20 @@
     .screen-adaptive-root {
       @apply flex flex-1 flex-col w-full;
     }
-  
+
     .screen-adaptive-inner {
       @apply mx-auto w-full;
     }
-  
+
     /* Max width variants */
     .screen-max-w-none { max-width: none; }
     .screen-max-w-full { max-width: 100%; }
-  
+
     .screen-max-w-sm  { max-width: 24rem; }  /* 384px */
     .screen-max-w-md  { max-width: 28rem; }  /* 448px */
     .screen-max-w-lg  { max-width: 32rem; }  /* 512px */
     .screen-max-w-xl  { max-width: 36rem; }  /* 576px */
-  
+
     .screen-max-w-2xl { max-width: 42rem; }  /* 672px */
     .screen-max-w-3xl { max-width: 48rem; }  /* 768px */
     .screen-max-w-4xl { max-width: 56rem; }  /* 896px */
@@ -214,8 +214,8 @@
     .screen-max-w-7xl { max-width: 80rem; }  /* 1280px */
 
   /* =========================================================
-     RULE CARDS
-     ========================================================= */
+      RULE CARDS
+      ========================================================= */
   .rule-card {
     @apply p-4 rounded-lg border-2 border-border bg-card;
   }
@@ -231,8 +231,8 @@
   }
 
   /* =========================================================
-     ACCORDION
-     ========================================================= */
+      ACCORDION
+      ========================================================= */
   .accordion-trigger {
     @apply p-6 hover:no-underline rounded-t-lg;
   }
@@ -253,8 +253,8 @@
   }
 
   /* =========================================================
-     DETAILS (nested accordions)
-     ========================================================= */
+      DETAILS (nested accordions)
+      ========================================================= */
   .details-summary {
     @apply flex items-center justify-between cursor-pointer list-none p-4 rounded-lg border-2 border-border bg-card transition-all;
   }
@@ -285,16 +285,16 @@
   }
 
   /* =========================================================
-     AGREEMENT LIST ITEMS
-     ========================================================= */
+      AGREEMENT LIST ITEMS
+      ========================================================= */
   .agreement-list-item {
     @apply flex gap-2 text-sm font-bold;
     color: hsl(var(--muted-foreground));
   }
 
   /* =========================================================
-     FUTURE PLANS / MEDIA
-     ========================================================= */
+      FUTURE PLANS / MEDIA
+      ========================================================= */
   .future-plan-description {
     @apply text-base whitespace-pre-wrap leading-relaxed max-w-prose font-bold;
     color: hsl(var(--muted-foreground));
@@ -323,8 +323,8 @@
   }
 
   /* =========================================================
-     INFO SECTIONS
-     ========================================================= */
+      INFO SECTIONS
+      ========================================================= */
   .info-section {
     @apply flex items-start gap-4;
   }
@@ -355,8 +355,8 @@
   }
 
   /* =========================================================
-     ATTRIBUTION SECTIONS
-     ========================================================= */
+      ATTRIBUTION SECTIONS
+      ========================================================= */
   .attribution-item {
     @apply flex items-start gap-4;
   }
@@ -382,8 +382,8 @@
   }
 
   /* =========================================================
-     DEDICATION SECTIONS
-     ========================================================= */
+      DEDICATION SECTIONS
+      ========================================================= */
   .dedication-section {
     @apply text-center space-y-2;
   }
@@ -403,8 +403,8 @@
   }
 
   /* =========================================================
-     DMCA INFO
-     ========================================================= */
+      DMCA INFO
+      ========================================================= */
   .dmca-section-title {
     @apply text-lg font-semibold;
     color: hsl(var(--foreground));
@@ -430,8 +430,8 @@
   }
 
   /* =========================================================
-     BUTTONS
-     ========================================================= */
+      BUTTONS
+      ========================================================= */
   .primary-action-button {
     @apply w-full text-lg py-6;
   }
@@ -445,15 +445,15 @@
   }
 
   /* =========================================================
-     FOOTER
-     ========================================================= */
+      FOOTER
+      ========================================================= */
   .app-footer {
     @apply w-full h-12 flex-shrink-0 bg-secondary pt-4;
   }
 
   /* =========================================================
-     CUSTOM FORM ELEMENTS
-     ========================================================= */
+      CUSTOM FORM ELEMENTS
+      ========================================================= */
   .form-select-trigger {
     @apply font-semibold rounded-xl h-11 px-4 shadow-sm border-2;
     background-color: hsl(var(--background));
@@ -462,8 +462,8 @@
   }
 
   /* =========================================================
-     SAFE AREA UTILITIES
-     ========================================================= */
+      SAFE AREA UTILITIES
+      ========================================================= */
   .fixed-header {
     padding-top: max(1rem, var(--sat));
   }
@@ -473,8 +473,8 @@
   }
 
   /* =========================================================
-     LANDING PAGE
-     ========================================================= */
+      LANDING PAGE
+      ========================================================= */
   .landing-tabs-list {
     @apply grid w-full grid-cols-2 bg-transparent p-0 gap-2 mb-4;
   }
@@ -500,8 +500,8 @@
   }
 
   /* =========================================================
-     APP HEADER
-     ========================================================= */
+      APP HEADER
+      ========================================================= */
   .app-header {
     @apply flex items-center h-[60px] shadow-md;
     background-color: hsl(var(--secondary));
@@ -538,8 +538,8 @@
   }
 
   /* =========================================================
-     POPOVERS
-     ========================================================= */
+      POPOVERS
+      ========================================================= */
   .app-popover {
     @apply w-80 p-2 border-2;
     background-color: hsl(var(--card));
@@ -548,8 +548,8 @@
   }
 
   /* =========================================================
-     HELP DIALOG
-     ========================================================= */
+      HELP DIALOG
+      ========================================================= */
   .help-dialog-title {
     @apply font-semibold;
     color: hsl(var(--foreground)) !important;
@@ -567,8 +567,8 @@
   }
 
   /* =========================================================
-     FILTER & SORT (GENERIC)
-     ========================================================= */
+      FILTER & SORT (GENERIC)
+      ========================================================= */
   .filter-select-trigger,
   .sort-select-trigger {
     @apply w-full sm:w-auto rounded-xl h-11 px-4 font-bold shadow-sm border-2;
@@ -618,8 +618,8 @@
   }
 
   /* =========================================================
-     VIEW TOGGLE (GENERIC)
-     ========================================================= */
+      VIEW TOGGLE (GENERIC)
+      ========================================================= */
   .view-toggle-container {
     @apply flex items-center p-1 rounded-xl border-2 shadow-sm;
     background-color: hsl(var(--muted));
@@ -630,4 +630,4 @@
     @apply rounded-lg h-8 w-8;
     color: hsl(var(--foreground));
   }
-}
+}

package/dist/styles/contract.css

@@ -1,30 +1,30 @@
-@layer base {
-  :root {
-    /* Loud fallbacks: if you see this, app did NOT define required brand tokens */
-    --brand-primary: 999 100% 50%;
-    --brand-secondary: 999 100% 50%;
-    --brand-accent: 999 100% 50%;
 
-    /* Status tokens: OPTIONAL (sane defaults) */
-    --status-success: 140 70% 45%;
-    --status-warning: 45 90% 50%;
-    --status-error: 0 84% 60%;
-    --status-info: 221 83% 53%;
+:root {
+  /* Loud fallbacks: if you see this, app did NOT define required brand tokens */
+  --brand-primary: 999 100% 50%;
+  --brand-secondary: 999 100% 50%;
+  --brand-accent: 999 100% 50%;
 
-    /* Neutrals */
-    --neutral-white: 0 0% 100%;
-    --neutral-black: 0 0% 0%;
-  }
+  /* Status tokens: OPTIONAL (sane defaults) */
+  --status-success: 140 70% 45%;
+  --status-warning: 45 90% 50%;
+  --status-error: 0 84% 60%;
+  --status-info: 221 83% 53%;
 
-  /* High contrast must be pure B/W: override brand + status tokens too (prevents bleed) */
-  .high-contrast {
-    --brand-primary: 0 0% 0%;
-    --brand-secondary: 0 0% 0%;
-    --brand-accent: 0 0% 100%;
+  /* Neutrals */
+  --neutral-white: 0 0% 100%;
+  --neutral-black: 0 0% 0%;
+}
+
+/* High contrast must be pure B/W: override brand + status tokens too (prevents bleed) */
+.high-contrast {
+  --brand-primary: 0 0% 0%;
+  --brand-secondary: 0 0% 0%;
+  --brand-accent: 0 0% 100%;
 
-    --status-success: 0 0% 0%;
-    --status-warning: 0 0% 0%;
-    --status-error: 0 0% 0%;
-    --status-info: 0 0% 0%;
-  }
+  --status-success: 0 0% 0%;
+  --status-warning: 0 0% 0%;
+  --status-error: 0 0% 0%;
+  --status-info: 0 0% 0%;
 }
+

package/dist/styles/hooks.css

@@ -1,94 +1,93 @@
 
-@layer components {
-  /* ===================
-     BUTTONS
-     =================== */
-  .btn-destructive {
-    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
-  }
-
-  /* ===================
-     MESSAGE BUBBLES
-     =================== */
-  .msg-bubble {
-    @apply p-3 rounded-lg;
-  }
-
-  .msg-bubble--mine {
-    background-color: hsl(var(--primary) / 0.10);
-  }
-
-  .msg-bubble--theirs {
-    @apply bg-muted;
-  }
-
-  /* ===================
-     STATUS PILLS
-     =================== */
-  .status-pill {
-    @apply text-xs-bold px-2 py-0.5 rounded-full;
-  }
-
-  /* map to semantic tokens (no blue/yellow/green hardcodes) */
-  .status-pill--open-user {
-    background-color: hsl(var(--info) / 0.15);
-    color: hsl(var(--info-foreground));
-  }
-
-  .status-pill--admin-reply {
-    background-color: hsl(var(--warning) / 0.20);
-    color: hsl(var(--warning-foreground));
-  }
-
-  .status-pill--user-reply {
-    background-color: hsl(var(--success) / 0.18);
-    color: hsl(var(--success-foreground));
-  }
-
-  .status-pill--closed {
-    @apply bg-muted text-muted-foreground;
-  }
-
-  .status-pill--default {
-    @apply bg-muted text-muted-foreground;
-  }
-
-  /* ===================
-     STATUS ICONS
-     =================== */
-  .status-icon {
-    @apply h-5 w-5;
-  }
-
-  .status-icon--success { color: hsl(var(--success)); }
-  .status-icon--warning { color: hsl(var(--warning)); }
-  .status-icon--info    { color: hsl(var(--info)); }
-  .status-icon--error   { color: hsl(var(--destructive)); }
-
-  /* ===================
-     NOTIFICATIONS
-     =================== */
-  .notify-dot {
-    @apply absolute top-1 right-1 h-2 w-2 rounded-full;
-    background-color: hsl(var(--destructive));
-  }
-
-  .notify-empty-icon {
-    color: hsl(var(--success));
-  }
-
-  /* ===================
-     MEDIA PREVIEW
-     =================== */
-  .media-preview {
-    @apply relative w-full h-full;
-  }
-
-  .media-preview--frame {
-    @apply w-full h-auto max-w-sm mx-auto;
-  }
-
-  .media-preview--fullwidth {
-    @apply w-full h-auto;
-  }
+
+/* ===================
+    BUTTONS
+    =================== */
+.btn-destructive {
+  @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
+}
+
+/* ===================
+    MESSAGE BUBBLES
+    =================== */
+.msg-bubble {
+  @apply p-3 rounded-lg;
+}
+
+.msg-bubble--mine {
+  background-color: hsl(var(--primary) / 0.10);
+}
+
+.msg-bubble--theirs {
+  @apply bg-muted;
+}
+
+/* ===================
+    STATUS PILLS
+    =================== */
+.status-pill {
+  @apply text-xs-bold px-2 py-0.5 rounded-full;
+}
+
+/* map to semantic tokens (no blue/yellow/green hardcodes) */
+.status-pill--open-user {
+  background-color: hsl(var(--info) / 0.15);
+  color: hsl(var(--info-foreground));
+}
+
+.status-pill--admin-reply {
+  background-color: hsl(var(--warning) / 0.20);
+  color: hsl(var(--warning-foreground));
+}
+
+.status-pill--user-reply {
+  background-color: hsl(var(--success) / 0.18);
+  color: hsl(var(--success-foreground));
+}
+
+.status-pill--closed {
+  @apply bg-muted text-muted-foreground;
+}
+
+.status-pill--default {
+  @apply bg-muted text-muted-foreground;
+}
+
+/* ===================
+    STATUS ICONS
+    =================== */
+.status-icon {
+  @apply h-5 w-5;
+}
+
+.status-icon--success { color: hsl(var(--success)); }
+.status-icon--warning { color: hsl(var(--warning)); }
+.status-icon--info    { color: hsl(var(--info)); }
+.status-icon--error   { color: hsl(var(--destructive)); }
+
+/* ===================
+    NOTIFICATIONS
+    =================== */
+.notify-dot {
+  @apply absolute top-1 right-1 h-2 w-2 rounded-full;
+  background-color: hsl(var(--destructive));
+}
+
+.notify-empty-icon {
+  color: hsl(var(--success));
+}
+
+/* ===================
+    MEDIA PREVIEW
+    =================== */
+.media-preview {
+  @apply relative w-full h-full;
+}
+
+.media-preview--frame {
+  @apply w-full h-auto max-w-sm mx-auto;
+}
+
+.media-preview--fullwidth {
+  @apply w-full h-auto;
 }

package/dist/styles/tokens.css

@@ -1,105 +1,104 @@
-@layer base {
-  :root {
-    /* Semantic tokens (default = light) */
-    --background: var(--neutral-white);
-    --foreground: var(--neutral-black);
 
-    --card: var(--neutral-white);
-    --card-foreground: var(--neutral-black);
+:root {
+  /* Semantic tokens (default = light) */
+  --background: var(--neutral-white);
+  --foreground: var(--neutral-black);
 
-    --popover: var(--neutral-white);
-    --popover-foreground: var(--neutral-black);
+  --card: var(--neutral-white);
+  --card-foreground: var(--neutral-black);
 
-    --muted: 0 0% 95%;
-    --muted-foreground: 0 0% 25%;
+  --popover: var(--neutral-white);
+  --popover-foreground: var(--neutral-black);
 
-    --accent: var(--brand-accent);
-    --accent-foreground: var(--neutral-black);
+  --muted: 0 0% 95%;
+  --muted-foreground: 0 0% 25%;
 
-    --primary: var(--brand-primary);
-    --primary-foreground: var(--neutral-white);
+  --accent: var(--brand-accent);
+  --accent-foreground: var(--neutral-black);
 
-    --secondary: var(--brand-secondary);
-    --secondary-foreground: var(--neutral-white);
+  --primary: var(--brand-primary);
+  --primary-foreground: var(--neutral-white);
 
-    --destructive: var(--status-error);
-    --destructive-foreground: var(--neutral-white);
+  --secondary: var(--brand-secondary);
+  --secondary-foreground: var(--neutral-white);
 
-    /* Extra semantic status colors (used by pills/toasts/etc.) */
-    --success: var(--status-success);
-    --success-foreground: var(--neutral-white);
+  --destructive: var(--status-error);
+  --destructive-foreground: var(--neutral-white);
 
-    --warning: var(--status-warning);
-    --warning-foreground: var(--neutral-black);
+  /* Extra semantic status colors (used by pills/toasts/etc.) */
+  --success: var(--status-success);
+  --success-foreground: var(--neutral-white);
 
-    --info: var(--status-info);
-    --info-foreground: var(--neutral-white);
+  --warning: var(--status-warning);
+  --warning-foreground: var(--neutral-black);
 
-    --border: var(--brand-primary);
-    --ring: var(--brand-primary);
+  --info: var(--status-info);
+  --info-foreground: var(--neutral-white);
 
-    --radius: 1rem;
-  }
+  --border: var(--brand-primary);
+  --ring: var(--brand-primary);
 
-  .dark {
-    /* Dark base (brand tokens are still app-controlled) */
-    --background: 240 6% 10%;
-    --foreground: 0 0% 100%;
+  --radius: 1rem;
+}
+
+.dark {
+  /* Dark base (brand tokens are still app-controlled) */
+  --background: 240 6% 10%;
+  --foreground: 0 0% 100%;
 
-    --card: 240 6% 12%;
-    --card-foreground: 0 0% 100%;
+  --card: 240 6% 12%;
+  --card-foreground: 0 0% 100%;
 
-    --popover: 240 6% 12%;
-    --popover-foreground: 0 0% 100%;
+  --popover: 240 6% 12%;
+  --popover-foreground: 0 0% 100%;
 
-    --muted: 240 4% 20%;
-    --muted-foreground: 0 0% 85%;
+  --muted: 240 4% 20%;
+  --muted-foreground: 0 0% 85%;
 
-    --border: 0 0% 100%;
-    --ring: 0 0% 100%;
+  --border: 0 0% 100%;
+  --ring: 0 0% 100%;
 
-    /* status foregrounds still reasonable in dark */
-    --success-foreground: 0 0% 0%;
-    --warning-foreground: 0 0% 0%;
-    --info-foreground: 0 0% 0%;
-  }
+  /* status foregrounds still reasonable in dark */
+  --success-foreground: 0 0% 0%;
+  --warning-foreground: 0 0% 0%;
+  --info-foreground: 0 0% 0%;
+}
 
-  .high-contrast {
-    /* Pure B/W semantic tokens */
-    --background: 0 0% 0%;
-    --foreground: 0 0% 100%;
+.high-contrast {
+  /* Pure B/W semantic tokens */
+  --background: 0 0% 0%;
+  --foreground: 0 0% 100%;
 
-    --card: 0 0% 0%;
-    --card-foreground: 0 0% 100%;
+  --card: 0 0% 0%;
+  --card-foreground: 0 0% 100%;
 
-    --popover: 0 0% 0%;
-    --popover-foreground: 0 0% 100%;
+  --popover: 0 0% 0%;
+  --popover-foreground: 0 0% 100%;
 
-    --muted: 0 0% 0%;
-    --muted-foreground: 0 0% 100%;
+  --muted: 0 0% 0%;
+  --muted-foreground: 0 0% 100%;
 
-    --accent: 0 0% 0%;
-    --accent-foreground: 0 0% 100%;
+  --accent: 0 0% 0%;
+  --accent-foreground: 0 0% 100%;
 
-    --primary: 0 0% 100%;
-    --primary-foreground: 0 0% 0%;
+  --primary: 0 0% 100%;
+  --primary-foreground: 0 0% 0%;
 
-    --secondary: 0 0% 100%;
-    --secondary-foreground: 0 0% 0%;
+  --secondary: 0 0% 100%;
+  --secondary-foreground: 0 0% 0%;
 
-    --destructive: 0 0% 100%;
-    --destructive-foreground: 0 0% 0%;
+  --destructive: 0 0% 100%;
+  --destructive-foreground: 0 0% 0%;
 
-    --success: 0 0% 100%;
-    --success-foreground: 0 0% 0%;
+  --success: 0 0% 100%;
+  --success-foreground: 0 0% 0%;
 
-    --warning: 0 0% 100%;
-    --warning-foreground: 0 0% 0%;
+  --warning: 0 0% 100%;
+  --warning-foreground: 0 0% 0%;
 
-    --info: 0 0% 100%;
-    --info-foreground: 0 0% 0%;
+  --info: 0 0% 100%;
+  --info-foreground: 0 0% 0%;
 
-    --border: 0 0% 100%;
-    --ring: 0 0% 100%;
-  }
+  --border: 0 0% 100%;
+  --ring: 0 0% 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ttt-productions/theme-core",
-    "version": "0.1.20",
+    "version": "0.1.23",
     "description": "Theme provider + CSS token contract for TTT Productions apps",
     "main": "dist/index.js",
     "module": "dist/index.js",