menu-item improvements

src/App.scss

@@ -129,15 +129,6 @@ i[class*="icon-"],
   color: var(--icon);
 }
 
-.button-unstyled:hover,
-a:hover {
-  > i[class*="icon-"],
-  > .svg-inline--fa,
-  > .iconLetter {
-    color: var(--text);
-  }
-}
-
 nav {
   z-index: var(--ZI_navbar);
   background-color: $fallback--fg;
@@ -192,8 +183,7 @@ nav {
   grid-column: 1 / span 3;
   grid-row: 1 / 1;
   pointer-events: none;
-  background-color: rgb(0 0 0 / 15%);
+  background-color: var(--underlay);
-  background-color: var(--underlay, rgb(0 0 0 / 15%));
   z-index: -1000;
 }
 
@@ -363,10 +353,7 @@ nav {
 
 .button-default {
   user-select: none;
-  color: $fallback--text;
+  color: var(--text);
-  color: var(--btnText, $fallback--text);
-  background-color: $fallback--fg;
-  background-color: var(--btn, $fallback--fg);
   border: none;
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
@@ -376,70 +363,12 @@ nav {
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
 
-  &.-sublime {
-    background: transparent;
-  }
-
-  i[class*="icon-"],
-  .svg-inline--fa {
-    color: var(--icon);
-  }
-
   &::-moz-focus-inner {
     border: none;
   }
 
-  &:active {
-    color: $fallback--text;
-    color: var(--btnPressedText, $fallback--text);
-    background-color: $fallback--fg;
-    background-color: var(--btnPressed, $fallback--fg);
-
-    svg,
-    i {
-      color: $fallback--text;
-      color: var(--btnPressedText, $fallback--text);
-    }
-  }
-
   &:disabled {
     cursor: not-allowed;
-    color: $fallback--text;
-    color: var(--btnDisabledText, $fallback--text);
-    background-color: $fallback--fg;
-    background-color: var(--btnDisabled, $fallback--fg);
-
-    svg,
-    i {
-      color: $fallback--text;
-      color: var(--btnDisabledText, $fallback--text);
-    }
-  }
-
-  &.toggled {
-    color: $fallback--text;
-    color: var(--btnToggledText, $fallback--text);
-    background-color: $fallback--fg;
-    background-color: var(--btnToggled, $fallback--fg);
-    box-shadow:
-      0 0 4px 0 rgb(255 255 255 / 30%),
-      0 1px 0 0 rgb(0 0 0 / 20%) inset,
-      0 -1px 0 0 rgb(255 255 255 / 20%) inset;
-    box-shadow: var(--buttonPressedShadow);
-
-    svg,
-    i {
-      color: $fallback--text;
-      color: var(--btnToggledText, $fallback--text);
-    }
-  }
-
-  &.danger {
-    // TODO: add better color variable
-    color: $fallback--text;
-    color: var(--alertErrorPanelText, $fallback--text);
-    background-color: $fallback--alertError;
-    background-color: var(--alertError, $fallback--alertError);
   }
 }
 
@@ -458,8 +387,7 @@ nav {
   color: inherit;
 
   &.-link {
-    color: $fallback--link;
+    color: var(--link);
-    color: var(--link, $fallback--link);
   }
 
   &.-fullwidth {
@@ -510,7 +438,6 @@ textarea {
   &[disabled="disabled"],
   &.disabled {
     cursor: not-allowed;
-    opacity: 0.5;
   }
 
   &[type="range"] {
@@ -610,9 +537,7 @@ textarea {
 }
 
 option {
-  color: $fallback--text;
+  color: var(--text);
-  color: var(--text, $fallback--text);
-  background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
 }
 
@@ -746,6 +671,7 @@ option {
 .faint {
   --text: var(--textFaint);
   --textGreentext: var(--textGreentextFaint);
+  --textCyantext: var(--textCyantextFaint);
   --link: var(--linkFaint);
 
   color: var(--text);

src/components/border.style.js

@@ -0,0 +1,13 @@
+export default {
+  name: 'Border',
+  selector: '/*border*/',
+  virtual: true,
+  defaultRules: [
+    {
+      directives: {
+        textColor: '$mod(--parent, 10)',
+        textAuto: 'no-auto'
+      }
+    }
+  ]
+}

src/components/button.style.js

@@ -23,28 +23,37 @@ const hoverGlow = {
 export default {
   name: 'Button', // Name of the component
   selector: '.button', // CSS selector/prefix
-  // States, system witll calculate ALL possible combinations of those and append a "normal" to them + standalone "normal" state
+  // outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
+  // States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
   states: {
-    // normal: state is implicitly added
+    // States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
+    // All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
+    // However, cascading still works, so resulting state will be result of merging of all relevant states/variants
+    // normal: '' // normal state is implicitly added, it is always included
     disabled: ':disabled',
     toggled: '.toggled',
     pressed: ':active',
     hover: ':hover',
     focused: ':focus-within'
   },
-  // Variants are mutually exclusive, which saves on computation time
+  // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
   variants: {
-    normal: '-default', // you can override normal variant
+    // Variants save on computation time since adding new variant just adds one more "set".
-    danger: '.danger',
+    normal: '-default', // you can override normal variant, it will be appenended to the main class
-    unstyled: '-unstyled'
+    danger: '-default.danger'
+    // Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
+    // This (currently) is further multipled by number of places where component can exist.
   },
+  // This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
   validInnerComponents: [
     'Text',
     'Icon'
   ],
+  // Default rules, used as "default theme", essentially.
   defaultRules: [
     {
-      component: 'Button',
+      // component: 'Button', // no need to specify components every time unless you're specifying how other component should look
+      // like within it
       directives: {
         background: '--fg',
         shadow: [{
@@ -58,7 +67,6 @@ export default {
       }
     },
     {
-      component: 'Button',
       variant: 'unstyled',
       directives: {
         background: '--fg',
@@ -66,14 +74,12 @@ export default {
       }
     },
     {
-      component: 'Button',
       state: ['hover'],
       directives: {
         shadow: [hoverGlow, ...buttonInsetFakeBorders]
       }
     },
     {
-      component: 'Button',
       state: ['hover', 'pressed'],
       directives: {
         background: '--accent,-24.2',
@@ -81,7 +87,6 @@ export default {
       }
     },
     {
-      component: 'Button',
       state: ['disabled'],
       directives: {
         background: '$blend(--background, 0.25, --parent)',

src/components/dropdown_menu.style.js

@@ -1,19 +0,0 @@
-export default {
-  name: 'DropdownMenu',
-  selector: '.dropdown',
-  validInnerComponents: [
-    'Text',
-    'Icon',
-    'Input'
-  ],
-  states: {
-    hover: ':hover'
-  },
-  defaultRules: [
-    {
-      directives: {
-        background: '--fg'
-      }
-    }
-  ]
-}

src/components/menu_item.style.js

@@ -0,0 +1,45 @@
+export default {
+  name: 'MenuItem',
+  selector: '.menu-item',
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Input',
+    'Border'
+  ],
+  states: {
+    hover: ':hover',
+    active: 'active'
+  },
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg'
+      }
+    },
+    {
+      component: 'Text',
+      variant: 'normal',
+      parent: {
+        component: 'MenuItem',
+        state: ['normal', 'hover'],
+        variant: 'normal'
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'MenuItem',
+        state: ['hover']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    }
+  ]
+}

src/components/modals.style.js

@@ -0,0 +1,8 @@
+export default {
+  name: 'Modals',
+  selector: '.modal-view',
+  validInnerComponents: [
+    'Panel'
+  ],
+  defaultRules: []
+}

src/components/nav_panel/nav_panel.vue

@@ -107,7 +107,7 @@
 .NavPanel {
   .panel {
     overflow: hidden;
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
   }
 
   ul {
@@ -124,14 +124,14 @@
   }
 
   > li {
-    &:first-child .menu-item {
+    &:first-child.menu-item {
       border-top-right-radius: $fallback--panelRadius;
       border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
       border-top-left-radius: $fallback--panelRadius;
       border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
     }
 
-    &:last-child .menu-item {
+    &:last-child.menu-item {
       border-bottom-right-radius: $fallback--panelRadius;
       border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
       border-bottom-left-radius: $fallback--panelRadius;

src/components/navigation/navigation_entry.vue

@@ -1,7 +1,6 @@
 <template>
   <OptionalRouterLink
     v-slot="{ isActive, href, navigate } = {}"
-    ass="ass"
     :to="routeTo"
   >
     <li
@@ -96,40 +95,5 @@
       margin-right: -0.8em;
     }
   }
-
-  &:hover {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--link;
-    color: var(--selectedMenuText, $fallback--link);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-
-    .menu-icon {
-      --icon: var(--text, $fallback--icon);
-    }
-  }
-
-  &.-active {
-    font-weight: bolder;
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--text;
-    color: var(--selectedMenuText, $fallback--text);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-
-    .menu-icon {
-      --icon: var(--text, $fallback--icon);
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
 }
 </style>

src/components/panel.style.js

@@ -7,12 +7,21 @@ export default {
     'Icon',
     'Button',
     'Input',
-    'PanelHeader'
+    'PanelHeader',
+    'MenuItem'
   ],
   defaultRules: [
     {
       directives: {
-        background: '--bg'
+        background: '--bg',
+        shadow: [{
+          x: 1,
+          y: 1,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.6
+        }]
       }
     }
   ]

src/components/panel_header.style.js

@@ -11,7 +11,8 @@ export default {
     {
       component: 'PanelHeader',
       directives: {
-        background: '--fg'
+        background: '--fg',
+        shadow: []
       }
     }
   ]

src/components/popover.style.js

@@ -1,6 +1,10 @@
 export default {
   name: 'Popover',
   selector: '.popover',
+  variants: {
+    tooltip: '.tooltip',
+    modal: '.modal'
+  },
   validInnerComponents: [
     'Text',
     'Link',
@@ -8,12 +12,20 @@ export default {
     'Button',
     'Input',
     'PanelHeader',
-    'DropdownMenu'
+    'MenuItem'
   ],
   defaultRules: [
     {
       directives: {
-        background: '--fg'
+        background: '--bg',
+        shadow: [{
+          x: 2,
+          y: 2,
+          blur: 3,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.5
+        }]
       }
     }
   ]

src/components/root.style.js

@@ -3,8 +3,8 @@ export default {
   selector: ':root',
   validInnerComponents: [
     'Underlay',
-    'TopBar',
+    'Modals',
-    'Popover'
+    'TopBar'
   ],
   defaultRules: [
     {

src/components/underlay.style.js

@@ -1,6 +1,9 @@
 export default {
   name: 'Underlay',
-  selector: 'body', // Should be '#content' but for now this is better for testing until I have proper popovers and such...
+  selector: '#content',
+  // Out of tree selector: Most components are laid over underlay, but underlay itself is not part of the DOM tree,
+  // i.e. it's a separate absolutely-positioned component, so we need to treat it differently depending on whether
+  // we are searching for underlay specifically or for whatever is laid on top of it.
   outOfTreeSelector: '.underlay',
   validInnerComponents: [
     'Panel'

src/panel.scss

@@ -3,8 +3,6 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
 
   .panel-heading {
     background-color: inherit;
@@ -24,8 +22,7 @@
     left: 0;
     right: 0;
     z-index: 5;
-    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
+    box-shadow: var(--shadow);
-    box-shadow: var(--panelShadow);
     pointer-events: none;
   }
 }
@@ -133,58 +130,18 @@
   border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
   border-width: 0 0 1px;
   align-items: start;
-  // panel theme
-  color: var(--panelText);
 
   &::after {
     background-color: var(--background);
     z-index: -2;
     border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
     border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
-    box-shadow: var(--panelHeaderShadow);
+    box-shadow: var(--shadow);
-  }
-
-  .button-unstyled:hover,
-  a:hover {
-    i[class*="icon-"],
-    .svg-inline--fa,
-    .iconLetter {
-      color: var(--panelText);
-    }
-  }
-
-  .faint {
-    background-color: transparent;
-    color: $fallback--faint;
-    color: var(--panelFaint, $fallback--faint);
   }
 
   &:not(.-flexible-height) {
     > .button-default {
       flex-shrink: 0;
-
-      &,
-      i[class*="icon-"] {
-        color: $fallback--text;
-        color: var(--btnPanelText, $fallback--text);
-      }
-
-      &:active {
-        background-color: $fallback--fg;
-        background-color: var(--btnPressedPanel, $fallback--fg);
-        color: $fallback--text;
-        color: var(--btnPressedPanelText, $fallback--text);
-      }
-
-      &:disabled {
-        color: $fallback--text;
-        color: var(--btnDisabledPanelText, $fallback--text);
-      }
-
-      &.toggled {
-        color: $fallback--text;
-        color: var(--btnToggledPanelText, $fallback--text);
-      }
     }
   }
 
@@ -227,6 +184,6 @@
   align-items: center;
   border-width: 1px 0 0;
   border-style: solid;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
 }
 /* stylelint-enable no-descending-specificity */

src/services/theme_data/theme_data_3.service.js

@@ -11,7 +11,8 @@ import Root from 'src/components/root.style.js'
 import TopBar from 'src/components/top_bar.style.js'
 import Underlay from 'src/components/underlay.style.js'
 import Popover from 'src/components/popover.style.js'
-import DropdownMenu from 'src/components/dropdown_menu.style.js'
+import Modals from 'src/components/modals.style.js'
+import MenuItem from 'src/components/menu_item.style.js'
 import Panel from 'src/components/panel.style.js'
 import PanelHeader from 'src/components/panel_header.style.js'
 import Button from 'src/components/button.style.js'
@@ -19,34 +20,11 @@ import Input from 'src/components/input.style.js'
 import Text from 'src/components/text.style.js'
 import Link from 'src/components/link.style.js'
 import Icon from 'src/components/icon.style.js'
+import Border from 'src/components/border.style.js'
 
 const DEBUG = false
 
 export const DEFAULT_SHADOWS = {
-  panel: [{
-    x: 1,
-    y: 1,
-    blur: 4,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.6
-  }],
-  topBar: [{
-    x: 0,
-    y: 0,
-    blur: 4,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.6
-  }],
-  popup: [{
-    x: 2,
-    y: 2,
-    blur: 3,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.5
-  }],
   avatar: [{
     x: 0,
     y: 1,
@@ -54,9 +32,7 @@ export const DEFAULT_SHADOWS = {
     spread: 0,
     color: '#000000',
     alpha: 0.7
-  }],
+  }]
-  avatarStatus: [],
-  panelHeader: []
 }
 
 const components = {
@@ -64,9 +40,11 @@ const components = {
   Text,
   Link,
   Icon,
+  Border,
   Underlay,
+  Modals,
   Popover,
-  DropdownMenu,
+  MenuItem,
   Panel,
   PanelHeader,
   TopBar,
@@ -196,16 +174,41 @@ export const init = (extraRuleset, palette) => {
 
   const rules = []
 
-  const ruleset = [
+  const normalizeCombination = rule => {
-    ...Object.values(components).map(c => c.defaultRules.map(r => ({ component: c.name, ...r })) || []).reduce((acc, arr) => [...acc, ...arr], []),
-    ...extraRuleset
-  ].map(rule => {
     rule.variant = rule.variant ?? 'normal'
     rule.state = [...new Set(['normal', ...(rule.state || [])])]
+  }
+
+  const rulesetUnsorted = [
+    ...Object.values(components)
+      .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r })))
+      .reduce((acc, arr) => [...acc, ...arr], []),
+    ...extraRuleset
+  ].map(rule => {
+    normalizeCombination(rule)
+    let currentParent = rule.parent
+    while (currentParent) {
+      normalizeCombination(currentParent)
+      currentParent = currentParent.parent
+    }
 
     return rule
   })
 
+  const ruleset = rulesetUnsorted
+    .map((data, index) => ({ data, index }))
+    .sort(({ data: a, index: ai }, { data: b, index: bi }) => {
+      const parentsA = unroll(a).length
+      const parentsB = unroll(b).length
+
+      if (parentsA === parentsB || (parentsB !== 0 && parentsA !== 0)) return ai - bi
+      if (parentsA === 0 && parentsB !== 0) return -1
+      if (parentsB === 0 && parentsA !== 0) return 1
+      return 0 // failsafe, shouldn't happen?
+    })
+    .map(({ data }) => data)
+
+  console.log(ruleset)
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
 
   const addRule = (rule) => {
@@ -260,6 +263,18 @@ export const init = (extraRuleset, palette) => {
             targetColor = alphaBlend(backgroundArg, amount, foregroundArg)
             break
           }
+          case 'mod': {
+            if (args.length !== 2) {
+              throw new Error(`$mod requires 2 arguments, ${args.length} were provided`)
+            }
+            const color = convert(findColor(args[0], dynamicVars)).rgb
+            const amount = Number(args[1])
+            const effectiveBackground = dynamicVars.lowerLevelBackground
+            const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
+            const mod = isLightOnDark ? 1 : -1
+            targetColor = brightness(amount * mod, color).rgb
+            break
+          }
         }
       } catch (e) {
         console.error('Failure executing color function', e)
@@ -332,12 +347,12 @@ export const init = (extraRuleset, palette) => {
   }
 
   const processInnerComponent = (component, parent) => {
-    const parentList = parent ? unroll(parent).reverse().map(c => c.component) : []
+    // const parentList = parent ? unroll(parent).reverse().map(c => c.component) : []
-    if (!component.virtual) {
+    // if (!component.virtual) {
-      const path = [...parentList, component.name].join(' > ')
+    //   const path = [...parentList, component.name].join(' > ')
-      console.log('Component ' + path + ' process starting')
+    //   console.log('Component ' + path + ' process starting')
-    }
+    // }
-    const t0 = performance.now()
+    // const t0 = performance.now()
     const {
       validInnerComponents = [],
       states: originalStates = {},
@@ -359,7 +374,7 @@ export const init = (extraRuleset, palette) => {
     }).reduce((acc, x) => [...acc, ...x], [])
 
     stateVariantCombination.forEach(combination => {
-      const tt0 = performance.now()
+      // const tt0 = performance.now()
       const soloSelector = ruleToSelector({ component: component.name, ...combination }, true)
       const selector = ruleToSelector({ component: component.name, ...combination, parent }, true)
 
@@ -422,6 +437,11 @@ export const init = (extraRuleset, palette) => {
           }
         }
 
+        if (component.name === 'Text' && combination.variant === 'normal' && computedRule.parent.component === 'MenuItem' && computedRule.parent.state.indexOf('hover') >= 0) {
+          console.log(existingRules)
+          console.log(computedRule, newTextRule)
+        }
+
         dynamicVars.inheritedBackground = lowerLevelBackground
 
         // TODO properly provide "parent" text color?
@@ -518,17 +538,17 @@ export const init = (extraRuleset, palette) => {
       }
 
       innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
-      const tt1 = performance.now()
+      // const tt1 = performance.now()
-      if (!component.virtual) {
+      // if (!component.virtual) {
-        console.log('State-variant ' + combination.variant + ' : ' + combination.state.join('+') + ' procession time: ' + (tt1 - tt0) + 'ms')
+      //   console.log('State-variant ' + combination.variant + ' : ' + combination.state.join('+') + ' procession time: ' + (tt1 - tt0) + 'ms')
-      }
+      // }
     })
 
-    const t1 = performance.now()
+    // const t1 = performance.now()
-    if (!component.virtual) {
+    // if (!component.virtual) {
-      const path = [...parentList, component.name].join(' > ')
+    //   const path = [...parentList, component.name].join(' > ')
-      console.log('Component ' + path + ' procession time: ' + (t1 - t0) + 'ms')
+    //   console.log('Component ' + path + ' procession time: ' + (t1 - t0) + 'ms')
-    }
+    // }
   }
 
   processInnerComponent(components.Root)

top_bar.style.js

@@ -5,5 +5,19 @@ export default {
     'Link',
     'Text',
     'Icon'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        shadow: [{
+          x: 0,
+          y: 0,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.6
+        }]
+      }
+    }
   ]
 }