Remove unused CSS variables in shiki global styles, remove box shadows in uppy core styles

Author: webstackdev

.vscode/settings.json

@@ -119,6 +119,7 @@
     "Southam",
     "spriter",
     "squoosh",
+    "srgb",
     "startdt",
     "tanabata",
     "TIMESTAMPTZ",

_TODO.md

@@ -63,3 +63,20 @@ https://vercel.com/kevin-browns-projects-dd474f73/astro-webstackbuilders-com/ai-
 We have E2E errors again testimonials slide on mobile chrome and safari. I think the problem is that we are pausing carousels when part of the carousel is outside of the viewport, and the testimonials are too large to display on mobile without being off viewport.
 
 `test/e2e/specs/04-components/testimonials.spec.ts`:244:3 › Testimonials Component › @ready testimonials auto-rotate changes slide index
+
+## Improve print layout by hiding header and footer for articles, add tracking
+
+```typescript
+window.addEventListener('beforeprint', (event) => {
+  console.log('Before print dialog opens, run this script.')
+  // Example: change content or hide elements
+  document.getElementById('hide-on-print').style.display = 'none'
+})
+
+window.addEventListener('afterprint', (event) => {
+  console.log('After print dialog closes, run this script to revert changes.')
+  // Example: revert changes
+  document.getElementById('hide-on-print').style.display = ''
+  // You can also use this event to send an AJAX request to a server for print tracking.
+})
+```

src/components/Forms/Contact/uppy-core.css

@@ -64,7 +64,7 @@
 
 .uppy-c-textInput:focus {
   border-color: color-mix(in srgb, var(--color-secondary) 60%, transparent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 15%, transparent);
+  box-shadow: none;
   outline: none;
 }
 
@@ -149,7 +149,7 @@
 }
 
 [data-uppy-theme="dark"] .uppy-c-btn-primary:focus {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 85%, transparent);
+  box-shadow: none;
 }
 
 .uppy-c-btn-primary.uppy-c-btn--disabled {
@@ -170,7 +170,7 @@
 }
 
 .uppy-c-btn-link:focus {
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 25%, transparent);
+  box-shadow: none;
   outline: none;
 }
 

src/styles/shiki.css

@@ -4,39 +4,20 @@
  * Supports dual themes configured in astro.config.mjs:
  * - github-light for light mode
  * - github-dark for dark mode
- *
- * The --shiki-theme CSS variable is available but Astro's Shiki integration
- * automatically handles theme switching via .shiki-light/.shiki-dark classes.
  */
 
-/*
-each line is wrapped in a <span class='line'> so line number
-can be done like this, here with a different starting number:
-<code style="--start: 13;">...</code>
-*/
-
-/** CodeTabs custom CSS variables */
-:root {
-  --astro-code-color-text: white;
-  --astro-code-color-background: black;
-  --astro-code-token-constant: plum;
-  --astro-code-token-string: purple;
-  --astro-code-token-comment: tomato;
-  --astro-code-token-keyword: darkslategrey;
-  --astro-code-token-parameter: coral;
-  --astro-code-token-function: green;
-  --astro-code-token-string-expression: chartreuse;
-  --astro-code-token-punctuation: gray;
-  --astro-code-token-link: firebrick;
-}
-
+/**
+ * Each line is wrapped in a <span class='line'> so line number can be done
+ * like this, here with a different starting number:
+ * <code style="--start: 13;">...</code>
+ */
 code {
 	counter-increment: step calc(var(--start, 1) - 1);
 	counter-reset: step;
 }
 
 code .line::before {
-  color: rgb(115 138 148 / 40%);
+  color: rgb(from var(--color-content-active) r g b / 40%);
   content: counter(step);
   counter-increment: step;
   display: inline-block;