54 lines
2.9 KiB
JavaScript
54 lines
2.9 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
// Tokens mirror js/desktop/src/styles/globals.css. Desktop authors values in
|
|
// OKLCH; React Native's color parser is not guaranteed to handle oklch(), so
|
|
// we ship hex equivalents here and keep the OKLCH source in comments.
|
|
//
|
|
// Names match desktop 1:1 — components written against `bg-background`,
|
|
// `text-foreground`, etc. behave identically.
|
|
module.exports = {
|
|
content: ["./index.ts", "./src/**/*.{ts,tsx}"],
|
|
presets: [require("nativewind/preset")],
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// ---- Light tokens (desktop :root) ----
|
|
background: { DEFAULT: "#ffffff", dark: "#252525" }, // oklch(1 0 0) / oklch(0.145 0 0)
|
|
foreground: { DEFAULT: "#252525", dark: "#fafafa" }, // oklch(0.145 0 0) / oklch(0.985 0 0)
|
|
card: { DEFAULT: "#ffffff", dark: "#363636" }, // oklch(1 0 0) / oklch(0.205 0 0)
|
|
"card-foreground": { DEFAULT: "#252525", dark: "#fafafa" },
|
|
popover: { DEFAULT: "#ffffff", dark: "#363636" },
|
|
"popover-foreground": { DEFAULT: "#252525", dark: "#fafafa" },
|
|
primary: { DEFAULT: "#363636", dark: "#ebebeb" }, // oklch(0.205 0 0) / oklch(0.922 0 0)
|
|
"primary-foreground": { DEFAULT: "#fafafa", dark: "#363636" },
|
|
secondary: { DEFAULT: "#f4f4f4", dark: "#454545" }, // oklch(0.97 0 0) / oklch(0.269 0 0)
|
|
"secondary-foreground": { DEFAULT: "#363636", dark: "#fafafa" },
|
|
muted: { DEFAULT: "#f4f4f4", dark: "#454545" },
|
|
"muted-foreground": { DEFAULT: "#878787", dark: "#a6a6a6" }, // oklch(0.556 0 0) / oklch(0.708 0 0)
|
|
accent: { DEFAULT: "#f4f4f4", dark: "#454545" },
|
|
"accent-foreground": { DEFAULT: "#363636", dark: "#fafafa" },
|
|
destructive: { DEFAULT: "#dc2626", dark: "#ef4444" }, // oklch(0.577 0.245 27.325) / oklch(0.704 0.191 22.216)
|
|
border: { DEFAULT: "#dcdcdc", dark: "rgba(255,255,255,0.1)" },
|
|
input: { DEFAULT: "#dcdcdc", dark: "rgba(255,255,255,0.15)" },
|
|
ring: { DEFAULT: "#a6a6a6", dark: "#878787" }, // oklch(0.708 0 0) / oklch(0.556 0 0)
|
|
// Sidebar (drawer) tokens — desktop also defines these
|
|
sidebar: { DEFAULT: "#fafafa", dark: "#363636" },
|
|
"sidebar-foreground": { DEFAULT: "#252525", dark: "#fafafa" },
|
|
"sidebar-primary": { DEFAULT: "#363636", dark: "#6366f1" }, // chart-1 dark = oklch(0.488 0.243 264.376)
|
|
"sidebar-primary-foreground": { DEFAULT: "#fafafa", dark: "#fafafa" },
|
|
"sidebar-accent": { DEFAULT: "#f4f4f4", dark: "#454545" },
|
|
"sidebar-accent-foreground": { DEFAULT: "#363636", dark: "#fafafa" },
|
|
"sidebar-border": { DEFAULT: "#dcdcdc", dark: "rgba(255,255,255,0.1)" },
|
|
"sidebar-ring": { DEFAULT: "#a6a6a6", dark: "#878787" },
|
|
},
|
|
borderRadius: {
|
|
lg: "10px", // --radius: 0.625rem
|
|
md: "8px",
|
|
sm: "6px",
|
|
xl: "14px",
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|