semantic color naming

src/style.css

@@ -435,22 +435,22 @@ video {
 }
 
 :root {
-  --color0: 40 42 54;
-  --color1: 68 71 90;
-  --color2: 248 248 242;
-  --color3: 98 114 164;
-  --color4: 139 233 253;
-  --color5: 80 250 123;
-  --color6: 255 184 108;
-  --color7: 255 121 198;
-  --color8: 189 147 249;
-  --color9: 255 85 85;
-  --color10: 241 250 140;
-  --color11: 139 233 253;
-  --color12: 80 250 123;
-  --color13: 255 184 108;
-  --color14: 255 121 198;
-  --color15: 189 147 249;
+  --black: 40 42 54;
+  --red: 68 71 90;
+  --green: 248 248 242;
+  --yellow: 98 114 164;
+  --blue: 139 233 253;
+  --magenta: 80 250 123;
+  --cyan: 255 184 108;
+  --white: 255 121 198;
+  --brightblack: 189 147 249;
+  --brightred: 255 85 85;
+  --brightgreen: 241 250 140;
+  --brightyellow: 139 233 253;
+  --brightblue: 80 250 123;
+  --brightmagenta: 255 184 108;
+  --brightcyan: 255 121 198;
+  --brightwhite: 189 147 249;
   --background: 40 42 54;
   --selection_foreground: 68 71 90;
   --cursor: 139 233 253;
@@ -1151,41 +1151,23 @@ video {
   background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
 }
 
-.bg-color5 {
+.bg-selection_foreground {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--color5) / var(--tw-bg-opacity));
+  background-color: rgb(var(--selection_foreground) / var(--tw-bg-opacity));
 }
 
-.bg-color6 {
+.bg-black {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--color6) / var(--tw-bg-opacity));
+  background-color: rgb(var(--black) / var(--tw-bg-opacity));
 }
 
-.bg-color3 {
+.bg-selection_background {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--color3) / var(--tw-bg-opacity));
+  background-color: rgb(var(--selection_background) / var(--tw-bg-opacity));
 }
 
-.bg-color2 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--color2) / var(--tw-bg-opacity));
-}
-
-.bg-color4 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--color4) / var(--tw-bg-opacity));
-}
-
-.bg-\[--var\(color1\)\] {
-  background-color: var(--var(color1));
-}
-
-.fill-color2 {
-  fill: rgb(var(--color2) / 1);
-}
-
-.fill-color3 {
-  fill: rgb(var(--color3) / 1);
+.fill-background {
+  fill: rgb(var(--background) / 1);
 }
 
 .p-1 {
@@ -1379,11 +1361,6 @@ video {
   line-height: 1rem;
 }
 
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -1412,29 +1389,29 @@ video {
   line-height: 1.5;
 }
 
-.text-color5 {
+.text-background {
   --tw-text-opacity: 1;
-  color: rgb(var(--color5) / var(--tw-text-opacity));
+  color: rgb(var(--background) / var(--tw-text-opacity));
 }
 
-.text-color1 {
+.text-black {
   --tw-text-opacity: 1;
-  color: rgb(var(--color1) / var(--tw-text-opacity));
+  color: rgb(var(--black) / var(--tw-text-opacity));
 }
 
-.text-color3 {
+.text-red {
   --tw-text-opacity: 1;
-  color: rgb(var(--color3) / var(--tw-text-opacity));
+  color: rgb(var(--red) / var(--tw-text-opacity));
 }
 
-.text-color2 {
+.text-selection_foreground {
   --tw-text-opacity: 1;
-  color: rgb(var(--color2) / var(--tw-text-opacity));
+  color: rgb(var(--selection_foreground) / var(--tw-text-opacity));
 }
 
-.text-color6 {
+.text-white {
   --tw-text-opacity: 1;
-  color: rgb(var(--color6) / var(--tw-text-opacity));
+  color: rgb(var(--white) / var(--tw-text-opacity));
 }
 
 .underline {
@@ -1449,14 +1426,14 @@ video {
   text-underline-offset: 4px;
 }
 
-.placeholder-color2::-moz-placeholder {
+.placeholder-background::-moz-placeholder {
   --tw-placeholder-opacity: 1;
-  color: rgb(var(--color2) / var(--tw-placeholder-opacity));
+  color: rgb(var(--background) / var(--tw-placeholder-opacity));
 }
 
-.placeholder-color2::placeholder {
+.placeholder-background::placeholder {
   --tw-placeholder-opacity: 1;
-  color: rgb(var(--color2) / var(--tw-placeholder-opacity));
+  color: rgb(var(--background) / var(--tw-placeholder-opacity));
 }
 
 .opacity-50 {
@@ -1498,6 +1475,35 @@ video {
   transition-duration: 200ms;
 }
 
+.hover\:bg-background:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--background) / var(--tw-bg-opacity));
+}
+
+.hover\:bg-selection_foreground:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--selection_foreground) / var(--tw-bg-opacity));
+}
+
+.hover\:bg-white:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--white) / var(--tw-bg-opacity));
+}
+
+.hover\:bg-brightwhite:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--brightwhite) / var(--tw-bg-opacity));
+}
+
+.hover\:fill-black:hover {
+  fill: rgb(var(--black) / 1);
+}
+
+.hover\:text-black:hover {
+  --tw-text-opacity: 1;
+  color: rgb(var(--black) / var(--tw-text-opacity));
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;