@averoui/tokens 1.0.0

package/src/generated/tokens.json

@@ -0,0 +1,327 @@
+{
+  "$description": "Avero design tokens. Generated from @averoui/tokens/src/theme.css; do not edit.",
+  "fontFamily": {
+    "$type": "fontFamily",
+    "sans": {
+      "$value": "Lahzeh, Inter, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans\", Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif"
+    },
+    "code": {
+      "$value": "\"Fira Code\", \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
+    }
+  },
+  "fontSize": {
+    "$type": "dimension",
+    "4xs": {
+      "$value": "0.5625rem"
+    },
+    "3xs": {
+      "$value": "0.625rem"
+    },
+    "2xs": {
+      "$value": "0.6875rem"
+    },
+    "sm-plus": {
+      "$value": "0.8125rem"
+    },
+    "md": {
+      "$value": "0.9375rem"
+    },
+    "xl-plus": {
+      "$value": "1.375rem"
+    }
+  },
+  "lineHeight": {
+    "$type": "number",
+    "prose": {
+      "$value": "1.8"
+    },
+    "airy": {
+      "$value": "2.2"
+    }
+  },
+  "color": {
+    "$type": "color",
+    "primary": {
+      "$value": "#0a66c2"
+    },
+    "primary-hover": {
+      "$value": "#004182"
+    },
+    "secondary": {
+      "$value": "#f15928"
+    },
+    "background": {
+      "$value": "#f4f4f4"
+    },
+    "foreground": {
+      "$value": "#464646"
+    },
+    "surface": {
+      "$value": "#ffffff"
+    },
+    "surface-glass": {
+      "$value": "#ffffff6b"
+    },
+    "surface-muted": {
+      "$value": "#f9fafc"
+    },
+    "surface-sunken": {
+      "$value": "#e7e9ec"
+    },
+    "border-subtle": {
+      "$value": "#d5d9df"
+    },
+    "text-strong": {
+      "$value": "#242424"
+    },
+    "text-chrome": {
+      "$value": "#8390a2"
+    },
+    "text-chrome-hover": {
+      "$value": "#242424"
+    },
+    "text-subtle": {
+      "$value": "#54595f"
+    },
+    "text-muted": {
+      "$value": "var(--color-gray-400)"
+    },
+    "accent-social": {
+      "$value": "#ff9606"
+    },
+    "icon-muted": {
+      "$value": "#c1c3c8"
+    },
+    "warning": {
+      "$value": "#f59e0b"
+    },
+    "warning-hover": {
+      "$value": "#d97706"
+    },
+    "shadow-brand": {
+      "$value": "#0a66c205"
+    },
+    "shadow-box": {
+      "$value": "#0f172a14"
+    },
+    "chart-views": {
+      "$value": "#6366f1"
+    },
+    "chart-likes": {
+      "$value": "#f43f5e"
+    },
+    "chart-clicks": {
+      "$value": "#8b5cf6"
+    },
+    "chart-comments": {
+      "$value": "#10b981"
+    },
+    "chart-grid": {
+      "$value": "#f1f5f9"
+    },
+    "chart-axis": {
+      "$value": "#94a3b8"
+    },
+    "chart-cursor": {
+      "$value": "#cbd5e1"
+    },
+    "chart-tooltip-surface": {
+      "$value": "#1e293b"
+    },
+    "chart-tooltip-text": {
+      "$value": "#f8fafc"
+    },
+    "chart-tooltip-label": {
+      "$value": "#94a3b8"
+    }
+  },
+  "radius": {
+    "$type": "dimension",
+    "huge": {
+      "$value": "1.75rem"
+    },
+    "leaf": {
+      "$value": "2.5rem"
+    }
+  },
+  "shadow": {
+    "$type": "shadow",
+    "brand-soft": {
+      "$value": "0 0 20px 0 var(--color-shadow-brand)"
+    },
+    "brand-md": {
+      "$value": "0 0 35px 0 var(--color-shadow-brand)"
+    },
+    "brand-lg": {
+      "$value": "0 0 40px 0 var(--color-shadow-brand)"
+    },
+    "brand-hover": {
+      "$value": "0 2px 35px 0 var(--color-shadow-brand)"
+    },
+    "brand-drop": {
+      "$value": "0 20px 0 0 var(--color-shadow-brand)"
+    },
+    "box": {
+      "$value": "0 2px 4px var(--color-shadow-box)"
+    },
+    "card-soft": {
+      "$value": "0 4px 25px rgba(0, 0, 0, 0.04)"
+    },
+    "card-ambient": {
+      "$value": "0 0 25px 0 rgba(0, 0, 0, 0.05)"
+    },
+    "card-faint": {
+      "$value": "0 4px 20px rgba(0, 0, 0, 0.02)"
+    },
+    "card-subtle": {
+      "$value": "0 4px 20px rgba(0, 0, 0, 0.03)"
+    },
+    "card-hairline": {
+      "$value": "0 2px 16px rgba(15, 23, 42, 0.06)"
+    },
+    "card-raised": {
+      "$value": "0 2px 12px 0 rgba(0, 0, 0, 0.08)"
+    },
+    "elevated": {
+      "$value": "0 10px 40px rgba(15, 23, 42, 0.08)"
+    },
+    "elevated-soft": {
+      "$value": "0 10px 40px rgba(15, 23, 42, 0.06)"
+    },
+    "elevated-tight": {
+      "$value": "0 10px 35px rgba(15, 23, 42, 0.08)"
+    },
+    "float": {
+      "$value": "0 20px 80px rgba(15, 23, 42, 0.08)"
+    },
+    "float-hover": {
+      "$value": "0 20px 60px rgba(15, 23, 42, 0.12)"
+    },
+    "float-wide": {
+      "$value": "0 8px 40px rgba(15, 23, 42, 0.12)"
+    },
+    "float-strong": {
+      "$value": "0 16px 35px rgba(15, 23, 42, 0.22)"
+    },
+    "pop": {
+      "$value": "0 4px 15px -3px rgba(0, 0, 0, 0.1)"
+    },
+    "pop-wide": {
+      "$value": "0 8px 40px rgba(0, 0, 0, 0.08)"
+    },
+    "modal": {
+      "$value": "0 25px 80px rgba(15, 23, 42, 0.2)"
+    },
+    "lightbox": {
+      "$value": "0 25px 70px rgba(0, 0, 0, 0.35)"
+    }
+  },
+  "dropShadow": {
+    "$type": "shadow",
+    "soft": {
+      "$value": "0 10px 30px rgba(0, 0, 0, 0.04)"
+    },
+    "amber-sm": {
+      "$value": "0 1px 4px rgba(251, 191, 36, 0.35)"
+    },
+    "amber-md": {
+      "$value": "0 2px 8px rgba(234, 179, 8, 0.45)"
+    }
+  },
+  "blur": {
+    "$type": "dimension",
+    "hair": {
+      "$value": "1px"
+    },
+    "thin": {
+      "$value": "2px"
+    },
+    "mist": {
+      "$value": "50px"
+    },
+    "orb": {
+      "$value": "70px"
+    },
+    "haze": {
+      "$value": "200px"
+    }
+  },
+  "animation": {
+    "$type": "string",
+    "slide-up": {
+      "$value": "slide-up 0.25s ease-out"
+    },
+    "fade-in": {
+      "$value": "fade-in 0.4s ease-out both"
+    },
+    "fade": {
+      "$value": "fade 0.5s"
+    },
+    "blink": {
+      "$value": "blink 1s step-end infinite"
+    },
+    "blink-caret": {
+      "$value": "blink-caret 0.75s step-end infinite"
+    },
+    "sway": {
+      "$value": "sway 3s ease-in-out forwards"
+    },
+    "shimmer": {
+      "$value": "shimmer 1.6s linear infinite"
+    },
+    "spin-glow": {
+      "$value": "spin-glow 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite"
+    },
+    "accordion-down": {
+      "$value": "accordion-down 0.3s ease-in-out"
+    },
+    "accordion-up": {
+      "$value": "accordion-up 0.3s ease-in-out"
+    }
+  },
+  "zIndex": {
+    "$type": "number",
+    "raised": {
+      "$value": "10"
+    },
+    "sticky": {
+      "$value": "50"
+    },
+    "drawer": {
+      "$value": "70"
+    },
+    "dropdown": {
+      "$value": "60"
+    },
+    "overlay": {
+      "$value": "100"
+    },
+    "overlay-content": {
+      "$value": "105"
+    },
+    "modal": {
+      "$value": "110"
+    },
+    "modal-content": {
+      "$value": "115"
+    },
+    "modal-nested": {
+      "$value": "120"
+    },
+    "popover": {
+      "$value": "999"
+    },
+    "top-layer": {
+      "$value": "2000"
+    },
+    "top-layer-content": {
+      "$value": "3000"
+    },
+    "toast": {
+      "$value": "9999"
+    },
+    "max": {
+      "$value": "10001"
+    }
+  }
+}

package/src/rich-content.css

@@ -0,0 +1,351 @@
+/*
+ * Rich content: typography for rendered HTML such as articles and descriptions, plus
+ * the editor preview and Tiptap editing surface.
+ *
+ * Lists get `padding-inline-start: 1.5rem`, `.5rem` block margins and a 1.8 line height, and h2
+ * inherits the body color. Every direction-dependent property is logical (`ps-*`, `border-s-*`,
+ * `rounded-e-*`), so the same styles read correctly in RTL and LTR.
+ *
+ * The editor surfaces use literal Tailwind v3 palette values, which differ from Tailwind v4's.
+ */
+
+@layer components {
+  /* ---------------------------------------------------------------- Rendered content */
+
+  .avero-rich-content {
+    @apply max-w-full space-y-3 overflow-hidden text-base leading-8 break-words text-gray-700;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+
+    & h2 {
+      @apply mt-6 mb-3 text-xl leading-snug font-bold sm:text-2xl;
+    }
+
+    & h3 {
+      @apply mt-5 mb-2.5 text-lg font-bold text-gray-800 sm:text-xl;
+    }
+
+    & p {
+      @apply mb-4 max-w-full text-base leading-8 text-gray-700;
+    }
+
+    & strong,
+    & b {
+      @apply font-bold text-gray-900;
+    }
+
+    & a {
+      @apply text-indigo-600 underline hover:text-indigo-800;
+    }
+
+    & ol,
+    & ul {
+      @apply my-2 list-outside space-y-2 ps-6 text-gray-700;
+    }
+
+    & ol {
+      @apply list-decimal;
+    }
+
+    & ul {
+      @apply list-disc;
+    }
+
+    & li {
+      @apply leading-prose my-1 text-base;
+    }
+
+    & li > p,
+    & li > div {
+      @apply m-0 inline p-0;
+    }
+
+    & blockquote {
+      @apply relative my-4 rounded-e-lg border-s-4 border-indigo-500 bg-indigo-50/30 py-2.5 ps-4 pe-2 text-gray-600 italic;
+    }
+
+    & figure {
+      @apply my-5 flex max-w-full flex-col items-center;
+    }
+
+    & img {
+      @apply mx-auto my-3 block h-auto max-w-full rounded-xl object-contain shadow-md;
+    }
+
+    & table {
+      @apply w-full min-w-full border-collapse divide-y divide-gray-200 text-start text-sm;
+    }
+
+    & tbody {
+      @apply divide-y divide-gray-100 bg-white;
+    }
+
+    & tr {
+      @apply border-b border-gray-200 hover:bg-gray-50/50;
+    }
+
+    & th {
+      @apply border border-gray-200 bg-gray-100 p-2.5 text-start font-bold whitespace-nowrap text-gray-800;
+    }
+
+    & td {
+      @apply border border-gray-200 p-2.5 text-start align-top text-gray-700;
+    }
+  }
+
+  /* ---------------------------------------------------------------- Editor preview */
+
+  .avero-rich-content-editor {
+    & h1 {
+      margin: 1rem 0;
+      font-size: 1.75rem;
+      font-weight: 800;
+    }
+
+    & h2 {
+      margin: 0.9rem 0;
+      font-size: 1.4rem;
+      font-weight: 700;
+    }
+
+    & p {
+      margin: 0.5rem 0;
+      line-height: 1.8rem;
+    }
+
+    & ul,
+    & ol {
+      margin-block: 0.5rem;
+      padding-inline-start: 1.5rem;
+      list-style-position: outside;
+    }
+
+    & ul {
+      list-style-type: disc;
+    }
+
+    & ol {
+      list-style-type: decimal;
+    }
+
+    & li {
+      margin-block: 0.25rem;
+      line-height: 1.8;
+    }
+
+    & li > p,
+    & li > div {
+      display: inline;
+      margin: 0;
+      padding: 0;
+    }
+
+    & a {
+      color: #2563eb;
+      text-decoration: underline;
+    }
+
+    & blockquote {
+      color: #6b7280;
+      border-inline-start: 3px solid #3b82f6;
+      padding-inline-start: 1rem;
+      font-style: italic;
+    }
+  }
+
+  /* ---------------------------------------------------------------- Question content */
+
+  /*
+   * Only lists are styled here; everything else is inherited from the page, so the variant
+   * deliberately carries no typography of its own.
+   */
+  .avero-rich-content-question {
+    & ol,
+    & ul {
+      @apply my-2 list-outside space-y-2 ps-6;
+    }
+
+    & ol {
+      @apply list-decimal;
+    }
+
+    & ul {
+      @apply list-disc;
+    }
+
+    & li {
+      @apply leading-prose my-1;
+    }
+
+    & li > p,
+    & li > div {
+      @apply m-0 inline p-0;
+    }
+  }
+
+  /* ---------------------------------------------------------------- Tiptap editing surface */
+
+  .avero-editor-content .tiptap {
+    min-height: inherit;
+    text-align: start;
+    outline: none;
+    padding: 1rem 1.25rem;
+
+    & > * + * {
+      margin-top: 0.5em;
+    }
+
+    & p {
+      color: #374151;
+      font-size: 0.95rem;
+      line-height: 1.8;
+    }
+
+    & h1 {
+      color: #111827;
+      margin-top: 0.75em;
+      font-size: 1.75rem;
+      font-weight: 800;
+      line-height: 1.4;
+    }
+
+    & h2 {
+      color: #1f2937;
+      margin-top: 0.75em;
+      font-size: 1.4rem;
+      font-weight: 700;
+      line-height: 1.5;
+    }
+
+    & h3 {
+      color: #374151;
+      margin-top: 0.5em;
+      font-size: 1.15rem;
+      font-weight: 600;
+      line-height: 1.6;
+    }
+
+    & ul {
+      padding-inline-start: 1.5rem;
+      list-style-type: disc;
+    }
+
+    & ol {
+      padding-inline-start: 1.5rem;
+      list-style-type: decimal;
+    }
+
+    & li {
+      margin-bottom: 0.25rem;
+      line-height: 1.8;
+    }
+
+    & li p {
+      margin: 0;
+    }
+
+    & blockquote {
+      color: #6b7280;
+      border-inline-start: 4px solid #d1d5db;
+      margin: 1rem 0;
+      padding-inline-start: 1rem;
+      font-style: italic;
+    }
+
+    & pre {
+      color: #86efac;
+      text-align: left;
+      direction: ltr;
+      background: #1e293b;
+      border-radius: 0.75rem;
+      padding: 1rem 1.25rem;
+      font-family: var(--font-code);
+      font-size: 0.85rem;
+      overflow-x: auto;
+    }
+
+    & code {
+      color: #dc2626;
+      background: #f3f4f6;
+      border-radius: 0.25rem;
+      padding: 0.15rem 0.4rem;
+      font-family: var(--font-code);
+      font-size: 0.85em;
+    }
+
+    & pre code {
+      color: inherit;
+      background: none;
+      border-radius: 0;
+      padding: 0;
+    }
+
+    & hr {
+      border: none;
+      border-top: 2px solid #e5e7eb;
+      margin: 1.5rem 0;
+    }
+
+    & img {
+      border-radius: 0.75rem;
+      max-width: 100%;
+      margin: 0.75rem 0;
+    }
+
+    & a {
+      color: #2563eb;
+      cursor: pointer;
+      text-decoration: underline;
+    }
+
+    & table {
+      border-collapse: collapse;
+      table-layout: auto;
+      width: 100%;
+      margin: 1rem 0;
+      overflow: hidden;
+    }
+
+    & th {
+      text-align: start;
+      color: #111827;
+      background-color: #f3f4f6;
+      border: 1px solid #d1d5db;
+      padding: 0.6rem 0.75rem;
+      font-weight: 700;
+      position: relative;
+    }
+
+    & td {
+      vertical-align: top;
+      text-align: start;
+      color: #374151;
+      border: 1px solid #e5e7eb;
+      padding: 0.5rem 0.75rem;
+      position: relative;
+    }
+
+    & .selectedCell::after {
+      z-index: 2;
+      content: "";
+      pointer-events: none;
+      background: #6366f126;
+      position: absolute;
+      inset: 0;
+    }
+
+    & p.is-editor-empty:first-child::before {
+      content: attr(data-placeholder);
+      float: inline-start;
+      color: #9ca3af;
+      pointer-events: none;
+      height: 0;
+    }
+
+    & .ProseMirror-selectednode {
+      outline-offset: 2px;
+      border-radius: 0.5rem;
+      outline: 2px solid #6366f1;
+    }
+  }
+}