✨(frontend) add new color and font size tokens for Cunningham

- Add 'primary-action' color token
- Introduce alternative font size tokens (xl-alt, lg-alt, md-alt,
sm-alt, xs-alt)
- Update button border colors to use greyscale-300

src/frontend/apps/impress/cunningham.ts

@@ -5,6 +5,7 @@ const config = {
         colors: {
           'card-border': '#ededed',
           'primary-bg': '#FAFAFA',
+          'primary-action': '#1212FF',
           'primary-050': '#F5F5FE',
           'primary-100': '#EDF5FA',
           'primary-150': '#E5EEFA',
@@ -59,6 +60,11 @@ const config = {
             h4: '1.375rem',
             h5: '1.25rem',
             h6: '1.125rem',
+            'xl-alt': '5rem',
+            'lg-alt': '4.5rem',
+            'md-alt': '4rem',
+            'sm-alt': '3.5rem',
+            'xs-alt': '3rem',
           },
           weights: {
             thin: 100,
@@ -224,7 +230,7 @@ const config = {
               'color-hover': 'var(--c--theme--colors--primary-700)',
             },
             border: {
-              color: 'var(--c--theme--colors--primary-200)',
+              color: 'var(--c--theme--colors--greyscale-300)',
             },
           },
           tertiary: {
@@ -379,8 +385,8 @@ const config = {
               'color-active': '#EDEDED',
             },
             border: {
-              color: 'var(--c--theme--colors--primary-600)',
-              'color-hover': 'var(--c--theme--colors--primary-600)',
+              color: 'var(--c--theme--colors--greyscale-300)',
+              'color-hover': 'var(--c--theme--colors--greyscale-300)',
             },
             color: 'var(--c--theme--colors--primary-text)',
           },

src/frontend/apps/impress/src/cunningham/cunningham-tokens.css

@@ -71,6 +71,7 @@
   --c--theme--colors--danger-text: var(--c--theme--colors--greyscale-000);
   --c--theme--colors--card-border: #ededed;
   --c--theme--colors--primary-bg: #fafafa;
+  --c--theme--colors--primary-action: #1212ff;
   --c--theme--colors--primary-050: #f5f5fe;
   --c--theme--colors--primary-150: #e5eefa;
   --c--theme--colors--primary-950: #1b1b35;
@@ -122,6 +123,11 @@
   --c--theme--font--sizes--ml: 0.938rem;
   --c--theme--font--sizes--xl: 1.25rem;
   --c--theme--font--sizes--t: 0.6875rem;
+  --c--theme--font--sizes--xl-alt: 5rem;
+  --c--theme--font--sizes--lg-alt: 4.5rem;
+  --c--theme--font--sizes--md-alt: 4rem;
+  --c--theme--font--sizes--sm-alt: 3.5rem;
+  --c--theme--font--sizes--xs-alt: 3rem;
   --c--theme--font--weights--thin: 100;
   --c--theme--font--weights--light: 300;
   --c--theme--font--weights--regular: 400;
@@ -316,7 +322,7 @@
     --c--theme--colors--primary-700
   );
   --c--components--button--secondary--border--color: var(
-    --c--theme--colors--primary-200
+    --c--theme--colors--greyscale-300
   );
   --c--components--button--tertiary--color: var(
     --c--theme--colors--primary-text
@@ -501,10 +507,10 @@
   --c--components--button--secondary--background--color-hover: #f6f6f6;
   --c--components--button--secondary--background--color-active: #ededed;
   --c--components--button--secondary--border--color: var(
-    --c--theme--colors--primary-600
+    --c--theme--colors--greyscale-300
   );
   --c--components--button--secondary--border--color-hover: var(
-    --c--theme--colors--primary-600
+    --c--theme--colors--greyscale-300
   );
   --c--components--button--secondary--color: var(
     --c--theme--colors--primary-text
@@ -874,6 +880,10 @@
   color: var(--c--theme--colors--primary-bg);
 }
 
+.clr-primary-action {
+  color: var(--c--theme--colors--primary-action);
+}
+
 .clr-primary-050 {
   color: var(--c--theme--colors--primary-050);
 }
@@ -1302,6 +1312,10 @@
   background-color: var(--c--theme--colors--primary-bg);
 }
 
+.bg-primary-action {
+  background-color: var(--c--theme--colors--primary-action);
+}
+
 .bg-primary-050 {
   background-color: var(--c--theme--colors--primary-050);
 }
@@ -1550,6 +1564,31 @@
   letter-spacing: var(--c--theme--font--letterspacings--t);
 }
 
+.fs-xl-alt {
+  font-size: var(--c--theme--font--sizes--xl-alt);
+  letter-spacing: var(--c--theme--font--letterspacings--xl-alt);
+}
+
+.fs-lg-alt {
+  font-size: var(--c--theme--font--sizes--lg-alt);
+  letter-spacing: var(--c--theme--font--letterspacings--lg-alt);
+}
+
+.fs-md-alt {
+  font-size: var(--c--theme--font--sizes--md-alt);
+  letter-spacing: var(--c--theme--font--letterspacings--md-alt);
+}
+
+.fs-sm-alt {
+  font-size: var(--c--theme--font--sizes--sm-alt);
+  letter-spacing: var(--c--theme--font--letterspacings--sm-alt);
+}
+
+.fs-xs-alt {
+  font-size: var(--c--theme--font--sizes--xs-alt);
+  letter-spacing: var(--c--theme--font--letterspacings--xs-alt);
+}
+
 .f-base {
   font-family: var(--c--theme--font--families--base);
 }

src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts

@@ -75,6 +75,7 @@ export const tokens = {
           'danger-text': '#fff',
           'card-border': '#ededed',
           'primary-bg': '#FAFAFA',
+          'primary-action': '#1212FF',
           'primary-050': '#F5F5FE',
           'primary-150': '#E5EEFA',
           'primary-950': '#1B1B35',
@@ -129,6 +130,11 @@ export const tokens = {
             ml: '0.938rem',
             xl: '1.25rem',
             t: '0.6875rem',
+            'xl-alt': '5rem',
+            'lg-alt': '4.5rem',
+            'md-alt': '4rem',
+            'sm-alt': '3.5rem',
+            'xs-alt': '3rem',
           },
           weights: {
             thin: 100,
@@ -315,7 +321,7 @@ export const tokens = {
               color: 'white',
               'color-hover': 'var(--c--theme--colors--primary-700)',
             },
-            border: { color: 'var(--c--theme--colors--primary-200)' },
+            border: { color: 'var(--c--theme--colors--greyscale-300)' },
           },
           tertiary: {
             color: 'var(--c--theme--colors--primary-text)',
@@ -502,8 +508,8 @@ export const tokens = {
           secondary: {
             background: { 'color-hover': '#F6F6F6', 'color-active': '#EDEDED' },
             border: {
-              color: 'var(--c--theme--colors--primary-600)',
-              'color-hover': 'var(--c--theme--colors--primary-600)',
+              color: 'var(--c--theme--colors--greyscale-300)',
+              'color-hover': 'var(--c--theme--colors--greyscale-300)',
             },
             color: 'var(--c--theme--colors--primary-text)',
           },