richie-education 3.3.2-dev31 → 3.3.2-dev33

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.
Files changed (9) hide show
  1. package/.prettierignore +0 -4
  2. package/cunningham.cjs +24 -6
  3. package/js/components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationSingular.tsx +18 -2
  4. package/js/components/SaleTunnel/SubscriptionButton/index.tsx +7 -5
  5. package/js/components/SaleTunnel/index.credential.spec.tsx +47 -0
  6. package/js/utils/cunningham-tokens.ts +44 -44
  7. package/package.json +2 -2
  8. package/scss/vendors/css/cunningham-tokens.css +25 -23
  9. package/scss/vendors/cunningham-tokens.scss +64 -64
package/.prettierignore CHANGED
@@ -3,7 +3,3 @@ i18n/**/*
3
3
  public-path.js
4
4
  # LexPersona iframe script
5
5
  iframe-manager.js
6
- # Generated by cunningham
7
- scss/vendors/cunningham-tokens.scss
8
- scss/vendors/css/cunningham-tokens.css
9
- js/utils/cunningham-tokens.ts
package/cunningham.cjs CHANGED
@@ -79,17 +79,35 @@ module.exports = {
79
79
  },
80
80
  },
81
81
  contextuals: {
82
- background: {
83
- semantic: {
84
- brand: { primary: '#f72c30', 'primary-hover': '#d60f29' },
85
- },
86
- },
87
82
  content: {
88
83
  semantic: {
89
- brand: { 'on-brand': '#FFFFFF', tertiary: '#555F6B' },
84
+ brand: { 'on-brand': 'ref(globals.colors.gray-000)', tertiary: 'ref(globals.colors.gray-600)' },
90
85
  },
91
86
  },
92
87
  },
88
+ globals: {
89
+ colors: {
90
+ 'brand-050': '#fff0f1',
91
+ 'brand-100': '#ffcad1',
92
+ 'brand-150': '#f8b0b4',
93
+ 'brand-200': '#f19597',
94
+ 'brand-250': '#ed8083',
95
+ 'brand-300': '#e86a6f',
96
+ 'brand-350': '#ed575d',
97
+ 'brand-400': '#f2444b',
98
+ 'brand-450': '#f5383e',
99
+ 'brand-500': '#f63237',
100
+ 'brand-550': '#f72c30',
101
+ 'brand-600': '#e81f2f',
102
+ 'brand-650': '#d60f29',
103
+ 'brand-700': '#c90022',
104
+ 'brand-750': '#c2001b',
105
+ 'brand-800': '#bb0014',
106
+ 'brand-850': '#a30010',
107
+ 'brand-900': '#8c000d',
108
+ 'brand-950': '#6b0009',
109
+ },
110
+ },
93
111
  },
94
112
  },
95
113
  };
package/js/components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationSingular.tsx CHANGED
@@ -236,7 +236,12 @@ export const SaleTunnelInformationSingular = () => {
236
236
  </div>
237
237
  )}
238
238
  {paymentMode === PaymentMode.CPF ? (
239
- <CpfPayment deepLink={deepLink!} />
239
+ <CpfPayment
240
+ deepLink={deepLink!}
241
+ discount={discount}
242
+ voucherError={voucherError}
243
+ setVoucherError={setVoucherError}
244
+ />
240
245
  ) : (
241
246
  <>
242
247
  {needsPayment && (
@@ -499,7 +504,17 @@ const PaymentScheduleBlock = ({ schedule }: { schedule: PaymentSchedule }) => {
499
504
  );
500
505
  };
501
506
 
502
- const CpfPayment = ({ deepLink }: { deepLink: string }) => {
507
+ const CpfPayment = ({
508
+ deepLink,
509
+ discount,
510
+ voucherError,
511
+ setVoucherError,
512
+ }: {
513
+ deepLink: string;
514
+ discount?: string;
515
+ voucherError: HttpError | null;
516
+ setVoucherError: (value: HttpError | null) => void;
517
+ }) => {
503
518
  return (
504
519
  <div className="sale-tunnel__cpf">
505
520
  <p className="description mb-s">
@@ -514,6 +529,7 @@ const CpfPayment = ({ deepLink }: { deepLink: string }) => {
514
529
  >
515
530
  <FormattedMessage {...messages.cpfButtonLabel} />
516
531
  </Button>
532
+ <Voucher discount={discount} voucherError={voucherError} setVoucherError={setVoucherError} />
517
533
  </div>
518
534
  );
519
535
  };
package/js/components/SaleTunnel/SubscriptionButton/index.tsx CHANGED
@@ -110,9 +110,6 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
110
110
  paymentMode,
111
111
  } = useSaleTunnelContext();
112
112
 
113
- if (paymentMode === PaymentMode.CPF) {
114
- return null;
115
- }
116
113
  const { methods: orderMethods } = useOrders(undefined, { enabled: false });
117
114
  const { methods: batchOrderMethods } = useBatchOrder();
118
115
  const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
@@ -138,12 +135,17 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
138
135
  return;
139
136
  }
140
137
 
141
- if (!billingAddress && needsPayment) {
138
+ if (!billingAddress && needsPayment && paymentMode !== PaymentMode.CPF) {
142
139
  handleError(SubscriptionErrorMessageId.ERROR_ADDRESS);
143
140
  return;
144
141
  }
145
142
 
146
- if (!saleTunnelProps.isWithdrawable && !hasWaivedWithdrawalRight && needsPayment) {
143
+ if (
144
+ !saleTunnelProps.isWithdrawable &&
145
+ !hasWaivedWithdrawalRight &&
146
+ needsPayment &&
147
+ paymentMode !== PaymentMode.CPF
148
+ ) {
147
149
  handleError(SubscriptionErrorMessageId.ERROR_WITHDRAWAL_RIGHT);
148
150
  return;
149
151
  }
package/js/components/SaleTunnel/index.credential.spec.tsx CHANGED
@@ -222,4 +222,51 @@ describe('SaleTunnel / Credential', () => {
222
222
  // - Classic billing information section should be displayed.
223
223
  expect(screen.getByText(/this information will be used for billing/i)).toBeInTheDocument();
224
224
  });
225
+
226
+ it('should display voucher input and subscribe button in CPF mode', async () => {
227
+ const course = PacedCourseFactory().one();
228
+ const product = CredentialProductFactory().one();
229
+ const billingAddress: Joanie.Address = AddressFactory({ is_main: true }).one();
230
+ const deepLink = 'https://placeholder.com/course/1';
231
+ const orderQueryParameters = {
232
+ course_code: course.code,
233
+ product_id: product.id,
234
+ state: NOT_CANCELED_ORDER_STATES,
235
+ };
236
+
237
+ fetchMock
238
+ .get(
239
+ `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`,
240
+ [],
241
+ )
242
+ .get(
243
+ `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
244
+ [],
245
+ )
246
+ .get(
247
+ `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
248
+ { deep_link: deepLink },
249
+ )
250
+ .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
251
+ overwriteRoutes: true,
252
+ });
253
+
254
+ const user = userEvent.setup({ delay: null });
255
+
256
+ render(<Wrapper product={product} course={course} />, {
257
+ queryOptions: { client: createTestQueryClient({ user: richieUser }) },
258
+ });
259
+
260
+ await screen.findByRole('heading', { level: 3, name: /payment method/i });
261
+
262
+ // Switch to CPF mode
263
+ await user.click(screen.getByRole('radio', { name: /my training account \(cpf\)/i }));
264
+
265
+ // - Voucher input should be visible in CPF mode.
266
+ expect(screen.getByLabelText('Voucher code')).toBeInTheDocument();
267
+ expect(screen.getByRole('button', { name: 'Validate' })).toBeInTheDocument();
268
+
269
+ // - Subscribe button should be visible in CPF mode.
270
+ expect(screen.getByRole('button', { name: 'Subscribe' })).toBeInTheDocument();
271
+ });
225
272
  });
package/js/utils/cunningham-tokens.ts CHANGED
@@ -7,25 +7,25 @@ export const tokens = {
7
7
  'logo-2': '#377FDB',
8
8
  'logo-1-dark': '#95ABFF',
9
9
  'logo-2-dark': '#95ABFF',
10
- 'brand-050': '#EAF1FB',
11
- 'brand-100': '#D5E4F7',
12
- 'brand-150': '#C0D6F4',
13
- 'brand-200': '#ABC9F0',
14
- 'brand-250': '#96BCEC',
15
- 'brand-300': '#80AEE8',
16
- 'brand-350': '#6CA0E4',
17
- 'brand-400': '#5693E0',
18
- 'brand-450': '#4085DC',
19
- 'brand-500': '#2976D8',
20
- 'brand-550': '#1167D4',
21
- 'brand-600': '#0659C5',
22
- 'brand-650': '#1A509F',
23
- 'brand-700': '#20467F',
24
- 'brand-750': '#203C63',
25
- 'brand-800': '#1D314C',
26
- 'brand-850': '#1A2638',
27
- 'brand-900': '#141C28',
28
- 'brand-950': '#0C1117',
10
+ 'brand-050': '#fff0f1',
11
+ 'brand-100': '#ffcad1',
12
+ 'brand-150': '#f8b0b4',
13
+ 'brand-200': '#f19597',
14
+ 'brand-250': '#ed8083',
15
+ 'brand-300': '#e86a6f',
16
+ 'brand-350': '#ed575d',
17
+ 'brand-400': '#f2444b',
18
+ 'brand-450': '#f5383e',
19
+ 'brand-500': '#f63237',
20
+ 'brand-550': '#f72c30',
21
+ 'brand-600': '#e81f2f',
22
+ 'brand-650': '#d60f29',
23
+ 'brand-700': '#c90022',
24
+ 'brand-750': '#c2001b',
25
+ 'brand-800': '#bb0014',
26
+ 'brand-850': '#a30010',
27
+ 'brand-900': '#8c000d',
28
+ 'brand-950': '#6b0009',
29
29
  'gray-000': '#FFFFFF',
30
30
  'gray-025': '#F7F8F8',
31
31
  'gray-050': '#F0F1F2',
@@ -410,10 +410,10 @@ export const tokens = {
410
410
  brand: {
411
411
  primary: '#f72c30',
412
412
  'primary-hover': '#d60f29',
413
- secondary: '#D5E4F7',
414
- 'secondary-hover': '#C0D6F4',
415
- tertiary: '#EAF1FB',
416
- 'tertiary-hover': '#D5E4F7',
413
+ secondary: '#ffcad1',
414
+ 'secondary-hover': '#f8b0b4',
415
+ tertiary: '#fff0f1',
416
+ 'tertiary-hover': '#ffcad1',
417
417
  },
418
418
  neutral: {
419
419
  primary: '#686B6F',
@@ -459,7 +459,7 @@ export const tokens = {
459
459
  disabled: { primary: '#E1E2E5', secondary: '#F0F1F2' },
460
460
  },
461
461
  palette: {
462
- brand: { primary: '#2976D8', secondary: '#6CA0E4', tertiary: '#C0D6F4' },
462
+ brand: { primary: '#f63237', secondary: '#ed575d', tertiary: '#f8b0b4' },
463
463
  red: { primary: '#D83F3D', secondary: '#EE7C7B', tertiary: '#F8C9C9' },
464
464
  orange: { primary: '#BE5B0F', secondary: '#F27E27', tertiary: '#FACBA8' },
465
465
  brown: { primary: '#8F7065', secondary: '#AF9992', tertiary: '#DCD2CF' },
@@ -478,9 +478,9 @@ export const tokens = {
478
478
  logo2: '#377FDB',
479
479
  semantic: {
480
480
  brand: {
481
- primary: '#20467F',
482
- secondary: '#0659C5',
483
- tertiary: '#555F6B',
481
+ primary: '#c90022',
482
+ secondary: '#e81f2f',
483
+ tertiary: '#5C5F63',
484
484
  'on-brand': '#FFFFFF',
485
485
  },
486
486
  neutral: {
@@ -517,7 +517,7 @@ export const tokens = {
517
517
  disabled: { primary: '#A7ACB2', secondary: '#FFFFFF80' },
518
518
  },
519
519
  palette: {
520
- brand: { primary: '#2976D8', secondary: '#6CA0E4', tertiary: '#C0D6F4' },
520
+ brand: { primary: '#f63237', secondary: '#ed575d', tertiary: '#f8b0b4' },
521
521
  red: { primary: '#D83F3D', secondary: '#EE7C7B', tertiary: '#F8C9C9' },
522
522
  orange: { primary: '#BE5B0F', secondary: '#F27E27', tertiary: '#FACBA8' },
523
523
  brown: { primary: '#8F7065', secondary: '#AF9992', tertiary: '#DCD2CF' },
@@ -533,7 +533,7 @@ export const tokens = {
533
533
  border: {
534
534
  surface: { primary: '#E1E2E5' },
535
535
  semantic: {
536
- brand: { primary: '#1167D4', secondary: '#80AEE8', tertiary: '#C0D6F4' },
536
+ brand: { primary: '#f72c30', secondary: '#e86a6f', tertiary: '#f8b0b4' },
537
537
  contextual: { primary: '#FFFFFF33' },
538
538
  neutral: { primary: '#686B6F', secondary: '#A7ACB2', tertiary: '#D2D4D8' },
539
539
  info: { primary: '#1167D4', secondary: '#80AEE8', tertiary: '#C0D6F4' },
@@ -543,7 +543,7 @@ export const tokens = {
543
543
  disabled: { primary: '#E1E2E5' },
544
544
  },
545
545
  palette: {
546
- brand: { primary: '#2976D8', secondary: '#6CA0E4', tertiary: '#C0D6F4' },
546
+ brand: { primary: '#f63237', secondary: '#ed575d', tertiary: '#f8b0b4' },
547
547
  red: { primary: '#D83F3D', secondary: '#EE7C7B', tertiary: '#F8C9C9' },
548
548
  orange: { primary: '#BE5B0F', secondary: '#F27E27', tertiary: '#FACBA8' },
549
549
  brown: { primary: '#8F7065', secondary: '#AF9992', tertiary: '#DCD2CF' },
@@ -1015,12 +1015,12 @@ export const tokens = {
1015
1015
  surface: { primary: '#2F3033', secondary: '#252627', tertiary: '#1B1C1D' },
1016
1016
  semantic: {
1017
1017
  brand: {
1018
- primary: '#1167D4',
1019
- 'primary-hover': '#1A509F',
1020
- secondary: '#20467F',
1021
- 'secondary-hover': '#203C63',
1022
- tertiary: '#203C63',
1023
- 'tertiary-hover': '#1D314C',
1018
+ primary: '#f72c30',
1019
+ 'primary-hover': '#d60f29',
1020
+ secondary: '#c90022',
1021
+ 'secondary-hover': '#c2001b',
1022
+ tertiary: '#c2001b',
1023
+ 'tertiary-hover': '#bb0014',
1024
1024
  },
1025
1025
  neutral: {
1026
1026
  primary: '#686B6F',
@@ -1066,7 +1066,7 @@ export const tokens = {
1066
1066
  disabled: { primary: '#3A3B3E', secondary: '#2F3033' },
1067
1067
  },
1068
1068
  palette: {
1069
- brand: { primary: '#6CA0E4', secondary: '#4085DC', tertiary: '#1167D4' },
1069
+ brand: { primary: '#ed575d', secondary: '#f5383e', tertiary: '#f72c30' },
1070
1070
  red: { primary: '#EE7C7B', secondary: '#E74E4D', tertiary: '#C23837' },
1071
1071
  orange: { primary: '#F27E27', secondary: '#D26411', tertiary: '#AA510E' },
1072
1072
  brown: { primary: '#AF9992', secondary: '#997E74', tertiary: '#846357' },
@@ -1084,10 +1084,10 @@ export const tokens = {
1084
1084
  logo2: '#95ABFF',
1085
1085
  semantic: {
1086
1086
  brand: {
1087
- primary: '#EAF1FB',
1088
- secondary: '#D5E4F7',
1089
- tertiary: '#96BCEC',
1090
- 'on-brand': '#EAF1FB',
1087
+ primary: '#fff0f1',
1088
+ secondary: '#ffcad1',
1089
+ tertiary: '#ed8083',
1090
+ 'on-brand': '#fff0f1',
1091
1091
  },
1092
1092
  neutral: {
1093
1093
  primary: '#F0F1F2',
@@ -1123,7 +1123,7 @@ export const tokens = {
1123
1123
  disabled: { primary: '#5C5F63', secondary: '#0000004D' },
1124
1124
  },
1125
1125
  palette: {
1126
- brand: { primary: '#6CA0E4', secondary: '#4085DC', tertiary: '#1167D4' },
1126
+ brand: { primary: '#ed575d', secondary: '#f5383e', tertiary: '#f72c30' },
1127
1127
  red: { primary: '#EE7C7B', secondary: '#E74E4D', tertiary: '#C23837' },
1128
1128
  orange: { primary: '#F27E27', secondary: '#D26411', tertiary: '#AA510E' },
1129
1129
  brown: { primary: '#AF9992', secondary: '#997E74', tertiary: '#846357' },
@@ -1139,7 +1139,7 @@ export const tokens = {
1139
1139
  border: {
1140
1140
  surface: { primary: '#3A3B3E' },
1141
1141
  semantic: {
1142
- brand: { primary: '#4085DC', secondary: '#0659C5', tertiary: '#20467F' },
1142
+ brand: { primary: '#f5383e', secondary: '#e81f2f', tertiary: '#c90022' },
1143
1143
  contextual: { primary: '#00000033' },
1144
1144
  neutral: { primary: '#80848A', secondary: '#5C5F63', tertiary: '#45474A' },
1145
1145
  info: { primary: '#4085DC', secondary: '#0659C5', tertiary: '#20467F' },
@@ -1149,7 +1149,7 @@ export const tokens = {
1149
1149
  disabled: { primary: '#2F3033' },
1150
1150
  },
1151
1151
  palette: {
1152
- brand: { primary: '#6CA0E4', secondary: '#4085DC', tertiary: '#1167D4' },
1152
+ brand: { primary: '#ed575d', secondary: '#f5383e', tertiary: '#f72c30' },
1153
1153
  red: { primary: '#EE7C7B', secondary: '#E74E4D', tertiary: '#C23837' },
1154
1154
  orange: { primary: '#F27E27', secondary: '#D26411', tertiary: '#AA510E' },
1155
1155
  brown: { primary: '#AF9992', secondary: '#997E74', tertiary: '#846357' },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "richie-education",
3
- "version": "3.3.2-dev31",
3
+ "version": "3.3.2-dev33",
4
4
  "description": "A CMS to build learning portals for Open Education",
5
5
  "main": "sandbox/manage.py",
6
6
  "scripts": {
@@ -18,7 +18,7 @@
18
18
  "watch-ts": "yarn build-ts --watch",
19
19
  "storybook": "storybook dev -p 6006",
20
20
  "build-storybook": "storybook build",
21
- "build-theme": "cunningham -g scss -o scss/vendors && cunningham -g css -o scss/vendors/css && cunningham -g ts -o js/utils/"
21
+ "build-theme": "cunningham -g scss -o scss/vendors && cunningham -g css -o scss/vendors/css && cunningham -g ts -o js/utils/ && prettier --write scss/vendors/cunningham-tokens.scss scss/vendors/css/cunningham-tokens.css js/utils/cunningham-tokens.ts"
22
22
  },
23
23
  "repository": {
24
24
  "type": "git",
package/scss/vendors/css/cunningham-tokens.css CHANGED
@@ -3,25 +3,25 @@
3
3
  --c--globals--colors--logo-2: #377fdb;
4
4
  --c--globals--colors--logo-1-dark: #95abff;
5
5
  --c--globals--colors--logo-2-dark: #95abff;
6
- --c--globals--colors--brand-050: #eaf1fb;
7
- --c--globals--colors--brand-100: #d5e4f7;
8
- --c--globals--colors--brand-150: #c0d6f4;
9
- --c--globals--colors--brand-200: #abc9f0;
10
- --c--globals--colors--brand-250: #96bcec;
11
- --c--globals--colors--brand-300: #80aee8;
12
- --c--globals--colors--brand-350: #6ca0e4;
13
- --c--globals--colors--brand-400: #5693e0;
14
- --c--globals--colors--brand-450: #4085dc;
15
- --c--globals--colors--brand-500: #2976d8;
16
- --c--globals--colors--brand-550: #1167d4;
17
- --c--globals--colors--brand-600: #0659c5;
18
- --c--globals--colors--brand-650: #1a509f;
19
- --c--globals--colors--brand-700: #20467f;
20
- --c--globals--colors--brand-750: #203c63;
21
- --c--globals--colors--brand-800: #1d314c;
22
- --c--globals--colors--brand-850: #1a2638;
23
- --c--globals--colors--brand-900: #141c28;
24
- --c--globals--colors--brand-950: #0c1117;
6
+ --c--globals--colors--brand-050: #fff0f1;
7
+ --c--globals--colors--brand-100: #ffcad1;
8
+ --c--globals--colors--brand-150: #f8b0b4;
9
+ --c--globals--colors--brand-200: #f19597;
10
+ --c--globals--colors--brand-250: #ed8083;
11
+ --c--globals--colors--brand-300: #e86a6f;
12
+ --c--globals--colors--brand-350: #ed575d;
13
+ --c--globals--colors--brand-400: #f2444b;
14
+ --c--globals--colors--brand-450: #f5383e;
15
+ --c--globals--colors--brand-500: #f63237;
16
+ --c--globals--colors--brand-550: #f72c30;
17
+ --c--globals--colors--brand-600: #e81f2f;
18
+ --c--globals--colors--brand-650: #d60f29;
19
+ --c--globals--colors--brand-700: #c90022;
20
+ --c--globals--colors--brand-750: #c2001b;
21
+ --c--globals--colors--brand-800: #bb0014;
22
+ --c--globals--colors--brand-850: #a30010;
23
+ --c--globals--colors--brand-900: #8c000d;
24
+ --c--globals--colors--brand-950: #6b0009;
25
25
  --c--globals--colors--gray-000: #ffffff;
26
26
  --c--globals--colors--gray-025: #f7f8f8;
27
27
  --c--globals--colors--gray-050: #f0f1f2;
@@ -393,8 +393,10 @@
393
393
  --c--contextuals--background--surface--primary: var(--c--globals--colors--gray-000);
394
394
  --c--contextuals--background--surface--secondary: var(--c--globals--colors--gray-000);
395
395
  --c--contextuals--background--surface--tertiary: var(--c--globals--colors--gray-025);
396
- --c--contextuals--background--semantic--brand--primary: #f72c30;
397
- --c--contextuals--background--semantic--brand--primary-hover: #d60f29;
396
+ --c--contextuals--background--semantic--brand--primary: var(--c--globals--colors--brand-550);
397
+ --c--contextuals--background--semantic--brand--primary-hover: var(
398
+ --c--globals--colors--brand-650
399
+ );
398
400
  --c--contextuals--background--semantic--brand--secondary: var(--c--globals--colors--brand-100);
399
401
  --c--contextuals--background--semantic--brand--secondary-hover: var(
400
402
  --c--globals--colors--brand-150
@@ -507,8 +509,8 @@
507
509
  --c--contextuals--content--logo2: var(--c--globals--colors--logo-2);
508
510
  --c--contextuals--content--semantic--brand--primary: var(--c--globals--colors--brand-700);
509
511
  --c--contextuals--content--semantic--brand--secondary: var(--c--globals--colors--brand-600);
510
- --c--contextuals--content--semantic--brand--tertiary: #555f6b;
511
- --c--contextuals--content--semantic--brand--on-brand: #ffffff;
512
+ --c--contextuals--content--semantic--brand--tertiary: var(--c--globals--colors--gray-600);
513
+ --c--contextuals--content--semantic--brand--on-brand: var(--c--globals--colors--gray-000);
512
514
  --c--contextuals--content--semantic--neutral--primary: var(--c--globals--colors--gray-850);
513
515
  --c--contextuals--content--semantic--neutral--secondary: var(--c--globals--colors--gray-600);
514
516
  --c--contextuals--content--semantic--neutral--tertiary: var(--c--globals--colors--gray-500);
package/scss/vendors/cunningham-tokens.scss CHANGED
@@ -6,25 +6,25 @@ $themes: (
6
6
  'logo-2': #377fdb,
7
7
  'logo-1-dark': #95abff,
8
8
  'logo-2-dark': #95abff,
9
- 'brand-050': #eaf1fb,
10
- 'brand-100': #d5e4f7,
11
- 'brand-150': #c0d6f4,
12
- 'brand-200': #abc9f0,
13
- 'brand-250': #96bcec,
14
- 'brand-300': #80aee8,
15
- 'brand-350': #6ca0e4,
16
- 'brand-400': #5693e0,
17
- 'brand-450': #4085dc,
18
- 'brand-500': #2976d8,
19
- 'brand-550': #1167d4,
20
- 'brand-600': #0659c5,
21
- 'brand-650': #1a509f,
22
- 'brand-700': #20467f,
23
- 'brand-750': #203c63,
24
- 'brand-800': #1d314c,
25
- 'brand-850': #1a2638,
26
- 'brand-900': #141c28,
27
- 'brand-950': #0c1117,
9
+ 'brand-050': #fff0f1,
10
+ 'brand-100': #ffcad1,
11
+ 'brand-150': #f8b0b4,
12
+ 'brand-200': #f19597,
13
+ 'brand-250': #ed8083,
14
+ 'brand-300': #e86a6f,
15
+ 'brand-350': #ed575d,
16
+ 'brand-400': #f2444b,
17
+ 'brand-450': #f5383e,
18
+ 'brand-500': #f63237,
19
+ 'brand-550': #f72c30,
20
+ 'brand-600': #e81f2f,
21
+ 'brand-650': #d60f29,
22
+ 'brand-700': #c90022,
23
+ 'brand-750': #c2001b,
24
+ 'brand-800': #bb0014,
25
+ 'brand-850': #a30010,
26
+ 'brand-900': #8c000d,
27
+ 'brand-950': #6b0009,
28
28
  'gray-000': #ffffff,
29
29
  'gray-025': #f7f8f8,
30
30
  'gray-050': #f0f1f2,
@@ -373,9 +373,9 @@ $themes: (
373
373
  'black': 800,
374
374
  ),
375
375
  'families': (
376
- 'base': #{\RobotoFlex Variable\,
376
+ 'base': #{\RobotoFlexVariable\,
377
377
  sans-serif},
378
- 'accent': #{\RobotoFlex Variable\,
378
+ 'accent': #{\RobotoFlexVariable\,
379
379
  sans-serif},
380
380
  ),
381
381
  ),
@@ -422,10 +422,10 @@ $themes: (
422
422
  'brand': (
423
423
  'primary': #f72c30,
424
424
  'primary-hover': #d60f29,
425
- 'secondary': #d5e4f7,
426
- 'secondary-hover': #c0d6f4,
427
- 'tertiary': #eaf1fb,
428
- 'tertiary-hover': #d5e4f7,
425
+ 'secondary': #ffcad1,
426
+ 'secondary-hover': #f8b0b4,
427
+ 'tertiary': #fff0f1,
428
+ 'tertiary-hover': #ffcad1,
429
429
  ),
430
430
  'neutral': (
431
431
  'primary': #686b6f,
@@ -478,9 +478,9 @@ $themes: (
478
478
  ),
479
479
  'palette': (
480
480
  'brand': (
481
- 'primary': #2976d8,
482
- 'secondary': #6ca0e4,
483
- 'tertiary': #c0d6f4,
481
+ 'primary': #f63237,
482
+ 'secondary': #ed575d,
483
+ 'tertiary': #f8b0b4,
484
484
  ),
485
485
  'red': (
486
486
  'primary': #d83f3d,
@@ -542,9 +542,9 @@ $themes: (
542
542
  'logo2': #377fdb,
543
543
  'semantic': (
544
544
  'brand': (
545
- 'primary': #20467f,
546
- 'secondary': #0659c5,
547
- 'tertiary': #555f6b,
545
+ 'primary': #c90022,
546
+ 'secondary': #e81f2f,
547
+ 'tertiary': #5c5f63,
548
548
  'on-brand': #ffffff,
549
549
  ),
550
550
  'neutral': (
@@ -587,9 +587,9 @@ $themes: (
587
587
  ),
588
588
  'palette': (
589
589
  'brand': (
590
- 'primary': #2976d8,
591
- 'secondary': #6ca0e4,
592
- 'tertiary': #c0d6f4,
590
+ 'primary': #f63237,
591
+ 'secondary': #ed575d,
592
+ 'tertiary': #f8b0b4,
593
593
  ),
594
594
  'red': (
595
595
  'primary': #d83f3d,
@@ -649,9 +649,9 @@ $themes: (
649
649
  ),
650
650
  'semantic': (
651
651
  'brand': (
652
- 'primary': #1167d4,
653
- 'secondary': #80aee8,
654
- 'tertiary': #c0d6f4,
652
+ 'primary': #f72c30,
653
+ 'secondary': #e86a6f,
654
+ 'tertiary': #f8b0b4,
655
655
  ),
656
656
  'contextual': (
657
657
  'primary': #ffffff33,
@@ -687,9 +687,9 @@ $themes: (
687
687
  ),
688
688
  'palette': (
689
689
  'brand': (
690
- 'primary': #2976d8,
691
- 'secondary': #6ca0e4,
692
- 'tertiary': #c0d6f4,
690
+ 'primary': #f63237,
691
+ 'secondary': #ed575d,
692
+ 'tertiary': #f8b0b4,
693
693
  ),
694
694
  'red': (
695
695
  'primary': #d83f3d,
@@ -1178,9 +1178,9 @@ $themes: (
1178
1178
  'black': 800,
1179
1179
  ),
1180
1180
  'families': (
1181
- 'base': #{\RobotoFlex Variable\,
1181
+ 'base': #{\RobotoFlexVariable\,
1182
1182
  sans-serif},
1183
- 'accent': #{\RobotoFlex Variable\,
1183
+ 'accent': #{\RobotoFlexVariable\,
1184
1184
  sans-serif},
1185
1185
  ),
1186
1186
  ),
@@ -1225,12 +1225,12 @@ $themes: (
1225
1225
  ),
1226
1226
  'semantic': (
1227
1227
  'brand': (
1228
- 'primary': #1167d4,
1229
- 'primary-hover': #1a509f,
1230
- 'secondary': #20467f,
1231
- 'secondary-hover': #203c63,
1232
- 'tertiary': #203c63,
1233
- 'tertiary-hover': #1d314c,
1228
+ 'primary': #f72c30,
1229
+ 'primary-hover': #d60f29,
1230
+ 'secondary': #c90022,
1231
+ 'secondary-hover': #c2001b,
1232
+ 'tertiary': #c2001b,
1233
+ 'tertiary-hover': #bb0014,
1234
1234
  ),
1235
1235
  'neutral': (
1236
1236
  'primary': #686b6f,
@@ -1283,9 +1283,9 @@ $themes: (
1283
1283
  ),
1284
1284
  'palette': (
1285
1285
  'brand': (
1286
- 'primary': #6ca0e4,
1287
- 'secondary': #4085dc,
1288
- 'tertiary': #1167d4,
1286
+ 'primary': #ed575d,
1287
+ 'secondary': #f5383e,
1288
+ 'tertiary': #f72c30,
1289
1289
  ),
1290
1290
  'red': (
1291
1291
  'primary': #ee7c7b,
@@ -1344,10 +1344,10 @@ $themes: (
1344
1344
  'logo2': #95abff,
1345
1345
  'semantic': (
1346
1346
  'brand': (
1347
- 'primary': #eaf1fb,
1348
- 'secondary': #d5e4f7,
1349
- 'tertiary': #96bcec,
1350
- 'on-brand': #eaf1fb,
1347
+ 'primary': #fff0f1,
1348
+ 'secondary': #ffcad1,
1349
+ 'tertiary': #ed8083,
1350
+ 'on-brand': #fff0f1,
1351
1351
  ),
1352
1352
  'neutral': (
1353
1353
  'primary': #f0f1f2,
@@ -1389,9 +1389,9 @@ $themes: (
1389
1389
  ),
1390
1390
  'palette': (
1391
1391
  'brand': (
1392
- 'primary': #6ca0e4,
1393
- 'secondary': #4085dc,
1394
- 'tertiary': #1167d4,
1392
+ 'primary': #ed575d,
1393
+ 'secondary': #f5383e,
1394
+ 'tertiary': #f72c30,
1395
1395
  ),
1396
1396
  'red': (
1397
1397
  'primary': #ee7c7b,
@@ -1451,9 +1451,9 @@ $themes: (
1451
1451
  ),
1452
1452
  'semantic': (
1453
1453
  'brand': (
1454
- 'primary': #4085dc,
1455
- 'secondary': #0659c5,
1456
- 'tertiary': #20467f,
1454
+ 'primary': #f5383e,
1455
+ 'secondary': #e81f2f,
1456
+ 'tertiary': #c90022,
1457
1457
  ),
1458
1458
  'contextual': (
1459
1459
  'primary': #00000033,
@@ -1489,9 +1489,9 @@ $themes: (
1489
1489
  ),
1490
1490
  'palette': (
1491
1491
  'brand': (
1492
- 'primary': #6ca0e4,
1493
- 'secondary': #4085dc,
1494
- 'tertiary': #1167d4,
1492
+ 'primary': #ed575d,
1493
+ 'secondary': #f5383e,
1494
+ 'tertiary': #f72c30,
1495
1495
  ),
1496
1496
  'red': (
1497
1497
  'primary': #ee7c7b,