@archytechtor/ui 0.0.0-stage → 0.1.0

package/dist/styles/theme.css

@@ -0,0 +1,80 @@
+/*
+ * Токены @archytechtor/ui: CSS-переменные в OKLCH.
+ * Светлая тема — :root, тёмная — класс .dark на корне.
+ * Переменные лежат в @layer base: переопределение в приложении всегда побеждает,
+ * в каком бы месте файла оно ни стояло.
+ */
+@layer base {
+	:root {
+		color-scheme: light;
+		--radius: 0.625rem;
+		--background: oklch(1 0 0);
+		--foreground: oklch(0 0 0);
+		--card: oklch(1 0 0);
+		--card-foreground: oklch(0 0 0);
+		--popover: oklch(1 0 0);
+		--popover-foreground: oklch(0 0 0);
+		--primary: oklch(0 0 0);
+		--primary-foreground: oklch(0.985 0 0);
+		--secondary: oklch(0.97 0 0);
+		--secondary-foreground: oklch(0.205 0 0);
+		--muted: oklch(0.97 0 0);
+		--muted-foreground: oklch(0.556 0 0);
+		--accent: oklch(0.97 0 0);
+		--accent-foreground: oklch(0.205 0 0);
+		--destructive: oklch(0.577 0.245 27.325);
+		--destructive-foreground: oklch(0.97 0.01 17);
+		--border: oklch(0.922 0 0);
+		--input: oklch(0.922 0 0);
+		--ring: oklch(0.708 0 0);
+		--chart-1: oklch(0.809 0.105 251.813);
+		--chart-2: oklch(0.623 0.214 259.815);
+		--chart-3: oklch(0.546 0.245 262.881);
+		--chart-4: oklch(0.488 0.243 264.376);
+		--chart-5: oklch(0.424 0.199 265.638);
+		--sidebar: oklch(0.985 0 0);
+		--sidebar-foreground: oklch(0 0 0);
+		--sidebar-primary: oklch(0.205 0 0);
+		--sidebar-primary-foreground: oklch(0.985 0 0);
+		--sidebar-accent: oklch(0.97 0 0);
+		--sidebar-accent-foreground: oklch(0.205 0 0);
+		--sidebar-border: oklch(0.922 0 0);
+		--sidebar-ring: oklch(0.708 0 0);
+	}
+
+	.dark {
+		color-scheme: dark;
+		--background: oklch(0.145 0 0);
+		--foreground: oklch(0.985 0 0);
+		--card: oklch(0.205 0 0);
+		--card-foreground: oklch(0.985 0 0);
+		--popover: oklch(0.205 0 0);
+		--popover-foreground: oklch(0.985 0 0);
+		--primary: oklch(0.922 0 0);
+		--primary-foreground: oklch(0.205 0 0);
+		--secondary: oklch(0.269 0 0);
+		--secondary-foreground: oklch(0.985 0 0);
+		--muted: oklch(0.269 0 0);
+		--muted-foreground: oklch(0.708 0 0);
+		--accent: oklch(0.371 0 0);
+		--accent-foreground: oklch(0.985 0 0);
+		--destructive: oklch(0.704 0.191 22.216);
+		--destructive-foreground: oklch(0.58 0.22 27);
+		--border: oklch(1 0 0 / 10%);
+		--input: oklch(1 0 0 / 15%);
+		--ring: oklch(0.556 0 0);
+		--chart-1: oklch(0.809 0.105 251.813);
+		--chart-2: oklch(0.623 0.214 259.815);
+		--chart-3: oklch(0.546 0.245 262.881);
+		--chart-4: oklch(0.488 0.243 264.376);
+		--chart-5: oklch(0.424 0.199 265.638);
+		--sidebar: oklch(0.205 0 0);
+		--sidebar-foreground: oklch(0.985 0 0);
+		--sidebar-primary: oklch(0.488 0.243 264.376);
+		--sidebar-primary-foreground: oklch(0.985 0 0);
+		--sidebar-accent: oklch(0.269 0 0);
+		--sidebar-accent-foreground: oklch(0.985 0 0);
+		--sidebar-border: oklch(1 0 0 / 10%);
+		--sidebar-ring: oklch(0.439 0 0);
+	}
+}

package/dist/styles/utilities.css

@@ -0,0 +1,553 @@
+/*
+ * Утилиты: no-scrollbar, scroll-fade (затухание краёв прокрутки) и shimmer (блик по тексту).
+ * Подключаются из index.css.
+ */
+@utility no-scrollbar {
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+/* scroll-fade */
+@property --scroll-fade-t {
+	syntax: "<length-percentage>";
+	inherits: false;
+	initial-value: 0px;
+}
+@property --scroll-fade-b {
+	syntax: "<length-percentage>";
+	inherits: false;
+	initial-value: 0px;
+}
+@property --scroll-fade-s {
+	syntax: "<length-percentage>";
+	inherits: false;
+	initial-value: 0px;
+}
+@property --scroll-fade-e {
+	syntax: "<length-percentage>";
+	inherits: false;
+	initial-value: 0px;
+}
+@property --scroll-fade-mask {
+	syntax: "*";
+	inherits: false;
+}
+
+@theme inline {
+	@keyframes scroll-fade-reveal-t {
+		from {
+		  --scroll-fade-t: 0px;
+		}
+		to {
+		  --scroll-fade-t: var(--_scroll-fade-size-t, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+		}
+	}
+	@keyframes scroll-fade-reveal-b {
+		from {
+		  --scroll-fade-b: var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+		}
+		to {
+		  --scroll-fade-b: 0px;
+		}
+	}
+	@keyframes scroll-fade-reveal-s {
+		from {
+		  --scroll-fade-s: 0px;
+		}
+		to {
+		  --scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+		}
+	}
+	@keyframes scroll-fade-reveal-e {
+		from {
+		  --scroll-fade-e: var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+		}
+		to {
+		  --scroll-fade-e: 0px;
+		}
+	}
+}
+
+@utility scroll-fade {
+	--_scroll-fade-size-t: var(
+		--scroll-fade-t-size,
+		var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+	);
+	--_scroll-fade-size-b: var(
+		--scroll-fade-b-size,
+		var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+	);
+	--scroll-fade-block: linear-gradient(
+		to bottom,
+		transparent 0,
+		#000 var(--scroll-fade-t, 0px),
+		#000 calc(100% - var(--scroll-fade-b, 0px)),
+		transparent 100%
+	);
+	-webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+	mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+	-webkit-mask-composite: source-in;
+	mask-composite: intersect;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+
+	@supports (animation-timeline: scroll()) {
+		animation:
+		  scroll-fade-reveal-t 1ms ease-in-out,
+		  scroll-fade-reveal-b 1ms ease-in-out;
+		animation-timeline: scroll(self y), scroll(self y);
+		animation-range:
+		  0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+		  calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+		animation-fill-mode: both;
+	}
+
+	@supports not (animation-timeline: scroll()) {
+		--scroll-fade-t: var(--_scroll-fade-size-t);
+		--scroll-fade-b: var(--_scroll-fade-size-b);
+	}
+}
+
+@utility scroll-fade-y {
+	--_scroll-fade-size-t: var(
+		--scroll-fade-t-size,
+		var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+	);
+	--_scroll-fade-size-b: var(
+		--scroll-fade-b-size,
+		var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+	);
+	--scroll-fade-block: linear-gradient(
+		to bottom,
+		transparent 0,
+		#000 var(--scroll-fade-t, 0px),
+		#000 calc(100% - var(--scroll-fade-b, 0px)),
+		transparent 100%
+	);
+	-webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+	mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+	-webkit-mask-composite: source-in;
+	mask-composite: intersect;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+
+	@supports (animation-timeline: scroll()) {
+		animation:
+		  scroll-fade-reveal-t 1ms ease-in-out,
+		  scroll-fade-reveal-b 1ms ease-in-out;
+		animation-timeline: scroll(self y), scroll(self y);
+		animation-range:
+		  0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+		  calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+		animation-fill-mode: both;
+	}
+
+	@supports not (animation-timeline: scroll()) {
+		--scroll-fade-t: var(--_scroll-fade-size-t);
+		--scroll-fade-b: var(--_scroll-fade-size-b);
+	}
+}
+
+@utility scroll-fade-x {
+	--_scroll-fade-size-s: var(
+		--scroll-fade-s-size,
+		var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+	);
+	--_scroll-fade-size-e: var(
+		--scroll-fade-e-size,
+		var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+	);
+	--scroll-fade-inline: linear-gradient(
+		to right,
+		transparent 0,
+		#000 var(--scroll-fade-s, 0px),
+		#000 calc(100% - var(--scroll-fade-e, 0px)),
+		transparent 100%
+	);
+	&:where([dir="rtl"], [dir="rtl"] *) {
+		--scroll-fade-inline: linear-gradient(
+		  to left,
+		  transparent 0,
+		  #000 var(--scroll-fade-s, 0px),
+		  #000 calc(100% - var(--scroll-fade-e, 0px)),
+		  transparent 100%
+		);
+	}
+	-webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+	mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+	-webkit-mask-composite: source-in;
+	mask-composite: intersect;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+
+	@supports (animation-timeline: scroll()) {
+		animation:
+		  scroll-fade-reveal-s 1ms ease-in-out,
+		  scroll-fade-reveal-e 1ms ease-in-out;
+		animation-timeline: scroll(self inline), scroll(self inline);
+		animation-range:
+		  0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+		  calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+		animation-fill-mode: both;
+	}
+
+	@supports not (animation-timeline: scroll()) {
+		--scroll-fade-s: var(--_scroll-fade-size-s);
+		--scroll-fade-e: var(--_scroll-fade-size-e);
+	}
+}
+
+@utility scroll-fade-t {
+	--_scroll-fade-size-t: var(
+		--scroll-fade-t-size,
+		var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+	);
+	--scroll-fade-mask: linear-gradient(
+		to bottom,
+		transparent 0,
+		#000 var(--scroll-fade-t, 0px),
+		#000 100%
+	);
+	-webkit-mask-image: var(--scroll-fade-mask);
+	mask-image: var(--scroll-fade-mask);
+	-webkit-mask-composite: source-in;
+	mask-composite: intersect;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+
+	@supports (animation-timeline: scroll()) {
+		animation: scroll-fade-reveal-t 1ms ease-in-out;
+		animation-timeline: scroll(self y);
+		animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
+		animation-fill-mode: both;
+	}
+
+	@supports not (animation-timeline: scroll()) {
+		--scroll-fade-t: var(--_scroll-fade-size-t);
+	}
+}
+
+@utility scroll-fade-b {
+	--_scroll-fade-size-b: var(
+		--scroll-fade-b-size,
+		var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+	);
+	--scroll-fade-mask: linear-gradient(
+		to bottom,
+		#000 0,
+		#000 calc(100% - var(--scroll-fade-b, 0px)),
+		transparent 100%
+	);
+	-webkit-mask-image: var(--scroll-fade-mask);
+	mask-image: var(--scroll-fade-mask);
+	-webkit-mask-composite: source-in;
+	mask-composite: intersect;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+
+	@supports (animation-timeline: scroll()) {
+		animation: scroll-fade-reveal-b 1ms ease-in-out;
+		animation-timeline: scroll(self y);
+		animation-range: calc(
+		    100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
+		  )
+		  100%;
+		animation-fill-mode: both;
+	}
+
+	@supports not (animation-timeline: scroll()) {
+		--scroll-fade-b: var(--_scroll-fade-size-b);
+	}
+}
+
+@utility scroll-fade-l {
+	--_scroll-fade-size-s: var(
+		--scroll-fade-s-size,
+		var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+	);
+	--scroll-fade-mask: linear-gradient(
+		to right,
+		transparent 0,
+		#000 var(--scroll-fade-s, 0px),
+		#000 100%
+	);
+	-webkit-mask-image: var(--scroll-fade-mask);
+	mask-image: var(--scroll-fade-mask);
+	-webkit-mask-composite: source-in;
+	mask-composite: intersect;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+
+	@supports (animation-timeline: scroll()) {
+		animation: scroll-fade-reveal-s 1ms ease-in-out;
+		animation-timeline: scroll(self x);
+		animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
+		animation-fill-mode: both;
+	}
+
+	@supports not (animation-timeline: scroll()) {
+		--scroll-fade-s: var(--_scroll-fade-size-s);
+	}
+}
+
+@utility scroll-fade-r {
+	--_scroll-fade-size-e: var(
+		--scroll-fade-e-size,
+		var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+	);
+	--scroll-fade-mask: linear-gradient(
+		to right,
+		#000 0,
+		#000 calc(100% - var(--scroll-fade-e, 0px)),
+		transparent 100%
+	);
+	-webkit-mask-image: var(--scroll-fade-mask);
+	mask-image: var(--scroll-fade-mask);
+	-webkit-mask-composite: source-in;
+	mask-composite: intersect;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+
+	@supports (animation-timeline: scroll()) {
+		animation: scroll-fade-reveal-e 1ms ease-in-out;
+		animation-timeline: scroll(self x);
+		animation-range: calc(
+		    100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
+		  )
+		  100%;
+		animation-fill-mode: both;
+	}
+
+	@supports not (animation-timeline: scroll()) {
+		--scroll-fade-e: var(--_scroll-fade-size-e);
+	}
+}
+
+@utility scroll-fade-s {
+	--_scroll-fade-size-s: var(
+		--scroll-fade-s-size,
+		var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+	);
+	--scroll-fade-mask: linear-gradient(
+		to right,
+		transparent 0,
+		#000 var(--scroll-fade-s, 0px),
+		#000 100%
+	);
+	&:where([dir="rtl"], [dir="rtl"] *) {
+		--scroll-fade-mask: linear-gradient(
+		  to left,
+		  transparent 0,
+		  #000 var(--scroll-fade-s, 0px),
+		  #000 100%
+		);
+	}
+	-webkit-mask-image: var(--scroll-fade-mask);
+	mask-image: var(--scroll-fade-mask);
+	-webkit-mask-composite: source-in;
+	mask-composite: intersect;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+
+	@supports (animation-timeline: scroll()) {
+		animation: scroll-fade-reveal-s 1ms ease-in-out;
+		animation-timeline: scroll(self inline);
+		animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
+		animation-fill-mode: both;
+	}
+
+	@supports not (animation-timeline: scroll()) {
+		--scroll-fade-s: var(--_scroll-fade-size-s);
+	}
+}
+
+@utility scroll-fade-e {
+	--_scroll-fade-size-e: var(
+		--scroll-fade-e-size,
+		var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+	);
+	--scroll-fade-mask: linear-gradient(
+		to right,
+		#000 0,
+		#000 calc(100% - var(--scroll-fade-e, 0px)),
+		transparent 100%
+	);
+	&:where([dir="rtl"], [dir="rtl"] *) {
+		--scroll-fade-mask: linear-gradient(
+		  to left,
+		  #000 0,
+		  #000 calc(100% - var(--scroll-fade-e, 0px)),
+		  transparent 100%
+		);
+	}
+	-webkit-mask-image: var(--scroll-fade-mask);
+	mask-image: var(--scroll-fade-mask);
+	-webkit-mask-composite: source-in;
+	mask-composite: intersect;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+
+	@supports (animation-timeline: scroll()) {
+		animation: scroll-fade-reveal-e 1ms ease-in-out;
+		animation-timeline: scroll(self inline);
+		animation-range: calc(
+		    100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
+		  )
+		  100%;
+		animation-fill-mode: both;
+	}
+
+	@supports not (animation-timeline: scroll()) {
+		--scroll-fade-e: var(--_scroll-fade-size-e);
+	}
+}
+
+@utility scroll-fade-* {
+	--scroll-fade-size: calc(var(--spacing) * --value(integer));
+	--scroll-fade-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-t-* {
+	--scroll-fade-t-size: calc(var(--spacing) * --value(integer));
+	--scroll-fade-t-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-b-* {
+	--scroll-fade-b-size: calc(var(--spacing) * --value(integer));
+	--scroll-fade-b-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-s-* {
+	--scroll-fade-s-size: calc(var(--spacing) * --value(integer));
+	--scroll-fade-s-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-e-* {
+	--scroll-fade-e-size: calc(var(--spacing) * --value(integer));
+	--scroll-fade-e-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-none {
+	--scroll-fade-mask: none;
+}
+
+/* shimmer */
+@property --shimmer-angle {
+	syntax: "<angle>";
+	inherits: true;
+	initial-value: 20deg;
+}
+@property --shimmer-image {
+	syntax: "*";
+	inherits: false;
+}
+@property --shimmer-text-fill {
+	syntax: "*";
+	inherits: false;
+}
+
+@theme inline {
+	@keyframes tw-shimmer {
+		from {
+		  background-position: 100% 0;
+		}
+		to {
+		  background-position: 0 0;
+		}
+	}
+}
+
+@utility shimmer {
+	--_spread: var(--shimmer-spread, calc(3ch + 40px));
+	--_base: currentColor;
+	--_highlight: var(
+		--shimmer-color,
+		oklch(from currentColor l c h / calc(alpha* 0.2))
+	);
+
+	background-image: var(
+		--shimmer-image,
+		linear-gradient(
+		  calc(90deg + var(--shimmer-angle)),
+		  var(--_base) calc(50% - var(--_spread)),
+		  color-mix(in oklch, var(--_highlight), var(--_base) 50%)
+		    calc(50% - var(--_spread) * 0.5),
+		  var(--_highlight) 50%,
+		  color-mix(in oklch, var(--_highlight), var(--_base) 50%)
+		    calc(50% + var(--_spread) * 0.5),
+		  var(--_base) calc(50% + var(--_spread))
+		)
+	);
+	background-repeat: no-repeat;
+	background-size: calc(200% + var(--_spread) * 2) 100%;
+	background-position: 0 0;
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: var(--shimmer-text-fill, transparent);
+	animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
+
+	@variant dark {
+		--_highlight: var(
+		  --shimmer-color,
+		  oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4))
+		);
+	}
+
+	&:where([dir="rtl"], [dir="rtl"] *) {
+		animation-direction: reverse;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		animation: none;
+		background-image: none;
+		-webkit-text-fill-color: currentColor;
+	}
+}
+
+@utility shimmer-once {
+	animation-iteration-count: 1;
+}
+
+@utility shimmer-reverse {
+	animation-direction: reverse;
+}
+
+@utility shimmer-none {
+	--shimmer-image: none;
+	--shimmer-text-fill: currentColor;
+}
+
+@utility shimmer-color-* {
+	--shimmer-color: --value(--color, [color]);
+	--shimmer-color: color-mix(
+		in oklch,
+		--value(--color, [color]) calc(--modifier(integer) * 1%),
+		transparent
+	);
+}
+
+@utility shimmer-duration-* {
+	--shimmer-duration: calc(--value(integer) * 1ms);
+}
+
+@utility shimmer-spread-* {
+	--shimmer-spread: calc(var(--spacing) * --value(integer));
+	--shimmer-spread: --value([length], [percentage]);
+}
+
+@utility shimmer-angle-* {
+	--shimmer-angle: calc(--value(integer) * 1deg);
+}
+
+/* Без анимации, если в системе включено «уменьшить движение» */
+@media (prefers-reduced-motion: reduce) {
+	.shimmer {
+		animation: none;
+		background-image: none;
+		-webkit-text-fill-color: currentColor;
+	}
+}