avatar shadows

This commit is contained in:
Henry Jameson 2024-02-12 19:58:42 +02:00
parent 709ce1611a
commit 17b25ef0e0
6 changed files with 34 additions and 20 deletions

View File

@ -0,0 +1,20 @@
export default {
name: 'Avatar',
selector: '.Avatar',
defaultRules: [
{
directives: {
background: '--bg',
opacity: 0,
shadow: [{
x: 0,
y: 1,
blur: 8,
spread: 0,
color: '#000000',
alpha: 0.7
}]
}
}
]
}

View File

@ -9,7 +9,8 @@ export default {
'Button', 'Button',
'ButtonUnstyled', 'ButtonUnstyled',
'RichContent', 'RichContent',
'Input' 'Input',
'Avatar'
], ],
defaultRules: [ defaultRules: [
{ {

View File

@ -9,7 +9,8 @@ export default {
'Button', 'Button',
'ButtonUnstyled', 'ButtonUnstyled',
'RichContent', 'RichContent',
'Input' 'Input',
'Avatar'
], ],
defaultRules: [ defaultRules: [
{ {

View File

@ -30,9 +30,9 @@
@import "../../variables"; @import "../../variables";
.Avatar { .Avatar {
--_avatarShadowBox: var(--avatarStatusShadow); --_avatarShadowBox: var(--shadow);
--_avatarShadowFilter: var(--avatarStatusShadowFilter); --_avatarShadowFilter: var(--shadowFilter);
--_avatarShadowInset: var(--avatarStatusShadowInset); --_avatarShadowInset: var(--shadowInset);
--_still-image-label-visibility: hidden; --_still-image-label-visibility: hidden;
display: inline-block; display: inline-block;

View File

@ -11,9 +11,9 @@ export const applyTheme = (input) => {
const t0 = performance.now() const t0 = performance.now()
const { rules, t3b } = generatePreset(input) const { rules, t3b } = generatePreset(input)
const t1 = performance.now() const t1 = performance.now()
console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
const themes3 = init(sampleRules, t3b) const themes3 = init(sampleRules, t3b)
const t2 = performance.now() const t2 = performance.now()
console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms') console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
const head = document.head const head = document.head
const body = document.body const body = document.body
@ -29,6 +29,7 @@ export const applyTheme = (input) => {
// styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max') // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max') styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
themes3.css.forEach(rule => { themes3.css.forEach(rule => {
console.log(rule)
styleSheet.insertRule(rule, 'index-max') styleSheet.insertRule(rule, 'index-max')
}) })
body.classList.remove('hidden') body.classList.remove('hidden')

View File

@ -26,20 +26,10 @@ import Border from 'src/components/border.style.js'
import Post from 'src/components/post.style.js' import Post from 'src/components/post.style.js'
import Notification from 'src/components/notification.style.js' import Notification from 'src/components/notification.style.js'
import RichContent from 'src/components/rich_content.style.js' import RichContent from 'src/components/rich_content.style.js'
import Avatar from 'src/components/avatar.style.js'
const DEBUG = false const DEBUG = false
export const DEFAULT_SHADOWS = {
avatar: [{
x: 0,
y: 1,
blur: 8,
spread: 0,
color: '#000000',
alpha: 0.7
}]
}
const components = { const components = {
Root, Root,
Text, Text,
@ -59,7 +49,8 @@ const components = {
Input, Input,
Post, Post,
Notification, Notification,
RichContent RichContent,
Avatar
} }
// "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }} // "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
@ -372,7 +363,7 @@ export const init = (extraRuleset, palette) => {
// Normalizing states and variants to always include "normal" // Normalizing states and variants to always include "normal"
const states = { normal: '', ...originalStates } const states = { normal: '', ...originalStates }
const variants = { normal: '', ...originalVariants } const variants = { normal: '', ...originalVariants }
const innerComponents = validInnerComponents.map(name => components[name]) const innerComponents = (validInnerComponents).map(name => components[name])
// Optimization: we only really need combinations without "normal" because all states implicitly have it // Optimization: we only really need combinations without "normal" because all states implicitly have it
const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal') const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
@ -448,7 +439,6 @@ export const init = (extraRuleset, palette) => {
dynamicVars.inheritedBackground = lowerLevelBackground dynamicVars.inheritedBackground = lowerLevelBackground
// TODO properly provide "parent" text color?
const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars)).rgb const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars)).rgb
const textColor = newTextRule.directives.textAuto === 'no-auto' const textColor = newTextRule.directives.textAuto === 'no-auto'
? intendedTextColor ? intendedTextColor
@ -495,6 +485,7 @@ export const init = (extraRuleset, palette) => {
} else { } else {
computed[selector] = computed[selector] || {} computed[selector] = computed[selector] || {}
// TODO make background non-mandatory
if (computedDirectives.background) { if (computedDirectives.background) {
let inheritRule = null let inheritRule = null
const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent })) const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))