🐛 Tailwind Colors are not updating with colorScheme

assets/css/compiled/main.css

@@ -60,7 +60,7 @@ html,
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: Roboto, sans-serif;
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -149,7 +149,7 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
   font-feature-settings: normal;
   /* 2 */
@@ -653,106 +653,6 @@ select {
   outline:1px auto -webkit-focus-ring-color
 }
 
-input[type="range"]::-webkit-slider-thumb {
-  height:1rem;
-  width:1rem;
-  background:#3B71CA;
-  border-radius:9999px;
-  border:0;
-  appearance:none;
-  -moz-appearance:none;
-  -webkit-appearance:none;
-  cursor:pointer
-}
-
-.dark input[type="range"]::-webkit-slider-thumb {
-  background:#8FAEE0
-}
-
-input[type="range"]:disabled::-webkit-slider-thumb {
-  background:rgba(var(--color-neutral-400), <alpha-value>)
-}
-
-input[type="range"]:disabled:focus::-webkit-slider-thumb {
-  background:rgba(var(--color-neutral-400), <alpha-value>)
-}
-
-input[type="range"]:disabled:active::-webkit-slider-thumb {
-  background:rgba(var(--color-neutral-400), <alpha-value>)
-}
-
-.dark input[type="range"]:disabled::-webkit-slider-thumb {
-  background:rgba(var(--color-neutral-500), <alpha-value>)
-}
-
-.dark input[type="range"]:disabled:focus::-webkit-slider-thumb {
-  background:rgba(var(--color-neutral-500), <alpha-value>)
-}
-
-.dark input[type="range"]:disabled:active::-webkit-slider-thumb {
-  background:rgba(var(--color-neutral-500), <alpha-value>)
-}
-
-input[type="range"]::-moz-range-thumb {
-  height:1rem;
-  width:1rem;
-  background:#3B71CA;
-  border-radius:9999px;
-  border:0;
-  appearance:none;
-  -moz-appearance:none;
-  -webkit-appearance:none;
-  cursor:pointer
-}
-
-.dark input[type="range"]::-moz-range-thumb {
-  background:#8FAEE0
-}
-
-input[type="range"]:disabled::-moz-range-thumb {
-  background:rgba(var(--color-neutral-400), <alpha-value>)
-}
-
-.dark input[type="range"]:disabled::-moz-range-thumb {
-  background:rgba(var(--color-neutral-500), <alpha-value>)
-}
-
-input[type="range"]::-moz-range-progress {
-  background:#3061AF
-}
-
-input[type="range"]::-ms-fill-lower {
-  background:#3061AF
-}
-
-.dark input[type="range"]::-moz-range-progress {
-  background:#6590D5
-}
-
-.dark input[type="range"]::-ms-fill-lower {
-  background:#6590D5
-}
-
-input[type="range"]:focus {
-  outline:none
-}
-
-input[type="range"]:focus::-webkit-slider-thumb {
-  background:#3061AF
-}
-
-input[type="range"]:active::-webkit-slider-thumb {
-  background:#285192
-}
-
-.dark input[type="range"]:focus::-webkit-slider-thumb {
-  background:#6590D5
-}
-
-.dark input[type="range"]:active::-webkit-slider-thumb {
-  background:#3061AF
-}
-
 *, ::before, ::after {
   --tw-border-spacing-x:0;
   --tw-border-spacing-y:0;
@@ -909,11 +809,11 @@ input[type="range"]:active::-webkit-slider-thumb {
   color:var(--tw-prose-links);
   text-decoration:none;
   font-weight:500;
-  text-decoration-color:rgb(171 194 232 / 1);
+  text-decoration-color:rgba(var(--color-primary-300), 1);
 }
 
 .prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover {
-  color:rgb(48 97 175 / 1);
+  color:rgba(var(--color-primary-600), 1);
   text-decoration:none;
   border-radius:0.09rem
 }
@@ -1258,17 +1158,17 @@ input[type="range"]:active::-webkit-slider-thumb {
   --tw-prose-body:rgba(var(--color-neutral-700), 1);
   --tw-prose-headings:rgba(var(--color-neutral-800), 1);
   --tw-prose-lead:rgba(var(--color-neutral-500), 1);
-  --tw-prose-links:rgb(48 97 175 / 1);
+  --tw-prose-links:rgba(var(--color-primary-600), 1);
   --tw-prose-bold:rgba(var(--color-neutral-900), 1);
   --tw-prose-counters:rgba(var(--color-neutral-800), 1);
   --tw-prose-bullets:rgba(var(--color-neutral-500), 1);
   --tw-prose-hr:rgba(var(--color-neutral-200), 1);
   --tw-prose-quotes:rgba(var(--color-neutral-700), 1);
-  --tw-prose-quote-borders:rgb(199 215 240 / 1);
+  --tw-prose-quote-borders:rgba(var(--color-primary-200), 1);
   --tw-prose-captions:rgba(var(--color-neutral-500), 1);
   --tw-prose-kbd:#111827;
   --tw-prose-kbd-shadows:17 24 39;
-  --tw-prose-code:rgb(107 117 133 / 1);
+  --tw-prose-code:rgba(var(--color-secondary-700), 1);
   --tw-prose-pre-code:rgba(var(--color-neutral-700), 1);
   --tw-prose-pre-bg:rgba(var(--color-neutral-50), 1);
   --tw-prose-th-borders:rgba(var(--color-neutral-500), 1);
@@ -1276,17 +1176,17 @@ input[type="range"]:active::-webkit-slider-thumb {
   --tw-prose-invert-body:rgba(var(--color-neutral-300), 1);
   --tw-prose-invert-headings:rgba(var(--color-neutral-50), 1);
   --tw-prose-invert-lead:rgba(var(--color-neutral-500), 1);
-  --tw-prose-invert-links:rgb(143 174 224 / 1);
+  --tw-prose-invert-links:rgba(var(--color-primary-400), 1);
   --tw-prose-invert-bold:rgba(var(--color-neutral), 1);
   --tw-prose-invert-counters:rgba(var(--color-neutral-400), 1);
   --tw-prose-invert-bullets:rgba(var(--color-neutral-600), 1);
   --tw-prose-invert-hr:rgba(var(--color-neutral-500), 1);
   --tw-prose-invert-quotes:rgba(var(--color-neutral-200), 1);
-  --tw-prose-invert-quote-borders:rgb(24 48 88 / 1);
+  --tw-prose-invert-quote-borders:rgba(var(--color-primary-900), 1);
   --tw-prose-invert-captions:rgba(var(--color-neutral-400), 1);
   --tw-prose-invert-kbd:#fff;
   --tw-prose-invert-kbd-shadows:255 255 255;
-  --tw-prose-invert-code:rgb(200 204 211 / 1);
+  --tw-prose-invert-code:rgba(var(--color-secondary-400), 1);
   --tw-prose-invert-pre-code:rgba(var(--color-neutral-200), 1);
   --tw-prose-invert-pre-bg:rgba(var(--color-neutral-700), 1);
   --tw-prose-invert-th-borders:rgba(var(--color-neutral-500), 1);
@@ -1408,7 +1308,7 @@ input[type="range"]:active::-webkit-slider-thumb {
 
 .prose :where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
   color:rgba(var(--color-neutral-800), 1);
-  background-color:rgb(48 97 175 / 1);
+  background-color:rgba(var(--color-primary-600), 1);
   padding:0.1rem 0.2rem;
   border-radius:0.25rem
 }
@@ -1422,11 +1322,11 @@ input[type="range"]:active::-webkit-slider-thumb {
 }
 
 .prose :where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  text-decoration-color:rgb(48 97 175 / 1)
+  text-decoration-color:rgba(var(--color-primary-600), 1)
 }
 
 .prose :where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  text-decoration-color:rgb(48 97 175 / 1)
+  text-decoration-color:rgba(var(--color-primary-600), 1)
 }
 
 .prose-invert {
@@ -1455,7 +1355,7 @@ input[type="range"]:active::-webkit-slider-thumb {
 }
 
 .prose-invert :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover {
-  color:rgb(143 174 224 / 1)
+  color:rgba(var(--color-primary-400), 1)
 }
 
 .prose-invert :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
@@ -1464,7 +1364,7 @@ input[type="range"]:active::-webkit-slider-thumb {
 }
 
 .prose-invert :where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  background-color:rgb(143 174 224 / 1)
+  background-color:rgba(var(--color-primary-400), 1)
 }
 
 .prose-invert :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
@@ -1472,11 +1372,11 @@ input[type="range"]:active::-webkit-slider-thumb {
 }
 
 .prose-invert :where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  text-decoration-color:rgb(143 174 224 / 1)
+  text-decoration-color:rgba(var(--color-primary-400), 1)
 }
 
 .prose-invert :where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  text-decoration-color:rgb(143 174 224 / 1)
+  text-decoration-color:rgba(var(--color-primary-400), 1)
 }
 
 .sr-only {
@@ -2444,24 +2344,19 @@ input[type="range"]:active::-webkit-slider-thumb {
   border-color:rgba(var(--color-neutral-300), var(--tw-border-opacity))
 }
 
-.border-primary {
-  --tw-border-opacity:1;
-  border-color:rgb(59 113 202 / var(--tw-border-opacity))
-}
-
 .border-primary-400 {
   --tw-border-opacity:1;
-  border-color:rgb(143 174 224 / var(--tw-border-opacity))
+  border-color:rgba(var(--color-primary-400), var(--tw-border-opacity))
 }
 
 .border-primary-500 {
   --tw-border-opacity:1;
-  border-color:rgb(101 144 213 / var(--tw-border-opacity))
+  border-color:rgba(var(--color-primary-500), var(--tw-border-opacity))
 }
 
 .border-secondary-500 {
   --tw-border-opacity:1;
-  border-color:rgb(179 185 194 / var(--tw-border-opacity))
+  border-color:rgba(var(--color-secondary-500), var(--tw-border-opacity))
 }
 
 .border-transparent {
@@ -2506,22 +2401,22 @@ input[type="range"]:active::-webkit-slider-thumb {
 
 .bg-primary-100 {
   --tw-bg-opacity:1;
-  background-color:rgb(227 235 247 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-100), var(--tw-bg-opacity))
 }
 
 .bg-primary-200 {
   --tw-bg-opacity:1;
-  background-color:rgb(199 215 240 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-200), var(--tw-bg-opacity))
 }
 
 .bg-primary-500 {
   --tw-bg-opacity:1;
-  background-color:rgb(101 144 213 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-500), var(--tw-bg-opacity))
 }
 
 .bg-primary-600 {
   --tw-bg-opacity:1;
-  background-color:rgb(48 97 175 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-600), var(--tw-bg-opacity))
 }
 
 .bg-transparent {
@@ -2551,8 +2446,8 @@ input[type="range"]:active::-webkit-slider-thumb {
 }
 
 .from-primary-500 {
-  --tw-gradient-from:#6590D5 var(--tw-gradient-from-position);
+  --tw-gradient-from:rgba(var(--color-primary-500), 1) var(--tw-gradient-from-position);
-  --tw-gradient-to:rgb(101 144 213 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-to:rgba(var(--color-primary-500), 0) var(--tw-gradient-to-position);
   --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
 }
 
@@ -2569,7 +2464,7 @@ input[type="range"]:active::-webkit-slider-thumb {
 }
 
 .to-secondary-600 {
-  --tw-gradient-to:#848D9C var(--tw-gradient-to-position)
+  --tw-gradient-to:rgba(var(--color-secondary-600), 1) var(--tw-gradient-to-position)
 }
 
 .to-transparent {
@@ -2907,21 +2802,6 @@ input[type="range"]:active::-webkit-slider-thumb {
   color:rgba(var(--color-neutral), var(--tw-text-opacity)) !important
 }
 
-.\!text-primary {
-  --tw-text-opacity:1 !important;
-  color:rgb(59 113 202 / var(--tw-text-opacity)) !important
-}
-
-.text-danger {
-  --tw-text-opacity:1;
-  color:rgb(220 76 100 / var(--tw-text-opacity))
-}
-
-.text-info {
-  --tw-text-opacity:1;
-  color:rgb(84 180 211 / var(--tw-text-opacity))
-}
-
 .text-neutral-200 {
   --tw-text-opacity:1;
   color:rgba(var(--color-neutral-200), var(--tw-text-opacity))
@@ -2962,65 +2842,45 @@ input[type="range"]:active::-webkit-slider-thumb {
   color:rgba(var(--color-neutral-900), var(--tw-text-opacity))
 }
 
-.text-primary {
-  --tw-text-opacity:1;
-  color:rgb(59 113 202 / var(--tw-text-opacity))
-}
-
 .text-primary-100 {
   --tw-text-opacity:1;
-  color:rgb(227 235 247 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-100), var(--tw-text-opacity))
 }
 
 .text-primary-300 {
   --tw-text-opacity:1;
-  color:rgb(171 194 232 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-300), var(--tw-text-opacity))
 }
 
 .text-primary-400 {
   --tw-text-opacity:1;
-  color:rgb(143 174 224 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-400), var(--tw-text-opacity))
 }
 
 .text-primary-500 {
   --tw-text-opacity:1;
-  color:rgb(101 144 213 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-500), var(--tw-text-opacity))
 }
 
 .text-primary-600 {
   --tw-text-opacity:1;
-  color:rgb(48 97 175 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-600), var(--tw-text-opacity))
 }
 
 .text-primary-700 {
   --tw-text-opacity:1;
-  color:rgb(40 81 146 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-700), var(--tw-text-opacity))
 }
 
 .text-primary-800 {
   --tw-text-opacity:1;
-  color:rgb(32 64 117 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-800), var(--tw-text-opacity))
-}
-
-.text-success {
-  --tw-text-opacity:1;
-  color:rgb(20 164 77 / var(--tw-text-opacity))
-}
-
-.text-surface {
-  --tw-text-opacity:1;
-  color:rgb(79 79 79 / var(--tw-text-opacity))
 }
 
 .text-transparent {
   color:transparent
 }
 
-.text-warning {
-  --tw-text-opacity:1;
-  color:rgb(228 161 27 / var(--tw-text-opacity))
-}
-
 .\!no-underline {
   text-decoration-line:none !important
 }
@@ -3034,7 +2894,7 @@ input[type="range"]:active::-webkit-slider-thumb {
 }
 
 .decoration-primary-500 {
-  text-decoration-color:#6590D5
+  text-decoration-color:rgba(var(--color-primary-500), 1)
 }
 
 .underline-offset-auto {
@@ -3087,12 +2947,6 @@ input[type="range"]:active::-webkit-slider-thumb {
   box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 
-.shadow-2 {
-  --tw-shadow:0 0 3px 0 rgba(0,0,0,.07),0 2px 2px 0 rgba(0,0,0,.04);
-  --tw-shadow-colored:0 0 3px 0 var(--tw-shadow-color), 0 2px 2px 0 var(--tw-shadow-color);
-  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
-
 .shadow-2xl {
   --tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);
   --tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);
@@ -3352,7 +3206,7 @@ body:has(#menu-controller:checked) {
   background-color:rgba(var(--color-neutral-200), var(--tw-bg-opacity));
   padding-top:0.25rem;
   padding-bottom:0.25rem;
-  font-family:ui-monospace, monospace;
+  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size:0.875rem;
   line-height:1.25rem;
   --tw-text-opacity:1;
@@ -3372,7 +3226,7 @@ body:has(#menu-controller:checked) {
 .copy-button:active,
 .copy-button:active:hover {
   --tw-bg-opacity:1;
-  background-color:rgb(227 235 247 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-100), var(--tw-bg-opacity))
 }
 
 :is(.dark .copy-button:hover),:is(.dark 
@@ -3380,7 +3234,7 @@ body:has(#menu-controller:checked) {
 .copy-button:active),:is(.dark 
 .copy-button:active:hover) {
   --tw-bg-opacity:1;
-  background-color:rgb(48 97 175 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-600), var(--tw-bg-opacity))
 }
 
 .copy-textarea {
@@ -3464,14 +3318,14 @@ code {
   display:block;
   width:auto;
   --tw-bg-opacity:1;
-  background-color:rgb(227 235 247 / var(--tw-bg-opacity));
+  background-color:rgba(var(--color-primary-100), var(--tw-bg-opacity));
   padding-left:1rem;
   padding-right:1rem
 }
 
 :is(.dark .chroma .hl) {
   --tw-bg-opacity:1;
-  background-color:rgb(24 48 88 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-900), var(--tw-bg-opacity))
 }
 
 .chroma .lntd .hl {
@@ -3531,7 +3385,7 @@ code {
 .chroma .vc,
 .chroma .o {
   --tw-text-opacity:1;
-  color:rgb(48 97 175 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-600), var(--tw-text-opacity))
 }
 
 :is(.dark .chroma .k),:is(.dark 
@@ -3545,7 +3399,7 @@ code {
 .chroma .vc),:is(.dark 
 .chroma .o) {
   --tw-text-opacity:1;
-  color:rgb(171 194 232 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-300), var(--tw-text-opacity))
 }
 
 /* KeywordConstant */
@@ -3553,12 +3407,12 @@ code {
 .chroma .kc {
   font-weight:600;
   --tw-text-opacity:1;
-  color:rgb(200 204 211 / var(--tw-text-opacity))
+  color:rgba(var(--color-secondary-400), var(--tw-text-opacity))
 }
 
 :is(.dark .chroma .kc) {
   --tw-text-opacity:1;
-  color:rgb(179 185 194 / var(--tw-text-opacity))
+  color:rgba(var(--color-secondary-500), var(--tw-text-opacity))
 }
 
 /* KeywordType */
@@ -3595,7 +3449,7 @@ code {
 .chroma .il,
 .chroma .mo {
   --tw-text-opacity:1;
-  color:rgb(200 204 211 / var(--tw-text-opacity))
+  color:rgba(var(--color-secondary-400), var(--tw-text-opacity))
 }
 
 :is(.dark .chroma .kt),:is(.dark 
@@ -3610,7 +3464,7 @@ code {
 .chroma .il),:is(.dark 
 .chroma .mo) {
   --tw-text-opacity:1;
-  color:rgb(132 141 156 / var(--tw-text-opacity))
+  color:rgba(var(--color-secondary-600), var(--tw-text-opacity))
 }
 
 /* Name */
@@ -3626,7 +3480,7 @@ code {
 .chroma .ni,
 .chroma .nl {
   --tw-text-opacity:1;
-  color:rgb(64 70 80 / var(--tw-text-opacity))
+  color:rgba(var(--color-secondary-900), var(--tw-text-opacity))
 }
 
 :is(.dark .chroma .n),:is(.dark 
@@ -3634,7 +3488,7 @@ code {
 .chroma .ni),:is(.dark 
 .chroma .nl) {
   --tw-text-opacity:1;
-  color:rgb(228 230 233 / var(--tw-text-opacity))
+  color:rgba(var(--color-secondary-200), var(--tw-text-opacity))
 }
 
 /* NameAttribute */
@@ -3656,7 +3510,7 @@ code {
 .chroma .py,
 .chroma .nt {
   --tw-text-opacity:1;
-  color:rgb(86 93 107 / var(--tw-text-opacity))
+  color:rgba(var(--color-secondary-800), var(--tw-text-opacity))
 }
 
 :is(.dark .chroma .na),:is(.dark 
@@ -3666,7 +3520,7 @@ code {
 .chroma .py),:is(.dark 
 .chroma .nt) {
   --tw-text-opacity:1;
-  color:rgb(214 217 222 / var(--tw-text-opacity))
+  color:rgba(var(--color-secondary-300), var(--tw-text-opacity))
 }
 
 /* NameConstant */
@@ -3680,26 +3534,26 @@ code {
 .chroma .vg {
   font-weight:600;
   --tw-text-opacity:1;
-  color:rgb(200 204 211 / var(--tw-text-opacity))
+  color:rgba(var(--color-secondary-400), var(--tw-text-opacity))
 }
 
 :is(.dark .chroma .no),:is(.dark 
 .chroma .ne),:is(.dark 
 .chroma .vg) {
   --tw-text-opacity:1;
-  color:rgb(179 185 194 / var(--tw-text-opacity))
+  color:rgba(var(--color-secondary-500), var(--tw-text-opacity))
 }
 
 /* NameFunction */
 
 .chroma .nf {
   --tw-text-opacity:1;
-  color:rgb(132 141 156 / var(--tw-text-opacity))
+  color:rgba(var(--color-secondary-600), var(--tw-text-opacity))
 }
 
 :is(.dark .chroma .nf) {
   --tw-text-opacity:1;
-  color:rgb(179 185 194 / var(--tw-text-opacity))
+  color:rgba(var(--color-secondary-500), var(--tw-text-opacity))
 }
 
 /* Literal */
@@ -3751,7 +3605,7 @@ code {
 .chroma .go,
 .chroma .gp {
   --tw-text-opacity:1;
-  color:rgb(32 64 117 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-800), var(--tw-text-opacity))
 }
 
 :is(.dark .chroma .l),:is(.dark 
@@ -3771,7 +3625,7 @@ code {
 .chroma .go),:is(.dark 
 .chroma .gp) {
   --tw-text-opacity:1;
-  color:rgb(143 174 224 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-400), var(--tw-text-opacity))
 }
 
 /* LiteralStringEscape */
@@ -3779,12 +3633,12 @@ code {
 .chroma .se {
   font-weight:600;
   --tw-text-opacity:1;
-  color:rgb(200 204 211 / var(--tw-text-opacity))
+  color:rgba(var(--color-secondary-400), var(--tw-text-opacity))
 }
 
 :is(.dark .chroma .se) {
   --tw-text-opacity:1;
-  color:rgb(179 185 194 / var(--tw-text-opacity))
+  color:rgba(var(--color-secondary-500), var(--tw-text-opacity))
 }
 
 /* LiteralStringRegex */
@@ -3795,13 +3649,13 @@ code {
 .chroma .ss {
   font-weight:600;
   --tw-text-opacity:1;
-  color:rgb(32 64 117 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-800), var(--tw-text-opacity))
 }
 
 :is(.dark .chroma .sr),:is(.dark 
 .chroma .ss) {
   --tw-text-opacity:1;
-  color:rgb(143 174 224 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-400), var(--tw-text-opacity))
 }
 
 /* OperatorWord */
@@ -3809,12 +3663,12 @@ code {
 .chroma .ow {
   font-weight:600;
   --tw-text-opacity:1;
-  color:rgb(143 174 224 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-400), var(--tw-text-opacity))
 }
 
 :is(.dark .chroma .ow) {
   --tw-text-opacity:1;
-  color:rgb(48 97 175 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-600), var(--tw-text-opacity))
 }
 
 /* Comment */
@@ -4813,7 +4667,7 @@ pre {
 }
 
 :is(.dark .dark\:prose-invert) :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover {
-  color:rgb(143 174 224 / 1)
+  color:rgba(var(--color-primary-400), 1)
 }
 
 :is(.dark .dark\:prose-invert) :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
@@ -4822,7 +4676,7 @@ pre {
 }
 
 :is(.dark .dark\:prose-invert) :where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  background-color:rgb(143 174 224 / 1)
+  background-color:rgba(var(--color-primary-400), 1)
 }
 
 :is(.dark .dark\:prose-invert) :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
@@ -4830,11 +4684,11 @@ pre {
 }
 
 :is(.dark .dark\:prose-invert) :where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  text-decoration-color:rgb(143 174 224 / 1)
+  text-decoration-color:rgba(var(--color-primary-400), 1)
 }
 
 :is(.dark .dark\:prose-invert) :where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  text-decoration-color:rgb(143 174 224 / 1)
+  text-decoration-color:rgba(var(--color-primary-400), 1)
 }
 
 .after\:clear-both::after {
@@ -4866,22 +4720,22 @@ pre {
 
 .hover\:\!bg-primary-500:hover {
   --tw-bg-opacity:1 !important;
-  background-color:rgb(101 144 213 / var(--tw-bg-opacity)) !important
+  background-color:rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important
 }
 
 .hover\:bg-primary-100:hover {
   --tw-bg-opacity:1;
-  background-color:rgb(227 235 247 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-100), var(--tw-bg-opacity))
 }
 
 .hover\:bg-primary-500:hover {
   --tw-bg-opacity:1;
-  background-color:rgb(101 144 213 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-500), var(--tw-bg-opacity))
 }
 
 .hover\:bg-primary-600:hover {
   --tw-bg-opacity:1;
-  background-color:rgb(48 97 175 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-600), var(--tw-bg-opacity))
 }
 
 .hover\:text-neutral:hover {
@@ -4891,22 +4745,22 @@ pre {
 
 .hover\:text-primary-400:hover {
   --tw-text-opacity:1;
-  color:rgb(143 174 224 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-400), var(--tw-text-opacity))
 }
 
 .hover\:text-primary-500:hover {
   --tw-text-opacity:1;
-  color:rgb(101 144 213 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-500), var(--tw-text-opacity))
 }
 
 .hover\:text-primary-600:hover {
   --tw-text-opacity:1;
-  color:rgb(48 97 175 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-600), var(--tw-text-opacity))
 }
 
 .hover\:text-primary-700:hover {
   --tw-text-opacity:1;
-  color:rgb(40 81 146 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-700), var(--tw-text-opacity))
 }
 
 .hover\:underline:hover {
@@ -4918,7 +4772,7 @@ pre {
 }
 
 .hover\:decoration-primary-400:hover {
-  text-decoration-color:#8FAEE0
+  text-decoration-color:rgba(var(--color-primary-400), 1)
 }
 
 .hover\:decoration-2:hover {
@@ -4945,7 +4799,7 @@ pre {
 
 .focus\:bg-primary-100:focus {
   --tw-bg-opacity:1;
-  background-color:rgb(227 235 247 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-100), var(--tw-bg-opacity))
 }
 
 .focus\:no-underline:focus {
@@ -4975,12 +4829,12 @@ pre {
 
 .group:hover .group-hover\:text-primary-300 {
   --tw-text-opacity:1;
-  color:rgb(171 194 232 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-300), var(--tw-text-opacity))
 }
 
 .group:hover .group-hover\:text-primary-600 {
   --tw-text-opacity:1;
-  color:rgb(48 97 175 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-600), var(--tw-text-opacity))
 }
 
 .group:hover .group-hover\:underline {
@@ -4988,7 +4842,7 @@ pre {
 }
 
 .group:hover .group-hover\:decoration-primary-500 {
-  text-decoration-color:#6590D5
+  text-decoration-color:rgba(var(--color-primary-500), 1)
 }
 
 .group:hover .group-hover\:opacity-100 {
@@ -5061,11 +4915,6 @@ pre {
   border-style:solid
 }
 
-.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:border-primary {
-  --tw-border-opacity:1;
-  border-color:rgb(59 113 202 / var(--tw-border-opacity))
-}
-
 .group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:border-t-transparent {
   border-top-color:transparent
 }
@@ -5074,24 +4923,6 @@ pre {
   border-top-color:transparent
 }
 
-.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:shadow-notch-1 {
-  --tw-shadow:-1px 0 0 #3b71ca, 0 1px 0 0 #3b71ca, 0 -1px 0 0 #3b71ca;
-  --tw-shadow-colored:-1px 0 0 var(--tw-shadow-color), 0 1px 0 0 var(--tw-shadow-color), 0 -1px 0 0 var(--tw-shadow-color);
-  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
-
-.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:shadow-notch-2 {
-  --tw-shadow:0 1px 0 0 #3b71ca;
-  --tw-shadow-colored:0 1px 0 0 var(--tw-shadow-color);
-  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
-
-.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:shadow-notch-3 {
-  --tw-shadow:1px 0 0 #3b71ca, 0 -1px 0 0 #3b71ca, 0 1px 0 0 #3b71ca;
-  --tw-shadow-colored:1px 0 0 var(--tw-shadow-color), 0 -1px 0 0 var(--tw-shadow-color), 0 1px 0 0 var(--tw-shadow-color);
-  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
-
 @media (prefers-reduced-motion: reduce) {
   .motion-reduce\:transition-none {
     transition-property:none
@@ -5123,12 +4954,12 @@ pre {
 
 :is(.dark .dark\:border-primary-300) {
   --tw-border-opacity:1;
-  border-color:rgb(171 194 232 / var(--tw-border-opacity))
+  border-color:rgba(var(--color-primary-300), var(--tw-border-opacity))
 }
 
 :is(.dark .dark\:border-primary-600) {
   --tw-border-opacity:1;
-  border-color:rgb(48 97 175 / var(--tw-border-opacity))
+  border-color:rgba(var(--color-primary-600), var(--tw-border-opacity))
 }
 
 :is(.dark .dark\:bg-neutral-400) {
@@ -5161,27 +4992,22 @@ pre {
 
 :is(.dark .dark\:bg-primary-300) {
   --tw-bg-opacity:1;
-  background-color:rgb(171 194 232 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-300), var(--tw-bg-opacity))
 }
 
 :is(.dark .dark\:bg-primary-400) {
   --tw-bg-opacity:1;
-  background-color:rgb(143 174 224 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-400), var(--tw-bg-opacity))
 }
 
 :is(.dark .dark\:bg-primary-800) {
   --tw-bg-opacity:1;
-  background-color:rgb(32 64 117 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-800), var(--tw-bg-opacity))
 }
 
 :is(.dark .dark\:bg-primary-900) {
   --tw-bg-opacity:1;
-  background-color:rgb(24 48 88 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-900), var(--tw-bg-opacity))
-}
-
-:is(.dark .dark\:bg-surface-dark) {
-  --tw-bg-opacity:1;
-  background-color:rgb(66 66 66 / var(--tw-bg-opacity))
 }
 
 :is(.dark .dark\:from-neutral-800) {
@@ -5191,8 +5017,8 @@ pre {
 }
 
 :is(.dark .dark\:from-primary-600) {
-  --tw-gradient-from:#3061AF var(--tw-gradient-from-position);
+  --tw-gradient-from:rgba(var(--color-primary-600), 1) var(--tw-gradient-from-position);
-  --tw-gradient-to:rgb(48 97 175 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-to:rgba(var(--color-primary-600), 0) var(--tw-gradient-to-position);
   --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
 }
 
@@ -5201,7 +5027,7 @@ pre {
 }
 
 :is(.dark .dark\:to-secondary-800) {
-  --tw-gradient-to:#565D6B var(--tw-gradient-to-position)
+  --tw-gradient-to:rgba(var(--color-secondary-800), 1) var(--tw-gradient-to-position)
 }
 
 :is(.dark .dark\:text-neutral) {
@@ -5246,12 +5072,12 @@ pre {
 
 :is(.dark .dark\:text-primary-200) {
   --tw-text-opacity:1;
-  color:rgb(199 215 240 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-200), var(--tw-text-opacity))
 }
 
 :is(.dark .dark\:text-primary-400) {
   --tw-text-opacity:1;
-  color:rgb(143 174 224 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-400), var(--tw-text-opacity))
 }
 
 :is(.dark .dark\:opacity-60) {
@@ -5260,17 +5086,17 @@ pre {
 
 :is(.dark .dark\:hover\:\!bg-primary-700:hover) {
   --tw-bg-opacity:1 !important;
-  background-color:rgb(40 81 146 / var(--tw-bg-opacity)) !important
+  background-color:rgba(var(--color-primary-700), var(--tw-bg-opacity)) !important
 }
 
 :is(.dark .dark\:hover\:bg-primary-400:hover) {
   --tw-bg-opacity:1;
-  background-color:rgb(143 174 224 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-400), var(--tw-bg-opacity))
 }
 
 :is(.dark .dark\:hover\:bg-primary-900:hover) {
   --tw-bg-opacity:1;
-  background-color:rgb(24 48 88 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-900), var(--tw-bg-opacity))
 }
 
 :is(.dark .dark\:hover\:text-neutral-800:hover) {
@@ -5280,12 +5106,12 @@ pre {
 
 :is(.dark .dark\:hover\:text-primary-400:hover) {
   --tw-text-opacity:1;
-  color:rgb(143 174 224 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-400), var(--tw-text-opacity))
 }
 
 :is(.dark .dark\:focus\:bg-primary-900:focus) {
   --tw-bg-opacity:1;
-  background-color:rgb(24 48 88 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-primary-900), var(--tw-bg-opacity))
 }
 
 :is(.dark .group:hover .dark\:group-hover\:text-neutral-700) {
@@ -5295,7 +5121,7 @@ pre {
 
 :is(.dark .group:hover .dark\:group-hover\:text-primary-400) {
   --tw-text-opacity:1;
-  color:rgb(143 174 224 / var(--tw-text-opacity))
+  color:rgba(var(--color-primary-400), var(--tw-text-opacity))
 }
 
 @media (min-width: 640px) {

tailwind.config.js

@@ -176,7 +176,6 @@ module.exports = {
   },
   plugins: [
     require("@tailwindcss/typography"),
-    require('@tailwindcss/forms'),
+    require('@tailwindcss/forms')
-    require("tw-elements/plugin.cjs"),
   ],
 };