this.gui 1.3.22 → 1.3.26

package/src/gui/Theme/GuiProvider.tsx

@@ -0,0 +1,125 @@
+// src/themes/GuiProvider.tsx
+import React, { useEffect, useMemo, useState } from 'react';
+import { useInRouterContext, BrowserRouter } from 'react-router-dom';
+import { generatePaletteCssVars } from './utils/themeUtils';
+import { ThemeContext } from '@/gui/contexts/ThemeContext';
+import { ThemeProvider, CssBaseline } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
+import { themeTokens } from '@/gui/Theme/styles/theme.tokens';
+import { usePersistentThemeId, usePersistentThemeMode } from './utils/persistence';
+import { makeMuiTheme } from '@/gui/Theme/fromTokens';
+import { GuiThemes, getGuiTheme } from './utils/catalog';
+import { InsetsProvider, useInsetsContext } from '@/gui/contexts/InsetsContext';
+// -------------------------------- Types --------------------------------
+import type {
+  GuiContextValue,
+} from '@/types/theme';
+export type GuiProviderProps = {
+  initialThemeId?: string;
+  initialMode?: 'light' | 'dark'; // <-- añadido
+  children?: React.ReactNode;
+};
+
+export function GuiProvider({
+  initialThemeId = 'neurons.me',
+  initialMode = 'light', // default
+  children,
+}: GuiProviderProps) {
+  // Persist last chosen `themeId`
+  const [themeId, setThemeId] = usePersistentThemeId(initialThemeId);
+  // Persist last chosen `mode`
+  const [mode, setModeState] = usePersistentThemeMode(initialMode);
+  // Resolve manifest for current themeId (the GuiTheme which contains both modes)
+  const manifest = useMemo(() => {
+    return getGuiTheme(themeId) ?? GuiThemes[0];
+  }, [themeId]);
+  // Expose an `active` object for convenience (manifest + current selected mode)
+  const active = useMemo(() => {
+    return {
+      ...(manifest ?? {}),
+      mode,
+    } as (typeof manifest & { mode: 'light' | 'dark' });
+  }, [manifest, mode]);
+  // Build MUI themes for both dark and light using the manifest's mode tokens.
+  // IMPORTANT: makeMuiTheme signature assumed: makeMuiTheme(baseTokens, modeTokens, mode)
+  const { mode: manifestModes } = manifest || ({} as any);
+  const lightMuiTheme = useMemo<Theme>(() => {
+    const lightTokens = manifestModes?.light ?? {};
+    return makeMuiTheme(themeTokens, lightTokens, 'light');
+  }, [manifestModes]);
+  const darkMuiTheme = useMemo<Theme>(() => {
+    const darkTokens = manifestModes?.dark ?? {};
+    return makeMuiTheme(themeTokens, darkTokens, 'dark');
+  }, [manifestModes]);
+  const theme = mode === 'dark' ? darkMuiTheme : lightMuiTheme;
+  useEffect(() => {
+    generatePaletteCssVars(theme);
+  }, [theme]);
+  // Ensure saved key is valid with the current catalog
+  useEffect(() => {
+    if (GuiThemes.length === 0) return;
+    const ok = GuiThemes.some((e) => e.themeId === themeId);
+    if (!ok) setThemeId(GuiThemes[0].themeId ?? '');
+  }, [themeId, setThemeId]);
+  // API for changing mode without touching themeId
+  const setMode = (nextMode: 'light' | 'dark') => {
+    setModeState(nextMode);
+  };
+
+  const toggleMode = () => setModeState((m) => (m === 'dark' ? 'light' : 'dark'));
+  const ctxValue: GuiContextValue = useMemo(
+    () => ({
+      themeId: manifest?.themeId ?? '',
+      setThemeId,
+      themeName: manifest?.themeName ?? '',
+      mode,
+      setMode,
+      toggleMode,
+    }),
+    [manifest?.themeId, manifest?.themeName, mode, setThemeId]
+  );
+
+  return (
+    <InsetsProvider>
+      <GuiThemeBridge theme={theme} ctxValue={ctxValue}>
+        {children}
+      </GuiThemeBridge>
+    </InsetsProvider>
+  );
+}
+
+const GuiThemeBridge: React.FC<{ theme: Theme; ctxValue: GuiContextValue; children?: React.ReactNode }> = ({ theme, ctxValue, children }) => {
+  const { insets, updateInsets } = useInsetsContext();
+  const themeWithInsets = useMemo(() => {
+    return {
+      ...theme,
+      layout: {
+        ...(theme as any).layout,
+        insets,
+      },
+      updateInsets,
+    } as Theme & { layout: any; updateInsets: typeof updateInsets };
+  }, [insets, theme, updateInsets]);
+
+  return (
+    <ThemeProvider theme={themeWithInsets}>
+      <CssBaseline />
+      <ThemeContext.Provider value={ctxValue}>{children}</ThemeContext.Provider>
+    </ThemeProvider>
+  );
+};
+
+export default GuiProvider;
+
+// Wrapper that ensures GuiProvider is always inside a router
+export function GuiProviderWrapper(props: GuiProviderProps) {
+  const inRouter = useInRouterContext();
+  if (inRouter) {
+    return <GuiProvider {...props} />;
+  }
+  return (
+    <BrowserRouter>
+      <GuiProvider {...props} />
+    </BrowserRouter>
+  );
+}

package/src/gui/Theme/Icon/Icon.resolver.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { RegistryEntry, ResolveCtx } from '@/registry/types';
+import Icon from '@/themes/Icon/Icon';
+
+export type IconSpec = {
+  type: 'Icon';
+  props: {
+    name: string;
+    fill?: number;
+    weight?: number;
+    grade?: number;
+    opticalSize?: number;
+    fontSize?: number | string;
+    iconColor?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    [key: string]: any; // permite pasar props adicionales
+  };
+};
+
+const IconResolver: RegistryEntry = {
+  type: 'Icon',
+  resolve(spec: IconSpec, _ctx?: ResolveCtx) {
+    const p = spec.props ?? {};
+    return <Icon {...p} />;
+  },
+};
+
+export default IconResolver;

package/src/gui/Theme/Icon/Icon.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import 'material-symbols';
+
+export type IconProps = {
+  name: string; // e.g., 'material:home'
+  iconColor?: string; // CSS color value
+  fontSize?: number | string; // optional font size
+  weight?: number; // font variation setting
+  fill?: number; // font variation setting (0 = outlined, 1 = filled)
+  grade?: number;
+  opticalSize?: number;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export default function Icon({
+  name,
+  iconColor,
+  fontSize,
+  weight = 400,
+  fill = 0,
+  grade = 0,
+  opticalSize = 24,
+  className,
+  style,
+}: IconProps) {
+  const iconName = name;
+  const variationSettings = `"FILL" ${fill}, "wght" ${weight}, "GRAD" ${grade}, "opsz" ${opticalSize}`;
+  return (
+    <span
+      className={clsx('material-symbols-rounded', className)}
+      style={{
+        fontVariationSettings: variationSettings,
+        color: iconColor,
+        fontSize,
+        ...style,
+      }}
+    >
+      {iconName}
+    </span>
+  );
+}

package/src/gui/Theme/catalog/CherryByte/dark.tokens.ts

@@ -0,0 +1,47 @@
+// src/themes/catalog/CherryByte/dark.tokens.ts
+// Cherry Byte Modern Dark — Deep Green & Blush Harmony
+const darkTokens = {
+  "id": "cherrybyte-dark",
+  "$description": "Cherry Byte Dark — a youthful, elegant, and modern palette blending deep teal-green and soft blush tones for calm, sensual contrast.",
+  "color": {
+    "primary": { "$type": "color", "$value": "#e7a9a4" }, // blush pink
+    "secondary": { "$type": "color", "$value": "#2b3f3c" }, // deep forest green
+    "accent": { "$type": "color", "$value": "#d77c73" }, // coral accent
+    "icon": { "$type": "color", "$value": "#f5eaea" },
+    "background": {
+      "default": { "$type": "color", "$value": "#192524" }, // elegant deep teal
+      "paper": { "$type": "color", "$value": "#213230" }, // slightly lighter greenish tone
+      "nav": { "$type": "color", "$value": "#1a2928" } // subtle depth for navigation
+    },
+    "textPrimary": { "$type": "color", "$value": "#f9f4f3" },
+    "textSecondary": { "$type": "color", "$value": "rgba(255, 235, 230, 0.85)" },
+    "link": { "$type": "color", "$value": "#e7a9a4" },
+    "linkVisited": { "$type": "color", "$value": "#d5968f" },
+    "border": { "$type": "color", "$value": "rgba(255, 220, 210, 0.2)" },
+    "section": {
+      "default": { "$type": "color", "$value": "#202d2c" }, // soft green charcoal
+      "subtle": { "$type": "color", "$value": "#253837" }, // calm depth
+      "strong": { "$type": "color", "$value": "#324845" }, // bold modern layer
+      "accent": { "$type": "color", "$value": "#3d5450" }, // moody teal highlight
+      "highlight": { "$type": "color", "$value": "#d48d88" } // blush highlight
+    },
+    "blur": {
+      "light": { "$type": "color", "$value": "rgba(30, 25, 28, 0.34)" },
+      "medium": { "$type": "color", "$value": "rgba(34, 28, 30, 0.55)" },
+      "heavy": { "$type": "color", "$value": "rgba(38, 30, 32, 0.85)" },
+      "all": { "$type": "color", "$value": "rgba(42, 32, 34, 1)" }
+    }
+  },
+  "effects": {
+    "shadow": {
+      "$type": "shadow",
+      "$value": "0px 8px 24px rgba(25, 37, 36, 0.5)"
+    },
+    "glow": {
+      "$type": "shadow",
+      "$value": "0px 0px 28px rgba(231, 169, 164, 0.25)"
+    }
+  }
+};
+
+export default darkTokens;

package/src/gui/Theme/catalog/CherryByte/light.tokens.ts

@@ -0,0 +1,47 @@
+// src/themes/catalog/CherryByte/light.tokens.ts
+const lightTokens = {
+  "$description": "Cherry Byte Light Theme — sensual, elegant, and emotionally evocative feminine palette inspired by rose light and electric bloom.",
+  "id": "cherryByte-light",
+  "extends": "global.tokens.json",
+  "color": {
+    "primary": { "$type": "color", "$value": "#d6336c" }, // Vibrant cherry pink
+    "secondary": { "$type": "color", "$value": "#a8457a" }, // Muted plum rose
+    "accent": { "$type": "color", "$value": "#ff80ab" }, // Luminous magenta accent
+    "icon": { "$type": "color", "$value": "#643b4c" },
+    "background": {
+      "default": { "$type": "color", "$value": "#f9f3f5" }, // Blush rose white
+      "paper": { "$type": "color", "$value": "#fffafb" }, // Ultra light rose
+      "nav": { "$type": "color", "$value": "#f2e3e8" } // Warm muted cherry
+    },
+    "textPrimary": { "$type": "color", "$value": "#381e29" },
+    "textSecondary": { "$type": "color", "$value": "#5c3a49" },
+    "link": { "$type": "color", "$value": "#c2185b" },
+    "linkVisited": { "$type": "color", "$value": "#9c1550" },
+    "border": { "$type": "color", "$value": "rgba(210, 120, 150, 0.25)" },
+    "section": {
+      "default": { "$type": "color", "$value": "#f8eef1" }, // Creamy cherry mist
+      "subtle": { "$type": "color", "$value": "#fff5f8" }, // Barely pink highlight
+      "strong": { "$type": "color", "$value": "#f0dde3" }, // Deeper rose canvas
+      "accent": { "$type": "color", "$value": "#ffd4e1" }, // Soft cherry accent glow
+      "highlight": { "$type": "color", "$value": "#ffe2ec" } // Radiant blush aura
+    },
+    "blur": {
+      "light": { "$type": "color", "$value": "rgba(255, 245, 248, 0.45)" },
+      "medium": { "$type": "color", "$value": "rgba(255, 240, 246, 0.65)" },
+      "heavy": { "$type": "color", "$value": "rgba(255, 230, 242, 0.85)" },
+      "all": { "$type": "color", "$value": "rgba(255, 225, 238, 1)" }
+    }
+  },
+  "effects": {
+    "shadow": {
+      "$type": "shadow",
+      "$value": "0px 6px 18px rgba(180, 70, 120, 0.15)"
+    },
+    "glow": {
+      "$type": "shadow",
+      "$value": "0px 0px 12px rgba(255, 128, 171, 0.25)"
+    }
+  }
+};
+
+export default lightTokens;

package/src/gui/Theme/catalog/CherryByte/manifest.ts

@@ -0,0 +1,24 @@
+// src/themes/catalog/neurons/manifest.ts
+import type { ThemeManifest } from '@/types/theme';
+import badgeImage from './CherryByte.png';
+import lightTokens from './light.tokens';
+import darkTokens from './dark.tokens';
+const cherryByteManifest: ThemeManifest = {
+  themeId: 'cherrybyte',
+  themeName: 'Cherry Byte',
+  description: 'Vibrant cherry red accents, designed to reduce eye strain.',
+  author: 'suiGn',
+  version: '1.0.0',
+  license: 'MIT',
+  homepage: 'https://neurons.me/',
+  tags: ['official', 'default'],  
+  createdAt: '2025-09-16T00:00:00.000Z',
+  updatedAt: '2025-09-16T00:00:00.000Z',
+  badgeUrl: badgeImage,
+  mode: {
+    light: lightTokens,
+    dark: darkTokens,
+  },
+  defaultMode: 'dark'
+};
+export default cherryByteManifest;

package/src/gui/Theme/catalog/GhostShell/dark.tokens.ts

@@ -0,0 +1,43 @@
+// src/themes/catalog/GhostShell/dark.tokens.ts
+const darkTokens = {
+  "id": "LunaHex-dark",
+  "$description": "LunaHex Cyberpunk Dark — matrix-inspired neon aesthetic with ghostly green glows and deep cyber shadows.",
+  "color": {
+    "primary": { "$type": "color", "$value": "#00ff9f" },
+    "secondary": { "$type": "color", "$value": "#00e0ff" },
+    "icon": { "$type": "color", "$value": "#7fffd4" },
+    "background": {
+      "default": { "$type": "color", "$value": "#06080a" },
+      "paper": { "$type": "color", "$value": "#0b1014" },
+      "nav": { "$type": "color", "$value": "rgba(10,14,18,0.96)" }
+    },
+    "textPrimary": { "$type": "color", "$value": "#e0fff3" },
+    "textSecondary": { "$type": "color", "$value": "rgba(180,255,220,0.75)" },
+    "link": { "$type": "color", "$value": "#00ffc3" },
+    "linkVisited": { "$type": "color", "$value": "#00a8a8" },
+    "border": { "$type": "color", "$value": "rgba(0,255,160,0.25)" },
+    "section": {
+      "default": { "$type": "color", "$value": "#0a0f10" },
+      "subtle": { "$type": "color", "$value": "#0f1719" },
+      "strong": { "$type": "color", "$value": "#030506" }
+    },
+    "blur": {
+      "light": { "$type": "color", "$value": "rgba(2, 13, 7, 0.55)" },
+      "medium": { "$type": "color", "$value": "rgba(2, 13, 7, 0.69)" },
+      "heavy": { "$type": "color", "$value": "rgba(0, 9, 6, 0.89)" },
+      "all": { "$type": "color", "$value": "rgba(2, 25, 15, 1)" }
+    },
+    "accent": {
+      "glow": { "$type": "color", "$value": "#00ffcc" },
+      "pulse": { "$type": "color", "$value": "#00c3ff" }
+    }
+  },
+  "font": {
+    "family": {
+      "$type": "fontFamily",
+      "$value": "'Share Tech Mono', 'Poppins', monospace"
+    }
+  }
+};
+
+export default darkTokens;

package/src/gui/Theme/catalog/GhostShell/light.tokens.ts

@@ -0,0 +1,39 @@
+// src/themes/catalog/GhostShell/light.tokens.ts
+const lightTokens = {
+  "id": "LunaHex-light",
+  "extends": "global.tokens.json",
+  "color": {
+    "primary": { "$type": "color", "$value": "#00c77f" },
+    "secondary": { "$type": "color", "$value": "#00b8ff" },
+    "icon": { "$type": "color", "$value": "#007f73" },
+    "default": { "$type": "color", "$value": "#f4f8f6" },
+    "paper": { "$type": "color", "$value": "#ffffff" },
+    "nav": { "$type": "color", "$value": "#f1fef9" },
+    "textPrimary": { "$type": "color", "$value": "#061a14" },
+    "textSecondary": { "$type": "color", "$value": "#34584f" },
+    "link": { "$type": "color", "$value": "#009f77" },
+    "linkVisited": { "$type": "color", "$value": "#007866" },
+    "border": { "$type": "color", "$value": "rgba(0,160,120,0.25)" },
+    "section": {
+      "default": { "$type": "color", "$value": "#e9fcf4" },
+      "subtle": { "$type": "color", "$value": "#f8fffb" },
+      "strong": { "$type": "color", "$value": "#d6f5ec" }
+    },
+    "blur": {
+      "light": { "$type": "color", "$value": "rgba(245, 255, 250, 0.7)" },
+      "medium": { "$type": "color", "$value": "rgba(240, 255, 250, 0.85)" },
+      "heavy": { "$type": "color", "$value": "rgba(235, 255, 250, 1)" },
+      "all": { "$type": "color", "$value": "rgba(230, 255, 245, 1)" }
+    },
+    "accent": {
+      "glow": { "$type": "color", "$value": "#00ffaa" },
+      "pulse": { "$type": "color", "$value": "#00d0ff" }
+    }
+  },
+  "font": {
+    "body": { "$type": "font", "$value": "'Share Tech Mono', 'Nunito Sans', monospace" },
+    "heading": { "$type": "font", "$value": "'Poppins', sans-serif" }
+  }
+};
+
+export default lightTokens;

package/src/gui/Theme/catalog/GhostShell/manifest.ts

@@ -0,0 +1,24 @@
+// src/themes/catalog/GhostShell/manifest.ts
+import type { ThemeManifest } from '@/types/theme';
+import badgeImage from './ghost.png';
+import lightTokens from './light.tokens';
+import darkTokens from './dark.tokens';
+const ghostShellManifest: ThemeManifest = {
+  themeId: 'ghost.shell',
+  themeName: 'GhostShell',
+  description: 'A sleek, modern theme with a dark aesthetic, perfect for late-night sessions.',
+  author: 'suiGn',
+  version: '1.0.0',
+  license: 'MIT',
+  homepage: 'https://neurons.me/',
+  tags: ['official', 'default'],
+  createdAt: '2025-09-16T00:00:00.000Z',
+  updatedAt: '2025-09-16T00:00:00.000Z',
+  badgeUrl: badgeImage,
+  mode: {
+    light: lightTokens,
+    dark: darkTokens,
+  },
+  defaultMode: 'dark'
+};
+export default ghostShellManifest;

package/src/gui/Theme/catalog/LunaHex/dark.tokens.ts

@@ -0,0 +1,34 @@
+// src/themes/catalog/LunaHex/dark.tokens.ts
+// Luna Hex Dark Theme Tokens — overrides applied on top of global.tokens.json
+const darkTokens = {
+  "id": "LunaHex-dark",
+  "$description": "Luna Hex Dark Theme Tokens — mystical, elegant dark palette with lunar tones.",
+  "color": {
+    "primary": { "$type": "color", "$value": "#a692f4" }, // soft lavender glow
+    "secondary": { "$type": "color", "$value": "#f6a6de" }, // rose moonlight
+    "icon": { "$type": "color", "$value": "#cfc9ff" }, // silver-white icons
+    "background": {
+      "default": { "$type": "color", "$value": "#0f1016" }, // deep cosmic blue-black
+      "paper": { "$type": "color", "$value": "#171822" }, // subtle moon haze
+      "nav": { "$type": "color", "$value": "rgba(17,18,25,0.96)" } // translucent dark
+    },
+    "textPrimary": { "$type": "color", "$value": "#f2efff" },
+    "textSecondary": { "$type": "color", "$value": "rgba(230,228,255,0.7)" },
+    "link": { "$type": "color", "$value": "#b8a3ff" },
+    "linkVisited": { "$type": "color", "$value": "#9c87f2" },
+    "border": { "$type": "color", "$value": "rgba(160,160,200,0.25)" },
+    "section": {
+      "default": { "$type": "color", "$value": "#141421" },
+      "subtle": { "$type": "color", "$value": "#1a1a2a" },
+      "strong": { "$type": "color", "$value": "#0c0c15" }
+    },
+    "blur": {
+      "light": { "$type": "color", "$value": "rgba(18, 17, 28, 0.55)" },
+      "medium": { "$type": "color", "$value": "rgba(20, 19, 32, 0.69)" },
+      "heavy": { "$type": "color", "$value": "rgba(17, 16, 24, 0.89)" },
+      "all": { "$type": "color", "$value": "rgba(16, 15, 24, 1)" }
+    }
+  }
+};
+
+export default darkTokens;

package/src/gui/Theme/catalog/LunaHex/light.tokens.ts

@@ -0,0 +1,74 @@
+// src/themes/catalog/LunaHex/light.tokens.ts
+const lightTokens = {
+  "$description": "Luna Hex Light Theme — part of This.GUI ecosystem",
+  "id": "LunaHex-light",
+  "extends": "global.tokens.json",
+  "color": {
+    "primary": {
+      "$type": "color",
+      "$value": "#6a4cc2"
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": "#e08bcf"
+    },
+    "icon": {
+      "$type": "color",
+      "$value": "#9fa4b7"
+    },
+    "default": {
+      "$type": "color",
+      "$value": "#f4f5fa"
+    },
+    "paper": {
+      "$type": "color",
+      "$value": "#ffffff"
+    },
+    "nav": {
+      "$type": "color",
+      "$value": "#f9f9fb"
+    },
+    "textPrimary": {
+      "$type": "color",
+      "$value": "#2b244d"
+    },
+    "textSecondary": {
+      "$type": "color",
+      "$value": "#5c5470"
+    },
+    "link": {
+      "$type": "color",
+      "$value": "#a67be9"
+    },
+    "linkVisited": {
+      "$type": "color",
+      "$value": "#8b5be0"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "rgba(160,160,190,0.2)"
+    },
+    "section": {
+      "default": {
+        "$type": "color",
+        "$value": "#f6f5ff"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#e9e6fa"
+      }
+    },
+    "blur": {
+      "light": { "$type": "color", "$value": "rgba(250, 245, 255, 0.34)" },
+      "medium": { "$type": "color", "$value": "rgba(245, 240, 255, 0.55)" },
+      "heavy": { "$type": "color", "$value": "rgba(240, 235, 255, 0.89)" },
+      "all": { "$type": "color", "$value": "rgba(235, 230, 255, 1)" }
+    }
+  }
+};
+
+export default lightTokens;

package/src/gui/Theme/catalog/LunaHex/manifest.ts

@@ -0,0 +1,24 @@
+// src/themes/catalog/neurons/manifest.ts
+import type { ThemeManifest } from '@/types/theme';
+import badgeImage from './LunaHex.png';
+import lightTokens from './light.tokens';
+import darkTokens from './dark.tokens';
+const lunaManifest: ThemeManifest = {
+  themeId: 'luna',
+  themeName: 'LunaHex',
+  description: 'Luna Hex theme with light and dark modes.',
+  author: 'suiGn',
+  version: '1.0.0',
+  license: 'MIT',
+  homepage: 'https://neurons.me/',
+  tags: ['official', 'default'],
+  createdAt: '2025-09-16T00:00:00.000Z',
+  updatedAt: '2025-09-16T00:00:00.000Z',
+  badgeUrl: badgeImage,
+  mode: {
+    light: lightTokens,
+    dark: darkTokens,
+  },
+  defaultMode: 'dark'
+};
+export default lunaManifest;

package/src/gui/Theme/catalog/MUI/dark.tokens.ts

@@ -0,0 +1,58 @@
+// src/themes/catalog/MUI/dark.tokens.ts
+// MUI Dark Theme Tokens — overrides applied on top of global.tokens.json
+const darkTokens = {
+  "id": "MUI-dark",
+  "$description": "MUI Dark Theme Tokens — overrides applied on top of global.tokens.json",
+  "color": {
+    "primary": {
+      "$type": "color",
+      "$value": "#90caf9"
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": "#f48fb1"
+    },
+    "icon": {
+      "$type": "color",
+      "$value": "#a8a8a8"
+    },
+    "background": {
+      "default": { "$type": "color", "$value": "#121214" },
+      "paper": { "$type": "color", "$value": "#181a1c" },
+      "nav": { "$type": "color", "$value": "rgba(18,18,20,0.95)" }
+    },
+    "textPrimary": {
+      "$type": "color",
+      "$value": "#ffffff"
+    },
+    "textSecondary": {
+      "$type": "color",
+      "$value": "rgba(255,255,255,0.75)"
+    },
+    "link": {
+      "$type": "color",
+      "$value": "#00aa96"
+    },
+    "linkVisited": {
+      "$type": "color",
+      "$value": "#008278"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "rgb(45,45,55)"
+    },
+    "section": {
+      "default": { "$type": "color", "$value": "#181818" },
+      "subtle": { "$type": "color", "$value": "#1c1c1c" },
+      "strong": { "$type": "color", "$value": "#222" }
+    },
+    "blur": {
+      "light": { "$type": "color", "$value": "rgba(18, 18, 20, 0.55)" },
+      "medium": { "$type": "color", "$value": "rgba(18, 18, 20, 0.69)" },
+      "heavy": { "$type": "color", "$value": "rgba(18, 18, 20, .89)" },
+      "all": { "$type": "color", "$value": "rgba(18, 18, 20, 1)" }
+    }
+  }
+};
+
+export default darkTokens;