mirror of
https://github.com/p-stream/p-stream.git
synced 2026-04-21 01:02:24 +00:00
add more themes
green, mocha, pink
This commit is contained in:
Pas
parent
ba5839f369
commit
5d0182dfc2
6 changed files with 809 additions and 5 deletions
|
|
@ -610,7 +610,10 @@
|
||||||
"gray": "Gray",
|
"gray": "Gray",
|
||||||
"red": "Red",
|
"red": "Red",
|
||||||
"teal": "Teal",
|
"teal": "Teal",
|
||||||
"classic": "Classic"
|
"classic": "Classic",
|
||||||
|
"green": "Green",
|
||||||
|
"mocha": "Mocha",
|
||||||
|
"pink": "Pink"
|
||||||
},
|
},
|
||||||
"title": "Appearance",
|
"title": "Appearance",
|
||||||
"options": {
|
"options": {
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,11 @@ const availableThemes = [
|
||||||
selector: "theme-default",
|
selector: "theme-default",
|
||||||
key: "settings.appearance.themes.default",
|
key: "settings.appearance.themes.default",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: "classic",
|
||||||
|
selector: "theme-classic",
|
||||||
|
key: "settings.appearance.themes.classic",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: "blue",
|
id: "blue",
|
||||||
selector: "theme-blue",
|
selector: "theme-blue",
|
||||||
|
|
@ -32,9 +37,19 @@ const availableThemes = [
|
||||||
key: "settings.appearance.themes.gray",
|
key: "settings.appearance.themes.gray",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "classic",
|
id: "green",
|
||||||
selector: "theme-classic",
|
selector: "theme-green",
|
||||||
key: "settings.appearance.themes.classic",
|
key: "settings.appearance.themes.green",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "mocha",
|
||||||
|
selector: "theme-mocha",
|
||||||
|
key: "settings.appearance.themes.mocha",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "pink",
|
||||||
|
selector: "theme-pink",
|
||||||
|
key: "settings.appearance.themes.pink",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,17 @@ import blue from "./list/blue";
|
||||||
import red from "./list/red";
|
import red from "./list/red";
|
||||||
import gray from "./list/gray";
|
import gray from "./list/gray";
|
||||||
import classic from "./list/classic";
|
import classic from "./list/classic";
|
||||||
|
import green from "./list/green";
|
||||||
|
import mocha from "./list/mocha";
|
||||||
|
import pink from "./list/pink";
|
||||||
|
|
||||||
export const allThemes = [
|
export const allThemes = [
|
||||||
teal,
|
teal,
|
||||||
blue,
|
blue,
|
||||||
gray,
|
gray,
|
||||||
red,
|
red,
|
||||||
classic
|
classic,
|
||||||
|
green,
|
||||||
|
mocha,
|
||||||
|
pink
|
||||||
]
|
]
|
||||||
|
|
|
||||||
260
themes/list/green.ts
Normal file
260
themes/list/green.ts
Normal file
|
|
@ -0,0 +1,260 @@
|
||||||
|
import { createTheme } from "../types";
|
||||||
|
|
||||||
|
const tokens = {
|
||||||
|
purple: {
|
||||||
|
c50: "#91DB8BFF",
|
||||||
|
c100: "#4D9F3EFF",
|
||||||
|
c200: "#2B9A34FF",
|
||||||
|
c300: "#1C7C09FF",
|
||||||
|
c400: "#1A8A10FF",
|
||||||
|
c500: "#176D17FF",
|
||||||
|
c600: "#186507FF",
|
||||||
|
c700: "#044304FF",
|
||||||
|
c800: "#044109FF",
|
||||||
|
c900: "#032A03FF"
|
||||||
|
},
|
||||||
|
shade: {
|
||||||
|
c25: "#5DB35DFF",
|
||||||
|
c50: "#689067FF",
|
||||||
|
c100: "#567A52FF",
|
||||||
|
c200: "#3F603FFF",
|
||||||
|
c300: "#344F32FF",
|
||||||
|
c400: "#2C4127FF",
|
||||||
|
c500: "#1E321EFF",
|
||||||
|
c600: "#172818FF",
|
||||||
|
c700: "#152213FF",
|
||||||
|
c800: "#0F1B0FFF",
|
||||||
|
c900: "#0A120BFF"
|
||||||
|
},
|
||||||
|
ash: {
|
||||||
|
c50: "#7F9B8BFF",
|
||||||
|
c100: "#5B7B65FF",
|
||||||
|
c200: "#44644FFF",
|
||||||
|
c300: "#2B4E34FF",
|
||||||
|
c400: "#20422BFF",
|
||||||
|
c500: "#1C3C23FF",
|
||||||
|
c600: "#17321DFF",
|
||||||
|
c700: "#132917FF",
|
||||||
|
c800: "#102013FF",
|
||||||
|
c900: "#0C160CFF"
|
||||||
|
},
|
||||||
|
blue: {
|
||||||
|
c50: "#B5F5ADFF",
|
||||||
|
c100: "#79CC80FF",
|
||||||
|
c200: "#62AE5DFF",
|
||||||
|
c300: "#3E8C3BFF",
|
||||||
|
c400: "#235B25FF",
|
||||||
|
c500: "#1F5021FF",
|
||||||
|
c600: "#1C411BFFFF",
|
||||||
|
c700: "#17361BFF",
|
||||||
|
c800: "#102010FF",
|
||||||
|
c900: "#0B130BFF"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default createTheme({
|
||||||
|
name: "green",
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
themePreview: {
|
||||||
|
primary: tokens.blue.c200,
|
||||||
|
secondary: tokens.shade.c50
|
||||||
|
},
|
||||||
|
|
||||||
|
pill: {
|
||||||
|
background: tokens.shade.c300,
|
||||||
|
backgroundHover: tokens.shade.c200,
|
||||||
|
highlight: tokens.blue.c200,
|
||||||
|
|
||||||
|
activeBackground: tokens.shade.c300,
|
||||||
|
},
|
||||||
|
|
||||||
|
global: {
|
||||||
|
accentA: tokens.blue.c200,
|
||||||
|
accentB: tokens.blue.c300
|
||||||
|
},
|
||||||
|
|
||||||
|
lightBar: {
|
||||||
|
light: tokens.blue.c400
|
||||||
|
},
|
||||||
|
|
||||||
|
buttons: {
|
||||||
|
toggle: tokens.purple.c300,
|
||||||
|
toggleDisabled: tokens.ash.c500,
|
||||||
|
|
||||||
|
secondary: tokens.ash.c700,
|
||||||
|
secondaryHover: tokens.ash.c700,
|
||||||
|
purple: tokens.purple.c500,
|
||||||
|
purpleHover: tokens.purple.c400,
|
||||||
|
cancel: tokens.ash.c500,
|
||||||
|
cancelHover: tokens.ash.c300
|
||||||
|
},
|
||||||
|
|
||||||
|
background: {
|
||||||
|
main: tokens.shade.c900,
|
||||||
|
secondary: tokens.shade.c600,
|
||||||
|
secondaryHover: tokens.shade.c400,
|
||||||
|
accentA: tokens.purple.c500,
|
||||||
|
accentB: tokens.blue.c500
|
||||||
|
},
|
||||||
|
|
||||||
|
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.shade.c500,
|
||||||
|
hoverBackground: tokens.shade.c600,
|
||||||
|
focused: tokens.shade.c400,
|
||||||
|
placeholder: tokens.shade.c100,
|
||||||
|
icon: tokens.shade.c100
|
||||||
|
},
|
||||||
|
|
||||||
|
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
|
||||||
|
},
|
||||||
|
|
||||||
|
largeCard: {
|
||||||
|
background: tokens.shade.c600,
|
||||||
|
icon: tokens.purple.c400
|
||||||
|
},
|
||||||
|
|
||||||
|
dropdown: {
|
||||||
|
background: tokens.shade.c600,
|
||||||
|
altBackground: tokens.shade.c700,
|
||||||
|
hoverBackground: tokens.shade.c500,
|
||||||
|
text: tokens.shade.c50,
|
||||||
|
secondary: tokens.shade.c100,
|
||||||
|
border: tokens.shade.c400,
|
||||||
|
contentBackground: tokens.shade.c500
|
||||||
|
},
|
||||||
|
|
||||||
|
authentication: {
|
||||||
|
border: tokens.shade.c300,
|
||||||
|
inputBg: tokens.shade.c600,
|
||||||
|
inputBgHover: tokens.shade.c500,
|
||||||
|
wordBackground: tokens.shade.c500,
|
||||||
|
copyText: tokens.shade.c100,
|
||||||
|
copyTextHover: tokens.ash.c50
|
||||||
|
},
|
||||||
|
|
||||||
|
settings: {
|
||||||
|
sidebar: {
|
||||||
|
activeLink: tokens.shade.c600,
|
||||||
|
badge: tokens.shade.c900,
|
||||||
|
|
||||||
|
type: {
|
||||||
|
secondary: tokens.shade.c200,
|
||||||
|
inactive: tokens.shade.c50,
|
||||||
|
icon: tokens.shade.c50,
|
||||||
|
iconActivated: tokens.purple.c200,
|
||||||
|
activated: tokens.purple.c50
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
card: {
|
||||||
|
border: tokens.shade.c400,
|
||||||
|
background: tokens.shade.c400,
|
||||||
|
altBackground: tokens.shade.c400
|
||||||
|
},
|
||||||
|
|
||||||
|
saveBar: {
|
||||||
|
background: tokens.shade.c800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
utils: {
|
||||||
|
divider: tokens.ash.c300
|
||||||
|
},
|
||||||
|
|
||||||
|
errors: {
|
||||||
|
card: tokens.shade.c800,
|
||||||
|
border: tokens.ash.c500,
|
||||||
|
|
||||||
|
type: {
|
||||||
|
secondary: tokens.ash.c100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
about: {
|
||||||
|
circle: tokens.ash.c500,
|
||||||
|
circleText: tokens.ash.c50
|
||||||
|
},
|
||||||
|
|
||||||
|
editBadge: {
|
||||||
|
bg: tokens.ash.c500,
|
||||||
|
bgHover: tokens.ash.c400,
|
||||||
|
text: tokens.ash.c50
|
||||||
|
},
|
||||||
|
|
||||||
|
progress: {
|
||||||
|
background: tokens.ash.c50,
|
||||||
|
preloaded: tokens.ash.c50,
|
||||||
|
filled: tokens.purple.c200
|
||||||
|
},
|
||||||
|
|
||||||
|
video: {
|
||||||
|
buttonBackground: tokens.ash.c200,
|
||||||
|
|
||||||
|
autoPlay: {
|
||||||
|
background: tokens.ash.c700,
|
||||||
|
hover: tokens.ash.c500
|
||||||
|
},
|
||||||
|
|
||||||
|
scraping: {
|
||||||
|
card: tokens.shade.c700,
|
||||||
|
loading: tokens.purple.c200,
|
||||||
|
noresult: tokens.ash.c100
|
||||||
|
},
|
||||||
|
|
||||||
|
audio: {
|
||||||
|
set: tokens.purple.c200
|
||||||
|
},
|
||||||
|
|
||||||
|
context: {
|
||||||
|
background: tokens.ash.c900,
|
||||||
|
light: tokens.shade.c50,
|
||||||
|
border: tokens.ash.c600,
|
||||||
|
hoverColor: tokens.ash.c600,
|
||||||
|
buttonFocus: tokens.ash.c500,
|
||||||
|
flagBg: tokens.ash.c500,
|
||||||
|
inputBg: tokens.ash.c600,
|
||||||
|
buttonOverInputHover: tokens.ash.c500,
|
||||||
|
inputPlaceholder: tokens.ash.c200,
|
||||||
|
cardBorder: tokens.ash.c700,
|
||||||
|
slider: tokens.ash.c50,
|
||||||
|
sliderFilled: tokens.purple.c200,
|
||||||
|
|
||||||
|
buttons: {
|
||||||
|
list: tokens.ash.c700,
|
||||||
|
active: tokens.ash.c900
|
||||||
|
},
|
||||||
|
|
||||||
|
closeHover: tokens.ash.c800,
|
||||||
|
|
||||||
|
type: {
|
||||||
|
secondary: tokens.ash.c200,
|
||||||
|
accent: tokens.purple.c200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
260
themes/list/mocha.ts
Normal file
260
themes/list/mocha.ts
Normal file
|
|
@ -0,0 +1,260 @@
|
||||||
|
import { createTheme } from "../types";
|
||||||
|
|
||||||
|
const tokens = {
|
||||||
|
purple: {
|
||||||
|
c50: "#E2AB68FF",
|
||||||
|
c100: "#B27C39FF",
|
||||||
|
c200: "#B1853FFF",
|
||||||
|
c300: "#88581DFF",
|
||||||
|
c400: "#8B5C27FF",
|
||||||
|
c500: "#905C22FF",
|
||||||
|
c600: "#784E1CFF",
|
||||||
|
c700: "#432A04FF",
|
||||||
|
c800: "#412604FF",
|
||||||
|
c900: "#2A1D03FF"
|
||||||
|
},
|
||||||
|
shade: {
|
||||||
|
c25: "#B38F5DFF",
|
||||||
|
c50: "#907D67FF",
|
||||||
|
c100: "#7A6A52FF",
|
||||||
|
c200: "#60523FFF",
|
||||||
|
c300: "#4F4432FF",
|
||||||
|
c400: "#413727FF",
|
||||||
|
c500: "#322C1EFF",
|
||||||
|
c600: "#281E17FF",
|
||||||
|
c700: "#221D13FF",
|
||||||
|
c800: "#1B160FFF",
|
||||||
|
c900: "#120F0AFF"
|
||||||
|
},
|
||||||
|
ash: {
|
||||||
|
c50: "#9B877FFF",
|
||||||
|
c100: "#7B665BFF",
|
||||||
|
c200: "#645044FF",
|
||||||
|
c300: "#4E3C2BFF",
|
||||||
|
c400: "#423420FF",
|
||||||
|
c500: "#3C2F1CFF",
|
||||||
|
c600: "#322517FF",
|
||||||
|
c700: "#292113FF",
|
||||||
|
c800: "#201910FF",
|
||||||
|
c900: "#16100CFF"
|
||||||
|
},
|
||||||
|
blue: {
|
||||||
|
c50: "#F5DBADFF",
|
||||||
|
c100: "#CCB279FF",
|
||||||
|
c200: "#987A4EFF",
|
||||||
|
c300: "#775936FF",
|
||||||
|
c400: "#785D34FF",
|
||||||
|
c500: "#534024FF",
|
||||||
|
c600: "#41321BFFFF",
|
||||||
|
c700: "#362C17FF",
|
||||||
|
c800: "#201810FF",
|
||||||
|
c900: "#13100BFF"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default createTheme({
|
||||||
|
name: "mocha",
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
themePreview: {
|
||||||
|
primary: tokens.blue.c200,
|
||||||
|
secondary: tokens.shade.c50
|
||||||
|
},
|
||||||
|
|
||||||
|
pill: {
|
||||||
|
background: tokens.shade.c300,
|
||||||
|
backgroundHover: tokens.shade.c200,
|
||||||
|
highlight: tokens.blue.c200,
|
||||||
|
|
||||||
|
activeBackground: tokens.shade.c300,
|
||||||
|
},
|
||||||
|
|
||||||
|
global: {
|
||||||
|
accentA: tokens.blue.c200,
|
||||||
|
accentB: tokens.blue.c300
|
||||||
|
},
|
||||||
|
|
||||||
|
lightBar: {
|
||||||
|
light: tokens.blue.c400
|
||||||
|
},
|
||||||
|
|
||||||
|
buttons: {
|
||||||
|
toggle: tokens.purple.c300,
|
||||||
|
toggleDisabled: tokens.ash.c500,
|
||||||
|
|
||||||
|
secondary: tokens.ash.c700,
|
||||||
|
secondaryHover: tokens.ash.c700,
|
||||||
|
purple: tokens.purple.c500,
|
||||||
|
purpleHover: tokens.purple.c400,
|
||||||
|
cancel: tokens.ash.c500,
|
||||||
|
cancelHover: tokens.ash.c300
|
||||||
|
},
|
||||||
|
|
||||||
|
background: {
|
||||||
|
main: tokens.shade.c900,
|
||||||
|
secondary: tokens.shade.c600,
|
||||||
|
secondaryHover: tokens.shade.c400,
|
||||||
|
accentA: tokens.purple.c500,
|
||||||
|
accentB: tokens.blue.c500
|
||||||
|
},
|
||||||
|
|
||||||
|
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.shade.c500,
|
||||||
|
hoverBackground: tokens.shade.c600,
|
||||||
|
focused: tokens.shade.c400,
|
||||||
|
placeholder: tokens.shade.c100,
|
||||||
|
icon: tokens.shade.c100
|
||||||
|
},
|
||||||
|
|
||||||
|
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
|
||||||
|
},
|
||||||
|
|
||||||
|
largeCard: {
|
||||||
|
background: tokens.shade.c600,
|
||||||
|
icon: tokens.purple.c400
|
||||||
|
},
|
||||||
|
|
||||||
|
dropdown: {
|
||||||
|
background: tokens.shade.c600,
|
||||||
|
altBackground: tokens.shade.c700,
|
||||||
|
hoverBackground: tokens.shade.c500,
|
||||||
|
text: tokens.shade.c50,
|
||||||
|
secondary: tokens.shade.c100,
|
||||||
|
border: tokens.shade.c400,
|
||||||
|
contentBackground: tokens.shade.c500
|
||||||
|
},
|
||||||
|
|
||||||
|
authentication: {
|
||||||
|
border: tokens.shade.c300,
|
||||||
|
inputBg: tokens.shade.c600,
|
||||||
|
inputBgHover: tokens.shade.c500,
|
||||||
|
wordBackground: tokens.shade.c500,
|
||||||
|
copyText: tokens.shade.c100,
|
||||||
|
copyTextHover: tokens.ash.c50
|
||||||
|
},
|
||||||
|
|
||||||
|
settings: {
|
||||||
|
sidebar: {
|
||||||
|
activeLink: tokens.shade.c600,
|
||||||
|
badge: tokens.shade.c900,
|
||||||
|
|
||||||
|
type: {
|
||||||
|
secondary: tokens.shade.c200,
|
||||||
|
inactive: tokens.shade.c50,
|
||||||
|
icon: tokens.shade.c50,
|
||||||
|
iconActivated: tokens.purple.c200,
|
||||||
|
activated: tokens.purple.c50
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
card: {
|
||||||
|
border: tokens.shade.c400,
|
||||||
|
background: tokens.shade.c400,
|
||||||
|
altBackground: tokens.shade.c400
|
||||||
|
},
|
||||||
|
|
||||||
|
saveBar: {
|
||||||
|
background: tokens.shade.c800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
utils: {
|
||||||
|
divider: tokens.ash.c300
|
||||||
|
},
|
||||||
|
|
||||||
|
errors: {
|
||||||
|
card: tokens.shade.c800,
|
||||||
|
border: tokens.ash.c500,
|
||||||
|
|
||||||
|
type: {
|
||||||
|
secondary: tokens.ash.c100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
about: {
|
||||||
|
circle: tokens.ash.c500,
|
||||||
|
circleText: tokens.ash.c50
|
||||||
|
},
|
||||||
|
|
||||||
|
editBadge: {
|
||||||
|
bg: tokens.ash.c500,
|
||||||
|
bgHover: tokens.ash.c400,
|
||||||
|
text: tokens.ash.c50
|
||||||
|
},
|
||||||
|
|
||||||
|
progress: {
|
||||||
|
background: tokens.ash.c50,
|
||||||
|
preloaded: tokens.ash.c50,
|
||||||
|
filled: tokens.purple.c200
|
||||||
|
},
|
||||||
|
|
||||||
|
video: {
|
||||||
|
buttonBackground: tokens.ash.c200,
|
||||||
|
|
||||||
|
autoPlay: {
|
||||||
|
background: tokens.ash.c700,
|
||||||
|
hover: tokens.ash.c500
|
||||||
|
},
|
||||||
|
|
||||||
|
scraping: {
|
||||||
|
card: tokens.shade.c700,
|
||||||
|
loading: tokens.purple.c200,
|
||||||
|
noresult: tokens.ash.c100
|
||||||
|
},
|
||||||
|
|
||||||
|
audio: {
|
||||||
|
set: tokens.purple.c200
|
||||||
|
},
|
||||||
|
|
||||||
|
context: {
|
||||||
|
background: tokens.ash.c900,
|
||||||
|
light: tokens.shade.c50,
|
||||||
|
border: tokens.ash.c600,
|
||||||
|
hoverColor: tokens.ash.c600,
|
||||||
|
buttonFocus: tokens.ash.c500,
|
||||||
|
flagBg: tokens.ash.c500,
|
||||||
|
inputBg: tokens.ash.c600,
|
||||||
|
buttonOverInputHover: tokens.ash.c500,
|
||||||
|
inputPlaceholder: tokens.ash.c200,
|
||||||
|
cardBorder: tokens.ash.c700,
|
||||||
|
slider: tokens.ash.c50,
|
||||||
|
sliderFilled: tokens.purple.c200,
|
||||||
|
|
||||||
|
buttons: {
|
||||||
|
list: tokens.ash.c700,
|
||||||
|
active: tokens.ash.c900
|
||||||
|
},
|
||||||
|
|
||||||
|
closeHover: tokens.ash.c800,
|
||||||
|
|
||||||
|
type: {
|
||||||
|
secondary: tokens.ash.c200,
|
||||||
|
accent: tokens.purple.c200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
260
themes/list/pink.ts
Normal file
260
themes/list/pink.ts
Normal file
|
|
@ -0,0 +1,260 @@
|
||||||
|
import { createTheme } from "../types";
|
||||||
|
|
||||||
|
const tokens = {
|
||||||
|
purple: {
|
||||||
|
c50: "#E964E9FF",
|
||||||
|
c100: "#CE40ADFF",
|
||||||
|
c200: "#C132BCFF",
|
||||||
|
c300: "#A1117DFF",
|
||||||
|
c400: "#AE299AFF",
|
||||||
|
c500: "#98147EFF",
|
||||||
|
c600: "#7D0E6CFF",
|
||||||
|
c700: "#430431FF",
|
||||||
|
c800: "#410440FF",
|
||||||
|
c900: "#2A0324FF"
|
||||||
|
},
|
||||||
|
shade: {
|
||||||
|
c25: "#B35DA5FF",
|
||||||
|
c50: "#906788FF",
|
||||||
|
c100: "#7A5275FF",
|
||||||
|
c200: "#603F5BFF",
|
||||||
|
c300: "#4F324DFF",
|
||||||
|
c400: "#412738FF",
|
||||||
|
c500: "#321E31FF",
|
||||||
|
c600: "#281726FF",
|
||||||
|
c700: "#211322FF",
|
||||||
|
c800: "#1B0F1AFF",
|
||||||
|
c900: "#120A11FF"
|
||||||
|
},
|
||||||
|
ash: {
|
||||||
|
c50: "#9B7F95FF",
|
||||||
|
c100: "#7B5B75FF",
|
||||||
|
c200: "#64445FFF",
|
||||||
|
c300: "#4E2B48FF",
|
||||||
|
c400: "#412042FF",
|
||||||
|
c500: "#41203EFF",
|
||||||
|
c600: "#32172DFF",
|
||||||
|
c700: "#291328FF",
|
||||||
|
c800: "#1E1020FF",
|
||||||
|
c900: "#150C16FF"
|
||||||
|
},
|
||||||
|
blue: {
|
||||||
|
c50: "#F5ADEEFF",
|
||||||
|
c100: "#CC79C8FF",
|
||||||
|
c200: "#AE5D9CFF",
|
||||||
|
c300: "#8C3B87FF",
|
||||||
|
c400: "#5B2353FF",
|
||||||
|
c500: "#501F4CFF",
|
||||||
|
c600: "#411B3AFFFF",
|
||||||
|
c700: "#361736FF",
|
||||||
|
c800: "#20101EFF",
|
||||||
|
c900: "#130B12FF"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default createTheme({
|
||||||
|
name: "pink",
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
themePreview: {
|
||||||
|
primary: tokens.blue.c200,
|
||||||
|
secondary: tokens.shade.c50
|
||||||
|
},
|
||||||
|
|
||||||
|
pill: {
|
||||||
|
background: tokens.shade.c300,
|
||||||
|
backgroundHover: tokens.shade.c200,
|
||||||
|
highlight: tokens.blue.c200,
|
||||||
|
|
||||||
|
activeBackground: tokens.shade.c300,
|
||||||
|
},
|
||||||
|
|
||||||
|
global: {
|
||||||
|
accentA: tokens.blue.c200,
|
||||||
|
accentB: tokens.blue.c300
|
||||||
|
},
|
||||||
|
|
||||||
|
lightBar: {
|
||||||
|
light: tokens.blue.c400
|
||||||
|
},
|
||||||
|
|
||||||
|
buttons: {
|
||||||
|
toggle: tokens.purple.c300,
|
||||||
|
toggleDisabled: tokens.ash.c500,
|
||||||
|
|
||||||
|
secondary: tokens.ash.c700,
|
||||||
|
secondaryHover: tokens.ash.c700,
|
||||||
|
purple: tokens.purple.c500,
|
||||||
|
purpleHover: tokens.purple.c400,
|
||||||
|
cancel: tokens.ash.c500,
|
||||||
|
cancelHover: tokens.ash.c300
|
||||||
|
},
|
||||||
|
|
||||||
|
background: {
|
||||||
|
main: tokens.shade.c900,
|
||||||
|
secondary: tokens.shade.c600,
|
||||||
|
secondaryHover: tokens.shade.c400,
|
||||||
|
accentA: tokens.purple.c500,
|
||||||
|
accentB: tokens.blue.c500
|
||||||
|
},
|
||||||
|
|
||||||
|
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.shade.c500,
|
||||||
|
hoverBackground: tokens.shade.c600,
|
||||||
|
focused: tokens.shade.c400,
|
||||||
|
placeholder: tokens.shade.c100,
|
||||||
|
icon: tokens.shade.c100
|
||||||
|
},
|
||||||
|
|
||||||
|
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
|
||||||
|
},
|
||||||
|
|
||||||
|
largeCard: {
|
||||||
|
background: tokens.shade.c600,
|
||||||
|
icon: tokens.purple.c400
|
||||||
|
},
|
||||||
|
|
||||||
|
dropdown: {
|
||||||
|
background: tokens.shade.c600,
|
||||||
|
altBackground: tokens.shade.c700,
|
||||||
|
hoverBackground: tokens.shade.c500,
|
||||||
|
text: tokens.shade.c50,
|
||||||
|
secondary: tokens.shade.c100,
|
||||||
|
border: tokens.shade.c400,
|
||||||
|
contentBackground: tokens.shade.c500
|
||||||
|
},
|
||||||
|
|
||||||
|
authentication: {
|
||||||
|
border: tokens.shade.c300,
|
||||||
|
inputBg: tokens.shade.c600,
|
||||||
|
inputBgHover: tokens.shade.c500,
|
||||||
|
wordBackground: tokens.shade.c500,
|
||||||
|
copyText: tokens.shade.c100,
|
||||||
|
copyTextHover: tokens.ash.c50
|
||||||
|
},
|
||||||
|
|
||||||
|
settings: {
|
||||||
|
sidebar: {
|
||||||
|
activeLink: tokens.shade.c600,
|
||||||
|
badge: tokens.shade.c900,
|
||||||
|
|
||||||
|
type: {
|
||||||
|
secondary: tokens.shade.c200,
|
||||||
|
inactive: tokens.shade.c50,
|
||||||
|
icon: tokens.shade.c50,
|
||||||
|
iconActivated: tokens.purple.c200,
|
||||||
|
activated: tokens.purple.c50
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
card: {
|
||||||
|
border: tokens.shade.c400,
|
||||||
|
background: tokens.shade.c400,
|
||||||
|
altBackground: tokens.shade.c400
|
||||||
|
},
|
||||||
|
|
||||||
|
saveBar: {
|
||||||
|
background: tokens.shade.c800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
utils: {
|
||||||
|
divider: tokens.ash.c300
|
||||||
|
},
|
||||||
|
|
||||||
|
errors: {
|
||||||
|
card: tokens.shade.c800,
|
||||||
|
border: tokens.ash.c500,
|
||||||
|
|
||||||
|
type: {
|
||||||
|
secondary: tokens.ash.c100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
about: {
|
||||||
|
circle: tokens.ash.c500,
|
||||||
|
circleText: tokens.ash.c50
|
||||||
|
},
|
||||||
|
|
||||||
|
editBadge: {
|
||||||
|
bg: tokens.ash.c500,
|
||||||
|
bgHover: tokens.ash.c400,
|
||||||
|
text: tokens.ash.c50
|
||||||
|
},
|
||||||
|
|
||||||
|
progress: {
|
||||||
|
background: tokens.ash.c50,
|
||||||
|
preloaded: tokens.ash.c50,
|
||||||
|
filled: tokens.purple.c200
|
||||||
|
},
|
||||||
|
|
||||||
|
video: {
|
||||||
|
buttonBackground: tokens.ash.c200,
|
||||||
|
|
||||||
|
autoPlay: {
|
||||||
|
background: tokens.ash.c700,
|
||||||
|
hover: tokens.ash.c500
|
||||||
|
},
|
||||||
|
|
||||||
|
scraping: {
|
||||||
|
card: tokens.shade.c700,
|
||||||
|
loading: tokens.purple.c200,
|
||||||
|
noresult: tokens.ash.c100
|
||||||
|
},
|
||||||
|
|
||||||
|
audio: {
|
||||||
|
set: tokens.purple.c200
|
||||||
|
},
|
||||||
|
|
||||||
|
context: {
|
||||||
|
background: tokens.ash.c900,
|
||||||
|
light: tokens.shade.c50,
|
||||||
|
border: tokens.ash.c600,
|
||||||
|
hoverColor: tokens.ash.c600,
|
||||||
|
buttonFocus: tokens.ash.c500,
|
||||||
|
flagBg: tokens.ash.c500,
|
||||||
|
inputBg: tokens.ash.c600,
|
||||||
|
buttonOverInputHover: tokens.ash.c500,
|
||||||
|
inputPlaceholder: tokens.ash.c200,
|
||||||
|
cardBorder: tokens.ash.c700,
|
||||||
|
slider: tokens.ash.c50,
|
||||||
|
sliderFilled: tokens.purple.c200,
|
||||||
|
|
||||||
|
buttons: {
|
||||||
|
list: tokens.ash.c700,
|
||||||
|
active: tokens.ash.c900
|
||||||
|
},
|
||||||
|
|
||||||
|
closeHover: tokens.ash.c800,
|
||||||
|
|
||||||
|
type: {
|
||||||
|
secondary: tokens.ash.c200,
|
||||||
|
accent: tokens.purple.c200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue