@lessly/ui 0.2.0

package/dist/styles.css

@@ -0,0 +1,507 @@
+/* === Fonts === */
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/inter/inter-regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/inter/inter-medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/inter/inter-semibold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/inter/inter-bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Instrument Serif";
+  src: url("/fonts/instrument-serif/instrument-serif-regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Fira Mono";
+  src: url("/fonts/fira-mono/fira-mono-regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Fira Mono";
+  src: url("/fonts/fira-mono/fira-mono-medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* === Theme Variables === */
+/* Tailwind v4 scalar spacing unit. The Lessly preset overrides theme.spacing with a
+   fixed keyed scale, which suppresses Tailwind's own --spacing var; tw-animate-css
+   slide-in-from-*/slide-out-to-* offsets compute calc(N * var(--spacing)), so without
+   this they collapse to 0. :where() keeps zero specificity — a consumer that sets its
+   own --spacing always wins over this fallback. */
+:where(:root) {
+  --spacing: 0.25rem;
+}
+:root {
+  --color-bg-primary: #0e1015;
+  --color-bg-secondary: #12141b;
+  --color-bg-surface: #191b24;
+  --color-bg-elevated: #1f222d;
+  --color-bg-sunken: #08090c;
+  --color-bg-brand: #06297d;
+  --color-bg-brand-subtle: #080d1b;
+  --color-bg-brand-bright: #165ff2;
+  --color-bg-brand-hover: #08349b;
+  --color-bg-success: #13703c;
+  --color-bg-success-subtle: #0a1911;
+  --color-bg-warning: #b3780e;
+  --color-bg-warning-subtle: #1a1508;
+  --color-bg-danger: #78100b;
+  --color-bg-danger-subtle: #1a0a09;
+  --color-bg-teal-subtle: #091918;
+  --color-bg-violet-subtle: #12091a;
+  --color-bg-rose-subtle: #1a090b;
+  --color-text-primary: #eeeff0;
+  --color-text-secondary: #a5a9b5;
+  --color-text-tertiary: #737c95;
+  --color-text-disabled: #60687f;
+  --color-text-inverse: #0e1015;
+  --color-text-on-brand: #f6f7f7;
+  --color-text-on-success: #f6f7f7;
+  --color-text-on-warning: #08090c;
+  --color-text-on-danger: #f6f7f7;
+  --color-text-brand: #6394f6;
+  --color-text-success: #2eda76;
+  --color-text-warning: #efb042;
+  --color-text-danger: #f06a6a;
+  --color-text-link: #6394f6;
+  --color-text-link-hover: #a3b7e0;
+  --color-icon-primary: #cfd1d7;
+  --color-icon-secondary: #737c95;
+  --color-icon-disabled: #393d4b;
+  --color-icon-brand: #6394f6;
+  --color-icon-success: #2eda76;
+  --color-icon-warning: #efb042;
+  --color-icon-danger: #f06a6a;
+  --color-border-subtle: #1f222d;
+  --color-border-default: #60687f;
+  --color-border-strong: #737c95;
+  --color-border-brand: #165ff2;
+  --color-border-focus: #165ff2;
+  --color-border-success: #1da456;
+  --color-border-warning: #b3780e;
+  --color-border-danger: #e82020;
+}
+
+.light {
+  --color-bg-primary: #e1e2e4;
+  --color-bg-secondary: #eeeff0;
+  --color-bg-surface: #f6f7f7;
+  --color-bg-elevated: #ffffff;
+  --color-bg-sunken: #e1e2e4;
+  --color-bg-brand: #06297d;
+  --color-bg-brand-subtle: #eaeef4;
+  --color-bg-brand-bright: #165ff2;
+  --color-bg-brand-hover: #05226a;
+  --color-bg-success: #13703c;
+  --color-bg-success-subtle: #ebf3ef;
+  --color-bg-warning: #eca01c;
+  --color-bg-warning-subtle: #f4f0eb;
+  --color-bg-danger: #78100b;
+  --color-bg-danger-subtle: #f4ebeb;
+  --color-bg-teal-subtle: #ebf3f2;
+  --color-bg-violet-subtle: #efebf3;
+  --color-bg-rose-subtle: #f4ebed;
+  --color-text-primary: #0e1015;
+  --color-text-secondary: #393d4b;
+  --color-text-tertiary: #535a6e;
+  --color-text-disabled: #737c95;
+  --color-text-inverse: #f6f7f7;
+  --color-text-on-brand: #f6f7f7;
+  --color-text-on-success: #f6f7f7;
+  --color-text-on-warning: #08090c;
+  --color-text-on-danger: #f6f7f7;
+  --color-text-brand: #0940b8;
+  --color-text-success: #13703c;
+  --color-text-warning: #7a5409;
+  --color-text-danger: #94120e;
+  --color-text-link: #0940b8;
+  --color-text-link-hover: #0b4cd5;
+  --color-icon-primary: #252936;
+  --color-icon-secondary: #535a6e;
+  --color-icon-disabled: #8a91a7;
+  --color-icon-brand: #0940b8;
+  --color-icon-success: #13703c;
+  --color-icon-warning: #7a5409;
+  --color-icon-danger: #94120e;
+  --color-border-subtle: #cfd1d7;
+  --color-border-default: #737c95;
+  --color-border-strong: #60687f;
+  --color-border-brand: #165ff2;
+  --color-border-focus: #0940b8;
+  --color-border-success: #188a49;
+  --color-border-warning: #b3780e;
+  --color-border-danger: #e82020;
+}
+
+/* === Base === */
+@layer base {
+  body {
+    font-family: "Inter", system-ui, -apple-system, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+/* === Animation layer (tw-animate-css, compiled) — see scripts/build-styles.mjs === */
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
+@layer properties;
+.data-\[motion\=from-end\]\:slide-in-from-right-52 {
+  &[data-motion="from-end"] {
+    --tw-enter-translate-x: calc(52*var(--spacing));
+  }
+}
+.data-\[motion\=from-start\]\:slide-in-from-left-52 {
+  &[data-motion="from-start"] {
+    --tw-enter-translate-x: calc(52*var(--spacing)*-1);
+  }
+}
+.data-\[motion\=to-end\]\:slide-out-to-right-52 {
+  &[data-motion="to-end"] {
+    --tw-exit-translate-x: calc(52*var(--spacing));
+  }
+}
+.data-\[motion\=to-start\]\:slide-out-to-left-52 {
+  &[data-motion="to-start"] {
+    --tw-exit-translate-x: calc(52*var(--spacing)*-1);
+  }
+}
+.data-\[motion\^\=from-\]\:animate-in {
+  &[data-motion^="from-"] {
+    animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
+}
+.data-\[motion\^\=from-\]\:fade-in {
+  &[data-motion^="from-"] {
+    --tw-enter-opacity: 0;
+  }
+}
+.data-\[motion\^\=to-\]\:animate-out {
+  &[data-motion^="to-"] {
+    animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
+}
+.data-\[motion\^\=to-\]\:fade-out {
+  &[data-motion^="to-"] {
+    --tw-exit-opacity: 0;
+  }
+}
+.data-\[side\=bottom\]\:slide-in-from-top-2 {
+  &[data-side="bottom"] {
+    --tw-enter-translate-y: calc(2*var(--spacing)*-1);
+  }
+}
+.data-\[side\=left\]\:slide-in-from-right-2 {
+  &[data-side="left"] {
+    --tw-enter-translate-x: calc(2*var(--spacing));
+  }
+}
+.data-\[side\=right\]\:slide-in-from-left-2 {
+  &[data-side="right"] {
+    --tw-enter-translate-x: calc(2*var(--spacing)*-1);
+  }
+}
+.data-\[side\=top\]\:slide-in-from-bottom-2 {
+  &[data-side="top"] {
+    --tw-enter-translate-y: calc(2*var(--spacing));
+  }
+}
+.data-\[state\=closed\]\:animate-accordion-up {
+  &[data-state="closed"] {
+    animation: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
+}
+.data-\[state\=closed\]\:animate-collapsible-up {
+  &[data-state="closed"] {
+    animation: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
+}
+.data-\[state\=closed\]\:animate-out {
+  &[data-state="closed"] {
+    animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
+}
+.data-\[state\=closed\]\:fade-out-0 {
+  &[data-state="closed"] {
+    --tw-exit-opacity: calc(0/100);
+    --tw-exit-opacity: 0;
+  }
+}
+.data-\[state\=closed\]\:zoom-out-95 {
+  &[data-state="closed"] {
+    --tw-exit-scale: calc(95*1%);
+    --tw-exit-scale: .95;
+  }
+}
+.data-\[state\=closed\]\:slide-out-to-bottom {
+  &[data-state="closed"] {
+    --tw-exit-translate-y: 100%;
+  }
+}
+.data-\[state\=closed\]\:slide-out-to-left {
+  &[data-state="closed"] {
+    --tw-exit-translate-x: -100%;
+  }
+}
+.data-\[state\=closed\]\:slide-out-to-right {
+  &[data-state="closed"] {
+    --tw-exit-translate-x: 100%;
+  }
+}
+.data-\[state\=closed\]\:slide-out-to-top {
+  &[data-state="closed"] {
+    --tw-exit-translate-y: -100%;
+  }
+}
+.data-\[state\=hidden\]\:animate-out {
+  &[data-state="hidden"] {
+    animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
+}
+.data-\[state\=hidden\]\:fade-out {
+  &[data-state="hidden"] {
+    --tw-exit-opacity: 0;
+  }
+}
+.data-\[state\=open\]\:animate-accordion-down {
+  &[data-state="open"] {
+    animation: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
+}
+.data-\[state\=open\]\:animate-collapsible-down {
+  &[data-state="open"] {
+    animation: collapsible-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
+}
+.data-\[state\=open\]\:animate-in {
+  &[data-state="open"] {
+    animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
+}
+.data-\[state\=open\]\:fade-in-0 {
+  &[data-state="open"] {
+    --tw-enter-opacity: calc(0/100);
+    --tw-enter-opacity: 0;
+  }
+}
+.data-\[state\=open\]\:zoom-in-90 {
+  &[data-state="open"] {
+    --tw-enter-scale: calc(90*1%);
+    --tw-enter-scale: .9;
+  }
+}
+.data-\[state\=open\]\:zoom-in-95 {
+  &[data-state="open"] {
+    --tw-enter-scale: calc(95*1%);
+    --tw-enter-scale: .95;
+  }
+}
+.data-\[state\=open\]\:slide-in-from-bottom {
+  &[data-state="open"] {
+    --tw-enter-translate-y: 100%;
+  }
+}
+.data-\[state\=open\]\:slide-in-from-left {
+  &[data-state="open"] {
+    --tw-enter-translate-x: -100%;
+  }
+}
+.data-\[state\=open\]\:slide-in-from-right {
+  &[data-state="open"] {
+    --tw-enter-translate-x: 100%;
+  }
+}
+.data-\[state\=open\]\:slide-in-from-top {
+  &[data-state="open"] {
+    --tw-enter-translate-y: -100%;
+  }
+}
+.data-\[state\=visible\]\:animate-in {
+  &[data-state="visible"] {
+    animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
+}
+.data-\[state\=visible\]\:fade-in {
+  &[data-state="visible"] {
+    --tw-enter-opacity: 0;
+  }
+}
+@property --tw-animation-delay {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0s;
+}
+@property --tw-animation-direction {
+  syntax: "*";
+  inherits: false;
+  initial-value: normal;
+}
+@property --tw-animation-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-animation-fill-mode {
+  syntax: "*";
+  inherits: false;
+  initial-value: none;
+}
+@property --tw-animation-iteration-count {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-blur {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-opacity {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-rotate {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-scale {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-blur {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-opacity {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-rotate {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-scale {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity,1);
+    transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));
+    filter: blur(var(--tw-enter-blur,0));
+  }
+}
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity,1);
+    transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));
+    filter: blur(var(--tw-exit-blur,0));
+  }
+}
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))));
+  }
+}
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))));
+  }
+  to {
+    height: 0;
+  }
+}
+@keyframes collapsible-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto))));
+  }
+}
+@keyframes collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto))));
+  }
+  to {
+    height: 0;
+  }
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-animation-delay: 0s;
+      --tw-animation-direction: normal;
+      --tw-animation-duration: initial;
+      --tw-animation-fill-mode: none;
+      --tw-animation-iteration-count: 1;
+      --tw-enter-blur: 0;
+      --tw-enter-opacity: 1;
+      --tw-enter-rotate: 0;
+      --tw-enter-scale: 1;
+      --tw-enter-translate-x: 0;
+      --tw-enter-translate-y: 0;
+      --tw-exit-blur: 0;
+      --tw-exit-opacity: 1;
+      --tw-exit-rotate: 0;
+      --tw-exit-scale: 1;
+      --tw-exit-translate-x: 0;
+      --tw-exit-translate-y: 0;
+    }
+  }
+}