ics-ui-kit 0.1.19 → 1.0.0-alpha.1

package/dist/tailwind.css

@@ -0,0 +1,408 @@
+/**
+ * Публичная точка входа ICS UI Kit для Tailwind 4.
+ *
+ * Заменяет собой tailwind.preset.js: токены дизайн-системы объявлены через
+ * @theme, а не через JS-конфиг. Подключение у потребителя:
+ *
+ *   @import "tailwindcss";
+ *   @import "ics-ui-kit/tailwind.css";
+ *   @source "../node_modules/ics-ui-kit/dist";
+ *
+ * Файл везёт токены, варианты, утилиты И базовый слой. Последний не
+ * украшение: в v4 border-* без явного цвета раскрывается в currentColor,
+ * поэтому без правила * { border-color } рамки компонентов окрасились бы
+ * в цвет текста. Переопределяется своим @layer base после импорта.
+ *
+ * @theme inline — не то же самое, что @theme. Значения токенов ссылаются на
+ * CSS-переменные темы (--primary-accent и т.п.), которые переопределяются
+ * в .dark. Без inline утилита получает var(--color-primary-accent), а это
+ * значение вычисляется один раз на :root — и застывает. Пока .dark висит на
+ * <html>, разницы не видно, но вложенный тёмный остров внутри светлой
+ * страницы сломается. С inline утилита несёт hsl(var(--primary-accent))
+ * и пересчитывается на любом элементе.
+ *
+ * По той же причине в базовом слое ниже используется @apply, а не
+ * var(--color-*): прямое обращение к переменной застыло бы на :root.
+ */
+
+@import "./theme.css";
+@import "./font-smoothing.css";
+
+@plugin "@tailwindcss/typography";
+
+/* darkMode: ["class"] из пресета */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* screens.touch: { raw: "(pointer: coarse)" } из пресета */
+@custom-variant touch (@media (pointer: coarse));
+
+@theme inline {
+	/* Цвета */
+	--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-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-input: hsl(var(--input));
+	--color-ring: hsl(var(--ring));
+	--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-bg: hsl(var(--sidebar-bg));
+	--color-primary: hsl(var(--primary));
+	--color-primary-accent: hsl(var(--primary-accent));
+	--color-primary-accent-hover: hsl(var(--primary-accent-hover));
+	--color-primary-fg: hsl(var(--primary-fg));
+	--color-primary-bg: hsl(var(--primary-bg));
+	--color-primary-border: hsl(var(--primary-border));
+	--color-primary-bg-hover: hsl(var(--primary-bg-hover));
+	--color-primary-hover: hsl(var(--primary-hover));
+	--color-primary-foreground: hsl(var(--primary-foreground));
+	--color-secondary: hsl(var(--secondary));
+	--color-secondary-accent: hsl(var(--secondary-accent));
+	--color-secondary-fg: hsl(var(--secondary-fg));
+	--color-secondary-bg: hsl(var(--secondary-bg));
+	--color-secondary-border: hsl(var(--secondary-border));
+	--color-secondary-bg-hover: hsl(var(--secondary-bg-hover));
+	--color-secondary-hover: hsl(var(--secondary-hover));
+	--color-secondary-foreground: hsl(var(--secondary-foreground));
+	--color-tertiary-accent: hsl(var(--tertiary-accent));
+	--color-inverse-primary-bg: hsl(var(--inverse-primary-bg));
+	--color-inverse-secondary-bg: hsl(var(--inverse-secondary-bg));
+	--color-inverse-hover: hsl(var(--inverse-hover));
+	--color-inverse-active: hsl(var(--inverse-active));
+	--color-inverse-border: hsl(var(--inverse-border));
+	--color-inverse-muted: hsl(var(--inverse-muted));
+	--color-inverse-secondary-fg: hsl(var(--inverse-secondary-fg));
+	--color-inverse-primary-fg: hsl(var(--inverse-primary-fg));
+	--color-status-neutral: hsl(var(--status-default));
+	--color-status-neutral-hover: hsl(var(--status-default-hover));
+	--color-status-neutral-border: hsl(var(--status-default-border));
+	--color-status-neutral-muted: hsl(var(--status-default-muted));
+	--color-status-neutral-bg: hsl(var(--status-default-bg));
+	--color-status-neutral-bg-hover: hsl(var(--status-default-bg-hover));
+	--color-status-neutral-fg: hsl(var(--status-default-fg));
+	--color-status-info: hsl(var(--status-info));
+	--color-status-info-fg: hsl(var(--status-info-fg));
+	--color-status-info-bg: hsl(var(--status-info-bg));
+	--color-status-info-primary-bg: hsl(var(--status-info-primary-bg));
+	--color-status-info-bg-hover: hsl(var(--status-info-bg-hover));
+	--color-status-info-primary-border: hsl(var(--status-info-primary-border));
+	--color-status-info-secondary-border: hsl(var(--status-info-secondary-border));
+	--color-status-info-hover: hsl(var(--status-info-hover));
+	--color-status-success: hsl(var(--status-success));
+	--color-status-success-fg: hsl(var(--status-success-fg));
+	--color-status-success-bg: hsl(var(--status-success-bg));
+	--color-status-success-primary-bg: hsl(var(--status-success-primary-bg));
+	--color-status-success-bg-hover: hsl(var(--status-success-bg-hover));
+	--color-status-success-primary-border: hsl(var(--status-success-primary-border));
+	--color-status-success-secondary-border: hsl(var(--status-success-secondary-border));
+	--color-status-success-hover: hsl(var(--status-success-hover));
+	--color-status-warning: hsl(var(--status-warning));
+	--color-status-warning-fg: hsl(var(--status-warning-fg));
+	--color-status-warning-bg: hsl(var(--status-warning-bg));
+	--color-status-warning-primary-bg: hsl(var(--status-warning-primary-bg));
+	--color-status-warning-bg-hover: hsl(var(--status-warning-bg-hover));
+	--color-status-warning-primary-border: hsl(var(--status-warning-primary-border));
+	--color-status-warning-secondary-border: hsl(var(--status-warning-secondary-border));
+	--color-status-warning-hover: hsl(var(--status-warning-hover));
+	--color-status-error: hsl(var(--status-error));
+	--color-status-error-fg: hsl(var(--status-error-fg));
+	--color-status-error-bg: hsl(var(--status-error-bg));
+	--color-status-error-primary-bg: hsl(var(--status-error-primary-bg));
+	--color-status-error-bg-hover: hsl(var(--status-error-bg-hover));
+	--color-status-error-primary-border: hsl(var(--status-error-primary-border));
+	--color-status-error-secondary-border: hsl(var(--status-error-secondary-border));
+	--color-status-error-hover: hsl(var(--status-error-hover));
+	--color-alpha-10: hsl(var(--alpha-90));
+	--color-alpha-20: hsl(var(--alpha-80));
+	--color-alpha-30: hsl(var(--alpha-70));
+	--color-alpha-40: hsl(var(--alpha-60));
+	--color-alpha-50: hsl(var(--alpha-50));
+	--color-alpha-60: hsl(var(--alpha-40));
+	--color-alpha-70: hsl(var(--alpha-30));
+	--color-alpha-80: hsl(var(--alpha-20));
+	--color-alpha-90: hsl(var(--alpha-10));
+	--color-alpha-92: hsl(var(--alpha-08));
+	--color-alpha-95: hsl(var(--alpha-05));
+	--color-alpha-97: hsl(var(--alpha-03));
+	--color-alpha-high-10: hsl(var(--alpha-high-90));
+	--color-alpha-high-20: hsl(var(--alpha-high-80));
+	--color-alpha-high-30: hsl(var(--alpha-high-70));
+	--color-alpha-high-40: hsl(var(--alpha-high-60));
+	--color-alpha-high-50: hsl(var(--alpha-high-50));
+	--color-alpha-high-60: hsl(var(--alpha-high-40));
+	--color-alpha-high-70: hsl(var(--alpha-high-30));
+	--color-alpha-high-80: hsl(var(--alpha-high-20));
+	--color-alpha-high-90: hsl(var(--alpha-high-10));
+	--color-alpha-high-92: hsl(var(--alpha-high-08));
+	--color-alpha-high-95: hsl(var(--alpha-high-05));
+	--color-alpha-high-97: hsl(var(--alpha-high-03));
+	--color-alpha-accent-primary: hsl(var(--alpha-accent-primary));
+	--color-alpha-accent-secondary: hsl(var(--alpha-accent-secondary));
+	--color-shadow-scroll: hsl(222, 47%, 11%);
+	--color-palette-peony: hsl(var(--peony));
+	--color-palette-garnet: hsl(var(--garnet));
+	--color-palette-cinnamon: hsl(var(--cinnamon));
+	--color-palette-caramel: hsl(var(--caramel));
+	--color-palette-hazel: hsl(var(--hazel));
+	--color-palette-honey: hsl(var(--honey));
+	--color-palette-lemon: hsl(var(--lemon));
+	--color-palette-olive: hsl(var(--olive));
+	--color-palette-sage: hsl(var(--sage));
+	--color-palette-mint: hsl(var(--mint));
+	--color-palette-bazil: hsl(var(--bazil));
+	--color-palette-spruce: hsl(var(--spruce));
+	--color-palette-aqua: hsl(var(--aqua));
+	--color-palette-azure: hsl(var(--azure));
+	--color-palette-tiffany: hsl(var(--tiffany));
+	--color-palette-marine: hsl(var(--marine));
+	--color-palette-turquoise: hsl(var(--turquoise));
+	--color-palette-frost: hsl(var(--frost));
+	--color-palette-bosphorus: hsl(var(--bosphorus));
+	--color-palette-lavender: hsl(var(--lavender));
+	--color-palette-orchid: hsl(var(--orchid));
+	--color-palette-lilac: hsl(var(--lilac));
+	--color-palette-plume: hsl(var(--plume));
+	--color-palette-velvet: hsl(var(--velvet));
+
+	/* Радиусы */
+	--radius-lg: var(--radius);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-xs: calc(var(--radius) - 6px);
+
+	/* Тени */
+	--shadow-soft-base: 0 2px 4px 0 rgba(15, 23, 42, 0.12), 0 1px 2px -1px rgba(15, 23, 42, 0.12);
+	--shadow-soft-sm: 0 2px 4px 0 rgba(15, 23, 42, 0.06);
+	--shadow-soft-md: 0 2px 4px -2px rgba(15, 23, 42, 0.12), 0 4px 8px -1px rgba(15, 23, 42, 0.12);
+	--shadow-soft-lg: 0 8px 16px -4px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.12);
+	--shadow-soft-xl: 0 6px 12px -6px rgba(15, 23, 42, 0.12), 0 16px 24px -6px rgba(15, 23, 42, 0.12);
+	--shadow-soft-2xl: 0 24px 48px -12px rgba(15, 23, 42, 0.24);
+	--shadow-focus: 0 0 0 1px hsl(var(--primary-bg)), 0 0 0 2px hsl(var(--focus));
+	--shadow-inverse-focus: 0 0 0 1px hsl(var(--inverse-primary-bg)), 0 0 0 2px hsl(var(--inverse-muted));
+	--shadow-focus-error: 0 0 0 1px hsl(var(--status-error));
+	--shadow-hard-base: 0 1px 3px 0 rgba(2, 6, 23, 0.50), 0 0 0.5px 0 rgba(255, 255, 255, 0.30) inset, 0 3px 8px 0 rgba(2, 6, 23, 0.35), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset;
+	--shadow-hard-sm: 0 1px 3px 0 rgba(2, 6, 23, 0.40), 0 0 0.5px 0 rgba(255, 255, 255, 0.30) inset, 0 0.5px 0 0 rgba(255, 255, 255, 0.10) inset, 0 0 0.5px 0 rgba(2, 6, 23, 0.50);
+	--shadow-hard-md: 0 1px 3px 0 rgba(15, 23, 42, 0.50), 0 0 0.5px 0 rgba(255, 255, 255, 0.30) inset, 0 5px 12px 0 rgba(15, 23, 42, 0.35), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset;
+	--shadow-hard-lg: 0 2px 5px 0 rgba(15, 23, 42, 0.35), 0 0 0.5px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 16px 0 rgba(2, 6, 23, 0.35), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset;
+	--shadow-hard-xl: 0 3px 5px 0 rgba(2, 6, 23, 0.35), 0 0 0.5px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 24px 0 rgba(2, 6, 23, 0.45), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset;
+	--shadow-hard-2xl: 0 4px 6px 0 rgba(2, 6, 23, 0.35), 0 0 0.5px 0 rgba(255, 255, 255, 0.35) inset, 0 12px 28px 0 rgba(2, 6, 23, 0.45), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset;
+
+	/* Интерлиньяж */
+	--leading-11: 2.75rem;
+	--leading-12: 3.75rem;
+	--leading-13: 4.5rem;
+	--leading-14: 5.5rem;
+	--leading-none: 100%;
+
+	/* Типографика */
+	--text-2xs: 0.5rem;
+	--text-2xs--line-height: 0.5rem;
+	--text-base: 1rem;
+	--text-base--line-height: 1.375rem;
+	--text-lg: 1.125rem;
+	--text-lg--line-height: 1.5rem;
+	--text-4xl: 2.25rem;
+	--text-4xl--line-height: 2.75rem;
+	--text-4xl--letter-spacing: -0.02em;
+	--text-5xl: 3rem;
+	--text-5xl--line-height: 3.75rem;
+	--text-5xl--letter-spacing: -0.02em;
+	--text-6xl: 3.75rem;
+	--text-6xl--line-height: 4.5rem;
+	--text-6xl--letter-spacing: -0.02em;
+	--text-7xl: 4.5rem;
+	--text-7xl--line-height: 5.5rem;
+	--text-7xl--letter-spacing: -0.02em;
+
+	/* Шрифты */
+	--font-sans: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+	--font-mono: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+	/* Анимации */
+	--animate-indeterminate-bar: indeterminate-bar 1.5s cubic-bezier(.65,.815,.735,.395) infinite;
+	--animate-collapsible-down: collapsible-down 200ms cubic-bezier(0.22,1,0.36,1);
+	--animate-collapsible-up: collapsible-up 200ms cubic-bezier(0.22,1,0.36,1);
+}
+
+@keyframes indeterminate-bar {
+	0% {
+		transform: translate(-50%) scaleX(.2);
+	}
+	100% {
+		transform: translate(100%) scaleX(1);
+	}
+}
+
+@keyframes collapsible-down {
+	from {
+		height: 0;
+	}
+	to {
+		height: var(--radix-collapsible-content-height);
+	}
+}
+
+@keyframes collapsible-up {
+	from {
+		height: var(--radix-collapsible-content-height);
+	}
+	to {
+		height: 0;
+	}
+}
+
+@utility shadow-glass-sm {
+	box-shadow: var(--shadow-glass-sm);
+}
+
+@utility shadow-glass-md {
+	box-shadow: var(--shadow-glass-md);
+}
+
+@utility shadow-glass-lg {
+	box-shadow: var(--shadow-glass-lg);
+}
+
+/*
+ * theme.extend.typography из пресета. В v4 плагин typography не берёт
+ * конфигурацию из JS, поэтому переменные и правила перенесены сюда.
+ *
+ * Блок намеренно вне @layer: правила самого плагина едут в слои
+ * components/utilities, и любой слой они бы перебили. Неслоёные стили
+ * выигрывают у слоёных, так что это единственный способ гарантировать,
+ * что кастомизация кита возьмёт верх над дефолтами плагина.
+ */
+.prose {
+	--tw-prose-body: hsl(var(--primary-fg));
+	--tw-prose-headings: hsl(var(--primary-fg));
+	--tw-prose-lead: hsl(var(--primary-fg));
+	--tw-prose-links: hsl(var(--primary-fg));
+	--tw-prose-bold: hsl(var(--primary-fg));
+	--tw-prose-counters: hsl(var(--primary-fg));
+	--tw-prose-bullets: hsl(var(--primary-fg));
+	--tw-prose-hr: hsl(var(--secondary-border));
+	--tw-prose-quotes: hsl(var(--primary-fg));
+	--tw-prose-quote-borders: hsl(var(--secondary-border));
+	--tw-prose-captions: hsl(var(--primary-fg));
+	--tw-prose-code: hsl(var(--primary-fg));
+	--tw-prose-pre-code: hsl(var(--primary-bg));
+	--tw-prose-pre-bg: hsl(var(--primary-accent));
+	--tw-prose-th-borders: hsl(var(--secondary-border));
+	--tw-prose-td-borders: hsl(var(--secondary-border));
+
+	a {
+		text-underline-offset: 24%;
+	}
+	abbr {
+		text-underline-offset: 24%;
+	}
+	ins {
+		text-underline-offset: 24%;
+	}
+	kbd {
+		color: hsl(var(--muted));
+		background: hsl(var(--secondary-bg));
+		border: 1px solid hsl(var(--secondary-border));
+		box-shadow: none;
+		padding: 0.125rem 0.25rem;
+	}
+	figcaption {
+		font-style: italic;
+	}
+	ul {
+		margin-top: 1.25rem;
+		margin-left: 1.5rem;
+	}
+	ol {
+		margin-top: 1.25rem;
+		margin-left: 1.5rem;
+	}
+	code {
+		background: hsl(var(--secondary-bg-hover));
+		border-radius: calc(var(--radius) - 4px);
+		padding: 0.2rem 0.3rem;
+		font-weight: 700;
+		line-height: 1.25rem;
+		font-family: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+		&::before {
+			content: "" !important;
+		}
+		&::after {
+			content: "" !important;
+		}
+	}
+	pre {
+		border: 1px solid hsl(var(--secondary-border));
+	}
+	blockquote {
+		padding-inline-start: 1.5rem;
+	}
+	table {
+		margin-top: 1.25rem !important;
+		margin-bottom: 1.25rem;
+		border-collapse: collapse;
+		border: 1px solid hsl(var(--secondary-border));
+		& tbody tr:nth-child(odd) {
+			background-color: hsl(var(--secondary-bg-hover));
+		}
+	}
+	th {
+		border: 1px solid hsl(var(--secondary-border));
+		padding: 0.5rem 1rem;
+	}
+	td {
+		border: 1px solid hsl(var(--secondary-border));
+		padding: 0.5rem 1rem;
+	}
+}
+
+/*
+ * Базовый слой кита. Переопределяется своим @layer base после импорта.
+ */
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background font-sans text-foreground;
+	}
+	:root {
+		@apply font-smoothing;
+	}
+
+	* {
+		scrollbar-width: thin;
+		scrollbar-color: hsl(var(--secondary-border)) transparent;
+	}
+
+	/* Дефолты, изменившиеся в Tailwind 4 */
+
+	/* v4 отдаёт кнопкам cursor: default; кит рассчитан на pointer */
+	button:not(:disabled),
+	[role="button"]:not(:disabled) {
+		cursor: pointer;
+	}
+
+	/* v4 красит плейсхолдер текущим цветом с прозрачностью 50%; кит — токеном muted */
+	input::placeholder,
+	textarea::placeholder {
+		color: hsl(var(--muted));
+	}
+}
+
+@utility underline {
+	text-decoration: underline;
+	text-underline-offset: 24%;
+}