Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-01-11 20:10:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add frost and christmas themes

Browse source
This commit is contained in:
Pas 2025-12-01 15:00:08 -07:00
parent ad592edc65
commit 562d1fdd1c
5 changed files with 703 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/assets/locales/en.json
View file

@ -1026,7 +1026,9 @@
"popsicle": "Popsicle",
"hulk": "Hulk",
"autumn": "Autumn",
"skyrealm": "SkyRealm"
"skyrealm": "SkyRealm",
"frost": "Frost",
"christmas": "Christmas"
},
"title": "Appearance",
"options": {

10
src/pages/parts/settings/AppearancePart.tsx
View file

@ -60,6 +60,11 @@ const availableThemes = [
selector: "theme-autumn",
key: "settings.appearance.themes.autumn",
},
{
id: "frost",
selector: "theme-frost",
key: "settings.appearance.themes.frost",
},
{
id: "mocha",
selector: "theme-mocha",
@ -115,6 +120,11 @@ const availableThemes = [
selector: "theme-popsicle",
key: "settings.appearance.themes.popsicle",
},
{
id: "christmas",
selector: "theme-christmas",
key: "settings.appearance.themes.christmas",
},
{
id: "skyRealm",
selector: "theme-skyrealm",

4
themes/all.ts
View file

@ -18,6 +18,8 @@ import popsicle from "./list/popsicle";
import hulk from "./list/hulk";
import autumn from "./list/autumn";
import skyRealm from "./list/skyrealm";
import frost from "./list/frost";
import christmas from "./list/christmas";
export const allThemes = [
teal,
@ -28,6 +30,7 @@ export const allThemes = [
green,
forest,
autumn,
frost,
mocha,
pink,
grape,
@ -39,5 +42,6 @@ export const allThemes = [
hulk,
wolverine,
popsicle,
christmas,
skyRealm,
];

343
themes/list/christmas.ts Normal file
View 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(0, 80%, 80%, 1)", // Christmas red accent
c100: "hsla(0, 60%, 65%, 1)",
c200: "hsla(0, 50%, 50%, 1)",
c300: "hsla(0, 55%, 40%, 1)",
c400: "hsla(0, 60%, 30%, 1)",
c500: "hsla(0, 55%, 22%, 1)",
c600: "hsla(0, 50%, 18%, 1)",
c700: "hsla(0, 45%, 14%, 1)",
c800: "hsla(0, 35%, 10%, 1)",
c900: "hsla(0, 30%, 7%, 1)",
},
purple: {
c50: "hsla(0, 80%, 75%, 1)", // Christmas red accents
c100: "hsla(0, 90%, 55%, 1)",
c200: "hsla(0, 85%, 45%, 1)",
c300: "hsla(0, 85%, 45%, 1)",
c400: "hsla(0, 80%, 35%, 1)",
c500: "hsla(0, 75%, 28%, 1)",
c600: "hsla(0, 70%, 22%, 1)",
c700: "hsla(0, 60%, 18%, 1)",
c800: "hsla(0, 50%, 14%, 1)",
c900: "hsla(0, 40%, 10%, 1)",
},
ash: {
c50: "hsla(140, 11%, 55%, 1)", // Authentication copy text hover, progress background, progress preloaded - Christmas green grays
c100: "hsla(140, 15%, 42%, 1)", // Secondary text, badge text, video player scraping no result
c200: "hsla(140, 17%, 33%, 1)", // Media card bar color, video player button background
c300: "hsla(140, 29%, 24%, 1)", // Cancel button hover, utils divider
c400: "hsla(140, 35%, 19%, 1)", // Card border and background, dropdown border, onboarding bar, edit badge hover, sidebar type
c500: "hsla(140, 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(140, 32%, 14%, 1)", // Background secondary, dropdown alt background, dropdown border, onboarding card border
c700: "hsla(140, 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(140, 33%, 9%, 1)", // Background main, settings sidebar badge, errors border
c900: "hsla(140, 25%, 7%, 1)", // Media card hover shadow, settings sidebar active link, video player context background
},
shade: {
c25: "hsla(140, 33%, 53%, 1)", // Media card hover accent - Christmas green
c50: "hsla(140, 17%, 48%, 1)", // Theme secondary color, text, dimmed text
c100: "hsla(140, 20%, 40%, 1)", // Search placeholder and icon, dropdown secondary text
c200: "hsla(140, 20%, 31%, 1)", // Pill background hover, onboarding divider
c300: "hsla(140, 22%, 25%, 1)", // Pill background, authentication border, onboarding card
c400: "hsla(140, 25%, 21%, 1)", // Background secondary hover, dropdown border, onboarding bar, onboarding divider
c500: "hsla(140, 26%, 16%, 1)", // Search background, search focus, dropdown hover background, dropdown content background, authentication input background hover, authentication word background
c600: "hsla(140, 31%, 12%, 1)", // Modal background, dropdown background, onboarding card border
c700: "hsla(140, 29%, 10%, 1)", // Dropdown alt background
c800: "hsla(140, 30%, 8%, 1)", // Background main, settings save bar, onboarding card
c900: "hsla(140, 29%, 5%, 1)", // Media card hover shadow
},
};
export default createTheme({
name: "christmas",
extend: {
colors: {
themePreview: {
primary: tokens.blue.c200,
secondary: tokens.ash.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.ash.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,
},
},
},
},
},
});

343
themes/list/frost.ts Normal file
View 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(350, 40%, 65%, 1)", // Error text - cool magenta-red
c200: "hsla(350, 35%, 55%, 1)", // Video player scraping error - muted cool red
c300: "hsla(350, 30%, 45%, 1)", // Danger button - deeper cool red
c400: "hsla(350, 25%, 35%, 1)", // Not currently used - dark cool red
},
green: {
c100: "hsla(170, 30%, 55%, 1)", // Success text - cool teal-green
c200: "hsla(170, 25%, 45%, 1)", // Video player scraping success - muted teal
c300: "hsla(170, 20%, 35%, 1)", // Not currently used - deeper cool teal
c400: "hsla(170, 15%, 25%, 1)", // Not currently used - dark cool teal
},
silver: {
c100: "hsla(210, 20%, 85%, 1)", // Primary button hover - cool blue-gray
c200: "hsla(210, 15%, 75%, 1)", // Not currently used - muted cool gray
c300: "hsla(210, 10%, 60%, 1)", // Secondary button text - subtle blue tint
c400: "hsla(210, 8%, 45%, 1)", // Main text in video player context - cool gray
},
yellow: {
c100: "hsla(190, 60%, 75%, 1)", // Best onboarding highlight - cool cyan
c200: "hsla(190, 50%, 65%, 1)", // Dropdown highlight hover - muted cyan
c300: "hsla(190, 40%, 55%, 1)", // Not currently used - deeper cyan
c400: "hsla(190, 30%, 45%, 1)", // Dropdown highlight - dark cyan
},
rose: {
c100: "hsla(320, 35%, 60%, 1)", // Authentication error text - cool magenta
c200: "hsla(320, 30%, 50%, 1)", // Danger button hover - muted cool magenta
c300: "hsla(320, 25%, 40%, 1)", // Danger button - deeper cool magenta
c400: "hsla(320, 20%, 30%, 1)", // Not currently used - dark cool magenta
},
},
blue: {
c50: "hsla(210, 100%, 88%, 1)", // soft cool blue
c100: "hsla(210, 80%, 75%, 1)", // brighter cool blue
c200: "hsla(210, 70%, 65%, 1)", // theme primary: cool blue
c300: "hsla(210, 60%, 50%, 1)", // accent B: darker cool blue
c400: "hsla(210, 50%, 40%, 1)", // light bar
c500: "hsla(210, 45%, 30%, 1)", // accent B background
c600: "hsla(210, 42%, 25%, 1)",
c700: "hsla(210, 40%, 20%, 1)",
c800: "hsla(210, 35%, 15%, 1)",
c900: "hsla(210, 30%, 10%, 1)",
},
purple: {
c50: "hsla(170, 40%, 75%, 1)", // soft cool teal for link hover
c100: "hsla(170, 45%, 60%, 1)", // bright cool teal logo/link
c200: "hsla(170, 50%, 50%, 1)", // cool teal progress/loader
c300: "hsla(170, 55%, 45%, 1)", // toggle/onboarding bar - cool teal
c400: "hsla(170, 60%, 40%, 1)", // card icon - cool teal
c500: "hsla(170, 65%, 32%, 1)", // accent A background - cool teal
c600: "hsla(170, 70%, 25%, 1)",
c700: "hsla(170, 75%, 18%, 1)",
c800: "hsla(170, 80%, 12%, 1)",
c900: "hsla(170, 85%, 8%, 1)",
},
ash: {
c50: "hsla(210, 20%, 60%, 1)", // subtle blue-tinted gray
c100: "hsla(210, 15%, 55%, 1)", // cool blue-gray
c200: "hsla(210, 10%, 35%, 1)", // sidebar border - blue tint
c300: "hsla(210, 8%, 28%, 1)", // card divider - blue tint
c400: "hsla(210, 6%, 22%, 1)", // bg + hover accents - blue tint
c500: "hsla(210, 45%, 25%, 1)", // accent B background
c600: "hsla(210, 42%, 20%, 1)",
c700: "hsla(210, 40%, 16%, 1)",
c800: "hsla(210, 35%, 10%, 1)",
c900: "hsla(210, 30%, 7%, 1)", // deepest shade, shadows
},
shade: {
c25: "hsla(210, 80%, 75%, 1)", // blue hover accent
c50: "hsla(210, 100%, 78%, 1)", // cool blue for main text
c100: "hsla(210, 80%, 65%, 1)", // placeholder/icon
c200: "hsla(210, 60%, 50%, 1)", // hover bg
c300: "hsla(210, 60%, 40%, 1)", // pill background, auth border
c400: "hsla(210, 50%, 26%, 1)", // light bar
c500: "hsla(210, 25%, 27%, 1)", // dropdown background - subtle blue tint
c600: "hsla(210, 20%, 20%, 1)", // modal/dropdown background - washed out blue
c700: "hsla(210, 15%, 16%, 1)", // alt bg - subtle blue tint
c800: "hsla(210, 38%, 12%, 1)", // main bg - lighter
c900: "hsla(210, 35%, 8%, 1)", // hover shadow - lighter
},
};
export default createTheme({
name: "frost",
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,
},
},
},
},
},
});