New Admin UI - Colors and Theming

[adrians5j]

Changes

For starters, this PR brings in the primitive tokens for colors (check theme out here).

With these tokens now in theme.scss, we now reference them in alias tokens. Previously, alias tokens directly had color codes assigned to them.

All of this ultimately enables easier Admin theme customization, which is done via the new AdminConfig.Theme React component. Here are two examples.

// extensions/adminTheme/src/index.tsx
import React from "react";
import { AdminConfig } from "@webiny/app-serverless-cms";

const { Theme } = AdminConfig;

export const Extension = () => {
    return (
        <AdminConfig>
            <Theme>
                <Theme.Color palette={"primary"} color={"purple"} />
            </Theme>
        </AdminConfig>
    );
};

// extensions/adminTheme/src/index.tsx
import React from "react";
import { AdminConfig, Plugin, IsNotRootTenant, IsRootTenant } from "@webiny/app-serverless-cms";

const { Theme } = AdminConfig;

export const Extension = () => {
    return (
        <Plugin>
            <IsRootTenant>
                <AdminConfig>
                    <Theme>
                        <Theme.Color palette={"primary"} color={"purple"} />
                    </Theme>
                </AdminConfig>
            </IsRootTenant>
            <IsNotRootTenant>
                <AdminConfig>
                    <Theme>
                        <Theme.Color palette={"primary"} color={"blue"} />
                    </Theme>
                </AdminConfig>
            </IsNotRootTenant>
        </Plugin>
    );
};

There are a couple of things to note though.

First, not that the AdminConfig.Theme component is actually NOT a React properties component.
packages/app-wcp/src/WcpProvider.tsx

Second, while I was testing the above code examples, I noticed glitches. ✍🏻

Additional Changes

1. Minor Cleanups

1.1. packages/app-admin-cognito/src/components/StyledComponents.ts

Saw links in the sign in screen still orange, because there was some custom styling done with the --mdc-theme-... CSS variables.

1.2. packages/app-admin-rmwc/src/modules/Navigation/Styled.ts

Removed custom styling since it was no longer needed. There will be probably more to remove but for now didn't go too far.

1.3. packages/app-admin/src/styles/material-theme-assignments.scss

Accidentally saw this file and decided to remove CSS that I was sure we won't be needing any more (old components). More cleaning up in this file will be needed.

2. Updated app-serverless-cms Exports

This package now exports not only the new AdminConfig, but also the tenancy-related components. Better to have everything in one place (easier for users).

3. Removed Component Mount Tracking

Component mount tracking was removed in packages/app-tenant-manager/src/index.tsx. This basically resolved an issue where, in a MT setup, in a specific case you would not see the tenant selector in top-right corner of the screen. Thanks goes to Pavel for this one.

How Has This Been Tested?

Manually.

Documentation

Add theming doc.