[POC] Feature editor

.stylelintrc.json

@@ -1,6 +1,7 @@
 {
   "extends": ["stylelint-config-standard"],
   "rules": {
-    "no-descending-specificity": null
+    "no-descending-specificity": null,
+    "custom-property-pattern": null
   }
-}
+}

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

@@ -3,30 +3,40 @@ raqn-button {
   display: grid;
   align-content: center;
   align-items: center;
-  justify-items: var(--scope-justify, start);
+  justify-items: var(--justify, start);
+
+  --button-padding-block: var(--button-padding-block, 10px);
+  --button-padding-inline: var(--button-padding-inline, 20px);
+  --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 > * {
-  background: var(--scope-accent-background, #000);
-  color: var(--scope-accent-color, #fff);
+  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);
+  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);
   overflow: hidden;
 }
 
 raqn-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, currentcolor);
 }
 
 raqn-button a {
-  color: var(--scope-accent-color, currentcolor);
-  padding: 10px 20px;
+  color: var(--accent-text, currentcolor);
+  padding-block: var(--button-padding-block, 10px);
+  padding-inline: var(--button-padding-inline, 20px);
   text-decoration: none;
 }
 

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;

blocks/card/card.editor.js

@@ -0,0 +1,61 @@
+export default function config() {
+  return {
+    sets: {
+      '--background': {
+        type: 'text',
+        label: 'Background',
+        helpText: 'The background color of the card.',
+      },
+      '--color': {
+        type: 'text',
+        label: 'Color',
+        helpText: 'The text color of the card.',
+      },
+      '--gap': {
+        type: 'text',
+        label: 'Gap',
+        helpText: 'The gap between cards.',
+      },
+      '--padding': {
+        type: 'text',
+        label: 'Padding',
+        helpText: 'The padding of the card.',
+      },
+    },
+    attributes: {
+      'data-columns': {
+        type: 'text',
+        label: 'Number of Columns',
+        helpText: 'The number of columns in the card grid.',
+      },
+      'data-eager': {
+        type: 'text',
+        label: 'Eager Loading',
+        helpText: 'The number of images to load eagerly.',
+      },
+    },
+    selection: {
+      variant1: {
+        attributes: {
+          'data-columns': '2',
+          'data-ratio': '4/3',
+          'data-eager': '0',
+        },
+      },
+      variant2: {
+        attributes: {
+          'data-columns': '3',
+          'data-ratio': '4/3',
+          'data-eager': '0',
+        },
+      },
+      variant3: {
+        attributes: {
+          'data-columns': '4',
+          'data-ratio': '4/3',
+          'data-eager': '0',
+        },
+      },
+    },
+  };
+}

blocks/column/column.css

@@ -1,5 +1,5 @@
 raqn-column {
-  margin: var(--scope-margin, 0);
+  margin: var(--margin, 0);
   width: 100%;
   display: grid;
 }