diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index f4bb94a6..13fb4169 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -951,7 +951,8 @@ "wolverine": "Wolverine", "popsicle": "Popsicle", "hulk": "Hulk", - "autumn": "Autumn" + "autumn": "Autumn", + "skyrealm": "SkyRealm" }, "title": "Appearance", "options": { diff --git a/src/pages/parts/settings/AppearancePart.tsx b/src/pages/parts/settings/AppearancePart.tsx index aa2a9202..86e45a5d 100644 --- a/src/pages/parts/settings/AppearancePart.tsx +++ b/src/pages/parts/settings/AppearancePart.tsx @@ -108,6 +108,11 @@ const availableThemes = [ selector: "theme-popsicle", key: "settings.appearance.themes.popsicle", }, + { + id: "skyRealm", + selector: "theme-skyrealm", + key: "settings.appearance.themes.skyrealm", + }, ]; function ThemePreview(props: { diff --git a/themes/all.ts b/themes/all.ts index 07d20ada..7464f7ed 100644 --- a/themes/all.ts +++ b/themes/all.ts @@ -17,6 +17,7 @@ import wolverine from "./list/wolverine"; import popsicle from "./list/popsicle"; import hulk from "./list/hulk"; import autumn from "./list/autumn"; +import skyRealm from "./list/skyrealm"; export const allThemes = [ teal, @@ -38,4 +39,5 @@ export const allThemes = [ hulk, wolverine, popsicle, -] + skyRealm, +]; diff --git a/themes/list/skyrealm.ts b/themes/list/skyrealm.ts new file mode 100644 index 00000000..b16f2c91 --- /dev/null +++ b/themes/list/skyrealm.ts @@ -0,0 +1,248 @@ +import { createTheme } from "../types"; + +const tokens = { + petal: { + c50: "#fff0f5", + c100: "#ffdde9", + c200: "#ffbbd1", + c300: "#ff99bb", + c400: "#ff77a5", + c500: "#e65f8f", + c600: "#cc4779", + c700: "#b33263", + c800: "#991e4d", + c900: "#800f3a", + }, + dawn: { + c25: "#f0e9f5", + c50: "#e6d9f0", + c100: "#d7c2e8", + c200: "#c2a6dd", + c300: "#ad8ad2", + c400: "#9970c7", + c500: "#8558b5", + c600: "#6b4599", + c700: "#52337d", + c800: "#3a2361", + c900: "#261547", + }, + silk: { + c50: "#fdfdfd", + c100: "#faf8f9", + c200: "#f5f0f3", + c300: "#ede5ec", + c400: "#e6dae5", + c500: "#dfd0de", + c600: "#d0b8d0", + c700: "#c29fc2", + c800: "#b386b3", + c900: "#a66ea6", + }, + nectar: { + c50: "#fff9e6", + c100: "#fff3cc", + c200: "#ffe899", + c300: "#ffdd66", + c400: "#ffd233", + c500: "#e6b800", + c600: "#cca000", + c700: "#b38900", + c800: "#997100", + c900: "#805a00", + }, +}; + +export default createTheme({ + name: "skyRealm", + extend: { + colors: { + themePreview: { + primary: tokens.petal.c200, + secondary: tokens.dawn.c50, + }, + + pill: { + background: tokens.dawn.c300, + backgroundHover: tokens.dawn.c200, + highlight: tokens.petal.c200, + activeBackground: tokens.dawn.c300, + }, + + global: { + accentA: tokens.petal.c200, + accentB: tokens.petal.c300, + }, + + lightBar: { + light: tokens.petal.c400, + }, + + buttons: { + toggle: tokens.nectar.c300, + toggleDisabled: tokens.silk.c500, + + secondary: tokens.silk.c700, + secondaryHover: tokens.silk.c600, + purple: tokens.dawn.c500, + purpleHover: tokens.dawn.c400, + cancel: tokens.silk.c500, + cancelHover: tokens.silk.c300, + }, + + background: { + main: tokens.dawn.c900, + secondary: tokens.dawn.c600, + secondaryHover: tokens.dawn.c400, + accentA: tokens.nectar.c500, + accentB: tokens.petal.c500, + }, + + modal: { + background: tokens.dawn.c800, + }, + + type: { + logo: tokens.nectar.c100, + text: tokens.silk.c50, + dimmed: tokens.silk.c50, + divider: tokens.silk.c500, + secondary: tokens.silk.c100, + link: tokens.petal.c100, + linkHover: tokens.petal.c50, + }, + + search: { + background: tokens.dawn.c500, + hoverBackground: tokens.dawn.c600, + focused: tokens.dawn.c400, + placeholder: tokens.dawn.c100, + icon: tokens.dawn.c100, + }, + + mediaCard: { + hoverBackground: tokens.dawn.c600, + hoverAccent: tokens.dawn.c25, + hoverShadow: tokens.dawn.c900, + shadow: tokens.dawn.c700, + barColor: tokens.silk.c200, + barFillColor: tokens.petal.c100, + badge: tokens.dawn.c700, + badgeText: tokens.silk.c100, + }, + + largeCard: { + background: tokens.dawn.c600, + icon: tokens.petal.c400, + }, + + dropdown: { + background: tokens.dawn.c600, + altBackground: tokens.dawn.c700, + hoverBackground: tokens.dawn.c500, + text: tokens.silk.c50, + secondary: tokens.dawn.c100, + border: tokens.dawn.c400, + contentBackground: tokens.dawn.c500, + }, + + authentication: { + border: tokens.dawn.c300, + inputBg: tokens.dawn.c600, + inputBgHover: tokens.dawn.c500, + wordBackground: tokens.dawn.c500, + copyText: tokens.dawn.c100, + copyTextHover: tokens.silk.c50, + }, + + settings: { + sidebar: { + activeLink: tokens.dawn.c600, + badge: tokens.dawn.c900, + type: { + secondary: tokens.dawn.c200, + inactive: tokens.dawn.c50, + icon: tokens.dawn.c50, + iconActivated: tokens.petal.c200, + activated: tokens.petal.c50, + }, + }, + card: { + border: tokens.dawn.c400, + background: tokens.dawn.c400, + altBackground: tokens.dawn.c400, + }, + saveBar: { + background: tokens.dawn.c800, + }, + }, + + utils: { + divider: tokens.silk.c300, + }, + + errors: { + card: tokens.dawn.c800, + border: tokens.silk.c500, + type: { + secondary: tokens.silk.c100, + }, + }, + + about: { + circle: tokens.silk.c500, + circleText: tokens.silk.c50, + }, + + editBadge: { + bg: tokens.silk.c500, + bgHover: tokens.silk.c400, + text: tokens.silk.c50, + }, + + progress: { + background: tokens.silk.c50, + preloaded: tokens.silk.c50, + filled: tokens.petal.c200, + }, + + video: { + buttonBackground: tokens.silk.c200, + autoPlay: { + background: tokens.silk.c700, + hover: tokens.silk.c500, + }, + scraping: { + card: tokens.dawn.c700, + loading: tokens.petal.c200, + noresult: tokens.silk.c100, + }, + audio: { + set: tokens.petal.c200, + }, + context: { + background: tokens.silk.c900, + light: tokens.dawn.c50, + border: tokens.silk.c600, + hoverColor: tokens.silk.c600, + buttonFocus: tokens.silk.c500, + flagBg: tokens.silk.c500, + inputBg: tokens.silk.c600, + buttonOverInputHover: tokens.silk.c500, + inputPlaceholder: tokens.silk.c200, + cardBorder: tokens.silk.c700, + slider: tokens.silk.c50, + sliderFilled: tokens.petal.c200, + buttons: { + list: tokens.silk.c700, + active: tokens.silk.c900, + }, + closeHover: tokens.silk.c800, + type: { + secondary: tokens.silk.c200, + accent: tokens.petal.c200, + }, + }, + }, + }, + }, +});