frakment 0.0.0-stage → 0.0.2

package/templates/theme.css

@@ -0,0 +1,653 @@
+/* Frakment custom variants — required by registry components using data-*: utilities.
+   Without these, utility classes like data-checked:bg-primary become no-ops. */
+@custom-variant fixed (&:is(.layout-fixed *));
+@custom-variant data-open (&[data-state="open"]);
+@custom-variant data-closed (&[data-state="closed"]);
+@custom-variant data-checked (&[data-state="checked"], &[data-checked]);
+@custom-variant data-unchecked (&[data-state="unchecked"], &[data-unchecked]);
+@custom-variant data-disabled (&[data-disabled]);
+@custom-variant data-selected (&[data-state="selected"]);
+@custom-variant data-active (&[data-state="active"]);
+
+@custom-variant dark (&:is(.dark *));
+@custom-variant data-checked (&[data-checked], &[data-state="checked"]);
+
+@theme inline {
+  --card-spacing: --spacing(4);
+  --breakpoint-3xl: 1600px;
+  --breakpoint-4xl: 2000px;
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-subtle-foreground: var(--subtle-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-code: var(--code);
+  --color-code-foreground: var(--code-foreground);
+  --color-code-highlight: var(--code-highlight);
+  --color-code-number: var(--code-number);
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 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.5 0 0);
+  --subtle-foreground: oklch(0.32 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0 0);
+  --input: oklch(0.89 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 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);
+  --surface: oklch(0.98 0 0);
+  --surface-foreground: var(--foreground);
+  --code: var(--surface);
+  --code-foreground: var(--surface-foreground);
+  --code-highlight: oklch(0.96 0 0);
+  --code-number: oklch(0.56 0 0);
+  --selection: oklch(0.145 0 0);
+  --selection-foreground: oklch(1 0 0);
+}
+
+.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.269 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.75 0 0);
+  --subtle-foreground: oklch(0.88 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0 0);
+  --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);
+  --surface: oklch(0.2 0 0);
+  --surface-foreground: oklch(0.708 0 0);
+  --code: var(--surface);
+  --code-foreground: var(--surface-foreground);
+  --code-highlight: oklch(0.27 0 0);
+  --code-number: oklch(0.72 0 0);
+  --selection: oklch(0.922 0 0);
+  --selection-foreground: oklch(0.205 0 0);
+}
+
+/* Component utilities - kept here for the experiment */
+
+@utility border-grid {
+  @apply border-border/50 dark:border-border;
+}
+@utility section-soft {
+  @apply from-background to-surface/40 dark:bg-background 3xl:fixed:bg-none bg-gradient-to-b;
+}
+@utility container-wrapper {
+  @apply 3xl:fixed:max-w-[calc(var(--breakpoint-2xl)+2rem)] mx-auto w-full px-2;
+}
+@utility container {
+  @apply 3xl:max-w-screen-2xl mx-auto max-w-[1400px] px-4 lg:px-8;
+}
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+@utility border-ghost {
+  @apply after:border-border relative after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten;
+}
+@utility step {
+  counter-increment: step;
+
+  &:before {
+    content: counter(step);
+    @apply border-background bg-muted mr-2 inline-flex size-6 items-center justify-center rounded-full text-center -indent-px font-mono text-sm font-medium md:absolute md:mt-[-4px] md:ml-[-50px] md:size-9 md:border-4;
+  }
+}
+@utility extend-touch-target {
+  @media (pointer: coarse) {
+    @apply relative touch-manipulation after:absolute after:-inset-2;
+  }
+}
+
+/* Global scrollbar: transparent track, thin neutral thumb with gap, no arrow.
+   Injected to end users via the FRAKMENT THEME block (cli/templates/theme.css).
+   The `no-scrollbar` utility wins specificity and still hides scrollbars where used. */
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+*::-webkit-scrollbar-track-piece {
+  background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+  background: rgba(150, 150, 150, 0.65);
+  background-clip: padding-box;
+  border: 1.5px solid transparent;
+  border-radius: 9999px;
+}
+*::-webkit-scrollbar-thumb:hover {
+  background: rgba(150, 150, 150, 0.9);
+  background-clip: padding-box;
+}
+*::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+[data-slot="message-scroller-viewport"] {
+  scrollbar-gutter: stable;
+}
+
+/* === Registry animations === */
+/* Injected to end users via the FRAKMENT THEME block.
+   Required by registry components that use animate-* utilities. */
+
+@theme {
+  --animate-shimmer: shimmer 3.2s linear infinite;
+
+  @keyframes shimmer {
+    from {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+}
+
+/* ---- shimmer utility (CSS class) ---- */
+
+@property --shimmer-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 90deg;
+}
+
+@property --shimmer-duration {
+  syntax: "<time>";
+  inherits: false;
+  initial-value: 3200ms;
+}
+
+@property --shimmer-spread {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 15%;
+}
+
+@utility shimmer {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  background-image: linear-gradient(
+    var(--shimmer-angle),
+    var(--muted-foreground) 0%,
+    var(--muted-foreground) calc(50% - var(--shimmer-spread)),
+    var(--shimmer-color, var(--foreground)) 50%,
+    var(--muted-foreground) calc(50% + var(--shimmer-spread)),
+    var(--muted-foreground) 100%
+  );
+  background-position: 0% 0;
+  -webkit-background-clip: text;
+  background-clip: text;
+  background-size: 200% 100%;
+  animation: shimmer var(--shimmer-duration) linear infinite;
+}
+
+@utility shimmer-color-* {
+  --shimmer-color: --value(--color-*, [color]);
+}
+
+@utility shimmer-duration-* {
+  --shimmer-duration: calc(--value(integer) * 1ms);
+}
+
+@utility shimmer-spread-* {
+  --shimmer-spread: calc(--value(integer) * 1%);
+}
+
+@utility shimmer-angle-* {
+  --shimmer-angle: calc(--value(integer) * 1deg);
+}
+
+@utility shimmer-once {
+  animation-iteration-count: 1;
+}
+
+@utility shimmer-none {
+  color: inherit;
+  -webkit-text-fill-color: currentColor;
+  background-image: none;
+  animation: none;
+}
+
+/* ---- scroll-fade utility ---- */
+
+@property --scroll-fade-size {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 24px;
+}
+
+@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-l {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-fade-r {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@keyframes scroll-fade-y {
+  0% {
+    --scroll-fade-t: 0px;
+    --scroll-fade-b: var(--scroll-fade-size);
+  }
+  100% {
+    --scroll-fade-t: var(--scroll-fade-size);
+    --scroll-fade-b: 0px;
+  }
+}
+
+@keyframes scroll-fade-x {
+  0% {
+    --scroll-fade-l: 0px;
+    --scroll-fade-r: var(--scroll-fade-size);
+  }
+  100% {
+    --scroll-fade-l: var(--scroll-fade-size);
+    --scroll-fade-r: 0px;
+  }
+}
+
+@keyframes scroll-fade-t-only {
+  0% {
+    --scroll-fade-t: 0px;
+  }
+  100% {
+    --scroll-fade-t: var(--scroll-fade-size);
+  }
+}
+
+@keyframes scroll-fade-b-only {
+  0% {
+    --scroll-fade-b: var(--scroll-fade-size);
+  }
+  100% {
+    --scroll-fade-b: 0px;
+  }
+}
+
+@keyframes scroll-fade-l-only {
+  0% {
+    --scroll-fade-l: 0px;
+  }
+  100% {
+    --scroll-fade-l: var(--scroll-fade-size);
+  }
+}
+
+@keyframes scroll-fade-r-only {
+  0% {
+    --scroll-fade-r: var(--scroll-fade-size);
+  }
+  100% {
+    --scroll-fade-r: 0px;
+  }
+}
+
+@utility scroll-fade {
+  --scroll-fade-t: var(--scroll-fade-size);
+  --scroll-fade-b: var(--scroll-fade-size);
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    black var(--scroll-fade-t),
+    black calc(100% - var(--scroll-fade-b)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    black var(--scroll-fade-t),
+    black calc(100% - var(--scroll-fade-b)),
+    transparent 100%
+  );
+}
+
+@utility scroll-fade-y {
+  --scroll-fade-t: var(--scroll-fade-size);
+  --scroll-fade-b: var(--scroll-fade-size);
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    black var(--scroll-fade-t),
+    black calc(100% - var(--scroll-fade-b)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    black var(--scroll-fade-t),
+    black calc(100% - var(--scroll-fade-b)),
+    transparent 100%
+  );
+}
+
+@utility scroll-fade-x {
+  --scroll-fade-l: var(--scroll-fade-size);
+  --scroll-fade-r: var(--scroll-fade-size);
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black var(--scroll-fade-l),
+    black calc(100% - var(--scroll-fade-r)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black var(--scroll-fade-l),
+    black calc(100% - var(--scroll-fade-r)),
+    transparent 100%
+  );
+}
+
+@utility scroll-fade-t {
+  --scroll-fade-t: var(--scroll-fade-size);
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    black var(--scroll-fade-t),
+    black 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    black var(--scroll-fade-t),
+    black 100%
+  );
+}
+
+@utility scroll-fade-b {
+  --scroll-fade-b: var(--scroll-fade-size);
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    black 0,
+    black calc(100% - var(--scroll-fade-b)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    black 0,
+    black calc(100% - var(--scroll-fade-b)),
+    transparent 100%
+  );
+}
+
+@utility scroll-fade-l {
+  --scroll-fade-l: var(--scroll-fade-size);
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black var(--scroll-fade-l),
+    black 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black var(--scroll-fade-l),
+    black 100%
+  );
+}
+
+@utility scroll-fade-r {
+  --scroll-fade-r: var(--scroll-fade-size);
+  -webkit-mask-image: linear-gradient(
+    to right,
+    black 0,
+    black calc(100% - var(--scroll-fade-r)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    black 0,
+    black calc(100% - var(--scroll-fade-r)),
+    transparent 100%
+  );
+}
+
+@utility scroll-fade-s {
+  --scroll-fade-l: var(--scroll-fade-size);
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black var(--scroll-fade-l),
+    black 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black var(--scroll-fade-l),
+    black 100%
+  );
+}
+
+@utility scroll-fade-e {
+  --scroll-fade-r: var(--scroll-fade-size);
+  -webkit-mask-image: linear-gradient(
+    to right,
+    black 0,
+    black calc(100% - var(--scroll-fade-r)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    black 0,
+    black calc(100% - var(--scroll-fade-r)),
+    transparent 100%
+  );
+}
+
+@utility scroll-fade-none {
+  --scroll-fade-t: 0px;
+  --scroll-fade-b: 0px;
+  --scroll-fade-l: 0px;
+  --scroll-fade-r: 0px;
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+
+@supports (animation-timeline: scroll()) {
+  .scroll-fade,
+  .scroll-fade-y {
+    animation: scroll-fade-y linear both;
+    animation-timeline: scroll(self y);
+  }
+  .scroll-fade-x {
+    animation: scroll-fade-x linear both;
+    animation-timeline: scroll(self inline);
+  }
+  .scroll-fade-t {
+    animation: scroll-fade-t-only linear both;
+    animation-timeline: scroll(self y);
+  }
+  .scroll-fade-b {
+    animation: scroll-fade-b-only linear both;
+    animation-timeline: scroll(self y);
+  }
+  .scroll-fade-l,
+  .scroll-fade-s {
+    animation: scroll-fade-l-only linear both;
+    animation-timeline: scroll(self inline);
+  }
+  .scroll-fade-r,
+  .scroll-fade-e {
+    animation: scroll-fade-r-only linear both;
+    animation-timeline: scroll(self inline);
+  }
+  .scroll-fade-none {
+    animation: none;
+  }
+}
+
+/* highlight.js — syntax highlight for Markdown code blocks */
+.hljs {
+  color: var(--foreground);
+  background: transparent;
+}
+.hljs-comment,
+.hljs-quote {
+  font-style: italic;
+  color: var(--muted-foreground);
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-section,
+.hljs-link {
+  color: oklch(0.65 0.2 300);
+}
+.hljs-string,
+.hljs-attr,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: oklch(0.7 0.15 140);
+}
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-attribute {
+  color: oklch(0.75 0.14 60);
+}
+.hljs-title,
+.hljs-name,
+.hljs-type {
+  color: oklch(0.72 0.15 250);
+}
+.hljs-function,
+.hljs-title.function_ {
+  color: oklch(0.75 0.14 200);
+}
+.hljs-variable,
+.hljs-template-variable,
+.hljs-params {
+  color: var(--foreground);
+}
+.hljs-tag,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: oklch(0.68 0.18 20);
+}
+.hljs-deletion {
+  color: oklch(0.6 0.22 25);
+}
+.hljs-emphasis {
+  font-style: italic;
+}
+.hljs-strong {
+  font-weight: 600;
+}