mirror of
https://github.com/SrIzan10/osu-radio.git
synced 2026-05-01 10:55:12 +00:00
redo tw config, tw-button
This commit is contained in:
Tnixc
@@ -1,26 +1,40 @@
|
||||
import "./styles.css";
|
||||
import { Component, JSX, mergeProps } from "solid-js";
|
||||
import { Component, JSX, splitProps } from "solid-js";
|
||||
|
||||
type Props = JSX.IntrinsicElements["button"] & {
|
||||
variant?: "primary" | "secondary";
|
||||
size?: "medium" | "large";
|
||||
};
|
||||
const Button: Component<Props> = (props) => {
|
||||
const defaultProps: Props = {
|
||||
variant: "primary",
|
||||
size: "medium",
|
||||
type: "button",
|
||||
type ButtonVariant = "accent" | "primary" | "secondary" | "ghost";
|
||||
type ButtonSize = "medium" | "large";
|
||||
|
||||
interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
}
|
||||
|
||||
const Button: Component<ButtonProps> = (props) => {
|
||||
const [local, others] = splitProps(props, ["variant", "size", "class", "children"]);
|
||||
|
||||
const variant = () => local.variant || "primary";
|
||||
const size = () => local.size || "medium";
|
||||
|
||||
const baseClasses = "rounded-lg transition-colors duration-200 ease-in-out font-medium";
|
||||
const variantClasses = {
|
||||
accent: "bg-accent text-text ",
|
||||
primary: "bg-red text-thick-material hover:bg-text/40",
|
||||
secondary: "bg-surface text-text",
|
||||
ghost: "bg-transparent text-text",
|
||||
};
|
||||
const sizeClasses = {
|
||||
medium: "px-4 py-2",
|
||||
large: "px-7 py-3 font-bold",
|
||||
};
|
||||
|
||||
const mergedProps = mergeProps(defaultProps, props);
|
||||
const { children, variant: _, size: __, ...restProps } = mergedProps;
|
||||
const buttonClasses = () =>
|
||||
`${baseClasses} ${variantClasses[variant()]} ${sizeClasses[size()]} ${local.class || ''}`;
|
||||
|
||||
return (
|
||||
<button
|
||||
{...restProps}
|
||||
class={`button ${mergedProps.variant} ${mergedProps.size} ${mergedProps.class ?? ""}`}
|
||||
{...others}
|
||||
class={buttonClasses()}
|
||||
>
|
||||
{children}
|
||||
{local.children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,67 +4,39 @@
|
||||
|
||||
:root {
|
||||
/* Light theme */
|
||||
--color-thick-material-light: rgba(240, 240, 240, 0.95);
|
||||
--color-regular-material-light: rgba(230, 230, 230, 0.8);
|
||||
--color-text-light: #1a1a1a;
|
||||
--color-subtext-light: rgba(26, 26, 26, 0.6);
|
||||
--color-stroke-light: rgba(0, 0, 0, 0.1);
|
||||
--color-overlay-light: rgba(200, 200, 200, 0.85);
|
||||
--color-accent-light: #7c4dff;
|
||||
--color-surface-light: rgba(180, 180, 180, 0.2);
|
||||
--color-black-light: #ffffff;
|
||||
--color-red-light: #d32f2f;
|
||||
--color-green-light: #388e3c;
|
||||
--color-thin-material-light: rgba(255, 255, 255, 0.5);
|
||||
|
||||
/* Dark theme (original colors) */
|
||||
--color-thick-material-dark: rgba(13, 13, 13, 0.95);
|
||||
--color-regular-material-dark: rgba(18, 18, 18, 0.8);
|
||||
--color-text-dark: #eff1f5;
|
||||
--color-subtext-dark: rgba(239, 241, 245, 0.6);
|
||||
--color-stroke-dark: rgba(242, 244, 252, 0.1);
|
||||
--color-overlay-dark: rgba(161, 162, 171, 0.85);
|
||||
--color-accent-dark: #9366ed;
|
||||
--color-surface-dark: rgba(132, 137, 143, 0.2);
|
||||
--color-black-dark: #0e0e0e;
|
||||
--color-red-dark: #ed6666;
|
||||
--color-green-dark: #78cc32;
|
||||
--color-thin-material-dark: rgba(0, 0, 0, 0.5);
|
||||
--color-thick-material: 240, 240, 240;
|
||||
--color-regular-material: 230, 230, 230;
|
||||
--color-text: 26, 26, 26;
|
||||
--color-subtext: 26, 26, 26;
|
||||
--color-stroke: 0, 0, 0;
|
||||
--color-overlay: 200, 200, 200;
|
||||
--color-accent: 124, 77, 255;
|
||||
--color-surface: 180, 180, 180;
|
||||
--color-black: 255, 255, 255;
|
||||
--color-red: 211, 47, 47;
|
||||
--color-green: 56, 142, 60;
|
||||
--color-thin-material: 255, 255, 255;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-thick-material: var(--color-thick-material-light);
|
||||
--color-regular-material: var(--color-regular-material-light);
|
||||
--color-text: var(--color-text-light);
|
||||
--color-subtext: var(--color-subtext-light);
|
||||
--color-stroke: var(--color-stroke-light);
|
||||
--color-overlay: var(--color-overlay-light);
|
||||
--color-accent: var(--color-accent-light);
|
||||
--color-surface: var(--color-surface-light);
|
||||
--color-black: var(--color-black-light);
|
||||
--color-red: var(--color-red-light);
|
||||
--color-green: var(--color-green-light);
|
||||
--color-thin-material: var(--color-thin-material-light);
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-thick-material: var(--color-thick-material-dark);
|
||||
--color-regular-material: var(--color-regular-material-dark);
|
||||
--color-text: var(--color-text-dark);
|
||||
--color-subtext: var(--color-subtext-dark);
|
||||
--color-stroke: var(--color-stroke-dark);
|
||||
--color-overlay: var(--color-overlay-dark);
|
||||
--color-accent: var(--color-accent-dark);
|
||||
--color-surface: var(--color-surface-dark);
|
||||
--color-black: var(--color-black-dark);
|
||||
--color-red: var(--color-red-dark);
|
||||
--color-green: var(--color-green-dark);
|
||||
--color-thin-material: var(--color-thin-material-dark);
|
||||
/* Dark theme */
|
||||
--color-thick-material: 13, 13, 13;
|
||||
--color-regular-material: 18, 18, 18;
|
||||
--color-text: 239, 241, 245;
|
||||
--color-subtext: 239, 241, 245;
|
||||
--color-stroke: 242, 244, 252;
|
||||
--color-overlay: 161, 162, 171;
|
||||
--color-accent: 147, 102, 237;
|
||||
--color-surface: 132, 137, 143;
|
||||
--color-black: 14, 14, 14;
|
||||
--color-red: 237, 102, 102;
|
||||
--color-green: 120, 204, 50;
|
||||
--color-thin-material: 0, 0, 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito";
|
||||
src:
|
||||
|
||||
@@ -35,7 +35,7 @@ export default function DirSelectScene() {
|
||||
};
|
||||
return (
|
||||
<div class="dir-select relative grid h-screen place-items-center p-8">
|
||||
<style>
|
||||
<style>jj
|
||||
{`
|
||||
.dir-select{
|
||||
background: #D5C3E811;
|
||||
@@ -50,8 +50,8 @@ export default function DirSelectScene() {
|
||||
}
|
||||
`}{" "}
|
||||
</style>
|
||||
<div class="flex h-full max-h-[720px] w-full max-w-[860px] flex-col justify-between gap-12 overflow-y-auto rounded-lg border border-stroke bg-regular-material p-8 shadow-2xl">
|
||||
<h1 class="pt-12 text-center text-2xl text-text">Welcome to osu! radio</h1>
|
||||
<div class="flex h-full max-h-[720px] w-full max-w-[860px] flex-col justify-between gap-12 overflow-y-auto rounded-lg border border-stroke/10 bg-regular-material p-8 shadow-2xl">
|
||||
<h1 class="pt-12 text-center text-2xl text-red-400">Welcome to osu! radio</h1>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
|
||||
@@ -76,7 +76,7 @@ const NavItem: Component<NavItemProps> = ({ children, value, icon }) => {
|
||||
|
||||
const TabContent: Component = () => {
|
||||
return (
|
||||
<div class="bg-opacity-72 h-full w-[480px] min-w-[320px] overflow-y-auto border-r border-stroke bg-regular-material">
|
||||
<div class="bg-opacity-72 h-full w-[480px] min-w-[320px] overflow-y-auto border-r border-stroke/10 bg-regular-material">
|
||||
<Switch fallback={<div>Tab not found</div>}>
|
||||
<Match when={mainActiveTab() === TABS.SONGS.value}>
|
||||
<SongList isAllSongs={true} />
|
||||
|
||||
@@ -1,22 +1,23 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
|
||||
export default {
|
||||
content: ["./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
transparent: "transparent",
|
||||
"thick-material": "var(--color-thick-material)",
|
||||
"regular-material": "var(--color-regular-material)",
|
||||
text: "var(--color-text)",
|
||||
subtext: "var(--color-subtext)",
|
||||
stroke: "var(--color-stroke)",
|
||||
overlay: "var(--color-overlay)",
|
||||
accent: "var(--color-accent)",
|
||||
surface: "var(--color-surface)",
|
||||
black: "var(--color-black)",
|
||||
red: "var(--color-red)",
|
||||
green: "var(--color-green)",
|
||||
"thin-material": "var(--color-thin-material)",
|
||||
"thick-material": 'rgba(var(--color-thick-material), 0.9)',
|
||||
"regular-material": 'rgba(var(--color-regular-material), 0.8)',
|
||||
"thin-material": 'rgba(var(--color-thin-material), 0.5)',
|
||||
text: 'rgba(var(--color-text))',
|
||||
subtext: 'rgba(var(--color-subtext), 0.7)',
|
||||
stroke: 'rgba(var(--color-stroke), 0.1)',
|
||||
overlay: 'rgba(var(--color-overlay), 0.55)',
|
||||
accent: 'rgba(var(--color-accent))',
|
||||
surface: 'rgba(var(--color-surface), 0.2)',
|
||||
black: 'rgba(var(--color-black))',
|
||||
red: 'rgba(var(--color-red))',
|
||||
green: 'rgba(var(--color-green))',
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -24,5 +25,5 @@ export default {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
darkMode: "media", // or 'class' if you prefer manual dark mode switching
|
||||
darkMode: "media",
|
||||
};
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
{
|
||||
"files": [],
|
||||
"compilerOptions": {
|
||||
"jsx": "react"
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
|
||||
Reference in New Issue
Block a user