@gostack-framework/ui 0.0.0-stage → 0.1.0

package/styles.css

@@ -0,0 +1,532 @@
+@import "tailwindcss" source(none);
+@source "./src";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+
+@theme {
+  --color-primary: #1e2a38;
+  --color-secondary: #4a6fa5;
+  --color-accent: #c8a96a;
+  --color-overlay: #f5f7fa;
+  --color-dark: #2b2b2b;
+
+  --color-dashboard-background: #121212;
+  --color-dashboard-foreground: #FFFFFF;
+  --color-dashboard-card: #18181a;
+  --color-dashboard-card-foreground: #FFFFFF;
+  --color-dashboard-popover: #18181a;
+  --color-dashboard-popover-foreground: #FFFFFF;
+  --color-dashboard-primary: #036268;
+  --color-dashboard-primary-foreground: #FFFFFF;
+  --color-dashboard-secondary: #1D1D1F;
+  --color-dashboard-secondary-foreground: #FFFFFF;
+  --color-dashboard-muted: #2A2A2C;
+  --color-dashboard-muted-foreground: #A1A1AA;
+  --color-dashboard-accent: #1D1D1F;
+  --color-dashboard-accent-foreground: #FFFFFF;
+  --color-dashboard-destructive: #EF4444;
+  --color-dashboard-destructive-foreground: #FFFFFF;
+  --color-dashboard-border: #2A2A2C;
+  --color-dashboard-input: #1D1D1F;
+  --color-dashboard-ring: #036268;
+  --color-dashboard-chart-1: hsl(40.6655 100.2361% 50.9228%);
+  --color-dashboard-chart-2: hsl(223.749 85.9924% 55.8092%);
+  --color-dashboard-chart-3: hsl(223.8136 0% 64.471%);
+  --color-dashboard-chart-4: hsl(223.8136 0.0001% 89.5577%);
+  --color-dashboard-chart-5: hsl(223.8136 0% 45.6078%);
+  --color-dashboard-sidebar: #061d20;
+  --color-dashboard-sidebar-foreground: #c3d2d3;
+  --color-dashboard-sidebar-primary: #036268;
+  --color-dashboard-sidebar-primary-foreground: #FFFFFF;
+  --color-dashboard-sidebar-accent: #123337;
+  --color-dashboard-sidebar-accent-foreground: #FFFFFF;
+  --color-dashboard-sidebar-border: #173437;
+  --color-dashboard-sidebar-ring: #036268;
+
+  --radius-dashboard: 1rem;
+
+  --font-sans:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-display: "Space Grotesk", "Outfit", sans-serif;
+  --font-arabic: "Cairo", "Almarai", "Tajawal", sans-serif;
+  --font-serif: "Amiri", "Playfair Display", serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+
+  --font-inter: "Inter", sans-serif;
+  --font-poppins: "Poppins", sans-serif;
+  --font-outfit: "Outfit", sans-serif;
+  --font-space-grotesk: "Space Grotesk", sans-serif;
+  --font-plus-jakarta-sans: "Plus Jakarta Sans", sans-serif;
+  --font-syne: "Syne", sans-serif;
+  --font-baloo: "Baloo 2", sans-serif;
+  --font-cairo: "Cairo", sans-serif;
+  --font-tajawal: "Tajawal", sans-serif;
+  --font-almarai: "Almarai", sans-serif;
+  --font-noto-kufi-arabic: "Noto Kufi Arabic", sans-serif;
+  --font-amiri: "Amiri", serif;
+  --font-playfair: "Playfair Display", serif;
+
+  --text-xs: 11.5px;
+  --text-sm: 11.5px;
+  --text-base: 12px;
+  --text-lg: 14px;
+  --text-xl: 16px;
+  --text-2xl: 18px;
+  --text-3xl: 20px;
+  --text-4xl: 24px;
+  --text-5xl: 28px;
+  --text-6xl: 32px;
+  --text-7xl: 36px;
+  --text-8xl: 40px;
+  --text-9xl: 48px;
+
+  --animate-pulse-glowing: pulse-glowing 2s infinite;
+
+  @keyframes pulse-glowing {
+
+    0%,
+    100% {
+      box-shadow:
+        0 0 0 0 color-mix(in srgb, var(--color-dashboard-primary) 60%, transparent),
+        0 0 0 0 color-mix(in srgb, var(--color-dashboard-primary) 30%, transparent);
+    }
+
+    50% {
+      box-shadow:
+        0 0 0 10px transparent,
+        0 0 0 20px transparent;
+    }
+  }
+}
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --color-dashboard-background: #f4f6f6;
+  --color-dashboard-foreground: #111717;
+  --color-dashboard-card: #ffffff;
+  --color-dashboard-card-foreground: #111717;
+  --color-dashboard-popover: #f4f6f6;
+  --color-dashboard-popover-foreground: #111717;
+  --color-dashboard-primary: #036268;
+  --color-dashboard-primary-foreground: #FFFFFF;
+  --color-dashboard-secondary: #e8edee;
+  --color-dashboard-secondary-foreground: #111717;
+  --color-dashboard-muted: #f1f4f4;
+  --color-dashboard-muted-foreground: #5e6868;
+  --color-dashboard-accent: #e8edee;
+  --color-dashboard-accent-foreground: #111717;
+  --color-dashboard-destructive: #EF4444;
+  --color-dashboard-destructive-foreground: #FFFFFF;
+  --color-dashboard-border: #e2e9e9;
+  --color-dashboard-input: #e8edee;
+  --color-dashboard-ring: #036268;
+  --color-dashboard-sidebar: #061d20;
+  --color-dashboard-sidebar-foreground: #c3d2d3;
+  --color-dashboard-sidebar-primary: #036268;
+  --color-dashboard-sidebar-primary-foreground: #FFFFFF;
+  --color-dashboard-sidebar-accent: #123337;
+  --color-dashboard-sidebar-accent-foreground: #FFFFFF;
+  --color-dashboard-sidebar-border: #173437;
+  --color-dashboard-sidebar-ring: #036268;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --color-dashboard-background: #0f1415;
+  --color-dashboard-foreground: #f3f6f6;
+  --color-dashboard-card: #172021;
+  --color-dashboard-card-foreground: #f3f6f6;
+  --color-dashboard-popover: #172021;
+  --color-dashboard-popover-foreground: #f3f6f6;
+  --color-dashboard-primary: #036268;
+  --color-dashboard-primary-foreground: #FFFFFF;
+  --color-dashboard-secondary: #213031;
+  --color-dashboard-secondary-foreground: #f3f6f6;
+  --color-dashboard-muted: #1d2829;
+  --color-dashboard-muted-foreground: #9ba7a8;
+  --color-dashboard-accent: #213031;
+  --color-dashboard-accent-foreground: #f3f6f6;
+  --color-dashboard-destructive: #EF4444;
+  --color-dashboard-destructive-foreground: #FFFFFF;
+  --color-dashboard-border: #263a3b;
+  --color-dashboard-input-border: #263a3b;
+  --color-dashboard-input: #213031;
+  --color-dashboard-ring: #036268;
+  --color-dashboard-sidebar: #061d20;
+  --color-dashboard-sidebar-foreground: #c3d2d3;
+  --color-dashboard-sidebar-primary: #036268;
+  --color-dashboard-sidebar-primary-foreground: #FFFFFF;
+  --color-dashboard-sidebar-accent: #123337;
+  --color-dashboard-sidebar-accent-foreground: #FFFFFF;
+  --color-dashboard-sidebar-border: #173437;
+  --color-dashboard-sidebar-ring: #036268;
+  --border: rgba(255, 255, 255, 0.08);
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 9px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-dashboard-secondary);
+
+  border-radius: 10px;
+}
+
+.dark ::-webkit-scrollbar-track {
+  background: #1d1d1d;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--color-dashboard-primary) 50%, transparent);
+  border-radius: 5px;
+  border: 2px solid var(--color-overlay);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--color-dashboard-primary) 50%, transparent);
+  border-radius: 10px;
+  border: 2px solid #1d1d1d;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--color-dashboard-primary) 80%, transparent);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--color-dashboard-primary) 80%, transparent);
+}
+
+::-webkit-scrollbar-corner {
+  background: var(--color-overlay);
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+button,
+a {
+  @apply cursor-pointer;
+}
+
+body {
+  @apply bg-[#F5F7FA] text-primary antialiased;
+  font-family: var(--font-current-latin, var(--font-sans)) !important;
+}
+
+input, button, select, textarea, label {
+  font-family: inherit !important;
+}
+
+/* Global Arabic font switch when the document language is Arabic */
+html:lang(ar) {
+  --font-sans: var(--font-current-arabic, var(--font-arabic)) !important;
+  --font-display: var(--font-current-arabic, var(--font-arabic)) !important;
+  --font-heading: var(--font-current-arabic, var(--font-arabic)) !important;
+  font-family: var(--font-current-arabic, var(--font-arabic)) !important;
+}
+
+/* Dynamic Font Scale & Density */
+html[data-font-scale="compact"] {
+  --text-xs: 10.5px;
+  --text-sm: 10.5px;
+  --text-base: 11px;
+  --text-lg: 13px;
+  --text-xl: 14.5px;
+  --text-2xl: 16.5px;
+  --text-3xl: 18px;
+  --text-4xl: 22px;
+  --text-5xl: 25px;
+  --text-6xl: 28px;
+}
+
+html[data-font-scale="comfortable"] {
+  --text-xs: 12.5px;
+  --text-sm: 12.5px;
+  --text-base: 13px;
+  --text-lg: 15px;
+  --text-xl: 17.5px;
+  --text-2xl: 19.5px;
+  --text-3xl: 22px;
+  --text-4xl: 26px;
+  --text-5xl: 31px;
+  --text-6xl: 36px;
+}
+
+.glass {
+  @apply bg-white/40 backdrop-blur-md border border-white/20;
+}
+
+.glass-card {
+  @apply bg-white/10 backdrop-blur-md border border-white/10;
+}
+
+
+
+.section-padding {
+  @apply py-20 px-6 md:px-12 lg:px-24;
+}
+
+.react-flow__attribution {
+  display: none !important;
+}
+
+/* React Flow controls dark theme custom styles */
+.react-flow__controls {
+  background-color: var(--color-dashboard-card) !important;
+  border: 1px solid var(--color-dashboard-border) !important;
+  border-radius: 8px !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
+  overflow: hidden !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.react-flow__controls-button {
+  background-color: var(--color-dashboard-card) !important;
+  border: none !important;
+  border-bottom: 1px solid var(--color-dashboard-border) !important;
+  color: var(--color-dashboard-muted-foreground) !important;
+  fill: var(--color-dashboard-muted-foreground) !important;
+  width: 28px !important;
+  height: 28px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  transition: all 0.2s ease !important;
+}
+
+.react-flow__controls-button:last-child {
+  border-bottom: none !important;
+}
+
+.react-flow__controls-button:hover {
+  background-color: var(--color-dashboard-secondary) !important;
+  color: var(--color-dashboard-foreground) !important;
+  fill: var(--color-dashboard-foreground) !important;
+}
+
+.react-flow__controls-button svg {
+  fill: currentColor !important;
+  width: 14px !important;
+  height: 14px !important;
+}
+
+/* Rich Text / Banner Preview Content */
+.rich-text-content {
+  color: var(--color-dashboard-foreground);
+  font-size: 0.95rem;
+  line-height: 1.75;
+}
+
+.rich-text-content p {
+  margin: 0.5rem 0;
+}
+
+.rich-text-content strong {
+  font-weight: 700;
+  color: var(--color-dashboard-foreground);
+}
+
+.rich-text-content em {
+  font-style: italic;
+  color: var(--color-dashboard-muted-foreground);
+}
+
+.rich-text-content u {
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--color-dashboard-primary) 40%, transparent);
+  text-underline-offset: 3px;
+}
+
+.rich-text-content ul {
+  list-style-type: disc !important;
+  padding-left: 1.5rem !important;
+  margin: 0.75rem 0 !important;
+}
+
+.rich-text-content ol {
+  list-style-type: decimal !important;
+  padding-left: 1.5rem !important;
+  margin: 0.75rem 0 !important;
+}
+
+.rich-text-content li {
+  display: list-item !important;
+  margin: 0.3rem 0 !important;
+}
+
+.rich-text-content li p {
+  margin: 0 !important;
+}
+
+.rich-text-content blockquote {
+  border-left: 4px solid var(--color-dashboard-primary);
+  padding: 0.5rem 0 0.5rem 1rem;
+  margin: 1rem 0;
+  font-style: italic;
+  color: var(--color-dashboard-muted-foreground);
+  background: color-mix(in srgb, var(--color-dashboard-primary) 8%, transparent);
+  border-radius: 0 6px 6px 0;
+}
+
+.rich-text-content blockquote p {
+  margin: 0.2rem 0 !important;
+}
+
+.rich-text-content code {
+  background: var(--color-dashboard-secondary);
+  color: var(--color-dashboard-primary);
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  padding: 0.15em 0.45em;
+  border-radius: 5px;
+  border: 1px solid var(--color-dashboard-border);
+}
+
+.rich-text-content pre {
+  background: var(--color-dashboard-background);
+  border: 1px solid var(--color-dashboard-border);
+  border-radius: 10px;
+  padding: 1.25rem;
+  margin: 1rem 0;
+  overflow-x: auto;
+}
+
+.rich-text-content pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--color-dashboard-foreground);
+  font-size: 0.88rem;
+}
+
+.rich-text-content a {
+  color: var(--color-dashboard-primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-color: color-mix(in srgb, var(--color-dashboard-primary) 35%, transparent);
+}
+
+.rich-text-content a:hover {
+  text-decoration-color: var(--color-dashboard-primary);
+}
+
+.rich-text-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.75rem;
+  margin: 1rem 0;
+  border: 1px solid var(--color-dashboard-border);
+}
+
+
+@layer utilities {
+
+  /* .cursor-context-menu,
+  .cursor-context-menu\! {
+    cursor: url("./assets/svg/context-menu.svg") 25 16, default !important;
+  } */
+
+  .animate-marquee {
+    animation: marquee 30s linear infinite;
+  }
+
+  .animate-ticker {
+    animation: ticker 25s linear infinite;
+  }
+}
+
+@keyframes ticker {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-10%);
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.