chore: fix form control TW colors

Author: Andrew-Knt

.changeset/sweet-paws-check.md

@@ -0,0 +1,5 @@
+---
+"@vue-interface/form-control": patch
+---
+
+fix TW colors to be backwards compatable

packages/form-control/src/css/form-check.css

@@ -10,7 +10,7 @@
     --form-check-color-adjust: exact;
     --form-check-padding: 0;
     --form-check-transition: background-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-    --form-check-background-color: var(--form-background-color, inherit);
+    --form-check-background-color: var(--form-background-color, #fff);
     --form-check-background-repeat: var(--form-background-repeat, no-repeat);
     --form-check-border-width: var(--form-border-width, 1px);
     --form-check-border-style: var(--form-border-style, solid);

packages/form-control/src/css/form-control.css

@@ -10,7 +10,7 @@
     --form-control-font-weight: var(--form-font-weight, 400);
     --form-control-line-height: var(--form-line-height, 1.5);
     --form-control-font-size: var(--form-font-size, 1rem);
-    --form-control-background-color: var(--form-background-color, inherit);
+    --form-control-background-color: var(--form-background-color, #fff);
     --form-control-background-repeat: var(--form-background-repeat, no-repeat);
     --form-control-background-position: var(--form-background-position, right 0.375rem center);
     --form-control-border-width: var(--form-border-width, 1px);
@@ -28,7 +28,7 @@
 
     /* Focus state */
     --form-control-focus-color: var(--form-focus-color, oklch(37.1% 0 0));
-    --form-control-focus-background-color: var(--form-focus-background-color, inherit);
+    --form-control-focus-background-color: var(--form-focus-background-color, #fff);
     --form-control-focus-border-color: var(--form-focus-border-color, oklch(62.3% 0.214 259.815));
     --form-control-focus-outline: var(--form-focus-outline, 0);
     --form-control-focus-box-shadow-style: var(--form-focus-box-shadow-style, 0 0 0 .2rem);

packages/form-control/src/css/form-select.css

@@ -7,7 +7,7 @@
     --form-select-padding-y: 0.375rem;
     --form-select-background-size: 1em;    
     --form-select-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
-    --form-select-background-color: var(--form-background-color, inherit);
+    --form-select-background-color: var(--form-background-color, #fff);
     --form-select-background-repeat: var(--form-background-repeat, no-repeat);
     --form-select-background-position: var(--form-background-position, right 0.375rem center);
     --form-select-border-width: var(--form-border-width, 1px);
@@ -33,7 +33,7 @@
 
     /* Focus state */
     --form-select-focus-color: var(--form-focus-color, oklch(37.1% 0 0));
-    --form-select-focus-background-color: var(--form-focus-background-color, inherit);
+    --form-select-focus-background-color: var(--form-focus-background-color, #fff);
     --form-select-focus-border-color: var(--form-focus-border-color, oklch(62.3% 0.214 259.815));
     --form-select-focus-outline: var(--form-focus-outline, 0);
     --form-select-focus-box-shadow-style: var(--form-focus-box-shadow-style, 0 0 0 .2rem);

packages/form-control/src/css/form.css

@@ -7,7 +7,7 @@
     --form-font-weight: 400;
     --form-line-height: 1.5;
     --form-font-size: 1rem;
-    --form-background-color: inherit;
+    --form-background-color: var(--color-white, #fff);
     --form-background-repeat: no-repeat;
     --form-background-position: right 0.375rem center;
     --form-border-width: 1px;
@@ -17,20 +17,20 @@
     --form-appearance: none;
 
     /* Dark Mode */
-    --form-dark-background-color: var(--color-neutral-700, oklch(37.1% 0 0));
-    --form-dark-border-color: var(--color-neutral-500, oklch(55.6% 0 0));
+    --form-dark-background-color: var(--color-neutral-800, oklch(37.1% 0 0));
+    --form-dark-border-color: var(--color-neutral-700, oklch(55.6% 0 0));
     --form-dark-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
 
     /* Focus */
     --form-focus-color: var(--color-neutral-700, oklch(37.1% 0 0));
-    --form-focus-background-color: inherit;
+    --form-focus-background-color: var(--color-white, #fff);
     --form-focus-border-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
     --form-focus-outline: 0;
     --form-focus-box-shadow-style: 0 0 0 .2rem;
-    --form-focus-box-shadow-color: var(--color-blue-400, oklch(70.7% 0.165 254.624));
+    --form-focus-box-shadow-color: var(--color-blue-600, oklch(70.7% 0.165 254.624));
 
     --form-focus-dark-color: var(--color-white, oklch(100% 0.00011 271.152));
-    --form-focus-dark-border-color: var(--color-blue-400, oklch(70.7% 0.165 254.624));
+    --form-focus-dark-border-color: var(--color-blue-600, oklch(70.7% 0.165 254.624));
 
     /* Disabled */
     --form-disabled-opacity: 1;