Merge pull request #89 from hypothesis/clean-theme-cards

Add basic clean-theme support and update `card`, `frame` patterns

src/pattern-library/components/patterns/MoleculePatterns.js

@@ -29,6 +29,14 @@ export default function MoleculePatterns() {
               <div className="hyp-u-border">Child content in a frame.</div>
             </div>
           </PatternExample>
+          <PatternExample details="content in a frame: clean theme">
+            <div className="theme-clean">
+              <div className="hyp-frame">
+                Content within a frame in the clean theme. The frame itself has
+                no borders when in the clean theme.
+              </div>
+            </div>
+          </PatternExample>
         </PatternExamples>
       </Pattern>
 
@@ -59,6 +67,21 @@ export default function MoleculePatterns() {
               </div>
             </div>
           </PatternExample>
+          <PatternExample details="Clean theme">
+            <div className="theme-clean">
+              <div className="hyp-card">
+                <div>
+                  This is some text in a card in the clean theme. There are no
+                  borders or box-shadows.
+                </div>
+                <div className="hyp-actions">
+                  <IconButton title="User" icon="profile" />
+                  <IconButton title="Edit" icon="edit" />
+                  <IconButton title="Delete" icon="trash" />
+                </div>
+              </div>
+            </div>
+          </PatternExample>
         </PatternExamples>
       </Pattern>
 

src/pattern-library/components/patterns/PanelPatterns.js

@@ -36,6 +36,17 @@ export default function SharedPanelPatterns() {
               This panel has an optional icon in the header.
             </Panel>
           </PatternExample>
+          <PatternExample details="A panel in the clean theme">
+            <div className="theme-clean" style="width:100%">
+              <Panel
+                icon="edit"
+                title="Panel with clean-theme styling"
+                onClose={() => alert('close clicked')}
+              >
+                This panel has an optional icon in the header.
+              </Panel>
+            </div>
+          </PatternExample>
         </PatternExamples>
       </Pattern>
     </PatternPage>

styles/mixins/_themes.scss

@@ -0,0 +1,43 @@
+/**
+ * This mixin allows other mixins to declare rules that should only apply
+ * when a particular theme is active.
+ *
+ * The only known theme at present is the "clean" theme and it only applies
+ * to the client (Sidebar, Notebook) application.
+ *
+ * The client application provides relatively minimalistic support for a
+ * "clean" theme by applying a `theme-clean` class to the application container
+ * element.
+ *
+ * For example, let's say that the clean-theme variant of a pattern called
+ * `banana` should not have any borders applied. Its mixin can be written:
+ *
+ * @mixin banana {
+ *  border: 1px solid pink;
+ *  @include theme('clean') {
+ *    border: none;
+ *  }
+ * }
+ *
+ * .hyp-banana {
+ *   @include banana;
+ * }
+ *
+ * This would result in CSS:
+ *
+ * .hyp-banana {
+ *   border: 1px solid pink;
+ * }
+ *
+ * .theme-clean .hyp-banana {
+ *   border: none;
+ * }
+ *
+ * Note: As implemented here, theming increases specificity. Rules defined in
+ * theming cannot be overridden with utility classes as currently structured.
+ */
+@mixin theme($theme-name) {
+  .theme-#{$theme-name} & {
+    @content;
+  }
+}

styles/mixins/patterns/_molecules.scss

@@ -2,6 +2,7 @@
 
 @use '../atoms';
 @use '../layout';
+@use '../themes';
 
 $-border-radius: var.$border-radius;
 $-color-background: var.$color-background;
@@ -14,11 +15,17 @@ $-color-background: var.$color-background;
 /**
  * Give an element a border, background color and internal vertical spacing
  */
-@mixin frame($with-hover: false) {
+
+@mixin frame {
   @include layout.block;
   @include atoms.border;
   border-radius: $-border-radius;
   background-color: $-color-background;
+
+  @include themes.theme('clean') {
+    // A frame should not have any borders in the clean theme.
+    border: none;
+  }
 }
 
 /**
@@ -36,9 +43,13 @@ $-color-background: var.$color-background;
       @include atoms.shadow($active: true);
     }
   }
+
   width: 100%;
 
-  // TODO: Add clean-theme affordances
+  @include themes.theme('clean') {
+    // A card should have no shadows at all in the clean theme.
+    box-shadow: none;
+  }
 }
 
 /**

styles/mixins/patterns/_organisms.scss

@@ -2,6 +2,7 @@
 
 @use '../atoms';
 @use '../layout';
+@use '../themes';
 
 @use 'molecules';
 
@@ -15,6 +16,12 @@ $-color-brand: var.$color-brand;
 @mixin panel {
   @include molecules.card;
 
+  @include themes.theme('clean') {
+    // Cards won't have borders in the clean theme, but in the case of panels,
+    // we want some borders for delineation
+    @include atoms.border;
+  }
+
   & > header,
   &__header {
     @include layout.row($align: center);