feat(cxl-lumo-styles): block editor add basic button styles

https://app.clickup.com/t/86b2gwt6f
conversionxl · Oct 30, 2024 · ace6afa · ace6afa
1 parent e63fd24
commit ace6afa
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/packages/cxl-lumo-styles/scss/block-editor/button.scss b/packages/cxl-lumo-styles/scss/block-editor/button.scss
@@ -0,0 +1,32 @@
+.wp-block-button {
+  all: unset;
+
+  /* Sizing */
+  --lumo-button-size: var(--lumo-size-m);
+  min-width: calc(var(--lumo-button-size) * 2);
+  height: var(--lumo-button-size);
+  padding: 0 calc(var(--lumo-button-size) / 3 + var(--lumo-border-radius-m) / 2);
+  margin: var(--lumo-space-xs) 0;
+  box-sizing: border-box;
+  /* Style */
+  font-family: var(--lumo-font-family);
+  font-size: var(--lumo-font-size-m);
+  font-weight: 500;
+  color: var(--_lumo-button-primary-color, var(--lumo-primary-contrast-color));
+  background-color: var(--_lumo-button-primary-background-color, var(--lumo-primary-color));
+  border-radius: var(--lumo-border-radius-m);
+  cursor: var(--lumo-clickable-cursor);
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  display: flex;
+  align-items: center;
+
+  .wp-block-button__link {
+    background-color: unset;
+    color: unset;
+    font-size: unset;
+    padding: unset;
+  }
+}
diff --git a/packages/cxl-lumo-styles/scss/wp-block-editor.scss b/packages/cxl-lumo-styles/scss/wp-block-editor.scss
@@ -1,3 +1,4 @@
+@import "block-editor/button";
 @import "block-editor/color";
 @import "block-editor/sizing";
 @import "block-editor/spacing";