From 235b69ac3bb659464a47721231c4309d2ecd03c0 Mon Sep 17 00:00:00 2001 From: chrisrzhou Date: Sat, 25 Jun 2022 13:44:41 -0700 Subject: [PATCH] release: 1.0.0 --- .editorconfig | 9 ++ .github/FUNDING.yml | 1 + .github/workflows/main.yml | 23 +++++ .gitignore | 6 ++ index.js | 153 +++++++++++++++++++++++++++++++++ license | 21 +++++ package.json | 73 ++++++++++++++++ readme.md | 169 +++++++++++++++++++++++++++++++++++++ test/index.js | 160 +++++++++++++++++++++++++++++++++++ tsconfig.json | 17 ++++ 10 files changed, 632 insertions(+) create mode 100644 .editorconfig create mode 100644 .github/FUNDING.yml create mode 100644 .github/workflows/main.yml create mode 100644 .gitignore create mode 100644 index.js create mode 100644 license create mode 100644 package.json create mode 100644 readme.md create mode 100644 test/index.js create mode 100644 tsconfig.json diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..c6c8b36 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..6b5a8a0 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +github: [uinix-js] diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..7e96f6e --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,23 @@ +name: main +on: + - pull_request + - push +jobs: + main: + name: '${{matrix.node}} on ${{matrix.os}}' + runs-on: ${{matrix.os}} + steps: + - uses: actions/checkout@v2 + - uses: dcodeIO/setup-node-nvm@master + with: + node-version: ${{matrix.node}} + - run: npm install + - run: npm test + - uses: codecov/codecov-action@v1 + strategy: + matrix: + os: + - ubuntu-latest + node: + - 18.x + - node diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..97fcc36 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +.DS_Store +*.d.ts +*.log +coverage/ +node_modules/ +package-lock.json diff --git a/index.js b/index.js new file mode 100644 index 0000000..9f7c9db --- /dev/null +++ b/index.js @@ -0,0 +1,153 @@ +const spec = { + borders: [ + 'border', + 'borderBlock', + 'borderBlockEnd', + 'borderBlockStart', + 'borderBottom', + 'borderInline', + 'borderInlineEnd', + 'borderInlineStart', + 'borderLeft', + 'borderRight', + 'borderTop', + ], + borderStyles: [ + 'borderBlockEndStyle', + 'borderBlockStartStyle', + 'borderBlockStyle', + 'borderBottomStyle', + 'borderInlineEndStyle', + 'borderInlineStartStyle', + 'borderInlineStyle', + 'borderLeftStyle', + 'borderRightStyle', + 'borderStyle', + 'borderTopStyle', + ], + borderWidths: [ + 'borderBlockEndWidth', + 'borderBlockStartWidth', + 'borderBlockWidth', + 'borderBottomWidth', + 'borderInlineEndWidth', + 'borderInlineStartWidth', + 'borderInlineWidth', + 'borderLeftWidth', + 'borderRightWidth', + 'borderTopWidth', + 'borderWidth', + 'column-rule-width', + ], + colors: [ + 'background', + 'backgroundColor', + 'borderBlockColor', + 'borderBlockEndColor', + 'borderBlockStartColor', + 'borderBottomColor', + 'borderColor', + 'borderInlineColor', + 'borderInlineEndColor', + 'borderInlineStartColor', + 'borderLeftColor', + 'borderRightColor', + 'borderTopColor', + 'caretColor', + 'color', + 'columnRuleColor', + 'fill', + 'outlineColor', + 'stroke', + 'textDecorationColor', + ], + fonts: ['fontFamily'], + fontSizes: ['fontSize'], + fontWeights: ['fontWeight'], + letterSpacings: ['letterSpacing'], + lineHeights: ['lineHeight'], + opacities: ['opacity'], + radii: [ + 'borderEndEndRadius', + 'borderEndStartRadius', + 'borderBottomLeftRadius', + 'borderBottomRightRadius', + 'borderRadius', + 'borderStartEndRadius', + 'borderStartStartRadius', + 'borderTopLeftRadius', + 'borderTopRightRadius', + ], + shadows: ['boxShadow', 'textShadow'], + sizes: [ + 'blockSize', + 'columnWidth', + 'flexBasis', + 'height', + 'inlineSize', + 'maxBlockSize', + 'maxHeight', + 'maxInlineSize', + 'maxWidth', + 'minBlockSize', + 'minHeight', + 'minInlineSize', + 'minWidth', + 'width', + ], + space: [ + 'bottom', + 'columnGap', + 'gap', + 'gridColumnGap', + 'gridGap', + 'gridRowGap', + 'inset', + 'insetBlock', + 'insetBlockEnd', + 'insetBlockStart', + 'insetInline', + 'insetInlineEnd', + 'insetInlineStart', + 'left', + 'margin', + 'marginBlock', + 'marginBlockEnd', + 'marginBlockStart', + 'marginBottom', + 'marginInline', + 'marginInlineEnd', + 'marginInlineStart', + 'marginLeft', + 'marginRight', + 'marginTop', + 'padding', + 'paddingBlock', + 'paddingBlockEnd', + 'paddingBlockStart', + 'paddingBottom', + 'paddingInline', + 'paddingInlineEnd', + 'paddingInlineStart', + 'paddingLeft', + 'paddingRight', + 'paddingTop', + 'right', + 'rowGap', + 'scrollMargin', + 'scrollMarginBottom', + 'scrollMarginLeft', + 'scrollMarginRight', + 'scrollMarginTop', + 'scrollPadding', + 'scrollPaddingBottom', + 'scrollPaddingLeft', + 'scrollPaddingRight', + 'scrollPaddingTop', + 'top', + ], + transitions: ['transition'], + zIndices: ['zIndex'], +}; + +export default spec; diff --git a/license b/license new file mode 100644 index 0000000..f183cad --- /dev/null +++ b/license @@ -0,0 +1,21 @@ +(The MIT License) + +Copyright (c) 2022 Chris Zhou + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/package.json b/package.json new file mode 100644 index 0000000..d9d7570 --- /dev/null +++ b/package.json @@ -0,0 +1,73 @@ +{ + "name": "uinix-theme-spec-theme-ui", + "version": "1.0.0", + "description": "The theme-ui theme spec usable by uinix-theme.", + "license": "MIT", + "keywords": [ + "uinix", + "theme", + "spec", + "theme-ui" + ], + "repository": "uinix-js/uinix-theme-spec-theme-ui", + "bugs": "https://github.com/uinix-js/uinix-theme-spec-theme-ui/issues", + "author": "Chris Zhou (https://chrisrzhou.io)", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/uinix-js" + } + ], + "sideEffects": false, + "type": "module", + "main": "index.js", + "types": "index.d.ts", + "files": [ + "index.js", + "index.d.ts" + ], + "exports": "./index.js", + "devDependencies": { + "c8": "^7.11.3", + "rimraf": "^3.0.2", + "type-coverage": "^2.21.1", + "typescript": "^4.7.4", + "xo": "^0.50.0" + }, + "scripts": { + "build": "npm run clean && tsc && type-coverage", + "clean": "rimraf *.d.ts", + "lint": "xo --fix", + "test-coverage": "c8 --check-coverage --all --100 --reporter lcov node --test test/index.js", + "test": "npm run build && npm run lint && npm run test-coverage" + }, + "prettier": { + "bracketSpacing": false, + "semi": true, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "all", + "useTabs": false + }, + "typeCoverage": { + "atLeast": 100, + "detail": true, + "ignoreFiles": "test/*.js", + "strict": true, + "suppressError": true + }, + "xo": { + "esnext": false, + "prettier": true, + "overrides": [ + { + "files": [ + "test/**/*.js" + ], + "rules": { + "import/no-unassigned-import": "off" + } + } + ] + } +} diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..de9b0ae --- /dev/null +++ b/readme.md @@ -0,0 +1,169 @@ +# uinix-theme-spec-theme-ui + +[![Build][build-badge]][build] +[![Coverage][coverage-badge]][coverage] +[![Downloads][downloads-badge]][downloads] +[![Size][bundle-size-badge]][bundle-size] + +The [`theme-ui`][theme-ui] theme spec usable by [`uinix-theme`][uinix-theme]. + +Visit the [Theme Playground] for interactive demos. + +## Contents + +- [Install](#install) +- [Use](#use) +- [API](#api) +- [Related](#related) +- [License](#license) + +## Install + +This package is [ESM-only] and requires Node 12+. + +```sh +npm install uinix-theme-spec-theme-ui +``` + +## Use + +`uinix-theme-spec-theme-ui` can be used officially with [`uinix-theme`][uinix-theme] or [`uinix-ui`][uinix-ui]. + +```js +import {createTheme} from 'uinix-theme'; +import themeSpec from 'uinix-theme-spec-theme-ui'; + +const theme = createTheme({ + colors: { + brand: { + primary: 'red', + link: 'blue', + }, + }, + space: { + s: 4, + m: 8, + l: 16, + }, + unsupportedThemeProperty: {} +}, themeSpec); + + +console.log(theme); +``` + +Yields the following theme object. + +```js +const theme = { + borders: {}, + borderStyles: {}, + borderWidths: {}, + colors: { + brand: { + primary: 'red', + link: 'blue', + }, + }, + fonts: {}, + fontSizes: {}, + fontWeights: {}, + letterSpacings: {}, + lineHeights: {}, + opacities: {}, + radii: {}, + shadows: {}, + sizes: {}, + space: { + s: 4, + m: 8, + l: 16, + }, + transforms: {}, + zIndices: {}, +}; +``` + +Apply the `theme` and `themeSpec` to a theme renderer. + +```js +import {createThemeRenderer} from 'uinix-theme'; + +const renderer = createThemeRenderer({ + theme, + themeSpec, +}); +``` + +Initialize the renderer and render a themed style. + +```js +const style = { + color: 'brand.primary', + padding: 'm', + ':hover > a': { + color: 'brand.link', + padding: 's', + }, +}; + +renderer.renderStyle(style); +``` + +Yields the following rendered CSS + +```css +.x { + color: red; + padding: 8px; +} +.x:hover > a { + color: blue; + padding: 4px +} +``` + +See [`uinix-theme`][uinix-theme] and [`theme-ui`][theme-ui] for more details. + +## API + +`uinix-theme-spec-theme-ui` only has a single default export. + +### `spec (ThemeSpec)` + +A [`theme-ui`][theme-ui] theme spec, usable by a theme renderer. + +### Related + +- [`uinix-theme`][uinix-theme] +- [`uinix-theme-spec`][uinix-theme-spec] +- [`uinix-ui`][uinix-ui] +- [`theme-ui`][theme-ui] + +### License + +[MIT][license] © [Chris Zhou][author] + + + +[author]: https://github.com/chrisrzhou +[license]: https://github.com/uinix-js/uinix-theme-spec-theme-ui/blob/main/license +[build]: https://github.com/uinix-js/uinix-theme-spec-theme-ui/actions +[build-badge]: https://github.com/uinix-js/uinix-theme-spec-theme-ui/workflows/main/badge.svg +[coverage]: https://codecov.io/github/uinix-js/uinix-theme-spec-theme-ui +[coverage-badge]: https://img.shields.io/codecov/c/github/uinix-js/uinix-theme-spec-theme-ui.svg +[downloads]: https://www.npmjs.com/package/uinix-theme-spec-theme-ui +[downloads-badge]: https://img.shields.io/npm/dm/uinix-theme-spec-theme-ui.svg +[bundle-size]: https://bundlephobia.com/result?p=uinix-theme-spec-theme-ui +[bundle-size-badge]: https://img.shields.io/bundlephobia/minzip/uinix-theme-spec-theme-ui.svg +[uinix-js]: https://github.com/uinix-js/ +[uinix philosophy]: https://github.com/uinix-js#the-uinix-philosophy +[uinix-ui]: https://github.com/uinix-js/uinix-ui + + +[ESM-only]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c +[theme playground]: https://uinix.dev/tools/uinix-theme-playground +[theme-ui]: https://github.com/system-ui/theme-ui +[uinix-theme]: https://github.com/uinix-js/uinix-theme +[uinix-theme-spec]: https://github.com/uinix-js/uinix-theme-spec +[uinix-ui]: https://github.com/uinix-js/uinix-ui diff --git a/test/index.js b/test/index.js new file mode 100644 index 0000000..4cb0238 --- /dev/null +++ b/test/index.js @@ -0,0 +1,160 @@ +import assert from 'node:assert'; +import test from 'node:test'; + +import spec from '../index.js'; + +test('spec', (t) => { + t.test('should match snapshot', () => { + assert.deepEqual(spec, { + borders: [ + 'border', + 'borderBlock', + 'borderBlockEnd', + 'borderBlockStart', + 'borderBottom', + 'borderInline', + 'borderInlineEnd', + 'borderInlineStart', + 'borderLeft', + 'borderRight', + 'borderTop', + ], + borderStyles: [ + 'borderBlockEndStyle', + 'borderBlockStartStyle', + 'borderBlockStyle', + 'borderBottomStyle', + 'borderInlineEndStyle', + 'borderInlineStartStyle', + 'borderInlineStyle', + 'borderLeftStyle', + 'borderRightStyle', + 'borderStyle', + 'borderTopStyle', + ], + borderWidths: [ + 'borderBlockEndWidth', + 'borderBlockStartWidth', + 'borderBlockWidth', + 'borderBottomWidth', + 'borderInlineEndWidth', + 'borderInlineStartWidth', + 'borderInlineWidth', + 'borderLeftWidth', + 'borderRightWidth', + 'borderTopWidth', + 'borderWidth', + 'column-rule-width', + ], + colors: [ + 'background', + 'backgroundColor', + 'borderBlockColor', + 'borderBlockEndColor', + 'borderBlockStartColor', + 'borderBottomColor', + 'borderColor', + 'borderInlineColor', + 'borderInlineEndColor', + 'borderInlineStartColor', + 'borderLeftColor', + 'borderRightColor', + 'borderTopColor', + 'caretColor', + 'color', + 'columnRuleColor', + 'fill', + 'outlineColor', + 'stroke', + 'textDecorationColor', + ], + fonts: ['fontFamily'], + fontSizes: ['fontSize'], + fontWeights: ['fontWeight'], + letterSpacings: ['letterSpacing'], + lineHeights: ['lineHeight'], + opacities: ['opacity'], + radii: [ + 'borderEndEndRadius', + 'borderEndStartRadius', + 'borderBottomLeftRadius', + 'borderBottomRightRadius', + 'borderRadius', + 'borderStartEndRadius', + 'borderStartStartRadius', + 'borderTopLeftRadius', + 'borderTopRightRadius', + ], + shadows: ['boxShadow', 'textShadow'], + sizes: [ + 'blockSize', + 'columnWidth', + 'flexBasis', + 'height', + 'inlineSize', + 'maxBlockSize', + 'maxHeight', + 'maxInlineSize', + 'maxWidth', + 'minBlockSize', + 'minHeight', + 'minInlineSize', + 'minWidth', + 'width', + ], + space: [ + 'bottom', + 'columnGap', + 'gap', + 'gridColumnGap', + 'gridGap', + 'gridRowGap', + 'inset', + 'insetBlock', + 'insetBlockEnd', + 'insetBlockStart', + 'insetInline', + 'insetInlineEnd', + 'insetInlineStart', + 'left', + 'margin', + 'marginBlock', + 'marginBlockEnd', + 'marginBlockStart', + 'marginBottom', + 'marginInline', + 'marginInlineEnd', + 'marginInlineStart', + 'marginLeft', + 'marginRight', + 'marginTop', + 'padding', + 'paddingBlock', + 'paddingBlockEnd', + 'paddingBlockStart', + 'paddingBottom', + 'paddingInline', + 'paddingInlineEnd', + 'paddingInlineStart', + 'paddingLeft', + 'paddingRight', + 'paddingTop', + 'right', + 'rowGap', + 'scrollMargin', + 'scrollMarginBottom', + 'scrollMarginLeft', + 'scrollMarginRight', + 'scrollMarginTop', + 'scrollPadding', + 'scrollPaddingBottom', + 'scrollPaddingLeft', + 'scrollPaddingRight', + 'scrollPaddingTop', + 'top', + ], + transitions: ['transition'], + zIndices: ['zIndex'], + }); + }); +}); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..2077dd7 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "allowJs": true, + "allowSyntheticDefaultImports": true, + "checkJs": true, + "declaration": true, + "emitDeclarationOnly": true, + "lib": ["es2020"], + "moduleResolution": "nodenext", + "module": "es2020", + "skipLibCheck": true, + "strict": true, + "target": "es2020" + }, + "exclude": ["coverage", "node_modules", "test"], + "include": ["**/*.js", "declaration.d.ts"], +}