@cdc/core 4.26.1 → 4.26.3

package/styles/_global.scss

@@ -83,7 +83,7 @@ strong {
   }
 
   &.danger {
-    background-color: $red;
+    background-color: var(--red);
     padding: 0em 0.6em 0em;
     height: 1.6em;
     font-size: 0.8 em;
@@ -131,7 +131,7 @@ textarea {
   display: flex;
   text-decoration: none;
   color: #444;
-  border: $lightGray 1px solid;
+  border: var(--lightGray) 1px solid;
   position: relative;
   transition: 0.2s all;
   font-size: 1em;
@@ -139,7 +139,7 @@ textarea {
   &:before {
     content: ' ';
     width: 5px;
-    background: $blue;
+    background: var(--blue);
     left: -1px;
     top: -1px;
     bottom: -1px;
@@ -147,7 +147,7 @@ textarea {
   }
 
   &:hover {
-    background: $lightestGray;
+    background: var(--lightestGray);
     transition: 0.2s all;
     color: #444;
   }
@@ -158,7 +158,7 @@ textarea {
 
   svg {
     width: 60px;
-    color: $blue;
+    color: var(--blue);
     margin-right: 1rem;
 
     path {
@@ -186,8 +186,8 @@ section.footnotes {
 }
 
 .btn.btn-primary:not([disabled]) {
-  background-color: $blue;
-  border-color: $blue;
+  background-color: var(--blue);
+  border-color: var(--blue);
 
   &:hover:not([disabled]) {
     background-color: color.adjust($blue, $lightness: -5%);

package/styles/_reset.scss

@@ -1,4 +1,4 @@
-.cdc-open-viz-module {
+.cove-visualization {
   margin: 0;
   font-family: var(--app-font-main);
   font-size: 1em;
@@ -11,7 +11,7 @@
     outline: none !important;
   }
 }
-.cdc-open-viz-module {
+.cove-visualization {
   applet,
   object,
   iframe,

package/styles/{v2/base → base}/_file-selector.scss

@@ -2,19 +2,19 @@
   padding: 1rem 3rem;
   text-align: center;
   font-size: 0.875rem;
-  color: $mediumGray;
-  border: $lightGray 2px dashed;
+  color: var(--mediumGray);
+  border: var(--lightGray) 2px dashed;
   border-radius: 0.2rem;
   cursor: pointer;
   transition: 0.1s all;
 
   &.drag-active {
-    background-color: $lightestGray;
+    background-color: var(--lightestGray);
   }
 
   span {
     white-space: pre;
-    color: $blue;
+    color: var(--blue);
     text-decoration: underline;
   }
 }

package/styles/{v2/base → base}/_general.scss

@@ -1,5 +1,3 @@
-@import '../themes/color-definitions';
-
 .cove {
   margin: 0;
   font-family: var(--app-font-main);
@@ -8,14 +6,14 @@
   font-weight: 400;
   font-style: normal;
   line-height: 1.4;
-  color: $baseColor;
+  color: var(--baseColor);
   text-rendering: optimizeLegibility;
 
   small {
     display: block;
     font-size: 0.8rem;
     font-style: italic;
-    color: $mediumGray;
+    color: var(--mediumGray);
   }
 
   .sr-only,

package/styles/{v2/base → base}/index.scss

@@ -1,4 +1,4 @@
-// @import 'reset'; //TODO: Enable after cove refactor
+@import 'reset';
 
 @import 'general';
 @import 'heading';

package/styles/base.scss

@@ -1,10 +1,5 @@
-@use 'sass:string';
-
 // Imports
-@import 'reset';
-@import 'variables';
-@import 'global-variables';
-@import 'filters';
+@import 'utils/properties';
 
 body.post-type-cdc_visualization .visx-tooltip {
   z-index: 1000000;
@@ -14,177 +9,124 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
   top: 0 !important;
 }
 
-.cdc-open-viz-module {
+.cove-visualization {
+  @import 'base/reset';
+
   position: relative;
-  line-height: 1.4;
+  margin: 0;
+  font-family: var(--app-font-main);
+  font-size: 1em;
+  line-height: 1.5;
+  font-weight: 400;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
   // Force printing chart images
   -webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
   color-adjust: exact !important; /* Firefox 48 – 96 */
   print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
 
-  @import 'global';
-  @import 'button-section';
-  @import 'series-list';
-
-  input[type='range'] {
-    appearance: auto !important;
+  .outline-none {
+    outline: none !important;
   }
 
-  $theme: (
-    'amber': (
-      '#fbab18',
-      '#ffd54f',
-      '#ffecb3',
-      '#fff7e1'
-    ),
-    'blue': (
-      '#005eaa',
-      '#88c3ea',
-      '#c0e9ff',
-      '#edf9ff'
-    ),
-    'brown': (
-      '#705043',
-      '#ad907b',
-      '#d7ccc8',
-      '#f2ebe8'
-    ),
-    'cyan': (
-      '#006778',
-      '#65b0bd',
-      '#cce5e9',
-      '#ebf5f6'
-    ),
-    'green': (
-      '#4b830d',
-      '#84bc49',
-      '#dcedc8',
-      '#f1f8e9'
-    ),
-    'indigo': (
-      '#26418f',
-      '#92a6dd',
-      '#dee8ff',
-      '#f2f6ff'
-    ),
-    'orange': (
-      '#bb4d00',
-      '#ffad42',
-      '#ffe97d',
-      '#fff4cf'
-    ),
-    'pink': (
-      '#af4448',
-      '#e57373',
-      '#ffc2c2',
-      '#ffe7e7'
-    ),
-    'purple': (
-      '#712177',
-      '#b890bb',
-      '#e3d3e4',
-      '#f7f2f7'
-    ),
-    'slate': (
-      '#29434e',
-      '#7e9ba5',
-      '#b6c6d2',
-      '#e2e8ed'
-    ),
-    'teal': (
-      '#00695c',
-      '#4ebaaa',
-      '#ceece7',
-      '#ebf7f5'
-    )
-  );
-
-  // These are required because Chronic has pages that still use TP4 and these Bootstrap5 margin classes aren't defined on those pages
-  .me-0 {
-    margin-right: 0 !important;
-  }
-  .me-1 {
-    margin-right: 0.25rem !important;
-  }
-  .me-2 {
-    margin-right: 0.5rem !important;
-  }
-  .me-3 {
-    margin-right: 1rem !important;
-  }
-  .me-4 {
-    margin-right: 1.5rem !important;
-  }
-  .me-5 {
-    margin-right: 3rem !important;
-  }
-  .me-auto {
-    margin-right: auto !important;
-  }
-  .ms-0 {
-    margin-left: 0 !important;
-  }
-  .ms-1 {
-    margin-left: 0.25rem !important;
-  }
-  .ms-2 {
-    margin-left: 0.5rem !important;
-  }
-  .ms-3 {
-    margin-left: 1rem !important;
-  }
-  .ms-4 {
-    margin-left: 1.5rem !important;
-  }
-  .ms-5 {
-    margin-left: 3rem !important;
-  }
-  .ms-auto {
-    margin-left: auto !important;
+  // Normalize margins, padding, borders, and font inheritance for all common
+  // HTML elements so host-page styles don't bleed into visualizations.
+  applet,
+  object,
+  iframe,
+  h1, h2, h3, h4, h5, h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  legend,
+  caption,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-family: var(--app-font-main);
+    font-weight: normal;
+    vertical-align: baseline;
   }
-  .pe-0 {
-    padding-right: 0 !important;
-  }
-  .pe-1 {
-    padding-right: 0.25rem !important;
-  }
-  .pe-2 {
-    padding-right: 0.5rem !important;
-  }
-  .pe-3 {
-    padding-right: 1rem !important;
-  }
-  .pe-4 {
-    padding-right: 1.5rem !important;
-  }
-  .pe-5 {
-    padding-right: 3rem !important;
-  }
-  .pe-auto {
-    padding-right: auto !important;
-  }
-  .ps-0 {
-    padding-left: 0 !important;
-  }
-  .ps-1 {
-    padding-left: 0.25rem !important;
-  }
-  .ps-2 {
-    padding-left: 0.5rem !important;
-  }
-  .ps-3 {
-    padding-left: 1rem !important;
+
+  * {
+    box-sizing: border-box;
   }
-  .ps-4 {
-    padding-left: 1.5rem !important;
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
   }
-  .ps-5 {
-    padding-left: 3rem !important;
+
+  sup {
+    top: -0.5em;
   }
-  .ps-auto {
-    padding-left: auto !important;
+
+  sub {
+    bottom: -0.25em;
   }
-  .fw-bold {
-    font-weight: 700 !important;
+
+  @import 'global';
+  @import 'button-section';
+  @import 'series-list';
+
+  input[type='range'] {
+    appearance: auto !important;
   }
 }

package/styles/cove-main.scss

@@ -1,8 +1,5 @@
-@import 'v2/utils/breakpoints';
+@import 'utils/breakpoints';
 @import 'base';
 @import 'heading-colors';
-@import 'v2/themes/color-definitions';
-@import 'variables';
-@import '_common-components';
-@import 'v2/components/ui/tooltip';
-@import 'v2/main.scss';
+@import '../components/ui/tooltip';
+@import 'main';

package/styles/layout/_component.scss

@@ -0,0 +1,110 @@
+@import 'wrapper-padding';
+
+.cove-visualization {
+  border-radius: 3px;
+}
+
+.cove-visualization .cove-visualization__body {
+  border: solid 1px #ccc;
+  border-top: none;
+
+  &.component--has-legacy-border:not(.component--has-title),
+  &.component--has-border-color-theme:not(.no-borders):not(.component--has-title) {
+    border-top: solid 1px #ccc;
+  }
+  border-radius: 0 0 3px 3px;
+  min-width: 0;
+  max-width: 100%;
+  @include cove-visualization-body-padding;
+
+  &.no-borders {
+    border: none;
+  }
+
+  &:not(.component--hide-background-color) {
+    background: $lightestGray;
+  }
+
+  &.component--tp5-treatment {
+    background: transparent;
+
+    >.cove-visualization__body-wrap {
+      padding: 0;
+    }
+
+    .cdc-callout {
+      box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
+      border: 1px solid #dff2f6;
+      margin: 0;
+      padding: 1.25rem;
+      border-radius: 0.25rem;
+      position: relative;
+      background: transparent;
+
+
+      .cdc-callout__flag {
+        position: absolute;
+        top: -0.36rem;
+        right: 1.08rem;
+        width: 1.84rem;
+        height: auto;
+      }
+
+      .cove-visualization__title,
+      .cove-visualization__header {
+        background: transparent;
+        border: 0;
+        color: var(--cool-gray-90, #1f2937);
+        margin: 0 0 1rem;
+        padding: 0;
+        border-radius: 0;
+      }
+
+      .cove-visualization__title h2,
+      .cove-visualization__header h2 {
+        color: var(--cool-gray-90, #1f2937);
+        font-family: var(--fonts-nunito, var(--app-font-secondary));
+        font-size: 1.1rem;
+        font-weight: 700;
+      }
+    }
+  }
+}
+
+.cove-visualization.type-chart,
+.cove-visualization.type-map {
+  .cove-visualization__body.component--tp5-treatment {
+    background: transparent;
+
+    .cdc-callout {
+      background: transparent;
+    }
+  }
+}
+
+.cove-visualization.type-chart {
+  .cdc-callout.tp5-chart-callout {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+
+    .legend-wrapper,
+    .tooltip-boundary,
+    .visx-parent-size,
+    >div {
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+    }
+
+    svg {
+      max-width: 100%;
+    }
+  }
+}
+
+.cove-visualization .cove-visualization__body-wrap {
+  min-width: 0;
+  max-width: 100%;
+  padding: 0;
+}

package/styles/{v2/layout → layout}/_data-table.scss

@@ -9,9 +9,9 @@
 }
 
 .cove-data-table__table-wrapper {
-  border-right: 1px solid $lightGray;
-  border-left: 1px solid $lightGray;
-  border-bottom: 1px solid $lightGray;
+  border-right: 1px solid var(--lightGray);
+  border-left: 1px solid var(--lightGray);
+  border-bottom: 1px solid var(--lightGray);
   overflow-x: auto;
 }
 
@@ -22,7 +22,7 @@
   background-size: 15px 15px; // Need to define both for IE11
   background-position: right 0.7em center;
   background-repeat: no-repeat;
-  border: $lightGray 1px solid;
+  border: var(--lightGray) 1px solid;
   border-bottom: 0;
   cursor: pointer;
 
@@ -34,7 +34,7 @@
   &.collapsed {
     //TODO find fix
     //background-image: url(~@cdc/core/core/assets/icon-plus.svg);
-    border-bottom: $lightGray 1px solid;
+    border-bottom: var(--lightGray) 1px solid;
   }
 }
 
@@ -53,7 +53,7 @@
 
   thead {
     color: #fff;
-    background-color: $mediumGray;
+    background-color: var(--mediumGray);
     user-select: none;
 
     tr {
@@ -68,7 +68,7 @@
       position: relative;
       text-align: left;
       cursor: pointer;
-      border-right: 1px solid $lightGray !important;
+      border-right: 1px solid var(--lightGray) !important;
 
       svg {
         margin-left: 1rem;

package/styles/layout/_wrapper-padding.scss

@@ -0,0 +1,27 @@
+@mixin cove-visualization-body-padding {
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+
+  &.component--has-legacy-border,
+  &.component--has-border-color-theme,
+  &.component--has-background,
+  &.component--has-accent {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+
+}
+
+
+@mixin cove-visualization-body-wrap-inline-padding {
+  padding-inline: 0;
+
+  .cove-visualization__body.component--has-legacy-border &,
+  .cove-visualization__body.component--has-border-color-theme &,
+  .cove-visualization__body.component--has-background &,
+  .cove-visualization__body.component--has-accent & {
+    padding-inline: 1rem;
+  }
+}

package/styles/{v2/main.scss → main.scss}

@@ -20,6 +20,8 @@
 
   .subtext {
     margin-top: 1em;
+    font-size: var(--app-font-size);
+    line-height: var(--visualization-body-line-height);
   }
 
   .warning {
@@ -56,4 +58,4 @@
   @include breakpointClass(md) {
     font-size: 16px;
   }
-}
+}