srcdev-nuxt-forms 5.1.0 → 6.0.0

package/app/assets/styles/extends-layer/srcdev-forms/setup/variants/sizes/_medium.css

@@ -0,0 +1,12 @@
+:root {
+  [data-size='medium'] {
+    --form-element-font-size: var(--step-6);
+    --form-placeholder-font-size: calc(var(--step-6) * 0.65);
+    --form-element-line-height: var(--step-6);
+    --form-icon-size: var(--step-6);
+    --form-input-border-radius: 0.4rem;
+    --form-icon-only-button-size: calc(var(--step-4) * 2.75 + 1px);
+    --form-toggle-symbol-size: calc(var(--step-6) * 1.78);
+    --form-toggle-switch-width-adjustment: 0rem;
+  }
+}

package/app/assets/styles/extends-layer/srcdev-forms/setup/variants/sizes/_small.css

@@ -0,0 +1,12 @@
+:root {
+  [data-size='small'] {
+    --form-element-font-size: var(--step-4);
+    --form-placeholder-font-size: calc(var(--step-4) * 0.65);
+    --form-element-line-height: var(--step-4);
+    --form-icon-size: var(--step-4);
+    --form-input-border-radius: 0.4rem;
+    --form-icon-only-button-size: calc(var(--step-4) * 2.25 + 1px);
+    --form-toggle-symbol-size: calc(var(--step-4) * 1.635);
+    --form-toggle-switch-width-adjustment: 0.3rem;
+  }
+}

package/app/assets/styles/extends-layer/srcdev-forms/setup/variants/sizes/_x-small.css

@@ -0,0 +1,11 @@
+:root {
+  [data-size='x-small'] {
+    --form-element-font-size: var(--step-3);
+    --form-placeholder-font-size: calc(var(--step-3) * 0.65);
+    --form-element-line-height: var(--step-3);
+    --form-input-border-radius: 0.4rem;
+    --form-icon-only-button-size: calc(var(--step-4) * 2 + 1px);
+    --form-toggle-symbol-size: calc(var(--step-3) * 1.55);
+    --form-toggle-switch-width-adjustment: 0.5rem;
+  }
+}

package/{assets/styles/extends-layer/srcdev-forms/setup → app/assets/styles/extends-layer/srcdev-forms/setup/variants}/sizes/index.css

@@ -10,11 +10,13 @@
   --form-element-border-width: 0.2rem;
   --form-element-border-width-underlined: 0.4rem;
   --form-element-outline-width: 0.1rem;
+  --form-element-outline-offset-focus: 0.2rem;
 
   --form-text-padding-inline: 0.5em;
   --form-button-padding-inline: 1.25em;
   --form-button-icon-gap: 1em;
   --form-input-border-radius: 0.4rem;
+  --form-input-border-radius-underlined: 0;
 
   --input-element-padding-block: 1.25rem;
   --input-element-padding-inline: 1rem;

package/app/assets/styles/setup/_head.css

@@ -0,0 +1,36 @@
+:root {
+  /* --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif; */
+  /* --font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
+
+  --font-family: 'Quicksand', futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
+}
+
+html {
+  color-scheme: light dark;
+
+  &[data-color-scheme='light'] {
+    color-scheme: light;
+  }
+
+  &[data-color-scheme='dark'] {
+    color-scheme: dark;
+  }
+
+  background-color: var(--page-bg);
+
+  font-size: 62.5%;
+
+  transition: background-color 0.4s ease, color 0.4s ease;
+  scrollbar-gutter: stable;
+
+  overflow-x: hidden;
+}
+body {
+  color: var(--grayscale-text-body);
+  font-family: var(--font-family);
+  font-size: var(--step-4);
+  min-height: 100vh;
+  transition: background-color 0.4s ease, color 0.4s ease;
+
+  overflow-x: hidden;
+}

package/app/assets/styles/setup/index.css

@@ -0,0 +1,5 @@
+@import './_head.css';
+@import './utility-classes';
+@import './a11y';
+@import './theming';
+@import './typography';

package/{assets/styles/setup/variables → app/assets/styles/setup/theming}/colors/_blue.css

@@ -10,6 +10,6 @@
   --blue-8: #1971c2;
   --blue-9: #1864ab;
   --blue-10: #145591;
-  --blue-11: #114678;
+  --blue-11: #0043c1;
   --blue-12: #0e01cd;
 }

package/{assets/styles/setup/variables → app/assets/styles/setup/theming}/index.css

@@ -1 +1,2 @@
 @import './colors/';
+@import './themes/';

package/app/assets/styles/setup/theming/themes/_default.css

@@ -0,0 +1,66 @@
+:root {
+  /* Theme-neutral component scale using light-dark() */
+  --colour-theme-0: light-dark(var(--gray-0), var(--gray-12));
+  --colour-theme-1: light-dark(var(--gray-1), var(--gray-11));
+  --colour-theme-2: light-dark(var(--gray-2), var(--gray-10));
+  --colour-theme-3: light-dark(var(--gray-3), var(--gray-9));
+  --colour-theme-4: light-dark(var(--gray-4), var(--gray-8));
+  --colour-theme-5: light-dark(var(--gray-5), var(--gray-7));
+  --colour-theme-6: light-dark(var(--gray-6), var(--gray-6));
+  --colour-theme-7: light-dark(var(--gray-7), var(--gray-5));
+  --colour-theme-8: light-dark(var(--gray-8), var(--gray-4));
+  --colour-theme-9: light-dark(var(--gray-9), var(--gray-3));
+  --colour-theme-10: light-dark(var(--gray-10), var(--gray-2));
+  --colour-theme-11: light-dark(var(--gray-11), var(--gray-1));
+  --colour-theme-12: light-dark(var(--gray-12), var(--gray-0));
+
+  /* Generic */
+  --theme-box-shadow: var(--colour-theme-12);
+
+  /* Fieldset & Label */
+  --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
+  --form-label-color: light-dark(var(--gray-12), var(--gray-1));
+
+  /* Input Elements */
+  --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
+  --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-5));
+
+  --theme-input-border: light-dark(var(--gray-9), var(--gray-4));
+  --theme-input-border-hover: light-dark(var(--gray-10), var(--gray-5));
+  --theme-input-border-focus: light-dark(var(--gray-10), var(--gray-5));
+
+  --theme-input-outline: transparent;
+  --theme-input-outline-hover: light-dark(var(--gray-10), var(--gray-5));
+  --theme-input-outline-focus: light-dark(var(--gray-10), var(--gray-5));
+
+  --theme-input-text: var(--gray-0);
+  --theme-input-text-hover: var(--gray-0);
+  --theme-input-text-focus: var(--gray-0);
+  --theme-input-placeholder: light-dark(var(--gray-7), var(--gray-5));
+
+  /* Checkboxes & Radio buttons */
+  --theme-checkbox-label-text-color: light-dark(var(--gray-11), var(--gray-1));
+  --theme-checkbox-decorator-color: light-dark(var(--gray-11), var(--gray-1));
+  --theme-checkbox-symbol-surface: var(--colour-theme-2);
+  --theme-checkbox-symbol-color: light-dark(var(--gray-11), var(--gray-1));
+
+  /* a11y */
+  --theme-focus-visible-shadow: var(--colour-theme-12);
+  --theme-focus-visible-outline: var(--colour-theme-12);
+
+  /* Buttons */
+  --theme-button-surface: light-dark(var(--gray-5), var(--gray-4));
+  --theme-button-surface-hover: light-dark(var(--gray-6), var(--gray-5));
+
+  --theme-button-border: light-dark(var(--gray-9), var(--gray-4));
+  --theme-button-border-hover: light-dark(var(--gray-10), var(--gray-5));
+  --theme-button-border-focus: light-dark(var(--gray-10), var(--gray-5));
+
+  --theme-button-outline: transparent;
+  --theme-button-outline-hover: light-dark(var(--gray-10), var(--gray-5));
+  --theme-button-outline-focus: light-dark(var(--gray-10), var(--gray-5));
+
+  --theme-button-text: var(--gray-0);
+  --theme-button-text-hover: var(--gray-0);
+  --theme-button-text-focus: var(--gray-0);
+}

package/app/assets/styles/setup/theming/themes/_error.css

@@ -0,0 +1,66 @@
+[data-theme='error'] {
+  --colour-theme-0: var(--red-0);
+  --colour-theme-1: var(--red-1);
+  --colour-theme-2: var(--red-2);
+  --colour-theme-3: var(--red-3);
+  --colour-theme-4: var(--red-4);
+  --colour-theme-5: var(--red-5);
+  --colour-theme-6: var(--red-6);
+  --colour-theme-7: var(--red-7);
+  --colour-theme-8: var(--red-8);
+  --colour-theme-9: var(--red-9);
+  --colour-theme-10: var(--red-10);
+  --colour-theme-11: var(--red-11);
+  --colour-theme-12: var(--red-12);
+
+  /* Generic */
+  --theme-box-shadow: var(--colour-theme-12);
+
+  /* Fieldset & Label */
+  --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
+  --form-label-color: light-dark(var(--gray-12), var(--gray-1));
+
+  /* Input Elements */
+  --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
+  --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-10));
+  --theme-input-surface-focus: light-dark(var(--gray-1), var(--gray-10));
+
+  --theme-input-border: var(--red-12);
+  --theme-input-border-hover: light-dark(var(--gray-10), var(--gray-5));
+  --theme-input-border-focus: light-dark(var(--gray-10), var(--gray-5));
+
+  --theme-input-outline: transparent;
+  --theme-input-outline-hover: light-dark(var(--gray-10), var(--gray-1));
+  --theme-input-outline-focus: light-dark(var(--gray-10), var(--gray-1));
+
+  --theme-input-text: var(--gray-0);
+  --theme-input-text-hover: var(--gray-0);
+  --theme-input-text-focus: var(--gray-0);
+  --theme-input-placeholder: light-dark(var(--gray-7), var(--gray-5));
+
+  /* Checkboxes & Radio buttons */
+  --theme-checkbox-label-text-color: light-dark(var(--gray-11), var(--gray-1));
+  --theme-checkbox-decorator-color: var(--red-10);
+  --theme-checkbox-symbol-surface: var(--gray-12);
+  --theme-checkbox-symbol-color: light-dark(var(--gray-11), var(--gray-1));
+
+  /* a11y */
+  --theme-focus-visible-shadow: var(--colour-theme-1);
+  --theme-focus-visible-outline: var(--colour-theme-1);
+
+  /* Buttons */
+  --theme-button-surface: light-dark(var(--red-5), var(--red-10));
+  --theme-button-surface-hover: light-dark(var(--red-6), var(--red-12));
+
+  --theme-button-border: light-dark(var(--red-9), var(--red-4));
+  --theme-button-border-hover: light-dark(var(--red-10), var(--red-5));
+  --theme-button-border-focus: light-dark(var(--red-10), var(--red-5));
+
+  --theme-button-outline: transparent;
+  --theme-button-outline-hover: light-dark(var(--red-10), var(--red-7));
+  --theme-button-outline-focus: light-dark(var(--red-10), var(--red-7));
+
+  --theme-button-text: var(--red-0);
+  --theme-button-text-hover: var(--red-0);
+  --theme-button-text-focus: var(--red-0);
+}

package/app/assets/styles/setup/theming/themes/_ghost.css

@@ -0,0 +1,31 @@
+[data-theme='ghost'] {
+  --colour-theme-0: var(--gray-0);
+  --colour-theme-1: var(--gray-1);
+  --colour-theme-2: var(--gray-2);
+  --colour-theme-3: var(--gray-3);
+  --colour-theme-4: var(--gray-4);
+  --colour-theme-5: var(--gray-5);
+  --colour-theme-6: var(--gray-6);
+  --colour-theme-7: var(--gray-7);
+  --colour-theme-8: var(--gray-8);
+  --colour-theme-9: var(--gray-9);
+  --colour-theme-10: var(--gray-10);
+  --colour-theme-11: var(--gray-11);
+  --colour-theme-12: var(--gray-12);
+
+  /* Buttons */
+  --theme-button-surface: light-dark(var(--gray-5), var(--gray-4));
+  --theme-button-surface-hover: light-dark(var(--gray-6), var(--gray-5));
+
+  --theme-button-border: light-dark(var(--gray-9), var(--gray-4));
+  --theme-button-border-hover: light-dark(var(--gray-10), var(--gray-5));
+  --theme-button-border-focus: light-dark(var(--gray-10), var(--gray-5));
+
+  --theme-button-outline: transparent;
+  --theme-button-outline-hover: light-dark(var(--gray-10), var(--gray-5));
+  --theme-button-outline-focus: light-dark(var(--gray-10), var(--gray-5));
+
+  --theme-button-text: var(--gray-0);
+  --theme-button-text-hover: var(--gray-0);
+  --theme-button-text-focus: var(--gray-0);
+}

package/app/assets/styles/setup/theming/themes/_info.css

@@ -0,0 +1,31 @@
+[data-theme='info'] {
+  --colour-theme-0: var(--blue-0);
+  --colour-theme-1: var(--blue-1);
+  --colour-theme-2: var(--blue-2);
+  --colour-theme-3: var(--blue-3);
+  --colour-theme-4: var(--blue-4);
+  --colour-theme-5: var(--blue-5);
+  --colour-theme-6: var(--blue-6);
+  --colour-theme-7: var(--blue-7);
+  --colour-theme-8: var(--blue-8);
+  --colour-theme-9: var(--blue-9);
+  --colour-theme-10: var(--blue-10);
+  --colour-theme-11: var(--blue-11);
+  --colour-theme-12: var(--blue-12);
+
+  /* Buttons */
+  --theme-button-surface: light-dark(var(--blue-5), var(--blue-4));
+  --theme-button-surface-hover: light-dark(var(--blue-6), var(--blue-5));
+
+  --theme-button-border: light-dark(var(--blue-9), var(--blue-4));
+  --theme-button-border-hover: light-dark(var(--blue-10), var(--blue-5));
+  --theme-button-border-focus: light-dark(var(--blue-10), var(--blue-5));
+
+  --theme-button-outline: transparent;
+  --theme-button-outline-hover: light-dark(var(--blue-10), var(--blue-5));
+  --theme-button-outline-focus: light-dark(var(--blue-10), var(--blue-5));
+
+  --theme-button-text: var(--blue-0);
+  --theme-button-text-hover: var(--blue-0);
+  --theme-button-text-focus: var(--blue-0);
+}

package/app/assets/styles/setup/theming/themes/_primary.css

@@ -0,0 +1,41 @@
+[data-theme='primary'] {
+  --colour-theme-0: var(--blue-0);
+  --colour-theme-1: var(--blue-1);
+  --colour-theme-2: var(--blue-2);
+  --colour-theme-3: var(--blue-3);
+  --colour-theme-4: var(--blue-4);
+  --colour-theme-5: var(--blue-5);
+  --colour-theme-6: var(--blue-6);
+  --colour-theme-7: var(--blue-7);
+  --colour-theme-8: var(--blue-8);
+  --colour-theme-9: var(--blue-9);
+  --colour-theme-10: var(--blue-10);
+  --colour-theme-11: var(--blue-11);
+  --colour-theme-12: var(--blue-12);
+
+  /* Buttons */
+  --theme-button-surface: light-dark(var(--blue-9), var(--blue-11));
+  --theme-button-surface-hover: light-dark(var(--blue-6), var(--blue-12));
+
+  --theme-button-border: light-dark(var(--blue-9), var(--blue-2));
+  --theme-button-border-hover: light-dark(var(--blue-10), var(--blue-1));
+  --theme-button-border-focus: light-dark(var(--blue-10), var(--blue-5));
+
+  --theme-button-outline: transparent;
+  --theme-button-outline-hover: light-dark(var(--blue-10), var(--blue-1));
+  --theme-button-outline-focus: light-dark(var(--blue-10), var(--blue-1));
+
+  --theme-button-text: var(--blue-0);
+  --theme-button-text-hover: var(--blue-0);
+  --theme-button-text-focus: var(--blue-0);
+
+  /* Input Elements */
+  --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
+  --theme-input-surface-hover: light-dark(var(--blue-1), var(--blue-7));
+  --theme-input-border: light-dark(var(--blue-9), var(--blue-4));
+  --theme-input-border-hover: light-dark(var(--blue-10), var(--blue-5));
+  --theme-input-border-focus: light-dark(var(--blue-10), var(--blue-5));
+  --theme-input-text: var(--blue-0);
+  --theme-input-text-hover: var(--blue-0);
+  --theme-input-text-focus: var(--blue-0);
+}

package/app/assets/styles/setup/theming/themes/_secondary.css

@@ -0,0 +1,66 @@
+[data-theme='secondary'] {
+  --colour-theme-0: var(--gray-0);
+  --colour-theme-1: var(--gray-1);
+  --colour-theme-2: var(--gray-2);
+  --colour-theme-3: var(--gray-3);
+  --colour-theme-4: var(--gray-4);
+  --colour-theme-5: var(--gray-5);
+  --colour-theme-6: var(--gray-6);
+  --colour-theme-7: var(--gray-7);
+  --colour-theme-8: var(--gray-8);
+  --colour-theme-9: var(--gray-9);
+  --colour-theme-10: var(--gray-10);
+  --colour-theme-11: var(--gray-11);
+  --colour-theme-12: var(--gray-12);
+
+  /* Generic */
+  --theme-box-shadow: var(--colour-theme-12);
+
+  /* Fieldset & Label */
+  --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
+  --form-label-color: light-dark(var(--gray-12), var(--gray-1));
+
+  /* Input Elements */
+  --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
+  --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-10));
+  --theme-input-surface-focus: light-dark(var(--gray-1), var(--gray-10));
+
+  --theme-input-border: light-dark(var(--gray-9), var(--gray-4));
+  --theme-input-border-hover: light-dark(var(--gray-10), var(--gray-5));
+  --theme-input-border-focus: light-dark(var(--gray-10), var(--gray-5));
+
+  --theme-input-outline: transparent;
+  --theme-input-outline-hover: light-dark(var(--gray-10), var(--gray-1));
+  --theme-input-outline-focus: light-dark(var(--gray-10), var(--gray-1));
+
+  --theme-input-text: var(--gray-0);
+  --theme-input-text-hover: var(--gray-0);
+  --theme-input-text-focus: var(--gray-0);
+  --theme-input-placeholder: light-dark(var(--gray-7), var(--gray-5));
+
+  /* Checkboxes & Radio buttons */
+  /* --theme-checkbox-label-text-color: light-dark(var(--gray-11), var(--gray-1)); */
+  /* --theme-checkbox-decorator-color: light-dark(var(--gray-11), var(--gray-1)); */
+  /* --theme-checkbox-symbol-surface: var(--colour-theme-12); */
+  /* --theme-checkbox-symbol-color: light-dark(var(--gray-11), var(--gray-1)); */
+
+  /* a11y */
+  --theme-focus-visible-shadow: var(--colour-theme-1);
+  --theme-focus-visible-outline: var(--colour-theme-1);
+
+  /* Buttons */
+  --theme-button-surface: light-dark(var(--gray-9), var(--gray-10));
+  --theme-button-surface-hover: light-dark(var(--gray-10), var(--gray-11));
+
+  --theme-button-border: light-dark(var(--gray-9), var(--gray-2));
+  --theme-button-border-hover: light-dark(var(--gray-10), var(--gray-1));
+  --theme-button-border-focus: light-dark(var(--gray-10), var(--gray-5));
+
+  --theme-button-outline: transparent;
+  --theme-button-outline-hover: light-dark(var(--gray-10), var(--gray-1));
+  --theme-button-outline-focus: light-dark(var(--gray-10), var(--gray-1));
+
+  --theme-button-text: var(--gray-0);
+  --theme-button-text-hover: var(--gray-0);
+  --theme-button-text-focus: var(--gray-0);
+}

package/app/assets/styles/setup/theming/themes/_success.css

@@ -0,0 +1,66 @@
+[data-theme='success'] {
+  --colour-theme-0: var(--green-0);
+  --colour-theme-1: var(--green-1);
+  --colour-theme-2: var(--green-2);
+  --colour-theme-3: var(--green-3);
+  --colour-theme-4: var(--green-4);
+  --colour-theme-5: var(--green-5);
+  --colour-theme-6: var(--green-6);
+  --colour-theme-7: var(--green-7);
+  --colour-theme-8: var(--green-8);
+  --colour-theme-9: var(--green-9);
+  --colour-theme-10: var(--green-10);
+  --colour-theme-11: var(--green-11);
+  --colour-theme-12: var(--green-12);
+
+  /* Generic */
+  --theme-box-shadow: var(--colour-theme-12);
+
+  /* Fieldset & Label */
+  --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
+  --form-label-color: light-dark(var(--gray-12), var(--gray-1));
+
+  /* Input Elements */
+  --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
+  --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-10));
+  --theme-input-surface-focus: light-dark(var(--gray-1), var(--gray-10));
+
+  --theme-input-border: var(--green-10);
+  --theme-input-border-hover: light-dark(var(--gray-10), var(--gray-5));
+  --theme-input-border-focus: light-dark(var(--gray-10), var(--gray-5));
+
+  --theme-input-outline: transparent;
+  --theme-input-outline-hover: light-dark(var(--gray-10), var(--gray-1));
+  --theme-input-outline-focus: light-dark(var(--gray-10), var(--gray-1));
+
+  --theme-input-text: var(--gray-0);
+  --theme-input-text-hover: var(--gray-0);
+  --theme-input-text-focus: var(--gray-0);
+  --theme-input-placeholder: light-dark(var(--gray-7), var(--gray-5));
+
+  /* Checkboxes & Radio buttons */
+  /* --theme-checkbox-label-text-color: light-dark(var(--gray-11), var(--gray-1)); */
+  /* --theme-checkbox-decorator-color: var(--green-10); */
+  /* --theme-checkbox-symbol-surface: var(--green-10); */
+  /* --theme-checkbox-symbol-color: light-dark(var(--gray-11), var(--gray-1)); */
+
+  /* a11y */
+  --theme-focus-visible-shadow: var(--colour-theme-1);
+  --theme-focus-visible-outline: var(--colour-theme-1);
+
+  /* Buttons */
+  --theme-button-surface: light-dark(var(--green-5), var(--green-10));
+  --theme-button-surface-hover: light-dark(var(--green-6), var(--green-12));
+
+  --theme-button-border: light-dark(var(--green-9), var(--green-4));
+  --theme-button-border-hover: light-dark(var(--green-10), var(--green-5));
+  --theme-button-border-focus: light-dark(var(--green-10), var(--green-5));
+
+  --theme-button-outline: transparent;
+  --theme-button-outline-hover: light-dark(var(--green-10), var(--green-5));
+  --theme-button-outline-focus: light-dark(var(--green-10), var(--green-5));
+
+  --theme-button-text: var(--green-0);
+  --theme-button-text-hover: var(--green-0);
+  --theme-button-text-focus: var(--green-0);
+}

package/app/assets/styles/setup/theming/themes/_tertiary.css

@@ -0,0 +1,31 @@
+[data-theme='tertiary'] {
+  --colour-theme-0: var(--gray-0);
+  --colour-theme-1: var(--gray-1);
+  --colour-theme-2: var(--gray-2);
+  --colour-theme-3: var(--gray-3);
+  --colour-theme-4: var(--gray-4);
+  --colour-theme-5: var(--gray-5);
+  --colour-theme-6: var(--gray-6);
+  --colour-theme-7: var(--gray-7);
+  --colour-theme-8: var(--gray-8);
+  --colour-theme-9: var(--gray-9);
+  --colour-theme-10: var(--gray-10);
+  --colour-theme-11: var(--gray-11);
+  --colour-theme-12: var(--gray-12);
+
+  /* Buttons */
+  --theme-button-surface: light-dark(var(--gray-5), var(--gray-4));
+  --theme-button-surface-hover: light-dark(var(--gray-6), var(--gray-5));
+
+  --theme-button-border: light-dark(var(--gray-9), var(--gray-4));
+  --theme-button-border-hover: light-dark(var(--gray-10), var(--gray-5));
+  --theme-button-border-focus: light-dark(var(--gray-10), var(--gray-5));
+
+  --theme-button-outline: transparent;
+  --theme-button-outline-hover: light-dark(var(--gray-10), var(--gray-5));
+  --theme-button-outline-focus: light-dark(var(--gray-10), var(--gray-5));
+
+  --theme-button-text: var(--gray-0);
+  --theme-button-text-hover: var(--gray-0);
+  --theme-button-text-focus: var(--gray-0);
+}

package/app/assets/styles/setup/theming/themes/_warning.css

@@ -0,0 +1,68 @@
+:root {
+  [data-theme='warning'] {
+    --colour-theme-0: var(--orange-0);
+    --colour-theme-1: var(--orange-1);
+    --colour-theme-2: var(--orange-2);
+    --colour-theme-3: var(--orange-3);
+    --colour-theme-4: var(--orange-4);
+    --colour-theme-5: var(--orange-5);
+    --colour-theme-6: var(--orange-6);
+    --colour-theme-7: var(--orange-7);
+    --colour-theme-8: var(--orange-8);
+    --colour-theme-9: var(--orange-9);
+    --colour-theme-10: var(--orange-10);
+    --colour-theme-11: var(--orange-11);
+    --colour-theme-12: var(--orange-12);
+
+    /* Generic */
+    --theme-box-shadow: var(--colour-theme-12);
+
+    /* Fieldset & Label */
+    --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
+    --form-label-color: light-dark(var(--gray-12), var(--gray-1));
+
+    /* Input Elements */
+    --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
+    --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-10));
+    --theme-input-surface-focus: light-dark(var(--gray-1), var(--gray-10));
+
+    --theme-input-border: var(--orange-10);
+    --theme-input-border-hover: light-dark(var(--gray-10), var(--gray-5));
+    --theme-input-border-focus: light-dark(var(--gray-10), var(--gray-5));
+
+    --theme-input-outline: transparent;
+    --theme-input-outline-hover: light-dark(var(--gray-10), var(--gray-1));
+    --theme-input-outline-focus: light-dark(var(--gray-10), var(--gray-1));
+
+    --theme-input-text: var(--gray-0);
+    --theme-input-text-hover: var(--gray-0);
+    --theme-input-text-focus: var(--gray-0);
+    --theme-input-placeholder: light-dark(var(--gray-7), var(--gray-5));
+
+    /* Checkboxes & Radio buttons */
+    /* --theme-checkbox-label-text-color: light-dark(var(--gray-11), var(--gray-1)); */
+    /* --theme-checkbox-decorator-color: var(--orange-10); */
+    /* --theme-checkbox-symbol-surface: var(--orange-10); */
+    /* --theme-checkbox-symbol-color: light-dark(var(--gray-11), var(--gray-1)); */
+
+    /* a11y */
+    --theme-focus-visible-shadow: var(--colour-theme-1);
+    --theme-focus-visible-outline: var(--colour-theme-1);
+
+    /* Buttons */
+    --theme-button-surface: light-dark(var(--orange-5), var(--orange-10));
+    --theme-button-surface-hover: light-dark(var(--orange-6), var(--orange-12));
+
+    --theme-button-border: light-dark(var(--orange-9), var(--orange-4));
+    --theme-button-border-hover: light-dark(var(--orange-10), var(--orange-5));
+    --theme-button-border-focus: light-dark(var(--orange-10), var(--orange-5));
+
+    --theme-button-outline: transparent;
+    --theme-button-outline-hover: light-dark(var(--orange-10), var(--orange-5));
+    --theme-button-outline-focus: light-dark(var(--orange-10), var(--orange-5));
+
+    --theme-button-text: var(--orange-0);
+    --theme-button-text-hover: var(--orange-0);
+    --theme-button-text-focus: var(--orange-0);
+  }
+}

package/app/assets/styles/setup/theming/themes/index.css

@@ -0,0 +1,9 @@
+@import './_default';
+@import './_primary';
+@import './_secondary';
+@import './_tertiary';
+@import './_error';
+@import './_success';
+@import './_warning';
+@import './_info';
+@import './_ghost';

package/app/assets/styles/setup/typography/index.css

@@ -0,0 +1,2 @@
+@import './utility-classes';
+@import './vars';