@goopti/ui 1.0.2 → 1.1.1

package/dist/theme.css

@@ -0,0 +1,140 @@
+/* ============================================================
+   OPTI Soluções — Design Tokens (CSS Custom Properties)
+   shadcn/ui semantic token system, themed with OPTI brand.
+   HSL channel triplets so Tailwind opacity modifiers
+   (e.g. bg-primary/90) work exactly like upstream shadcn.
+
+   Primary = OPTI Blue   #1697F6  (205 93% 53%)
+   Brand   = OPTI Orange #FFA000  (38 100% 50%)
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 210 28% 7%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 210 28% 7%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 210 28% 7%;
+
+    /* Primary — OPTI Blue */
+    --primary: 205 93% 53%;
+    --primary-foreground: 0 0% 100%;
+
+    /* Brand accent — OPTI Orange */
+    --brand: 38 100% 50%;
+    --brand-foreground: 35 100% 18%;
+
+    --secondary: 210 31% 95%;
+    --secondary-foreground: 212 21% 17%;
+
+    --muted: 210 31% 95%;
+    --muted-foreground: 212 13% 49%;
+
+    --accent: 210 31% 95%;
+    --accent-foreground: 212 21% 17%;
+
+    --destructive: 358 75% 59%;
+    --destructive-foreground: 0 0% 100%;
+
+    --success: 156 76% 36%;
+    --success-foreground: 0 0% 100%;
+
+    --info: 205 93% 53%;
+    --info-foreground: 0 0% 100%;
+
+    --border: 210 28% 90%;
+    --input: 210 28% 90%;
+    --ring: 205 93% 53%;
+
+    --radius: 0.625rem;
+
+    /* Chart palette (brand-led) */
+    --chart-1: 205 93% 53%;
+    --chart-2: 38 100% 50%;
+    --chart-3: 38 100% 58%;
+    --chart-4: 207 93% 60%;
+    --chart-5: 156 76% 36%;
+  }
+
+  .dark {
+    --background: 210 28% 7%;
+    --foreground: 210 33% 98%;
+
+    --card: 210 23% 10%;
+    --card-foreground: 210 33% 98%;
+
+    --popover: 210 23% 10%;
+    --popover-foreground: 210 33% 98%;
+
+    --primary: 207 93% 60%;
+    --primary-foreground: 0 0% 100%;
+
+    --brand: 38 100% 50%;
+    --brand-foreground: 35 100% 18%;
+
+    --secondary: 212 21% 17%;
+    --secondary-foreground: 210 33% 98%;
+
+    --muted: 212 21% 17%;
+    --muted-foreground: 211 17% 66%;
+
+    --accent: 212 21% 17%;
+    --accent-foreground: 210 33% 98%;
+
+    --destructive: 358 75% 59%;
+    --destructive-foreground: 0 0% 100%;
+
+    --success: 156 76% 45%;
+    --success-foreground: 0 0% 100%;
+
+    --info: 207 93% 60%;
+    --info-foreground: 0 0% 100%;
+
+    --border: 212 21% 17%;
+    --input: 210 18% 27%;
+    --ring: 207 93% 60%;
+  }
+}
+
+/* Base reset */
+* { border-color: hsl(var(--border)); }
+body {
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
+  -webkit-font-smoothing: antialiased;
+}
+.font-display { font-family: var(--font-display, 'Fredoka', sans-serif); }
+.font-mono    { font-family: var(--font-mono, 'JetBrains Mono', monospace); }
+
+/* Overlay animations */
+@keyframes opti-overlay-in  { from { opacity: 0 } to { opacity: 1 } }
+@keyframes opti-content-in  { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: scale(1) } }
+@keyframes opti-pop-in      { from { opacity: 0; transform: scale(.96) translateY(-4px) } to { opacity: 1; transform: scale(1) translateY(0) } }
+@keyframes opti-sheet-in    { from { transform: translateX(100%) } to { transform: translateX(0) } }
+@keyframes opti-toast-in    { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: translateY(0) } }
+@keyframes opti-skeleton    { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
+
+.animate-overlay  { animation: opti-overlay-in  .15s ease }
+.animate-content  { animation: opti-content-in  .18s cubic-bezier(.22,1,.36,1) forwards }
+.animate-pop      { animation: opti-pop-in      .14s cubic-bezier(.22,1,.36,1) }
+.animate-sheet    { animation: opti-sheet-in    .25s cubic-bezier(.22,1,.36,1) }
+.animate-toast    { animation: opti-toast-in    .22s cubic-bezier(.22,1,.36,1) }
+.animate-skeleton { animation: opti-skeleton    1.6s ease-in-out infinite }
+
+/* Theme-switch transitions */
+@media (prefers-reduced-motion: no-preference) {
+  :root, .dark {
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+  }
+}
+
+/* Styled scrollbar */
+.opti-scroll::-webkit-scrollbar       { width: 10px; height: 10px }
+.opti-scroll::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; border: 2px solid hsl(var(--background)) }
+.opti-scroll::-webkit-scrollbar-track { background: transparent }

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@goopti/ui",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "OPTI Soluções UI Kit based on shadcn/ui — A collection of accessible, customizable React components.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",