comments and cleanup

This commit is contained in:
Henry Jameson 2024-02-09 19:37:22 +02:00
parent 1af8ca29f3
commit 9ec61d0f0a
2 changed files with 17 additions and 11 deletions

View File

@ -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'
}, },

View File

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