chore: wip

packages/react-ui/internal/themes/BasicDarkTheme.ts

@@ -1,4 +1,4 @@
-import { exposeGetters } from '../../lib/theming/ThemeHelpers';
+import { applyMarkers, exposeGetters, markAsDarkTheme } from '../../lib/theming/ThemeHelpers';
 
 import { BasicLightTheme } from './BasicLightTheme';
 
@@ -552,6 +552,6 @@ export class BasicDarkThemeInternal extends (class {} as typeof BasicLightTheme)
 }
 
 export const BasicDarkTheme = Object.setPrototypeOf(
-  exposeGetters(BasicDarkThemeInternal),
+  applyMarkers(exposeGetters(BasicDarkThemeInternal), [markAsDarkTheme]),
   BasicLightTheme,
 ) as typeof BasicDarkThemeInternal;

packages/react-ui/internal/themes/BasicLightTheme.ts

@@ -1,5 +1,5 @@
 import * as ColorFunctions from '../../lib/styles/ColorFunctions';
-import { exposeGetters } from '../../lib/theming/ThemeHelpers';
+import { applyMarkers, exposeGetters, markAsTheme2022 } from '../../lib/theming/ThemeHelpers';
 
 export class BasicLightThemeInternal {
   //#region Common variables
@@ -2484,4 +2484,6 @@ export class BasicLightThemeInternal {
   //#endregion
 }
 
-export const BasicLightTheme = exposeGetters(BasicLightThemeInternal);
+export const BasicLightTheme = applyMarkers(exposeGetters(BasicLightThemeInternal), [
+  markAsTheme2022,
+]) as typeof BasicLightThemeInternal;

packages/react-ui/internal/themes/DarkTheme2022_0.ts

@@ -0,0 +1,10 @@
+import { applyMarkers, exposeGetters, markThemeVersion } from '../../lib/theming/ThemeHelpers';
+
+import { BasicDarkTheme } from './BasicDarkTheme';
+
+export class DarkThemeInternal2022_0 extends (class {} as typeof BasicDarkTheme) {}
+
+export const DarkTheme2022_0 = Object.setPrototypeOf(
+  applyMarkers(exposeGetters(DarkThemeInternal2022_0), [markThemeVersion(0)]),
+  BasicDarkTheme,
+) as typeof BasicDarkTheme;

packages/react-ui/internal/themes/DarkTheme2022_1.ts

@@ -0,0 +1,10 @@
+import { applyMarkers, exposeGetters, markThemeVersion } from '../../lib/theming/ThemeHelpers';
+
+import { DarkTheme2022_0 } from './DarkTheme2022_0';
+
+export class DarkThemeInternal2022_1 extends (class {} as typeof DarkTheme2022_0) {}
+
+export const DarkTheme2022_1 = Object.setPrototypeOf(
+  applyMarkers(exposeGetters(DarkThemeInternal2022_1), [markThemeVersion(1)]),
+  DarkTheme2022_0,
+) as typeof DarkTheme2022_0;

packages/react-ui/internal/themes/LightTheme2022_0.ts

@@ -0,0 +1,10 @@
+import { applyMarkers, exposeGetters, markThemeVersion } from '../../lib/theming/ThemeHelpers';
+
+import { BasicLightTheme } from './BasicLightTheme';
+
+export class LightThemeInternal2022_0 extends (class {} as typeof BasicLightTheme) {}
+
+export const LightTheme2022_0 = Object.setPrototypeOf(
+  applyMarkers(exposeGetters(LightThemeInternal2022_0), [markThemeVersion(0)]),
+  BasicLightTheme,
+) as typeof BasicLightTheme;

packages/react-ui/internal/themes/LightTheme2022_1.ts

@@ -0,0 +1,10 @@
+import { applyMarkers, exposeGetters, markThemeVersion } from '../../lib/theming/ThemeHelpers';
+
+import { LightTheme2022_0 } from './LightTheme2022_0';
+
+export class LightThemeInternal2022_1 extends (class {} as typeof LightTheme2022_0) {}
+
+export const LightTheme2022_1 = Object.setPrototypeOf(
+  applyMarkers(exposeGetters(LightThemeInternal2022_1), [markThemeVersion(1)]),
+  LightTheme2022_0,
+) as typeof LightTheme2022_0;

packages/react-ui/lib/theming/ThemeHelpers.ts

@@ -26,6 +26,10 @@ export const REACT_UI_THEME_MARKERS = {
     key: '__IS_REACT_UI_THEME_2022__',
     value: true,
   },
+  themeVersion: {
+    key: '__REACT_UI_THEME_2022_VERSION__',
+    value: 0,
+  },
 };
 
 // backward compatible
@@ -58,11 +62,27 @@ export const markAsTheme2022: Marker = (theme) => {
   });
 };
 
+export const markThemeVersion: (version: number) => Marker = (version) => (theme) => {
+  return Object.create(theme, {
+    [REACT_UI_THEME_MARKERS.themeVersion.key]: {
+      value: version,
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    },
+  });
+};
+
 export const isTheme2022 = (theme: Theme | ThemeIn): boolean => {
   // @ts-expect-error: internal value.
   return theme[REACT_UI_THEME_MARKERS.theme2022.key] === REACT_UI_THEME_MARKERS.theme2022.value;
 };
 
+export const isThemeVersionGreaterOrEqual = (theme: Theme | ThemeIn, version: number): boolean => {
+  // @ts-expect-error: internal value.
+  return theme[REACT_UI_THEME_MARKERS.themeVersion.value] >= version;
+};
+
 export function findPropertyDescriptor(theme: Theme, propName: string) {
   // TODO: Rewrite for loop.
   // TODO: Enable `no-param-reassign` rule.
@@ -76,9 +96,7 @@ export function findPropertyDescriptor(theme: Theme, propName: string) {
 }
 
 export function applyMarkers(theme: Readonly<Theme>, markers: Markers) {
-  let markedTheme: Readonly<Theme> = theme;
-  markers.forEach((marker) => {
-    markedTheme = marker(theme);
-  });
-  return markedTheme;
+  return markers.reduce((markedTheme, marker) => {
+    return marker(markedTheme);
+  }, Object.create(theme)) as typeof theme;
 }

packages/react-ui/lib/theming/themes/DarkTheme.ts

@@ -1,5 +1,4 @@
 import { ThemeFactory } from '../ThemeFactory';
 import { BasicDarkTheme } from '../../../internal/themes/BasicDarkTheme';
-import { applyMarkers, markAsDarkTheme, markAsTheme2022 } from '../ThemeHelpers';
 
-export const DARK_THEME = applyMarkers(ThemeFactory.create({}, BasicDarkTheme), [markAsTheme2022, markAsDarkTheme]);
+export const DARK_THEME = ThemeFactory.create({}, BasicDarkTheme);

packages/react-ui/lib/theming/themes/DarkTheme2022_0.ts

@@ -1,5 +1,4 @@
 import { ThemeFactory } from '../ThemeFactory';
+import { DarkTheme2022_0 } from '../../../internal/themes/DarkTheme2022_0';
 
-import { DARK_THEME } from './DarkTheme';
-
-export const DARK_THEME_2022_0 = ThemeFactory.create({}, DARK_THEME);
+export const DARK_THEME_2022_0 = ThemeFactory.create({}, DarkTheme2022_0);

packages/react-ui/lib/theming/themes/LightTheme.ts

@@ -1,5 +1,4 @@
 import { ThemeFactory } from '../ThemeFactory';
 import { BasicLightTheme } from '../../../internal/themes/BasicLightTheme';
-import { applyMarkers, markAsTheme2022 } from '../ThemeHelpers';
 
-export const LIGHT_THEME = applyMarkers(ThemeFactory.create({}, BasicLightTheme), [markAsTheme2022]);
+export const LIGHT_THEME = ThemeFactory.create({}, BasicLightTheme);

packages/react-ui/lib/theming/themes/LightTheme2022_0.ts

@@ -1,5 +1,4 @@
 import { ThemeFactory } from '../ThemeFactory';
+import { LightTheme2022_0 } from '../../../internal/themes/LightTheme2022_0';
 
-import { LIGHT_THEME } from './LightTheme';
-
-export const LIGHT_THEME_2022_0 = ThemeFactory.create({}, LIGHT_THEME);
+export const LIGHT_THEME_2022_0 = ThemeFactory.create({}, LightTheme2022_0);