Init styled system
mertsincan
parent
1bb4f67536
commit
b7a8c2fff4
|
|
@ -190,6 +190,16 @@
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Typography",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"name": "Text",
|
||||||
|
"to": "/text",
|
||||||
|
"badge": "NEW"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Data",
|
"name": "Data",
|
||||||
"children": [
|
"children": [
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
/* const content = require('./properties/content');
|
||||||
|
const items = require('./properties/items');
|
||||||
|
const self = require('./properties/self');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
// properties
|
||||||
|
content(root, opts);
|
||||||
|
items(root, opts);
|
||||||
|
self(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
/*const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const alignContent = {
|
||||||
|
'align-content-start': 'flex-start',
|
||||||
|
'align-content-end': 'flex-end',
|
||||||
|
'align-content-center': 'center',
|
||||||
|
'align-content-between': 'space-between',
|
||||||
|
'align-content-around': 'space-around',
|
||||||
|
'align-content-evenly': 'space-evenly'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('align-content', alignContent, root, opts, true);
|
||||||
|
};*/
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/*const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const alignItems = {
|
||||||
|
'align-items-stretch': 'stretch',
|
||||||
|
'align-items-start': 'flex-start',
|
||||||
|
'align-items-center': 'center',
|
||||||
|
'align-items-end': 'flex-end',
|
||||||
|
'align-items-baseline': 'baseline'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('align-items', alignItems, root, opts, true);
|
||||||
|
};*/
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const alignSelf = {
|
||||||
|
'align-self-auto': 'auto',
|
||||||
|
'align-self-start': 'flex-start',
|
||||||
|
'align-self-end': 'flex-end',
|
||||||
|
'align-self-center': 'center',
|
||||||
|
'align-self-stretch': 'stretch',
|
||||||
|
'align-self-baseline': 'baseline'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('align-self', alignSelf, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const all = {
|
||||||
|
'all-initial': 'initial',
|
||||||
|
'all-inherit': 'inherit',
|
||||||
|
'all-unset': 'unset'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('all', all, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
/* const delay = require('./properties/delay');
|
||||||
|
const duration = require('./properties/duration');
|
||||||
|
const fill_mode = require('./properties/fill_mode');
|
||||||
|
const iteration_count = require('./properties/iteration_count');
|
||||||
|
const timing_function = require('./properties/timing_function');
|
||||||
|
const animate = require('./modules/animate');
|
||||||
|
const fade = require('./modules/fade');
|
||||||
|
const flip = require('./modules/flip');
|
||||||
|
const scale = require('./modules/scale');
|
||||||
|
const slide = require('./modules/slide');
|
||||||
|
const zoom = require('./modules/zoom');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
// properties
|
||||||
|
delay(root, opts);
|
||||||
|
duration(root, opts);
|
||||||
|
fill_mode(root, opts);
|
||||||
|
iteration_count(root, opts);
|
||||||
|
timing_function(root, opts);
|
||||||
|
|
||||||
|
// modules
|
||||||
|
animate(root, opts);
|
||||||
|
fade(root, opts);
|
||||||
|
flip(root, opts);
|
||||||
|
scale(root, opts);
|
||||||
|
slide(root, opts);
|
||||||
|
zoom(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
/* const { addAnimation } = require('../rules');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'animate-width',
|
||||||
|
from: { width: '0' },
|
||||||
|
to: { width: '100%' },
|
||||||
|
duration: '1000ms',
|
||||||
|
timing: 'linear'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
/* const { addAnimation } = require('../rules');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'fadein',
|
||||||
|
from: { opacity: '0' },
|
||||||
|
to: { opacity: '1' },
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'fadeout',
|
||||||
|
from: { opacity: '1' },
|
||||||
|
to: { opacity: '0' },
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'fadeinleft',
|
||||||
|
from: { opacity: '0', transform: 'translateX(-100%)', transition: 'transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1)' },
|
||||||
|
to: { opacity: '1', transform: 'translateX(0%)' },
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'fadeoutleft',
|
||||||
|
from: { opacity: '1', transform: 'translateX(0%)', transition: 'transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1)' },
|
||||||
|
to: { opacity: '0', transform: 'translateX(-100%)' },
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'fadeinright',
|
||||||
|
from: { opacity: '0', transform: 'translateX(100%)', transition: 'transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1)' },
|
||||||
|
to: { opacity: '1', transform: 'translateX(0%)' },
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'fadeoutright',
|
||||||
|
from: { opacity: '1', transform: 'translateX(0%)', transition: 'transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1)' },
|
||||||
|
to: { opacity: '0', transform: 'translateX(100%)' },
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'fadeinup',
|
||||||
|
from: { opacity: '0', transform: 'translateY(-100%)', transition: 'transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1)' },
|
||||||
|
to: { opacity: '1', transform: 'translateY(0%)' },
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'fadeoutup',
|
||||||
|
from: { opacity: '1', transform: 'translateY(0%)', transition: 'transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1)' },
|
||||||
|
to: { opacity: '0', transform: 'translateY(-100%)' },
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'fadeindown',
|
||||||
|
from: { opacity: '0', transform: 'translateY(100%)', transition: 'transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1)' },
|
||||||
|
to: { opacity: '1', transform: 'translateY(0%)' },
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'fadeoutdown',
|
||||||
|
from: { opacity: '1', transform: 'translateY(0%)', transition: 'transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1)' },
|
||||||
|
to: { opacity: '0', transform: 'translateY(100%)' },
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
/* const { addAnimation } = require('../rules');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'flip',
|
||||||
|
from: { transform: 'perspective(2000px) rotateX(-100deg)' },
|
||||||
|
to: { transform: 'perspective(2000px) rotateX(0)' },
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear',
|
||||||
|
backfaceVisibility: 'visible'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'flipleft',
|
||||||
|
from: { opacity: '0', transform: 'perspective(2000px) rotateY(-100deg)' },
|
||||||
|
to: { opacity: '1', transform: 'perspective(2000px) rotateY(0)' },
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear',
|
||||||
|
backfaceVisibility: 'visible'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'flipright',
|
||||||
|
from: { opacity: '0', transform: 'perspective(2000px) rotateY(100deg)' },
|
||||||
|
to: { opacity: '1', transform: 'perspective(2000px) rotateY(0)' },
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear',
|
||||||
|
backfaceVisibility: 'visible'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'flipup',
|
||||||
|
from: { opacity: '0', transform: 'perspective(2000px) rotateX(-100deg)' },
|
||||||
|
to: { opacity: '1', transform: 'perspective(2000px) rotateX(0)' },
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear',
|
||||||
|
backfaceVisibility: 'visible'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
/* const { addAnimation } = require('../rules');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'scalein',
|
||||||
|
from: { opacity: '0', transform: 'scaleY(0.8)', transition: 'transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1)' },
|
||||||
|
to: { opacity: '1', transform: 'scaleY(1)' },
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
/* const { addAnimation } = require('../rules');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'slidedown',
|
||||||
|
from: { 'max-height': '0' },
|
||||||
|
to: { 'max-height': 'auto' },
|
||||||
|
duration: '.45s',
|
||||||
|
timing: 'ease-in-out'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'slideup',
|
||||||
|
from: { 'max-height': '1000px' },
|
||||||
|
to: { 'max-height': '0' },
|
||||||
|
duration: '.45s',
|
||||||
|
timing: 'cubic-bezier(0, 1, 0, 1)'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
/* const { addAnimation } = require('../rules');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'zoomin',
|
||||||
|
from: { opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)' },
|
||||||
|
to: { opacity: '1' },
|
||||||
|
toValue: '50%',
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear',
|
||||||
|
backfaceVisibility: 'visible'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'zoomindown',
|
||||||
|
from: { opacity: '0', transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0)' },
|
||||||
|
to: { opacity: '1', transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)' },
|
||||||
|
toValue: '60%',
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear',
|
||||||
|
backfaceVisibility: 'visible'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'zoominleft',
|
||||||
|
from: { opacity: '0', transform: 'scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0)' },
|
||||||
|
to: { opacity: '1', transform: 'scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0)' },
|
||||||
|
toValue: '60%',
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear',
|
||||||
|
backfaceVisibility: 'visible'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'zoominright',
|
||||||
|
from: { opacity: '0', transform: 'scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0)' },
|
||||||
|
to: { opacity: '1', transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0)' },
|
||||||
|
toValue: '60%',
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear',
|
||||||
|
backfaceVisibility: 'visible'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
|
||||||
|
addAnimation(
|
||||||
|
{
|
||||||
|
name: 'zoominup',
|
||||||
|
from: { opacity: '0', transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0)' },
|
||||||
|
to: { opacity: '1', transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)' },
|
||||||
|
toValue: '60%',
|
||||||
|
duration: '.15s',
|
||||||
|
timing: 'linear',
|
||||||
|
backfaceVisibility: 'visible'
|
||||||
|
},
|
||||||
|
root,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const delay = {
|
||||||
|
'animation-delay-100': '100ms',
|
||||||
|
'animation-delay-150': '150ms',
|
||||||
|
'animation-delay-200': '200ms',
|
||||||
|
'animation-delay-300': '300ms',
|
||||||
|
'animation-delay-400': '400ms',
|
||||||
|
'animation-delay-500': '500ms',
|
||||||
|
'animation-delay-1000': '1000ms'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('animation-delay', delay, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const duration = {
|
||||||
|
'animation-duration-100': '100ms',
|
||||||
|
'animation-duration-150': '150ms',
|
||||||
|
'animation-duration-200': '200ms',
|
||||||
|
'animation-duration-300': '300ms',
|
||||||
|
'animation-duration-400': '400ms',
|
||||||
|
'animation-duration-500': '500ms',
|
||||||
|
'animation-duration-1000': '1000ms',
|
||||||
|
'animation-duration-2000': '2000ms',
|
||||||
|
'animation-duration-3000': '3000ms'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('animation-duration', duration, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const fill = {
|
||||||
|
'animation-fill-none': 'none',
|
||||||
|
'animation-fill-forwards': 'forwards',
|
||||||
|
'animation-fill-backwards': 'backwards',
|
||||||
|
'animation-fill-both': 'both'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('animation-fill-mode', fill, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const iteration = {
|
||||||
|
'animation-iteration-1': '1',
|
||||||
|
'animation-iteration-2': '2',
|
||||||
|
'animation-iteration-infinite': 'infinite'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('animation-iteration-count', iteration, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const timing = {
|
||||||
|
'animation-linear': 'linear',
|
||||||
|
'animation-ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
|
||||||
|
'animation-ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
|
||||||
|
'animation-ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('animation-timing-function', timing, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
/* const { AtRule, Rule } = require('postcss');
|
||||||
|
|
||||||
|
const addAnimation = (anim, root, opts) => {
|
||||||
|
const _important = opts.important;
|
||||||
|
const prefix = opts.prefix.className;
|
||||||
|
const keyframeName = 'pf-' + anim.name;
|
||||||
|
|
||||||
|
let keyframe = new AtRule({ name: 'keyframes', params: keyframeName });
|
||||||
|
let ruleFrom = new Rule({ selector: 'from' });
|
||||||
|
|
||||||
|
for (let p in anim.from) {
|
||||||
|
ruleFrom.append({ prop: p, value: anim.from[p], important: _important });
|
||||||
|
}
|
||||||
|
|
||||||
|
let ruleTo = new Rule({ selector: anim.toValue || 'to' });
|
||||||
|
|
||||||
|
for (let p in anim.to) {
|
||||||
|
ruleTo.append({ prop: p, value: anim.to[p], important: _important });
|
||||||
|
}
|
||||||
|
|
||||||
|
keyframe.append(ruleFrom);
|
||||||
|
keyframe.append(ruleTo);
|
||||||
|
root.before(keyframe);
|
||||||
|
|
||||||
|
let animClass = new Rule({ selector: `.${prefix}${anim.name}` });
|
||||||
|
|
||||||
|
animClass.append({ prop: 'animation-name', value: keyframeName, important: _important });
|
||||||
|
animClass.append({ prop: 'animation-duration', value: anim.duration, important: _important });
|
||||||
|
animClass.append({ prop: 'animation-timing-function', value: anim.timing, important: _important });
|
||||||
|
|
||||||
|
if (anim.backfaceVisibility) {
|
||||||
|
animClass.append({ prop: 'backface-visibility', value: anim.backfaceVisibility, important: _important });
|
||||||
|
}
|
||||||
|
|
||||||
|
root.before(animClass);
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
addAnimation
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const appearance = {
|
||||||
|
'appearance-none': 'none'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('appearance', appearance, root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
const { blur, brightness, contrast, grayscale, hueRotate, invert, saturate, sepia, dropShadow, addBackdrop } = require('../base/filter');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
styleClass('backdrop-filter', addBackdrop(blur), root, opts, true, true);
|
||||||
|
styleClass('backdrop-filter', addBackdrop(brightness), root, opts, true, true);
|
||||||
|
styleClass('backdrop-filter', addBackdrop(contrast), root, opts, true, true);
|
||||||
|
styleClass('backdrop-filter', addBackdrop(grayscale), root, opts, true, true);
|
||||||
|
styleClass('backdrop-filter', addBackdrop(hueRotate), root, opts, true, true);
|
||||||
|
styleClass('backdrop-filter', addBackdrop(invert), root, opts, true, true);
|
||||||
|
styleClass('backdrop-filter', addBackdrop(saturate), root, opts, true, true);
|
||||||
|
styleClass('backdrop-filter', addBackdrop(sepia), root, opts, true, true);
|
||||||
|
styleClass('backdrop-filter', addBackdrop(dropShadow), root, opts, true, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
/* const color = require('./properties/color');
|
||||||
|
const image = require('./properties/image');
|
||||||
|
const position = require('./properties/position');
|
||||||
|
const repeat = require('./properties/repeat');
|
||||||
|
const size = require('./properties/size');
|
||||||
|
const rules = require('./rules');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
// properties
|
||||||
|
color(root, opts);
|
||||||
|
image(root, opts);
|
||||||
|
position(root, opts);
|
||||||
|
repeat(root, opts);
|
||||||
|
size(root, opts);
|
||||||
|
|
||||||
|
// rules
|
||||||
|
rules(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
const { getColors, getThemeColors, getWhiteAndBlackRgbaColors } = require('../../base/color');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const p = opts.prefix.cssVariable;
|
||||||
|
const colors = {
|
||||||
|
'bg-white': '#ffffff',
|
||||||
|
'bg-transparent': 'transparent',
|
||||||
|
'bg-primary': `var(--${p}primary-color)`,
|
||||||
|
'bg-primary-reverse': `var(--${p}primary-color-text)`,
|
||||||
|
'surface-ground': `var(--${p}surface-ground)`,
|
||||||
|
'surface-section': `var(--${p}surface-section)`,
|
||||||
|
'surface-card': `var(--${p}surface-card)`,
|
||||||
|
'surface-overlay': `var(--${p}surface-overlay)`,
|
||||||
|
'surface-hover': `var(--${p}surface-hover)`
|
||||||
|
};
|
||||||
|
|
||||||
|
const themes = getThemeColors(opts, 'bg-', p);
|
||||||
|
const surfaces = getColors('surface', 'surface-', `${p}-surface-`);
|
||||||
|
const whiteAndBlackRgba = getWhiteAndBlackRgbaColors('bg-');
|
||||||
|
|
||||||
|
styleClass('background-color', colors, root, opts, true, true, true);
|
||||||
|
styleClass('background-color', themes, root, opts, true, true, true);
|
||||||
|
styleClass('background-color', surfaces, root, opts, true, true, true);
|
||||||
|
styleClass('background-color', whiteAndBlackRgba, root, opts, true, true, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const images = {
|
||||||
|
'bg-none': 'none'
|
||||||
|
};
|
||||||
|
|
||||||
|
const gradientDirections = {
|
||||||
|
'bg-gradient-to-t': 'to top',
|
||||||
|
'bg-gradient-to-tr': 'to top right',
|
||||||
|
'bg-gradient-to-r': 'to right',
|
||||||
|
'bg-gradient-to-br': 'to bottom right',
|
||||||
|
'bg-gradient-to-b': 'to bottom',
|
||||||
|
'bg-gradient-to-bl': 'to bottom left',
|
||||||
|
'bg-gradient-to-l': 'to left',
|
||||||
|
'bg-gradient-to-tl': 'to top left'
|
||||||
|
};
|
||||||
|
|
||||||
|
const radialGradientDirections = {
|
||||||
|
'bg-radial-gradient-to-t': 'at top',
|
||||||
|
'bg-radial-gradient-to-tr': 'at top right',
|
||||||
|
'bg-radial-gradient-to-r': 'at right',
|
||||||
|
'bg-radial-gradient-to-br': 'at bottom right',
|
||||||
|
'bg-radial-gradient-to-b': 'at bottom',
|
||||||
|
'bg-radial-gradient-to-bl': 'at bottom left',
|
||||||
|
'bg-radial-gradient-to-l': 'at left',
|
||||||
|
'bg-radial-gradient-to-tl': 'at top left'
|
||||||
|
};
|
||||||
|
|
||||||
|
const gradients = {};
|
||||||
|
|
||||||
|
for (let direction in gradientDirections) {
|
||||||
|
gradients[
|
||||||
|
direction
|
||||||
|
] = `linear-gradient(${gradientDirections[direction]}, var(--gradient-from) var(--gradient-from-percentage, 0%),var(--gradient-via, var(--gradient-from)) var(--gradient-via-percentage, 50%), var(--gradient-to, var(--gradient-from),transparent) var(--gradient-to-percentage, 100%))`;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let direction in radialGradientDirections) {
|
||||||
|
gradients[
|
||||||
|
direction
|
||||||
|
] = `radial-gradient(${radialGradientDirections[direction]}, var(--gradient-from) var(--gradient-from-percentage, 0%), var(--gradient-to,var(--gradient-via, var(--gradient-from)) var(--gradient-via-percentage, 50%), var(--gradient-from),transparent) var(--gradient-to-percentage, 100%))`;
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass('background-image', gradients, root, opts, true, true);
|
||||||
|
styleClass('background-image', images, root, opts, true, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const positions = {
|
||||||
|
'bg-bottom': 'bottom',
|
||||||
|
'bg-center': 'center',
|
||||||
|
'bg-left': 'left',
|
||||||
|
'bg-left-bottom': 'left bottom',
|
||||||
|
'bg-left-top': 'left top',
|
||||||
|
'bg-right': 'right',
|
||||||
|
'bg-right-bottom': 'right bottom',
|
||||||
|
'bg-right-top': 'right top',
|
||||||
|
'bg-top': 'top'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('background-position', positions, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const repeats = {
|
||||||
|
'bg-repeat': 'repeat',
|
||||||
|
'bg-no-repeat': 'no-repeat',
|
||||||
|
'bg-repeat-x': 'repeat-x',
|
||||||
|
'bg-repeat-y': 'repeat-y',
|
||||||
|
'bg-repeat-round': 'round',
|
||||||
|
'bg-repeat-space': 'space'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('background-repeat', repeats, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const sizes = {
|
||||||
|
'bg-auto': 'auto',
|
||||||
|
'bg-cover': 'cover',
|
||||||
|
'bg-contain': 'contain'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('background-size', sizes, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
/* const { getWhiteAndBlackRgbaColors, getThemeColors } = require('../base/color');
|
||||||
|
const { appendRules } = require('../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
appendGradients(root, opts);
|
||||||
|
};
|
||||||
|
|
||||||
|
function appendGradients(root, opts) {
|
||||||
|
const p = opts.prefix.cssVariable;
|
||||||
|
|
||||||
|
function appendColors(type) {
|
||||||
|
const gradients = {
|
||||||
|
[`${type}-from-to`]: `--gradient-from: var(--${type}-from-color); --gradient-to: var(--${type}-to-color, var(--${type}-from-color), transparent);`
|
||||||
|
};
|
||||||
|
const themes = getThemeColors(opts, `${type}-`, p, `--gradient-${type}`);
|
||||||
|
const whiteAndBlackRgba = getWhiteAndBlackRgbaColors(`${type}-`, `--gradient-${type}`);
|
||||||
|
|
||||||
|
appendRules(root, opts, gradients);
|
||||||
|
appendRules(root, opts, themes);
|
||||||
|
appendRules(root, opts, whiteAndBlackRgba);
|
||||||
|
}
|
||||||
|
|
||||||
|
appendColors('from');
|
||||||
|
appendColors('via');
|
||||||
|
appendColors('to');
|
||||||
|
|
||||||
|
const percentages = {};
|
||||||
|
|
||||||
|
for (let i = 0; i <= 100; i += 10) {
|
||||||
|
percentages[`from-${i}\\%`] = `--gradient-from-percentage: ${i}%;`;
|
||||||
|
percentages[`via-${i}\\%`] = `--gradient-via-percentage: ${i}%;`;
|
||||||
|
percentages[`to-${i}\\%`] = `--gradient-to-percentage: ${i}%;`;
|
||||||
|
}
|
||||||
|
|
||||||
|
appendRules(root, opts, percentages);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
/* const surfaceShades = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
||||||
|
const colorShades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
||||||
|
const rgbaShades = [10, 20, 30, 40, 50, 60, 70, 80, 90];
|
||||||
|
|
||||||
|
function getColors(shadeType = '', classNamePrefix = '', cssVariablePrefix = '', scopedCssVariable, hasRgba = true) {
|
||||||
|
const shades = shadeType === 'surface' ? surfaceShades : colorShades;
|
||||||
|
let classes = {};
|
||||||
|
|
||||||
|
for (let shade of shades) {
|
||||||
|
const className = `${classNamePrefix}${shade}`;
|
||||||
|
const value = `var(--${cssVariablePrefix}${shade})`;
|
||||||
|
|
||||||
|
classes[`${className}`] = scopedCssVariable ? `${scopedCssVariable}: ${value}` : value;
|
||||||
|
|
||||||
|
if (hasRgba) {
|
||||||
|
for (let rgba of rgbaShades) {
|
||||||
|
const rgbaValue = `color-mix(in srgb, ${value}, ${rgba / 100}%, transparent)`;
|
||||||
|
|
||||||
|
classes[`${className}\\/${rgba}`] = scopedCssVariable ? `${scopedCssVariable}: ${rgbaValue}` : rgbaValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return classes;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getThemeColors(opts = {}, classNamePrefix = '', cssVariablePrefix = '', scopedCssVariable, hasRgba = true) {
|
||||||
|
const { themes = {} } = opts;
|
||||||
|
|
||||||
|
const generate = function (colorNames) {
|
||||||
|
return colorNames.reduce((acc, color) => {
|
||||||
|
if (color !== 'text') {
|
||||||
|
const colorClasses = getColors(color, `${classNamePrefix}${color}-`, `${cssVariablePrefix}${color}-`, scopedCssVariable, hasRgba);
|
||||||
|
|
||||||
|
return { ...acc, ...colorClasses };
|
||||||
|
}
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
};
|
||||||
|
|
||||||
|
return Object.values(themes).reduce((acc, theme) => ({ ...acc, ...generate(Object.keys(theme.colors)) }), {});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getWhiteAndBlackRgbaColors(classNamePrefix = '', scopedCssVariable) {
|
||||||
|
let classes = {};
|
||||||
|
|
||||||
|
for (let rgbaShade of rgbaShades) {
|
||||||
|
const classNameSuffix = `\\/${rgbaShade}`;
|
||||||
|
const alphaSuffix = `-alpha-${rgbaShade}`;
|
||||||
|
const whiteColor = `color-mix(in srgb, #ffffff ${rgbaShade}%, transparent)`;
|
||||||
|
const blackColor = `color-mix(in srgb, #000000 ${rgbaShade}%, transparent)`;
|
||||||
|
const whiteValue = scopedCssVariable ? `${scopedCssVariable}: ${whiteColor}` : whiteColor;
|
||||||
|
const blackValue = scopedCssVariable ? `${scopedCssVariable}: ${blackColor}` : blackColor;
|
||||||
|
|
||||||
|
classes[`${classNamePrefix}white${classNameSuffix}`] = whiteValue;
|
||||||
|
classes[`${classNamePrefix}white${alphaSuffix}`] = whiteValue;
|
||||||
|
classes[`${classNamePrefix}black${classNameSuffix}`] = blackValue;
|
||||||
|
classes[`${classNamePrefix}black${alphaSuffix}`] = blackValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
return classes;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
surfaceShades,
|
||||||
|
colorShades,
|
||||||
|
rgbaShades,
|
||||||
|
getColors,
|
||||||
|
getThemeColors,
|
||||||
|
getWhiteAndBlackRgbaColors
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
/* const blur = {
|
||||||
|
'blur-none': 'none',
|
||||||
|
'blur-xs': 'blur(1px)',
|
||||||
|
'blur-sm': 'blur(2px)',
|
||||||
|
blur: 'blur(4px)',
|
||||||
|
'blur-md': 'blur(8px)',
|
||||||
|
'blur-lg': 'blur(16px)',
|
||||||
|
'blur-xl': 'blur(24px)',
|
||||||
|
'blur-2xl': 'blur(40px)',
|
||||||
|
'blur-3xl': 'blur(64px)'
|
||||||
|
};
|
||||||
|
|
||||||
|
const brightness = {
|
||||||
|
'brightness-0': 'brightness(0)',
|
||||||
|
'brightness-50': 'brightness(0.5)',
|
||||||
|
'brightness-75': 'brightness(0.75)',
|
||||||
|
'brightness-90': 'brightness(0.9)',
|
||||||
|
'brightness-100': 'brightness(1)',
|
||||||
|
'brightness-105': 'brightness(1.05)',
|
||||||
|
'brightness-110': 'brightness(1.1)',
|
||||||
|
'brightness-125': 'brightness(1.25)',
|
||||||
|
'brightness-150': 'brightness(1.5)',
|
||||||
|
'brightness-200': 'brightness(2)'
|
||||||
|
};
|
||||||
|
|
||||||
|
const contrast = {
|
||||||
|
'contrast-0': 'contrast(0)',
|
||||||
|
'contrast-50': 'contrast(0.5)',
|
||||||
|
'contrast-75': 'contrast(0.75)',
|
||||||
|
'contrast-100': 'contrast(1)',
|
||||||
|
'contrast-125': 'contrast(1.25)',
|
||||||
|
'contrast-150': 'contrast(1.5)',
|
||||||
|
'contrast-200': 'contrast(2)'
|
||||||
|
};
|
||||||
|
|
||||||
|
const grayscale = {
|
||||||
|
grayscale: 'grayscale(1)',
|
||||||
|
'grayscale-0': 'grayscale(0)',
|
||||||
|
'grayscale-50': 'grayscale(0.5)',
|
||||||
|
'grayscale-75': 'grayscale(0.75)',
|
||||||
|
'grayscale-100': 'grayscale(1)'
|
||||||
|
};
|
||||||
|
|
||||||
|
const hueRotate = {
|
||||||
|
'hue-rotate-0': 'hue-rotate(0deg)',
|
||||||
|
'hue-rotate-15': 'hue-rotate(15deg)',
|
||||||
|
'hue-rotate-30': 'hue-rotate(30deg)',
|
||||||
|
'hue-rotate-45': 'hue-rotate(45deg)',
|
||||||
|
'hue-rotate-60': 'hue-rotate(60deg)',
|
||||||
|
'hue-rotate-75': 'hue-rotate(75deg)',
|
||||||
|
'hue-rotate-90': 'hue-rotate(90deg)',
|
||||||
|
'hue-rotate-105': 'hue-rotate(105deg)',
|
||||||
|
'hue-rotate-120': 'hue-rotate(120deg)',
|
||||||
|
'hue-rotate-135': 'hue-rotate(135deg)',
|
||||||
|
'hue-rotate-150': 'hue-rotate(150deg)',
|
||||||
|
'hue-rotate-165': 'hue-rotate(165deg)',
|
||||||
|
'hue-rotate-180': 'hue-rotate(180deg)'
|
||||||
|
};
|
||||||
|
|
||||||
|
const invert = {
|
||||||
|
'invert-0': 'invert(0)',
|
||||||
|
invert: 'invert(1)'
|
||||||
|
};
|
||||||
|
|
||||||
|
const saturate = {
|
||||||
|
'saturate-0': 'saturate(0)',
|
||||||
|
'saturate-50': 'saturate(0.5)',
|
||||||
|
'saturate-100': 'saturate(1)',
|
||||||
|
'saturate-150': 'saturate(1.5)',
|
||||||
|
'saturate-200': 'saturate(2)'
|
||||||
|
};
|
||||||
|
|
||||||
|
const sepia = {
|
||||||
|
sepia: 'sepia(100%)',
|
||||||
|
'sepia-0': 'sepia(0)',
|
||||||
|
'sepia-50': 'sepia(50%)'
|
||||||
|
};
|
||||||
|
|
||||||
|
const dropShadow = {
|
||||||
|
'drop-shadow-none': 'drop-shadow(0 0 0 transparent)',
|
||||||
|
'drop-shadow-1': 'drop-shadow(0 1px 3px rgba(0, 0, 0, 0.06))',
|
||||||
|
'drop-shadow-2': 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08))',
|
||||||
|
'drop-shadow-3': 'drop-shadow(0 4px 7px rgba(0, 0, 0, 0.09)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06))',
|
||||||
|
'drop-shadow-4': 'drop-shadow(0 10px 16px rgba(0, 0, 0, 0.1)) drop-shadow(0 5px 7px rgba(0, 0, 0, 0.07))',
|
||||||
|
'drop-shadow-5': 'drop-shadow(0 11px 17px rgba(0, 0, 0, 0.1)) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.08))',
|
||||||
|
'drop-shadow-6': 'drop-shadow(0 20px 26px rgba(0, 0, 0, 0.11)) drop-shadow(0 9px 11px rgba(0, 0, 0, 0.08))',
|
||||||
|
'drop-shadow-7': 'drop-shadow(0 25px 30px rgba(0, 0, 0, 0.12)) drop-shadow(0 10px 15px rgba(0, 0, 0, 0.09))',
|
||||||
|
'drop-shadow-8': 'drop-shadow(0 30px 35px rgba(0, 0, 0, 0.13)) drop-shadow(0 15px 20px rgba(0, 0, 0, 0.10))'
|
||||||
|
};
|
||||||
|
|
||||||
|
function addBackdrop(props) {
|
||||||
|
const backdrops = {};
|
||||||
|
|
||||||
|
for (const key in props) {
|
||||||
|
backdrops['backdrop-' + key] = props[key];
|
||||||
|
}
|
||||||
|
|
||||||
|
return backdrops;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
blur,
|
||||||
|
brightness,
|
||||||
|
contrast,
|
||||||
|
grayscale,
|
||||||
|
hueRotate,
|
||||||
|
invert,
|
||||||
|
saturate,
|
||||||
|
sepia,
|
||||||
|
dropShadow,
|
||||||
|
addBackdrop
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
/* const scales = [0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5];
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
scales
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
/* const color = require('./color');
|
||||||
|
const filter = require('./filter');
|
||||||
|
const gap = require('./gap');
|
||||||
|
const size = require('./size');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
color,
|
||||||
|
filter,
|
||||||
|
gap,
|
||||||
|
size
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
/* const addFixedSize = (obj, prefix, opts) => {
|
||||||
|
for (let i = 1; i <= opts.fixedRemLimit.width; i++) {
|
||||||
|
obj[prefix + i + 'rem'] = i + 'rem';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
addFixedSize
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
/* const color = require('./properties/color');
|
||||||
|
const radius = require('./properties/radius');
|
||||||
|
const style = require('./properties/style');
|
||||||
|
const rules = require('./rules');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
// properties
|
||||||
|
color(root, opts);
|
||||||
|
style(root, opts);
|
||||||
|
radius(root, opts);
|
||||||
|
|
||||||
|
// rules
|
||||||
|
rules(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
const { getColors, getThemeColors, getWhiteAndBlackRgbaColors } = require('../../base/color');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const p = opts.prefix.cssVariable;
|
||||||
|
const colors = {
|
||||||
|
'border-primary': `var(--${p}primary-color)`,
|
||||||
|
'border-white': '#ffffff',
|
||||||
|
'surface-border': `var(--${p}surface-border)`
|
||||||
|
};
|
||||||
|
|
||||||
|
const themes = getThemeColors(opts, 'border-', p);
|
||||||
|
const surfaces = getColors('surface', 'border-', `${p}-surface-`);
|
||||||
|
const whiteAndBlackRgba = getWhiteAndBlackRgbaColors('border-');
|
||||||
|
|
||||||
|
styleClass('border-color', colors, root, opts, true, true, true);
|
||||||
|
styleClass('border-color', themes, root, opts, true, true, true);
|
||||||
|
styleClass('border-color', surfaces, root, opts, true, true, true);
|
||||||
|
styleClass('border-color', whiteAndBlackRgba, root, opts, true, true, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const p = opts.prefix.cssVariable;
|
||||||
|
const borderRadius = {
|
||||||
|
'border-noround': '0',
|
||||||
|
'border-round': `var(--${p}border-radius)`,
|
||||||
|
'border-circle': '50%'
|
||||||
|
};
|
||||||
|
const edges = ['top', 'right', 'bottom', 'left'];
|
||||||
|
const scales = {
|
||||||
|
xs: '0.125rem',
|
||||||
|
sm: '0.25rem',
|
||||||
|
md: '0.375rem',
|
||||||
|
lg: '0.5rem',
|
||||||
|
xl: '0.75rem',
|
||||||
|
'2xl': '1rem',
|
||||||
|
'3xl': '1.5rem'
|
||||||
|
};
|
||||||
|
|
||||||
|
const scaledBorderRadius = {};
|
||||||
|
|
||||||
|
for (let scale in scales) {
|
||||||
|
scaledBorderRadius['border-round-' + scale] = scales[scale];
|
||||||
|
}
|
||||||
|
|
||||||
|
const borderRadiusEdges = {};
|
||||||
|
|
||||||
|
edges.forEach((edge) => (borderRadiusEdges[edge] = {}));
|
||||||
|
|
||||||
|
for (let borderRadiusKey in borderRadius) {
|
||||||
|
edges.forEach((edge) => (borderRadiusEdges[edge][borderRadiusKey + '-' + edge] = borderRadius[borderRadiusKey]));
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let scale in scales) {
|
||||||
|
edges.forEach((edge) => (borderRadiusEdges[edge]['border-round-' + edge + '-' + scale] = scales[scale]));
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass('border-radius', borderRadius, root, opts, true);
|
||||||
|
styleClass('border-radius', scaledBorderRadius, root, opts, true);
|
||||||
|
styleClass(['border-top-left-radius', 'border-top-right-radius'], borderRadiusEdges.top, root, opts, true);
|
||||||
|
styleClass(['border-top-right-radius', 'border-bottom-right-radius'], borderRadiusEdges.right, root, opts, true);
|
||||||
|
styleClass(['border-bottom-left-radius', 'border-bottom-right-radius'], borderRadiusEdges.bottom, root, opts, true);
|
||||||
|
styleClass(['border-top-left-radius', 'border-bottom-left-radius'], borderRadiusEdges.left, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const borderStyles = {
|
||||||
|
'border-solid': 'solid',
|
||||||
|
'border-dashed': 'dashed',
|
||||||
|
'border-dotted': 'dotted',
|
||||||
|
'border-double': 'double'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('border-style', borderStyles, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
/* const { Rule, AtRule } = require('postcss');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
appendEdges(root, opts);
|
||||||
|
};
|
||||||
|
|
||||||
|
function appendEdges(root, opts) {
|
||||||
|
function appendEdge(values, edge, element, opts, breakpoint) {
|
||||||
|
const p = opts.prefix.className;
|
||||||
|
|
||||||
|
for (let value of values) {
|
||||||
|
let rule = new Rule({ selector: `.${breakpoint}${p}border-${edge ? edge + '-' : ''}${value.name}` });
|
||||||
|
|
||||||
|
if (!edge) {
|
||||||
|
rule.append({ prop: 'border-style', value: value.style, important: opts.important });
|
||||||
|
rule.append({ prop: 'border-width', value: value.width, important: opts.important });
|
||||||
|
} else {
|
||||||
|
if (edge === 'x') {
|
||||||
|
rule.append({ prop: `border-left-width`, value: value.width, important: opts.important });
|
||||||
|
rule.append({ prop: `border-left-style`, value: value.style, important: opts.important });
|
||||||
|
rule.append({ prop: `border-right-width`, value: value.width, important: opts.important });
|
||||||
|
rule.append({ prop: `border-right-style`, value: value.style, important: opts.important });
|
||||||
|
} else if (edge === 'y') {
|
||||||
|
rule.append({ prop: `border-top-width`, value: value.width, important: opts.important });
|
||||||
|
rule.append({ prop: `border-top-style`, value: value.style, important: opts.important });
|
||||||
|
rule.append({ prop: `border-bottom-width`, value: value.width, important: opts.important });
|
||||||
|
rule.append({ prop: `border-bottom-style`, value: value.style, important: opts.important });
|
||||||
|
} else {
|
||||||
|
rule.append({ prop: `border-${edge}-style`, value: value.style, important: opts.important });
|
||||||
|
rule.append({ prop: `border-${edge}-width`, value: value.width, important: opts.important });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (breakpoint) element.append(rule);
|
||||||
|
else element.before(rule);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const { separator, breakpoints } = opts;
|
||||||
|
const values = [
|
||||||
|
{ name: 'none', width: 0, style: 'none' },
|
||||||
|
{ name: '1', width: 1, style: 'solid' },
|
||||||
|
{ name: '2', width: 2, style: 'solid' },
|
||||||
|
{ name: '3', width: 3, style: 'solid' }
|
||||||
|
];
|
||||||
|
const edges = ['top', 'right', 'bottom', 'left', 'x', 'y'];
|
||||||
|
|
||||||
|
appendEdge(values, '', root, opts, '');
|
||||||
|
edges.forEach((edge) => appendEdge(values, edge, root, opts, ''));
|
||||||
|
|
||||||
|
for (const key in breakpoints) {
|
||||||
|
let media = new AtRule({ name: 'media', params: `screen and (min-width: ${breakpoints[key]})` });
|
||||||
|
|
||||||
|
appendEdge(values, '', media, opts, key + separator);
|
||||||
|
edges.forEach((edge) => appendEdge(values, edge, media, opts, key + separator));
|
||||||
|
root.before(media);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const bottom = {
|
||||||
|
'bottom-auto': 'auto',
|
||||||
|
'bottom-0': '0px',
|
||||||
|
'bottom-50': '50%',
|
||||||
|
'bottom-100': '100%'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('bottom', bottom, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
/* const shadow = require('./properties/shadow');
|
||||||
|
const sizing = require('./properties/sizing');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
// properties
|
||||||
|
shadow(root, opts);
|
||||||
|
sizing(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const shadows = {
|
||||||
|
'shadow-none': 'none',
|
||||||
|
'shadow-1': '0 1px 3px 0 rgba(0, 0, 0, 0.06)',
|
||||||
|
'shadow-2': '0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.08)',
|
||||||
|
'shadow-3': '0 4px 7px -2px rgba(0, 0, 0, 0.09), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
||||||
|
'shadow-4': '0 10px 16px -3px rgba(0, 0, 0, 0.1), 0 5px 7px -3px rgba(0, 0, 0, 0.07)',
|
||||||
|
'shadow-5': '0 11px 17px -3px rgba(0, 0, 0, 0.1), 0 5px 8px -2px rgba(0, 0, 0, 0.08)',
|
||||||
|
'shadow-6': '0 20px 26px -5px rgba(0, 0, 0, 0.11), 0 9px 11px -5px rgba(0, 0, 0, 0.08)',
|
||||||
|
'shadow-7': '0 25px 30px -6px rgba(0, 0, 0, 0.12), 0 10px 15px -5px rgba(0, 0, 0, 0.09)',
|
||||||
|
'shadow-8': '0 30px 35px -7px rgba(0, 0, 0, 0.13), 0 15px 20px -10px rgba(0, 0, 0, 0.10)'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('box-shadow', shadows, root, opts, true, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const boxSizing = {
|
||||||
|
'box-border': 'border-box',
|
||||||
|
'box-content': 'content-box'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('box-sizing', boxSizing, root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
const { getColors, getThemeColors, getWhiteAndBlackRgbaColors } = require('../base/color');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const p = opts.prefix.cssVariable;
|
||||||
|
const colors = {
|
||||||
|
'text-primary': `var(--${p}primary-color)`,
|
||||||
|
'text-white': '#ffffff',
|
||||||
|
'text-color': `var(--${p}text-color)`,
|
||||||
|
'text-color-secondary': `var(--${p}text-color-secondary)`,
|
||||||
|
'text-primary-invert': `var(--${p}primary-color-text)`
|
||||||
|
};
|
||||||
|
|
||||||
|
const themes = getThemeColors(opts, 'text-', p);
|
||||||
|
const surfaces = getColors('surface', 'text-', `${p}-surface-`);
|
||||||
|
const whiteAndBlackRgba = getWhiteAndBlackRgbaColors('text-');
|
||||||
|
|
||||||
|
styleClass('color', colors, root, opts, true, true, true);
|
||||||
|
styleClass('color', themes, root, opts, true, true, true);
|
||||||
|
styleClass('color', surfaces, root, opts, true, true, true);
|
||||||
|
styleClass('color', whiteAndBlackRgba, root, opts, true, true, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/* const gap = require('./properties/gap');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
// properties
|
||||||
|
gap(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
const { scales } = require('../../base/gap');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
let columnGaps = {};
|
||||||
|
|
||||||
|
for (let i = 0; i < scales.length; i++) {
|
||||||
|
columnGaps['column-gap-' + i] = scales[i] + 'rem';
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass('column-gap', columnGaps, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const cursor = {
|
||||||
|
'cursor-auto': 'auto',
|
||||||
|
'cursor-default': 'default',
|
||||||
|
'cursor-pointer': 'pointer',
|
||||||
|
'cursor-wait': 'wait',
|
||||||
|
'cursor-move': 'move',
|
||||||
|
'cursor-help': 'help',
|
||||||
|
'cursor-text': 'text',
|
||||||
|
'cursor-vertical-text': 'vertical-text',
|
||||||
|
'cursor-alias': 'alias',
|
||||||
|
'cursor-copy': 'copy',
|
||||||
|
'cursor-no-drop': 'no-drop',
|
||||||
|
'cursor-not-allowed': 'not-allowed',
|
||||||
|
'cursor-grab': 'grab',
|
||||||
|
'cursor-grabbing': 'grabbing',
|
||||||
|
'cursor-col-resize': 'col-resize',
|
||||||
|
'cursor-row-resize': 'row-resize',
|
||||||
|
'cursor-n-resize': 'n-resize',
|
||||||
|
'cursor-e-resize': 'e-resize',
|
||||||
|
'cursor-s-resize': 's-resize',
|
||||||
|
'cursor-w-resize': 'w-resize',
|
||||||
|
'cursor-ne-resize': 'ne-resize',
|
||||||
|
'cursor-nw-resize': 'nw-resize',
|
||||||
|
'cursor-se-resize': 'se-resize',
|
||||||
|
'cursor-sw-resize': 'sw-resize',
|
||||||
|
'cursor-ew-resize': 'ew-resize',
|
||||||
|
'cursor-ns-resize': 'ns-resize',
|
||||||
|
'cursor-nesw-resize': 'nesw-resize',
|
||||||
|
'cursor-nwse-resize': 'nwse-resize',
|
||||||
|
'cursor-zoom-in': 'zoom-in',
|
||||||
|
'cursor-zoom-out': 'zoom-out'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('cursor', cursor, root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const displays = {
|
||||||
|
hidden: 'none',
|
||||||
|
block: 'block',
|
||||||
|
inline: 'inline',
|
||||||
|
'inline-block': 'inline-block',
|
||||||
|
flex: 'flex',
|
||||||
|
'inline-flex': 'inline-flex'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('display', displays, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
const { getThemeColors, getWhiteAndBlackRgbaColors } = require('../base/color');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const p = opts.prefix.cssVariable;
|
||||||
|
const fill = {
|
||||||
|
'fill-none': 'none',
|
||||||
|
'fill-inherit': 'inherit',
|
||||||
|
'fill-current': 'currentColor',
|
||||||
|
'fill-transparent': 'transparent',
|
||||||
|
'fill-white': '#ffffff',
|
||||||
|
'fill-black': '#000000'
|
||||||
|
};
|
||||||
|
|
||||||
|
const themes = getThemeColors(opts, 'fill-', p);
|
||||||
|
const whiteAndBlackRgba = getWhiteAndBlackRgbaColors('fill-');
|
||||||
|
|
||||||
|
styleClass('fill', fill, root, opts, true, true);
|
||||||
|
styleClass('fill', themes, root, opts, true, true);
|
||||||
|
styleClass('fill', whiteAndBlackRgba, root, opts, true, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
const { blur, brightness, contrast, grayscale, hueRotate, invert, saturate, sepia, dropShadow } = require('../base/filter');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
styleClass('filter', blur, root, opts, true, true);
|
||||||
|
styleClass('filter', brightness, root, opts, true, true);
|
||||||
|
styleClass('filter', contrast, root, opts, true, true);
|
||||||
|
styleClass('filter', grayscale, root, opts, true, true);
|
||||||
|
styleClass('filter', hueRotate, root, opts, true, true);
|
||||||
|
styleClass('filter', invert, root, opts, true, true);
|
||||||
|
styleClass('filter', saturate, root, opts, true, true);
|
||||||
|
styleClass('filter', sepia, root, opts, true, true);
|
||||||
|
styleClass('filter', dropShadow, root, opts, true, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
const direction = require('./properties/direction');
|
||||||
|
const grow = require('./properties/grow');
|
||||||
|
const shrink = require('./properties/shrink');
|
||||||
|
const wrap = require('./properties/wrap');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const flex = {
|
||||||
|
'flex-1': '1 1 0%',
|
||||||
|
'flex-auto': '1 1 auto',
|
||||||
|
'flex-initial': '0 1 auto',
|
||||||
|
'flex-none': 'none'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('flex', flex, root, opts, true);
|
||||||
|
|
||||||
|
// properties
|
||||||
|
direction(root, opts);
|
||||||
|
grow(root, opts);
|
||||||
|
shrink(root, opts);
|
||||||
|
wrap(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const flexDirection = {
|
||||||
|
'flex-row': 'row',
|
||||||
|
'flex-row-reverse': 'row-reverse',
|
||||||
|
'flex-column': 'column',
|
||||||
|
'flex-column-reverse': 'column-reverse'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('flex-direction', flexDirection, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const flexGrow = {
|
||||||
|
'flex-grow-0': 0,
|
||||||
|
'flex-grow-1': 1
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('flex-grow', flexGrow, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const flexShrink = {
|
||||||
|
'flex-shrink-0': 0,
|
||||||
|
'flex-shrink-1': 1
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('flex-shrink', flexShrink, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const flexWrap = {
|
||||||
|
'flex-wrap': 'wrap',
|
||||||
|
'flex-wrap-reverse': 'wrap-reverse',
|
||||||
|
'flex-nowrap': 'nowrap'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('flex-wrap', flexWrap, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/* const family = require('./properties/family');
|
||||||
|
const size = require('./properties/size');
|
||||||
|
const style = require('./properties/style');
|
||||||
|
const weight = require('./properties/weight');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
// properties
|
||||||
|
family(root, opts);
|
||||||
|
size(root, opts);
|
||||||
|
style(root, opts);
|
||||||
|
weight(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const fontFamilies = {
|
||||||
|
'font-sans': 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
|
||||||
|
'font-serif': 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
|
||||||
|
'font-mono': 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('font-family', fontFamilies, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const fontSizes = {
|
||||||
|
'text-xs': '.75rem',
|
||||||
|
'text-sm': '.875rem',
|
||||||
|
'text-base': '1rem',
|
||||||
|
'text-lg': '1.125rem',
|
||||||
|
'text-xl': '1.25rem',
|
||||||
|
'text-2xl': '1.5rem',
|
||||||
|
'text-3xl': '1.75rem',
|
||||||
|
'text-4xl': '2rem',
|
||||||
|
'text-5xl': '2.5rem',
|
||||||
|
'text-6xl': '3rem',
|
||||||
|
'text-7xl': '4rem',
|
||||||
|
'text-8xl': '6rem'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('font-size', fontSizes, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const fontStyles = {
|
||||||
|
'font-italic': 'italic'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('font-style', fontStyles, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const fontWeights = {
|
||||||
|
'font-thin': '100',
|
||||||
|
'font-extralight': '200',
|
||||||
|
'font-light': '300',
|
||||||
|
'font-normal': '400',
|
||||||
|
'font-medium': '500',
|
||||||
|
'font-semibold': '600',
|
||||||
|
'font-bold': '700',
|
||||||
|
'font-extrabold': '800',
|
||||||
|
'font-black': '900'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('font-weight', fontWeights, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
const { scales } = require('../base/gap');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
let gaps = {};
|
||||||
|
|
||||||
|
for (let i = 0; i < scales.length; i++) {
|
||||||
|
gaps['gap-' + i] = scales[i] + 'rem';
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass('gap', gaps, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
const { addFixedSize } = require('../base/size');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
let heights = {
|
||||||
|
'h-full': '100%',
|
||||||
|
'h-screen': '100vh',
|
||||||
|
'h-auto': 'auto',
|
||||||
|
'h-min': 'min-content',
|
||||||
|
'h-max': 'max-content',
|
||||||
|
'h-fit': 'fit-content'
|
||||||
|
};
|
||||||
|
|
||||||
|
addFixedSize(heights, 'h-', opts);
|
||||||
|
|
||||||
|
styleClass('height', heights, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
import ObjectUtils from '../../utils/ObjectUtils';
|
||||||
|
|
||||||
|
export const getDeclaration = (property, value) => {
|
||||||
|
return [property]
|
||||||
|
.flat()
|
||||||
|
.map((prop) => ObjectUtils.css.getDeclaration(ObjectUtils.toKebabCase(prop), value))
|
||||||
|
.join('');
|
||||||
|
};
|
||||||
|
|
||||||
|
export const token = {
|
||||||
|
spacing: (property, options) => {
|
||||||
|
return {
|
||||||
|
type: 'spacing',
|
||||||
|
property,
|
||||||
|
transform(value) {
|
||||||
|
console.log(this.key);
|
||||||
|
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
toString(value, options) {
|
||||||
|
return getDeclaration(property, this.transform(value));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
sizing: (property) => {
|
||||||
|
return {
|
||||||
|
type: 'sizing',
|
||||||
|
property,
|
||||||
|
declaration: (value) => declaration(property, value)
|
||||||
|
};
|
||||||
|
},
|
||||||
|
prop: (property) => {
|
||||||
|
return {
|
||||||
|
property
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const createRules = (rules = {}) => {
|
||||||
|
return Object.entries(rules).reduce((acc, [key, value]) => ((acc[key] = { key, ...value }), acc), {});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const createStyleData = (rules = {}) => {
|
||||||
|
const keys = Object.keys(rules);
|
||||||
|
const props = keys.reduce((acc, k) => ((acc[k] = undefined), acc), {});
|
||||||
|
|
||||||
|
return {
|
||||||
|
rules,
|
||||||
|
keys,
|
||||||
|
props,
|
||||||
|
toString(obj) {
|
||||||
|
return Object.entries(obj)
|
||||||
|
.filter(([key]) => keys.includes(key))
|
||||||
|
.reduce((acc, [key, value]) => {
|
||||||
|
if (ObjectUtils.isNotEmpty(value)) {
|
||||||
|
const rule = ObjectUtils.toKebabCase(key);
|
||||||
|
|
||||||
|
acc.push(rules[key].toString(ObjectUtils.css.getVariableValue(value, rule)));
|
||||||
|
}
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
}, [])
|
||||||
|
.join('');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/* const content = require('./properties/content');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
// properties
|
||||||
|
content(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const justifyContent = {
|
||||||
|
'justify-content-start': 'flex-start',
|
||||||
|
'justify-content-end': 'flex-end',
|
||||||
|
'justify-content-center': 'center',
|
||||||
|
'justify-content-between': 'space-between',
|
||||||
|
'justify-content-around': 'space-around',
|
||||||
|
'justify-content-evenly': 'space-evenly'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('justify-content', justifyContent, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const left = {
|
||||||
|
'left-auto': 'auto',
|
||||||
|
'left-0': '0px',
|
||||||
|
'left-50': '50%',
|
||||||
|
'left-100': '100%'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('left', left, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/* const height = require('./properties/height');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
// properties
|
||||||
|
height(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const lineHeights = {
|
||||||
|
'line-height-1': '1',
|
||||||
|
'line-height-2': '1.25',
|
||||||
|
'line-height-3': '1.5',
|
||||||
|
'line-height-4': '2'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('line-height', lineHeights, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const listStyle = {
|
||||||
|
'list-none': 'none',
|
||||||
|
'list-disc': 'disc',
|
||||||
|
'list-decimal': 'decimal'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('list-style', listStyle, root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
const bottom = require('./properties/bottom');
|
||||||
|
const left = require('./properties/left');
|
||||||
|
const right = require('./properties/right');
|
||||||
|
const top = require('./properties/top');
|
||||||
|
const x = require('./modules/x');
|
||||||
|
const y = require('./modules/y');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const scales = opts.spacing;
|
||||||
|
let margins = {
|
||||||
|
'm-auto': 'auto'
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const i in scales) {
|
||||||
|
margins['m-' + i] = scales[i] + 'rem';
|
||||||
|
i !== 0 && (margins['-m-' + i] = '-' + scales[i] + 'rem');
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass('margin', margins, root, opts, true);
|
||||||
|
|
||||||
|
// properties
|
||||||
|
bottom(root, opts);
|
||||||
|
left(root, opts);
|
||||||
|
right(root, opts);
|
||||||
|
top(root, opts);
|
||||||
|
|
||||||
|
// modules
|
||||||
|
x(root, opts);
|
||||||
|
y(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const scales = opts.spacing;
|
||||||
|
let xMargins = {
|
||||||
|
'mx-auto': 'auto'
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const i in scales) {
|
||||||
|
xMargins['mx-' + i] = scales[i] + 'rem';
|
||||||
|
xMargins['-mx-' + i] = '-' + scales[i] + 'rem';
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass(['margin-left', 'margin-right'], xMargins, root, opts, true);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const scales = opts.spacing;
|
||||||
|
let yMargins = {
|
||||||
|
'my-auto': 'auto'
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const i in scales) {
|
||||||
|
yMargins['my-' + i] = scales[i] + 'rem';
|
||||||
|
yMargins['-my-' + i] = '-' + scales[i] + 'rem';
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass(['margin-top', 'margin-bottom'], yMargins, root, opts, true);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const scales = opts.spacing;
|
||||||
|
let bottomMargins = {
|
||||||
|
'mb-auto': 'auto'
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const i in scales) {
|
||||||
|
bottomMargins['mb-' + i] = `${scales[i]}rem`;
|
||||||
|
bottomMargins['-mb-' + i] = `-${scales[i]}rem`;
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass('margin-bottom', bottomMargins, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const scales = opts.spacing;
|
||||||
|
let leftMargins = {
|
||||||
|
'ml-auto': 'auto'
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const i in scales) {
|
||||||
|
leftMargins['ml-' + i] = `${scales[i]}rem`;
|
||||||
|
leftMargins['-ml-' + i] = `-${scales[i]}rem`;
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass('margin-left', leftMargins, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const scales = opts.spacing;
|
||||||
|
let rightMargins = {
|
||||||
|
'mr-auto': 'auto'
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const i in scales) {
|
||||||
|
rightMargins['mr-' + i] = `${scales[i]}rem`;
|
||||||
|
rightMargins['-mr-' + i] = `-${scales[i]}rem`;
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass('margin-right', rightMargins, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const scales = opts.spacing;
|
||||||
|
let topMargins = {
|
||||||
|
'mt-auto': 'auto'
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const i in scales) {
|
||||||
|
topMargins['mt-' + i] = `${scales[i]}rem`;
|
||||||
|
topMargins['-mt-' + i] = `-${scales[i]}rem`;
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass('margin-top', topMargins, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
/* const height = require('./properties/height');
|
||||||
|
const width = require('./properties/width');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
// properties
|
||||||
|
height(root, opts);
|
||||||
|
width(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
const { addFixedSize } = require('../../base/size');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
let maxHeights = {
|
||||||
|
'max-h-auto': 'auto',
|
||||||
|
'max-h-0': '0px',
|
||||||
|
'max-h-full': '100%',
|
||||||
|
'max-h-screen': '100vh',
|
||||||
|
'min-h-min': 'min-content',
|
||||||
|
'min-h-max': 'max-content',
|
||||||
|
'min-h-fit': 'fit-content'
|
||||||
|
};
|
||||||
|
|
||||||
|
addFixedSize(maxHeights, 'max-h-', opts);
|
||||||
|
|
||||||
|
styleClass('max-height', maxHeights, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
const { addFixedSize } = require('../../base/size');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
let maxWidths = {
|
||||||
|
'max-w-auto': 'auto',
|
||||||
|
'max-w-0': '0px',
|
||||||
|
'max-w-full': '100%',
|
||||||
|
'max-w-screen': '100vw',
|
||||||
|
'max-w-min': 'min-content',
|
||||||
|
'max-w-max': 'max-content',
|
||||||
|
'max-w-fit': 'fit-content'
|
||||||
|
};
|
||||||
|
|
||||||
|
addFixedSize(maxWidths, 'max-w-', opts);
|
||||||
|
|
||||||
|
styleClass('max-width', maxWidths, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
/* const height = require('./properties/height');
|
||||||
|
const width = require('./properties/width');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
// properties
|
||||||
|
height(root, opts);
|
||||||
|
width(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
const { addFixedSize } = require('../../base/size');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
let minHeights = {
|
||||||
|
'min-h-auto': 'auto',
|
||||||
|
'min-h-0': '0px',
|
||||||
|
'min-h-full': '100%',
|
||||||
|
'min-h-screen': '100vh',
|
||||||
|
'min-h-min': 'min-content',
|
||||||
|
'min-h-max': 'max-content',
|
||||||
|
'min-h-fit': 'fit-content'
|
||||||
|
};
|
||||||
|
|
||||||
|
addFixedSize(minHeights, 'min-h-', opts);
|
||||||
|
|
||||||
|
styleClass('min-height', minHeights, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
const { addFixedSize } = require('../../base/size');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
let minWidths = {
|
||||||
|
'min-w-auto': 'auto',
|
||||||
|
'min-w-0': '0px',
|
||||||
|
'min-w-full': '100%',
|
||||||
|
'min-w-screen': '100vw',
|
||||||
|
'min-w-min': 'min-content',
|
||||||
|
'min-w-max': 'max-content',
|
||||||
|
'min-w-fit': 'fit-content'
|
||||||
|
};
|
||||||
|
|
||||||
|
addFixedSize(minWidths, 'min-w-', opts);
|
||||||
|
|
||||||
|
styleClass('min-width', minWidths, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const opacity = {
|
||||||
|
'opacity-0': '0',
|
||||||
|
'opacity-10': '.1',
|
||||||
|
'opacity-20': '.2',
|
||||||
|
'opacity-30': '.3',
|
||||||
|
'opacity-40': '.4',
|
||||||
|
'opacity-50': '.5',
|
||||||
|
'opacity-60': '.6',
|
||||||
|
'opacity-70': '.7',
|
||||||
|
'opacity-80': '.8',
|
||||||
|
'opacity-90': '.9',
|
||||||
|
'opacity-100': '1'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('opacity', opacity, root, opts, true, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const order = {
|
||||||
|
'flex-order-0': '0',
|
||||||
|
'flex-order-1': '1',
|
||||||
|
'flex-order-2': '2',
|
||||||
|
'flex-order-3': '3',
|
||||||
|
'flex-order-4': '4',
|
||||||
|
'flex-order-5': '5',
|
||||||
|
'flex-order-6': '6'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('order', order, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
const color = require('./properties/color');
|
||||||
|
const offset = require('./properties/offset');
|
||||||
|
const style = require('./properties/style');
|
||||||
|
const width = require('./properties/width');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const outline = {
|
||||||
|
'outline-none': '2px solid transparent'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('outline', outline, root, opts, false, true);
|
||||||
|
|
||||||
|
// properties
|
||||||
|
color(root, opts);
|
||||||
|
offset(root, opts);
|
||||||
|
style(root, opts);
|
||||||
|
width(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
const { getThemeColors, getWhiteAndBlackRgbaColors } = require('../../base/color');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const p = opts.prefix.cssVariable;
|
||||||
|
const outlineColor = {
|
||||||
|
'outline-transparent': 'transparent',
|
||||||
|
'outline-white': '#ffffff',
|
||||||
|
'outline-black': '#000000'
|
||||||
|
};
|
||||||
|
|
||||||
|
const themes = getThemeColors(opts, 'outline-', p);
|
||||||
|
const whiteAndBlackRgba = getWhiteAndBlackRgbaColors('outline-');
|
||||||
|
|
||||||
|
styleClass('outline-color', outlineColor, root, opts, true, true);
|
||||||
|
styleClass('outline-color', themes, root, opts, true, true);
|
||||||
|
styleClass('outline-color', whiteAndBlackRgba, root, opts, true, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const outlineOffset = {
|
||||||
|
'outline-offset-0': '0',
|
||||||
|
'outline-offset-1': '1px',
|
||||||
|
'outline-offset-2': '2px',
|
||||||
|
'outline-offset-4': '4px',
|
||||||
|
'outline-offset-8': '8px'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('outline-offset', outlineOffset, root, opts, false, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const outlineStyle = {
|
||||||
|
outline: 'solid',
|
||||||
|
'outline-dashed': 'dashed',
|
||||||
|
'outline-dotted': 'dotted',
|
||||||
|
'outline-double': 'double',
|
||||||
|
'outline-inset': 'inset',
|
||||||
|
'outline-outset': 'outset'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('outline-style', outlineStyle, root, opts, false, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const outlineWidth = {
|
||||||
|
'outline-0': '0px',
|
||||||
|
'outline-1': '1px',
|
||||||
|
'outline-2': '2px',
|
||||||
|
'outline-4': '4px',
|
||||||
|
'outline-8': '8px'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('outline-width', outlineWidth, root, opts, false, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
const x = require('./properties/x');
|
||||||
|
const y = require('./properties/y');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const overflow = {
|
||||||
|
'overflow-auto': 'auto',
|
||||||
|
'overflow-hidden': 'hidden',
|
||||||
|
'overflow-visible': 'visible',
|
||||||
|
'overflow-scroll': 'scroll'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('overflow', overflow, root, opts, true);
|
||||||
|
|
||||||
|
// properties
|
||||||
|
x(root, opts);
|
||||||
|
y(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const overflowX = {
|
||||||
|
'overflow-x-auto': 'auto',
|
||||||
|
'overflow-x-hidden': 'hidden',
|
||||||
|
'overflow-x-visible': 'visible',
|
||||||
|
'overflow-x-scroll': 'scroll'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('overflow-x', overflowX, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const overflowY = {
|
||||||
|
'overflow-y-auto': 'auto',
|
||||||
|
'overflow-y-hidden': 'hidden',
|
||||||
|
'overflow-y-visible': 'visible',
|
||||||
|
'overflow-y-scroll': 'scroll'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('overflow-y', overflowY, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
import x from './modules/x';
|
||||||
|
import y from './modules/y';
|
||||||
|
import bottom from './properties/bottom';
|
||||||
|
import left from './properties/left';
|
||||||
|
import right from './properties/right';
|
||||||
|
import top from './properties/top';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// properties
|
||||||
|
...bottom,
|
||||||
|
...left,
|
||||||
|
...right,
|
||||||
|
...top,
|
||||||
|
|
||||||
|
// modules
|
||||||
|
...x,
|
||||||
|
...y
|
||||||
|
};
|
||||||
|
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
const bottom = require('./properties/bottom');
|
||||||
|
const left = require('./properties/left');
|
||||||
|
const right = require('./properties/right');
|
||||||
|
const top = require('./properties/top');
|
||||||
|
const x = require('./modules/x');
|
||||||
|
const y = require('./modules/y');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const scales = opts.spacing;
|
||||||
|
let paddings = {};
|
||||||
|
|
||||||
|
for (const i in scales) {
|
||||||
|
paddings['p-' + i] = scales[i] + 'rem';
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass('padding', paddings, root, opts, true);
|
||||||
|
|
||||||
|
// properties
|
||||||
|
bottom(root, opts);
|
||||||
|
left(root, opts);
|
||||||
|
right(root, opts);
|
||||||
|
top(root, opts);
|
||||||
|
|
||||||
|
// modules
|
||||||
|
x(root, opts);
|
||||||
|
y(root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { createRules, token } from '../..';
|
||||||
|
|
||||||
|
export default createRules({
|
||||||
|
paddingX: token.spacing(['paddingLeft', 'paddingRight']),
|
||||||
|
px: token.spacing(['paddingLeft', 'paddingRight'])
|
||||||
|
});
|
||||||
|
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const scales = opts.spacing;
|
||||||
|
let xPaddings = {};
|
||||||
|
|
||||||
|
for (const i in scales) {
|
||||||
|
xPaddings['px-' + i] = scales[i] + 'rem';
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass(['padding-left', 'padding-right'], xPaddings, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { createRules, token } from '../..';
|
||||||
|
|
||||||
|
export default createRules({
|
||||||
|
paddingX: token.spacing(['paddingTop', 'paddingBottom']),
|
||||||
|
px: token.spacing(['paddingTop', 'paddingBottom'])
|
||||||
|
});
|
||||||
|
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const scales = opts.spacing;
|
||||||
|
let yPaddings = {};
|
||||||
|
|
||||||
|
for (const i in scales) {
|
||||||
|
yPaddings['py-' + i] = scales[i] + 'rem';
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass(['padding-top', 'padding-bottom'], yPaddings, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { createRules, token } from '../..';
|
||||||
|
|
||||||
|
export default createRules({
|
||||||
|
paddingBottom: token.spacing('paddingBottom'),
|
||||||
|
pb: token.spacing('paddingBottom')
|
||||||
|
});
|
||||||
|
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const scales = opts.spacing;
|
||||||
|
let bottomPaddings = {};
|
||||||
|
|
||||||
|
for (const i in scales) {
|
||||||
|
bottomPaddings['pb-' + i] = `${scales[i]}rem`;
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass('padding-bottom', bottomPaddings, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { createRules, token } from '../..';
|
||||||
|
|
||||||
|
export default createRules({
|
||||||
|
paddingLeft: token.spacing('paddingLeft'),
|
||||||
|
pl: token.spacing('paddingLeft')
|
||||||
|
});
|
||||||
|
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const scales = opts.spacing;
|
||||||
|
let leftPaddings = {};
|
||||||
|
|
||||||
|
for (const i in scales) {
|
||||||
|
leftPaddings['pl-' + i] = `${scales[i]}rem`;
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass('padding-left', leftPaddings, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { createRules, token } from '../..';
|
||||||
|
|
||||||
|
export default createRules({
|
||||||
|
paddingRight: token.spacing('paddingRight'),
|
||||||
|
pr: token.spacing('paddingRight')
|
||||||
|
});
|
||||||
|
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const scales = opts.spacing;
|
||||||
|
let rightPaddings = {};
|
||||||
|
|
||||||
|
for (const i in scales) {
|
||||||
|
rightPaddings['pr-' + i] = `${scales[i]}rem`;
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass('padding-right', rightPaddings, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { createRules, token } from '../..';
|
||||||
|
|
||||||
|
export default createRules({
|
||||||
|
paddingTop: token.spacing('paddingTop'),
|
||||||
|
pt: token.spacing('paddingTop')
|
||||||
|
});
|
||||||
|
|
||||||
|
/* const { styleClass } = require('../../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const scales = opts.spacing;
|
||||||
|
let topPaddings = {};
|
||||||
|
|
||||||
|
for (const i in scales) {
|
||||||
|
topPaddings['pt-' + i] = `${scales[i]}rem`;
|
||||||
|
}
|
||||||
|
|
||||||
|
styleClass('padding-top', topPaddings, root, opts, true);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
/* const { styleClass } = require('../../utils');
|
||||||
|
|
||||||
|
module.exports = (root, opts) => {
|
||||||
|
const pointerEvents = {
|
||||||
|
'pointer-events-none': 'none',
|
||||||
|
'pointer-events-auto': 'auto'
|
||||||
|
};
|
||||||
|
|
||||||
|
styleClass('pointer-events', pointerEvents, root, opts);
|
||||||
|
};
|
||||||
|
*/
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue