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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -52,26 +52,6 @@
52
52
  .map((animatedProp) => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : `${durationOption}ms`} ${easingOption} ${typeof delay === 'string' ? delay : `${delay}ms`}`)
53
53
  .join(',');
54
54
  };
55
- const hover$3 = (key) => {
56
- const bg = {
57
- [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
58
- [ctDesignTokens.colors.neutral900]: ctDesignTokens.colors.neutral900,
59
- [ctDesignTokens.colors.neutral900]: ctDesignTokens.colors.neutral900,
60
- [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
61
- [ctDesignTokens.colors.brand]: ctDesignTokens.colors.bgPrimaryHover,
62
- [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
63
- [ctDesignTokens.colors.disabledText]: ctDesignTokens.colors.disabledText,
64
- [ctDesignTokens.colors.neutral300]: ctDesignTokens.colors.neutral300,
65
- [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
66
- [ctDesignTokens.colors.link2]: ctDesignTokens.colors.link2Hover,
67
- [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
68
- [ctDesignTokens.colors.neutral900]: ctDesignTokens.colors.neutral900,
69
- [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
70
- [ctDesignTokens.colors.disabledText]: ctDesignTokens.colors.disabledText,
71
- [ctDesignTokens.colors.neutral300]: ctDesignTokens.colors.neutral300,
72
- };
73
- return bg[key];
74
- };
75
55
  const zIndex = {
76
56
  drawer: 1200,
77
57
  modal: 1300,
@@ -80,6 +60,7 @@
80
60
  sideNav: 100,
81
61
  toolbar: 50,
82
62
  bottomSheet: 100,
63
+ pageLoader: 1600,
83
64
  };
84
65
  const counter$1 = {
85
66
  enabled: {
@@ -100,7 +81,6 @@
100
81
  disabled: ctDesignTokens.colors.disabledText,
101
82
  success: ctDesignTokens.colors.successText,
102
83
  alert: ctDesignTokens.colors.alertText,
103
- alert500: ctDesignTokens.colors.alert500,
104
84
  warning: ctDesignTokens.colors.warningText,
105
85
  link: ctDesignTokens.colors.linkText,
106
86
  brand: ctDesignTokens.colors.brandText,
@@ -111,8 +91,13 @@
111
91
  secondary2: ctDesignTokens.colors.blue100,
112
92
  grapetini900: ctDesignTokens.colors.grapetini900,
113
93
  pinaColada750: ctDesignTokens.colors.pinaColada750,
94
+ alert500: ctDesignTokens.colors.alert500,
114
95
  neutral50: ctDesignTokens.colors.neutral50,
115
- coralpink: ctDesignTokens.colors.coralpink,
96
+ margarita750: ctDesignTokens.colors.margarita750,
97
+ green100: ctDesignTokens.colors.green100,
98
+ red100: ctDesignTokens.colors.red100,
99
+ coralpink: ctDesignTokens.colors.pinkVibrant500,
100
+ primary3: ctDesignTokens.colors.bluePrimary500,
116
101
  },
117
102
  button: {
118
103
  outlinedPrimaryLabel: ctDesignTokens.colors.neutral900,
@@ -124,9 +109,6 @@
124
109
  outlinedTertiaryLabel: ctDesignTokens.colors.link,
125
110
  outlinedTertiaryBorder: ctDesignTokens.colors.link,
126
111
  outlinedTertiaryBg: ctDesignTokens.colors.neutral100,
127
- outlinedNeutralLabel: ctDesignTokens.colors.neutral100,
128
- outlinedNeutralBorder: ctDesignTokens.colors.neutral100,
129
- outlinedNeutralBg: ctDesignTokens.colors.transparent,
130
112
  outlinedDisabledLabel: ctDesignTokens.colors.disabledText,
131
113
  outlinedDisabledBg: ctDesignTokens.colors.neutral300,
132
114
  containedPrimaryLabel: ctDesignTokens.colors.neutral100,
@@ -139,7 +121,26 @@
139
121
  containedDisabledBg: ctDesignTokens.colors.neutral300,
140
122
  containedNeutralLabel: ctDesignTokens.colors.neutral900,
141
123
  containedNeutralBg: ctDesignTokens.colors.neutral100,
142
- hover: hover$3,
124
+ outlinedNeutralLabel: ctDesignTokens.colors.neutral900,
125
+ outlinedNeutralBorder: ctDesignTokens.colors.neutral900,
126
+ outlinedNeutralBg: ctDesignTokens.colors.neutral100,
127
+ hover: {
128
+ [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
129
+ [ctDesignTokens.colors.neutral900]: ctDesignTokens.colors.neutral900,
130
+ [ctDesignTokens.colors.neutral900]: ctDesignTokens.colors.neutral900,
131
+ [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
132
+ [ctDesignTokens.colors.brand]: ctDesignTokens.colors.bgPrimaryHover,
133
+ [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
134
+ [ctDesignTokens.colors.disabledText]: ctDesignTokens.colors.disabledText,
135
+ [ctDesignTokens.colors.neutral300]: ctDesignTokens.colors.neutral300,
136
+ [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
137
+ [ctDesignTokens.colors.link2]: ctDesignTokens.colors.link2Hover,
138
+ [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
139
+ [ctDesignTokens.colors.neutral900]: ctDesignTokens.colors.neutral900,
140
+ [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
141
+ [ctDesignTokens.colors.disabledText]: ctDesignTokens.colors.disabledText,
142
+ [ctDesignTokens.colors.neutral300]: ctDesignTokens.colors.neutral300,
143
+ },
143
144
  },
144
145
  chip: {
145
146
  nonSelectedPrimaryLabel: ctDesignTokens.colors.neutral900,
@@ -147,7 +148,7 @@
147
148
  selectedPrimaryLabel: ctDesignTokens.colors.neutral900,
148
149
  selectedPrimaryBorder: ctDesignTokens.colors.neutral900,
149
150
  selectedPrimaryBg: ctDesignTokens.colors.neutral300,
150
- disabledPrimaryBg: ctDesignTokens.colors.neutral100,
151
+ disabledPrimaryBg: ctDesignTokens.colors.neutral300,
151
152
  },
152
153
  dropdown: {
153
154
  shadow: ctDesignTokens.colors.shadow,
@@ -185,10 +186,23 @@
185
186
  disabledSecondary: ctDesignTokens.colors.neutral400,
186
187
  disabledDark: ctDesignTokens.colors.disabled100,
187
188
  defaultDark: ctDesignTokens.colors.neutral700,
189
+ darkGrey: ctDesignTokens.colors.darkGrey,
188
190
  defaultDarkest: ctDesignTokens.colors.neutral900,
189
- grey: ctDesignTokens.colors.neutral500,
191
+ darkNetural300: ctDesignTokens.colors.darkNeutral300,
192
+ transparent: ctDesignTokens.colors.transparent,
190
193
  secondary2: ctDesignTokens.colors.blue100,
191
- sandGrey100: ctDesignTokens.colors.sandGrey100,
194
+ gray500: ctDesignTokens.colors.gray500,
195
+ mintCream: ctDesignTokens.colors.mintCream,
196
+ pinaColada100: ctDesignTokens.colors.pinaColada100,
197
+ margarita100: ctDesignTokens.colors.margarita100,
198
+ lightCyan: ctDesignTokens.colors.lightCyan,
199
+ neutral300: ctDesignTokens.colors.neutral300,
200
+ orange200: ctDesignTokens.colors.orange200,
201
+ couponGreen: ctDesignTokens.colors.couponGreen,
202
+ black100: ctDesignTokens.colors.black100,
203
+ orange100: ctDesignTokens.colors.orange100,
204
+ lightRed: ctDesignTokens.colors.red100,
205
+ neutral100: ctDesignTokens.colors.neutral100,
192
206
  },
193
207
  border: {
194
208
  primary: ctDesignTokens.colors.neutral900,
@@ -203,6 +217,12 @@
203
217
  disabledDark: ctDesignTokens.colors.disabled100,
204
218
  warning: ctDesignTokens.colors.warning,
205
219
  divider: ctDesignTokens.colors.neutral300,
220
+ borderAccent: ctDesignTokens.colors.lightSkyBlue,
221
+ neutral100: ctDesignTokens.colors.neutral100,
222
+ bluePrimary500: ctDesignTokens.colors.bluePrimary500,
223
+ disabled100: ctDesignTokens.colors.disabled100,
224
+ lightGray: ctDesignTokens.colors.lightGray,
225
+ darkRed: ctDesignTokens.colors.red500,
206
226
  },
207
227
  spinner: {
208
228
  primary: ctDesignTokens.colors.neutral700,
@@ -218,23 +238,27 @@
218
238
  alert: {
219
239
  success: ctDesignTokens.colors.successBg,
220
240
  warning: ctDesignTokens.colors.alertBg,
241
+ warningLight: ctDesignTokens.colors.warningLight,
221
242
  info: ctDesignTokens.colors.blue100,
222
- error: ctDesignTokens.colors.orange100,
243
+ error: ctDesignTokens.colors.warningBg,
223
244
  neutral: ctDesignTokens.colors.neutral100,
224
245
  },
225
246
  badge: {
226
247
  curacao: ctDesignTokens.colors.curacao250,
227
248
  curacao900: ctDesignTokens.colors.curacao900,
228
249
  pinaColada: ctDesignTokens.colors.pinaColada250,
250
+ pinaColada300: ctDesignTokens.colors.pinaColada300,
229
251
  margarita250: ctDesignTokens.colors.margarita250,
230
252
  default: ctDesignTokens.colors.neutral300,
231
253
  green: ctDesignTokens.colors.successBg,
254
+ green100: ctDesignTokens.colors.freshGreen100,
232
255
  margarita100: ctDesignTokens.colors.margarita100,
233
256
  yellow: ctDesignTokens.colors.alertBg,
234
257
  orange100: ctDesignTokens.colors.orange100,
235
258
  orange250: ctDesignTokens.colors.orange250,
236
259
  orange500: ctDesignTokens.colors.orange500,
237
260
  red: ctDesignTokens.colors.warningBg,
261
+ red100: ctDesignTokens.colors.alert100,
238
262
  green500: ctDesignTokens.colors.success500,
239
263
  green600: ctDesignTokens.colors.success600,
240
264
  purple100: ctDesignTokens.colors.purple100,
@@ -245,13 +269,20 @@
245
269
  aqua250: ctDesignTokens.colors.aqua250,
246
270
  black: ctDesignTokens.colors.black,
247
271
  link: ctDesignTokens.colors.link,
248
- linkText: ctDesignTokens.colors.linkText,
249
272
  blue100: ctDesignTokens.colors.blue100,
250
- blue500: ctDesignTokens.colors.blue500,
251
273
  blue900: ctDesignTokens.colors.blue900,
274
+ blue500: ctDesignTokens.colors.blue500,
252
275
  neutral100: ctDesignTokens.colors.neutral100,
276
+ neutral700: ctDesignTokens.colors.neutral700,
253
277
  pinaColada750: ctDesignTokens.colors.pinaColada750,
254
278
  pinaColada100: ctDesignTokens.colors.pinaColada100,
279
+ gray800: ctDesignTokens.colors.gray800,
280
+ couponGreen: ctDesignTokens.colors.couponGreen,
281
+ alert500: ctDesignTokens.colors.alert500,
282
+ alertSoft: ctDesignTokens.colors.alert100,
283
+ red200: ctDesignTokens.colors.red200,
284
+ red500: ctDesignTokens.colors.red500,
285
+ redSoft: ctDesignTokens.colors.red100,
255
286
  brown: ctDesignTokens.colors.brown,
256
287
  },
257
288
  counter: counter$1,
@@ -260,6 +291,19 @@
260
291
  background: ctDesignTokens.colors.neutral300,
261
292
  selected: ctDesignTokens.colors.neutral900,
262
293
  },
294
+ cursor: {
295
+ neutral900: ctDesignTokens.colors.neutral900,
296
+ },
297
+ chipicon: {
298
+ default: ctDesignTokens.colors.neutral900,
299
+ blue: ctDesignTokens.colors.blueSky500,
300
+ pink: ctDesignTokens.colors.pinkVibrant500,
301
+ yellow: ctDesignTokens.colors.yellowSun500,
302
+ purple: ctDesignTokens.colors.purpleRoyal500,
303
+ green: ctDesignTokens.colors.greenFresh500,
304
+ cfwBlue: ctDesignTokens.colors.blue900,
305
+ orange: ctDesignTokens.colors.orange500,
306
+ },
263
307
  },
264
308
  elevation: Object.assign({}, ctDesignTokens.elevation),
265
309
  border: Object.assign({}, ctDesignTokens.border),
@@ -272,56 +316,32 @@
272
316
  create,
273
317
  getAutoHeightDuration,
274
318
  },
275
- underline: {
276
- link: '',
277
- primary: '',
278
- secondary: '',
279
- tertiary: '',
280
- disabled: '',
281
- heading: '',
282
- subHeading: '',
283
- success: '',
284
- warning: '',
285
- neutral: '',
286
- link2: '',
287
- primary2: '',
288
- secondary2: '',
289
- grapetini900: '',
290
- pinaColada750: '',
291
- alert: '',
292
- },
293
319
  zIndex,
294
320
  };
295
321
 
296
322
  const B2CTheme = Object.assign({}, BaseTheme);
297
323
 
298
- const hover$2 = (key) => {
299
- const bg = {
300
- [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
301
- [ctDesignTokens.colors.neutral900]: ctDesignTokens.colors.neutral900,
302
- [ctDesignTokens.colors.neutral900]: ctDesignTokens.colors.neutral900,
303
- [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
304
- [ctDesignTokens.colors.brand]: ctDesignTokens.colors.bgPrimaryHover,
305
- [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
306
- [ctDesignTokens.colors.disabledText]: ctDesignTokens.colors.disabledText,
307
- [ctDesignTokens.colors.neutral300]: ctDesignTokens.colors.neutral300,
308
- [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
309
- [ctDesignTokens.colors.link2]: ctDesignTokens.colors.link2Hover,
310
- [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
311
- [ctDesignTokens.colors.neutral900]: ctDesignTokens.colors.neutral900,
312
- [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
313
- [ctDesignTokens.colors.disabledText]: ctDesignTokens.colors.disabledText,
314
- [ctDesignTokens.colors.neutral300]: ctDesignTokens.colors.neutral300,
315
- };
316
- return bg[key];
317
- };
318
- const B2BTheme = Object.assign(Object.assign({}, BaseTheme), { color: Object.assign(Object.assign({}, BaseTheme.color), { text: Object.assign(Object.assign({}, BaseTheme.color.text), { secondary: ctDesignTokens.colors.link2, tertiary: ctDesignTokens.colors.neutral500 }), button: Object.assign(Object.assign({}, BaseTheme.color.button), { outlinedPrimaryLabel: ctDesignTokens.colors.link2, outlinedPrimaryBorder: ctDesignTokens.colors.link2, outlinedPrimaryBg: ctDesignTokens.colors.neutral100, outlinedSecondaryLabel: ctDesignTokens.colors.neutral900, outlinedSecondaryBorder: ctDesignTokens.colors.neutral900, outlinedSecondaryBg: ctDesignTokens.colors.neutral100, outlinedTertiaryLabel: ctDesignTokens.colors.brand, outlinedTertiaryBorder: ctDesignTokens.colors.brand, outlinedTertiaryBg: ctDesignTokens.colors.neutral100, outlinedDisabledLabel: ctDesignTokens.colors.disabledText, outlinedDisabledBg: ctDesignTokens.colors.neutral300, containedPrimaryLabel: ctDesignTokens.colors.neutral100, containedPrimaryBg: ctDesignTokens.colors.link2, containedSecondaryLabel: ctDesignTokens.colors.neutral100, containedSecondaryBg: ctDesignTokens.colors.neutral900, containedTertiaryLabel: ctDesignTokens.colors.neutral100, containedTertiaryBg: ctDesignTokens.colors.brand, containedDisabledLabel: ctDesignTokens.colors.disabledText, containedDisabledBg: ctDesignTokens.colors.neutral300, hover: hover$2 }), chip: Object.assign(Object.assign({}, BaseTheme.color.chip), { selectedPrimaryLabel: ctDesignTokens.colors.link2, selectedPrimaryBorder: ctDesignTokens.colors.link2, selectedPrimaryBg: ctDesignTokens.colors.linkBg }), tab: Object.assign(Object.assign({}, BaseTheme.color.tab), { nonSelectedPrimaryLabel: ctDesignTokens.colors.neutral900, selectedPrimaryLabel: ctDesignTokens.colors.link2 }), background: Object.assign(Object.assign({}, BaseTheme.color.background), { primary: ctDesignTokens.colors.link2, secondary: ctDesignTokens.colors.neutral900, tertiary: ctDesignTokens.colors.brand }), border: Object.assign(Object.assign({}, BaseTheme.color.border), { primary: ctDesignTokens.colors.link2, secondary: ctDesignTokens.colors.neutral900, tertiary: ctDesignTokens.colors.brand, divider: ctDesignTokens.colors.line }), spinner: {
324
+ const B2BTheme = Object.assign(Object.assign({}, BaseTheme), { color: Object.assign(Object.assign({}, BaseTheme.color), { text: Object.assign(Object.assign({}, BaseTheme.color.text), { secondary: ctDesignTokens.colors.link2, tertiary: ctDesignTokens.colors.neutral500 }), button: Object.assign(Object.assign({}, BaseTheme.color.button), { outlinedPrimaryLabel: ctDesignTokens.colors.link2, outlinedPrimaryBorder: ctDesignTokens.colors.link2, outlinedPrimaryBg: ctDesignTokens.colors.neutral100, outlinedSecondaryLabel: ctDesignTokens.colors.neutral900, outlinedSecondaryBorder: ctDesignTokens.colors.neutral900, outlinedSecondaryBg: ctDesignTokens.colors.neutral100, outlinedTertiaryLabel: ctDesignTokens.colors.brand, outlinedTertiaryBorder: ctDesignTokens.colors.brand, outlinedTertiaryBg: ctDesignTokens.colors.neutral100, outlinedDisabledLabel: ctDesignTokens.colors.disabledText, outlinedDisabledBg: ctDesignTokens.colors.neutral300, containedPrimaryLabel: ctDesignTokens.colors.neutral100, containedPrimaryBg: ctDesignTokens.colors.link2, containedSecondaryLabel: ctDesignTokens.colors.neutral100, containedSecondaryBg: ctDesignTokens.colors.neutral900, containedTertiaryLabel: ctDesignTokens.colors.neutral100, containedTertiaryBg: ctDesignTokens.colors.brand, containedDisabledLabel: ctDesignTokens.colors.disabledText, containedDisabledBg: ctDesignTokens.colors.neutral300, hover: {
325
+ [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
326
+ [ctDesignTokens.colors.neutral900]: ctDesignTokens.colors.neutral900,
327
+ [ctDesignTokens.colors.neutral900]: ctDesignTokens.colors.neutral900,
328
+ [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
329
+ [ctDesignTokens.colors.brand]: ctDesignTokens.colors.bgPrimaryHover,
330
+ [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
331
+ [ctDesignTokens.colors.disabledText]: ctDesignTokens.colors.disabledText,
332
+ [ctDesignTokens.colors.neutral300]: ctDesignTokens.colors.neutral300,
333
+ [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
334
+ [ctDesignTokens.colors.link2]: ctDesignTokens.colors.link2Hover,
335
+ [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
336
+ [ctDesignTokens.colors.neutral900]: ctDesignTokens.colors.neutral900,
337
+ [ctDesignTokens.colors.neutral100]: ctDesignTokens.colors.neutral100,
338
+ [ctDesignTokens.colors.disabledText]: ctDesignTokens.colors.disabledText,
339
+ [ctDesignTokens.colors.neutral300]: ctDesignTokens.colors.neutral300,
340
+ } }), chip: Object.assign(Object.assign({}, BaseTheme.color.chip), { selectedPrimaryLabel: ctDesignTokens.colors.link2, selectedPrimaryBorder: ctDesignTokens.colors.link2, selectedPrimaryBg: ctDesignTokens.colors.linkBg }), tab: Object.assign(Object.assign({}, BaseTheme.color.tab), { nonSelectedPrimaryLabel: ctDesignTokens.colors.neutral900, selectedPrimaryLabel: ctDesignTokens.colors.link2 }), background: Object.assign(Object.assign({}, BaseTheme.color.background), { primary: ctDesignTokens.colors.link2, secondary: ctDesignTokens.colors.neutral900, tertiary: ctDesignTokens.colors.brand }), border: Object.assign(Object.assign({}, BaseTheme.color.border), { primary: ctDesignTokens.colors.link2, secondary: ctDesignTokens.colors.neutral900, tertiary: ctDesignTokens.colors.brand }), spinner: {
319
341
  primary: ctDesignTokens.colors.link2,
320
342
  primaryBg: ctDesignTokens.colors.alertBg,
321
- }, calendar: {
322
- accent: '',
323
- background: '',
324
- selected: ctDesignTokens.colors.link2,
343
+ }, coupon: {
344
+ primaryBg: ctDesignTokens.colors.blue100,
325
345
  } }) });
326
346
 
327
347
  const hover$1 = (key) => {