commit: 4a10417ed47cdfe08b2ff4939212116dba3e965f
parent 34aa9136dba6b0e1d54f657e24ea4ae77f6c406e
Author: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 19:59:38 +0200
initial work on dynamic slots + move remaining css stuff into separate file
Diffstat:
4 files changed, 85 insertions(+), 90 deletions(-)
diff --git a/src/components/input.style.js b/src/components/input.style.js
@@ -1,14 +1,4 @@
-const border = (top, shadow) => ({
- x: 0,
- y: top ? 1 : -1,
- blur: 0,
- spread: 0,
- color: shadow ? '#000000' : '#FFFFFF',
- alpha: 0.2,
- inset: true
-})
-
-const inputInsetFakeBorders = [border(true, true), border(false, false)]
+const inputInsetFakeBorders = ['$borderSide(#FFFFFF, bottom, 0.2)', '$borderSide(#000000, top, 0.2)']
const hoverGlow = {
x: 0,
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
@@ -1,7 +1,8 @@
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, getCssRules } from '../theme_data/theme_data_3.service.js'
+import { init } from '../theme_data/theme_data_3.service.js'
+import { getCssRules } from '../theme_data/css_utils.js'
import {
sampleRules
} from 'src/services/theme_data/pleromafe.t3.js'
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
@@ -41,3 +41,75 @@ export const getCssShadowFilter = (input) => {
.map(_ => `drop-shadow(${_})`)
.join(' ')
}
+
+export const getCssRules = (rules) => rules.map(rule => {
+ let selector = rule.selector
+ if (!selector) {
+ selector = 'body'
+ }
+ const header = selector + ' {'
+ const footer = '}'
+
+ const virtualDirectives = Object.entries(rule.virtualDirectives || {}).map(([k, v]) => {
+ return ' ' + k + ': ' + v
+ }).join(';\n')
+
+ let directives
+ if (rule.component !== 'Root') {
+ directives = Object.entries(rule.directives).map(([k, v]) => {
+ switch (k) {
+ case 'roundness': {
+ return ' ' + [
+ '--roundness: ' + v + 'px'
+ ].join(';\n ')
+ }
+ case 'shadow': {
+ return ' ' + [
+ '--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
+ '--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
+ '--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
+ ].join(';\n ')
+ }
+ case 'background': {
+ if (v === 'transparent') {
+ return [
+ rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
+ ' --background: ' + v
+ ].filter(x => x).join(';\n')
+ }
+ const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
+ return [
+ rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
+ ' --background: ' + color
+ ].filter(x => x).join(';\n')
+ }
+ case 'textColor': {
+ if (rule.directives.textNoCssColor === 'yes') { return '' }
+ return 'color: ' + v
+ }
+ default:
+ if (k.startsWith('--')) {
+ const [type] = v.split('|').map(x => x.trim()) // woah, Extreme!
+ switch (type) {
+ case 'color':
+ return k + ': ' + rgba2css(rule.dynamicVars[k])
+ default:
+ return ''
+ }
+ }
+ return ''
+ }
+ }).filter(x => x).map(x => ' ' + x).join(';\n')
+ } else {
+ directives = {}
+ }
+
+ return [
+ header,
+ directives + ';',
+ (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? ' color: var(--text);' : '',
+ '',
+ virtualDirectives,
+ footer
+ ].join('\n')
+}).filter(x => x)
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
@@ -13,12 +13,6 @@ import {
process
} from './theme3_slot_functions.js'
-import {
- getCssShadow,
- getCssShadowFilter,
- getCssColorString
-} from './css_utils.js'
-
const DEBUG = false
// Ensuring the order of components
@@ -105,78 +99,6 @@ const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVar
}
}
-export const getCssRules = (rules, staticVars) => rules.map(rule => {
- let selector = rule.selector
- if (!selector) {
- selector = 'body'
- }
- const header = selector + ' {'
- const footer = '}'
-
- const virtualDirectives = Object.entries(rule.virtualDirectives || {}).map(([k, v]) => {
- return ' ' + k + ': ' + v
- }).join(';\n')
-
- let directives
- if (rule.component !== 'Root') {
- directives = Object.entries(rule.directives).map(([k, v]) => {
- switch (k) {
- case 'roundness': {
- return ' ' + [
- '--roundness: ' + v + 'px'
- ].join(';\n ')
- }
- case 'shadow': {
- return ' ' + [
- '--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
- '--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
- '--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
- ].join(';\n ')
- }
- case 'background': {
- if (v === 'transparent') {
- return [
- rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
- ' --background: ' + v
- ].filter(x => x).join(';\n')
- }
- const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
- return [
- rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
- ' --background: ' + color
- ].filter(x => x).join(';\n')
- }
- case 'textColor': {
- if (rule.directives.textNoCssColor === 'yes') { return '' }
- return 'color: ' + v
- }
- default:
- if (k.startsWith('--')) {
- const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
- switch (type) {
- case 'color':
- return k + ': ' + rgba2css(findColor(value, rule.dynamicVars, staticVars))
- default:
- return ''
- }
- }
- return ''
- }
- }).filter(x => x).map(x => ' ' + x).join(';\n')
- } else {
- directives = {}
- }
-
- return [
- header,
- directives + ';',
- (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? ' color: var(--text);' : '',
- '',
- virtualDirectives,
- footer
- ].join('\n')
-}).filter(x => x)
-
// Loading all style.js[on] files dynamically
const componentsContext = require.context('src', true, /\.style.js(on)?$/)
componentsContext.keys().forEach(key => {
@@ -587,6 +509,16 @@ export const init = (extraRuleset, palette) => {
dynamicVars.stacked = lowerLevelStackedBackground
dynamicVars.background = computed[selector].background
+ const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))
+
+ dynamicSlots.forEach(([k, v]) => {
+ const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+ switch (type) {
+ case 'color':
+ dynamicVars[k] = findColor(value, dynamicVars, palette)
+ }
+ })
+
addRule({
dynamicVars,
selector: cssSelector,
