const tokens = { black: "#000000", white: "#FFFFFF", semantic: { red: { c100: "#F46E6E", c200: "#E44F4F", c300: "#D74747", c400: "#B43434", }, green: { c100: "#60D26A", c200: "#40B44B", c300: "#31A33C", c400: "#237A2B", }, silver: { c100: "#DEDEDE", c200: "#B6CAD7", c300: "#8EA3B0", c400: "#617A8A", }, yellow: { c100: "#FFF599", c200: "#FCEC61", c300: "#D8C947", c400: "#AFA349", }, rose: { c100: "#DB3D61", c200: "#8A293B", c300: "#812435", c400: "#701B2B", }, }, blue: { c50: "#ADADF5", c100: "#7979CC", c200: "#5D5DAE", c300: "#3B3B8C", c400: "#2A2A71", c500: "#1F1F50", c600: "#1B1B41", c700: "#171736", c800: "#101020", c900: "#0B0B13", }, purple: { c50: "#D5AAFF", c100: "#C082FF", c200: "#A359EC", c300: "#8D44D6", c400: "#7831BF", c500: "#572887", c600: "#411F64", c700: "#31184A", c800: "#221134", c900: "#160B22", }, ash: { c50: "#7F8D9B", c100: "#5B6B7B", c200: "#445464", c300: "#2B3D4E", c400: "#203242", c500: "#1C2C3C", c600: "#172532", c700: "#131E29", c800: "#101820", c900: "#0C1216", }, shade: { c25: "#5d5db3", c50: "#676790", c100: "#52527A", c200: "#3F3F60", c300: "#32324F", c400: "#272741", c500: "#1E1E32", c600: "#171728", c700: "#131322", c800: "#0F0F1B", c900: "#0A0A12", }, }; export const defaultTheme = { extend: { colors: { themePreview: { primary: tokens.blue.c200, secondary: tokens.shade.c50, ghost: tokens.white, }, // Branding pill: { background: tokens.shade.c300, backgroundHover: tokens.shade.c200, highlight: tokens.blue.c200, activeBackground: tokens.shade.c300, }, // meta data for the theme itself global: { accentA: tokens.blue.c200, accentB: tokens.blue.c300, }, // light bar lightBar: { light: tokens.blue.c400, }, // Buttons buttons: { toggle: tokens.purple.c300, toggleDisabled: tokens.ash.c500, danger: tokens.semantic.rose.c300, dangerHover: tokens.semantic.rose.c200, secondary: tokens.ash.c700, secondaryText: tokens.semantic.silver.c300, secondaryHover: tokens.ash.c700, primary: tokens.white, primaryText: tokens.black, primaryHover: tokens.semantic.silver.c100, purple: tokens.purple.c500, purpleHover: tokens.purple.c400, cancel: tokens.ash.c500, cancelHover: tokens.ash.c300, }, // only used for body colors/textures background: { main: tokens.shade.c900, secondary: tokens.shade.c600, secondaryHover: tokens.shade.c400, accentA: tokens.purple.c500, accentB: tokens.blue.c500, }, // Modals modal: { background: tokens.shade.c800, }, // typography type: { logo: tokens.purple.c100, emphasis: tokens.white, text: tokens.shade.c50, dimmed: tokens.shade.c50, divider: tokens.ash.c500, secondary: tokens.ash.c100, danger: tokens.semantic.red.c100, success: tokens.semantic.green.c100, link: tokens.purple.c100, linkHover: tokens.purple.c50, }, // search bar search: { background: tokens.shade.c500, hoverBackground: tokens.shade.c600, focused: tokens.shade.c400, placeholder: tokens.shade.c100, icon: tokens.shade.c100, text: tokens.white, }, // media cards mediaCard: { hoverBackground: tokens.shade.c600, hoverAccent: tokens.shade.c25, hoverShadow: tokens.shade.c900, shadow: tokens.shade.c700, barColor: tokens.ash.c200, barFillColor: tokens.purple.c100, badge: tokens.shade.c700, badgeText: tokens.ash.c100, }, // Large card largeCard: { background: tokens.shade.c600, icon: tokens.purple.c400, }, // Dropdown dropdown: { background: tokens.shade.c600, altBackground: tokens.shade.c700, hoverBackground: tokens.shade.c500, highlight: tokens.semantic.yellow.c400, highlightHover: tokens.semantic.yellow.c200, text: tokens.shade.c50, secondary: tokens.shade.c100, border: tokens.shade.c400, contentBackground: tokens.shade.c500, }, // Passphrase 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, errorText: tokens.semantic.rose.c100, }, // Settings page 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, }, }, // Utilities utils: { divider: tokens.ash.c300, }, // Onboarding onboarding: { bar: tokens.shade.c400, barFilled: tokens.purple.c300, divider: tokens.shade.c200, card: tokens.shade.c800, cardHover: tokens.shade.c700, border: tokens.shade.c600, good: tokens.purple.c100, best: tokens.semantic.yellow.c100, link: tokens.purple.c100, }, // Error page errors: { card: tokens.shade.c800, border: tokens.ash.c500, type: { secondary: tokens.ash.c100, }, }, // About page about: { circle: tokens.ash.c500, circleText: tokens.ash.c50, }, // About page 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 player video: { buttonBackground: tokens.ash.c200, autoPlay: { background: tokens.ash.c700, hover: tokens.ash.c500, }, scraping: { card: tokens.shade.c700, error: tokens.semantic.red.c200, success: tokens.semantic.green.c200, 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, error: tokens.semantic.red.c200, buttons: { list: tokens.ash.c700, active: tokens.ash.c900, }, closeHover: tokens.ash.c800, type: { main: tokens.semantic.silver.c400, secondary: tokens.ash.c200, accent: tokens.purple.c200, }, }, }, }, }, };