diff --git a/components/lib/theme/aura/chips/index.js b/components/lib/theme/aura/chips/index.js new file mode 100644 index 000000000..7e7eb21f2 --- /dev/null +++ b/components/lib/theme/aura/chips/index.js @@ -0,0 +1,147 @@ +export default { + variables: { + common: { + root: { + 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}' + } + }, + colorScheme: { + light: { + chip: { + background: '{surface.100}', + backgroundFocus: '{surface.200}', + textColor: '{surface.800}', + textColorFocus: '{surface.900}' + } + }, + dark: { + chip: { + background: '{surface.700}', + backgroundFocus: '{surface.600}', + textColor: '{surface.0}', + textColorFocus: '{surface.0}' + } + } + } + }, + css: ` +.p-chips { + display: inline-flex; +} + +.p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + padding: 0.25rem 0.25rem; + gap: 0.25rem; + color: var(--p-chips-text-color); + background: var(--p-chips-background); + border: 1px solid var(--p-chips-border-color); + border-radius: var(--p-rounded-base); + width: 100%; + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration); + outline-color: transparent; + box-shadow: var(--p-chips-box-shadow); +} + +.p-chips:not(.p-disabled):hover .p-chips-multiple-container { + border-color: var(--p-chips-border-color-hover); +} + +.p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + border-color: var(--p-chips-border-color-focus); + outline: 0 none; +} + +.p-chips.p-invalid .p-chips-multiple-container { + border-color: var(--p-chips-border-color-invalid); +} + +.p-variant-filled.p-chips-multiple-container { + background: var(--p-chips-background-filled); +} + +.p-chips:not(.p-disabled).p-focus .p-variant-filled.p-chips-multiple-container { + background: var(--p-chips-background-filled-focus); +} + +.p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background: var(--p-chips-background-disabled); + color: var(--p-chips-text-color-disabled); +} + +.p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + padding: 0.25rem 0.75rem; + background: var(--p-chips-chip-background); + color: var(--p-chips-chip-text-color); + border-radius: var(--p-rounded-sm); +} + +.p-chips-token.p-focus { + background: var(--p-chips-chip-background-focus); + color: var(--p-chips-chip-text-color-focus); +} + +.p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; +} + +.p-chips-token-icon { + cursor: pointer; + margin-left: 0.375rem; +} + +.p-chips-input-token { + padding: 0.25rem 0; + margin-left: 0.5rem; +} + +.p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + font-family: inherit; + font-feature-settings: inherit; + font-size: 1rem; + color: inherit; + padding: 0; + margin: 0; +} + +.p-chips-input-token input::placeholder { + color: var(--p-chips-placeholder-text-color); +} + +.p-fluid .p-chips { + display: flex; +} +` +}; diff --git a/components/lib/theme/aura/chips/package.json b/components/lib/theme/aura/chips/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/chips/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 5b4736534..28869307b 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -8,6 +8,7 @@ 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 chips from 'primevue/theme/aura/chips'; import colorpicker from 'primevue/theme/aura/colorpicker'; import confirmdialog from 'primevue/theme/aura/confirmdialog'; import confirmpopup from 'primevue/theme/aura/confirmpopup'; @@ -224,6 +225,7 @@ export default { carousel, checkbox, chip, + chips, colorpicker, confirmdialog, confirmpopup, diff --git a/components/lib/theme/aura/inputtext/index.js b/components/lib/theme/aura/inputtext/index.js index 1735fae46..97280d5d7 100644 --- a/components/lib/theme/aura/inputtext/index.js +++ b/components/lib/theme/aura/inputtext/index.js @@ -54,6 +54,12 @@ export default { background-color: var(--p-inputtext-background-filled-focus); } +.p-inputtext:disabled { + opacity: 1; + background: var(--p-inputtext-background-disabled); + color: var(--p-inputtext-text-color-disabled); +} + .p-input-icon-right > svg:last-of-type, .p-input-icon-right > i:last-of-type { right: 0.75rem; @@ -71,11 +77,5 @@ export default { .p-fluid .p-inputtext { width: 100%; } - -.p-inputtext:disabled { - opacity: 1; - background: var(--p-inputtext-background-disabled); - color: var(--p-inputtext-text-color-disabled); -} ` }; diff --git a/components/lib/theme/aura/textarea/index.js b/components/lib/theme/aura/textarea/index.js index 7ae0bd5d6..0bc128ca1 100644 --- a/components/lib/theme/aura/textarea/index.js +++ b/components/lib/theme/aura/textarea/index.js @@ -54,6 +54,12 @@ export default { background-color: var(--p-textarea-background-filled-focus); } +.p-inputtextarea:disabled { + opacity: 1; + background: var(--p-textarea-background-disabled); + color: var(--p-textarea-text-color-disabled); +} + .p-inputtextarea::placeholder { color: var(--p-textarea-placeholder-text-color); } @@ -66,11 +72,5 @@ export default { overflow: hidden; resize: none; } - -.p-inputtextarea:disabled { - opacity: 1; - background: var(--p-textarea-background-disabled); - color: var(--p-textarea-text-color-disabled); -} ` };