Pr/pressura

src/components/text/presets/styles/CdrBody.module.scss

@@ -1,11 +1,21 @@
 @import './CdrPresets.module';
 
 .cdr-body {
-  @include cdr-text-base-mixin;
-  @include cdr-text-body-400;
+  @include set-text-styles("body-400");
+
+  /* 
+  * NOTE: 
+  * 
+  * The following CSS variables are currently defined directly in this stylesheet. 
+  * 
+  * In a future version (v2), the component will map directly to the cdr-text-base vars 
+  * and depricate the cdr-body mappings 
+  * 
+  */
+
+  --cdr-text-size: var( --cdr-body-font-size, var( --cdr-text-body-400-size, #{cdr-text-body-400-size}));
+  --cdr-text-weight: var( --cdr-body-font-weight, var( --cdr-text-body-400-weight, #{cdr-text-body-400-weight}));
+  --cdr-text-height:  var( --cdr-body-line-height, var( --cdr-text-body-400-height, #{cdr-text-body-400-height}));
 
-  font-size: var(--cdr-body-font-size);
-  line-height: var(--cdr-body-line-height);
-  font-weight: var(--cdr-body-font-weight);
   max-width: var(--cdr-body-max-width, 75ch);
 }

src/components/text/presets/styles/CdrEyebrow.module.scss

@@ -1,9 +1,18 @@
 @import './CdrPresets.module';
 
 .cdr-eyebrow {
-  @include cdr-text-base-mixin;
-  @include cdr-text-eyebrow-100;
+  @include set-text-styles("eyebrow-100");
+
+  /* 
+  * NOTE: 
+  * 
+  * The following CSS variables are currently defined directly in this stylesheet. 
+  * 
+  * In a future version (v2), the component will map directly to the cdr-text-base vars 
+  * and depricate the .cdr-eyebrow mappings 
+  * 
+  */
 
-  font-size: var(--cdr-type-scale--1);
-  line-height: var(--cdr-eyebrow-line-height-ratio);
+  --cdr-text-size: var(--cdr-type-scale--1, var( --cdr-text-eyebrow-100-size, #{cdr-text-eyebrow-100-size}));
+  --cdr-text-height: var( --cdr-eyebrow-line-height-ratio, #{cdr-text-eyebrow-100-height});
 }

src/components/text/presets/styles/CdrHeadingDisplay.module.scss

@@ -1,9 +1,18 @@
 @import './CdrPresets.module';
 
 .cdr-heading-display {
-  @include cdr-text-base-mixin;
-  @include cdr-text-heading-display-1600;
+  @include set-text-styles("heading-display-1600");
+
+  /* 
+  * NOTE: 
+  * 
+  * The following CSS variables are currently defined directly in this stylesheet. 
+  * 
+  * In a future version (v2), the component will map directly to the cdr-text-base vars 
+  * and depricate the heading mappings 
+  * 
+  */
 
-  font-size: var(--cdr-heading-display-font-size);
-  line-height: var(--cdr-heading-display-line-height);
+  --cdr-text-size: var(--cdr-heading-display-font-size);
+  --cdr-text-height: var(--cdr-heading-display-line-height);
 }

src/components/text/presets/styles/CdrHeadingSans.module.scss

@@ -1,9 +1,21 @@
 @import './CdrPresets.module';
 
 .cdr-heading-sans {
-  @include cdr-text-base-mixin;
-  @include cdr-text-heading-sans-600;
+  @include set-text-styles("heading-serif-600");
+
+  /* 
+  * NOTE: 
+  * 
+  * The following CSS variables are currently defined directly in this stylesheet. 
+  * 
+  * In a future version (v2), the component will map directly to the cdr-text-base vars 
+  * and depricate the heading mappings 
+  * 
+  */
+
+  --cdr-text-size: var( --cdr-heading-sans-font-size, var( --cdr-text-heading-serif-600-size, #{cdr-text-heading-serif-600-size}));
+  --cdr-text-height: var( --cdr-heading-sans-line-height, var( --cdr-text-heading-serif-600-height, #{cdr-text-heading-serif-600-height}));
+
+
 
-  font-size: var(--cdr-heading-sans-font-size);
-  line-height: var(--cdr-heading-sans-line-height);
 }

src/components/text/presets/styles/CdrHeadingSerif.module.scss

@@ -1,10 +1,19 @@
 @import './CdrPresets.module';
 
 .cdr-heading-serif {
-  @include cdr-text-base-mixin;
-  @include cdr-text-heading-serif-1200;
+  @include set-text-styles("heading-serif-1200");
+
+  /* 
+  * NOTE: 
+  * 
+  * The following CSS variables are currently defined directly in this stylesheet. 
+  * 
+  * In a future version (v2), the component will map directly to the cdr-text-base vars 
+  * and depricate the heading mappings 
+  * 
+  */
 
-  font-size: var(--cdr-heading-serif-font-size);
-  line-height: var(--cdr-heading-serif-line-height);
-  font-weight: var(--cdr-heading-serif-font-weight);
+  --cdr-text-siz: var(--cdr-heading-serif-font-size);
+  --cdr-text-height: var(--cdr-heading-serif-line-height);
+  --cdr-text-weight: var(--cdr-heading-serif-font-weight);
 }

src/components/text/presets/styles/CdrSubheadingSans.module.scss

@@ -1,9 +1,18 @@
 @import './CdrPresets.module';
 
 .cdr-subheading-sans {
-  @include cdr-text-base-mixin;
-  @include cdr-text-subheading-sans-600;
+  @include set-text-styles("subheading-sans-600");
+
+  /* 
+  * NOTE: 
+  * 
+  * The following CSS variables are currently defined directly in this stylesheet. 
+  * 
+  * In a future version (v2), the component will map directly to the cdr-text-base vars 
+  * and depricate the subheading mappings 
+  * 
+  */
 
-  font-size: var(--cdr-subheading-sans-font-size);
-  line-height: var(--cdr-subheading-sans-line-height);
+  --cdr-text-size: var(--cdr-subheading-sans-font-size);
+  --cdr-text-height: var(--cdr-subheading-sans-line-height);
 }

src/components/text/presets/styles/CdrUtilitySans.module.scss

@@ -1,10 +1,19 @@
 @import './CdrPresets.module';
 
 .cdr-utility-sans {
-  @include cdr-text-base-mixin;
-  @include cdr-text-utility-sans-800;
+  @include set-text-styles("utility-sans-800");
+
+  /* 
+  * NOTE: 
+  * 
+  * The following CSS variables are currently defined directly in this stylesheet. 
+  * 
+  * In a future version (v2), the component will map directly to the cdr-text-base vars 
+  * and depricate the utility mappings 
+  * 
+  */
 
-  font-size: var(--cdr-utility-sans-font-size);
-  line-height: var(--cdr-utility-sans-line-height);
-  font-weight: var(--cdr-utility-sans-font-weight);
+  --cdr-text-size: var(--cdr-utility-sans-font-size);
+  --cdr-text-height: var(--cdr-utility-sans-line-height);
+  --cdr-text-weight: var(--cdr-utility-sans-font-weight);
 }

src/components/text/presets/styles/CdrUtilitySerif.module.scss

@@ -1,10 +1,20 @@
 @import './CdrPresets.module';
 
 .cdr-utility-serif {
-  @include cdr-text-base-mixin;
-  @include cdr-text-utility-serif-800;
+  @include set-text-styles("utility-serif-800");
 
-  font-size: var(--cdr-utility-serif-font-size);
-  line-height: var(--cdr-utility-serif-line-height);
-  font-weight: var(--cdr-utility-serif-font-weight);
+
+  /* 
+ * NOTE: 
+ * 
+ * The following CSS variables are currently defined directly in this stylesheet. 
+ * 
+ * In a future version (v2), the component will map directly to the cdr-text-base vars 
+ * and depricate the utility mappings 
+ * 
+ */
+
+  --cdr-text-size: var(--cdr-utility-serif-font-size);
+  --cdr-text-height: var(--cdr-utility-serif-line-height);
+  --cdr-text-weight: var(--cdr-utility-serif-font-weight);
 }

src/components/text/styles/CdrText.module.scss

@@ -2,5 +2,6 @@
 @import './vars/CdrText.vars';
 
 .cdr-text {
-  @include cdr-text-base-mixin;
+  @include set-text-styles("body-400");
+
 }

src/components/text/styles/vars/CdrText.vars.scss

@@ -1,5 +1,20 @@
 @mixin cdr-text-base-mixin() {
-    //ITEM_DOC: Text color
-    color: var(--cdr-text-color, var(--cdr-color-text-primary, #{$cdr-color-text-primary}));
-    margin: 0;
-}
+    font-family: var( --cdr-text-family);
+    font-size: var( --cdr-text-size);
+    font-style: var( --cdr-text-style);
+    font-weight: var( --cdr-text-weight);
+    letter-spacing: var( --cdr-text-spacing);
+    line-height: var( --cdr-text-height);
+}
+
+@mixin set-text-styles($my-text-style) {
+    @include cdr-text-base-mixin; 
+    --cdr-text-color: var( --cdr-text-#{$my-text-style}-color,  #{cdr-color-text-primary});
+    --cdr-text-family: var( --cdr-text-#{$my-text-style}-family, #{cdr-text-#{$my-text-style}-family});
+    --cdr-text-size: var( --cdr-text-#{$my-text-style}-size, #{cdr-text-#{$my-text-style}-size});
+    --cdr-text-style: var( --cdr-text-#{$my-text-style}-style, #{cdr-text-#{$my-text-style}-style});
+    --cdr-text-weight: var( --cdr-text-#{$my-text-style}-weight, #{cdr-text-#{$my-text-style}-weight});
+    --cdr-text-spacing: var( --cdr-text-#{$my-text-style}-spacing, #{cdr-text-#{$my-text-style}-spacing});
+    --cdr-text-height: var( --cdr-text-#{$my-text-style}-height, #{cdr-text-#{$my-text-style}-height});
+    --cdr-text-margin: var( --cdr-text-#{$my-text-style}-margin, 0); 
+  }

src/styles/cdr-fonts.scss

@@ -35,3 +35,15 @@
   font-weight: 1 999;
   font-style: italic;
   src: url("//www.rei.com/satchel/media/font-optimized/Graphik/GraphikWebItalic-VF-Web-Subset.woff2") format("woff2-variations"), url("//www.rei.com/satchel/media/font-optimized/Graphik/GraphikWebItalic-VF-Web-Subset.woff2") format("woff2"); }
+
+@font-face {
+  font-display: swap;
+  font-family: Pressura; 
+  font-weight: 400; /* Regular weight */ 
+  src: url("path/to/gt-pressura-mono-regular.woff2") format("woff2"), url("path/to/gt-pressura-mono-regular.woff") format("woff"); }
+
+@font-face {
+  font-display: swap;
+  font-family: Pressura; 
+  font-weight: 700; 
+  src: url("//www.rei.com/satchel/media/font/Pressura/gt-pressura-mono-bold.woff2") format("woff2"), url("//www.rei.com/satchel/media/font/Pressura/gt-pressura-mono-bold.woff") format("woff"); }

src/styles/cdr-palette.scss

@@ -25,9 +25,9 @@
   --cdr-color-text-button-primary-hover: var(--cdr-membership-subtle-color-text-button-primary-hover, #{$cdr-membership-subtle-color-text-button-primary-hover});
   --cdr-color-background-button-primary-rest: var(--cdr-membership-subtle-color-background-button-primary-rest, #{$cdr-membership-subtle-color-background-button-primary-rest});
   --cdr-color-background-button-primary-active: var(--cdr-membership-subtle-color-background-button-primary-active, #{$cdr-membership-subtle-color-background-button-primary-active});
-  --cdr-color-text-link-rest: var(  --cdr-membership-subtle-color-text-link-rest, #{$cdr-membership-subtle-color-text-link-rest});
-  --cdr-color-text-link-hover: var(  --cdr-membership-subtle-color-text-link-hover, #{$cdr-membership-subtle-color-text-link-hover});
-  --cdr-color-text-link-visited: var(  --cdr-membership-subtle-color-text-link-visited, #{$cdr-membership-subtle-color-text-link-visited});
+  --cdr-color-text-link-rest: var(--cdr-membership-subtle-color-text-link-rest, #{$cdr-membership-subtle-color-text-link-rest});
+  --cdr-color-text-link-hover: var(--cdr-membership-subtle-color-text-link-hover, #{$cdr-membership-subtle-color-text-link-hover});
+  --cdr-color-text-link-visited: var(--cdr-membership-subtle-color-text-link-visited, #{$cdr-membership-subtle-color-text-link-visited});
 }
 
 [data-palette='membership-vibrant'] {
@@ -41,8 +41,8 @@
   --cdr-color-text-button-primary-hover: var(--cdr-membership-vibrant-color-text-button-primary-hover, #{$cdr-membership-vibrant-color-text-button-primary-hover});
   --cdr-color-background-button-primary-rest: var(--cdr-membership-vibrant-color-background-button-primary-rest, #{$cdr-membership-vibrant-color-background-button-primary-rest});
   --cdr-color-background-button-primary-active: var(--cdr-membership-vibrant-color-background-button-primary-active, #{$cdr-membership-vibrant-color-background-button-primary-active});
-  --cdr-color-text-link-rest: var(  --cdr-membership-subtle-color-text-link-rest, #{$cdr-membership-subtle-color-text-link-rest});
-  --cdr-color-text-link-hover: var(  --cdr-membership-subtle-color-text-link-hover, #{$cdr-membership-subtle-color-text-link-hover});
-  --cdr-color-text-link-visited: var(  --cdr-membership-subtle-color-text-link-visited, #{$cdr-membership-subtle-color-text-link-visited});
+  --cdr-color-text-link-rest: var(--cdr-membership-subtle-color-text-link-rest, #{$cdr-membership-subtle-color-text-link-rest});
+  --cdr-color-text-link-hover: var(--cdr-membership-subtle-color-text-link-hover, #{$cdr-membership-subtle-color-text-link-hover});
+  --cdr-color-text-link-visited: var(--cdr-membership-subtle-color-text-link-visited, #{$cdr-membership-subtle-color-text-link-visited});
 }
 

src/styles/cdr-reset.scss

@@ -40,7 +40,7 @@ body {
 
   /* cdr-color-text-primary */
 
-  color: rgba(12, 11, 8, 0.75);
+  color: var(--cdr-color-text-primary), rgba(12, 11, 8, 0.75);
 
   /* cdr-color-background-primary */