fixes inner shadow highlights not matching data-theme

argyleink · Mar 6, 2024 · 63143f0 · 63143f0
1 parent c2a866b
commit 63143f0
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 2 deletions.
diff --git a/docsite/index.html b/docsite/index.html
@@ -119,7 +119,7 @@ <h1><span>CSS</span> <span>variables.</span></h1>
  </li>
  </ul>
  <small>
- v1.6.20
+ v1.6.21
  <span class="license">
  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
  <path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path>

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
  "name": "open-props",
  "author": "Adam Argyle",
  "license": "MIT",
- "version": "1.6.20",
+ "version": "1.6.21",
  "repository": {
  "type": "git",
  "url": "https://github.com/argyleink/open-props"

diff --git a/src/extra/normalize.dark.css b/src/extra/normalize.dark.css
@@ -13,6 +13,7 @@
 :where(html) {
  --shadow-strength: 10%;
  --shadow-color: 220 40% 2%;
+ --inner-shadow-highlight: inset 0 -.5px 0 0 #fff1, inset 0 .5px 0 0 #0007;
 }
 
 ::placeholder {

diff --git a/src/extra/normalize.light.css b/src/extra/normalize.light.css
@@ -5,4 +5,5 @@
 :where(html) {
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
+ --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 #0001;
 }
diff --git a/src/extra/theme.dark.switch.css b/src/extra/theme.dark.switch.css
@@ -21,6 +21,7 @@
  --scrollthumb-color: var(--gray-6);
  --shadow-strength: 10%;
  --shadow-color: 220 40% 2%;
+ --inner-shadow-highlight: inset 0 -.5px 0 0 #fff1, inset 0 .5px 0 0 #0007;
 
  & :where(dialog) {
  background-color: var(--surface-2);

diff --git a/src/extra/theme.light.switch.css b/src/extra/theme.light.switch.css
@@ -21,6 +21,7 @@
  --scrollthumb-color: var(--gray-7);
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
+ --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 #0001;
 
  @media (--HDcolor) {
  @supports (color: color(display-p3 0 0 0)) {