@kaizen/components 2.3.6 → 2.4.0

package/dist/styles.css

@@ -559,7 +559,7 @@
   }
 }
 @layer kz-components {
-  .VisuallyHidden-module_srOnly__tTjOK {
+  .VisuallyHidden-module_srOnly__-f5sJ {
     clip-path: rect(0 0 0 0);
     height: 1px;
     overflow: hidden;
@@ -568,6 +568,7 @@
     width: 1px;
   }
 }
+
 @layer kz-components {
   .LoadingSpinner-module_loadingSpinner__Zc2mJ {
     --loading-spinner-size: 48px;
@@ -2689,29 +2690,37 @@
   }
 }
 @layer kz-components {
-  .Container-module_container__jSUGk {
+  .Container-module_container__Aj6o8 {
     display: flex;
     width: 100%;
     justify-content: center;
-  }
-  .Container-module_container__jSUGk *, .Container-module_container__jSUGk *::after, .Container-module_container__jSUGk *::before {
-    box-sizing: border-box;
+
+    * {
+      &,
+      &::after,
+      &::before {
+        box-sizing: border-box;
+      }
+    }
   }
 }
-/** THIS IS AN AUTOGENERATED FILE **/
+
 @layer kz-components {
-  .Content-module_content__ZeTRs {
-    max-width: 1392px;
-    margin: 0 72px;
+  .Content-module_content__DUKqQ {
+    max-width: var(--layout-content-max-width);
+    margin: 0 var(--layout-content-side-margin);
     width: 100%;
+
+    /* Setting a min-width: 0 will maintain the gutter margins when the inner contents has something wider than the page (e.g. scrollable table) */
     min-width: 0;
-  }
-  @media (max-width: calc(1080px - 1px)) {
-    .Content-module_content__ZeTRs {
-      margin: 0 12px;
+
+    /* Currently unable to do media query equations so using a fixed value instead */
+    @media (width <= 1079px) {
+      margin: 0 var(--content-margin-width-on-medium-and-small);
     }
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -3614,33 +3623,48 @@
   }
   /* stylelint-enable no-descending-specificity */
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .Divider-module_wrapper__K5mht {
+  /* 
+  Use different tokens with different opacities across the Zen and Heart themes, by assuming that when Zen is applied there won't be any CSS variables declared.
+  */
+
+  :root {
+    --dt-content-border-color: rgb(var(--color-gray-600-rgb), 0.1);
+  }
+
+  .Divider-module_wrapper__AzvdU {
     width: 100%;
     border: 0;
     margin: 0;
-    border-radius: var(--border-solid-border-radius, 7px);
+    border-radius: var(--border-solid-border-radius);
+
+    /* 
+    This is here to protect against a global style in a consumer.
+    https://github.com/cultureamp/murmur/blob/master/app/assets/stylesheets/legacy/modules/_body.scss
+    */
     visibility: visible;
   }
-  .Divider-module_content__BhDyy, .Divider-module_menuSeparator__kjXV5 {
-    border-top: 1px solid;
-    border-color: rgba(var(--color-gray-600-rgb, 82, 78, 86), 0.1);
+
+  .Divider-module_content__eq5aD,
+  .Divider-module_menuSeparator__FAvna {
+    border-top: 1px solid var(--dt-content-border-color);
   }
-  .Divider-module_canvas__2eQT6 {
+
+  .Divider-module_canvas__G87W- {
     border-top: 1px solid;
     border-bottom: 1px solid;
-    border-color: rgba(var(--color-gray-600-rgb, 82, 78, 86), 0.1);
+    border-color: var(--dt-content-border-color);
   }
-  .Divider-module_reversed__puJw2 {
-    border-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
+
+  .Divider-module_reversed__GuBmn {
+    border-color: rgb(var(--color-white-rgb), 0.1);
   }
-  .Divider-module_menuSeparator__kjXV5 {
-    /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
+
+  .Divider-module_menuSeparator__FAvna {
     margin: 5px 0;
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
@@ -3841,12 +3865,12 @@
   }
 }
 
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .ErrorPage-module_paragraphPadding__-L-qy {
-    padding: var(--spacing-24, 1.5rem) 0;
+  .ErrorPage-module_paragraphPadding__PJzGg {
+    padding: var(--spacing-24) 0;
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
   .FieldGroup-module_group__74Z9M {
@@ -8477,179 +8501,224 @@
   }
 }
 
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .Tag-module_root__uRhoc {
-    margin-inline-end: calc(var(--spacing-md, 1.5rem) * 0.5);
-    font-size: var(--typography-paragraph-small-font-size, 0.875rem);
-    font-weight: var(--typography-paragraph-small-font-weight, 400);
-    letter-spacing: var(--typography-paragraph-small-letter-spacing, normal);
-    color: var(--color-purple-800, #2f2438);
+  .Tag-module_root__sGbnM {
+    --medium: calc(var(--spacing-md) * 1.25);
+    --small: var(--spacing-md);
+
+    margin-inline-end: calc(var(--spacing-md) * 0.5);
+    font-size: var(--typography-paragraph-small-font-size);
+    font-weight: var(--typography-paragraph-small-font-weight);
+    letter-spacing: var(--typography-paragraph-small-letter-spacing);
+    color: var(--color-purple-800);
     display: inline-block;
-    border: var(--border-borderless-border-width, 2px) var(--border-borderless-border-style, solid) var(--border-borderless-border-color, transparent);
-    border-radius: calc(var(--spacing-md, 1.5rem) * 0.75);
-    padding: 0 calc(var(--spacing-md, 1.5rem) * 0.4);
+    border: var(--border-borderless-border-width) var(--border-borderless-border-style)
+      var(--border-borderless-border-color);
+    border-radius: calc(var(--spacing-md) * 0.75);
+    padding: 0 calc(var(--spacing-md) * 0.4);
     box-sizing: border-box;
+
+    &.Tag-module_profile__lpDJR {
+      padding-left: calc(var(--spacing-md) * 0.2);
+    }
   }
-  .Tag-module_root__uRhoc.Tag-module_profile__OoGsS {
-    padding-left: calc(var(--spacing-md, 1.5rem) * 0.2);
-  }
-  .Tag-module_layoutContainer__pBLSz {
+
+  .Tag-module_layoutContainer__cPxSs {
     height: 100%;
     display: flex;
     align-items: center;
   }
-  .Tag-module_validationIcon__B-YLv {
+
+  .Tag-module_validationIcon__i87BD {
     align-items: center;
     display: flex;
-    color: var(--color-white, #ffffff);
-    margin-inline: calc(var(--spacing-md, 1.5rem) * -0.15) var(--spacing-xs, 0.375rem);
+    color: var(--color-white);
+    margin-inline: calc(var(--spacing-md) * -0.15) var(--spacing-xs);
   }
-  .Tag-module_profile__OoGsS {
-    margin-inline: calc(var(--spacing-md, 1.5rem) * -0.15) var(--spacing-xs, 0.375rem);
+
+  .Tag-module_profile__lpDJR {
+    margin-inline: calc(var(--spacing-md) * -0.15) var(--spacing-xs);
     display: inline-flex;
     align-items: center;
   }
-  .Tag-module_textContent__q76X- {
+
+  .Tag-module_textContent__61iwm {
     margin-top: -1px;
-    font-family: var(--typography-paragraph-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-paragraph-small-font-weight, 400);
-    font-size: var(--typography-paragraph-small-font-size, 0.875rem);
-    line-height: var(--typography-paragraph-small-line-height, 1.125rem);
-    letter-spacing: var(--typography-paragraph-small-letter-spacing, normal);
+    font-family: var(--typography-paragraph-small-font-family);
+    font-weight: var(--typography-paragraph-small-font-weight);
+    font-size: var(--typography-paragraph-small-font-size);
+    line-height: var(--typography-paragraph-small-line-height);
+    letter-spacing: var(--typography-paragraph-small-letter-spacing);
     white-space: nowrap;
   }
-  .Tag-module_iconWrapper__aPrKH {
+
+  .Tag-module_iconWrapper__gXgCb {
     --icon-size: 16;
+
     position: relative;
     height: 16px;
     width: 16px;
   }
-  .Tag-module_dismissButton__rHv7r {
+
+  .Tag-module_dismissButton__MgLNJ {
+    /* Replace @include button-reset to reset button's style */
     appearance: none;
-    display: inline;
     background: transparent;
-    color: inherit;
     font: inherit;
     margin: 0;
-    padding: 0;
     border: none;
+
+    /* Original style */
     position: relative;
     display: flex;
     height: 100%;
     align-items: center;
-    padding: 0 var(--spacing-xs, 0.375rem);
+    padding: 0 var(--spacing-xs);
     margin-inline: -0.225rem -0.6625rem;
-    color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.7);
+    color: rgb(var(--color-purple-800-rgb), 0.7);
     cursor: pointer;
+
+    &:hover {
+      color: var(--color-purple-800);
+    }
+
+    &:active {
+      color: var(--color-purple-800);
+    }
+
+    svg {
+      position: relative;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible .Tag-module_iconWrapper__gXgCb {
+      color: var(--color-purple-800);
+
+      &::after {
+        --focus-ring-offset: calc((var(--border-focus-ring-border-width)));
+
+        content: '';
+        position: absolute;
+        background: transparent;
+        border-radius: 50%;
+        border-width: var(--border-focus-ring-border-width);
+        border-style: var(--border-focus-ring-border-style);
+        border-color: var(--color-blue-500);
+        inset: calc(-1 * var(--focus-ring-offset));
+      }
+    }
   }
-  .Tag-module_dismissButton__rHv7r:hover {
-    color: var(--color-purple-800, #2f2438);
-  }
-  .Tag-module_dismissButton__rHv7r:active {
-    color: var(--color-purple-800, #2f2438);
-  }
-  .Tag-module_dismissButton__rHv7r svg {
-    position: relative;
-  }
-  .Tag-module_dismissButton__rHv7r:focus {
-    outline: none;
-  }
-  .Tag-module_dismissButton__rHv7r:focus-visible .Tag-module_iconWrapper__aPrKH {
-    color: var(--color-purple-800, #2f2438);
-  }
-  .Tag-module_dismissButton__rHv7r:focus-visible .Tag-module_iconWrapper__aPrKH::after {
-    content: "";
-    position: absolute;
-    background: transparent;
-    border-radius: 50%;
-    border-width: var(--border-focus-ring-border-width, 2px);
-    border-style: var(--border-focus-ring-border-style, solid);
-    border-color: var(--color-blue-500, #0168b3);
-    inset: calc(-1 * calc((var(--border-focus-ring-border-width, 2px))));
-  }
-  .Tag-module_background__LkzGB {
+
+  .Tag-module_background__DaA0W {
+    /*
+    As our icons are only one-tone, this span places
+    a white background under the dismissible icon to
+    give the illusion of a background colour that is
+    different to the rest of the tag
+    */
     position: absolute;
     display: inline-block;
-    width: calc(var(--spacing-xs, 0.375rem) + 0.125rem);
-    height: calc(var(--spacing-xs, 0.375rem) + 0.125rem);
+    width: calc(var(--spacing-xs) + 0.125rem); /* optical adjustment */
+    height: calc(var(--spacing-xs) + 0.125rem); /* optical adjustment */
     background-color: white;
     left: 10px;
     top: 10px;
   }
-  .Tag-module_truncate__5w7HW {
+
+  .Tag-module_truncate__5kX5V {
     text-overflow: ellipsis;
     overflow-x: hidden;
     white-space: nowrap;
   }
-  .Tag-module_inline__pPM-d {
+
+  .Tag-module_inline__QQfqi {
     margin: 0;
   }
-  .Tag-module_medium__NkOrv {
-    height: calc(var(--spacing-md, 1.5rem) * 1.25);
-  }
-  .Tag-module_small__-xyNk {
-    height: var(--spacing-md, 1.5rem);
-  }
-  .Tag-module_default__6PVke {
-    background-color: var(--color-gray-300, #eaeaec);
-  }
-  .Tag-module_sentimentPositive__nbqE1 {
-    background-color: var(--color-green-100, #e8f8f4);
-  }
-  .Tag-module_sentimentNeutral__8BtD8 {
-    background-color: var(--color-gray-300, #eaeaec);
+
+  .Tag-module_medium__PI53x {
+    height: var(--medium);
   }
-  .Tag-module_sentimentNegative__1J85t {
-    background-color: var(--color-red-100, #fdeaee);
+
+  .Tag-module_small__hcPrf {
+    height: var(--small);
   }
-  .Tag-module_sentimentNone__8BWjU {
-    background-color: var(--color-white, #ffffff);
-    border-color: var(--color-gray-300, #eaeaec);
+
+  .Tag-module_default__Wq9hK {
+    background-color: var(--color-gray-300);
   }
-  .Tag-module_validationPositive__vgFUE {
-    background-color: var(--color-green-100, #e8f8f4);
+
+  .Tag-module_sentimentPositive__M4lXI {
+    background-color: var(--color-green-100);
   }
-  .Tag-module_validationPositive__vgFUE .Tag-module_validationIcon__B-YLv {
-    color: var(--color-green-500, #3f9a86);
+
+  .Tag-module_sentimentNeutral__uxZ6y {
+    background-color: var(--color-gray-300);
   }
-  .Tag-module_validationInformative__bnJ4A {
-    background-color: var(--color-blue-100, #e6f6ff);
+
+  .Tag-module_sentimentNegative__JxDtU {
+    background-color: var(--color-red-100);
   }
-  .Tag-module_validationInformative__bnJ4A .Tag-module_validationIcon__B-YLv {
-    color: var(--color-blue-500, #0168b3);
+
+  .Tag-module_sentimentNone__vDXoz {
+    background-color: var(--color-white);
+    border-color: var(--color-gray-300);
   }
-  .Tag-module_validationNegative__lZgIY {
-    background-color: var(--color-red-100, #fdeaee);
+
+  .Tag-module_validationPositive__KXW2z {
+    background-color: var(--color-green-100);
+
+    .Tag-module_validationIcon__i87BD {
+      color: var(--color-green-500);
+    }
   }
-  .Tag-module_validationNegative__lZgIY .Tag-module_validationIcon__B-YLv {
-    color: var(--color-red-500, #c93b55);
+
+  .Tag-module_validationInformative__wJlj5 {
+    background-color: var(--color-blue-100);
+
+    .Tag-module_validationIcon__i87BD {
+      color: var(--color-blue-500);
+    }
   }
-  .Tag-module_validationCautionary__ERS2t {
-    background-color: var(--color-yellow-100, #fff9e4);
+
+  .Tag-module_validationNegative__CEuAp {
+    background-color: var(--color-red-100);
+
+    .Tag-module_validationIcon__i87BD {
+      color: var(--color-red-500);
+    }
   }
-  .Tag-module_validationCautionary__ERS2t .Tag-module_validationIcon__B-YLv {
-    color: var(--color-yellow-700);
+
+  .Tag-module_validationCautionary__ay3Dg {
+    background-color: var(--color-yellow-100);
+
+    .Tag-module_validationIcon__i87BD {
+      color: var(--color-yellow-700);
+    }
   }
-  .Tag-module_statusLive__xG48w {
-    background-color: var(--color-green-100, #e8f8f4);
-    color: var(--color-purple-800, #2f2438);
+
+  .Tag-module_statusLive__Ycm63 {
+    background-color: var(--color-green-100);
+    color: var(--color-purple-800);
   }
-  .Tag-module_statusAction__woL-O {
-    background-color: var(--color-orange-100, #fff0e8);
-    color: var(--color-purple-800, #2f2438);
+
+  .Tag-module_statusAction__Gdpew {
+    background-color: var(--color-orange-100);
+    color: var(--color-purple-800);
   }
-  .Tag-module_statusClosed__VhZP- {
-    background-color: var(--color-red-100, #fdeaee);
+
+  .Tag-module_statusClosed__9Ggv1 {
+    background-color: var(--color-red-100);
   }
-  .Tag-module_statusDraft__9QZDv {
-    background-color: var(--color-blue-100, #e6f6ff);
-    color: var(--color-purple-800, #2f2438);
+
+  .Tag-module_statusDraft__m3ksY {
+    background-color: var(--color-blue-100);
+    color: var(--color-purple-800);
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -10061,11 +10130,9 @@
   }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
-    margin-bottom: 0.063rem;
   }
   .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
-    margin-bottom: 0.063rem;
   }
   .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
     box-sizing: border-box;
@@ -10083,7 +10150,7 @@
     }
   }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInner__SlArS {
-    border-bottom: 1px solid var(--color-gray-300, #eaeaec);
+    box-shadow: inset 0 -0.0625rem 0 0 var(--color-gray-300, #eaeaec);
   }
   .TitleBlock-module_rowBelowSeparatorInner__3gNec {
     padding: 0 4px 0 12px;
@@ -10096,24 +10163,28 @@
   }
   .TitleBlock-module_titleRowInnerContent__NhTHV {
     box-sizing: border-box;
+    min-height: 88px;
     position: relative;
     display: flex;
     width: 100%;
     align-items: center;
     gap: 12px;
-    padding-block: 20px 19px;
+    padding-block: 20px;
     justify-content: space-between;
-    border-bottom: 0.063rem solid rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
+    box-shadow: inset 0 -0.0625rem 0 0 rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
   }
   .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_titleRowInnerContent__NhTHV {
-    border-bottom-color: rgba(var(--color-purple-700-rgb, 74, 35, 77), 0.2);
+    box-shadow: inset 0 -0.0625rem 0 0 rgba(var(--color-purple-700-rgb, 74, 35, 77), 0.2);
   }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInnerContent__NhTHV, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_titleRowInnerContent__NhTHV, .TitleBlock-module_collapseNavigationArea__x9hzQ .TitleBlock-module_titleRowInnerContent__NhTHV {
-    border-bottom-color: transparent;
+    box-shadow: none;
   }
   @container (max-width: calc(1080px - 1px)) {
     .TitleBlock-module_titleRowInnerContent__NhTHV {
-      border-bottom: none;
+      box-shadow: none;
+    }
+    .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_titleRowInnerContent__NhTHV {
+      box-shadow: none;
     }
   }
   @container (max-width: 576px) {
@@ -10393,7 +10464,6 @@
   .TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w {
     display: flex;
     width: 100%;
-    margin-top: -0.063rem;
     justify-content: space-between;
   }
   .TitleBlock-module_titleAndAdjacent__Q7W-m {
@@ -10456,7 +10526,6 @@
   }
   @container (max-width: calc(768px - 1px)) {
     .TitleBlock-module_hasNavigationTabs__v09jL .TitleBlock-module_navigationTabScrollerContainer__o234q {
-      margin-top: 0.063rem;
       height: 3.75rem;
       display: block;
       overflow-x: scroll;
@@ -10485,7 +10554,7 @@
     .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
       display: block;
       position: absolute;
-      top: 3.687rem;
+      top: 3.75rem;
       width: 3.75rem;
       height: 3.75rem;
       background: linear-gradient(0deg, var(--color-purple-600, #5f3361), rgba(var(--color-purple-600-rgb, 95, 51, 97), 0));

package/dist/types/Illustration/Spot/Spot.d.ts

@@ -10,6 +10,11 @@ export declare const Informative: ({ enableAspectRatio, ...restProps }: SpotProp
 export declare const Negative: ({ enableAspectRatio, ...restProps }: SpotProps) => JSX.Element;
 export declare const Positive: ({ enableAspectRatio, ...restProps }: SpotProps) => JSX.Element;
 export declare const Assertive: ({ enableAspectRatio, ...restProps }: SpotProps) => JSX.Element;
+/**
+ * Template Library / PCD
+ */
+export declare const PCDSurvey: ({ enableAspectRatio, ...restProps }: SpotProps) => JSX.Element;
+export declare const PCDPulseSurvey: ({ enableAspectRatio, ...restProps }: SpotProps) => JSX.Element;
 /**
  * Template Library / Engagement
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.3.6",
+  "version": "2.4.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Container/Container.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { type ContentProps } from '~components/Content'
-import styles from './Container.module.scss'
+import styles from './Container.module.css'
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3086156812/Layout Guidance} |

package/src/Content/Content.module.css

@@ -0,0 +1,15 @@
+@layer kz-components {
+  .content {
+    max-width: var(--layout-content-max-width);
+    margin: 0 var(--layout-content-side-margin);
+    width: 100%;
+
+    /* Setting a min-width: 0 will maintain the gutter margins when the inner contents has something wider than the page (e.g. scrollable table) */
+    min-width: 0;
+
+    /* Currently unable to do media query equations so using a fixed value instead */
+    @media (width <= 1079px) {
+      margin: 0 var(--content-margin-width-on-medium-and-small);
+    }
+  }
+}

package/src/Content/Content.tsx

@@ -1,7 +1,7 @@
 import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './Content.module.scss'
+import styles from './Content.module.css'
 
 export type ContentProps = {
   children?: React.ReactNode

package/src/Content/_docs/Content.stories.tsx

@@ -51,7 +51,7 @@ export const Example: Story = {
     </Container>
   ),
   parameters: {
-    chromatic: { disable: false },
+    chromatic: { disable: false, viewports: [1079, 1200] },
     docs: {
       canvas: {
         sourceState: 'shown',

package/src/Content/_variables.css

@@ -0,0 +1,5 @@
+/* This replicates the layout max-width logic in
+ packages/components/TitleBlock/TitleBlock.module.scss */
+:root {
+  --content-margin-width-on-medium-and-small: 12px;
+}

package/src/Divider/Divider.module.css

@@ -0,0 +1,41 @@
+@layer kz-components {
+  /* 
+  Use different tokens with different opacities across the Zen and Heart themes, by assuming that when Zen is applied there won't be any CSS variables declared.
+  */
+
+  :root {
+    --dt-content-border-color: rgb(var(--color-gray-600-rgb), 0.1);
+  }
+
+  .wrapper {
+    width: 100%;
+    border: 0;
+    margin: 0;
+    border-radius: var(--border-solid-border-radius);
+
+    /* 
+    This is here to protect against a global style in a consumer.
+    https://github.com/cultureamp/murmur/blob/master/app/assets/stylesheets/legacy/modules/_body.scss
+    */
+    visibility: visible;
+  }
+
+  .content,
+  .menuSeparator {
+    border-top: 1px solid var(--dt-content-border-color);
+  }
+
+  .canvas {
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+    border-color: var(--dt-content-border-color);
+  }
+
+  .reversed {
+    border-color: rgb(var(--color-white-rgb), 0.1);
+  }
+
+  .menuSeparator {
+    margin: 5px 0;
+  }
+}