biome format --write
This commit is contained in:
Henry Jameson
parent
8372348148
commit
9262e803ec
415 changed files with 54076 additions and 17419 deletions
|
|
@ -2,7 +2,8 @@ import { convert } from 'chromatism'
|
|||
|
||||
import { hex2rgb, rgba2css } from '../color_convert/color_convert.js'
|
||||
|
||||
export const getCssColorString = (color, alpha = 1) => rgba2css({ ...convert(color).rgb, a: alpha })
|
||||
export const getCssColorString = (color, alpha = 1) =>
|
||||
rgba2css({ ...convert(color).rgb, a: alpha })
|
||||
|
||||
export const getCssShadow = (input, usesDropShadow) => {
|
||||
if (input.length === 0) {
|
||||
|
|
@ -10,16 +11,17 @@ export const getCssShadow = (input, usesDropShadow) => {
|
|||
}
|
||||
|
||||
return input
|
||||
.filter(_ => usesDropShadow ? _.inset : _)
|
||||
.map((shad) => [
|
||||
shad.x,
|
||||
shad.y,
|
||||
shad.blur,
|
||||
shad.spread
|
||||
].map(_ => _ + 'px ').concat([
|
||||
getCssColorString(shad.color, shad.alpha),
|
||||
shad.inset ? 'inset' : ''
|
||||
]).join(' ')).join(', ')
|
||||
.filter((_) => (usesDropShadow ? _.inset : _))
|
||||
.map((shad) =>
|
||||
[shad.x, shad.y, shad.blur, shad.spread]
|
||||
.map((_) => _ + 'px ')
|
||||
.concat([
|
||||
getCssColorString(shad.color, shad.alpha),
|
||||
shad.inset ? 'inset' : '',
|
||||
])
|
||||
.join(' '),
|
||||
)
|
||||
.join(', ')
|
||||
}
|
||||
|
||||
export const getCssShadowFilter = (input) => {
|
||||
|
|
@ -27,124 +29,156 @@ export const getCssShadowFilter = (input) => {
|
|||
return 'none'
|
||||
}
|
||||
|
||||
return input
|
||||
// drop-shadow doesn't support inset or spread
|
||||
.filter((shad) => !shad.inset && Number(shad.spread) === 0)
|
||||
.map((shad) => [
|
||||
shad.x,
|
||||
shad.y,
|
||||
// drop-shadow's blur is twice as strong compared to box-shadow
|
||||
shad.blur / 2
|
||||
].map(_ => _ + 'px').concat([
|
||||
getCssColorString(shad.color, shad.alpha)
|
||||
]).join(' '))
|
||||
.map(_ => `drop-shadow(${_})`)
|
||||
.join(' ')
|
||||
return (
|
||||
input
|
||||
// drop-shadow doesn't support inset or spread
|
||||
.filter((shad) => !shad.inset && Number(shad.spread) === 0)
|
||||
.map((shad) =>
|
||||
[
|
||||
shad.x,
|
||||
shad.y,
|
||||
// drop-shadow's blur is twice as strong compared to box-shadow
|
||||
shad.blur / 2,
|
||||
]
|
||||
.map((_) => _ + 'px')
|
||||
.concat([getCssColorString(shad.color, shad.alpha)])
|
||||
.join(' '),
|
||||
)
|
||||
.map((_) => `drop-shadow(${_})`)
|
||||
.join(' ')
|
||||
)
|
||||
}
|
||||
|
||||
// `debug` changes what backgrounds are used to "stacked" solid colors so you can see
|
||||
// what theme engine "thinks" is actual background color is for purposes of text color
|
||||
// generation and for when --stacked variable is used
|
||||
export const getCssRules = (rules, debug) => rules.map(rule => {
|
||||
let selector = rule.selector
|
||||
if (!selector) {
|
||||
selector = 'html'
|
||||
}
|
||||
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 'roundness': {
|
||||
return ' ' + [
|
||||
'--roundness: ' + v + 'px'
|
||||
].join(';\n ')
|
||||
export const getCssRules = (rules, debug) =>
|
||||
rules
|
||||
.map((rule) => {
|
||||
let selector = rule.selector
|
||||
if (!selector) {
|
||||
selector = 'html'
|
||||
}
|
||||
case 'shadow': {
|
||||
if (!rule.dynamicVars.shadow) {
|
||||
return ''
|
||||
}
|
||||
return ' ' + [
|
||||
'--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
|
||||
'--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
|
||||
'--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
|
||||
].join(';\n ')
|
||||
}
|
||||
case 'background': {
|
||||
if (debug) {
|
||||
return `
|
||||
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 'roundness': {
|
||||
return ' ' + ['--roundness: ' + v + 'px'].join(';\n ')
|
||||
}
|
||||
case 'shadow': {
|
||||
if (!rule.dynamicVars.shadow) {
|
||||
return ''
|
||||
}
|
||||
return (
|
||||
' ' +
|
||||
[
|
||||
'--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
|
||||
'--shadowFilter: ' +
|
||||
getCssShadowFilter(rule.dynamicVars.shadow),
|
||||
'--shadowInset: ' +
|
||||
getCssShadow(rule.dynamicVars.shadow, true),
|
||||
].join(';\n ')
|
||||
)
|
||||
}
|
||||
case 'background': {
|
||||
if (debug) {
|
||||
return `
|
||||
--background: ${getCssColorString(rule.dynamicVars.stacked)};
|
||||
background-color: ${getCssColorString(rule.dynamicVars.stacked)};
|
||||
`
|
||||
}
|
||||
if (v === 'transparent') {
|
||||
if (rule.component === 'Root') return null
|
||||
return [
|
||||
rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
|
||||
' --background: ' + v
|
||||
].filter(x => x).join(';\n')
|
||||
}
|
||||
const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
|
||||
const cssDirectives = ['--background: ' + color]
|
||||
if (rule.directives.backgroundNoCssColor !== 'yes') {
|
||||
cssDirectives.push('background-color: ' + color)
|
||||
}
|
||||
return cssDirectives.filter(x => x).join(';\n')
|
||||
}
|
||||
case 'blur': {
|
||||
const cssDirectives = []
|
||||
if (rule.directives.opacity < 1) {
|
||||
cssDirectives.push(`--backdrop-filter: blur(${v}) `)
|
||||
if (rule.directives.backgroundNoCssColor !== 'yes') {
|
||||
cssDirectives.push(`backdrop-filter: blur(${v}) `)
|
||||
}
|
||||
}
|
||||
return cssDirectives.join(';\n')
|
||||
}
|
||||
case 'font': {
|
||||
return 'font-family: ' + v
|
||||
}
|
||||
case 'textColor': {
|
||||
if (rule.directives.textNoCssColor === 'yes') { return '' }
|
||||
return 'color: ' + v
|
||||
}
|
||||
default:
|
||||
if (k.startsWith('--')) {
|
||||
const [type, value] = v.split('|').map(x => x.trim())
|
||||
switch (type) {
|
||||
case 'color': {
|
||||
const color = rule.dynamicVars[k]
|
||||
if (typeof color === 'string') {
|
||||
return k + ': ' + rgba2css(hex2rgb(color))
|
||||
} else {
|
||||
return k + ': ' + rgba2css(color)
|
||||
}
|
||||
if (v === 'transparent') {
|
||||
if (rule.component === 'Root') return null
|
||||
return [
|
||||
rule.directives.backgroundNoCssColor !== 'yes'
|
||||
? 'background-color: ' + v
|
||||
: '',
|
||||
' --background: ' + v,
|
||||
]
|
||||
.filter((x) => x)
|
||||
.join(';\n')
|
||||
}
|
||||
const color = getCssColorString(
|
||||
rule.dynamicVars.background,
|
||||
rule.directives.opacity,
|
||||
)
|
||||
const cssDirectives = ['--background: ' + color]
|
||||
if (rule.directives.backgroundNoCssColor !== 'yes') {
|
||||
cssDirectives.push('background-color: ' + color)
|
||||
}
|
||||
return cssDirectives.filter((x) => x).join(';\n')
|
||||
}
|
||||
case 'blur': {
|
||||
const cssDirectives = []
|
||||
if (rule.directives.opacity < 1) {
|
||||
cssDirectives.push(`--backdrop-filter: blur(${v}) `)
|
||||
if (rule.directives.backgroundNoCssColor !== 'yes') {
|
||||
cssDirectives.push(`backdrop-filter: blur(${v}) `)
|
||||
}
|
||||
}
|
||||
return cssDirectives.join(';\n')
|
||||
}
|
||||
case 'font': {
|
||||
return 'font-family: ' + v
|
||||
}
|
||||
case 'textColor': {
|
||||
if (rule.directives.textNoCssColor === 'yes') {
|
||||
return ''
|
||||
}
|
||||
return 'color: ' + v
|
||||
}
|
||||
case 'generic':
|
||||
return k + ': ' + value
|
||||
default:
|
||||
if (k.startsWith('--')) {
|
||||
const [type, value] = v.split('|').map((x) => x.trim())
|
||||
switch (type) {
|
||||
case 'color': {
|
||||
const color = rule.dynamicVars[k]
|
||||
if (typeof color === 'string') {
|
||||
return k + ': ' + rgba2css(hex2rgb(color))
|
||||
} else {
|
||||
return k + ': ' + rgba2css(color)
|
||||
}
|
||||
}
|
||||
case 'generic':
|
||||
return k + ': ' + value
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
}).filter(x => x).map(x => ' ' + x + ';').join('\n')
|
||||
})
|
||||
.filter((x) => x)
|
||||
.map((x) => ' ' + x + ';')
|
||||
.join('\n')
|
||||
|
||||
return [
|
||||
header,
|
||||
directives,
|
||||
(rule.component === 'Text' && rule.state.indexOf('faint') < 0 && rule.directives.textNoCssColor !== 'yes') ? ' color: var(--text);' : '',
|
||||
virtualDirectives,
|
||||
footer
|
||||
].filter(x => x).join('\n')
|
||||
}).filter(x => x)
|
||||
return [
|
||||
header,
|
||||
directives,
|
||||
rule.component === 'Text' &&
|
||||
rule.state.indexOf('faint') < 0 &&
|
||||
rule.directives.textNoCssColor !== 'yes'
|
||||
? ' color: var(--text);'
|
||||
: '',
|
||||
virtualDirectives,
|
||||
footer,
|
||||
]
|
||||
.filter((x) => x)
|
||||
.join('\n')
|
||||
})
|
||||
.filter((x) => x)
|
||||
|
||||
export const getScopedVersion = (rules, newScope) => {
|
||||
return rules.map(x => {
|
||||
return rules.map((x) => {
|
||||
if (x.startsWith('html')) {
|
||||
return x.replace('html', newScope)
|
||||
} else if (x.startsWith('#content')) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue