@doneisbetter/gds-theme 3.0.3 → 3.0.5

package/dist/{chunk-G42DZXE5.mjs → chunk-DDAWLOKZ.mjs}

@@ -5,7 +5,7 @@ import {
   getGdsThemePresets,
   getGdsVibeThemeCssVariables,
   resolveGdsThemePreset
-} from "./chunk-OMSQVRZK.mjs";
+} from "./chunk-H7L27ZEE.mjs";
 
 // src/theme-runtime.ts
 import { useCallback, useEffect, useState } from "react";
@@ -20,7 +20,7 @@ function isScheme(value) {
   return value === "light" || value === "dark" || value === "auto";
 }
 function resolveEffectiveScheme(preset, colorScheme) {
-  if (preset === "dark-public" || preset === "neon-night") {
+  if (preset === "dark-public" || preset === "neon-night" || preset === "cosmic") {
     return "dark";
   }
   return colorScheme;

package/dist/{chunk-OMSQVRZK.mjs → chunk-H7L27ZEE.mjs}

@@ -262,7 +262,8 @@ var customPresetThemes = {
   coral: createVibrantPresetTheme("pink"),
   mint: createVibrantPresetTheme("lime"),
   orchid: createVibrantPresetTheme("grape"),
-  royal: createVibrantPresetTheme("violet")
+  royal: createVibrantPresetTheme("violet"),
+  cosmic: createVibrantPresetTheme("violet", { darkForward: true })
 };
 var themePresetCatalog = [
   { id: "default", label: "Default runtime theme", description: "Balanced, neutral baseline lane.", runtimeLane: "gdsTheme" },
@@ -281,7 +282,8 @@ var themePresetCatalog = [
   { id: "coral", label: "Coral bloom", description: "Expressive pink-coral lane for creator, commerce, and social products.", runtimeLane: "resolveGdsThemePreset(coral)" },
   { id: "mint", label: "Mint circuit", description: "Clean green-mint lane for health, learning, and growth products.", runtimeLane: "resolveGdsThemePreset(mint)" },
   { id: "orchid", label: "Orchid signal", description: "Purple-grape lane for editorial, culture, and premium tools.", runtimeLane: "resolveGdsThemePreset(orchid)" },
-  { id: "royal", label: "Royal violet", description: "Confident violet lane for SaaS dashboards and professional apps.", runtimeLane: "resolveGdsThemePreset(royal)" }
+  { id: "royal", label: "Royal violet", description: "Confident violet lane for SaaS dashboards and professional apps.", runtimeLane: "resolveGdsThemePreset(royal)" },
+  { id: "cosmic", label: "Cosmic burst", description: "Highly saturated blue-violet-cyan-magenta showcase lane for bold public apps and launch surfaces.", runtimeLane: "resolveGdsThemePreset(cosmic)" }
 ];
 function getGdsThemePresets() {
   return themePresetCatalog;
@@ -566,6 +568,27 @@ var vibeThemes = {
     borderLight: "rgba(124, 58, 237, 0.3)",
     gradient: "radial-gradient(circle at 15% 9%, rgba(124, 58, 237, 0.34), transparent 28%), radial-gradient(circle at 82% 12%, rgba(6, 182, 212, 0.28), transparent 30%), radial-gradient(circle at 92% 72%, rgba(236, 72, 153, 0.2), transparent 26%)",
     hero: "linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(6, 182, 212, 0.18), rgba(236, 72, 153, 0.18))"
+  },
+  cosmic: {
+    id: "cosmic",
+    label: "Cosmic burst",
+    primary: "#7c3cff",
+    accent: "#e018ff",
+    glow: "rgba(224, 24, 255, 0.36)",
+    canvasLight: "#071a80",
+    canvasDark: "#030018",
+    shellLight: "rgba(10, 18, 70, 0.72)",
+    shellDark: "rgba(8, 10, 42, 0.84)",
+    surfaceLight: "rgba(10, 18, 70, 0.82)",
+    surfaceDark: "rgba(9, 14, 54, 0.76)",
+    borderLight: "rgba(190, 160, 255, 0.45)",
+    borderDark: "rgba(190, 160, 255, 0.52)",
+    textLight: "#ffffff",
+    textDark: "#ffffff",
+    mutedLight: "rgba(245, 247, 255, 0.84)",
+    mutedDark: "rgba(235, 238, 255, 0.78)",
+    gradient: "radial-gradient(circle at 92% 32%, rgba(255, 180, 70, 0.95) 0 8%, transparent 22%), radial-gradient(circle at 84% 42%, rgba(255, 45, 190, 0.75) 0 12%, transparent 28%), radial-gradient(circle at 72% 18%, rgba(0, 220, 255, 0.55) 0 11%, transparent 28%), radial-gradient(circle at 22% 82%, rgba(255, 60, 210, 0.35) 0 5%, transparent 16%), linear-gradient(135deg, #19005c 0%, #071a80 38%, #003fd1 63%, #4d08a8 100%)",
+    hero: "linear-gradient(135deg, rgba(124, 60, 255, 0.84), rgba(224, 24, 255, 0.62), rgba(255, 155, 61, 0.72))"
   }
 };
 function getGdsVibeThemes() {

package/dist/client.js

@@ -307,7 +307,8 @@ var customPresetThemes = {
   coral: createVibrantPresetTheme("pink"),
   mint: createVibrantPresetTheme("lime"),
   orchid: createVibrantPresetTheme("grape"),
-  royal: createVibrantPresetTheme("violet")
+  royal: createVibrantPresetTheme("violet"),
+  cosmic: createVibrantPresetTheme("violet", { darkForward: true })
 };
 var themePresetCatalog = [
   { id: "default", label: "Default runtime theme", description: "Balanced, neutral baseline lane.", runtimeLane: "gdsTheme" },
@@ -326,7 +327,8 @@ var themePresetCatalog = [
   { id: "coral", label: "Coral bloom", description: "Expressive pink-coral lane for creator, commerce, and social products.", runtimeLane: "resolveGdsThemePreset(coral)" },
   { id: "mint", label: "Mint circuit", description: "Clean green-mint lane for health, learning, and growth products.", runtimeLane: "resolveGdsThemePreset(mint)" },
   { id: "orchid", label: "Orchid signal", description: "Purple-grape lane for editorial, culture, and premium tools.", runtimeLane: "resolveGdsThemePreset(orchid)" },
-  { id: "royal", label: "Royal violet", description: "Confident violet lane for SaaS dashboards and professional apps.", runtimeLane: "resolveGdsThemePreset(royal)" }
+  { id: "royal", label: "Royal violet", description: "Confident violet lane for SaaS dashboards and professional apps.", runtimeLane: "resolveGdsThemePreset(royal)" },
+  { id: "cosmic", label: "Cosmic burst", description: "Highly saturated blue-violet-cyan-magenta showcase lane for bold public apps and launch surfaces.", runtimeLane: "resolveGdsThemePreset(cosmic)" }
 ];
 function getGdsThemePresets() {
   return themePresetCatalog;
@@ -611,6 +613,27 @@ var vibeThemes = {
     borderLight: "rgba(124, 58, 237, 0.3)",
     gradient: "radial-gradient(circle at 15% 9%, rgba(124, 58, 237, 0.34), transparent 28%), radial-gradient(circle at 82% 12%, rgba(6, 182, 212, 0.28), transparent 30%), radial-gradient(circle at 92% 72%, rgba(236, 72, 153, 0.2), transparent 26%)",
     hero: "linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(6, 182, 212, 0.18), rgba(236, 72, 153, 0.18))"
+  },
+  cosmic: {
+    id: "cosmic",
+    label: "Cosmic burst",
+    primary: "#7c3cff",
+    accent: "#e018ff",
+    glow: "rgba(224, 24, 255, 0.36)",
+    canvasLight: "#071a80",
+    canvasDark: "#030018",
+    shellLight: "rgba(10, 18, 70, 0.72)",
+    shellDark: "rgba(8, 10, 42, 0.84)",
+    surfaceLight: "rgba(10, 18, 70, 0.82)",
+    surfaceDark: "rgba(9, 14, 54, 0.76)",
+    borderLight: "rgba(190, 160, 255, 0.45)",
+    borderDark: "rgba(190, 160, 255, 0.52)",
+    textLight: "#ffffff",
+    textDark: "#ffffff",
+    mutedLight: "rgba(245, 247, 255, 0.84)",
+    mutedDark: "rgba(235, 238, 255, 0.78)",
+    gradient: "radial-gradient(circle at 92% 32%, rgba(255, 180, 70, 0.95) 0 8%, transparent 22%), radial-gradient(circle at 84% 42%, rgba(255, 45, 190, 0.75) 0 12%, transparent 28%), radial-gradient(circle at 72% 18%, rgba(0, 220, 255, 0.55) 0 11%, transparent 28%), radial-gradient(circle at 22% 82%, rgba(255, 60, 210, 0.35) 0 5%, transparent 16%), linear-gradient(135deg, #19005c 0%, #071a80 38%, #003fd1 63%, #4d08a8 100%)",
+    hero: "linear-gradient(135deg, rgba(124, 60, 255, 0.84), rgba(224, 24, 255, 0.62), rgba(255, 155, 61, 0.72))"
   }
 };
 function getGdsVibeThemes() {
@@ -681,7 +704,7 @@ function isScheme(value) {
   return value === "light" || value === "dark" || value === "auto";
 }
 function resolveEffectiveScheme(preset, colorScheme) {
-  if (preset === "dark-public" || preset === "neon-night") {
+  if (preset === "dark-public" || preset === "neon-night" || preset === "cosmic") {
     return "dark";
   }
   return colorScheme;

package/dist/client.mjs

@@ -4,7 +4,7 @@ import {
   showGdsNotification,
   useGdsThemePresetState,
   useGdsTranslation
-} from "./chunk-G42DZXE5.mjs";
+} from "./chunk-DDAWLOKZ.mjs";
 import {
   applyGdsFontLane,
   createPublicBrandTheme,
@@ -21,7 +21,7 @@ import {
   resolveGdsThemePreset,
   resolveGdsVibeTheme,
   withGdsMotion
-} from "./chunk-OMSQVRZK.mjs";
+} from "./chunk-H7L27ZEE.mjs";
 export {
   GdsProvider,
   applyGdsFontLane,

package/dist/index.js

@@ -307,7 +307,8 @@ var customPresetThemes = {
   coral: createVibrantPresetTheme("pink"),
   mint: createVibrantPresetTheme("lime"),
   orchid: createVibrantPresetTheme("grape"),
-  royal: createVibrantPresetTheme("violet")
+  royal: createVibrantPresetTheme("violet"),
+  cosmic: createVibrantPresetTheme("violet", { darkForward: true })
 };
 var themePresetCatalog = [
   { id: "default", label: "Default runtime theme", description: "Balanced, neutral baseline lane.", runtimeLane: "gdsTheme" },
@@ -326,7 +327,8 @@ var themePresetCatalog = [
   { id: "coral", label: "Coral bloom", description: "Expressive pink-coral lane for creator, commerce, and social products.", runtimeLane: "resolveGdsThemePreset(coral)" },
   { id: "mint", label: "Mint circuit", description: "Clean green-mint lane for health, learning, and growth products.", runtimeLane: "resolveGdsThemePreset(mint)" },
   { id: "orchid", label: "Orchid signal", description: "Purple-grape lane for editorial, culture, and premium tools.", runtimeLane: "resolveGdsThemePreset(orchid)" },
-  { id: "royal", label: "Royal violet", description: "Confident violet lane for SaaS dashboards and professional apps.", runtimeLane: "resolveGdsThemePreset(royal)" }
+  { id: "royal", label: "Royal violet", description: "Confident violet lane for SaaS dashboards and professional apps.", runtimeLane: "resolveGdsThemePreset(royal)" },
+  { id: "cosmic", label: "Cosmic burst", description: "Highly saturated blue-violet-cyan-magenta showcase lane for bold public apps and launch surfaces.", runtimeLane: "resolveGdsThemePreset(cosmic)" }
 ];
 function getGdsThemePresets() {
   return themePresetCatalog;
@@ -611,6 +613,27 @@ var vibeThemes = {
     borderLight: "rgba(124, 58, 237, 0.3)",
     gradient: "radial-gradient(circle at 15% 9%, rgba(124, 58, 237, 0.34), transparent 28%), radial-gradient(circle at 82% 12%, rgba(6, 182, 212, 0.28), transparent 30%), radial-gradient(circle at 92% 72%, rgba(236, 72, 153, 0.2), transparent 26%)",
     hero: "linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(6, 182, 212, 0.18), rgba(236, 72, 153, 0.18))"
+  },
+  cosmic: {
+    id: "cosmic",
+    label: "Cosmic burst",
+    primary: "#7c3cff",
+    accent: "#e018ff",
+    glow: "rgba(224, 24, 255, 0.36)",
+    canvasLight: "#071a80",
+    canvasDark: "#030018",
+    shellLight: "rgba(10, 18, 70, 0.72)",
+    shellDark: "rgba(8, 10, 42, 0.84)",
+    surfaceLight: "rgba(10, 18, 70, 0.82)",
+    surfaceDark: "rgba(9, 14, 54, 0.76)",
+    borderLight: "rgba(190, 160, 255, 0.45)",
+    borderDark: "rgba(190, 160, 255, 0.52)",
+    textLight: "#ffffff",
+    textDark: "#ffffff",
+    mutedLight: "rgba(245, 247, 255, 0.84)",
+    mutedDark: "rgba(235, 238, 255, 0.78)",
+    gradient: "radial-gradient(circle at 92% 32%, rgba(255, 180, 70, 0.95) 0 8%, transparent 22%), radial-gradient(circle at 84% 42%, rgba(255, 45, 190, 0.75) 0 12%, transparent 28%), radial-gradient(circle at 72% 18%, rgba(0, 220, 255, 0.55) 0 11%, transparent 28%), radial-gradient(circle at 22% 82%, rgba(255, 60, 210, 0.35) 0 5%, transparent 16%), linear-gradient(135deg, #19005c 0%, #071a80 38%, #003fd1 63%, #4d08a8 100%)",
+    hero: "linear-gradient(135deg, rgba(124, 60, 255, 0.84), rgba(224, 24, 255, 0.62), rgba(255, 155, 61, 0.72))"
   }
 };
 function getGdsVibeThemes() {
@@ -681,7 +704,7 @@ function isScheme(value) {
   return value === "light" || value === "dark" || value === "auto";
 }
 function resolveEffectiveScheme(preset, colorScheme) {
-  if (preset === "dark-public" || preset === "neon-night") {
+  if (preset === "dark-public" || preset === "neon-night" || preset === "cosmic") {
     return "dark";
   }
   return colorScheme;

package/dist/index.mjs

@@ -4,7 +4,7 @@ import {
   showGdsNotification,
   useGdsThemePresetState,
   useGdsTranslation
-} from "./chunk-G42DZXE5.mjs";
+} from "./chunk-DDAWLOKZ.mjs";
 import {
   applyGdsFontLane,
   createPublicBrandTheme,
@@ -21,7 +21,7 @@ import {
   resolveGdsThemePreset,
   resolveGdsVibeTheme,
   withGdsMotion
-} from "./chunk-OMSQVRZK.mjs";
+} from "./chunk-H7L27ZEE.mjs";
 export {
   GdsProvider,
   applyGdsFontLane,

package/dist/server.d.mts

@@ -19,7 +19,7 @@ declare function createPublicBrandTheme({ editorialSerif, flatSurfaces, override
 declare function extendGdsTheme(overrides?: MantineThemeOverride): MantineTheme;
 declare function withGdsMotion(overrides?: MantineThemeOverride): MantineTheme;
 
-type GdsThemePresetId = 'default' | 'dark-public' | 'flat-surface' | 'editorial' | 'brand' | 'sunset' | 'oceanic' | 'forest' | 'ruby' | 'amber' | 'neon-night' | 'skyline' | 'aurora' | 'coral' | 'mint' | 'orchid' | 'royal';
+type GdsThemePresetId = 'default' | 'dark-public' | 'flat-surface' | 'editorial' | 'brand' | 'sunset' | 'oceanic' | 'forest' | 'ruby' | 'amber' | 'neon-night' | 'skyline' | 'aurora' | 'coral' | 'mint' | 'orchid' | 'royal' | 'cosmic';
 interface GdsThemePreset {
     id: GdsThemePresetId;
     label: string;

package/dist/server.d.ts

@@ -19,7 +19,7 @@ declare function createPublicBrandTheme({ editorialSerif, flatSurfaces, override
 declare function extendGdsTheme(overrides?: MantineThemeOverride): MantineTheme;
 declare function withGdsMotion(overrides?: MantineThemeOverride): MantineTheme;
 
-type GdsThemePresetId = 'default' | 'dark-public' | 'flat-surface' | 'editorial' | 'brand' | 'sunset' | 'oceanic' | 'forest' | 'ruby' | 'amber' | 'neon-night' | 'skyline' | 'aurora' | 'coral' | 'mint' | 'orchid' | 'royal';
+type GdsThemePresetId = 'default' | 'dark-public' | 'flat-surface' | 'editorial' | 'brand' | 'sunset' | 'oceanic' | 'forest' | 'ruby' | 'amber' | 'neon-night' | 'skyline' | 'aurora' | 'coral' | 'mint' | 'orchid' | 'royal' | 'cosmic';
 interface GdsThemePreset {
     id: GdsThemePresetId;
     label: string;

package/dist/server.js

@@ -302,7 +302,8 @@ var customPresetThemes = {
   coral: createVibrantPresetTheme("pink"),
   mint: createVibrantPresetTheme("lime"),
   orchid: createVibrantPresetTheme("grape"),
-  royal: createVibrantPresetTheme("violet")
+  royal: createVibrantPresetTheme("violet"),
+  cosmic: createVibrantPresetTheme("violet", { darkForward: true })
 };
 var themePresetCatalog = [
   { id: "default", label: "Default runtime theme", description: "Balanced, neutral baseline lane.", runtimeLane: "gdsTheme" },
@@ -321,7 +322,8 @@ var themePresetCatalog = [
   { id: "coral", label: "Coral bloom", description: "Expressive pink-coral lane for creator, commerce, and social products.", runtimeLane: "resolveGdsThemePreset(coral)" },
   { id: "mint", label: "Mint circuit", description: "Clean green-mint lane for health, learning, and growth products.", runtimeLane: "resolveGdsThemePreset(mint)" },
   { id: "orchid", label: "Orchid signal", description: "Purple-grape lane for editorial, culture, and premium tools.", runtimeLane: "resolveGdsThemePreset(orchid)" },
-  { id: "royal", label: "Royal violet", description: "Confident violet lane for SaaS dashboards and professional apps.", runtimeLane: "resolveGdsThemePreset(royal)" }
+  { id: "royal", label: "Royal violet", description: "Confident violet lane for SaaS dashboards and professional apps.", runtimeLane: "resolveGdsThemePreset(royal)" },
+  { id: "cosmic", label: "Cosmic burst", description: "Highly saturated blue-violet-cyan-magenta showcase lane for bold public apps and launch surfaces.", runtimeLane: "resolveGdsThemePreset(cosmic)" }
 ];
 function getGdsThemePresets() {
   return themePresetCatalog;
@@ -606,6 +608,27 @@ var vibeThemes = {
     borderLight: "rgba(124, 58, 237, 0.3)",
     gradient: "radial-gradient(circle at 15% 9%, rgba(124, 58, 237, 0.34), transparent 28%), radial-gradient(circle at 82% 12%, rgba(6, 182, 212, 0.28), transparent 30%), radial-gradient(circle at 92% 72%, rgba(236, 72, 153, 0.2), transparent 26%)",
     hero: "linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(6, 182, 212, 0.18), rgba(236, 72, 153, 0.18))"
+  },
+  cosmic: {
+    id: "cosmic",
+    label: "Cosmic burst",
+    primary: "#7c3cff",
+    accent: "#e018ff",
+    glow: "rgba(224, 24, 255, 0.36)",
+    canvasLight: "#071a80",
+    canvasDark: "#030018",
+    shellLight: "rgba(10, 18, 70, 0.72)",
+    shellDark: "rgba(8, 10, 42, 0.84)",
+    surfaceLight: "rgba(10, 18, 70, 0.82)",
+    surfaceDark: "rgba(9, 14, 54, 0.76)",
+    borderLight: "rgba(190, 160, 255, 0.45)",
+    borderDark: "rgba(190, 160, 255, 0.52)",
+    textLight: "#ffffff",
+    textDark: "#ffffff",
+    mutedLight: "rgba(245, 247, 255, 0.84)",
+    mutedDark: "rgba(235, 238, 255, 0.78)",
+    gradient: "radial-gradient(circle at 92% 32%, rgba(255, 180, 70, 0.95) 0 8%, transparent 22%), radial-gradient(circle at 84% 42%, rgba(255, 45, 190, 0.75) 0 12%, transparent 28%), radial-gradient(circle at 72% 18%, rgba(0, 220, 255, 0.55) 0 11%, transparent 28%), radial-gradient(circle at 22% 82%, rgba(255, 60, 210, 0.35) 0 5%, transparent 16%), linear-gradient(135deg, #19005c 0%, #071a80 38%, #003fd1 63%, #4d08a8 100%)",
+    hero: "linear-gradient(135deg, rgba(124, 60, 255, 0.84), rgba(224, 24, 255, 0.62), rgba(255, 155, 61, 0.72))"
   }
 };
 function getGdsVibeThemes() {

package/dist/server.mjs

@@ -14,7 +14,7 @@ import {
   resolveGdsThemePreset,
   resolveGdsVibeTheme,
   withGdsMotion
-} from "./chunk-OMSQVRZK.mjs";
+} from "./chunk-H7L27ZEE.mjs";
 export {
   applyGdsFontLane,
   createPublicBrandTheme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doneisbetter/gds-theme",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/styles.css

@@ -228,6 +228,144 @@ html[data-gds-theme-preset='royal'] .mantine-Card-root {
   border-color: color-mix(in srgb, var(--gds-vibe-border) 78%, var(--gds-vibe-primary)) !important;
 }
 
+html[data-gds-theme-preset='cosmic'] body {
+  color: #ffffff;
+  background:
+    radial-gradient(circle at 92% 32%, rgba(255, 180, 70, 0.95) 0 8%, transparent 22%),
+    radial-gradient(circle at 84% 42%, rgba(255, 45, 190, 0.75) 0 12%, transparent 28%),
+    radial-gradient(circle at 72% 18%, rgba(0, 220, 255, 0.55) 0 11%, transparent 28%),
+    radial-gradient(circle at 22% 82%, rgba(255, 60, 210, 0.35) 0 5%, transparent 16%),
+    linear-gradient(135deg, #19005c 0%, #071a80 38%, #003fd1 63%, #4d08a8 100%) !important;
+  background-attachment: fixed;
+}
+
+html[data-gds-theme-preset='cosmic'] body::before {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  content: '';
+  background:
+    radial-gradient(circle at 80% 30%, rgba(160, 42, 255, 0.95) 0 4%, transparent 11%),
+    radial-gradient(circle at 72% 36%, rgba(0, 145, 255, 0.8) 0 3%, transparent 9%),
+    radial-gradient(circle at 98% 74%, rgba(120, 25, 255, 0.75) 0 10%, transparent 24%),
+    linear-gradient(115deg, transparent 0 61%, rgba(0, 245, 255, 0.42) 61% 72%, transparent 72%);
+  filter: blur(0.5px);
+}
+
+html[data-gds-theme-preset='cosmic'] body::after {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  content: '';
+  opacity: 0.38;
+  mix-blend-mode: screen;
+  background-image:
+    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1px, transparent 1.6px),
+    radial-gradient(circle, rgba(255, 255, 255, 0.45) 0 1px, transparent 1.4px);
+  background-position: 20px 40px, 90px 120px;
+  background-size: 160px 160px, 260px 260px;
+}
+
+html[data-gds-theme-preset='cosmic'] .mantine-AppShell-main {
+  color: #ffffff;
+  background:
+    radial-gradient(circle at 92% 32%, rgba(255, 180, 70, 0.95) 0 8%, transparent 22%),
+    radial-gradient(circle at 84% 42%, rgba(255, 45, 190, 0.75) 0 12%, transparent 28%),
+    radial-gradient(circle at 72% 18%, rgba(0, 220, 255, 0.55) 0 11%, transparent 28%),
+    radial-gradient(circle at 22% 82%, rgba(255, 60, 210, 0.35) 0 5%, transparent 16%),
+    linear-gradient(135deg, #19005c 0%, #071a80 38%, #003fd1 63%, #4d08a8 100%) !important;
+}
+
+html[data-gds-theme-preset='cosmic'] .mantine-AppShell-header,
+html[data-gds-theme-preset='cosmic'] .mantine-AppShell-navbar,
+html[data-gds-theme-preset='cosmic'] .mantine-AppShell-footer {
+  color: #ffffff;
+  background: rgba(10, 18, 70, 0.62) !important;
+  border-color: rgba(190, 160, 255, 0.45) !important;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
+  backdrop-filter: blur(22px) saturate(1.25);
+}
+
+html[data-gds-theme-preset='cosmic'] .mantine-Paper-root,
+html[data-gds-theme-preset='cosmic'] .mantine-Card-root {
+  color: #ffffff;
+  background:
+    radial-gradient(circle at 100% 0%, rgba(224, 24, 255, 0.24), transparent 13rem),
+    linear-gradient(145deg, rgba(16, 24, 92, 0.88), rgba(9, 13, 58, 0.78)) !important;
+  border-color: rgba(212, 190, 255, 0.58) !important;
+  border-radius: 28px;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
+  backdrop-filter: blur(22px) saturate(1.2);
+}
+
+html[data-gds-theme-preset='cosmic'] .mantine-Button-root:not([data-variant='default']) {
+  color: #ffffff;
+  background: linear-gradient(135deg, #7c3cff, #e018ff, #ff9b3d) !important;
+  border-color: transparent !important;
+  box-shadow: 0 12px 32px rgba(224, 24, 255, 0.32);
+}
+
+html[data-gds-theme-preset='cosmic'] .mantine-Button-root[data-variant='default'],
+html[data-gds-theme-preset='cosmic'] .mantine-Input-input,
+html[data-gds-theme-preset='cosmic'] .mantine-NativeSelect-input,
+html[data-gds-theme-preset='cosmic'] .mantine-Textarea-input {
+  color: #ffffff;
+  background: rgba(16, 26, 86, 0.72) !important;
+  border-color: rgba(212, 190, 255, 0.58) !important;
+}
+
+html[data-gds-theme-preset='cosmic'] .mantine-Input-input::placeholder,
+html[data-gds-theme-preset='cosmic'] .mantine-Textarea-input::placeholder {
+  color: rgba(235, 238, 255, 0.58);
+}
+
+html[data-gds-theme-preset='cosmic'] .mantine-AppShell-main h1,
+html[data-gds-theme-preset='cosmic'] .mantine-AppShell-main h2,
+html[data-gds-theme-preset='cosmic'] .mantine-AppShell-main h3,
+html[data-gds-theme-preset='cosmic'] .mantine-AppShell-main h4,
+html[data-gds-theme-preset='cosmic'] .mantine-Text-root,
+html[data-gds-theme-preset='cosmic'] .mantine-InputWrapper-label {
+  color: #ffffff !important;
+}
+
+html[data-gds-theme-preset='cosmic'] .mantine-Text-root[data-dimmed],
+html[data-gds-theme-preset='cosmic'] .mantine-InputWrapper-description,
+html[data-gds-theme-preset='cosmic'] [style*='--mantine-color-dimmed'],
+html[data-gds-theme-preset='cosmic'] .mantine-Text-root[style*='color'] {
+  color: rgba(245, 247, 255, 0.84) !important;
+}
+
+html[data-gds-theme-preset='cosmic'] .mantine-Code-root {
+  color: #ffd4ff;
+  background: rgba(124, 60, 255, 0.28);
+  border: 1px solid rgba(212, 190, 255, 0.24);
+}
+
+html[data-gds-theme-preset='cosmic'] .mantine-Badge-root {
+  color: #f7d8ff;
+  background: rgba(124, 60, 255, 0.34);
+  border-color: rgba(224, 24, 255, 0.35);
+}
+
+@media (max-width: 768px) {
+  html[data-gds-theme-preset='cosmic'] body,
+  html[data-gds-theme-preset='cosmic'] .mantine-AppShell-main {
+    background:
+      radial-gradient(circle at 115% 18%, rgba(255, 170, 70, 0.95) 0 13%, transparent 31%),
+      radial-gradient(circle at 90% 38%, rgba(255, 45, 190, 0.72) 0 17%, transparent 38%),
+      radial-gradient(circle at 58% 14%, rgba(0, 220, 255, 0.48) 0 13%, transparent 35%),
+      linear-gradient(150deg, #180052 0%, #07136f 42%, #0038bc 70%, #5207a4 100%) !important;
+  }
+
+  html[data-gds-theme-preset='cosmic'] body::before {
+    background:
+      radial-gradient(circle at 83% 32%, rgba(160, 42, 255, 0.9) 0 8%, transparent 20%),
+      radial-gradient(circle at 95% 76%, rgba(120, 25, 255, 0.7) 0 14%, transparent 34%);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   html[data-gds-theme-preset] a,
   html[data-gds-theme-preset] button {