vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Init styled system

styled-props-system
mertsincan 2024-02-16 08:48:00 +00:00
parent 1bb4f67536
commit b7a8c2fff4
143 changed files with 3064 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/menu/menu.json
View File

@ -190,6 +190,16 @@
}
]
},
{
"name": "Typography",
"children": [
{
"name": "Text",
"to": "/text",
"badge": "NEW"
}
]
},
{
"name": "Data",
"children": [

0
components/lib/props/index.js Normal file
View File

11
components/lib/props/style/align/index.js Normal file
View File

@ -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);
};
*/

14
components/lib/props/style/align/properties/content.js Normal file
View File

@ -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);
};*/

13
components/lib/props/style/align/properties/items.js Normal file
View File

@ -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);
};*/

15
components/lib/props/style/align/properties/self.js Normal file
View File

@ -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);
};
*/

12
components/lib/props/style/all/index.js Normal file
View File

@ -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);
};
*/

29
components/lib/props/style/animation/index.js Normal file
View File

@ -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);
};
*/

16
components/lib/props/style/animation/modules/animate.js Normal file
View File

@ -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
);
};
*/

124
components/lib/props/style/animation/modules/fade.js Normal file
View File

@ -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
);
};
*/

56
components/lib/props/style/animation/modules/flip.js Normal file
View File

@ -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
);
};
*/

16
components/lib/props/style/animation/modules/scale.js Normal file
View File

@ -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
);
};
*/

28
components/lib/props/style/animation/modules/slide.js Normal file
View File

@ -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
);
};
*/

74
components/lib/props/style/animation/modules/zoom.js Normal file
View File

@ -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
);
};
*/

16
components/lib/props/style/animation/properties/delay.js Normal file
View File

@ -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);
};
*/

18
components/lib/props/style/animation/properties/duration.js Normal file
View File

@ -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);
};
*/

13
components/lib/props/style/animation/properties/fill_mode.js Normal file
View File

@ -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);
};
*/

12
components/lib/props/style/animation/properties/iteration_count.js Normal file
View File

@ -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);
};
*/

13
components/lib/props/style/animation/properties/timing_function.js Normal file
View File

@ -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);
};
*/

41
components/lib/props/style/animation/rules.js Normal file
View File

@ -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
};
*/

10
components/lib/props/style/appearance/index.js Normal file
View File

@ -0,0 +1,10 @@
/* const { styleClass } = require('../../utils');
module.exports = (root, opts) => {
const appearance = {
'appearance-none': 'none'
};
styleClass('appearance', appearance, root, opts);
};
*/

15
components/lib/props/style/backdropfilter/index.js Normal file
View File

@ -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);
};
*/

19
components/lib/props/style/background/index.js Normal file
View File

@ -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);
};
*/

27
components/lib/props/style/background/properties/color.js Normal file
View File

@ -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);
};
*/

47
components/lib/props/style/background/properties/image.js Normal file
View File

@ -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);
};
*/

18
components/lib/props/style/background/properties/position.js Normal file
View File

@ -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);
};
*/

15
components/lib/props/style/background/properties/repeat.js Normal file
View File

@ -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);
};
*/

12
components/lib/props/style/background/properties/size.js Normal file
View File

@ -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);
};
*/

37
components/lib/props/style/background/rules.js Normal file
View File

@ -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);
}
*/

73
components/lib/props/style/base/color.js Normal file
View File

@ -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
};
*/

113
components/lib/props/style/base/filter.js Normal file
View File

@ -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
};
*/

6
components/lib/props/style/base/gap.js Normal file
View File

@ -0,0 +1,6 @@
/* const scales = [0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5];
module.exports = {
scales
};
*/

12
components/lib/props/style/base/index.js Normal file
View File

@ -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
};
*/

10
components/lib/props/style/base/size.js Normal file
View File

@ -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
};
*/

15
components/lib/props/style/border/index.js Normal file
View File

@ -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);
};
*/

21
components/lib/props/style/border/properties/color.js Normal file
View File

@ -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);
};
*/

46
components/lib/props/style/border/properties/radius.js Normal file
View File

@ -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);
};
*/

13
components/lib/props/style/border/properties/style.js Normal file
View File

@ -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);
};
*/

59
components/lib/props/style/border/rules.js Normal file
View File

@ -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);
}
}
*/

13
components/lib/props/style/bottom/index.js Normal file
View File

@ -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);
};
*/

9
components/lib/props/style/box/index.js Normal file
View File

@ -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);
};
*/

18
components/lib/props/style/box/properties/shadow.js Normal file
View File

@ -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);
};
*/

11
components/lib/props/style/box/properties/sizing.js Normal file
View File

@ -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);
};
*/

23
components/lib/props/style/color/index.js Normal file
View File

@ -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);
};
*/

7
components/lib/props/style/column/index.js Normal file
View File

@ -0,0 +1,7 @@
/* const gap = require('./properties/gap');
module.exports = (root, opts) => {
// properties
gap(root, opts);
};
*/

13
components/lib/props/style/column/properties/gap.js Normal file
View File

@ -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);
};
*/

39
components/lib/props/style/cursor/index.js Normal file
View File

@ -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);
};
*/

15
components/lib/props/style/display/index.js Normal file
View File

@ -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);
};
*/

22
components/lib/props/style/fill/index.js Normal file
View File

@ -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);
};
*/

15
components/lib/props/style/filter/index.js Normal file
View File

@ -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);
};
*/

23
components/lib/props/style/flex/index.js Normal file
View File

@ -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);
};
*/

13
components/lib/props/style/flex/properties/direction.js Normal file
View File

@ -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);
};
*/

11
components/lib/props/style/flex/properties/grow.js Normal file
View File

@ -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);
};
*/

11
components/lib/props/style/flex/properties/shrink.js Normal file
View File

@ -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);
};
*/

12
components/lib/props/style/flex/properties/wrap.js Normal file
View File

@ -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);
};
*/

13
components/lib/props/style/font/index.js Normal file
View File

@ -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);
};
*/

12
components/lib/props/style/font/properties/family.js Normal file
View File

@ -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);
};
*/

21
components/lib/props/style/font/properties/size.js Normal file
View File

@ -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);
};
*/

10
components/lib/props/style/font/properties/style.js Normal file
View File

@ -0,0 +1,10 @@
/* const { styleClass } = require('../../../utils');
module.exports = (root, opts) => {
const fontStyles = {
'font-italic': 'italic'
};
styleClass('font-style', fontStyles, root, opts, true);
};
*/

18
components/lib/props/style/font/properties/weight.js Normal file
View File

@ -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);
};
*/

13
components/lib/props/style/gap/index.js Normal file
View File

@ -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);
};
*/

18
components/lib/props/style/height/index.js Normal file
View File

@ -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);
};
*/

66
components/lib/props/style/index.js Normal file
View File

@ -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('');
}
};
};

7
components/lib/props/style/justify/index.js Normal file
View File

@ -0,0 +1,7 @@
/* const content = require('./properties/content');
module.exports = (root, opts) => {
// properties
content(root, opts);
};
*/

15
components/lib/props/style/justify/properties/content.js Normal file
View File

@ -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);
};
*/

13
components/lib/props/style/left/index.js Normal file
View File

@ -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);
};
*/

7
components/lib/props/style/line/index.js Normal file
View File

@ -0,0 +1,7 @@
/* const height = require('./properties/height');
module.exports = (root, opts) => {
// properties
height(root, opts);
};
*/

13
components/lib/props/style/line/properties/height.js Normal file
View File

@ -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);
};
*/

12
components/lib/props/style/liststyle/index.js Normal file
View File

@ -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);
};
*/

32
components/lib/props/style/margin/index.js Normal file
View File

@ -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);
};
*/

15
components/lib/props/style/margin/modules/x.js Normal file
View File

@ -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);
};

15
components/lib/props/style/margin/modules/y.js Normal file
View File

@ -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);
};

16
components/lib/props/style/margin/properties/bottom.js Normal file
View File

@ -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);
};
*/

16
components/lib/props/style/margin/properties/left.js Normal file
View File

@ -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);
};
*/

16
components/lib/props/style/margin/properties/right.js Normal file
View File

@ -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);
};
*/

16
components/lib/props/style/margin/properties/top.js Normal file
View File

@ -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);
};
*/

9
components/lib/props/style/max/index.js Normal file
View File

@ -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);
};
*/

19
components/lib/props/style/max/properties/height.js Normal file
View File

@ -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);
};
*/

19
components/lib/props/style/max/properties/width.js Normal file
View File

@ -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);
};
*/

9
components/lib/props/style/min/index.js Normal file
View File

@ -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);
};
*/

19
components/lib/props/style/min/properties/height.js Normal file
View File

@ -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);
};
*/

19
components/lib/props/style/min/properties/width.js Normal file
View File

@ -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);
};
*/

20
components/lib/props/style/opacity/index.js Normal file
View File

@ -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);
};
*/

16
components/lib/props/style/order/index.js Normal file
View File

@ -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);
};
*/

20
components/lib/props/style/outline/index.js Normal file
View File

@ -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);
};
*/

19
components/lib/props/style/outline/properties/color.js Normal file
View File

@ -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);
};
*/

14
components/lib/props/style/outline/properties/offset.js Normal file
View File

@ -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);
};
*/

15
components/lib/props/style/outline/properties/style.js Normal file
View File

@ -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);
};
*/

14
components/lib/props/style/outline/properties/width.js Normal file
View File

@ -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);
};
*/

19
components/lib/props/style/overflow/index.js Normal file
View File

@ -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);
};
*/

13
components/lib/props/style/overflow/properties/x.js Normal file
View File

@ -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);
};
*/

13
components/lib/props/style/overflow/properties/y.js Normal file
View File

@ -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);
};
*/

48
components/lib/props/style/padding/index.js Normal file
View File

@ -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);
};
*/

20
components/lib/props/style/padding/modules/x.js Normal file
View File

@ -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);
};
*/

20
components/lib/props/style/padding/modules/y.js Normal file
View File

@ -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);
};
*/

20
components/lib/props/style/padding/properties/bottom.js Normal file
View File

@ -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);
};
*/

20
components/lib/props/style/padding/properties/left.js Normal file
View File

@ -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);
};
*/

20
components/lib/props/style/padding/properties/right.js Normal file
View File

@ -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);
};
*/

20
components/lib/props/style/padding/properties/top.js Normal file
View File

@ -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);
};
*/

11
components/lib/props/style/pointerevents/index.js Normal file
View File

@ -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