srcdev-nuxt-forms 1.0.0 → 1.1.0

package/README.md

@@ -1,41 +1,26 @@
 # Nuxt Forms Layer
 
-Create Nuxt extendable layer with this GitHub template.
+## NOTE: This is personal forms setup and not necessarily intended for widespread use
 
 ## Setup
 
 Make sure to install the dependencies:
 
 ```bash
-pnpm install
+npm install
 ```
 
-## Working on your theme
-
-Your theme is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.
-
-The `.playground` directory should help you on trying your theme during development.
-
-Running `pnpm dev` will prepare and boot `.playground` directory, which imports your theme itself.
-
 ## Distributing your theme
 
 ### Release it
+
 CLI Prompt assisted release and versioning
 
 ```bash
 npm run release
 ```
 
-Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.
-
-To do so, you only have to check if `files` in `package.json` are valid, then run:
-
-```bash
-npm publish --access public
-```
-
-Once done, your users will only have to run:
+## Install Nuxt Forms
 
 ```bash
 npm install --save your-theme
@@ -45,16 +30,16 @@ Then add the dependency to their `extends` in `nuxt.config`:
 
 ```ts
 defineNuxtConfig({
-  extends: 'your-theme'
-})
+  extends: 'your-theme',
+});
 ```
 
 ## Development Server
 
-Start the development server on http://localhost:3000
+Start the development server on <http://localhost:3000>
 
 ```bash
-pnpm dev
+npm dev
 ```
 
 ## Production
@@ -62,19 +47,23 @@ pnpm dev
 Build the application for production:
 
 ```bash
-pnpm build
+npm build
 ```
 
 Or statically generate it with:
 
 ```bash
-pnpm generate
+npm generate
 ```
 
 Locally preview production build:
 
 ```bash
-pnpm preview
+npm preview
 ```
 
-Checkout the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+## Themes
+
+Styles exist for multiple themes/variants, primary, secondary, tertiary, error etc.
+
+Colour scheme can be updated by modifying the css colour variables

package/assets/styles/forms/themes/_error.css

@@ -1,22 +1,22 @@
 :root {
   [data-form-theme='error'] {
-    --theme-form-input-bg: white;
+    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-input-border: var(--red-8);
     --theme-form-input-border-active: var(--red-2);
     --theme-form-input-border-focus: var(--red-2);
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--red-6);
     --theme-form-input-outline-focus: var(--red-6);
-    --theme-form-input-text: var(--brand-grayscale-text-form);
+    --theme-form-input-text: light-dark(var(--gray-11), var(--gray-11));
 
     --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--red-12);
 
-    --theme-form-checkbox-bg: white;
+    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--red-6);
     --theme-form-checkbox-symbol: var(--red-8);
 
-    --theme-form-radio-bg: white;
+    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--red-6);
     --theme-form-radio-symbol: var(--red-8);

package/assets/styles/forms/themes/_ghost.css

@@ -1,22 +1,22 @@
 :root {
   [data-form-theme='ghost'] {
-    --theme-form-input-bg: white;
+    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-input-border: var(--gray-8);
     --theme-form-input-border-active: var(--gray-2);
     --theme-form-input-border-focus: var(--gray-2);
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--gray-6);
     --theme-form-input-outline-focus: var(--gray-6);
-    --theme-form-input-text: var(--brand-grayscale-text-form);
+    --theme-form-input-text: light-dark(var(--gray-11), var(--gray-11));
 
     --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-1);
 
-    --theme-form-checkbox-bg: white;
+    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--gray-6);
     --theme-form-checkbox-symbol: var(--gray-8);
 
-    --theme-form-radio-bg: white;
+    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--gray-6);
     --theme-form-radio-symbol: var(--gray-8);

package/assets/styles/forms/themes/_primary.css

@@ -1,22 +1,22 @@
 :root {
   [data-form-theme='primary'] {
-    --theme-form-input-bg: white;
+    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-input-border: var(--blue-8);
     --theme-form-input-border-active: var(--blue-2);
     --theme-form-input-border-focus: var(--blue-2);
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--blue-6);
     --theme-form-input-outline-focus: var(--blue-6);
-    --theme-form-input-text: var(--brand-grayscale-text-form);
+    --theme-form-input-text: light-dark(var(--gray-11), var(--gray-11));
 
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--blue-12);
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--blue-12), var(--blue-2));
 
-    --theme-form-checkbox-bg: white;
+    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--blue-6);
     --theme-form-checkbox-symbol: var(--blue-8);
 
-    --theme-form-radio-bg: white;
+    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--blue-6);
     --theme-form-radio-symbol: var(--blue-8);
@@ -38,6 +38,6 @@
     --theme-btn-outline-focus: var(--blue-0);
     --theme-btn-text-focus: var(--blue-12);
 
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--blue-12);
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--blue-12), var(--blue-2));
   }
 }

package/assets/styles/forms/themes/_secondary.css

@@ -1,22 +1,22 @@
 :root {
   [data-form-theme='secondary'] {
-    --theme-form-input-bg: white;
+    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-input-border: var(--gray-8);
     --theme-form-input-border-active: var(--gray-2);
     --theme-form-input-border-focus: var(--gray-2);
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--gray-6);
     --theme-form-input-outline-focus: var(--gray-6);
-    --theme-form-input-text: var(--brand-grayscale-text-form);
+    --theme-form-input-text: light-dark(var(--gray-11), var(--gray-11));
 
     --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
 
-    --theme-form-checkbox-bg: white;
+    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--gray-6);
     --theme-form-checkbox-symbol: var(--gray-8);
 
-    --theme-form-radio-bg: white;
+    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--gray-6);
     --theme-form-radio-symbol: var(--gray-8);

package/assets/styles/forms/themes/_success.css

@@ -1,22 +1,22 @@
 :root {
   [data-form-theme='success'] {
-    --theme-form-input-bg: white;
+    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-input-border: var(--green-8);
     --theme-form-input-border-active: var(--green-2);
     --theme-form-input-border-focus: var(--green-2);
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--green-6);
     --theme-form-input-outline-focus: var(--green-6);
-    --theme-form-input-text: var(--brand-grayscale-text-form);
+    --theme-form-input-text: light-dark(var(--gray-11), var(--gray-11));
 
     --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--green-12);
 
-    --theme-form-checkbox-bg: white;
+    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--green-6);
     --theme-form-checkbox-symbol: var(--green-8);
 
-    --theme-form-radio-bg: white;
+    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--green-6);
     --theme-form-radio-symbol: var(--green-8);

package/assets/styles/forms/themes/_tertiary.css

@@ -1,22 +1,22 @@
 :root {
   [data-form-theme='tertiary'] {
-    --theme-form-input-bg: white;
+    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-input-border: var(--gray-8);
     --theme-form-input-border-active: var(--gray-2);
     --theme-form-input-border-focus: var(--gray-2);
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--gray-6);
     --theme-form-input-outline-focus: var(--gray-6);
-    --theme-form-input-text: var(--brand-grayscale-text-form);
+    --theme-form-input-text: light-dark(var(--gray-11), var(--gray-11));
 
     --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
 
-    --theme-form-checkbox-bg: white;
+    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--gray-6);
     --theme-form-checkbox-symbol: var(--gray-8);
 
-    --theme-form-radio-bg: white;
+    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--gray-6);
     --theme-form-radio-symbol: var(--gray-8);

package/assets/styles/forms/themes/_warning.css

@@ -1,22 +1,22 @@
 :root {
   [data-form-theme='warning'] {
-    --theme-form-input-bg: white;
+    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-input-border: var(--orange-8);
     --theme-form-input-border-active: var(--orange-2);
     --theme-form-input-border-focus: var(--orange-2);
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--orange-6);
     --theme-form-input-outline-focus: var(--orange-6);
-    --theme-form-input-text: var(--brand-grayscale-text-form);
+    --theme-form-input-text: light-dark(var(--gray-11), var(--gray-11));
 
     --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--orange-12);
 
-    --theme-form-checkbox-bg: white;
+    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--orange-6);
     --theme-form-checkbox-symbol: var(--orange-8);
 
-    --theme-form-radio-bg: white;
+    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--orange-6);
     --theme-form-radio-symbol: var(--orange-8);

package/assets/styles/forms/themes/index.css

@@ -1,4 +1,3 @@
-@import './_default.css';
 @import './_primary.css';
 @import './_secondary.css';
 @import './_tertiary.css';

package/assets/styles/forms/variables/index.css

@@ -1,2 +1,2 @@
 @import './_theme.css';
-@import './_palette.css';
+/* @import './_palette.css'; */

package/assets/styles/main.css

@@ -1,4 +1,3 @@
 @import './variables';
 @import './forms';
-@import './brand';
 @import './scaffolding';

package/assets/styles/scaffolding/_page.css

@@ -1,16 +1,15 @@
 :root {
-  /* color-scheme: light dark; */
+  color-scheme: light dark;
 }
 
 html {
-  background-color: var(--body-background-color);
-  /* background-color: light-dark(var(--light-body-background-color), var(--dark-body-background-color)); */
+  /* background-color: var(--body-background-color); */
+  background-color: var(--page-bg);
 
   font-size: 62.5%;
 }
 body,
 p,
-span,
 pre,
 code,
 div,
@@ -18,6 +17,7 @@ fieldset,
 legend,
 li,
 a {
+  color: var(--grayscale-text-body);
   font-family: var(--font-family);
   font-size: var(--step-1);
 }

package/assets/styles/variables/_default.css

@@ -0,0 +1,14 @@
+:root {
+  --theme-link-default: light-dark(var(--blue-12), var(--blue-4));
+
+  --page-bg: light-dark(var(--gray-0), var(--gray-9));
+
+  --surface-subtle: light-dark(var(--gray-1), var(--gray-8));
+
+  --grayscale-text-title: light-dark(var(--gray-12), var(--gray-2));
+  --grayscale-text-body: light-dark(var(--gray-12), var(--gray-3));
+  --grayscale-text-subtitle: light-dark(var(--gray-12), var(--gray-2));
+  --grayscale-text-caption: light-dark(var(--gray-12), var(--gray-2));
+  --grayscale-text-negative: light-dark(var(--gray-12), var(--gray-2));
+  --grayscale-text-disabled: light-dark(var(--gray-12), var(--gray-2));
+}

package/assets/styles/variables/index.css

@@ -1 +1,3 @@
 @import './colors/index.css';
+@import './_default.css';
+@import './_typography.css';

package/components/forms/input-number/InputNumberCore.vue

@@ -152,7 +152,7 @@ onMounted(() => {
     border: var(--_border-width) solid var(--theme-form-input-border);
     outline: var(--_outline-width) solid var(--theme-form-input-outline);
 
-    /* color: var(--theme-form-input-text); */
+    color: var(--theme-form-input-text);
     font-family: var(--font-family);
     font-size: var(--theme-form-button-font-size-normal);
     line-height: var(--line-height);

package/components/forms/input-range/InputRangeCore.vue

@@ -126,6 +126,7 @@ const modelValue = defineModel<number | readonly number[]>();
   .input-range-container {
     flex-grow: 1;
     .input-range-core {
+      color: var(--theme-form-input-text);
       height: var(--_input-range-height);
       margin: 0;
       width: 100%;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "reinstall": "rm -rf node_modules && npm install",
@@ -15,12 +15,12 @@
   },
   "devDependencies": {
     "@iconify-json/gridicons": "1.2.1",
-    "@iconify-json/material-symbols": "1.2.5",
+    "@iconify-json/material-symbols": "1.2.6",
     "@iconify-json/radix-icons": "1.2.1",
     "@nuxt/eslint-config": "0.6.1",
-    "@nuxt/icon": "1.6.1",
-    "eslint": "9.13.0",
-    "nuxt": "3.13.2",
+    "@nuxt/icon": "1.7.2",
+    "eslint": "9.14.0",
+    "nuxt": "3.14.159",
     "release-it": "17.10.0",
     "typescript": "5.6.3"
   },

package/pages/typography.vue

@@ -73,7 +73,7 @@ useHead({
     padding: 0;
 
     li {
-      background: #ffffff;
+      background: var(--surface-subtle);
       border-radius: 5px;
       padding: 10px;
       margin-block-end: 20px;

package/assets/styles/brand/_brand.css

@@ -1,150 +0,0 @@
-@import './_palette_light.css';
-
-:root {
-  --body-background-color: var(--light-body-background-color);
-  --focus-visible-colour: var(--light-focus-visible-colour);
-
-  --brand-grayscale-surface-subtle: var(--light-grayscale-surface-subtle);
-  --brand-grayscale-surface-default: var(--light-grayscale-surface-default);
-  --brand-grayscale-surface-disabled: var(--light-grayscale-surface-disabled);
-  --brand-grayscale-border-default: var(--light-grayscale-border-default);
-  --brand-grayscale-border-disabled: var(--light-grayscale-border-disabled);
-  --brand-grayscale-border-dark: var(--light-grayscale-border-dark);
-  --brand-grayscale-text-title: var(--light-grayscale-text-title);
-  --brand-grayscale-text-body: var(--light-grayscale-text-body);
-  --brand-grayscale-text-form: var(--light-grayscale-text-form);
-  --brand-grayscale-text-subtitle: var(--light-grayscale-text-subtitle);
-  --brand-grayscale-text-caption: var(--light-grayscale-text-caption);
-  --brand-grayscale-text-negative: var(--light-grayscale-text-negative);
-  --brand-grayscale-text-disabled: var(--light-grayscale-text-disabled);
-
-  --brand-primary-surface-subtle: var(--light-primary-surface-subtle);
-  --brand-primary-surface-light: var(--light-primary-surface-light);
-  --brand-primary-surface-default: var(--light-primary-surface-default);
-  --brand-primary-surface-dark: var(--light-primary-surface-dark);
-  --brand-primary-border-subtle: var(--light-primary-border-subtle);
-  --brand-primary-border-default: var(--light-primary-border-default);
-  --brand-primary-border-dark: var(--light-primary-border-dark);
-  --brand-primary-border-light: var(--light-primary-border-light);
-  --brand-primary-text-icon: var(--light-primary-text-text);
-
-  --brand-secondary-surface-subtle: var(--light-secondary-surface-subtle);
-  --brand-secondary-surface-light: var(--light-secondary-surface-light);
-  --brand-secondary-surface-default: var(--light-secondary-surface-default);
-  --brand-secondary-surface-dark: var(--light-secondary-surface-dark);
-  --brand-secondary-border-subtle: var(--light-secondary-border-subtle);
-  --brand-secondary-border-default: var(--light-secondary-border-default);
-  --brand-secondary-border-dark: var(--light-secondary-border-dark);
-  --brand-secondary-border-light: var(--light-secondary-border-light);
-  --brand-secondary-text-icon: var(--light-secondary-text-text);
-
-  --brand-accent-primary-surface-light: var(--light-accent-primary-surface-light);
-  --brand-accent-primary-surface-subtle: var(--light-accent-primary-surface-subtle);
-  --brand-accent-primary-surface-default: var(--light-accent-primary-surface-default);
-  --brand-accent-primary-surface-dark: var(--light-accent-primary-surface-dark);
-  --brand-accent-primary-border-subtle: var(--light-accent-primary-border-subtle);
-  --brand-accent-primary-border-default: var(--light-accent-primary-border-default);
-  --brand-accent-primary-border-dark: var(--light-accent-primary-border-dark);
-  --brand-accent-primary-border-light: var(--light-accent-primary-border-light);
-  --brand-accent-primary-text-icon: var(--light-accent-primary-text-text);
-
-  --brand-accent-secondary-surface-subtle: var(--light-accent-secondary-surface-subtle);
-  --brand-accent-secondary-surface-light: var(--light-accent-secondary-surface-light);
-  --brand-accent-secondary-surface-default: var(--light-accent-secondary-surface-default);
-  --brand-accent-secondary-surface-dark: var(--light-accent-secondary-surface-dark);
-  --brand-accent-secondary-border-subtle: var(--light-accent-secondary-border-subtle);
-  --brand-accent-secondary-border-default: var(--light-accent-secondary-border-default);
-  --brand-accent-secondary-border-dark: var(--light-accent-secondary-border-dark);
-  --brand-accent-secondary-border-light: var(--light-accent-secondary-border-light);
-  --brand-accent-secondary-text-icon: var(--light-accent-secondary-text-text);
-
-  --brand-accent-tertiary-surface-subtle: var(--light-accent-tertiary-surface-subtle);
-  --brand-accent-tertiary-surface-light: var(--light-accent-tertiary-surface-light);
-  --brand-accent-tertiary-surface-default: var(--light-accent-tertiary-surface-default);
-  --brand-accent-tertiary-surface-dark: var(--light-accent-tertiary-surface-dark);
-  --brand-accent-tertiary-border-subtle: var(--light-accent-tertiary-border-subtle);
-  --brand-accent-tertiary-border-default: var(--light-accent-tertiary-border-default);
-  --brand-accent-tertiary-border-dark: var(--light-accent-tertiary-border-dark);
-  --brand-accent-tertiary-border-light: var(--light-accent-tertiary-border-light);
-  --brand-accent-tertiary-text-icon: var(--light-accent-tertiary-text-text);
-
-  --brand-error-surface-subtle: var(--light-error-surface-subtle);
-  --brand-error-surface-light: var(--light-error-surface-light);
-  --brand-error-surface-default: var(--light-error-surface-default);
-  --brand-error-surface-dark: var(--light-error-surface-dark);
-  --brand-error-border-subtle: var(--light-error-border-subtle);
-  --brand-error-border-default: var(--light-error-border-default);
-  --brand-error-border-dark: var(--light-error-border-dark);
-  --brand-error-border-light: var(--light-error-border-light);
-  --brand-error-text-icon: var(--light-error-text-text);
-
-  --brand-warning-orange-surface-subtle: var(--light-warning-orange-surface-subtle);
-  --brand-warning-orange-surface-light: var(--light-warning-orange-surface-light);
-  --brand-warning-orange-surface-default: var(--light-warning-orange-surface-default);
-  --brand-warning-orange-surface-dark: var(--light-warning-orange-surface-dark);
-  --brand-warning-orange-border-subtle: var(--light-warning-orange-border-subtle);
-  --brand-warning-orange-border-default: var(--light-warning-orange-border-default);
-  --brand-warning-orange-border-dark: var(--light-warning-orange-border-dark);
-  --brand-warning-orange-border-light: var(--light-warning-orange-border-light);
-  --brand-warning-orange-text-icon: var(--light-warning-orange-text-text);
-
-  --brand-warning-yellow-surface-subtle: var(--light-warning-yellow-surface-subtle);
-  --brand-warning-yellow-surface-light: var(--light-warning-yellow-surface-light);
-  --brand-warning-yellow-surface-default: var(--light-warning-yellow-surface-default);
-  --brand-warning-yellow-surface-dark: var(--light-warning-yellow-surface-dark);
-  --brand-warning-yellow-border-subtle: var(--light-warning-yellow-border-subtle);
-  --brand-warning-yellow-border-default: var(--light-warning-yellow-border-default);
-  --brand-warning-yellow-border-dark: var(--light-warning-yellow-border-dark);
-  --brand-warning-yellow-border-light: var(--light-warning-yellow-border-light);
-  --brand-warning-yellow-text-icon: var(--light-warning-yellow-text-text);
-
-  --brand-success-surface-subtle: var(--light-success-surface-subtle);
-  --brand-success-surface-light: var(--light-success-surface-light);
-  --brand-success-surface-default: var(--light-success-surface-default);
-  --brand-success-surface-dark: var(--light-success-surface-dark);
-  --brand-success-border-subtle: var(--light-success-border-subtle);
-  --brand-success-border-default: var(--light-success-border-default);
-  --brand-success-border-dark: var(--light-success-border-dark);
-  --brand-success-border-light: var(--light-success-border-light);
-  --brand-success-text-icon: var(--light-success-text-text);
-
-  /* Colour Zones - Brand 2 */
-
-  --brand-zone-orange-light: var(--light-zone-orange-light);
-  --brand-zone-orange-solid: var(--light-zone-orange-solid);
-  --brand-zone-orange-dark: var(--light-zone-orange-dark);
-
-  --brand-zone-yellow-light: var(--light-zone-yellow-light);
-  --brand-zone-yellow-solid: var(--light-zone-yellow-solid);
-  --brand-zone-yellow-dark: var(--light-zone-yellow-dark);
-
-  --brand-zone-pink-light: var(--light-zone-pink-light);
-  --brand-zone-pink-solid: var(--light-zone-pink-solid);
-  --brand-zone-pink-dark: var(--light-zone-pink-dark);
-
-  --brand-zone-blue-light: var(--light-zone-blue-light);
-  --brand-zone-blue-solid: var(--light-zone-blue-solid);
-  --brand-zone-blue-dark: var(--light-zone-blue-dark);
-
-  --brand-zone-red-light: var(--light-zone-red-light);
-  --brand-zone-red-solid: var(--light-zone-red-solid);
-  --brand-zone-red-dark: var(--light-zone-red-dark);
-
-  --brand-zone-green-light: var(--light-zone-green-light);
-  --brand-zone-green-solid: var(--light-zone-green-solid);
-  --brand-zone-green-dark: var(--light-zone-green-dark);
-
-  /* TODO); add Brand 1 colours (these are brand 2 colours) */
-
-  --brand-zone-purple-primary-light: var(--light-zone-purple-primary-light);
-  --brand-zone-purple-primary-solid: var(--light-zone-purple-primary-solid);
-  --brand-zone-purple-primary-dark: var(--light-zone-purple-primary-dark);
-
-  --brand-zone-purple-secondary-light: var(--light-zone-purple-secondary-light);
-  --brand-zone-purple-secondary-solid: var(--light-zone-purple-secondary-solid);
-  --brand-zone-purple-secondary-dark: var(--light-zone-purple-secondary-dark);
-
-  --brand-zone-grey-light: var(--light-zone-grey-light);
-  --brand-zone-grey-solid: var(--light-zone-grey-solid);
-  --brand-zone-grey-dark: var(--light-zone-grey-dark);
-}

package/assets/styles/brand/_brand_dark.css

@@ -1,152 +0,0 @@
-@import './_palette_dark.css';
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --body-background-color: var(--dark-body-background-color);
-    --focus-visible-colour: var(--dark-focus-visible-colour);
-
-    --brand-grayscale-surface-subtle: var(--dark-grayscale-surface-subtle);
-    --brand-grayscale-surface-default: var(--dark-grayscale-surface-default);
-    --brand-grayscale-surface-disabled: var(--dark-grayscale-surface-disabled);
-    --brand-grayscale-border-default: var(--dark-grayscale-border-default);
-    --brand-grayscale-border-disabled: var(--dark-grayscale-border-disabled);
-    --brand-grayscale-border-dark: var(--dark-grayscale-border-dark);
-    --brand-grayscale-text-title: var(--dark-grayscale-text-title);
-    --brand-grayscale-text-body: var(--dark-grayscale-text-negative);
-    --brand-grayscale-text-form: var(--dark-grayscale-text-form);
-    --brand-grayscale-text-subtitle: var(--dark-grayscale-text-subtitle);
-    --brand-grayscale-text-caption: var(--dark-grayscale-text-caption);
-    --brand-grayscale-text-negative: var(--dark-grayscale-text-negative);
-    --brand-grayscale-text-disabled: var(--dark-grayscale-text-disabled);
-
-    --brand-primary-surface-subtle: var(--dark-primary-surface-subtle);
-    --brand-primary-surface-light: var(--dark-primary-surface-light);
-    --brand-primary-surface-default: var(--dark-primary-surface-default);
-    --brand-primary-surface-dark: var(--dark-primary-surface-dark);
-    --brand-primary-border-subtle: var(--dark-primary-border-subtle);
-    --brand-primary-border-default: var(--dark-primary-border-default);
-    --brand-primary-border-dark: var(--dark-primary-border-dark);
-    --brand-primary-border-light: var(--dark-primary-border-light);
-    --brand-primary-text-icon: var(--dark-primary-text-text);
-
-    --brand-secondary-surface-subtle: var(--dark-secondary-surface-subtle);
-    --brand-secondary-surface-light: var(--dark-secondary-surface-light);
-    --brand-secondary-surface-default: var(--dark-secondary-surface-default);
-    --brand-secondary-surface-dark: var(--dark-secondary-surface-dark);
-    --brand-secondary-border-subtle: var(--dark-secondary-border-subtle);
-    --brand-secondary-border-default: var(--dark-secondary-border-default);
-    --brand-secondary-border-dark: var(--dark-secondary-border-dark);
-    --brand-secondary-border-light: var(--dark-secondary-border-light);
-    --brand-secondary-text-icon: var(--dark-secondary-text-text);
-
-    --brand-accent-primary-surface-light: var(--dark-accent-primary-surface-light);
-    --brand-accent-primary-surface-subtle: var(--dark-accent-primary-surface-subtle);
-    --brand-accent-primary-surface-default: var(--dark-accent-primary-surface-default);
-    --brand-accent-primary-surface-dark: var(--dark-accent-primary-surface-dark);
-    --brand-accent-primary-border-subtle: var(--dark-accent-primary-border-subtle);
-    --brand-accent-primary-border-default: var(--dark-accent-primary-border-default);
-    --brand-accent-primary-border-dark: var(--dark-accent-primary-border-dark);
-    --brand-accent-primary-border-light: var(--dark-accent-primary-border-light);
-    --brand-accent-primary-text-icon: var(--dark-accent-primary-text-text);
-
-    --brand-accent-secondary-surface-subtle: var(--dark-accent-secondary-surface-subtle);
-    --brand-accent-secondary-surface-light: var(--dark-accent-secondary-surface-light);
-    --brand-accent-secondary-surface-default: var(--dark-accent-secondary-surface-default);
-    --brand-accent-secondary-surface-dark: var(--dark-accent-secondary-surface-dark);
-    --brand-accent-secondary-border-subtle: var(--dark-accent-secondary-border-subtle);
-    --brand-accent-secondary-border-default: var(--dark-accent-secondary-border-default);
-    --brand-accent-secondary-border-dark: var(--dark-accent-secondary-border-dark);
-    --brand-accent-secondary-border-light: var(--dark-accent-secondary-border-light);
-    --brand-accent-secondary-text-icon: var(--dark-accent-secondary-text-text);
-
-    --brand-accent-tertiary-surface-subtle: var(--dark-accent-tertiary-surface-subtle);
-    --brand-accent-tertiary-surface-light: var(--dark-accent-tertiary-surface-light);
-    --brand-accent-tertiary-surface-default: var(--dark-accent-tertiary-surface-default);
-    --brand-accent-tertiary-surface-dark: var(--dark-accent-tertiary-surface-dark);
-    --brand-accent-tertiary-border-subtle: var(--dark-accent-tertiary-border-subtle);
-    --brand-accent-tertiary-border-default: var(--dark-accent-tertiary-border-default);
-    --brand-accent-tertiary-border-dark: var(--dark-accent-tertiary-border-dark);
-    --brand-accent-tertiary-border-light: var(--dark-accent-tertiary-border-light);
-    --brand-accent-tertiary-text-icon: var(--dark-accent-tertiary-text-text);
-
-    --brand-error-surface-subtle: var(--dark-error-surface-subtle);
-    --brand-error-surface-light: var(--dark-error-surface-light);
-    --brand-error-surface-default: var(--dark-error-surface-default);
-    --brand-error-surface-dark: var(--dark-error-surface-dark);
-    --brand-error-border-subtle: var(--dark-error-border-subtle);
-    --brand-error-border-default: var(--dark-error-border-default);
-    --brand-error-border-dark: var(--dark-error-border-dark);
-    --brand-error-border-light: var(--dark-error-border-light);
-    --brand-error-text-icon: var(--dark-error-text-text);
-
-    --brand-warning-orange-surface-subtle: var(--dark-warning-orange-surface-subtle);
-    --brand-warning-orange-surface-light: var(--dark-warning-orange-surface-light);
-    --brand-warning-orange-surface-default: var(--dark-warning-orange-surface-default);
-    --brand-warning-orange-surface-dark: var(--dark-warning-orange-surface-dark);
-    --brand-warning-orange-border-subtle: var(--dark-warning-orange-border-subtle);
-    --brand-warning-orange-border-default: var(--dark-warning-orange-border-default);
-    --brand-warning-orange-border-dark: var(--dark-warning-orange-border-dark);
-    --brand-warning-orange-border-light: var(--dark-warning-orange-border-light);
-    --brand-warning-orange-text-icon: var(--dark-warning-orange-text-text);
-
-    --brand-warning-yellow-surface-subtle: var(--dark-warning-yellow-surface-subtle);
-    --brand-warning-yellow-surface-light: var(--dark-warning-yellow-surface-light);
-    --brand-warning-yellow-surface-default: var(--dark-warning-yellow-surface-default);
-    --brand-warning-yellow-surface-dark: var(--dark-warning-yellow-surface-dark);
-    --brand-warning-yellow-border-subtle: var(--dark-warning-yellow-border-subtle);
-    --brand-warning-yellow-border-default: var(--dark-warning-yellow-border-default);
-    --brand-warning-yellow-border-dark: var(--dark-warning-yellow-border-dark);
-    --brand-warning-yellow-border-light: var(--dark-warning-yellow-border-light);
-    --brand-warning-yellow-text-icon: var(--dark-warning-yellow-text-text);
-
-    --brand-success-surface-subtle: var(--dark-success-surface-subtle);
-    --brand-success-surface-light: var(--dark-success-surface-light);
-    --brand-success-surface-default: var(--dark-success-surface-default);
-    --brand-success-surface-dark: var(--dark-success-surface-dark);
-    --brand-success-border-subtle: var(--dark-success-border-subtle);
-    --brand-success-border-default: var(--dark-success-border-default);
-    --brand-success-border-dark: var(--dark-success-border-dark);
-    --brand-success-border-light: var(--dark-success-border-light);
-    --brand-success-text-icon: var(--dark-success-text-text);
-
-    /* Colour Zones - Brand 2 */
-
-    --brand-zone-orange-light: var(--dark-zone-orange-light);
-    --brand-zone-orange-solid: var(--dark-zone-orange-solid);
-    --brand-zone-orange-dark: var(--dark-zone-orange-dark);
-
-    --brand-zone-yellow-light: var(--dark-zone-yellow-light);
-    --brand-zone-yellow-solid: var(--dark-zone-yellow-solid);
-    --brand-zone-yellow-dark: var(--dark-zone-yellow-dark);
-
-    --brand-zone-pink-light: var(--dark-zone-pink-light);
-    --brand-zone-pink-solid: var(--dark-zone-pink-solid);
-    --brand-zone-pink-dark: var(--dark-zone-pink-dark);
-
-    --brand-zone-blue-light: var(--dark-zone-blue-light);
-    --brand-zone-blue-solid: var(--dark-zone-blue-solid);
-    --brand-zone-blue-dark: var(--dark-zone-blue-dark);
-
-    --brand-zone-red-light: var(--dark-zone-red-light);
-    --brand-zone-red-solid: var(--dark-zone-red-solid);
-    --brand-zone-red-dark: var(--dark-zone-red-dark);
-
-    --brand-zone-green-light: var(--dark-zone-green-light);
-    --brand-zone-green-solid: var(--dark-zone-green-solid);
-    --brand-zone-green-dark: var(--dark-zone-green-dark);
-
-    /* TODO); add Brand 1 colours (these are brand 2 colours) */
-
-    --brand-zone-purple-primary-light: var(--dark-zone-purple-primary-light);
-    --brand-zone-purple-primary-solid: var(--dark-zone-purple-primary-solid);
-    --brand-zone-purple-primary-dark: var(--dark-zone-purple-primary-dark);
-
-    --brand-zone-purple-secondary-light: var(--dark-zone-purple-secondary-light);
-    --brand-zone-purple-secondary-solid: var(--dark-zone-purple-secondary-solid);
-    --brand-zone-purple-secondary-dark: var(--dark-zone-purple-secondary-dark);
-
-    --brand-zone-grey-light: var(--dark-zone-grey-light);
-    --brand-zone-grey-solid: var(--dark-zone-grey-solid);
-    --brand-zone-grey-dark: var(--dark-zone-grey-dark);
-  }
-}

package/assets/styles/brand/_palette_dark.css

@@ -1,148 +0,0 @@
-:root {
-  --dark-body-background-color: #494549;
-  --dark-grayscale-surface-subtle: #f3f2f4;
-  --dark-grayscale-surface-default: #847d85;
-  --dark-grayscale-surface-disabled: #c6c3c7;
-  --dark-grayscale-border-default: #9d979d;
-  --dark-grayscale-border-disabled: #ada8ad;
-  --dark-grayscale-border-dark: #494549;
-  --dark-grayscale-text-title: #373538;
-  --dark-grayscale-text-body: #494549;
-  --dark-grayscale-text-form: #48464d;
-  --dark-grayscale-text-subtitle: #787279;
-  --dark-grayscale-text-caption: #847d85;
-  --dark-grayscale-text-negative: #f3f2f3;
-  --dark-grayscale-text-disabled: #c6c3c7;
-
-  --dark-focus-visible-colour: #4169e1;
-
-  --dark-primary-surface-subtle: #f2e8f2;
-  --dark-primary-surface-light: #d5b9d7;
-  --dark-primary-surface-default: #781d7d;
-  --dark-primary-surface-dark: #551559;
-  --dark-primary-border-subtle: #d5b9d7;
-  --dark-primary-border-default: #781d7d;
-  --dark-primary-border-dark: #421045;
-  --dark-primary-border-light: #c197c3;
-  --dark-primary-text-icon: #781d7d;
-
-  --dark-secondary-surface-subtle: #fef1eb;
-  --dark-secondary-surface-light: #fbd5c1;
-  --dark-secondary-surface-default: #f37737;
-  --dark-secondary-surface-dark: #ad5427;
-  --dark-secondary-border-subtle: #fbd5c1;
-  --dark-secondary-border-default: #f37737;
-  --dark-secondary-border-dark: #86411e;
-  --dark-secondary-border-light: #f9c0a3;
-  --dark-secondary-text-icon: #f37737;
-
-  --dark-accent-primary-surface-light: #e6f8fc;
-  --dark-accent-primary-surface-subtle: #b0eaf7;
-  --dark-accent-primary-surface-default: #00bbe4;
-  --dark-accent-primary-surface-dark: #0085a2;
-  --dark-accent-primary-border-subtle: #b0eaf7;
-  --dark-accent-primary-border-default: #00bbe4;
-  --dark-accent-primary-border-dark: #00677d;
-  --dark-accent-primary-border-light: #8ae0f3;
-  --dark-accent-primary-text-icon: #00bbe4;
-
-  --dark-accent-secondary-surface-subtle: #f4f9ec;
-  --dark-accent-secondary-surface-light: #dcedc3;
-  --dark-accent-secondary-surface-default: #8ec63f;
-  --dark-accent-secondary-surface-dark: #658d2d;
-  --dark-accent-secondary-border-subtle: #dcedc3;
-  --dark-accent-secondary-border-default: #8ec63f;
-  --dark-accent-secondary-border-dark: #4e6d23;
-  --dark-accent-secondary-border-light: #cbe5a7;
-  --dark-accent-secondary-text-icon: #8ec63f;
-
-  --dark-accent-tertiary-surface-subtle: #feecf4;
-  --dark-accent-tertiary-surface-light: #fac4dd;
-  --dark-accent-tertiary-surface-default: #f04292;
-  --dark-accent-tertiary-surface-dark: #aa2f68;
-  --dark-accent-tertiary-border-subtle: #fac4dd;
-  --dark-accent-tertiary-border-default: #f04292;
-  --dark-accent-tertiary-border-dark: #842450;
-  --dark-accent-tertiary-border-light: #f8a8cd;
-  --dark-accent-tertiary-text-icon: #f04292;
-
-  --dark-error-surface-subtle: #fceaed;
-  --dark-error-surface-light: #f5bdc6;
-  --dark-error-surface-default: #e02947;
-  --dark-error-surface-dark: #9f1d32;
-  --dark-error-border-subtle: #f5bdc6;
-  --dark-error-border-default: #e02947;
-  --dark-error-border-dark: #7b1727;
-  --dark-error-border-light: #f19daa;
-  --dark-error-text-icon: #e02947;
-
-  --dark-warning-orange-surface-subtle: #fef5e6;
-  --dark-warning-orange-surface-light: #fce0b0;
-  --dark-warning-orange-surface-default: #f59b00;
-  --dark-warning-orange-surface-dark: #ae6e00;
-  --dark-warning-orange-border-subtle: #fce0b0;
-  --dark-warning-orange-border-default: #f59b00;
-  --dark-warning-orange-border-dark: #875500;
-  --dark-warning-orange-border-light: #fad18a;
-  --dark-warning-orange-text-icon: #f59b00;
-
-  --dark-warning-yellow-surface-subtle: #fffbe6;
-  --dark-warning-yellow-surface-light: #fff4b0;
-  --dark-warning-yellow-surface-default: #ffda00;
-  --dark-warning-yellow-surface-dark: #b59b00;
-  --dark-warning-yellow-border-subtle: #fff4b0;
-  --dark-warning-yellow-border-default: #ffda00;
-  --dark-warning-yellow-border-dark: #8c7800;
-  --dark-warning-yellow-border-light: #ffee8a;
-  --dark-warning-yellow-text-icon: #ffda00;
-
-  --dark-success-surface-subtle: #e6f8f7;
-  --dark-success-surface-light: #b2eae5;
-  --dark-success-surface-default: #07bbac;
-  --dark-success-surface-dark: #05857a;
-  --dark-success-border-subtle: #b2eae5;
-  --dark-success-border-default: #07bbac;
-  --dark-success-border-dark: #04675f;
-  --dark-success-border-light: #8de0d9;
-  --dark-success-text-icon: #07bbac;
-
-  /* Colour Zones - Brand 1 */
-
-  --dark-zone-orange-light: #fbd5c1;
-  --dark-zone-orange-solid: #f37737;
-  --dark-zone-orange-dark: #ad5427;
-
-  --dark-zone-yellow-light: #fce0b0;
-  --dark-zone-yellow-solid: #f59b00;
-  --dark-zone-yellow-dark: #ae6e00;
-
-  --dark-zone-pink-light: #fac4dd;
-  --dark-zone-pink-solid: #f04292;
-  --dark-zone-pink-dark: #aa2f68;
-
-  --dark-zone-blue-light: #b0eaf7;
-  --dark-zone-blue-solid: #00bbe4;
-  --dark-zone-blue-dark: #0085a2;
-
-  --dark-zone-red-light: #f5bdc6;
-  --dark-zone-red-solid: #e02947;
-  --dark-zone-red-dark: #9f1d32;
-
-  --dark-zone-green-light: #dcedc3;
-  --dark-zone-green-solid: #8ec63f;
-  --dark-zone-green-dark: #658d2d;
-
-  /* TODO: add Brand 1 colours (these are brand 2 colours) */
-
-  --dark-zone-purple-primary-light: #d3c0ed;
-  --dark-zone-purple-primary-solid: #7033c4;
-  --dark-zone-purple-primary-dark: #50248b;
-
-  --dark-zone-purple-secondary-light: #efd9fd;
-  --dark-zone-purple-secondary-solid: #ca85fa;
-  --dark-zone-purple-secondary-dark: #8f5eb2;
-
-  --dark-zone-grey-light: #c9c9c9;
-  --dark-zone-grey-solid: #a9a9a9;
-  --dark-zone-grey-dark: #858585;
-}

package/assets/styles/brand/_palette_light.css

@@ -1,148 +0,0 @@
-:root {
-  --light-body-background-color: #f3f2f4;
-  --light-grayscale-surface-subtle: #f3f2f4;
-  --light-grayscale-surface-default: #847fbc;
-  --light-grayscale-surface-disabled: #c6c4ca;
-  --light-grayscale-border-default: #9d99a3;
-  --light-grayscale-border-disabled: #ada9b2;
-  --light-grayscale-border-dark: #5e5a63;
-  --light-grayscale-text-title: #37353b;
-  --light-grayscale-text-body: #48464d;
-  --light-grayscale-text-form: #48464d;
-  --light-grayscale-text-subtitle: #78747f;
-  --light-grayscale-text-caption: #847fbc;
-  --light-grayscale-text-negative: #f3f2f4;
-  --light-grayscale-text-disabled: #ada9b2;
-
-  --light-focus-visible-colour: #4169e1;
-
-  --light-primary-surface-subtle: #f1ebf9;
-  --light-primary-surface-light: #d3c0ed;
-  --light-primary-surface-default: #7033c4;
-  --light-primary-surface-dark: #50248b;
-  --light-primary-border-subtle: #d3c0ed;
-  --light-primary-border-default: #7033c4;
-  --light-primary-border-dark: #3e1c6c;
-  --light-primary-border-light: #bda1e4;
-  --light-primary-text-icon: #7033c4;
-
-  --light-secondary-surface-subtle: #faf3ff;
-  --light-secondary-surface-light: #efd9fd;
-  --light-secondary-surface-default: #ca85fa;
-  --light-secondary-surface-dark: #8f5eb2;
-  --light-secondary-border-subtle: #efd9fd;
-  --light-secondary-border-default: #ca85fa;
-  --light-secondary-border-dark: #6f498a;
-  --light-secondary-border-light: #e7c7fd;
-  --light-secondary-text-icon: #ca85fa;
-
-  --light-accent-primary-surface-light: #fff7eb;
-  --light-accent-primary-surface-subtle: #ffe6c0;
-  --light-accent-primary-surface-default: #ffae33;
-  --light-accent-primary-surface-dark: #b57c24;
-  --light-accent-primary-border-subtle: #ffe6c0;
-  --light-accent-primary-border-default: #ffae33;
-  --light-accent-primary-border-dark: #8c601c;
-  --light-accent-primary-border-light: #ffdaa1;
-  --light-accent-primary-text-icon: #ffae33;
-
-  --light-accent-secondary-surface-subtle: #fbeaf3;
-  --light-accent-secondary-surface-light: #f1bed9;
-  --light-accent-secondary-surface-default: #d22d85;
-  --light-accent-secondary-surface-dark: #95205e;
-  --light-accent-secondary-border-subtle: #f1bed9;
-  --light-accent-secondary-border-default: #d22d85;
-  --light-accent-secondary-border-dark: #741949;
-  --light-accent-secondary-border-light: #ea9ec7;
-  --light-accent-secondary-text-icon: #d22d85;
-
-  --light-accent-tertiary-surface-subtle: #e9eff9;
-  --light-accent-tertiary-surface-light: #bccded;
-  --light-accent-tertiary-surface-default: #265ec5;
-  --light-accent-tertiary-surface-dark: #1b438c;
-  --light-accent-tertiary-border-subtle: #bccded;
-  --light-accent-tertiary-border-default: #265ec5;
-  --light-accent-tertiary-border-dark: #15346c;
-  --light-accent-tertiary-border-light: #9bb5e4;
-  --light-accent-tertiary-text-icon: #265ec5;
-
-  --light-error-surface-subtle: #faebee;
-  --light-error-surface-light: #f0c2ca;
-  --light-error-surface-default: #ce3b45;
-  --light-error-surface-dark: #922a3c;
-  --light-error-border-subtle: #f0c2ca;
-  --light-error-border-default: #ce3b54;
-  --light-error-border-dark: #71202e;
-  --light-error-border-light: #e8a5b0;
-  --light-error-text-icon: #ce3b54;
-
-  --light-warning-orange-surface-subtle: #fff7eb;
-  --light-warning-orange-surface-light: #ffe6c0;
-  --light-warning-orange-surface-default: #ffae33;
-  --light-warning-orange-surface-dark: #b57c24;
-  --light-warning-orange-border-subtle: #ffe6c0;
-  --light-warning-orange-border-default: #ffae33;
-  --light-warning-orange-border-dark: #8c601c;
-  --light-warning-orange-border-light: #ffdaa1;
-  --light-warning-orange-text-icon: #ffae33;
-
-  --light-warning-yellow-surface-subtle: #fffae6;
-  --light-warning-yellow-surface-light: #fff0b0;
-  --light-warning-yellow-surface-default: #ffd000;
-  --light-warning-yellow-surface-dark: #b59400;
-  --light-warning-yellow-border-subtle: #fff0b0;
-  --light-warning-yellow-border-default: #ffd000;
-  --light-warning-yellow-border-dark: #8c7200;
-  --light-warning-yellow-border-light: #ffe9ba;
-  --light-warning-yellow-text-icon: #ffd000;
-
-  --light-success-surface-subtle: #ebf8f3;
-  --light-success-surface-light: #c2ebd9;
-  --light-success-surface-default: #39bd83;
-  --light-success-surface-dark: #28865d;
-  --light-success-border-subtle: #c2ebd9;
-  --light-success-border-default: #39bd83;
-  --light-success-border-dark: #1f6848;
-  --light-success-border-light: #a4e1c6;
-  --light-success-text-icon: #39bd83;
-
-  /* Colour Zones - Brand 2 */
-
-  --light-zone-orange-light: #ffe6c0;
-  --light-zone-orange-solid: #ffae33;
-  --light-zone-orange-dark: #b57c24;
-
-  --light-zone-yellow-light: #ffe6c0;
-  --light-zone-yellow-solid: #ffae33;
-  --light-zone-yellow-dark: #b57c24;
-
-  --light-zone-pink-light: #f1bed9;
-  --light-zone-pink-solid: #d22d85;
-  --light-zone-pink-dark: #95205e;
-
-  --light-zone-blue-light: #bccded;
-  --light-zone-blue-solid: #265ec5;
-  --light-zone-blue-dark: #1b438c;
-
-  --light-zone-red-light: #f0c2ca;
-  --light-zone-red-solid: #ce3b54;
-  --light-zone-red-dark: #922a3c;
-
-  --light-zone-green-light: #c2ebd9;
-  --light-zone-green-solid: #39bd83;
-  --light-zone-green-dark: #28865d;
-
-  /* TODO: add Brand 1 colours (these are brand 2 colours) */
-
-  --light-zone-purple-primary-light: #d3c0ed;
-  --light-zone-purple-primary-solid: #7033c4;
-  --light-zone-purple-primary-dark: #50248b;
-
-  --light-zone-purple-secondary-light: #efd9fd;
-  --light-zone-purple-secondary-solid: #ca85fa;
-  --light-zone-purple-secondary-dark: #8f5eb2;
-
-  --light-zone-grey-light: #c9c9c9;
-  --light-zone-grey-solid: #a9a9a9;
-  --light-zone-grey-dark: #858585;
-}

package/assets/styles/brand/index.css

@@ -1 +0,0 @@
-@import './_typography.css';

package/assets/styles/forms/themes/_default.css

@@ -1,3 +0,0 @@
-:root {
-  --theme-link-default: var(--blue-12);
-}