@cdc/core 4.26.2 → 4.26.3

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;
   }
-}
+}

package/styles/{v2/themes → themes}/_color-definitions.scss

@@ -1,70 +1,58 @@
 @use 'sass:string';
 @use 'sass:list';
-@import './../../variables';
 
 $theme: (
-  'amber': (
-    '#fbab18',
+  'amber': ('#fbab18',
     '#ffd54f',
     '#ffecb3',
     '#fff7e1'
   ),
-  'blue': (
-    '#005eaa',
+  'blue': ('#005eaa',
     '#88c3ea',
     '#c0e9ff',
     '#edf9ff'
   ),
-  'brown': (
-    '#705043',
+  'brown': ('#705043',
     '#ad907b',
     '#d7ccc8',
     '#f2ebe8'
   ),
-  'cyan': (
-    '#007B91',
+  'cyan': ('#007B91',
     '#65b0bd',
     '#cce5e9',
     '#ebf5f6'
   ),
-  'green': (
-    '#4b830d',
+  'green': ('#4b830d',
     '#84bc49',
     '#dcedc8',
     '#f1f8e9'
   ),
-  'indigo': (
-    '#26418f',
+  'indigo': ('#26418f',
     '#92a6dd',
     '#dee8ff',
     '#f2f6ff'
   ),
-  'orange': (
-    '#bb4d00',
+  'orange': ('#bb4d00',
     '#ffad42',
     '#ffe97d',
     '#fff4cf'
   ),
-  'pink': (
-    '#af4448',
+  'pink': ('#af4448',
     '#e57373',
     '#ffc2c2',
     '#ffe7e7'
   ),
-  'purple': (
-    '#712177',
+  'purple': ('#712177',
     '#b890bb',
     '#e3d3e4',
     '#f7f2f7'
   ),
-  'slate': (
-    '#29434e',
+  'slate': ('#29434e',
     '#7e9ba5',
     '#b6c6d2',
     '#e2e8ed'
   ),
-  'teal': (
-    '#00695c',
+  'teal': ('#00695c',
     '#4ebaaa',
     '#ceece7',
     '#ebf7f5'
@@ -72,15 +60,15 @@ $theme: (
 );
 
 // .type-sparkline class used for creating sparklines
-// once v2 is released plz update html structure
-// to use .cove
-.markup-include,
-.type-waffle-chart,
-.type-data-bite,
-.type-filtered-text,
-.cdc-open-viz-module.type-chart.type-sparkline,
-.cove {
+.cove-visualization.type-markup-include,
+.cove-visualization.type-waffle-chart,
+.cove-visualization.type-data-bite,
+.cove-visualization.type-filtered-text,
+.cove-visualization.type-chart,
+.cove-visualization.type-chart.type-sparkline,
+.cove-visualization.type-map {
   @each $theme-name, $theme-colors in $theme {
+
     // Header
     .theme-#{$theme-name} {
       background-color: string.unquote(list.nth($theme-colors, 1));
@@ -90,18 +78,23 @@ $theme: (
     }
 
     &.theme-#{$theme-name} {
+
       /// area that appears underneath the title of the component.
-      .cove-component__content {
+      .cove-visualization__body {
+
         /// when there are borders on a component
         &:not(.no-borders) {
+
           /// borders are the theme color
-          &.component--has-borderColorTheme {
+          &.component--has-border-color-theme {
             border: 1px solid string.unquote(list.nth($theme-colors, 1));
           }
+
           /// using default border color to draw borders
-          &:not(.component--has-borderColorTheme) {
-            border: 1px solid $lightGray;
+          &:not(.component--has-border-color-theme) {
+            border: 1px solid var(--lightGray);
           }
+
           &.component--has-title {
             border-top: none !important;
           }
@@ -112,19 +105,22 @@ $theme: (
           border-left: 0.5rem solid string.unquote(list.nth($theme-colors, 1)) !important;
         }
 
-        /// Apply a background color
-        &.component--has-background:not(.component--hideBackgroundColor) {
+        /// Apply a background color (excluded when TP5 treatment is active)
+        &.component--has-background:not(.component--hide-background-color):not(.component--tp5-treatment) {
           background: string.unquote(list.nth($theme-colors, 3));
         }
       }
 
-      .cove-component__header {
+      .cove-visualization__title,
+      .cove-visualization__header {
         border-color: string.unquote(list.nth($theme-colors, 2));
       }
     }
 
     &.theme-#{$theme-name} {
-      .cove-component__header {
+
+      .cove-visualization__title,
+      .cove-visualization__header {
         border-color: string.unquote(list.nth($theme-colors, 2));
       }
     }
@@ -132,7 +128,7 @@ $theme: (
 }
 
 // Charts filter styles
-.cdc-open-viz-module {
+.cove-visualization {
   @each $theme-name, $theme-colors in $theme {
     &.theme-#{$theme-name} {
       .single-filters--tab .tab--active:not(.tab--simple) {
@@ -149,6 +145,14 @@ $theme: (
         background-color: string.unquote(list.nth($theme-colors, 1));
         color: #fff;
       }
+
+      .button__tab-bar--active {
+        outline: 2px solid string.unquote(list.nth($theme-colors, 1));
+      }
+
+      .apply:not([disabled]) {
+        background-color: string.unquote(list.nth($theme-colors, 1));
+      }
     }
 
     .theme-#{$theme-name} {
@@ -170,6 +174,7 @@ $theme: (
       .button__tab-bar--active {
         outline: 2px solid string.unquote(list.nth($theme-colors, 1));
       }
+
       .apply:not([disabled]) {
         background-color: string.unquote(list.nth($theme-colors, 1));
       }
@@ -239,4 +244,4 @@ $green-quaternary: #f1f8e9 !default;
 $amber-primary: #fbab18 !default;
 $amber-secondary: #ffd54f !default;
 $amber-tertiary: #ffecb3 !default;
-$amber-quaternary: #fff7e1 !default;
+$amber-quaternary: #fff7e1 !default;