avatar shadows

src/components/avatar.style.js

@@ -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
+        }]
+      }
+    }
+  ]
+}

src/components/notification.style.js

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

src/components/post.style.js

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

src/components/user_avatar/user_avatar.vue

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

src/services/style_setter/style_setter.js

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

src/services/theme_data/theme_data_3.service.js

@@ -26,20 +26,10 @@ import Border from 'src/components/border.style.js'
 import Post from 'src/components/post.style.js'
 import Notification from 'src/components/notification.style.js'
 import RichContent from 'src/components/rich_content.style.js'
+import Avatar from 'src/components/avatar.style.js'
 
 const DEBUG = false
 
-export const DEFAULT_SHADOWS = {
-  avatar: [{
-    x: 0,
-    y: 1,
-    blur: 8,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.7
-  }]
-}
-
 const components = {
   Root,
   Text,
@@ -59,7 +49,8 @@ const components = {
   Input,
   Post,
   Notification,
-  RichContent
+  RichContent,
+  Avatar
 }
 
 // "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"
     const states = { normal: '', ...originalStates }
     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
     const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
@@ -448,7 +439,6 @@ export const init = (extraRuleset, palette) => {
 
         dynamicVars.inheritedBackground = lowerLevelBackground
 
-        // TODO properly provide "parent" text color?
         const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars)).rgb
         const textColor = newTextRule.directives.textAuto === 'no-auto'
           ? intendedTextColor
@@ -495,6 +485,7 @@ export const init = (extraRuleset, palette) => {
       } else {
         computed[selector] = computed[selector] || {}
 
+        // TODO make background non-mandatory
         if (computedDirectives.background) {
           let inheritRule = null
           const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))