diff --git a/assets/menu/menu.json b/assets/menu/menu.json index ce32aa7a0..b22f5c22b 100644 --- a/assets/menu/menu.json +++ b/assets/menu/menu.json @@ -190,6 +190,16 @@ } ] }, + { + "name": "Typography", + "children": [ + { + "name": "Text", + "to": "/text", + "badge": "NEW" + } + ] + }, { "name": "Data", "children": [ diff --git a/components/lib/props/index.js b/components/lib/props/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/props/style/align/index.js b/components/lib/props/style/align/index.js new file mode 100644 index 000000000..b2342e195 --- /dev/null +++ b/components/lib/props/style/align/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/align/properties/content.js b/components/lib/props/style/align/properties/content.js new file mode 100644 index 000000000..3d6826526 --- /dev/null +++ b/components/lib/props/style/align/properties/content.js @@ -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); +};*/ diff --git a/components/lib/props/style/align/properties/items.js b/components/lib/props/style/align/properties/items.js new file mode 100644 index 000000000..0a9f66f6f --- /dev/null +++ b/components/lib/props/style/align/properties/items.js @@ -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); +};*/ diff --git a/components/lib/props/style/align/properties/self.js b/components/lib/props/style/align/properties/self.js new file mode 100644 index 000000000..fe4c70c8d --- /dev/null +++ b/components/lib/props/style/align/properties/self.js @@ -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); +}; + */ diff --git a/components/lib/props/style/all/index.js b/components/lib/props/style/all/index.js new file mode 100644 index 000000000..eac4d8666 --- /dev/null +++ b/components/lib/props/style/all/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/animation/index.js b/components/lib/props/style/animation/index.js new file mode 100644 index 000000000..9d2f9171b --- /dev/null +++ b/components/lib/props/style/animation/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/animation/modules/animate.js b/components/lib/props/style/animation/modules/animate.js new file mode 100644 index 000000000..d6ec38ecb --- /dev/null +++ b/components/lib/props/style/animation/modules/animate.js @@ -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 + ); +}; + */ diff --git a/components/lib/props/style/animation/modules/fade.js b/components/lib/props/style/animation/modules/fade.js new file mode 100644 index 000000000..0997356c6 --- /dev/null +++ b/components/lib/props/style/animation/modules/fade.js @@ -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 + ); +}; + */ diff --git a/components/lib/props/style/animation/modules/flip.js b/components/lib/props/style/animation/modules/flip.js new file mode 100644 index 000000000..f5a15d4cd --- /dev/null +++ b/components/lib/props/style/animation/modules/flip.js @@ -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 + ); +}; + */ diff --git a/components/lib/props/style/animation/modules/scale.js b/components/lib/props/style/animation/modules/scale.js new file mode 100644 index 000000000..bcf0fd945 --- /dev/null +++ b/components/lib/props/style/animation/modules/scale.js @@ -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 + ); +}; + */ diff --git a/components/lib/props/style/animation/modules/slide.js b/components/lib/props/style/animation/modules/slide.js new file mode 100644 index 000000000..6eda2bb79 --- /dev/null +++ b/components/lib/props/style/animation/modules/slide.js @@ -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 + ); +}; + */ diff --git a/components/lib/props/style/animation/modules/zoom.js b/components/lib/props/style/animation/modules/zoom.js new file mode 100644 index 000000000..af7e52bca --- /dev/null +++ b/components/lib/props/style/animation/modules/zoom.js @@ -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 + ); +}; + */ diff --git a/components/lib/props/style/animation/properties/delay.js b/components/lib/props/style/animation/properties/delay.js new file mode 100644 index 000000000..23ab03233 --- /dev/null +++ b/components/lib/props/style/animation/properties/delay.js @@ -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); +}; + */ diff --git a/components/lib/props/style/animation/properties/duration.js b/components/lib/props/style/animation/properties/duration.js new file mode 100644 index 000000000..16218ce14 --- /dev/null +++ b/components/lib/props/style/animation/properties/duration.js @@ -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); +}; + */ diff --git a/components/lib/props/style/animation/properties/fill_mode.js b/components/lib/props/style/animation/properties/fill_mode.js new file mode 100644 index 000000000..99e240d6f --- /dev/null +++ b/components/lib/props/style/animation/properties/fill_mode.js @@ -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); +}; + */ diff --git a/components/lib/props/style/animation/properties/iteration_count.js b/components/lib/props/style/animation/properties/iteration_count.js new file mode 100644 index 000000000..79ddce96c --- /dev/null +++ b/components/lib/props/style/animation/properties/iteration_count.js @@ -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); +}; + */ diff --git a/components/lib/props/style/animation/properties/timing_function.js b/components/lib/props/style/animation/properties/timing_function.js new file mode 100644 index 000000000..86518c22e --- /dev/null +++ b/components/lib/props/style/animation/properties/timing_function.js @@ -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); +}; + */ diff --git a/components/lib/props/style/animation/rules.js b/components/lib/props/style/animation/rules.js new file mode 100644 index 000000000..57e0ba7ac --- /dev/null +++ b/components/lib/props/style/animation/rules.js @@ -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 +}; + */ diff --git a/components/lib/props/style/appearance/index.js b/components/lib/props/style/appearance/index.js new file mode 100644 index 000000000..0010f7a25 --- /dev/null +++ b/components/lib/props/style/appearance/index.js @@ -0,0 +1,10 @@ +/* const { styleClass } = require('../../utils'); + +module.exports = (root, opts) => { + const appearance = { + 'appearance-none': 'none' + }; + + styleClass('appearance', appearance, root, opts); +}; + */ diff --git a/components/lib/props/style/backdropfilter/index.js b/components/lib/props/style/backdropfilter/index.js new file mode 100644 index 000000000..72803e7dd --- /dev/null +++ b/components/lib/props/style/backdropfilter/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/background/index.js b/components/lib/props/style/background/index.js new file mode 100644 index 000000000..2c822149e --- /dev/null +++ b/components/lib/props/style/background/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/background/properties/color.js b/components/lib/props/style/background/properties/color.js new file mode 100644 index 000000000..244e6a146 --- /dev/null +++ b/components/lib/props/style/background/properties/color.js @@ -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); +}; + */ diff --git a/components/lib/props/style/background/properties/image.js b/components/lib/props/style/background/properties/image.js new file mode 100644 index 000000000..28cd4f185 --- /dev/null +++ b/components/lib/props/style/background/properties/image.js @@ -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); +}; + */ diff --git a/components/lib/props/style/background/properties/position.js b/components/lib/props/style/background/properties/position.js new file mode 100644 index 000000000..b657e65e2 --- /dev/null +++ b/components/lib/props/style/background/properties/position.js @@ -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); +}; + */ diff --git a/components/lib/props/style/background/properties/repeat.js b/components/lib/props/style/background/properties/repeat.js new file mode 100644 index 000000000..dbcd16f3f --- /dev/null +++ b/components/lib/props/style/background/properties/repeat.js @@ -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); +}; + */ diff --git a/components/lib/props/style/background/properties/size.js b/components/lib/props/style/background/properties/size.js new file mode 100644 index 000000000..5d01069ba --- /dev/null +++ b/components/lib/props/style/background/properties/size.js @@ -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); +}; + */ diff --git a/components/lib/props/style/background/rules.js b/components/lib/props/style/background/rules.js new file mode 100644 index 000000000..90e942cfa --- /dev/null +++ b/components/lib/props/style/background/rules.js @@ -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); +} + */ diff --git a/components/lib/props/style/base/color.js b/components/lib/props/style/base/color.js new file mode 100644 index 000000000..c529a76ee --- /dev/null +++ b/components/lib/props/style/base/color.js @@ -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 +}; + */ diff --git a/components/lib/props/style/base/filter.js b/components/lib/props/style/base/filter.js new file mode 100644 index 000000000..86b0bf4ab --- /dev/null +++ b/components/lib/props/style/base/filter.js @@ -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 +}; + */ diff --git a/components/lib/props/style/base/gap.js b/components/lib/props/style/base/gap.js new file mode 100644 index 000000000..c9259b49c --- /dev/null +++ b/components/lib/props/style/base/gap.js @@ -0,0 +1,6 @@ +/* const scales = [0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5]; + +module.exports = { + scales +}; + */ diff --git a/components/lib/props/style/base/index.js b/components/lib/props/style/base/index.js new file mode 100644 index 000000000..cd6d2a3c8 --- /dev/null +++ b/components/lib/props/style/base/index.js @@ -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 +}; + */ diff --git a/components/lib/props/style/base/size.js b/components/lib/props/style/base/size.js new file mode 100644 index 000000000..5d09d495d --- /dev/null +++ b/components/lib/props/style/base/size.js @@ -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 +}; + */ diff --git a/components/lib/props/style/border/index.js b/components/lib/props/style/border/index.js new file mode 100644 index 000000000..6f94dfc13 --- /dev/null +++ b/components/lib/props/style/border/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/border/properties/color.js b/components/lib/props/style/border/properties/color.js new file mode 100644 index 000000000..c39f004ac --- /dev/null +++ b/components/lib/props/style/border/properties/color.js @@ -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); +}; + */ diff --git a/components/lib/props/style/border/properties/radius.js b/components/lib/props/style/border/properties/radius.js new file mode 100644 index 000000000..8f7310d57 --- /dev/null +++ b/components/lib/props/style/border/properties/radius.js @@ -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); +}; + */ diff --git a/components/lib/props/style/border/properties/style.js b/components/lib/props/style/border/properties/style.js new file mode 100644 index 000000000..ac33c7dfc --- /dev/null +++ b/components/lib/props/style/border/properties/style.js @@ -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); +}; + */ diff --git a/components/lib/props/style/border/rules.js b/components/lib/props/style/border/rules.js new file mode 100644 index 000000000..d17411099 --- /dev/null +++ b/components/lib/props/style/border/rules.js @@ -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); + } +} + */ diff --git a/components/lib/props/style/bottom/index.js b/components/lib/props/style/bottom/index.js new file mode 100644 index 000000000..bb572f10e --- /dev/null +++ b/components/lib/props/style/bottom/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/box/index.js b/components/lib/props/style/box/index.js new file mode 100644 index 000000000..033dd3b34 --- /dev/null +++ b/components/lib/props/style/box/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/box/properties/shadow.js b/components/lib/props/style/box/properties/shadow.js new file mode 100644 index 000000000..0d1b3cb7e --- /dev/null +++ b/components/lib/props/style/box/properties/shadow.js @@ -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); +}; + */ diff --git a/components/lib/props/style/box/properties/sizing.js b/components/lib/props/style/box/properties/sizing.js new file mode 100644 index 000000000..3b4a28496 --- /dev/null +++ b/components/lib/props/style/box/properties/sizing.js @@ -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); +}; + */ diff --git a/components/lib/props/style/color/index.js b/components/lib/props/style/color/index.js new file mode 100644 index 000000000..28e2857ac --- /dev/null +++ b/components/lib/props/style/color/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/column/index.js b/components/lib/props/style/column/index.js new file mode 100644 index 000000000..0ee814a5d --- /dev/null +++ b/components/lib/props/style/column/index.js @@ -0,0 +1,7 @@ +/* const gap = require('./properties/gap'); + +module.exports = (root, opts) => { + // properties + gap(root, opts); +}; + */ diff --git a/components/lib/props/style/column/properties/gap.js b/components/lib/props/style/column/properties/gap.js new file mode 100644 index 000000000..60c2a5b5f --- /dev/null +++ b/components/lib/props/style/column/properties/gap.js @@ -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); +}; + */ diff --git a/components/lib/props/style/cursor/index.js b/components/lib/props/style/cursor/index.js new file mode 100644 index 000000000..e19795c21 --- /dev/null +++ b/components/lib/props/style/cursor/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/display/index.js b/components/lib/props/style/display/index.js new file mode 100644 index 000000000..8be8b9750 --- /dev/null +++ b/components/lib/props/style/display/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/fill/index.js b/components/lib/props/style/fill/index.js new file mode 100644 index 000000000..3a8105419 --- /dev/null +++ b/components/lib/props/style/fill/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/filter/index.js b/components/lib/props/style/filter/index.js new file mode 100644 index 000000000..3af3757ed --- /dev/null +++ b/components/lib/props/style/filter/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/flex/index.js b/components/lib/props/style/flex/index.js new file mode 100644 index 000000000..86579ba98 --- /dev/null +++ b/components/lib/props/style/flex/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/flex/properties/direction.js b/components/lib/props/style/flex/properties/direction.js new file mode 100644 index 000000000..964ae055a --- /dev/null +++ b/components/lib/props/style/flex/properties/direction.js @@ -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); +}; + */ diff --git a/components/lib/props/style/flex/properties/grow.js b/components/lib/props/style/flex/properties/grow.js new file mode 100644 index 000000000..3dae34030 --- /dev/null +++ b/components/lib/props/style/flex/properties/grow.js @@ -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); +}; + */ diff --git a/components/lib/props/style/flex/properties/shrink.js b/components/lib/props/style/flex/properties/shrink.js new file mode 100644 index 000000000..d9c8d0cf8 --- /dev/null +++ b/components/lib/props/style/flex/properties/shrink.js @@ -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); +}; + */ diff --git a/components/lib/props/style/flex/properties/wrap.js b/components/lib/props/style/flex/properties/wrap.js new file mode 100644 index 000000000..ccf197e27 --- /dev/null +++ b/components/lib/props/style/flex/properties/wrap.js @@ -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); +}; + */ diff --git a/components/lib/props/style/font/index.js b/components/lib/props/style/font/index.js new file mode 100644 index 000000000..f95919487 --- /dev/null +++ b/components/lib/props/style/font/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/font/properties/family.js b/components/lib/props/style/font/properties/family.js new file mode 100644 index 000000000..8a47de48b --- /dev/null +++ b/components/lib/props/style/font/properties/family.js @@ -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); +}; + */ diff --git a/components/lib/props/style/font/properties/size.js b/components/lib/props/style/font/properties/size.js new file mode 100644 index 000000000..78b7bb2d0 --- /dev/null +++ b/components/lib/props/style/font/properties/size.js @@ -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); +}; + */ diff --git a/components/lib/props/style/font/properties/style.js b/components/lib/props/style/font/properties/style.js new file mode 100644 index 000000000..d46273c51 --- /dev/null +++ b/components/lib/props/style/font/properties/style.js @@ -0,0 +1,10 @@ +/* const { styleClass } = require('../../../utils'); + +module.exports = (root, opts) => { + const fontStyles = { + 'font-italic': 'italic' + }; + + styleClass('font-style', fontStyles, root, opts, true); +}; + */ diff --git a/components/lib/props/style/font/properties/weight.js b/components/lib/props/style/font/properties/weight.js new file mode 100644 index 000000000..4ad00337d --- /dev/null +++ b/components/lib/props/style/font/properties/weight.js @@ -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); +}; + */ diff --git a/components/lib/props/style/gap/index.js b/components/lib/props/style/gap/index.js new file mode 100644 index 000000000..c57cc3dc8 --- /dev/null +++ b/components/lib/props/style/gap/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/height/index.js b/components/lib/props/style/height/index.js new file mode 100644 index 000000000..4742e17d3 --- /dev/null +++ b/components/lib/props/style/height/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/index.js b/components/lib/props/style/index.js new file mode 100644 index 000000000..480e9f437 --- /dev/null +++ b/components/lib/props/style/index.js @@ -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(''); + } + }; +}; diff --git a/components/lib/props/style/justify/index.js b/components/lib/props/style/justify/index.js new file mode 100644 index 000000000..46ec9e9dd --- /dev/null +++ b/components/lib/props/style/justify/index.js @@ -0,0 +1,7 @@ +/* const content = require('./properties/content'); + +module.exports = (root, opts) => { + // properties + content(root, opts); +}; + */ diff --git a/components/lib/props/style/justify/properties/content.js b/components/lib/props/style/justify/properties/content.js new file mode 100644 index 000000000..dfece7afd --- /dev/null +++ b/components/lib/props/style/justify/properties/content.js @@ -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); +}; + */ diff --git a/components/lib/props/style/left/index.js b/components/lib/props/style/left/index.js new file mode 100644 index 000000000..e804f5879 --- /dev/null +++ b/components/lib/props/style/left/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/line/index.js b/components/lib/props/style/line/index.js new file mode 100644 index 000000000..a33026170 --- /dev/null +++ b/components/lib/props/style/line/index.js @@ -0,0 +1,7 @@ +/* const height = require('./properties/height'); + +module.exports = (root, opts) => { + // properties + height(root, opts); +}; + */ diff --git a/components/lib/props/style/line/properties/height.js b/components/lib/props/style/line/properties/height.js new file mode 100644 index 000000000..711116f57 --- /dev/null +++ b/components/lib/props/style/line/properties/height.js @@ -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); +}; + */ diff --git a/components/lib/props/style/liststyle/index.js b/components/lib/props/style/liststyle/index.js new file mode 100644 index 000000000..8f946f184 --- /dev/null +++ b/components/lib/props/style/liststyle/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/margin/index.js b/components/lib/props/style/margin/index.js new file mode 100644 index 000000000..04b120310 --- /dev/null +++ b/components/lib/props/style/margin/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/margin/modules/x.js b/components/lib/props/style/margin/modules/x.js new file mode 100644 index 000000000..a513796b2 --- /dev/null +++ b/components/lib/props/style/margin/modules/x.js @@ -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); +}; diff --git a/components/lib/props/style/margin/modules/y.js b/components/lib/props/style/margin/modules/y.js new file mode 100644 index 000000000..e7f42368a --- /dev/null +++ b/components/lib/props/style/margin/modules/y.js @@ -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); +}; diff --git a/components/lib/props/style/margin/properties/bottom.js b/components/lib/props/style/margin/properties/bottom.js new file mode 100644 index 000000000..9cf742ccc --- /dev/null +++ b/components/lib/props/style/margin/properties/bottom.js @@ -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); +}; + */ diff --git a/components/lib/props/style/margin/properties/left.js b/components/lib/props/style/margin/properties/left.js new file mode 100644 index 000000000..c65c67193 --- /dev/null +++ b/components/lib/props/style/margin/properties/left.js @@ -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); +}; + */ diff --git a/components/lib/props/style/margin/properties/right.js b/components/lib/props/style/margin/properties/right.js new file mode 100644 index 000000000..bb9b3ece6 --- /dev/null +++ b/components/lib/props/style/margin/properties/right.js @@ -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); +}; + */ diff --git a/components/lib/props/style/margin/properties/top.js b/components/lib/props/style/margin/properties/top.js new file mode 100644 index 000000000..bfccd581b --- /dev/null +++ b/components/lib/props/style/margin/properties/top.js @@ -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); +}; + */ diff --git a/components/lib/props/style/max/index.js b/components/lib/props/style/max/index.js new file mode 100644 index 000000000..8a6b4a37e --- /dev/null +++ b/components/lib/props/style/max/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/max/properties/height.js b/components/lib/props/style/max/properties/height.js new file mode 100644 index 000000000..de2cd4452 --- /dev/null +++ b/components/lib/props/style/max/properties/height.js @@ -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); +}; + */ diff --git a/components/lib/props/style/max/properties/width.js b/components/lib/props/style/max/properties/width.js new file mode 100644 index 000000000..001865085 --- /dev/null +++ b/components/lib/props/style/max/properties/width.js @@ -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); +}; + */ diff --git a/components/lib/props/style/min/index.js b/components/lib/props/style/min/index.js new file mode 100644 index 000000000..8a6b4a37e --- /dev/null +++ b/components/lib/props/style/min/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/min/properties/height.js b/components/lib/props/style/min/properties/height.js new file mode 100644 index 000000000..bfee681d6 --- /dev/null +++ b/components/lib/props/style/min/properties/height.js @@ -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); +}; + */ diff --git a/components/lib/props/style/min/properties/width.js b/components/lib/props/style/min/properties/width.js new file mode 100644 index 000000000..8c5f4f6ec --- /dev/null +++ b/components/lib/props/style/min/properties/width.js @@ -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); +}; + */ diff --git a/components/lib/props/style/opacity/index.js b/components/lib/props/style/opacity/index.js new file mode 100644 index 000000000..b3f35fc2b --- /dev/null +++ b/components/lib/props/style/opacity/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/order/index.js b/components/lib/props/style/order/index.js new file mode 100644 index 000000000..865581f02 --- /dev/null +++ b/components/lib/props/style/order/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/outline/index.js b/components/lib/props/style/outline/index.js new file mode 100644 index 000000000..7f135fda8 --- /dev/null +++ b/components/lib/props/style/outline/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/outline/properties/color.js b/components/lib/props/style/outline/properties/color.js new file mode 100644 index 000000000..08d3cbd1a --- /dev/null +++ b/components/lib/props/style/outline/properties/color.js @@ -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); +}; + */ diff --git a/components/lib/props/style/outline/properties/offset.js b/components/lib/props/style/outline/properties/offset.js new file mode 100644 index 000000000..75f289564 --- /dev/null +++ b/components/lib/props/style/outline/properties/offset.js @@ -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); +}; + */ diff --git a/components/lib/props/style/outline/properties/style.js b/components/lib/props/style/outline/properties/style.js new file mode 100644 index 000000000..9c93f69ad --- /dev/null +++ b/components/lib/props/style/outline/properties/style.js @@ -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); +}; + */ diff --git a/components/lib/props/style/outline/properties/width.js b/components/lib/props/style/outline/properties/width.js new file mode 100644 index 000000000..4d6909184 --- /dev/null +++ b/components/lib/props/style/outline/properties/width.js @@ -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); +}; + */ diff --git a/components/lib/props/style/overflow/index.js b/components/lib/props/style/overflow/index.js new file mode 100644 index 000000000..cd3f70c4a --- /dev/null +++ b/components/lib/props/style/overflow/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/overflow/properties/x.js b/components/lib/props/style/overflow/properties/x.js new file mode 100644 index 000000000..e6ea89502 --- /dev/null +++ b/components/lib/props/style/overflow/properties/x.js @@ -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); +}; + */ diff --git a/components/lib/props/style/overflow/properties/y.js b/components/lib/props/style/overflow/properties/y.js new file mode 100644 index 000000000..6495709df --- /dev/null +++ b/components/lib/props/style/overflow/properties/y.js @@ -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); +}; + */ diff --git a/components/lib/props/style/padding/index.js b/components/lib/props/style/padding/index.js new file mode 100644 index 000000000..eaea6ff26 --- /dev/null +++ b/components/lib/props/style/padding/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/padding/modules/x.js b/components/lib/props/style/padding/modules/x.js new file mode 100644 index 000000000..522c3dbc4 --- /dev/null +++ b/components/lib/props/style/padding/modules/x.js @@ -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); +}; + */ diff --git a/components/lib/props/style/padding/modules/y.js b/components/lib/props/style/padding/modules/y.js new file mode 100644 index 000000000..d6180cfad --- /dev/null +++ b/components/lib/props/style/padding/modules/y.js @@ -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); +}; + */ diff --git a/components/lib/props/style/padding/properties/bottom.js b/components/lib/props/style/padding/properties/bottom.js new file mode 100644 index 000000000..d51cad9c0 --- /dev/null +++ b/components/lib/props/style/padding/properties/bottom.js @@ -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); +}; + */ diff --git a/components/lib/props/style/padding/properties/left.js b/components/lib/props/style/padding/properties/left.js new file mode 100644 index 000000000..27f4ed704 --- /dev/null +++ b/components/lib/props/style/padding/properties/left.js @@ -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); +}; + */ diff --git a/components/lib/props/style/padding/properties/right.js b/components/lib/props/style/padding/properties/right.js new file mode 100644 index 000000000..9d39ea9a6 --- /dev/null +++ b/components/lib/props/style/padding/properties/right.js @@ -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); +}; + */ diff --git a/components/lib/props/style/padding/properties/top.js b/components/lib/props/style/padding/properties/top.js new file mode 100644 index 000000000..44a6de088 --- /dev/null +++ b/components/lib/props/style/padding/properties/top.js @@ -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); +}; + */ diff --git a/components/lib/props/style/pointerevents/index.js b/components/lib/props/style/pointerevents/index.js new file mode 100644 index 000000000..9777bcc60 --- /dev/null +++ b/components/lib/props/style/pointerevents/index.js @@ -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); +}; + */ diff --git a/components/lib/props/style/position/index.js b/components/lib/props/style/position/index.js new file mode 100644 index 000000000..dbe5b44c1 --- /dev/null +++ b/components/lib/props/style/position/index.js @@ -0,0 +1,14 @@ +/* const { styleClass } = require('../../utils'); + +module.exports = (root, opts) => { + const position = { + static: 'static', + fixed: 'fixed', + absolute: 'absolute', + relative: 'relative', + sticky: 'sticky' + }; + + styleClass('position', position, root, opts, true); +}; + */ diff --git a/components/lib/props/style/right/index.js b/components/lib/props/style/right/index.js new file mode 100644 index 000000000..df0e33a20 --- /dev/null +++ b/components/lib/props/style/right/index.js @@ -0,0 +1,13 @@ +/* const { styleClass } = require('../../utils'); + +module.exports = (root, opts) => { + const right = { + 'right-auto': 'auto', + 'right-0': '0px', + 'right-50': '50%', + 'right-100': '100%' + }; + + styleClass('right', right, root, opts, true); +}; + */ diff --git a/components/lib/props/style/row/index.js b/components/lib/props/style/row/index.js new file mode 100644 index 000000000..0ee814a5d --- /dev/null +++ b/components/lib/props/style/row/index.js @@ -0,0 +1,7 @@ +/* const gap = require('./properties/gap'); + +module.exports = (root, opts) => { + // properties + gap(root, opts); +}; + */ diff --git a/components/lib/props/style/row/properties/gap.js b/components/lib/props/style/row/properties/gap.js new file mode 100644 index 000000000..2a3fed29b --- /dev/null +++ b/components/lib/props/style/row/properties/gap.js @@ -0,0 +1,13 @@ +/* const { styleClass } = require('../../../utils'); +const { scales } = require('../../base/gap'); + +module.exports = (root, opts) => { + let rowGaps = {}; + + for (let i = 0; i < scales.length; i++) { + rowGaps['row-gap-' + i] = scales[i] + 'rem'; + } + + styleClass('row-gap', rowGaps, root, opts, true); +}; + */ diff --git a/components/lib/props/style/sizing.js b/components/lib/props/style/sizing.js new file mode 100644 index 000000000..dd8e416bf --- /dev/null +++ b/components/lib/props/style/sizing.js @@ -0,0 +1,48 @@ +import { t } from '.'; +import ObjectUtils from '../../utils/ObjectUtils'; + +export const WIDTH_DATA = { + width: t.sizing('width'), + minWidth: t.sizing('minWidth'), + maxWidth: t.sizing('maxWidth'), + w: t.sizing('width'), + minW: t.sizing('minWidth'), + maxW: t.sizing('maxWidth') +}; + +export const HEIGHT_DATA = { + height: t.sizing('height'), + minHeight: t.sizing('minHeight'), + maxHeight: t.sizing('maxHeight'), + h: t.sizing('height'), + minH: t.sizing('minHeight'), + maxH: t.sizing('maxHeight') +}; + +const ALL_DATA = { ...WIDTH_DATA, ...HEIGHT_DATA }; +const ALL_KEYS = Object.keys(ALL_DATA); +const ALL_PROPS = ALL_KEYS.reduce((acc, k) => ((acc[k] = undefined), acc), {}); + +export const SPACING = { + data: ALL_DATA, + keys: ALL_KEYS, + props: ALL_PROPS, + resolver: (value) => { + // @todo + return value; + }, + declarations: (obj = {}) => { + return Object.entries(obj) + .filter(([key]) => ALL_KEYS.includes(key)) + .reduce((acc, [key, value]) => { + if (ObjectUtils.isNotEmpty(value)) { + const rule = ObjectUtils.toKebabCase(key); + + acc.push(ALL_DATA[key].declaration(ObjectUtils.css.getVariableValue(value, rule))); + } + + return acc; + }, []) + .join(''); + } +}; diff --git a/components/lib/props/style/spacing.js b/components/lib/props/style/spacing.js new file mode 100644 index 000000000..7c12365cc --- /dev/null +++ b/components/lib/props/style/spacing.js @@ -0,0 +1,5 @@ +import padding from './padding'; + +export default { + ...padding +}; diff --git a/components/lib/props/style/stroke/index.js b/components/lib/props/style/stroke/index.js new file mode 100644 index 000000000..0708dcfb6 --- /dev/null +++ b/components/lib/props/style/stroke/index.js @@ -0,0 +1,26 @@ +/* const { styleClass } = require('../../utils'); +const { getThemeColors, getWhiteAndBlackRgbaColors } = require('../base/color'); +const width = require('./properties/width'); + +module.exports = (root, opts) => { + const p = opts.prefix.cssVariable; + const stroke = { + 'stroke-none': 'none', + 'stroke-inherit': 'inherit', + 'stroke-current': 'currentColor', + 'stroke-transparent': 'transparent', + 'stroke-white': '#ffffff', + 'stroke-black': '#000000' + }; + + const themes = getThemeColors(opts, 'stroke-', p); + const whiteAndBlackRgba = getWhiteAndBlackRgbaColors('stroke-'); + + styleClass('stroke', stroke, root, opts, true, true); + styleClass('stroke', themes, root, opts, true, true); + styleClass('stroke', whiteAndBlackRgba, root, opts, true, true); + + // properties + width(root, opts); +}; + */ diff --git a/components/lib/props/style/stroke/properties/width.js b/components/lib/props/style/stroke/properties/width.js new file mode 100644 index 000000000..6ae4630f3 --- /dev/null +++ b/components/lib/props/style/stroke/properties/width.js @@ -0,0 +1,12 @@ +/* const { styleClass } = require('../../../utils'); + +module.exports = (root, opts) => { + const strokeWidth = { + 'stroke-0': '0', + 'stroke-1': '1', + 'stroke-2': '2' + }; + + styleClass('stroke-width', strokeWidth, root, opts, true, true); +}; + */ diff --git a/components/lib/props/style/text/index.js b/components/lib/props/style/text/index.js new file mode 100644 index 000000000..cc1b77187 --- /dev/null +++ b/components/lib/props/style/text/index.js @@ -0,0 +1,13 @@ +/* const align = require('./properties/align'); +const decoration = require('./properties/decoration'); +const overflow = require('./properties/overflow'); +const transform = require('./properties/transform'); + +module.exports = (root, opts) => { + // properties + align(root, opts); + decoration(root, opts); + overflow(root, opts); + transform(root, opts); +}; + */ diff --git a/components/lib/props/style/text/properties/align.js b/components/lib/props/style/text/properties/align.js new file mode 100644 index 000000000..dee8667ba --- /dev/null +++ b/components/lib/props/style/text/properties/align.js @@ -0,0 +1,15 @@ +/* const { styleClass } = require('../../../utils'); + +module.exports = (root, opts) => { + const textAligns = { + 'text-center': 'center', + 'text-justify': 'justify', + 'text-left': 'left', + 'text-right': 'right', + 'text-start': 'start', + 'text-end': 'end' + }; + + styleClass('text-align', textAligns, root, opts, true); +}; + */ diff --git a/components/lib/props/style/text/properties/decoration.js b/components/lib/props/style/text/properties/decoration.js new file mode 100644 index 000000000..9a2a5f9e7 --- /dev/null +++ b/components/lib/props/style/text/properties/decoration.js @@ -0,0 +1,12 @@ +/* const { styleClass } = require('../../../utils'); + +module.exports = (root, opts) => { + const textDecorations = { + underline: 'underline', + 'line-through': 'line-through', + 'no-underline': 'none' + }; + + styleClass('text-decoration', textDecorations, root, opts, true, true); +}; + */ diff --git a/components/lib/props/style/text/properties/overflow.js b/components/lib/props/style/text/properties/overflow.js new file mode 100644 index 000000000..4109747cc --- /dev/null +++ b/components/lib/props/style/text/properties/overflow.js @@ -0,0 +1,11 @@ +/* const { styleClass } = require('../../../utils'); + +module.exports = (root, opts) => { + const textOverflows = { + 'text-overflow-clip': 'clip', + 'text-overflow-ellipsis': 'ellipsis' + }; + + styleClass('text-overflow', textOverflows, root, opts, true); +}; + */ diff --git a/components/lib/props/style/text/properties/transform.js b/components/lib/props/style/text/properties/transform.js new file mode 100644 index 000000000..d226f05b6 --- /dev/null +++ b/components/lib/props/style/text/properties/transform.js @@ -0,0 +1,12 @@ +/* const { styleClass } = require('../../../utils'); + +module.exports = (root, opts) => { + const textTransforms = { + lowercase: 'lowercase', + uppercase: 'uppercase', + capitalize: 'capitalize' + }; + + styleClass('text-transform', textTransforms, root, opts, true); +}; + */ diff --git a/components/lib/props/style/top/index.js b/components/lib/props/style/top/index.js new file mode 100644 index 000000000..aa2c83f67 --- /dev/null +++ b/components/lib/props/style/top/index.js @@ -0,0 +1,13 @@ +/* const { styleClass } = require('../../utils'); + +module.exports = (root, opts) => { + const top = { + 'top-auto': 'auto', + 'top-0': '0px', + 'top-50': '50%', + 'top-100': '100%' + }; + + styleClass('top', top, root, opts, true); +}; + */ diff --git a/components/lib/props/style/transform/index.js b/components/lib/props/style/transform/index.js new file mode 100644 index 000000000..e6434c10d --- /dev/null +++ b/components/lib/props/style/transform/index.js @@ -0,0 +1,63 @@ +/* const { styleClass } = require('../../utils'); +const origin = require('./properties/origin'); + +module.exports = (root, opts) => { + const translate = { + 'translate-x-0': 'translateX(0%)', + 'translate-x-100': 'translateX(100%)', + '-translate-x-100': 'translateX(-100%)', + 'translate-y-0': 'translateY(0%)', + 'translate-y-100': 'translateY(100%)', + '-translate-y-100': 'translateY(-100%)' + }; + + const rotate = { + 'rotate-45': 'rotate(45deg)', + '-rotate-45': 'rotate(-45deg)', + 'rotate-90': 'rotate(90deg)', + '-rotate-90': 'rotate(-90deg)', + 'rotate-180': 'rotate(180deg)', + '-rotate-180': 'rotate(-180deg)' + }; + + const scale = { + 'scale-0': 'scale(0)', + 'scale-50': 'scale(0.5)', + 'scale-75': 'scale(0.75)', + 'scale-90': 'scale(0.9)', + 'scale-95': 'scale(0.95)', + 'scale-100': 'scale(1)', + 'scale-105': 'scale(1.05)', + 'scale-110': 'scale(1.1)', + 'scale-125': 'scale(1.25)', + 'scale-150': 'scale(1.5)', + 'scale-x-0': 'scaleX(0)', + 'scale-x-50': 'scaleX(0.5)', + 'scale-x-75': 'scaleX(0.75)', + 'scale-x-90': 'scaleX(0.9)', + 'scale-x-95': 'scaleX(0.95)', + 'scale-x-100': 'scaleX(1)', + 'scale-x-105': 'scaleX(1.05)', + 'scale-x-110': 'scaleX(1.1)', + 'scale-x-125': 'scaleX(1.25)', + 'scale-x-150': 'scaleX(1.5)', + 'scale-y-0': 'scaleY(0)', + 'scale-y-50': 'scaleY(0.5)', + 'scale-y-75': 'scaleY(0.75)', + 'scale-y-90': 'scaleY(0.9)', + 'scale-y-95': 'scaleY(0.95)', + 'scale-y-100': 'scaleY(1)', + 'scale-y-105': 'scaleY(1.05)', + 'scale-y-110': 'scaleY(1.1)', + 'scale-y-125': 'scaleY(1.25)', + 'scale-y-150': 'scaleY(1.5)' + }; + + styleClass('transform', translate, root, opts, true, true); + styleClass('transform', rotate, root, opts, true, true); + styleClass('transform', scale, root, opts, true, true); + + // properties + origin(root, opts); +}; + */ diff --git a/components/lib/props/style/transform/properties/origin.js b/components/lib/props/style/transform/properties/origin.js new file mode 100644 index 000000000..ea9714bf9 --- /dev/null +++ b/components/lib/props/style/transform/properties/origin.js @@ -0,0 +1,18 @@ +/* const { styleClass } = require('../../../utils'); + +module.exports = (root, opts) => { + const transformOrigin = { + 'origin-center': 'center', + 'origin-top': 'top', + 'origin-top-right': 'top right', + 'origin-right': 'right', + 'origin-bottom-right': 'bottom right', + 'origin-bottom': 'bottom', + 'origin-bottom-left': 'bottom left', + 'origin-left': 'left', + 'origin-top-left': 'top-left' + }; + + styleClass('transform-origin', transformOrigin, root, opts, true, true); +}; + */ diff --git a/components/lib/props/style/transition/index.js b/components/lib/props/style/transition/index.js new file mode 100644 index 000000000..5d971e27d --- /dev/null +++ b/components/lib/props/style/transition/index.js @@ -0,0 +1,13 @@ +/* const delay = require('./properties/delay'); +const duration = require('./properties/duration'); +const property = require('./properties/property'); +const timing_function = require('./properties/timing_function'); + +module.exports = (root, opts) => { + // properties + delay(root, opts); + duration(root, opts); + property(root, opts); + timing_function(root, opts); +}; + */ diff --git a/components/lib/props/style/transition/properties/delay.js b/components/lib/props/style/transition/properties/delay.js new file mode 100644 index 000000000..9550593bd --- /dev/null +++ b/components/lib/props/style/transition/properties/delay.js @@ -0,0 +1,16 @@ +/* const { styleClass } = require('../../../utils'); + +module.exports = (root, opts) => { + const transitionDelay = { + 'transition-delay-100': '100ms', + 'transition-delay-150': '150ms', + 'transition-delay-200': '200ms', + 'transition-delay-300': '300ms', + 'transition-delay-400': '400ms', + 'transition-delay-500': '500ms', + 'transition-delay-1000': '1000ms' + }; + + styleClass('transition-delay', transitionDelay, root, opts); +}; + */ diff --git a/components/lib/props/style/transition/properties/duration.js b/components/lib/props/style/transition/properties/duration.js new file mode 100644 index 000000000..41aec8c47 --- /dev/null +++ b/components/lib/props/style/transition/properties/duration.js @@ -0,0 +1,18 @@ +/* const { styleClass } = require('../../../utils'); + +module.exports = (root, opts) => { + const transitionDuration = { + 'transition-duration-100': '100ms', + 'transition-duration-150': '150ms', + 'transition-duration-200': '200ms', + 'transition-duration-300': '300ms', + 'transition-duration-400': '400ms', + 'transition-duration-500': '500ms', + 'transition-duration-1000': '1000ms', + 'transition-duration-2000': '2000ms', + 'transition-duration-3000': '3000ms' + }; + + styleClass('transition-duration', transitionDuration, root, opts); +}; + */ diff --git a/components/lib/props/style/transition/properties/property.js b/components/lib/props/style/transition/properties/property.js new file mode 100644 index 000000000..9f0fdf3b3 --- /dev/null +++ b/components/lib/props/style/transition/properties/property.js @@ -0,0 +1,13 @@ +/* const { styleClass } = require('../../../utils'); + +module.exports = (root, opts) => { + const transitionProperty = { + 'transition-none': 'none', + 'transition-all': 'all', + 'transition-colors': 'background-color,border-color,color', + 'transition-transform': 'transform' + }; + + styleClass('transition-property', transitionProperty, root, opts); +}; + */ diff --git a/components/lib/props/style/transition/properties/timing_function.js b/components/lib/props/style/transition/properties/timing_function.js new file mode 100644 index 000000000..8e48859f5 --- /dev/null +++ b/components/lib/props/style/transition/properties/timing_function.js @@ -0,0 +1,13 @@ +/* const { styleClass } = require('../../../utils'); + +module.exports = (root, opts) => { + const transitionTiming = { + 'transition-linear': 'linear', + 'transition-ease-in': 'cubic-bezier(0.4, 0, 1, 1)', + 'transition-ease-out': 'cubic-bezier(0, 0, 0.2, 1)', + 'transition-ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)' + }; + + styleClass('transition-timing-function', transitionTiming, root, opts); +}; + */ diff --git a/components/lib/props/style/typography.js b/components/lib/props/style/typography.js new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/props/style/userselect/index.js b/components/lib/props/style/userselect/index.js new file mode 100644 index 000000000..f27b909bb --- /dev/null +++ b/components/lib/props/style/userselect/index.js @@ -0,0 +1,13 @@ +/* const { styleClass } = require('../../utils'); + +module.exports = (root, opts) => { + const userSelect = { + 'select-none': 'none', + 'select-text': 'text', + 'select-all': 'all', + 'select-auto': 'auto' + }; + + styleClass('user-select', userSelect, root, opts); +}; + */ diff --git a/components/lib/props/style/verticalalign/index.js b/components/lib/props/style/verticalalign/index.js new file mode 100644 index 000000000..54951cbb0 --- /dev/null +++ b/components/lib/props/style/verticalalign/index.js @@ -0,0 +1,17 @@ +/* const { styleClass } = require('../../utils'); + +module.exports = (root, opts) => { + const verticalAligns = { + 'vertical-align-baseline': 'baseline', + 'vertical-align-top': 'top', + 'vertical-align-middle': 'middle', + 'vertical-align-bottom': 'bottom', + 'vertical-align-text-top': 'text-top', + 'vertical-align-text-bottom': 'text-bottom', + 'vertical-align-sub': 'sub', + 'vertical-align-super': 'super' + }; + + styleClass('vertical-align', verticalAligns, root, opts, true); +}; + */ diff --git a/components/lib/props/style/whitespace/index.js b/components/lib/props/style/whitespace/index.js new file mode 100644 index 000000000..2cd31b270 --- /dev/null +++ b/components/lib/props/style/whitespace/index.js @@ -0,0 +1,11 @@ +/* const { styleClass } = require('../../utils'); + +module.exports = (root, opts) => { + const whiteSpaces = { + 'white-space-normal': 'normal', + 'white-space-nowrap': 'nowrap' + }; + + styleClass('white-space', whiteSpaces, root, opts, true); +}; + */ diff --git a/components/lib/props/style/width/index.js b/components/lib/props/style/width/index.js new file mode 100644 index 000000000..56a16ee8c --- /dev/null +++ b/components/lib/props/style/width/index.js @@ -0,0 +1,30 @@ +/* const { styleClass } = require('../../utils'); +const { addFixedSize } = require('../base/size'); + +module.exports = (root, opts) => { + let widths = { + 'w-full': '100%', + 'w-screen': '100vw', + 'w-auto': 'auto', + 'w-min': 'min-content', + 'w-max': 'max-content', + 'w-fit': 'fit-content', + 'w-1': '8.3333%', + 'w-2': '16.6667%', + 'w-3': '25%', + 'w-4': '33.3333%', + 'w-5': '41.6667%', + 'w-6': '50%', + 'w-7': '58.3333%', + 'w-8': '66.6667%', + 'w-9': '75%', + 'w-10': '83.3333%', + 'w-11': '91.6667%', + 'w-12': '100%' + }; + + addFixedSize(widths, 'w-', opts); + + styleClass('width', widths, root, opts, true); +}; + */ diff --git a/components/lib/props/style/zindex/index.js b/components/lib/props/style/zindex/index.js new file mode 100644 index 000000000..7595f7137 --- /dev/null +++ b/components/lib/props/style/zindex/index.js @@ -0,0 +1,16 @@ +/* const { styleClass } = require('../../utils'); + +module.exports = (root, opts) => { + const zIndex = { + 'z-auto': 'auto', + 'z-0': '0', + 'z-1': '1', + 'z-2': '2', + 'z-3': '3', + 'z-4': '4', + 'z-5': '5' + }; + + styleClass('z-index', zIndex, root, opts, true); +}; + */ diff --git a/components/lib/text/BaseText.vue b/components/lib/text/BaseText.vue new file mode 100644 index 000000000..6a27fbf79 --- /dev/null +++ b/components/lib/text/BaseText.vue @@ -0,0 +1,26 @@ + diff --git a/components/lib/text/Text.d.ts b/components/lib/text/Text.d.ts new file mode 100755 index 000000000..9f43dad86 --- /dev/null +++ b/components/lib/text/Text.d.ts @@ -0,0 +1,163 @@ +/** + * + * Textarea is a multi-line text input element. + * + * [Live Demo](https://www.primevue.org/textarea/) + * + * @module textarea + * + */ +import { TextareaHTMLAttributes } from 'vue'; +import { ComponentHooks } from '../basecomponent/BaseComponent'; +import { PassThroughOptions } from '../passthrough'; +import { ClassComponent, GlobalComponentConstructor, Nullable, PassThrough } from '../ts-helpers'; + +export declare type TextareaPassThroughOptionType = TextareaPassThroughAttributes | ((options: TextareaPassThroughMethodOptions) => TextareaPassThroughAttributes | string) | string | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface TextareaPassThroughMethodOptions { + /** + * Defines instance. + */ + instance: any; + /** + * Defines valid properties. + */ + props: TextareaProps; + /** + * Defines current options. + */ + context: TextareaContext; + /** + * Defines valid attributes. + */ + attrs: any; + /** + * Defines parent options. + */ + parent: any; + /** + * Defines passthrough(pt) options in global config. + */ + global: object | undefined; +} + +/** + * Custom passthrough(pt) options. + * @see {@link TextareaProps.pt} + */ +export interface TextareaPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: TextareaPassThroughOptionType; + /** + * Used to manage all lifecycle hooks. + * @see {@link BaseComponent.ComponentHooks} + */ + hooks?: ComponentHooks; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface TextareaPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines current options in Textarea component. + */ +export interface TextareaContext { + /** + * Current filled state of the component as a boolean. + * @defaultValue false + */ + filled: boolean; + /** + * Current disabled state of the component as a boolean. + * @defaultValue false + */ + disabled: boolean; +} + +/** + * Defines valid properties in Textarea component. In addition to these, all properties of TextareaHTMLAttributes can be used in this component. + * @extends TextareaHTMLAttributes + */ +export interface TextareaProps extends TextareaHTMLAttributes { + /** + * Value of the component. + */ + modelValue?: Nullable; + /** + * When present, height of textarea changes as being typed. + * @defaultValue false + */ + autoResize?: boolean | undefined; + /** + * When present, it specifies that the component should have invalid state style. + * @defaultValue false + */ + invalid?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; + /** + * Used to pass attributes to DOM elements inside the component. + * @type {TextareaPassThroughOptions} + */ + pt?: PassThrough; + /** + * Used to configure passthrough(pt) options of the component. + * @type {PassThroughOptions} + */ + ptOptions?: PassThroughOptions; + /** + * When enabled, it removes component related styles in the core. + * @defaultValue false + */ + unstyled?: boolean; +} + +/** + * Defines valid slots in Textarea component. + */ +export interface TextareaSlots {} + +/** + * Defines valid emits in Textarea component. + */ +export interface TextareaEmits { + /** + * Emitted when the value changes. + * @param {string} value - New value. + */ + 'update:modelValue': (value: string) => void; +} + +/** + * **PrimeVue - Textarea** + * + * _Textarea is a multi-line text input element._ + * + * [Live Demo](https://www.primevue.org/textarea/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group Component + * + */ +declare class Textarea extends ClassComponent {} + +declare module '@vue/runtime-core' { + interface GlobalComponents { + Textarea: GlobalComponentConstructor