mirror of
https://github.com/p-stream/p-stream.git
synced 2026-01-11 20:10:32 +00:00
add a bunch of themes
This commit is contained in:
Pas
parent
e1cf13cf3d
commit
d512bf1cae
15 changed files with 3380 additions and 73 deletions
|
|
@ -697,7 +697,16 @@
|
|||
"green": "Green",
|
||||
"mocha": "Mocha",
|
||||
"pink": "Pink",
|
||||
"ember": "Ember"
|
||||
"noir": "Noir",
|
||||
"ember": "Ember",
|
||||
"acid": "Acid",
|
||||
"spark": "Spark",
|
||||
"grape": "Grape",
|
||||
"spiderman": "Spiderman",
|
||||
"forest": "Forest",
|
||||
"wolverine": "Wolverine",
|
||||
"popsicle": "Popsicle",
|
||||
"hulk": "Hulk"
|
||||
},
|
||||
"title": "Appearance",
|
||||
"options": {
|
||||
|
|
|
|||
|
|
@ -42,6 +42,11 @@ const availableThemes = [
|
|||
selector: "theme-green",
|
||||
key: "settings.appearance.themes.green",
|
||||
},
|
||||
{
|
||||
id: "forest",
|
||||
selector: "theme-forest",
|
||||
key: "settings.appearance.themes.forest",
|
||||
},
|
||||
{
|
||||
id: "mocha",
|
||||
selector: "theme-mocha",
|
||||
|
|
@ -52,11 +57,51 @@ const availableThemes = [
|
|||
selector: "theme-pink",
|
||||
key: "settings.appearance.themes.pink",
|
||||
},
|
||||
{
|
||||
id: "noir",
|
||||
selector: "theme-noir",
|
||||
key: "settings.appearance.themes.noir",
|
||||
},
|
||||
{
|
||||
id: "ember",
|
||||
selector: "theme-ember",
|
||||
key: "settings.appearance.themes.ember",
|
||||
},
|
||||
{
|
||||
id: "acid",
|
||||
selector: "theme-acid",
|
||||
key: "settings.appearance.themes.acid",
|
||||
},
|
||||
{
|
||||
id: "spark",
|
||||
selector: "theme-spark",
|
||||
key: "settings.appearance.themes.spark",
|
||||
},
|
||||
{
|
||||
id: "grape",
|
||||
selector: "theme-grape",
|
||||
key: "settings.appearance.themes.grape",
|
||||
},
|
||||
{
|
||||
id: "spiderman",
|
||||
selector: "theme-spiderman",
|
||||
key: "settings.appearance.themes.spiderman",
|
||||
},
|
||||
{
|
||||
id: "wolverine",
|
||||
selector: "theme-wolverine",
|
||||
key: "settings.appearance.themes.wolverine",
|
||||
},
|
||||
{
|
||||
id: "hulk",
|
||||
selector: "theme-hulk",
|
||||
key: "settings.appearance.themes.hulk",
|
||||
},
|
||||
{
|
||||
id: "popsicle",
|
||||
selector: "theme-popsicle",
|
||||
key: "settings.appearance.themes.popsicle",
|
||||
},
|
||||
];
|
||||
|
||||
function ThemePreview(props: {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,15 @@ import green from "./list/green";
|
|||
import mocha from "./list/mocha";
|
||||
import pink from "./list/pink";
|
||||
import ember from "./list/ember";
|
||||
import noir from "./list/noir";
|
||||
import acid from "./list/acid";
|
||||
import spark from "./list/spark";
|
||||
import grape from "./list/grape";
|
||||
import spiderman from "./list/spiderman";
|
||||
import forest from "./list/forest";
|
||||
import wolverine from "./list/wolverine";
|
||||
import popsicle from "./list/popsicle";
|
||||
import hulk from "./list/hulk";
|
||||
|
||||
export const allThemes = [
|
||||
teal,
|
||||
|
|
@ -15,7 +24,16 @@ export const allThemes = [
|
|||
red,
|
||||
classic,
|
||||
green,
|
||||
forest,
|
||||
mocha,
|
||||
pink,
|
||||
ember
|
||||
grape,
|
||||
noir,
|
||||
ember,
|
||||
acid,
|
||||
spark,
|
||||
spiderman,
|
||||
hulk,
|
||||
wolverine,
|
||||
popsicle,
|
||||
]
|
||||
|
|
|
|||
343
themes/list/.classicold.ts
Normal file
343
themes/list/.classicold.ts
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
import { createTheme } from "../types";
|
||||
|
||||
const tokens = {
|
||||
black: "#000000", // General black color
|
||||
white: "#FFFFFF", // General white color
|
||||
semantic: {
|
||||
red: {
|
||||
c100: "#F46E6E", // Error text
|
||||
c200: "#E44F4F", // Video player scraping error
|
||||
c300: "#D74747", // Danger button
|
||||
c400: "#B43434", // Not currently used
|
||||
},
|
||||
green: {
|
||||
c100: "#60D26A", // Success text
|
||||
c200: "#40B44B", // Video player scraping success
|
||||
c300: "#31A33C", // Not currently used
|
||||
c400: "#237A2B", // Not currently used
|
||||
},
|
||||
silver: {
|
||||
c100: "#DEDEDE", // Primary button hover
|
||||
c200: "#B6CAD7", // Not currently used
|
||||
c300: "#8EA3B0", // Secondary button text
|
||||
c400: "#617A8A", // Main text in video player context
|
||||
},
|
||||
yellow: {
|
||||
c100: "#FFF599", // Best onboarding highlight
|
||||
c200: "#FCEC61", // Dropdown highlight hover
|
||||
c300: "#D8C947", // Not currently used
|
||||
c400: "#AFA349", // Dropdown highlight
|
||||
},
|
||||
rose: {
|
||||
c100: "#DB3D61", // Authentication error text
|
||||
c200: "#8A293B", // Danger button hover
|
||||
c300: "#812435", // Danger button
|
||||
c400: "#701B2B", // Not currently used
|
||||
},
|
||||
},
|
||||
blue: {
|
||||
c50: "#ADADF5", // Not currently used
|
||||
c100: "#7979CC", // Not currently used
|
||||
c200: "#5D5DAE", // Theme primary color, pill highlight, global accent A
|
||||
c300: "#3B3B8C", // Global accent B
|
||||
c400: "#2A2A71", // Light bar color
|
||||
c500: "#1F1F50", // Background accent B
|
||||
c600: "#1B1B41", // Not currently used
|
||||
c700: "#171736", // Not currently used
|
||||
c800: "#101020", // Not currently used
|
||||
c900: "#0B0B13", // Not currently used
|
||||
},
|
||||
purple: {
|
||||
c50: "#D5AAFF", // Link hover, settings tabs titles/text
|
||||
c100: "#C082FF", // Link, logo text, video player audio set
|
||||
c200: "#A359EC", // Progress filled, video player scraping loading, video player context accent
|
||||
c300: "#8D44D6", // Toggle button, onboarding bar filled
|
||||
c400: "#7831BF", // Large card icon
|
||||
c500: "#572887", // Background accent A
|
||||
c600: "#411F64", // Not currently used
|
||||
c700: "#31184A", // Not currently used
|
||||
c800: "#221134", // Not currently used
|
||||
c900: "#160B22", // Not currently used
|
||||
},
|
||||
ash: {
|
||||
c50: "#7F8D9B", // Authentication copy text hover, progress background, progress preloaded
|
||||
c100: "#5B6B7B", // Secondary text, badge text, video player scraping no result
|
||||
c200: "#445464", // Media card bar color, video player button background
|
||||
c300: "#2B3D4E", // Cancel button hover, utils divider
|
||||
c400: "#203242", // Card border and background, dropdown border, onboarding bar, edit badge hover, sidebar type
|
||||
c500: "#1C2C3C", // Toggle disabled, cancel button, modal background, search hover background, media card shadow, settings save bar, errors card, about circle, edit badge background, video player button focus, video player flag background, video player input background, video player button over input hover
|
||||
c600: "#172532", // Background secondary, dropdown alt background, dropdown border, onboarding card border
|
||||
c700: "#131E29", // Secondary button, media card badge, onboarding card hover, video player context card border, video player context buttons list, video player close hover
|
||||
c800: "#101820", // Background main, settings sidebar badge, errors border
|
||||
c900: "#0C1216", // Media card hover shadow, settings sidebar active link, video player context background
|
||||
},
|
||||
shade: {
|
||||
c25: "#5d5db3", // Media card hover accent
|
||||
c50: "#676790", // Theme secondary color, text, dimmed text
|
||||
c100: "#52527A", // Search placeholder and icon, dropdown secondary text
|
||||
c200: "#3F3F60", // Pill background hover, onboarding divider
|
||||
c300: "#32324F", // Pill background, authentication border, onboarding card
|
||||
c400: "#272741", // Background secondary hover, dropdown border, onboarding bar, onboarding divider
|
||||
c500: "#1E1E32", // Search background, search focus, dropdown hover background, dropdown content background, authentication input background hover, authentication word background
|
||||
c600: "#171728", // Modal background, dropdown background, onboarding card border
|
||||
c700: "#131322", // Dropdown alt background
|
||||
c800: "#0F0F1B", // Background main, settings save bar, onboarding card
|
||||
c900: "#0A0A12", // Media card hover shadow
|
||||
},
|
||||
}
|
||||
|
||||
export default createTheme({
|
||||
name: "classic",
|
||||
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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
278
themes/list/acid.ts
Normal file
278
themes/list/acid.ts
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
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: "#1f6e1f",
|
||||
c100: "#1f8f1f",
|
||||
c200: "#1fa11f",
|
||||
c300: "#1fb31f",
|
||||
c400: "#1fc41f",
|
||||
c500: "#1fd61f",
|
||||
c600: "#1aa31a",
|
||||
c700: "#157f15",
|
||||
c800: "#106010",
|
||||
c900: "#0b3f0b",
|
||||
c1000: "#021902FF",
|
||||
},
|
||||
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: "acid",
|
||||
extend: {
|
||||
colors: {
|
||||
themePreview: {
|
||||
primary: tokens.black.c80,
|
||||
secondary: tokens.purple.c50,
|
||||
},
|
||||
|
||||
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.purple.c1000,
|
||||
},
|
||||
|
||||
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.purple.c600,
|
||||
accentB: tokens.black.c100
|
||||
},
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1,88 +1,88 @@
|
|||
import { createTheme } from "../types";
|
||||
|
||||
const tokens = {
|
||||
black: "#000000", // General black color
|
||||
white: "#FFFFFF", // General white color
|
||||
black: "hsla(0, 0%, 0%, 1)", // General black color
|
||||
white: "hsla(0, 0%, 100%, 1)", // General white color
|
||||
semantic: {
|
||||
red: {
|
||||
c100: "#F46E6E", // Error text
|
||||
c200: "#E44F4F", // Video player scraping error
|
||||
c300: "#D74747", // Danger button
|
||||
c400: "#B43434", // Not currently used
|
||||
c100: "hsla(0, 86%, 69%, 1)", // Error text
|
||||
c200: "hsla(0, 73%, 60%, 1)", // Video player scraping error
|
||||
c300: "hsla(0, 66%, 56%, 1)", // Danger button
|
||||
c400: "hsla(0, 55%, 45%, 1)", // Not currently used
|
||||
},
|
||||
green: {
|
||||
c100: "#60D26A", // Success text
|
||||
c200: "#40B44B", // Video player scraping success
|
||||
c300: "#31A33C", // Not currently used
|
||||
c400: "#237A2B", // Not currently used
|
||||
c100: "hsla(125, 60%, 60%, 1)", // Success text
|
||||
c200: "hsla(125, 49%, 48%, 1)", // Video player scraping success
|
||||
c300: "hsla(125, 54%, 42%, 1)", // Not currently used
|
||||
c400: "hsla(125, 54%, 31%, 1)", // Not currently used
|
||||
},
|
||||
silver: {
|
||||
c100: "#DEDEDE", // Primary button hover
|
||||
c200: "#B6CAD7", // Not currently used
|
||||
c300: "#8EA3B0", // Secondary button text
|
||||
c400: "#617A8A", // Main text in video player context
|
||||
c100: "hsla(0, 0%, 87%, 1)", // Primary button hover
|
||||
c200: "hsla(206, 33%, 78%, 1)", // Not currently used
|
||||
c300: "hsla(206, 19%, 62%, 1)", // Secondary button text
|
||||
c400: "hsla(206, 18%, 46%, 1)", // Main text in video player context
|
||||
},
|
||||
yellow: {
|
||||
c100: "#FFF599", // Best onboarding highlight
|
||||
c200: "#FCEC61", // Dropdown highlight hover
|
||||
c300: "#D8C947", // Not currently used
|
||||
c400: "#AFA349", // Dropdown highlight
|
||||
c100: "hsla(56, 100%, 80%, 1)", // Best onboarding highlight
|
||||
c200: "hsla(56, 96%, 68%, 1)", // Dropdown highlight hover
|
||||
c300: "hsla(56, 55%, 56%, 1)", // Not currently used
|
||||
c400: "hsla(56, 38%, 48%, 1)", // Dropdown highlight
|
||||
},
|
||||
rose: {
|
||||
c100: "#DB3D61", // Authentication error text
|
||||
c200: "#8A293B", // Danger button hover
|
||||
c300: "#812435", // Danger button
|
||||
c400: "#701B2B", // Not currently used
|
||||
c100: "hsla(348, 68%, 55%, 1)", // Authentication error text
|
||||
c200: "hsla(348, 55%, 35%, 1)", // Danger button hover
|
||||
c300: "hsla(348, 57%, 32%, 1)", // Danger button
|
||||
c400: "hsla(348, 60%, 27%, 1)", // Not currently used
|
||||
},
|
||||
},
|
||||
blue: {
|
||||
c50: "#ADADF5", // Not currently used
|
||||
c100: "#7979CC", // Not currently used
|
||||
c200: "#5D5DAE", // Theme primary color, pill highlight, global accent A
|
||||
c300: "#3B3B8C", // Global accent B
|
||||
c400: "#2A2A71", // Light bar color
|
||||
c500: "#1F1F50", // Background accent B
|
||||
c600: "#1B1B41", // Not currently used
|
||||
c700: "#171736", // Not currently used
|
||||
c800: "#101020", // Not currently used
|
||||
c900: "#0B0B13", // Not currently used
|
||||
c50: "hsla(240, 80%, 82%, 1)", // Not currently used
|
||||
c100: "hsla(240, 40%, 64%, 1)", // Not currently used
|
||||
c200: "hsla(240, 33%, 52%, 1)", // Theme primary color, pill highlight, global accent A
|
||||
c300: "hsla(240, 40%, 39%, 1)", // Global accent B
|
||||
c400: "hsla(240, 46%, 30%, 1)", // Light bar color
|
||||
c500: "hsla(240, 45%, 22%, 1)", // Background accent B
|
||||
c600: "hsla(240, 42%, 18%, 1)", // Not currently used
|
||||
c700: "hsla(240, 40%, 15%, 1)", // Not currently used
|
||||
c800: "hsla(240, 33%, 9%, 1)", // Not currently used
|
||||
c900: "hsla(240, 25%, 6%, 1)", // Not currently used
|
||||
},
|
||||
purple: {
|
||||
c50: "#D5AAFF", // Link hover, settings tabs titles/text
|
||||
c100: "#C082FF", // Link, logo text, video player audio set
|
||||
c200: "#A359EC", // Progress filled, video player scraping loading, video player context accent
|
||||
c300: "#8D44D6", // Toggle button, onboarding bar filled
|
||||
c400: "#7831BF", // Large card icon
|
||||
c500: "#572887", // Background accent A
|
||||
c600: "#411F64", // Not currently used
|
||||
c700: "#31184A", // Not currently used
|
||||
c800: "#221134", // Not currently used
|
||||
c900: "#160B22", // Not currently used
|
||||
c50: "hsla(280, 100%, 83%, 1)", // Link hover, settings tabs titles/text
|
||||
c100: "hsla(270, 100%, 75%, 1)", // Link, logo text, video player audio set
|
||||
c200: "hsla(270, 79%, 64%, 1)", // Progress filled, video player scraping loading, video player context accent
|
||||
c300: "hsla(270, 61%, 55%, 1)", // Toggle button, onboarding bar filled
|
||||
c400: "hsla(270, 59%, 47%, 1)", // Large card icon
|
||||
c500: "hsla(270, 52%, 34%, 1)", // Background accent A
|
||||
c600: "hsla(270, 52%, 26%, 1)", // Not currently used
|
||||
c700: "hsla(270, 50%, 19%, 1)", // Not currently used
|
||||
c800: "hsla(270, 48%, 14%, 1)", // Not currently used
|
||||
c900: "hsla(270, 40%, 9%, 1)", // Not currently used
|
||||
},
|
||||
ash: {
|
||||
c50: "#7F8D9B", // Authentication copy text hover, progress background, progress preloaded
|
||||
c100: "#5B6B7B", // Secondary text, badge text, video player scraping no result
|
||||
c200: "#445464", // Media card bar color, video player button background
|
||||
c300: "#2B3D4E", // Cancel button hover, utils divider
|
||||
c400: "#203242", // Card border and background, dropdown border, onboarding bar, edit badge hover, sidebar type
|
||||
c500: "#1C2C3C", // Toggle disabled, cancel button, modal background, search hover background, media card shadow, settings save bar, errors card, about circle, edit badge background, video player button focus, video player flag background, video player input background, video player button over input hover
|
||||
c600: "#172532", // Background secondary, dropdown alt background, dropdown border, onboarding card border
|
||||
c700: "#131E29", // Secondary button, media card badge, onboarding card hover, video player context card border, video player context buttons list, video player close hover
|
||||
c800: "#101820", // Background main, settings sidebar badge, errors border
|
||||
c900: "#0C1216", // Media card hover shadow, settings sidebar active link, video player context background
|
||||
c50: "hsla(210, 11%, 55%, 1)", // Authentication copy text hover, progress background, progress preloaded
|
||||
c100: "hsla(210, 15%, 42%, 1)", // Secondary text, badge text, video player scraping no result
|
||||
c200: "hsla(210, 17%, 33%, 1)", // Media card bar color, video player button background
|
||||
c300: "hsla(210, 29%, 24%, 1)", // Cancel button hover, utils divider
|
||||
c400: "hsla(210, 35%, 19%, 1)", // Card border and background, dropdown border, onboarding bar, edit badge hover, sidebar type
|
||||
c500: "hsla(210, 35%, 17%, 1)", // Toggle disabled, cancel button, modal background, search hover background, media card shadow, settings save bar, errors card, about circle, edit badge background, video player button focus, video player flag background, video player input background, video player button over input hover
|
||||
c600: "hsla(210, 32%, 14%, 1)", // Background secondary, dropdown alt background, dropdown border, onboarding card border
|
||||
c700: "hsla(210, 35%, 12%, 1)", // Secondary button, media card badge, onboarding card hover, video player context card border, video player context buttons list, video player close hover
|
||||
c800: "hsla(210, 33%, 9%, 1)", // Background main, settings sidebar badge, errors border
|
||||
c900: "hsla(210, 25%, 7%, 1)", // Media card hover shadow, settings sidebar active link, video player context background
|
||||
},
|
||||
shade: {
|
||||
c25: "#5d5db3", // Media card hover accent
|
||||
c50: "#676790", // Theme secondary color, text, dimmed text
|
||||
c100: "#52527A", // Search placeholder and icon, dropdown secondary text
|
||||
c200: "#3F3F60", // Pill background hover, onboarding divider
|
||||
c300: "#32324F", // Pill background, authentication border, onboarding card
|
||||
c400: "#272741", // Background secondary hover, dropdown border, onboarding bar, onboarding divider
|
||||
c500: "#1E1E32", // Search background, search focus, dropdown hover background, dropdown content background, authentication input background hover, authentication word background
|
||||
c600: "#171728", // Modal background, dropdown background, onboarding card border
|
||||
c700: "#131322", // Dropdown alt background
|
||||
c800: "#0F0F1B", // Background main, settings save bar, onboarding card
|
||||
c900: "#0A0A12", // Media card hover shadow
|
||||
c25: "hsla(240, 33%, 53%, 1)", // Media card hover accent
|
||||
c50: "hsla(240, 17%, 48%, 1)", // Theme secondary color, text, dimmed text
|
||||
c100: "hsla(240, 20%, 40%, 1)", // Search placeholder and icon, dropdown secondary text
|
||||
c200: "hsla(240, 20%, 31%, 1)", // Pill background hover, onboarding divider
|
||||
c300: "hsla(240, 22%, 25%, 1)", // Pill background, authentication border, onboarding card
|
||||
c400: "hsla(240, 25%, 21%, 1)", // Background secondary hover, dropdown border, onboarding bar, onboarding divider
|
||||
c500: "hsla(240, 26%, 16%, 1)", // Search background, search focus, dropdown hover background, dropdown content background, authentication input background hover, authentication word background
|
||||
c600: "hsla(240, 31%, 12%, 1)", // Modal background, dropdown background, onboarding card border
|
||||
c700: "hsla(240, 29%, 10%, 1)", // Dropdown alt background
|
||||
c800: "hsla(240, 30%, 8%, 1)", // Background main, settings save bar, onboarding card
|
||||
c900: "hsla(240, 29%, 5%, 1)", // Media card hover shadow
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,16 +21,17 @@ const tokens = {
|
|||
},
|
||||
},
|
||||
purple: {
|
||||
c50: "#8E2020FF",
|
||||
c100: "#e60000",
|
||||
c200: "#e60000",
|
||||
c300: "#e60000",
|
||||
c400: "#e60000",
|
||||
c500: "#cc0000",
|
||||
c50: "#8E2020",
|
||||
c100: "#CF1F1F",
|
||||
c200: "#CF1F1F",
|
||||
c300: "#CF1F1F",
|
||||
c400: "#CF1F1F",
|
||||
c500: "#CF1F1F",
|
||||
c600: "#b30000",
|
||||
c700: "#8a0000",
|
||||
c800: "#660000",
|
||||
c900: "#400000"
|
||||
c900: "#400000",
|
||||
c1000: "#180101FF",
|
||||
},
|
||||
shade: {
|
||||
c50: "#7c7c7c",
|
||||
|
|
@ -92,7 +93,7 @@ export default createTheme({
|
|||
},
|
||||
|
||||
lightBar: {
|
||||
light: tokens.shade.c900,
|
||||
light: tokens.purple.c1000,
|
||||
},
|
||||
|
||||
buttons: {
|
||||
|
|
|
|||
343
themes/list/forest.ts
Normal file
343
themes/list/forest.ts
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
import { createTheme } from "../types";
|
||||
|
||||
const tokens = {
|
||||
black: "hsla(0, 0%, 0%, 1)", // General black color
|
||||
white: "hsla(0, 0%, 100%, 1)", // General white color
|
||||
semantic: {
|
||||
red: {
|
||||
c100: "hsla(0, 86%, 69%, 1)", // Error text
|
||||
c200: "hsla(0, 73%, 60%, 1)", // Video player scraping error
|
||||
c300: "hsla(0, 66%, 56%, 1)", // Danger button
|
||||
c400: "hsla(0, 55%, 45%, 1)", // Not currently used
|
||||
},
|
||||
green: {
|
||||
c100: "hsla(125, 60%, 60%, 1)", // Success text
|
||||
c200: "hsla(125, 49%, 48%, 1)", // Video player scraping success
|
||||
c300: "hsla(125, 54%, 42%, 1)", // Not currently used
|
||||
c400: "hsla(125, 54%, 31%, 1)", // Not currently used
|
||||
},
|
||||
silver: {
|
||||
c100: "hsla(0, 0%, 87%, 1)", // Primary button hover
|
||||
c200: "hsla(206, 33%, 78%, 1)", // Not currently used
|
||||
c300: "hsla(206, 19%, 62%, 1)", // Secondary button text
|
||||
c400: "hsla(206, 18%, 46%, 1)", // Main text in video player context
|
||||
},
|
||||
yellow: {
|
||||
c100: "hsla(56, 100%, 80%, 1)", // Best onboarding highlight
|
||||
c200: "hsla(56, 96%, 68%, 1)", // Dropdown highlight hover
|
||||
c300: "hsla(56, 55%, 56%, 1)", // Not currently used
|
||||
c400: "hsla(56, 38%, 48%, 1)", // Dropdown highlight
|
||||
},
|
||||
rose: {
|
||||
c100: "hsla(348, 68%, 55%, 1)", // Authentication error text
|
||||
c200: "hsla(348, 55%, 35%, 1)", // Danger button hover
|
||||
c300: "hsla(348, 57%, 32%, 1)", // Danger button
|
||||
c400: "hsla(348, 60%, 27%, 1)", // Not currently used
|
||||
},
|
||||
},
|
||||
blue: {
|
||||
c50: "hsla(113, 31%, 64%, 1)",
|
||||
c100: "hsla(116, 22%, 51%, 1)",
|
||||
c200: "hsla(121, 23%, 40%, 1)",
|
||||
c300: "hsla(123, 27%, 32%, 1)",
|
||||
c400: "hsla(123, 28%, 25%, 1)",
|
||||
c500: "hsla(124, 30%, 20%, 1)",
|
||||
c600: "hsla(128, 32%, 15%, 1)",
|
||||
c700: "hsla(126, 32%, 12%, 1)",
|
||||
c800: "hsla(124, 32%, 9%, 1)",
|
||||
c900: "hsla(120, 33%, 6%, 1)"
|
||||
},
|
||||
purple: {
|
||||
c50: "hsla(116, 24%, 53%, 1)",
|
||||
c100: "hsla(115, 26%, 40%, 1)",
|
||||
c200: "hsla(119, 28%, 33%, 1)",
|
||||
c300: "hsla(119, 31%, 26%, 1)",
|
||||
c400: "hsla(120, 32%, 22%, 1)",
|
||||
c500: "hsla(122, 34%, 18%, 1)",
|
||||
c600: "hsla(118, 37%, 14%, 1)",
|
||||
c700: "hsla(120, 37%, 11%, 1)",
|
||||
c800: "hsla(120, 38%, 8%, 1)",
|
||||
c900: "hsla(120, 41%, 5%, 1)"
|
||||
},
|
||||
ash: {
|
||||
c50: "hsla(144, 11%, 47%, 1)",
|
||||
c100: "hsla(145, 12%, 38%, 1)",
|
||||
c200: "hsla(146, 13%, 31%, 1)",
|
||||
c300: "hsla(147, 15%, 24%, 1)",
|
||||
c400: "hsla(142, 16%, 20%, 1)",
|
||||
c500: "hsla(146, 18%, 15%, 1)",
|
||||
c600: "hsla(145, 20%, 12%, 1)",
|
||||
c700: "hsla(140, 19%, 9%, 1)",
|
||||
c800: "hsla(130, 18%, 7%, 1)",
|
||||
c900: "hsla(120, 18%, 4%, 1)"
|
||||
},
|
||||
shade: {
|
||||
c25: "hsla(120, 27%, 40%, 1)",
|
||||
c50: "hsla(120, 26%, 34%, 1)",
|
||||
c100: "hsla(120, 25%, 28%, 1)",
|
||||
c200: "hsla(120, 25%, 23%, 1)",
|
||||
c300: "hsla(120, 26%, 19%, 1)",
|
||||
c400: "hsla(120, 27%, 15%, 1)",
|
||||
c500: "hsla(120, 28%, 11%, 1)",
|
||||
c600: "hsla(120, 29%, 9%, 1)",
|
||||
c700: "hsla(120, 29%, 7%, 1)",
|
||||
c800: "hsla(120, 39%, 5%, 1)",
|
||||
c900: "hsla(120, 33%, 2%, 1)"
|
||||
},
|
||||
}
|
||||
|
||||
export default createTheme({
|
||||
name: "forest",
|
||||
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.c800,
|
||||
},
|
||||
|
||||
// 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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
343
themes/list/grape.ts
Normal file
343
themes/list/grape.ts
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
import { createTheme } from "../types";
|
||||
|
||||
const tokens = {
|
||||
black: "#000000", // General black color
|
||||
white: "#FFFFFF", // General white color
|
||||
semantic: {
|
||||
red: {
|
||||
c100: "#F46E6E", // Error text
|
||||
c200: "#E44F4F", // Video player scraping error
|
||||
c300: "#D74747", // Danger button
|
||||
c400: "#B43434", // Not currently used
|
||||
},
|
||||
green: {
|
||||
c100: "#60D26A", // Success text
|
||||
c200: "#40B44B", // Video player scraping success
|
||||
c300: "#31A33C", // Not currently used
|
||||
c400: "#237A2B", // Not currently used
|
||||
},
|
||||
silver: {
|
||||
c100: "#DEDEDE", // Primary button hover
|
||||
c200: "#B6CAD7", // Not currently used
|
||||
c300: "#8EA3B0", // Secondary button text
|
||||
c400: "#617A8A", // Main text in video player context
|
||||
},
|
||||
yellow: {
|
||||
c100: "#FFF599", // Best onboarding highlight
|
||||
c200: "#FCEC61", // Dropdown highlight hover
|
||||
c300: "#D8C947", // Not currently used
|
||||
c400: "#AFA349", // Dropdown highlight
|
||||
},
|
||||
rose: {
|
||||
c100: "#DB3D61", // Authentication error text
|
||||
c200: "#8A293B", // Danger button hover
|
||||
c300: "#812435", // Danger button
|
||||
c400: "#701B2B", // Not currently used
|
||||
},
|
||||
},
|
||||
blue: {
|
||||
c50: "#c2a6ff",
|
||||
c100: "#a182ff",
|
||||
c200: "#825eff",
|
||||
c300: "#6541e6",
|
||||
c400: "#4c31cc",
|
||||
c500: "#3a24a3",
|
||||
c600: "#2f1c80",
|
||||
c700: "#241561",
|
||||
c800: "#180e42",
|
||||
c900: "#100a2c",
|
||||
},
|
||||
purple: {
|
||||
c50: "#f0b3ff",
|
||||
c100: "#e080ff",
|
||||
c200: "#cc4dff",
|
||||
c300: "#b320f0",
|
||||
c400: "#9917cc",
|
||||
c500: "#701199",
|
||||
c600: "#530c73",
|
||||
c700: "#3b0852",
|
||||
c800: "#280638",
|
||||
c900: "#180425",
|
||||
},
|
||||
ash: {
|
||||
c50: "#9b8fb1",
|
||||
c100: "#7e7195",
|
||||
c200: "#62577a",
|
||||
c300: "#4a4061",
|
||||
c400: "#3b334e",
|
||||
c500: "#30293f",
|
||||
c600: "#251f31",
|
||||
c700: "#1c1726",
|
||||
c800: "#15101b",
|
||||
c900: "#0f0a12",
|
||||
},
|
||||
shade: {
|
||||
c25: "#8a4de0",
|
||||
c50: "#7555a8",
|
||||
c100: "#604585",
|
||||
c200: "#4b3666",
|
||||
c300: "#3d2b50",
|
||||
c400: "#312240",
|
||||
c500: "#251931",
|
||||
c600: "#1c1325",
|
||||
c700: "#160f1d",
|
||||
c800: "#110b16",
|
||||
c900: "#0c0610",
|
||||
}
|
||||
}
|
||||
|
||||
export default createTheme({
|
||||
name: "grape",
|
||||
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.c800,
|
||||
},
|
||||
|
||||
// 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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
343
themes/list/hulk.ts
Normal file
343
themes/list/hulk.ts
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
import { createTheme } from "../types";
|
||||
|
||||
const tokens = {
|
||||
black: "#000000", // General black color
|
||||
white: "#FFFFFF", // General white color
|
||||
semantic: {
|
||||
red: {
|
||||
c100: "#F46E6E", // Error text
|
||||
c200: "#E44F4F", // Video player scraping error
|
||||
c300: "#D74747", // Danger button
|
||||
c400: "#B43434", // Not currently used
|
||||
},
|
||||
green: {
|
||||
c100: "#60D26A", // Success text
|
||||
c200: "#40B44B", // Video player scraping success
|
||||
c300: "#31A33C", // Not currently used
|
||||
c400: "#237A2B", // Not currently used
|
||||
},
|
||||
silver: {
|
||||
c100: "#DEDEDE", // Primary button hover
|
||||
c200: "#B6CAD7", // Not currently used
|
||||
c300: "#8EA3B0", // Secondary button text
|
||||
c400: "#617A8A", // Main text in video player context
|
||||
},
|
||||
yellow: {
|
||||
c100: "#FFF599", // Best onboarding highlight
|
||||
c200: "#FCEC61", // Dropdown highlight hover
|
||||
c300: "#D8C947", // Not currently used
|
||||
c400: "#AFA349", // Dropdown highlight
|
||||
},
|
||||
rose: {
|
||||
c100: "#DB3D61", // Authentication error text
|
||||
c200: "#8A293B", // Danger button hover
|
||||
c300: "#812435", // Danger button
|
||||
c400: "#701B2B", // Not currently used
|
||||
},
|
||||
},
|
||||
blue: {
|
||||
c50: "hsla(285, 80%, 85%, 1)",
|
||||
c100: "hsla(285, 70%, 75%, 1)",
|
||||
c200: "hsla(285, 65%, 60%, 1)",
|
||||
c300: "hsla(285, 60%, 48%, 1)",
|
||||
c400: "hsla(285, 55%, 38%, 1)",
|
||||
c500: "hsla(285, 50%, 30%, 1)",
|
||||
c600: "hsla(285, 45%, 24%, 1)",
|
||||
c700: "hsla(285, 40%, 18%, 1)",
|
||||
c800: "hsla(285, 35%, 12%, 1)",
|
||||
c900: "hsla(285, 30%, 9%, 1)",
|
||||
},
|
||||
purple: {
|
||||
c50: "hsla(290, 80%, 85%, 1)",
|
||||
c100: "hsla(290, 70%, 75%, 1)",
|
||||
c200: "hsla(290, 65%, 60%, 1)",
|
||||
c300: "hsla(290, 60%, 48%, 1)",
|
||||
c400: "hsla(290, 55%, 38%, 1)",
|
||||
c500: "hsla(290, 50%, 30%, 1)",
|
||||
c600: "hsla(290, 45%, 24%, 1)",
|
||||
c700: "hsla(290, 40%, 18%, 1)",
|
||||
c800: "hsla(290, 35%, 12%, 1)",
|
||||
c900: "hsla(290, 30%, 9%, 1)",
|
||||
},
|
||||
ash: {
|
||||
c50: "hsla(120, 30%, 60%, 1)",
|
||||
c100: "hsla(120, 35%, 50%, 1)",
|
||||
c200: "hsla(120, 40%, 42%, 1)",
|
||||
c300: "hsla(120, 45%, 32%, 1)",
|
||||
c400: "hsla(120, 45%, 26%, 1)",
|
||||
c500: "hsla(120, 40%, 22%, 1)",
|
||||
c600: "hsla(120, 35%, 18%, 1)",
|
||||
c700: "hsla(120, 30%, 14%, 1)",
|
||||
c800: "hsla(120, 25%, 10%, 1)",
|
||||
c900: "hsla(120, 20%, 7%, 1)",
|
||||
},
|
||||
shade: {
|
||||
c25: "hsla(135, 30%, 55%, 1)",
|
||||
c50: "hsla(135, 28%, 48%, 1)",
|
||||
c100: "hsla(135, 26%, 40%, 1)",
|
||||
c200: "hsla(135, 24%, 32%, 1)",
|
||||
c300: "hsla(135, 22%, 26%, 1)",
|
||||
c400: "hsla(135, 20%, 22%, 1)",
|
||||
c500: "hsla(135, 18%, 17%, 1)",
|
||||
c600: "hsla(135, 17%, 13%, 1)",
|
||||
c700: "hsla(135, 16%, 10%, 1)",
|
||||
c800: "hsla(135, 15%, 8%, 1)",
|
||||
c900: "hsla(135, 14%, 6%, 1)",
|
||||
},
|
||||
}
|
||||
|
||||
export default createTheme({
|
||||
name: "hulk",
|
||||
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.c800,
|
||||
},
|
||||
|
||||
// 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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
277
themes/list/noir.ts
Normal file
277
themes/list/noir.ts
Normal file
|
|
@ -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: "#575757FF",
|
||||
c100: "#575757FF",
|
||||
c200: "#575757FF",
|
||||
c300: "#575757FF",
|
||||
c400: "#575757FF",
|
||||
c500: "#575757FF",
|
||||
c600: "#2c2c2c",
|
||||
c700: "#202020",
|
||||
c800: "#151515",
|
||||
c900: "#0a0a0a"
|
||||
},
|
||||
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: "noir",
|
||||
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.purple.c600,
|
||||
accentB: tokens.black.c100
|
||||
},
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
343
themes/list/popsicle.ts
Normal file
343
themes/list/popsicle.ts
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
import { createTheme } from "../types";
|
||||
|
||||
const tokens = {
|
||||
black: "hsla(0, 0%, 0%, 1)", // General black color
|
||||
white: "hsla(0, 0%, 100%, 1)", // General white color
|
||||
semantic: {
|
||||
red: {
|
||||
c100: "hsla(0, 86%, 69%, 1)", // Error text
|
||||
c200: "hsla(0, 73%, 60%, 1)", // Video player scraping error
|
||||
c300: "hsla(0, 66%, 56%, 1)", // Danger button
|
||||
c400: "hsla(0, 55%, 45%, 1)", // Not currently used
|
||||
},
|
||||
green: {
|
||||
c100: "hsla(125, 60%, 60%, 1)", // Success text
|
||||
c200: "hsla(125, 49%, 48%, 1)", // Video player scraping success
|
||||
c300: "hsla(125, 54%, 42%, 1)", // Not currently used
|
||||
c400: "hsla(125, 54%, 31%, 1)", // Not currently used
|
||||
},
|
||||
silver: {
|
||||
c100: "hsla(0, 0%, 87%, 1)", // Primary button hover
|
||||
c200: "hsla(206, 33%, 78%, 1)", // Not currently used
|
||||
c300: "hsla(206, 19%, 62%, 1)", // Secondary button text
|
||||
c400: "hsla(206, 18%, 46%, 1)", // Main text in video player context
|
||||
},
|
||||
yellow: {
|
||||
c100: "hsla(56, 100%, 80%, 1)", // Best onboarding highlight
|
||||
c200: "hsla(56, 96%, 68%, 1)", // Dropdown highlight hover
|
||||
c300: "hsla(56, 55%, 56%, 1)", // Not currently used
|
||||
c400: "hsla(56, 38%, 48%, 1)", // Dropdown highlight
|
||||
},
|
||||
rose: {
|
||||
c100: "hsla(348, 68%, 55%, 1)", // Authentication error text
|
||||
c200: "hsla(348, 55%, 35%, 1)", // Danger button hover
|
||||
c300: "hsla(348, 57%, 32%, 1)", // Danger button
|
||||
c400: "hsla(348, 60%, 27%, 1)", // Not currently used
|
||||
},
|
||||
},
|
||||
blue: {
|
||||
c50: "hsla(200, 100%, 85%, 1)", // soft cyan
|
||||
c100: "hsla(200, 80%, 70%, 1)", // brighter cyan
|
||||
c200: "hsla(200, 70%, 60%, 1)", // theme primary: cyan-blue
|
||||
c300: "hsla(200, 60%, 45%, 1)", // accent B: darker cyan-blue
|
||||
c400: "hsla(200, 50%, 35%, 1)", // light bar
|
||||
c500: "hsla(200, 45%, 25%, 1)", // accent B background
|
||||
c600: "hsla(200, 42%, 20%, 1)",
|
||||
c700: "hsla(200, 40%, 16%, 1)",
|
||||
c800: "hsla(200, 35%, 10%, 1)",
|
||||
c900: "hsla(200, 30%, 7%, 1)",
|
||||
},
|
||||
purple: {
|
||||
c50: "hsla(280, 100%, 85%, 1)", // lavender for link hover
|
||||
c100: "hsla(300, 100%, 75%, 1)", // pink-violet logo/link
|
||||
c200: "hsla(300, 80%, 65%, 1)", // pinkish progress/loader
|
||||
c300: "hsla(310, 65%, 55%, 1)", // toggle/onboarding bar
|
||||
c400: "hsla(320, 60%, 47%, 1)", // card icon
|
||||
c500: "hsla(325, 50%, 36%, 1)", // accent A background
|
||||
c600: "hsla(325, 50%, 28%, 1)",
|
||||
c700: "hsla(325, 50%, 20%, 1)",
|
||||
c800: "hsla(325, 45%, 14%, 1)",
|
||||
c900: "hsla(325, 40%, 9%, 1)",
|
||||
},
|
||||
ash: {
|
||||
c50: "hsla(60, 8%, 60%, 1)", // neutral gold-tinted gray
|
||||
c100: "hsla(60, 10%, 45%, 1)", // warm muted gray
|
||||
c200: "hsla(60, 11%, 35%, 1)", // sidebar border
|
||||
c300: "hsla(60, 12%, 28%, 1)", // card divider
|
||||
c400: "hsla(60, 14%, 22%, 1)", // bg + hover accents
|
||||
c500: "hsla(200, 45%, 25%, 1)", // accent B background
|
||||
c600: "hsla(200, 42%, 20%, 1)",
|
||||
c700: "hsla(200, 40%, 16%, 1)",
|
||||
c800: "hsla(200, 35%, 10%, 1)",
|
||||
c900: "hsla(200, 30%, 7%, 1)", // deepest shade, shadows
|
||||
},
|
||||
shade: {
|
||||
c25: "hsla(0, 80%, 70%, 1)", // red hover accent
|
||||
c50: "hsla(30, 100%, 72%, 1)", // orange for main text
|
||||
c100: "hsla(30, 80%, 60%, 1)", // placeholder/icon
|
||||
c200: "hsla(200, 60%, 45%, 1)", // hover bg
|
||||
c300: "hsla(30, 60%, 35%, 1)", // pill background, auth border
|
||||
c400: "hsla(200, 50%, 35%, 1)", // light bar
|
||||
c500: "hsla(30, 50%, 21%, 1)", // dropdown background
|
||||
c600: "hsla(30, 45%, 16%, 1)", // modal/dropdown background
|
||||
c700: "hsla(30, 40%, 12%, 1)", // alt bg
|
||||
c800: "hsla(30, 38%, 9%, 1)", // main bg
|
||||
c900: "hsla(30, 35%, 6%, 1)", // hover shadow
|
||||
},
|
||||
}
|
||||
|
||||
export default createTheme({
|
||||
name: "popsicle",
|
||||
extend: {
|
||||
colors: {
|
||||
themePreview: {
|
||||
primary: tokens.blue.c200,
|
||||
secondary: tokens.shade.c50,
|
||||
ghost: tokens.purple.c400,
|
||||
},
|
||||
|
||||
// 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.purple.c900,
|
||||
hoverAccent: tokens.blue.c100,
|
||||
hoverShadow: tokens.shade.c900,
|
||||
shadow: tokens.purple.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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
278
themes/list/spark.ts
Normal file
278
themes/list/spark.ts
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
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: "#E0AC0DFF",
|
||||
c100: "#CF9F11FF",
|
||||
c200: "#CF9F11FF",
|
||||
c300: "#CF9F11FF",
|
||||
c400: "#E0AC0DFF",
|
||||
c500: "#C5A00AFF",
|
||||
c600: "#C5A00AFF",
|
||||
c700: "#aa9500",
|
||||
c800: "#7f6f00",
|
||||
c900: "#4d4700",
|
||||
c1000: "#201A03FF",
|
||||
},
|
||||
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: "spark",
|
||||
extend: {
|
||||
colors: {
|
||||
themePreview: {
|
||||
primary: tokens.black.c80,
|
||||
secondary: tokens.purple.c50,
|
||||
},
|
||||
|
||||
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.purple.c1000,
|
||||
},
|
||||
|
||||
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.purple.c600,
|
||||
accentB: tokens.black.c100
|
||||
},
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
343
themes/list/spiderman.ts
Normal file
343
themes/list/spiderman.ts
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
import { createTheme } from "../types";
|
||||
|
||||
const tokens = {
|
||||
black: "#000000", // General black color
|
||||
white: "#FFFFFF", // General white color
|
||||
semantic: {
|
||||
red: {
|
||||
c100: "#F46E6E", // Error text
|
||||
c200: "#E44F4F", // Video player scraping error
|
||||
c300: "#D74747", // Danger button
|
||||
c400: "#B43434", // Not currently used
|
||||
},
|
||||
green: {
|
||||
c100: "#60D26A", // Success text
|
||||
c200: "#40B44B", // Video player scraping success
|
||||
c300: "#31A33C", // Not currently used
|
||||
c400: "#237A2B", // Not currently used
|
||||
},
|
||||
silver: {
|
||||
c100: "#DEDEDE", // Primary button hover
|
||||
c200: "#B6CAD7", // Not currently used
|
||||
c300: "#8EA3B0", // Secondary button text
|
||||
c400: "#617A8A", // Main text in video player context
|
||||
},
|
||||
yellow: {
|
||||
c100: "#FFF599", // Best onboarding highlight
|
||||
c200: "#FCEC61", // Dropdown highlight hover
|
||||
c300: "#D8C947", // Not currently used
|
||||
c400: "#AFA349", // Dropdown highlight
|
||||
},
|
||||
rose: {
|
||||
c100: "#DB3D61", // Authentication error text
|
||||
c200: "#8A293B", // Danger button hover
|
||||
c300: "#812435", // Danger button
|
||||
c400: "#701B2B", // Not currently used
|
||||
},
|
||||
},
|
||||
blue: {
|
||||
c50: "hsla(220, 80%, 80%, 1)",
|
||||
c100: "hsla(220, 65%, 68%, 1)",
|
||||
c200: "hsla(220, 60%, 55%, 1)",
|
||||
c300: "hsla(220, 65%, 42%, 1)",
|
||||
c400: "hsla(220, 70%, 32%, 1)",
|
||||
c500: "hsla(220, 65%, 25%, 1)",
|
||||
c600: "hsla(220, 60%, 20%, 1)",
|
||||
c700: "hsla(220, 55%, 15%, 1)",
|
||||
c800: "hsla(220, 40%, 10%, 1)",
|
||||
c900: "hsla(220, 30%, 7%, 1)",
|
||||
},
|
||||
purple: {
|
||||
c50: "hsla(220, 80%, 80%, 1)",
|
||||
c100: "hsla(220, 65%, 68%, 1)",
|
||||
c200: "hsla(220, 60%, 55%, 1)",
|
||||
c300: "hsla(220, 65%, 42%, 1)",
|
||||
c400: "hsla(220, 70%, 32%, 1)",
|
||||
c500: "hsla(220, 65%, 25%, 1)",
|
||||
c600: "hsla(220, 60%, 20%, 1)",
|
||||
c700: "hsla(220, 55%, 15%, 1)",
|
||||
c800: "hsla(220, 40%, 10%, 1)",
|
||||
c900: "hsla(220, 30%, 7%, 1)",
|
||||
},
|
||||
ash: {
|
||||
c50: "hsla(0, 60%, 60%, 1)",
|
||||
c100: "hsla(0, 60%, 50%, 1)",
|
||||
c200: "hsla(0, 65%, 42%, 1)",
|
||||
c300: "hsla(0, 70%, 32%, 1)",
|
||||
c400: "hsla(0, 70%, 26%, 1)",
|
||||
c500: "hsla(0, 60%, 22%, 1)",
|
||||
c600: "hsla(0, 50%, 18%, 1)",
|
||||
c700: "hsla(0, 45%, 14%, 1)",
|
||||
c800: "hsla(0, 35%, 10%, 1)",
|
||||
c900: "hsla(0, 25%, 7%, 1)",
|
||||
},
|
||||
shade: {
|
||||
c25: "hsla(0, 55%, 55%, 1)",
|
||||
c50: "hsla(0, 50%, 48%, 1)",
|
||||
c100: "hsla(0, 45%, 40%, 1)",
|
||||
c200: "hsla(0, 40%, 31%, 1)",
|
||||
c300: "hsla(0, 38%, 25%, 1)",
|
||||
c400: "hsla(0, 35%, 21%, 1)",
|
||||
c500: "hsla(0, 32%, 16%, 1)",
|
||||
c600: "hsla(0, 30%, 12%, 1)",
|
||||
c700: "hsla(0, 28%, 10%, 1)",
|
||||
c800: "hsla(0, 26%, 8%, 1)",
|
||||
c900: "hsla(0, 24%, 5%, 1)",
|
||||
}
|
||||
}
|
||||
|
||||
export default createTheme({
|
||||
name: "spiderman",
|
||||
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.c800,
|
||||
},
|
||||
|
||||
// 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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
343
themes/list/wolverine.ts
Normal file
343
themes/list/wolverine.ts
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
import { createTheme } from "../types";
|
||||
|
||||
const tokens = {
|
||||
black: "hsla(0, 0%, 0%, 1)", // General black color
|
||||
white: "hsla(0, 0%, 100%, 1)", // General white color
|
||||
semantic: {
|
||||
red: {
|
||||
c100: "hsla(0, 86%, 69%, 1)", // Error text
|
||||
c200: "hsla(0, 73%, 60%, 1)", // Video player scraping error
|
||||
c300: "hsla(0, 66%, 56%, 1)", // Danger button
|
||||
c400: "hsla(0, 55%, 45%, 1)", // Not currently used
|
||||
},
|
||||
green: {
|
||||
c100: "hsla(125, 60%, 60%, 1)", // Success text
|
||||
c200: "hsla(125, 49%, 48%, 1)", // Video player scraping success
|
||||
c300: "hsla(125, 54%, 42%, 1)", // Not currently used
|
||||
c400: "hsla(125, 54%, 31%, 1)", // Not currently used
|
||||
},
|
||||
silver: {
|
||||
c100: "hsla(0, 0%, 87%, 1)", // Primary button hover
|
||||
c200: "hsla(206, 33%, 78%, 1)", // Not currently used
|
||||
c300: "hsla(206, 19%, 62%, 1)", // Secondary button text
|
||||
c400: "hsla(206, 18%, 46%, 1)", // Main text in video player context
|
||||
},
|
||||
yellow: {
|
||||
c100: "hsla(56, 100%, 80%, 1)", // Best onboarding highlight
|
||||
c200: "hsla(56, 96%, 68%, 1)", // Dropdown highlight hover
|
||||
c300: "hsla(56, 55%, 56%, 1)", // Not currently used
|
||||
c400: "hsla(56, 38%, 48%, 1)", // Dropdown highlight
|
||||
},
|
||||
rose: {
|
||||
c100: "hsla(348, 68%, 55%, 1)", // Authentication error text
|
||||
c200: "hsla(348, 55%, 35%, 1)", // Danger button hover
|
||||
c300: "hsla(348, 57%, 32%, 1)", // Danger button
|
||||
c400: "hsla(348, 60%, 27%, 1)", // Not currently used
|
||||
},
|
||||
},
|
||||
blue: {
|
||||
c50: "hsla(220, 80%, 80%, 1)",
|
||||
c100: "hsla(220, 60%, 65%, 1)",
|
||||
c200: "hsla(220, 50%, 50%, 1)",
|
||||
c300: "hsla(220, 55%, 40%, 1)",
|
||||
c400: "hsla(220, 60%, 30%, 1)",
|
||||
c500: "hsla(220, 55%, 22%, 1)",
|
||||
c600: "hsla(220, 50%, 18%, 1)",
|
||||
c700: "hsla(220, 45%, 14%, 1)",
|
||||
c800: "hsla(220, 35%, 10%, 1)",
|
||||
c900: "hsla(220, 30%, 7%, 1)",
|
||||
},
|
||||
purple: {
|
||||
c50: "hsla(48, 100%, 75%, 1)",
|
||||
c100: "hsla(48, 95%, 65%, 1)",
|
||||
c200: "hsla(46, 90%, 55%, 1)",
|
||||
c300: "hsla(44, 85%, 45%, 1)",
|
||||
c400: "hsla(42, 80%, 35%, 1)",
|
||||
c500: "hsla(40, 75%, 28%, 1)",
|
||||
c600: "hsla(38, 70%, 22%, 1)",
|
||||
c700: "hsla(36, 60%, 18%, 1)",
|
||||
c800: "hsla(34, 50%, 14%, 1)",
|
||||
c900: "hsla(32, 40%, 10%, 1)",
|
||||
},
|
||||
ash: {
|
||||
c50: "hsla(210, 11%, 55%, 1)", // Authentication copy text hover, progress background, progress preloaded
|
||||
c100: "hsla(210, 15%, 42%, 1)", // Secondary text, badge text, video player scraping no result
|
||||
c200: "hsla(210, 17%, 33%, 1)", // Media card bar color, video player button background
|
||||
c300: "hsla(210, 29%, 24%, 1)", // Cancel button hover, utils divider
|
||||
c400: "hsla(210, 35%, 19%, 1)", // Card border and background, dropdown border, onboarding bar, edit badge hover, sidebar type
|
||||
c500: "hsla(210, 35%, 17%, 1)", // Toggle disabled, cancel button, modal background, search hover background, media card shadow, settings save bar, errors card, about circle, edit badge background, video player button focus, video player flag background, video player input background, video player button over input hover
|
||||
c600: "hsla(210, 32%, 14%, 1)", // Background secondary, dropdown alt background, dropdown border, onboarding card border
|
||||
c700: "hsla(210, 35%, 12%, 1)", // Secondary button, media card badge, onboarding card hover, video player context card border, video player context buttons list, video player close hover
|
||||
c800: "hsla(210, 33%, 9%, 1)", // Background main, settings sidebar badge, errors border
|
||||
c900: "hsla(210, 25%, 7%, 1)", // Media card hover shadow, settings sidebar active link, video player context background
|
||||
},
|
||||
shade: {
|
||||
c25: "hsla(240, 33%, 53%, 1)", // Media card hover accent
|
||||
c50: "hsla(240, 17%, 48%, 1)", // Theme secondary color, text, dimmed text
|
||||
c100: "hsla(240, 20%, 40%, 1)", // Search placeholder and icon, dropdown secondary text
|
||||
c200: "hsla(240, 20%, 31%, 1)", // Pill background hover, onboarding divider
|
||||
c300: "hsla(240, 22%, 25%, 1)", // Pill background, authentication border, onboarding card
|
||||
c400: "hsla(240, 25%, 21%, 1)", // Background secondary hover, dropdown border, onboarding bar, onboarding divider
|
||||
c500: "hsla(240, 26%, 16%, 1)", // Search background, search focus, dropdown hover background, dropdown content background, authentication input background hover, authentication word background
|
||||
c600: "hsla(240, 31%, 12%, 1)", // Modal background, dropdown background, onboarding card border
|
||||
c700: "hsla(240, 29%, 10%, 1)", // Dropdown alt background
|
||||
c800: "hsla(240, 30%, 8%, 1)", // Background main, settings save bar, onboarding card
|
||||
c900: "hsla(240, 29%, 5%, 1)", // Media card hover shadow
|
||||
},
|
||||
}
|
||||
|
||||
export default createTheme({
|
||||
name: "wolverine",
|
||||
extend: {
|
||||
colors: {
|
||||
themePreview: {
|
||||
primary: tokens.blue.c200,
|
||||
secondary: tokens.purple.c300,
|
||||
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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
Reference in a new issue