Migrated Checkbox/RadioButton

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);
+}
+`
+};

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"
+}

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,

components/lib/theme/aura/inputtext/index.js

@@ -2,19 +2,18 @@ export default {
     variables: {
         common: {
             root: {
-                background: '{textfield.background}',
+                background: '{form.field.background}',
-                backgroundDisabled: '{textfield.background.disabled}',
+                backgroundDisabled: '{form.field.background.disabled}',
-                backgroundFilled: '{textfield.background.filled}',
+                backgroundFilled: '{form.field.background.filled}',
-                backgroundFilledHover: '{textfield.background.filled.hover}',
+                backgroundFilledFocus: '{form.field.background.filled.focus}',
-                backgroundFilledFocus: '{textfield.background.filled.focus}',
+                borderColor: '{form.field.border.color}',
-                borderColor: '{textfield.border.color}',
+                borderColorHover: '{form.field.border.color.hover}',
-                borderColorHover: '{textfield.border.color.hover}',
+                borderColorFocus: '{form.field.border.color.focus}',
-                borderColorFocus: '{textfield.border.color.focus}',
+                borderColorInvalid: '{form.field.border.color.invalid}',
-                borderColorInvalid: '{textfield.border.color.invalid}',
+                textColor: '{form.field.text.color}',
-                textColor: '{textfield.text.color}',
+                textColorDisabled: '{form.field.text.disabled}',
-                textColorDisabled: '{textfield.text.disabled}',
+                placeholderTextColor: '{form.field.placeholder.text.color}',
-                placeholderTextColor: '{textfield.placeholder.text.color}',
+                boxShadow: '{form.field.box.shadow}'
-                boxShadow: '{textfield.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);
 }

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);
+}
+`
+};

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"
+}

components/lib/theme/aura/textarea/index.js

@@ -2,19 +2,18 @@ export default {
     variables: {
         common: {
             root: {
-                background: '{textfield.background}',
+                background: '{form.field.background}',
-                backgroundDisabled: '{textfield.background.disabled}',
+                backgroundDisabled: '{form.field.background.disabled}',
-                backgroundFilled: '{textfield.background.filled}',
+                backgroundFilled: '{form.field.background.filled}',
-                backgroundFilledHover: '{textfield.background.filled.hover}',
+                backgroundFilledFocus: '{form.field.background.filled.focus}',
-                backgroundFilledFocus: '{textfield.background.filled.focus}',
+                borderColor: '{form.field.border.color}',
-                borderColor: '{textfield.border.color}',
+                borderColorHover: '{form.field.border.color.hover}',
-                borderColorHover: '{textfield.border.color.hover}',
+                borderColorFocus: '{form.field.border.color.focus}',
-                borderColorFocus: '{textfield.border.color.focus}',
+                borderColorInvalid: '{form.field.border.color.invalid}',
-                borderColorInvalid: '{textfield.border.color.invalid}',
+                textColor: '{form.field.text.color}',
-                textColor: '{textfield.text.color}',
+                textColorDisabled: '{form.field.text.disabled}',
-                textColorDisabled: '{textfield.text.disabled}',
+                placeholderTextColor: '{form.field.placeholder.text.color}',
-                placeholderTextColor: '{textfield.placeholder.text.color}',
+                boxShadow: '{form.field.box.shadow}'
-                boxShadow: '{textfield.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);
 }