diff --git a/index.html b/index.html index 5dd45a1e..3eb390e8 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,6 @@
- + diff --git a/package.json b/package.json index d64671a4..881c625a 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@preact/preset-vite": "^2.0.0", "@styled-icons/bootstrap": "^10.34.0", "@styled-icons/feather": "^10.34.0", + "@types/node": "^15.12.3", "@types/preact-i18n": "^2.3.0", "@types/styled-components": "^5.1.10", "preact-i18n": "^2.4.0-preactx", diff --git a/src/app.tsx b/src/app.tsx index c16cf4ca..9afc23d2 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,79 +1,7 @@ -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'; -import ColourSwatches from './components/ui/ColourSwatches'; -import Tip from './components/ui/Tip'; -import Radio from './components/ui/Radio'; -import Overline from './components/ui/Overline'; - -import Locale from './context/Locale'; - -// ! 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); - let [colour, setColour] = useState('#FD6671'); - let [selected, setSelected] = useState<'a' | 'b' | 'c'>('a'); - return ( <> - - - - - - - - I am a banner! - Do you want thing?? - - - - - - - - - - - setColour(v)} /> - I am a tip! I provide valuable information. - setSelected('a')}>First option - setSelected('b')}>Second option - setSelected('c')}>Last option - Normal overline - Subtle overline - Error overline - Normal overline - Subtle overline - - +

REVOLT

) } diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx new file mode 100644 index 00000000..580e204b --- /dev/null +++ b/src/context/Theme.tsx @@ -0,0 +1,16 @@ +import { createGlobalStyle } from "styled-components"; + +// ! 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"}; + +export const GlobalTheme = createGlobalStyle` +:root { + ${ + Object.keys(a) + .map(key => { + return `--${key}: ${(a as any)[key]};`; + }) + } +} +`; +// ! TEMP END diff --git a/src/main.tsx b/src/main.tsx index e847ff22..9d425db7 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,5 +1,5 @@ import { render } from 'preact' -import './styles/index.scss' +import '../styles/index.scss' import { App } from './app' render(, document.getElementById('app')!) diff --git a/src/styles/_elements.scss b/src/styles/_elements.scss new file mode 100644 index 00000000..d0e65241 --- /dev/null +++ b/src/styles/_elements.scss @@ -0,0 +1,41 @@ +::-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; +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss new file mode 100644 index 00000000..c290de23 --- /dev/null +++ b/src/styles/_fonts.scss @@ -0,0 +1,9 @@ +@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"; diff --git a/src/styles/_page.scss b/src/styles/_page.scss new file mode 100644 index 00000000..210e54c3 --- /dev/null +++ b/src/styles/_page.scss @@ -0,0 +1,31 @@ +* { + 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); +} diff --git a/src/styles/index.scss b/src/styles/index.scss index b6591dc3..d07896c1 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,86 +1,3 @@ -@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; -} +@import "elements"; +@import "fonts"; +@import "page"; diff --git a/src/styles/temp-theme.scss b/src/styles/temp-theme.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/tsconfig.json b/tsconfig.json index d245d362..56bf37aa 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,5 +17,5 @@ "jsxFactory": "h", "jsxFragmentFactory": "Fragment" }, - "include": ["src"] + "include": ["src", "ui/ui.tsx"] } diff --git a/ui/index.html b/ui/index.html new file mode 100644 index 00000000..fc1e6dc9 --- /dev/null +++ b/ui/index.html @@ -0,0 +1,13 @@ + + + + + + + REVOLT UI + + +
+ + + diff --git a/ui/ui.tsx b/ui/ui.tsx new file mode 100644 index 00000000..0e642dad --- /dev/null +++ b/ui/ui.tsx @@ -0,0 +1,68 @@ +import { useState } from 'preact/hooks'; +import styled from 'styled-components'; +import '../src/styles/index.scss' +import { render } from 'preact' + +import { GlobalTheme } from '../src/context/Theme'; + +export const UIDemo = styled.div` + gap: 12px; + padding: 12px; + display: flex; + flex-direction: column; + align-items: flex-start; +`; + +import Button from '../src/components/ui/Button'; +import Banner from '../src/components/ui/Banner'; +import Checkbox from '../src/components/ui/Checkbox'; +import ComboBox from '../src/components/ui/ComboBox'; +import InputBox from '../src/components/ui/InputBox'; +import ColourSwatches from '../src/components/ui/ColourSwatches'; +import Tip from '../src/components/ui/Tip'; +import Radio from '../src/components/ui/Radio'; +import Overline from '../src/components/ui/Overline'; + +export function UI() { + let [checked, setChecked] = useState(false); + let [colour, setColour] = useState('#FD6671'); + let [selected, setSelected] = useState<'a' | 'b' | 'c'>('a'); + + return ( + <> + + + + + I am a banner! + Do you want thing?? + + + + + + + + + + + setColour(v)} /> + I am a tip! I provide valuable information. + setSelected('a')}>First option + setSelected('b')}>Second option + setSelected('c')}>Last option + Normal overline + Subtle overline + Error overline + Normal overline + Subtle overline + + ) +} + +render(<> + + + + +, document.getElementById('app')!) diff --git a/vite.config.ts b/vite.config.ts index e3bdaffe..603d5d4a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,16 @@ +import { resolve } from 'path' import { defineConfig } from 'vite' import preact from '@preact/preset-vite' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [preact()] + plugins: [preact()], + build: { + rollupOptions: { + input: { + main: resolve(__dirname, 'index.html'), + ui: resolve(__dirname, 'ui/index.html') + } + } + } }) diff --git a/yarn.lock b/yarn.lock index f68abfd6..cc3c7a1e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -318,6 +318,11 @@ "@types/react" "*" hoist-non-react-statics "^3.3.0" +"@types/node@^15.12.3": + version "15.12.3" + resolved "https://registry.yarnpkg.com/@types/node/-/node-15.12.3.tgz#2817bf5f25bc82f56579018c53f7d41b1830b1af" + integrity sha512-SNt65CPCXvGNDZ3bvk1TQ0Qxoe3y1RKH88+wZ2Uf05dduBCqqFQ76ADP9pbT+Cpvj60SkRppMCh2Zo8tDixqjQ== + "@types/preact-i18n@^2.3.0": version "2.3.0" resolved "https://registry.yarnpkg.com/@types/preact-i18n/-/preact-i18n-2.3.0.tgz#d99d4a9ad03b0b65e57ed4d874447de74384e32f"