feat(dark-mode): squash me

borisdiakur · borisdiakur · commit 2cab10dc86b9 · 2023-05-05T10:14:08.000+02:00
diff --git a/src/docs/components/docs-color/docs-color.css b/src/docs/components/docs-color/docs-color.css
@@ -1,5 +1,5 @@
 .docs-color {
-  background: var(--ld-layer-2)
+  background: var(--ld-layer)
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g><rect height="12" width="12" fill="black" fill-opacity="0.2"></rect><rect height="12" width="12" y="12" x="12" fill="black" fill-opacity="0.2"></rect></g></svg>');
   border-color: var(--ld-col-neutral-100);
   display: flex;
@@ -31,7 +31,7 @@
 
 .docs-color--dark {
   color: var(--ld-col-neutral-010);
-  background: var(--ld-layer-2)
+  background: var(--ld-layer)
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g><rect height="12" width="12" fill="white" fill-opacity="0.2"></rect><rect height="12" width="12" y="12" x="12" fill="white" fill-opacity="0.2"></rect></g></svg>');
 
   .docs-copy-to-cb {
diff --git a/src/docs/components/docs-edit-on-github/docs-edit-on-github.css b/src/docs/components/docs-edit-on-github/docs-edit-on-github.css
@@ -10,9 +10,9 @@
     --ld-button-border-bottom-left-radius: calc(
       var(--ld-br-m) + var(--ld-sp-2)
     );
-    background-color: var(--ld-layer-2);
+    background-color: var(--ld-layer);
     color: var(--ld-col-neutral-900);
-    box-shadow: inset 0 0 0 2px var(--ld-layer-1);
+    box-shadow: inset 0 0 0 2px var(--ld-layer);
 
     &:focus:focus-visible {
       color: var(--ld-col-neutral-900);
diff --git a/src/docs/components/docs-example/docs-example.css b/src/docs/components/docs-example/docs-example.css
@@ -3,7 +3,7 @@
 }
 
 .docs-example__code {
-  background-color: var(--ld-layer-0);
+  background-color: var(--ld-layer);
   overflow: hidden;
   display: none;
   border-bottom-left-radius: var(--ld-br-l);
@@ -21,7 +21,7 @@
   overflow: auto;
   display: flex;
   width: 100%;
-  background-color: var(--ld-layer-2);
+  background-color: var(--ld-layer);
   border-bottom-left-radius: var(--ld-br-l);
   border-bottom-right-radius: var(--ld-br-l);
 }
@@ -54,7 +54,7 @@
 }
 
 .docs-example__show {
-  background-color: var(--ld-layer-0);
+  background-color: var(--ld-layer);
   color: var(--ld-col-neutral-900);
   border-top-left-radius: var(--ld-br-l);
   border-top-right-radius: var(--ld-br-l);
@@ -114,7 +114,7 @@
 }
 
 .docs-example__show--light {
-  background-color: var(--ld-layer-0);
+  background-color: var(--ld-layer);
 }
 
 .docs-example--code-visible {
diff --git a/src/docs/components/docs-example/docs-example.tsx b/src/docs/components/docs-example/docs-example.tsx
@@ -134,7 +134,7 @@ export class DocsExample {
       this.codeType === 'react' && 'docs-example--react-component',
     ]
 
-    let clShow = 'docs-example__show'
+    let clShow = 'docs-example__show ld-layer-0'
     if (this.themable && this.currentTheme) {
       clShow += ' ld-theme-' + this.currentTheme.toLowerCase()
     }
diff --git a/src/docs/components/docs-icon/docs-icon.css b/src/docs/components/docs-icon/docs-icon.css
@@ -14,7 +14,7 @@
   width: 100%;
 
   &:hover {
-    background: var(--ld-layer-2);
+    background: var(--ld-layer);
     color: var(--ld-col-neutral-900);
     height: calc(100% + var(--ld-sp-16));
     margin: calc(var(--ld-sp-8) * -1);
diff --git a/src/docs/components/docs-main/docs-main.css b/src/docs/components/docs-main/docs-main.css
@@ -28,7 +28,7 @@
     > [id^='methods'] ~ h3 {
       code {
         box-shadow: inset 0 0 0 var(--ld-sp-1) var(--ld-col-neutral-100);
-        background-color: var(--ld-layer-1);
+        background-color: var(--ld-layer);
       }
     }
 
diff --git a/src/docs/components/docs-nav/docs-nav.css b/src/docs/components/docs-nav/docs-nav.css
@@ -68,7 +68,7 @@
   pointer-events: none;
 
   &::before {
-    background-color: var(--ld-layer-2);
+    background-color: var(--ld-layer);
     content: '';
     position: fixed;
     height: 100%;
@@ -94,7 +94,7 @@
 }
 
 .docs-nav__content {
-  background-color: var(--ld-layer-2);
+  background-color: var(--ld-layer);
   box-shadow: var(--ld-sp-1) 0 0 0 var(--ld-col-neutral-100);
   pointer-events: all;
   bottom: 0;
diff --git a/src/docs/components/docs-toc/docs-toc.css b/src/docs/components/docs-toc/docs-toc.css
@@ -7,7 +7,7 @@
   padding: var(--ld-sp-8) var(--ld-sp-24) var(--ld-sp-24) 0;
 
   &::before {
-    background-color: var(--ld-layer-0);
+    background-color: var(--ld-layer);
     content: '';
     position: absolute;
     left: 0;
diff --git a/src/docs/components/docs-topbar/docs-topbar.css b/src/docs/components/docs-topbar/docs-topbar.css
@@ -58,7 +58,7 @@
 }
 
 .docs-topbar__headline {
-  color: var(--ld-layer-2);
+  color: var(--ld-layer);
   font-family: var(--ld-font-body);
 
   b {
diff --git a/src/docs/components/docs-topbar/docs-topbar.tsx b/src/docs/components/docs-topbar/docs-topbar.tsx
@@ -82,7 +82,7 @@ export class DocsTopbar {
                 fill-rule="evenodd"
                 clip-rule="evenodd"
                 d="M11.9633 0C5.3578 0 0 5.50719 0 12.2969C0 17.7286 3.44954 22.3305 8.14679 23.9902C8.73394 24.0657 8.95413 23.6885 8.95413 23.3867C8.95413 23.0849 8.95413 22.3305 8.95413 21.2744C5.65138 22.0288 4.91743 19.6147 4.91743 19.6147C4.40367 18.1813 3.59633 17.8041 3.59633 17.8041C2.49541 17.0497 3.66972 17.0497 3.66972 17.0497C4.84404 17.1251 5.50459 18.3322 5.50459 18.3322C6.6055 20.2182 8.29358 19.6901 8.95413 19.3883C9.02752 18.5585 9.3945 18.0304 9.68807 17.7286C7.04587 17.4269 4.25688 16.3707 4.25688 11.6179C4.25688 10.26 4.69725 9.2038 5.50459 8.29851C5.43119 8.07219 4.99083 6.78969 5.65138 5.12999C5.65138 5.12999 6.6789 4.82822 8.95413 6.41249C9.90826 6.11072 10.9358 6.03528 11.9633 6.03528C12.9908 6.03528 14.0183 6.18616 14.9725 6.41249C17.2477 4.82822 18.2752 5.12999 18.2752 5.12999C18.9358 6.78969 18.4954 8.07219 18.422 8.37395C19.156 9.2038 19.6697 10.3354 19.6697 11.6934C19.6697 16.4461 16.8807 17.4269 14.2385 17.7286C14.6789 18.1058 15.0459 18.8603 15.0459 19.9919C15.0459 21.6516 15.0459 22.9341 15.0459 23.3867C15.0459 23.6885 15.2661 24.0657 15.8532 23.9902C20.6239 22.3305 24 17.7286 24 12.2969C23.9266 5.50719 18.5688 0 11.9633 0Z"
-                fill="var(--ld-layer-2)"
+                fill="var(--ld-layer)"
               />
             </svg>
           </a>
diff --git a/src/docs/global/styles/global.css b/src/docs/global/styles/global.css
@@ -2,19 +2,19 @@
 @import 'code.css';
 
 @define-mixin docs-ui-light {
-  background-color: var(--ld-layer-1);
+  background-color: var(--ld-layer);
   color: var(--ld-col-neutral-900);
 
   body::before {
-    background-color: var(--ld-layer-1);
+    background-color: var(--ld-layer);
   }
 }
 @define-mixin docs-ui-dark {
-  background-color: var(--ld-layer-1);
+  background-color: var(--ld-layer);
   color: var(--ld-col-neutral-900);
 
   body::before {
-    background-color: var(--ld-layer-1);
+    background-color: var(--ld-layer);
   }
 }
 
diff --git a/src/docs/includes/layout.njk b/src/docs/includes/layout.njk
@@ -3,7 +3,7 @@ title: Introduction
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" class="ld-layer-1">
 <head>
   <base href="{{ env.base }}/">
   <meta charset="utf-8">
@@ -55,7 +55,7 @@ title: Introduction
   <script type="module" src="{{ env.base }}/{{ buildstamp }}dist/build/liquid.esm.js"></script>
   <script nomodule src="{{ env.base }}/{{ buildstamp }}dist/build/liquid.js"></script>
 </head>
-<body>
+<body class="ld-layer">
   <script>
     if (/Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)) {
       document.body.classList.add('sarari')
diff --git a/src/docs/pages/global/colors.md b/src/docs/pages/global/colors.md
@@ -19,8 +19,6 @@ All colors listed below are available as global CSS custom properties after [imp
 
 ## Layer colors
 
-### Light
-
 <docs-color var="--ld-layer-2"></docs-color>
 <docs-color var="--ld-layer-1"></docs-color>
 <docs-color var="--ld-layer-0"></docs-color>
diff --git a/src/liquid/components/ld-accordion/ld-accordion.shadow.css b/src/liquid/components/ld-accordion/ld-accordion.shadow.css
@@ -4,7 +4,7 @@
   --ld-accordion-col-disabled: var(--ld-col-neutral-100);
   --ld-accordion-col-hover: var(--ld-col-neutral-900);
   --ld-accordion-col-focus: var(--ld-col-neutral-900);
-  --ld-accordion-bg-col: var(--ld-layer-2);
+  --ld-accordion-bg-col: var(--ld-layer);
   --ld-accordion-bg-col-active: var(--ld-col-wht);
   --ld-accordion-bg-col-disabled: var(--ld-col-neutral-100);
   --ld-accordion-bg-col-focus: var(--ld-col-neutral-100);
@@ -45,7 +45,6 @@
   }
 
   &(.ld-accordion--dark) {
-    --ld-accordion-bg-col: var(--ld-layer-1);
     --ld-accordion-bg-col-active: var(--ld-col-neutral-010);
     --ld-accordion-panel-border-top-col: var(--ld-col-neutral-050);
   }
diff --git a/src/liquid/components/ld-accordion/ld-accordion.tsx b/src/liquid/components/ld-accordion/ld-accordion.tsx
@@ -186,7 +186,7 @@ export class LdAccordion {
 
   render() {
     const cl = getClassNames([
-      'ld-accordion',
+      'ld-accordion ld-layer',
       this.detached && 'ld-accordion--detached',
       this.brandColor && 'ld-accordion--brand-color',
       !this.brandColor && this.tone && `ld-accordion--${this.tone}`,
diff --git a/src/liquid/components/ld-accordion/readme.md b/src/liquid/components/ld-accordion/readme.md
@@ -623,7 +623,7 @@ You can nest an accordion inside another.
   <ld-accordion-section expanded>
     <ld-accordion-toggle>Fruits</ld-accordion-toggle>
     <ld-accordion-panel>
-      <ld-accordion tone="dark" style="margin: var(--ld-sp-24) var(--ld-accordion-padding-x)">
+      <ld-accordion style="margin: var(--ld-sp-24) var(--ld-accordion-padding-x)">
         <ld-accordion-section>
           <ld-accordion-toggle>Sweet</ld-accordion-toggle>
           <ld-accordion-panel>
diff --git a/src/liquid/components/ld-card/ld-card.css b/src/liquid/components/ld-card/ld-card.css
@@ -1,6 +1,6 @@
 :host,
 .ld-card {
-  --ld-card-bg-col: var(--ld-layer-1);
+  --ld-card-bg-col: var(--ld-layer);
   --ld-card-border-radius: var(--ld-br-l);
   --ld-card-padding: var(--ld-sp-32);
   --ld-card-padding-sm: var(--ld-sp-16);
diff --git a/src/liquid/components/ld-card/ld-card.tsx b/src/liquid/components/ld-card/ld-card.tsx
@@ -34,6 +34,7 @@ export class LdCard {
   render() {
     const cl = getClassNames([
       'ld-card',
+      'ld-layer',
       this.size && `ld-card--${this.size}`,
       this.shadow && `ld-card--${this.shadow}`,
       this.shadowInteractive &&
diff --git a/src/liquid/global/styles/colors/layers.css b/src/liquid/global/styles/colors/layers.css
@@ -3,6 +3,7 @@
   --ld-layer-1: var(--ld-col-neutral-010);
   --ld-layer-2: var(--ld-col-wht);
   --ld-layer-text: var(--ld-col-neutral-900);
+  --ld-layer: var(--ld-layer-0);
 
   &.ld-dark {
     --ld-layer-0: var(--ld-col-neutral-010);
@@ -11,3 +12,40 @@
     --ld-layer-text: var(--ld-col-wht);
   }
 }
+
+.ld-layer:not(.ld-layer-0, .ld-layer-1) {
+  --ld-layer: var(--ld-layer-1);
+
+  .ld-layer:not(.ld-layer-0, .ld-layer-1) {
+    --ld-layer: var(--ld-layer-2);
+  }
+}
+
+.ld-layer-0 {
+  --ld-layer: var(--ld-layer-0);
+
+  .ld-layer:not(.ld-layer-0, .ld-layer-1, .ld-layer-1 .ld-layer-1) {
+    --ld-layer: var(--ld-layer-1);
+
+    .ld-layer:not(.ld-layer-0, .ld-layer-1, .ld-layer-1 .ld-layer-1) {
+      --ld-layer: var(--ld-layer-2);
+    }
+  }
+}
+
+.ld-layer-1 {
+  --ld-layer: var(--ld-layer-1);
+
+  .ld-layer:not(
+      .ld-layer-0,
+      .ld-layer-1,
+      .ld-layer-0 .ld-layer,
+      .ld-layer-1 .ld-layer-0
+    ) {
+    --ld-layer: var(--ld-layer-2);
+  }
+}
+
+.ld-layer-2 {
+  --ld-layer: var(--ld-layer-2);
+}

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`.docs-example__code {`
`6`		`- background-color: var(--ld-layer-0);`
	`6`	`+ background-color: var(--ld-layer);`
`7`	`7`	`overflow: hidden;`
`8`	`8`	`display: none;`
`9`	`9`	`border-bottom-left-radius: var(--ld-br-l);`
`@@ -21,7 +21,7 @@`
`21`	`21`	`overflow: auto;`
`22`	`22`	`display: flex;`
`23`	`23`	`width: 100%;`
`24`		`- background-color: var(--ld-layer-2);`
	`24`	`+ background-color: var(--ld-layer);`
`25`	`25`	`border-bottom-left-radius: var(--ld-br-l);`
`26`	`26`	`border-bottom-right-radius: var(--ld-br-l);`
`27`	`27`	`}`
`@@ -54,7 +54,7 @@`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`.docs-example__show {`
`57`		`- background-color: var(--ld-layer-0);`
	`57`	`+ background-color: var(--ld-layer);`
`58`	`58`	`color: var(--ld-col-neutral-900);`
`59`	`59`	`border-top-left-radius: var(--ld-br-l);`
`60`	`60`	`border-top-right-radius: var(--ld-br-l);`
`@@ -114,7 +114,7 @@`
`114`	`114`	`}`
`115`	`115`
`116`	`116`	`.docs-example__show--light {`
`117`		`- background-color: var(--ld-layer-0);`
	`117`	`+ background-color: var(--ld-layer);`
`118`	`118`	`}`
`119`	`119`
`120`	`120`	`.docs-example--code-visible {`
Original file line number	Diff line number	Diff line change
`@@ -134,7 +134,7 @@ export class DocsExample {`
`134`	`134`	`this.codeType === 'react' && 'docs-example--react-component',`
`135`	`135`	`]`
`136`	`136`
`137`		`- let clShow = 'docs-example__show'`
	`137`	`+ let clShow = 'docs-example__show ld-layer-0'`
`138`	`138`	`if (this.themable && this.currentTheme) {`
`139`	`139`	`clShow += ' ld-theme-' + this.currentTheme.toLowerCase()`
`140`	`140`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@`
`28`	`28`	`> [id^='methods'] ~ h3 {`
`29`	`29`	`code {`
`30`	`30`	`box-shadow: inset 0 0 0 var(--ld-sp-1) var(--ld-col-neutral-100);`
`31`		`- background-color: var(--ld-layer-1);`
	`31`	`+ background-color: var(--ld-layer);`
`32`	`32`	`}`
`33`	`33`	`}`
`34`	`34`
Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,7 @@`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`.docs-topbar__headline {`
`61`		`- color: var(--ld-layer-2);`
	`61`	`+ color: var(--ld-layer);`
`62`	`62`	`font-family: var(--ld-font-body);`
`63`	`63`
`64`	`64`	`b {`