From ace6afa56bac2862234d4bab462bc0ca5c42f25e Mon Sep 17 00:00:00 2001 From: Andrew Noblet Date: Wed, 30 Oct 2024 13:53:33 +0000 Subject: [PATCH 1/2] feat(cxl-lumo-styles): block editor add basic button styles https://app.clickup.com/t/86b2gwt6f --- .../scss/block-editor/button.scss | 32 +++++++++++++++++++ .../cxl-lumo-styles/scss/wp-block-editor.scss | 1 + 2 files changed, 33 insertions(+) create mode 100644 packages/cxl-lumo-styles/scss/block-editor/button.scss diff --git a/packages/cxl-lumo-styles/scss/block-editor/button.scss b/packages/cxl-lumo-styles/scss/block-editor/button.scss new file mode 100644 index 000000000..5e893a149 --- /dev/null +++ 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 index 746c1bd56..bfcb9e723 100644 --- 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"; From 3e99458ca0c71d3fe27e59af4d0875dfd0ea6a10 Mon Sep 17 00:00:00 2001 From: Andrew Noblet Date: Mon, 4 Nov 2024 18:30:28 +0000 Subject: [PATCH 2/2] wip --- .../scss/block-editor/button.scss | 97 +++++++++++++++---- 1 file changed, 76 insertions(+), 21 deletions(-) diff --git a/packages/cxl-lumo-styles/scss/block-editor/button.scss b/packages/cxl-lumo-styles/scss/block-editor/button.scss index 5e893a149..942a59381 100644 --- a/packages/cxl-lumo-styles/scss/block-editor/button.scss +++ b/packages/cxl-lumo-styles/scss/block-editor/button.scss @@ -1,27 +1,82 @@ .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; + /* Sizing */ + --lumo-button-size: var(--lumo-size-m); + min-width: var(--vaadin-button-min-width, calc(var(--_button-size) * 2)); + height: var(--_button-size); + padding: var(--vaadin-button-padding, 0 calc(var(--_button-size) / 3 + var(--lumo-border-radius-m) / 2)); + margin: var(--vaadin-button-margin, var(--lumo-space-xs) 0); + box-sizing: border-box; + /* Style */ + font-family: var(--lumo-font-family); + font-size: var(--vaadin-button-font-size, var(--lumo-font-size-m)); + font-weight: var(--vaadin-button-font-weight, 500); + color: var(--_lumo-button-text-color); + background: var(--_lumo-button-background); + border: var(--vaadin-button-border, none); + border-radius: var(--vaadin-button-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; + flex-shrink: 0; + --_button-size: var(--vaadin-button-height, var(--lumo-button-size)); + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); + /* Used by notification */ + --_lumo-button-background: var(--vaadin-button-background, var(--lumo-contrast-5pct)); + --_lumo-button-text-color: var(--vaadin-button-text-color, var(--lumo-primary-text-color)); + --_lumo-button-primary-background: var(--vaadin-button-primary-background, var(--lumo-primary-color)); + --_lumo-button-primary-text-color: var(--vaadin-button-primary-text-color, var(--lumo-primary-contrast-color)); - display: flex; align-items: center; + display: flex; + justify-content: center; + + &.contrast { + color: var(--lumo-contrast); + + &.primary { + background-color: var(--lumo-contrast); + color: var(--lumo-base-color); + } + } + + &.large { + font-size: var(--lumo-font-size-l); + --lumo-button-size: var(--lumo-size-l); + } + + &.primary { + background: var(--_lumo-button-primary-background); + border: var(--vaadin-button-primary-border, none); + color: var(--_lumo-button-primary-text-color); + font-weight: var(--vaadin-button-primary-font-weight, 600); + min-width: calc(var(--lumo-button-size) * 2.5); + } + + &.small { + font-size: var(--lumo-font-size-s); + --lumo-button-size: var(--lumo-size-s); + } + + &.tertiary, &.tertiary-inline { + --_background: transparent !important; + background: var(--vaadin-button-tertiary-background, var(--_background)); + min-width: 0; + } + + &.tertiary { + border: var(--vaadin-button-tertiary-border, none); + color: var(--vaadin-button-tertiary-text-color, var(--lumo-primary-text-color)); + font-weight: var(--vaadin-button-tertiary-font-weight, 500); + padding: var(--vaadin-button-tertiary-padding, 0 calc(var(--_button-size) / 6)); + } + + &.x-large { + --lumo-button-size: calc(var(--lumo-size-xl) * 1.25); + padding: 1.25em 3.5em 1.25em 3em; + font-size: calc(var(--lumo-font-size-xxxl) / 2) !important; + } .wp-block-button__link { background-color: unset;