@unifyux/theme v3.0.1
@unifyux/theme
This package outputs a single source of truth for standard values of common elements of a design system for use in JS, SASS, and CSS.
Demo
yarn demoBuild
yarn buildUsage
CSS & SASS variables may be used directly from package / node_modules.
CSS: {node_modules}/@unifyux/theme/unify.css
SASS: {node_modules}/@unifyux/theme/unify.scss
For JS, you should be able to import the module directly from the package @unifyux/theme, whether you
are using CommonJS or ES2015 modules. A UMD module is also provided, which can be used by a <script> tag.
Example Usage
Use CSS Variable in CSS
@import '@unifyux/theme/unify.css';Use CSS Variables in HTML
<link rel="stylesheet" href="./node_modules/@unifyux/theme/unify.css" type="text/css" media="screen" />import SASS
@import "@unifyux/theme/unify.scss";import module in JS (ES6)
import { unify } from '@unifyux/theme';Import JS module in HTML
<script type="module" src="./node_modules/@unifyux/theme/dist/theme.esm.js"></script>import JS module in HTML (UMD for legacy browsers)
<script nomodule src="./node_modules/@unifyux/theme/dist/theme.umd.js"></script>import module in JS (Common JS, RequireJS)
const theme = require('@unifyux/theme');After Importing Module, Use Variables
Having used CommonJS require():
const blue = theme.unify.blue;
const primary = theme.unify.primary;Having used ES2015 import:
const blue = unify.blue;
const primary = unify.primary;Output and documentation
- List of value options and what they are for each area in all 3 forms
Adding new values
Add them to the unify.css file as a CSS variable.
Insights / Challenges this package addresses
- No clear, documented single source of truth for UI element values
- Missing way to assign in code vs CSS class (i.e. set color variable in javascript)
- Direct access to color variables (SCSS/SASS)
- Default values (like colors) in external libraries are never changed from defaults in practice in applications
Suggested (SASS)
- https://www.npmjs.com/package/node-sass-import
- https://github.com/maoberlehner/node-sass-magic-importer/tree/master/packages/node-sass-magic-importer
Sources / Inspiration / Notes
- https://medium.com/@marcintreder/design-system-sprint-2-one-color-palette-to-rule-them-all-d0114ed1f659
- https://github.com/JetBrains/ring-ui/commit/94328f646ad6f1fd8db115d7cbb37bea4ea8a0df
- https://2ality.com/2011/08/universal-modules.html
- https://css-tricks.com/introducing-sass-modules/
- https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript
- https://itnext.io/sharing-variables-between-js-and-sass-using-webpack-sass-loader-713f51fa7fa0
- https://hugogiraudel.com/2015/06/18/styling-react-components-in-sass/
- https://www.sitepoint.com/using-sass-maps/
- https://simplygoodwork.com/articles/friendlier-color-names-sass-maps
- https://getbootstrap.com/docs/4.1/getting-started/webpack/#importing-styles
10 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago