https://github.com/elmsln/issues/issues/1975

Author: btopro

elements/d-d-d/lib/DDDStyles.js

@@ -464,9 +464,9 @@ export const ApplicationAttributeData = {
     lg: "Large",
   },
   "border-radius": {
-    xs: "X-Small",
-    md: "Medium",
-    xl: "X-Large",
+    xs: "Rounded",
+    md: "Rounder",
+    xl: "Roundest",
   },
   "box-shadow": {
     sm: "Drop shadow",
@@ -511,11 +511,17 @@ export function HAXOptionSampleFactory(type) {
   return Object.keys(ApplicationAttributeData[type]).map((key) => {
     return {
       value: key,
-      html: html`<d-d-d-sample type="${type}" option="${key}"></d-d-d-sample>`,
+      html: ["primary","accent"].includes(type) ? html`<d-d-d-sample @click="${updatePreviewColorVar}" type="${type}" option="${key}"></d-d-d-sample>` : html`<d-d-d-sample type="${type}" option="${key}"></d-d-d-sample>`,
     };
   });
 }
 
+function updatePreviewColorVar(e) {
+  let target = e.target;
+  globalThis.document.body.style.setProperty(`--ddd-sample-theme-${target.type}`, `var(--ddd-${target.type}-${target.option})`);
+}
+
+
 // attributes need to be driven from a cannonical list
 // @note this may need ways of overriding it in the future but at least
 // we've consolidated everything into one place for these small design mods
@@ -1250,22 +1256,27 @@ export const DDDDataAttributes = [
       font-size: var(--ddd-font-size-type1-l);
     }
     /* padding spacing */
+    [data-design-treatment="bg"][data-padding="xs"],
     [data-accent][data-padding="xs"],
     [data-padding="xs"] {
       padding: var(--ddd-spacing-2);
     }
+    [data-design-treatment="bg"][data-padding="s"],
     [data-accent][data-padding="s"],
     [data-padding="s"] {
       padding: var(--ddd-spacing-4);
     }
+    [data-design-treatment="bg"][data-padding="m"],
     [data-accent][data-padding="m"],
     [data-padding="m"] {
       padding: var(--ddd-spacing-8);
     }
+    [data-design-treatment="bg"][data-padding="l"],
     [data-accent][data-padding="l"],
     [data-padding="l"] {
       padding: var(--ddd-spacing-12);
     }
+    [data-design-treatment="bg"][data-padding="xl"],
     [data-accent][data-padding="xl"],
     [data-padding="xl"] {
       padding: var(--ddd-spacing-16);

elements/d-d-d/lib/d-d-d-sample.js

@@ -41,9 +41,10 @@ export class DDDSample extends DDDSuper(LitElement) {
         :host([type="border"]) .sample,
         :host([type="border-radius"]) .sample,
         :host([type="box-shadow"]) .sample {
-          --ddd-theme-primary: var(--ddd-primary-16);
-          background-color: var(--ddd-theme-primary);
-          border-color: black;
+          --ddd-theme-primary: var(--ddd-sample-theme-primary, black);
+          --ddd-theme-accent: var(--ddd-sample-theme-accent, var(--ddd-accent-3));
+          background-color: var(--ddd-theme-accent);
+          border-color: var(--ddd-theme-primary);
           height: var(--ddd-spacing-4);
           width: var(--ddd-spacing-8);
           display: inline-block;
@@ -56,7 +57,7 @@ export class DDDSample extends DDDSuper(LitElement) {
           border: var(--ddd-border-lg);
           height: var(--ddd-spacing-8);
           width: var(--ddd-spacing-8);
-          border-color: black;
+          border-color: var(--ddd-theme-primary);
           clip-path: polygon(50% 0, 0 50%, 0 0, 0 0);
           transform: scale(4);
           padding: 0;
@@ -65,7 +66,7 @@ export class DDDSample extends DDDSuper(LitElement) {
         }
         :host([type="box-shadow"]) .sample {
           border: var(--ddd-border-sm);
-          border-color: black;
+          border-color: var(--ddd-theme-primary);
           margin: 0 12px 12px 12px;
         }
 
@@ -119,13 +120,18 @@ export class DDDSample extends DDDSuper(LitElement) {
         :host([type="design-treatment"]) .label {
           display: block;
           font-weight: bold;
-          --ddd-theme-primary: var(--ddd-primary-16);
+          --ddd-theme-primary: var(--ddd-sample-theme-primary, var(--ddd-primary-16));
           min-height: calc(
             (var(--initialLetter) / 3 * var(--ddd-theme-body-font-size) * 1.5) +
               20px
           );
         }
 
+        /** TODO this needs to be set via some kind of similar ddd-samples global in order to work for the bg option */
+        :host([type="design-treatment"][option="bg"]) .label {
+          color: var(--ddd-theme-bgContrast);
+        }
+
         :host([type="font-weight"]) .label,
         :host([type="font-family"]) .label {
           font-size: var(--ddd-font-size-s);