Merge pull request #170 from gehrisandro/fix-css-for-filament-v4

Fix CSS for Filament v4

Author: CodeWithDennis

resources/css/index.css

@@ -2,7 +2,7 @@
 
 .treeselect-input {
     font-size: 0.875rem;
-    color: rgba(var(--gray-950), var(--tw-text-opacity));
+    color: var(--gray-950);
     transition-duration: 75ms;
     border-style: none;
     line-height: 1.5rem;
@@ -12,7 +12,7 @@
 }
 
 html.dark .treeselect > .treeselect-input {
-    color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
+    color: var(--color-white);
 }
 
 .treeselect-input--opened.treeselect-input--bottom {
@@ -29,8 +29,7 @@ html.dark .treeselect > .treeselect-input {
 }
 
 .treeselect-input__edit::placeholder, .treeselect-list__empty {
-    --tw-text-opacity: 1;
-    color: rgba(var(--gray-400), var(--tw-text-opacity));
+    color: var(--color-white);
     cursor: default;
 }
 
@@ -80,22 +79,12 @@ html.dark .treeselect > .treeselect-input {
     margin-top: 0.5rem;
     border-radius: 0.5rem;
     padding: 0.25rem;
-    --tw-bg-opacity: 1;
-    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-        0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
-        0 4px 6px -4px var(--tw-shadow-color);
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-        var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-        calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    --tw-ring-color: rgba(var(--gray-950), 0.05);
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-    border-radius: 0.5rem;
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-        var(--tw-shadow, 0 0 #0000);
+    border-radius: var(--radius-lg);
+    background-color: var(--color-white);
+    --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     border: none;
 }
 
@@ -106,13 +95,11 @@ html.dark .treeselect > .treeselect-input {
 
 .treeselect-list.treeselect-list--single-select
     .treeselect-list__item--single-selected {
-    --tw-bg-opacity: 1;
     background-color: var(--gray-50) !important;
 }
 
 .treeselect-list__item:hover,
 .treeselect-list__item--focused {
-    --tw-bg-opacity: 1;
     background-color: var(--gray-50) !important;
 }
 
@@ -122,13 +109,11 @@ html.dark .treeselect > .treeselect-input {
 }
 
 html.dark .treeselect-list {
-    --tw-bg-opacity: 1;
     --tw-ring-color: hsla(0, 0%, 100%, 0.1);
     background-color: var(--gray-900);
 }
 
 html.dark .treeselect-list {
-    --tw-bg-opacity: 1;
     --tw-ring-color: hsla(0, 0%, 100%, 0.1);
     background-color: var(--gray-900);
 }
@@ -158,34 +143,30 @@ html.dark .treeselect-list__item--checked,
 }
 
 .treeselect-input__tags-element {
-    --tw-bg-opacity: 1;
-    --tw-text-opacity: 1;
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-        var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-        calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    --color-50: var(--primary-50);
+    --color-600: var(--primary-600);
     --tw-ring-inset: inset;
-    --tw-ring-color: rgba(var(--primary-600), 0.1);
+    --tw-ring-color: color-mix(in oklab, var(--color-600) 10%, transparent);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     align-items: center;
-    background-color: rgba(var(--primary-50), var(--tw-bg-opacity));
+    background-color: var(--color-50);
     border-radius: 0.375rem;
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-        var(--tw-shadow, 0 0 #0000);
-    color: rgba(var(--primary-600), var(--tw-text-opacity));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    color: var(--text);
     display: inline-flex;
     font-size: 0.75rem;
-    font-weight: 500;
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
     gap: 0.25rem;
     line-height: 1rem;
     padding: 0.25rem 0.5rem;
     word-break: break-all;
 }
 
 html.dark .treeselect-input__tags-element {
-    --tw-text-opacity: 1;
-    --tw-ring-color: rgba(var(--primary-400), 0.3);
-    background-color: rgba(var(--primary-400), 0.1);
-    color: rgba(var(--primary-400), var(--tw-text-opacity));
+    --tw-ring-color: color-mix(in oklab, var(--color-400) 30%, transparent);
+    background-color: color-mix(in oklab, var(--color-400) 10%, transparent);
+    color: var(--dark-text);
 }
 
 .treeselect-list__item-checkbox-container {
@@ -198,7 +179,7 @@ html.dark .treeselect-input__tags-element {
 .treeselect-list__item--checked .treeselect-list__item-checkbox-container,
 .treeselect-list__item--partial-checked
     .treeselect-list__item-checkbox-container {
-    background-color: rgba(var(--primary-600), var(--tw-text-opacity));
+    background-color: var(--primary-600);
 }
 
 .treeselect-list__item-checkbox {
@@ -213,7 +194,7 @@ html.dark .treeselect-input__tags-element {
 }
 
 html.dark .treeselect-list__item-checkbox-container {
-    border: rgb(255 255 255 / var(--tw-text-opacity));
+    border: var(--color-white);
 }
 
 html.dark .treeselect-list__item-checkbox-container {
@@ -228,11 +209,11 @@ html.dark .treeselect-list__item-checkbox-container {
 }
 
 .treeselect-input__tags-element:hover {
-    background-color: rgba(var(--primary-50), var(--tw-bg-opacity));
+    background-color: var(--primary-50);
 }
 
 .treeselect-input__tags-element:hover .treeselect-input__tags-cross svg {
-    stroke: rgba(var(--gray-950), var(--tw-text-opacity));
+    stroke: var(--gray-950);
 }
 
 html.dark
@@ -243,19 +224,19 @@ html.dark
 }
 
 .treeselect-input__tags-element {
-    color: rgba(var(--primary-600), var(--tw-text-opacity));
+    color: var(--primary-600);
 }
 
 html.dark .treeselect-input__tags-element {
-    color: rgba(var(--primary-400), var(--tw-text-opacity));
+    color: var(--primary-400);
 }
 
 html.dark .treeselect-input__tags-cross svg {
     stroke-width: 3px;
 }
 
 html.dark .treeselect-input__tags-cross svg {
-    stroke: rgb(255 255 255 / var(--tw-text-opacity));
+    stroke: var(--color-white);
     opacity: 0.5;
 }
 
@@ -315,7 +296,7 @@ html.dark
 }
 
 @media (max-width: 768px) {
-    
+
     .treeselect-input,
     .treeselect-list,
     .treeselect-input__tags-element,
@@ -330,4 +311,4 @@ html.dark
 
 [dir='rtl'] .treeselect-input__arrow {
     margin-left: 7px;
-}
+}