Merge pull request #516 from movie-web/v4-themes

V4 themes
This commit is contained in:
mrjvs 2023-12-09 17:49:18 +01:00 committed by GitHub
commit a34ae4c36b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 1257 additions and 180 deletions

View File

@ -22,6 +22,7 @@ module.exports = {
"/*.js",
"/*.ts",
"/plugins/*.ts",
"/plugins/*.mjs",
"/themes/**/*.ts"
],
parser: "@typescript-eslint/parser",

1
plugins/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
figmaTokens.json

View File

@ -0,0 +1,43 @@
/**
* This script turns output from the figma plugin "style to JSON" into a usuable theme.
* It expects a format of "themes/{NAME}/anythinghere"
*/
import fs from "fs";
const fileLocation = "./figmaTokens.json";
const theme = "blue";
const fileContents = fs.readFileSync(fileLocation, {
encoding: "utf-8"
});
const tokens = JSON.parse(fileContents);
const themeTokens = tokens.themes[theme];
const output = {};
function setKey(obj, key, defaultVal) {
const realKey = key.match(/^\d+$/g) ? "c" + key : key;
if (obj[key]) return obj[key];
obj[realKey] = defaultVal;
return obj[realKey];
}
function handleToken(token, path) {
if (typeof token.name === "string" && typeof token.description === "string") {
let ref = output;
const lastKey = path.pop();
path.forEach((v) => {
ref = setKey(ref, v, {});
});
setKey(ref, lastKey, token.hex);
return;
}
for (let key in token) {
handleToken(token[key], [...path, key]);
}
}
handleToken(themeTokens, []);
console.log(JSON.stringify(output, null, 2));

View File

@ -24,7 +24,7 @@ export function OverlayMobilePosition(props: MobilePositionProps) {
{/* Close button */}
<button
className="w-full text-video-context-type-main bg-video-context-background z-10 relative hover:bg-video-context-border active:scale-95 rounded-2xl pointer-events-auto transition-all duration-100 flex justify-center items-center py-3 mt-3 font-bold border border-video-context-border hover:text-white"
className="w-full text-video-context-type-main bg-video-context-background z-10 relative hover:bg-video-context-closeHover active:scale-95 rounded-2xl pointer-events-auto transition-all duration-100 flex justify-center items-center py-3 mt-3 font-bold border border-video-context-border hover:text-white"
type="button"
onClick={() => router.close()}
>

View File

@ -28,7 +28,7 @@ import { BookmarkSyncer } from "@/stores/bookmarks/BookmarkSyncer";
import { useLanguageStore } from "@/stores/language";
import { ProgressSyncer } from "@/stores/progress/ProgressSyncer";
import { SettingsSyncer } from "@/stores/subtitles/SettingsSyncer";
import { useThemeStore } from "@/stores/theme";
import { ThemeProvider } from "@/stores/theme";
import { initializeChromecast } from "./setup/chromecast";
import { initializeOldStores } from "./stores/__old/migrations";
@ -124,19 +124,12 @@ function TheRouter(props: { children: ReactNode }) {
return <HashRouter>{props.children}</HashRouter>;
}
function ThemeProvider(props: { children: ReactNode }) {
const theme = useThemeStore((s) => s.theme);
const themeSelector = theme ? `theme-${theme}` : undefined;
return <div className={themeSelector}>{props.children}</div>;
}
ReactDOM.render(
<React.StrictMode>
<ErrorBoundary>
<HelmetProvider>
<Suspense fallback={<LoadingScreen type="lazy" />}>
<ThemeProvider>
<ThemeProvider applyGlobal>
<ProgressSyncer />
<BookmarkSyncer />
<SettingsSyncer />

View File

@ -1,24 +0,0 @@
import { create } from "zustand";
import { persist } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
export interface ThemeStore {
theme: string | null;
setTheme(v: string | null): void;
}
export const useThemeStore = create(
persist(
immer<ThemeStore>((set) => ({
theme: null,
setTheme(v) {
set((s) => {
s.theme = v;
});
},
})),
{
name: "__MW::theme",
}
)
);

View File

@ -0,0 +1,45 @@
import { ReactNode } from "react";
import { Helmet } from "react-helmet-async";
import { create } from "zustand";
import { persist } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
export interface ThemeStore {
theme: string | null;
setTheme(v: string | null): void;
}
export const useThemeStore = create(
persist(
immer<ThemeStore>((set) => ({
theme: null,
setTheme(v) {
set((s) => {
s.theme = v;
});
},
})),
{
name: "__MW::theme",
}
)
);
export function ThemeProvider(props: {
children?: ReactNode;
applyGlobal?: boolean;
}) {
const theme = useThemeStore((s) => s.theme);
const themeSelector = theme ? `theme-${theme}` : undefined;
return (
<div className={themeSelector}>
{props.applyGlobal ? (
<Helmet>
<body className={themeSelector} />
</Helmet>
) : null}
{props.children}
</div>
);
}

View File

@ -1,227 +1,313 @@
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: {
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: "#505DBD",
secondary: "#73739D",
ghost: "white",
primary: tokens.blue.c200,
secondary: tokens.shade.c50,
ghost: tokens.white,
},
// Branding
pill: {
background: "#2e2e4d",
backgroundHover: "#3d3d61",
highlight: "#714C97",
background: tokens.shade.c300,
backgroundHover: tokens.shade.c200,
highlight: tokens.blue.c200,
},
// meta data for the theme itself
global: {
accentA: "#505DBD",
accentB: "#3440A1",
accentA: tokens.blue.c200,
accentB: tokens.blue.c300,
},
// light bar
lightBar: {
light: "#2A2A71",
light: tokens.blue.c400,
},
// Buttons
buttons: {
toggle: "#8D44D6",
toggleDisabled: "#202836",
danger: "#792131",
dangerHover: "#8a293b",
toggle: tokens.purple.c300,
toggleDisabled: tokens.ash.c500,
danger: tokens.semantic.rose.c300,
dangerHover: tokens.semantic.rose.c200,
secondary: "#161F25",
secondaryText: "#8EA3B0",
secondaryHover: "#1B262E",
primary: "#fff",
primaryText: "#000",
primaryHover: "#dedede",
purple: "#6b298a",
purpleHover: "#7f35a1",
cancel: "#252533",
cancelHover: "#3C3C4A",
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: "#0A0A10",
secondary: "#151529",
secondaryHover: "#252542",
accentA: "#6E3B80",
accentB: "#1F1F50",
main: tokens.shade.c900,
secondary: tokens.shade.c600,
secondaryHover: tokens.shade.c400,
accentA: tokens.purple.c500,
accentB: tokens.blue.c500,
},
// typography
type: {
logo: "#A87FD1",
emphasis: "#FFFFFF",
text: "#73739D",
dimmed: "#926CAD",
divider: "#262632",
secondary: "#64647B",
danger: "#F46E6E",
link: "#A87FD1",
linkHover: "#ba8fe6",
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,
link: tokens.purple.c100,
linkHover: tokens.purple.c50,
},
// search bar
search: {
background: "#1E1E33",
focused: "#24243C",
placeholder: "#4A4A71",
icon: "#545476",
text: "#FFFFFF",
background: tokens.shade.c500,
focused: tokens.shade.c400,
placeholder: tokens.shade.c100,
icon: tokens.shade.c100,
text: tokens.white,
},
// media cards
mediaCard: {
hoverBackground: "#161622",
hoverAccent: "#4D79A8",
hoverShadow: "#0A0A10",
shadow: "#161622",
barColor: "#4B4B63",
barFillColor: "#BA7FD6",
badge: "#151522",
badgeText: "#5F5F7A",
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,
},
// Large card
largeCard: {
background: "#171728",
icon: "#6741A5",
background: tokens.shade.c600,
icon: tokens.purple.c400,
},
// Dropdown
dropdown: {
background: "#171728",
altBackground: "#151525",
hoverBackground: "#202036",
highlight: "#afa349",
highlightHover: "#FCEC61",
text: "#846D95",
secondary: "#73739D",
border: "#272742",
contentBackground: "#232337",
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: "#393954",
inputBg: "#171728",
inputBgHover: "#171726",
wordBackground: "#171728",
copyText: "#58587A",
copyTextHover: "#8888AA",
errorText: "#DB3D62",
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: "#171728",
badge: "#0A0A12",
activeLink: tokens.shade.c600,
badge: tokens.shade.c900,
type: {
secondary: "#4B395F",
inactive: "#8D68A9",
icon: "#926CAD",
iconActivated: "#6942A8",
activated: "#CBA1E8",
secondary: tokens.shade.c200,
inactive: tokens.shade.c50,
icon: tokens.shade.c50,
iconActivated: tokens.purple.c200,
activated: tokens.purple.c50,
},
},
card: {
border: "#2A243E",
background: "#29243D",
altBackground: "#29243D",
border: tokens.shade.c400,
background: tokens.shade.c400,
altBackground: tokens.shade.c400,
},
saveBar: {
background: "#0F0E17"
background: tokens.shade.c800
}
},
utils: {
divider: "#353549",
divider: tokens.ash.c300,
},
// Error page
errors: {
card: "#12121B",
border: "#252534",
card: tokens.shade.c800,
border: tokens.ash.c500,
type: {
secondary: "#62627D",
secondary: tokens.ash.c100,
},
},
// About page
about: {
circle: "#262632",
circleText: "#9A9AC3",
circle: tokens.ash.c500,
circleText: tokens.ash.c50,
},
// About page
editBadge: {
bg: "#262632",
bgHover: "#343443",
text: "#9A9AC3",
bg: tokens.ash.c500,
bgHover: tokens.ash.c400,
text: tokens.ash.c50,
},
progress: {
background: "#8787A8",
preloaded: "#8787A8",
filled: "#A75FC9",
background: tokens.ash.c50,
preloaded: tokens.ash.c50,
filled: tokens.purple.c200,
},
// video player
video: {
buttonBackground: "#444B5C",
buttonBackground: tokens.ash.c200,
autoPlay: {
background: "#161C26",
hover: "#252533"
background: tokens.ash.c700,
hover: tokens.ash.c500
},
scraping: {
card: "#161620",
error: "#E44F4F",
success: "#40B44B",
loading: "#B759D8",
noresult: "#64647B",
card: tokens.shade.c700,
error: tokens.semantic.red.c200,
success: tokens.semantic.green.c200,
loading: tokens.purple.c200,
noresult: tokens.ash.c100,
},
audio: {
set: "#A75FC9",
set: tokens.purple.c200,
},
context: {
background: "#0C1216",
light: "#4D79A8",
border: "#1d252b",
hoverColor: "#1E2A32",
buttonFocus: "#202836",
flagBg: "#202836",
inputBg: "#202836",
buttonOverInputHover: "#283040",
inputPlaceholder: "#374A56",
cardBorder: "#1B262E",
slider: "#8787A8",
sliderFilled: "#A75FC9",
error: "#E44F4F",
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: "#161C26",
active: "#0D1317",
list: tokens.ash.c700,
active: tokens.ash.c900,
},
closeHover: tokens.ash.c800,
type: {
main: "#617A8A",
secondary: "#374A56",
accent: "#A570FA",
main: tokens.semantic.silver.c400,
secondary: tokens.ash.c200,
accent: tokens.purple.c200,
},
},
},

View File

@ -1,19 +1,252 @@
import { createTheme } from "../types";
const tokens = {
purple: {
c50: "#aac5ff",
c100: "#82a9ff",
c200: "#5988ec",
c300: "#4472d6",
c400: "#315ebf",
c500: "#284687",
c600: "#1f3564",
c700: "#18284a",
c800: "#111c34",
c900: "#0b1322"
},
shade: {
c50: "#756790",
c100: "#60527a",
c200: "#4a3f60",
c300: "#3c324f",
c400: "#302741",
c500: "#251e32",
c600: "#1d1728",
c700: "#181322",
c800: "#130f1b",
c900: "#0d0a12"
},
ash: {
c50: "#7f859b",
c100: "#5b627b",
c200: "#444b64",
c300: "#2b344e",
c400: "#202842",
c500: "#1c243c",
c600: "#171d32",
c700: "#131829",
c800: "#101420",
c900: "#0c0f16"
},
blue: {
c50: "#adb4f5",
c100: "#7981cc",
c200: "#5d65ae",
c300: "#3b438c",
c400: "#2a3171",
c500: "#1f2450",
c600: "#1b1f41",
c700: "#171b36",
c800: "#101120",
c900: "#0b0c13"
}
};
export default createTheme({
name: "blue",
extend: {
colors: {
themePreview: {
primary: "#3A4FAA",
secondary: "#303487",
ghost: "white",
primary: tokens.blue.c200,
secondary: tokens.shade.c50
},
// light bar
lightBar: {
light: "#3A4FAA",
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
},
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
}
}
}
}
}
})
});

View File

@ -1,19 +1,252 @@
import { createTheme } from "../types";
const tokens = {
purple: {
c50: "#d5b8f1",
c100: "#c096ea",
c200: "#a378cd",
c300: "#8d69b0",
c400: "#785998",
c500: "#57456a",
c600: "#41344e",
c700: "#31283a",
c800: "#221c29",
c900: "#16121b"
},
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: "#bfbfe4",
c100: "#9d9da8",
c200: "#868686",
c300: "#626265",
c400: "#484853",
c500: "#35353a",
c600: "#2d2d2f",
c700: "#272727",
c800: "#181818",
c900: "#0f0f0f"
}
};
export default createTheme({
name: "gray",
extend: {
colors: {
themePreview: {
primary: "#343441",
secondary: "#0C0C16",
ghost: "white",
primary: tokens.blue.c200,
secondary: tokens.shade.c50
},
// light bar
lightBar: {
light: "#343441"
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
},
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
}
}
}
}
}
})
});

View File

@ -1,19 +1,252 @@
import { createTheme } from "../types";
const tokens = {
purple: {
c50: "#aaffd5",
c100: "#82ffc0",
c200: "#59eca3",
c300: "#44d68d",
c400: "#31bf78",
c500: "#288757",
c600: "#1f6441",
c700: "#184a31",
c800: "#113422",
c900: "#0b2216"
},
shade: {
c50: "#906771",
c100: "#7a525c",
c200: "#603f47",
c300: "#4f3239",
c400: "#41272d",
c500: "#321e23",
c600: "#28171b",
c700: "#221317",
c800: "#1b0f12",
c900: "#120a0c"
},
ash: {
c50: "#9b7f94",
c100: "#7b5b73",
c200: "#64445c",
c300: "#4e2b46",
c400: "#42203a",
c500: "#3c1c34",
c600: "#32172b",
c700: "#291324",
c800: "#20101c",
c900: "#160c15"
},
blue: {
c50: "#f5adb4",
c100: "#cc7981",
c200: "#ae5d65",
c300: "#8c3b43",
c400: "#712a31",
c500: "#501f24",
c600: "#411b1f",
c700: "#36171b",
c800: "#201011",
c900: "#130b0c"
}
};
export default createTheme({
name: "red",
extend: {
colors: {
themePreview: {
primary: "#A8335E",
secondary: "#6A2441",
ghost: "white",
primary: tokens.blue.c200,
secondary: tokens.shade.c50
},
// light bar
lightBar: {
light: "#A8335E"
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
},
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
}
}
}
}
}
})
});

View File

@ -1,19 +1,252 @@
import { createTheme } from "../types";
const tokens = {
purple: {
c50: "#aad7ff",
c100: "#82c4ff",
c200: "#59a8ec",
c300: "#4491d6",
c400: "#317dbf",
c500: "#285b87",
c600: "#1f4464",
c700: "#18334a",
c800: "#112434",
c900: "#0b1822"
},
shade: {
c50: "#677c90",
c100: "#52667a",
c200: "#3f4f60",
c300: "#32404f",
c400: "#273441",
c500: "#1e2832",
c600: "#172028",
c700: "#131a22",
c800: "#0f151b",
c900: "#0a0e12"
},
ash: {
c50: "#7f9b9b",
c100: "#5b7b7b",
c200: "#446463",
c300: "#2b4e4d",
c400: "#204241",
c500: "#1c3c3b",
c600: "#173232",
c700: "#132929",
c800: "#102020",
c900: "#0c1615"
},
blue: {
c50: "#adf5d6",
c100: "#79cca8",
c200: "#5dae8b",
c300: "#3b8c69",
c400: "#2a7152",
c500: "#1f503b",
c600: "#1b4130",
c700: "#173629",
c800: "#102019",
c900: "#0b1310"
}
};
export default createTheme({
name: "teal",
extend: {
colors: {
themePreview: {
primary: "#469c51",
secondary: "#1a3d2b",
ghost: "white",
primary: tokens.blue.c200,
secondary: tokens.shade.c50
},
// light bar
lightBar: {
light: "#469c51",
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
},
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
}
}
}
}
}
})
});