get-elementa-ui 1.10.5 → 1.11.1

package/src/styles/globals.css

@@ -1,409 +0,0 @@
-/* 1. Fraunces */
-@font-face {
-  font-family: 'Fraunces';
-  src: url('./../assets/fonts/fraunces/Fraunces-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Fraunces';
-  src: url('./../assets/fonts/fraunces/Fraunces-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* 2. Satoshi */
-@font-face {
-  font-family: 'Satoshi';
-  src: url('./../assets/fonts/satoshi/Satoshi-Light.otf') format('opentype');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Satoshi';
-  src: url('./../assets/fonts/satoshi/Satoshi-Regular.otf') format('opentype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Satoshi';
-  src: url('./../assets/fonts/satoshi/Satoshi-Medium.otf') format('opentype');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Satoshi';
-  src: url('./../assets/fonts/satoshi/Satoshi-Bold.otf') format('opentype');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Satoshi';
-  src: url('./../assets/fonts/satoshi/Satoshi-Black.otf') format('opentype');
-  font-weight: 900;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* GLOBAL PALETTE */
-@theme inline {
-  /* TODO: Again these are used by tailwind. Remove them gradually once our library is using the same variables and is stable. */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --breakpoint-3xl: 1920px;
-  
-  /* SECTION: Variables */
-  /* SECTION: Colors */
-  /* SECTION: Accent Colors */
-  /* SECTION: Electric Violet */
-  --color-electric-violet-100: oklch(0.963 0.0193 302.21);
-  --color-electric-violet-200: oklch(0.8907 0.0562 301.22);
-  --color-electric-violet-300: oklch(0.8189 0.0956 300.04);
-  --color-electric-violet-400: oklch(0.7474 0.1344 298.96);
-  --color-electric-violet-500: oklch(0.6777 0.1726 297.5);
-  --color-electric-violet-600: oklch(0.6436 0.1922 296.58);
-  --color-electric-violet-700: oklch(0.5965 0.177 296.84);
-  --color-electric-violet-800: oklch(0.4977 0.144 297.26);
-  --color-electric-violet-900: oklch(0.3963 0.1087 297.27);
-  --color-electric-violet-1000: oklch(0.2849 0.0719 296.56);
-  --color-electric-violet-1100: oklch(0.162 0.0275 297.41);
-  /* !SECTION: Electric Violet */
-  
-  /* SECTION: Hot Pink */
-  --color-hot-pink-100: oklch(0.9656 0.0179 351.14);
-  --color-hot-pink-200: oklch(0.8976 0.0586 350.91);
-  --color-hot-pink-300: oklch(0.8335 0.0986 352.09);
-  --color-hot-pink-400: oklch(0.7732 0.1386 354.16);
-  --color-hot-pink-500: oklch(0.7195 0.1797 356.01);
-  --color-hot-pink-600: oklch(0.6958 0.197 357.35);
-  --color-hot-pink-700: oklch(0.6435 0.1802 357.35);
-  --color-hot-pink-800: oklch(0.5363 0.1483 356.85);
-  --color-hot-pink-900: oklch(0.4245 0.1124 357.09);
-  --color-hot-pink-1000: oklch(0.3017 0.0738 356.56);
-  --color-hot-pink-1100: oklch(0.3017 0.0738 356.56);
-  /* !SECTION: Hot Pink */
-  
-  /* SECTION: Acid Lime */
-  --color-acid-lime-100: oklch(0.9902 0.0225 114.93);
-  --color-acid-lime-200: oklch(0.9691 0.0642 116.06);
-  --color-acid-lime-300: oklch(0.9499 0.1049 116.33);
-  --color-acid-lime-400: oklch(0.9322 0.1418 116.96);
-  --color-acid-lime-500: oklch(0.9152 0.172 118.11);
-  --color-acid-lime-600: oklch(0.9086 0.185 118.66);
-  --color-acid-lime-700: oklch(0.8399 0.1704 118.55);
-  --color-acid-lime-800: oklch(0.6971 0.1399 118.7);
-  --color-acid-lime-900: oklch(0.5474 0.1072 118.39);
-  --color-acid-lime-1000: oklch(0.3829 0.0713 117.74);
-  --color-acid-lime-1100: oklch(0.2008 0.0295 117.79);
-  /* !SECTION: Acid Lime */
-
-  /* SECTION: Aqua Mint */
-  --color-aqua-mint-100: oklch(0.984 0.0136 174.18);
-  --color-aqua-mint-200: oklch(0.9555 0.0414 173.81);
-  --color-aqua-mint-300: oklch(0.9264 0.0673 172.59);
-  --color-aqua-mint-400: oklch(0.8986 0.0924 171.55);
-  --color-aqua-mint-500: oklch(0.8761 0.1153 170.28);
-  --color-aqua-mint-600: oklch(0.8644 0.1254 169.48);
-  --color-aqua-mint-700: oklch(0.7981 0.1149 169.43);
-  --color-aqua-mint-800: oklch(0.6636 0.0942 169.64);
-  --color-aqua-mint-900: oklch(0.5218 0.0724 170);
-  --color-aqua-mint-1000: oklch(0.3663 0.0479 170.32);
-  --color-aqua-mint-1100: oklch(0.1953 0.0202 172.63);
-  /* !SECTION: Aqua Mint */
-  /* !SECTION: Accent Colors */
-
-  /* SECTION: Surface Colors */
-  /* SECTION: Gun Metal */
-  --color-gun-metal-100: oklch(0.8766 0.0052 228.83);
-  --color-gun-metal-200: oklch(0.793 0.0099 222.08);
-  --color-gun-metal-300: oklch(0.6855 0.0146 226.66);
-  --color-gun-metal-400: oklch(0.5707 0.0207 232.78);
-  --color-gun-metal-500: oklch(0.4523 0.0266 229.7);
-  --color-gun-metal-600: oklch(0.3273 0.034 230.85);
-  --color-gun-metal-700: oklch(0.293 0.0296 229.4);
-  --color-gun-metal-800: oklch(0.2555 0.0244 234.06);
-  --color-gun-metal-900: oklch(0.2189 0.0197 232.69);
-  --color-gun-metal-1000: oklch(0.1801 0.0136 223.07);
-  --color-gun-metal-1100: oklch(0.1458 0.0083 227.73);
-  /* !SECTION: Gun Metal */
-
-  /* SECTION: Amber White */
-  --color-amber-white-100: oklch(0.9913 0.0013 286.38);
-  --color-amber-white-200: oklch(0.9854 0.0013 286.38);
-  --color-amber-white-300: oklch(0.9787 0.0017 247.84);
-  --color-amber-white-400: oklch(0.9719 0.0025 228.78);
-  --color-amber-white-500: oklch(0.964 0.0029 264.54);
-  --color-amber-white-600: oklch(0.9572 0.0034 247.86);
-  --color-amber-white-700: oklch(0.8349 0.0036 247.87);
-  --color-amber-white-800: oklch(0.7077 0.0027 228.8);
-  --color-amber-white-900: oklch(0.5756 0.002 247.86);
-  --color-amber-white-1000: oklch(0.4316 0.0016 286.33);
-  --color-amber-white-1100: oklch(0.3096 0.0018 286.3);
-  /* !SECTION: Amber White */
-  /* !SECTION: Surface Colors */
-
-  /* SECTION: Feedback Colors */
-  /* SECTION: Basil */
-  --color-basil-amber-light: oklch(0.6454 0.1347 142.31)#59A253;
-  --color-basil-amber: oklch(0.4914 0.1336 143.21);
-  --color-basil-amber-dark: oklch(0.3415 0.1162 142.5);
-  --color-basil-gun-metal-light: oklch(0.7736 0.1039 144.1);
-  --color-basil-gun-metal: oklch(0.6187 0.1035 144.2);
-  --color-basil-gun-metal-dark: oklch(0.4647 0.1035 144.68);
-  /* !SECTION: Basil */
-
-  /* SECTION: Tomato */
-  --color-tomato-amber-light: oklch(0.6656 0.2019 22.56);
-  --color-tomato-amber: oklch(0.5106 0.1997 21.42);
-  --color-tomato-amber-dark: oklch(0.3898 0.159163 27.6392);
-  --color-tomato-gun-metal-light: oklch(0.6976 0.1933 29.11);
-  --color-tomato-gun-metal: oklch(0.6373 0.2481 27.08);
-  --color-tomato-gun-metal-dark: oklch(0.5132 0.2106 29.23);
-  /* !SECTION: Tomato */
-
-  /* SECTION: Corn */
-  --color-corn-amber-light: oklch(0.8559 0.1406 80.59);
-  --color-corn-amber: oklch(0.7042 0.1341 80.03);
-  --color-corn-amber-dark: oklch(0.5492 0.1147 77.38);
-  
-  --color-corn-gun-metal-light: oklch(0.8798 0.1242 83.19);
-  --color-corn-gun-metal: oklch(0.779 0.1505 62.52);
-  --color-corn-gun-metal-dark: oklch(0.6232 0.1407 61.65);
-  /* !SECTION: Corn */
-
-  /* SECTION: Blueberry */
-  --color-blueberry-amber-light: oklch(0.6413 0.1555 262.33);
-  --color-blueberry-amber: oklch(0.4867 0.1602 255.4);
-  --color-blueberry-amber-dark: oklch(0.3562 0.1452 259.99);
-  --color-blueberry-gun-metal-light: oklch(0.7874 0.1107 252.43);
-  --color-blueberry-gun-metal: oklch(0.6327 0.1152 250.45);
-  --color-blueberry-gun-metal-dark: oklch(0.4774 0.1207 246);
-  /* !SECTION: Blueberry */
-
-  /* SECTION: Koala */
-  --color-disabled-amber: oklch(0.6731 0 0);
-  --color-disabled-gun-metal: oklch(0.325 0 0);
-  --color-text-on-disabled: oklch(0.5208 0 0);
-  /* !SECTION: Koala */
-  /* !SECTION: Feedback Colors */
-  /* !SECTION: Colors */
-
-  /* SECTION: Fonts */
-  --font-heading: 'Fraunces', sans-serif;
-  --font-body: 'Satoshi', sans-serif;
-  --font-heading: var(--font-fraunces), serif;
-  --font-body: var(--font-satoshi), sans-serif;
-  /* !SECTION: Fonts */
-  /* !SECTION: Variables */
-
-  /* SECTION: Semantics Mapping */
-  /* SECTION: Structure & Surfaces */
-  /* --background: The absolute bottom layer of the app (Page BG).
---foreground: The default text color on top of background.
---card: Background color for Cards, Modals, and Popovers.
---card-foreground: Text color inside cards.
---popover: Background for dropdowns, tooltips, and select menus.
---popover-foreground: Text color inside popovers. */
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  
-/* 1. Structure & Surfaces  (6 Tokens) */
-
-
-
-/* 2. Brand Actions (8 Tokens)
-These handle your "Primary" (Brand) and "Secondary" (Alternative) interactions.
-
---primary: High-emphasis actions (Solid Buttons, Active States).
-Example: Electric Violet 600
---primary-foreground: Text color on top of primary.
---secondary: Low-emphasis actions (Ghost buttons, Chips).
-Example: Electric Violet 100 (Light) / Violet 900 (Dark)
---secondary-foreground: Text color on top of secondary.
---accent: Interactive elements that are not buttons (Hover states, Selected rows).
---accent-foreground: Text color on top of accent.
---muted: Backgrounds for disabled states, skeletons, or subtle areas.
---muted-foreground: Low-contrast text (subtitles, placeholders).
-3. Feedback & Borders (6 Tokens)
---destructive: Critical actions (Delete, Error).
---destructive-foreground: Text on top of destructive.
---border: Hairline borders for inputs, cards, and dividers.
---input: Background or border specifically for form inputs (often same as --border).
---ring: Focus ring color for accessibility.
---radius: Global border-radius (e.g., 0.5rem).
-4. Data Visualization (8 Tokens)
-For charts, graphs, and status badges. These are vital for dashboards (Deriva's core use case).
-
---chart-1: Primary data series (usually matches Brand Primary).
---chart-2: Secondary data series.
---chart-3: Tertiary data series.
---chart-4: Quaternary data series.
---chart-5: Quinary data series.
---success: Positive states (Green/Teal).
---warning: Cautionary states (Yellow/Orange).
---info: Neutral information (Blue/Gray). */
-  /* !SECTION: Semantics Mapping */
-}
-
-/* SECTION: TODO: rename */
-@layer base {
-  /* SECTION: Base Styles */
-  /* Light Theme */
-  :root {
-    --background: var(--color-amber-white-100);
-    --foreground: var(--color-gun-metal-1100);
-  }
-
-  /* Dark Theme */
-  .dark {
-    --background: var(--color-gun-metal-1100);
-    --foreground: var(--color-amber-white-100);
-  }
-  /* !SECTION: Base Styles */
-
-  /* SECTION: Energies */
-  /* SECTION: ENERGY 1: VAPORWAVE (Electric Violet + Hot Pink) */
-  /* Light Theme */
-  [data-energy="vaporwave"] {
-    --primary: var(--color-electric-violet-600);
-    --primary-foreground: #ffffff;
-    --secondary: var(--color-electric-violet-100);
-    --secondary-foreground: var(--color-electric-violet-900);
-  }
-
-  /* Dark Theme */
-  .dark[data-energy="vaporwave"] {    
-    --primary: var(--color-electric-violet-400); 
-    --primary-foreground: var(--color-gun-metal-1100);
-    --secondary: var(--color-electric-violet-900); 
-    --secondary-foreground: var(--color-electric-violet-100);
-  }
-  /* !SECTION: ENERGY 1: VAPORWAVE (Electric Violet + Hot Pink) */
-
-  /* SECTION: ENERGY 2: ELECTRIC SHOCK (Electric Violet + Acid Lime) */
-  /* Light Theme */
-  [data-energy="electric-shock"] {
-    --primary: var(--color-electric-violet-600);
-    --primary-foreground: #ffffff;
-    --secondary: var(--color-acid-lime-100);
-    --secondary-foreground: var(--color-acid-lime-900);
-  }
-
-  /* Dark Theme */
-  .dark[data-energy="electric-shock"] {
-    --primary: var(--color-electric-violet-400);
-    --primary-foreground: var(--color-gun-metal-1100);
-    --secondary: var(--color-electric-violet-900);
-    --secondary-foreground: var(--color-electric-violet-100);
-  }
-  /* !SECTION: ENERGY 2: ELECTRIC SHOCK (Electric Violet + Acid Lime) */
-
-  /* SECTION: ENERGY 3: CYBER MIST (Electric Violet + Aqua Mint) */
-  /* Light Theme */
-  [data-energy="cyber-mist"] {
-    --primary: var(--color-electric-violet-600);
-    --primary-foreground: #ffffff;
-    --secondary: var(--color-aqua-mint-100);
-    --secondary-foreground: var(--color-aqua-mint-900);
-  }
-
-  /* Dark Theme */
-  /* !SECTION: ENERGY 3: CYBER MIST (Electric Violet + Aqua Mint) */
-
-  /* SECTION: ENERGY 4: SUMMER FRUIT (Hot Pink + Acid Lime) */
-  /* Light Theme */
-  [data-energy="summer-fruit"] {
-    --primary: var(--color-hot-pink-600);
-    --primary-foreground: #ffffff;
-    --secondary: var(--color-acid-lime-100);
-    --secondary-foreground: var(--color-acid-lime-900);
-  }
-
-  /* Dark Theme */
-  /* !SECTION: ENERGY 4: SUMMER FRUIT (Hot Pink + Acid Lime) */
-
-  /* SECTION: ENERGY 5: BUBBLEGUM ICE (Hot Pink + Aqua Mint) */
-  /* Light Theme */
-  [data-energy="bubblegum-ice"] {
-    --primary: var(--color-hot-pink-600);
-    --primary-foreground: #ffffff;
-    --secondary: var(--color-aqua-mint-100);
-    --secondary-foreground: var(--color-aqua-mint-900);
-  }
-
-  /* Dark Theme */
-  .dark[data-energy="bubblegum-ice"] {
-    --primary: var(--color-hot-pink-600);
-    --primary-foreground: #ffffff;
-    --secondary: var(--color-gun-metal-900);
-    --secondary-foreground: var(--color-aqua-mint-400);
-  }
-  /* !SECTION: ENERGY 5: BUBBLEGUM ICE (Hot Pink + Aqua Mint) */
-}
-
-@layer utilities {
-  .bg-primary {
-    background-color: var(--primary);
-  }
-
-  .bg-secondary {
-    background-color: var(--secondary);
-  }
-
-  .no-scrollbar {
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-}