Update css folder structure (#9071)

ui/app/css/base-styles.scss

@@ -1,8 +1,4 @@
-/*
-  Generic
- */
 
-@import './reset';
 
 * {
   box-sizing: border-box;
@@ -12,7 +8,6 @@ html,
 body {
   font-family: Roboto, Arial;
   color: #4d4d4d;
-  font-weight: 400;
   width: 100%;
   height: 100%;
   margin: 0;
@@ -25,15 +20,6 @@ html {
   min-height: 500px;
 }
 
-.app-root {
-  overflow: hidden;
-  position: relative;
-}
-
-.app-primary {
-  display: flex;
-}
-
 .mouse-user-styles {
   button:focus,
   input:focus,
@@ -121,19 +107,3 @@ input.form-control {
   }
 }
 
-.hide-text-overflow {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.pinned-to-bottom {
-  position: absolute;
-  bottom: 0;
-}
-
-.pinned-to-bottom-right {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}

ui/app/css/design-system/breakpoints.scss

@@ -0,0 +1,6 @@
+/*
+Responsive Breakpoints
+*/
+$break-small: 575px;
+$break-midpoint: 780px;
+$break-large: 576px;

ui/app/css/design-system/deprecated-colors.scss

@@ -0,0 +1,48 @@
+/**
+  These colors are either deprecated or will move into colors.scss
+  when approved for the design system
+**/
+
+// Base Colors
+$white: #fff;
+$black: #000;
+$orange: #ffa500;
+$red: #f00;
+$gray: #808080;
+
+/*
+  Colors
+  http://chir.ag/projects/name-that-color
+ */
+$gallery: #efefef;
+$wild-sand: #f6f6f6;
+$dusty-gray: #9b9b9b;
+$alto: #dedede;
+$alabaster: #fafafa;
+$silver-chalice: #aeaeae;
+$tundora: #4d4d4d;
+$nile-blue: #1b344d;
+$scorpion: #5d5d5d;
+$silver: #cdcdcd;
+$caribbean-green: #02c9b1;
+$monzo: #d0021b;
+$crimson: #e91550;
+$blue-lagoon: #038789;
+$purple: #690496;
+$tulip-tree: #ebb33f;
+$malibu-blue: #7ac9fd;
+$athens-grey: #e9edf0;
+$geyser: #d2d8dd;
+$manatee: #93949d;
+$spindle: #c7ddec;
+$mid-gray: #5b5d67;
+$cape-cod: #38393a;
+$dodger-blue: #3099f2;
+$ecstasy: #f7861c;
+$linen: #fdf4f4;
+$oslo-gray: #8c8e94;
+$polar: #fafcfe;
+$blizzard-blue: #bfdef3;
+$mischka: #dddee9;
+$web-orange: #f2a202;
+$mercury: #e5e5e5;

ui/app/css/design-system/index.scss

@@ -0,0 +1,4 @@
+@import './colors.scss';
+@import './deprecated-colors.scss';
+@import './typography.scss';
+@import './breakpoints.scss';

ui/app/css/design-system/typography.scss

@@ -148,4 +148,3 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
   font-family: $font-family;
   line-height: 140%;
 }
-

ui/app/css/index.scss

@@ -4,7 +4,9 @@
   They are included first because they will be used to replace bad variable names in itcss
   prior to it being fully removed from the system.
 */
-@import './variables/index';
+@import './reset.scss';
+@import './design-system/index';
+@import './base-styles.scss';
 
 /*
   ITCSS
@@ -17,7 +19,6 @@
  */
 @import './itcss/settings/index';
 @import './itcss/tools/index';
-@import './itcss/generic/index';
 @import './itcss/objects/index';
 @import './itcss/components/index';
 @import './itcss/trumps/index';

ui/app/css/itcss/settings/variables.scss

@@ -1,51 +1,3 @@
-/*
-  Variables
- */
-
-// Base Colors
-$white: #fff;
-$black: #000;
-$orange: #ffa500;
-$red: #f00;
-$gray: #808080;
-
-/*
-  Colors
-  http://chir.ag/projects/name-that-color
- */
-$gallery: #efefef;
-$wild-sand: #f6f6f6;
-$dusty-gray: #9b9b9b;
-$alto: #dedede;
-$alabaster: #fafafa;
-$silver-chalice: #aeaeae;
-$tundora: #4d4d4d;
-$nile-blue: #1b344d;
-$scorpion: #5d5d5d;
-$silver: #cdcdcd;
-$caribbean-green: #02c9b1;
-$monzo: #d0021b;
-$crimson: #e91550;
-$blue-lagoon: #038789;
-$purple: #690496;
-$tulip-tree: #ebb33f;
-$malibu-blue: #7ac9fd;
-$athens-grey: #e9edf0;
-$geyser: #d2d8dd;
-$manatee: #93949d;
-$spindle: #c7ddec;
-$mid-gray: #5b5d67;
-$cape-cod: #38393a;
-$dodger-blue: #3099f2;
-$ecstasy: #f7861c;
-$linen: #fdf4f4;
-$oslo-gray: #8c8e94;
-$polar: #fafcfe;
-$blizzard-blue: #bfdef3;
-$mischka: #dddee9;
-$web-orange: #f2a202;
-$mercury: #e5e5e5;
-
 /*
   Z-Indicies
  */
@@ -98,12 +50,6 @@ $sidebar-overlay-z-index: 25;
   mascot - 0 - remove?
  */
 
-/*
-  Responsive Breakpoints
- */
-$break-small: 575px;
-$break-midpoint: 780px;
-$break-large: 576px;
 
 /*
   Spacing Variables

ui/app/css/reset.scss

@@ -88,9 +88,7 @@ video {
   padding: 0;
   border: 0;
   font-size: 100%;
-  /* stylelint-disable */
   font: inherit;
-  /* stylelint-enable */
   vertical-align: baseline;
 }
 

ui/app/css/variables/index.scss

@@ -1,2 +0,0 @@
-@import './colors.scss';
-@import './typography.scss';