docs and code review updates

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 />

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;
+}

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,

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});
+}
+