import { createTheme } from "../types"; const tokens = { purple: { c50: "#aaafff", c100: "#8288fe", c200: "#5a62eb", c300: "#454cd4", c400: "#333abe", c500: "#292d86", c600: "#1f2363", c700: "#191b4a", c800: "#111334", c900: "#0b0d22" }, shade: { c50: "#7c7c7c", c100: "#666666", c200: "#4f4f4f", c300: "#404040", c400: "#343434", c500: "#282828", c600: "#202020", c700: "#1a1a1a", c800: "#151515", c900: "#0e0e0e" }, ash: { c50: "#8d8d8d", c100: "#6b6b6b", c200: "#545454", c300: "#3c3c3c", c400: "#313131", c500: "#2c2c2c", c600: "#252525", c700: "#1e1e1e", c800: "#181818", c900: "#111111" }, blue: { c50: "#ccccd6", c100: "#a2a2a2", c200: "#868686", c300: "#646464", c400: "#4e4e4e", c500: "#383838", c600: "#2e2e2e", c700: "#272727", c800: "#181818", c900: "#0f0f0f" } }; export default createTheme({ name: "gray", extend: { colors: { themePreview: { primary: tokens.blue.c200, secondary: tokens.shade.c50 }, pill: { background: tokens.shade.c300, backgroundHover: tokens.shade.c200, highlight: tokens.blue.c200 }, global: { accentA: tokens.blue.c200, accentB: tokens.blue.c300 }, lightBar: { light: tokens.blue.c400 }, buttons: { toggle: tokens.purple.c300, toggleDisabled: tokens.ash.c500, secondary: tokens.ash.c700, secondaryHover: tokens.ash.c700, purple: tokens.purple.c500, purpleHover: tokens.purple.c400, cancel: tokens.ash.c500, cancelHover: tokens.ash.c300 }, background: { main: tokens.shade.c900, secondary: tokens.shade.c600, secondaryHover: tokens.shade.c400, accentA: tokens.purple.c500, accentB: tokens.blue.c500 }, modal: { background: tokens.shade.c800, }, type: { logo: tokens.purple.c100, text: tokens.shade.c50, dimmed: tokens.shade.c50, divider: tokens.ash.c500, secondary: tokens.ash.c100, link: tokens.purple.c100, linkHover: tokens.purple.c50 }, search: { background: tokens.shade.c500, focused: tokens.shade.c400, placeholder: tokens.shade.c100, icon: tokens.shade.c100 }, mediaCard: { hoverBackground: tokens.shade.c600, hoverAccent: tokens.shade.c50, hoverShadow: tokens.shade.c900, shadow: tokens.shade.c700, barColor: tokens.ash.c200, barFillColor: tokens.purple.c100, badge: tokens.shade.c700, badgeText: tokens.ash.c100 }, largeCard: { background: tokens.shade.c600, icon: tokens.purple.c400 }, dropdown: { background: tokens.shade.c600, altBackground: tokens.shade.c700, hoverBackground: tokens.shade.c500, text: tokens.shade.c50, secondary: tokens.shade.c100, border: tokens.shade.c400, contentBackground: tokens.shade.c500 }, authentication: { border: tokens.shade.c300, inputBg: tokens.shade.c600, inputBgHover: tokens.shade.c500, wordBackground: tokens.shade.c500, copyText: tokens.shade.c100, copyTextHover: tokens.ash.c50 }, settings: { sidebar: { activeLink: tokens.shade.c600, badge: tokens.shade.c900, type: { secondary: tokens.shade.c200, inactive: tokens.shade.c50, icon: tokens.shade.c50, iconActivated: tokens.purple.c200, activated: tokens.purple.c50 } }, card: { border: tokens.shade.c400, background: tokens.shade.c400, altBackground: tokens.shade.c400 }, saveBar: { background: tokens.shade.c800 } }, utils: { divider: tokens.ash.c300 }, errors: { card: tokens.shade.c800, border: tokens.ash.c500, type: { secondary: tokens.ash.c100 } }, about: { circle: tokens.ash.c500, circleText: tokens.ash.c50 }, editBadge: { bg: tokens.ash.c500, bgHover: tokens.ash.c400, text: tokens.ash.c50 }, progress: { background: tokens.ash.c50, preloaded: tokens.ash.c50, filled: tokens.purple.c200 }, video: { buttonBackground: tokens.ash.c200, autoPlay: { background: tokens.ash.c700, hover: tokens.ash.c500 }, scraping: { card: tokens.shade.c700, loading: tokens.purple.c200, noresult: tokens.ash.c100 }, audio: { set: tokens.purple.c200 }, context: { background: tokens.ash.c900, light: tokens.shade.c50, border: tokens.ash.c600, hoverColor: tokens.ash.c600, buttonFocus: tokens.ash.c500, flagBg: tokens.ash.c500, inputBg: tokens.ash.c600, buttonOverInputHover: tokens.ash.c500, inputPlaceholder: tokens.ash.c200, cardBorder: tokens.ash.c700, slider: tokens.ash.c50, sliderFilled: tokens.purple.c200, buttons: { list: tokens.ash.c700, active: tokens.ash.c900 }, closeHover: tokens.ash.c800, type: { secondary: tokens.ash.c200, accent: tokens.purple.c200 } } } } } });