comments and cleanup
This commit is contained in:
parent
1af8ca29f3
commit
9ec61d0f0a
@ -21,17 +21,20 @@ const hoverGlow = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Button',
|
name: 'Button', // Name of the component
|
||||||
selector: '.button',
|
selector: '.button', // CSS selector/prefix
|
||||||
|
// States, system witll calculate ALL possible combinations of those and append a "normal" to them + standalone "normal" state
|
||||||
states: {
|
states: {
|
||||||
|
// normal: state is implicitly added
|
||||||
disabled: ':disabled',
|
disabled: ':disabled',
|
||||||
toggled: '.toggled',
|
toggled: '.toggled',
|
||||||
pressed: ':active',
|
pressed: ':active',
|
||||||
hover: ':hover',
|
hover: ':hover',
|
||||||
focused: ':focus-within'
|
focused: ':focus-within'
|
||||||
},
|
},
|
||||||
|
// Variants are mutually exclusive, which saves on computation time
|
||||||
variants: {
|
variants: {
|
||||||
normal: '-default',
|
normal: '-default', // you can override normal variant
|
||||||
danger: '.danger',
|
danger: '.danger',
|
||||||
unstyled: '-unstyled'
|
unstyled: '-unstyled'
|
||||||
},
|
},
|
||||||
|
@ -20,6 +20,8 @@ import Text from 'src/components/text.style.js'
|
|||||||
import Link from 'src/components/link.style.js'
|
import Link from 'src/components/link.style.js'
|
||||||
import Icon from 'src/components/icon.style.js'
|
import Icon from 'src/components/icon.style.js'
|
||||||
|
|
||||||
|
const DEBUG = false
|
||||||
|
|
||||||
export const DEFAULT_SHADOWS = {
|
export const DEFAULT_SHADOWS = {
|
||||||
panel: [{
|
panel: [{
|
||||||
x: 1,
|
x: 1,
|
||||||
@ -150,11 +152,11 @@ const combinationsMatch = (criteria, subject, strict) => {
|
|||||||
if (criteria.variant !== subject.variant) return false
|
if (criteria.variant !== subject.variant) return false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Subject states > 1 essentially means state is "normal" and therefore matches
|
||||||
|
if (subject.state.length > 1 || strict) {
|
||||||
const subjectStatesSet = new Set(subject.state)
|
const subjectStatesSet = new Set(subject.state)
|
||||||
const criteriaStatesSet = new Set(criteria.state)
|
const criteriaStatesSet = new Set(criteria.state)
|
||||||
|
|
||||||
// Subject states > 1 essentially means state is "normal" and therefore matches
|
|
||||||
if (subjectStatesSet.size > 1 || strict) {
|
|
||||||
const setsAreEqual =
|
const setsAreEqual =
|
||||||
[...criteriaStatesSet].every(state => subjectStatesSet.has(state)) &&
|
[...criteriaStatesSet].every(state => subjectStatesSet.has(state)) &&
|
||||||
[...subjectStatesSet].every(state => criteriaStatesSet.has(state))
|
[...subjectStatesSet].every(state => criteriaStatesSet.has(state))
|
||||||
@ -448,6 +450,7 @@ export const init = (extraRuleset, palette) => {
|
|||||||
computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw
|
computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw
|
||||||
|
|
||||||
// Debug: lets you see what it think background color should be
|
// Debug: lets you see what it think background color should be
|
||||||
|
if (!DEBUG) return
|
||||||
|
|
||||||
const directives = {
|
const directives = {
|
||||||
textColor,
|
textColor,
|
||||||
@ -456,9 +459,10 @@ export const init = (extraRuleset, palette) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
addRule({
|
addRule({
|
||||||
parent,
|
selector,
|
||||||
virtual: true,
|
virtual: true,
|
||||||
component: component.name,
|
component: component.name,
|
||||||
|
parent,
|
||||||
...combination,
|
...combination,
|
||||||
directives,
|
directives,
|
||||||
virtualDirectives,
|
virtualDirectives,
|
||||||
@ -503,6 +507,7 @@ export const init = (extraRuleset, palette) => {
|
|||||||
computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
|
computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
|
||||||
|
|
||||||
addRule({
|
addRule({
|
||||||
|
selector,
|
||||||
component: component.name,
|
component: component.name,
|
||||||
...combination,
|
...combination,
|
||||||
parent,
|
parent,
|
||||||
@ -531,9 +536,7 @@ export const init = (extraRuleset, palette) => {
|
|||||||
return {
|
return {
|
||||||
raw: rules,
|
raw: rules,
|
||||||
css: rules.map(rule => {
|
css: rules.map(rule => {
|
||||||
if (rule.virtual) return ''
|
let selector = rule.selector
|
||||||
|
|
||||||
let selector = ruleToSelector(rule).replace(/\/\*.*\*\//g, '')
|
|
||||||
if (!selector) {
|
if (!selector) {
|
||||||
selector = 'body'
|
selector = 'body'
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user