seblify 0.2.1 → 0.4.0

package/dist/themes/signal.css

@@ -0,0 +1,373 @@
+:root:not([data-seblify-theme]),
+:root[data-seblify-theme='signal'] {
+  color-scheme: light;
+
+  --seblify-color-background: #ffffff;
+  --seblify-color-surface: #ffffff;
+  --seblify-color-surface-raised: #ffffff;
+  --seblify-color-surface-muted: #e7edf5;
+  --seblify-color-surface-hover: #d5deeb;
+  --seblify-color-surface-inverse: #05070a;
+  --seblify-color-surface-inverse-hover: #151b24;
+  --seblify-color-border: #5c6878;
+  --seblify-color-border-strong: #1d2733;
+  --seblify-color-border-inverse: #d8e0ea;
+  --seblify-color-text: #05070a;
+  --seblify-color-text-muted: #252f3d;
+  --seblify-color-text-subtle: #495566;
+  --seblify-color-text-inverse: #ffffff;
+
+  --seblify-color-primary-fill: #003ee6;
+  --seblify-color-primary-fill-hover: #002aa3;
+  --seblify-color-primary-fill-text: #ffffff;
+  --seblify-color-primary-surface: #e5ebff;
+  --seblify-color-primary-surface-hover: #ccd8ff;
+  --seblify-color-primary-border: #315dff;
+  --seblify-color-primary-text: #002aa3;
+  --seblify-color-primary-on-inverse-surface: #071f68;
+  --seblify-color-primary-on-inverse-surface-hover: #0b2f98;
+  --seblify-color-primary-on-inverse-text: #c6d6ff;
+  --seblify-color-primary-on-inverse-border: #8fb0ff;
+
+  --seblify-color-secondary-fill: #8f00cc;
+  --seblify-color-secondary-fill-hover: #690094;
+  --seblify-color-secondary-fill-text: #ffffff;
+  --seblify-color-secondary-surface: #f3ddff;
+  --seblify-color-secondary-surface-hover: #e8c2ff;
+  --seblify-color-secondary-border: #b829ef;
+  --seblify-color-secondary-text: #690094;
+  --seblify-color-secondary-on-inverse-surface: #3d0057;
+  --seblify-color-secondary-on-inverse-surface-hover: #5b007f;
+  --seblify-color-secondary-on-inverse-text: #f5d2ff;
+  --seblify-color-secondary-on-inverse-border: #ea9cff;
+
+  --seblify-color-neutral-fill: #252f3d;
+  --seblify-color-neutral-fill-hover: #111821;
+  --seblify-color-neutral-fill-text: #ffffff;
+  --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: #05070a;
+  --seblify-color-strong-fill-hover: #000000;
+  --seblify-color-strong-fill-text: #ffffff;
+  --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: #007a3d;
+  --seblify-color-success-fill-hover: #005c2e;
+  --seblify-color-success-fill-text: #ffffff;
+  --seblify-color-success-surface: #dff6e9;
+  --seblify-color-success-surface-hover: #c2ebd3;
+  --seblify-color-success-border: #008f48;
+  --seblify-color-success-text: #005c2e;
+  --seblify-color-success-on-inverse-surface: #003d1f;
+  --seblify-color-success-on-inverse-surface-hover: #005c2e;
+  --seblify-color-success-on-inverse-text: #b8ffd6;
+  --seblify-color-success-on-inverse-border: #70f2aa;
+
+  --seblify-color-danger-fill: #d0001f;
+  --seblify-color-danger-fill-hover: #9f0018;
+  --seblify-color-danger-fill-text: #ffffff;
+  --seblify-color-danger-surface: #ffe2e6;
+  --seblify-color-danger-surface-hover: #ffc7d0;
+  --seblify-color-danger-border: #e30022;
+  --seblify-color-danger-text: #9f0018;
+  --seblify-color-danger-on-inverse-surface: #62000f;
+  --seblify-color-danger-on-inverse-surface-hover: #8a0015;
+  --seblify-color-danger-on-inverse-text: #ffc5cf;
+  --seblify-color-danger-on-inverse-border: #ff8599;
+
+  --seblify-color-warning-fill: #a35a00;
+  --seblify-color-warning-fill-hover: #784100;
+  --seblify-color-warning-fill-text: #ffffff;
+  --seblify-color-warning-surface: #ffefd6;
+  --seblify-color-warning-surface-hover: #ffdda8;
+  --seblify-color-warning-border: #c46c00;
+  --seblify-color-warning-text: #784100;
+  --seblify-color-warning-on-inverse-surface: #4f2c00;
+  --seblify-color-warning-on-inverse-surface-hover: #744000;
+  --seblify-color-warning-on-inverse-text: #ffe4a8;
+  --seblify-color-warning-on-inverse-border: #ffd06b;
+
+  --seblify-color-info-fill: #006f9f;
+  --seblify-color-info-fill-hover: #005174;
+  --seblify-color-info-fill-text: #ffffff;
+  --seblify-color-info-surface: #dff3ff;
+  --seblify-color-info-surface-hover: #c4e8fb;
+  --seblify-color-info-border: #007eb5;
+  --seblify-color-info-text: #005174;
+  --seblify-color-info-on-inverse-surface: #00364e;
+  --seblify-color-info-on-inverse-surface-hover: #005174;
+  --seblify-color-info-on-inverse-text: #c4f1ff;
+  --seblify-color-info-on-inverse-border: #83ddff;
+
+  --seblify-color-focus-ring: #ffbf00;
+  --seblify-opacity-disabled: 0.48;
+  --seblify-shadow-control: 0 0 0 1px rgb(5 7 10 / 22%);
+  --seblify-shadow-raised: 0 12px 28px rgb(5 7 10 / 24%);
+  --seblify-shadow-status: 0 0 0 2px rgb(255 191 0 / 36%);
+  --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='signal'][data-color-mode='dark'] {
+  color-scheme: dark;
+
+  --seblify-color-background: #000000;
+  --seblify-color-surface: #07090d;
+  --seblify-color-surface-raised: #10141b;
+  --seblify-color-surface-muted: #1f2937;
+  --seblify-color-surface-hover: #303d50;
+  --seblify-color-surface-inverse: #ffffff;
+  --seblify-color-surface-inverse-hover: #eef3f8;
+  --seblify-color-border: #7f8fa3;
+  --seblify-color-border-strong: #d8e0ea;
+  --seblify-color-border-inverse: #252f3d;
+  --seblify-color-text: #ffffff;
+  --seblify-color-text-muted: #e0e7ef;
+  --seblify-color-text-subtle: #b7c3d1;
+  --seblify-color-text-inverse: #05070a;
+
+  --seblify-color-primary-fill: #7aa2ff;
+  --seblify-color-primary-fill-hover: #a1bcff;
+  --seblify-color-primary-fill-text: #000f37;
+  --seblify-color-primary-surface: #071f68;
+  --seblify-color-primary-surface-hover: #0b2f98;
+  --seblify-color-primary-border: #8fb0ff;
+  --seblify-color-primary-text: #c6d6ff;
+  --seblify-color-primary-on-inverse-surface: #e5ebff;
+  --seblify-color-primary-on-inverse-surface-hover: #ccd8ff;
+  --seblify-color-primary-on-inverse-text: #002aa3;
+  --seblify-color-primary-on-inverse-border: #315dff;
+
+  --seblify-color-secondary-fill: #e18cff;
+  --seblify-color-secondary-fill-hover: #edb2ff;
+  --seblify-color-secondary-fill-text: #250032;
+  --seblify-color-secondary-surface: #3d0057;
+  --seblify-color-secondary-surface-hover: #5b007f;
+  --seblify-color-secondary-border: #ea9cff;
+  --seblify-color-secondary-text: #f5d2ff;
+  --seblify-color-secondary-on-inverse-surface: #f3ddff;
+  --seblify-color-secondary-on-inverse-surface-hover: #e8c2ff;
+  --seblify-color-secondary-on-inverse-text: #690094;
+  --seblify-color-secondary-on-inverse-border: #b829ef;
+
+  --seblify-color-neutral-fill: #e0e7ef;
+  --seblify-color-neutral-fill-hover: #ffffff;
+  --seblify-color-neutral-fill-text: #05070a;
+  --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: #5ff0a0;
+  --seblify-color-success-fill-hover: #89f5b8;
+  --seblify-color-success-fill-text: #001b0d;
+  --seblify-color-success-surface: #003d1f;
+  --seblify-color-success-surface-hover: #005c2e;
+  --seblify-color-success-border: #70f2aa;
+  --seblify-color-success-text: #b8ffd6;
+  --seblify-color-success-on-inverse-surface: #dff6e9;
+  --seblify-color-success-on-inverse-surface-hover: #c2ebd3;
+  --seblify-color-success-on-inverse-text: #005c2e;
+  --seblify-color-success-on-inverse-border: #008f48;
+
+  --seblify-color-danger-fill: #ff6f86;
+  --seblify-color-danger-fill-hover: #ff94a5;
+  --seblify-color-danger-fill-text: #300006;
+  --seblify-color-danger-surface: #62000f;
+  --seblify-color-danger-surface-hover: #8a0015;
+  --seblify-color-danger-border: #ff8599;
+  --seblify-color-danger-text: #ffc5cf;
+  --seblify-color-danger-on-inverse-surface: #ffe2e6;
+  --seblify-color-danger-on-inverse-surface-hover: #ffc7d0;
+  --seblify-color-danger-on-inverse-text: #9f0018;
+  --seblify-color-danger-on-inverse-border: #e30022;
+
+  --seblify-color-warning-fill: #ffc247;
+  --seblify-color-warning-fill-hover: #ffd370;
+  --seblify-color-warning-fill-text: #241300;
+  --seblify-color-warning-surface: #4f2c00;
+  --seblify-color-warning-surface-hover: #744000;
+  --seblify-color-warning-border: #ffd06b;
+  --seblify-color-warning-text: #ffe4a8;
+  --seblify-color-warning-on-inverse-surface: #ffefd6;
+  --seblify-color-warning-on-inverse-surface-hover: #ffdda8;
+  --seblify-color-warning-on-inverse-text: #784100;
+  --seblify-color-warning-on-inverse-border: #c46c00;
+
+  --seblify-color-info-fill: #6dd7ff;
+  --seblify-color-info-fill-hover: #97e3ff;
+  --seblify-color-info-fill-text: #001824;
+  --seblify-color-info-surface: #00364e;
+  --seblify-color-info-surface-hover: #005174;
+  --seblify-color-info-border: #83ddff;
+  --seblify-color-info-text: #c4f1ff;
+  --seblify-color-info-on-inverse-surface: #dff3ff;
+  --seblify-color-info-on-inverse-surface-hover: #c4e8fb;
+  --seblify-color-info-on-inverse-text: #005174;
+  --seblify-color-info-on-inverse-border: #007eb5;
+
+  --seblify-color-focus-ring: #ffdf33;
+  --seblify-opacity-disabled: 0.45;
+  --seblify-shadow-control: 0 0 0 1px rgb(255 255 255 / 30%);
+  --seblify-shadow-raised: 0 18px 44px rgb(0 0 0 / 70%);
+  --seblify-shadow-status: 0 0 0 2px rgb(255 223 51 / 45%);
+  --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='signal']:not([data-color-mode]) {
+    color-scheme: dark;
+
+    --seblify-color-background: #000000;
+    --seblify-color-surface: #07090d;
+    --seblify-color-surface-raised: #10141b;
+    --seblify-color-surface-muted: #1f2937;
+    --seblify-color-surface-hover: #303d50;
+    --seblify-color-surface-inverse: #ffffff;
+    --seblify-color-surface-inverse-hover: #eef3f8;
+    --seblify-color-border: #7f8fa3;
+    --seblify-color-border-strong: #d8e0ea;
+    --seblify-color-border-inverse: #252f3d;
+    --seblify-color-text: #ffffff;
+    --seblify-color-text-muted: #e0e7ef;
+    --seblify-color-text-subtle: #b7c3d1;
+    --seblify-color-text-inverse: #05070a;
+
+    --seblify-color-primary-fill: #7aa2ff;
+    --seblify-color-primary-fill-hover: #a1bcff;
+    --seblify-color-primary-fill-text: #000f37;
+    --seblify-color-primary-surface: #071f68;
+    --seblify-color-primary-surface-hover: #0b2f98;
+    --seblify-color-primary-border: #8fb0ff;
+    --seblify-color-primary-text: #c6d6ff;
+    --seblify-color-primary-on-inverse-surface: #e5ebff;
+    --seblify-color-primary-on-inverse-surface-hover: #ccd8ff;
+    --seblify-color-primary-on-inverse-text: #002aa3;
+    --seblify-color-primary-on-inverse-border: #315dff;
+
+    --seblify-color-secondary-fill: #e18cff;
+    --seblify-color-secondary-fill-hover: #edb2ff;
+    --seblify-color-secondary-fill-text: #250032;
+    --seblify-color-secondary-surface: #3d0057;
+    --seblify-color-secondary-surface-hover: #5b007f;
+    --seblify-color-secondary-border: #ea9cff;
+    --seblify-color-secondary-text: #f5d2ff;
+    --seblify-color-secondary-on-inverse-surface: #f3ddff;
+    --seblify-color-secondary-on-inverse-surface-hover: #e8c2ff;
+    --seblify-color-secondary-on-inverse-text: #690094;
+    --seblify-color-secondary-on-inverse-border: #b829ef;
+
+    --seblify-color-neutral-fill: #e0e7ef;
+    --seblify-color-neutral-fill-hover: #ffffff;
+    --seblify-color-neutral-fill-text: #05070a;
+    --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: #5ff0a0;
+    --seblify-color-success-fill-hover: #89f5b8;
+    --seblify-color-success-fill-text: #001b0d;
+    --seblify-color-success-surface: #003d1f;
+    --seblify-color-success-surface-hover: #005c2e;
+    --seblify-color-success-border: #70f2aa;
+    --seblify-color-success-text: #b8ffd6;
+    --seblify-color-success-on-inverse-surface: #dff6e9;
+    --seblify-color-success-on-inverse-surface-hover: #c2ebd3;
+    --seblify-color-success-on-inverse-text: #005c2e;
+    --seblify-color-success-on-inverse-border: #008f48;
+
+    --seblify-color-danger-fill: #ff6f86;
+    --seblify-color-danger-fill-hover: #ff94a5;
+    --seblify-color-danger-fill-text: #300006;
+    --seblify-color-danger-surface: #62000f;
+    --seblify-color-danger-surface-hover: #8a0015;
+    --seblify-color-danger-border: #ff8599;
+    --seblify-color-danger-text: #ffc5cf;
+    --seblify-color-danger-on-inverse-surface: #ffe2e6;
+    --seblify-color-danger-on-inverse-surface-hover: #ffc7d0;
+    --seblify-color-danger-on-inverse-text: #9f0018;
+    --seblify-color-danger-on-inverse-border: #e30022;
+
+    --seblify-color-warning-fill: #ffc247;
+    --seblify-color-warning-fill-hover: #ffd370;
+    --seblify-color-warning-fill-text: #241300;
+    --seblify-color-warning-surface: #4f2c00;
+    --seblify-color-warning-surface-hover: #744000;
+    --seblify-color-warning-border: #ffd06b;
+    --seblify-color-warning-text: #ffe4a8;
+    --seblify-color-warning-on-inverse-surface: #ffefd6;
+    --seblify-color-warning-on-inverse-surface-hover: #ffdda8;
+    --seblify-color-warning-on-inverse-text: #784100;
+    --seblify-color-warning-on-inverse-border: #c46c00;
+
+    --seblify-color-info-fill: #6dd7ff;
+    --seblify-color-info-fill-hover: #97e3ff;
+    --seblify-color-info-fill-text: #001824;
+    --seblify-color-info-surface: #00364e;
+    --seblify-color-info-surface-hover: #005174;
+    --seblify-color-info-border: #83ddff;
+    --seblify-color-info-text: #c4f1ff;
+    --seblify-color-info-on-inverse-surface: #dff3ff;
+    --seblify-color-info-on-inverse-surface-hover: #c4e8fb;
+    --seblify-color-info-on-inverse-text: #005174;
+    --seblify-color-info-on-inverse-border: #007eb5;
+
+    --seblify-color-focus-ring: #ffdf33;
+    --seblify-opacity-disabled: 0.45;
+    --seblify-shadow-control: 0 0 0 1px rgb(255 255 255 / 30%);
+    --seblify-shadow-raised: 0 18px 44px rgb(0 0 0 / 70%);
+    --seblify-shadow-status: 0 0 0 2px rgb(255 223 51 / 45%);
+    --seblify-z-index-tooltip: 30;
+    --seblify-z-index-floating-action-button: 30;
+  }
+}