haxtheweb/issues#2126 related

haxtheweb · Sep 10, 2024 · c116e79 · c116e79
1 parent e573220
commit c116e79
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 45 deletions.
diff --git a/elements/d-d-d/lib/DDDStyles.js b/elements/d-d-d/lib/DDDStyles.js
@@ -2063,7 +2063,10 @@ export const DDDReset = css`
         --lowContrast-override,
         var(--ddd-theme-primary, var(--ddd-theme-default-nittanyNavy))
       ),
-      var(--ddd-theme-default-linkLight)
+      var(
+        --lowContrast-override,
+        var(--ddd-theme-primary, var(--ddd-theme-default-linkLight))
+      )
     );
     cursor: pointer;
     text-wrap: wrap;
@@ -2084,7 +2087,10 @@ export const DDDReset = css`
         --lowContrast-override,
         var(--ddd-theme-primary, var(--ddd-theme-default-nittanyNavy))
       ),
-      var(--ddd-theme-default-linkLight)
+      var(
+        --lowContrast-override,
+        var(--ddd-theme-primary, var(--ddd-theme-default-linkLight))
+      )
     );
     font-weight: var(--ddd-font-weight-regular);
     font-size: var(--ddd-font-size-m);
@@ -2112,7 +2118,10 @@ export const DDDReset = css`
         --lowContrast-override,
         var(--ddd-theme-primary, var(--ddd-theme-default-nittanyNavy))
       ),
-      var(--ddd-theme-default-linkLight)
+      var(
+        --lowContrast-override,
+        var(--ddd-theme-primary, var(--ddd-theme-default-linkLight))
+      )
     );
     filter: saturate(1.5);
   }

diff --git a/elements/d-d-d/lib/d-d-docs.js b/elements/d-d-d/lib/d-d-docs.js
@@ -237,7 +237,7 @@ class DDDocs extends DDD {
     for (let i = 0; i < 22; i++) {
       headers.push(html`
         <details style="max-width: 100%; margin: 0 64px;">
-          <summary data-primary="${i}" style="color: var(--ddd-theme-primary);">
+          <summary data-primary="${i}" style="color: var(--ddd-theme-primary); background-color: var(--ddd-theme-bgContrast);">
             Header Sample ${i}
           </summary>
           ${Array(6)
@@ -1942,7 +1942,7 @@ class DDDocs extends DDD {
             ></figure-label>
             <!-- application override -->
             <div
-              style="--ddd-component-figure-label-title: var(--ddd-theme-default-link80); --ddd-component-figure-label-background: var(--ddd-theme-default-infoLight);"
+              style="--ddd-component-figure-label-description-text: black; --ddd-component-figure-label-title: var(--ddd-primary-22); --ddd-component-figure-label-title-text: var(--ddd-primary-4); --ddd-component-figure-label-description-background: var(--ddd-theme-default-infoLight);"
             >
               <figure-label
                 title="1.3"

diff --git a/elements/figure-label/figure-label.js b/elements/figure-label/figure-label.js
@@ -48,12 +48,15 @@ class FigureLabel extends DDD {
                 var(--ddd-theme-default-limestoneLight)
               )
             )
-          ); /* is this hierarchy correct? */
+          );
           color: var(
             --ddd-component-figure-label-title-text,
             var(
-              --simple-colors-default-theme-accent-11,
-              var(--ddd-theme-default-potentialMidnight)
+              --ddd-theme-primary,
+              var(
+                --simple-colors-default-theme-accent-11,
+                var(--ddd-theme-default-potentialMidnight)
+              )
             )
           );
           font-size: var(--ddd-font-size-4xs);
@@ -79,10 +82,17 @@ class FigureLabel extends DDD {
           border-left: none;
           padding: var(--ddd-spacing-2);
           font-size: var(--ddd-font-size-4xs);
-          background: var(
-            --ddd-component-figure-label-background,
+          background-color: var(
+            --ddd-component-figure-label-description-background,
             var(--ddd-theme-default-white)
           );
+          color: var(
+            --ddd-component-figure-label-description-text,
+            var(
+              --simple-colors-default-theme-accent-11,
+              var(--ddd-theme-default-potentialMidnight)
+            )
+          );
           font-weight: var(--ddd-font-weight-regular);
         }
       `,

diff --git a/elements/figure-label/src/figure-label.js b/elements/figure-label/src/figure-label.js
@@ -48,12 +48,15 @@ class FigureLabel extends DDD {
                 var(--ddd-theme-default-limestoneLight)
               )
             )
-          ); /* is this hierarchy correct? */
+          );
           color: var(
             --ddd-component-figure-label-title-text,
             var(
-              --simple-colors-default-theme-accent-11,
-              var(--ddd-theme-default-potentialMidnight)
+              --ddd-theme-primary,
+              var(
+                --simple-colors-default-theme-accent-11,
+                var(--ddd-theme-default-potentialMidnight)
+              )
             )
           );
           font-size: var(--ddd-font-size-4xs);
@@ -79,10 +82,17 @@ class FigureLabel extends DDD {
           border-left: none;
           padding: var(--ddd-spacing-2);
           font-size: var(--ddd-font-size-4xs);
-          background: var(
-            --ddd-component-figure-label-background,
+          background-color: var(
+            --ddd-component-figure-label-description-background,
             var(--ddd-theme-default-white)
           );
+          color: var(
+            --ddd-component-figure-label-description-text,
+            var(
+              --simple-colors-default-theme-accent-11,
+              var(--ddd-theme-default-potentialMidnight)
+            )
+          );
           font-weight: var(--ddd-font-weight-regular);
         }
       `,

diff --git a/elements/image-inspector/image-inspector.js b/elements/image-inspector/image-inspector.js
@@ -19,14 +19,15 @@ class ImageInspector extends LitElement {
         :host {
           display: block;
           overflow: hidden;
-          background-color: var(--image-inspector-background-color, #fdfdfd);
         }
 
         simple-icon-button {
           display: inline-flex;
           --simple-icon-width: 36px;
           --simple-icon-height: 36px;
-          margin: 0 8px;
+          margin: 0 4px;
+          padding: 0 4px;
+          border-radius: 0;
           background-color: var(--image-inspector-background-color, #fdfdfd);
           transition: 0.3s all ease-in-out;
         }
@@ -35,7 +36,7 @@ class ImageInspector extends LitElement {
         simple-icon-button:active {
           background-color: var(
             --image-inspector-background-color-active,
-            #eeeeee
+            #dddddd
           );
         }
 
@@ -48,10 +49,13 @@ class ImageInspector extends LitElement {
           --img-pan-zoom-height: var(--image-inspector-height, 600px);
         }
         .wrap {
-          border-bottom: 1px solid black;
           justify-content: center;
           display: flex;
         }
+        .internal-btn-wrap {
+          border: 2px solid black;
+          background-color: var(--image-inspector-background-color, #fdfdfd);
+        }
       `,
     ];
   }
@@ -64,6 +68,7 @@ class ImageInspector extends LitElement {
   render() {
     return html`
       <div class="wrap">
+        <div class="internal-btn-wrap">
         <simple-icon-button
           label="Zoom in"
           icon="zoom-in"
@@ -91,6 +96,7 @@ class ImageInspector extends LitElement {
           ></simple-icon-button>
         </a>
         <slot name="toolbar"></slot>
+        </div>
       </div>
       <img-pan-zoom id="img" src="${this.src}"></img-pan-zoom>
       <slot></slot>

diff --git a/elements/image-inspector/src/image-inspector.js b/elements/image-inspector/src/image-inspector.js
@@ -19,14 +19,15 @@ class ImageInspector extends LitElement {
         :host {
           display: block;
           overflow: hidden;
-          background-color: var(--image-inspector-background-color, #fdfdfd);
         }
 
         simple-icon-button {
           display: inline-flex;
           --simple-icon-width: 36px;
           --simple-icon-height: 36px;
-          margin: 0 8px;
+          margin: 0 4px;
+          padding: 0 4px;
+          border-radius: 0;
           background-color: var(--image-inspector-background-color, #fdfdfd);
           transition: 0.3s all ease-in-out;
         }
@@ -35,7 +36,7 @@ class ImageInspector extends LitElement {
         simple-icon-button:active {
           background-color: var(
             --image-inspector-background-color-active,
-            #eeeeee
+            #dddddd
           );
         }
 
@@ -48,10 +49,13 @@ class ImageInspector extends LitElement {
           --img-pan-zoom-height: var(--image-inspector-height, 600px);
         }
         .wrap {
-          border-bottom: 1px solid black;
           justify-content: center;
           display: flex;
         }
+        .internal-btn-wrap {
+          border: 2px solid black;
+          background-color: var(--image-inspector-background-color, #fdfdfd);
+        }
       `,
     ];
   }
@@ -64,6 +68,7 @@ class ImageInspector extends LitElement {
   render() {
     return html`
       <div class="wrap">
+        <div class="internal-btn-wrap">
         <simple-icon-button
           label="Zoom in"
           icon="zoom-in"
@@ -91,6 +96,7 @@ class ImageInspector extends LitElement {
           ></simple-icon-button>
         </a>
         <slot name="toolbar"></slot>
+        </div>
       </div>
       <img-pan-zoom id="img" src="${this.src}"></img-pan-zoom>
       <slot></slot>

diff --git a/elements/media-image/media-image.js b/elements/media-image/media-image.js
@@ -93,7 +93,7 @@ class MediaImage extends DDD {
             --ddd-component-figure-label-title,
             var(--ddd-theme-accent, var(--ddd-theme-default-limestoneLight))
           );
-          background: var(--ddd-component-figure-label-background, transparent);
+          background: var(--ddd-component-figure-label-description-background, transparent);
           padding: var(--ddd-spacing-2);
           margin-bottom: var(--ddd-spacing-5);
           line-height: var(--ddd-lh-140);

diff --git a/elements/media-image/src/media-image.js b/elements/media-image/src/media-image.js
@@ -93,7 +93,7 @@ class MediaImage extends DDD {
             --ddd-component-figure-label-title,
             var(--ddd-theme-accent, var(--ddd-theme-default-limestoneLight))
           );
-          background: var(--ddd-component-figure-label-background, transparent);
+          background: var(--ddd-component-figure-label-description-background, transparent);
           padding: var(--ddd-spacing-2);
           margin-bottom: var(--ddd-spacing-5);
           line-height: var(--ddd-lh-140);

diff --git a/elements/simple-modal/simple-modal.js b/elements/simple-modal/simple-modal.js
@@ -110,11 +110,6 @@ class SimpleModal extends LitElement {
         #headerbar {
           margin: 0;
           padding: var(--simple-modal-header-padding, 0px var(--ddd-spacing-4));
-          color: var(--simple-modal-header-color);
-          background-color: var(
-            --simple-modal-header-background,
-            var(--ddd-theme-default-limestoneMaxLight)
-          );
         }
 
         #close {
@@ -127,15 +122,11 @@ class SimpleModal extends LitElement {
           min-width: unset;
           text-transform: none;
           background-color: transparent;
-          color: var(--ddd-theme-default-white);
+          color: var(--ddd-theme-default-nittanyNavy);
           --simple-icon-width: var(--ddd-icon-sm);
           --simple-icon-height: var(--ddd-icon-sm);
         }
 
-        #close:focus {
-          opacity: 0.7;
-        }
-
         #close simple-icon-lite {
           --simple-icon-height: var(
             --simple-modal-titlebar-icon-height,

diff --git a/elements/simple-modal/src/simple-modal.js b/elements/simple-modal/src/simple-modal.js
@@ -110,11 +110,6 @@ class SimpleModal extends LitElement {
         #headerbar {
           margin: 0;
           padding: var(--simple-modal-header-padding, 0px var(--ddd-spacing-4));
-          color: var(--simple-modal-header-color);
-          background-color: var(
-            --simple-modal-header-background,
-            var(--ddd-theme-default-limestoneMaxLight)
-          );
         }
 
         #close {
@@ -127,15 +122,11 @@ class SimpleModal extends LitElement {
           min-width: unset;
           text-transform: none;
           background-color: transparent;
-          color: var(--ddd-theme-default-white);
+          color: var(--ddd-theme-default-nittanyNavy);
           --simple-icon-width: var(--ddd-icon-sm);
           --simple-icon-height: var(--ddd-icon-sm);
         }
 
-        #close:focus {
-          opacity: 0.7;
-        }
-
         #close simple-icon-lite {
           --simple-icon-height: var(
             --simple-modal-titlebar-icon-height,