diff --git a/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js b/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js index 446036b9809..b85b7572bea 100644 --- a/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js +++ b/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js @@ -9,8 +9,8 @@ registerStyles( 'vaadin-radio-button', css` :host { - color: var(--lumo-body-text-color); - font-size: var(--lumo-font-size-m); + color: var(--vaadin-radio-button-label-color, var(--lumo-body-text-color)); + font-size: var(--vaadin-radio-button-label-font-size, var(--lumo-font-size-m)); font-family: var(--lumo-font-family); line-height: var(--lumo-line-height-s); -webkit-font-smoothing: antialiased; @@ -28,8 +28,10 @@ registerStyles( } :host([has-label]) ::slotted(label) { - padding-block: var(--lumo-space-xs); - padding-inline: var(--lumo-space-xs) var(--lumo-space-s); + padding: var( + --vaadin-radio-button-label-padding, + var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs) + ); } [part='radio'] { @@ -38,7 +40,7 @@ registerStyles( margin: var(--lumo-space-xs); position: relative; border-radius: 50%; - background-color: var(--lumo-contrast-20pct); + background: var(--vaadin-radio-button-background, var(--lumo-contrast-20pct)); transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s; will-change: transform; cursor: var(--lumo-clickable-cursor); @@ -67,7 +69,8 @@ registerStyles( pointer-events: none; width: 0; height: 0; - border: 3px solid var(--lumo-primary-contrast-color); + border: var(--vaadin-radio-button-dot-size, 3px) solid + var(--vaadin-radio-button-dot-color, var(--lumo-primary-contrast-color)); border-radius: 50%; position: absolute; top: 50%; @@ -91,7 +94,7 @@ registerStyles( } :host(:not([checked]):not([disabled]):hover) [part='radio'] { - background-color: var(--lumo-contrast-30pct); + background: var(--vaadin-radio-button-background-hover, var(--lumo-contrast-30pct)); } :host([active]) [part='radio'] { diff --git a/packages/vaadin-lumo-styles/style.js b/packages/vaadin-lumo-styles/style.js index f6087ecec35..3e179de24e2 100644 --- a/packages/vaadin-lumo-styles/style.js +++ b/packages/vaadin-lumo-styles/style.js @@ -43,6 +43,15 @@ const globals = css` --vaadin-checkbox-label-font-size: var(--lumo-font-size-m); --vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs); --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2); + /* Radio button */ + --vaadin-radio-button-background: var(--lumo-contrast-20pct); + --vaadin-radio-button-background-hover: var(--lumo-contrast-30pct); + --vaadin-radio-button-dot-color: var(--lumo-primary-contrast-color); + --vaadin-radio-button-dot-size: 3px; + --vaadin-radio-button-label-color: var(--lumo-body-text-color); + --vaadin-radio-button-label-font-size: var(--lumo-font-size-m); + --vaadin-radio-button-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) + var(--lumo-space-xs); --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2); --vaadin-selection-color: var(--lumo-primary-color); --vaadin-selection-color-text: var(--lumo-primary-text-color);