refactor/dev-9095-scss-refactor

.storybook/coreStyles_storybook.scss

@@ -0,0 +1,6 @@
+@import '@cdc/core/styles/base';
+@import '@cdc/core/styles/heading-colors';
+@import '@cdc/core/styles/v2/themes/color-definitions';
+@import '@cdc/core/styles/variables';
+@import '@cdc/core/styles/v2/components/ui/tooltip';
+@import '@cdc/core/styles/v2/main.scss'

.storybook/preview.jsx

@@ -1,5 +1,6 @@
 import { previewTheme } from './coveSbThemes'
 import * as React from 'react'
+import './coreStyles_storybook.scss'
 
 export const parameters = {
   options: {

packages/chart/src/components/EditorPanel/components/panels.scss

@@ -1,9 +1,7 @@
-@import '@cdc/core/styles/v2/themes/color-definitions';
-
 .date-highlight {
   select,
   input {
-    background: $lightestGray;
+    background: var(--lightestGray);
   }
 
   &__day-selection {
@@ -15,17 +13,17 @@
     .week-button {
       margin-bottom: 0;
       border-radius: 50%;
-      color: $darkGray;
+      color: var(--darkGray);
       width: 24px;
       height: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
-      background: $lightestGray;
+      background: var(--lightestGray);
       margin: 5px 2px 0;
 
       &--active {
-        background: $primary;
+        background: var(--primary);
         color: white;
       }
     }

packages/chart/src/components/EditorPanel/editor-panel.scss

@@ -1,11 +1,3 @@
-@import '@cdc/core/styles/base';
-@import '@cdc/core/styles/v2/themes/color-definitions';
-
-//TODO: Remove after COVE refactor
-.cove {
-  @import '@cdc/core/styles/v2/layout/tooltip.scss';
-}
-
 .cdc-open-viz-module.type-chart {
   .viewport-overrides {
     button {

packages/chart/src/coreStyles_chart.scss

@@ -0,0 +1,3 @@
+@import '@cdc/core/styles/base';
+@import '@cdc/core/styles/heading-colors';
+@import '@cdc/core/styles/v2/themes/color-definitions';

packages/chart/src/index.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import CdcChart from './CdcChart'
+import './coreStyles_chart.scss'
 
 import 'react-tooltip/dist/react-tooltip.css'
 

packages/chart/src/scss/main.scss

@@ -1,6 +1,50 @@
-@import '@cdc/core/styles/base';
-@import '@cdc/core/styles/heading-colors';
-@import '@cdc/core/styles/v2/themes/color-definitions';
+@mixin breakpoint($class) {
+  @if $class == xs {
+    @media (max-width: 767px) {
+      @content;
+    }
+  } @else if $class == sm {
+    @media (min-width: 768px) {
+      @content;
+    }
+  } @else if $class == md {
+    @media (min-width: 960px) {
+      @content;
+    }
+  } @else if $class == lg {
+    @media (min-width: 1300px) {
+      @content;
+    }
+  } @else {
+    @warn "Breakpoint mixin supports: xs, sm, md, lg";
+  }
+}
+
+@mixin breakpointClass($class) {
+  @if $class == xs {
+    &.xs,
+    &.xxs {
+      @content;
+    }
+  } @else if $class == sm {
+    &.sm,
+    &.md,
+    &.lg {
+      @content;
+    }
+  } @else if $class == md {
+    &.md,
+    &.lg {
+      @content;
+    }
+  } @else if $class == lg {
+    &.lg {
+      @content;
+    }
+  } @else {
+    @warn "Breakpoint Class mixin supports: xs, sm, md, lg";
+  }
+}
 
 .form-container {
   overflow-y: auto;
@@ -129,7 +173,7 @@
     padding: 15px;
     vertical-align: top;
     text-align: left;
-    border: 1px solid $lightGray;
+    border: 1px solid var(--lightGray);
     position: relative;
 
     &__inner {

packages/core/components/Layout/components/Sidebar/components/sidebar.styles.scss

@@ -1,5 +1,3 @@
-@import '@cdc/core/styles/v2/themes/_color-definitions.scss';
-
 .cdc-editor .configure .type-dashboard .sidebar {
   top: 0;
 }
@@ -210,7 +208,7 @@
 
       svg {
         width: 60px;
-        color: $blue;
+        color: var(--blue);
         margin-right: 1rem;
         height: 60px; // IE11
         path {

packages/core/styles/_global-variables.scss

@@ -69,6 +69,7 @@ $colors: (
     @each $key, $value in $colors {
       --#{$key}: #{$value};
     }
+    --editorWidth: 350px;
   }
 }
 

packages/core/styles/_reset.scss

@@ -146,11 +146,4 @@
       half as far down as the superscript moved up */
     bottom: -0.25em;
   }
-
-  ul > li:first-child {
-    margin-top: auto;
-  }
-  ul > li:last-of-type {
-    margin-bottom: auto;
-  }
 }

packages/dashboard/src/CdcDashboardComponent.tsx

@@ -19,20 +19,19 @@ import Loading from '@cdc/core/components/Loading'
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import getViewport from '@cdc/core/helpers/getViewport'
 
-import CdcMap from '@cdc/map'
-import CdcChart from '@cdc/chart'
-import CdcDataBite from '@cdc/data-bite'
-import CdcWaffleChart from '@cdc/waffle-chart'
-import CdcMarkupInclude from '@cdc/markup-include'
-import CdcFilteredText from '@cdc/filtered-text'
+import CdcChart from '@cdc/chart/src/CdcChart'
+import CdcDataBite from '@cdc/data-bite/src/CdcDataBite'
+import CdcMap from '@cdc/map/src/CdcMap'
+import CdcWaffleChart from '@cdc/waffle-chart/src/CdcWaffleChart'
+import CdcMarkupInclude from '@cdc/markup-include/src/CdcMarkupInclude'
+import CdcFilteredText from '@cdc/filtered-text/src/CdcFilteredText'
 
 import Grid from './components/Grid'
 import Header from './components/Header/Header'
 import DataTable from '@cdc/core/components/DataTable'
 import MediaControls from '@cdc/core/components/MediaControls'
 
 import './scss/main.scss'
-import '@cdc/core/styles/v2/main.scss'
 
 import VisualizationsPanel from './components/VisualizationsPanel'
 import dashboardReducer from './store/dashboard.reducer'