Remove theming

.storybook/decorators/withDocsContainer.jsx

@@ -1,11 +1,10 @@
 import { DocsContainer } from "@storybook/addon-docs";
-import { ShareGateTheme, ThemeProvider } from "@components/styling";
+import { ThemeProvider } from "@components/styling";
 
 function ThemedDocsContainer({ context, children }) {
-    const theme = context.globals.theme === "sharegate" ? ShareGateTheme : ShareGateTheme;
 
     return (
-        <ThemeProvider theme={theme} colorScheme="light">
+        <ThemeProvider colorScheme="light">
             {children}
         </ThemeProvider>
     );
@@ -19,4 +18,4 @@ export function withDocsContainer(context, children) {
             </ThemedDocsContainer>
         </DocsContainer>
     );
-}
+}

.storybook/decorators/withThemeProvider.jsx

@@ -1,4 +1,4 @@
-import { ShareGateTheme, ThemeProvider } from "@components/styling";
+import { ThemeProvider } from "@components/styling";
 
 import { isChromatic } from "../env";
 import { getGlobals } from "../utils";
@@ -9,7 +9,6 @@ export function withThemeProvider(story, context) {
 
     return (
         <ThemeProvider
-            theme={ShareGateTheme}
             colorScheme={globals.colorScheme}
             // min-height ensure popup components renders correctly in chromatic tests.
             height={viewMode === "story" || isChromatic ? "600px" : undefined}

.storybook/preview.js

@@ -2,15 +2,12 @@ import "@css/normalize.css";
 import "@components/index.css";
 import "./styles";
 
-import { ShareGateTheme, createThemeVars } from "@components/styling";
 import { isChromatic, isDocs } from "./env";
 import { withBackgroundMatchingColorScheme, withCenteredCanvas, withDocsContainer, withThemeProvider } from "./decorators";
 
 import { Code, Highlight } from "@stories/mdx";
 import { Themes } from "./styles/themes";
 
-createThemeVars([ShareGateTheme]);
-
 if (!isChromatic) {
     // Custom font makes chromatic inconsistent and cause "false positive". View https://www.chromatic.com/docs/resource-loading#loading-custom-fonts.
     import("@css/font/index.css");

docs/features/color-schemes/ColorSchemeToggle.sample.jsx

@@ -14,7 +14,7 @@ render(() => {
     const { colorScheme: parentColorScheme } = useColorSchemeContext();
 
     return (
-        <ThemeProvider theme={ShareGateTheme} colorScheme={parentColorScheme}>
+        <ThemeProvider colorScheme={parentColorScheme}>
             <Div backgroundColor="alias-surface" padding={2}>
                 <ColorSchemeToggle />
             </Div>

docs/features/color-schemes/ColorSchemes.stories.mdx

@@ -15,15 +15,15 @@ Orbiter supports by default a *light* and a *dark* color scheme for all componen
 A color scheme can either be enforced by providing a specific `light` or `dark` value to a [theme provider](?path=/story/theme-provider--default-story):
 
 ```jsx
-<ThemeProvider theme={ShareGateTheme} colorScheme="dark">
+<ThemeProvider colorScheme="dark">
     <Button variant="secondary">Cutoff</Button>
 </ThemeProvider>
 ```
 
 or be selected according to the [user's operating system setting](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) by providing the `system` value:
 
 ```jsx
-<ThemeProvider theme={ShareGateTheme} colorScheme="system" defaultColorScheme="light">
+<ThemeProvider colorScheme="system" defaultColorScheme="light">
     <Button variant="secondary">Cutoff</Button>
 </ThemeProvider>
 ```

docs/features/tokens/TokenTable.jsx

@@ -1,4 +1,4 @@
-import { ShareGateTheme, ThemeProvider } from "@components/styling";
+import { ThemeProvider } from "@components/styling";
 import { arrayOf, func, shape, string } from "prop-types";
 
 import { Div, Span } from "@components/html";
@@ -36,7 +36,7 @@ export function TokenTable({ colors }) {
 
     return (
         // eslint-disable-next-line react/destructuring-assignment
-        <ThemeProvider theme={ShareGateTheme} colorScheme={docsContext.globals.colorScheme}>
+        <ThemeProvider colorScheme={docsContext.globals.colorScheme}>
             <Table
                 className="token-table"
                 columns={[

docs/features/tokens/Tokens.stories.mdx

@@ -1,7 +1,7 @@
 import { TokenTable, textRenderer, fontSizeRenderer, backgroundRenderer, borderRenderer, durationRenderer, easingRenderer, iconRenderer, lineHeightRenderer, boxShadowRenderer, radiiRenderer, sizingRenderer, spacingRenderer, fontWeightRenderer } from "./TokenTable";
 import { Meta } from "@storybook/addon-docs";
 import { Div } from "@components/html";
-import { ShareGateTheme,  ThemeProvider } from "@components/styling"
+import { ThemeProvider } from "@components/styling"
 import { ColorPaletteTable } from "./ColorPaletteTable";
 import { Table } from "@stories/components";
 
@@ -34,7 +34,7 @@ Or `CSS` variables:
 
 Those tokens are named for their use case, rather than their value. For example `alias-alert` is named to indicate the appropriate background color for an error message background, as opposed to `red-5` which is less specific and could be used in a number of ways depending on the context.
 
-This makes their intended use clear and intentional, and allows us to develop a scalable and consistent visual language while also being the building block of Orbiter's [theming](/docs/theming--page).
+This makes their intended use clear and intentional, and allows us to develop a scalable and consistent visual language.
 
 ## Values
 

docs/getting-started/Installation.stories.mdx

@@ -59,29 +59,23 @@ More about [ESlint configuration](https://eslint.org/docs/latest/use/configure/c
 
 ## Configure your application
 
-Below is an example of how to configure an application with a [pre-constructed](?path=/story/theming--page#option-3-retrieve-a-pre-constructed-theme-from-orbiter) ShareGate theme object:
+Below is an example of how to configure an application:
 
 ```tsx
 // index.ts
 
-import { createThemeVars, ShareGateTheme, ThemeProvider } from "@workleap/orbiter-ui";
+import { ThemeProvider } from "@workleap/orbiter-ui";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 
-createThemeVars([ShareGateTheme]);
-
 const root = createRoot(document.getElementById("root")!);
 root.render(
-    <ThemeProvider theme={ShareGateTheme} colorScheme="light">
+    <ThemeProvider colorScheme="light">
         <App />
     </ThemeProvider>
 );
 ```
 
-Instead of harcoding the foundation values in Orbiter, we choose to implement a [theming system](?path=/docs/theming--page) allowing applications to supply their core values to Orbiter.
-
-The theming system introduced a concept of theme object. To configure Orbiter, you'll need to build your own theme object or import a [pre-constructed](?path=/story/theming--page#option-3-retrieve-a-pre-constructed-theme-from-orbiter) one from Orbiter. The theme object will be used to render the foundation variables with the `createThemeVars` function and define a [theme provider](?path=/docs/theme-provider--default-story) at the root of your application.
-
 ### Start creating components
 
 You're all set! You can start creating your application with Orbiter:

packages/components/README.md

@@ -157,7 +157,7 @@ Every Orbiter custom components must share a consistent API and a similar design
 
 All components should:
 - Use Orbiter's [tokens](https://wl-orbiter-website.netlify.app//?path=/docs/tokens--page)
-- Support Orbiter's [color schemes](https://wl-orbiter-website.netlify.app//?path=/docs/color-schemes--page) and [theming](https://wl-orbiter-website.netlify.app//?path=/docs/theming--page)
+- Support Orbiter's [color schemes](https://wl-orbiter-website.netlify.app//?path=/docs/color-schemes--page)
 - Implement Orbiter's [style props](https://wl-orbiter-website.netlify.app//?path=/docs/style-props--page)
 - Support Orbiter's [responsive styles](https://wl-orbiter-website.netlify.app//?path=/docs/responsive-styles--page)