feat: add highlight colors! (#1356)

lit · Jul 19, 2024 · 32e0411 · 32e0411
1 parent b4e94a7
commit 32e0411
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/packages/lit-dev-content/site/css/colors.css b/packages/lit-dev-content/site/css/colors.css
@@ -22,7 +22,6 @@ body.light {
   --sys-color-on-secondary: #ffffff;
   --sys-color-secondary-container: #74fbfc;
   --sys-color-on-secondary-container: #005454;
-  --sys-color-tertiary: #6a5f00;
   --sys-color-tertiary: #005d3e;
   --sys-color-on-tertiary: #ffffff;
   --sys-color-tertiary-container: #00865b;
@@ -84,6 +83,9 @@ body.light {
   --playground-code-gutter-background: var(--playground-code-background);
   --playground-code-cursor-color: var(--sys-color-on-surface);
   --playground-code-selection-background: var(--sys-color-primary-transparent);
+
+  --primary-contrast: oklch(19.37% .006 300.98);
+  --octonary-contrast: oklch(98.81% 0 0);
 }
 
 section.dark,
@@ -169,6 +171,8 @@ body.dark {
   --playground-tab-bar-foreground-color: var(--sys-color-on-surface);
 
   --litdev-dark-border: 1px solid var(--sys-color-outline-variant);
+  --primary-contrast: oklch(98.81% 0 0);
+  --octonary-contrast: oklch(19.37% .006 300.98)
 }
 
 @media (prefers-color-scheme: dark) {
@@ -254,5 +258,7 @@ body.dark {
     --playground-tab-bar-foreground-color: var(--sys-color-on-surface);
 
     --litdev-dark-border: 1px solid var(--sys-color-outline-variant);
+    --primary-contrast: oklch(98.81% 0 0);
+    --octonary-contrast: oklch(19.37% .006 300.98)
   }
 }
diff --git a/packages/lit-dev-content/site/css/global.css b/packages/lit-dev-content/site/css/global.css
@@ -89,4 +89,26 @@ body[code-language-preference="ts"] [code-language]:not([code-language="ts"]) {
 body[code-language-preference="js"] [code-language]:not([code-language="js"]) {
   /* Hide TS content when preference is JS. */
   display: none;
+}
+
+:nth-child(4n+1) {
+  --selection-background: var(--sys-color-primary-container);
+  --selection-color: var(--sys-color-primary-container);
+}
+:nth-child(4n+2) {
+  --selection-background: var(--color-indigo);
+  --selection-color: var(--color-indigo)
+}
+:nth-child(4n+3) {
+  --selection-background: var(--sys-color-tertiary-container);
+  --selection-color: var(--sys-color-tertiary-container)
+}
+:nth-child(4n+4) {
+  --selection-background: var(--sys-color-secondary-container);
+  --selection-color: var(--sys-color-secondary-container)
+}
+
+::selection {
+  background: color-mix(in srgb, var(--selection-background) 10%, var(--octonary-contrast));
+  color: color-mix(in srgb, var(--selection-color) 40%, var(--primary-contrast));
 }