seblify 0.2.1 → 0.4.0

package/dist/theme.css

@@ -1,161 +1 @@
-:root,
-[data-theme='light'] {
-  --seblify-color-page: #f4f6f8;
-  --seblify-color-text: #172033;
-  --seblify-color-text-muted: #516176;
-  --seblify-color-text-subtle: #667085;
-  --seblify-color-text-inverse: #ffffff;
-  --seblify-color-surface: #ffffff;
-  --seblify-color-surface-raised: #ffffff;
-  --seblify-color-surface-muted: #d9e0e8;
-  --seblify-color-surface-hover: #f1f4f9;
-  --seblify-color-surface-accent: #f7fbfb;
-  --seblify-color-surface-inverse: #172033;
-  --seblify-color-surface-inverse-hover: #263043;
-  --seblify-color-border: #c8d2df;
-  --seblify-color-border-strong: #aab7c5;
-  --seblify-color-border-accent: #9ab7ba;
-  --seblify-color-border-inverse: #263043;
-  --seblify-color-fill-accent: #146a6f;
-  --seblify-color-fill-accent-hover: #0d4d52;
-  --seblify-color-fill-accent-text: #ffffff;
-  --seblify-color-fill-primary: var(--seblify-color-fill-accent);
-  --seblify-color-fill-primary-text: var(--seblify-color-fill-accent-text);
-  --seblify-color-fill-neutral: #516176;
-  --seblify-color-fill-neutral-text: #ffffff;
-  --seblify-color-fill-success: #1f7a3f;
-  --seblify-color-fill-success-text: #ffffff;
-  --seblify-color-fill-danger: #c93434;
-  --seblify-color-fill-danger-text: #ffffff;
-  --seblify-color-fill-warning: #8a5a00;
-  --seblify-color-fill-warning-text: #ffffff;
-  --seblify-color-fill-info: #1f6fb2;
-  --seblify-color-fill-info-text: #ffffff;
-  --seblify-color-fill-inverse: var(--seblify-color-surface-inverse);
-  --seblify-color-fill-inverse-text: var(--seblify-color-text-inverse);
-  --seblify-color-info-surface: #eaf3ff;
-  --seblify-color-info-border: #bfd1ea;
-  --seblify-color-info-text: #102f55;
-  --seblify-color-success-surface: #e8f8ee;
-  --seblify-color-success-border: #b8ddc7;
-  --seblify-color-success-text: #143d25;
-  --seblify-color-warning-surface: #fff6d8;
-  --seblify-color-warning-border: #e8d28f;
-  --seblify-color-warning-text: #4d3900;
-  --seblify-color-error-surface: #fff0f0;
-  --seblify-color-error-border: #efb6b6;
-  --seblify-color-error-text: #5a1717;
-  --seblify-color-focus-ring: #9bd4d8;
-  --seblify-opacity-disabled: 0.56;
-  --seblify-shadow-control: 0 1px 3px rgb(16 24 40 / 24%);
-  --seblify-shadow-raised: 0 12px 28px rgb(23 32 51 / 22%);
-  --seblify-shadow-status: 0 10px 24px rgb(20 61 37 / 14%);
-}
-
-[data-theme='dark'] {
-  --seblify-color-page: #0d1117;
-  --seblify-color-text: #f5f7fa;
-  --seblify-color-text-muted: #aab7c5;
-  --seblify-color-text-subtle: #7d8da1;
-  --seblify-color-text-inverse: #12181f;
-  --seblify-color-surface: #12181f;
-  --seblify-color-surface-raised: #18212b;
-  --seblify-color-surface-muted: #344253;
-  --seblify-color-surface-hover: #253241;
-  --seblify-color-surface-accent: #17383d;
-  --seblify-color-surface-inverse: #f5f7fa;
-  --seblify-color-surface-inverse-hover: #d9e0e8;
-  --seblify-color-border: #344253;
-  --seblify-color-border-strong: #5d6b7c;
-  --seblify-color-border-accent: #58c7ce;
-  --seblify-color-border-inverse: #d9e0e8;
-  --seblify-color-fill-accent: #58c7ce;
-  --seblify-color-fill-accent-hover: #8adbe0;
-  --seblify-color-fill-accent-text: #092d31;
-  --seblify-color-fill-primary: var(--seblify-color-fill-accent);
-  --seblify-color-fill-primary-text: var(--seblify-color-fill-accent-text);
-  --seblify-color-fill-neutral: #aab7c5;
-  --seblify-color-fill-neutral-text: #12181f;
-  --seblify-color-fill-success: #58d77b;
-  --seblify-color-fill-success-text: #082211;
-  --seblify-color-fill-danger: #ff7a7a;
-  --seblify-color-fill-danger-text: #2b0909;
-  --seblify-color-fill-warning: #ffd166;
-  --seblify-color-fill-warning-text: #2c2105;
-  --seblify-color-fill-info: #79bdff;
-  --seblify-color-fill-info-text: #08223e;
-  --seblify-color-fill-inverse: var(--seblify-color-surface-inverse);
-  --seblify-color-fill-inverse-text: var(--seblify-color-text-inverse);
-  --seblify-color-info-surface: #10243a;
-  --seblify-color-info-border: #2f5f91;
-  --seblify-color-info-text: #b9dcff;
-  --seblify-color-success-surface: #123220;
-  --seblify-color-success-border: #3d7951;
-  --seblify-color-success-text: #b9f3c8;
-  --seblify-color-warning-surface: #3a2d0b;
-  --seblify-color-warning-border: #8a6a18;
-  --seblify-color-warning-text: #ffe59a;
-  --seblify-color-error-surface: #3a1515;
-  --seblify-color-error-border: #8f3b3b;
-  --seblify-color-error-text: #ffc9c9;
-  --seblify-color-focus-ring: #58c7ce;
-  --seblify-opacity-disabled: 0.5;
-  --seblify-shadow-control: 0 1px 3px rgb(0 0 0 / 42%);
-  --seblify-shadow-raised: 0 12px 28px rgb(0 0 0 / 42%);
-  --seblify-shadow-status: 0 10px 24px rgb(0 0 0 / 32%);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    --seblify-color-page: #0d1117;
-    --seblify-color-text: #f5f7fa;
-    --seblify-color-text-muted: #aab7c5;
-    --seblify-color-text-subtle: #7d8da1;
-    --seblify-color-text-inverse: #12181f;
-    --seblify-color-surface: #12181f;
-    --seblify-color-surface-raised: #18212b;
-    --seblify-color-surface-muted: #344253;
-    --seblify-color-surface-hover: #253241;
-    --seblify-color-surface-accent: #17383d;
-    --seblify-color-surface-inverse: #f5f7fa;
-    --seblify-color-surface-inverse-hover: #d9e0e8;
-    --seblify-color-border: #344253;
-    --seblify-color-border-strong: #5d6b7c;
-    --seblify-color-border-accent: #58c7ce;
-    --seblify-color-border-inverse: #d9e0e8;
-    --seblify-color-fill-accent: #58c7ce;
-    --seblify-color-fill-accent-hover: #8adbe0;
-    --seblify-color-fill-accent-text: #092d31;
-    --seblify-color-fill-primary: var(--seblify-color-fill-accent);
-    --seblify-color-fill-primary-text: var(--seblify-color-fill-accent-text);
-    --seblify-color-fill-neutral: #aab7c5;
-    --seblify-color-fill-neutral-text: #12181f;
-    --seblify-color-fill-success: #58d77b;
-    --seblify-color-fill-success-text: #082211;
-    --seblify-color-fill-danger: #ff7a7a;
-    --seblify-color-fill-danger-text: #2b0909;
-    --seblify-color-fill-warning: #ffd166;
-    --seblify-color-fill-warning-text: #2c2105;
-    --seblify-color-fill-info: #79bdff;
-    --seblify-color-fill-info-text: #08223e;
-    --seblify-color-fill-inverse: var(--seblify-color-surface-inverse);
-    --seblify-color-fill-inverse-text: var(--seblify-color-text-inverse);
-    --seblify-color-info-surface: #10243a;
-    --seblify-color-info-border: #2f5f91;
-    --seblify-color-info-text: #b9dcff;
-    --seblify-color-success-surface: #123220;
-    --seblify-color-success-border: #3d7951;
-    --seblify-color-success-text: #b9f3c8;
-    --seblify-color-warning-surface: #3a2d0b;
-    --seblify-color-warning-border: #8a6a18;
-    --seblify-color-warning-text: #ffe59a;
-    --seblify-color-error-surface: #3a1515;
-    --seblify-color-error-border: #8f3b3b;
-    --seblify-color-error-text: #ffc9c9;
-    --seblify-color-focus-ring: #58c7ce;
-    --seblify-opacity-disabled: 0.5;
-    --seblify-shadow-control: 0 1px 3px rgb(0 0 0 / 42%);
-    --seblify-shadow-raised: 0 12px 28px rgb(0 0 0 / 42%);
-    --seblify-shadow-status: 0 10px 24px rgb(0 0 0 / 32%);
-  }
-}
+@import './themes/solar.css';

package/dist/themes/canopy.css

@@ -0,0 +1,373 @@
+:root:not([data-seblify-theme]),
+:root[data-seblify-theme='canopy'] {
+  color-scheme: light;
+
+  --seblify-color-background: #f7f3e8;
+  --seblify-color-surface: #fffdf7;
+  --seblify-color-surface-raised: #ffffff;
+  --seblify-color-surface-muted: #ebe3d4;
+  --seblify-color-surface-hover: #dfd3c1;
+  --seblify-color-surface-inverse: #101b14;
+  --seblify-color-surface-inverse-hover: #1b2b21;
+  --seblify-color-border: #dacdb8;
+  --seblify-color-border-strong: #bba78d;
+  --seblify-color-border-inverse: #536858;
+  --seblify-color-text: #172016;
+  --seblify-color-text-muted: #596652;
+  --seblify-color-text-subtle: #7e8876;
+  --seblify-color-text-inverse: #fff8ed;
+
+  --seblify-color-primary-fill: #17633a;
+  --seblify-color-primary-fill-hover: #104f2e;
+  --seblify-color-primary-fill-text: #fbfff8;
+  --seblify-color-primary-surface: #dfeee3;
+  --seblify-color-primary-surface-hover: #c9e1d0;
+  --seblify-color-primary-border: #8dbc9b;
+  --seblify-color-primary-text: #11512f;
+  --seblify-color-primary-on-inverse-surface: #102a1a;
+  --seblify-color-primary-on-inverse-surface-hover: #183b26;
+  --seblify-color-primary-on-inverse-text: #abe9bb;
+  --seblify-color-primary-on-inverse-border: #4f9367;
+
+  --seblify-color-secondary-fill: #9b6230;
+  --seblify-color-secondary-fill-hover: #815028;
+  --seblify-color-secondary-fill-text: #fffaf2;
+  --seblify-color-secondary-surface: #f1e5d5;
+  --seblify-color-secondary-surface-hover: #e7d4bb;
+  --seblify-color-secondary-border: #ccaa82;
+  --seblify-color-secondary-text: #7a4a22;
+  --seblify-color-secondary-on-inverse-surface: #302313;
+  --seblify-color-secondary-on-inverse-surface-hover: #44321c;
+  --seblify-color-secondary-on-inverse-text: #efd19f;
+  --seblify-color-secondary-on-inverse-border: #90714b;
+
+  --seblify-color-neutral-fill: #65715f;
+  --seblify-color-neutral-fill-hover: #535e4e;
+  --seblify-color-neutral-fill-text: #fff8ed;
+  --seblify-color-neutral-surface: var(--seblify-color-surface-muted);
+  --seblify-color-neutral-surface-hover: var(--seblify-color-surface-hover);
+  --seblify-color-neutral-border: var(--seblify-color-border);
+  --seblify-color-neutral-text: var(--seblify-color-text-muted);
+  --seblify-color-neutral-on-inverse-surface: color-mix(in srgb, var(--seblify-color-text-inverse) 10%, var(--seblify-color-surface-inverse) 90%);
+  --seblify-color-neutral-on-inverse-surface-hover: color-mix(in srgb, var(--seblify-color-text-inverse) 16%, var(--seblify-color-surface-inverse) 84%);
+  --seblify-color-neutral-on-inverse-text: var(--seblify-color-text-inverse);
+  --seblify-color-neutral-on-inverse-border: var(--seblify-color-border-inverse);
+
+  --seblify-color-strong-fill: #172016;
+  --seblify-color-strong-fill-hover: #091109;
+  --seblify-color-strong-fill-text: #fff8ed;
+  --seblify-color-strong-surface: var(--seblify-color-surface-raised);
+  --seblify-color-strong-surface-hover: var(--seblify-color-surface-muted);
+  --seblify-color-strong-border: var(--seblify-color-border-strong);
+  --seblify-color-strong-text: var(--seblify-color-text);
+  --seblify-color-strong-on-inverse-surface: color-mix(in srgb, var(--seblify-color-text-inverse) 14%, var(--seblify-color-surface-inverse) 86%);
+  --seblify-color-strong-on-inverse-surface-hover: color-mix(in srgb, var(--seblify-color-text-inverse) 22%, var(--seblify-color-surface-inverse) 78%);
+  --seblify-color-strong-on-inverse-text: var(--seblify-color-text-inverse);
+  --seblify-color-strong-on-inverse-border: color-mix(in srgb, var(--seblify-color-text-inverse) 42%, var(--seblify-color-border-inverse) 58%);
+
+  --seblify-color-success-fill: #22965a;
+  --seblify-color-success-fill-hover: #1a7d4a;
+  --seblify-color-success-fill-text: #fbfff8;
+  --seblify-color-success-surface: #dff3e8;
+  --seblify-color-success-surface-hover: #c8e8d7;
+  --seblify-color-success-border: #8ecbab;
+  --seblify-color-success-text: #177246;
+  --seblify-color-success-on-inverse-surface: #102c1b;
+  --seblify-color-success-on-inverse-surface-hover: #183d27;
+  --seblify-color-success-on-inverse-text: #a8edc2;
+  --seblify-color-success-on-inverse-border: #479366;
+
+  --seblify-color-danger-fill: #c94743;
+  --seblify-color-danger-fill-hover: #ad3835;
+  --seblify-color-danger-fill-text: #fffafa;
+  --seblify-color-danger-surface: #f7e1de;
+  --seblify-color-danger-surface-hover: #edc9c5;
+  --seblify-color-danger-border: #dc938d;
+  --seblify-color-danger-text: #9b312f;
+  --seblify-color-danger-on-inverse-surface: #321815;
+  --seblify-color-danger-on-inverse-surface-hover: #46221e;
+  --seblify-color-danger-on-inverse-text: #ffc3bd;
+  --seblify-color-danger-on-inverse-border: #9f5852;
+
+  --seblify-color-warning-fill: #b7791f;
+  --seblify-color-warning-fill-hover: #966118;
+  --seblify-color-warning-fill-text: #fff9ed;
+  --seblify-color-warning-surface: #f4ead4;
+  --seblify-color-warning-surface-hover: #ead6af;
+  --seblify-color-warning-border: #d2ad70;
+  --seblify-color-warning-text: #815714;
+  --seblify-color-warning-on-inverse-surface: #302413;
+  --seblify-color-warning-on-inverse-surface-hover: #44331c;
+  --seblify-color-warning-on-inverse-text: #f3d79f;
+  --seblify-color-warning-on-inverse-border: #927348;
+
+  --seblify-color-info-fill: #2f7f77;
+  --seblify-color-info-fill-hover: #276a64;
+  --seblify-color-info-fill-text: #f8fffe;
+  --seblify-color-info-surface: #dff0ed;
+  --seblify-color-info-surface-hover: #c9e3df;
+  --seblify-color-info-border: #93c4bd;
+  --seblify-color-info-text: #276963;
+  --seblify-color-info-on-inverse-surface: #102a2a;
+  --seblify-color-info-on-inverse-surface-hover: #183b3a;
+  --seblify-color-info-on-inverse-text: #aee7e2;
+  --seblify-color-info-on-inverse-border: #4a8d8a;
+
+  --seblify-color-focus-ring: #17633a;
+  --seblify-opacity-disabled: 0.55;
+  --seblify-shadow-control: 0 1px 3px rgb(23 32 22 / 16%);
+  --seblify-shadow-raised: 0 14px 34px rgb(23 32 22 / 13%);
+  --seblify-shadow-status: 0 12px 26px rgb(23 99 58 / 15%);
+  --seblify-z-index-tooltip: 30;
+  --seblify-z-index-floating-action-button: 30;
+}
+
+:root:not([data-seblify-theme])[data-color-mode='dark'],
+:root[data-seblify-theme='canopy'][data-color-mode='dark'] {
+  color-scheme: dark;
+
+  --seblify-color-background: #08110c;
+  --seblify-color-surface: #101c15;
+  --seblify-color-surface-raised: #17261d;
+  --seblify-color-surface-muted: #213428;
+  --seblify-color-surface-hover: #2b4334;
+  --seblify-color-surface-inverse: #f8efe0;
+  --seblify-color-surface-inverse-hover: #fff8ec;
+  --seblify-color-border: #2e4636;
+  --seblify-color-border-strong: #5d8067;
+  --seblify-color-border-inverse: #cfbea5;
+  --seblify-color-text: #f2efe5;
+  --seblify-color-text-muted: #c3cebd;
+  --seblify-color-text-subtle: #8fa087;
+  --seblify-color-text-inverse: #101b14;
+
+  --seblify-color-primary-fill: #7bcf95;
+  --seblify-color-primary-fill-hover: #93dba8;
+  --seblify-color-primary-fill-text: #041208;
+  --seblify-color-primary-surface: #102a1a;
+  --seblify-color-primary-surface-hover: #183b26;
+  --seblify-color-primary-border: #4f9367;
+  --seblify-color-primary-text: #abe9bb;
+  --seblify-color-primary-on-inverse-surface: #dfeee3;
+  --seblify-color-primary-on-inverse-surface-hover: #c9e1d0;
+  --seblify-color-primary-on-inverse-text: #11512f;
+  --seblify-color-primary-on-inverse-border: #8dbc9b;
+
+  --seblify-color-secondary-fill: #d3a15f;
+  --seblify-color-secondary-fill-hover: #dfb476;
+  --seblify-color-secondary-fill-text: #170e04;
+  --seblify-color-secondary-surface: #302313;
+  --seblify-color-secondary-surface-hover: #44321c;
+  --seblify-color-secondary-border: #90714b;
+  --seblify-color-secondary-text: #efd19f;
+  --seblify-color-secondary-on-inverse-surface: #f1e5d5;
+  --seblify-color-secondary-on-inverse-surface-hover: #e7d4bb;
+  --seblify-color-secondary-on-inverse-text: #7a4a22;
+  --seblify-color-secondary-on-inverse-border: #ccaa82;
+
+  --seblify-color-neutral-fill: #c3cebd;
+  --seblify-color-neutral-fill-hover: #d4decf;
+  --seblify-color-neutral-fill-text: #101b14;
+  --seblify-color-neutral-surface: var(--seblify-color-surface-muted);
+  --seblify-color-neutral-surface-hover: var(--seblify-color-surface-hover);
+  --seblify-color-neutral-border: var(--seblify-color-border);
+  --seblify-color-neutral-text: var(--seblify-color-text-muted);
+  --seblify-color-neutral-on-inverse-surface: color-mix(in srgb, var(--seblify-color-text-inverse) 10%, var(--seblify-color-surface-inverse) 90%);
+  --seblify-color-neutral-on-inverse-surface-hover: color-mix(in srgb, var(--seblify-color-text-inverse) 16%, var(--seblify-color-surface-inverse) 84%);
+  --seblify-color-neutral-on-inverse-text: var(--seblify-color-text-inverse);
+  --seblify-color-neutral-on-inverse-border: var(--seblify-color-border-inverse);
+
+  --seblify-color-strong-fill: var(--seblify-color-surface-inverse);
+  --seblify-color-strong-fill-hover: var(--seblify-color-surface-inverse-hover);
+  --seblify-color-strong-fill-text: var(--seblify-color-text-inverse);
+  --seblify-color-strong-surface: var(--seblify-color-surface-raised);
+  --seblify-color-strong-surface-hover: var(--seblify-color-surface-hover);
+  --seblify-color-strong-border: var(--seblify-color-border-strong);
+  --seblify-color-strong-text: var(--seblify-color-text);
+  --seblify-color-strong-on-inverse-surface: color-mix(in srgb, var(--seblify-color-text-inverse) 14%, var(--seblify-color-surface-inverse) 86%);
+  --seblify-color-strong-on-inverse-surface-hover: color-mix(in srgb, var(--seblify-color-text-inverse) 22%, var(--seblify-color-surface-inverse) 78%);
+  --seblify-color-strong-on-inverse-text: var(--seblify-color-text-inverse);
+  --seblify-color-strong-on-inverse-border: color-mix(in srgb, var(--seblify-color-text-inverse) 42%, var(--seblify-color-border-inverse) 58%);
+
+  --seblify-color-success-fill: #65d694;
+  --seblify-color-success-fill-hover: #7de2a6;
+  --seblify-color-success-fill-text: #031207;
+  --seblify-color-success-surface: #102c1b;
+  --seblify-color-success-surface-hover: #183d27;
+  --seblify-color-success-border: #479366;
+  --seblify-color-success-text: #a8edc2;
+  --seblify-color-success-on-inverse-surface: #dff3e8;
+  --seblify-color-success-on-inverse-surface-hover: #c8e8d7;
+  --seblify-color-success-on-inverse-text: #177246;
+  --seblify-color-success-on-inverse-border: #8ecbab;
+
+  --seblify-color-danger-fill: #ef8780;
+  --seblify-color-danger-fill-hover: #f59f98;
+  --seblify-color-danger-fill-text: #1a0605;
+  --seblify-color-danger-surface: #321815;
+  --seblify-color-danger-surface-hover: #46221e;
+  --seblify-color-danger-border: #9f5852;
+  --seblify-color-danger-text: #ffc3bd;
+  --seblify-color-danger-on-inverse-surface: #f7e1de;
+  --seblify-color-danger-on-inverse-surface-hover: #edc9c5;
+  --seblify-color-danger-on-inverse-text: #9b312f;
+  --seblify-color-danger-on-inverse-border: #dc938d;
+
+  --seblify-color-warning-fill: #e4bd73;
+  --seblify-color-warning-fill-hover: #eecc8c;
+  --seblify-color-warning-fill-text: #180f04;
+  --seblify-color-warning-surface: #302413;
+  --seblify-color-warning-surface-hover: #44331c;
+  --seblify-color-warning-border: #927348;
+  --seblify-color-warning-text: #f3d79f;
+  --seblify-color-warning-on-inverse-surface: #f4ead4;
+  --seblify-color-warning-on-inverse-surface-hover: #ead6af;
+  --seblify-color-warning-on-inverse-text: #815714;
+  --seblify-color-warning-on-inverse-border: #d2ad70;
+
+  --seblify-color-info-fill: #75c9c2;
+  --seblify-color-info-fill-hover: #8ed7d1;
+  --seblify-color-info-fill-text: #031312;
+  --seblify-color-info-surface: #102a2a;
+  --seblify-color-info-surface-hover: #183b3a;
+  --seblify-color-info-border: #4a8d8a;
+  --seblify-color-info-text: #aee7e2;
+  --seblify-color-info-on-inverse-surface: #dff0ed;
+  --seblify-color-info-on-inverse-surface-hover: #c9e3df;
+  --seblify-color-info-on-inverse-text: #276963;
+  --seblify-color-info-on-inverse-border: #93c4bd;
+
+  --seblify-color-focus-ring: #93dba8;
+  --seblify-opacity-disabled: 0.5;
+  --seblify-shadow-control: 0 1px 3px rgb(0 0 0 / 44%);
+  --seblify-shadow-raised: 0 14px 34px rgb(0 0 0 / 44%);
+  --seblify-shadow-status: 0 12px 26px rgb(123 207 149 / 18%);
+  --seblify-z-index-tooltip: 30;
+  --seblify-z-index-floating-action-button: 30;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-seblify-theme]):not([data-color-mode]),
+  :root[data-seblify-theme='canopy']:not([data-color-mode]) {
+    color-scheme: dark;
+
+    --seblify-color-background: #08110c;
+    --seblify-color-surface: #101c15;
+    --seblify-color-surface-raised: #17261d;
+    --seblify-color-surface-muted: #213428;
+    --seblify-color-surface-hover: #2b4334;
+    --seblify-color-surface-inverse: #f8efe0;
+    --seblify-color-surface-inverse-hover: #fff8ec;
+    --seblify-color-border: #2e4636;
+    --seblify-color-border-strong: #5d8067;
+    --seblify-color-border-inverse: #cfbea5;
+    --seblify-color-text: #f2efe5;
+    --seblify-color-text-muted: #c3cebd;
+    --seblify-color-text-subtle: #8fa087;
+    --seblify-color-text-inverse: #101b14;
+
+    --seblify-color-primary-fill: #7bcf95;
+    --seblify-color-primary-fill-hover: #93dba8;
+    --seblify-color-primary-fill-text: #041208;
+    --seblify-color-primary-surface: #102a1a;
+    --seblify-color-primary-surface-hover: #183b26;
+    --seblify-color-primary-border: #4f9367;
+    --seblify-color-primary-text: #abe9bb;
+    --seblify-color-primary-on-inverse-surface: #dfeee3;
+    --seblify-color-primary-on-inverse-surface-hover: #c9e1d0;
+    --seblify-color-primary-on-inverse-text: #11512f;
+    --seblify-color-primary-on-inverse-border: #8dbc9b;
+
+    --seblify-color-secondary-fill: #d3a15f;
+    --seblify-color-secondary-fill-hover: #dfb476;
+    --seblify-color-secondary-fill-text: #170e04;
+    --seblify-color-secondary-surface: #302313;
+    --seblify-color-secondary-surface-hover: #44321c;
+    --seblify-color-secondary-border: #90714b;
+    --seblify-color-secondary-text: #efd19f;
+    --seblify-color-secondary-on-inverse-surface: #f1e5d5;
+    --seblify-color-secondary-on-inverse-surface-hover: #e7d4bb;
+    --seblify-color-secondary-on-inverse-text: #7a4a22;
+    --seblify-color-secondary-on-inverse-border: #ccaa82;
+
+    --seblify-color-neutral-fill: #c3cebd;
+    --seblify-color-neutral-fill-hover: #d4decf;
+    --seblify-color-neutral-fill-text: #101b14;
+    --seblify-color-neutral-surface: var(--seblify-color-surface-muted);
+    --seblify-color-neutral-surface-hover: var(--seblify-color-surface-hover);
+    --seblify-color-neutral-border: var(--seblify-color-border);
+    --seblify-color-neutral-text: var(--seblify-color-text-muted);
+    --seblify-color-neutral-on-inverse-surface: color-mix(in srgb, var(--seblify-color-text-inverse) 10%, var(--seblify-color-surface-inverse) 90%);
+    --seblify-color-neutral-on-inverse-surface-hover: color-mix(in srgb, var(--seblify-color-text-inverse) 16%, var(--seblify-color-surface-inverse) 84%);
+    --seblify-color-neutral-on-inverse-text: var(--seblify-color-text-inverse);
+    --seblify-color-neutral-on-inverse-border: var(--seblify-color-border-inverse);
+
+    --seblify-color-strong-fill: var(--seblify-color-surface-inverse);
+    --seblify-color-strong-fill-hover: var(--seblify-color-surface-inverse-hover);
+    --seblify-color-strong-fill-text: var(--seblify-color-text-inverse);
+    --seblify-color-strong-surface: var(--seblify-color-surface-raised);
+    --seblify-color-strong-surface-hover: var(--seblify-color-surface-hover);
+    --seblify-color-strong-border: var(--seblify-color-border-strong);
+    --seblify-color-strong-text: var(--seblify-color-text);
+    --seblify-color-strong-on-inverse-surface: color-mix(in srgb, var(--seblify-color-text-inverse) 14%, var(--seblify-color-surface-inverse) 86%);
+    --seblify-color-strong-on-inverse-surface-hover: color-mix(in srgb, var(--seblify-color-text-inverse) 22%, var(--seblify-color-surface-inverse) 78%);
+    --seblify-color-strong-on-inverse-text: var(--seblify-color-text-inverse);
+    --seblify-color-strong-on-inverse-border: color-mix(in srgb, var(--seblify-color-text-inverse) 42%, var(--seblify-color-border-inverse) 58%);
+
+    --seblify-color-success-fill: #65d694;
+    --seblify-color-success-fill-hover: #7de2a6;
+    --seblify-color-success-fill-text: #031207;
+    --seblify-color-success-surface: #102c1b;
+    --seblify-color-success-surface-hover: #183d27;
+    --seblify-color-success-border: #479366;
+    --seblify-color-success-text: #a8edc2;
+    --seblify-color-success-on-inverse-surface: #dff3e8;
+    --seblify-color-success-on-inverse-surface-hover: #c8e8d7;
+    --seblify-color-success-on-inverse-text: #177246;
+    --seblify-color-success-on-inverse-border: #8ecbab;
+
+    --seblify-color-danger-fill: #ef8780;
+    --seblify-color-danger-fill-hover: #f59f98;
+    --seblify-color-danger-fill-text: #1a0605;
+    --seblify-color-danger-surface: #321815;
+    --seblify-color-danger-surface-hover: #46221e;
+    --seblify-color-danger-border: #9f5852;
+    --seblify-color-danger-text: #ffc3bd;
+    --seblify-color-danger-on-inverse-surface: #f7e1de;
+    --seblify-color-danger-on-inverse-surface-hover: #edc9c5;
+    --seblify-color-danger-on-inverse-text: #9b312f;
+    --seblify-color-danger-on-inverse-border: #dc938d;
+
+    --seblify-color-warning-fill: #e4bd73;
+    --seblify-color-warning-fill-hover: #eecc8c;
+    --seblify-color-warning-fill-text: #180f04;
+    --seblify-color-warning-surface: #302413;
+    --seblify-color-warning-surface-hover: #44331c;
+    --seblify-color-warning-border: #927348;
+    --seblify-color-warning-text: #f3d79f;
+    --seblify-color-warning-on-inverse-surface: #f4ead4;
+    --seblify-color-warning-on-inverse-surface-hover: #ead6af;
+    --seblify-color-warning-on-inverse-text: #815714;
+    --seblify-color-warning-on-inverse-border: #d2ad70;
+
+    --seblify-color-info-fill: #75c9c2;
+    --seblify-color-info-fill-hover: #8ed7d1;
+    --seblify-color-info-fill-text: #031312;
+    --seblify-color-info-surface: #102a2a;
+    --seblify-color-info-surface-hover: #183b3a;
+    --seblify-color-info-border: #4a8d8a;
+    --seblify-color-info-text: #aee7e2;
+    --seblify-color-info-on-inverse-surface: #dff0ed;
+    --seblify-color-info-on-inverse-surface-hover: #c9e3df;
+    --seblify-color-info-on-inverse-text: #276963;
+    --seblify-color-info-on-inverse-border: #93c4bd;
+
+    --seblify-color-focus-ring: #93dba8;
+    --seblify-opacity-disabled: 0.5;
+    --seblify-shadow-control: 0 1px 3px rgb(0 0 0 / 44%);
+    --seblify-shadow-raised: 0 14px 34px rgb(0 0 0 / 44%);
+    --seblify-shadow-status: 0 12px 26px rgb(123 207 149 / 18%);
+    --seblify-z-index-tooltip: 30;
+    --seblify-z-index-floating-action-button: 30;
+  }
+}