seblify 0.2.1 → 0.4.0

package/dist/themes/noir.css

@@ -0,0 +1,373 @@
+:root:not([data-seblify-theme]),
+:root[data-seblify-theme='noir'] {
+  color-scheme: light;
+
+  --seblify-color-background: #f8f4ea;
+  --seblify-color-surface: #fffdf8;
+  --seblify-color-surface-raised: #ffffff;
+  --seblify-color-surface-muted: #eee6d8;
+  --seblify-color-surface-hover: #e2d6c4;
+  --seblify-color-surface-inverse: #0d0b09;
+  --seblify-color-surface-inverse-hover: #1b1712;
+  --seblify-color-border: #d9cbb6;
+  --seblify-color-border-strong: #b79e77;
+  --seblify-color-border-inverse: #655944;
+  --seblify-color-text: #1c1711;
+  --seblify-color-text-muted: #635744;
+  --seblify-color-text-subtle: #88795f;
+  --seblify-color-text-inverse: #fbf4e6;
+
+  --seblify-color-primary-fill: #9f7431;
+  --seblify-color-primary-fill-hover: #856026;
+  --seblify-color-primary-fill-text: #fff9ed;
+  --seblify-color-primary-surface: #f3e8d3;
+  --seblify-color-primary-surface-hover: #e8d6b3;
+  --seblify-color-primary-border: #d2ad70;
+  --seblify-color-primary-text: #79551f;
+  --seblify-color-primary-on-inverse-surface: #302313;
+  --seblify-color-primary-on-inverse-surface-hover: #44321b;
+  --seblify-color-primary-on-inverse-text: #efd8a8;
+  --seblify-color-primary-on-inverse-border: #967548;
+
+  --seblify-color-secondary-fill: #176c4e;
+  --seblify-color-secondary-fill-hover: #115a40;
+  --seblify-color-secondary-fill-text: #f7fffb;
+  --seblify-color-secondary-surface: #deeee6;
+  --seblify-color-secondary-surface-hover: #c8e2d5;
+  --seblify-color-secondary-border: #8dbba4;
+  --seblify-color-secondary-text: #11573e;
+  --seblify-color-secondary-on-inverse-surface: #10281c;
+  --seblify-color-secondary-on-inverse-surface-hover: #183927;
+  --seblify-color-secondary-on-inverse-text: #abe5c7;
+  --seblify-color-secondary-on-inverse-border: #4a8968;
+
+  --seblify-color-neutral-fill: #6d6252;
+  --seblify-color-neutral-fill-hover: #5a5043;
+  --seblify-color-neutral-fill-text: #fff9ed;
+  --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: #1c1711;
+  --seblify-color-strong-fill-hover: #070504;
+  --seblify-color-strong-fill-text: #fbf4e6;
+  --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: #24764f;
+  --seblify-color-success-fill-hover: #1b6240;
+  --seblify-color-success-fill-text: #f7fffb;
+  --seblify-color-success-surface: #e0f0e7;
+  --seblify-color-success-surface-hover: #cae3d5;
+  --seblify-color-success-border: #91bea5;
+  --seblify-color-success-text: #1a5d3d;
+  --seblify-color-success-on-inverse-surface: #102a1d;
+  --seblify-color-success-on-inverse-surface-hover: #183b29;
+  --seblify-color-success-on-inverse-text: #afe7c5;
+  --seblify-color-success-on-inverse-border: #4e9069;
+
+  --seblify-color-danger-fill: #9f3348;
+  --seblify-color-danger-fill-hover: #86293a;
+  --seblify-color-danger-fill-text: #fff8f9;
+  --seblify-color-danger-surface: #f2e0e4;
+  --seblify-color-danger-surface-hover: #e6c7cf;
+  --seblify-color-danger-border: #cc8f9e;
+  --seblify-color-danger-text: #7e2738;
+  --seblify-color-danger-on-inverse-surface: #31171f;
+  --seblify-color-danger-on-inverse-surface-hover: #44202b;
+  --seblify-color-danger-on-inverse-text: #f6bcc8;
+  --seblify-color-danger-on-inverse-border: #965465;
+
+  --seblify-color-warning-fill: #a36f1d;
+  --seblify-color-warning-fill-hover: #875a15;
+  --seblify-color-warning-fill-text: #fff9ed;
+  --seblify-color-warning-surface: #f4ead5;
+  --seblify-color-warning-surface-hover: #ead7b2;
+  --seblify-color-warning-border: #d2ad6d;
+  --seblify-color-warning-text: #765117;
+  --seblify-color-warning-on-inverse-surface: #302414;
+  --seblify-color-warning-on-inverse-surface-hover: #44331d;
+  --seblify-color-warning-on-inverse-text: #f0d8a3;
+  --seblify-color-warning-on-inverse-border: #927348;
+
+  --seblify-color-info-fill: #3c6383;
+  --seblify-color-info-fill-hover: #31526f;
+  --seblify-color-info-fill-text: #f8fbfd;
+  --seblify-color-info-surface: #e2eaf0;
+  --seblify-color-info-surface-hover: #d0dde7;
+  --seblify-color-info-border: #9bb5c8;
+  --seblify-color-info-text: #314f6a;
+  --seblify-color-info-on-inverse-surface: #172634;
+  --seblify-color-info-on-inverse-surface-hover: #213647;
+  --seblify-color-info-on-inverse-text: #c5dced;
+  --seblify-color-info-on-inverse-border: #5f7e98;
+
+  --seblify-color-focus-ring: #9f7431;
+  --seblify-opacity-disabled: 0.55;
+  --seblify-shadow-control: 0 1px 3px rgb(28 23 17 / 16%);
+  --seblify-shadow-raised: 0 16px 38px rgb(28 23 17 / 15%);
+  --seblify-shadow-status: 0 12px 28px rgb(159 116 49 / 16%);
+  --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='noir'][data-color-mode='dark'] {
+  color-scheme: dark;
+
+  --seblify-color-background: #050403;
+  --seblify-color-surface: #0d0b09;
+  --seblify-color-surface-raised: #15110d;
+  --seblify-color-surface-muted: #211a13;
+  --seblify-color-surface-hover: #2e2419;
+  --seblify-color-surface-inverse: #f6ecda;
+  --seblify-color-surface-inverse-hover: #fff8ec;
+  --seblify-color-border: #2f261b;
+  --seblify-color-border-strong: #6e5a3e;
+  --seblify-color-border-inverse: #d4c1a4;
+  --seblify-color-text: #f6ecda;
+  --seblify-color-text-muted: #cdbda4;
+  --seblify-color-text-subtle: #938267;
+  --seblify-color-text-inverse: #0d0b09;
+
+  --seblify-color-primary-fill: #d9b875;
+  --seblify-color-primary-fill-hover: #e4c98d;
+  --seblify-color-primary-fill-text: #170f05;
+  --seblify-color-primary-surface: #302313;
+  --seblify-color-primary-surface-hover: #44321b;
+  --seblify-color-primary-border: #967548;
+  --seblify-color-primary-text: #efd8a8;
+  --seblify-color-primary-on-inverse-surface: #f3e8d3;
+  --seblify-color-primary-on-inverse-surface-hover: #e8d6b3;
+  --seblify-color-primary-on-inverse-text: #79551f;
+  --seblify-color-primary-on-inverse-border: #d2ad70;
+
+  --seblify-color-secondary-fill: #6ec49b;
+  --seblify-color-secondary-fill-hover: #88d3ae;
+  --seblify-color-secondary-fill-text: #03140c;
+  --seblify-color-secondary-surface: #10281c;
+  --seblify-color-secondary-surface-hover: #183927;
+  --seblify-color-secondary-border: #4a8968;
+  --seblify-color-secondary-text: #abe5c7;
+  --seblify-color-secondary-on-inverse-surface: #deeee6;
+  --seblify-color-secondary-on-inverse-surface-hover: #c8e2d5;
+  --seblify-color-secondary-on-inverse-text: #11573e;
+  --seblify-color-secondary-on-inverse-border: #8dbba4;
+
+  --seblify-color-neutral-fill: #cdbda4;
+  --seblify-color-neutral-fill-hover: #e0cfb5;
+  --seblify-color-neutral-fill-text: #0d0b09;
+  --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: #7ccc9e;
+  --seblify-color-success-fill-hover: #94d9b0;
+  --seblify-color-success-fill-text: #03140a;
+  --seblify-color-success-surface: #102a1d;
+  --seblify-color-success-surface-hover: #183b29;
+  --seblify-color-success-border: #4e9069;
+  --seblify-color-success-text: #afe7c5;
+  --seblify-color-success-on-inverse-surface: #e0f0e7;
+  --seblify-color-success-on-inverse-surface-hover: #cae3d5;
+  --seblify-color-success-on-inverse-text: #1a5d3d;
+  --seblify-color-success-on-inverse-border: #91bea5;
+
+  --seblify-color-danger-fill: #e48395;
+  --seblify-color-danger-fill-hover: #ee9aaa;
+  --seblify-color-danger-fill-text: #1d060a;
+  --seblify-color-danger-surface: #31171f;
+  --seblify-color-danger-surface-hover: #44202b;
+  --seblify-color-danger-border: #965465;
+  --seblify-color-danger-text: #f6bcc8;
+  --seblify-color-danger-on-inverse-surface: #f2e0e4;
+  --seblify-color-danger-on-inverse-surface-hover: #e6c7cf;
+  --seblify-color-danger-on-inverse-text: #7e2738;
+  --seblify-color-danger-on-inverse-border: #cc8f9e;
+
+  --seblify-color-warning-fill: #e1bf78;
+  --seblify-color-warning-fill-hover: #ebcf90;
+  --seblify-color-warning-fill-text: #170f05;
+  --seblify-color-warning-surface: #302414;
+  --seblify-color-warning-surface-hover: #44331d;
+  --seblify-color-warning-border: #927348;
+  --seblify-color-warning-text: #f0d8a3;
+  --seblify-color-warning-on-inverse-surface: #f4ead5;
+  --seblify-color-warning-on-inverse-surface-hover: #ead7b2;
+  --seblify-color-warning-on-inverse-text: #765117;
+  --seblify-color-warning-on-inverse-border: #d2ad6d;
+
+  --seblify-color-info-fill: #94b8d5;
+  --seblify-color-info-fill-hover: #a9c7df;
+  --seblify-color-info-fill-text: #07111a;
+  --seblify-color-info-surface: #172634;
+  --seblify-color-info-surface-hover: #213647;
+  --seblify-color-info-border: #5f7e98;
+  --seblify-color-info-text: #c5dced;
+  --seblify-color-info-on-inverse-surface: #e2eaf0;
+  --seblify-color-info-on-inverse-surface-hover: #d0dde7;
+  --seblify-color-info-on-inverse-text: #314f6a;
+  --seblify-color-info-on-inverse-border: #9bb5c8;
+
+  --seblify-color-focus-ring: #d9b875;
+  --seblify-opacity-disabled: 0.5;
+  --seblify-shadow-control: 0 1px 3px rgb(0 0 0 / 48%);
+  --seblify-shadow-raised: 0 18px 42px rgb(0 0 0 / 52%);
+  --seblify-shadow-status: 0 12px 28px rgb(217 184 117 / 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='noir']:not([data-color-mode]) {
+    color-scheme: dark;
+
+    --seblify-color-background: #050403;
+    --seblify-color-surface: #0d0b09;
+    --seblify-color-surface-raised: #15110d;
+    --seblify-color-surface-muted: #211a13;
+    --seblify-color-surface-hover: #2e2419;
+    --seblify-color-surface-inverse: #f6ecda;
+    --seblify-color-surface-inverse-hover: #fff8ec;
+    --seblify-color-border: #2f261b;
+    --seblify-color-border-strong: #6e5a3e;
+    --seblify-color-border-inverse: #d4c1a4;
+    --seblify-color-text: #f6ecda;
+    --seblify-color-text-muted: #cdbda4;
+    --seblify-color-text-subtle: #938267;
+    --seblify-color-text-inverse: #0d0b09;
+
+    --seblify-color-primary-fill: #d9b875;
+    --seblify-color-primary-fill-hover: #e4c98d;
+    --seblify-color-primary-fill-text: #170f05;
+    --seblify-color-primary-surface: #302313;
+    --seblify-color-primary-surface-hover: #44321b;
+    --seblify-color-primary-border: #967548;
+    --seblify-color-primary-text: #efd8a8;
+    --seblify-color-primary-on-inverse-surface: #f3e8d3;
+    --seblify-color-primary-on-inverse-surface-hover: #e8d6b3;
+    --seblify-color-primary-on-inverse-text: #79551f;
+    --seblify-color-primary-on-inverse-border: #d2ad70;
+
+    --seblify-color-secondary-fill: #6ec49b;
+    --seblify-color-secondary-fill-hover: #88d3ae;
+    --seblify-color-secondary-fill-text: #03140c;
+    --seblify-color-secondary-surface: #10281c;
+    --seblify-color-secondary-surface-hover: #183927;
+    --seblify-color-secondary-border: #4a8968;
+    --seblify-color-secondary-text: #abe5c7;
+    --seblify-color-secondary-on-inverse-surface: #deeee6;
+    --seblify-color-secondary-on-inverse-surface-hover: #c8e2d5;
+    --seblify-color-secondary-on-inverse-text: #11573e;
+    --seblify-color-secondary-on-inverse-border: #8dbba4;
+
+    --seblify-color-neutral-fill: #cdbda4;
+    --seblify-color-neutral-fill-hover: #e0cfb5;
+    --seblify-color-neutral-fill-text: #0d0b09;
+    --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: #7ccc9e;
+    --seblify-color-success-fill-hover: #94d9b0;
+    --seblify-color-success-fill-text: #03140a;
+    --seblify-color-success-surface: #102a1d;
+    --seblify-color-success-surface-hover: #183b29;
+    --seblify-color-success-border: #4e9069;
+    --seblify-color-success-text: #afe7c5;
+    --seblify-color-success-on-inverse-surface: #e0f0e7;
+    --seblify-color-success-on-inverse-surface-hover: #cae3d5;
+    --seblify-color-success-on-inverse-text: #1a5d3d;
+    --seblify-color-success-on-inverse-border: #91bea5;
+
+    --seblify-color-danger-fill: #e48395;
+    --seblify-color-danger-fill-hover: #ee9aaa;
+    --seblify-color-danger-fill-text: #1d060a;
+    --seblify-color-danger-surface: #31171f;
+    --seblify-color-danger-surface-hover: #44202b;
+    --seblify-color-danger-border: #965465;
+    --seblify-color-danger-text: #f6bcc8;
+    --seblify-color-danger-on-inverse-surface: #f2e0e4;
+    --seblify-color-danger-on-inverse-surface-hover: #e6c7cf;
+    --seblify-color-danger-on-inverse-text: #7e2738;
+    --seblify-color-danger-on-inverse-border: #cc8f9e;
+
+    --seblify-color-warning-fill: #e1bf78;
+    --seblify-color-warning-fill-hover: #ebcf90;
+    --seblify-color-warning-fill-text: #170f05;
+    --seblify-color-warning-surface: #302414;
+    --seblify-color-warning-surface-hover: #44331d;
+    --seblify-color-warning-border: #927348;
+    --seblify-color-warning-text: #f0d8a3;
+    --seblify-color-warning-on-inverse-surface: #f4ead5;
+    --seblify-color-warning-on-inverse-surface-hover: #ead7b2;
+    --seblify-color-warning-on-inverse-text: #765117;
+    --seblify-color-warning-on-inverse-border: #d2ad6d;
+
+    --seblify-color-info-fill: #94b8d5;
+    --seblify-color-info-fill-hover: #a9c7df;
+    --seblify-color-info-fill-text: #07111a;
+    --seblify-color-info-surface: #172634;
+    --seblify-color-info-surface-hover: #213647;
+    --seblify-color-info-border: #5f7e98;
+    --seblify-color-info-text: #c5dced;
+    --seblify-color-info-on-inverse-surface: #e2eaf0;
+    --seblify-color-info-on-inverse-surface-hover: #d0dde7;
+    --seblify-color-info-on-inverse-text: #314f6a;
+    --seblify-color-info-on-inverse-border: #9bb5c8;
+
+    --seblify-color-focus-ring: #d9b875;
+    --seblify-opacity-disabled: 0.5;
+    --seblify-shadow-control: 0 1px 3px rgb(0 0 0 / 48%);
+    --seblify-shadow-raised: 0 18px 42px rgb(0 0 0 / 52%);
+    --seblify-shadow-status: 0 12px 28px rgb(217 184 117 / 18%);
+    --seblify-z-index-tooltip: 30;
+    --seblify-z-index-floating-action-button: 30;
+  }
+}