@goplusvn/core 0.1.5 → 0.1.7

package/src/styles/base.css

@@ -0,0 +1,585 @@
+/*
+ * @goplusvn/core — canonical design tokens (Radix -> shadcn -> Plane semantic).
+ *
+ * Shared design-system foundation. Apps import it from their Tailwind v4 entry
+ * stylesheet AFTER pulling in Tailwind itself, then override brand tokens:
+ *
+ *   @import "tailwindcss";
+ *   @import "tw-animate-css";
+ *   @import "@goerp/core/styles/base.css";
+ *   @source "../node_modules/@goerp/core/src/(asterisk)(asterisk)/(asterisk).tsx";
+ *   :root { --primary: var(--violet-9); }  // re-skin here
+ *
+ * Brand default is indigo; neutral is slate. Re-skin by overriding
+ * --primary / --accent-primary / --ring / --sidebar-* in your app :root.
+ */
+@import "./radix-themes.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--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-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-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-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  --color-sidebar: hsl(var(--sidebar-background));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+
+  /* ── Semantic Tokens (Plane-inspired, usable as Tailwind utilities) ─── */
+  /* Usage: bg-layer-2, text-text-secondary, border-border-subtle, etc. */
+  --color-accent-primary: hsl(var(--accent-primary));
+  --color-accent-primary-hover: hsl(var(--accent-primary-hover));
+  --color-accent-primary-active: hsl(var(--accent-primary-active));
+  --color-accent-primary-subtle: hsl(var(--accent-primary-subtle));
+
+  --color-layer-1: hsl(var(--layer-1));
+  --color-layer-2: hsl(var(--layer-2));
+  --color-layer-2-hover: hsl(var(--layer-2-hover));
+  --color-layer-3: hsl(var(--layer-3));
+  --color-layer-3-hover: hsl(var(--layer-3-hover));
+  --color-layer-disabled: hsl(var(--layer-disabled));
+
+  --color-text-primary: hsl(var(--text-primary));
+  --color-text-secondary: hsl(var(--text-secondary));
+  --color-text-tertiary: hsl(var(--text-tertiary));
+  --color-text-disabled: hsl(var(--text-disabled));
+  --color-text-on-color: hsl(var(--text-on-color));
+
+  --color-border-subtle: hsl(var(--border-subtle));
+  --color-border-default: hsl(var(--border-default));
+  --color-border-strong: hsl(var(--border-strong));
+
+  --color-danger: hsl(var(--danger-primary));
+  --color-danger-hover: hsl(var(--danger-primary-hover));
+  --color-danger-subtle: hsl(var(--danger-subtle));
+  --color-danger-text: hsl(var(--danger-text));
+
+  --color-warning: hsl(var(--warning-primary));
+  --color-warning-subtle: hsl(var(--warning-subtle));
+  --color-warning-text: hsl(var(--warning-text));
+
+  --color-info: hsl(var(--info-primary));
+  --color-info-subtle: hsl(var(--info-subtle));
+  --color-info-text: hsl(var(--info-text));
+
+  --color-success-semantic: hsl(var(--success-primary));
+  --color-success-subtle: hsl(var(--success-subtle));
+  --color-success-text: hsl(var(--success-text));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-collapsible-down: collapsible-down 0.2s ease-out;
+  --animate-collapsible-up: collapsible-up 0.2s ease-out;
+  --animate-collapsible-right: collapsible-right 0.2s ease-out;
+  --animate-collapsible-left: collapsible-left 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 collapsible-down {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+
+  @keyframes collapsible-up {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes collapsible-right {
+    from {
+      width: 0;
+    }
+
+    to {
+      width: var(--radix-collapsible-content-width);
+    }
+  }
+
+  @keyframes collapsible-left {
+    from {
+      width: var(--radix-collapsible-content-width);
+    }
+
+    to {
+      width: 0;
+    }
+  }
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 1rem;
+
+  @media (width >=--theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+
+  @media (width >=1400px) {
+    max-width: 1400px;
+  }
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-border, currentColor);
+  }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+:root {
+  /* Neutral: Slate */
+  --background: var(--slate-1);
+  --foreground: var(--slate-12);
+  --card: var(--slate-1);
+  --card-foreground: var(--slate-12);
+  --popover: var(--slate-1);
+  --popover-foreground: var(--slate-12);
+
+  /* Brand: Indigo */
+  --primary: var(--indigo-9);
+  --primary-foreground: 0 0% 100%;
+  /* White text on indigo-9 is safe */
+
+  /* Secondary: Slate (lighter) */
+  --secondary: var(--slate-3);
+  --secondary-foreground: var(--slate-12);
+
+  /* Muted: Slate (subtle) */
+  --muted: var(--slate-2);
+  --muted-foreground: var(--slate-11);
+
+  /* Accent: Slate (hover states) */
+  --accent: var(--slate-3);
+  --accent-foreground: var(--slate-12);
+
+  /* Functional Colors */
+  --destructive: var(--red-9);
+  --destructive-foreground: 0 0% 100%;
+
+  --success: var(--green-9);
+  --success-foreground: 0 0% 100%;
+
+  /* Borders & Inputs */
+  --border: var(--slate-6);
+  --input: var(--slate-6);
+  --ring: var(--indigo-8);
+
+  --radius: 0.5rem;
+
+  /* ══════════════════════════════════════════════════════════════
+   * Semantic Design Tokens (Plane-inspired)
+   * Usage: bg-[hsl(var(--accent-primary))] or via Tailwind theme
+   *
+   * These tokens add a SEMANTIC layer on top of Radix Colors,
+   * making the intent of each color self-documenting.
+   * ══════════════════════════════════════════════════════════════ */
+
+  /* ── Accent (Brand Actions) ─── */
+  --accent-primary: var(--indigo-9);
+  --accent-primary-hover: var(--indigo-10);
+  --accent-primary-active: var(--indigo-11);
+  --accent-primary-subtle: var(--indigo-3);
+
+  /* ── Layer System (Surface Hierarchy) ─── */
+  --layer-1: var(--slate-1);
+  /* Page background */
+  --layer-2: var(--slate-2);
+  /* Card, raised surfaces */
+  --layer-2-hover: var(--slate-3);
+  --layer-3: var(--slate-3);
+  /* Nested surfaces */
+  --layer-3-hover: var(--slate-4);
+  --layer-disabled: var(--slate-3);
+
+  /* ── Text Hierarchy ─── */
+  --text-primary: var(--slate-12);
+  --text-secondary: var(--slate-11);
+  --text-tertiary: var(--slate-9);
+  --text-disabled: var(--slate-8);
+  --text-on-color: 0 0% 100%;
+  /* White text on colored backgrounds */
+
+  /* ── Border Hierarchy ─── */
+  --border-subtle: var(--slate-4);
+  --border-default: var(--slate-6);
+  --border-strong: var(--slate-7);
+
+  /* ── Status Colors (Functional) ─── */
+  --danger-primary: var(--red-9);
+  --danger-primary-hover: var(--red-10);
+  --danger-subtle: var(--red-3);
+  --danger-text: var(--red-11);
+
+  --warning-primary: var(--orange-9);
+  --warning-subtle: var(--orange-3);
+  --warning-text: var(--orange-11);
+
+  --info-primary: var(--blue-9);
+  --info-subtle: var(--blue-3);
+  --info-text: var(--blue-11);
+
+  --success-primary: var(--green-9);
+  --success-subtle: var(--green-3);
+  --success-text: var(--green-11);
+
+  /* Elevation system */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-xl:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  /* Charts */
+  --chart-1: var(--indigo-9);
+  --chart-2: var(--green-9);
+  --chart-3: var(--orange-9);
+  --chart-4: var(--blue-9);
+  --chart-5: var(--red-9);
+
+  /* Sidebar - Deep Blue Theme */
+  --sidebar-background: 233.9 88.8% 17.5%;
+  --sidebar-foreground: 0 0% 100%;
+  --sidebar-primary: 234.1 83% 68%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 234.1 60% 45%;
+  --sidebar-accent-foreground: 0 0% 100%;
+  --sidebar-border: 234.1 60% 30%;
+  --sidebar-ring: 233.9 88.8% 17.5%;
+
+  /* Calendar vars */
+  --fc-small-font-size: 0.875em;
+  --fc-page-bg-color: hsl(var(--border));
+  --fc-neutral-bg-color: hsl(var(--border));
+  --fc-neutral-text-color: hsl(var(--accent-foreground));
+  --fc-border-color: hsl(var(--border));
+  --fc-button-text-color: hsl(var(--background));
+  --fc-button-bg-color: hsl(var(--primary));
+  --fc-button-border-color: hsl(var(--primary));
+  --fc-button-hover-bg-color: hsl(var(--primary) / 0.8);
+  --fc-button-hover-border-color: hsl(var(--primary));
+  --fc-button-active-bg-color: hsl(var(--primary) / 0.8);
+  --fc-button-active-border-color: hsl(var(--primary) / 0);
+  --fc-event-bg-color: hsl(var(--primary));
+  --fc-event-border-color: hsl(var(--primary));
+  --fc-event-text-color: hsl(var(--background));
+  --fc-event-selected-overlay-color: hsl(var(--muted));
+  --fc-more-link-bg-color: hsl(var(--muted));
+  --fc-more-link-text-color: inherit;
+  --fc-event-resizer-thickness: 8px;
+  --fc-event-resizer-dot-total-width: 8px;
+  --fc-event-resizer-dot-border-width: var(--radius);
+  --fc-non-business-color: rgba(215, 215, 215, 0.3);
+  --fc-bg-event-color: hsl(var(--success));
+  --fc-bg-event-opacity: 0.3;
+  --fc-highlight-color: rgba(188, 232, 241, 0.3);
+  --fc-today-bg-color: hsl(var(--primary) / 0.15);
+  --fc-now-indicator-color: hsl(var(--destructive));
+}
+
+.dark {
+  /* Neutral: Slate Dark */
+  --background: var(--slate-1);
+  --foreground: var(--slate-12);
+  --card: var(--slate-2);
+  --card-foreground: var(--slate-12);
+  --popover: var(--slate-2);
+  --popover-foreground: var(--slate-12);
+
+  /* Brand: Indigo Dark */
+  --primary: var(--indigo-9);
+  --primary-foreground: 0 0% 100%;
+
+  /* Secondary */
+  --secondary: var(--slate-3);
+  --secondary-foreground: var(--slate-12);
+
+  /* Muted */
+  --muted: var(--slate-2);
+  --muted-foreground: var(--slate-11);
+
+  /* Accent */
+  --accent: var(--slate-3);
+  --accent-foreground: var(--slate-12);
+
+  /* Functional */
+  --destructive: var(--red-9);
+  --destructive-foreground: 0 0% 100%;
+
+  --success: var(--green-9);
+  --success-foreground: 0 0% 100%;
+
+  /* Borders & Inputs */
+  --border: var(--slate-6);
+  --input: var(--slate-6);
+  --ring: var(--indigo-8);
+
+  /* Charts */
+  --chart-1: var(--indigo-9);
+  --chart-2: var(--green-9);
+  --chart-3: var(--orange-9);
+  --chart-4: var(--blue-9);
+  --chart-5: var(--red-9);
+
+  /* Sidebar - Dark Mode Deep Blue */
+  --sidebar-background: 234.1 50% 10%;
+  /* Very dark blue */
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 234.1 70% 55%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 234.1 35% 17%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 234.1 30% 18%;
+  --sidebar-ring: 234.1 70% 50%;
+
+  /* ── Dark Mode Semantic Tokens ─── */
+  --accent-primary: var(--indigo-9);
+  --accent-primary-hover: var(--indigo-10);
+  --accent-primary-active: var(--indigo-11);
+  --accent-primary-subtle: var(--indigo-4);
+
+  --layer-1: var(--slate-1);
+  --layer-2: var(--slate-2);
+  --layer-2-hover: var(--slate-3);
+  --layer-3: var(--slate-3);
+  --layer-3-hover: var(--slate-4);
+  --layer-disabled: var(--slate-4);
+
+  --text-primary: var(--slate-12);
+  --text-secondary: var(--slate-11);
+  --text-tertiary: var(--slate-9);
+  --text-disabled: var(--slate-7);
+  --text-on-color: 0 0% 100%;
+
+  --border-subtle: var(--slate-4);
+  --border-default: var(--slate-6);
+  --border-strong: var(--slate-8);
+
+  --danger-primary: var(--red-9);
+  --danger-primary-hover: var(--red-10);
+  --danger-subtle: var(--red-4);
+  --danger-text: var(--red-11);
+
+  --warning-primary: var(--orange-9);
+  --warning-subtle: var(--orange-4);
+  --warning-text: var(--orange-11);
+
+  --info-primary: var(--blue-9);
+  --info-subtle: var(--blue-4);
+  --info-text: var(--blue-11);
+
+  --success-primary: var(--green-9);
+  --success-subtle: var(--green-4);
+  --success-text: var(--green-11);
+}
+
+aside.EmojiPickerReact {
+  /* Emoji Picker vars */
+  --epr-emoji-size: 2rem;
+  --epr-emoji-padding: 0.25rem;
+  --epr-emoji-gap: 0.5rem;
+  --epr-hover-bg-color: hsl(var(--accent));
+  --epr-focus-bg-color: hsl(var(--accent));
+  --epr-bg-color: hsl(var(--background));
+  --epr-reactions-bg-color: hsl(var(--background));
+  --epr-highlight-color: hsl(var(--primary));
+  --epr-category-icon-active-color: hsl(var(--primary));
+  --epr-category-label-bg-color: hsl(var(--background));
+  --epr-text-color: hsl(var(--foreground));
+  --epr-horizontal-padding: 0.75rem;
+  --epr-search-input-bg-color: hsl(var(--muted));
+  --epr-search-input-border-radius: var(--radius);
+  --epr-search-input-padding: 0 40px;
+  --epr-preview-text-size: 0.875rem;
+  --epr-header-padding: var(--epr-horizontal-padding) var(--epr-horizontal-padding);
+  --epr-picker-border-radius: var(--radius);
+  --epr-picker-border-color: hsl(var(--border));
+  --epr-skin-tone-outer-border-color: hsl(var(--border));
+}
+
+.EmojiPickerReact .epr-btn {
+  border-radius: var(--radius);
+}
+
+.EmojiPickerReact .epr-btn:focus::before {
+  border-radius: var(--radius);
+  border-width: 1px;
+}
+
+/* Toast notification positioning - responsive */
+/* Desktop: top-right, Mobile: top-center */
+[data-sonner-toaster] {
+  top: 1rem !important;
+  bottom: auto !important;
+}
+
+@media (max-width: 768px) {
+  [data-sonner-toaster] {
+    left: 50% !important;
+    right: auto !important;
+    transform: translateX(-50%) !important;
+    top: 1rem !important;
+    bottom: auto !important;
+  }
+
+  [data-sonner-toast] {
+    left: 50% !important;
+    right: auto !important;
+    transform: translateX(-50%) !important;
+  }
+}
+
+/* Ensure toasts are always at top */
+[data-sonner-toast] {
+  top: 1rem !important;
+  bottom: auto !important;
+}
+
+/* Custom Scrollbar Utility - Always visible on macOS & Windows */
+@utility custom-scrollbar {
+  /* Firefox: always show thin scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
+
+  /* Webkit (Chrome, Safari, Edge): force scrollbar always visible */
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    -webkit-appearance: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: hsl(var(--muted) / 0.3);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    /* slate-300 */
+    border-radius: 4px;
+    min-height: 40px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+    /* slate-400 */
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+
+.dark .custom-scrollbar {
+  scrollbar-color: #475569 transparent;
+}
+
+.dark .custom-scrollbar::-webkit-scrollbar-track {
+  background: hsl(var(--muted) / 0.2);
+}
+
+.dark .custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #475569;
+  /* slate-600 */
+}
+
+.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #64748b;
+  /* slate-500 */
+}