fluid space

src/components/abstract/styles/CdrAbstract.module.scss

@@ -1,5 +1,4 @@
 @import '../../../styles/settings/index.scss';
-@import '../../../styles/settings/fluid.vars.scss';
 
 .cdr-abstract {
   @include cdr-text-subheading-sans-500;

src/components/kicker/styles/CdrKicker.module.scss

@@ -1,5 +1,4 @@
 @import '../../../styles/settings/index.scss';
-@import '../../../styles/settings/fluid.vars.scss';
 
 .cdr-kicker {
   @include cdr-text-eyebrow-100;

src/components/landingLead/styles/CdrHeadingSubheadingBlock.module.scss

@@ -5,12 +5,12 @@
 .cdr-heading-subheading-block {
   &__heading {
     display: block;
-    margin: 0 0 $cdr-space-one-x 0;
+    margin: 0 0 var(--cdr-space-scale-xs) 0;
     max-width: 40ch;
   }
   &__subheading {
     display: block;
-    margin-top: $cdr-space-three-quarter-x!important;
+    margin-top: var(--cdr-space-scale-2xs)!important;
     max-width: 60ch;
   }
 }

src/components/landingLead/styles/CdrLandingLead.module.scss

@@ -2,7 +2,6 @@
 @import '../../image/styles/CdrImg.module.scss';
 @import './CdrHeadingSubheadingBlock.module.scss';
 
-
 .cdr-landing-lead {
   //ITEM_DOC: Color of the landing-leads surface layer. Passes to underlying split-surface component
   --cdr-split-surface-surface-color: var(--cdr-landing-lead-surface-color, var(--cdr-color-surface-primary, #{$cdr-color-surface-primary}));
@@ -15,9 +14,6 @@
     }
   }
   &__copy-block {
-    padding: $cdr-space-two-x;
-    @include cdr-md-mq-down {
-      padding: $cdr-space-two-x;
-    }
+    padding: var(--cdr-space-scale-one-and-a-half--two-x);
   }
 }

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

@@ -1,3 +1,2 @@
 @import '../../../../styles/settings/index.scss';
-@import '../../styles/vars/CdrText.vars.scss';
-@import '../../../../styles/settings/fluid.vars.scss';
+@import '../../styles/vars/CdrText.vars.scss';

src/components/title/styles/CdrTitle.module.scss

@@ -1,5 +1,4 @@
 @import '../../../styles/settings/index.scss';
-@import '../../../styles/settings/fluid.vars.scss';
 
 .cdr-title {
   @include cdr-text-heading-display-1200;

src/styles/settings/fluid.vars.scss

@@ -1,5 +1,8 @@
-
+// type
 /* https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=320&minRatio=1.20&maxFontSize=20&maxWidth=1232&maxRatio=1.25&steps=-1%2C0%2C1%2C2%2C3%2C4%2C5%2C6%2C7&baseStep=0&prefix=cdr-type-scale&decimals=2&useRems=on&remValue=10&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1247 */
+// space
+/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1232,20,1.25,7,1,&s=0.75|0.5|0.25|0.2|0.15|0.25|0.2,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+/* TODO our rem is still base 10 set via reset font-size: 62.5%; at some point this should be removed and rem values recaculated */
 
 :root {
   --cdr-heading-display-line-height-ratio: 1.07;
@@ -12,9 +15,13 @@
   --cdr-body-line-height-ratio: 1.8;
 }
 
+// the clamp is comprized of 3 numbers representing the min value, the preferred size expression, and the max value
+// in order the valuse are: min spacing | base spacing + container-growth | max spacing 
+
 @supports(container-type: inline-size) {
   :root {
-    --cdr-type-scale--1: clamp(1.33rem, 0.29cqw + 1.24rem, 1.6rem);
+    // type
+    --cdr-type-scale-xs: clamp(1.33rem, 0.29cqw + 1.24rem, 1.6rem);
     --cdr-type-scale-0: clamp(1.6rem, 0.44cqw + 1.46rem, 2rem);
     --cdr-type-scale-1: clamp(1.92rem, 0.64cqw + 1.72rem, 2.5rem);
     --cdr-type-scale-2: clamp(2.3rem, 0.9cqw + 2.02rem, 3.13rem);
@@ -23,19 +30,72 @@
     --cdr-type-scale-5: clamp(3.98rem, 2.33cqw + 3.24rem, 6.1rem);
     --cdr-type-scale-6: clamp(4.78rem, 3.13cqw + 3.78rem, 7.63rem);
     --cdr-type-scale-7: clamp(5.73rem, 4.17cqw + 4.4rem, 9.54rem);
-  }
+
+  // space
+    --cdr-space-scale-eighth-x: clamp(0.2rem, 0.2rem + 0.11cqi, 0.3rem);
+    --cdr-space-scale-quarter-x: clamp(0.3rem, 0.3rem + 0.11cqi, 0.4rem);
+    --cdr-space-scale-half-x: clamp(0.4rem, 0.4rem + 0.11cqi, 0.5rem);
+    --cdr-space-scale-three-quarter-x: clamp(0.8rem, 0.7rem + 0.22cqi, 1rem);
+    --cdr-space-scale-one-x: clamp(1.2rem, 1.1rem + 0.33cqi, 1.5rem);
+    --cdr-space-scale-one-and-a-half-x: clamp(1.6rem, 1.5rem + 0.44cqi, 2rem);
+    --cdr-space-scale-two-x: clamp(2.4rem, 2.2rem + 0.66cqi, 3rem);
+    --cdr-space-scale-three-x: clamp(3.2rem, 2.9rem + 0.88cqi, 4rem);
+    --cdr-space-scale-four-x: clamp(4.8rem, 4.4rem + 1.31cqi, 6rem);
+    --cdr-space-scale-five-x: clamp(6.4rem, 5.8rem + 1.75cqi, 8rem);
+    --cdr-space-scale-six-x: clamp(9.6rem, 8.8rem + 2.63cqi, 12rem);
+    /* One-up pairs */
+    --cdr-space-scale-eighth--quarter-x: clamp(0.2rem, 0.1rem + 0.223cqi, 0.4rem);
+    --cdr-space-scale-quarter--half-x: clamp(0.3rem, 0.3rem + 0.22cqi, 0.5rem);
+    --cdr-space-scale-half--three-quarter-x: clamp(0.4rem, 0.2rem + 0.66cqi, 1rem);
+    --cdr-space-scale-half--one-x: clamp(0.4rem, 0.1404px + 1.21cqi, 1.5rem);
+
+    --cdr-space-scale-three-quarter--one-x: clamp(0.8rem, 0.6rem + 0.77cqi, 1.5rem);
+    --cdr-space-scale-three-quarter--one-and-a-half-x: clamp(0.8rem, 3.8rem + 1.32cqi, 2rem);
+    --cdr-space-scale-one--one-and-a-half-x: clamp(1.2rem, 0.9rem + 0.88cqi, 2rem);
+    --cdr-space-scale-xs--two-x: clamp(1.2rem, 5.6842px + 2cqi, 3rem);
+    --cdr-space-scale-one-and-a-half--two-x: clamp(1.6rem, 1.1rem + 1.54cqi, 3rem);
+    --cdr-space-scale-one-and-a-half--three-x: clamp(1.6rem, 0.8rem + 2.6cqi, 4rem);
+    --cdr-space-scale-two--three-x: clamp(2.4rem, 1.8rem + 1.8cqi, 4rem);
+    --cdr-space-scale-three--four-x: clamp(3.2rem, 2.2rem + 3.1cqi, 6rem);
+    --cdr-space-scale-four--five-x: clamp(4.8rem, 3.7rem + 3.5cqi, 8rem);
+    --cdr-space-scale-five--six-x: clamp(6.4rem, 4.4.rem + 6.14cqi, 12rem);
+
 }
 /** Remove once Safari < 16 is no longer a target */
 @supports not (container-type: inline-size) {
   :root {
     --cdr-type-scale--1: clamp(1.33rem, 0.29vw + 1.24rem, 1.6rem);
     --cdr-type-scale-0: clamp(1.6rem, 0.44vw + 1.46rem, 2rem);
     --cdr-type-scale-1: clamp(1.92rem, 0.64vw + 1.72rem, 2.5rem);
-    --cdr-type-scale-2: clamp(2.3rem, 0.9vw + 2.02rem, 3.13rem);
+    --cdr-type-scale-2: clamp(2.3rem, 0.9vw + 2.02rem, 3.2rem);
     --cdr-type-scale-3: clamp(2.76rem, 1.25vw + 2.36rem, 3.91rem);
     --cdr-type-scale-4: clamp(3.32rem, 1.72vw + 2.77rem, 4.88rem);
     --cdr-type-scale-5: clamp(3.98rem, 2.33vw + 3.24rem, 6.1rem);
     --cdr-type-scale-6: clamp(4.78rem, 3.13vw + 3.78rem, 7.63rem);
     --cdr-type-scale-7: clamp(5.73rem, 4.17vw + 4.4rem, 9.54rem);
   }
+}}
+
+@mixin cdr-insest-xs {
+  padding: var(--cdr-space-scale-xs) var(--cdr-space-scale-xs-s);
+
+  @container (min-width: 540px) and (max-width: 720px) {
+    padding: var(--cdr-space-scale-2xs) var(--cdr-space-scale-2xs-xs);
+  }
+  @container (min-width: 180px) and (max-width: 360px) {
+    padding: var(--cdr-space-scale-4xs-3xs) var(--cdr-space-scale-4xs-2xs);
+  }
+
+}
+
+@mixin cdr-insest-sm {
+  padding: var(--cdr-space-scale-half--one-x);
+
+  @container (min-width: 540px) and (max-width: 720px) {
+    padding: var(--cdr-space-scale-quarter--half-x);
+  }
+  @container (min-width: 180px) and (max-width: 360px) {
+    padding: var(--cdr-space-scale-three-quarter--one-and-a-half-x);
+  }
+
 }

src/styles/settings/index.scss

@@ -1,5 +1,6 @@
 $cdr-warn: false;
 @import "../../../node_modules/@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens.scss";
 @import "./alignment.vars";
+@import "./fluid.vars";
 @import "./options.vars";
 @import "./visibility.vars";