@stainless-api/ui-primitives 0.1.0-beta.49 → 0.1.0-beta.50

package/dist/styles/theme.css

@@ -0,0 +1,183 @@
+@charset "UTF-8";
+/* 1. Base colors */
+@layer stl-ui.tokens {
+  :root {
+    --stl-opacity-level-080: 0.80;
+    --stl-opacity-level-040: 0.40;
+    --stl-opacity-level-016: 0.16;
+    --stl-opacity-level-008: 0.08;
+    --stl-opacity-level-004: 0.04;
+    /* background */
+    --stl-color-background: light-dark(rgb(255 255 255), rgb(10 10 10));
+    --stl-color-background-hover: light-dark(rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004))), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))));
+    /* background shades */
+    /* muted background */
+    --stl-color-muted-background: light-dark(rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-muted-background-hover: rgb(from var(--stl-color-muted-background) r g b/calc(alpha * 2));
+    /* faint background */
+    --stl-color-faint-background: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004)));
+    --stl-color-faint-background-hover: rgb(from var(--stl-color-faint-background) r g b/calc(alpha * 2));
+    /* ui elements like cards and buttons match --stl-color-background in light mode, but have a slight tint in dark mode */
+    --stl-color-ui-background: light-dark(
+      var(--stl-color-background),
+      rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004)))
+    );
+    --stl-color-ui-background-hover: light-dark(
+      var(--stl-color-background-hover),
+      rgb(from var(--stl-color-ui-background) r g b/calc(alpha * 2))
+    );
+    /* foreground */
+    --stl-color-foreground: light-dark(rgb(38 38 38), rgb(245 245 245));
+    --stl-color-foreground-reduced: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-foreground-muted: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    /* inverse */
+    --stl-color-inverse-background: var(--stl-color-foreground);
+    --stl-color-inverse-background-hover: rgb(from var(--stl-color-inverse-background) r g b/calc(alpha * 0.9));
+    --stl-color-inverse-foreground: var(--stl-color-background);
+    /* default border (“foreground border”) */
+    --stl-color-border: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-016)));
+    --stl-color-border-faint: rgb(from var(--stl-color-border) r g b/calc(alpha * 0.5));
+    --stl-color-border-strong: rgb(from var(--stl-color-border) r g b/calc(alpha * 2.5));
+  }
+}
+/* 2. Color palettes (accent, red, green, etc) */
+@layer stl-ui.tokens {
+  :root {
+    /* accent */
+    --stl-color-accent: light-dark(#155dfc, #2b7fff);
+    --stl-color-accent-foreground: var(--stl-color-accent);
+    --stl-color-accent-foreground-reduced: rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-accent-foreground-muted: rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-accent-muted-background: light-dark(rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-accent-muted-background-hover: rgb(from var(--stl-color-accent-muted-background) r g b/calc(alpha * 2));
+    --stl-color-accent-border: light-dark(rgb(from var(--stl-color-accent) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-accent) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-accent-border-faint: rgb(from var(--stl-color-accent-border) r g b/calc(alpha * 0.5));
+    --stl-color-accent-border-strong: var(--stl-color-accent);
+    --stl-color-accent-inverse-background: var(--stl-color-accent);
+    --stl-color-accent-inverse-background-hover: rgb(from var(--stl-color-accent-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-accent-inverse-foreground: rgb(255, 255, 255);
+    /* red */
+    --stl-color-red: light-dark(#d01e22, #e34041);
+    --stl-color-red-foreground: var(--stl-color-red);
+    --stl-color-red-foreground-reduced: rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-red-foreground-muted: rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-red-muted-background: light-dark(rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-red-muted-background-hover: rgb(from var(--stl-color-red-muted-background) r g b/calc(alpha * 2));
+    --stl-color-red-border: light-dark(rgb(from var(--stl-color-red) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-red) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-red-border-faint: rgb(from var(--stl-color-red-border) r g b/calc(alpha * 0.5));
+    --stl-color-red-border-strong: var(--stl-color-red);
+    --stl-color-red-inverse-background: var(--stl-color-red);
+    --stl-color-red-inverse-background-hover: rgb(from var(--stl-color-red-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-red-inverse-foreground: rgb(255, 255, 255);
+    /* green */
+    --stl-color-green: light-dark(#16a34a, #22c55e);
+    --stl-color-green-foreground: var(--stl-color-green);
+    --stl-color-green-foreground-reduced: rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-green-foreground-muted: rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-green-muted-background: light-dark(rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-green-muted-background-hover: rgb(from var(--stl-color-green-muted-background) r g b/calc(alpha * 2));
+    --stl-color-green-border: light-dark(rgb(from var(--stl-color-green) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-green) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-green-border-faint: rgb(from var(--stl-color-green-border) r g b/calc(alpha * 0.5));
+    --stl-color-green-border-strong: var(--stl-color-green);
+    --stl-color-green-inverse-background: var(--stl-color-green);
+    --stl-color-green-inverse-background-hover: rgb(from var(--stl-color-green-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-green-inverse-foreground: rgb(255, 255, 255);
+    /* blue */
+    --stl-color-blue: light-dark(#155dfc, #2b7fff);
+    --stl-color-blue-foreground: var(--stl-color-blue);
+    --stl-color-blue-foreground-reduced: rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-blue-foreground-muted: rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-blue-muted-background: light-dark(rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-blue-muted-background-hover: rgb(from var(--stl-color-blue-muted-background) r g b/calc(alpha * 2));
+    --stl-color-blue-border: light-dark(rgb(from var(--stl-color-blue) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-blue) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-blue-border-faint: rgb(from var(--stl-color-blue-border) r g b/calc(alpha * 0.5));
+    --stl-color-blue-border-strong: var(--stl-color-blue);
+    --stl-color-blue-inverse-background: var(--stl-color-blue);
+    --stl-color-blue-inverse-background-hover: rgb(from var(--stl-color-blue-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-blue-inverse-foreground: rgb(255, 255, 255);
+    /* yellow */
+    --stl-color-yellow: light-dark(#ca8a04, #eab308);
+    --stl-color-yellow-foreground: var(--stl-color-yellow);
+    --stl-color-yellow-foreground-reduced: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-yellow-foreground-muted: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-yellow-muted-background: light-dark(rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-yellow-muted-background-hover: rgb(from var(--stl-color-yellow-muted-background) r g b/calc(alpha * 2));
+    --stl-color-yellow-border: light-dark(rgb(from var(--stl-color-yellow) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-yellow) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-yellow-border-faint: rgb(from var(--stl-color-yellow-border) r g b/calc(alpha * 0.5));
+    --stl-color-yellow-border-strong: var(--stl-color-yellow);
+    --stl-color-yellow-inverse-background: var(--stl-color-yellow);
+    --stl-color-yellow-inverse-background-hover: rgb(from var(--stl-color-yellow-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-yellow-inverse-foreground: rgb(255, 255, 255);
+    /* orange */
+    --stl-color-orange: light-dark(#ea580c, #f97316);
+    --stl-color-orange-foreground: var(--stl-color-orange);
+    --stl-color-orange-foreground-reduced: rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-orange-foreground-muted: rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-orange-muted-background: light-dark(rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-orange-muted-background-hover: rgb(from var(--stl-color-orange-muted-background) r g b/calc(alpha * 2));
+    --stl-color-orange-border: light-dark(rgb(from var(--stl-color-orange) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-orange) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-orange-border-faint: rgb(from var(--stl-color-orange-border) r g b/calc(alpha * 0.5));
+    --stl-color-orange-border-strong: var(--stl-color-orange);
+    --stl-color-orange-inverse-background: var(--stl-color-orange);
+    --stl-color-orange-inverse-background-hover: rgb(from var(--stl-color-orange-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-orange-inverse-foreground: rgb(255, 255, 255);
+    /* purple */
+    --stl-color-purple: light-dark(#9333ea, #a855f7);
+    --stl-color-purple-foreground: var(--stl-color-purple);
+    --stl-color-purple-foreground-reduced: rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-purple-foreground-muted: rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-purple-muted-background: light-dark(rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-purple-muted-background-hover: rgb(from var(--stl-color-purple-muted-background) r g b/calc(alpha * 2));
+    --stl-color-purple-border: light-dark(rgb(from var(--stl-color-purple) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-purple) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-purple-border-faint: rgb(from var(--stl-color-purple-border) r g b/calc(alpha * 0.5));
+    --stl-color-purple-border-strong: var(--stl-color-purple);
+    --stl-color-purple-inverse-background: var(--stl-color-purple);
+    --stl-color-purple-inverse-background-hover: rgb(from var(--stl-color-purple-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-purple-inverse-foreground: rgb(255, 255, 255);
+    /* cyan */
+    --stl-color-cyan: light-dark(#0891b2, #06b6d4);
+    --stl-color-cyan-foreground: var(--stl-color-cyan);
+    --stl-color-cyan-foreground-reduced: rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-cyan-foreground-muted: rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-cyan-muted-background: light-dark(rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-cyan-muted-background-hover: rgb(from var(--stl-color-cyan-muted-background) r g b/calc(alpha * 2));
+    --stl-color-cyan-border: light-dark(rgb(from var(--stl-color-cyan) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-cyan) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-cyan-border-faint: rgb(from var(--stl-color-cyan-border) r g b/calc(alpha * 0.5));
+    --stl-color-cyan-border-strong: var(--stl-color-cyan);
+    --stl-color-cyan-inverse-background: var(--stl-color-cyan);
+    --stl-color-cyan-inverse-background-hover: rgb(from var(--stl-color-cyan-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-cyan-inverse-foreground: rgb(255, 255, 255);
+    /* pink */
+    --stl-color-pink: light-dark(#ec4899, #ec4899);
+    --stl-color-pink-foreground: var(--stl-color-pink);
+    --stl-color-pink-foreground-reduced: rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-pink-foreground-muted: rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-pink-muted-background: light-dark(rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-pink-muted-background-hover: rgb(from var(--stl-color-pink-muted-background) r g b/calc(alpha * 2));
+    --stl-color-pink-border: light-dark(rgb(from var(--stl-color-pink) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-pink) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-pink-border-faint: rgb(from var(--stl-color-pink-border) r g b/calc(alpha * 0.5));
+    --stl-color-pink-border-strong: var(--stl-color-pink);
+    --stl-color-pink-inverse-background: var(--stl-color-pink);
+    --stl-color-pink-inverse-background-hover: rgb(from var(--stl-color-pink-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-pink-inverse-foreground: rgb(255, 255, 255);
+  }
+  :root[data-theme=dark],
+  .stl-theme-dark {
+    color-scheme: dark;
+    background: var(--stl-color-background);
+    color: var(--stl-color-foreground);
+  }
+  :root[data-theme=light],
+  .stl-theme-light {
+    color-scheme: light;
+    background: var(--stl-color-background);
+    color: var(--stl-color-foreground);
+  }
+}
+/* Semantic color roles */
+@layer stl-ui.tokens {
+  :root {
+    --stl-color-link-foreground: var(--stl-color-accent-foreground);
+    --stl-color-text-selection: var(--stl-color-accent-inverse-background);
+  }
+}