diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index 9d23168e..55517a26 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -549,7 +549,8 @@ "default": "Default", "gray": "Gray", "red": "Red", - "teal": "Teal" + "teal": "Teal", + "blck": "BLCK" }, "title": "Appearance" }, diff --git a/src/pages/parts/settings/ThemePart.tsx b/src/pages/parts/settings/ThemePart.tsx index b5600181..5a509482 100644 --- a/src/pages/parts/settings/ThemePart.tsx +++ b/src/pages/parts/settings/ThemePart.tsx @@ -30,6 +30,11 @@ const availableThemes = [ selector: "theme-gray", key: "settings.appearance.themes.gray", }, + { + id: "blck", + selector: "theme-blck", + key: "settings.appearance.themes.blck", + }, ]; function ThemePreview(props: { diff --git a/themes/all.ts b/themes/all.ts index f59aac81..715597af 100644 --- a/themes/all.ts +++ b/themes/all.ts @@ -2,10 +2,12 @@ import teal from "./list/teal"; import blue from "./list/blue"; import red from "./list/red"; import gray from "./list/gray"; +import blck from "./list/blck"; export const allThemes = [ teal, blue, gray, - red + red, + blck ] diff --git a/themes/list/blck.ts b/themes/list/blck.ts new file mode 100644 index 00000000..72a424da --- /dev/null +++ b/themes/list/blck.ts @@ -0,0 +1,277 @@ +import { createTheme } from "../types"; + +const tokens = { + white: "#FFFFFF", + black: { + c50: "#000000", + c75: "#030303", + c80: "#080808", + c100: "#0d0d0d", + c125: "#141414", + c150: "#1a1a1a", + c200: "#262626", + c250: "#333333" + }, + semantic: { + silver: { + c100: "#DEDEDE", + c200: "#B6CAD7", + c300: "#8EA3B0", + c400: "#617A8A", + }, + }, + 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: "blck", + extend: { + colors: { + themePreview: { + primary: tokens.black.c80, + secondary: tokens.black.c100 + }, + + pill: { + background: tokens.black.c100, + backgroundHover: tokens.black.c125, + highlight: tokens.blue.c200, + activeBackground: tokens.shade.c700, + }, + + global: { + accentA: tokens.blue.c200, + accentB: tokens.blue.c300 + }, + + lightBar: { + light: tokens.shade.c900, + }, + + buttons: { + toggle: tokens.purple.c300, + toggleDisabled: tokens.black.c200, + secondary: tokens.black.c100, + secondaryHover: tokens.black.c150, + purple: tokens.purple.c600, + purpleHover: tokens.purple.c400, + cancel: tokens.black.c100, + cancelHover: tokens.black.c150 + }, + + background: { + main: tokens.black.c75, + secondary: tokens.black.c75, + secondaryHover: tokens.black.c75, + accentA: tokens.black.c75, + accentB: tokens.black.c75 + }, + + 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.black.c100, + hoverBackground: tokens.shade.c900, + focused: tokens.black.c125, + placeholder: tokens.shade.c200, + icon: tokens.shade.c500 + }, + + mediaCard: { + hoverBackground: tokens.shade.c900, + hoverAccent: tokens.black.c250, + hoverShadow: tokens.black.c50, + shadow: tokens.shade.c800, + barColor: tokens.ash.c200, + barFillColor: tokens.purple.c100, + badge: tokens.shade.c700, + badgeText: tokens.ash.c100 + }, + + largeCard: { + background: tokens.black.c100, + icon: tokens.purple.c400 + }, + + dropdown: { + background: tokens.black.c100, + altBackground: tokens.black.c80, + hoverBackground: tokens.black.c150, + text: tokens.shade.c50, + secondary: tokens.shade.c100, + border: tokens.shade.c400, + contentBackground: tokens.black.c50 + }, + + authentication: { + border: tokens.shade.c300, + inputBg: tokens.black.c100, + inputBgHover: tokens.black.c150, + wordBackground: tokens.shade.c500, + copyText: tokens.shade.c100, + copyTextHover: tokens.ash.c50 + }, + + settings: { + sidebar: { + activeLink: tokens.black.c100, + badge: tokens.shade.c900, + + type: { + secondary: tokens.shade.c200, + inactive: tokens.shade.c50, + icon: tokens.black.c200, + iconActivated: tokens.purple.c200, + activated: tokens.purple.c100 + } + }, + + card: { + border: tokens.shade.c700, + background: tokens.black.c100, + altBackground: tokens.black.c100 + }, + + saveBar: { + background: tokens.black.c50 + } + }, + + utils: { + divider: tokens.ash.c300 + }, + + errors: { + card: tokens.black.c75, + border: tokens.ash.c500, + + type: { + secondary: tokens.ash.c100 + } + }, + + about: { + circle: tokens.black.c100, + 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.c600, + + autoPlay: { + background: tokens.ash.c800, + hover: tokens.ash.c600 + }, + + scraping: { + card: tokens.black.c50, + loading: tokens.purple.c200, + noresult: tokens.black.c200 + }, + + audio: { + set: tokens.purple.c200 + }, + + context: { + background: tokens.black.c50, + light: tokens.shade.c50, + border: tokens.ash.c600, + hoverColor: tokens.ash.c600, + buttonFocus: tokens.ash.c500, + flagBg: tokens.ash.c500, + inputBg: tokens.black.c100, + buttonOverInputHover: tokens.ash.c500, + inputPlaceholder: tokens.ash.c200, + cardBorder: tokens.ash.c700, + slider: tokens.black.c200, + 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, + main: tokens.semantic.silver.c300 + } + } + } + } + } +});