feat: move theme and css variables to ui-kit (#13454)

.betterer.results

@@ -347,7 +347,7 @@ exports[`stricter compilation`] = {
       [86, 19, 5, "Argument of type \'unknown\' is not assignable to parameter of type \'SetStateAction<undefined>\'.", "165548477"],
       [90, 19, 5, "Argument of type \'unknown\' is not assignable to parameter of type \'SetStateAction<undefined>\'.", "165548477"]
     ],
-    "src/script/auth/page/Root.tsx:2721332349": [
+    "src/script/auth/page/Root.tsx:1368054504": [
       [130, 16, 9, "No overload matches this call.\\n  Overload 1 of 2, \'(props: (RouteProps<string, { [x: string]: string | undefined; }> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string | undefined; }>>) | Readonly<...>): Route<...>\', gave the following error.\\n    Type \'false | ConnectedComponent<({ teamName, enterTeamCreationFlow, resetInviteErrors, pushAccountRegistrationData, authError, }: Props & { authError: Error; teamName: string; } & { enterTeamCreationFlow: () => Promise<void>; pushAccountRegistrationData: (registration: Partial<RegistrationDataState>) => Promise<...>; res...\' is not assignable to type \'ComponentType<any> | ComponentType<RouteComponentProps<any, StaticContext, unknown>> | undefined\'.\\n      Type \'false\' is not assignable to type \'ComponentType<any> | ComponentType<RouteComponentProps<any, StaticContext, unknown>> | undefined\'.\\n  Overload 2 of 2, \'(props: RouteProps<string, { [x: string]: string | undefined; }> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string | undefined; }>>, context: any): Route<...>\', gave the following error.\\n    Type \'false | ConnectedComponent<({ teamName, enterTeamCreationFlow, resetInviteErrors, pushAccountRegistrationData, authError, }: Props & { authError: Error; teamName: string; } & { enterTeamCreationFlow: () => Promise<void>; pushAccountRegistrationData: (registration: Partial<RegistrationDataState>) => Promise<...>; res...\' is not assignable to type \'ComponentType<any> | ComponentType<RouteComponentProps<any, StaticContext, unknown>> | undefined\'.", "4247110506"],
       [173, 16, 9, "No overload matches this call.\\n  Overload 1 of 2, \'(props: (RouteProps<string, { [x: string]: string | undefined; }> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string | undefined; }>>) | Readonly<...>): Route<...>\', gave the following error.\\n    Type \'false | ConnectedComponent<({ account, authError, currentFlow, entropyData, doRegisterPersonal, doRegisterTeam, doSendActivationCode, }: Props & { account: RegistrationDataState; authError: Error; currentFlow: string; entropyData: Uint8Array | undefined; } & { ...; }) => Element, Omit<...> & ConnectProps>\' is not assignable to type \'ComponentType<any> | ComponentType<RouteComponentProps<any, StaticContext, unknown>> | undefined\'.\\n      Type \'false\' is not assignable to type \'ComponentType<any> | ComponentType<RouteComponentProps<any, StaticContext, unknown>> | undefined\'.\\n  Overload 2 of 2, \'(props: RouteProps<string, { [x: string]: string | undefined; }> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string | undefined; }>>, context: any): Route<...>\', gave the following error.\\n    Type \'false | ConnectedComponent<({ account, authError, currentFlow, entropyData, doRegisterPersonal, doRegisterTeam, doSendActivationCode, }: Props & { account: RegistrationDataState; authError: Error; currentFlow: string; entropyData: Uint8Array | undefined; } & { ...; }) => Element, Omit<...> & ConnectProps>\' is not assignable to type \'ComponentType<any> | ComponentType<RouteComponentProps<any, StaticContext, unknown>> | undefined\'.", "4247110506"],
       [177, 16, 9, "No overload matches this call.\\n  Overload 1 of 2, \'(props: (RouteProps<string, { [x: string]: string | undefined; }> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string | undefined; }>>) | Readonly<...>): Route<...>\', gave the following error.\\n    Type \'false | ConnectedComponent<({ isPersonalFlow, enterPersonalCreationFlow }: Props & { isPersonalFlow: boolean; } & { enterPersonalCreationFlow: () => Promise<void>; }) => Element, Omit<Props & { isPersonalFlow: boolean; } & { ...; }, \\"enterPersonalCreationFlow\\" | \\"isPersonalFlow\\"> & ConnectProps>\' is not assignable to type \'ComponentType<any> | ComponentType<RouteComponentProps<any, StaticContext, unknown>> | undefined\'.\\n      Type \'false\' is not assignable to type \'ComponentType<any> | ComponentType<RouteComponentProps<any, StaticContext, unknown>> | undefined\'.\\n  Overload 2 of 2, \'(props: RouteProps<string, { [x: string]: string | undefined; }> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string | undefined; }>>, context: any): Route<...>\', gave the following error.\\n    Type \'false | ConnectedComponent<({ isPersonalFlow, enterPersonalCreationFlow }: Props & { isPersonalFlow: boolean; } & { enterPersonalCreationFlow: () => Promise<void>; }) => Element, Omit<Props & { isPersonalFlow: boolean; } & { ...; }, \\"enterPersonalCreationFlow\\" | \\"isPersonalFlow\\"> & ConnectProps>\' is not assignable to type \'ComponentType<any> | ComponentType<RouteComponentProps<any, StaticContext, unknown>> | undefined\'.", "4247110506"],
@@ -2045,8 +2045,8 @@ exports[`stricter compilation`] = {
     "src/script/page/LeftSidebar/panels/StartUI/components/GroupList.test.tsx:87150494": [
       [34, 63, 38, "Argument of type \'Element | null\' is not assignable to parameter of type \'Element\'.\\n  Type \'null\' is not assignable to type \'Element\'.", "495210063"]
     ],
-    "src/script/page/MainContent/MainContent.tsx:1144210882": [
-      [109, 28, 12, "Type \'Conversation | null\' is not assignable to type \'Conversation\'.\\n  Type \'null\' is not assignable to type \'Conversation\'.", "1670678216"]
+    "src/script/page/MainContent/MainContent.tsx:2029280374": [
+      [68, 28, 12, "Type \'Conversation | null\' is not assignable to type \'Conversation\'.\\n  Type \'null\' is not assignable to type \'Conversation\'.", "1670678216"]
     ],
     "src/script/page/MainContent/panels/Collection/Collection.test.tsx:1028939995": [
       [122, 12, 5, "Type \'HTMLInputElement | null\' is not assignable to type \'HTMLInputElement\'.\\n  Type \'null\' is not assignable to type \'HTMLInputElement\'.", "178805363"]

package.json

@@ -4,7 +4,7 @@
     "@wireapp/antiscroll-2": "1.3.1",
     "@wireapp/avs": "8.2.2",
     "@wireapp/core": "29.1.3",
-    "@wireapp/react-ui-kit": "8.11.4",
+    "@wireapp/react-ui-kit": "8.13.1",
     "@wireapp/store-engine-dexie": "1.6.10",
     "@wireapp/store-engine-sqleet": "1.7.14",
     "@wireapp/webapp-events": "0.13.2",

src/script/auth/page/Root.tsx

@@ -104,7 +104,7 @@ const Root: React.FC<RootProps & ConnectedProps & DispatchProps> = ({
 
   return (
     <IntlProvider locale={normalizeLanguage(language)} messages={loadLanguage(language)}>
-      <StyledApp themeId={THEME_ID.LIGHT} style={{display: 'flex', height: '100%', minHeight: '100vh'}}>
+      <StyledApp themeId={THEME_ID.DEFAULT} style={{display: 'flex', height: '100%', minHeight: '100vh'}}>
         {isFetchingSSOSettings ? (
           <ContainerXS centerText verticalCenter style={{justifyContent: 'center'}}>
             <Loading />

src/script/auth/util/test/TestUtil.tsx

@@ -37,7 +37,7 @@ export const withStore = (
 
 export const withIntl = (component: React.ReactNode) => <IntlProvider locale="en">{component}</IntlProvider>;
 
-export const withTheme = (component: React.ReactNode) => <StyledApp themeId={THEME_ID.LIGHT}>{component}</StyledApp>;
+export const withTheme = (component: React.ReactNode) => <StyledApp themeId={THEME_ID.DEFAULT}>{component}</StyledApp>;
 
 export const withRouter = (component: React.ReactNode, history: History) => (
   <Router history={history}>{component}</Router>

src/script/page/MainContent/MainContent.tsx

@@ -34,7 +34,7 @@ import AVPreferences from './panels/preferences/AVPreferences';
 import {container} from 'tsyringe';
 import {ClientState} from '../../client/ClientState';
 import {UserState} from '../../user/UserState';
-import {StyledApp} from '@wireapp/react-ui-kit';
+import {StyledApp, THEME_ID} from '@wireapp/react-ui-kit';
 
 // Ko imported components
 import '../message-list/InputBarControls';
@@ -61,47 +61,6 @@ const MainContent: React.FC<LeftSidebarProps> = ({
 
   const {isFederated} = contentViewModel;
 
-  const theme = {
-    Checkbox: {
-      background: 'var(--checkbox-background)',
-      border: 'var(--checkbox-border)',
-      borderFocused: 'blue',
-      disableBgColor: 'var(--checkbox-background-disabled)',
-      disableBorderColor: 'var(--checkbox-border-disabled)',
-      disablecheckedBgColor: 'var(--checkbox-background-disabled-selected)',
-      invalidBorderColor: 'var(--checkbox-alert)',
-    },
-    IconButton: {
-      activePrimaryBgColor: 'var(--accent-color-highlight)',
-      focusBorderColor: 'var(--accent-color-border)',
-      hoverPrimaryBgColor: 'var(--icon-button-primary-hover-bg)',
-      primaryActiveFillColor: 'var(--icon-primary-active-fill)',
-      primaryBgColor: 'var(--icon-button-primary-enabled-bg)',
-      primaryBorderColor: 'var(--icon-button-primary-border)',
-      primaryDisabledBgColor: 'var(--icon-button-primary-disabled-bg)',
-      primaryDisabledBorderColor: 'var(--icon-button-primary-disabled-border)',
-      primaryHoverBorderColor: 'var(--icon-button-primary-hover-border)',
-      secondaryActiveBorderColor: 'var(--icon-secondary-active-border)',
-    },
-    Input: {
-      backgroundColor: 'var(--app-bg-secondary)',
-      backgroundColorDisabled: 'var(--sidebar-bg)',
-      labelColor: 'var(--text-input-label)',
-      placeholderColor: 'var(--text-input-placeholder)',
-    },
-    Select: {
-      borderColor: 'var(--border-color)',
-      contrastTextColor: 'var(--text-input-background)',
-      disabledColor: 'var(--text-input-placeholder)',
-    },
-    general: {
-      backgroundColor: 'var(--app-bg)',
-      color: 'var(--main-color)',
-      dangerColor: 'var(--res-500)',
-      primaryColor: 'var(--accent-color)',
-    },
-  };
-
   let title = '';
   let content = null;
   switch (state) {
@@ -192,7 +151,7 @@ const MainContent: React.FC<LeftSidebarProps> = ({
   return (
     <>
       <h1 className="visually-hidden">{title}</h1>
-      <StyledApp theme={theme} css={{backgroundColor: 'unset', height: '100%'}}>
+      <StyledApp themeId={THEME_ID.DEFAULT} css={{backgroundColor: 'unset', height: '100%'}}>
         <SwitchTransition>
           <Animated key={state}>{content}</Animated>
         </SwitchTransition>

src/style/common/mixins.less

@@ -47,7 +47,6 @@
   .setVariables(preference-account-input-bg);
   .setVariables(text-input-editing text-input-background text-input-border text-input-border-hover text-input-placeholder text-input-color text-input-alert text-input-disabled text-input-label text-input-success);
   .setVariables(checkbox-background checkbox-background-selected checkbox-background-disabled checkbox-background-disabled-selected checkbox-border checkbox-border-hover checkbox-border-disabled checkbox-alert);
-  .setVariables(icon-button-primary-enabled-bg icon-button-primary-hover-bg icon-button-primary-border icon-button-primary-disabled-border icon-button-primary-hover-border icon-button-primary-disabled-bg);
   .setVariables(message-quote-bg);
   .setVariables(group-creation-modal-teamname-input-bg);
 }

src/style/foundation/themes.less

@@ -90,16 +90,6 @@ body.theme-default {
   @checkbox-border-disabled: @gray-60;
   @checkbox-alert: @red-500;
 
-  // ----------------------------------------------------------------------------
-  // Button
-  // ----------------------------------------------------------------------------
-  @icon-button-primary-enabled-bg: @white;
-  @icon-button-primary-hover-bg: @gray-20;
-  @icon-button-primary-border: @gray-40;
-  @icon-button-primary-disabled-bg: @gray-20;
-  @icon-button-primary-disabled-border: @gray-40;
-  @icon-button-primary-hover-border: @gray-50;
-
   // ----------------------------------------------------------------------------
   // Message Quote Vertical Bar
   // ----------------------------------------------------------------------------
@@ -191,16 +181,6 @@ body.theme-dark {
   @checkbox-border-disabled: @gray-70;
   @checkbox-alert: @red-dark-500;
 
-  // ----------------------------------------------------------------------------
-  // Button
-  // ----------------------------------------------------------------------------
-  @icon-button-primary-enabled-bg: @gray-90;
-  @icon-button-primary-hover-bg: @gray-80;
-  @icon-button-primary-border: @gray-100;
-  @icon-button-primary-disabled-bg: @gray-95;
-  @icon-button-primary-disabled-border: @gray-90;
-  @icon-button-primary-hover-border: @gray-70;
-
   // ----------------------------------------------------------------------------
   // Message Quote Vertical Bar
   // ----------------------------------------------------------------------------

yarn.lock

@@ -3419,10 +3419,10 @@
   dependencies:
     protobufjs "6.10.2"
 
-"@wireapp/react-ui-kit@8.11.4":
-  version "8.11.4"
-  resolved "https://registry.yarnpkg.com/@wireapp/react-ui-kit/-/react-ui-kit-8.11.4.tgz#77be2c670df10e61fe6d023c4f072852f6e6d56d"
-  integrity sha512-4ejm1CWlHBejyC81ok9D5CTQNb9eIzRslYNHxOAp9JGb8FnOObCWDg4sgVByD1KgpUOABZAOGSvP5SvWtDt5sg==
+"@wireapp/react-ui-kit@8.13.1":
+  version "8.13.1"
+  resolved "https://registry.yarnpkg.com/@wireapp/react-ui-kit/-/react-ui-kit-8.13.1.tgz#bdaeb4b4335d4f064847f8acaf43e9118ce0d955"
+  integrity sha512-/27wUgypwvAV7Wmkn3/k+WQqpWdpx6PpHOHPZQrbv05JQ+XENNJQzBqo265qrYOTFfCQYzjMOFSNKtVcITmFUg==
   dependencies:
     "@emotion/react" "11.9.0"
     "@types/color" "3.0.2"