@cleartrip/ct-design-theme 4.0.0-TEST.1 → 4.0.0-rc

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';