[CORL-1155] Fix theming for rebranded stream/admin (#3012)

* Repair theming and CSS variables for the rebrand

This separates the CSS variables into three sections
for admin, stream, as well as a shared set between
them.

This also adds injection of the raw colours from the
design team into post css variables.

Lastly, this re-maps the existing theme variables to
a new consolidated set with fallbacks for compatibility.

Since this is a singular commit from various WIP commits,
I am crediting @cvle as well as myself for this work.

Thank you all who helped make this rebrand with theming
possible!

CORL-1155

Co-authored-by: Chi Vinh Le <vinh@vinh.tech>

* Convert old css variables in CallOut

* Rename postive/negative => success/error

CORL-1155

* Change some CSS Variable names

* fix TextField/PasswordField colors

Co-authored-by: Chi Vinh Le <vinh@vinh.tech>

src/core/server/graph/extensions/ErrorWrappingExtension.ts

@@ -9,6 +9,7 @@ import {
   WrappedInternalError,
 } from "coral-server/errors";
 import GraphContext from "coral-server/graph/context";
+
 import { getOriginalError } from "./helpers";
 
 function hoistCoralErrorExtensions(

src/core/server/graph/loaders/CommentModerationActions.ts

@@ -1,11 +1,12 @@
 import { defaultTo } from "lodash";
 
 import GraphContext from "coral-server/graph/context";
+import { retrieveCommentModerationActionConnection } from "coral-server/models/action/moderation/comment";
+
 import {
   CommentToStatusHistoryArgs,
   UserToCommentModerationActionHistoryArgs,
 } from "coral-server/graph/schema/__generated__/types";
-import { retrieveCommentModerationActionConnection } from "coral-server/models/action/moderation/comment";
 
 export default (ctx: GraphContext) => ({
   forModerator: (

src/core/server/graph/loaders/Users.ts

@@ -2,11 +2,6 @@ import DataLoader from "dataloader";
 import { defaultTo } from "lodash";
 
 import Context from "coral-server/graph/context";
-import {
-  GQLUSER_ROLE,
-  GQLUSER_STATUS,
-  QueryToUsersArgs,
-} from "coral-server/graph/schema/__generated__/types";
 import { Connection } from "coral-server/models/helpers";
 import {
   retrieveManyUsers,
@@ -15,6 +10,12 @@ import {
   UserConnectionInput,
 } from "coral-server/models/user";
 
+import {
+  GQLUSER_ROLE,
+  GQLUSER_STATUS,
+  QueryToUsersArgs,
+} from "coral-server/graph/schema/__generated__/types";
+
 type UserConnectionFilterInput = UserConnectionInput["filter"];
 
 const roleFilter = (role?: GQLUSER_ROLE): UserConnectionFilterInput => {

src/core/server/graph/mutators/Sites.ts

@@ -1,10 +1,11 @@
 import TenantContext from "coral-server/graph/context";
+import { Site } from "coral-server/models/site";
+import { create, update } from "coral-server/services/sites";
+
 import {
   GQLCreateSiteInput,
   GQLUpdateSiteInput,
 } from "coral-server/graph/schema/__generated__/types";
-import { Site } from "coral-server/models/site";
-import { create, update } from "coral-server/services/sites";
 
 export const Sites = (ctx: TenantContext) => ({
   create: async (input: GQLCreateSiteInput): Promise<Readonly<Site> | null> =>

src/core/server/graph/resolvers/BanStatus.ts

@@ -1,6 +1,7 @@
-import { GQLBanStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
 import * as user from "coral-server/models/user";
 
+import { GQLBanStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
 export type BanStatusInput = user.ConsolidatedBanStatus & {
   userID: string;
 };

src/core/server/graph/resolvers/BanStatusHistory.ts

@@ -1,6 +1,7 @@
-import { GQLBanStatusHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
 import * as user from "coral-server/models/user";
 
+import { GQLBanStatusHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
 export const BanStatusHistory: Required<GQLBanStatusHistoryTypeResolver<
   user.BanStatusHistory
 >> = {

src/core/server/graph/resolvers/CloseCommenting.ts

@@ -1,7 +1,8 @@
-import { GQLCloseCommentingTypeResolver } from "coral-server/graph/schema/__generated__/types";
 import * as settings from "coral-server/models/settings";
 import { translate } from "coral-server/services/i18n";
 
+import { GQLCloseCommentingTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
 export const CloseCommenting: GQLCloseCommentingTypeResolver<settings.CloseCommenting> = {
   message: (closeCommenting, input, ctx) => {
     if (closeCommenting.message) {

src/core/server/graph/resolvers/CommentRevision.ts

@@ -1,7 +1,8 @@
-import { GQLCommentRevisionTypeResolver } from "coral-server/graph/schema/__generated__/types";
 import { decodeActionCounts } from "coral-server/models/action/comment";
 import { Comment, Revision } from "coral-server/models/comment";
 
+import { GQLCommentRevisionTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
 export interface WrappedCommentRevision {
   revision: Revision;
   comment: Comment;

src/core/server/graph/resolvers/DisableCommenting.ts

@@ -1,7 +1,8 @@
-import { GQLDisableCommentingTypeResolver } from "coral-server/graph/schema/__generated__/types";
 import * as settings from "coral-server/models/settings";
 import { translate } from "coral-server/services/i18n";
 
+import { GQLDisableCommentingTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
 export const DisableCommenting: GQLDisableCommentingTypeResolver<settings.DisableCommenting> = {
   message: (disableCommenting, input, ctx) => {
     if (disableCommenting.message) {

src/core/server/graph/resolvers/Flag.ts

@@ -1,8 +1,9 @@
+import * as actions from "coral-server/models/action/comment";
+
 import {
   GQLCOMMENT_FLAG_REASON,
   GQLFlagTypeResolver,
 } from "coral-server/graph/schema/__generated__/types";
-import * as actions from "coral-server/models/action/comment";
 
 export const Flag: GQLFlagTypeResolver<actions.CommentAction> = {
   reason: ({ id, reason }, args, ctx) => {

src/core/server/graph/resolvers/Invite.ts

@@ -1,6 +1,7 @@
-import { GQLInviteTypeResolver } from "coral-server/graph/schema/__generated__/types";
 import * as invite from "coral-server/models/invite";
 
+import { GQLInviteTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
 export const Invite: GQLInviteTypeResolver<invite.Invite> = {
   createdBy: ({ createdBy }, args, ctx) =>
     ctx.loaders.Users.user.load(createdBy),

src/core/server/graph/resolvers/ModerationQueue.ts

@@ -4,6 +4,7 @@ import {
   CommentConnectionInput,
   retrieveCommentConnection,
 } from "coral-server/models/comment";
+
 import {
   GQLCOMMENT_SORT,
   GQLModerationQueueTypeResolver,

src/core/server/graph/resolvers/ModeratorNote.ts

@@ -1,6 +1,7 @@
-import { GQLModeratorNoteTypeResolver } from "coral-server/graph/schema/__generated__/types";
 import * as user from "coral-server/models/user";
 
+import { GQLModeratorNoteTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
 export const ModeratorNote: Required<GQLModeratorNoteTypeResolver<
   user.ModeratorNote
 >> = {

src/core/server/graph/resolvers/PremodStatus.ts

@@ -1,6 +1,7 @@
-import { GQLPremodStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
 import * as user from "coral-server/models/user";
 
+import { GQLPremodStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
 export type PremodStatusInput = user.ConsolidatedPremodStatus & {
   userID: string;
 };

src/core/server/graph/resolvers/PremodStatusHistory.ts

@@ -1,6 +1,7 @@
-import { GQLPremodStatusHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
 import * as user from "coral-server/models/user";
 
+import { GQLPremodStatusHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
 export const PremodStatusHistory: Required<GQLPremodStatusHistoryTypeResolver<
   user.PremodStatusHistory
 >> = {

src/core/server/graph/resolvers/Profile.ts

@@ -1,6 +1,7 @@
-import { GQLProfileTypeResolver } from "coral-server/graph/schema/__generated__/types";
 import * as user from "coral-server/models/user";
 
+import { GQLProfileTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
 const resolveType: GQLProfileTypeResolver<user.Profile> = (profile) => {
   switch (profile.type) {
     case "local":

src/core/server/graph/resolvers/SuspensionStatus.ts

@@ -1,6 +1,7 @@
-import { GQLSuspensionStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
 import * as user from "coral-server/models/user";
 
+import { GQLSuspensionStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
 export type SuspensionStatusInput = user.ConsolidatedSuspensionStatus & {
   userID: string;
 };

src/core/server/graph/resolvers/SuspensionStatusHistory.ts

@@ -1,6 +1,7 @@
-import { GQLSuspensionStatusHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
 import * as user from "coral-server/models/user";
 
+import { GQLSuspensionStatusHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
 export const SuspensionStatusHistory: Required<GQLSuspensionStatusHistoryTypeResolver<
   user.SuspensionStatusHistory
 >> = {

src/core/server/graph/resolvers/Tag.ts

@@ -1,6 +1,7 @@
-import { GQLTagTypeResolver } from "coral-server/graph/schema/__generated__/types";
 import { CommentTag } from "coral-server/models/comment/tag";
 
+import { GQLTagTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
 export const Tag: GQLTagTypeResolver<CommentTag> = {
   code: ({ type }) => type,
   createdBy: ({ createdBy }, input, ctx) => {

src/core/server/graph/resolvers/UserStatus.ts

@@ -1,8 +1,9 @@
+import * as user from "coral-server/models/user";
+
 import {
   GQLUSER_STATUS,
   GQLUserStatusTypeResolver,
 } from "coral-server/graph/schema/__generated__/types";
-import * as user from "coral-server/models/user";
 
 import { BanStatusInput } from "./BanStatus";
 import { PremodStatusInput } from "./PremodStatus";

src/core/server/graph/resolvers/UsernameHistory.ts

@@ -1,6 +1,7 @@
-import { GQLUsernameHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
 import * as user from "coral-server/models/user";
 
+import { GQLUsernameHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
 export const UsernameHistory: Required<GQLUsernameHistoryTypeResolver<
   user.UsernameHistory
 >> = {

src/core/server/graph/resolvers/UsernameStatus.ts

@@ -1,6 +1,7 @@
-import { GQLUsernameStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
 import * as user from "coral-server/models/user";
 
+import { GQLUsernameStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
 export type UsernameStatusInput = user.ConsolidatedUsernameStatus & {
   userID: string;
 };

src/core/server/graph/scalars/locale.ts

@@ -1,7 +1,8 @@
-import { LOCALES } from "coral-common/helpers/i18n";
 import { GraphQLScalarType } from "graphql";
 import { Kind } from "graphql/language";
 
+import { LOCALES } from "coral-common/helpers/i18n";
+
 function assertSupportLocale(locale: string) {
   if (!LOCALES.includes(locale as any)) {
     throw new Error(`Supported locales are ${JSON.stringify(LOCALES)}`);