Initial commit

src/app.tsx

@@ -0,0 +1,60 @@
+import styled, { createGlobalStyle } from 'styled-components';
+import { useState } from 'preact/hooks';
+
+import { Button } from './components/ui/Button';
+import { Banner } from './components/ui/Banner';
+import { Checkbox } from './components/ui/Checkbox';
+import { ComboBox } from './components/ui/ComboBox';
+import { InputBox } from './components/ui/InputBox';
+
+// ! TEMP START
+let a = {"light":false,"accent":"#FD6671","background":"#191919","foreground":"#F6F6F6","block":"#2D2D2D","message-box":"#363636","mention":"rgba(251, 255, 0, 0.06)","success":"#65E572","warning":"#FAA352","error":"#F06464","hover":"rgba(0, 0, 0, 0.1)","sidebar-active":"#FD6671","scrollbar-thumb":"#CA525A","scrollbar-track":"transparent","primary-background":"#242424","primary-header":"#363636","secondary-background":"#1E1E1E","secondary-foreground":"#C8C8C8","secondary-header":"#2D2D2D","tertiary-background":"#4D4D4D","tertiary-foreground":"#848484","status-online":"#3ABF7E","status-away":"#F39F00","status-busy":"#F84848","status-streaming":"#977EFF","status-invisible":"#A5A5A5"};
+
+const GlobalTheme = createGlobalStyle`
+:root {
+	${
+		Object.keys(a)
+			.map(key => {
+				return `--${key}: ${(a as any)[key]};`;
+			})
+	}
+}
+`;
+// ! TEMP END
+
+export const UIDemo = styled.div`
+	gap: 12px;
+	padding: 12px;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+`;
+
+export function App() {
+	let [checked, setChecked] = useState(false);
+
+	return (
+		<>
+			<GlobalTheme />
+			<UIDemo>
+				<Button>Button (normal)</Button>
+				<Button contrast>Button (contrast)</Button>
+				<Button error>Button (error)</Button>
+				<Button contrast error>Button (contrast + error)</Button>
+				<Banner>I am a banner!</Banner>
+				<Checkbox checked={checked} onChange={setChecked} description="ok gamer">Do you want thing??</Checkbox>
+				<ComboBox>
+					<option>Select an option.</option>
+					<option>1</option>
+					<option>2</option>
+					<option>3</option>
+				</ComboBox>
+				<InputBox placeholder="Normal input box..." />
+				<InputBox placeholder="Contrast input box..." contrast />
+				<InputBox value="Input box with value" />
+				<InputBox value="Contrast with value" contrast />
+			</UIDemo>
+		</>
+	)
+}
+	

src/components/ui/Banner.tsx

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const Banner = styled.div`
+	padding: 8px;
+    font-size: 14px;
+    text-align: center;
+
+    color: var(--accent);
+    background: var(--primary-background);
+`;

src/components/ui/Button.tsx

@@ -0,0 +1,65 @@
+import styled, { css } from "styled-components";
+
+interface Props {
+    readonly contrast?: boolean;
+    readonly error?: boolean;
+};
+
+export const Button = styled.button<Props>`
+	z-index: 1;
+	padding: 8px;
+	font-size: 16px;
+	text-align: center;
+
+	transition: 0.2s ease opacity;
+	transition: 0.2s ease background-color;
+
+	background: var(--primary-background);
+    color: var(--foreground);
+
+	border-radius: 6px;
+	cursor: pointer;
+    border: none;
+
+	&:hover {
+		background: var(--secondary-header);
+	}
+
+    &:disabled {
+        background: var(--primary-background);
+    }
+
+    &:active {
+        background: var(--secondary-background);
+    }
+
+    ${props => props.contrast && css`
+        padding: 4px 8px;
+        background: var(--secondary-header);
+
+        &:hover {
+            background: var(--primary-header);
+        }
+
+        &:disabled {
+            background: var(--secondary-header);
+        }
+
+        &:active {
+            background: var(--secondary-background);
+        }
+    `}
+
+    ${props => props.error && css`
+        color: white;
+        background: var(--error);
+
+        &:hover {
+            filter: brightness(1.2)
+        }
+
+        &:disabled {
+            background: var(--error);
+        }
+    `}
+`;

src/components/ui/Checkbox.tsx

@@ -0,0 +1,93 @@
+import { Check } from '@styled-icons/feather';
+import styled, { css } from 'styled-components';
+import { VNode } from 'preact';
+
+const CheckboxBase = styled.label`
+	gap: 4px;
+    z-index: 1;
+    padding: 4px;
+    display: flex;
+    border-radius: 4px;
+    align-items: center;
+
+    cursor: pointer;
+    font-size: 18px;
+    user-select: none;
+    
+    transition: .2s ease all;
+
+    p {
+        margin: 0;
+    }
+
+    input {
+        display: none;
+    }
+`;
+
+const CheckboxContent = styled.span`
+    flex-grow: 1;
+    display: flex;
+    font-size: 1rem;
+    font-weight: 600;
+    flex-direction: column;
+`;
+
+const CheckboxDescription = styled.span`
+    font-size: 0.8em;
+    font-weight: 400;
+    color: var(--secondary-foreground);
+`;
+
+const Checkmark = styled.div<{ checked: boolean }>`
+    margin: 4px;
+    width: 24px;
+    height: 24px;
+    display: grid;
+    border-radius: 4px;
+    place-items: center;
+    background: var(--secondary-background);
+
+    svg {
+        color: var(--secondary-background);
+        stroke-width: 2;
+    }
+
+    ${ props => props.checked && css`
+        background: var(--accent);
+    ` }
+`;
+
+interface Props {
+    checked: boolean;
+    disabled?: boolean;
+    className?: string;
+    children: VNode | string;
+    description?: VNode | string;
+    onChange: (state: boolean) => void;
+}
+
+export function Checkbox(props: Props) {
+    return (
+        <CheckboxBase disabled={props.disabled}>
+            <CheckboxContent>
+                <span>{ props.children }</span>
+                {props.description && (
+                    <CheckboxDescription>
+                        {props.description}
+                    </CheckboxDescription>
+                )}
+            </CheckboxContent>
+            <input
+                type="checkbox"
+                checked={props.checked}
+                onChange={() =>
+                    !props.disabled && props.onChange(!props.checked)
+                }
+            />
+            <Checkmark checked={props.checked}>
+                <Check size={20} />
+            </Checkmark>
+        </CheckboxBase>
+    )
+}

src/components/ui/ComboBox.tsx

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const ComboBox = styled.select`
+	padding: 8px;
+    border-radius: 2px;
+    color: var(--secondary-foreground);
+    background: var(--secondary-background);
+`;

src/components/ui/InputBox.tsx

@@ -0,0 +1,33 @@
+import styled, { css } from "styled-components";
+
+interface Props {
+    readonly contrast?: boolean;
+};
+
+export const InputBox = styled.input<Props>`
+    z-index: 1;
+    padding: 8px 16px;
+    border-radius: 6px;
+    color: var(--foreground);
+    border: 2px solid transparent;
+    background: var(--primary-background);
+    transition: 0.2s ease background-color;
+    transition: border-color .2s ease-in-out;
+
+    &:hover {
+        background: var(--secondary-background);
+    }
+
+    &:focus {
+        border: 2px solid var(--accent);
+    }
+
+    ${ props => props.contrast && css`
+        color: var(--secondary-foreground);
+        background: var(--secondary-background);
+
+        &:hover {
+            background: var(--hover);
+        }
+    ` }
+`;

src/main.tsx

@@ -0,0 +1,5 @@
+import { render } from 'preact'
+import './styles/index.scss'
+import { App } from './app'
+
+render(<App />, document.getElementById('app')!)

src/preact.d.ts

@@ -0,0 +1 @@
+import JSX = preact.JSX

src/styles/index.scss

@@ -0,0 +1,86 @@
+@import "@fontsource/open-sans/300.css";
+@import "@fontsource/open-sans/400.css";
+@import "@fontsource/open-sans/600.css";
+@import "@fontsource/open-sans/700.css";
+
+@import "@fontsource/open-sans/300-italic.css";
+@import "@fontsource/open-sans/400-italic.css";
+@import "@fontsource/open-sans/600-italic.css";
+@import "@fontsource/open-sans/700-italic.css";
+
+@import "./temp-theme.scss";
+
+* {
+	text-rendering: optimizeLegibility !important;
+    -webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+
+    
+    scrollbar-width: thin;
+    box-sizing: border-box;
+}
+
+html {
+    contain: content;
+    background: var(--background);
+    background-size: cover !important;
+    background-repeat: no-repeat !important;
+}
+
+html,
+body {
+    font-family: "Open Sans", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    caret-color: var(--accent);
+    color: var(--foreground);
+
+    -webkit-tap-highlight-color: transparent;
+    -webkit-overflow-scrolling: touch;
+    -webkit-text-size-adjust: 100%;
+    overscroll-behavior: contain;
+
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+}
+
+::selection {
+    background: var(--accent);
+    color: var(--foreground);
+}
+
+::-moz-selection {
+    background: var(--accent);
+    color: var(--foreground);
+}
+
+::-webkit-selection {
+    background: var(--accent);
+    color: var(--foreground);
+}
+
+a,
+a:link,
+a:visited,
+a:hover {
+    text-decoration: none;
+    color: var(--accent);
+}
+
+hr {
+    border: 0;
+    height: 1px;
+    flex-grow: 1;
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />