Rework CSS for dark mode

Author: CodeWithDennis

package.json

@@ -2,9 +2,9 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "dev:styles": "postcss resources/css/tree.css -o resources/dist/tree.css --watch",
+        "dev:styles": "postcss resources/css/tree.css -o resources/dist/tree.css && postcss resources/css/custom.css -o resources/dist/custom.css --watch",
         "dev:scripts": "node bin/build.js --dev",
-        "build:styles": "postcss resources/css/tree.css -o resources/dist/tree.css",
+        "build:styles": "postcss resources/css/tree.css -o resources/dist/tree.css && postcss resources/css/custom.css -o resources/dist/custom.css",
         "build:scripts": "node bin/build.js",
         "dev": "npm-run-all --parallel dev:*",
         "build": "npm-run-all build:*"

resources/css/custom.css

@@ -0,0 +1,110 @@
+.treeselect-input {
+    font-size: .875rem;
+    color: rgba(var(--gray-950), var(--tw-text-opacity));
+    transition-duration: 75ms;
+    border-style: none;
+    line-height: 1.5rem;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    background: transparent;
+}
+
+.treeselect {
+    background: white;
+    border-radius: 0.5rem !important;
+    --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-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+    --tw-ring-color: rgba(var(--gray-950), 0.1);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+html.dark .treeselect {
+    --tw-text-opacity: 1;
+    background-color: hsla(0, 0%, 100%, .05);
+    --tw-ring-color: hsla(0, 0%, 100%, .2);
+}
+
+html.dark .treeselect > .treeselect-input {
+    color: rgb(255 255 255/var(--tw-text-opacity)) !important;
+}
+
+.treeselect-input--opened.treeselect-input--bottom {
+    border: inherit;
+    border-radius: inherit;
+}
+
+.treeselect-input__edit {
+    background: transparent;
+}
+
+.treeselect-input__tags-count {
+    margin-left: 9px;
+}
+
+.treeselect-list {
+    font-size: .875rem;
+    line-height: 1.25rem;
+    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, .1), 0 4px 6px -4px rgba(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: none;
+}
+
+.treeselect-input--focused {
+    --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(2px + var(--tw-ring-offset-width)) rgba(var(--primary-600), var(--tw-text-opacity));
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.treeselect-list__item {
+    padding: 1.1rem;
+    border-radius: 0.475rem;
+}
+
+.treeselect-list.treeselect-list--single-select .treeselect-list__item--single-selected {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--gray-50), var(--tw-bg-opacity)) !important;
+}
+
+.treeselect-list__item:hover, .treeselect-list__item--focused {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--gray-50), var(--tw-bg-opacity)) !important;
+}
+
+.treeselect-list.treeselect-list--single-select .treeselect-list__item--single-selected {
+    font-weight: 500;
+}
+
+html.dark .treeselect-list {
+    -tw-bg-opacity: 1;
+    --tw-ring-color: hsla(0, 0%, 100%, .1);
+    background-color: rgba(var(--gray-900), var(--tw-bg-opacity));
+}
+
+html.dark .treeselect-list {
+    -tw-bg-opacity: 1;
+    --tw-ring-color: hsla(0, 0%, 100%, .1);
+    background-color: rgba(var(--gray-900), var(--tw-bg-opacity));
+}
+
+.treeselect-input__edit {
+    border: transparent !important;
+    --tw-ring-color: none !important;
+    --tw-ring-shadow: none !important;
+}
+
+html.dark .treeselect-list.treeselect-list--single-select html.dark.treeselect-list__item--single-selected, html.dark .treeselect-list__item--focused, html.dark .treeselect-list__item:hover, html.dark .treeselect-list.treeselect-list--single-select .treeselect-list__item--single-selected, html.dark .treeselect-list__item--focused, html.dark .treeselect-list__item:hover {
+    background-color: hsla(0, 0%, 100%, .05) !important;
+}