mirror of
https://github.com/streetwriters/notesnook.git
synced 2025-12-16 11:47:54 +01:00
overhaul
This commit is contained in:
thecodrr
@@ -1,9 +0,0 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
@@ -1,5 +0,0 @@
|
||||
build/
|
||||
dist/
|
||||
node_modules/
|
||||
.snapshots/
|
||||
*.min.js
|
||||
@@ -1,33 +0,0 @@
|
||||
{
|
||||
"parser": "babel-eslint",
|
||||
"extends": [
|
||||
"standard",
|
||||
"standard-react",
|
||||
"plugin:prettier/recommended",
|
||||
"prettier/standard",
|
||||
"prettier/react"
|
||||
],
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2020,
|
||||
"ecmaFeatures": {
|
||||
"legacyDecorators": true,
|
||||
"jsx": true
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"react": {
|
||||
"version": "16"
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"space-before-function-paren": 0,
|
||||
"react/prop-types": 0,
|
||||
"react/jsx-handler-names": 0,
|
||||
"react/jsx-fragments": 0,
|
||||
"react/no-unused-prop-types": 0,
|
||||
"import/export": 0
|
||||
}
|
||||
}
|
||||
157
packages/theme/.gitignore
vendored
157
packages/theme/.gitignore
vendored
@@ -1,2 +1,157 @@
|
||||
|
||||
# Created by https://www.toptal.com/developers/gitignore/api/react,node
|
||||
# Edit at https://www.toptal.com/developers/gitignore?templates=react,node
|
||||
|
||||
### Node ###
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
### Node Patch ###
|
||||
# Serverless Webpack directories
|
||||
.webpack/
|
||||
|
||||
# Optional stylelint cache
|
||||
|
||||
# SvelteKit build / generate output
|
||||
.svelte-kit
|
||||
|
||||
### react ###
|
||||
.DS_*
|
||||
**/*.backup.*
|
||||
**/*.back.*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
|
||||
*.sublime*
|
||||
|
||||
psd
|
||||
thumb
|
||||
sketch
|
||||
|
||||
# End of https://www.toptal.com/developers/gitignore/api/react,node
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"jsxSingleQuote": true,
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"bracketSpacing": true,
|
||||
"jsxBracketSameLine": false,
|
||||
"arrowParens": "always",
|
||||
"trailingComma": "none"
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- 12
|
||||
- 10
|
||||
@@ -1,30 +0,0 @@
|
||||
# themeprovider
|
||||
|
||||
> ThemeProvider for Rebass
|
||||
|
||||
[](https://www.npmjs.com/package/themeprovider) [](https://standardjs.com)
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm install --save themeprovider
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```jsx
|
||||
import React, { Component } from 'react'
|
||||
|
||||
import MyComponent from 'themeprovider'
|
||||
import 'themeprovider/dist/index.css'
|
||||
|
||||
class Example extends Component {
|
||||
render() {
|
||||
return <MyComponent />
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT © [thecodrr](https://github.com/thecodrr)
|
||||
41612
packages/theme/package-lock.json
generated
Normal file
41612
packages/theme/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,55 +1,30 @@
|
||||
{
|
||||
"name": "themeprovider",
|
||||
"version": "1.0.0",
|
||||
"description": "ThemeProvider for Rebass",
|
||||
"author": "thecodrr",
|
||||
"license": "MIT",
|
||||
"repository": "streetwriters/themeprovider",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.modern.js",
|
||||
"source": "src/index.js",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "microbundle-crl --no-compress --format modern,cjs",
|
||||
"start": "microbundle-crl watch --no-compress --format modern,cjs",
|
||||
"prepare": "run-s build",
|
||||
"test": "run-s test:unit test:lint test:build",
|
||||
"test:build": "run-s build",
|
||||
"test:lint": "eslint .",
|
||||
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
|
||||
"test:watch": "react-scripts test --env=jsdom",
|
||||
"predeploy": "cd example && yarn install && yarn run build",
|
||||
"deploy": "gh-pages -d example/build"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.0.0",
|
||||
"emotion-theming": "^10.0.27",
|
||||
"utils": "https://github.com/streetwriters/utils.git"
|
||||
"name": "@notesnook/theme",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"main": "./dist/index.js",
|
||||
"dependencies": {
|
||||
"@rebass/forms": "^4.0.6",
|
||||
"@types/rebass": "^4.0.10",
|
||||
"@types/rebass__forms": "^4.0.6",
|
||||
"emotion-theming": "^10.0.19",
|
||||
"rebass": "^4.0.7",
|
||||
"tinycolor2": "^1.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"microbundle-crl": "^0.13.10",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"cross-env": "^7.0.2",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-config-prettier": "^6.7.0",
|
||||
"eslint-config-standard": "^14.1.0",
|
||||
"eslint-config-standard-react": "^9.2.0",
|
||||
"eslint-plugin-import": "^2.18.2",
|
||||
"eslint-plugin-node": "^11.0.0",
|
||||
"eslint-plugin-prettier": "^3.1.1",
|
||||
"eslint-plugin-promise": "^4.2.1",
|
||||
"eslint-plugin-react": "^7.17.0",
|
||||
"eslint-plugin-standard": "^4.0.1",
|
||||
"gh-pages": "^2.2.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^2.0.4",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-scripts": "^3.4.1"
|
||||
"@types/node": "^16.11.11",
|
||||
"@types/react": "^17.0.37",
|
||||
"@types/react-color": "^3.0.6",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"@types/react-modal": "^3.13.1",
|
||||
"@types/tinycolor2": "^1.4.3",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"typescript": "^4.5.2",
|
||||
"web-vitals": "^1.1.2"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
]
|
||||
}
|
||||
"scripts": {
|
||||
"build": "tsc"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"env": {
|
||||
"jest": true
|
||||
}
|
||||
}
|
||||
48
packages/theme/src/css.ts
Normal file
48
packages/theme/src/css.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
export function removeCss(id: string) {
|
||||
var link = document.getElementById(id);
|
||||
if (link) link.remove();
|
||||
}
|
||||
|
||||
export function injectCssSrc(id: string, src: string) {
|
||||
var head = document.head;
|
||||
var link = document.createElement("link");
|
||||
|
||||
link.id = id;
|
||||
link.type = "text/css";
|
||||
link.rel = "stylesheet";
|
||||
link.href = src;
|
||||
|
||||
head.appendChild(link);
|
||||
}
|
||||
|
||||
export function injectCss(rules: string) {
|
||||
let variableCss = document.getElementById("variables");
|
||||
let head = document.getElementsByTagName("head")[0];
|
||||
if (variableCss) {
|
||||
head.removeChild(variableCss);
|
||||
}
|
||||
let css = document.createElement("style");
|
||||
css.type = "text/css";
|
||||
css.id = "variables";
|
||||
// Support for IE
|
||||
if ("styleSheet" in css) (css as any).styleSheet.cssText = rules;
|
||||
// Support for the rest
|
||||
else css.appendChild(document.createTextNode(rules));
|
||||
|
||||
head.insertBefore(css, getRootStylesheet());
|
||||
}
|
||||
|
||||
function getRootStylesheet() {
|
||||
for (let sty of document.getElementsByTagName("style")) {
|
||||
if (sty.innerHTML.includes("#root")) {
|
||||
return sty;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function changeSvgTheme(newAccent: string) {
|
||||
var nodes = document.querySelectorAll('*[fill="#0560ff"]');
|
||||
for (var n = 0; n < nodes.length; ++n)
|
||||
nodes[n].setAttribute("fill", newAccent);
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import React from 'react'
|
||||
import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'
|
||||
import ThemeFactory from './theme'
|
||||
import { injectCss } from 'utils/css'
|
||||
import { isMobile } from 'utils/dimensions'
|
||||
|
||||
const factory = new ThemeFactory()
|
||||
|
||||
function ThemeProvider(props) {
|
||||
const { useStore } = props
|
||||
const themeType = useStore((store) => store.theme)
|
||||
const accent = useStore((store) => store.accent)
|
||||
const theme = factory.construct({
|
||||
theme: themeType,
|
||||
accent,
|
||||
scale: isMobile() ? 0.8 : 1
|
||||
})
|
||||
injectCss(factory.transform('css', theme))
|
||||
|
||||
return (
|
||||
<EmotionThemeProvider theme={theme}>
|
||||
{props.children instanceof Function
|
||||
? props.children(theme)
|
||||
: props.children}
|
||||
</EmotionThemeProvider>
|
||||
)
|
||||
}
|
||||
export default ThemeProvider
|
||||
3
packages/theme/src/index.ts
Normal file
3
packages/theme/src/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from "./theme/accents";
|
||||
export * from "./themeprovider";
|
||||
export * from "./theme";
|
||||
@@ -1,20 +0,0 @@
|
||||
const accents = [
|
||||
{ label: "orange", code: "#FF5722" },
|
||||
{ label: "yellow", code: "#FFA000" },
|
||||
{ label: "green", code: "#1B5E20" },
|
||||
{ label: "green2", code: "#008837" },
|
||||
{ label: "gray", code: "#757575" },
|
||||
{ label: "blue", code: "#0560ff" },
|
||||
{ label: "teal", code: "#009688" },
|
||||
{ label: "lightblue", code: "#2196F3" },
|
||||
{ label: "indigo", code: "#880E4F" },
|
||||
{ label: "purple", code: "#9C27B0" },
|
||||
{ label: "pink", code: "#FF1744" },
|
||||
{ label: "red", code: "#B71C1C" },
|
||||
];
|
||||
|
||||
export function getDefaultAccentColor() {
|
||||
return accents.find((a) => a.label === "green2").code;
|
||||
}
|
||||
|
||||
export default accents;
|
||||
26
packages/theme/src/theme/accents.ts
Normal file
26
packages/theme/src/theme/accents.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
const accents = {
|
||||
orange: "#FF5722",
|
||||
yellow: "#FFA000",
|
||||
green: "#1B5E20",
|
||||
green2: "#008837",
|
||||
gray: "#757575",
|
||||
blue: "#0560ff",
|
||||
teal: "#009688",
|
||||
lightblue: "#2196F3",
|
||||
indigo: "#880E4F",
|
||||
purple: "#9C27B0",
|
||||
pink: "#FF1744",
|
||||
red: "#B71C1C",
|
||||
} as const;
|
||||
|
||||
export function getDefaultAccentColor() {
|
||||
return accents.green2;
|
||||
}
|
||||
|
||||
export function getAllAccents(): { label: Accents; code: string }[] {
|
||||
return Object.entries(accents).map(([key, value]) => {
|
||||
return { label: key as Accents, code: value };
|
||||
});
|
||||
}
|
||||
|
||||
export type Accents = keyof typeof accents;
|
||||
@@ -1,36 +0,0 @@
|
||||
import { hexToRGB } from "../../utils/color";
|
||||
import StaticColorSchemeFactory from "./static";
|
||||
|
||||
class DarkColorSchemeFactory {
|
||||
constructor(accent) {
|
||||
return {
|
||||
primary: accent,
|
||||
placeholder: hexToRGB("#ffffff", 0.6),
|
||||
background: "#1b1b1b",
|
||||
bgTransparent: "#1f1f1f99",
|
||||
accent: "#000",
|
||||
bgSecondary: "#2b2b2b",
|
||||
bgSecondaryText: "#A1A1A1",
|
||||
border: "#353535",
|
||||
hover: "#2f2f2f",
|
||||
fontSecondary: "#000",
|
||||
fontTertiary: "#A1A1A1",
|
||||
text: "#d3d3d3",
|
||||
overlay: "rgba(53, 53, 53, 0.5)",
|
||||
secondary: "black",
|
||||
icon: "#dbdbdb",
|
||||
disabled: "#5b5b5b",
|
||||
...new StaticColorSchemeFactory(accent),
|
||||
|
||||
// COLORS
|
||||
red: "#f44336",
|
||||
orange: "#FF9800",
|
||||
yellow: "#FFD600",
|
||||
green: "#4CAF50",
|
||||
blue: "#2196F3",
|
||||
purple: "#9568ED",
|
||||
gray: "#9E9E9E",
|
||||
};
|
||||
}
|
||||
}
|
||||
export default DarkColorSchemeFactory;
|
||||
35
packages/theme/src/theme/colorscheme/dark.ts
Normal file
35
packages/theme/src/theme/colorscheme/dark.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import tinycolor from "tinycolor2";
|
||||
import { SchemeColors } from ".";
|
||||
import { getStaticColors, StaticColors } from "./static";
|
||||
|
||||
export function getDarkScheme(accent: string): SchemeColors {
|
||||
return {
|
||||
primary: accent,
|
||||
placeholder: tinycolor("#ffffff").setAlpha(0.6).toRgbString(),
|
||||
background: "#1b1b1b",
|
||||
bgTransparent: "#1f1f1f99",
|
||||
accent: "#000",
|
||||
bgSecondary: "#2b2b2b",
|
||||
bgSecondaryText: "#A1A1A1",
|
||||
border: "#353535",
|
||||
hover: "#2f2f2f",
|
||||
fontSecondary: "#000",
|
||||
fontTertiary: "#A1A1A1",
|
||||
text: "#d3d3d3",
|
||||
overlay: "rgba(53, 53, 53, 0.5)",
|
||||
secondary: "black",
|
||||
icon: "#dbdbdb",
|
||||
disabled: "#5b5b5b",
|
||||
checked: "#6b6b6b",
|
||||
...getStaticColors(accent),
|
||||
|
||||
// COLORS
|
||||
red: "#f44336",
|
||||
orange: "#FF9800",
|
||||
yellow: "#FFD600",
|
||||
green: "#4CAF50",
|
||||
blue: "#2196F3",
|
||||
purple: "#9568ED",
|
||||
gray: "#9E9E9E",
|
||||
};
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import DarkColorSchemeFactory from "./dark";
|
||||
import LightColorSchemeFactory from "./light";
|
||||
|
||||
const colorSchemes = {
|
||||
dark: DarkColorSchemeFactory,
|
||||
light: LightColorSchemeFactory
|
||||
};
|
||||
|
||||
class ColorSchemeFactory {
|
||||
constructor(theme, accent) {
|
||||
return new colorSchemes[theme](accent);
|
||||
}
|
||||
}
|
||||
export default ColorSchemeFactory;
|
||||
41
packages/theme/src/theme/colorscheme/index.ts
Normal file
41
packages/theme/src/theme/colorscheme/index.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { getDarkScheme } from "./dark";
|
||||
import { getLightScheme } from "./light";
|
||||
import { StaticColors } from "./static";
|
||||
|
||||
const colorSchemes = {
|
||||
dark: getDarkScheme,
|
||||
light: getLightScheme,
|
||||
};
|
||||
|
||||
export type ColorSchemes = keyof typeof colorSchemes;
|
||||
export function getColors(theme: ColorSchemes, accent: string) {
|
||||
return colorSchemes[theme](accent);
|
||||
}
|
||||
|
||||
export type SchemeColors = StaticColors & {
|
||||
primary: string;
|
||||
placeholder: string;
|
||||
background: string;
|
||||
bgTransparent: string;
|
||||
accent: string;
|
||||
bgSecondary: string;
|
||||
bgSecondaryText: string;
|
||||
border: string;
|
||||
hover: string;
|
||||
fontSecondary: string;
|
||||
fontTertiary: string;
|
||||
text: string;
|
||||
overlay: string;
|
||||
secondary: string;
|
||||
icon: string;
|
||||
disabled: string;
|
||||
checked: string;
|
||||
|
||||
red: string;
|
||||
orange: string;
|
||||
yellow: string;
|
||||
green: string;
|
||||
blue: string;
|
||||
purple: string;
|
||||
gray: string;
|
||||
};
|
||||
@@ -1,44 +0,0 @@
|
||||
import { hexToRGB } from "../../utils/color";
|
||||
import StaticColorSchemeFactory from "./static";
|
||||
|
||||
class LightColorSchemeFactory {
|
||||
constructor(accent) {
|
||||
return {
|
||||
primary: accent,
|
||||
background: "white",
|
||||
bgTransparent: "#ffffff99",
|
||||
accent: "white",
|
||||
bgSecondary: "#f7f7f7",
|
||||
bgSecondaryText: "#5E5E5E",
|
||||
border: "#e5e5e5",
|
||||
hover: "#f0f0f0",
|
||||
fontSecondary: "white",
|
||||
fontTertiary: "#656565",
|
||||
text: "#202124",
|
||||
overlay: "rgba(0, 0, 0, 0.1)",
|
||||
secondary: "white",
|
||||
icon: "#3b3b3b",
|
||||
disabled: "#9b9b9b",
|
||||
placeholder: hexToRGB("#000000", 0.6),
|
||||
...new StaticColorSchemeFactory(accent),
|
||||
|
||||
// COLORS
|
||||
// red: "#D93B30",
|
||||
// orange: "#C75301",
|
||||
// yellow: "#AC660D",
|
||||
// green: "#4CAF50",
|
||||
// blue: "#197AC7",
|
||||
// purple: "#673AB7",
|
||||
// gray: "#777777",
|
||||
|
||||
red: "#f44336",
|
||||
orange: "#FF9800",
|
||||
yellow: "#f0c800",
|
||||
green: "#4CAF50",
|
||||
blue: "#2196F3",
|
||||
purple: "#9568ED",
|
||||
gray: "#9E9E9E",
|
||||
};
|
||||
}
|
||||
}
|
||||
export default LightColorSchemeFactory;
|
||||
34
packages/theme/src/theme/colorscheme/light.ts
Normal file
34
packages/theme/src/theme/colorscheme/light.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import tinycolor from "tinycolor2";
|
||||
import { SchemeColors } from ".";
|
||||
import { getStaticColors } from "./static";
|
||||
|
||||
export function getLightScheme(accent: string): SchemeColors {
|
||||
return {
|
||||
primary: accent,
|
||||
background: "white",
|
||||
bgTransparent: "#ffffff99",
|
||||
accent: "white",
|
||||
bgSecondary: "#f7f7f7",
|
||||
bgSecondaryText: "#5E5E5E",
|
||||
border: "#e5e5e5",
|
||||
hover: "#f0f0f0",
|
||||
fontSecondary: "white",
|
||||
fontTertiary: "#656565",
|
||||
text: "#202124",
|
||||
overlay: "rgba(0, 0, 0, 0.1)",
|
||||
secondary: "white",
|
||||
icon: "#3b3b3b",
|
||||
disabled: "#9b9b9b",
|
||||
placeholder: tinycolor("#000000").setAlpha(0.6).toRgbString(),
|
||||
checked: "#505050",
|
||||
...getStaticColors(accent),
|
||||
|
||||
red: "#f44336",
|
||||
orange: "#FF9800",
|
||||
yellow: "#f0c800",
|
||||
green: "#4CAF50",
|
||||
blue: "#2196F3",
|
||||
purple: "#9568ED",
|
||||
gray: "#9E9E9E",
|
||||
};
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { hexToRGB } from "../../utils/color";
|
||||
|
||||
class StaticColorSchemeFactory {
|
||||
constructor(accent) {
|
||||
return {
|
||||
shade: hexToRGB(accent, 0.1),
|
||||
textSelection: hexToRGB(accent, 0.2),
|
||||
dimPrimary: hexToRGB(accent, 0.7),
|
||||
transparent: "transparent",
|
||||
static: "white",
|
||||
error: "#E53935",
|
||||
errorBg: "#E5393520",
|
||||
success: "#4F8A10",
|
||||
warn: "#FF5722",
|
||||
warnBg: "#FF572220",
|
||||
favorite: "#ffd700",
|
||||
};
|
||||
}
|
||||
}
|
||||
export default StaticColorSchemeFactory;
|
||||
30
packages/theme/src/theme/colorscheme/static.ts
Normal file
30
packages/theme/src/theme/colorscheme/static.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import tinycolor from "tinycolor2";
|
||||
|
||||
export type StaticColors = {
|
||||
shade: string;
|
||||
textSelection: string;
|
||||
dimPrimary: string;
|
||||
transparent: string;
|
||||
static: string;
|
||||
error: string;
|
||||
errorBg: string;
|
||||
success: string;
|
||||
warn: string;
|
||||
warnBg: string;
|
||||
favorite: string;
|
||||
};
|
||||
export function getStaticColors(accent: string): StaticColors {
|
||||
return {
|
||||
shade: tinycolor(accent).setAlpha(0.1).toRgbString(),
|
||||
textSelection: tinycolor(accent).setAlpha(0.2).toRgbString(),
|
||||
dimPrimary: tinycolor(accent).setAlpha(0.7).toRgbString(),
|
||||
transparent: "transparent",
|
||||
static: "white",
|
||||
error: "#E53935",
|
||||
errorBg: "#E5393520",
|
||||
success: "#4F8A10",
|
||||
warn: "#FF5722",
|
||||
warnBg: "#FF572220",
|
||||
favorite: "#ffd700",
|
||||
};
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
class FontSizeFactory {
|
||||
constructor() {
|
||||
return {
|
||||
heading: "1.5rem",
|
||||
subheading: "1.2rem",
|
||||
input: "0.875rem",
|
||||
title: "0.95rem",
|
||||
subtitle: "0.85rem",
|
||||
body: "0.8rem",
|
||||
menu: "0.8rem",
|
||||
subBody: "0.750rem",
|
||||
};
|
||||
}
|
||||
}
|
||||
export default FontSizeFactory;
|
||||
23
packages/theme/src/theme/font/fontsize.ts
Normal file
23
packages/theme/src/theme/font/fontsize.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
export function getFontSizes(scale?: number): FontSizes {
|
||||
return {
|
||||
heading: "1.5rem",
|
||||
subheading: "1.2rem",
|
||||
input: "0.875rem",
|
||||
title: "0.95rem",
|
||||
subtitle: "0.85rem",
|
||||
body: "0.8rem",
|
||||
menu: "0.8rem",
|
||||
subBody: "0.750rem",
|
||||
};
|
||||
}
|
||||
|
||||
export type FontSizes = {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
input: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
body: string;
|
||||
menu: string;
|
||||
subBody: string;
|
||||
};
|
||||
@@ -1,20 +0,0 @@
|
||||
import FontSizeFactory from "./fontsize";
|
||||
|
||||
class FontFactory {
|
||||
constructor(scale) {
|
||||
return {
|
||||
fontSizes: new FontSizeFactory(scale),
|
||||
fontWeights: {
|
||||
normal: 400,
|
||||
body: 400,
|
||||
heading: 600,
|
||||
bold: 600,
|
||||
},
|
||||
fonts: {
|
||||
body: `Open Sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Oxygen-Sans,Ubuntu,Cantarell,sans-serif;`,
|
||||
heading: `Open Sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Oxygen-Sans,Ubuntu,Cantarell,sans-serif;`,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
export default FontFactory;
|
||||
27
packages/theme/src/theme/font/index.ts
Normal file
27
packages/theme/src/theme/font/index.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { FontSizes, getFontSizes } from "./fontsize";
|
||||
|
||||
export type FontConfig = {
|
||||
fontSizes: FontSizes;
|
||||
fontWeights: {
|
||||
normal: number;
|
||||
body: number;
|
||||
heading: number;
|
||||
bold: number;
|
||||
};
|
||||
fonts: { body: string; heading: string };
|
||||
};
|
||||
export function getFontConfig(scale?: number): FontConfig {
|
||||
return {
|
||||
fontSizes: getFontSizes(scale),
|
||||
fontWeights: {
|
||||
normal: 400,
|
||||
body: 400,
|
||||
heading: 600,
|
||||
bold: 600,
|
||||
},
|
||||
fonts: {
|
||||
body: `Open Sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Oxygen-Sans,Ubuntu,Cantarell,sans-serif;`,
|
||||
heading: `Open Sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Oxygen-Sans,Ubuntu,Cantarell,sans-serif;`,
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import ColorSchemeFactory from "./colorscheme";
|
||||
import VariantsFactory from "./variants";
|
||||
import FontFactory from "./font";
|
||||
import TransformerFactory from "./transformer";
|
||||
|
||||
class ThemeFactory {
|
||||
transform(type, theme) {
|
||||
const factory = new TransformerFactory();
|
||||
return factory.construct(type, theme);
|
||||
}
|
||||
|
||||
construct(config) {
|
||||
return {
|
||||
breakpoints: ["480px", "1000px", "1000px"],
|
||||
space: [0, 5, 10, 15, 20, 25, 30, 35],
|
||||
sizes: { full: "100%", half: "50%" },
|
||||
radii: { none: 0, default: 5, dialog: 10 },
|
||||
colors: new ColorSchemeFactory(config.theme, config.accent),
|
||||
...new FontFactory(config.scale),
|
||||
...new VariantsFactory(),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default ThemeFactory;
|
||||
43
packages/theme/src/theme/index.ts
Normal file
43
packages/theme/src/theme/index.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { getColors, SchemeColors } from "./colorscheme";
|
||||
import { getVariants } from "./variants";
|
||||
import { FontConfig, getFontConfig } from "./font";
|
||||
import { TransformerFactory, Transformers } from "./transformer";
|
||||
import { ThemeConfig } from "./types";
|
||||
|
||||
export type Theme = {
|
||||
breakpoints: string[];
|
||||
space: number[];
|
||||
sizes: Record<string, string>;
|
||||
radii: Record<string, number>;
|
||||
shadows: Record<string, string>;
|
||||
colors: SchemeColors;
|
||||
} & FontConfig;
|
||||
|
||||
class ThemeFactory {
|
||||
transform(type: Transformers, theme: any) {
|
||||
const factory = new TransformerFactory();
|
||||
return factory.construct(type, theme);
|
||||
}
|
||||
|
||||
construct(config: ThemeConfig): Theme {
|
||||
return {
|
||||
breakpoints: ["480px", "1000px", "1000px"],
|
||||
space: [0, 5, 10, 15, 20, 25, 30, 35],
|
||||
sizes: { full: "100%", half: "50%" },
|
||||
radii: { none: 0, default: 5, dialog: 10, small: 2.5 },
|
||||
shadows:
|
||||
config.theme === "dark"
|
||||
? {
|
||||
menu: "0px 0px 10px 0px #00000078",
|
||||
}
|
||||
: {
|
||||
menu: "0px 0px 10px 0px #00000022",
|
||||
},
|
||||
colors: getColors(config.theme, config.accent),
|
||||
...getFontConfig(config.scale),
|
||||
...getVariants(),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default ThemeFactory;
|
||||
@@ -1,8 +0,0 @@
|
||||
function transform(theme) {
|
||||
let root = ":root {";
|
||||
for (let color in theme.colors) {
|
||||
root += `--${color}: ${theme.colors[color]};`;
|
||||
}
|
||||
return root + "}";
|
||||
}
|
||||
export default transform;
|
||||
11
packages/theme/src/theme/transformer/css.ts
Normal file
11
packages/theme/src/theme/transformer/css.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Theme } from "..";
|
||||
import { SchemeColors } from "../colorscheme";
|
||||
|
||||
function transform(theme: Theme) {
|
||||
let root = ":root {";
|
||||
for (const color in theme.colors) {
|
||||
root += `--${color}: ${theme.colors[color as keyof SchemeColors]};`;
|
||||
}
|
||||
return root + "}";
|
||||
}
|
||||
export default transform;
|
||||
@@ -1,12 +0,0 @@
|
||||
import css from "./css";
|
||||
|
||||
const transformers = {
|
||||
css: css
|
||||
};
|
||||
|
||||
class TransformerFactory {
|
||||
construct(type, theme) {
|
||||
return transformers[type](theme);
|
||||
}
|
||||
}
|
||||
export default TransformerFactory;
|
||||
12
packages/theme/src/theme/transformer/index.ts
Normal file
12
packages/theme/src/theme/transformer/index.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import css from "./css";
|
||||
|
||||
const transformers = {
|
||||
css: css,
|
||||
};
|
||||
|
||||
export type Transformers = keyof typeof transformers;
|
||||
export class TransformerFactory {
|
||||
construct(type: Transformers, theme: any) {
|
||||
return transformers[type](theme);
|
||||
}
|
||||
}
|
||||
8
packages/theme/src/theme/types.ts
Normal file
8
packages/theme/src/theme/types.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { ColorSchemes } from "./colorscheme";
|
||||
import { Accents } from "./accents";
|
||||
|
||||
export type ThemeConfig = {
|
||||
theme: ColorSchemes;
|
||||
accent: Accents;
|
||||
scale?: number;
|
||||
};
|
||||
@@ -1,201 +0,0 @@
|
||||
class ButtonFactory {
|
||||
constructor() {
|
||||
return {
|
||||
default: new Default(),
|
||||
primary: new Primary(),
|
||||
secondary: new Secondary(),
|
||||
tertiary: new Tertiary(),
|
||||
list: new List(),
|
||||
anchor: new Anchor(),
|
||||
tool: new Tool(),
|
||||
icon: new Icon(),
|
||||
dialog: new Dialog(),
|
||||
statusitem: new StatusItem(),
|
||||
menuitem: new MenuItem(),
|
||||
};
|
||||
}
|
||||
}
|
||||
export default ButtonFactory;
|
||||
|
||||
class Default {
|
||||
constructor() {
|
||||
return {
|
||||
bg: "transparent",
|
||||
fontFamily: "body",
|
||||
fontWeight: "body",
|
||||
fontSize: "body",
|
||||
borderRadius: "default",
|
||||
cursor: "pointer",
|
||||
p: 2,
|
||||
py: "7.5px",
|
||||
transition: "filter 200ms ease-in, box-shadow 200ms ease-out",
|
||||
":hover:not(:disabled)": {
|
||||
filter: "brightness(90%)",
|
||||
},
|
||||
":active": {
|
||||
filter: "brightness(98%)",
|
||||
},
|
||||
outline: "none",
|
||||
":focus-visible:not(:active)": {
|
||||
filter: "brightness(90%)",
|
||||
bg: "bgSecondary",
|
||||
},
|
||||
":disabled": {
|
||||
opacity: 0.5,
|
||||
cursor: "not-allowed",
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Primary {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "buttons.default",
|
||||
color: "static",
|
||||
bg: "primary",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Dialog {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "buttons.primary",
|
||||
color: "primary",
|
||||
fontWeight: "bold",
|
||||
bg: "transparent",
|
||||
":hover": { bg: "bgSecondary" },
|
||||
":focus:not(:active), :focus-within:not(:active), :focus-visible:not(:active)":
|
||||
{
|
||||
bg: "hover",
|
||||
filter: "brightness(90%)",
|
||||
},
|
||||
":disabled": {
|
||||
opacity: 0.7,
|
||||
cursor: "not-allowed",
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Secondary {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "buttons.default",
|
||||
color: "text",
|
||||
bg: "border",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Tertiary {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "buttons.default",
|
||||
color: "text",
|
||||
bg: "transparent",
|
||||
border: "2px solid",
|
||||
borderColor: "border",
|
||||
":hover": {
|
||||
borderColor: "primary",
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class List {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "buttons.tertiary",
|
||||
border: "0px solid",
|
||||
borderBottom: "1px solid",
|
||||
borderBottomColor: "border",
|
||||
borderRadius: 0,
|
||||
textAlign: "left",
|
||||
py: 2,
|
||||
px: 0,
|
||||
cursor: "pointer",
|
||||
":hover": {
|
||||
borderBottomColor: "primary",
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Anchor {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "buttons.default",
|
||||
color: "primary",
|
||||
fontSize: "subBody",
|
||||
p: 0,
|
||||
m: 0,
|
||||
px: 0,
|
||||
py: 0,
|
||||
":hover": {
|
||||
textDecoration: "underline",
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Icon {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "buttons.default",
|
||||
color: "text",
|
||||
borderRadius: "none",
|
||||
":hover": {
|
||||
backgroundColor: "hover",
|
||||
filter: "brightness(90%)",
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Tool {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "buttons.default",
|
||||
color: "text",
|
||||
backgroundColor: "bgSecondary",
|
||||
borderRadius: "default",
|
||||
":hover": {
|
||||
backgroundColor: "hover",
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class StatusItem {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "buttons.icon",
|
||||
p: 0,
|
||||
py: 1,
|
||||
px: 1,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class MenuItem {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "buttons.default",
|
||||
// bg: "transparent",
|
||||
py: "8px",
|
||||
px: 3,
|
||||
borderRadius: 0,
|
||||
color: "text",
|
||||
cursor: "pointer",
|
||||
":hover:not(:disabled),:focus:not(:disabled)": {
|
||||
backgroundColor: "hover",
|
||||
boxShadow: "none",
|
||||
},
|
||||
":active:not(:disabled)": {
|
||||
backgroundColor: "border",
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
157
packages/theme/src/theme/variants/button.ts
Normal file
157
packages/theme/src/theme/variants/button.ts
Normal file
@@ -0,0 +1,157 @@
|
||||
import { SxStyleProp } from "rebass";
|
||||
import { Variants } from ".";
|
||||
|
||||
export function getButtonVariants(): Variants {
|
||||
return {
|
||||
default: defaultVariant,
|
||||
primary,
|
||||
secondary,
|
||||
tertiary,
|
||||
list,
|
||||
anchor,
|
||||
tool,
|
||||
icon,
|
||||
dialog,
|
||||
statusitem: statusItem,
|
||||
menuitem: menuItem,
|
||||
};
|
||||
}
|
||||
|
||||
const defaultVariant: SxStyleProp = {
|
||||
bg: "transparent",
|
||||
fontFamily: "body",
|
||||
fontWeight: "body",
|
||||
fontSize: "body",
|
||||
borderRadius: "default",
|
||||
cursor: "pointer",
|
||||
p: 2,
|
||||
py: "7.5px",
|
||||
transition: "filter 200ms ease-in, box-shadow 200ms ease-out",
|
||||
":hover:not(:disabled)": {
|
||||
filter: "brightness(90%)",
|
||||
},
|
||||
":active": {
|
||||
filter: "brightness(98%)",
|
||||
},
|
||||
outline: "none",
|
||||
":focus-visible:not(:active)": {
|
||||
filter: "brightness(90%)",
|
||||
bg: "bgSecondary",
|
||||
},
|
||||
":disabled": {
|
||||
opacity: 0.5,
|
||||
cursor: "not-allowed",
|
||||
},
|
||||
};
|
||||
|
||||
const primary: SxStyleProp = {
|
||||
variant: "buttons.default",
|
||||
color: "static",
|
||||
bg: "primary",
|
||||
};
|
||||
|
||||
const dialog: SxStyleProp = {
|
||||
variant: "buttons.primary",
|
||||
color: "primary",
|
||||
fontWeight: "bold",
|
||||
bg: "transparent",
|
||||
":hover": { bg: "bgSecondary" },
|
||||
":focus:not(:active), :focus-within:not(:active), :focus-visible:not(:active)":
|
||||
{
|
||||
bg: "hover",
|
||||
filter: "brightness(90%)",
|
||||
},
|
||||
":disabled": {
|
||||
opacity: 0.7,
|
||||
cursor: "not-allowed",
|
||||
},
|
||||
};
|
||||
|
||||
const secondary: SxStyleProp = {
|
||||
variant: "buttons.default",
|
||||
color: "text",
|
||||
bg: "border",
|
||||
};
|
||||
|
||||
const tertiary: SxStyleProp = {
|
||||
variant: "buttons.default",
|
||||
color: "text",
|
||||
bg: "transparent",
|
||||
border: "2px solid",
|
||||
borderColor: "border",
|
||||
":hover": {
|
||||
borderColor: "primary",
|
||||
},
|
||||
};
|
||||
|
||||
const list: SxStyleProp = {
|
||||
variant: "buttons.tertiary",
|
||||
border: "0px solid",
|
||||
borderBottom: "1px solid",
|
||||
borderBottomColor: "border",
|
||||
borderRadius: 0,
|
||||
textAlign: "left",
|
||||
py: 2,
|
||||
px: 0,
|
||||
cursor: "pointer",
|
||||
":hover": {
|
||||
borderBottomColor: "primary",
|
||||
},
|
||||
};
|
||||
|
||||
const anchor: SxStyleProp = {
|
||||
variant: "buttons.default",
|
||||
color: "primary",
|
||||
fontSize: "subBody",
|
||||
p: 0,
|
||||
m: 0,
|
||||
px: 0,
|
||||
py: 0,
|
||||
":hover": {
|
||||
textDecoration: "underline",
|
||||
},
|
||||
};
|
||||
|
||||
const icon: SxStyleProp = {
|
||||
variant: "buttons.default",
|
||||
color: "text",
|
||||
borderRadius: "none",
|
||||
":hover": {
|
||||
backgroundColor: "hover",
|
||||
filter: "brightness(90%)",
|
||||
},
|
||||
};
|
||||
|
||||
const tool: SxStyleProp = {
|
||||
variant: "buttons.default",
|
||||
color: "text",
|
||||
backgroundColor: "bgSecondary",
|
||||
borderRadius: "default",
|
||||
":hover": {
|
||||
backgroundColor: "hover",
|
||||
},
|
||||
};
|
||||
|
||||
const statusItem: SxStyleProp = {
|
||||
variant: "buttons.icon",
|
||||
p: 0,
|
||||
py: 1,
|
||||
px: 1,
|
||||
};
|
||||
|
||||
const menuItem: SxStyleProp = {
|
||||
variant: "buttons.default",
|
||||
// bg: "transparent",
|
||||
py: "8px",
|
||||
px: 3,
|
||||
borderRadius: 0,
|
||||
color: "text",
|
||||
cursor: "pointer",
|
||||
":hover:not(:disabled),:focus:not(:disabled)": {
|
||||
backgroundColor: "hover",
|
||||
boxShadow: "none",
|
||||
},
|
||||
":active:not(:disabled)": {
|
||||
backgroundColor: "border",
|
||||
},
|
||||
};
|
||||
@@ -1,44 +0,0 @@
|
||||
class FlexFactory {
|
||||
constructor(direction) {
|
||||
const variants = {
|
||||
Center: new Center(direction),
|
||||
Fill: new Fill(direction),
|
||||
CenterFill: new CenterFill(direction)
|
||||
};
|
||||
return Object.fromEntries(
|
||||
Object.entries(variants).map(([key, value]) => {
|
||||
return [`${direction}${key}`, value];
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
export default FlexFactory;
|
||||
|
||||
class Center {
|
||||
constructor(direction) {
|
||||
return {
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: direction
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Fill {
|
||||
constructor(direction) {
|
||||
return {
|
||||
flex: "1 1 auto",
|
||||
flexDirection: direction
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class CenterFill {
|
||||
constructor(direction) {
|
||||
return {
|
||||
variant: `variants.${direction}Center`,
|
||||
flex: "1 1 auto",
|
||||
flexDirection: direction
|
||||
};
|
||||
}
|
||||
}
|
||||
39
packages/theme/src/theme/variants/flex.ts
Normal file
39
packages/theme/src/theme/variants/flex.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { SxStyleProp } from "rebass";
|
||||
import { Variants } from ".";
|
||||
|
||||
type FlexDirection = "row" | "column";
|
||||
export function createFlexVariants(direction: FlexDirection): Variants {
|
||||
const variants: Variants = {
|
||||
Center: createCenterVariant(direction),
|
||||
Fill: createFillVariant(direction),
|
||||
CenterFill: createCenterFillVariant(direction),
|
||||
};
|
||||
return Object.fromEntries(
|
||||
Object.entries(variants).map(([key, value]) => {
|
||||
return [`${direction}${key}`, value];
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function createCenterVariant(direction: FlexDirection): SxStyleProp {
|
||||
return {
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: direction,
|
||||
};
|
||||
}
|
||||
|
||||
function createFillVariant(direction: FlexDirection): SxStyleProp {
|
||||
return {
|
||||
flex: "1 1 auto",
|
||||
flexDirection: direction,
|
||||
};
|
||||
}
|
||||
|
||||
function createCenterFillVariant(direction: FlexDirection): SxStyleProp {
|
||||
return {
|
||||
variant: `variants.${direction}Center`,
|
||||
flex: "1 1 auto",
|
||||
flexDirection: direction,
|
||||
};
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import ButtonFactory from "./button";
|
||||
import InputFactory from "./input";
|
||||
import TextFactory from "./text";
|
||||
import FlexFactory from "./flex";
|
||||
|
||||
class VariantFactory {
|
||||
constructor() {
|
||||
return {
|
||||
buttons: new ButtonFactory(),
|
||||
forms: new InputFactory(),
|
||||
text: new TextFactory(),
|
||||
variants: {
|
||||
...new FlexFactory("row"),
|
||||
...new FlexFactory("column")
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
export default VariantFactory;
|
||||
19
packages/theme/src/theme/variants/index.ts
Normal file
19
packages/theme/src/theme/variants/index.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { getButtonVariants } from "./button";
|
||||
import { getInputVariants } from "./input";
|
||||
import { getTextVariants } from "./text";
|
||||
import { createFlexVariants } from "./flex";
|
||||
import { SxProps, SxStyleProp } from "rebass";
|
||||
|
||||
export function getVariants() {
|
||||
return {
|
||||
buttons: getButtonVariants(),
|
||||
forms: getInputVariants(),
|
||||
text: getTextVariants(),
|
||||
variants: {
|
||||
...createFlexVariants("row"),
|
||||
...createFlexVariants("column"),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export type Variants = Record<string, SxStyleProp>;
|
||||
@@ -1,64 +0,0 @@
|
||||
class InputFactory {
|
||||
constructor() {
|
||||
return {
|
||||
input: new Default(),
|
||||
error: new Error(),
|
||||
clean: new Clean(),
|
||||
};
|
||||
}
|
||||
}
|
||||
export default InputFactory;
|
||||
|
||||
class Default {
|
||||
constructor() {
|
||||
return {
|
||||
borderRadius: "default",
|
||||
border: "none",
|
||||
// borderColor: "border",
|
||||
boxShadow: "0px 0px 0px 1px var(--border) inset",
|
||||
fontFamily: "body",
|
||||
fontWeight: "body",
|
||||
fontSize: "input",
|
||||
color: "text",
|
||||
outline: "none",
|
||||
":focus": {
|
||||
boxShadow: "0px 0px 0px 1.5px var(--primary) inset",
|
||||
},
|
||||
":hover:not(:focus)": {
|
||||
boxShadow: "0px 0px 0px 1px var(--dimPrimary) inset",
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Clean {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "forms.input",
|
||||
outline: "none",
|
||||
boxShadow: "none",
|
||||
":focus": {
|
||||
boxShadow: "none",
|
||||
},
|
||||
":hover:not(:focus)": {
|
||||
boxShadow: "none",
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Error {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "forms.input",
|
||||
boxShadow: "0px 0px 0px 1px var(--error) inset",
|
||||
outline: "none",
|
||||
":focus": {
|
||||
boxShadow: "0px 0px 0px 1.5px var(--error) inset",
|
||||
},
|
||||
":hover:not(:focus)": {
|
||||
boxShadow: "0px 0px 0px 1px var(--error) inset",
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
53
packages/theme/src/theme/variants/input.ts
Normal file
53
packages/theme/src/theme/variants/input.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import { InputProps } from "@rebass/forms";
|
||||
import { SxProps, SxStyleProp } from "rebass";
|
||||
import { Variants } from ".";
|
||||
|
||||
export function getInputVariants(): Variants {
|
||||
return {
|
||||
input: defaultVariant,
|
||||
error,
|
||||
clean,
|
||||
};
|
||||
}
|
||||
|
||||
const defaultVariant: SxStyleProp = {
|
||||
borderRadius: "default",
|
||||
border: "none",
|
||||
// borderColor: "border",
|
||||
boxShadow: "0px 0px 0px 1px var(--border) inset",
|
||||
fontFamily: "body",
|
||||
fontWeight: "body",
|
||||
fontSize: "input",
|
||||
color: "text",
|
||||
outline: "none",
|
||||
":focus": {
|
||||
boxShadow: "0px 0px 0px 1.5px var(--primary) inset",
|
||||
},
|
||||
":hover:not(:focus)": {
|
||||
boxShadow: "0px 0px 0px 1px var(--dimPrimary) inset",
|
||||
},
|
||||
};
|
||||
|
||||
const clean: SxStyleProp = {
|
||||
variant: "forms.input",
|
||||
outline: "none",
|
||||
boxShadow: "none",
|
||||
":focus": {
|
||||
boxShadow: "none",
|
||||
},
|
||||
":hover:not(:focus)": {
|
||||
boxShadow: "none",
|
||||
},
|
||||
};
|
||||
|
||||
const error: SxStyleProp = {
|
||||
variant: "forms.input",
|
||||
boxShadow: "0px 0px 0px 1px var(--error) inset",
|
||||
outline: "none",
|
||||
":focus": {
|
||||
boxShadow: "0px 0px 0px 1.5px var(--error) inset",
|
||||
},
|
||||
":hover:not(:focus)": {
|
||||
boxShadow: "0px 0px 0px 1px var(--error) inset",
|
||||
},
|
||||
};
|
||||
@@ -1,75 +0,0 @@
|
||||
class TextFactory {
|
||||
constructor() {
|
||||
return {
|
||||
default: new Default(),
|
||||
heading: new Heading(),
|
||||
title: new Title(),
|
||||
subtitle: new Subtitle(),
|
||||
body: new Body(),
|
||||
subBody: new SubBody(),
|
||||
error: new Error(),
|
||||
};
|
||||
}
|
||||
}
|
||||
export default TextFactory;
|
||||
|
||||
class Default {
|
||||
constructor() {
|
||||
return {
|
||||
color: "text",
|
||||
fontFamily: "body",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Heading {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "text.default",
|
||||
fontFamily: "heading",
|
||||
fontWeight: "bold",
|
||||
fontSize: "heading",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Title {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "text.heading",
|
||||
fontSize: "title",
|
||||
fontWeight: "bold",
|
||||
};
|
||||
}
|
||||
}
|
||||
class Subtitle {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "text.heading",
|
||||
fontSize: "subtitle",
|
||||
fontWeight: "bold",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Body {
|
||||
constructor() {
|
||||
return { variant: "text.default", fontSize: "body" };
|
||||
}
|
||||
}
|
||||
|
||||
class SubBody {
|
||||
constructor() {
|
||||
return {
|
||||
variant: "text.default",
|
||||
fontSize: "subBody",
|
||||
color: "fontTertiary",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Error {
|
||||
constructor() {
|
||||
return { variant: "text.default", fontSize: "subBody", color: "error" };
|
||||
}
|
||||
}
|
||||
52
packages/theme/src/theme/variants/text.ts
Normal file
52
packages/theme/src/theme/variants/text.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { SxStyleProp } from "rebass";
|
||||
import { Variants } from ".";
|
||||
|
||||
export function getTextVariants(): Variants {
|
||||
return {
|
||||
default: defaultVariant,
|
||||
heading,
|
||||
title,
|
||||
subtitle,
|
||||
body,
|
||||
subBody,
|
||||
error,
|
||||
};
|
||||
}
|
||||
|
||||
const defaultVariant: SxStyleProp = {
|
||||
color: "text",
|
||||
fontFamily: "body",
|
||||
};
|
||||
|
||||
const heading: SxStyleProp = {
|
||||
variant: "text.default",
|
||||
fontFamily: "heading",
|
||||
fontWeight: "bold",
|
||||
fontSize: "heading",
|
||||
};
|
||||
|
||||
const title: SxStyleProp = {
|
||||
variant: "text.heading",
|
||||
fontSize: "title",
|
||||
fontWeight: "bold",
|
||||
};
|
||||
|
||||
const subtitle: SxStyleProp = {
|
||||
variant: "text.heading",
|
||||
fontSize: "subtitle",
|
||||
fontWeight: "bold",
|
||||
};
|
||||
|
||||
const body: SxStyleProp = { variant: "text.default", fontSize: "body" };
|
||||
|
||||
const subBody: SxStyleProp = {
|
||||
variant: "text.default",
|
||||
fontSize: "subBody",
|
||||
color: "fontTertiary",
|
||||
};
|
||||
|
||||
const error: SxStyleProp = {
|
||||
variant: "text.default",
|
||||
fontSize: "subBody",
|
||||
color: "error",
|
||||
};
|
||||
18
packages/theme/src/themeprovider.tsx
Normal file
18
packages/theme/src/themeprovider.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import ThemeFactory from "./theme";
|
||||
import { ThemeConfig } from "./theme/types";
|
||||
import { injectCss } from "./css";
|
||||
|
||||
const factory = new ThemeFactory();
|
||||
|
||||
export function useTheme(config: ThemeConfig, inject: boolean = true) {
|
||||
const { theme, accent, scale = 1 } = config;
|
||||
|
||||
const themeProperties = factory.construct({
|
||||
theme,
|
||||
accent,
|
||||
scale,
|
||||
});
|
||||
if (inject) injectCss(factory.transform("css", themeProperties));
|
||||
|
||||
return themeProperties;
|
||||
}
|
||||
106
packages/theme/tsconfig.json
Normal file
106
packages/theme/tsconfig.json
Normal file
@@ -0,0 +1,106 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
/* Visit https://aka.ms/tsconfig.json to read more about this file */
|
||||
|
||||
/* Projects */
|
||||
// "incremental": true, /* Enable incremental compilation */
|
||||
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
|
||||
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
|
||||
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
|
||||
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
|
||||
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
||||
|
||||
/* Language and Environment */
|
||||
"target": "ES5" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
|
||||
"lib": [
|
||||
"DOM",
|
||||
"DOM.Iterable",
|
||||
"ESNext"
|
||||
] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
|
||||
"jsx": "react-jsx" /* Specify what JSX code is generated. */,
|
||||
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
|
||||
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
||||
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
|
||||
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
|
||||
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
|
||||
// "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
|
||||
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
|
||||
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
|
||||
|
||||
/* Modules */
|
||||
"module": "ESNext" /* Specify what module code is generated. */,
|
||||
// "rootDir": "./", /* Specify the root folder within your source files. */
|
||||
"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
|
||||
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
|
||||
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
|
||||
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
|
||||
// "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */
|
||||
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
|
||||
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||
"resolveJsonModule": true /* Enable importing .json files */,
|
||||
// "noResolve": true, /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
|
||||
|
||||
/* JavaScript Support */
|
||||
"allowJs": true /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */,
|
||||
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
|
||||
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
|
||||
|
||||
/* Emit */
|
||||
"declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
|
||||
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
|
||||
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
|
||||
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
|
||||
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
|
||||
"outDir": "./dist" /* Specify an output folder for all emitted files. */,
|
||||
// "removeComments": true, /* Disable emitting comments. */
|
||||
// "noEmit": true, /* Disable emitting files from a compilation. */
|
||||
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
|
||||
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */
|
||||
"downlevelIteration": true /* Emit more compliant, but verbose and less performant JavaScript for iteration. */,
|
||||
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
|
||||
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
|
||||
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
|
||||
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
|
||||
// "newLine": "crlf", /* Set the newline character for emitting files. */
|
||||
// "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
|
||||
// "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */
|
||||
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
|
||||
// "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */
|
||||
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
|
||||
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
|
||||
|
||||
/* Interop Constraints */
|
||||
"isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
|
||||
"allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
|
||||
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
|
||||
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
|
||||
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
|
||||
|
||||
/* Type Checking */
|
||||
"strict": true /* Enable all strict type-checking options. */,
|
||||
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */
|
||||
// "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */
|
||||
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
||||
// "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
|
||||
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
||||
// "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */
|
||||
// "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */
|
||||
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
||||
// "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */
|
||||
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */
|
||||
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
||||
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
||||
"noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
|
||||
// "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
|
||||
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
||||
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */
|
||||
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
||||
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
||||
|
||||
/* Completeness */
|
||||
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
||||
"skipLibCheck": true /* Skip type checking all .d.ts files. */
|
||||
},
|
||||
"include": ["src/"]
|
||||
}
|
||||
11785
packages/theme/yarn.lock
11785
packages/theme/yarn.lock
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user