@cleartrip/ct-design-theme 4.0.0 → 5.0.0

package/src/themes/type.ts

@@ -0,0 +1,272 @@
+import type { Border } from '@cleartrip/ct-design-tokens';
+import { Size, Elevation } from '@cleartrip/ct-design-tokens';
+import type { Spacing } from '@cleartrip/ct-design-tokens';
+import type { Typography } from '@cleartrip/ct-design-tokens';
+
+export type UnderlineType = '' | 'underline';
+
+export type Theme = {
+  color: {
+    text: {
+      primary: string;
+      secondary: string;
+      tertiary: string;
+      heading: string;
+      subHeading: string;
+      disabled: string;
+      success: string;
+      alert: string;
+      warning: string;
+      link: string;
+      brand: string;
+      neutral: string;
+      link2: string;
+      margarita: string;
+      // it's a new color introducted in figma
+      primary2: string;
+      secondary2: string;
+      grapetini900: string;
+      pinaColada750: string;
+      alert500: string;
+      neutral50: string;
+      margarita750?: string;
+      green100: string;
+      red100: string;
+      coralpink: string;
+      primary3: string;
+    };
+    button: {
+      outlinedPrimaryLabel: string;
+      outlinedPrimaryBorder: string;
+      outlinedPrimaryBg: string;
+      outlinedSecondaryLabel: string;
+      outlinedSecondaryBorder: string;
+      outlinedSecondaryBg: string;
+      outlinedTertiaryLabel: string;
+      outlinedTertiaryBorder: string;
+      outlinedTertiaryBg: string;
+      outlinedDisabledLabel: string;
+      outlinedDisabledBg: string;
+      containedPrimaryLabel: string;
+      containedPrimaryBg: string;
+      containedSecondaryLabel: string;
+      containedSecondaryBg: string;
+      containedTertiaryLabel: string;
+      containedTertiaryBg: string;
+      containedDisabledLabel: string;
+      containedDisabledBg: string;
+      containedNeutralLabel: string;
+      containedNeutralBg: string;
+      outlinedNeutralLabel: string;
+      outlinedNeutralBorder: string;
+      outlinedNeutralBg: string;
+      hover: unknown;
+    };
+    chip: {
+      nonSelectedPrimaryLabel: string;
+      selectedPrimaryLabel: string;
+      selectedPrimaryBorder: string;
+      selectedPrimaryBg: string;
+      disabledPrimaryLabel: string;
+      disabledPrimaryBg: string;
+    };
+    dropdown: {
+      shadow: string;
+    };
+    tab: {
+      nonSelectedPrimaryLabel: string;
+      selectedPrimaryLabel: string;
+    };
+    sidenav: {
+      primaryBg: string;
+      selectedTabBg: string;
+    };
+    tooltip: {
+      primaryBg: string;
+    };
+    background: {
+      primary: string;
+      secondary: string;
+      tertiary: string;
+      brand: string;
+      brandLightBg: string;
+      link: string;
+      link2: string;
+      linkLightBg: string;
+      success: string;
+      successLightBg: string;
+      alert: string;
+      alertLightBg: string;
+      alertSoft: string;
+      warning: string;
+      warningLightBg: string;
+      neutral: string;
+      disabled: string;
+      disabledSecondaryLight: string;
+      disabledSecondary: string;
+      disabledDark: string;
+      defaultDark: string;
+      defaultDarkest: string;
+      darkNetural300: string;
+      darkGrey: string;
+      transparent: string;
+      secondary2: string;
+      gray500: string;
+      mintCream: string;
+      pinaColada100: string;
+      lightCyan: string;
+      margarita100: string;
+      neutral300: string;
+      orange200: string;
+      couponGreen: string;
+      black100: string;
+      orange100: string;
+      lightRed: string;
+      neutral100: string;
+    };
+    border: {
+      primary: string;
+      secondary: string;
+      tertiary: string;
+      brand: string;
+      neutral: string;
+      link: string;
+      default: string;
+      defaultDark: string;
+      disabled: string;
+      disabledDark: string;
+      warning: string;
+      divider: string;
+      disabled100: string;
+      borderAccent: string;
+      neutral100: string;
+      bluePrimary500: string;
+      lightGray: string;
+      darkRed: string;
+    };
+    spinner: {
+      primary: string;
+      primaryBg: string;
+    };
+    shimmer: {
+      disabledLight: string;
+      disabledDark: string;
+    };
+    counter: {
+      enabled: {
+        stroke: string;
+      };
+      disabled: {
+        stroke: string;
+      };
+    };
+    coupon: {
+      primaryBg: string;
+    };
+    alert: {
+      success: string;
+      warning: string;
+      warningLight: string;
+      error: string;
+      info: string;
+      neutral: string;
+    };
+    badge: {
+      curacao: string;
+      curacao900: string;
+      pinaColada: string;
+      pinaColada300: string;
+      margarita250: string;
+      default: string;
+      green: string;
+      green100: string;
+      margarita100: string;
+      yellow: string;
+      orange100: string;
+      orange250: string;
+      orange500: string;
+      red: string;
+      red100: string;
+      green500: string;
+      green600: string;
+      purple100: string;
+      purple250: string;
+      gray100: string;
+      gray250: string;
+      aqua100: string;
+      aqua250: string;
+      black: string;
+      link: string;
+      blue100: string;
+      blue900: string;
+      blue500: string;
+      neutral100: string;
+      neutral700: string;
+      pinaColada750: string;
+      pinaColada100: string;
+      gray800: string;
+      couponGreen: string;
+      alert500: string;
+      alertSoft: string;
+      red200: string;
+      red500: string;
+      redSoft: string;
+      brown: string;
+    };
+    calendar: {
+      accent: string;
+      background: string;
+      selected: string;
+    };
+    cursor: {
+      neutral900: string;
+    };
+    chipicon: {
+      default: string;
+      blue: string;
+      pink: string;
+      yellow: string;
+      purple: string;
+      green: string;
+      cfwBlue: string;
+      orange: string;
+    };
+  };
+  elevation: Elevation;
+  border: Border;
+  spacing: Spacing;
+  typography: Typography;
+  size: Size;
+  transitions: {
+    easing: {
+      easeInOut: string;
+      easeOut: string;
+      easeIn: string;
+      sharp: string;
+    };
+    duration: {
+      shortest: number;
+      shorter: number;
+      short: number;
+      standard: number;
+      complex: number;
+      enteringScreen: number;
+      leavingScreen: number;
+    };
+    getAutoHeightDuration: (height: number) => number;
+    create: (
+      props: string[],
+      options: {
+        duration?: number | string;
+        easing?: string;
+        delay?: number | string;
+      },
+    ) => string;
+  };
+  zIndex: Record<
+    'modal' | 'drawer' | 'tooltip' | 'popOver' | 'sideNav' | 'toolbar' | 'bottomSheet' | 'pageLoader',
+    number
+  >;
+};
+
+export type ThemeType = 'B2C' | 'B2B' | 'FK' | 'SM';

package/src/utils/ThemeManager.ts

@@ -0,0 +1,36 @@
+import { Theme as ThemeType } from '../themes/index';
+import B2CTheme from '../themes/B2CTheme';
+
+class ThemeManagerClass {
+  static instance: ThemeManagerClass;
+  private theme: ThemeType;
+
+  constructor() {
+    if (ThemeManagerClass.instance) {
+      throw new Error('You can only create one instance!');
+    }
+    ThemeManagerClass.instance = this;
+    /**
+     * 1.) Default theme (Ultra, Light Mode, Dark Mode)
+     * 2.) Build time theme
+     */
+    this.theme = B2CTheme;
+  }
+
+  set(theme: string) {
+    switch (theme) {
+      case 'B2C':
+      default: {
+        this.theme = B2CTheme;
+        break;
+      }
+    }
+  }
+
+  get() {
+    return this.theme;
+  }
+}
+
+const ThemeManager = Object.freeze(new ThemeManagerClass());
+export default ThemeManager;

package/src/utils/index.ts

@@ -0,0 +1,21 @@
+import { B2BTheme, B2CTheme, Theme, ThemeType, FKTheme, SMTheme } from '../themes';
+
+export const getTheme = (themeType: ThemeType): Theme => {
+  switch (themeType) {
+    case 'B2C': {
+      return B2CTheme;
+    }
+    case 'B2B': {
+      return B2BTheme;
+    }
+    case 'FK': {
+      return FKTheme;
+    }
+    case 'SM': {
+      return SMTheme;
+    }
+    default: {
+      return B2CTheme;
+    }
+  }
+};