media-object-layout

build/copy-css.js

@@ -1,4 +1,4 @@
-// Copy cdr-fonts and cdr-reset to root folder.
+// Copy cdr-fonts, cdr-reset, and cdr-palette to root folder.
 // Cedar 15 expects these files to be in root.
 // For 16, it would be helpful to remove this and have all styles in /style.
 
@@ -7,6 +7,6 @@ const fs = require('fs-extra');
 
 const DIST = 'dist';
 
-['cdr-fonts.css', 'cdr-reset.css'].forEach(file => {
+['cdr-fonts.css', 'cdr-reset.css', 'cdr-palette.css'].forEach(file => {
   fs.copyFileSync(path.join(DIST, '/style', file), path.join(DIST, file));
 })

src/components/layout/examples/Layout.vue

@@ -17,7 +17,6 @@ const layouts: LayoutExample[] = [
   {
     label: 'Basic columns',
     props: {
-      gap: 'one-x',
       columns: 2,
     },
     children: 2,

src/components/surface/CdrSurface.vue

@@ -18,19 +18,25 @@ const props = withDefaults(defineProps<surface>(), {
   shadow: 'flat',
   tag: 'div',
   withBorder: false,
+  palette: 'default',
 });
 
 const style = useCssModule();
 
 const rootProps = computed(() => {
   const { classes } = getSurfaceProps(props, 'cdr-surface');
-  return { class: mapClasses(style, ...classes) || undefined };
+  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"
+    :is="props.tag"
     v-bind="rootProps"
   >
     <!-- @slot Where all default content should be placed. -->

src/components/surface/__tests__/CdrSurface.spec.js

@@ -13,6 +13,7 @@ describe('CdrSurface', () => {
         radius: 'soft',
         withBorder: true,
         borderWidth: 'one-x',
+        palette: 'default',
       });
       expect(wrapper.element).toMatchSnapshot();
     });
@@ -53,5 +54,10 @@ describe('CdrSurface', () => {
         expect(wrapper.element.tagName).toBe('A');
       });
     });
+
+    it('has data-palette attribute set to "default" by default', () => {
+      expect(wrapper.attributes('data-palette')).toBe('default');
+    });
+
   });
 });

src/components/surface/__tests__/__snapshots__/CdrSurface.spec.js.snap

@@ -3,6 +3,7 @@
 exports[`CdrSurface > component unit tests > default component with no configuration > renders correctly 1`] = `
 <div
   class="cdr-surface cdr-surface--modifier-default cdr-surface--background-primary cdr-surface--radius-sharp cdr-surface--shadow-flat"
+  data-palette="default"
 >
   <!-- @slot Where all default content should be placed. -->
   
@@ -13,6 +14,7 @@ exports[`CdrSurface > component unit tests > default component with no configura
 exports[`CdrSurface > component unit tests > when "tag" is set to "a" > renders correctly 1`] = `
 <a
   class="cdr-surface cdr-surface--modifier-default cdr-surface--background-primary cdr-surface--radius-sharp cdr-surface--shadow-flat"
+  data-palette="default"
 >
   <!-- @slot Where all default content should be placed. -->
   
@@ -23,6 +25,7 @@ exports[`CdrSurface > component unit tests > when "tag" is set to "a" > renders
 exports[`CdrSurface > snapshot test > renders correctly 1`] = `
 <div
   class="cdr-surface cdr-surface--modifier-default cdr-surface--background-primary cdr-surface--radius-sharp cdr-surface--shadow-flat"
+  data-palette="default"
 >
   <!-- @slot Where all default content should be placed. -->
   

src/components/surface/examples/Surface.vue

@@ -34,22 +34,35 @@ const boxes: Example[] = [
     },
   },
   {
-    label: 'This surface uses the primary modifier to apply a background and border color',
+    label: 'This surface uses the primary modifier to apply a background but is in the membership-subtle palette ',
     props: {
-      modifier: 'primary',
-      radius: 'soft',
-      withBorder: true,
       class: 'example__card',
+      palette: 'membership-subtle',  // Updated to use membership-subtle palette
+      background: 'primary',
     },
   },
   {
-    label: 'This surface uses the secondary modifier to apply a background and border color',
+    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 ',
+    props: {
+      class: 'example__card',
+      palette: 'membership-subtle',  // Updated to use membership-subtle palette
+      background: 'secondary',
+    },
+  },
+  {
+    label: 'This surface uses the primary modifier to apply a background but is in the membership-vibrant palette ',
+    props: {
+      class: 'example__card',
+      palette: 'membership-vibrant',  // Updated to use membership-subtle palette
+      background: 'primary',
+    },
+  },
+  {
+    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 ',
     props: {
-      modifier: 'secondary',
-      radius: 'soft',
-      withBorder: true,
-      borderStyle: 'dashed',
       class: 'example__card',
+      palette: 'membership-vibrant',  // Updated to use membership-subtle palette
+      background: 'secondary',
     },
   },
 ];

src/dev/SinkWrapper.vue

@@ -37,7 +37,7 @@ export default {
   data() {
     return {
       palette: this.$route.query.palette || 'default',
-      palettes: ['default', 'sandstone'],
+      palettes: ['default', 'sandstone', 'membership-vibrant', 'membership-subtle'],
     };
   },
   watch: {

src/lib.ts

@@ -62,3 +62,4 @@ export * from './types/other';
 /** Compile into dist/style folder */
 import './styles/cdr-reset.scss';
 import './styles/cdr-fonts.scss';
+import './styles/cdr-palette.scss';

src/styles/cdr-palette.scss

@@ -0,0 +1,38 @@
+/* Tokens */
+@import '/node_modules/@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens';
+
+// Sandstone palettes
+// palette options for membership surfaces inclued both vibrant and subtle variants
+
+[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;
+}
+
+// Membership palettes
+// palette options for membership surfaces inclued both vibrant and subtle variants
+
+[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});
+}
+

src/styles/cdr-reset.scss

@@ -116,9 +116,3 @@ 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/main.scss

@@ -7,3 +7,4 @@
 /* Utilities */
 @import './cdr-reset';
 @import './cdr-fonts';
+@import './cdr-palette';

src/types/interfaces.ts

@@ -268,6 +268,11 @@ export interface surface extends HtmlAttributes {
    * Adds in a border. Comes with a default color, width, and style.
    */
   withBorder?: boolean;
+  /**
+   * Defines a palette for the component's style variations.
+   * @values default, sandstone, membership-subtle, membership-vibrant
+   */
+  palette?: 'default' | 'sandstone' | 'membership-subtle' | 'membership-vibrant';
 }
 
 export interface surfaceSelection extends HtmlAttributes {
@@ -338,4 +343,4 @@ export interface MediaObject extends Layout {
 /*
 
 
-*/
+*/