feat: (otp-input) Add props to control background color.

Author: 3m1n3nc3

packages/otp-input/src/components/otp-input.vue

@@ -11,7 +11,9 @@
       '--ci-border-radius': rounded || borderRadius ? borderRadius ?? '5px' : undefined,
       '--ci-color-primary': primaryColor,
       '--ci-color-secondary': secondaryColor,
-      '--ci-text-color-active': textColorActive ?? secondaryColor
+      '--ci-text-color-active': textColorActive ?? secondaryColor,
+      '--ci-background': backgroundColor,
+      '--ci-background-active': backgroundColorActive
     }"
   >
     <slot>

packages/otp-input/src/styles/main.scss

@@ -9,6 +9,8 @@
   --ci-text-color: var(--ci-color-primary);
   --ci-font-size: 30px;
   --ci-font-family: 'Anton', sans-serif;
+  --ci-background: transparent;
+  --ci-background-active: transparent;
   --ci-gap: 10px;
   &.disabled {
     opacity: 0.5;
@@ -79,10 +81,12 @@
     box-sizing: border-box;
     appearance: initial;
     -webkit-appearance: initial;
+    background-color: var(--ci-background);
     &:focus {
       outline: none;
       color: var(--ci-text-color-active);
       caret-color: var(--ci-text-color-active);
+      background-color: var(--ci-background-active);
     }
   }
   &.border-b {

packages/otp-input/types.ts

@@ -70,6 +70,18 @@ export interface OtpInputType {
    * @default #000
    */
   textColorActive?: string | undefined
+  /**
+   * Sets the background color for the input boxes
+   *
+   * @default transparent
+   */
+  backgroundColor?: string | undefined
+  /**
+   * Sets the background color for the focused input box
+   *
+   * @default transparent
+   */
+  backgroundColorActive?: string | undefined
   /**
    * The position of the component
    * [