@cleartrip/ct-design-theme 4.0.0-SNAPSHOT-rnfinaltest.0 → 4.0.0-SNAPSHOT-rnfinaltest3.0

package/src/themes/UltraFkTheme.ts

@@ -0,0 +1,93 @@
+import { colors } from '@cleartrip/ct-design-tokens';
+
+import { Theme } from './type';
+import BaseTheme from './BaseTheme';
+
+const hover = (key: string) => {
+  const bg = {
+    [colors.neutral100]: colors.neutral100,
+    [colors.neutral900]: colors.neutral900,
+    [colors.neutral900]: colors.neutral900,
+    [colors.neutral100]: colors.neutral100,
+    [colors.brand]: colors.bgPrimaryHover,
+    [colors.neutral100]: colors.neutral100,
+    [colors.disabledText]: colors.disabledText,
+    [colors.neutral300]: colors.neutral300,
+    [colors.neutral100]: colors.neutral100,
+    [colors.link2]: colors.link2Hover,
+    [colors.neutral100]: colors.neutral100,
+    [colors.neutral900]: colors.neutral900,
+    [colors.neutral100]: colors.neutral100,
+    [colors.disabledText]: colors.disabledText,
+    [colors.neutral300]: colors.neutral300,
+    [colors.bluePrimary500]: colors.bluePrimary500,
+    [colors.yellowSecondary]: colors.yellowSecondary,
+  };
+  return bg[key];
+};
+
+const counter = {
+  enabled: {
+    stroke: colors.bluePrimary500,
+  },
+  disabled: {
+    stroke: colors.neutral500,
+  },
+};
+
+const FKTheme: Theme = {
+  ...BaseTheme,
+  color: {
+    ...BaseTheme.color,
+    text: {
+      ...BaseTheme.color.text,
+      link: colors.bluePrimary500,
+    },
+    button: {
+      ...BaseTheme.color.button,
+      outlinedPrimaryLabel: colors.primaryNeutral900,
+      outlinedPrimaryBg: colors.neutral100,
+      containedPrimaryLabel: colors.neutral100,
+      containedPrimaryBg: colors.bluePrimary500,
+      containedSecondaryLabel: colors.primaryNeutral900,
+      containedSecondaryBg: colors.yellowSecondary,
+      hover: hover,
+    },
+    chip: {
+      ...BaseTheme.color.chip,
+      selectedPrimaryLabel: colors.link2,
+      selectedPrimaryBorder: colors.link2,
+      selectedPrimaryBg: colors.linkBg,
+      nonSelectedPrimaryLabel: colors.neutral900,
+    },
+    tab: {
+      ...BaseTheme.color.tab,
+      nonSelectedPrimaryLabel: colors.neutral900,
+      selectedPrimaryLabel: colors.bluePrimary500,
+    },
+    background: {
+      ...BaseTheme.color.background,
+      primary: colors.bluePrimary500,
+      secondary: colors.neutral900,
+      tertiary: colors.brand,
+      linkLightBg: colors.blueSecondary,
+    },
+    border: {
+      ...BaseTheme.color.border,
+      primary: colors.bluePrimary500,
+      brand: colors.bluePrimary500,
+    },
+    spinner: {
+      primary: colors.link2,
+      primaryBg: colors.alertBg,
+    },
+    counter,
+    calendar: {
+      accent: colors.bluePrimary500,
+      background: colors.blueSecondary,
+      selected: colors.bluePrimary500,
+    },
+  },
+};
+
+export default FKTheme;

package/src/themes/index.ts

@@ -0,0 +1,7 @@
+export { default as B2CTheme } from './B2CTheme';
+export { default as B2BTheme } from './B2BTheme';
+export { default as FKTheme } from './UltraFkTheme';
+export { default as BaseTheme } from './BaseTheme';
+export { default as SMTheme } from './SMTheme';
+
+export * from './type';

package/src/themes/type.ts

@@ -0,0 +1,233 @@
+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
+      alert500: string;
+      primary2: string;
+      secondary2: string;
+      grapetini900: string;
+      pinaColada750: string;
+      neutral50: string;
+      coralpink: string;
+    };
+    button: {
+      outlinedPrimaryLabel: string;
+      outlinedPrimaryBorder: string;
+      outlinedPrimaryBg: string;
+      outlinedSecondaryLabel: string;
+      outlinedSecondaryBorder: string;
+      outlinedSecondaryBg: string;
+      outlinedTertiaryLabel: string;
+      outlinedTertiaryBorder: string;
+      outlinedTertiaryBg: string;
+      outlinedNeutralLabel: string;
+      outlinedNeutralBorder: string;
+      outlinedNeutralBg: 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;
+      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;
+      grey: string;
+      secondary2: string;
+      sandGrey100: 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;
+    };
+    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;
+      error: string;
+      info: string;
+      neutral: string;
+    };
+    badge: {
+      curacao: string;
+      curacao900: string;
+      pinaColada: string;
+      margarita250: string;
+      default: string;
+      green: string;
+      margarita100: string;
+      yellow: string;
+      orange100: string;
+      orange250: string;
+      orange500: string;
+      red: string;
+      green500: string;
+      green600: string;
+      purple100: string;
+      purple250: string;
+      gray100: string;
+      gray250: string;
+      aqua100: string;
+      aqua250: string;
+      black: string;
+      link: string;
+      linkText: string;
+      blue100: string;
+      blue500: string;
+      blue900: string;
+      neutral100: string;
+      pinaColada750: string;
+      pinaColada100: string;
+      brown: string;
+    };
+    calendar: {
+      accent: string;
+      background: string;
+      selected: 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: unknown;
+    create: unknown;
+  };
+  zIndex: Record<'modal' | 'drawer' | 'tooltip' | 'popOver' | 'sideNav' | 'toolbar' | 'bottomSheet', number>;
+  underline: {
+    link: UnderlineType;
+    primary: UnderlineType;
+    secondary: UnderlineType;
+    tertiary: UnderlineType;
+    disabled: UnderlineType;
+    heading: UnderlineType;
+    subHeading: UnderlineType;
+    success: UnderlineType;
+    warning: UnderlineType;
+    neutral: UnderlineType;
+    link2: UnderlineType;
+    primary2: UnderlineType;
+    secondary2: UnderlineType;
+    grapetini900: UnderlineType;
+    pinaColada750: UnderlineType;
+    alert: UnderlineType;
+  };
+};
+
+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;
+    }
+  }
+};