@gearbox-protocol/ui-kit 2.1.0-next.1

package/src/styles/base.css

@@ -0,0 +1,548 @@
+/**
+ * Base styles for @gearbox-protocol/ui-kit
+ *
+ * This file contains:
+ * - Google Fonts import (Rubik)
+ * - CSS variables for light/dark themes (:root, .dark)
+ * - Base body styles with fallbacks
+ * - Scrollbar styles (custom + navbar)
+ * - Table responsive grid (.table-sm-grid)
+ * - React-Slick carousel overrides
+ * - Liquidation graph styles
+ *
+ * Does NOT contain:
+ * - @import "tailwindcss" (import separately)
+ * - @theme block (use theme.css for Tailwind v4 utilities)
+ * - Grid safelist (use grid-safelist.css)
+ *
+ * Usage:
+ * - For full setup: import globals.css (includes everything)
+ * - For modular setup: import base.css + theme.css + tailwindcss separately
+ */
+@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");
+
+/*
+ * Critical fallback styles for browsers without CSS variable support
+ * or when @layer/@theme directives fail. These use raw color values
+ * to ensure the page is at least readable.
+ */
+html {
+  /* Light theme fallback */
+  background-color: #f8f9fa;
+  color: #1f1f23;
+}
+
+@media (max-width: 720px) {
+  html {
+    font-size: 0.875rem;
+  }
+}
+
+html.dark {
+  /* Dark theme fallback */
+  background-color: #141416;
+  color: #ffffff;
+}
+
+@layer base {
+  :root {
+    color-scheme: light dark;
+
+    --background: 225 15% 98%;
+    --foreground: 240 5% 12%;
+    --card: 0 0% 100%;
+    --modal: 0 0% 95%;
+    --card-foreground: 240 5% 12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 5% 12%;
+    --primary: 323.89 93.39% 47.45%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 225 12% 92%;
+    --secondary-foreground: 240 8.94% 75.88%;
+    --muted: 225 10% 90%;
+    --muted-foreground: 225 6% 40%;
+    --accent: 323.83 100% 58.04%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 85% 50%;
+    --destructive-foreground: 0 0% 100%;
+    --success: 136.51 100% 78.63%;
+    --success-foreground: 0 0% 0%;
+    --success-hover: 136.58 100% 85.1%;
+    --warning: 38 95% 45%;
+    --liquidation: 274 67% 48%;
+    --input: 225 10% 88%;
+    --ring: 330 100% 50%;
+    --radius: 0.75rem;
+    --gray-10: 228 6.76% 70.98%;
+    --gray-20: 220 6.12% 51.96%;
+    --gray-30: 222.86 5.74% 47.84%;
+    --gray-40: 221.54 5.83% 43.73%;
+    --gray-50: 223.64 5.42% 39.8%;
+    --gray-60: 220 6.59% 35.69%;
+    --gray-70: 223.64 6.83% 31.57%;
+    --gray-80: 220 6.47% 27.25%;
+    --gray-90: 220 7.56% 23.33%;
+    --gray-100: 217.5 8.16% 19.22%;
+    --gray-110: 225 5.26% 14.9%;
+    --text-secondary: 225 6% 45%;
+    --dropdown-dark-button: 225 8% 25%;
+    --white: 0 0% 100%;
+    --white-foreground: 240 2.56% 7.65%;
+    --black: 0 0% 0%;
+    --border: 225 10% 88%;
+  }
+
+  .dark {
+    color-scheme: dark;
+
+    --background: 240 3% 8%;
+    --foreground: 0 0% 100%;
+    --card: 240 3.85% 10.2%;
+    --modal: 240 4.92% 11.96%;
+    --card-foreground: 0 0% 100%;
+    --popover: 240 6% 12%;
+    --popover-foreground: 0 0% 100%;
+    --primary: 323.89 93.39% 47.45%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 240 7% 17%;
+    --secondary-foreground: 240 8.94% 75.88%;
+    --muted: 225 6% 19%;
+    --muted-foreground: 240 2% 75%;
+    --accent: 323.83 100% 58.04%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 100% 65.69%;
+    --success: 136.51 100% 78.63%;
+    --success-foreground: 0 0% 0%;
+    --success-hover: 136.58 100% 85.1%;
+    --destructive-foreground: 0 0% 100%;
+    --warning: 43.12 100% 68.63%;
+    --liquidation: 277.22 74.53% 58.43%;
+    --input: 225 6% 19%;
+    --ring: 330 100% 59%;
+    --gray-10: 225 5.26% 14.9%;
+    --gray-20: 217.5 8.16% 19.22%;
+    --gray-30: 220 7.56% 23.33%;
+    --gray-40: 220 6.47% 27.25%;
+    --gray-50: 223.64 6.83% 31.57%;
+    --gray-60: 220 6.59% 35.69%;
+    --gray-70: 223.64 5.42% 39.8%;
+    --gray-80: 221.54 5.83% 43.73%;
+    --gray-90: 222.86 5.74% 47.84%;
+    --gray-100: 220 6.12% 51.96%;
+    --gray-110: 228 6.76% 70.98%;
+    --text-secondary: 240 2% 75%;
+    --dropdown-dark-button: 225 6% 19%;
+    --white: 0 0% 100%;
+    --white-foreground: 240 2.56% 7.65%;
+    --black: 0 0% 0%;
+    --border: 0 0% 100% / 0.07;
+  }
+}
+
+@layer base {
+  body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    font-family:
+      "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+      sans-serif;
+    font-size: 1rem;
+    line-height: 1.1875rem;
+
+    /* Fallback colors for browsers without CSS variable support */
+    background-color: #f8f9fa;
+    background-color: hsl(var(--background));
+    color: #1f1f23;
+    color: hsl(var(--foreground));
+    border-color: #dfe2e6;
+    border-color: hsl(var(--border));
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+    font-feature-settings: "ss01" on,
+      "ss02" on,
+      "cv01" on,
+      "cv03" on;
+  }
+
+  /* Dark theme body styles with fallback */
+  .dark body,
+  html.dark body {
+    background-color: #141416;
+    background-color: hsl(var(--background));
+    color: #ffffff;
+    color: hsl(var(--foreground));
+  }
+
+  /* Prevent layout shift for fixed elements when modals/dialogs lock scroll */
+  body[data-scroll-locked] [class~="fixed"] {
+    padding-right: var(--removed-body-scroll-bar-size, 0px);
+  }
+
+  /* Prevent Select/Combobox from blocking page scroll */
+  body[data-scroll-locked="1"] {
+    overflow: auto !important;
+    margin-right: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  /* Lock page scroll when our Modal is open */
+  body.gb-modal-open {
+    overflow: hidden !important;
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  *:not(.navbar-scrollbar)::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    border-radius: 8px;
+  }
+
+  *:not(.navbar-scrollbar)::-webkit-scrollbar-thumb {
+    background: hsl(var(--gray-90));
+    border-radius: 8px;
+  }
+
+  *:not(.navbar-scrollbar)::-webkit-scrollbar-track {
+    background: hsl(var(--gray-20));
+  }
+}
+
+/* Scrollbar always hidden (e.g. TabControl) */
+.scrollbar-hidden {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}
+
+.navbar-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.navbar-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .navbar-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--muted-foreground) / 0.2) transparent;
+  }
+
+  .navbar-scrollbar::-webkit-scrollbar {
+    display: block;
+    width: 2px;
+    height: 2px;
+  }
+
+  .navbar-scrollbar::-webkit-scrollbar-thumb {
+    background: hsl(var(--muted-foreground) / 0.2);
+    border-radius: 1px;
+  }
+
+  .navbar-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted-foreground) / 0.35);
+  }
+
+  .navbar-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+    margin: 2px;
+  }
+}
+
+/* Table responsive grid with CSS variables */
+.table-sm-grid {
+  grid-template-columns: repeat(var(--grid-cols-xs, 1), minmax(0, 1fr));
+}
+
+@media (min-width: 640px) {
+  .table-sm-grid {
+    grid-template-columns: repeat(var(--grid-cols-sm, var(--grid-cols-xs, 1)),
+        minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 768px) {
+  .table-sm-grid {
+    grid-template-columns: repeat(var(--grid-cols-md, var(--grid-cols-sm, var(--grid-cols-xs, 1))),
+        minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .table-sm-grid {
+    grid-template-columns: repeat(var(--grid-cols-lg,
+          var(--grid-cols-md, var(--grid-cols-sm, var(--grid-cols-xs, 1)))),
+        minmax(0, 1fr));
+  }
+}
+
+/* React-Slick Carousel Styles - Override Tailwind Preflight */
+.slick-slider {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  user-select: none;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
+
+.slick-track {
+  position: relative;
+  display: flex !important;
+  align-items: flex-start;
+  margin-left: 0;
+}
+
+.slick-slide {
+  float: none;
+  min-height: 1px;
+}
+
+.slick-slide>div {
+  width: 100%;
+}
+
+/* Carousel: wrapper clips the horizontal offset overflow while allowing arrows above */
+.carousel-clip {
+  overflow-x: clip;
+  overflow-y: visible;
+}
+
+/* Carousel root: offset + padding technique for slide gap */
+.carousel-root {
+  position: relative;
+  left: calc(-1 * var(--carousel-gap, 0px));
+  width: calc(100% + var(--carousel-gap, 0px));
+}
+
+.carousel-root .slick-list {
+  overflow: hidden;
+}
+
+.carousel-root .slick-slide {
+  padding-left: var(--carousel-gap, 0);
+}
+
+/* Slick Dots - Override Tailwind list resets */
+.slick-dots {
+  position: relative;
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  margin: 20px 0 0 0;
+  padding: 0;
+  list-style: none;
+  bottom: 0;
+}
+
+.slick-dots li {
+  position: relative;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  width: 8px;
+  height: 8px;
+  list-style: none;
+}
+
+.slick-dots li button {
+  display: block;
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 50%;
+  background: hsl(var(--gray-100));
+  font-size: 0;
+  line-height: 0;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.slick-dots li button:hover {
+  background: hsl(var(--gray-100) / 0.8);
+}
+
+.slick-dots li button::before {
+  display: none;
+}
+
+.slick-dots li.slick-active button {
+  background: hsl(var(--white));
+}
+
+/* Slick Arrows */
+.slick-arrow {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: hsl(var(--foreground));
+  font-size: 0;
+  line-height: 0;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.slick-arrow::before {
+  display: none;
+}
+
+.slick-arrow:hover,
+.slick-arrow:focus {
+  color: hsl(var(--muted-foreground));
+  outline: none;
+}
+
+.slick-prev {
+  top: -25px;
+  right: 32px;
+  left: auto;
+}
+
+.slick-next {
+  top: -25px;
+  right: 0;
+}
+
+.slick-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.slick-arrow.slick-disabled {
+  display: flex;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Liquidation Graph Styles */
+.liquidation-graph-container .rct-xy-plot {
+  .rct-chart-background {
+    fill: transparent;
+  }
+
+  .rct-chart-inner {
+    .rct-plot-background {
+      fill: transparent;
+    }
+
+    /* Crosshair lines */
+    .rct-chart-line-x.rct-crosshair-x,
+    .rct-chart-line-y.rct-crosshair-y {
+      stroke: black;
+      stroke-dasharray: 1px, 1px;
+    }
+
+    /* Axis text styling */
+    &>g:not([class])>text {
+      font-family: inherit;
+      font-size: 12px;
+      line-height: 14px;
+      font-weight: 400;
+      font-style: normal;
+      fill: hsl(var(--muted-foreground));
+      user-select: none;
+    }
+
+    .rct-chart-axis.rct-chart-axis-y,
+    .rct-chart-axis.rct-chart-axis-x {
+      cursor: pointer;
+    }
+
+    .rct-chart-axis.rct-chart-axis-y .rct-chart-value-labels-y text,
+    .rct-chart-axis.rct-chart-axis-x .rct-chart-value-labels-x text {
+      font-family: inherit;
+      font-size: 12px;
+      line-height: 14px;
+      font-weight: 400;
+      font-style: normal;
+      fill: hsl(var(--muted-foreground));
+      user-select: none;
+    }
+
+    .rct-chart-axis.rct-chart-axis-y>g:not([class])>text,
+    .rct-chart-axis.rct-chart-axis-x>g:not([class])>text {
+      font-family: inherit;
+      font-size: 12px;
+      line-height: 14px;
+      font-weight: 400;
+      font-style: normal;
+      fill: hsl(var(--muted-foreground));
+      user-select: none;
+    }
+
+    .rct-chart-grid-x .rct-chart-line-x.rct-chart-grid-line:first-of-type,
+    .rct-chart-grid-y .rct-chart-line-y.rct-chart-grid-line:first-of-type {
+      stroke-width: 2px;
+      stroke: hsl(var(--border));
+    }
+
+    .rct-chart-axis.rct-chart-axis-y .rct-chart-ticks-y line,
+    .rct-chart-axis.rct-chart-axis-x .rct-chart-ticks-x line {
+      stroke-width: 2px;
+      stroke: hsl(var(--border));
+    }
+
+    /* Heatmap cell colors */
+    .rct-chart__heatmap-cell--current {
+      fill: white !important;
+      stroke: black;
+      stroke-width: 0.1px;
+    }
+
+    .rct-chart__heatmap-cell--liquidation {
+      fill: hsl(var(--destructive)) !important;
+      stroke: black;
+      stroke-width: 0.1px;
+    }
+
+    .rct-chart__heatmap-cell--bad {
+      fill: rgb(255, 152, 0) !important;
+      stroke: black;
+      stroke-width: 0.1px;
+    }
+
+    .rct-chart__heatmap-cell--ok {
+      fill: hsl(var(--warning)) !important;
+      stroke: black;
+      stroke-width: 0.1px;
+    }
+
+    .rct-chart__heatmap-cell--good {
+      fill: hsl(var(--success)) !important;
+      stroke: black;
+      stroke-width: 0.1px;
+    }
+
+    .rct-chart__heatmap-cell--hovered {
+      opacity: 0.6;
+    }
+  }
+}

package/src/styles/theme.css

@@ -0,0 +1,122 @@
+/**
+ * Tailwind v4 theme configuration
+ *
+ * This file contains ONLY the @theme block for generating Tailwind utility classes
+ * (bg-background, text-primary, border-gray-50, etc.)
+ *
+ * Requires CSS variables from base.css to be loaded first.
+ *
+ * Usage:
+ * - For full setup: import globals.css (includes everything)
+ * - For modular setup: import base.css before this file
+ */
+@theme {
+  /* Custom breakpoint (matches preset xs: 500px) — v4 reads breakpoints from @theme, not JS config */
+  --breakpoint-xs: 500px;
+
+  /* Delayed fade-in animation for loading states */
+  --animate-delayed-fade-in: delayed-fade-in 150ms ease-out 300ms forwards;
+
+  @keyframes delayed-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-modal: hsl(var(--modal));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+  --color-success-hover: hsl(var(--success-hover));
+  --color-warning: hsl(var(--warning));
+  --color-liquidation: hsl(var(--liquidation));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-text-secondary: hsl(var(--text-secondary));
+  --color-dropdown-dark-button: hsl(var(--dropdown-dark-button));
+  --color-white: hsl(var(--white));
+  --color-white-foreground: hsl(var(--white-foreground));
+  --color-black: hsl(var(--black));
+  --color-gray-10: hsl(var(--gray-10));
+  --color-gray-20: hsl(var(--gray-20));
+  --color-gray-30: hsl(var(--gray-30));
+  --color-gray-40: hsl(var(--gray-40));
+  --color-gray-50: hsl(var(--gray-50));
+  --color-gray-60: hsl(var(--gray-60));
+  --color-gray-70: hsl(var(--gray-70));
+  --color-gray-80: hsl(var(--gray-80));
+  --color-gray-90: hsl(var(--gray-90));
+  --color-gray-100: hsl(var(--gray-100));
+  --color-gray-110: hsl(var(--gray-110));
+
+  /* Additional semantic colors (aliases) */
+  --color-additional-success: hsl(var(--success));
+  --color-additional-warning: hsl(var(--warning));
+  --color-additional-alert: hsl(var(--destructive));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  /* Accordion animations */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes modalOverlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes modalContentShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+}