From 36e418b726ac8f2c27f17bccecb2a55b41a57eb4 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Mon, 27 Jan 2025 09:37:20 +0000
Subject: [PATCH] refactor: #7153 - For InputOtp and InputText

---
 packages/primevue/package.json                |  3 +-
 .../src/inputotp/style/InputOtpStyle.js       | 24 +-----
 .../src/inputtext/style/InputTextStyle.js     | 78 +------------------
 3 files changed, 4 insertions(+), 101 deletions(-)

diff --git a/packages/primevue/package.json b/packages/primevue/package.json
index 230de4f93..c88c0960d 100644
--- a/packages/primevue/package.json
+++ b/packages/primevue/package.json
@@ -353,10 +353,11 @@
     "dependencies": {
         "@primeuix/styled": "catalog:",
         "@primeuix/utils": "catalog:",
+        "@primeuix/styles": "catalog:",
         "@primevue/core": "workspace:*",
         "@primevue/icons": "workspace:*"
     },
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/primevue/src/inputotp/style/InputOtpStyle.js b/packages/primevue/src/inputotp/style/InputOtpStyle.js
index dc7292657..e1dd8d0af 100644
--- a/packages/primevue/src/inputotp/style/InputOtpStyle.js
+++ b/packages/primevue/src/inputotp/style/InputOtpStyle.js
@@ -1,28 +1,6 @@
+import { theme } from '@primeuix/styles/inputotp';
 import BaseStyle from '@primevue/core/base/style';
 
-const theme = ({ dt }) => `
-.p-inputotp {
-    display: flex;
-    align-items: center;
-    gap: ${dt('inputotp.gap')};
-}
-
-.p-inputotp-input {
-    text-align: center;
-    width: ${dt('inputotp.input.width')};
-}
-
-.p-inputotp-input.p-inputtext-sm {
-    text-align: center;
-    width: ${dt('inputotp.input.sm.width')};
-}
-
-.p-inputotp-input.p-inputtext-lg {
-    text-align: center;
-    width: ${dt('inputotp.input.lg.width')};
-}
-`;
-
 const classes = {
     root: 'p-inputotp p-component',
     pcInputText: 'p-inputotp-input'
diff --git a/packages/primevue/src/inputtext/style/InputTextStyle.js b/packages/primevue/src/inputtext/style/InputTextStyle.js
index fb932d2c1..74f5f2ae6 100644
--- a/packages/primevue/src/inputtext/style/InputTextStyle.js
+++ b/packages/primevue/src/inputtext/style/InputTextStyle.js
@@ -1,82 +1,6 @@
+import { theme } from '@primeuix/styles/inputtext';
 import BaseStyle from '@primevue/core/base/style';
 
-const theme = ({ dt }) => `
-.p-inputtext {
-    font-family: inherit;
-    font-feature-settings: inherit;
-    font-size: 1rem;
-    color: ${dt('inputtext.color')};
-    background: ${dt('inputtext.background')};
-    padding-block: ${dt('inputtext.padding.y')};
-    padding-inline: ${dt('inputtext.padding.x')};
-    border: 1px solid ${dt('inputtext.border.color')};
-    transition: background ${dt('inputtext.transition.duration')}, color ${dt('inputtext.transition.duration')}, border-color ${dt('inputtext.transition.duration')}, outline-color ${dt('inputtext.transition.duration')}, box-shadow ${dt(
-    'inputtext.transition.duration'
-)};
-    appearance: none;
-    border-radius: ${dt('inputtext.border.radius')};
-    outline-color: transparent;
-    box-shadow: ${dt('inputtext.shadow')};
-}
-
-.p-inputtext:enabled:hover {
-    border-color: ${dt('inputtext.hover.border.color')};
-}
-
-.p-inputtext:enabled:focus {
-    border-color: ${dt('inputtext.focus.border.color')};
-    box-shadow: ${dt('inputtext.focus.ring.shadow')};
-    outline: ${dt('inputtext.focus.ring.width')} ${dt('inputtext.focus.ring.style')} ${dt('inputtext.focus.ring.color')};
-    outline-offset: ${dt('inputtext.focus.ring.offset')};
-}
-
-.p-inputtext.p-invalid {
-    border-color: ${dt('inputtext.invalid.border.color')};
-}
-
-.p-inputtext.p-variant-filled {
-    background: ${dt('inputtext.filled.background')};
-}
-
-.p-inputtext.p-variant-filled:enabled:hover {
-    background: ${dt('inputtext.filled.hover.background')};
-}
-
-.p-inputtext.p-variant-filled:enabled:focus {
-    background: ${dt('inputtext.filled.focus.background')};
-}
-
-.p-inputtext:disabled {
-    opacity: 1;
-    background: ${dt('inputtext.disabled.background')};
-    color: ${dt('inputtext.disabled.color')};
-}
-
-.p-inputtext::placeholder {
-    color: ${dt('inputtext.placeholder.color')};
-}
-
-.p-inputtext.p-invalid::placeholder {
-    color: ${dt('inputtext.invalid.placeholder.color')};
-}
-
-.p-inputtext-sm {
-    font-size: ${dt('inputtext.sm.font.size')};
-    padding-block: ${dt('inputtext.sm.padding.y')};
-    padding-inline: ${dt('inputtext.sm.padding.x')};
-}
-
-.p-inputtext-lg {
-    font-size: ${dt('inputtext.lg.font.size')};
-    padding-block: ${dt('inputtext.lg.padding.y')};
-    padding-inline: ${dt('inputtext.lg.padding.x')};
-}
-
-.p-inputtext-fluid {
-    width: 100%;
-}
-`;
-
 const classes = {
     root: ({ instance, props }) => [
         'p-inputtext p-component',