feat(ui): fp-1499 inject cms styles, add colors

The colors are also added in #498.

fractal.config.js

@@ -6,10 +6,13 @@ const mandelbrot = require('@frctl/mandelbrot');
 const fractal = require('@tacc/core-styles/fractal.config.js');
 const themeConfig = require('@tacc/core-styles/fractal.config.theme.js');
 
-themeConfig.styles = [
-  'default'
-];
-const theme = mandelbrot(themeConfig);
+const theme = mandelbrot(Object.assign(themeConfig, {
+  skin: Object.assign(themeConfig.skin, {
+    accent: '#000000',
+    complement: '#ffffff',
+    links: '#877453',
+  })
+}));
 
 const coreStylesRoot = path.join(
   path.dirname(require.resolve('@tacc/core-styles')),
@@ -20,6 +23,19 @@ const coreStylesRoot = path.join(
 fractal.components.set('path',
   path.join(coreStylesRoot, 'src/lib/_imports')
 );
+fractal.components.set('default.context', {
+  styles: {
+    internal: [
+      '/settings/border.css',
+      '/settings/max-width.css',
+    ],
+    external: [
+      '/static/site_cms/css/build/color.css',
+      '/static/site_cms/css/build/font.css',
+      '/static/site_cms/css/build/space.css',
+    ]
+  }
+});
 
 fractal.web.set('static.path',
   path.join(coreStylesRoot, 'dist')

package.json

@@ -16,8 +16,7 @@
   "scripts": {
     "build": "npm run build:css && npm run build:demo",
     "build:css": "bin/build-css.js --project=$npm_config_project --build-id=$npm_config_build_id",
-    "build:demo": "fractal build",
-    "start": "fractal start --sync"
+    "build:demo": "fractal build"
   },
   "homepage": "https://github.com/TACC/Core-CMS"
 }

taccsite_cms/static/site_cms/css/src/_imports/settings/color.css

@@ -1,12 +1,26 @@
 @import url("@tacc/core-styles/src/lib/_imports/settings/color.css");
 
 :root {
+
+  /* Accent */
   /* CAVEAT: A standard accent color definition is pending more designs */
   /* NOTE: The new Frontera and TACC designs both have brown and blue accents */
-  --global-color-accent--normal: #877453;
+  --global-color-accent--x-light: #F2DFBD; /* originally #e3d7fd */
+  --global-color-accent--light: #BDA374;   /* originally #a387ed */
+  --global-color-accent--normal: #877453;  /* originally #784fe8 */
+  --global-color-accent--dark: #64563E;    /* originally #6039cc */
+  --global-color-accent--x-dark: #403014;  /* originally #3d189b */
+
+  --global-color-accent--alt: #E0D8C9;     /* originally #d2cce7 */
+  --global-color-accent--weak: #9D702140;  /* originally #6039cc40 */
+
+
+
+  /* Link */
 
   /* CAVEAT: Not accessible within paragraph text (edge case as of 2021-08) */
   --global-color-link-on-light--normal: #003399;
   /* WARNING: This color is from Dev not Design (not rendered as of 2021-08) */
   --global-color-link-on-dark--normal: #0088FF;
+
 }