Merge pull request #194 from rei/pr/membership

pulling in token patch and adding to surface example
rei · Dec 16, 2024 · dd95b01 · dd95b01
2 parents bf23abd + 73515dd
commit dd95b01
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -131,7 +131,7 @@
     }
   },
   "dependencies": {
-    "@rei/cdr-tokens": "^12.4.2",
+    "@rei/cdr-tokens": "^12.4.4",
     "tabbable": "^4.0.0"
   },
   "peerDependencies": {

diff --git a/src/components/landingLead/styles/CdrLandingLead.module.scss b/src/components/landingLead/styles/CdrLandingLead.module.scss
@@ -5,7 +5,7 @@
 
 .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}));
+  --cdr-split-surface-surface-color: var(--cdr-landing-lead-surface-color, var(--cdr-color-background-primary, #{$cdr-color-background-primary}));
 
   &__image {
     --cdr-img-aspect-ratio: 4 / 1;

diff --git a/src/components/splitSurface/styles/vars/CdrSplitSurface.vars.scss b/src/components/splitSurface/styles/vars/CdrSplitSurface.vars.scss
@@ -5,15 +5,15 @@
   &--top {
     //ITEM_DOC: Color of the split-surface's surface layer
     background: linear-gradient(
-      var(--cdr-split-surface-surface-color, var(--cdr-color-surface-primary, #{$cdr-color-surface-primary})) 0 50%,
+      var(--cdr-split-surface-surface-color, var(--cdr-color-background-primary, #{$cdr-color-background-primary})) 0 50%,
       transparent 50% 100%,
     );
   }
 
   &--bottom {
     background: linear-gradient(
       transparent 0 50%,
-      var(--cdr-split-surface-surface-color, var(--cdr-color-surface-primary, #{$cdr-color-surface-primary})) 50% 100%,
+      var(--cdr-split-surface-surface-color, var(--cdr-color-background-primary, #{$cdr-color-background-primary})) 50% 100%,
     );
   }
 }

diff --git a/src/components/surface/examples/Surface.vue b/src/components/surface/examples/Surface.vue
@@ -1,22 +1,28 @@
 <script setup lang="ts">
 import CdrSurface from '../CdrSurface.vue';
 import CdrText from '../../text/CdrText.vue';
+import CdrTitle from '../../title/CdrTitle.vue';
+import CdrButton from '../../button/CdrButton.vue';
+import CdrLink from '../../link/CdrLink.vue';
 import type { surface, HtmlAttributes } from '../../../types/interfaces';
 
 defineOptions({ name: 'Surface' });
 
 export interface Example {
   label: string;
+  title: string;
   props: surface | HtmlAttributes;
 }
 
 const boxes: Example[] = [
   {
     label: 'This is a blank Surface',
+    title: 'container title',
     props: {},
   },
   {
     label: 'This surface is styled like a card',
+    title: 'secondary background',
     props: {
       radius: 'soft',
       background: 'secondary',
@@ -26,6 +32,7 @@ const boxes: Example[] = [
   },
   {
     label: 'This surface is styled like a chip or pill',
+    title: '',
     props: {
       radius: 'round',
       withBorder: true,
@@ -35,6 +42,7 @@ const boxes: Example[] = [
   },
   {
     label: 'This surface uses the primary modifier to apply a background but is in the membership-subtle palette ',
+    title: 'membership-subtle palette',
     props: {
       class: 'example__card',
       palette: 'membership-subtle',  // Updated to use membership-subtle palette
@@ -43,6 +51,7 @@ const boxes: Example[] = [
   },
   {
     label: 'This surface uses the secondary modifier to apply a background it is in the membership-subtle palette, however the palette had no secondary color defined thus default palette values are used ',
+    title: 'membership-subtle palette',
     props: {
       class: 'example__card',
       palette: 'membership-subtle',  // Updated to use membership-subtle palette
@@ -51,6 +60,7 @@ const boxes: Example[] = [
   },
   {
     label: 'This surface uses the primary modifier to apply a background but is in the membership-vibrant palette ',
+    title: 'membership-vibrant palette',
     props: {
       class: 'example__card',
       palette: 'membership-vibrant',  // Updated to use membership-subtle palette
@@ -59,6 +69,7 @@ const boxes: Example[] = [
   },
   {
     label: 'This surface uses the secondary modifier to apply a background it is in the membership-vibrant palette, however the palette had no secondary color defined thus default palette values are used ',
+    title: 'membership-vibrant palette',
     props: {
       class: 'example__card',
       palette: 'membership-vibrant',  // Updated to use membership-subtle palette
@@ -72,12 +83,14 @@ const boxes: Example[] = [
   <div class="example">
     <h2>Surface</h2>
     <template
-      v-for="{ label, props } in boxes"
+      v-for="{ label, title, props } in boxes"
       :key="label"
     >
       <hr class="example__hr" />
       <CdrSurface v-bind="props">
+        <CdrTitle>{{ title }}</CdrTitle>
         <CdrText>{{ label }}</CdrText>
+        <CdrButton>Primary button</CdrButton> <cdrLink>and link</cdrLink>
       </CdrSurface>
     </template>
   </div>

diff --git a/src/styles/cdr-palette.scss b/src/styles/cdr-palette.scss
@@ -16,23 +16,33 @@
 
 [data-palette='membership-subtle'] {
   --cdr-color-background-surface-primary: var(--cdr-membership-subtle-color-background-primary, #{$cdr-membership-subtle-color-background-primary});
+  --cdr-color-background-primary: var(--cdr-membership-subtle-color-background-primary, #{$cdr-membership-subtle-color-background-primary});
+  --cdr-color-text-surface-primary: var(--cdr-membership-vibrant-color-text-primary, #{$cdr-membership-vibrant-color-text-primary});
   --cdr-color-text-primary: var(--cdr-membership-subtle-color-text-primary, #{$cdr-membership-subtle-color-text-primary});
   --cdr-color-border-button-primary-rest: var(--cdr-membership-subtle-color-border-button-primary-rest, #{$cdr-membership-subtle-color-border-button-primary-rest});
   --cdr-color-border-button-primary-active: var(--cdr-membership-subtle-color-border-button-primary-active, #{$cdr-membership-subtle-color-border-button-primary-active});
   --cdr-color-border-button-primary-hover: var(--cdr-membership-subtle-color-border-button-primary-hover, #{$cdr-membership-subtle-color-border-button-primary-hover});
   --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});
 }
 
 [data-palette='membership-vibrant'] {
   --cdr-color-background-surface-primary: var(--cdr-membership-vibrant-color-background-primary, #{$cdr-membership-vibrant-color-background-primary});
+  --cdr-color-background-primary: var(--cdr-membership-vibrant-color-background-primary, #{$cdr-membership-vibrant-color-background-primary});
   --cdr-color-text-surface-primary: var(--cdr-membership-vibrant-color-text-primary, #{$cdr-membership-vibrant-color-text-primary});
+  --cdr-color-text-primary: var(--cdr-membership-vibrant-color-text-primary, #{$cdr-membership-vibrant-color-text-primary});
   --cdr-color-border-button-primary-rest: var(--cdr-membership-vibrant-color-border-button-primary-rest, #{$cdr-membership-vibrant-color-border-button-primary-rest});
   --cdr-color-border-button-primary-active: var(--cdr-membership-vibrant-color-border-button-primary-active, #{$cdr-membership-vibrant-color-border-button-primary-active});
   --cdr-color-border-button-primary-hover: var(--cdr-membership-vibrant-color-border-button-primary-hover, #{$cdr-membership-vibrant-color-border-button-primary-hover});
   --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});
 }