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", "/*.js",
"/*.ts", "/*.ts",
"/plugins/*.ts", "/plugins/*.ts",
"/plugins/*.mjs",
"/themes/**/*.ts" "/themes/**/*.ts"
], ],
parser: "@typescript-eslint/parser", 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 */} {/* Close button */}
<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" type="button"
onClick={() => router.close()} onClick={() => router.close()}
> >

View File

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

View File

@ -1,19 +1,252 @@
import { createTheme } from "../types"; 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({ export default createTheme({
name: "blue", name: "blue",
extend: { extend: {
colors: { colors: {
themePreview: { themePreview: {
primary: "#3A4FAA", primary: tokens.blue.c200,
secondary: "#303487", secondary: tokens.shade.c50
ghost: "white",
}, },
// light bar pill: {
lightBar: { background: tokens.shade.c300,
light: "#3A4FAA", 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"; 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({ export default createTheme({
name: "gray", name: "gray",
extend: { extend: {
colors: { colors: {
themePreview: { themePreview: {
primary: "#343441", primary: tokens.blue.c200,
secondary: "#0C0C16", secondary: tokens.shade.c50
ghost: "white",
}, },
// light bar pill: {
lightBar: { background: tokens.shade.c300,
light: "#343441" 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"; 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({ export default createTheme({
name: "red", name: "red",
extend: { extend: {
colors: { colors: {
themePreview: { themePreview: {
primary: "#A8335E", primary: tokens.blue.c200,
secondary: "#6A2441", secondary: tokens.shade.c50
ghost: "white",
}, },
// light bar pill: {
lightBar: { background: tokens.shade.c300,
light: "#A8335E" 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"; 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({ export default createTheme({
name: "teal", name: "teal",
extend: { extend: {
colors: { colors: {
themePreview: { themePreview: {
primary: "#469c51", primary: tokens.blue.c200,
secondary: "#1a3d2b", secondary: tokens.shade.c50
ghost: "white",
}, },
// light bar pill: {
lightBar: { background: tokens.shade.c300,
light: "#469c51", 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
} }
} }
}) }
}
}
});