make @songhay/index styling configurable

[BryanWilhite]

a conventional and/or configurable external CSS file should provide styling customization for the Index App

continuing on from #11

[BryanWilhite]

currently there are only 10 style files in the @songhay/index library:

component-level styling (and any shared files imported on the component level are bundled in the library)—we can see this by looking at *component.js files in the dist/ folder:

this fundamental knowledge about Angular is awesome news 👍

[BryanWilhite]

there are two leading ways to parameterize CSS in Angular:

the 2016 way, using a plain-old JavaScript object and [ngStyle]:

the 2018 way with CSS Variables and a full-blown theme directive:

[BryanWilhite]

i have set up a samples to show myself 👀 how to move forward:

• https://stackblitz.com/edit/ng-style-and-theming
• https://stackblitz.com/edit/css-variables-and-theming

it is probably possible to use CSS variables with ngStyle, assuming JavaScript properties can begin with -- 🤦‍♂️

[BryanWilhite]

it looks like the dependency on @angular/flex-layout can be removed:

[BryanWilhite]

akyinkyin theming has to be removed (except for akyinkyin.svg—would require a new issue):

[BryanWilhite]

i am totally guessing here (_index.scss):

a {
    &.index {
        &:link {
            color: var(--link-color);
        }
        &:active {
            color: var(--link-visited-color);
        }
        &:visited {
            color: var(--link-visited-color);
        }

        &:link,
        &:active,
        &:visited {
            text-decoration: var(--link-text-decoration);
        }
        &:hover {
            text-decoration: var(--link-hover-text-decoration);
            text-decoration-color: var(--link-hover-text-decoration-color);
        }
    }
}

[BryanWilhite]

in case i am wondering in future, the ---mat-option-selected-color would be this:

which is based on this (akyinkyin/_palette.scss):

$akyinkyin-light-text: map-get($map: $mat-akyinkyin-green, $key: 50);

which is wrong; it should be more like this (#00ff7e):

or exactly like this: #00ee3b which is this:

$akyinkyin-light-tint: map-get($map: $mat-akyinkyin-green, $key: A700);

[BryanWilhite]

another wild guess: @HostBinding at a parent/container component level should cascade down to child components 👀

[BryanWilhite]

okay, huge army of people helping me 🙄, let's wrap this up:

• actually apply @HostBinding on index-container level only
• work though layout issues
  • install @angular/flex-layout because it is needed 🏗
  • add dark and light :link 💄
  • deal with .mat-spinner 🔨
• publish on npm

[BryanWilhite]

setting the style property on a container component appears to cascade down to child components:

[BryanWilhite]

.mat-spinner drama:

<div *ngIf="indexEntriesStore.isBusy" fxFlex="100">
    <mat-spinner color="accent"></mat-spinner>
</div>

• declaring a fxFlex attribute on .mat-spinner is not 🔥 the way to go
• declare this on the .mat-spinner selector: margin: 0 auto;

[BryanWilhite]

add path to SVG sprites to IndexOptions