From 73515dd8b69a0d8438e8c82ddb952992c9268d20 Mon Sep 17 00:00:00 2001
From: Michael Hewson <mhewson@gmail.com>
Date: Fri, 13 Dec 2024 15:06:04 -0800
Subject: [PATCH] pulling in token patch and adding to surface example

---
 package-lock.json                                 |  8 ++++----
 package.json                                      |  2 +-
 .../landingLead/styles/CdrLandingLead.module.scss |  2 +-
 .../styles/vars/CdrSplitSurface.vars.scss         |  4 ++--
 src/components/surface/examples/Surface.vue       | 15 ++++++++++++++-
 src/styles/cdr-palette.scss                       | 10 ++++++++++
 6 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 85dc91fcb..6dcb9722a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "15.2.1",
       "license": "MIT",
       "dependencies": {
-        "@rei/cdr-tokens": "^12.4.2",
+        "@rei/cdr-tokens": "^12.4.4",
         "tabbable": "^4.0.0"
       },
       "devDependencies": {
@@ -2915,9 +2915,9 @@
       }
     },
     "node_modules/@rei/cdr-tokens": {
-      "version": "12.4.2",
-      "resolved": "https://registry.npmjs.org/@rei/cdr-tokens/-/cdr-tokens-12.4.2.tgz",
-      "integrity": "sha512-QTuq1fu8UOIxtbBjncvC7yr+tJzV23BuIvuTUkgopVuQR067A48f1gMKc1SRX4hljNKzWS5r6sVD/f6Z12gAGw==",
+      "version": "12.4.4",
+      "resolved": "https://registry.npmjs.org/@rei/cdr-tokens/-/cdr-tokens-12.4.4.tgz",
+      "integrity": "sha512-nutD7bcNpdRr4oJ8iJ3hcxivU58d0HOjZGbVZHeL+DTOQmRxfy4b/tTt8r3eLi9oP1bEHbTSf1IaQh7ETlGn0g==",
       "engines": {
         "node": ">= 20.0.0",
         "npm": ">= 10.0.0"
diff --git a/package.json b/package.json
index c10b5daec..7067c4a12 100644
--- 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
index 6c250f57b..56f5310c7 100644
--- 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
index c828589ac..1f0068b2b 100644
--- a/src/components/splitSurface/styles/vars/CdrSplitSurface.vars.scss
+++ b/src/components/splitSurface/styles/vars/CdrSplitSurface.vars.scss
@@ -5,7 +5,7 @@
   &--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%,
     );
   }
@@ -13,7 +13,7 @@
   &--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
index eff5bb170..c4866da79 100644
--- 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
index 0e5fe7c6a..1ed47f080 100644
--- a/src/styles/cdr-palette.scss
+++ b/src/styles/cdr-palette.scss
@@ -16,6 +16,8 @@
 
 [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});
@@ -23,16 +25,24 @@
   --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});
 }