@cdc/core 4.25.8 → 4.25.11

package/components/ui/accordion.styles.css

@@ -1,3 +1,60 @@
+/* Accordion component styles */
+
 .accordion__heading {
   background: var(--lightestGray);
 }
+
+.accordion__button {
+  cursor: pointer;
+  font-size: 1em;
+  padding: 0.3em 1em;
+  width: 100%;
+  text-align: left;
+  position: relative;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.accordion__panel:first-child {
+  margin-top: 0;
+}
+
+.accordion__button:before {
+  display: inline-block;
+  content: '';
+  height: 7px;
+  width: 7px;
+  margin-right: 1em;
+  border-bottom: 2px solid currentColor;
+  border-right: 2px solid currentColor;
+  transform: rotate(-45deg) translateY(-50%);
+  right: 0;
+  position: absolute;
+  top: 50%;
+  transition: 0.1s all;
+}
+
+.accordion__button[aria-expanded='true']::before,
+.accordion__button[aria-selected='true']::before {
+  transform: rotate(45deg) translateY(-50%);
+  margin-right: 1.3em;
+  transition: 0.1s all;
+}
+
+.accordion__panel {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 1em 1.25em 2em;
+  animation: fadein 0.2s ease-in;
+}
+
+.accordion__panel h5 {
+  font-size: 0.8em;
+}
+
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/contexts/EditorContext.ts

@@ -0,0 +1,18 @@
+import { WCMSProps } from '@cdc/core/types/WCMSProps'
+import { Dispatch, createContext } from 'react'
+import EditorActions from './editor.actions'
+import { EditorState } from '@cdc/core/contexts/editor.reducer'
+
+export type EditorCTX = WCMSProps &
+  EditorState & {
+    displayName?: string
+    setTempConfig: Function
+  }
+
+const ConfigContext = createContext<EditorCTX>({
+  displayName: 'ConfigContext',
+  setTempConfig: () => {}
+} as unknown as EditorCTX)
+
+export default ConfigContext
+export const EditorDispatchContext = createContext<Dispatch<EditorActions>>(() => {})

package/contexts/editor.actions.ts

@@ -0,0 +1,28 @@
+import { type Action } from '@cdc/core/types/Action'
+import { type ViewPort } from '@cdc/core/types/ViewPort'
+import { type Visualization } from '@cdc/core/types/Visualization'
+import { type DataSet } from '@cdc/core/types/DataSet'
+
+type EDITOR_SAVE = Action<'EDITOR_SAVE', Visualization>
+type EDITOR_SET_CONFIG = Action<'EDITOR_SET_CONFIG', Visualization>
+type EDITOR_TEMP_SAVE = Action<'EDITOR_TEMP_SAVE', Visualization>
+type EDITOR_SET_ERRORS = Action<'EDITOR_SET_ERRORS', string[]>
+type EDITOR_SET_VIEWPORT = Action<'EDITOR_SET_VIEWPORT', ViewPort>
+type EDITOR_SET_GLOBALACTIVE = Action<'EDITOR_SET_GLOBALACTIVE', number>
+type SET_DASHBOARD_DATASET = Action<
+  'SET_DASHBOARD_DATASET',
+  { datasetKey: string; oldDatasetKey?: string; dataset: DataSet }
+>
+type DELETE_DATASET = Action<'DELETE_DASHBOARD_DATASET', { datasetKey: string }>
+
+type actions =
+  | EDITOR_SAVE
+  | EDITOR_TEMP_SAVE
+  | EDITOR_SET_ERRORS
+  | EDITOR_SET_VIEWPORT
+  | EDITOR_SET_GLOBALACTIVE
+  | EDITOR_SET_CONFIG
+  | DELETE_DATASET
+  | SET_DASHBOARD_DATASET
+
+export default actions

package/contexts/editor.reducer.ts

@@ -0,0 +1,94 @@
+import _ from 'lodash'
+import EditorActions from './editor.actions'
+import { Visualization } from '@cdc/core/types/Visualization'
+import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
+import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
+
+export type EditorState = {
+  config?: Visualization
+  tempConfig?: Visualization | null
+  errors: string[]
+  currentViewport: string
+  globalActive: number
+  newViz?: boolean
+}
+const reducer = (state: EditorState, action: EditorActions): EditorState => {
+  switch (action.type) {
+    case 'EDITOR_SAVE': {
+      return { ...state, config: action.payload, tempConfig: null }
+    }
+    case 'EDITOR_SET_CONFIG': {
+      return { ...state, config: action.payload }
+    }
+    case 'SET_DASHBOARD_DATASET': {
+      const { dataset, datasetKey, oldDatasetKey } = action.payload
+      const oldDataset = oldDatasetKey ? state.config?.datasets[oldDatasetKey] : {}
+      const config = cloneConfig(state.config)
+      if (oldDatasetKey) {
+        const changeDatasets = _config => {
+          _config.rows?.forEach(row => {
+            if (row.dataKey === oldDatasetKey) {
+              row.dataKey = datasetKey
+            }
+          })
+          Object.values(_config.visualizations || {}).forEach((viz: any) => {
+            if (viz.dataKey === oldDatasetKey) {
+              viz.dataKey = datasetKey
+            }
+          })
+        }
+        applyMultiDashboards(config, changeDatasets)
+        delete config.datasets[oldDatasetKey]
+      }
+      Object.values(config.datasets).forEach(dataset => {
+        dataset.preview = false
+      })
+      config.datasets[datasetKey] = { ...oldDataset, ...dataset }
+      return { ...state, config }
+    }
+    case 'DELETE_DASHBOARD_DATASET': {
+      const { datasetKey } = action.payload
+      const deleteDatasetKeys = _config => {
+        _config.rows?.forEach(row => {
+          if (row.dataKey === datasetKey) {
+            delete row.dataKey
+          }
+        })
+        Object.values(_config.visualizations || {}).forEach((viz: any) => {
+          if (viz.dataKey === datasetKey) {
+            delete viz.dataKey
+          }
+        })
+      }
+      const config = cloneConfig(state.config)
+      applyMultiDashboards(config, deleteDatasetKeys)
+      delete config.datasets[datasetKey]
+      return { ...state, config }
+    }
+    case 'EDITOR_TEMP_SAVE': {
+      return { ...state, tempConfig: action.payload }
+    }
+    case 'EDITOR_SET_ERRORS': {
+      return { ...state, errors: action.payload }
+    }
+    case 'EDITOR_SET_VIEWPORT': {
+      return { ...state, currentViewport: action.payload }
+    }
+    case 'EDITOR_SET_GLOBALACTIVE': {
+      return { ...state, globalActive: action.payload }
+    }
+    default:
+      return state
+  }
+}
+
+const applyMultiDashboards = (config: Record<string, any>, mutationFunc: Function) => {
+  if (config.multiDashboards) {
+    config.multiDashboards.forEach(dashboard => {
+      mutationFunc(dashboard)
+    })
+  }
+  mutationFunc(config)
+}
+
+export default devToolsWrapper<EditorState, EditorActions>(reducer)

package/data/chartColorPalettes.ts

@@ -0,0 +1,118 @@
+import { updatePaletteNames } from '../helpers/updatePaletteNames'
+import { sharedPalettes } from './sharedPalettes'
+
+// Chart-specific color palettes with versioned structure
+
+const chartColorPalettesData = {
+  v1: {
+    'qualitative_bold': [
+      '#377eb8',
+      '#ff7f00',
+      '#4daf4a',
+      '#984ea3',
+      '#e41a1c',
+      '#ffff33',
+      '#a65628',
+      '#f781bf',
+      '#3399CC'
+    ],
+
+    'qualitative_soft': [
+      '#a6cee3',
+      '#1f78b4',
+      '#b2df8a',
+      '#33a02c',
+      '#fb9a99',
+      '#e31a1c',
+      '#fdbf6f',
+      '#ff7f00',
+      '#aca9eb'
+    ],
+    qualitative1: sharedPalettes.qualitative1,
+
+    qualitative2: sharedPalettes.qualitative2,
+
+    qualitative3: sharedPalettes.qualitative3,
+
+    qualitative4: sharedPalettes.qualitative4,
+
+    'sequential_blue': ['#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#084594'],
+    'sequential_blue_extended': ['#d5f6f9', '#99e2ed', '#5fb6d1', '#3189b0', '#116091', '#0a3e72'],
+    'sequential_orange_extended': ['#ffefcf', '#ffd49c', '#f7a866', '#eb7723', '#b95117', '#862b0b'],
+    'sequential_green': ['#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#005a32'],
+
+    colorblindsafe: sharedPalettes.colorblindsafe
+  },
+  v2: {
+    // New standardized v2 palettes per migration guide (underscore naming convention)
+    'sequential_orange': ['#FFE4D5', '#FED0B6', '#F7B99A', '#ED9E7C', '#E58061', '#DB6B49', '#C95936', '#A8462C', '#702B1D'],
+    'sequential_purple': ['#E2D3DF', '#CDB2C8', '#B78FAF', '#A6739B', '#935586', '#823A73', '#722161', '#5F2359', '#47264F'],
+    'sequential_blue': ['#DBE8F7', '#BED5ED', '#99BCE1', '#73A1D5', '#4E88C7', '#1E6BC0', '#0057B7', '#01418D', '#032659'],
+    'sequential_green': ['#D5F9F6', '#AEECE7', '#85DED7', '#63D2CA', '#3BBCAF', '#14A594', '#0A937F', '#0F7A68', '#105B4D'],
+    'qualitative_standard': ['#0057B7', '#722161', '#00B1CE', '#D94E5F', '#5A8E3F', '#FFB24D', '#FB7E38', '#032659', '#975722'],
+
+    // New v2-only palettes (no migration needed)
+    'sequential_teal': ['#e5fafc', '#b3e3ed', '#80cddf', '#4db8d1', '#00b1ce', '#03a2bd', '#0690a6', '#0d6e81', '#125261'],
+    'divergent_blue_cyan': ['#032659', '#014697', '#1D6ABF', '#6197D2', '#C1D2DB', '#5CCBDE', '#01ACC9', '#097F95', '#125261'],
+    'divergent_blue_purple': ['#032659', '#014697', '#1D6ABF', '#6197D2', '#C4CDE1', '#AF8CAA', '#935586', '#7C256B', '#47264F'],
+    'divergent_green_orange': ['#105B4D', '#16806E', '#3EA394', '#5EBFB3', '#FABF61', '#EE956C', '#E27447', '#AC4726', '#702B1D'],
+    'divergent_blue_orange': ['#032659', '#0057B7', '#0092C6', '#55B1A3', '#FFB24D', '#EA803B', '#DD622F', '#AF3423', '#660F14']
+  }
+}
+
+const twoColorPaletteData = {
+  v1: {
+    'monochrome-1': ['#a6cee3', '#15017a'],
+    'monochrome-2': ['#c2c0fc', '#15017a'],
+    'monochrome-3': ['#cab2d6', '#6a3d9a'],
+    'monochrome-4': ['#c2c0fc', '#6a3d9a'],
+    'monochrome-5': ['#fedab8', '#bf5b17'],
+    'cool-1': ['#b2df8a', '#1f78b4'],
+    'cool-2': ['#a6cee3', '#72d66b'],
+    'cool-3': ['#c2c0fc', '#386cb0'],
+    'cool-4': ['#72d66b', '#6a3d9a'],
+    'cool-5': ['#a6cee3', '#6a3d9a'],
+    'warm-1': ['#e31a1c', '#fedab8'],
+    'complementary-1': ['#1f78b4', '#e6ab02'],
+    'complementary-2': ['#1f78b4', '#ff7f00'],
+    'complementary-3': ['#6a3d9a', '#ff7f00'],
+    'complementary-4': ['#6a3d9a', '#e6ab02'],
+    'complementary-5': ['#df168c', '#1eb386']
+  },
+  v2: {
+    // All palettes using indexes [2,6] from their respective divergent palettes
+    'divergent_blue_purple': ['#1D6ABF', '#935586'],
+
+    'divergent_green_orange': ['#3EA394', '#E27447'],
+
+    'divergent_blue_cyan': ['#1D6ABF', '#01ACC9'],
+
+    'divergent_blue_orange': ['#0092C6', '#DD622F']
+  }
+}
+
+// Forecasting Palettes should be refactored to use versioned palettes
+const sequentialColors = {
+  'Sequential Blue': ['#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#084594'],
+  'Sequential Blue Two': ['#d5f6f9', '#99e2ed', '#5fb6d1', '#3189b0', '#116091', '#0a3e72'],
+  'Sequential Blue Three': sharedPalettes.sequentialBlueNine,
+  'Sequential Orange': ['#ffefcf', '#ffd49c', '#f7a866', '#eb7723', '#b95117', '#862b0b'],
+  'Sequential Orange Two': sharedPalettes.sequentialOrangeNine,
+  'Sequential Green': ['#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#005a32']
+}
+
+// Process and export chart color palettes with versioned structure
+export const chartColorPalettes = {
+  v1: updatePaletteNames(chartColorPalettesData.v1),
+  v2: updatePaletteNames(chartColorPalettesData.v2)
+}
+
+export const twoColorPalette = {
+  v1: updatePaletteNames(twoColorPaletteData.v1),
+  v2: updatePaletteNames(twoColorPaletteData.v2) // No changes for v2, but structured for consistency
+}
+
+export const sequentialPalettes = sequentialColors
+export const colorPalettesChart = chartColorPalettes
+export const colorPalettesChartV1 = chartColorPalettes.v1
+export const colorPalettesChartV2 = chartColorPalettes.v2

package/data/colorPalettes.ts

@@ -0,0 +1,9 @@
+import { mapColorPalettes, mapColorPalettesV1, mapColorPalettesV2 } from './mapColorPalettes'
+import { chartColorPalettes, sequentialPalettes, colorPalettesChart, colorPalettesChartV1, colorPalettesChartV2, twoColorPalette } from './chartColorPalettes'
+
+
+// Re-export map palettes (already processed in mapColorPalettes.ts)
+export { mapColorPalettes, mapColorPalettesV1, mapColorPalettesV2 }
+
+// Re-export chart palettes (already processed in chartColorPalettes.ts)
+export { chartColorPalettes, sequentialPalettes, colorPalettesChart, colorPalettesChartV1, colorPalettesChartV2, twoColorPalette }

package/data/mapColorPalettes.ts

@@ -0,0 +1,45 @@
+import { updatePaletteNames } from '../helpers/updatePaletteNames'
+import { sharedPalettes } from './sharedPalettes'
+
+// Map-specific color palettes extracted from main colorPalettes.ts
+
+const mapColorPalettesData = {
+  v1: {
+    sequential_yellow_orange_red: ['#ffffcc', '#ffeda0', '#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c', '#bd0026', '#800026'],
+    sequential_yellow_orange_brown: ['#ffffe5', '#fff7bc', '#fee391', '#fec44f', '#fe9929', '#ec7014', '#cc4c02', '#993404', '#662506'],
+    sequential_pink_purple: ['#fff7f3', '#fde0dd', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177', '#49006a'],
+    sequential_blue_green: ['#fff7fb', '#ece2f0', '#d0d1e6', '#a6bddb', '#67a9cf', '#3690c0', '#02818a', '#016c59', '#014636'],
+    sequential_orange_red: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000'],
+    sequential_red: ['#fff5f0', '#fee0d2', '#fcbba1', '#fc9272', '#fb6a4a', '#ef3b2c', '#cb181d', '#a50f15', '#67000d'],
+    sequential_green_blue: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#267ba6', '#0868ac', '#084081'],
+    divergent_yellow_purple: ['#fff0b0', '#f5cc76', '#edae4b', '#e3683c', '#bf2a48', '#6d2059', '#8f0c4b', '#310958', '#0e0943'],
+    qualitative1: sharedPalettes.qualitative1,
+    qualitative2: sharedPalettes.qualitative2,
+    qualitative3: sharedPalettes.qualitative3,
+    qualitative4: sharedPalettes.qualitative4,
+    sequential_blue_extended: sharedPalettes.sequentialBlueNine,
+    sequential_orange_extended: sharedPalettes.sequentialOrangeNine,
+    colorblindsafe: sharedPalettes.colorblindsafe
+  },
+  v2: {
+    sequential_blue: ["#dbe8f7", "#bed5ed", "#99bce1", "#73a1d5", "#4e88c7", "#1e6bc0", "#0057b7", "#01418d", "#032659"],
+    sequential_teal: ["#e5fafc", "#b3e3ed", "#80cddf", "#4db8d1", "#00b1ce", "#03a2bd", "#0690a6", "#0d6e81", "#125261"],
+    sequential_purple: ["#e2d3df", "#cdb2c8", "#b78faf", "#a6739b", "#935586", "#823a73", "#722161", "#5f2359", "#47264f"],
+    sequential_orange: ["#ffe4d5", "#fed0b6", "#f7b99a", "#ed9e7c", "#e58061", "#db6b49", "#c95936", "#a8462c", "#702b1d"],
+    sequential_green: ["#d5f9f6", "#aeece7", "#85ded7", "#63d2ca", "#3bbcaf", "#14a594", "#0a937f", "#0f7a68", "#105b4d"],
+    divergent_blue_cyan: ["#032659", "#014697", "#1d6abf", "#6197d2", "#c1d2db", "#5ccbde", "#01acc9", "#097f95", "#125261"],
+    divergent_blue_purple: ["#032659", "#014697", "#1d6abf", "#6197d2", "#c4cde1", "#af8caa", "#935586", "#7c256b", "#47264f"],
+    divergent_green_orange: ["#105b4d", "#16806e", "#3ea394", "#5ebfb3", "#fabf61", "#ee956c", "#e27447", "#ac4726", "#702b1d"],
+    divergent_blue_orange: ["#032659", "#0057b7", "#0092c6", "#55b1a3", "#ffb24d", "#ea803b", "#dd622f", "#af3423", "#660f14"],
+    qualitative_standard: ["#0057b7", "#722161", "#00b1ce", "#d94e5f", "#5a8e3f", "#ffb24d", "#fb7e38", "#032659", "#975722"],
+  }
+}
+
+// Process and export map color palettes
+export const mapColorPalettes = {
+  v1: updatePaletteNames(mapColorPalettesData.v1),
+  v2: updatePaletteNames(mapColorPalettesData.v2)
+}
+
+export const mapColorPalettesV1 = mapColorPalettes.v1
+export const mapColorPalettesV2 = mapColorPalettes.v2

package/data/sharedPalettes.ts

@@ -0,0 +1,50 @@
+// Shared color palettes used across multiple components
+// These are exact matches found in both chart and map color palette files
+
+export const sharedPalettes = {
+  qualitative1: [
+    '#a6cee3',
+    '#1f78b4',
+    '#b2df8a',
+    '#33a02c',
+    '#fb9a99',
+    '#e31a1c',
+    '#6a3d9a',
+    '#cab2d6',
+    '#e31a90',
+    '#15017a',
+    '#c2c0fc'
+  ],
+
+  qualitative2: ['#7fc97f', '#beaed4', '#ff9', '#386cb0', '#f0027f', '#bf5b17', '#666', '#fedab8'],
+
+  qualitative3: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666'],
+
+  qualitative4: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ff3', '#a65628', '#f781bf'],
+
+  colorblindsafe: ['#e69f00', '#56b4e9', '#009e73', '#f0e442', '#0072b2', '#d55e00', '#cc79a7', '#000000', '#7e5803'],
+
+  sequentialBlueNine: [
+    '#f5feff',
+    '#e1fbff',
+    '#c0f2fd',
+    '#94e2ed',
+    '#5ebad4',
+    '#3695be',
+    '#2273a0',
+    '#0e5181',
+    '#093460'
+  ],
+
+  sequentialOrangeNine: [
+    '#fffdf0',
+    '#fff7dc',
+    '#ffe9c2',
+    '#ffd097',
+    '#f7a866',
+    '#eb7723',
+    '#b95117',
+    '#853209',
+    '#661f00'
+  ]
+}

package/dist/cove-main.css

@@ -519,15 +519,15 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
   background-color: rgb(0, 79.9, 144.5);
   border-color: rgb(0, 79.9, 144.5);
 }
-.cdc-open-viz-module .cove-form-select {
+.cdc-open-viz-module select.cove-form-select {
   font-family: var(--app-font-secondary);
   font-weight: 300;
   font-size: var(--filter-select-font-size);
   line-height: normal;
   padding-right: 3rem;
   border-radius: 0.333rem;
-  border: 1px solid var(--colors-gray-cool-10);
-  color: var(--colors-primary-text);
+  border: 1px solid var(--cool-gray-10) !important;
+  color: var(--cool-gray-90);
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
   background-repeat: no-repeat;
   background-position: right 0.5rem center;
@@ -728,6 +728,9 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
 .cdc-open-viz-module .ps-auto {
   padding-left: auto !important;
 }
+.cdc-open-viz-module .fw-bold {
+  font-weight: 700 !important;
+}
 
 .color-palette li.theme-purple,
 .btn.theme-purple {
@@ -1854,6 +1857,52 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
   background-color: #00695c;
 }
 
+/* Common component styles shared across packages */
+/* This file combines loader, warning-icon, and checkbox-group styles */
+/* Shared loader component */
+/* Used across: chart, dashboard, data-bite, waffle-chart packages */
+.loader {
+  width: 100%;
+  text-align: center;
+  display: inline-block;
+  animation: spin 1s linear infinite;
+}
+
+.loader::before {
+  content: "↻";
+}
+
+/* Shared warning icon component */
+/* TODO: Currently different panel classes on different packages */
+.accordion__button svg.warning-icon,
+.cove-accordion__button svg.warning-icon {
+  position: absolute;
+  right: 35px;
+  left: auto;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.warning-icon {
+  color: #d72f00;
+  width: 15px;
+  height: 15px;
+}
+
+.warning-icon path {
+  fill: #d8000c;
+}
+
+/* Shared checkbox group component */
+/* Used across: chart, data-bite, markup-include packages */
+.checkbox-group {
+  padding: 16px;
+  border: 1px solid #c4c4c4;
+  border-radius: 8px;
+  margin-top: 8px;
+  margin-bottom: 24px;
+}
+
 :root {
   --cove-tooltip-bg: #fff;
   --cove-tooltip-color: black;
@@ -4150,17 +4199,6 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
   background-color: #00695c;
 }
 
-.cove {
-  font-size: 16px;
-  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;
-}
 .cove .markup-include .theme-amber,
 .cove .type-waffle-chart .theme-amber,
 .cove .type-data-bite .theme-amber,
@@ -5292,6 +5330,17 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
   color: #005eaa;
   text-decoration: underline;
 }
+.cove {
+  font-size: 16px;
+  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;
+}
 .cove strong {
   font-weight: 600;
 }