Anon/yandere_fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial work on dynamic slots + move remaining css stuff into separate file

Browse Source
This commit is contained in:
Henry Jameson 2024-02-19 19:59:38 +02:00
parent 34aa9136db
commit 4a10417ed4
4 changed files with 85 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/input.style.js
View File

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

3
src/services/style_setter/style_setter.js
View File

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

72
src/services/theme_data/css_utils.js
View File

@ -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)

88
src/services/theme_data/theme_data_3.service.js
View File

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