From 8f1bf13d3367980b56630bfb3322df20b00e5030 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 17 Feb 2024 16:29:15 +0300 Subject: [PATCH] Updates to inputtext and textarea --- components/lib/theme/aura/index.js | 2 + components/lib/theme/aura/inputtext/index.js | 11 +++ components/lib/theme/aura/textarea/index.js | 97 +++++++++++++++++++ .../lib/theme/aura/textarea/package.json | 6 ++ nuxt-vite.config.js | 1 + 5 files changed, 117 insertions(+) create mode 100644 components/lib/theme/aura/textarea/index.js create mode 100644 components/lib/theme/aura/textarea/package.json diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index e3bc2b53b..a9ef7d420 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -52,6 +52,7 @@ import tabmenu from 'primevue/theme/aura/tabmenu'; import tabview from 'primevue/theme/aura/tabview'; import tag from 'primevue/theme/aura/tag'; import terminal from 'primevue/theme/aura/terminal'; +import textarea from 'primevue/theme/aura/textarea'; import tieredmenu from 'primevue/theme/aura/tieredmenu'; import timeline from 'primevue/theme/aura/timeline'; import toast from 'primevue/theme/aura/toast'; @@ -229,6 +230,7 @@ export default { steps, tabmenu, tabview, + textarea, tieredmenu, tag, terminal, diff --git a/components/lib/theme/aura/inputtext/index.js b/components/lib/theme/aura/inputtext/index.js index da619e51e..7fc7eafcb 100644 --- a/components/lib/theme/aura/inputtext/index.js +++ b/components/lib/theme/aura/inputtext/index.js @@ -4,6 +4,7 @@ export default { light: { root: { background: '{surface.0}', + backgroundDisabled: '{surface.200}', backgroundFilled: '{surface.50}', backgroundFilledHover: '{surface.50}', backgroundFilledFocus: '{surface.0}', @@ -12,12 +13,14 @@ export default { borderColorFocus: '{primary.color}', borderColorInvalid: '{red.400}', textColor: '{surface.700}', + textColorDisabled: '{surface.500}', placeholderTextColor: '{surface.500}' } }, dark: { root: { background: '{surface.950}', + backgroundDisabled: '{surface.700}', backgroundFilled: '{surface.800}', backgroundFilledHover: '{surface.800}', backgroundFilledFocus: '{surface.950}', @@ -26,6 +29,7 @@ export default { borderColorFocus: '{primary.color}', borderColorInvalid: '{red.300}', textColor: '{surface.0}', + textColorDisabled: '{surface.400}', placeholderTextColor: '{surface.400}' } } @@ -44,6 +48,7 @@ export default { appearance: none; border-radius: var(--p-rounded-base); outline-color: transparent; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); } .p-inputtext:enabled:hover { @@ -88,5 +93,11 @@ 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 new file mode 100644 index 000000000..a42a69df3 --- /dev/null +++ b/components/lib/theme/aura/textarea/index.js @@ -0,0 +1,97 @@ +export default { + variables: { + colorScheme: { + light: { + root: { + background: '{surface.0}', + backgroundDisabled: '{surface.200}', + backgroundFilled: '{surface.50}', + backgroundFilledHover: '{surface.50}', + backgroundFilledFocus: '{surface.0}', + borderColor: '{surface.300}', + borderColorHover: '{surface.400}', + borderColorFocus: '{primary.color}', + borderColorInvalid: '{red.400}', + textColor: '{surface.700}', + textColorDisabled: '{surface.500}', + placeholderTextColor: '{surface.500}' + } + }, + dark: { + root: { + background: '{surface.950}', + backgroundDisabled: '{surface.700}', + backgroundFilled: '{surface.800}', + backgroundFilledHover: '{surface.800}', + backgroundFilledFocus: '{surface.950}', + borderColor: '{surface.700}', + borderColorHover: '{surface.600}', + borderColorFocus: '{primary.color}', + borderColorInvalid: '{red.300}', + textColor: '{surface.0}', + textColorDisabled: '{surface.400}', + placeholderTextColor: '{surface.400}' + } + } + } + }, + css: ` +.p-inputtextarea { + font-family: inherit; + font-feature-settings: inherit; + font-size: 1rem; + color: var(--p-textarea-text-color); + background: var(--p-textarea-background); + padding: 0.5rem 0.75rem; + border: 1px solid var(--p-textarea-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-inputtextarea:enabled:hover { + border-color: var(--p-textarea-border-color-hover); +} + +.p-inputtextarea:enabled:focus { + border-color: var(--p-textarea-border-color-focus); + outline: 0 none; +} + +.p-inputtextarea.p-invalid { + border-color: var(--p-textarea-border-color-invalid); +} + +.p-inputtextarea.p-variant-filled { + 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); +} + +.p-inputtextarea::placeholder { + color: var(--p-textarea-placeholder-text-color); +} + +.p-fluid .p-inputtextarea { + width: 100%; +} + +.p-inputtextarea-resizable { + overflow: hidden; + resize: none; +} + +.p-inputtextarea:disabled { + opacity: 1; + background: var(--p-textarea-background-disabled); + color: var(--p-textarea-text-color-disabled); +} +` +}; diff --git a/components/lib/theme/aura/textarea/package.json b/components/lib/theme/aura/textarea/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/textarea/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/nuxt-vite.config.js b/nuxt-vite.config.js index fcbb0b31c..adf6fba54 100644 --- a/nuxt-vite.config.js +++ b/nuxt-vite.config.js @@ -234,6 +234,7 @@ const THEME_ALIAS = { 'primevue/theme/aura/tabview': path.resolve(__dirname, './components/lib/theme/aura/tabview/index.js'), 'primevue/theme/aura/tag': path.resolve(__dirname, './components/lib/theme/aura/tag/index.js'), 'primevue/theme/aura/terminal': path.resolve(__dirname, './components/lib/theme/aura/terminal/index.js'), + 'primevue/theme/aura/textarea': path.resolve(__dirname, './components/lib/theme/aura/textarea/index.js'), 'primevue/theme/aura/tieredmenu': path.resolve(__dirname, './components/lib/theme/aura/tieredmenu/index.js'), 'primevue/theme/aura/timeline': path.resolve(__dirname, './components/lib/theme/aura/timeline/index.js'), 'primevue/theme/aura/toast': path.resolve(__dirname, './components/lib/theme/aura/toast/index.js'),