srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_warning.css

@@ -0,0 +1,63 @@
+[data-theme="warning"] {
+  /* Generic */
+  --theme-box-shadow: var(--colour-theme-12);
+
+  /* Fieldset & Label */
+  --form-fieldset-legend-color: light-dark(var(--slate-10), var(--slate-01));
+  --form-label-color: light-dark(var(--slate-10), var(--slate-01));
+
+  /* Description */
+  --form-description-color: light-dark(var(--slate-10), var(--slate-01));
+
+  /* Input Elements */
+  --theme-input-surface: light-dark(var(--slate-01), var(--slate-08));
+  --theme-input-surface-hover: light-dark(var(--slate-01), var(--slate-10));
+  --theme-input-surface-focus: light-dark(var(--slate-01), var(--slate-10));
+
+  --theme-input-border: var(--orange-10);
+  --theme-input-border-hover: light-dark(var(--slate-10), var(--slate-05));
+  --theme-input-border-focus: light-dark(var(--slate-10), var(--slate-05));
+
+  --theme-input-outline: transparent;
+  --theme-input-outline-hover: light-dark(var(--slate-10), var(--slate-01));
+  --theme-input-outline-focus: light-dark(var(--slate-10), var(--slate-01));
+
+  --theme-input-text: var(--slate-00);
+  --theme-input-text-hover: var(--slate-00);
+  --theme-input-text-focus: var(--slate-00);
+  --theme-input-placeholder: light-dark(var(--slate-07), var(--slate-05));
+
+  /* Checkboxes & Radio buttons */
+  --theme-checkbox-label-text-color: light-dark(var(--slate-10), var(--slate-01));
+  --theme-checkbox-decorator-color: var(--orange-10);
+  --theme-checkbox-symbol-surface: var(--orange-10);
+  --theme-checkbox-symbol-color: light-dark(var(--slate-10), var(--slate-01));
+
+  /* Toggle Switch */
+  --theme-toggle-wrapper-surface-color: var(--theme-input-surface);
+  --theme-toggle-wrapper-surface-color-hover: var(--theme-input-surface-hover);
+  --theme-toggle-symbol-surface-color: var(--blue-10);
+  --theme-toggle-symbol-border-color: var(--slate-10);
+  --theme-toggle-symbol-outline-color: transparent;
+  --theme-toggle-symbol-icon-color: var(--slate-00);
+
+  /* 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-05), var(--orange-10));
+  --theme-button-surface-hover: light-dark(var(--orange-06), var(--orange-10));
+
+  --theme-button-border: light-dark(var(--orange-09), var(--orange-04));
+  --theme-button-border-hover: light-dark(var(--orange-10), var(--orange-05));
+  --theme-button-border-focus: light-dark(var(--orange-10), var(--orange-05));
+
+  --theme-button-outline: transparent;
+  --theme-button-outline-hover: light-dark(var(--orange-10), var(--orange-05));
+  --theme-button-outline-focus: light-dark(var(--orange-10), var(--orange-05));
+
+  --theme-button-text: var(--orange-01);
+  --theme-button-text-hover: var(--orange-01);
+  --theme-button-text-focus: var(--orange-01);
+}

package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/index.css

@@ -0,0 +1,7 @@
+@import "./_primary";
+@import "./_secondary";
+@import "./_tertiary";
+@import "./_ghost";
+@import "./_error";
+@import "./_success";
+@import "./_warning";

package/app/assets/styles/main.css

@@ -0,0 +1,2 @@
+@import "./setup/";
+/* @import "./components/"; */

package/app/assets/styles/setup/01.config/_basic-resets.css

@@ -0,0 +1,9 @@
+/**
+Reset list elements
+*/
+ul,
+ol {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}

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

@@ -0,0 +1,33 @@
+html {
+  color-scheme: light dark;
+  interpolate-size: allow-keywords;
+
+  &.light {
+    color-scheme: light;
+  }
+
+  &.dark {
+    color-scheme: dark;
+  }
+
+  font-size: 62.5%;
+
+  transition:
+    background-color 0.4s ease,
+    color 0.4s ease;
+  /* scrollbar-gutter: stable; */
+
+  overflow-x: clip;
+}
+body {
+  background-color: var(--page-bg, lightgray);
+  color: var(--colour-text-default);
+  font-family: var(--font-family);
+  font-size: var(--step-4);
+  min-height: 100dvh;
+  transition:
+    background-color 0.4s ease,
+    color 0.4s ease;
+
+  overflow-x: clip;
+}

package/app/assets/styles/setup/01.config/_normalise.css

@@ -0,0 +1,209 @@
+/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
+/*
+https://github.com/sindresorhus/modern-normalize
+*/
+/*
+Document
+========
+*/
+
+/**
+Use a better box model (opinionated).
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the line height in all browsers.
+3. Prevent adjustments of font size after orientation changes in iOS.
+4. Use a more readable tab size (opinionated).
+*/
+
+html {
+  font-family:
+    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* 1 */
+  line-height: 1.15; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 3 */
+  tab-size: 4; /* 4 */
+}
+
+/*
+Typpography
+========
+*/
+
+/*
+Sections
+========
+*/
+
+/**
+Remove the margin in all browsers.
+*/
+
+body {
+  margin: 0;
+}
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct font weight in Chrome and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+Tabular data
+============
+*/
+
+/**
+Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+
+table {
+  border-color: currentcolor;
+}
+
+/*
+Forms
+=====
+*/
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+
+legend {
+  padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Interactive
+===========
+*/

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

@@ -0,0 +1,3 @@
+@import "./_normalise";
+@import "./_basic-resets";
+@import "./_head";

package/app/assets/styles/setup/02.colours/_amber.css

@@ -0,0 +1,12 @@
+:where(html) {
+  --amber-01: oklch(0.945 0.064 75);
+  --amber-02: oklch(0.894 0.11 75);
+  --amber-03: oklch(0.788 0.177 75);
+  --amber-04: oklch(0.733 0.194 75);
+  --amber-05: oklch(0.592 0.188 75);
+  --amber-06: oklch(0.501 0.166 75);
+  --amber-07: oklch(0.433 0.144 75);
+  --amber-08: oklch(0.383 0.123 75);
+  --amber-09: oklch(0.338 0.1 75);
+  --amber-10: oklch(0.288 0.072 75);
+}

package/app/assets/styles/setup/02.colours/_blue.css

@@ -0,0 +1,13 @@
+:where(html) {
+  --blue-00: oklch(98% 0.01 255);
+  --blue-01: oklch(94% 0.04 255);
+  --blue-02: oklch(88% 0.07 255);
+  --blue-03: oklch(80% 0.11 255);
+  --blue-04: oklch(72% 0.15 255);
+  --blue-05: oklch(64% 0.19 255);
+  --blue-06: oklch(56% 0.22 255);
+  --blue-07: oklch(48% 0.21 255);
+  --blue-08: oklch(40% 0.19 255);
+  --blue-09: oklch(32% 0.17 255);
+  --blue-10: oklch(25% 0.14 255);
+}

package/app/assets/styles/setup/02.colours/_green.css

@@ -0,0 +1,13 @@
+:where(html) {
+  --green-00: oklch(0.99 0.02 157);
+  --green-01: oklch(0.95 0.078 157);
+  --green-02: oklch(0.889 0.19 157);
+  --green-03: oklch(0.829 0.197 157);
+  --green-04: oklch(0.768 0.183 157);
+  --green-05: oklch(0.708 0.169 157);
+  --green-06: oklch(0.647 0.154 157);
+  --green-07: oklch(0.587 0.14 157);
+  --green-08: oklch(0.526 0.125 157);
+  --green-09: oklch(0.466 0.111 157);
+  --green-10: oklch(0.405 0.096 157);
+}

package/app/assets/styles/setup/02.colours/_orange.css

@@ -0,0 +1,12 @@
+:where(html) {
+  --orange-01: oklch(0.95 0.037 75);
+  --orange-02: oklch(0.892 0.083 75);
+  --orange-03: oklch(0.834 0.132 75);
+  --orange-04: oklch(0.775 0.149 75);
+  --orange-05: oklch(0.788 0.177 75);
+  --orange-06: oklch(0.659 0.127 75);
+  --orange-07: oklch(0.601 0.115 75);
+  --orange-08: oklch(0.543 0.104 75);
+  --orange-09: oklch(0.485 0.093 75);
+  --orange-10: oklch(0.426 0.082 75);
+}

package/app/assets/styles/setup/02.colours/_red.css

@@ -0,0 +1,13 @@
+:where(html) {
+  --red-00: oklch(98% 0.01 30);
+  --red-01: oklch(94% 0.04 30);
+  --red-02: oklch(88% 0.07 30);
+  --red-03: oklch(80% 0.12 30);
+  --red-04: oklch(72% 0.17 30);
+  --red-05: oklch(64% 0.21 30);
+  --red-06: oklch(56% 0.24 30);
+  --red-07: oklch(42% 0.23 30);
+  --red-08: oklch(46% 0.21 30);
+  --red-09: oklch(52% 0.22 30);
+  --red-10: oklch(25% 0.16 30);
+}

package/app/assets/styles/setup/02.colours/_slate.css

@@ -0,0 +1,13 @@
+:where(html) {
+  --slate-00: oklch(0.98 0.004 256);
+  --slate-01: oklch(0.932 0.004 256);
+  --slate-02: oklch(0.86 0.008 256);
+  --slate-03: oklch(0.716 0.016 256);
+  --slate-04: oklch(0.645 0.018 256);
+  --slate-05: oklch(0.548 0.02 264);
+  --slate-06: oklch(0.459 0.018 264);
+  --slate-07: oklch(0.396 0.016 264);
+  --slate-08: oklch(0.349 0.014 264);
+  --slate-09: oklch(0.303 0.013 264);
+  --slate-10: oklch(0.256 0.011 264);
+}

package/app/assets/styles/setup/02.colours/_sunset.css

@@ -0,0 +1,12 @@
+:where(html) {
+  --sunset-01: oklch(0.98 0.06 45);
+  --sunset-02: oklch(0.92 0.08 50);
+  --sunset-03: oklch(0.82 0.12 55);
+  --sunset-04: oklch(0.75 0.18 50);
+  --sunset-05: oklch(0.7 0.2 48);
+  --sunset-06: oklch(0.65 0.22 45);
+  --sunset-07: oklch(0.6 0.22 40);
+  --sunset-08: oklch(0.5 0.2 35);
+  --sunset-09: oklch(0.4 0.18 30);
+  --sunset-10: oklch(0.3 0.15 25);
+}

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

@@ -0,0 +1,7 @@
+@import "./_amber";
+@import "./_blue";
+@import "./_green";
+@import "./_orange";
+@import "./_red";
+@import "./_slate";
+@import "./_sunset";

package/app/assets/styles/setup/03.theming/default/_dark.css

@@ -0,0 +1,138 @@
+:where(html.dark) {
+  /* ===========================================
+     COLOR SCALE VARIABLES
+     Base color tokens for the default theme
+     =========================================== */
+  --colour-theme-1: var(--blue-01);
+  --colour-theme-2: var(--blue-02);
+  --colour-theme-3: var(--blue-03);
+  --colour-theme-4: var(--blue-04);
+  --colour-theme-5: var(--blue-05);
+  --colour-theme-6: var(--blue-06);
+  --colour-theme-7: var(--blue-07);
+  --colour-theme-8: var(--blue-08);
+  --colour-theme-9: var(--blue-09);
+  --colour-theme-10: var(--blue-10);
+  --colour-theme-11: var(--blue-10);
+  --colour-theme-12: var(--blue-10);
+
+  /* ===========================================
+     GENERIC BODY VARIABLES
+     =========================================== */
+  --page-bg: var(--slate-08);
+  --colour-text-default: var(--slate-01);
+  --colour-text-accent: var(--blue-05);
+  --colour-text-eyebrow: var(--blue-05);
+
+  /* ===========================================
+     GLASS PANEL VARIABLES
+     =========================================== */
+  --glass-panel-bg: rgba(12, 12, 20, 0.45);
+  --glass-panel-border-color: rgba(255, 255, 255, 0.07);
+  --glass-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
+  --glass-panel-highlight: rgba(255, 255, 255, 0.04);
+
+  /* ===========================================
+     STEPPER LIST VARIABLES
+     =========================================== */
+  --stepper-list-counter-circle-background: transparent;
+  --stepper-list-counter-circle-text: var(--blue-02);
+  --stepper-list-counter-circle-border: var(--blue-02);
+
+  --stepper-list-counter-disc-background: var(--blue-02);
+  --stepper-list-counter-disc-text: var(--blue-09);
+  --stepper-list-counter-disc-border: var(--blue-02);
+
+  --stepper-list-counter-square-background: transparent;
+  --stepper-list-counter-square-text: var(--blue-02);
+  --stepper-list-counter-square-border: var(--blue-02);
+
+  --stepper-list-connector-color: var(--blue-02);
+
+  --stepper-list-icon: var(--blue-02);
+
+  /* ===========================================
+     COLOUR FINDER VARIABLES
+     =========================================== */
+  --colour-finder-primary-colour: var(--blue-03);
+  --colour-finder-border-colour: var(--blue-03);
+
+  --colour-finder-checked-surface-colour: var(--green-10);
+  --colour-finder-checked-stroke-colour: var(--green-03);
+
+  --colour-finder-conflict-surface-colour: var(--sunset-09);
+  --colour-finder-conflict-stroke-colour: var(--sunset-03);
+
+  /* ===========================================
+     TREATMENT CONSULTANT VARIABLES
+     =========================================== */
+  --treatment-consultant-primary-colour: var(--blue-03);
+  --treatment-consultant-border-colour: var(--blue-03);
+
+  --treatment-consultant-checked-surface-colour: var(--green-10);
+  --treatment-consultant-checked-stroke-colour: var(--green-03);
+
+  --treatment-consultant-conflict-surface-colour: var(--sunset-09);
+  --treatment-consultant-conflict-stroke-colour: var(--sunset-03);
+
+  /* ===========================================
+     ANCHOR LINK VARIABLES
+     =========================================== */
+  --colour-link-default: var(--blue-10);
+  --colour-link-hover: var(--blue-09);
+
+  /* ===========================================
+     FORM INPUT VARIABLES
+     Styling for form inputs and controls
+     =========================================== */
+
+  /* Input surfaces and backgrounds */
+  --theme-input-surface: var(--slate-10);
+  --theme-input-surface-hover: var(--slate-09);
+
+  /* Input borders */
+  --theme-input-border: var(--blue-06);
+  --theme-input-border-hover: var(--blue-05);
+  --theme-input-border-focus: var(--blue-04);
+
+  /* Input outlines and focus */
+  --theme-input-outline: var(--blue-06);
+  --theme-input-outline-focus: var(--blue-04);
+  --theme-input-visible-outline: var(--blue-04);
+  --theme-focus-visible-shadow: 0 0 0 2px var(--blue-02);
+
+  /* ===========================================
+     INPUT TEXT VARIABLES
+     =========================================== */
+  --theme-input-placeholder: var(--slate-04);
+  --theme-input-text-color-normal: var(--slate-01);
+
+  /* ===========================================
+     CHECKBOX AND RADIO BUTTON VARIABLES
+     =========================================== */
+  --theme-checkbox-symbol-surface: var(--theme-input-surface);
+  --theme-checkbox-symbol-color: var(--blue-02);
+  --theme-checkbox-decorator-color: var(--blue-02);
+
+  /* ===========================================
+     FORM BUTTON VARIABLES
+     Styling for form buttons and controls
+     =========================================== */
+
+  /* Variant Primary */
+  --theme-button-primary-border: var(--blue-07);
+  --theme-button-primary-border-active: var(--blue-07);
+  --theme-button-primary-text: var(--blue-00);
+  --theme-button-primary-text-hover: var(--blue-00);
+
+  /* Variant Secondary */
+  --theme-button-secondary-surface: var(--blue-01);
+  --theme-button-secondary-border-active: var(--blue-01);
+  --theme-button-secondary-text: var(--blue-09);
+
+  /* Variant Tertiary */
+  --theme-button-tertiary-surface: transparent;
+  --theme-button-tertiary-text: var(--blue-01);
+  --theme-button-tertiary-border-active: var(--blue-01);
+  --theme-button-tertiary-outline-active: var(--blue-09);
+}