Feature Editor

.stylelintrc.json

@@ -2,11 +2,12 @@
   "extends": ["stylelint-config-standard"],
   "rules": {
     "no-descending-specificity": null,
+    "custom-property-pattern": null,
     "selector-class-pattern": [
       "^[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-]?[a-z0-9]+)*)?$",
       {
         "resolveNestedSelectors": true
       }
     ]
   }
-}
+}

README.md

@@ -1,9 +1,11 @@
 # Henkel RAQN Guide
+
 PoC / Migration project to experiment with EDS in the RAQN world.
 
 ## Environments
-- Preview: https://main--henkel-raqn-guide--hlxsites.hlx.page/
-- Live: https://main--henkel-raqn-guide--hlxsites.hlx.live/
+
+- Preview: https://main--raqn-docs-sharepoint--henkel.aem.page/
+- Live: https://main--raqn-docs-sharepoint--henkel.aem.live/
 
 ## Installation
 
@@ -26,4 +28,4 @@ npm run lint:fix
 
 ## Documentation
 
-[Documentation](docs/readme.md)
+[Documentation](docs/readme.md)

blocks/accordion/accordion.css

@@ -1,12 +1,12 @@
 raqn-accordion {
-  --scope-icon-size: 1em;
-  --accordion-background: var(--scope-background, black);
-  --accordion-color: var(--scope-color, white);
+  --icon-size: 1em;
+  --accordion-background: var(--background, black);
+  --accordion-color: var(--title, white);
 
   background: var(--accordion-background);
   color: var(--accordion-color);
-  margin: var(--scope-margin, 0);
-  padding: var(--scope-padding, 0);
+  margin: var(--margin, 0);
+  padding: var(--padding, 0);
   display: grid;
 }
 
@@ -21,9 +21,9 @@ raqn-accordion accordion-control.active raqn-icon {
 }
 
 .accordion-control {
-  border-block-start: var(--scope-border-block-start, none);
-  border-inline-start: var(--scope-border-inline-start, none);
-  border-inline-end: var(--scope-border-inline-end, none);
+  border-block-start: var(--border-block-start, none);
+  border-inline-start: var(--border-inline-start, none);
+  border-inline-end: var(--border-inline-end, none);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -36,8 +36,8 @@ raqn-accordion accordion-control.active raqn-icon {
 }
 
 .accordion-control > * {
-  --scope-headings-color: var(--scope-color, black);
-  --scope-hover-color: var(--scope-accent-color, gray);
+  --headings-color: var(--title, black);
+  --hover-background-color: var(--accent-background, gray);
 
   width: 100%;
   display: flex;
@@ -46,16 +46,16 @@ raqn-accordion accordion-control.active raqn-icon {
 }
 
 .accordion-control:hover {
-  --scope-color: var(--scope-headings-color);
+  color: var(--headings-color);
 }
 
 .accordion-content {
   display: grid;
   max-height: 0;
   overflow: hidden;
   opacity: 0;
-  border-block-end: var(--scope-border-block-end, none);
-  border-block-start: var(--scope-border-block-start, none);
+  border-block-end: var(--border-block-end, none);
+  border-block-start: var(--border-block-start, none);
   margin-block-end: -1px;
   transition:
     max-height 0.5s ease-in-out,

blocks/breadcrumbs/breadcrumbs.css

@@ -4,8 +4,8 @@ raqn-breadcrumbs {
   gap: 10px;
   align-items: center;
   padding: 10px 0;
-  background: var(--scope-background, transparent);
-  color: var(--scope-color, #000);
+  background: var(--background, transparent);
+  color: var(--color, #000);
 }
 
 raqn-breadcrumbs ul {
@@ -21,7 +21,7 @@ raqn-breadcrumbs ul li {
 }
 
 raqn-breadcrumbs ul li a {
-  color: var(--scope-color);
+  color: var(--text);
   font-weight: normal;
 }
 

blocks/button/button.css

@@ -5,30 +5,38 @@ raqn-button {
   display: grid;
   align-content: center;
   align-items: center;
-  justify-items: var(--scope-justify, start);
+  justify-items: var(--justify, start);
+
+  --border-radius: 0;
+  --border-block-start: 1px solid transparent;
+  --border-block-end: 1px solid transparent;
+  --border-inline-start: 1px solid transparent;
+  --border-inline-end: 1px solid transparent;
 }
 
 raqn-button :where(a, button) {
   display: inline-flex;
-  line-height: var(--scope-icon-size, 1em);
-  background: var(--scope-accent-background, #000);
-  color: var(--scope-accent-color, #fff);
+  line-height: var(--icon-size, 1em);
+  background: var(--accent-background, #000);
+  color: var(--accent-text, #fff);
   text-transform: none;
-  border-radius: var(--scope-border-radius, 0);
-  border-block-start: var(--scope-border-block-start, 1px solid transparent);
-  border-block-end: var(--scope-border-block-end, 1px solid transparent);
-  border-inline-start: var(--scope-border-inline-start, 1px solid transparent);
-  border-inline-end: var(--scope-border-inline-end, 1px solid transparent);
-  padding: 10px 20px;
+  border-radius: var(--border-radius, 0);
+  border-block-start: var(--border-block-start, 1px solid transparent);
+  border-block-end: var(--border-block-end, 1px solid transparent);
+  border-inline-start: var(--border-inline-start, 1px solid transparent);
+  border-inline-end: var(--border-inline-end, 1px solid transparent);
+  border-color: var(--accent-border, none);
+  padding-block: var(--button-padding-block, 10px);
+  padding-inline: var(--button-padding-inline, 20px);
   overflow: hidden;
   text-decoration: none;
   text-align: start;
 }
 
 raqn-button :where(a, button):hover {
-  background: var(--scope-accent-background-hover, #fff);
-  color: var(--scope-accent-color-hover, #fff);
-  border-color: currentcolor;
+  background: var(--hover-background, #fff);
+  color: var(--hover-text, #fff);
+  border-color: var(--hover-border, #fff);
   cursor: pointer;
 }
 

blocks/button/button.editor.js

@@ -0,0 +1,127 @@
+export default function config() {
+  return {
+    variables: {
+      '--accent-background': {
+        type: 'text',
+        label: 'Background',
+        helpText: 'The background color of the button.',
+      },
+      '--accent-color': {
+        type: 'text',
+        label: 'Color',
+        helpText: 'The text color of the button.',
+      },
+      '--button-padding-block': {
+        type: 'text',
+        label: 'Padding Block',
+        helpText: 'The padding block of the button.',
+      },
+      '--button-padding-inline': {
+        type: 'text',
+        label: 'Padding Inline',
+        helpText: 'The padding inline of the button.',
+      },
+      '--border-block-end': {
+        type: 'text',
+        label: 'Border Block End',
+        helpText: 'The border block end of the button.',
+      },
+      '--border-radius': {
+        type: 'text',
+        label: 'Border Radius',
+        helpText: 'The border radius of the button.',
+      },
+      '--border-block-start': {
+        type: 'text',
+        label: 'Border Block Start',
+        helpText: 'The border block start of the button.',
+      },
+      '--border-inline-end': {
+        type: 'text',
+        label: 'Border Inline End',
+        helpText: 'The border inline end of the button.',
+      },
+      '--border-inline-start': {
+        type: 'text',
+        label: 'Border Inline Start',
+        helpText: 'The border inline start of the button.',
+      },
+      '--box-shadow': {
+        type: 'text',
+        label: 'Box Shadow',
+        helpText: 'The box shadow of the button.',
+      },
+      '--accent-background-hover': {
+        type: 'text',
+        label: 'Background Hover',
+        helpText: 'The background color of the button when hovered.',
+      },
+      '--accent-color-hover': {
+        type: 'text',
+        label: 'Color Hover',
+        helpText: 'The text color of the button when hovered.',
+      },
+      '--justify': {
+        type: 'text',
+        label: 'Justify',
+        helpText: 'The justify of the button.',
+      },
+    },
+    selection: {
+      Blue: {
+        descritpion: {
+          label: 'Regular Blue Button',
+          preview: 'http://localhost:8888/@henkel/theme-interface/assets/previews/button/blue.png',
+        },
+        variables: {
+          '--accent-background': '#007bff',
+          '--accent-color': '#fff',
+          '--border-block-end': '0',
+          '--border-block-start': '0',
+          '--border-inline-end': '0',
+          '--border-inline-start': '0',
+          '--box-shadow': 'none',
+          '--accent-background-hover': '#0056b3',
+          '--accent-color-hover': '#fff',
+          '--justify': 'start',
+        },
+      },
+      Red: {
+        descritpion: {
+          label: 'Regular Red Button',
+          preview: 'http://localhost:8888/@henkel/theme-interface/assets/previews/button/red.png',
+        },
+        variables: {
+          '--accent-background': 'red',
+          '--accent-color': 'white',
+          '--border-block-end': '1px',
+          '--border-block-start': '1px',
+          '--border-inline-end': '1px',
+          '--border-inline-start': '1px',
+          '--box-shadow': '1px 1px 1px 1px rgba(0, 0, 0, 0.1)',
+          '--accent-background-hover': 'white',
+          '--accent-color-hover': 'red',
+          '--justify': 'start',
+        },
+      },
+      White: {
+        descritpion: {
+          label: 'Regular white Button',
+          preview: 'http://localhost:8888/@henkel/theme-interface/assets/previews/button/white.png',
+        },
+        variables: {
+          '--accent-background': 'white',
+          '--accent-color': 'black',
+          '--border-block-end': '10px',
+          '--border-block-start': '10px',
+          '--border-inline-end': '1px',
+          '--border-inline-start': '1px',
+          '--box-shadow': '1px 1px 1px 1px rgba(0, 0, 0, 0.1)',
+          '--accent-background-hover': 'white',
+          '--accent-color-hover': 'red',
+          '--justify': 'start',
+        },
+      },
+    },
+  };
+}

blocks/card/card.css

@@ -1,23 +1,23 @@
 raqn-card {
-  background: var(--scope-background, transparent);
-  color: var(--scope-color, #fff);
+  background: var(--background, transparent);
+  color: var(--text, #fff);
   display: grid;
   position: relative;
   grid-template-columns: var(--card-columns, 1fr);
-  gap: var(--scope-gap, 20px);
-  padding: var(--scope-padding, 20px 0);
+  gap: var(--gap, 20px);
+  padding: var(--padding, 20px 0);
 }
 
 raqn-card > div {
   display: flex;
-  gap: var(--scope-gap, 20px);
+  gap: var(--gap, 20px);
   position: relative;
-  background: var(--scope-inner-background, transparent);
-  padding: var(--scope-inner-padding, 20px);
-  border-block-start: var(--scope-border-block-start, none);
-  border-block-end: var(--scope-border-block-end, none);
-  border-inline-start: var(--scope-border-inline-start, none);
-  border-inline-end: var(--scope-border-inline-end, none);
+  background: var(--inner-background, transparent);
+  padding: var(--inner-padding, 20px);
+  border-block-start: var(--border-block-start, none);
+  border-block-end: var(--border-block-end, none);
+  border-inline-start: var(--border-inline-start, none);
+  border-inline-end: var(--border-inline-end, none);
 }
 
 raqn-card :where(a, button) {
@@ -41,7 +41,6 @@ raqn-card div > div:first-child > p:has(> em:only-child > a:only-child) {
   margin: 0;
 }
 
-
 raqn-card div > div {
   display: flex;
   flex-direction: column;