Migrated inputtext

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,

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

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

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' } },