mirror of
https://git.pleroma.social/sjw/pleroma-fe.git
synced 2024-12-23 14:05:16 +01:00
initial work on dynamic slots + move remaining css stuff into separate file
This commit is contained in:
parent
34aa9136db
commit
4a10417ed4
@ -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,
|
||||
|
@ -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'
|
||||
|
@ -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)
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user