WIP theming page improvements

sq
hashicorp · Dec 19, 2024 · b680000 · b680000
1 parent 12c3fda
commit b680000
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 113 deletions.
diff --git a/showcase/app/components/mock/theming/basic-container.gts b/showcase/app/components/mock/theming/basic-container.gts
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+interface MockThemingBasicContainerSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class MockThemingBasicContainer extends Component<MockThemingBasicContainerSignature> {
+  <template>
+    <div class="mock-theming-basic-container" ...attributes>
+      {{#if @text}}
+        {{@text}}
+      {{else}}
+        {{yield}}
+      {{/if}}
+    </div>
+  </template>
+}
diff --git a/showcase/app/styles/app.scss b/showcase/app/styles/app.scss
@@ -26,6 +26,7 @@
 @use "./showcase-components/placeholder";
 @use "./showcase-components/theme-switcher";
 @use "./mock-components/app";
+@use "./mock-components/theming/basic-container";
 
 
 // Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments

diff --git a/showcase/app/styles/mock-components/theming/basic-container.scss b/showcase/app/styles/mock-components/theming/basic-container.scss
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.mock-theming-basic-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  min-width: 120px;
+  min-height: 120px;
+  padding: 50px;
+  color: var(--token-color-foreground-strong);
+  font-weight: bold;
+  font-size: 10px;
+  font-family: monaco, Consolas, "Lucida Console", monospace;
+  line-height: 1.2;
+  background-color: var(--token-color-surface-strong);
+}
diff --git a/showcase/app/styles/showcase-pages/theming.scss b/showcase/app/styles/showcase-pages/theming.scss
@@ -3,52 +3,6 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-// TYPOGRAPHY
+// THEMING
 
-body.foundations-theming {
-  .shw-theming-demo-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: fit-content;
-    min-width: 120px;
-    min-height: 120px;
-    padding: 50px;
-    color: var(--shw-test-theme-foreground-color);
-    font-weight: bold;
-    font-size: 10px;
-    font-family: monaco, Consolas, "Lucida Console", monospace;
-    line-height: 1.2;
-    background-color: var(--shw-test-theme-background-color);
-  }
-
-  .shw-theming-demo-container--class {
-    color: var(
-      --shw-test-theme-class-foreground-color,
-      var(--shw-test-theme-foreground-color)
-    );
-    background-color: var(
-      --shw-test-theme-class-background-color,
-      var(--shw-test-theme-background-color)
-    );
-  }
-
-  .shw-theming-demo-container--data {
-    color: var(
-      --shw-test-theme-data-foreground-color,
-      var(--shw-test-theme-foreground-color)
-    );
-    background-color: var(
-      --shw-test-theme-data-background-color,
-      var(--shw-test-theme-background-color)
-    );
-  }
-
-  .shw-theming-container-background-light {
-    background-color: #fff;
-  }
-
-  .shw-theming-container-background-dark {
-    background-color: #000;
-  }
-}
+// body.foundations-theming {}
diff --git a/showcase/app/templates/foundations/theming/index.hbs b/showcase/app/templates/foundations/theming/index.hbs
@@ -18,36 +18,31 @@
 
   <Shw::Text::H2>Page-level theming</Shw::Text::H2>
 
-  <Shw::Grid @columns={{3}} as |SG|>
-    <SG.Item as |SGI|>
-      <SGI.Label><code>prefers-color-scheme</code></SGI.Label>
-      <div class="shw-theming-demo-container">TEXT</div>
-    </SG.Item>
-    <SG.Item as |SGI|>
-      <SGI.Label><code>body.theme</code> class</SGI.Label>
-      <div class="shw-theming-demo-container shw-theming-demo-container--class">TEXT</div>
-    </SG.Item>
-    <SG.Item as |SGI|>
-      <SGI.Label><code>body[data-theme]</code> attribute</SGI.Label>
-      <div class="shw-theming-demo-container shw-theming-demo-container--data">TEXT</div>
-    </SG.Item>
-  </Shw::Grid>
+  <Shw::Flex as |SF|>
+    <SF.Item as |SFI|>
+      <SFI.Label>Container with color
+        <code>foreground-strong</code>
+        / background
+        <code>surface-strong</code></SFI.Label>
+      <Mock::Theming::BasicContainer @text="TEXT" />
+    </SF.Item>
+  </Shw::Flex>
 
   <Shw::Divider />
 
   <Shw::Text::H2>Contextual theming</Shw::Text::H2>
 
   <Shw::Flex @gap="4rem" as |SF|>
     <SF.Item as |SFI|>
-      <SFI.Label><code>.theme-light</code> class</SFI.Label>
-      <div class="shw-theme-light">
-        <div class="shw-theming-demo-container">TEXT</div>
+      <SFI.Label><code>.hds-theme-light</code> class</SFI.Label>
+      <div class="hds-theme-light">
+        <Mock::Theming::BasicContainer @text="TEXT" />
       </div>
     </SF.Item>
     <SF.Item as |SFI|>
-      <SFI.Label><code>.theme-dark</code> class</SFI.Label>
-      <div class="shw-theme-dark">
-        <div class="shw-theming-demo-container">TEXT</div>
+      <SFI.Label><code>.hds-theme-dark</code> class</SFI.Label>
+      <div class="hds-theme-dark">
+        <Mock::Theming::BasicContainer @text="TEXT" />
       </div>
     </SF.Item>
   </Shw::Flex>
@@ -56,66 +51,57 @@
 
   <Shw::Flex @gap="4rem" as |SF|>
     <SF.Item as |SFI|>
-      <SFI.Label><code>.theme-light</code> &gt; <code>.theme-dark</code></SFI.Label>
-      <div class="shw-theme-light">
-        <div class="shw-theming-demo-container">
-          <div class="shw-theme-dark">
-            <div class="shw-theming-demo-container">
-              TEXT
-            </div>
+      <SFI.Label><code>.hds-theme-light</code> &gt; <code>.hds-theme-dark</code></SFI.Label>
+      <div class="hds-theme-light">
+        <Mock::Theming::BasicContainer>
+          <div class="hds-theme-dark">
+            <Mock::Theming::BasicContainer @text="TEXT" />
           </div>
-        </div>
+        </Mock::Theming::BasicContainer>
       </div>
     </SF.Item>
     <SF.Item as |SFI|>
-      <SFI.Label><code>.theme-dark</code> &gt; <code>.theme-light</code></SFI.Label>
-      <div class="shw-theme-dark">
-        <div class="shw-theming-demo-container">
-          <div class="shw-theme-light">
-            <div class="shw-theming-demo-container">
-              TEXT
-            </div>
+      <SFI.Label><code>.hds-theme-dark</code> &gt; <code>.hds-theme-light</code></SFI.Label>
+      <div class="hds-theme-dark">
+        <Mock::Theming::BasicContainer>
+          <div class="hds-theme-light">
+            <Mock::Theming::BasicContainer @text="TEXT" />
           </div>
-        </div>
+        </Mock::Theming::BasicContainer>
       </div>
     </SF.Item>
     <SF.Item as |SFI|>
-      <SFI.Label><code>.theme-dark</code> &gt; <code>.theme-light</code> &gt; <code>.theme-dark</code></SFI.Label>
-      <div class="shw-theme-dark">
-        <div class="shw-theming-demo-container">
-          <div class="shw-theme-light">
-            <div class="shw-theming-demo-container">
-              <div class="shw-theme-dark">
-                <div class="shw-theming-demo-container">
-                  TEXT
-                </div>
+      <SFI.Label><code>.hds-theme-dark</code>
+        &gt;
+        <code>.hds-theme-light</code>
+        &gt;
+        <code>.hds-theme-dark</code></SFI.Label>
+      <div class="hds-theme-dark">
+        <Mock::Theming::BasicContainer>
+          <div class="hds-theme-light">
+            <Mock::Theming::BasicContainer>
+              <div class="hds-theme-dark">
+                <Mock::Theming::BasicContainer @text="TEXT" />
               </div>
-            </div>
+            </Mock::Theming::BasicContainer>
           </div>
-        </div>
+        </Mock::Theming::BasicContainer>
       </div>
     </SF.Item>
   </Shw::Flex>
 
-  <Shw::Divider />
+</section>
 
-  <Shw::Text::H2>Components</Shw::Text::H2>
+{{! For some reason, Ember tests don't play well with iframes (URL not found) so we don't snapshots them in Percy }}
+<section>
+  <Shw::Divider />
 
-  <Shw::Flex as |SF|>
-    <SF.Item @label="AppFooter with theme={{this.inverseTheme}}">
-      <div class="shw-theming-container-background-{{this.inverseTheme}}">
-        <Hds::AppFooter @theme={{this.inverseTheme}} as |AF|>
-          <AF.StatusLink @status="operational" />
-          <AF.LegalLinks />
-          <AF.Item>
-            <Hds::Text::Body @tag="span" @size="100">v.2.0</Hds::Text::Body>
-          </AF.Item>
-          <AF.Item>
-            <Hds::Text::Body @tag="span" @size="100">Product Name</Hds::Text::Body>
-          </AF.Item>
-        </Hds::AppFooter>
-      </div>
-    </SF.Item>
-  </Shw::Flex>
+  <Shw::Text::H2>Demo</Shw::Text::H2>
 
+  <Shw::Frame
+    @id="demo-application-with-theme-switcher"
+    @src="/foundations/theming/frameless/demo-application-with-theme-switcher"
+    @label="Demo application with theme switcher"
+    @height="900"
+  />
 </section>