feat: themes revisited!

packages/core/.storybook/src/clippy-addon/register.jsx

@@ -122,9 +122,10 @@ class Clippy extends React.Component {
 
     channel.on('clippy/set_component', this.setComponent);
 
-    const agentName = this.availableAgents[
-      Math.floor(Math.random() * this.availableAgents.length)
-    ];
+    const agentName =
+      this.availableAgents[
+        Math.floor(Math.random() * this.availableAgents.length)
+      ];
 
     clippy.load(agentName, agent => {
       this.agent = agent;

packages/core/.storybook/src/theme-changer/src/Panel.js

@@ -7,14 +7,16 @@ import { extractThemes } from './extractThemes';
 const ThemeWindow = ({ name, changeTheme }) => (
   <div className="theme-window">
     <div className="title-bar">{name}</div>
-    <button
-      className="theme-widow-btn"
-      onClick={() => {
-        changeTheme({ selectedTheme: name });
-      }}
-    >
-      {name}
-    </button>
+    <div className="btn-container">
+      <button
+        className="theme-widow-btn"
+        onClick={() => {
+          changeTheme({ selectedTheme: name });
+        }}
+      >
+        {name}
+      </button>
+    </div>
   </div>
 );
 

packages/core/.storybook/src/theme-changer/src/styles.css

@@ -1,5 +1,5 @@
 .theme-window {
-  width: 140px;
+  width: 150px;
   padding: 1px;
   background-color: var(--r95_g5jstu11);
   box-shadow: inset 1px 1px 0px 1px var(--r95_g5jstuu),
@@ -13,12 +13,16 @@
   color: var(--r95_g5jstu10);
 }
 
+.btn-container {
+  padding: 10px;
+}
+
 .theme-widow-btn {
   background-color: var(--r95_g5jstu11);
   padding-top: var(--r95_g5jstua);
   padding-inline: var(--r95_g5jstun);
   padding-bottom: var(--r95_g5jstu8);
-  margin: 10px;
+  width: 100%;
   border: none;
   color: var(--r95_g5jstu12);
   font-size: 12px;

packages/core/components/ThemeProvider/ThemeProvider.tsx

@@ -1,24 +1,9 @@
 import * as React from 'react';
-import { ThemeProvider as SCThemeProvider } from '@xstyled/styled-components';
 
 import { ModalProvider } from '../Modal';
-import themes from './themes';
 
-export type ThemeProviderProps = {
-  theme?: keyof typeof themes;
-};
-
-const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>> = ({
-  children,
-  theme,
-}) => (
-  <SCThemeProvider theme={themes[theme || 'win95']}>
-    <ModalProvider>{children}</ModalProvider>
-  </SCThemeProvider>
+const ThemeProvider: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <ModalProvider>{children}</ModalProvider>
 );
 
-ThemeProvider.defaultProps = {
-  theme: 'win95',
-};
-
 export default ThemeProvider;

packages/core/components/ThemeProvider/theme.ts

@@ -1,5 +1,73 @@
 import { win95 } from './themes/win95.css';
-import { bee } from './themes/bee.css';
 import { counterStrike } from './themes/counterStrike.css';
+import { bee } from './themes/bee.css';
+import { pamelaAnderson } from './themes/pamelaAnderson.css';
+import { azureOrange } from './themes/azureOrange.css';
+import { olive } from './themes/olive.css';
+import { vaporTeal } from './themes/vaporTeal.css';
+import { matrix } from './themes/matrix.css';
+import { vermillion } from './themes/vermillion.css';
+import { tooSexy } from './themes/tooSexy.css';
+import { ninjaTurtles } from './themes/ninjaTurtles.css';
+import { tokyoDark } from './themes/tokyoDark.css';
+import { molecule } from './themes/molecule.css';
+import { travel } from './themes/travel.css';
+import { theSixtiesUSA } from './themes/theSixtiesUSA.css';
+import { candy } from './themes/candy.css';
+import { modernDark } from './themes/modernDark.css';
+import { storm } from './themes/storm.css';
+import { millenium } from './themes/millenium.css';
+import { spruce } from './themes/spruce.css';
+import { slate } from './themes/slate.css';
+import { rose } from './themes/rose.css';
+import { rainyDay } from './themes/rainyDay.css';
+import { plum } from './themes/plum.css';
+import { marine } from './themes/marine.css';
+import { maple } from './themes/maple.css';
+import { lilac } from './themes/lilac.css';
+import { blackAndWhite } from './themes/blackAndWhite.css';
+import { highContrast } from './themes/highContrast.css';
+import { eggplant } from './themes/eggplant.css';
+import { brick } from './themes/brick.css';
+import { water } from './themes/water.css';
+import { coldGray } from './themes/coldGray.css';
+import { lilacRoseDark } from './themes/lilacRoseDark.css';
+import { violetDark } from './themes/violetDark.css';
 
-export { win95, bee, counterStrike };
+export {
+  win95,
+  counterStrike,
+  bee,
+  pamelaAnderson,
+  azureOrange,
+  olive,
+  vaporTeal,
+  matrix,
+  vermillion,
+  tooSexy,
+  ninjaTurtles,
+  tokyoDark,
+  molecule,
+  travel,
+  theSixtiesUSA,
+  candy,
+  modernDark,
+  storm,
+  millenium,
+  spruce,
+  slate,
+  rose,
+  rainyDay,
+  plum,
+  marine,
+  maple,
+  lilac,
+  blackAndWhite,
+  highContrast,
+  eggplant,
+  brick,
+  water,
+  coldGray,
+  lilacRoseDark,
+  violetDark,
+};

packages/core/components/ThemeProvider/themes/azureOrange.tsx → packages/core/components/ThemeProvider/themes/azureOrange.css.ts

@@ -1,7 +1,8 @@
-import { DefaultTheme, IColors } from 'styled-components';
-import BaseTheme, { generateShadows } from './baseTheme';
+import { createTheme } from '@vanilla-extract/css';
+import { theme, generateShadows } from './baseTheme.css';
+import { contract } from './contract.css';
 
-const colors: IColors = {
+const colors = {
   anchor: '#1034a6',
   anchorVisited: '#440381',
   borderDark: '#05427f',
@@ -11,29 +12,22 @@ const colors: IColors = {
   borderLightest: '#bedcff',
   canvas: '#000000',
   canvasText: '#ffffff',
-  canvasTextDisabled: '#05427f',
-  canvasTextDisabledShadow: '#7ebfff',
-  canvasTextInvert: '#000000',
   headerBackground: '#171123',
   headerNotActiveBackground: '#4E6766',
   headerNotActiveText: '#0180ff',
   headerText: '#ffffff',
   material: '#0180ff',
-  materialDark: '#9a9e9c',
   materialText: '#000000',
   materialTextDisabled: '#05427f',
   materialTextDisabledShadow: '#7ebfff',
   materialTextInvert: '#ffffff',
   progress: '#F46036',
   inputBackground: '#ffffff',
   inputBackgroundDisabled: '#2b8fff',
-  tooltip: '#fefbcc',
 };
 
-const azureOrange: DefaultTheme = {
-  ...BaseTheme,
+export const azureOrange = createTheme(contract, {
+  ...theme,
   colors,
   shadows: generateShadows(colors),
-};
-
-export default azureOrange;
+});

packages/core/components/ThemeProvider/themes/baseTheme.css.ts

@@ -48,7 +48,7 @@ const colors = {
 
 type IColors = typeof colors;
 
-const zIndices = {
+export const zIndices = {
   modal: '2',
   tooltip: '3',
   taskbar: '3',

packages/core/components/ThemeProvider/themes/baseTheme.tsx

@@ -9,36 +9,15 @@ import {
 
 type DefaultThemeWithoutColors = Omit<DefaultTheme, 'colors' | 'shadows'>;
 
-const space: ISpace = [
-  0,
-  1,
-  2,
-  3,
-  4,
-  5,
-  6,
-  7,
-  8,
-  9,
-  10,
-  11,
-  12,
-  13,
-  14,
-  15,
-  16,
-  17,
-  18,
-  19,
-  20,
+export const space: ISpace = [
+  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 ];
 
-const borderWidths: IBorderWidth = [0, 1];
-const borderStyles: IBorderStyles = ['none', 'solid'];
+export const borderWidths: IBorderWidth = [0, 1];
+export const borderStyles: IBorderStyles = ['none', 'solid'];
 
-const zIndices: IZIndices = {
+export const zIndices: IZIndices = {
   modal: 1,
-  tooltip: 2,
   taskbar: 2,
 };
 
@@ -58,11 +37,9 @@ export const generateShadows = (colors: IColors) => {
   };
 };
 
-const theme: DefaultThemeWithoutColors = {
+export const theme: DefaultThemeWithoutColors = {
   space,
   borderWidths,
   borderStyles,
   zIndices,
 };
-
-export default theme;