feat(ld-notification): use up-to-date css custom props

emdgroup-liquid · Nov 9, 2021 · 3abda92 · 3abda92
1 parent cded2ef
commit 3abda92
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 57 deletions.
diff --git a/scripts/screenshots.ts b/scripts/screenshots.ts
@@ -23,7 +23,7 @@ async function deleteScreenshots(components?: string[]) {
       master.screenshots = updatedScreenshots
       await fs.writeFile(
         'screenshot/builds/master.json',
-        JSON.stringify(master, undefined, 2),
+        JSON.stringify(master, undefined, 2) + '\n',
         { encoding: 'utf8', flag: 'w' }
       )
       console.info('Updated screenshot/builds/master.json')

diff --git a/src/docs/components/docs-main/docs-main.css b/src/docs/components/docs-main/docs-main.css
@@ -572,7 +572,8 @@
 
 #slots,
 #events,
-#properties {
+#properties,
+#shadow-parts {
   + table + hr {
     display: none;
   }

diff --git a/src/liquid/components/ld-notification/ld-notification.css b/src/liquid/components/ld-notification/ld-notification.css
@@ -1,4 +1,19 @@
 :host {
+  /* layout */
+  --ld-notification-min-height: var(--ld-sp-40);
+  --ld-notification-border-radius: var(--ld-br-m);
+  --ld-notification-inset-y: var(--ld-sp-32);
+
+  /* colors */
+  --ld-notification-col: var(--ld-col-wht);
+  --ld-notification-warn-col: var(--ld-col-neutral);
+  --ld-notification-alert-col: var(--ld-col-wht);
+
+  /* themable colors */
+  --ld-notification-bg-col: var(--ld-thm-primary);
+  --ld-notification-warn-bg-col: var(--ld-thm-warning);
+  --ld-notification-alert-bg-col: var(--ld-thm-error);
+
   position: fixed;
   z-index: 2147483647; /* Highest possible */
   display: flex;
@@ -36,17 +51,17 @@
   pointer-events: auto;
   position: absolute;
   transform-origin: center;
-  box-shadow: var(--ld-shadow-sticky);
   width: fit-content;
   min-width: 19rem;
   max-width: calc(90% - 1rem);
   max-height: 80vh;
-  min-height: var(--ld-sp-40);
   overflow-y: auto;
-  border-radius: var(--ld-br-m);
   display: flex;
   justify-content: space-between;
   transition: transform 0.2s ease, opacity 0.2s linear;
+  box-shadow: var(--ld-shadow-sticky);
+  min-height: var(--ld-notification-min-height);
+  border-radius: var(--ld-notification-border-radius);
 
   &:where(:not(.ld-notification__item--dismissed)) {
     animation: ld-notification-fade-in 0.2s linear;
@@ -81,7 +96,7 @@
   }
 
   :host(.ld-notification--bottom) & {
-    bottom: var(--ld-sp-32);
+    bottom: var(--ld-notification-inset-y);
 
     &:nth-last-of-type(2) {
       transform: scale(0.975) translateY(25%);
@@ -97,7 +112,7 @@
   }
 
   :host(.ld-notification--top) & {
-    top: var(--ld-sp-32);
+    top: var(--ld-notification-inset-y);
 
     &:nth-last-of-type(2) {
       transform: scale(0.975) translateY(-25%);
@@ -114,16 +129,16 @@
 }
 
 .ld-notification__item--info {
-  background-color: var(--ld-notification-item-color);
-  color: var(--ld-col-wht);
+  background-color: var(--ld-notification-bg-col);
+  color: var(--ld-notification-col);
 }
 .ld-notification__item--warn {
-  background-color: var(--ld-col-vy-default);
-  color: var(--ld-col-rblck-default);
+  background-color: var(--ld-notification-warn-bg-col);
+  color: var(--ld-notification-warn-col);
 }
 .ld-notification__item--alert {
-  background-color: var(--ld-col-rr-default);
-  color: var(--ld-col-wht);
+  background-color: var(--ld-notification-alert-bg-col);
+  color: var(--ld-notification-alert-col);
 }
 
 .ld-notification__item-content,
@@ -161,38 +176,3 @@
   touch-action: manipulation;
   -webkit-touch-callout: none;
 }
-
-/* .ld-theme-ocean -> default */
-.ld-notification__item--info,
-:where(.ld-theme-ocean) .ld-notification__item--info,
-:where([class*='ld-theme'] .ld-theme-ocean) .ld-notification__item--info {
-  --ld-notification-item-color: var(--ld-thm-ocean-bg-primary);
-}
-
-:where(.ld-theme-tea),
-:where([class*='ld-theme'] .ld-theme-tea) {
-  .ld-notification__item--info {
-    --ld-notification-item-color: var(--ld-thm-tea-bg-primary);
-  }
-}
-
-:where(.ld-theme-bubblegum),
-:where([class*='ld-theme'] .ld-theme-bubblegum) {
-  .ld-notification__item--info {
-    --ld-notification-item-color: var(--ld-thm-bubblegum-bg-primary);
-  }
-}
-
-:where(.ld-theme-shake),
-:where([class*='ld-theme'] .ld-theme-shake) {
-  .ld-notification__item--info {
-    --ld-notification-item-color: var(--ld-thm-shake-bg-primary);
-  }
-}
-
-:where(.ld-theme-solvent),
-:where([class*='ld-theme'] .ld-theme-solvent) {
-  .ld-notification__item--info {
-    --ld-notification-item-color: var(--ld-thm-solvent-bg-primary);
-  }
-}
diff --git a/src/liquid/components/ld-notification/test/ld-notification.e2e.ts b/src/liquid/components/ld-notification/test/ld-notification.e2e.ts
@@ -2,8 +2,6 @@ import { getPageWithContent } from '../../../utils/e2e-tests'
 
 jest.useRealTimers()
 
-const allowableMismatchedRatio = 0.02
-
 describe('ld-notification', () => {
   describe('placement', () => {
     it('renders placed at the top with prop placement set to "top"', async () => {
@@ -25,7 +23,7 @@ describe('ld-notification', () => {
       await page.waitForChanges()
 
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders placed at the bottom with prop placement set to "bottom"', async () => {
@@ -47,7 +45,7 @@ describe('ld-notification', () => {
       await page.waitForChanges()
 
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
   })
 
@@ -71,7 +69,7 @@ describe('ld-notification', () => {
       await page.waitForChanges()
 
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it(`renders a notification of type "warn"`, async () => {
@@ -93,7 +91,7 @@ describe('ld-notification', () => {
       await page.waitForChanges()
 
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it(`renders a notification of type "alert"`, async () => {
@@ -115,7 +113,7 @@ describe('ld-notification', () => {
       await page.waitForChanges()
 
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
   })
 
@@ -210,7 +208,7 @@ describe('ld-notification', () => {
       await page.waitForChanges()
 
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
   })
 
@@ -235,7 +233,7 @@ describe('ld-notification', () => {
       await page.waitForChanges()
 
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
   })
 })