8710 task: Integrating design system - created separate CSS output fo…

…r theme colours and other styles

.storybook/styles/storybook-app.scss

@@ -1,4 +1,5 @@
 @import 'styles/core';
+@import 'styles/theme';
 @import 'styles/common';
 @import './storybook-global';
 @import './storybook-icons';

config/rollup.config.js

@@ -29,7 +29,8 @@ export default (async () => ([
    */
   {
     input: [
-      'src/styles/core.ts'
+      'src/styles/core.ts',
+      'src/styles/theme.ts'
     ],
     output: {
       dir: 'dist',

src/styles/10-settings/_colours.scss

@@ -8,7 +8,9 @@
 
 :root {
   --colour-black: #000;
+  --colour-black-rgb: 0, 0, 0;
   --colour-white: #fff;
+  --colour-white-rgb: 255, 255, 255;
 
   --colour-amber-90: #382a00;
   --colour-amber-80: #4d3900;
@@ -58,6 +60,7 @@
   --colour-grey-80: #292929;
   --colour-grey-70: #5c5c5c;
   --colour-grey-60: #767676;
+  --colour-grey-60-rgb: 118, 118, 118;
   --colour-grey-50: #878787;
   --colour-grey-40: #999;
   --colour-grey-30: #b3b3b3;
@@ -97,13 +100,4 @@
   --colour-yellow-20: #fff9a6;
   --colour-yellow-10: #fffde2;
   --colour-yellow-05: #fffef0;
-
-  --link-colour: var(--colour-blue-60);
-  --link-colour-hover: var(--colour-blue-70);
-  --link-colour-focus-outline: var(--colour-blue-40);
-  --link-colour-active: var(--colour-blue-50);
-  --link-colour-disabled: var(--colour-grey-50);
-
-  --body-text-colour: var(--colour-grey-80);
-  --meta-text-colour: var(--colour-grey-60);
 }

src/styles/15-theme/__manifest.scss

@@ -0,0 +1,8 @@
+// ----------------------------------
+// UI Theme
+// ----------------------------------
+// Design System 1.0 Alpha
+// 2021-05-01
+// ----------------------------------
+
+@import 'colours';

src/styles/15-theme/_colours.scss

@@ -0,0 +1,18 @@
+// ----------------------------------
+// UI Theme
+// Colours
+// ----------------------------------
+// Design System 1.0 Alpha
+// 2021-05-01
+// ----------------------------------
+
+:root {
+  --link-colour: var(--colour-grey-80);
+  --link-colour-hover: var(--colour-grey-80);
+  --link-colour-focus-outline: var(--colour-blue-50);
+  --link-colour-active: var(--colour-grey-80);
+  --link-colour-disabled: var(--colour-grey-40);
+
+  --body-text-colour: var(--colour-grey-80);
+  --meta-text-colour: var(--colour-grey-60);
+}

src/styles/common.scss

@@ -14,7 +14,7 @@
 
 /* stylelint-disable scss/at-import-no-partial-leading-underscore */
 
-// Core variables e.g. base sizes and colors
+// Core variables e.g. base sizes and colours
 // @import '10-settings/__manifest';
 
 // Core style functions and mixins

src/styles/core.scss

@@ -14,9 +14,12 @@
 
 /* stylelint-disable scss/at-import-no-partial-leading-underscore */
 
-// Core variables e.g. base sizes and colors
+// Core variables e.g. base sizes and colours
 @import '10-settings/__manifest';
 
+// Theme variables e.g. specific colours and typography
+// @import '15-theme/__manifest';
+
 // Core style functions and mixins
 // @import '20-tools/__manifest';
 
@@ -38,9 +41,12 @@
  * @see {@link https://www.creativebloq.com/web-design/manage-large-scale-web-projects-new-css-architecture-itcss-41514731}
  */
 
-// Core variables e.g. base sizes and colors
+// Core variables e.g. base sizes and colours
 // @import '10-settings/__manifest';
 
+// Theme variables e.g. specific colours and typography
+// @import '15-theme/__manifest';
+
 // Core style functions and mixins
 // @import '20-tools/__manifest';
 

src/styles/theme.scss

@@ -0,0 +1,32 @@
+// ----------------------------------
+// UI theme
+// ----------------------------------
+// Design System 1.0 Alpha
+// 2021-05-01
+// ----------------------------------
+
+/**
+ * This file serves as the main entry point for the design system's
+ * standard theme variables (written in .scss).
+ *
+ * Unused @imports have been commented out to give a reference point.
+ */
+
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+
+// Core variables e.g. base sizes and colours
+// @import '10-settings/__manifest';
+
+// Theme variables e.g. specific colours and typography
+@import '15-theme/__manifest';
+
+// Core style functions and mixins
+// @import '20-tools/__manifest';
+
+// More detailed components such as buttons, alerts etc.
+// @import '30-components/__manifest';
+
+// Objects e/g grid or media object
+// @import '40-objects/__manifest';
+
+/* stylelint-enable scss/at-import-no-partial-leading-underscore */

src/styles/theme.ts

@@ -0,0 +1 @@
+import './theme.scss';