Add base calculator
This commit is contained in:
commit
0ce99f5590
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
50
README.md
Normal file
50
README.md
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||
|
||||
- Configure the top-level `parserOptions` property like this:
|
||||
|
||||
```js
|
||||
export default tseslint.config({
|
||||
languageOptions: {
|
||||
// other options...
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
|
||||
- Optionally add `...tseslint.configs.stylisticTypeChecked`
|
||||
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import react from 'eslint-plugin-react'
|
||||
|
||||
export default tseslint.config({
|
||||
// Set the react version
|
||||
settings: { react: { version: '18.3' } },
|
||||
plugins: {
|
||||
// Add the react plugin
|
||||
react,
|
||||
},
|
||||
rules: {
|
||||
// other rules...
|
||||
// Enable its recommended rules
|
||||
...react.configs.recommended.rules,
|
||||
...react.configs['jsx-runtime'].rules,
|
||||
},
|
||||
})
|
||||
```
|
||||
28
eslint.config.js
Normal file
28
eslint.config.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
|
||||
export default tseslint.config(
|
||||
{ ignores: ['dist'] },
|
||||
{
|
||||
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
plugins: {
|
||||
'react-hooks': reactHooks,
|
||||
'react-refresh': reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
},
|
||||
)
|
||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
3084
package-lock.json
generated
Normal file
3084
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
31
package.json
Normal file
31
package.json
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "react-calculator",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"list-react-files": "^0.2.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.13.0",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@vitejs/plugin-react": "^4.3.3",
|
||||
"eslint": "^9.13.0",
|
||||
"eslint-plugin-react-hooks": "^5.0.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.14",
|
||||
"globals": "^15.11.0",
|
||||
"react-router-dom": "^6.28.0",
|
||||
"typescript": "~5.6.2",
|
||||
"typescript-eslint": "^8.11.0",
|
||||
"vite": "^5.4.10"
|
||||
}
|
||||
}
|
||||
18
src/App.tsx
Normal file
18
src/App.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import Calculator from './Calculator';
|
||||
import AddonStore from './AddonStore';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Calculator />} />
|
||||
<Route path="addons" element={<AddonStore />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
173
src/Calculator.tsx
Normal file
173
src/Calculator.tsx
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
import { useState } from 'react'
|
||||
import { ButtonProps, CalculatorButton } from './components/Calculator/Button'
|
||||
import CalculatorPreview from './components/Calculator/CalculatorPreview';
|
||||
import ButtonList from './components/Calculator/ButtonList';
|
||||
|
||||
function Calculator() {
|
||||
let [calc, setCalc] = useState({
|
||||
sign: "",
|
||||
num: 0,
|
||||
res: 0,
|
||||
});
|
||||
|
||||
const roundToDigit = (num: number, digits: number) => (Math.round(num * Math.pow(10, digits) + Number.EPSILON) / Math.pow(10, digits));
|
||||
|
||||
const numClickHandler = (e: any) => {
|
||||
e.preventDefault();
|
||||
const value = e.target.innerHTML;
|
||||
|
||||
if (String(calc.num).length < 16) {
|
||||
setCalc({
|
||||
...calc,
|
||||
num:
|
||||
calc.num === 0 && value === "0"
|
||||
? 0
|
||||
: Number(calc.num) % 1 === 0
|
||||
? Number(calc.num + value)
|
||||
: calc.num + value,
|
||||
res: !calc.sign ? 0 : calc.res,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const commaClickHandler = (e: any) => {
|
||||
e.preventDefault();
|
||||
const value = e.target.innerHTML;
|
||||
|
||||
setCalc({
|
||||
...calc,
|
||||
num: !calc.num.toString().includes(".") ? calc.num + value : calc.num,
|
||||
});
|
||||
};
|
||||
|
||||
const signClickHandler = (e: any) => {
|
||||
e.preventDefault();
|
||||
const value = e.target.innerHTML;
|
||||
|
||||
setCalc({
|
||||
...calc,
|
||||
sign: value,
|
||||
res: !calc.res && calc.num ? calc.num : calc.res,
|
||||
num: 0,
|
||||
});
|
||||
};
|
||||
|
||||
const equalsClickHandler = () => {
|
||||
if (calc.sign && calc.num) {
|
||||
const math = (a: number, b: number, sign: string) =>
|
||||
sign === "+"
|
||||
? a + b
|
||||
: sign === "-"
|
||||
? a - b
|
||||
: sign === "X"
|
||||
? a * b
|
||||
: a / b;
|
||||
|
||||
setCalc({
|
||||
...calc,
|
||||
res:
|
||||
calc.num === 0 && calc.sign === "/"
|
||||
? 0
|
||||
: roundToDigit(math(Number(calc.res), Number(calc.num), calc.sign), 1),
|
||||
sign: "",
|
||||
num: 0,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const invertClickHandler = () => {
|
||||
setCalc({
|
||||
...calc,
|
||||
num: calc.num ? (Number(calc.num) * -1): 0,
|
||||
res: calc.res ? (Number(calc.res) * -1): 0,
|
||||
sign: "",
|
||||
});
|
||||
};
|
||||
|
||||
const percentClickHandler = () => {
|
||||
let num = calc.num ? calc.num : 0;
|
||||
let res = calc.res ? calc.res : 0;
|
||||
|
||||
setCalc({
|
||||
...calc,
|
||||
num: (num /= Math.pow(100, 1)),
|
||||
res: (res /= Math.pow(100, 1)),
|
||||
sign: "",
|
||||
});
|
||||
};
|
||||
|
||||
const resetClickHandler = () => {
|
||||
setCalc({
|
||||
...calc,
|
||||
sign: "",
|
||||
num: 0,
|
||||
res: 0,
|
||||
});
|
||||
};
|
||||
|
||||
const numberButton: ButtonProps[] = [
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '9' },
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '8' },
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '7' },
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '6' },
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '5' },
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '4' },
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '3' },
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '2' },
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '1' },
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '0', className: 'span-2' },
|
||||
{ variant: 'neutral', onClick: commaClickHandler, label: '.' },
|
||||
];
|
||||
const actionButtons: ButtonProps[] = [
|
||||
{ variant: 'secondary', onClick: resetClickHandler, label: 'C' },
|
||||
{ variant: 'primary', onClick: invertClickHandler, label: '+-' },
|
||||
{ variant: 'primary', onClick: percentClickHandler, label: '%' },
|
||||
{ variant: 'primary', onClick: signClickHandler, label: '÷' },
|
||||
{ variant: 'primary', onClick: signClickHandler, label: '×' },
|
||||
{ variant: 'primary', onClick: signClickHandler, label: '−' },
|
||||
{ variant: 'primary', onClick: signClickHandler, label: '+' },
|
||||
{ variant: 'secondary', onClick: equalsClickHandler, label: '=' },
|
||||
];
|
||||
const buttons: ButtonProps[] = [
|
||||
{ variant: 'secondary', onClick: resetClickHandler, label: 'C' },
|
||||
{ variant: 'primary', onClick: invertClickHandler, label: '+-' },
|
||||
{ variant: 'primary', onClick: percentClickHandler, label: '%' },
|
||||
{ variant: 'primary', onClick: signClickHandler, label: '÷' },
|
||||
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '7' },
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '8' },
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '9' },
|
||||
{ variant: 'primary', onClick: signClickHandler, label: '×' },
|
||||
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '4' },
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '5' },
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '6' },
|
||||
{ variant: 'primary', onClick: signClickHandler, label: '−' },
|
||||
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '1' },
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '2' },
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '3' },
|
||||
{ variant: 'primary', onClick: signClickHandler, label: '+' },
|
||||
|
||||
{ variant: 'neutral', onClick: numClickHandler, label: '0', className: 'span-2' },
|
||||
{ variant: 'neutral', onClick: commaClickHandler, label: '.' },
|
||||
{ variant: 'secondary', onClick: equalsClickHandler, label: '=' },
|
||||
]
|
||||
|
||||
const buttons3: ButtonProps[] = [ ...numberButton, ...actionButtons ]
|
||||
|
||||
const test: CalculatorButton[] = [
|
||||
{ order: 1, props: { variant: 'secondary', onClick: equalsClickHandler, label: '=' },}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="calculator-wrapper">
|
||||
<div className="calculator">
|
||||
<CalculatorPreview value={calc.num ? calc.num : calc.res} />
|
||||
<ButtonList items={buttons} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Calculator
|
||||
36
src/components/Calculator/Button.tsx
Normal file
36
src/components/Calculator/Button.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
type ButtonVariant = "neutral" | "neutral-light" | "primary" | "secondary";
|
||||
|
||||
export type CalculatorButton = {
|
||||
order: number,
|
||||
props: ButtonProps
|
||||
}
|
||||
|
||||
export interface ButtonProps {
|
||||
variant?: ButtonVariant;
|
||||
onClick: (e: any) => void;
|
||||
children?: any;
|
||||
className?: any;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export default function Button({ variant = "neutral", className, children, label, onClick, ...rest}: ButtonProps) {
|
||||
let classes: [string] = ["btn"];
|
||||
classes.push(className);
|
||||
switch (variant) {
|
||||
case "neutral":
|
||||
classes.push("btn-neutral");
|
||||
break;
|
||||
case "neutral-light":
|
||||
classes.push("btn-neutral-light");
|
||||
break;
|
||||
case "primary":
|
||||
classes.push("btn-primary");
|
||||
break;
|
||||
case "secondary":
|
||||
classes.push("btn-secondary");
|
||||
break;
|
||||
}
|
||||
return (
|
||||
<button type="button" className={classes.join(' ')} onClick={onClick} {...rest}>{children||label}</button>
|
||||
)
|
||||
}
|
||||
15
src/components/Calculator/ButtonList.tsx
Normal file
15
src/components/Calculator/ButtonList.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import Button, { ButtonProps } from "./Button"
|
||||
|
||||
interface ButtonListProps {
|
||||
items: ButtonProps[];
|
||||
}
|
||||
|
||||
export default function ButtonList({items, ...rest}: ButtonListProps) {
|
||||
return (
|
||||
<div className="buttonList" {...rest}>
|
||||
{items.map((item) => {
|
||||
return <Button key={item.label} {...item}>{item.label}</Button>
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
7
src/components/Calculator/CalculatorPreview.tsx
Normal file
7
src/components/Calculator/CalculatorPreview.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import InputField from "./InputField";
|
||||
|
||||
export default function CalculatorPreview({ value }) {
|
||||
return (
|
||||
<InputField value={value} className="preview" name="preview" readOnly />
|
||||
)
|
||||
}
|
||||
23
src/components/Calculator/InputField.tsx
Normal file
23
src/components/Calculator/InputField.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
export default function InputField(props: any) {
|
||||
const {
|
||||
type = "text",
|
||||
value = "",
|
||||
name = "",
|
||||
placeholder = "",
|
||||
className = "",
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
let classes: [string] = [""];
|
||||
classes.push(className);
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
value={value}
|
||||
name={name}
|
||||
className={classes.join(' ')}
|
||||
placeholder={placeholder}
|
||||
{...rest}
|
||||
/>
|
||||
)
|
||||
};
|
||||
6
src/index.css
Normal file
6
src/index.css
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@import './themes/default/tokens.css';
|
||||
@import './themes/default/default-dark.css';
|
||||
/*@import './themes/default/default-light.css';*/
|
||||
|
||||
|
||||
|
||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
168
src/themes/default/default-dark.css
Normal file
168
src/themes/default/default-dark.css
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: dark;
|
||||
color: var(--neutral-50);
|
||||
background-color: var(--neutral-950);
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
#root {
|
||||
width: 100%;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.calculator-wrapper {
|
||||
max-width: 280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.addon-store-wrapper {
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
:focus:focus-visible {
|
||||
outline: 2px solid rgb(90, 90, 215);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
.span-3 {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: var(--secondary-500);
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--secondary-400);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
font-size: 1.3em;
|
||||
background-color: var(--btn-bg, var(--neutral-950));
|
||||
border-color: var(--btn-border, var(--neutral-900));
|
||||
color: var(--btn-text, var(--neutral-50));
|
||||
cursor: pointer;
|
||||
transition: background-color 0.25s, color 0.25s;
|
||||
aspect-ratio: 1;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
.btn.span-2, .btn.span-3 {
|
||||
aspect-ratio: unset;
|
||||
}
|
||||
.btn:hover, .btn:focus {
|
||||
background-color: var(--btn-hover-bg, var(--btn-bg, var(--neutral-900)));
|
||||
color: var(--btn-hover-text, var(--btn-text, var(--neutral-50)));
|
||||
border-color: var(--btn-hover-border, var(--btn-border, var(--neutral-900)));
|
||||
}
|
||||
.btn-calculate, .btn-primary {
|
||||
--btn-bg: var(--primary-900);
|
||||
--btn-text: var(--primary-100);
|
||||
--btn-border: var(--primary-900);
|
||||
--btn-hover-bg: var(--primary-700);
|
||||
--btn-hover-border: var(--primary-700);
|
||||
}
|
||||
.btn-secondary {
|
||||
--btn-bg: var(--secondary-900);
|
||||
--btn-text: var(--secondary-100);
|
||||
--btn-border: var(--secondary-900);
|
||||
--btn-hover-bg: var(--secondary-700);
|
||||
--btn-hover-border: var(--secondary-700);
|
||||
}
|
||||
.btn-neutral-light {
|
||||
--btn-bg: var(--neutral-900);
|
||||
--btn-text: var(--neutral-50);
|
||||
--btn-border: var(--neutral-900);
|
||||
--btn-hover-bg: var(--neutral-700);
|
||||
--btn-hover-border: var(--neutral-700);
|
||||
}
|
||||
|
||||
/** Calculator layout */
|
||||
.calculator .preview, .calculator .result {
|
||||
border-radius: 999px;
|
||||
background: var(--neutral-90);
|
||||
border: 1px solid var(--neutral-700);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.calculator .preview:focus, .calculator .preview:focus-visible { outline: none; }
|
||||
.calculator, .buttonList {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(auto-fit, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
.calculator .buttonList {
|
||||
grid-column: 1 / 5;
|
||||
}
|
||||
.calculator .preview, .calculator .result {
|
||||
grid-column: 1 / 5;
|
||||
height: 58px;
|
||||
}
|
||||
.calculator .btn-reset {
|
||||
grid-column: 4;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/** Addon Store */
|
||||
.addon-store-link {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
.addon-store-wrapper h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.addon-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, 170px);
|
||||
gap: .8rem;
|
||||
padding: .8rem 0;
|
||||
}
|
||||
.addon-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
border: 1px solid grey;
|
||||
border-radius: 12px;
|
||||
padding: 1rem .8rem;
|
||||
gap: .8rem;
|
||||
text-align: left;
|
||||
}
|
||||
.addon-card .addon-name {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.addon-card .install-btn {
|
||||
margin-top: .6rem;
|
||||
align-self: end
|
||||
}
|
||||
133
src/themes/default/default-light.css
Normal file
133
src/themes/default/default-light.css
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light;
|
||||
color: var(--neutral-950);
|
||||
background-color: var(--neutral-100);
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
#root {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:focus:focus-visible {
|
||||
outline: 2px solid rgb(90, 90, 215);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: var(--secondary-600);
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--secondary-500);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
font-size: 1.3em;
|
||||
background-color: var(--btn-bg, var(--neutral-200));
|
||||
border-color: var(--btn-border, var(--neutral-200));
|
||||
color: var(--btn-text, var(--neutral-400));
|
||||
cursor: pointer;
|
||||
transition: background-color 0.25s, color 0.25s, border-color 0.25s;
|
||||
aspect-ratio: 1;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
.btn:hover, .btn:focus {
|
||||
background-color: var(--btn-hover-bg, var(--btn-bg, var(--neutral-300)));
|
||||
color: var(--btn-hover-text, var(--btn-text, var(--neutral-500)));
|
||||
border-color: var(--btn-hover-border, var(--btn-border, var(--neutral-300)));
|
||||
}
|
||||
.btn-calculate, .btn-primary {
|
||||
--btn-bg: var(--primary-500);
|
||||
--btn-text: var(--primary-100);
|
||||
--btn-border: var(--primary-500);
|
||||
--btn-hover-bg: var(--primary-600);
|
||||
--btn-hover-border: var(--primary-600);
|
||||
}
|
||||
.btn-secondary {
|
||||
--btn-bg: var(--secondary-500);
|
||||
--btn-text: var(--secondary-100);
|
||||
--btn-border: var(--secondary-500);
|
||||
--btn-hover-bg: var(--secondary-600);
|
||||
--btn-hover-border: var(--secondary-600);
|
||||
}
|
||||
.btn-neutral-light {
|
||||
--btn-bg: var(--neutral-700);
|
||||
--btn-text: var(--neutral-100);
|
||||
--btn-border: var(--neutral-700);
|
||||
--btn-hover-bg: var(--neutral-900);
|
||||
--btn-hover-border: var(--neutral-900);
|
||||
}
|
||||
|
||||
.calculator .preview {
|
||||
border-radius: 999px;
|
||||
background: var(--neutral-90);
|
||||
border: 1px solid var(--neutral-700);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
/** Calculator layout */
|
||||
.calculator .preview:focus, .calculator .preview:focus-visible { outline: none; }
|
||||
.calculator {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(auto-fit, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
.calculator .preview {
|
||||
grid-column: 1 / 4;
|
||||
}
|
||||
.calculator .btn-calculate {
|
||||
grid-column: 4;
|
||||
}
|
||||
/*
|
||||
.calculator {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: repeat(auto-fit, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
.calculator .preview {
|
||||
grid-column: 1 / 5;
|
||||
}
|
||||
.calculator .btn-calculate {
|
||||
grid-column: 5;
|
||||
}"/
|
||||
|
||||
/** Addon Store */
|
||||
.addon-store-link {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
37
src/themes/default/tokens.css
Normal file
37
src/themes/default/tokens.css
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
:root {
|
||||
--neutral-50: #f6f6f6;
|
||||
--neutral-100: #e7e7e7;
|
||||
--neutral-200: #d1d1d1;
|
||||
--neutral-300: #b0b0b0;
|
||||
--neutral-400: #888888;
|
||||
--neutral-500: #6d6d6d;
|
||||
--neutral-600: #5d5d5d;
|
||||
--neutral-700: #4f4f4f;
|
||||
--neutral-800: #454545;
|
||||
--neutral-900: #3d3d3d;
|
||||
--neutral-950: #1a1a1a;
|
||||
|
||||
--primary-50: #fffaec;
|
||||
--primary-100: #fff4d3;
|
||||
--primary-200: #ffe5a5;
|
||||
--primary-300: #ffd16d;
|
||||
--primary-400: #ffb232;
|
||||
--primary-500: #ff980a;
|
||||
--primary-600: #ff8000;
|
||||
--primary-700: #cc5d02;
|
||||
--primary-800: #a1480b;
|
||||
--primary-900: #823d0c;
|
||||
--primary-950: #461d04;
|
||||
|
||||
--secondary-50: #ecf2ff;
|
||||
--secondary-100: #dde6ff;
|
||||
--secondary-200: #c2d1ff;
|
||||
--secondary-300: #9cb1ff;
|
||||
--secondary-400: #7586ff;
|
||||
--secondary-500: #646cff;
|
||||
--secondary-600: #3b36f5;
|
||||
--secondary-700: #322ad8;
|
||||
--secondary-800: #2925ae;
|
||||
--secondary-900: #262689;
|
||||
--secondary-950: #181650;
|
||||
}
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
26
tsconfig.app.json
Normal file
26
tsconfig.app.json
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "Bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
24
tsconfig.node.json
Normal file
24
tsconfig.node.json
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "Bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Loading…
Reference in a new issue