nntrivi2001
1f5c04e765
- Light mode moves to Claude's ivory/terracotta family: page #e8e5da, cards #f5f3ec (a notch below Claude's ivory, no pure-white step), warm borders and card shadow; dark mode is untouched. - The surface ramp rises in lightness with its index in BOTH themes, so a card sits brighter than the page and every hover lifts instead of dims. - Light --accent #a34a28 (the brand #cc785c is 3.1:1 on ivory); --fg-muted held at >=4.5:1; new --syn-* syntax tokens, dark keeps its pastels. - Status/accent fills (bg-*/N, border-*/N) compile to color-mix against --tint-base instead of rgb(/a), so a chip is one colour on every surface. - Hardcoded dark-only hovers (hover:text-white, hover:bg-white/5) replaced by tokens in DateTimePicker and SessionDrillIn.
123 lines
4.8 KiB
JavaScript
123 lines
4.8 KiB
JavaScript
/**
|
|
* @file tailwind.config.js
|
|
* @description Tailwind CSS configuration — content globs and the dashboard's
|
|
* dark/light color tokens. Token values live in `src/index.css` as CSS
|
|
* variables (`:root` = light, `.dark` = dark); this file only wires Tailwind
|
|
* class names to them. RGB-triplet vars (not hex) so `<alpha-value>` keeps
|
|
* opacity modifiers like `bg-surface-2/70` working under either theme.
|
|
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
|
*/
|
|
|
|
/**
|
|
* A status/accent FILL is pre-mixed against one fixed base, never translucent.
|
|
*
|
|
* `bg-status-success/10` used to emit `rgb(var(--status-success) / 0.1)`, which
|
|
* composites with whatever is behind it — so the one "success" chip rendered as
|
|
* five different colours over the five surface steps, and washed out badly on
|
|
* the light theme's near-white cards. Mixing against `--tint-base` (the card
|
|
* surface of the active theme) gives an OPAQUE colour: the same chip reads the
|
|
* same on the page, in a card, in a modal and inside an input row.
|
|
*
|
|
* Applied to `backgroundColor`/`borderColor` only. `text-status-warning/80` and
|
|
* `ring-accent/40` stay genuinely translucent — text and rings sit on top of a
|
|
* fill rather than replacing it — and the surface family keeps its alpha too,
|
|
* or every modal scrim would turn solid.
|
|
*/
|
|
const tint =
|
|
(variable) =>
|
|
({ opacityValue }) => {
|
|
const alpha = Number(opacityValue);
|
|
// No modifier at all: Tailwind passes `var(--tw-bg-opacity, 1)` here.
|
|
if (!Number.isFinite(alpha) || alpha >= 1) return `rgb(var(${variable}))`;
|
|
return `color-mix(in srgb, rgb(var(${variable})) ${alpha * 100}%, rgb(var(--tint-base)))`;
|
|
};
|
|
|
|
const tinted = {
|
|
accent: {
|
|
DEFAULT: tint("--accent"),
|
|
hover: tint("--accent-hover"),
|
|
muted: "color-mix(in srgb, rgb(var(--accent)) 15%, rgb(var(--tint-base)))",
|
|
},
|
|
status: {
|
|
success: tint("--status-success"),
|
|
danger: tint("--status-danger"),
|
|
warning: tint("--status-warning"),
|
|
},
|
|
};
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
darkMode: "class",
|
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
surface: {
|
|
0: "rgb(var(--surface-0) / <alpha-value>)",
|
|
1: "rgb(var(--surface-1) / <alpha-value>)",
|
|
2: "rgb(var(--surface-2) / <alpha-value>)",
|
|
3: "rgb(var(--surface-3) / <alpha-value>)",
|
|
4: "rgb(var(--surface-4) / <alpha-value>)",
|
|
5: "rgb(var(--surface-5) / <alpha-value>)",
|
|
},
|
|
border: {
|
|
DEFAULT: "rgb(var(--border) / <alpha-value>)",
|
|
light: "rgb(var(--border-light) / <alpha-value>)",
|
|
},
|
|
accent: {
|
|
DEFAULT: "rgb(var(--accent) / <alpha-value>)",
|
|
hover: "rgb(var(--accent-hover) / <alpha-value>)",
|
|
muted: "rgb(var(--accent) / 0.15)",
|
|
},
|
|
fg: {
|
|
primary: "rgb(var(--fg-primary) / <alpha-value>)",
|
|
secondary: "rgb(var(--fg-secondary) / <alpha-value>)",
|
|
muted: "rgb(var(--fg-muted) / <alpha-value>)",
|
|
},
|
|
syntax: {
|
|
comment: "rgb(var(--syn-comment) / <alpha-value>)",
|
|
string: "rgb(var(--syn-string) / <alpha-value>)",
|
|
number: "rgb(var(--syn-number) / <alpha-value>)",
|
|
keyword: "rgb(var(--syn-keyword) / <alpha-value>)",
|
|
builtin: "rgb(var(--syn-builtin) / <alpha-value>)",
|
|
function: "rgb(var(--syn-function) / <alpha-value>)",
|
|
operator: "rgb(var(--syn-operator) / <alpha-value>)",
|
|
punctuation: "rgb(var(--syn-punctuation) / <alpha-value>)",
|
|
property: "rgb(var(--syn-property) / <alpha-value>)",
|
|
tag: "rgb(var(--syn-tag) / <alpha-value>)",
|
|
plain: "rgb(var(--syn-plain) / <alpha-value>)",
|
|
add: "rgb(var(--syn-add) / <alpha-value>)",
|
|
del: "rgb(var(--syn-del) / <alpha-value>)",
|
|
},
|
|
status: {
|
|
success: "rgb(var(--status-success) / <alpha-value>)",
|
|
danger: "rgb(var(--status-danger) / <alpha-value>)",
|
|
warning: "rgb(var(--status-warning) / <alpha-value>)",
|
|
},
|
|
},
|
|
backgroundColor: tinted,
|
|
borderColor: tinted,
|
|
fontFamily: {
|
|
sans: ["Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
|
|
mono: ["JetBrains Mono", "Fira Code", "Consolas", "monospace"],
|
|
},
|
|
animation: {
|
|
"pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
|
|
"fade-in": "fadeIn 0.3s ease-out",
|
|
"slide-up": "slideUp 0.3s ease-out",
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
"0%": { opacity: "0" },
|
|
"100%": { opacity: "1" },
|
|
},
|
|
slideUp: {
|
|
"0%": { opacity: "0", transform: "translateY(8px)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|