@cleartrip/ct-design-theme 4.0.0-rc → 5.0.0

package/src/themes/BaseTheme.ts

@@ -1,5 +1,6 @@
 import { colors, border, typography, spacing, size, elevation } from '@cleartrip/ct-design-tokens';
-import { Theme } from './type';
+
+import type { Theme } from './type';
 
 // inspired from chakra UI
 export const duration = {
@@ -40,8 +41,10 @@ function getAutoHeightDuration(height: number) {
   return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
 }
 
-const create = (props = ['all'], options: unknown = {}) => {
-  // @ts-ignore
+const create = (
+  props = ['all'],
+  options: { duration?: number | string; easing?: string; delay?: number | string } = {},
+) => {
   const { duration: durationOption = duration.standard, easing: easingOption = easing.easeInOut, delay = 0 } = options;
   return (Array.isArray(props) ? props : [props])
     .map(
@@ -53,27 +56,6 @@ const create = (props = ['all'], options: unknown = {}) => {
     .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,
@@ -82,6 +64,7 @@ const zIndex = {
   sideNav: 100,
   toolbar: 50,
   bottomSheet: 100,
+  pageLoader: 1600,
 };
 
 const counter = {
@@ -104,7 +87,6 @@ const BaseTheme: Theme = {
       disabled: colors.disabledText,
       success: colors.successText,
       alert: colors.alertText,
-      alert500: colors.alert500,
       warning: colors.warningText,
       link: colors.linkText,
       brand: colors.brandText,
@@ -115,8 +97,13 @@ const BaseTheme: Theme = {
       secondary2: colors.blue100,
       grapetini900: colors.grapetini900,
       pinaColada750: colors.pinaColada750,
+      alert500: colors.alert500,
       neutral50: colors.neutral50,
-      coralpink: colors.coralpink,
+      margarita750: colors.margarita750,
+      green100: colors.green100,
+      red100: colors.red100,
+      coralpink: colors.pinkVibrant500,
+      primary3: colors.bluePrimary500,
     },
     button: {
       outlinedPrimaryLabel: colors.neutral900,
@@ -128,9 +115,6 @@ const BaseTheme: Theme = {
       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,
@@ -143,7 +127,26 @@ const BaseTheme: Theme = {
       containedDisabledBg: colors.neutral300,
       containedNeutralLabel: colors.neutral900,
       containedNeutralBg: colors.neutral100,
-      hover,
+      outlinedNeutralLabel: colors.neutral900,
+      outlinedNeutralBorder: colors.neutral900,
+      outlinedNeutralBg: colors.neutral100,
+      hover: {
+        [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,
+      },
     },
     chip: {
       nonSelectedPrimaryLabel: colors.neutral900,
@@ -151,7 +154,7 @@ const BaseTheme: Theme = {
       selectedPrimaryLabel: colors.neutral900,
       selectedPrimaryBorder: colors.neutral900,
       selectedPrimaryBg: colors.neutral300,
-      disabledPrimaryBg: colors.neutral100,
+      disabledPrimaryBg: colors.neutral300,
     },
     dropdown: {
       shadow: colors.shadow,
@@ -189,10 +192,23 @@ const BaseTheme: Theme = {
       disabledSecondary: colors.neutral400,
       disabledDark: colors.disabled100,
       defaultDark: colors.neutral700,
+      darkGrey: colors.darkGrey,
       defaultDarkest: colors.neutral900,
-      grey: colors.neutral500,
+      darkNetural300: colors.darkNeutral300,
+      transparent: colors.transparent,
       secondary2: colors.blue100,
-      sandGrey100: colors.sandGrey100,
+      gray500: colors.gray500,
+      mintCream: colors.mintCream,
+      pinaColada100: colors.pinaColada100,
+      margarita100: colors.margarita100,
+      lightCyan: colors.lightCyan,
+      neutral300: colors.neutral300,
+      orange200: colors.orange200,
+      couponGreen: colors.couponGreen,
+      black100: colors.black100,
+      orange100: colors.orange100,
+      lightRed: colors.red100,
+      neutral100: colors.neutral100,
     },
     border: {
       primary: colors.neutral900,
@@ -207,6 +223,12 @@ const BaseTheme: Theme = {
       disabledDark: colors.disabled100,
       warning: colors.warning,
       divider: colors.neutral300,
+      borderAccent: colors.lightSkyBlue,
+      neutral100: colors.neutral100,
+      bluePrimary500: colors.bluePrimary500,
+      disabled100: colors.disabled100,
+      lightGray: colors.lightGray,
+      darkRed: colors.red500,
     },
     spinner: {
       primary: colors.neutral700,
@@ -222,23 +244,27 @@ const BaseTheme: Theme = {
     alert: {
       success: colors.successBg,
       warning: colors.alertBg,
+      warningLight: colors.warningLight,
       info: colors.blue100,
-      error: colors.orange100,
+      error: colors.warningBg,
       neutral: colors.neutral100,
     },
     badge: {
       curacao: colors.curacao250,
       curacao900: colors.curacao900,
       pinaColada: colors.pinaColada250,
+      pinaColada300: colors.pinaColada300,
       margarita250: colors.margarita250,
       default: colors.neutral300,
       green: colors.successBg,
+      green100: colors.freshGreen100,
       margarita100: colors.margarita100,
       yellow: colors.alertBg,
       orange100: colors.orange100,
       orange250: colors.orange250,
       orange500: colors.orange500,
       red: colors.warningBg,
+      red100: colors.alert100,
       green500: colors.success500,
       green600: colors.success600,
       purple100: colors.purple100,
@@ -249,13 +275,20 @@ const BaseTheme: Theme = {
       aqua250: colors.aqua250,
       black: colors.black,
       link: colors.link,
-      linkText: colors.linkText,
       blue100: colors.blue100,
-      blue500: colors.blue500,
       blue900: colors.blue900,
+      blue500: colors.blue500,
       neutral100: colors.neutral100,
+      neutral700: colors.neutral700,
       pinaColada750: colors.pinaColada750,
       pinaColada100: colors.pinaColada100,
+      gray800: colors.gray800,
+      couponGreen: colors.couponGreen,
+      alert500: colors.alert500,
+      alertSoft: colors.alert100,
+      red200: colors.red200,
+      red500: colors.red500,
+      redSoft: colors.red100,
       brown: colors.brown,
     },
     counter,
@@ -264,6 +297,19 @@ const BaseTheme: Theme = {
       background: colors.neutral300,
       selected: colors.neutral900,
     },
+    cursor: {
+      neutral900: colors.neutral900,
+    },
+    chipicon: {
+      default: colors.neutral900,
+      blue: colors.blueSky500,
+      pink: colors.pinkVibrant500,
+      yellow: colors.yellowSun500,
+      purple: colors.purpleRoyal500,
+      green: colors.greenFresh500,
+      cfwBlue: colors.blue900,
+      orange: colors.orange500,
+    },
   },
   elevation: { ...elevation },
   border: {
@@ -284,24 +330,6 @@ const BaseTheme: Theme = {
     create,
     getAutoHeightDuration,
   },
-  underline: {
-    link: '',
-    primary: '',
-    secondary: '',
-    tertiary: '',
-    disabled: '',
-    heading: '',
-    subHeading: '',
-    success: '',
-    warning: '',
-    neutral: '',
-    link2: '',
-    primary2: '',
-    secondary2: '',
-    grapetini900: '',
-    pinaColada750: '',
-    alert: '',
-  },
   zIndex,
 };
 

package/src/themes/index.ts

@@ -4,4 +4,4 @@ export { default as FKTheme } from './UltraFkTheme';
 export { default as BaseTheme } from './BaseTheme';
 export { default as SMTheme } from './SMTheme';
 
-export * from './type';
+export type * from './type';

package/src/themes/type.ts

@@ -23,13 +23,17 @@ export type Theme = {
       link2: string;
       margarita: string;
       // it's a new color introducted in figma
-      alert500: string;
       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;
@@ -41,9 +45,6 @@ export type Theme = {
       outlinedTertiaryLabel: string;
       outlinedTertiaryBorder: string;
       outlinedTertiaryBg: string;
-      outlinedNeutralLabel: string;
-      outlinedNeutralBorder: string;
-      outlinedNeutralBg: string;
       outlinedDisabledLabel: string;
       outlinedDisabledBg: string;
       containedPrimaryLabel: string;
@@ -56,6 +57,9 @@ export type Theme = {
       containedDisabledBg: string;
       containedNeutralLabel: string;
       containedNeutralBg: string;
+      outlinedNeutralLabel: string;
+      outlinedNeutralBorder: string;
+      outlinedNeutralBg: string;
       hover: unknown;
     };
     chip: {
@@ -103,9 +107,22 @@ export type Theme = {
       disabledDark: string;
       defaultDark: string;
       defaultDarkest: string;
-      grey: string;
+      darkNetural300: string;
+      darkGrey: string;
+      transparent: string;
       secondary2: string;
-      sandGrey100: 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;
@@ -120,6 +137,12 @@ export type Theme = {
       disabledDark: string;
       warning: string;
       divider: string;
+      disabled100: string;
+      borderAccent: string;
+      neutral100: string;
+      bluePrimary500: string;
+      lightGray: string;
+      darkRed: string;
     };
     spinner: {
       primary: string;
@@ -143,6 +166,7 @@ export type Theme = {
     alert: {
       success: string;
       warning: string;
+      warningLight: string;
       error: string;
       info: string;
       neutral: string;
@@ -151,15 +175,18 @@ export type Theme = {
       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;
@@ -170,13 +197,20 @@ export type Theme = {
       aqua250: string;
       black: string;
       link: string;
-      linkText: string;
       blue100: string;
-      blue500: 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: {
@@ -184,6 +218,19 @@ export type Theme = {
       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;
@@ -206,28 +253,20 @@ export type Theme = {
       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;
+    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';