diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index b8c6ad46d..e3bc2b53b 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -22,6 +22,7 @@ import image from 'primevue/theme/aura/image'; import inlinemessage from 'primevue/theme/aura/inlinemessage'; import inplace from 'primevue/theme/aura/inplace'; import inputswitch from 'primevue/theme/aura/inputswitch'; +import inputtext from 'primevue/theme/aura/inputtext'; import knob from 'primevue/theme/aura/knob'; import megamenu from 'primevue/theme/aura/megamenu'; import menu from 'primevue/theme/aura/menu'; @@ -206,6 +207,7 @@ export default { inlinemessage, inplace, inputswitch, + inputtext, orderlist, organizationchart, overlaypanel, diff --git a/components/lib/theme/aura/inputtext/index.js b/components/lib/theme/aura/inputtext/index.js new file mode 100644 index 000000000..da619e51e --- /dev/null +++ b/components/lib/theme/aura/inputtext/index.js @@ -0,0 +1,92 @@ +export default { + variables: { + colorScheme: { + light: { + root: { + background: '{surface.0}', + backgroundFilled: '{surface.50}', + backgroundFilledHover: '{surface.50}', + backgroundFilledFocus: '{surface.0}', + borderColor: '{surface.300}', + borderColorHover: '{surface.400}', + borderColorFocus: '{primary.color}', + borderColorInvalid: '{red.400}', + textColor: '{surface.700}', + placeholderTextColor: '{surface.500}' + } + }, + dark: { + root: { + background: '{surface.950}', + backgroundFilled: '{surface.800}', + backgroundFilledHover: '{surface.800}', + backgroundFilledFocus: '{surface.950}', + borderColor: '{surface.700}', + borderColorHover: '{surface.600}', + borderColorFocus: '{primary.color}', + borderColorInvalid: '{red.300}', + textColor: '{surface.0}', + placeholderTextColor: '{surface.400}' + } + } + } + }, + css: ` +.p-inputtext { + font-family: inherit; + font-feature-settings: inherit; + font-size: 1rem; + color: var(--p-inputtext-text-color); + background: var(--p-inputtext-background); + padding: 0.5rem 0.75rem; + border: 1px solid var(--p-inputtext-border-color); + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration); + appearance: none; + border-radius: var(--p-rounded-base); + outline-color: transparent; +} + +.p-inputtext:enabled:hover { + border-color: var(--p-inputtext-border-color-hover); +} + +.p-inputtext:enabled:focus { + border-color: var(--p-inputtext-border-color-focus); + outline: 0 none; +} + +.p-inputtext.p-invalid { + border-color: var(--p-inputtext-border-color-invalid); +} + +.p-inputtext.p-variant-filled { + 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); +} + +.p-input-icon-right > svg:last-of-type, +.p-input-icon-right > i:last-of-type { + right: 0.75rem; + color: #94a3b8; +} + +.p-input-icon-right > .p-inputtext { + padding-right: 2.5rem; +} + +.p-inputtext::placeholder { + color: var(--p-inputtext-placeholder-text-color); +} + +.p-fluid .p-inputtext { + width: 100%; +} +` +}; diff --git a/components/lib/theme/aura/inputtext/package.json b/components/lib/theme/aura/inputtext/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/inputtext/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/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue index 804ba2f8c..0adaae00e 100755 --- a/layouts/AppConfigurator.vue +++ b/layouts/AppConfigurator.vue @@ -47,7 +47,6 @@ export default { { name: 'emerald', palette: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' } }, { name: 'green', palette: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' } }, { name: 'lime', palette: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' } }, - { name: 'red', palette: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a' } }, { name: 'orange', palette: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' } }, { name: 'amber', palette: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' } }, { name: 'yellow', palette: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006' } },