feat(Variables): Add a shared layer of variables for all themes

src/shared/styles/shared.css

@@ -1,2 +1,3 @@
 @import '@stencila/components/dist/stencila-components/stencila-components.css';
+@import './variables.css';
 @import './citations.css';

src/shared/styles/variables.css

@@ -0,0 +1,88 @@
+/*
+* These are the default CSS variables exposed within each theme, and should not be modified.
+* It is recommended to re-declare any necessary variables within your own theme.
+*/
+:--Article {
+  --max-width-media: 980px;
+  --max-width: 600px;
+
+  /* Font Families */
+  --font-family-display: serif;
+  --font-family-body: sans-serif;
+  --font-family-mono: monospace;
+
+  /* Font Sizes */
+  --font-size-body: 16px;
+  --font-size-headline: 1.953rem;
+  --font-size-h1: 1.2rem;
+  --font-size-h2: 1.563rem;
+  --font-size-h3: 1.25rem;
+  --font-size-h4: 1rem;
+  --font-size-h5: 0.8rem;
+  --font-size-h6: 0.725rem;
+  --font-size-90: 90%;
+  --font-size-80: 80%;
+  --font-size-75: 75%;
+
+  /* Theme Colors */
+  --color-stock: #fff;
+  --color-key: #363636;
+
+  /* Primary: Used for primary tone of the theme, for buttons, links, and other elements */
+  --color-primary-100: #cdddfc;
+  --color-primary-200: #b0c8fa;
+  --color-primary-300: #8db0f8;
+  --color-primary-400: #6092f6;
+  --color-primary-500: #1d64f3;
+  --color-primary-600: #1a5adb;
+  --color-primary-700: #164ebf;
+  --color-primary-800: #12409d;
+  --color-primary-900: #0d2d6f;
+
+  /* Accent: Used sparingly for design flourishes */
+  --color-accent: #5eff5d;
+
+  /* Neutral: For backgrounds and borders */
+  --color-neutral-100: #f7fafc;
+  --color-neutral-200: #edf2f7;
+  --color-neutral-300: #e2e8f0;
+  --color-neutral-400: #cbd5e0;
+  --color-neutral-500: #a0aec0;
+  --color-neutral-600: #718096;
+  --color-neutral-700: #4a5568;
+  --color-neutral-800: #2d3748;
+  --color-neutral-900: #1a202c;
+
+  /* Success: For positive actions or messages */
+  --color-success-100: #f0fff4;
+  --color-success-200: #c6f6d5;
+  --color-success-300: #9ae6b4;
+  --color-success-400: #68d391;
+  --color-success-500: #48bb78;
+  --color-success-600: #38a169;
+  --color-success-700: #2f855a;
+  --color-success-800: #276749;
+  --color-success-900: #22543d;
+
+  /* Warn: For recoverable errors or import noticesMain Theme Color */
+  --color-warn-100: #fffff0;
+  --color-warn-200: #fefcbf;
+  --color-warn-300: #faf089;
+  --color-warn-400: #f6e05e;
+  --color-warn-500: #ecc94b;
+  --color-warn-600: #ffa800;
+  --color-warn-700: #b7791f;
+  --color-warn-800: #975a16;
+  --color-warn-900: #744210;
+
+  /* Destroy: For severe errors or irreversible actions */
+  --color-destroy-100: #fff5f5;
+  --color-destroy-200: #fed7d7;
+  --color-destroy-300: #feb2b2;
+  --color-destroy-400: #fc8181;
+  --color-destroy-500: #f56565;
+  --color-destroy-600: #e53e3e;
+  --color-destroy-700: #c53030;
+  --color-destroy-800: #9b2c2c;
+  --color-destroy-900: #742a2a;
+}