@cleartrip/ct-design-theme 4.0.0-SNAPSHOT-test.0 → 4.0.0-SNAPSHOT-rnfinaltest2.0

package/dist/ThemeProvider/ThemeProvider.native.d.ts

@@ -0,0 +1,5 @@
+import { ThemeContextType, ThemeProviderProps } from './type';
+export declare const ThemeContext: import("react").Context<ThemeContextType>;
+declare const ThemeProvider: ({ children, theme: themeType, platform, }: ThemeProviderProps) => React.JSX.Element;
+export default ThemeProvider;
+//# sourceMappingURL=ThemeProvider.native.d.ts.map

package/dist/ThemeProvider/ThemeProvider.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.native.d.ts","sourceRoot":"","sources":["../../packages/core/theme/src/ThemeProvider/ThemeProvider.native.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAE9D,eAAO,MAAM,YAAY,2CAGvB,CAAC;AAEH,QAAA,MAAM,aAAa,GAAI,2CAIpB,kBAAkB,KAAG,KAAK,CAAC,GAAG,CAAC,OAGjC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/ct-design-theme",
-  "version": "4.0.0-SNAPSHOT-test.0",
+  "version": "4.0.0-SNAPSHOT-rnfinaltest2.0",
   "description": "",
   "types": "dist/index.d.ts",
   "main": "dist/ct-design-theme.cjs.js",
@@ -13,10 +13,11 @@
     "./dist/ct-design-theme.cjs.js": "./dist/ct-design-theme.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-tokens": "4.0.0-SNAPSHOT-test.0"
+    "@cleartrip/ct-design-tokens": "4.0.0-SNAPSHOT-rnfinaltest2.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/src/ThemeProvider/ThemeProvider.native.tsx

@@ -0,0 +1,20 @@
+import { createContext } from 'react';
+import { B2CTheme } from '../themes';
+import { getTheme } from '../utils';
+import { ThemeContextType, ThemeProviderProps } from './type';
+
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: B2CTheme,
+  platform: 'mobile',
+});
+
+const ThemeProvider = ({
+  children,
+  theme: themeType = 'B2C',
+  platform = 'mobile',
+}: ThemeProviderProps): React.JSX.Element => {
+  const theme = getTheme(themeType);
+  return <ThemeContext.Provider value={{ theme, platform }}>{children}</ThemeContext.Provider>;
+};
+
+export default ThemeProvider;

package/src/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,27 @@
+import { createContext } from 'react';
+import { ThemeProvider as EmotionProvider } from '@emotion/react';
+import { B2CTheme } from '../themes';
+import { getTheme } from '../utils';
+import { ThemeContextType, ThemeProviderProps } from './type';
+
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: B2CTheme,
+  platform: 'mobile',
+});
+
+const ThemeProvider = ({
+  children,
+  theme: themeType = 'B2C',
+  platform = 'mobile',
+}: ThemeProviderProps): React.JSX.Element => {
+  const theme = getTheme(themeType);
+  return (
+    <ThemeContext.Provider value={{ theme, platform }}>
+      <EmotionProvider theme={theme}>
+        <>{children}</>
+      </EmotionProvider>
+    </ThemeContext.Provider>
+  );
+};
+
+export default ThemeProvider;

package/src/ThemeProvider/index.ts

@@ -0,0 +1,3 @@
+export { default as ThemeProvider } from './ThemeProvider';
+export * from './ThemeProvider';
+export * from './type';

package/src/ThemeProvider/type.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { Theme, ThemeType } from '../themes';
+
+export type PlatformType = 'mobile' | 'desktop';
+
+export type ThemeContextType = {
+  theme: Theme;
+  platform: PlatformType;
+};
+
+export interface ThemeProviderProps {
+  theme?: ThemeType;
+  platform?: PlatformType;
+  children?: ReactNode;
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useTheme } from './useTheme';
+export { default as useThemeContext } from './useThemeContext';

package/src/hooks/useTheme.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../ThemeProvider';
+import { B2CTheme } from '../themes';
+
+const useTheme = () => {
+  const themeContext = useContext(ThemeContext);
+  const { theme } = themeContext || { theme: B2CTheme };
+  return theme;
+};
+
+export default useTheme;

package/src/hooks/useThemeContext.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../ThemeProvider';
+
+const useThemeContext = () => {
+  return useContext(ThemeContext);
+};
+
+export default useThemeContext;

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './themes';
+export * from './ThemeProvider';
+export * from './hooks';
+export * from './utils';
+export { default as ThemeManager } from './utils/ThemeManager';

package/src/themes/B2BTheme.ts

@@ -0,0 +1,94 @@
+import { Theme } from './type';
+import { colors } from '@cleartrip/ct-design-tokens';
+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,
+  };
+  return bg[key];
+};
+
+const B2BTheme: Theme = {
+  ...BaseTheme,
+  color: {
+    ...BaseTheme.color,
+    text: {
+      ...BaseTheme.color.text,
+      secondary: colors.link2,
+      tertiary: colors.neutral500,
+    },
+    button: {
+      ...BaseTheme.color.button,
+      outlinedPrimaryLabel: colors.link2,
+      outlinedPrimaryBorder: colors.link2,
+      outlinedPrimaryBg: colors.neutral100,
+      outlinedSecondaryLabel: colors.neutral900,
+      outlinedSecondaryBorder: colors.neutral900,
+      outlinedSecondaryBg: colors.neutral100,
+      outlinedTertiaryLabel: colors.brand,
+      outlinedTertiaryBorder: colors.brand,
+      outlinedTertiaryBg: colors.neutral100,
+      outlinedDisabledLabel: colors.disabledText,
+      outlinedDisabledBg: colors.neutral300,
+      containedPrimaryLabel: colors.neutral100,
+      containedPrimaryBg: colors.link2,
+      containedSecondaryLabel: colors.neutral100,
+      containedSecondaryBg: colors.neutral900,
+      containedTertiaryLabel: colors.neutral100,
+      containedTertiaryBg: colors.brand,
+      containedDisabledLabel: colors.disabledText,
+      containedDisabledBg: colors.neutral300,
+      hover: hover,
+    },
+    chip: {
+      ...BaseTheme.color.chip,
+      selectedPrimaryLabel: colors.link2,
+      selectedPrimaryBorder: colors.link2,
+      selectedPrimaryBg: colors.linkBg,
+    },
+    tab: {
+      ...BaseTheme.color.tab,
+      nonSelectedPrimaryLabel: colors.neutral900,
+      selectedPrimaryLabel: colors.link2,
+    },
+    background: {
+      ...BaseTheme.color.background,
+      primary: colors.link2,
+      secondary: colors.neutral900,
+      tertiary: colors.brand,
+    },
+    border: {
+      ...BaseTheme.color.border,
+      primary: colors.link2,
+      secondary: colors.neutral900,
+      tertiary: colors.brand,
+      divider: colors.line,
+    },
+    spinner: {
+      primary: colors.link2,
+      primaryBg: colors.alertBg,
+    },
+    calendar: {
+      accent: '',
+      background: '',
+      selected: colors.link2,
+    },
+  },
+};
+
+export default B2BTheme;

package/src/themes/B2CTheme.ts

@@ -0,0 +1,5 @@
+import BaseTheme from './BaseTheme';
+
+const B2CTheme = { ...BaseTheme };
+
+export default B2CTheme;

package/src/themes/BaseTheme.ts

@@ -0,0 +1,308 @@
+import { colors, border, typography, spacing, size, elevation } from '@cleartrip/ct-design-tokens';
+import { Theme } from './type';
+
+// inspired from chakra UI
+export const duration = {
+  shortest: 150,
+  shorter: 200,
+  short: 250,
+  // most basic recommended timing
+  standard: 300,
+  // this is to be used in complex animations
+  complex: 375,
+  // recommended when something is entering screen
+  enteringScreen: 225,
+  // recommended when something is leaving screen
+  leavingScreen: 195,
+};
+
+// inspired from chakra UI
+export const easing = {
+  // This is the most common easing curve.
+  easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  // Objects enter the screen at full velocity from off-screen and
+  // slowly decelerate to a resting point.
+  easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
+  // Objects leave the screen at full velocity. They do not decelerate when off-screen.
+  easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+  // The sharp curve is used by objects that may return to the screen at any time.
+  sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
+};
+
+function getAutoHeightDuration(height: number) {
+  if (!height) {
+    return 0;
+  }
+
+  const constant = height / 36;
+
+  // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
+  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
+}
+
+const create = (props = ['all'], options: unknown = {}) => {
+  // @ts-ignore
+  const { duration: durationOption = duration.standard, easing: easingOption = easing.easeInOut, delay = 0 } = options;
+  return (Array.isArray(props) ? props : [props])
+    .map(
+      (animatedProp) =>
+        `${animatedProp} ${
+          typeof durationOption === 'string' ? durationOption : `${durationOption}ms`
+        } ${easingOption} ${typeof delay === 'string' ? delay : `${delay}ms`}`,
+    )
+    .join(',');
+};
+
+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,
+  };
+  return bg[key];
+};
+
+const zIndex = {
+  drawer: 1200,
+  modal: 1300,
+  popOver: 1300,
+  tooltip: 1500,
+  sideNav: 100,
+  toolbar: 50,
+  bottomSheet: 100,
+};
+
+const counter = {
+  enabled: {
+    stroke: colors.neutral900,
+  },
+  disabled: {
+    stroke: colors.neutral500,
+  },
+};
+
+const BaseTheme: Theme = {
+  color: {
+    text: {
+      primary: colors.neutral900,
+      secondary: colors.brandText,
+      tertiary: colors.neutral500,
+      heading: colors.neutral900,
+      subHeading: colors.neutral700,
+      disabled: colors.disabledText,
+      success: colors.successText,
+      alert: colors.alertText,
+      alert500: colors.alert500,
+      warning: colors.warningText,
+      link: colors.linkText,
+      brand: colors.brandText,
+      neutral: colors.neutral100,
+      link2: colors.link2,
+      margarita: colors.margarita750,
+      primary2: colors.grapetini900,
+      secondary2: colors.blue100,
+      grapetini900: colors.grapetini900,
+      pinaColada750: colors.pinaColada750,
+      neutral50: colors.neutral50,
+      coralpink: colors.coralpink,
+    },
+    button: {
+      outlinedPrimaryLabel: colors.neutral900,
+      outlinedPrimaryBorder: colors.neutral900,
+      outlinedPrimaryBg: colors.neutral100,
+      outlinedSecondaryLabel: colors.brand,
+      outlinedSecondaryBorder: colors.brand,
+      outlinedSecondaryBg: colors.neutral100,
+      outlinedTertiaryLabel: colors.link,
+      outlinedTertiaryBorder: colors.link,
+      outlinedTertiaryBg: colors.neutral100,
+      outlinedNeutralLabel: colors.neutral100,
+      outlinedNeutralBorder: colors.neutral100,
+      outlinedNeutralBg: colors.transparent,
+      outlinedDisabledLabel: colors.disabledText,
+      outlinedDisabledBg: colors.neutral300,
+      containedPrimaryLabel: colors.neutral100,
+      containedPrimaryBg: colors.neutral900,
+      containedSecondaryLabel: colors.neutral100,
+      containedSecondaryBg: colors.brand,
+      containedTertiaryLabel: colors.neutral100,
+      containedTertiaryBg: colors.link,
+      containedDisabledLabel: colors.disabledText,
+      containedDisabledBg: colors.neutral300,
+      containedNeutralLabel: colors.neutral900,
+      containedNeutralBg: colors.neutral100,
+      hover,
+    },
+    chip: {
+      nonSelectedPrimaryLabel: colors.neutral900,
+      disabledPrimaryLabel: colors.disabledText,
+      selectedPrimaryLabel: colors.neutral900,
+      selectedPrimaryBorder: colors.neutral900,
+      selectedPrimaryBg: colors.neutral300,
+      disabledPrimaryBg: colors.neutral100,
+    },
+    dropdown: {
+      shadow: colors.shadow,
+    },
+    tab: {
+      nonSelectedPrimaryLabel: colors.neutral700,
+      selectedPrimaryLabel: colors.neutral900,
+    },
+    sidenav: {
+      primaryBg: colors.neutral900,
+      selectedTabBg: colors.highlightBg,
+    },
+    tooltip: {
+      primaryBg: colors.neutral900,
+    },
+    background: {
+      primary: colors.neutral900,
+      secondary: colors.brand,
+      tertiary: colors.link,
+      brand: colors.brand,
+      brandLightBg: colors.brandBg,
+      link: colors.link,
+      link2: colors.link2,
+      linkLightBg: colors.linkBg,
+      success: colors.success,
+      successLightBg: colors.successBg,
+      alert: colors.alert,
+      alertLightBg: colors.alertBg,
+      alertSoft: colors.alert100,
+      warning: colors.warning,
+      warningLightBg: colors.warningBg,
+      neutral: colors.neutral100,
+      disabled: colors.neutral300,
+      disabledSecondaryLight: colors.neutral350,
+      disabledSecondary: colors.neutral400,
+      disabledDark: colors.disabled100,
+      defaultDark: colors.neutral700,
+      defaultDarkest: colors.neutral900,
+      grey: colors.neutral500,
+      secondary2: colors.blue100,
+      sandGrey100: colors.sandGrey100,
+    },
+    border: {
+      primary: colors.neutral900,
+      secondary: colors.brand,
+      tertiary: colors.link,
+      brand: colors.brand,
+      neutral: colors.neutral900,
+      link: colors.link,
+      default: colors.line,
+      defaultDark: colors.neutral700,
+      disabled: colors.neutral500,
+      disabledDark: colors.disabled100,
+      warning: colors.warning,
+      divider: colors.neutral300,
+    },
+    spinner: {
+      primary: colors.neutral700,
+      primaryBg: colors.alertBg,
+    },
+    shimmer: {
+      disabledLight: colors.disabledLight,
+      disabledDark: colors.disabled250,
+    },
+    coupon: {
+      primaryBg: colors.blue100,
+    },
+    alert: {
+      success: colors.successBg,
+      warning: colors.alertBg,
+      info: colors.blue100,
+      error: colors.orange100,
+      neutral: colors.neutral100,
+    },
+    badge: {
+      curacao: colors.curacao250,
+      curacao900: colors.curacao900,
+      pinaColada: colors.pinaColada250,
+      margarita250: colors.margarita250,
+      default: colors.neutral300,
+      green: colors.successBg,
+      margarita100: colors.margarita100,
+      yellow: colors.alertBg,
+      orange100: colors.orange100,
+      orange250: colors.orange250,
+      orange500: colors.orange500,
+      red: colors.warningBg,
+      green500: colors.success500,
+      green600: colors.success600,
+      purple100: colors.purple100,
+      purple250: colors.purple250,
+      gray100: colors.gray100,
+      gray250: colors.gray250,
+      aqua100: colors.aqua100,
+      aqua250: colors.aqua250,
+      black: colors.black,
+      link: colors.link,
+      linkText: colors.linkText,
+      blue100: colors.blue100,
+      blue500: colors.blue500,
+      blue900: colors.blue900,
+      neutral100: colors.neutral100,
+      pinaColada750: colors.pinaColada750,
+      pinaColada100: colors.pinaColada100,
+      brown: colors.brown,
+    },
+    counter,
+    calendar: {
+      accent: colors.neutral900,
+      background: colors.neutral300,
+      selected: colors.neutral900,
+    },
+  },
+  elevation: { ...elevation },
+  border: {
+    ...border,
+  },
+  spacing: {
+    ...spacing,
+  },
+  typography: {
+    ...typography,
+  },
+  size: {
+    ...size,
+  },
+  transitions: {
+    duration,
+    easing,
+    create,
+    getAutoHeightDuration,
+  },
+  underline: {
+    link: '',
+    primary: '',
+    secondary: '',
+    tertiary: '',
+    disabled: '',
+    heading: '',
+    subHeading: '',
+    success: '',
+    warning: '',
+    neutral: '',
+    link2: '',
+    primary2: '',
+    secondary2: '',
+    grapetini900: '',
+    pinaColada750: '',
+    alert: '',
+  },
+  zIndex,
+};
+
+export default BaseTheme;

package/src/themes/SMTheme.ts

@@ -0,0 +1,86 @@
+import { Theme } from './type';
+import { colors } from '@cleartrip/ct-design-tokens';
+import BaseTheme from './BaseTheme';
+
+const hover = (key: string) => {
+  const bg = {
+    [colors.neutral100]: colors.neutral100,
+    [colors.brand]: colors.bgPrimaryHover,
+    [colors.disabledText]: colors.disabledText,
+    [colors.neutral300]: colors.neutral300,
+    [colors.link2]: colors.link2Hover,
+    [colors.neutral100]: colors.neutral100,
+    [colors.neutral900]: colors.neutral900,
+    [colors.superGrey700]: colors.superGrey700,
+    [colors.superGrey300]: colors.superGrey300,
+    [colors.superGrey800]: colors.superGrey800,
+    [colors.superGreen500]: colors.superGreen500,
+  };
+  return bg[key];
+};
+
+const SMTheme: Theme = {
+  ...BaseTheme,
+  color: {
+    ...BaseTheme.color,
+    text: {
+      ...BaseTheme.color.text,
+      primary: colors.superGrey800,
+      secondary: colors.superGrey500,
+      tertiary: colors.superGrey400,
+      warning: colors.systemRed500,
+      disabled: colors.superGrey400,
+      subHeading: colors.superGrey400,
+      success: colors.systemGreen500,
+      link: colors.superBlue500,
+      link2: colors.superBlue500,
+    },
+    button: {
+      ...BaseTheme.color.button,
+      outlinedPrimaryLabel: colors.superGrey700,
+      outlinedPrimaryBorder: colors.superGrey300,
+      outlinedTertiaryLabel: colors.superGrey700,
+      outlinedTertiaryBorder: colors.superGrey300,
+      outlinedDisabledLabel: colors.disabledText,
+      containedSecondaryLabel: colors.superGrey800,
+      containedPrimaryBg: colors.superBlue500,
+      containedSecondaryBg: colors.superGreen500,
+      containedTertiaryLabel: colors.superGrey300,
+      containedDisabledLabel: colors.disabledText,
+      containedPrimaryLabel: colors.neutral100,
+      hover: hover,
+    },
+    chip: {
+      ...BaseTheme.color.chip,
+      selectedPrimaryLabel: colors.superBlue500,
+      selectedPrimaryBorder: colors.superBlue500,
+      selectedPrimaryBg: colors.superBlue25,
+      disabledPrimaryLabel: colors.superGrey400,
+      nonSelectedPrimaryLabel: colors.superGrey700,
+      disabledPrimaryBg: colors.superGrey200,
+    },
+    tab: {
+      ...BaseTheme.color.tab,
+      nonSelectedPrimaryLabel: colors.superGrey500,
+      selectedPrimaryLabel: colors.superBlue500,
+    },
+    background: {
+      ...BaseTheme.color.background,
+      primary: colors.superBlue500,
+      disabled: colors.superGrey50,
+      disabledDark: colors.superGrey300,
+      warning: colors.systemRed500,
+    },
+    border: {
+      ...BaseTheme.color.border,
+      primary: colors.superBlue500,
+      secondary: colors.neutral900,
+      disabledDark: colors.superGrey300,
+      defaultDark: colors.superGrey400,
+      default: colors.superGrey300,
+      disabled: colors.superGrey200,
+    },
+  },
+};
+
+export default SMTheme;

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,234 @@
+import '@emotion/styled';
+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;
+    }
+  }
+};