@wix/web5-core 1.56.0

package/src/styles/tailwind-theme.css

@@ -0,0 +1,138 @@
+/*
+ * Tailwind v4 theme bridge — maps CSS custom properties (from base-tokens.css)
+ * to Tailwind's theme system so utilities like `bg-primary`, `text-muted-foreground`
+ * resolve correctly.
+ *
+ * This file must be @import-ed by the consuming app's CSS entry point
+ * alongside the Tailwind directives.
+ */
+
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-border-subtle: var(--border-subtle);
+  --color-surface-muted: var(--surface-muted);
+  --color-surface-alt: var(--surface-alt);
+  --color-surface-card-border: var(--surface-card-border);
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  /* Semantic text colors */
+  --color-text-body: var(--body-text-color);
+  --color-text-muted: var(--text-muted);
+  --color-text-accent: var(--text-accent);
+  --color-text-accent-hover: var(--text-accent-hover);
+  --color-accent-border: var(--accent-border);
+
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  --color-sidebar: hsl(var(--sidebar));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+  --shadow-sticky-header: var(--shadow-sticky-header);
+
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+
+  /* Section container max-width */
+  --container-section: 1080px;
+  /* Centered max-width for shared SectionTitle (title + single-row description cap) */
+  --container-section-title: 850px;
+
+  /* Section title (shared SectionTitle) — 50/48, weight 600, centered */
+  --text-section-title: 50px;
+  --leading-section-title: 48px;
+  /* Section title on mobile (< md / 768px) — 32/44 */
+  --text-section-title-mobile: 32px;
+  --leading-section-title-mobile: 44px;
+
+  /* Search input placeholder */
+  --text-search-input-hint: 14px;
+
+  /* Table / comparison text sizes */
+  --text-table-body: 13px;
+  --text-table-label: 14px;
+  --text-table-header: 15px;
+  --text-body-sm: var(--body-small-text-font-size);
+  --text-callout: 24px;
+  --text-callout-block: 24px;
+  --text-callout-block-lg: 30px;
+  --text-callout-block-xl: 36px;
+
+  /* Table / comparison line heights */
+  --leading-table-body: 17px;
+  --leading-table-label: 17px;
+  --leading-table-header: 20px;
+  --leading-body-sm: var(--body-small-text-line-height);
+  --leading-callout: 36px;
+
+  /* Placement card body copy — short framing / conversation answers.
+     Figma 128:5257 (Web5_Proto): 20/30, medium weight body with bold
+     leading-phrase emphasis. Used by `PlacementGeneralTextSection` (the
+     placement variant of the fallback section). */
+  --text-placement-body: 20px;
+  --leading-placement-body: 30px;
+}
+
+/* Font tokens use @theme inline so utilities emit `font-family: var(--font-*)`
+   without re-declaring the variable in :root — a plain @theme value of
+   `var(--font-sans)` creates a circular self-reference and Tailwind strips
+   the declaration from the utility, leaving `.font-sans { }` empty. The
+   actual font values are defined by clients in their globals.css. */
+@theme inline {
+  --font-sans: var(--font-sans);
+  --font-serif: var(--font-serif);
+  --font-mono: var(--font-mono);
+  --font-display: var(--font-display);
+}