commit: 53a4b1f9a6a9aa6bc044609c3accb074d924daf9
parent ff2db7a247284cb32933b83c56286a942923a398
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 31 Jan 2024 17:39:51 +0200
better virtual components and stuff
Diffstat:
17 files changed, 353 insertions(+), 136 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -24,8 +24,7 @@ body {
font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif);
margin: 0;
- color: $fallback--text;
- color: var(--text, $fallback--text);
+ color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overscroll-behavior-y: none;
@@ -111,8 +110,7 @@ body {
a {
text-decoration: none;
- color: $fallback--link;
- color: var(--link, $fallback--link);
+ color: var(--link);
}
h4 {
@@ -128,8 +126,7 @@ h4 {
i[class*="icon-"],
.svg-inline--fa,
.iconLetter {
- color: $fallback--icon;
- color: var(--icon, $fallback--icon);
+ color: var(--icon);
}
.button-unstyled:hover,
@@ -763,17 +760,11 @@ option {
}
.faint {
- color: $fallback--faint;
- color: var(--faint, $fallback--faint);
-}
-
-.faint-link {
- color: $fallback--faint;
- color: var(--faint, $fallback--faint);
+ --text: var(--textFaint);
+ --textGreentext: var(--textGreentextFaint);
+ --link: var(--linkFaint);
- &:hover {
- text-decoration: underline;
- }
+ color: var(--text);
}
.visibility-notice {
@@ -816,6 +807,11 @@ option {
opacity: 0.25;
}
+.timeago {
+ --link: var(--text);
+ --linkFaint: var(--textFaint);
+}
+
.login-hint {
text-align: center;
diff --git a/src/components/icon.style.js b/src/components/icon.style.js
@@ -1,4 +1,15 @@
export default {
name: 'Icon',
- selector: '.icon'
+ virtual: true,
+ selector: '.svg-inline--fa',
+ defaultRules: [
+ {
+ component: 'Icon',
+ directives: {
+ textColor: '--text',
+ textOpacity: 0.5,
+ textOpacityMode: 'mixrgb'
+ }
+ }
+ ]
}
diff --git a/src/components/link.style.js b/src/components/link.style.js
@@ -0,0 +1,25 @@
+export default {
+ name: 'Link',
+ selector: 'a',
+ virtual: true,
+ states: {
+ faint: '.faint'
+ },
+ defaultRules: [
+ {
+ component: 'Link',
+ directives: {
+ textColor: '--link'
+ }
+ },
+ {
+ component: 'Link',
+ state: ['faint'],
+ directives: {
+ textColor: '--link',
+ textOpacity: 0.5,
+ textOpacityMode: 'fake'
+ }
+ }
+ ]
+}
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
@@ -155,7 +155,7 @@
<router-link
v-if="notification.status"
:to="{ name: 'conversation', params: { id: notification.status.id } }"
- class="timeago-link faint-link"
+ class="timeago-link faint"
>
<Timeago
:time="notification.created_at"
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
@@ -7,8 +7,7 @@
}
.loadmore-error {
- color: $fallback--text;
- color: var(--text, $fallback--text);
+ color: var(--text);
}
.notification {
@@ -25,7 +24,7 @@
&.unseen {
.notification-overlay {
- background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px);
+ background-image: linear-gradient(135deg, var(--badgeNotification) 4px, transparent 10px);
}
}
}
@@ -60,24 +59,17 @@
width: 32px;
height: 32px;
}
-
- .faint {
- --link: var(--faintLink);
- --text: var(--faint);
- }
}
.follow-request-accept {
&:hover {
- color: $fallback--text;
- color: var(--text, $fallback--text);
+ color: var(--text);
}
}
.follow-request-reject {
&:hover {
- color: $fallback--cRed;
- color: var(--cRed, $fallback--cRed);
+ color: var(--cRed);
}
}
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
@@ -3,6 +3,7 @@ export default {
selector: '.panel',
validInnerComponents: [
'Text',
+ 'Link',
'Icon',
'Button',
'PanelHeader'
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
@@ -3,6 +3,7 @@ export default {
selector: '.panel-heading',
validInnerComponents: [
'Text',
+ 'Link',
'Icon',
'Button'
]
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -180,7 +180,7 @@
<span class="heading-right">
<router-link
- class="timeago faint-link"
+ class="timeago faint"
:to="{ name: 'conversation', params: { id: status.id } }"
>
<Timeago
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
@@ -113,12 +113,11 @@
}
.greentext {
- color: $fallback--cGreen;
- color: var(--postGreentext, $fallback--cGreen);
+ color: var(--textGreentext);
}
.cyantext {
- color: var(--postCyantext, $fallback--cBlue);
+ color: var(--textCyantext);
}
&.-compact {
diff --git a/src/components/text.style.js b/src/components/text.style.js
@@ -1,7 +1,43 @@
export default {
name: 'Text',
selector: '/*text*/',
+ virtual: true,
+ variants: {
+ greentext: '.greentext'
+ },
states: {
faint: '.faint'
- }
+ },
+ defaultRules: [
+ {
+ component: 'Text',
+ directives: {
+ textColor: '--text'
+ }
+ },
+ {
+ component: 'Text',
+ state: ['faint'],
+ directives: {
+ textColor: '--text',
+ textOpacity: 0.5
+ }
+ },
+ {
+ component: 'Text',
+ variant: 'greentext',
+ directives: {
+ textColor: '--cGreen'
+ }
+ },
+ {
+ component: 'Text',
+ variant: 'greentext',
+ state: ['faint'],
+ directives: {
+ textColor: '--cGreen',
+ textOpacity: 0.5
+ }
+ }
+ ]
}
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
@@ -1,6 +1,7 @@
export default {
name: 'Underlay',
- selector: '#app',
+ selector: '#content',
+ outOfTreeSelector: '.underlay',
validInnerComponents: [
'Panel'
]
diff --git a/src/panel.scss b/src/panel.scss
@@ -143,12 +143,6 @@
box-shadow: var(--panelHeaderShadow);
}
- a,
- .-link {
- color: $fallback--link;
- color: var(--panelLink, $fallback--link);
- }
-
.button-unstyled:hover,
a:hover {
i[class*="icon-"],
@@ -164,11 +158,6 @@
color: var(--panelFaint, $fallback--faint);
}
- .faint-link {
- color: $fallback--faint;
- color: var(--faintLink, $fallback--faint);
- }
-
&:not(.-flexible-height) {
> .button-default {
flex-shrink: 0;
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
@@ -173,7 +173,7 @@ export const mixrgb = (a, b) => {
* @returns {String} CSS rgba() color
*/
export const rgba2css = function (rgba) {
- return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, ${rgba.a})`
+ return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, ${rgba.a ?? 1})`
}
/**
@@ -188,7 +188,6 @@ export const rgba2css = function (rgba) {
*/
export const getTextColor = function (bg, text, preserve) {
const contrast = getContrastRatio(bg, text)
- console.log(contrast)
if (contrast < 4.5) {
const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
@@ -1,10 +1,15 @@
import { convert } from 'chromatism'
import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
+import { init } from '../theme_data/theme_data_3.service.js'
+import {
+ sampleRules
+} from 'src/services/theme_data/pleromafe.t3.js'
import { defaultState } from '../../modules/config.js'
export const applyTheme = (input) => {
- const { rules } = generatePreset(input)
+ const { rules, t3b } = generatePreset(input)
+ const themes3 = init(sampleRules, t3b)
const head = document.head
const body = document.body
body.classList.add('hidden')
@@ -18,6 +23,10 @@ export const applyTheme = (input) => {
styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
+ themes3.css.forEach(rule => {
+ console.log(rule)
+ styleSheet.insertRule(rule, 'index-max')
+ })
body.classList.remove('hidden')
}
@@ -326,7 +335,7 @@ export const generateShadows = (input, colors) => {
}
}
-export const composePreset = (colors, radii, shadows, fonts) => {
+export const composePreset = (colors, radii, shadows, fonts, t3b) => {
return {
rules: {
...shadows.rules,
@@ -339,7 +348,8 @@ export const composePreset = (colors, radii, shadows, fonts) => {
...colors.theme,
...radii.theme,
...fonts.theme
- }
+ },
+ t3b
}
}
@@ -349,7 +359,8 @@ export const generatePreset = (input) => {
colors,
generateRadii(input),
generateShadows(input, colors.theme.colors, colors.mod),
- generateFonts(input)
+ generateFonts(input),
+ colors.theme.colors
)
}
diff --git a/src/services/theme_data/pleromafe.t3.js b/src/services/theme_data/pleromafe.t3.js
@@ -11,30 +11,30 @@ export const sampleRules = [
{
component: 'Panel',
directives: {
- background: '#FFFFFF',
- opacity: 0.9
+ background: '--fg'
+ // opacity: 0.9
}
},
{
component: 'PanelHeader',
directives: {
- background: '#000000',
- opacity: 0.9
+ background: '--fg'
+ // opacity: 0.9
}
},
{
component: 'Button',
directives: {
- background: '#000000',
- opacity: 0.8
+ background: '--fg'
+ // opacity: 0.8
}
},
{
component: 'Button',
state: ['hover'],
directives: {
- background: '#FF00FF',
- opacity: 0.9
+ background: '#FFFFFF'
+ // opacity: 0.9
}
}
]
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
@@ -1,11 +1,12 @@
import { convert } from 'chromatism'
-import { alphaBlend, getTextColor, rgba2css } from '../color_convert/color_convert.js'
+import { alphaBlend, getTextColor, rgba2css, mixrgb } from '../color_convert/color_convert.js'
import Underlay from 'src/components/underlay.style.js'
import Panel from 'src/components/panel.style.js'
import PanelHeader from 'src/components/panel_header.style.js'
import Button from 'src/components/button.style.js'
import Text from 'src/components/text.style.js'
+import Link from 'src/components/link.style.js'
import Icon from 'src/components/icon.style.js'
const root = Underlay
@@ -15,6 +16,7 @@ const components = {
PanelHeader,
Button,
Text,
+ Link,
Icon
}
@@ -35,9 +37,9 @@ export const getAllPossibleCombinations = (array) => {
return combos.reduce((acc, x) => [...acc, ...x], [])
}
-export const ruleToSelector = (rule) => {
+export const ruleToSelector = (rule, isParent) => {
const component = components[rule.component]
- const { states, variants, selector } = component
+ const { states, variants, selector, outOfTreeSelector } = component
const applicableStates = ((rule.state || []).filter(x => x !== 'normal')).map(state => states[state])
@@ -47,56 +49,104 @@ export const ruleToSelector = (rule) => {
applicableVariant = variants[applicableVariantName]
}
- const selectors = [selector, applicableVariant, ...applicableStates]
+ let realSelector
+ if (isParent) {
+ realSelector = selector
+ } else {
+ if (outOfTreeSelector) realSelector = outOfTreeSelector
+ else realSelector = selector
+ }
+
+ const selectors = [realSelector, applicableVariant, ...applicableStates]
.toSorted((a, b) => {
if (a.startsWith(':')) return 1
- else return -1
+ if (!a.startsWith('.')) return -1
+ else return 0
})
.join('')
if (rule.parent) {
- return ruleToSelector(rule.parent) + ' ' + selectors
+ return ruleToSelector(rule.parent, true) + ' ' + selectors
}
return selectors
}
-export const init = (ruleset) => {
+export const init = (extraRuleset, palette) => {
const rootName = root.name
const rules = []
const rulesByComponent = {}
+ const ruleset = [
+ ...Object.values(components).map(c => c.defaultRules || []).reduce((acc, arr) => [...acc, ...arr], []),
+ ...extraRuleset
+ ]
+
const addRule = (rule) => {
rules.push(rule)
rulesByComponent[rule.component] = rulesByComponent[rule.component] || []
rulesByComponent[rule.component].push(rule)
}
- const findRules = (combination) => rule => {
- if (combination.component !== rule.component) return false
- if (Object.prototype.hasOwnProperty.call(rule, 'variant')) {
- if (combination.variant !== rule.variant) return false
- } else {
- if (combination.variant !== 'normal') return false
+ const findRules = (combination, parent) => rule => {
+ // inexact search
+ const doesCombinationMatch = () => {
+ if (combination.component !== rule.component) return false
+ if (Object.prototype.hasOwnProperty.call(rule, 'variant')) {
+ if (combination.variant !== rule.variant) return false
+ } else {
+ if (combination.variant !== 'normal') return false
+ }
+
+ if (Object.prototype.hasOwnProperty.call(rule, 'state')) {
+ const ruleStatesSet = new Set(['normal', ...(rule.state || [])])
+ const combinationSet = new Set(['normal', ...combination.state])
+ const setsAreEqual = combination.state.every(state => ruleStatesSet.has(state)) &&
+ [...ruleStatesSet].every(state => combinationSet.has(state))
+ return setsAreEqual
+ } else {
+ if (combination.state.length !== 1 || combination.state[0] !== 'normal') return false
+ return true
+ }
}
+ const combinationMatches = doesCombinationMatch()
+ if (!parent || !combinationMatches) return combinationMatches
- if (Object.prototype.hasOwnProperty.call(rule, 'state')) {
- const ruleStatesSet = new Set(['normal', ...(rule.state || [])])
- const combinationSet = new Set(['normal', ...combination.state])
- const setsAreEqual = combination.state.every(state => ruleStatesSet.has(state)) &&
- [...ruleStatesSet].every(state => combinationSet.has(state))
- return setsAreEqual
- } else {
- if (combination.state.length !== 1 || combination.state[0] !== 'normal') return false
- return true
+ // exact search
+
+ // unroll parents into array
+ const unroll = (item) => {
+ const out = []
+ let currentParent = item.parent
+ while (currentParent) {
+ const { parent: newParent, ...rest } = currentParent
+ out.push(rest)
+ currentParent = newParent
+ }
+ return out
}
+ const { parent: _, ...rest } = parent
+ const pathSearch = [rest, ...unroll(parent)]
+ const pathRule = unroll(rule)
+ if (pathSearch.length !== pathRule.length) return false
+ const pathsMatch = pathSearch.every((searchRule, i) => {
+ const existingRule = pathRule[i]
+ if (existingRule.component !== searchRule.component) return false
+ if (existingRule.variant !== searchRule.variant) return false
+ const existingRuleStatesSet = new Set(['normal', ...(existingRule.state || [])])
+ const searchStatesSet = new Set(['normal', ...(searchRule.state || [])])
+ const setsAreEqual = existingRule.state.every(state => searchStatesSet.has(state)) &&
+ [...searchStatesSet].every(state => existingRuleStatesSet.has(state))
+ return setsAreEqual
+ })
+ return pathsMatch
}
const findLowerLevelRule = (parent, filter = () => true) => {
let lowerLevelComponent = null
let currentParent = parent
while (currentParent) {
- const rulesParent = ruleset.filter(findRules(currentParent, true))
- rulesParent > 1 && console.log('OOPS')
+ const rulesParent = ruleset.filter(findRules(currentParent))
+ rulesParent > 1 && console.warn('OOPS')
lowerLevelComponent = rulesParent[rulesParent.length - 1]
currentParent = currentParent.parent
if (lowerLevelComponent && filter(lowerLevelComponent)) currentParent = null
@@ -104,6 +154,35 @@ export const init = (ruleset) => {
return filter(lowerLevelComponent) ? lowerLevelComponent : null
}
+ const findColor = (color) => {
+ if (typeof color === 'string' && color.startsWith('--')) {
+ const name = color.substring(2)
+ return palette[name]
+ }
+ return color
+ }
+
+ const getTextColorAlpha = (rule, lowerRule, value) => {
+ const opacity = rule.directives.textOpacity
+ const textColor = convert(findColor(value)).rgb
+ if (opacity === null || opacity === undefined || opacity >= 1) {
+ return convert(textColor).hex
+ }
+ const backgroundColor = convert(lowerRule.cache.background).rgb
+ if (opacity === 0) {
+ return convert(backgroundColor).hex
+ }
+ const opacityMode = rule.directives.textOpacityMode
+ switch (opacityMode) {
+ case 'fake':
+ return convert(alphaBlend(textColor, opacity, backgroundColor)).hex
+ case 'mixrgb':
+ return convert(mixrgb(backgroundColor, textColor)).hex
+ default:
+ return rgba2css({ a: opacity, ...textColor })
+ }
+ }
+
const processInnerComponent = (component, parent) => {
const {
validInnerComponents = [],
@@ -124,79 +203,156 @@ export const init = (ruleset) => {
const VIRTUAL_COMPONENTS = new Set(['Text', 'Link', 'Icon'])
stateVariantCombination.forEach(combination => {
- const existingRules = ruleset.filter(findRules({ component: component.name, ...combination }))
- const lastRule = existingRules[existingRules.length - 1]
+ let needRuleAdd = false
- if (existingRules.length !== 0) {
- const { directives } = lastRule
- const rgb = convert(directives.background).rgb
+ if (VIRTUAL_COMPONENTS.has(component.name)) {
+ const selector = component.name + ruleToSelector({ component: component.name, ...combination })
+ const virtualName = [
+ '--',
+ component.name.toLowerCase(),
+ combination.variant === 'normal'
+ ? ''
+ : combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
+ ...combination.state.filter(x => x !== 'normal').toSorted().map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
+ ].join('')
- // TODO: DEFAULT TEXT COLOR
- const bg = findLowerLevelRule(parent)?.cache.background || convert('#FFFFFF').rgb
+ const lowerLevel = findLowerLevelRule(parent, (r) => {
+ if (components[r.component].validInnerComponents.indexOf(component.name) < 0) return false
+ if (r.cache.background === undefined) return false
+ if (r.cache.textDefined) {
+ return !r.cache.textDefined[selector]
+ }
+ return true
+ })
- if (!lastRule.cache?.background) {
- const blend = directives.opacity < 1 ? alphaBlend(rgb, directives.opacity, bg) : rgb
- lastRule.cache = lastRule.cache || {}
- lastRule.cache.background = blend
+ if (!lowerLevel) return
+
+ let inheritedTextColorRule
+ const inheritedTextColorRules = findLowerLevelRule(parent, (r) => {
+ return r.cache?.textDefined?.[selector]
+ })
+
+ if (!inheritedTextColorRule) {
+ const generalTextColorRules = ruleset.filter(findRules({ component: component.name, ...combination }, null, true))
+ inheritedTextColorRule = generalTextColorRules[generalTextColorRules.length - 1]
+ } else {
+ inheritedTextColorRule = inheritedTextColorRules[inheritedTextColorRules.length - 1]
+ }
- addRule(lastRule)
+ let inheritedTextColor
+ let inheritedTextOpacity = {}
+ if (inheritedTextColorRule) {
+ inheritedTextColor = findColor(inheritedTextColorRule.directives.textColor)
+ // also inherit opacity settings
+ const { textOpacity, textOpacityMode } = inheritedTextColorRule.directives
+ inheritedTextOpacity = { textOpacity, textOpacityMode }
+ } else {
+ // Emergency fallback
+ inheritedTextColor = '#000000'
}
+
+ const textColor = getTextColor(
+ convert(lowerLevel.cache.background).rgb,
+ convert(inheritedTextColor).rgb,
+ component.name === 'Link' // make it configurable?
+ )
+
+ lowerLevel.cache.textDefined = lowerLevel.cache.textDefined || {}
+ lowerLevel.cache.textDefined[selector] = textColor
+ lowerLevel.virtualDirectives = lowerLevel.virtualDirectives || {}
+ lowerLevel.virtualDirectives[virtualName] = getTextColorAlpha(inheritedTextColorRule, lowerLevel, textColor)
+
+ const directives = {
+ textColor,
+ ...inheritedTextOpacity
+ }
+
+ // Debug: lets you see what it think background color should be
+ directives.background = convert(lowerLevel.cache.background).hex
+
+ addRule({
+ parent,
+ virtual: true,
+ component: component.name,
+ ...combination,
+ cache: { background: lowerLevel.cache.background },
+ directives
+ })
} else {
- if (VIRTUAL_COMPONENTS.has(component.name)) {
- const selector = component.name + ruleToSelector({ component: component.name, ...combination })
-
- const lowerLevel = findLowerLevelRule(parent, (r) => {
- if (components[r.component].validInnerComponents.indexOf(component.name) < 0) return false
- if (r.cache?.background === undefined) return false
- if (r.cache.textDefined) {
- return !r.cache.textDefined[selector]
- }
- return true
- })
- if (!lowerLevel) return
- lowerLevel.cache.textDefined = lowerLevel.cache.textDefined || {}
- lowerLevel.cache.textDefined[selector] = true
- addRule({
- parent,
- component: component.name,
- ...combination,
- directives: {
- // TODO: DEFAULT TEXT COLOR
- textColor: getTextColor(convert(lowerLevel.cache.background).rgb, convert('#FFFFFF').rgb, component.name === 'Link'),
- // Debug: lets you see what it think background color should be
- background: convert(lowerLevel.cache.background).hex
+ const existingGlobalRules = ruleset.filter(findRules({ component: component.name, ...combination }, null))
+ const existingRules = ruleset.filter(findRules({ component: component.name, ...combination }, parent))
+
+ // Global (general) rules
+ if (existingGlobalRules.length !== 0) {
+ const lastRule = existingGlobalRules[existingGlobalRules.length - 1]
+ const { directives } = lastRule
+ lastRule.cache = lastRule.cache || {}
+
+ if (directives.background) {
+ const rgb = convert(findColor(directives.background)).rgb
+
+ // TODO: DEFAULT TEXT COLOR
+ const bg = findLowerLevelRule(parent)?.cache.background || convert('#FFFFFF').rgb
+
+ if (!lastRule.cache.background) {
+ const blend = directives.opacity < 1 ? alphaBlend(rgb, directives.opacity, bg) : rgb
+ lastRule.cache.background = blend
+
+ needRuleAdd = true
}
- })
+ }
+
+ if (needRuleAdd) {
+ addRule(lastRule)
+ }
}
- }
+ if (existingRules.length !== 0) {
+ console.warn('MORE EXISTING RULES', existingRules)
+ }
+ }
innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
})
}
processInnerComponent(components[rootName])
- // console.info(rules.map(x => [
- // (parent?.component || 'root') + ' -> ' + x.component,
- // // 'Cached background:' + convert(bg).hex,
- // // 'Color: ' + convert(x.directives.background).hex + ' A:' + x.directives.opacity,
- // JSON.stringify(x.directives)
- // // '=> Blend: ' + convert(x.cache.background).hex
- // ].join(' ')))
-
return {
raw: rules,
css: rules.map(rule => {
- const header = ruleToSelector(rule) + ' {'
+ if (rule.virtual) return ''
+
+ let selector = ruleToSelector(rule).replace(/\/\*.*\*\//g, '')
+ if (!selector) {
+ selector = 'body'
+ }
+ const header = selector + ' {'
const footer = '}'
+
+ const virtualDirectives = Object.entries(rule.virtualDirectives || {}).map(([k, v]) => {
+ return ' ' + k + ': ' + v
+ }).join(';\n')
+
const directives = Object.entries(rule.directives).map(([k, v]) => {
switch (k) {
- case 'background': return 'background-color: ' + rgba2css({ ...convert(v).rgb, a: rule.directives.opacity ?? 1 })
- case 'textColor': return 'color: ' + rgba2css({ ...convert(v).rgb, a: rule.directives.opacity ?? 1 })
+ case 'background': {
+ return 'background-color: ' + rgba2css({ ...convert(findColor(v)).rgb, a: rule.directives.opacity ?? 1 })
+ }
+ case 'textColor': {
+ return 'color: ' + v
+ }
default: return ''
}
}).filter(x => x).map(x => ' ' + x).join(';\n')
- return [header, directives, footer].join('\n')
- })
+
+ return [
+ header,
+ directives + ';',
+ ' color: var(--text);',
+ '',
+ virtualDirectives,
+ footer
+ ].join('\n')
+ }).filter(x => x)
}
}
diff --git a/test/unit/specs/services/theme_data/theme_data3.spec.js b/test/unit/specs/services/theme_data/theme_data3.spec.js
@@ -17,7 +17,7 @@ describe.only('Theme Data 3', () => {
describe('init', () => {
it('test simple case', () => {
- const out = init(sampleRules)
+ const out = init(sampleRules, palette)
// console.log(JSON.stringify(out, null, 2))
console.log('\n' + out.css.join('\n') + '\n')
})
