@carrier-dpx/air-react-library 0.1.0 → 0.2.0

package/README.md

@@ -18,6 +18,35 @@ npm install react react-dom @mui/material @emotion/react @emotion/styled
 
 ## Usage
 
+### Quick Start with Theme
+
+**Important:** To get the correct Carrier DPX colors and styling, wrap your app with the `FleetThemeProvider`:
+
+```tsx
+import { Button, FleetThemeProvider } from '@carrier-dpx/air-react-library';
+
+function App() {
+  return (
+    <FleetThemeProvider theme="AirLight">
+      <Button
+        variant="contained"
+        color="primary"
+        size="large"
+        onClick={() => console.log('clicked')}
+      >
+        Get Started
+      </Button>
+    </FleetThemeProvider>
+  );
+}
+```
+
+### Available Themes
+
+- `"AirLight"` - Light theme (default)
+- `"AirDark"` - Dark theme
+- `"AHP"` - AHP theme
+
 ### Button Component
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carrier-dpx/air-react-library",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Air web React component library for Figma Make",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/theme/FleetThemeProvider.tsx

@@ -0,0 +1,39 @@
+import React, { ReactNode } from "react";
+import { Theme, ThemeProvider, createTheme } from "@mui/material/styles";
+import { airDarkThemeOptions, fleetThemeOptions } from "./fleetThemeOptions";
+
+// Define theme instances
+const ahpTheme: Theme = createTheme({ ...fleetThemeOptions });
+
+const airLightTheme: Theme = createTheme(fleetThemeOptions);
+
+const airDarkTheme: Theme = createTheme(airDarkThemeOptions);
+
+// Mapping from theme names to actual Theme instances
+export const ThemeMap = {
+  AHP: ahpTheme,
+  AirLight: airLightTheme,
+  AirDark: airDarkTheme,
+} as const;
+
+// Define props for FleetThemeProvider
+export type ThemeProviderProps = {
+  /** Content to render with the specified theme */
+  children?: ReactNode;
+
+  /** Custom Theme instance or predefined theme key */
+  theme?: Theme | keyof typeof ThemeMap;
+};
+
+// FleetThemeProvider component
+const FleetThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  theme = airLightTheme, // Default to airLightTheme
+}) => {
+  const resolvedTheme = typeof theme === "string" ? ThemeMap[theme] : theme;
+
+  return <ThemeProvider theme={resolvedTheme}>{children}</ThemeProvider>;
+};
+
+export default FleetThemeProvider;
+export { FleetThemeProvider };

package/src/components/theme/constants/airDarkColors.ts

@@ -0,0 +1,122 @@
+import { BaseColors } from "../types/colors";
+
+export const airDarkColors = {
+  primary: {
+    main: "#4B87FB",
+    dark: "#D9E5FE",
+    light: "#0E49C7",
+    contrastText: "#0D2358",
+    containedHoverBackground: "#7AA7FC",
+    outlinedHoverBackground: "#0D2358",
+    outlinedRestingBorder: "#123B97",
+    selectedHover: "#123B97",
+  },
+  secondary: {
+    main: "#F4F5F5",
+    dark: "#EEEFEF",
+    light: "#616669",
+    contrastText: "#252728",
+    containedHoverBackground: "#FFFFFF",
+    outlinedHoverBackground: "#2E3132",
+    outlinedRestingBorder: "#3F4344",
+    selectedHover: "#3F4344",
+  },
+  error: {
+    main: "#F55246",
+    dark: "#FEE9E8",
+    light: "#C9180A",
+    contrastText: "#3D0703",
+    containedHoverBackground: "#F7766C",
+    outlinedHoverBackground: "#3D0703",
+    outlinedRestingBorder: "#871007",
+    content: "#FFFFFF",
+    background: "#630C05",
+    selectedHover: "#871007",
+  },
+  info: {
+    main: "#118EF1",
+    dark: "#E0F0FD",
+    light: "#0A68B1",
+    contrastText: "#042845",
+    containedHoverBackground: "#3DA3F4",
+    outlinedHoverBackground: "#042845",
+    outlinedRestingBorder: "#074475",
+    content: "#FFFFFF",
+    background: "#053155",
+    selectedHover: "#074475",
+  },
+  warning: {
+    main: "#FFC800",
+    dark: "#FFD641",
+    light: "#A68200",
+    contrastText: "#0D2358",
+    containedHoverBackground: "#FFD641",
+    outlinedHoverBackground: "#3B2E00",
+    outlinedRestingBorder: "#7D6200",
+    content: "#FFFFFF",
+    background: "#3B2E00",
+    selectedHover: "#4B3A00",
+  },
+  success: {
+    main: "#3E9E38",
+    dark: "#E2F4E1",
+    light: "#2D7429",
+    contrastText: "#112C10",
+    containedHoverBackground: "#4DBD46",
+    outlinedHoverBackground: "#112C10",
+    outlinedRestingBorder: "#1E4B1B",
+    content: "#FFFFFF",
+    background: "#163714",
+    selectedHover: "#1E4B1B",
+  },
+};
+
+export const baseDarkColors: BaseColors = {
+  dark: "#F1F3F5",
+  light: "#64686B",
+  main: "#DCDEE0",
+  contrastText: "#1F2326",
+  backdropOverlay: "#54595BB8",
+  divider: "#434749",
+  standardInputLine: "#434749",
+  background: {
+    accent: "#282C2F",
+    appBar: "#1F2326",
+    paper: "#1F2326",
+    skeleton: "#303537",
+    snackbar: "#C4D7FE",
+  },
+  common: {
+    black: "#000000",
+    white: "#FFFFFF",
+  },
+  filledInput: {
+    background: "#303537",
+    backgroundHover: "#434749",
+    outlinedBorder: "#434749",
+    outlinedBorderHover: "#64686B",
+    placeholderLabel: "#64686B",
+    required: "#F55246",
+  },
+  text: {
+    primary: "#F1F3F5",
+    secondary: "#B9BCBE",
+    disabled: "#64686B",
+  },
+  state: {
+    hover: "#F1F3F50F",
+    disabledBackground: "#303537",
+    disabledContent: "#54595B",
+    selected: "#303537",
+    selectedHover: "#434749",
+    focus: "#434749",
+    active: "#B9BCBE",
+  },
+};
+
+export const airDarkPalette = {
+  ...airDarkColors,
+  base: baseDarkColors,
+};
+
+export default airDarkPalette;

package/src/components/theme/constants/airDarkShadows.ts

@@ -0,0 +1,6 @@
+// Air Dark theme uses the same shadows as light theme
+import { fleetShadows } from "./shadows";
+
+export const airDarkShadows = fleetShadows;
+
+export default airDarkShadows;

package/src/components/theme/constants/colors.ts

@@ -0,0 +1,122 @@
+import { BaseColors } from "../types/colors";
+
+export const bootstrapColors = {
+  primary: {
+    main: "#0659F9",
+    dark: "#102B6E",
+    light: "#7AA7FC",
+    contrastText: "#FFFFFF",
+    containedHoverBackground: "#0E49C7",
+    outlinedHoverBackground: "#EEF3FF",
+    outlinedRestingBorder: "#A4C3FD",
+    selectedHover: "#D9E5FE",
+  },
+  secondary: {
+    main: "#3F4344",
+    dark: "#252728",
+    light: "#999EA1",
+    contrastText: "#FFFFFF",
+    containedHoverBackground: "#2E3132",
+    outlinedHoverBackground: "#F4F5F5",
+    outlinedRestingBorder: "#C0C3C5",
+    selectedHover: "#EEEFEF",
+  },
+  error: {
+    main: "#E71B0C",
+    dark: "#630C05",
+    light: "#F7766C",
+    contrastText: "#FFFFFF",
+    containedHoverBackground: "#C9180A",
+    outlinedHoverBackground: "#FEF4F3",
+    outlinedRestingBorder: "#FBAFA9",
+    content: "#3D0703",
+    background: "#FEF4F3",
+    selectedHover: "#FEE9E8",
+  },
+  info: {
+    main: "#0C77CD",
+    dark: "#053155",
+    light: "#3DA3F4",
+    contrastText: "#FFFFFF",
+    containedHoverBackground: "#0A68B1",
+    outlinedHoverBackground: "#EDF7FE",
+    outlinedRestingBorder: "#8CC9F8",
+    content: "#042845",
+    background: "#EDF7FE",
+    selectedHover: "#E0F0FD",
+  },
+  warning: {
+    main: "#FFC800",
+    dark: "#7D6200",
+    light: "#FFD641",
+    contrastText: "#302500",
+    containedHoverBackground: "#EDBA00",
+    outlinedHoverBackground: "#FFF5D0",
+    outlinedRestingBorder: "#FFD641",
+    content: "#302500",
+    background: "#FFF5D0",
+    selectedHover: "#FFEEB2",
+  },
+  success: {
+    main: "#33862F",
+    dark: "#163714",
+    light: "#4DBD46",
+    contrastText: "#FFFFFF",
+    containedHoverBackground: "#2D7429",
+    outlinedHoverBackground: "#EDF8EC",
+    outlinedRestingBorder: "#8AD485",
+    content: "#112C10",
+    background: "#EDF8EC",
+    selectedHover: "#E2F4E1",
+  },
+};
+
+export const base: BaseColors = {
+  dark: "#141618",
+  light: "#999D9F",
+  main: "#434749",
+  contrastText: "#FFFFFF",
+  backdropOverlay: "#14161899",
+  divider: "#DCDEE0",
+  standardInputLine: "#D5D8D9",
+  background: {
+    accent: "#F6F8FA",
+    appBar: "#FFFFFF",
+    paper: "#FFFFFF",
+    skeleton: "#F1F3F5",
+    snackbar: "#0D2358",
+  },
+  common: {
+    black: "#000000",
+    white: "#FFFFFF",
+  },
+  filledInput: {
+    background: "#F1F3F5",
+    backgroundHover: "#E7E9EB",
+    outlinedBorder: "#D5D8D9",
+    outlinedBorderHover: "#999D9F",
+    placeholderLabel: "#999D9F",
+    required: "#E71B0C",
+  },
+  text: {
+    primary: "#141618",
+    secondary: "#64686B",
+    disabled: "#999D9F",
+  },
+  state: {
+    hover: "#1416180A",
+    disabledBackground: "#F1F3F5",
+    disabledContent: "#B9BCBE",
+    selected: "#F1F3F5",
+    selectedHover: "#E7E9EB",
+    focus: "#DCDEE0",
+    active: "#64686B",
+  },
+};
+
+export const fleetPalette = {
+  ...bootstrapColors,
+  base: base,
+};
+
+export default fleetPalette;

package/src/components/theme/constants/fleetBreakpoints.ts

@@ -0,0 +1,13 @@
+import { BreakpointsOptions } from "@mui/material";
+
+const fleetBreakpoints: BreakpointsOptions = {
+  values: {
+    xs: 0,
+    sm: 481,
+    md: 768,
+    lg: 1024,
+    xl: 1440,
+  },
+};
+
+export default fleetBreakpoints;