@mirage-ui/colors
v0.1.1
Published
The ultimate color system for developers and designers.
Downloads
8
Maintainers
Readme
Mirage UI Colors
The ultimate color system for developers and designers.
Installation
yarn
yarn add @mirage-ui/colors
npm
npm install @mirage-ui/colors
Usage
Tailwind CSS
// tailwind.config.js
const { warning, functional, success } = require("@mirage-ui/colors");
module.exports = {
theme: {
colors: {
...warning,
...functional,
...success,
},
},
};
Vanilla CSS
@import "@mirage-ui/colors/warning";
@import "@mirage-ui/colors/functional";
@import "@mirage-ui/colors/success";
--warning: var(--warning-200);
--black: var(--functional-black);
--success: var(--success-200);
.warning {
color: var(--warning);
}
.functional {
color: var(--black);
}
.success {
color: var(--success);
}
Stitches
import { createCss } from "@stitches/react";
import { warning, functional, success } from "@mirage-ui/colors";
const { styled } = createCss({
theme: {
colors: {
...warning,
...functional,
...success,
},
},
});
const Warning = styled("div", {
color: "$warning500",
});
React
import { primary, success, functional } from '@mirage-ui/colors'
export fuction SomePage(){
return(
<div>
<h1 style={{color: primary}}>Primary</h1>
<h1 style={{color: success}}>Success</h1>
<h1 style={{color: functional}}>Functional</h1>
</div>
)
}