- vite.config.di2.ts + client-di2/tsconfig.json: алиас @skin → client/src/themes (tokens, skins, generated-skins.css — единый источник токенов) - client-di2/src/themes/Di2ThemeProvider.tsx: порт логики ThemeProvider основного клиента (localStorage['skin'] → скин организации → 'iistwin'; runtime CSS кастомных скинов через generateSkinCss; data-skin/data-theme/class light|dark на <html>; контекст с toggleTheme). Ключи 'skin'/'theme' общие с iistwin — выбор синхронизируется между приложениями - main.tsx: обёртка <Di2ThemeProvider> вокруг App - tailwind.config.ts DI2: цвета hsl(var(--x) / <alpha-value>) → var(--x), радиусы → var(--radius) с каскадом calc, добавлены warning/success/info - client-di2/src/index.css: собственные HSL-тройки заменены fallback-блоками основного клиента (до гидратации), первой строкой @import общего generated-skins.css; DI2-only переменные (--card-border, --popover-border, *-border, --button-outline, --badge-outline) переопределены через color-mix от семантических токенов; удалены --opaque-button-border-intensity и hsl(from ...) relative-color вычисления; жёсткие --font-sans: Open Sans убраны (шрифты эмитит generateSkinCss из токенов скина) - client-di2/index.html: lang=ru, viewport без maximum-scale + interactive-widget=resizes-content, мега-link Google Fonts (23 семейства) заменён на Inter + DM Mono как в основном клиенте - Alpha-модификаторы семантических цветов (166 мест: bg-muted/50, border-primary/30 и т.п.) заменены на arbitrary values color-mix(in oklab, var(--x) NN%, transparent) — Tailwind v3 молча не генерирует /NN для var()-цветов; палитровые цвета (green-500/10 и т.п.) не тронуты
128 lines
4.4 KiB
TypeScript
128 lines
4.4 KiB
TypeScript
import type { Config } from "tailwindcss";
|
||
|
||
// Конфиг Tailwind субаппа DI2.
|
||
// Цвета переведены на формат основного клиента iistwin: CSS-переменные содержат
|
||
// полные значения из скинов (hsl(...)), поэтому <alpha-value> НЕ используется.
|
||
// Модификаторы прозрачности семантических цветов (bg-muted/50 и т.п.) заменены
|
||
// в исходниках на arbitrary values с color-mix — Tailwind v3 не умеет применять
|
||
// alpha-модификаторы к var()-цветам и молча не генерирует такие классы.
|
||
|
||
export default {
|
||
darkMode: ["class"],
|
||
// Глобы относительно cwd сборки (корень репозитория) — npm-скрипты всегда запускаются оттуда
|
||
content: ["./client-di2/index.html", "./client-di2/src/**/*.{js,jsx,ts,tsx}"],
|
||
theme: {
|
||
extend: {
|
||
borderRadius: {
|
||
lg: "var(--radius)",
|
||
md: "calc(var(--radius) - 2px)",
|
||
sm: "calc(var(--radius) - 4px)",
|
||
},
|
||
colors: {
|
||
// Flat / base colors (regular buttons)
|
||
background: "var(--background)",
|
||
foreground: "var(--foreground)",
|
||
border: "var(--border)",
|
||
input: "var(--input)",
|
||
ring: "var(--ring)",
|
||
card: {
|
||
DEFAULT: "var(--card)",
|
||
foreground: "var(--card-foreground)",
|
||
border: "var(--card-border)",
|
||
},
|
||
popover: {
|
||
DEFAULT: "var(--popover)",
|
||
foreground: "var(--popover-foreground)",
|
||
border: "var(--popover-border)",
|
||
},
|
||
primary: {
|
||
DEFAULT: "var(--primary)",
|
||
foreground: "var(--primary-foreground)",
|
||
border: "var(--primary-border)",
|
||
},
|
||
secondary: {
|
||
DEFAULT: "var(--secondary)",
|
||
foreground: "var(--secondary-foreground)",
|
||
border: "var(--secondary-border)",
|
||
},
|
||
muted: {
|
||
DEFAULT: "var(--muted)",
|
||
foreground: "var(--muted-foreground)",
|
||
border: "var(--muted-border)",
|
||
},
|
||
accent: {
|
||
DEFAULT: "var(--accent)",
|
||
foreground: "var(--accent-foreground)",
|
||
border: "var(--accent-border)",
|
||
},
|
||
destructive: {
|
||
DEFAULT: "var(--destructive)",
|
||
foreground: "var(--destructive-foreground)",
|
||
border: "var(--destructive-border)",
|
||
},
|
||
warning: {
|
||
DEFAULT: "var(--warning)",
|
||
foreground: "var(--warning-foreground)",
|
||
},
|
||
success: {
|
||
DEFAULT: "var(--success)",
|
||
foreground: "var(--success-foreground)",
|
||
},
|
||
info: {
|
||
DEFAULT: "var(--info)",
|
||
foreground: "var(--info-foreground)",
|
||
},
|
||
chart: {
|
||
"1": "var(--chart-1)",
|
||
"2": "var(--chart-2)",
|
||
"3": "var(--chart-3)",
|
||
"4": "var(--chart-4)",
|
||
"5": "var(--chart-5)",
|
||
},
|
||
sidebar: {
|
||
ring: "var(--sidebar-ring)",
|
||
DEFAULT: "var(--sidebar)",
|
||
foreground: "var(--sidebar-foreground)",
|
||
border: "var(--sidebar-border)",
|
||
},
|
||
"sidebar-primary": {
|
||
DEFAULT: "var(--sidebar-primary)",
|
||
foreground: "var(--sidebar-primary-foreground)",
|
||
border: "var(--sidebar-primary-border)",
|
||
},
|
||
"sidebar-accent": {
|
||
DEFAULT: "var(--sidebar-accent)",
|
||
foreground: "var(--sidebar-accent-foreground)",
|
||
border: "var(--sidebar-accent-border)",
|
||
},
|
||
status: {
|
||
online: "rgb(34 197 94)",
|
||
away: "rgb(245 158 11)",
|
||
busy: "rgb(239 68 68)",
|
||
offline: "rgb(156 163 175)",
|
||
},
|
||
},
|
||
fontFamily: {
|
||
sans: ["var(--font-sans)"],
|
||
serif: ["var(--font-serif)"],
|
||
mono: ["var(--font-mono)"],
|
||
},
|
||
keyframes: {
|
||
"accordion-down": {
|
||
from: { height: "0" },
|
||
to: { height: "var(--radix-accordion-content-height)" },
|
||
},
|
||
"accordion-up": {
|
||
from: { height: "var(--radix-accordion-content-height)" },
|
||
to: { height: "0" },
|
||
},
|
||
},
|
||
animation: {
|
||
"accordion-down": "accordion-down 0.2s ease-out",
|
||
"accordion-up": "accordion-up 0.2s ease-out",
|
||
},
|
||
},
|
||
},
|
||
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
|
||
} satisfies Config;
|