richie-education 3.3.2-dev29 → 3.3.2-dev31

package/.prettierignore

@@ -3,3 +3,7 @@ i18n/**/*
 public-path.js
 # LexPersona iframe script
 iframe-manager.js
+# Generated by cunningham
+scss/vendors/cunningham-tokens.scss
+scss/vendors/css/cunningham-tokens.css
+js/utils/cunningham-tokens.ts

package/cunningham.cjs

@@ -78,6 +78,18 @@ module.exports = {
           lightness: 55,
         },
       },
+      contextuals: {
+        background: {
+          semantic: {
+            brand: { primary: '#f72c30', 'primary-hover': '#d60f29' },
+          },
+        },
+        content: {
+          semantic: {
+            brand: { 'on-brand': '#FFFFFF', tertiary: '#555F6B' },
+          },
+        },
+      },
     },
   },
 };

package/js/components/CreditCardSelector/_styles.scss

@@ -15,8 +15,8 @@
         text-align: left;
         font-size: rem-calc(12px);
         color: r-theme-val(credit-card-selector, title-color);
-        font-weight: var(--c--theme--font--weights--bold);
-        font-family: var(--c--theme--font--families--accent);
+        font-weight: var(--c--globals--font--weights--bold);
+        font-family: var(--c--globals--font--families--accent);
       }
 
       &__meta {

package/js/components/PaymentScheduleGrid/_styles.scss

@@ -18,8 +18,8 @@
   height: 24px;
   padding: 0 12px;
   border-radius: 24px;
-  font-family: var(--c--theme--font--families--accent);
-  font-weight: var(--c--theme--font--weight--semibold);
+  font-family: var(--c--globals--font--families--accent);
+  font-weight: var(--c--globals--font--weights--medium);
   font-size: rem-calc(12px);
 
   &--canceled,

package/js/components/SaleTunnel/_styles.scss

@@ -32,12 +32,13 @@
     &__right {
       flex: 1;
       overflow: hidden;
+      position: relative;
     }
 
     &__column {
       display: flex;
       flex-direction: column;
-      gap: var(--c--theme--spacings--b);
+      gap: var(--c--globals--spacings--b);
     }
   }
 
@@ -135,7 +136,7 @@
       margin-top: 1rem;
       display: flex;
       justify-content: space-between;
-      font-size: var(--c--theme--font--sizes--l);
+      font-size: var(--c--globals--font--sizes--md);
     }
   }
 
@@ -159,8 +160,8 @@
       gap: 0.5rem;
 
       .title {
-        font-weight: var(--c--theme--font--weights--bold);
-        font-size: var(--c--theme--font--sizes--l);
+        font-weight: var(--c--globals--font--weights--bold);
+        font-size: var(--c--globals--font--sizes--md);
         margin: 0 0 0.5rem;
       }
 
@@ -209,17 +210,17 @@
 }
 
 .block-title {
-  font-size: var(--c--theme--font--sizes--l);
+  font-size: var(--c--globals--font--sizes--md);
   color: r-theme-val(sale-tunnel, title-color);
-  font-weight: var(--c--theme--font--weights--extrabold);
+  font-weight: var(--c--globals--font--weights--extrabold);
   text-align: left;
-  font-family: var(--c--theme--font--families--accent);
+  font-family: var(--c--globals--font--families--accent);
 }
 
 .sub-block-title {
   font-size: 12px;
   color: r-theme-val(sale-tunnel, title-color);
-  font-weight: var(--c--theme--font--weights--bold);
+  font-weight: var(--c--globals--font--weights--bold);
   text-align: left;
 }
 

package/js/utils/cunningham-tokens.ts

@@ -408,8 +408,8 @@ export const tokens = {
           surface: { primary: '#FFFFFF', secondary: '#FFFFFF', tertiary: '#F7F8F8' },
           semantic: {
             brand: {
-              primary: '#1167D4',
-              'primary-hover': '#1A509F',
+              primary: '#f72c30',
+              'primary-hover': '#d60f29',
               secondary: '#D5E4F7',
               'secondary-hover': '#C0D6F4',
               tertiary: '#EAF1FB',
@@ -480,8 +480,8 @@ export const tokens = {
             brand: {
               primary: '#20467F',
               secondary: '#0659C5',
-              tertiary: '#2976D8',
-              'on-brand': '#EAF1FB',
+              tertiary: '#555F6B',
+              'on-brand': '#FFFFFF',
             },
             neutral: {
               primary: '#252627',

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderPaymentDetailsModal/_styles.scss

@@ -1,7 +1,7 @@
 .order-payment-details {
   &__title {
-    font-weight: var(--c--theme--font--weights--bold);
-    font-size: var(--c--theme--font--sizes--l);
+    font-weight: var(--c--globals--font--weights--bold);
+    font-size: var(--c--globals--font--sizes--md);
     text-align: left;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.3.2-dev29",
+  "version": "3.3.2-dev31",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {

package/scss/components/_subheader.scss

@@ -24,7 +24,7 @@ $r-subheader-search-title-width: 19rem !default; // aligned on computed search r
   &__title {
     @include make-container();
     @include make-container-max-widths();
-    @include sv-flex(1, 0, 100%);
+    @include sv-flex(1, 0, 100%, $max: false);
     padding-left: 0;
     padding-right: 0;
 

package/scss/trumps/_bootstrap.scss

@@ -1,4 +1,5 @@
 // Without this, bootstrap overrides Cunningham buttons style.
 a.c__button:hover {
   text-decoration: none;
+  color: inherit;
 }

package/scss/vendors/css/cunningham-tokens.css

@@ -393,10 +393,8 @@
   --c--contextuals--background--surface--primary: var(--c--globals--colors--gray-000);
   --c--contextuals--background--surface--secondary: var(--c--globals--colors--gray-000);
   --c--contextuals--background--surface--tertiary: var(--c--globals--colors--gray-025);
-  --c--contextuals--background--semantic--brand--primary: var(--c--globals--colors--brand-550);
-  --c--contextuals--background--semantic--brand--primary-hover: var(
-    --c--globals--colors--brand-650
-  );
+  --c--contextuals--background--semantic--brand--primary: #f72c30;
+  --c--contextuals--background--semantic--brand--primary-hover: #d60f29;
   --c--contextuals--background--semantic--brand--secondary: var(--c--globals--colors--brand-100);
   --c--contextuals--background--semantic--brand--secondary-hover: var(
     --c--globals--colors--brand-150
@@ -509,8 +507,8 @@
   --c--contextuals--content--logo2: var(--c--globals--colors--logo-2);
   --c--contextuals--content--semantic--brand--primary: var(--c--globals--colors--brand-700);
   --c--contextuals--content--semantic--brand--secondary: var(--c--globals--colors--brand-600);
-  --c--contextuals--content--semantic--brand--tertiary: var(--c--globals--colors--brand-500);
-  --c--contextuals--content--semantic--brand--on-brand: var(--c--globals--colors--brand-050);
+  --c--contextuals--content--semantic--brand--tertiary: #555f6b;
+  --c--contextuals--content--semantic--brand--on-brand: #ffffff;
   --c--contextuals--content--semantic--neutral--primary: var(--c--globals--colors--gray-850);
   --c--contextuals--content--semantic--neutral--secondary: var(--c--globals--colors--gray-600);
   --c--contextuals--content--semantic--neutral--tertiary: var(--c--globals--colors--gray-500);

package/scss/vendors/cunningham-tokens.scss

@@ -373,9 +373,9 @@ $themes: (
           'black': 800,
         ),
         'families': (
-          'base': #{\RobotoFlexVariable\,
+          'base': #{\RobotoFlex Variable\,
           sans-serif},
-          'accent': #{\RobotoFlexVariable\,
+          'accent': #{\RobotoFlex Variable\,
           sans-serif},
         ),
       ),
@@ -420,8 +420,8 @@ $themes: (
         ),
         'semantic': (
           'brand': (
-            'primary': #1167d4,
-            'primary-hover': #1a509f,
+            'primary': #f72c30,
+            'primary-hover': #d60f29,
             'secondary': #d5e4f7,
             'secondary-hover': #c0d6f4,
             'tertiary': #eaf1fb,
@@ -544,8 +544,8 @@ $themes: (
           'brand': (
             'primary': #20467f,
             'secondary': #0659c5,
-            'tertiary': #2976d8,
-            'on-brand': #eaf1fb,
+            'tertiary': #555f6b,
+            'on-brand': #ffffff,
           ),
           'neutral': (
             'primary': #252627,
@@ -1178,9 +1178,9 @@ $themes: (
           'black': 800,
         ),
         'families': (
-          'base': #{\RobotoFlexVariable\,
+          'base': #{\RobotoFlex Variable\,
           sans-serif},
-          'accent': #{\RobotoFlexVariable\,
+          'accent': #{\RobotoFlex Variable\,
           sans-serif},
         ),
       ),