@nous-research/ui 0.15.0 → 0.17.0

package/src/ui/globals.css

@@ -0,0 +1,395 @@
+@source ".";
+@import './components/fit-text/fit-text.css' layer(components);
+@import './components/grid/grid.css' layer(components);
+@view-transition {
+  navigation: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  @view-transition {
+    navigation: none;
+  }
+}
+
+::view-transition-old(page),
+::view-transition-new(page) {
+  animation-duration: 0.25s;
+  animation-timing-function: ease-out;
+}
+
+::view-transition-old(page) {
+  animation: fade-out 0.25s ease-out;
+}
+
+::view-transition-new(page) {
+  animation: fade-in 0.25s ease-out;
+}
+
+@keyframes fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+.animate-slide-down {
+  animation: slide-down 0.6s ease-out both;
+}
+
+.animate-slide-up {
+  animation: slide-up 0.6s ease-out both;
+}
+
+.animate-fade-in {
+  animation: fade-in 0.5s ease-out both;
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+@keyframes spin-slow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin-slow {
+  animation: spin-slow 12s linear infinite;
+}
+
+@keyframes march {
+  to {
+    background-position: 0.5rem 0;
+  }
+}
+
+.group:hover .blink {
+  animation: blink 1s step-end infinite;
+}
+
+.dither {
+  background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%)
+    0 0 / 2px 2px;
+}
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-background-base: var(--background-base);
+  --color-midground: var(--midground);
+  --color-midground-base: var(--midground-base);
+  --color-foreground: var(--foreground);
+  --color-foreground-base: var(--foreground-base);
+  --color-gesso: #eaeaea;
+
+  /* Semantic tokens — defaults for DS preview; consumers (e.g. shadcn-style
+     dashboards) can remap these via their own @theme inline. */
+  --color-destructive: var(--destructive, #fb2c36);
+  --color-destructive-foreground: var(--destructive-foreground, #ffffff);
+  --color-success: var(--success, #4ade80);
+  --color-warning: var(--warning, #ffbd38);
+
+  /* Text hierarchy — semantic tokens with WCAG AA-targeted defaults.
+     Consumers can override `--text-*` on `:root` (or any scope) without
+     touching DS internals. No value here goes below 0.65 effective alpha
+     for primary/secondary so stacked `/N` opacity is unnecessary. */
+  --color-text-primary: var(--text-primary, var(--midground));
+  --color-text-secondary: var(
+    --text-secondary,
+    color-mix(in srgb, var(--midground-base) 80%, transparent)
+  );
+  --color-text-tertiary: var(
+    --text-tertiary,
+    color-mix(in srgb, var(--midground-base) 65%, transparent)
+  );
+  --color-text-disabled: var(
+    --text-disabled,
+    color-mix(in srgb, var(--midground-base) 45%, transparent)
+  );
+  --color-text-on-accent: var(--text-on-accent, var(--background));
+  --color-text-display: var(--text-display, var(--midground));
+
+  --color-current: currentColor;
+  --color-transparent: transparent;
+
+  --gap-inherit: inherit;
+  --height-between-header-footer: max(
+    400px,
+    calc(
+      100dvh - 5rem -
+        (var(--header-height, 3.5rem) + var(--footer-height, 4.35rem))
+    )
+  );
+}
+
+:root {
+  --background: color-mix(in srgb, #170d02 100%, transparent);
+  --background-base: #170d02;
+  --background-alpha: 1;
+  --midground: color-mix(in srgb, #ffac02 100%, transparent);
+  --midground-base: #ffac02;
+  --midground-alpha: 1;
+  --foreground: color-mix(in srgb, #fff 100%, transparent);
+  --foreground-base: #fff;
+  --foreground-alpha: 1;
+  --font-sans: 'Collapse', sans-serif;
+  --font-mono: 'Courier Prime', monospace;
+  --font-rules-compressed: 'Rules Compressed', sans-serif;
+  --font-rules-expanded: 'Rules Expanded', sans-serif;
+  --font-mondwest: 'Mondwest', sans-serif;
+  --vsq: calc(0.5vw + 0.5vh);
+}
+
+@property --fit-captured-length {
+  syntax: '<length>';
+  initial-value: 0px;
+  inherits: true;
+}
+
+@utility font-compressed {
+  font-family: var(--font-rules-compressed);
+}
+
+@utility font-expanded {
+  font-family: var(--font-rules-expanded);
+}
+
+@utility font-mondwest {
+  font-family: var(--font-mondwest);
+}
+
+@utility font-courier {
+  font-family: 'Courier New', var(--font-mono), monospace;
+}
+
+/* Brand display style — opt-in uppercase + tracking. Purely typographic;
+   composes with any font utility (font-mondwest, font-compressed,
+   font-mono, font-courier) and any color utility. Use on chrome
+   (buttons, badges, nav section headings, page titles) where the brand
+   look is intentional. Body content should NOT use this utility.
+   Consumers wanting the canonical look apply `text-display font-mondwest`
+   together. */
+@utility text-display {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+@utility font-serif {
+  font-family: 'Times New Roman', Times, serif;
+}
+
+@utility text-box-trim-none {
+  text-box-trim: none;
+}
+
+@utility text-box-trim-both {
+  text-box-trim: trim-both;
+}
+
+@utility text-box-trim-start {
+  text-box-trim: trim-start;
+}
+
+@utility text-box-trim-end {
+  text-box-trim: trim-end;
+}
+
+@utility grid-cols-auto-fit {
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+}
+
+@utility h-between-header-footer {
+  min-height: var(--height-between-header-footer);
+}
+
+@utility w-fill {
+  width: -webkit-fill-available;
+}
+
+@utility h-fill {
+  height: -webkit-fill-available;
+}
+
+@utility antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+@utility underline-from-font {
+  text-decoration-skip-ink: auto;
+  text-underline-position: from-font;
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+}
+
+@keyframes toast-out {
+  to {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+}
+
+@keyframes gradient-stroke {
+  0% {
+    background-position: 15% 15%;
+  }
+
+  100% {
+    background-position: 75% 75%;
+  }
+}
+
+.arc-border {
+  --_t: clamp(0%, (0.5 - var(--foreground-alpha, 1)) * 99900%, 100%);
+  --arc-c0: color-mix(in srgb, var(--foreground) var(--_t), transparent);
+  --arc-c1: var(--midground);
+  --arc-c2: var(--background);
+  --arc-angle: 160deg;
+  --arc-width: 1.25px;
+  --arc-inset: -2px;
+  --arc-duration: 2.23s;
+  --arc-gradient: linear-gradient(
+    var(--arc-angle),
+    transparent 0%,
+    var(--arc-c0) 15%,
+    var(--arc-c1) 20%,
+    var(--arc-c2) 25%,
+    transparent 35%,
+    transparent 40%,
+    var(--arc-c0) 55%,
+    var(--arc-c1) 60%,
+    var(--arc-c2) 65%,
+    transparent 75%,
+    transparent 80%,
+    var(--arc-c0) 95%,
+    var(--arc-c1) 100%
+  );
+
+  @apply pointer-events-none absolute z-[-1] overflow-hidden rounded-[inherit];
+
+  inset: var(--arc-inset);
+  padding: var(--arc-width);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+
+  &::before {
+    content: '';
+    @apply absolute inset-0 rounded-[inherit];
+    background: var(--arc-gradient);
+    background-size: 300% 300%;
+    animation: gradient-stroke var(--arc-duration) linear infinite;
+  }
+}
+
+@layer base {
+  * {
+    @apply antialiased;
+
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+
+    &:hover {
+      scrollbar-color: color-mix(in srgb, var(--midground) 20%, transparent)
+        transparent;
+    }
+  }
+
+  ::-webkit-scrollbar {
+    width: 0.25rem;
+    height: 0.25rem;
+  }
+
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-button {
+    display: none;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 1rem;
+    min-height: 1rem;
+  }
+
+  *:hover::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--midground) 20%, transparent);
+  }
+
+  html,
+  body {
+    scrollbar-color: color-mix(in srgb, var(--midground) 65%, transparent)
+      transparent;
+  }
+
+  html:hover,
+  body:hover {
+    scrollbar-color: color-mix(in srgb, var(--midground) 80%, transparent)
+      transparent;
+  }
+
+  html::-webkit-scrollbar-thumb,
+  body::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--midground) 65%, transparent);
+  }
+
+  html:hover::-webkit-scrollbar-thumb,
+  body:hover::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--midground) 80%, transparent);
+  }
+
+  html {
+    font-size: clamp(14px, calc(14px + 2 * ((100vw - 1400px) / 400)), 18px);
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  .underline {
+    @apply underline-from-font underline decoration-current/25 decoration-solid decoration-auto underline-offset-1 transition-[text-decoration-color] hover:decoration-current;
+  }
+
+  *::selection,
+  code {
+    background: var(--selection-bg, var(--midground));
+    @apply text-background;
+  }
+}