@pebble-software/bonsai 0.0.3 → 0.0.5

package/dist/index.css

@@ -0,0 +1,453 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* --- Fonts --- */
+@font-face {
+  font-family: "Great Vibes";
+  src: url("https://brand.pebble.software/fonts/GreatVibes-Regular.ttf")
+    format("truetype");
+  font-weight: auto;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Sora";
+  src: url("https://brand.pebble.software/fonts/Sora-VariableFont_wght.ttf")
+    format("truetype");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Fredoka";
+  src: url("https://brand.pebble.software/fonts/Fredoka-VariableFont_wdth,wght.ttf")
+    format("truetype");
+  font-weight: 300 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@theme {
+  /* --- Typography --- */
+  --font-body: "Sora", ui-sans-serif, system-ui, sans-serif;
+  --font-heading: "Fredoka", ui-monospace, monospace;
+  --font-signature: "Great Vibes", cursive;
+  --font-weight-base: 400;
+  --font-weight-heading: 600;
+
+  /* --- Core Colors (Default - Emerald) --- */
+  --color-main: var(--color-accent-emerald);
+  --color-main-secondary: var(--color-accent-emerald-secondary);
+  --color-main-foreground: oklch(0% 0 0);
+
+  --color-background: var(--color-white);
+  --color-foreground: oklch(0% 0 0);
+  --color-surface: oklch(100% 0 0);
+  --color-muted: oklch(0% 0 0 / 0.65);
+  --color-subtle: oklch(0% 0 0 / 0.5);
+
+  --color-border: oklch(0% 0 0);
+  --color-ring: oklch(0% 0 0);
+  --color-overlay: oklch(0% 0 0 / 0.8);
+
+  /* --- Accent Palette --- */
+  --color-accent-red: oklch(67.28% 0.2147 24.22);
+  --color-accent-red-secondary: oklch(93.3% 0.0339 17.77);
+
+  --color-accent-orange: oklch(72.27% 0.1894 50.19);
+  --color-accent-orange-secondary: oklch(95.38% 0.0357 72.89);
+
+  --color-accent-amber: oklch(84.08% 0.1725 84.2);
+  --color-accent-amber-secondary: oklch(96% 0.04 85);
+
+  --color-accent-yellow: oklch(86.03% 0.176 92.36);
+  --color-accent-yellow-secondary: oklch(96.79% 0.0654 102.26);
+
+  --color-accent-lime: oklch(83.29% 0.2331 132.51);
+  --color-accent-lime-secondary: oklch(95.37% 0.0549 125.19);
+
+  --color-accent-green: oklch(79.76% 0.2044 153.08);
+  --color-accent-green-secondary: oklch(96.47% 0.0401 157.79);
+
+  --color-accent-emerald: oklch(77.54% 0.1681 162.78);
+  --color-accent-emerald-secondary: oklch(95.31% 0.0496 169.04);
+
+  --color-accent-teal: oklch(78.57% 0.1422 180.36);
+  --color-accent-teal-secondary: oklch(95.08% 0.0481 184.07);
+
+  --color-accent-cyan: oklch(76.89% 0.139164 219.13);
+  --color-accent-cyan-secondary: oklch(94.61% 0.043 211.12);
+
+  --color-accent-sky: oklch(66.9% 0.18368 248.8066);
+  --color-accent-sky-secondary: oklch(94.27% 0.0268 242.57);
+
+  --color-accent-blue: oklch(67.47% 0.1726 259.49);
+  --color-accent-blue-secondary: oklch(93.46% 0.0305 255.11);
+
+  --color-accent-indigo: oklch(66.34% 0.1806 277.2);
+  --color-accent-indigo-secondary: oklch(92.13% 0.0388 282.36);
+
+  --color-accent-violet: oklch(70.28% 0.1753 295.36);
+  --color-accent-violet-secondary: oklch(93% 0.04 295);
+
+  --color-accent-purple: oklch(71.9% 0.198 310.03);
+  --color-accent-purple-secondary: oklch(94.11% 0.036556 308.0303);
+
+  --color-accent-fuchsia: oklch(73.43% 0.2332 321.41);
+  --color-accent-fuchsia-secondary: oklch(94% 0.04 321);
+
+  --color-accent-pink: oklch(71.5% 0.197 354.23);
+  --color-accent-pink-secondary: oklch(95.16% 0.0242 343.23);
+
+  --color-accent-rose: oklch(70.79% 0.1862 16.25);
+  --color-accent-rose-secondary: oklch(93.37% 0.0339 12.05);
+
+  /* --- Chart Colors (for Recharts graphs only) --- */
+  --color-chart-1: var(--color-accent-red);
+  --color-chart-2: var(--color-accent-orange);
+  --color-chart-3: var(--color-accent-amber);
+  --color-chart-4: var(--color-accent-yellow);
+  --color-chart-5: var(--color-accent-lime);
+  --color-chart-6: var(--color-accent-green);
+  --color-chart-7: var(--color-accent-emerald);
+  --color-chart-8: var(--color-accent-teal);
+  --color-chart-9: var(--color-accent-cyan);
+  --color-chart-10: var(--color-accent-sky);
+  --color-chart-11: var(--color-accent-blue);
+  --color-chart-12: var(--color-accent-indigo);
+  --color-chart-13: var(--color-accent-violet);
+  --color-chart-14: var(--color-accent-purple);
+  --color-chart-15: var(--color-accent-fuchsia);
+  --color-chart-16: var(--color-accent-pink);
+  --color-chart-17: var(--color-accent-rose);
+  --color-chart-active-dot: var(--color-foreground);
+
+  /* --- Borders --- */
+  --default-border-width: 2px;
+
+  /* --- Shadows & Spacing --- */
+  --radius-base: var(--radius-lg);
+  --spacing-boxShadowX: 3px;
+  --spacing-boxShadowY: 3px;
+
+  /* --- Drop Shadows --- */
+  --shadow-min: 1px 1px 0px 0px var(--color-border);
+  --shadow-xs: 2px 2px 0px 0px var(--color-border);
+  --shadow-sm: 3px 3px 0px 0px var(--color-border);
+  --shadow-md: 4px 4px 0px 0px var(--color-border);
+  --shadow-lg: 4.75px 4.75px 0px 0px var(--color-border);
+  --shadow-xl: 5.5px 5.5px 0px 0px var(--color-border);
+
+  --shadow-default: var(--shadow-md);
+
+  /* --- Inset Shadows --- */
+  --inset-shadow-xs: inset 1px 1px 0px 0px var(--color-border);
+  --inset-shadow-sm: inset 2px 2px 0px 0px var(--color-border);
+  --inset-shadow-md: inset 3px 3px 0px 0px var(--color-border);
+  --inset-shadow-lg: inset 4px 4px 0px 0px var(--color-border);
+  --inset-shadow-xl: inset 5px 5px 0px 0px var(--color-border);
+
+  /* --- Aspect Ratios --- */
+  --aspect-a4: 210/297;
+  --aspect-a4-landscape: 297/210;
+
+  /* --- Animations & Keyframes --- */
+  --animate-cloud-move: cloud-move 60s linear infinite alternate;
+  --animate-float: float 3s ease-in-out infinite;
+  --animate-subtle-float: subtle-float 3s ease-in-out infinite;
+  --animate-color-cycle: color-cycle 30s ease-in-out infinite;
+  --animate-color-cycle-vibrant: color-cycle-vibrant 30s ease-in-out infinite;
+  --animate-bg-color-cycle: bg-color-cycle 30s ease-in-out infinite;
+  --animate-bg-color-cycle-vibrant: bg-color-cycle-vibrant 30s ease-in-out
+    infinite;
+  --animate-font-color-cycle-vibrant: font-color-cycle-vibrant 30s ease-in-out
+    infinite;
+
+  @keyframes cloud-move {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-100vw);
+    }
+  }
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0%);
+    }
+    50% {
+      transform: translateY(-5%);
+    }
+  }
+  @keyframes subtle-float {
+    0%,
+    100% {
+      transform: translateY(0%);
+    }
+    50% {
+      transform: translateY(-2%);
+    }
+  }
+
+  @keyframes bg-color-cycle {
+    0% {
+      background-color: var(--color-accent-red-secondary);
+    }
+    50% {
+      background-color: var(--color-accent-cyan-secondary);
+    }
+    100% {
+      background-color: var(--color-accent-rose-secondary);
+    }
+  }
+  @keyframes bg-color-cycle-vibrant {
+    0% {
+      background-color: var(--color-accent-red);
+    }
+    50% {
+      background-color: var(--color-accent-cyan);
+    }
+    100% {
+      background-color: var(--color-accent-rose);
+    }
+  }
+  @keyframes font-color-cycle-vibrant {
+    0% {
+      color: var(--color-accent-red);
+    }
+    50% {
+      color: var(--color-accent-cyan);
+    }
+    100% {
+      color: var(--color-accent-rose);
+    }
+  }
+}
+
+/* --- Global Resets & Theme Overrides --- */
+@layer base {
+  /* THEME DEFINITIONS
+     Usage: <html data-theme="red"> or <body data-theme="indigo">
+     Logic: 
+       - Main: The vibrant accent color
+       - Background: The secondary pastel version
+       - Main-Foreground: White for dark accents, Black for light accents (EX. text on buttons)
+  */
+
+  [data-theme="red"] {
+    --color-main: var(--color-accent-red);
+    --color-main-secondary: var(--color-accent-red-secondary);
+    --color-background: var(--color-accent-red-secondary);
+    --color-main-foreground: oklch(100% 0 0);
+  }
+
+  [data-theme="orange"] {
+    --color-main: var(--color-accent-orange);
+    --color-main-secondary: var(--color-accent-orange-secondary);
+    --color-background: var(--color-accent-orange-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="amber"] {
+    --color-main: var(--color-accent-amber);
+    --color-main-secondary: var(--color-accent-amber-secondary);
+    --color-background: var(--color-accent-amber-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="yellow"] {
+    --color-main: var(--color-accent-yellow);
+    --color-main-secondary: var(--color-accent-yellow-secondary);
+    --color-background: var(--color-accent-yellow-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="lime"] {
+    --color-main: var(--color-accent-lime);
+    --color-main-secondary: var(--color-accent-lime-secondary);
+    --color-background: var(--color-accent-lime-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="green"] {
+    --color-main: var(--color-accent-green);
+    --color-main-secondary: var(--color-accent-green-secondary);
+    --color-background: var(--color-accent-green-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="emerald"] {
+    --color-main: var(--color-accent-emerald);
+    --color-main-secondary: var(--color-accent-emerald-secondary);
+    --color-background: var(--color-accent-emerald-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="teal"] {
+    --color-main: var(--color-accent-teal);
+    --color-main-secondary: var(--color-accent-teal-secondary);
+    --color-background: var(--color-accent-teal-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="cyan"] {
+    --color-main: var(--color-accent-cyan);
+    --color-main-secondary: var(--color-accent-cyan-secondary);
+    --color-background: var(--color-accent-cyan-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="sky"] {
+    --color-main: var(--color-accent-sky);
+    --color-main-secondary: var(--color-accent-sky-secondary);
+    --color-background: var(--color-accent-sky-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="blue"] {
+    --color-main: var(--color-accent-blue);
+    --color-main-secondary: var(--color-accent-blue-secondary);
+    --color-background: var(--color-accent-blue-secondary);
+    --color-main-foreground: oklch(100% 0 0);
+  }
+
+  [data-theme="indigo"] {
+    --color-main: var(--color-accent-indigo);
+    --color-main-secondary: var(--color-accent-indigo-secondary);
+    --color-background: var(--color-accent-indigo-secondary);
+    --color-main-foreground: oklch(100% 0 0);
+  }
+
+  [data-theme="violet"] {
+    --color-main: var(--color-accent-violet);
+    --color-main-secondary: var(--color-accent-violet-secondary);
+    --color-background: var(--color-accent-violet-secondary);
+    --color-main-foreground: oklch(100% 0 0);
+  }
+
+  [data-theme="purple"] {
+    --color-main: var(--color-accent-purple);
+    --color-main-secondary: var(--color-accent-purple-secondary);
+    --color-background: var(--color-accent-purple-secondary);
+    --color-main-foreground: oklch(100% 0 0);
+  }
+
+  [data-theme="fuchsia"] {
+    --color-main: var(--color-accent-fuchsia);
+    --color-main-secondary: var(--color-accent-fuchsia-secondary);
+    --color-background: var(--color-accent-fuchsia-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="pink"] {
+    --color-main: var(--color-accent-pink);
+    --color-main-secondary: var(--color-accent-pink-secondary);
+    --color-background: var(--color-accent-pink-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="rose"] {
+    --color-main: var(--color-accent-rose);
+    --color-main-secondary: var(--color-accent-rose-secondary);
+    --color-background: var(--color-accent-rose-secondary);
+    --color-main-foreground: oklch(100% 0 0);
+  }
+
+  html { }
+
+  body {
+    font-family: var(--font-body);
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading);
+  }
+}
+
+/* --- Utilities --- */
+@layer utilities {
+  .neo-base {
+    @apply touch-manipulation select-none appearance-none outline-none;
+  }
+  .neo-popup-focus {
+    @apply focus-visible:after:absolute focus-visible:after:-inset-1 focus-visible:after:border-8 focus-visible:after:pointer-events-none 
+    focus-visible:after:border-foreground focus-visible:after:rounded-[inherit] focus-visible:after:blur-[2px];
+  }
+  .neo-accordion-focus {
+    @apply focus:outline-none focus-visible:after:absolute focus-visible:after:-inset-px focus-visible:after:border-2 focus-visible:after:pointer-events-none 
+    focus-visible:after:border-foreground/30 focus-visible:after:rounded-sm;
+  }
+  .neo-button-focus {
+    @apply focus:outline-none focus-visible:after:absolute focus-visible:after:-inset-px focus-visible:after:border-3 focus-visible:after:pointer-events-none 
+    focus-visible:after:border-foreground/30 focus-visible:after:rounded-[inherit];
+  }
+  .neo-input-focus {
+    @apply outline-none hover:shadow-sm hover:-translate-[3px] focus-visible:shadow-sm focus-visible:-translate-[3px];
+  }
+  .neo-switch-focus {
+    @apply outline-none hover:shadow-xs hover:-translate-[2px] focus-visible:shadow-xs focus-visible:-translate-[2px];
+  }
+  .neo-chips-focus {
+    @apply translate-0 has-data-pressed:shadow-sm has-data-pressed:-translate-[3px] outline-none hover:shadow-sm hover:-translate-[3px] focus-visible:shadow-sm focus-visible:-translate-[3px];
+  }
+  .neo-checkbox-focus {
+    @apply hover:shadow-xs hover:-translate-0.5 focus-visible:shadow-xs focus-visible:-translate-0.5 active:translate-0 active:shadow-none;
+  }
+  .neo-sidebar-button-focus {
+    @apply border-2 border-transparent focus-visible:border-black hover:border-black hover:shadow-sm hover:-translate-[3px] focus-visible:shadow-sm focus-visible:-translate-[3px] active:shadow-none active:translate-0;
+  }
+  .neo-scrollbar-focus {
+    @apply active:z-14 hover:z-12 focus:[&_svg]:scale-110 focus:z-12 focus:[&_svg]:fill-main hover:[&_svg]:fill-main focus:[&_svg]:text-main hover:[&_svg]:text-main;
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+/* --- 3rd Party Overrides --- */
+.recharts-wrapper > svg > g {
+  outline: none !important;
+}
+.recharts-wrapper .recharts-cartesian-grid-horizontal line:last-child {
+  stroke-opacity: 0;
+}
+
+.maplibregl-ctrl {
+  @apply bg-surface! outline-0! shadow-none! *:[button]:rounded-base *:[button]:bg-surface! *:[button]:hover:bg-main! *:[button]:transition-all *:[button]:duration-200 *:[button]:border-2! *:[button]:border-border! *:[button]:shadow-xs! *:[button]:-translate-0.5! *:[button]:hover:shadow-min! *:[button]:hover:-translate-px! *:[button]:focus-visible:-translate-px! *:[button]:focus-visible:shadow-min! *:[button]:active:shadow-none! *:[button]:active:translate-0! *:[button]:aria-disabled:shadow-none! *:[button]:aria-disabled:translate-0!;
+}
+
+.maplibregl-ctrl-zoom-in {
+  @apply -mb-0.5! rounded-b-none!;
+}
+
+.maplibregl-ctrl-zoom-out {
+  @apply rounded-t-none!;
+}
+
+.maplibregl-ctrl-fullscreen {
+  @apply p-1!;
+}
+
+.maplibregl-ctrl-scale {
+  @apply transition-[width] duration-500 delay-100 rounded-sm! border-2! border-border! hover:bg-main! bg-surface! font-bold! leading-none! py-1! shadow-sm! font-mono! text-xs!;
+}
+
+.maplibregl-user-location-dot {
+  @apply shadow-xl! bg-accent-blue! before:bg-accent-blue! after:border-border!;
+}
+.maplibregl-user-location-accuracy-circle {
+  @apply bg-accent-blue/20!;
+}