@averoui/tokens 1.0.0

package/src/theme.css

@@ -0,0 +1,277 @@
+/*
+ * Avero theme tokens for Tailwind CSS v4.
+ *
+ * The default Tailwind palette, spacing, radius and type scale are kept unchanged, so every Tailwind
+ * class works as documented; this file only adds Avero's own design tokens on top of them.
+ */
+
+@theme {
+  /* ---------------------------------------------------------------- Typography */
+  --font-sans:
+    Lahzeh, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
+    Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --font-code:
+    "Fira Code", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  /* Micro sizes for dense UI such as badges, meta rows and legends. No line-height is defined, so
+     they inherit the surrounding line-height. */
+  --text-4xs: 0.5625rem; /* 9px  */
+  --text-3xs: 0.625rem; /* 10px */
+  --text-2xs: 0.6875rem; /* 11px */
+  --text-sm-plus: 0.8125rem; /* 13px */
+  --text-md: 0.9375rem; /* 15px */
+  --text-xl-plus: 1.375rem; /* 22px */
+
+  --leading-prose: 1.8;
+  --leading-airy: 2.2;
+
+  /* ---------------------------------------------------------------- Brand and semantic colors */
+  --color-primary: #0a66c2;
+  --color-primary-hover: #004182;
+  --color-secondary: #f15928;
+
+  --color-background: #f4f4f4;
+  --color-foreground: #464646;
+
+  --color-surface: #ffffff;
+  --color-surface-glass: #ffffff6b;
+  --color-surface-muted: #f9fafc;
+  --color-surface-sunken: #e7e9ec;
+
+  --color-border-subtle: #d5d9df;
+
+  --color-text-strong: #242424;
+  --color-text-chrome: #8390a2;
+  --color-text-chrome-hover: #242424;
+  --color-text-subtle: #54595f;
+  /* Muted meta text. It is below AA for small text on white (see reports/contrast-report.md), so
+     themes that need strict contrast may darken it. */
+  --color-text-muted: var(--color-gray-400);
+
+  --color-accent-social: #ff9606;
+  /* Resting color of the footer social icons. */
+  --color-icon-muted: #c1c3c8;
+
+  /* Warning call-to-action colors. They are Tailwind v3's amber values, not v4's (v4 amber-500 is
+     #f99c00), so they need their own tokens. */
+  --color-warning: #f59e0b;
+  --color-warning-hover: #d97706;
+
+  --color-shadow-brand: #0a66c205;
+  --color-shadow-box: #0f172a14;
+
+  /* Chart palette. Recharts takes colours as props that become SVG attributes, so
+     `@averoui/charts` consumes these as token data rather than as utility classes. */
+  --color-chart-views: #6366f1;
+  --color-chart-likes: #f43f5e;
+  --color-chart-clicks: #8b5cf6;
+  --color-chart-comments: #10b981;
+
+  --color-chart-grid: #f1f5f9;
+  --color-chart-axis: #94a3b8;
+  --color-chart-cursor: #cbd5e1;
+
+  --color-chart-tooltip-surface: #1e293b;
+  --color-chart-tooltip-text: #f8fafc;
+  --color-chart-tooltip-label: #94a3b8;
+
+  /* ---------------------------------------------------------------- Radius */
+  --radius-huge: 1.75rem; /* 28px */
+  --radius-leaf: 2.5rem; /* 40px, asymmetric "leaf" corners */
+
+  /* ---------------------------------------------------------------- Elevation */
+  --shadow-brand-soft: 0 0 20px 0 var(--color-shadow-brand);
+  --shadow-brand-md: 0 0 35px 0 var(--color-shadow-brand);
+  --shadow-brand-lg: 0 0 40px 0 var(--color-shadow-brand);
+  --shadow-brand-hover: 0 2px 35px 0 var(--color-shadow-brand);
+  --shadow-brand-drop: 0 20px 0 0 var(--color-shadow-brand);
+  --shadow-box: 0 2px 4px var(--color-shadow-box);
+
+  --shadow-card-soft: 0 4px 25px rgba(0, 0, 0, 0.04);
+  --shadow-card-ambient: 0 0 25px 0 rgba(0, 0, 0, 0.05);
+  --shadow-card-faint: 0 4px 20px rgba(0, 0, 0, 0.02);
+  --shadow-card-subtle: 0 4px 20px rgba(0, 0, 0, 0.03);
+  --shadow-card-hairline: 0 2px 16px rgba(15, 23, 42, 0.06);
+  --shadow-card-raised: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+
+  --shadow-elevated: 0 10px 40px rgba(15, 23, 42, 0.08);
+  --shadow-elevated-soft: 0 10px 40px rgba(15, 23, 42, 0.06);
+  --shadow-elevated-tight: 0 10px 35px rgba(15, 23, 42, 0.08);
+
+  --shadow-float: 0 20px 80px rgba(15, 23, 42, 0.08);
+  --shadow-float-hover: 0 20px 60px rgba(15, 23, 42, 0.12);
+  --shadow-float-wide: 0 8px 40px rgba(15, 23, 42, 0.12);
+  --shadow-float-strong: 0 16px 35px rgba(15, 23, 42, 0.22);
+
+  --shadow-pop: 0 4px 15px -3px rgba(0, 0, 0, 0.1);
+  --shadow-pop-wide: 0 8px 40px rgba(0, 0, 0, 0.08);
+
+  --shadow-modal: 0 25px 80px rgba(15, 23, 42, 0.2);
+  --shadow-lightbox: 0 25px 70px rgba(0, 0, 0, 0.35);
+
+  --drop-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.04);
+  --drop-shadow-amber-sm: 0 1px 4px rgba(251, 191, 36, 0.35);
+  --drop-shadow-amber-md: 0 2px 8px rgba(234, 179, 8, 0.45);
+
+  /* ---------------------------------------------------------------- Blur */
+  --blur-hair: 1px;
+  --blur-thin: 2px;
+  --blur-mist: 50px;
+  --blur-orb: 70px;
+  --blur-haze: 200px;
+
+  /* ---------------------------------------------------------------- Motion */
+  --animate-slide-up: slide-up 0.25s ease-out;
+  --animate-fade-in: fade-in 0.4s ease-out both;
+  --animate-fade: fade 0.5s;
+  --animate-blink: blink 1s step-end infinite;
+  --animate-blink-caret: blink-caret 0.75s step-end infinite;
+  --animate-sway: sway 3s ease-in-out forwards;
+  --animate-shimmer: shimmer 1.6s linear infinite;
+  --animate-spin-glow: spin-glow 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  /* Accordion open/close: height and opacity animate over 300ms ease-in-out. */
+  --animate-accordion-down: accordion-down 0.3s ease-in-out;
+  --animate-accordion-up: accordion-up 0.3s ease-in-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+      opacity: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+      opacity: 1;
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+      opacity: 1;
+    }
+    to {
+      height: 0;
+      opacity: 0;
+    }
+  }
+
+  @keyframes slide-up {
+    0% {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+      transform: translateY(12px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade {
+    0% {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes blink {
+    0%,
+    to {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes blink-caret {
+    0%,
+    to {
+      border-color: transparent;
+    }
+    50% {
+      border-color: var(--color-secondary);
+    }
+  }
+
+  @keyframes sway {
+    0% {
+      opacity: 0;
+      transform: translateY(0) rotate(0);
+    }
+    10% {
+      opacity: 1;
+    }
+    50% {
+      transform: translateY(-6px) rotate(2deg);
+    }
+    90% {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+      transform: translateY(0) rotate(0);
+    }
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    to {
+      background-position: 200% 0;
+    }
+  }
+
+  @keyframes spin-glow {
+    0% {
+      transform: rotate(0);
+      box-shadow: 0 0 15px color-mix(in srgb, var(--color-indigo-500) 20%, transparent);
+    }
+    50% {
+      box-shadow: 0 0 25px color-mix(in srgb, var(--color-indigo-500) 40%, transparent);
+    }
+    to {
+      transform: rotate(360deg);
+      box-shadow: 0 0 15px color-mix(in srgb, var(--color-indigo-500) 20%, transparent);
+    }
+  }
+}
+
+/*
+ * Layering. Tailwind v4 has no z-index theme namespace, so named layers are plain custom properties
+ * used as `z-(--z-modal)`. Gaps between the values leave room for new layers.
+ */
+@layer theme {
+  :root,
+  :host {
+    --z-raised: 10;
+    --z-sticky: 50;
+    --z-drawer: 70;
+    --z-dropdown: 60;
+    --z-overlay: 100;
+    --z-overlay-content: 105;
+    --z-modal: 110;
+    --z-modal-content: 115;
+    --z-modal-nested: 120;
+    --z-popover: 999;
+    --z-top-layer: 2000;
+    --z-top-layer-content: 3000;
+    --z-toast: 9999;
+    --z-max: 10001;
+  }
+}

package/src/utilities.css

@@ -0,0 +1,122 @@
+/*
+ * Avero utilities: named utilities for scrollbars, loading effects and recurring gradients.
+ * Safe to import in any Tailwind v4 app; nothing here styles elements until a class is used.
+ *
+ * Gradients are defined with @apply of plain Tailwind classes, so they compile to the same CSS as
+ * the classes would inline (including Tailwind v4's oklab interpolation).
+ */
+
+/* ---------------------------------------------------------------- Scrollbars */
+
+@utility scrollbar-fancy {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--color-slate-900) 35%, transparent)
+    color-mix(in srgb, var(--color-slate-400) 12%, transparent);
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: color-mix(in srgb, var(--color-slate-400) 6%, transparent);
+    border-radius: 999px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--color-slate-900) 35%, transparent);
+    border: 2px solid color-mix(in srgb, var(--color-white) 75%, transparent);
+    border-radius: 999px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--color-slate-900) 50%, transparent);
+  }
+}
+
+@utility scrollbar-slim {
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-gray-300);
+    border-radius: 8px;
+  }
+}
+
+@utility scrollbar-hidden {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* ---------------------------------------------------------------- Loading and effects */
+
+@utility skeleton-shimmer {
+  background: linear-gradient(
+      90deg,
+      var(--color-slate-100) 25%,
+      var(--color-slate-200) 50%,
+      var(--color-slate-100) 75%
+    )
+    0 0 / 200% 100%;
+  animation: var(--animate-shimmer);
+}
+
+@utility glow-ring {
+  animation: var(--animate-spin-glow);
+}
+
+@utility typing-caret {
+  animation: var(--animate-blink-caret);
+}
+
+/* ---------------------------------------------------------------- Gradients */
+
+/* Profile cover. */
+@utility gradient-cover {
+  @apply bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-700;
+}
+
+/* Dark shade that sits on top of covers and media. */
+@utility gradient-cover-shade {
+  @apply bg-gradient-to-t from-black/40 via-transparent to-transparent;
+}
+
+/* Hover overlay on showcase media. */
+@utility gradient-media-shade {
+  @apply bg-gradient-to-t from-black/60 via-transparent to-transparent;
+}
+
+/* Dark call-to-action banner. */
+@utility gradient-night {
+  @apply bg-gradient-to-r from-slate-900 via-indigo-950 to-slate-900;
+}
+
+/* Vertical accent bar beside page titles. */
+@utility gradient-accent-bar {
+  @apply from-primary bg-gradient-to-b to-cyan-500;
+}
+
+/* Soft label pill. */
+@utility gradient-label {
+  @apply from-primary/10 bg-gradient-to-r to-cyan-50;
+}
+
+/* Premium badge. */
+@utility gradient-premium {
+  @apply bg-gradient-to-r from-amber-500/10 via-yellow-500/20 to-amber-500/10;
+}
+
+/* Illustration frame. */
+@utility gradient-art-frame {
+  @apply bg-gradient-to-tr from-slate-50 to-indigo-50/50;
+}
+
+/* Brand fill. */
+@utility gradient-brand {
+  @apply from-primary to-primary-hover bg-gradient-to-r;
+}