@bigbot-community/bigbot-ui 1.0.1

package/src/styles/base/_animations.scss

@@ -0,0 +1,187 @@
+// =============================================================================
+// BRAIP UI - ANIMATIONS
+// =============================================================================
+
+// ---------------------------------------------------------------------------
+// FADE ANIMATIONS
+// ---------------------------------------------------------------------------
+
+@keyframes br-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes br-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes br-fade-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes br-fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// SCALE ANIMATIONS
+// ---------------------------------------------------------------------------
+
+@keyframes br-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes br-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// SLIDE ANIMATIONS
+// ---------------------------------------------------------------------------
+
+@keyframes br-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes br-slide-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes br-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// LOADING ANIMATIONS
+// ---------------------------------------------------------------------------
+
+@keyframes br-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes br-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes br-skeleton {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes br-loading-shimmer {
+  from {
+    background-position: 300% 0;
+  }
+  to {
+    background-position: 0% 0;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// UTILITY CLASSES
+// ---------------------------------------------------------------------------
+
+.br-animate-fade-in {
+  animation: br-fade-in var(--br-transition-normal) forwards;
+}
+
+.br-animate-fade-in-down {
+  animation: br-fade-in-down var(--br-transition-normal) forwards;
+}
+
+.br-animate-fade-in-up {
+  animation: br-fade-in-up var(--br-transition-normal) forwards;
+}
+
+.br-animate-scale-in {
+  animation: br-scale-in var(--br-transition-fast) forwards;
+}
+
+.br-animate-spin {
+  animation: br-spin 1s linear infinite;
+}
+
+.br-animate-pulse {
+  animation: br-pulse 2s ease-in-out infinite;
+}
+
+// Skeleton loading effect
+.br-skeleton {
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(
+    90deg,
+    var(--br-light-100) 25%,
+    var(--br-light-200) 50%,
+    var(--br-light-100) 75%
+  );
+  background-size: 400% 100%;
+  animation: br-skeleton 1.5s ease-in-out infinite;
+}

package/src/styles/base/_reset.scss

@@ -0,0 +1,109 @@
+// =============================================================================
+// BRAIP UI - CSS RESET
+// =============================================================================
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+* {
+  font-family: var(--br-font-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html {
+  font-size: 16px;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--br-dark-0);
+  background-color: var(--br-light-0);
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+button {
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  font: inherit;
+  color: inherit;
+}
+
+input,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+  border: 0;
+  background: transparent;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--br-dark-1100);
+}
+
+img,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--br-light-300);
+}
+
+// Focus visible styles
+:focus-visible {
+  outline: 2px solid var(--br-primary-600);
+  outline-offset: 2px;
+}
+
+// Scrollbar customization
+:root {
+  --br-scrollbar-width: 12px;
+  --br-scrollbar-padding: 3px;
+  --br-scrollbar-color: rgba(0, 0, 0, 0.2);
+  --br-scrollbar-hover: var(--br-primary-600);
+  --br-scrollbar-bg: transparent;
+}
+
+*::-webkit-scrollbar {
+  width: var(--br-scrollbar-width);
+  height: var(--br-scrollbar-width);
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--br-scrollbar-bg);
+  border-radius: var(--br-scrollbar-width);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--br-scrollbar-color);
+  border-radius: var(--br-scrollbar-width);
+  border: var(--br-scrollbar-padding) solid transparent;
+  background-clip: content-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--br-scrollbar-hover);
+  background-clip: content-box;
+}

package/src/styles/base/index.scss

@@ -0,0 +1,6 @@
+// =============================================================================
+// BRAIP UI - BASE STYLES INDEX
+// =============================================================================
+
+@forward 'reset';
+@forward 'animations';

package/src/styles/main.scss

@@ -0,0 +1,9 @@
+// =============================================================================
+// BRAIP UI - MAIN STYLESHEET
+// =============================================================================
+
+// Design tokens (CSS custom properties)
+@use 'tokens';
+
+// Base styles (reset, animations)
+@use 'base';

package/src/styles/tokens/_colors.scss

@@ -0,0 +1,185 @@
+// =============================================================================
+// BRAIP UI - COLOR TOKENS
+// Extracted from Braip Design System
+// =============================================================================
+
+:root {
+  // ---------------------------------------------------------------------------
+  // BRAND PRIMARY (Purple)
+  // ---------------------------------------------------------------------------
+  --br-primary-darkest: rgb(22, 11, 50);
+  --br-primary-900: rgb(44, 22, 100);
+  --br-primary-800: rgb(65, 32, 151);
+  --br-primary-700: rgb(87, 43, 201);
+  --br-primary-600: rgb(109, 54, 251);  // Main brand color
+  --br-primary-500: rgb(138, 94, 252);
+  --br-primary-400: rgb(167, 134, 253);
+  --br-primary-300: rgb(197, 175, 253);
+  --br-primary-200: rgb(226, 215, 254);
+  --br-primary-100: rgb(244, 240, 255);
+
+  // ---------------------------------------------------------------------------
+  // BRAND SECONDARY (Green/Lime)
+  // ---------------------------------------------------------------------------
+  --br-secondary-darkest: rgb(31, 51, 10);
+  --br-secondary-900: rgb(61, 102, 20);
+  --br-secondary-800: rgb(92, 153, 31);
+  --br-secondary-700: rgb(122, 204, 41);
+  --br-secondary-600: rgb(153, 255, 51);  // Main secondary color
+  --br-secondary-500: rgb(173, 255, 92);
+  --br-secondary-400: rgb(194, 255, 133);
+  --br-secondary-300: rgb(214, 255, 173);
+  --br-secondary-200: rgb(235, 255, 214);
+  --br-secondary-100: rgb(245, 255, 235);
+
+  // ---------------------------------------------------------------------------
+  // SEMANTIC - DANGER (Red)
+  // ---------------------------------------------------------------------------
+  --br-danger-darkest: rgb(78, 0, 0);
+  --br-danger-900: rgb(117, 0, 0);
+  --br-danger-800: rgb(158, 11, 11);
+  --br-danger-700: rgb(202, 21, 21);
+  --br-danger-600: rgb(255, 46, 46);
+  --br-danger-500: rgb(254, 95, 95);
+  --br-danger-400: rgb(255, 151, 151);
+  --br-danger-300: rgb(255, 184, 184);
+  --br-danger-200: rgb(255, 215, 215);
+  --br-danger-100: rgb(255, 239, 239);
+
+  // ---------------------------------------------------------------------------
+  // SEMANTIC - WARNING (Orange)
+  // ---------------------------------------------------------------------------
+  --br-warning-darkest: rgb(119, 71, 0);
+  --br-warning-900: rgb(156, 94, 0);
+  --br-warning-800: rgb(186, 112, 2);
+  --br-warning-700: rgb(216, 129, 0);
+  --br-warning-600: rgb(255, 153, 0);
+  --br-warning-500: rgb(255, 175, 54);
+  --br-warning-400: rgb(255, 196, 107);
+  --br-warning-300: rgb(255, 212, 147);
+  --br-warning-200: rgb(255, 226, 183);
+  --br-warning-100: rgb(255, 243, 224);
+
+  // ---------------------------------------------------------------------------
+  // SEMANTIC - ATTENTION (Yellow)
+  // ---------------------------------------------------------------------------
+  --br-attention-darkest: rgb(125, 106, 0);
+  --br-attention-900: rgb(161, 136, 3);
+  --br-attention-800: rgb(185, 156, 3);
+  --br-attention-700: rgb(222, 187, 0);
+  --br-attention-600: rgb(255, 214, 0);
+  --br-attention-500: rgb(255, 226, 77);
+  --br-attention-400: rgb(255, 232, 113);
+  --br-attention-300: rgb(255, 237, 140);
+  --br-attention-200: rgb(255, 243, 181);
+  --br-attention-100: rgb(255, 249, 222);
+
+  // ---------------------------------------------------------------------------
+  // SEMANTIC - INFO (Blue)
+  // ---------------------------------------------------------------------------
+  --br-info-darkest: rgb(9, 65, 121);
+  --br-info-900: rgb(10, 95, 180);
+  --br-info-800: rgb(21, 113, 205);
+  --br-info-700: rgb(29, 136, 243);
+  --br-info-600: rgb(51, 153, 255);
+  --br-info-500: rgb(107, 181, 255);
+  --br-info-400: rgb(150, 202, 255);
+  --br-info-300: rgb(173, 214, 255);
+  --br-info-200: rgb(194, 226, 255);
+  --br-info-100: rgb(233, 244, 255);
+
+  // ---------------------------------------------------------------------------
+  // SEMANTIC - SUCCESS (Green)
+  // ---------------------------------------------------------------------------
+  --br-success-darkest: rgb(27, 91, 16);
+  --br-success-900: rgb(41, 122, 27);
+  --br-success-800: rgb(57, 153, 41);
+  --br-success-700: rgb(75, 182, 57);
+  --br-success-600: rgb(94, 195, 77);
+  --br-success-500: rgb(114, 215, 97);
+  --br-success-400: rgb(139, 227, 124);
+  --br-success-300: rgb(164, 244, 151);
+  --br-success-200: rgb(191, 255, 180);
+  --br-success-100: rgb(229, 255, 225);
+
+  // ---------------------------------------------------------------------------
+  // ACCENT - PINK
+  // ---------------------------------------------------------------------------
+  --br-pink-darkest: rgb(121, 0, 91);
+  --br-pink-900: rgb(166, 19, 129);
+  --br-pink-800: rgb(194, 33, 153);
+  --br-pink-700: rgb(223, 50, 179);
+  --br-pink-600: rgb(255, 63, 206);
+  --br-pink-500: rgb(255, 104, 217);
+  --br-pink-400: rgb(255, 138, 225);
+  --br-pink-300: rgb(255, 160, 231);
+  --br-pink-200: rgb(255, 188, 238);
+  --br-pink-100: rgb(255, 229, 249);
+
+  // ---------------------------------------------------------------------------
+  // NEUTRAL - DARK
+  // ---------------------------------------------------------------------------
+  --br-dark-0: rgb(11, 11, 14);
+  --br-dark-100: rgb(13, 13, 18);
+  --br-dark-200: rgb(25, 25, 30);
+  --br-dark-300: rgb(37, 37, 41);
+  --br-dark-400: rgb(52, 52, 56);
+  --br-dark-500: rgb(65, 65, 70);
+  --br-dark-600: rgb(80, 80, 87);
+  --br-dark-700: rgb(91, 91, 97);
+  --br-dark-800: rgb(109, 109, 118);
+  --br-dark-900: rgb(121, 121, 131);
+  --br-dark-1000: rgb(139, 139, 152);
+  --br-dark-1100: rgb(157, 157, 171);
+
+  // ---------------------------------------------------------------------------
+  // NEUTRAL - LIGHT
+  // ---------------------------------------------------------------------------
+  --br-light-1100: rgb(40, 40, 59);
+  --br-light-1000: rgb(67, 67, 96);
+  --br-light-900: rgb(98, 98, 132);
+  --br-light-800: rgb(119, 119, 153);
+  --br-light-700: rgb(131, 131, 164);
+  --br-light-600: rgb(148, 148, 184);
+  --br-light-500: rgb(169, 169, 204);
+  --br-light-400: rgb(190, 190, 221);
+  --br-light-300: rgb(220, 220, 240);
+  --br-light-200: rgb(235, 235, 248);
+  --br-light-100: rgb(247, 247, 252);
+  --br-light-0: rgb(255, 255, 255);
+
+  // ---------------------------------------------------------------------------
+  // GRADIENTS
+  // ---------------------------------------------------------------------------
+  --br-gradient-primary: linear-gradient(135deg, rgb(244, 240, 255) 0%, rgba(244, 240, 255, 0) 100%);
+  --br-gradient-secondary: linear-gradient(135deg, rgb(229, 255, 225) 0%, rgba(229, 255, 225, 0) 100%);
+  --br-gradient-danger: linear-gradient(135deg, rgb(255, 239, 239) 0%, rgba(255, 239, 239, 0) 100%);
+  --br-gradient-pink: linear-gradient(135deg, rgb(255, 229, 249) 0%, rgba(255, 229, 249, 0) 100%);
+  --br-gradient-warning: linear-gradient(135deg, rgb(255, 243, 224) 0%, rgba(255, 243, 224, 0) 100%);
+  --br-gradient-attention: linear-gradient(135deg, rgb(255, 249, 222) 0%, rgba(255, 249, 222, 0) 100%);
+  --br-gradient-info: linear-gradient(135deg, rgb(233, 244, 255) 0%, rgba(233, 244, 255, 0) 100%);
+  --br-gradient-neutral: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+// =============================================================================
+// SCSS VARIABLES (for use in components)
+// =============================================================================
+
+$br-primary: var(--br-primary-600);
+$br-secondary: var(--br-secondary-600);
+$br-danger: var(--br-danger-600);
+$br-warning: var(--br-warning-600);
+$br-success: var(--br-success-600);
+$br-info: var(--br-info-600);
+
+$br-text-primary: var(--br-dark-0);
+$br-text-secondary: var(--br-dark-700);
+$br-text-muted: var(--br-dark-1100);
+$br-text-inverse: var(--br-light-0);
+
+$br-bg-primary: var(--br-light-0);
+$br-bg-secondary: var(--br-light-100);
+$br-bg-tertiary: var(--br-light-200);
+
+$br-border-color: var(--br-light-300);
+$br-border-color-hover: var(--br-primary-600);

package/src/styles/tokens/_spacing.scss

@@ -0,0 +1,88 @@
+// =============================================================================
+// BRAIP UI - SPACING & LAYOUT TOKENS
+// =============================================================================
+
+:root {
+  // ---------------------------------------------------------------------------
+  // SPACING SCALE
+  // ---------------------------------------------------------------------------
+  --br-space-0: 0;
+  --br-space-px: 1px;
+  --br-space-0-5: 2px;
+  --br-space-1: 4px;
+  --br-space-1-5: 6px;
+  --br-space-2: 8px;
+  --br-space-2-5: 10px;
+  --br-space-3: 12px;
+  --br-space-3-5: 14px;
+  --br-space-4: 16px;
+  --br-space-5: 20px;
+  --br-space-6: 24px;
+  --br-space-7: 28px;
+  --br-space-8: 32px;
+  --br-space-9: 36px;
+  --br-space-10: 40px;
+  --br-space-11: 44px;
+  --br-space-12: 48px;
+  --br-space-14: 56px;
+  --br-space-16: 64px;
+  --br-space-20: 80px;
+  --br-space-24: 96px;
+  --br-space-28: 112px;
+  --br-space-32: 128px;
+
+  // ---------------------------------------------------------------------------
+  // BORDER RADIUS
+  // ---------------------------------------------------------------------------
+  --br-radius-none: 0;
+  --br-radius-sm: 4px;
+  --br-radius-md: 8px;
+  --br-radius-lg: 12px;
+  --br-radius-xl: 16px;
+  --br-radius-2xl: 24px;
+  --br-radius-full: 9999px;
+
+  // ---------------------------------------------------------------------------
+  // SHADOWS
+  // ---------------------------------------------------------------------------
+  --br-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --br-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --br-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --br-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --br-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  // ---------------------------------------------------------------------------
+  // Z-INDEX
+  // ---------------------------------------------------------------------------
+  --br-z-dropdown: 1000;
+  --br-z-sticky: 1020;
+  --br-z-fixed: 1030;
+  --br-z-modal-backdrop: 1040;
+  --br-z-modal: 1050;
+  --br-z-popover: 1060;
+  --br-z-tooltip: 1070;
+  --br-z-toast: 1080;
+
+  // ---------------------------------------------------------------------------
+  // TRANSITIONS
+  // ---------------------------------------------------------------------------
+  --br-transition-fast: 150ms ease;
+  --br-transition-normal: 250ms ease;
+  --br-transition-slow: 350ms ease;
+  --br-transition-theme: background-color 0.5s ease;
+}
+
+// =============================================================================
+// SCSS VARIABLES
+// =============================================================================
+
+$br-space-1: var(--br-space-1);
+$br-space-2: var(--br-space-2);
+$br-space-3: var(--br-space-3);
+$br-space-4: var(--br-space-4);
+$br-space-6: var(--br-space-6);
+$br-space-8: var(--br-space-8);
+
+$br-radius-sm: var(--br-radius-sm);
+$br-radius-md: var(--br-radius-md);
+$br-radius-lg: var(--br-radius-lg);

package/src/styles/tokens/_typography.scss

@@ -0,0 +1,77 @@
+// =============================================================================
+// BRAIP UI - TYPOGRAPHY TOKENS
+// =============================================================================
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Sora:wght@400;500;600;700&display=swap');
+
+:root {
+  // ---------------------------------------------------------------------------
+  // FONT FAMILIES
+  // ---------------------------------------------------------------------------
+  --br-font-primary: 'Poppins', 'Montserrat', sans-serif;
+  --br-font-secondary: 'Sora', 'Poppins', sans-serif;
+  --br-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  // ---------------------------------------------------------------------------
+  // FONT SIZES - HEADINGS
+  // ---------------------------------------------------------------------------
+  --br-text-h1: 64px;
+  --br-text-h2: 56px;
+  --br-text-h3: 48px;
+  --br-text-h4: 40px;
+  --br-text-h5: 36px;
+  --br-text-h6: 32px;
+  --br-text-h7: 24px;
+
+  // ---------------------------------------------------------------------------
+  // FONT SIZES - BODY
+  // ---------------------------------------------------------------------------
+  --br-text-xl: 24px;
+  --br-text-lg: 20px;
+  --br-text-md: 18px;
+  --br-text-base: 16px;
+  --br-text-sm: 14px;
+  --br-text-xs: 12px;
+  --br-text-2xs: 11px;
+
+  // ---------------------------------------------------------------------------
+  // LINE HEIGHTS
+  // ---------------------------------------------------------------------------
+  --br-leading-none: 1;
+  --br-leading-tight: 1.25;
+  --br-leading-snug: 1.375;
+  --br-leading-normal: 1.5;
+  --br-leading-relaxed: 1.625;
+  --br-leading-loose: 2;
+
+  // ---------------------------------------------------------------------------
+  // FONT WEIGHTS
+  // ---------------------------------------------------------------------------
+  --br-font-light: 300;
+  --br-font-normal: 400;
+  --br-font-medium: 500;
+  --br-font-semibold: 600;
+  --br-font-bold: 700;
+
+  // ---------------------------------------------------------------------------
+  // LETTER SPACING
+  // ---------------------------------------------------------------------------
+  --br-tracking-tighter: -0.05em;
+  --br-tracking-tight: -0.025em;
+  --br-tracking-normal: 0;
+  --br-tracking-wide: 0.025em;
+  --br-tracking-wider: 0.05em;
+  --br-tracking-widest: 0.1em;
+}
+
+// =============================================================================
+// SCSS VARIABLES
+// =============================================================================
+
+$br-font-primary: var(--br-font-primary);
+$br-font-secondary: var(--br-font-secondary);
+
+$br-text-base: var(--br-text-base);
+$br-text-sm: var(--br-text-sm);
+$br-text-xs: var(--br-text-xs);
+$br-text-lg: var(--br-text-lg);

package/src/styles/tokens/index.scss

@@ -0,0 +1,7 @@
+// =============================================================================
+// BRAIP UI - DESIGN TOKENS INDEX
+// =============================================================================
+
+@forward 'colors';
+@forward 'typography';
+@forward 'spacing';