diff --git a/babel.config.js b/babel.config.js index 6e2b374..ac5821f 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,6 +1,10 @@ module.exports = { plugins: [ - '@babel/plugin-proposal-class-properties' + '@babel/plugin-proposal-class-properties', + ['babel-plugin-root-import', { + "rootPathSuffix": "src/", + "rootPathPrefix": "@/" + }] ], presets: [ '@babel/typescript', diff --git a/package-lock.json b/package-lock.json index 567373a..4574ecf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2416,6 +2416,15 @@ "csstype": "^3.0.2" } }, + "@types/react-dom": { + "version": "16.9.8", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz", + "integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/react-is": { "version": "16.7.1", "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-16.7.1.tgz", @@ -3561,6 +3570,15 @@ "integrity": "sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw==", "dev": true }, + "babel-plugin-root-import": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/babel-plugin-root-import/-/babel-plugin-root-import-6.6.0.tgz", + "integrity": "sha512-SPzVOHd7nDh5loZwZBxtX/oOu1MXeKjTkz+1VnnzLWC0dk8sJIGC2IDQ2uWIBjE5mUtXlQ35MTHSqN0Xn7qHrg==", + "dev": true, + "requires": { + "slash": "^3.0.0" + } + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", diff --git a/package.json b/package.json index 156cf28..fc2f54d 100644 --- a/package.json +++ b/package.json @@ -20,9 +20,11 @@ "@types/enzyme-adapter-react-16": "^1.0.6", "@types/jest": "^26.0.10", "@types/react": "^16.9.46", + "@types/react-dom": "^16.9.8", "@types/react-is": "^16.7.1", "@typescript-eslint/eslint-plugin": "^4.5.0", "@typescript-eslint/parser": "^4.5.0", + "babel-plugin-root-import": "^6.6.0", "dart-sass": "^1.25.0", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.3", diff --git a/src/components/Page/Content.tsx b/src/components/Page/Content.tsx new file mode 100644 index 0000000..60bb75c --- /dev/null +++ b/src/components/Page/Content.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import clsx from 'clsx'; + +type PageContentProps = React.HTMLAttributes; + +const PageContent = ({ + children, + className +}: React.PropsWithChildren): React.ReactElement => ( +
+ {children} +
+); + +export default PageContent; diff --git a/src/components/Page/Header.tsx b/src/components/Page/Header.tsx new file mode 100644 index 0000000..b032ef4 --- /dev/null +++ b/src/components/Page/Header.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import Panel from '@/components/Panel'; +import clsx from 'clsx'; + +export interface PageHeaderProps extends React.HTMLAttributes { + title?: string; +} + +const PageHeader = ({ + children, + className, + title +}: React.PropsWithChildren): React.ReactElement => ( + + {title && ( +
+

{title}

+
+ )} + {children} + +); + +export default PageHeader; diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx new file mode 100644 index 0000000..48344b2 --- /dev/null +++ b/src/components/Page/index.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import clsx from 'clsx'; +import PageHeader from '@/components/Page/Header'; +import PageContent from '@/components/Page/Content'; + +export type PageProps = React.HTMLAttributes ; + +const Page = ({ + children, + className, +}: React.PropsWithChildren): React.ReactElement => ( +
+ {children} +
+); + +Page.Header = PageHeader; +Page.Content = PageContent; + +export default Page; diff --git a/src/components/Panel/index.tsx b/src/components/Panel/index.tsx new file mode 100644 index 0000000..cf4c28a --- /dev/null +++ b/src/components/Panel/index.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import clsx from 'clsx'; + +interface PanelProps extends React.HTMLAttributes { + spaced?: boolean; +} + +const Panel = ({ + children, + className, + spaced +}: React.PropsWithChildren): React.ReactElement => ( +
+ {children} +
+); + +export default Panel; diff --git a/src/components/index.ts b/src/components/index.ts index 04bca77..a13c6dc 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1 +1,3 @@ export * from './utils'; +export { default as Page } from './Page'; +export { default as Panel } from './Panel'; diff --git a/src/fonts/inter/inter-v2-latin-100.eot b/src/fonts/inter/inter-v2-latin-100.eot new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-100.svg b/src/fonts/inter/inter-v2-latin-100.svg new file mode 100644 index 0000000..88884b4 --- /dev/null +++ b/src/fonts/inter/inter-v2-latin-100.svg @@ -0,0 +1,349 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/fonts/inter/inter-v2-latin-100.ttf b/src/fonts/inter/inter-v2-latin-100.ttf new file mode 100644 index 0000000..91bff86 Binary files /dev/null and b/src/fonts/inter/inter-v2-latin-100.ttf differ diff --git a/src/fonts/inter/inter-v2-latin-100.woff b/src/fonts/inter/inter-v2-latin-100.woff new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-100.woff2 b/src/fonts/inter/inter-v2-latin-100.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-200.eot b/src/fonts/inter/inter-v2-latin-200.eot new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-200.svg b/src/fonts/inter/inter-v2-latin-200.svg new file mode 100644 index 0000000..08ea51d --- /dev/null +++ b/src/fonts/inter/inter-v2-latin-200.svg @@ -0,0 +1,350 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/fonts/inter/inter-v2-latin-200.ttf b/src/fonts/inter/inter-v2-latin-200.ttf new file mode 100644 index 0000000..9b6aaa2 Binary files /dev/null and b/src/fonts/inter/inter-v2-latin-200.ttf differ diff --git a/src/fonts/inter/inter-v2-latin-200.woff b/src/fonts/inter/inter-v2-latin-200.woff new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-200.woff2 b/src/fonts/inter/inter-v2-latin-200.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-300.eot b/src/fonts/inter/inter-v2-latin-300.eot new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-300.svg b/src/fonts/inter/inter-v2-latin-300.svg new file mode 100644 index 0000000..6908131 --- /dev/null +++ b/src/fonts/inter/inter-v2-latin-300.svg @@ -0,0 +1,350 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/fonts/inter/inter-v2-latin-300.ttf b/src/fonts/inter/inter-v2-latin-300.ttf new file mode 100644 index 0000000..dfa15d0 Binary files /dev/null and b/src/fonts/inter/inter-v2-latin-300.ttf differ diff --git a/src/fonts/inter/inter-v2-latin-300.woff b/src/fonts/inter/inter-v2-latin-300.woff new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-300.woff2 b/src/fonts/inter/inter-v2-latin-300.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-500.eot b/src/fonts/inter/inter-v2-latin-500.eot new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-500.svg b/src/fonts/inter/inter-v2-latin-500.svg new file mode 100644 index 0000000..737585d --- /dev/null +++ b/src/fonts/inter/inter-v2-latin-500.svg @@ -0,0 +1,351 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/fonts/inter/inter-v2-latin-500.ttf b/src/fonts/inter/inter-v2-latin-500.ttf new file mode 100644 index 0000000..9ee77a3 Binary files /dev/null and b/src/fonts/inter/inter-v2-latin-500.ttf differ diff --git a/src/fonts/inter/inter-v2-latin-500.woff b/src/fonts/inter/inter-v2-latin-500.woff new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-500.woff2 b/src/fonts/inter/inter-v2-latin-500.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-600.eot b/src/fonts/inter/inter-v2-latin-600.eot new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-600.svg b/src/fonts/inter/inter-v2-latin-600.svg new file mode 100644 index 0000000..9c54192 --- /dev/null +++ b/src/fonts/inter/inter-v2-latin-600.svg @@ -0,0 +1,351 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/fonts/inter/inter-v2-latin-600.ttf b/src/fonts/inter/inter-v2-latin-600.ttf new file mode 100644 index 0000000..b69705b Binary files /dev/null and b/src/fonts/inter/inter-v2-latin-600.ttf differ diff --git a/src/fonts/inter/inter-v2-latin-600.woff b/src/fonts/inter/inter-v2-latin-600.woff new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-600.woff2 b/src/fonts/inter/inter-v2-latin-600.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-700.eot b/src/fonts/inter/inter-v2-latin-700.eot new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-700.svg b/src/fonts/inter/inter-v2-latin-700.svg new file mode 100644 index 0000000..1ed86ff --- /dev/null +++ b/src/fonts/inter/inter-v2-latin-700.svg @@ -0,0 +1,352 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/fonts/inter/inter-v2-latin-700.ttf b/src/fonts/inter/inter-v2-latin-700.ttf new file mode 100644 index 0000000..22afc01 Binary files /dev/null and b/src/fonts/inter/inter-v2-latin-700.ttf differ diff --git a/src/fonts/inter/inter-v2-latin-700.woff b/src/fonts/inter/inter-v2-latin-700.woff new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-700.woff2 b/src/fonts/inter/inter-v2-latin-700.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-800.eot b/src/fonts/inter/inter-v2-latin-800.eot new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-800.svg b/src/fonts/inter/inter-v2-latin-800.svg new file mode 100644 index 0000000..e689401 --- /dev/null +++ b/src/fonts/inter/inter-v2-latin-800.svg @@ -0,0 +1,350 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/fonts/inter/inter-v2-latin-800.ttf b/src/fonts/inter/inter-v2-latin-800.ttf new file mode 100644 index 0000000..a8ab1f8 Binary files /dev/null and b/src/fonts/inter/inter-v2-latin-800.ttf differ diff --git a/src/fonts/inter/inter-v2-latin-800.woff b/src/fonts/inter/inter-v2-latin-800.woff new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-800.woff2 b/src/fonts/inter/inter-v2-latin-800.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-900.eot b/src/fonts/inter/inter-v2-latin-900.eot new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-900.svg b/src/fonts/inter/inter-v2-latin-900.svg new file mode 100644 index 0000000..60f2670 --- /dev/null +++ b/src/fonts/inter/inter-v2-latin-900.svg @@ -0,0 +1,349 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/fonts/inter/inter-v2-latin-900.ttf b/src/fonts/inter/inter-v2-latin-900.ttf new file mode 100644 index 0000000..b07b4b1 Binary files /dev/null and b/src/fonts/inter/inter-v2-latin-900.ttf differ diff --git a/src/fonts/inter/inter-v2-latin-900.woff b/src/fonts/inter/inter-v2-latin-900.woff new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-900.woff2 b/src/fonts/inter/inter-v2-latin-900.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-regular.eot b/src/fonts/inter/inter-v2-latin-regular.eot new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-regular.svg b/src/fonts/inter/inter-v2-latin-regular.svg new file mode 100644 index 0000000..84da31d --- /dev/null +++ b/src/fonts/inter/inter-v2-latin-regular.svg @@ -0,0 +1,351 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/fonts/inter/inter-v2-latin-regular.ttf b/src/fonts/inter/inter-v2-latin-regular.ttf new file mode 100644 index 0000000..3fedbc7 Binary files /dev/null and b/src/fonts/inter/inter-v2-latin-regular.ttf differ diff --git a/src/fonts/inter/inter-v2-latin-regular.woff b/src/fonts/inter/inter-v2-latin-regular.woff new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/inter/inter-v2-latin-regular.woff2 b/src/fonts/inter/inter-v2-latin-regular.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/src/style/base/_base.scss b/src/style/base/_base.scss index 942fb8a..8342c14 100644 --- a/src/style/base/_base.scss +++ b/src/style/base/_base.scss @@ -1,3 +1,12 @@ html { - font-size: 14px; + font-size: var(--base-font-size); +} + +body { + background: var(--base-body-background); + color: var(--base-font-color); + margin: var(--base-body-gutter); + font: { + family: var(--base-font-family); + } } diff --git a/src/style/base/_typography.scss b/src/style/base/_typography.scss new file mode 100644 index 0000000..a0867eb --- /dev/null +++ b/src/style/base/_typography.scss @@ -0,0 +1,128 @@ +@use "mixins"; + +/* inter-100 - latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 100; + src: local(''), + url('../fonts/inter/inter-v2-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/inter/inter-v2-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* inter-200 - latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 200; + src: local(''), + url('../fonts/inter/inter-v2-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/inter/inter-v2-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* inter-300 - latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 300; + src: local(''), + url('../fonts/inter/inter-v2-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/inter/inter-v2-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* inter-regular - latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + src: local(''), + url('../fonts/inter/inter-v2-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/inter/inter-v2-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* inter-500 - latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + src: local(''), + url('../fonts/inter/inter-v2-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/inter/inter-v2-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* inter-600 - latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + src: local(''), + url('../fonts/inter/inter-v2-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/inter/inter-v2-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* inter-700 - latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + src: local(''), + url('../fonts/inter/inter-v2-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/inter/inter-v2-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* inter-800 - latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 800; + src: local(''), + url('../fonts/inter/inter-v2-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/inter/inter-v2-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* inter-900 - latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 900; + src: local(''), + url('../fonts/inter/inter-v2-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/inter/inter-v2-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +h1 { + font-size: 2rem; + color: mixins.color('gray', 900); + font-weight: normal; + margin: 0; +} + +h2 { + font-size: 1.8rem; + margin: 0 0 1rem; + color: mixins.color('gray', 900); +} + +h3 { + font-size: 1.6rem; + margin: 0 0 1rem; + color: mixins.color('gray', 900); +} + +h4 { + font-size: 1.4rem; + margin: 0 0 1rem; + color: mixins.color('gray', 900); +} + +h5 { + font-size: 1.2rem; + margin: 0 0 1rem; + color: mixins.color('gray', 900); +} + +h6 { + font-size: 1.1rem; + margin: 0 0 1rem; + color: mixins.color('gray', 900); +} + +.text-danger { + color: mixins.color('red', 700); +} + +.text-secondary { + color: mixins.color('gray', 600); +} diff --git a/src/style/base/_variables.scss b/src/style/base/_variables.scss index e20a257..3a041c0 100644 --- a/src/style/base/_variables.scss +++ b/src/style/base/_variables.scss @@ -2,3 +2,42 @@ @use "colors"; $primary-radius: 4px; + +/** + * 1. Base + */ +$base-background-color: mixins.color('gray', 50); +$base-body-gutter: 0; +$base-font-color: mixins.color('blueGray', 900); +$base-font-family: 'Inter, apple-sf-pro-text, Helvetica, Arial, sans-serif'; +$base-font-size: 16px; +$base-border-color: mixins.color('gray', 300); + +:root { + --base-font-size: #{$base-font-size}; + --base-body-background: #{$base-background-color}; + --base-body-gutter: #{$base-body-gutter}; + --base-font-color: #{$base-font-color}; + --base-font-family: #{$base-font-family}; + --base-border-color: #{$base-border-color}; +} + +/** + * 2. Panel + */ +$panel-background: #fff; +$panel-gutter: 2rem; + +:root { + --panel-background: #{$panel-background}; + --panel-gutter: #{$panel-gutter} +} + +/** + * 3. Page + */ +$page-gutter: 2rem; + +:root { + --page-gutter: #{$page-gutter}; +} diff --git a/src/style/components/_page.scss b/src/style/components/_page.scss new file mode 100644 index 0000000..8e16613 --- /dev/null +++ b/src/style/components/_page.scss @@ -0,0 +1,22 @@ +.page { + background: var(--page-background-color); + + .page-header { + border-bottom: solid 1px var(--base-border-color); + padding-top: var(--page-gutter); + padding-right: var(--page-gutter); + padding-left: var(--page-gutter); + + &:not(.with-title) { + padding-bottom: var(--page-gutter); + } + + .page-header-title { + padding-bottom: var(--page-gutter); + } + } + + .page-content { + padding: var(--page-gutter); + } +} diff --git a/src/style/components/_panel.scss b/src/style/components/_panel.scss new file mode 100644 index 0000000..e46dc3a --- /dev/null +++ b/src/style/components/_panel.scss @@ -0,0 +1,7 @@ +.panel { + background: var(--panel-background); + + &.panel-spaced { + padding: var(--panel-gutter); + } +} diff --git a/src/style/index.scss b/src/style/index.scss index 21354e4..c804147 100644 --- a/src/style/index.scss +++ b/src/style/index.scss @@ -3,9 +3,12 @@ */ @use "base/colors"; @use "base/mixins"; +@use "base/typography"; @use "base/variables"; @use "base/base"; /** * 2. Components */ +@use "components/page"; +@use "components/panel";