From 370b653f300ef8405dbb2f8d924317fc91133f18 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sun, 18 Feb 2024 13:32:20 +0300 Subject: [PATCH] Migrated Checkbox/RadioButton --- components/lib/theme/aura/checkbox/index.js | 133 +++++++++++++++++ .../lib/theme/aura/checkbox/package.json | 6 + components/lib/theme/aura/index.js | 10 +- components/lib/theme/aura/inputtext/index.js | 29 ++-- .../lib/theme/aura/radiobutton/index.js | 136 ++++++++++++++++++ .../lib/theme/aura/radiobutton/package.json | 6 + components/lib/theme/aura/textarea/index.js | 29 ++-- 7 files changed, 311 insertions(+), 38 deletions(-) create mode 100644 components/lib/theme/aura/checkbox/index.js create mode 100644 components/lib/theme/aura/checkbox/package.json create mode 100644 components/lib/theme/aura/radiobutton/index.js create mode 100644 components/lib/theme/aura/radiobutton/package.json diff --git a/components/lib/theme/aura/checkbox/index.js b/components/lib/theme/aura/checkbox/index.js new file mode 100644 index 000000000..a5a373ae8 --- /dev/null +++ b/components/lib/theme/aura/checkbox/index.js @@ -0,0 +1,133 @@ +export default { + variables: { + common: { + root: { + borderRadius: '{rounded.sm}', + width: '1.25rem', + height: '1.25rem', + background: '{form.field.background}', + backgroundChecked: '{primary.color}', + backgroundCheckedHover: '{primary.hover.color}', + backgroundDisabled: '{form.field.background.disabled}', + backgroundFilled: '{form.field.background.filled}', + borderColor: '{form.field.border.color}', + borderColorHover: '{form.field.border.color.hover}', + borderColorChecked: '{primary.color}', + borderColorCheckedHover: '{primary.hover.color}', + borderColorInvalid: '{form.field.border.color.invalid}', + boxShadow: '{form.field.box.shadow}' + }, + icon: { + size: '0.875rem', + color: '{form.field.text.color}', + colorChecked: '{primary.inverse.color}', + colorCheckedHover: '{primary.inverse.color}', + colorDisabled: '{form.field.text.disabled}' + } + } + }, + css: ` +.p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + width: var(--p-checkbox-width); + height: var(--p-checkbox-height); +} + +.p-checkbox-input { + cursor: pointer; + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 1px solid transparent; + border-radius: var(--p-checkbox-border-radius); +} + +.p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + border-radius: var(--p-rounded-sm); + border: 1px solid var(--p-checkbox-border-color); + background: var(--p-checkbox-background); + width: var(--p-checkbox-width); + height: var(--p-checkbox-height); + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration); + outline-color: transparent; + box-shadow: var(--p-checkbox-box-shadow); +} + +.p-checkbox-icon { + transition-duration: var(--p-transition-duration); + color: var(--p-checkbox-icon-color); + font-size: var(--p-checkbox-icon-size); + width: var(--p-checkbox-icon-size); + height: var(--p-checkbox-icon-size); +} + +.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: var(--p-checkbox-border-color-hover); +} + +.p-checkbox.p-highlight .p-checkbox-box { + border-color: var(--p-checkbox-border-color-checked); + background: var(--p-checkbox-background-checked); +} + +.p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon { + color: var(--p-checkbox-icon-color-checked); +} + +.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: var(--p-checkbox-border-color-checked-hover); + background: var(--p-checkbox-background-checked-hover) +} + +.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box .p-checkbox-icon { + color: var(--p-checkbox-icon-color-checked-hover); +} + +.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color); + outline-offset: var(--p-focus-ring-offset); +} + +.p-checkbox.p-invalid > .p-checkbox-box { + border-color: var(--p-checkbox-border-color-invalid); +} + +.p-checkbox.p-variant-filled .p-checkbox-box { + background: var(--p-checkbox-background-filled); +} + +.p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: var(--p-checkbox-background-checked); +} + +.p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: var(--p-checkbox-background-checked-hover); +} + +.p-checkbox.p-disabled { + opacity: 1; +} + +.p-checkbox.p-disabled .p-checkbox-box { + background: var(--p-checkbox-background-disabled); +} + +.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: var(--p-checkbox-icon-color-disabled); +} +` +}; diff --git a/components/lib/theme/aura/checkbox/package.json b/components/lib/theme/aura/checkbox/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/checkbox/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index 95c1229b1..352fcba3e 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -6,6 +6,7 @@ import breadcrumb from 'primevue/theme/aura/breadcrumb'; import button from 'primevue/theme/aura/button'; import card from 'primevue/theme/aura/card'; import carousel from 'primevue/theme/aura/carousel'; +import checkbox from 'primevue/theme/aura/checkbox'; import chip from 'primevue/theme/aura/chip'; import confirmdialog from 'primevue/theme/aura/confirmdialog'; import confirmpopup from 'primevue/theme/aura/confirmpopup'; @@ -38,6 +39,7 @@ import panelmenu from 'primevue/theme/aura/panelmenu'; import picklist from 'primevue/theme/aura/picklist'; import progressbar from 'primevue/theme/aura/progressbar'; import progressspinner from 'primevue/theme/aura/progressspinner'; +import radiobutton from 'primevue/theme/aura/radiobutton'; import rating from 'primevue/theme/aura/rating'; import scrollpanel from 'primevue/theme/aura/scrollpanel'; import scrolltop from 'primevue/theme/aura/scrolltop'; @@ -145,11 +147,10 @@ export default { textColorFocus: '{primary.800}' }, maskBackground: 'rgba(0,0,0,0.4)', - textfield: { + formField: { background: '{surface.0}', backgroundDisabled: '{surface.200}', backgroundFilled: '{surface.50}', - backgroundFilledHover: '{surface.50}', backgroundFilledFocus: '{surface.0}', borderColor: '{surface.300}', borderColorHover: '{surface.400}', @@ -189,11 +190,10 @@ export default { textColorFocus: 'rgba(255,255,255,.87)' }, maskBackground: 'rgba(0,0,0,0.4)', - textfield: { + formField: { background: '{surface.950}', backgroundDisabled: '{surface.700}', backgroundFilled: '{surface.800}', - backgroundFilledHover: '{surface.800}', backgroundFilledFocus: '{surface.950}', borderColor: '{surface.700}', borderColorHover: '{surface.600}', @@ -217,6 +217,7 @@ export default { button, card, carousel, + checkbox, chip, confirmdialog, confirmpopup, @@ -248,6 +249,7 @@ export default { picklist, progressbar, progressspinner, + radiobutton, rating, scrollpanel, scrolltop, diff --git a/components/lib/theme/aura/inputtext/index.js b/components/lib/theme/aura/inputtext/index.js index f39380642..1735fae46 100644 --- a/components/lib/theme/aura/inputtext/index.js +++ b/components/lib/theme/aura/inputtext/index.js @@ -2,19 +2,18 @@ export default { variables: { common: { root: { - background: '{textfield.background}', - backgroundDisabled: '{textfield.background.disabled}', - backgroundFilled: '{textfield.background.filled}', - backgroundFilledHover: '{textfield.background.filled.hover}', - backgroundFilledFocus: '{textfield.background.filled.focus}', - borderColor: '{textfield.border.color}', - borderColorHover: '{textfield.border.color.hover}', - borderColorFocus: '{textfield.border.color.focus}', - borderColorInvalid: '{textfield.border.color.invalid}', - textColor: '{textfield.text.color}', - textColorDisabled: '{textfield.text.disabled}', - placeholderTextColor: '{textfield.placeholder.text.color}', - boxShadow: '{textfield.box.shadow}' + background: '{form.field.background}', + backgroundDisabled: '{form.field.background.disabled}', + backgroundFilled: '{form.field.background.filled}', + backgroundFilledFocus: '{form.field.background.filled.focus}', + borderColor: '{form.field.border.color}', + borderColorHover: '{form.field.border.color.hover}', + borderColorFocus: '{form.field.border.color.focus}', + borderColorInvalid: '{form.field.border.color.invalid}', + textColor: '{form.field.text.color}', + textColorDisabled: '{form.field.text.disabled}', + placeholderTextColor: '{form.field.placeholder.text.color}', + boxShadow: '{form.field.box.shadow}' } } }, @@ -51,10 +50,6 @@ export default { background-color: var(--p-inputtext-background-filled); } -.p-inputtext.p-variant-filled:enabled:hover { - background-color: var(--p-inputtext-background-filled-hover); -} - .p-inputtext.p-variant-filled:enabled:focus { background-color: var(--p-inputtext-background-filled-focus); } diff --git a/components/lib/theme/aura/radiobutton/index.js b/components/lib/theme/aura/radiobutton/index.js new file mode 100644 index 000000000..6f73c4209 --- /dev/null +++ b/components/lib/theme/aura/radiobutton/index.js @@ -0,0 +1,136 @@ +export default { + variables: { + common: { + root: { + width: '1.25rem', + height: '1.25rem', + background: '{form.field.background}', + backgroundChecked: '{form.field.background}', + backgroundCheckedHover: '{form.field.background}', + backgroundDisabled: '{form.field.background.disabled}', + backgroundFilled: '{form.field.background.filled}', + borderColor: '{form.field.border.color}', + borderColorHover: '{form.field.border.color.hover}', + borderColorChecked: '{primary.color}', + borderColorCheckedHover: '{primary.hover.color}', + borderColorInvalid: '{form.field.border.color.invalid}', + boxShadow: '{form.field.box.shadow}' + }, + icon: { + size: '0.75rem', + colorChecked: '{primary.color}', + colorCheckedHover: '{primary.hover.color}', + colorDisabled: '{form.field.text.disabled}' + } + } + }, + css: ` +.p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + width: var(--p-radiobutton-width); + height: var(--p-radiobutton-height); +} + +.p-radiobutton-input { + cursor: pointer; + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 1px solid transparent; + border-radius: 50%; +} + +.p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + border: 1px solid var(--p-radiobutton-border-color); + background: var(--p-radiobutton-background); + width: var(--p-radiobutton-width); + height: var(--p-radiobutton-height); + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration); + outline-color: transparent; + box-shadow: var(--p-radiobutton-box-shadow); +} + +.p-radiobutton-icon { + transition-duration: var(--p-transition-duration); + background: transparent; + font-size: var(--p-radiobutton-icon-size); + width: var(--p-radiobutton-icon-size); + height: var(--p-radiobutton-icon-size); + border-radius: 50%; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); +} + +.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: var(--p-radiobutton-border-color-hover); +} + +.p-radiobutton.p-highlight .p-radiobutton-box { + border-color: var(--p-radiobutton-border-color-checked); + background: var(--p-radiobutton-background-checked); +} + +.p-radiobutton.p-highlight .p-radiobutton-box .p-radiobutton-icon { + background: var(--p-radiobutton-icon-color-checked); + transform: translateZ(0) scale(1, 1); + visibility: visible; +} + +.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: var(--p-radiobutton-border-color-checked-hover); + background: var(--p-radiobutton-background-checked-hover) +} + +.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background: var(--p-radiobutton-icon-color-checked-hover); +} + +.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color); + outline-offset: var(--p-focus-ring-offset); +} + +.p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: var(--p-radiobutton-border-color-invalid); +} + +.p-radiobutton.p-variant-filled .p-radiobutton-box { + background: var(--p-radiobutton-background-filled); +} + +.p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: var(--p-radiobutton-background-checked); +} + +.p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: var(--p-radiobutton-background-checked-hover); +} + +.p-radiobutton.p-disabled { + opacity: 1; +} + +.p-radiobutton.p-disabled .p-radiobutton-box { + background: var(--p-radiobutton-background-disabled); +} + +.p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + color: var(--p-radiobutton-icon-color-disabled); +} +` +}; diff --git a/components/lib/theme/aura/radiobutton/package.json b/components/lib/theme/aura/radiobutton/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/radiobutton/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/theme/aura/textarea/index.js b/components/lib/theme/aura/textarea/index.js index f51f5d9b2..7ae0bd5d6 100644 --- a/components/lib/theme/aura/textarea/index.js +++ b/components/lib/theme/aura/textarea/index.js @@ -2,19 +2,18 @@ export default { variables: { common: { root: { - background: '{textfield.background}', - backgroundDisabled: '{textfield.background.disabled}', - backgroundFilled: '{textfield.background.filled}', - backgroundFilledHover: '{textfield.background.filled.hover}', - backgroundFilledFocus: '{textfield.background.filled.focus}', - borderColor: '{textfield.border.color}', - borderColorHover: '{textfield.border.color.hover}', - borderColorFocus: '{textfield.border.color.focus}', - borderColorInvalid: '{textfield.border.color.invalid}', - textColor: '{textfield.text.color}', - textColorDisabled: '{textfield.text.disabled}', - placeholderTextColor: '{textfield.placeholder.text.color}', - boxShadow: '{textfield.box.shadow}' + background: '{form.field.background}', + backgroundDisabled: '{form.field.background.disabled}', + backgroundFilled: '{form.field.background.filled}', + backgroundFilledFocus: '{form.field.background.filled.focus}', + borderColor: '{form.field.border.color}', + borderColorHover: '{form.field.border.color.hover}', + borderColorFocus: '{form.field.border.color.focus}', + borderColorInvalid: '{form.field.border.color.invalid}', + textColor: '{form.field.text.color}', + textColorDisabled: '{form.field.text.disabled}', + placeholderTextColor: '{form.field.placeholder.text.color}', + boxShadow: '{form.field.box.shadow}' } } }, @@ -51,10 +50,6 @@ export default { background-color: var(--p-textarea-background-filled); } -.p-inputtextarea.p-variant-filled:enabled:hover { - background-color: var(--p-textarea-background-filled-hover); -} - .p-inputtextarea.p-variant-filled:enabled:focus { background-color: var(--p-textarea-background-filled-focus); }