From 88a8173178e146190dfe7e7aa214dbfe3a07b0fa Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Thu, 14 Sep 2023 15:51:16 -0400
Subject: [PATCH] add mellow theme

---
 src/themes/mellow.css | 403 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 403 insertions(+)
 create mode 100644 src/themes/mellow.css

diff --git a/src/themes/mellow.css b/src/themes/mellow.css
new file mode 100644
index 000000000..78e9feb22
--- /dev/null
+++ b/src/themes/mellow.css
@@ -0,0 +1,403 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Lora:wght@100..900&display=swap');
+
+:root,
+:host,
+.wa-theme-mellow {
+  color-scheme: light;
+
+  /**
+   * Primitives
+   */
+  --wa-color-red-95: #fbf0ed;
+  --wa-color-red-90: #f7e1db;
+  --wa-color-red-80: #eebfb3;
+  --wa-color-red-70: #e69d8b;
+  --wa-color-red-60: #dd7961;
+  --wa-color-red-50: #b55c47;
+  --wa-color-red-40: #884535;
+  --wa-color-red-30: #6b372a;
+  --wa-color-red-20: #4e281f;
+  --wa-color-red-10: #2e1812;
+
+  --wa-color-yellow-95: #f6f2e8;
+  --wa-color-yellow-90: #ede5d2;
+  --wa-color-yellow-80: #dac89f;
+  --wa-color-yellow-70: #c9ab6f;
+  --wa-color-yellow-60: #b78f40;
+  --wa-color-yellow-50: #94702b;
+  --wa-color-yellow-40: #705320;
+  --wa-color-yellow-30: #59411a;
+  --wa-color-yellow-20: #412f13;
+  --wa-color-yellow-10: #261c0b;
+
+  --wa-color-green-95: #ecf4ef;
+  --wa-color-green-90: #d9eae0;
+  --wa-color-green-80: #afd2bd;
+  --wa-color-green-70: #87ba9b;
+  --wa-color-green-60: #5ea379;
+  --wa-color-green-50: #45825d;
+  --wa-color-green-40: #346246;
+  --wa-color-green-30: #294d37;
+  --wa-color-green-20: #1e3828;
+  --wa-color-green-10: #112117;
+
+  --wa-color-blue-95: #edf3f9;
+  --wa-color-blue-90: #dbe7f3;
+  --wa-color-blue-80: #b3cce6;
+  --wa-color-blue-70: #8cb3da;
+  --wa-color-blue-60: #6599cd;
+  --wa-color-blue-50: #4c79a6;
+  --wa-color-blue-40: #395b7d;
+  --wa-color-blue-30: #2d4762;
+  --wa-color-blue-20: #213448;
+  --wa-color-blue-10: #131f2a;
+
+  --wa-color-neutral-95: #f0f3f1;
+  --wa-color-neutral-90: #e2e7e3;
+  --wa-color-neutral-80: #c2ccc5;
+  --wa-color-neutral-70: #a4b3a8;
+  --wa-color-neutral-60: #869a8c;
+  --wa-color-neutral-50: #697a6e;
+  --wa-color-neutral-40: #4e5c52;
+  --wa-color-neutral-30: #3e4840;
+  --wa-color-neutral-20: #2d342f;
+  --wa-color-neutral-10: #1a1f1b;
+
+  --wa-color-white: white;
+  --wa-color-black: black;
+
+  /**
+   * App
+   */
+  --wa-color-surface-raised: var(--wa-color-white);
+  --wa-color-surface-default: var(--wa-color-white);
+  --wa-color-surface-lowered: var(--wa-color-neutral-95);
+  --wa-color-surface-outline: var(--wa-color-neutral-90);
+
+  --wa-color-text-normal: var(--wa-color-neutral-30);
+  --wa-color-text-quiet: var(--wa-color-neutral-50);
+  --wa-color-text-inverse: var(--wa-color-white);
+  --wa-color-text-link: var(--wa-color-blue-50);
+
+  --wa-color-selection-background: var(--wa-color-green-80);
+  --wa-color-selection-text: var(--wa-color-black);
+
+  --wa-color-focus: var(--wa-color-green-60); /* semantic variants? */
+
+  --wa-color-tint-white: rgb(255 255 255 / 0.2);
+  --wa-color-tint-black: rgb(0 0 0 / 0.2);
+
+  --wa-color-tint-hover: black 8%;
+  --wa-color-tint-active: black 16%;
+
+  --wa-color-overlay: color-mix(in oklab, var(--wa-color-neutral-10) 25%, transparent);
+
+  --wa-color-shadow: color-mix(in oklab, var(--wa-color-neutral-10) 6%, transparent);
+
+  /**
+   * Semantic color variants
+   */
+  /* TODO: Add comments for semantic color tokens and usage expectations */
+  /* CONSIDER: Change -alt naming to -tint or -shade? */
+  --wa-color-brand-fill-vivid: var(--wa-color-green-50);
+  --wa-color-brand-fill-vivid-alt: var(--wa-color-green-40);
+  --wa-color-brand-fill-muted: var(--wa-color-green-95);
+  --wa-color-brand-fill-muted-alt: var(--wa-color-green-90);
+  --wa-color-brand-outline-vivid: var(--wa-color-green-60);
+  --wa-color-brand-outline-vivid-alt: var(--wa-color-green-50);
+  --wa-color-brand-outline-muted: var(--wa-color-green-90);
+  --wa-color-brand-outline-muted-alt: var(--wa-color-green-80);
+  --wa-color-brand-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-brand-text-on-muted: var(--wa-color-green-40);
+  --wa-color-brand-text-on-surface: var(--wa-color-green-50);
+
+  --wa-color-success-fill-vivid: var(--wa-color-green-50);
+  --wa-color-success-fill-vivid-alt: var(--wa-color-green-40);
+  --wa-color-success-fill-muted: var(--wa-color-green-95);
+  --wa-color-success-fill-muted-alt: var(--wa-color-green-90);
+  --wa-color-success-outline-vivid: var(--wa-color-green-60);
+  --wa-color-success-outline-vivid-alt: var(--wa-color-green-50);
+  --wa-color-success-outline-muted: var(--wa-color-green-90);
+  --wa-color-success-outline-muted-alt: var(--wa-color-green-80);
+  --wa-color-success-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-success-text-on-muted: var(--wa-color-green-40);
+  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+
+  --wa-color-warning-fill-vivid: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-vivid-alt: var(--wa-color-yellow-40);
+  --wa-color-warning-fill-muted: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-muted-alt: var(--wa-color-yellow-90);
+  --wa-color-warning-outline-vivid: var(--wa-color-yellow-60);
+  --wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-50);
+  --wa-color-warning-outline-muted: var(--wa-color-yellow-90);
+  --wa-color-warning-outline-muted-alt: var(--wa-color-yellow-80);
+  --wa-color-warning-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-warning-text-on-muted: var(--wa-color-yellow-40);
+  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+
+  --wa-color-danger-fill-vivid: var(--wa-color-red-50);
+  --wa-color-danger-fill-vivid-alt: var(--wa-color-red-40);
+  --wa-color-danger-fill-muted: var(--wa-color-red-95);
+  --wa-color-danger-fill-muted-alt: var(--wa-color-red-90);
+  --wa-color-danger-outline-vivid: var(--wa-color-red-60);
+  --wa-color-danger-outline-vivid-alt: var(--wa-color-red-50);
+  --wa-color-danger-outline-muted: var(--wa-color-red-90);
+  --wa-color-danger-outline-muted-alt: var(--wa-color-red-80);
+  --wa-color-danger-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-danger-text-on-muted: var(--wa-color-red-40);
+  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+
+  --wa-color-neutral-fill-vivid: var(--wa-color-neutral-50);
+  --wa-color-neutral-fill-vivid-alt: var(--wa-color-neutral-40);
+  --wa-color-neutral-fill-muted: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-muted-alt: var(--wa-color-neutral-90);
+  --wa-color-neutral-outline-vivid: var(--wa-color-neutral-60);
+  --wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-50);
+  --wa-color-neutral-outline-muted: var(--wa-color-neutral-90);
+  --wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-80);
+  --wa-color-neutral-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-neutral-text-on-muted: var(--wa-color-neutral-40);
+  --wa-color-neutral-text-on-surface: var(--wa-color-neutral-50);
+
+  /**
+   * Typography
+   */
+  --wa-font-family-heading: 'Lora', serif;
+  --wa-font-family-body: 'Inter', serif;
+  --wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  --wa-font-family-longform: 'Lora', serif;
+
+  --wa-font-weight-light: 300;
+  --wa-font-weight-normal: 400;
+  --wa-font-weight-medium: 500;
+  --wa-font-weight-heavy: 600;
+
+  --wa-font-weight-heading: var(--wa-font-weight-heavy);
+  --wa-font-weight-body: var(--wa-font-weight-normal);
+  --wa-font-weight-action: var(--wa-font-weight-medium);
+
+  --wa-font-size-root: 16px;
+  --wa-font-size-2xs: 0.625rem; /* 10 */
+  --wa-font-size-xs: 0.75rem; /* 12 */
+  --wa-font-size-s: 0.875rem; /* 14 */
+  --wa-font-size-m: 1rem; /* 16 */
+  --wa-font-size-l: 1.375rem; /* 22 */
+  --wa-font-size-xl: 1.875rem; /* 30 */
+  --wa-font-size-2xl: 2.625rem; /* 42 */
+
+  --wa-font-line-height-compact: 1.25;
+  --wa-font-line-height-regular: 1.625;
+  --wa-font-line-height-comfortable: 2;
+
+  /**
+   * Spacing
+   */
+  --wa-space-3xs: 0.125rem; /* 2 */
+  --wa-space-2xs: 0.25rem; /* 4 */
+  --wa-space-xs: 0.5rem; /* 8 */
+  --wa-space-s: 0.75rem; /* 12 */
+  --wa-space-m: 1rem; /* 16 */
+  --wa-space-l: 1.25rem; /* 20 */
+  --wa-space-xl: 1.5rem; /* 24 */
+  --wa-space-2xl: 2rem; /* 32 */
+  --wa-space-3xl: 3rem; /* 48 */
+
+  --wa-space-square-xs: var(--wa-space-xs);
+  --wa-space-square-s: var(--wa-space-s);
+  --wa-space-square-m: var(--wa-space-m);
+  --wa-space-square-l: var(--wa-space-l);
+  --wa-space-square-xl: var(--wa-space-xl);
+
+  --wa-space-stretch-xs: var(--wa-space-xs) var(--wa-space-m);
+  --wa-space-stretch-s: var(--wa-space-s) var(--wa-space-l);
+  --wa-space-stretch-m: var(--wa-space-m) var(--wa-space-xl);
+  --wa-space-stretch-l: var(--wa-space-l) var(--wa-space-2xl);
+  --wa-space-stretch-xl: var(--wa-space-xl) var(--wa-space-3xl);
+
+  --wa-space-squish-xs: var(--wa-space-xs) var(--wa-space-3xs);
+  --wa-space-squish-s: var(--wa-space-s) var(--wa-space-2xs);
+  --wa-space-squish-m: var(--wa-space-m) var(--wa-space-xs);
+  --wa-space-squish-l: var(--wa-space-l) var(--wa-space-s);
+  --wa-space-squish-xl: var(--wa-space-xl) var(--wa-space-m);
+
+  /**
+   * Borders & corners
+   */
+  --wa-border-width-thin: 0.0625rem; /* 1px */
+  --wa-border-width-medium: calc(var(--wa-border-width-thin) * 2);
+  --wa-border-width-thick: calc(var(--wa-border-width-thin) * 3);
+
+  --wa-border-style: solid;
+
+  --wa-corners-half: calc(var(--wa-corners-1x) * 0.5);
+  --wa-corners-1x: 0.125rem;
+  --wa-corners-2x: calc(var(--wa-corners-1x) * 2);
+  --wa-corners-3x: calc(var(--wa-corners-1x) * 3);
+
+  --wa-corners-pill: 9999px;
+  --wa-corners-circle: 50%;
+  --wa-corners-sharp: 0;
+
+  /**
+   * Focus
+   */
+  --wa-focus-ring: solid var(--wa-border-width-thick) var(--wa-color-focus);
+  --wa-focus-ring-offset: 0.0625rem; /* 1px */
+
+  /**
+   * Shadows
+   */
+  --wa-shadow-inset: none;
+  --wa-shadow-level-0: none;
+  --wa-shadow-level-1: 0 0.0625rem 0 var(--wa-color-shadow);
+  --wa-shadow-level-2: 0 0.125rem 0.125rem var(--wa-color-shadow);
+  --wa-shadow-level-3: 0 0.25rem 0.25rem var(--wa-color-shadow);
+
+  /**
+   * Z-index
+   */
+  --wa-z-index-drawer: 700;
+  --wa-z-index-dialog: 800;
+  --wa-z-index-dropdown: 900;
+  --wa-z-index-alert-group: 950;
+  --wa-z-index-tooltip: 1000;
+
+  /**
+   * Transitions
+   */
+  --wa-transition-normal: 250ms;
+  --wa-transition-fast: 150ms;
+  --wa-transition-faster: 50ms;
+
+  /**
+   * Form controls
+   */
+  --wa-form-controls-background: var(--wa-color-surface-default);
+  --wa-form-controls-border-style: var(--wa-border-style);
+  --wa-form-controls-border-width: var(--wa-border-width-thin);
+  --wa-form-controls-corners: var(--wa-corners-1x);
+  --wa-form-controls-border-color-resting: var(--wa-color-neutral-outline-muted-alt);
+  --wa-form-controls-border-color-activated: var(--wa-color-brand-outline-vivid);
+  --wa-form-controls-text-color: var(--wa-color-text-normal);
+  --wa-form-controls-value-line-height: var(--wa-font-height-compact);
+  --wa-form-controls-padding: var(--wa-space-square-s);
+  --wa-form-controls-placeholder-color: var(--wa-color-neutral-60);
+
+  /**
+   * Panels
+   */
+  --wa-panel-border-width: var(--wa-border-width-thin);
+  --wa-panel-corners: var(--wa-corners-2x);
+
+  /**
+  * From 2.x
+  */
+  --wa-form-controls-height-s: 2rem;
+  --wa-form-controls-height-m: 2.75rem;
+  --wa-form-controls-height-l: 3.5rem;
+  --wa-form-control-toggle-size-s: 0.875rem;
+  --wa-form-control-toggle-size-m: 1.125rem;
+  --wa-form-control-toggle-size-l: 1.375rem;
+  --wa-form-controls-required-content: '*';
+  --wa-form-controls-required-content-color: inherit;
+  --wa-form-controls-required-content-offset: -0.1em;
+
+  --wa-tooltip-arrow-size: 0.375rem;
+}
+
+:root.wa-theme-mellow-dark {
+  color-scheme: dark;
+
+  /**
+   * App
+   */
+  --wa-color-surface-raised: var(--wa-color-neutral-10);
+  --wa-color-surface-default: var(--wa-color-neutral-10);
+  --wa-color-surface-lowered: var(--wa-color-black);
+  --wa-color-surface-outline: var(--wa-color-neutral-20);
+
+  --wa-color-text-normal: var(--wa-color-neutral-80);
+  --wa-color-text-quiet: var(--wa-color-neutral-60);
+  --wa-color-text-inverse: var(--wa-color-neutral-10);
+  --wa-color-text-link: var(--wa-color-blue-60);
+
+  --wa-color-selection-background: var(--wa-color-green-40);
+  --wa-color-selection-text: var(--wa-color-white);
+
+  --wa-color-focus: var(--wa-color-blue-50);
+
+  --wa-color-tint-white: rgb(255 255 255 / 0.2);
+  --wa-color-tint-black: rgb(0 0 0 / 0.2);
+
+  --wa-color-tint-hover: black 8%;
+  --wa-color-tint-active: black 16%;
+
+  --wa-color-overlay: color-mix(in oklab, var(--wa-color-black) 50%, transparent);
+
+  --wa-color-shadow: color-mix(in oklab, var(--wa-color-black) 20%, transparent);
+
+  /**
+    * Semantic color variants
+    */
+  --wa-color-brand-fill-vivid: var(--wa-color-green-50);
+  --wa-color-brand-fill-vivid-alt: var(--wa-color-green-30);
+  --wa-color-brand-fill-muted: var(--wa-color-green-10);
+  --wa-color-brand-fill-muted-alt: var(--wa-color-green-20);
+  --wa-color-brand-outline-vivid: var(--wa-color-green-50);
+  --wa-color-brand-outline-vivid-alt: var(--wa-color-green-40);
+  --wa-color-brand-outline-muted: var(--wa-color-green-20);
+  --wa-color-brand-outline-muted-alt: var(--wa-color-green-30);
+  --wa-color-brand-text-on-vivid: var(--wa-color-white);
+  --wa-color-brand-text-on-muted: var(--wa-color-green-70);
+  --wa-color-brand-text-on-surface: var(--wa-color-green-60);
+
+  --wa-color-success-fill-vivid: var(--wa-color-green-50);
+  --wa-color-success-fill-vivid-alt: var(--wa-color-green-30);
+  --wa-color-success-fill-muted: var(--wa-color-green-10);
+  --wa-color-success-fill-muted-alt: var(--wa-color-green-20);
+  --wa-color-success-outline-vivid: var(--wa-color-green-50);
+  --wa-color-success-outline-vivid-alt: var(--wa-color-green-40);
+  --wa-color-success-outline-muted: var(--wa-color-green-20);
+  --wa-color-success-outline-muted-alt: var(--wa-color-green-30);
+  --wa-color-success-text-on-vivid: var(--wa-color-white);
+  --wa-color-success-text-on-muted: var(--wa-color-green-70);
+  --wa-color-success-text-on-surface: var(--wa-color-green-60);
+
+  --wa-color-warning-fill-vivid: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-vivid-alt: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-muted: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-muted-alt: var(--wa-color-yellow-20);
+  --wa-color-warning-outline-vivid: var(--wa-color-yellow-50);
+  --wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-40);
+  --wa-color-warning-outline-muted: var(--wa-color-yellow-20);
+  --wa-color-warning-outline-muted-alt: var(--wa-color-yellow-30);
+  --wa-color-warning-text-on-vivid: var(--wa-color-white);
+  --wa-color-warning-text-on-muted: var(--wa-color-yellow-70);
+  --wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
+
+  --wa-color-danger-fill-vivid: var(--wa-color-red-50);
+  --wa-color-danger-fill-vivid-alt: var(--wa-color-red-30);
+  --wa-color-danger-fill-muted: var(--wa-color-red-10);
+  --wa-color-danger-fill-muted-alt: var(--wa-color-red-20);
+  --wa-color-danger-outline-vivid: var(--wa-color-red-50);
+  --wa-color-danger-outline-vivid-alt: var(--wa-color-red-40);
+  --wa-color-danger-outline-muted: var(--wa-color-red-20);
+  --wa-color-danger-outline-muted-alt: var(--wa-color-red-30);
+  --wa-color-danger-text-on-vivid: var(--wa-color-white);
+  --wa-color-danger-text-on-muted: var(--wa-color-red-70);
+  --wa-color-danger-text-on-surface: var(--wa-color-red-60);
+
+  --wa-color-neutral-fill-vivid: var(--wa-color-neutral-50);
+  --wa-color-neutral-fill-vivid-alt: var(--wa-color-neutral-30);
+  --wa-color-neutral-fill-muted: var(--wa-color-neutral-10);
+  --wa-color-neutral-fill-muted-alt: var(--wa-color-neutral-20);
+  --wa-color-neutral-outline-vivid: var(--wa-color-neutral-50);
+  --wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-40);
+  --wa-color-neutral-outline-muted: var(--wa-color-neutral-20);
+  --wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-30);
+  --wa-color-neutral-text-on-vivid: var(--wa-color-white);
+  --wa-color-neutral-text-on-muted: var(--wa-color-neutral-70);
+  --wa-color-neutral-text-on-surface: var(--wa-color-neutral-60);
+}
+
+/* _utility.css */