From 047dad9ccd18278ac5a3c73eae06e9a8ef085c65 Mon Sep 17 00:00:00 2001
From: Michael Hewson <mhewson@gmail.com>
Date: Thu, 21 Nov 2024 13:45:18 -0800
Subject: [PATCH] docs and code review updates

---
 src/components/surface/CdrSurface.vue   | 13 ++++++--
 src/styles/cdr-reset.scss               |  7 ++++-
 src/styles/settings/index.scss          |  2 +-
 src/styles/settings/member-palette.scss | 42 +++++++++++++++++++++++++
 src/styles/settings/palette.vars.scss   | 30 ------------------
 5 files changed, 60 insertions(+), 34 deletions(-)
 create mode 100644 src/styles/settings/member-palette.scss
 delete mode 100644 src/styles/settings/palette.vars.scss

diff --git a/src/components/surface/CdrSurface.vue b/src/components/surface/CdrSurface.vue
index 960ab9d4e..0a6297dd5 100644
--- a/src/components/surface/CdrSurface.vue
+++ b/src/components/surface/CdrSurface.vue
@@ -15,7 +15,15 @@ const props = withDefaults(defineProps<surface>(), {
   borderWidth: 'sixteenth-x',
   modifier: 'default',
   radius: 'sharp',
+  /**
+   * Sets Adds a shadow based on the token options within Cedar. 
+   * @values flat, raised, elevated, floating, lifted
+   */
   shadow: 'flat',
+  /**
+   * Sets valid HTML element tag
+   * @values a, button
+   */
   tag: 'div',
   withBorder: false,
   palette: 'default',
@@ -25,18 +33,19 @@ const style = useCssModule();
 
 const rootProps = computed(() => {
   const { classes } = getSurfaceProps(props, 'cdr-surface');
- 
+  const { palette } = props; // Assuming 'palette' is a prop passed to your component
   return {
     class: mapClasses(style, ...classes) || undefined,
+    'data-palette': palette || undefined,
   };
 });
+
 </script>
 
 <template>
   <component
     :is="tag"
     v-bind="rootProps"
-    :data-palette="props.palette"
   >
     <!-- @slot Where all default content should be placed. -->
     <slot />
diff --git a/src/styles/cdr-reset.scss b/src/styles/cdr-reset.scss
index 1d6ff75d1..0613b2dec 100644
--- a/src/styles/cdr-reset.scss
+++ b/src/styles/cdr-reset.scss
@@ -114,4 +114,9 @@ input[type='month'] {
   -webkit-appearance: none;
 }
 
-
+[data-palette='sandstone'] {
+  --cdr-color-background-surface-primary: #{$cdr-color-background-secondary};
+  --cdr-color-background-surface-secondary: #dcd6cb;
+  --cdr-color-border-surface-primary: #{$cdr-color-border-secondary};
+  --cdr-color-border-surface-secondary: #726d64;
+}
diff --git a/src/styles/settings/index.scss b/src/styles/settings/index.scss
index e33994c03..1fffa6821 100644
--- a/src/styles/settings/index.scss
+++ b/src/styles/settings/index.scss
@@ -7,7 +7,7 @@ $cdr-warn: false;
 @import './options.vars';
 @import './visibility.vars';
 @import './fluid.vars';
-@import './palette.vars';
+@import './member-palette';
 
 $border-widths: (
   'zero': $cdr-space-zero,
diff --git a/src/styles/settings/member-palette.scss b/src/styles/settings/member-palette.scss
new file mode 100644
index 000000000..bb233659a
--- /dev/null
+++ b/src/styles/settings/member-palette.scss
@@ -0,0 +1,42 @@
+// Membership palettes
+//
+// palette options for membership surfaces inclued both vibrant and subtle variants
+//
+//
+// Updated Values:
+// --cdr-color-background-surface-primary
+// --cdr-color-text-primary
+// --cdr-color-border-button-primary-rest
+// --cdr-color-border-button-primary-active
+// --cdr-color-border-button-primary-hover
+// --cdr-color-text-button-primary-hover
+// --cdr-color-background-button-primary-rest
+// --cdr-color-background-button-primary-active
+//
+// Usage:
+//   <cdr-surface palette="membership-subtle">I am a subtle membership surface</cdr-surface>
+//   <cdr-surface palette="membership-vibrant">I am a vibrant membership surface</cdr-surface>
+//
+
+[data-palette='membership-subtle'] {
+  --cdr-color-background-surface-primary: var(--cdr-membership-subtle-color-background-primary, #{$cdr-membership-subtle-color-background-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});
+}
+
+[data-palette='membership-vibrant'] {
+  --cdr-color-background-surface-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-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});
+}
+
diff --git a/src/styles/settings/palette.vars.scss b/src/styles/settings/palette.vars.scss
deleted file mode 100644
index 258d28cbf..000000000
--- a/src/styles/settings/palette.vars.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-
-[data-palette='sandstone'] {
-  --cdr-color-background-surface-primary: #{$cdr-color-background-secondary};
-  --cdr-color-background-surface-secondary: #dcd6cb;
-  --cdr-color-border-surface-primary: #{$cdr-color-border-secondary};
-  --cdr-color-border-surface-secondary: #726d64;
-}
-
-[data-palette='membership-subtle'] {
-  --cdr-color-background-surface-primary: var(--cdr-membership-subtle-color-background-primary);
-  --cdr-color-text-primary: var(--cdr-membership-subtle-color-text-primary);
-  --cdr-color-border-button-primary-rest: var(--cdr-membership-subtle-color-border-button-primary-rest);
-  --cdr-color-border-button-primary-active: var(--cdr-membership-subtle-color-border-button-primary-active);
-  --cdr-color-border-button-primary-hover: var(--cdr-membership-subtle-color-border-button-primary-hover);
-  --cdr-color-text-button-primary-hover: var(--cdr-membership-subtle-color-text-button-primary-hover);
-  --cdr-color-background-button-primary-rest: var(--cdr-membership-subtle-color-background-button-primary-rest);
-  --cdr-color-background-button-primary-active: var(--cdr-membership-subtle-color-background-button-primary-active);
-}
-
-[data-palette='membership-vibrant'] {
-  --cdr-color-background-surface-primary: var(--cdr-membership-vibrant-color-background-primary);
-  --cdr-color-text-surface-primary: var(--cdr-membership-vibrant-color-text-primary);
-  --cdr-color-border-button-primary-rest: var(--cdr-membership-vibrant-color-border-button-primary-rest);
-  --cdr-color-border-button-primary-active: var(--cdr-membership-vibrant-color-border-button-primary-active);
-  --cdr-color-border-button-primary-hover: var(--cdr-membership-vibrant-color-border-button-primary-hover);
-  --cdr-color-text-button-primary-hover: var(--cdr-membership-vibrant-color-text-button-primary-hover);
-  --cdr-color-background-button-primary-rest: var(--cdr-membership-vibrant-color-background-button-primary-rest);
-  --cdr-color-background-button-primary-active: var(--cdr-membership-vibrant-color-background-button-primary-active);
-}
-