seblify 0.3.0 → 0.4.0

package/dist/themes/pulse.css

@@ -0,0 +1,373 @@
+:root:not([data-seblify-theme]),
+:root[data-seblify-theme='pulse'] {
+  color-scheme: light;
+
+  --seblify-color-background: #f7f7ff;
+  --seblify-color-surface: #ffffff;
+  --seblify-color-surface-raised: #ffffff;
+  --seblify-color-surface-muted: #ecebff;
+  --seblify-color-surface-hover: #dedcff;
+  --seblify-color-surface-inverse: #0d0a22;
+  --seblify-color-surface-inverse-hover: #181133;
+  --seblify-color-border: #d4d0f5;
+  --seblify-color-border-strong: #aaa2dc;
+  --seblify-color-border-inverse: #5c5383;
+  --seblify-color-text: #171329;
+  --seblify-color-text-muted: #5c5472;
+  --seblify-color-text-subtle: #847b9e;
+  --seblify-color-text-inverse: #fbfaff;
+
+  --seblify-color-primary-fill: #008bd2;
+  --seblify-color-primary-fill-hover: #0074b8;
+  --seblify-color-primary-fill-text: #f8fdff;
+  --seblify-color-primary-surface: #dcf3ff;
+  --seblify-color-primary-surface-hover: #c3e9fb;
+  --seblify-color-primary-border: #83cbed;
+  --seblify-color-primary-text: #006a9f;
+  --seblify-color-primary-on-inverse-surface: #082b3a;
+  --seblify-color-primary-on-inverse-surface-hover: #0d3d52;
+  --seblify-color-primary-on-inverse-text: #a6efff;
+  --seblify-color-primary-on-inverse-border: #1d87a8;
+
+  --seblify-color-secondary-fill: #7c3aed;
+  --seblify-color-secondary-fill-hover: #682bd0;
+  --seblify-color-secondary-fill-text: #fffaff;
+  --seblify-color-secondary-surface: #eee5ff;
+  --seblify-color-secondary-surface-hover: #e0d0ff;
+  --seblify-color-secondary-border: #bea5f6;
+  --seblify-color-secondary-text: #5f29be;
+  --seblify-color-secondary-on-inverse-surface: #281641;
+  --seblify-color-secondary-on-inverse-surface-hover: #39205a;
+  --seblify-color-secondary-on-inverse-text: #dec3ff;
+  --seblify-color-secondary-on-inverse-border: #7f4fba;
+
+  --seblify-color-neutral-fill: #6a627c;
+  --seblify-color-neutral-fill-hover: #575067;
+  --seblify-color-neutral-fill-text: #fbfaff;
+  --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: #171329;
+  --seblify-color-strong-fill-hover: #080513;
+  --seblify-color-strong-fill-text: #fbfaff;
+  --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: #04a66a;
+  --seblify-color-success-fill-hover: #028b58;
+  --seblify-color-success-fill-text: #f6fffb;
+  --seblify-color-success-surface: #d9f5e9;
+  --seblify-color-success-surface-hover: #bfead8;
+  --seblify-color-success-border: #7bd0aa;
+  --seblify-color-success-text: #02744a;
+  --seblify-color-success-on-inverse-surface: #0a2e1f;
+  --seblify-color-success-on-inverse-surface-hover: #10422d;
+  --seblify-color-success-on-inverse-text: #a5f7cd;
+  --seblify-color-success-on-inverse-border: #2ca572;
+
+  --seblify-color-danger-fill: #e12d6f;
+  --seblify-color-danger-fill-hover: #c51f5c;
+  --seblify-color-danger-fill-text: #fffaff;
+  --seblify-color-danger-surface: #fae0ec;
+  --seblify-color-danger-surface-hover: #f2c6db;
+  --seblify-color-danger-border: #e68bb4;
+  --seblify-color-danger-text: #b51d55;
+  --seblify-color-danger-on-inverse-surface: #371327;
+  --seblify-color-danger-on-inverse-surface-hover: #4d1b38;
+  --seblify-color-danger-on-inverse-text: #ffb4d6;
+  --seblify-color-danger-on-inverse-border: #b54178;
+
+  --seblify-color-warning-fill: #d97706;
+  --seblify-color-warning-fill-hover: #b96304;
+  --seblify-color-warning-fill-text: #fff9ed;
+  --seblify-color-warning-surface: #f8ead2;
+  --seblify-color-warning-surface-hover: #eed5aa;
+  --seblify-color-warning-border: #d9ab62;
+  --seblify-color-warning-text: #965304;
+  --seblify-color-warning-on-inverse-surface: #332207;
+  --seblify-color-warning-on-inverse-surface-hover: #49320d;
+  --seblify-color-warning-on-inverse-text: #ffdda3;
+  --seblify-color-warning-on-inverse-border: #9e6d25;
+
+  --seblify-color-info-fill: #2563eb;
+  --seblify-color-info-fill-hover: #1d4fd0;
+  --seblify-color-info-fill-text: #fbfdff;
+  --seblify-color-info-surface: #e0eaff;
+  --seblify-color-info-surface-hover: #cadbff;
+  --seblify-color-info-border: #95b5f5;
+  --seblify-color-info-text: #1d4fb8;
+  --seblify-color-info-on-inverse-surface: #14254a;
+  --seblify-color-info-on-inverse-surface-hover: #1d3464;
+  --seblify-color-info-on-inverse-text: #bdd4ff;
+  --seblify-color-info-on-inverse-border: #577abd;
+
+  --seblify-color-focus-ring: #00aee8;
+  --seblify-opacity-disabled: 0.55;
+  --seblify-shadow-control: 0 1px 3px rgb(23 19 41 / 16%);
+  --seblify-shadow-raised: 0 16px 36px rgb(23 19 41 / 14%);
+  --seblify-shadow-status: 0 12px 28px rgb(0 139 210 / 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='pulse'][data-color-mode='dark'] {
+  color-scheme: dark;
+
+  --seblify-color-background: #070713;
+  --seblify-color-surface: #101023;
+  --seblify-color-surface-raised: #17172e;
+  --seblify-color-surface-muted: #22203f;
+  --seblify-color-surface-hover: #2f2a55;
+  --seblify-color-surface-inverse: #f7f5ff;
+  --seblify-color-surface-inverse-hover: #ffffff;
+  --seblify-color-border: #302d58;
+  --seblify-color-border-strong: #655da0;
+  --seblify-color-border-inverse: #cec8ec;
+  --seblify-color-text: #f4f1ff;
+  --seblify-color-text-muted: #c6bfdc;
+  --seblify-color-text-subtle: #9287b0;
+  --seblify-color-text-inverse: #111026;
+
+  --seblify-color-primary-fill: #28d7ff;
+  --seblify-color-primary-fill-hover: #5fe2ff;
+  --seblify-color-primary-fill-text: #02141b;
+  --seblify-color-primary-surface: #082b3a;
+  --seblify-color-primary-surface-hover: #0d3d52;
+  --seblify-color-primary-border: #1d87a8;
+  --seblify-color-primary-text: #a6efff;
+  --seblify-color-primary-on-inverse-surface: #dcf3ff;
+  --seblify-color-primary-on-inverse-surface-hover: #c3e9fb;
+  --seblify-color-primary-on-inverse-text: #006a9f;
+  --seblify-color-primary-on-inverse-border: #83cbed;
+
+  --seblify-color-secondary-fill: #b979ff;
+  --seblify-color-secondary-fill-hover: #c995ff;
+  --seblify-color-secondary-fill-text: #170622;
+  --seblify-color-secondary-surface: #281641;
+  --seblify-color-secondary-surface-hover: #39205a;
+  --seblify-color-secondary-border: #7f4fba;
+  --seblify-color-secondary-text: #dec3ff;
+  --seblify-color-secondary-on-inverse-surface: #eee5ff;
+  --seblify-color-secondary-on-inverse-surface-hover: #e0d0ff;
+  --seblify-color-secondary-on-inverse-text: #5f29be;
+  --seblify-color-secondary-on-inverse-border: #bea5f6;
+
+  --seblify-color-neutral-fill: #c6bfdc;
+  --seblify-color-neutral-fill-hover: #d7d1e9;
+  --seblify-color-neutral-fill-text: #111026;
+  --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: #4bea9d;
+  --seblify-color-success-fill-hover: #72f0b3;
+  --seblify-color-success-fill-text: #02150b;
+  --seblify-color-success-surface: #0a2e1f;
+  --seblify-color-success-surface-hover: #10422d;
+  --seblify-color-success-border: #2ca572;
+  --seblify-color-success-text: #a5f7cd;
+  --seblify-color-success-on-inverse-surface: #d9f5e9;
+  --seblify-color-success-on-inverse-surface-hover: #bfead8;
+  --seblify-color-success-on-inverse-text: #02744a;
+  --seblify-color-success-on-inverse-border: #7bd0aa;
+
+  --seblify-color-danger-fill: #ff5aa2;
+  --seblify-color-danger-fill-hover: #ff79b4;
+  --seblify-color-danger-fill-text: #210513;
+  --seblify-color-danger-surface: #371327;
+  --seblify-color-danger-surface-hover: #4d1b38;
+  --seblify-color-danger-border: #b54178;
+  --seblify-color-danger-text: #ffb4d6;
+  --seblify-color-danger-on-inverse-surface: #fae0ec;
+  --seblify-color-danger-on-inverse-surface-hover: #f2c6db;
+  --seblify-color-danger-on-inverse-text: #b51d55;
+  --seblify-color-danger-on-inverse-border: #e68bb4;
+
+  --seblify-color-warning-fill: #ffbe4d;
+  --seblify-color-warning-fill-hover: #ffce73;
+  --seblify-color-warning-fill-text: #180f02;
+  --seblify-color-warning-surface: #332207;
+  --seblify-color-warning-surface-hover: #49320d;
+  --seblify-color-warning-border: #9e6d25;
+  --seblify-color-warning-text: #ffdda3;
+  --seblify-color-warning-on-inverse-surface: #f8ead2;
+  --seblify-color-warning-on-inverse-surface-hover: #eed5aa;
+  --seblify-color-warning-on-inverse-text: #965304;
+  --seblify-color-warning-on-inverse-border: #d9ab62;
+
+  --seblify-color-info-fill: #78a7ff;
+  --seblify-color-info-fill-hover: #93b9ff;
+  --seblify-color-info-fill-text: #061125;
+  --seblify-color-info-surface: #14254a;
+  --seblify-color-info-surface-hover: #1d3464;
+  --seblify-color-info-border: #577abd;
+  --seblify-color-info-text: #bdd4ff;
+  --seblify-color-info-on-inverse-surface: #e0eaff;
+  --seblify-color-info-on-inverse-surface-hover: #cadbff;
+  --seblify-color-info-on-inverse-text: #1d4fb8;
+  --seblify-color-info-on-inverse-border: #95b5f5;
+
+  --seblify-color-focus-ring: #28d7ff;
+  --seblify-opacity-disabled: 0.5;
+  --seblify-shadow-control: 0 1px 3px rgb(0 0 0 / 48%);
+  --seblify-shadow-raised: 0 18px 38px rgb(0 0 0 / 48%);
+  --seblify-shadow-status: 0 12px 28px rgb(40 215 255 / 20%);
+  --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='pulse']:not([data-color-mode]) {
+    color-scheme: dark;
+
+    --seblify-color-background: #070713;
+    --seblify-color-surface: #101023;
+    --seblify-color-surface-raised: #17172e;
+    --seblify-color-surface-muted: #22203f;
+    --seblify-color-surface-hover: #2f2a55;
+    --seblify-color-surface-inverse: #f7f5ff;
+    --seblify-color-surface-inverse-hover: #ffffff;
+    --seblify-color-border: #302d58;
+    --seblify-color-border-strong: #655da0;
+    --seblify-color-border-inverse: #cec8ec;
+    --seblify-color-text: #f4f1ff;
+    --seblify-color-text-muted: #c6bfdc;
+    --seblify-color-text-subtle: #9287b0;
+    --seblify-color-text-inverse: #111026;
+
+    --seblify-color-primary-fill: #28d7ff;
+    --seblify-color-primary-fill-hover: #5fe2ff;
+    --seblify-color-primary-fill-text: #02141b;
+    --seblify-color-primary-surface: #082b3a;
+    --seblify-color-primary-surface-hover: #0d3d52;
+    --seblify-color-primary-border: #1d87a8;
+    --seblify-color-primary-text: #a6efff;
+    --seblify-color-primary-on-inverse-surface: #dcf3ff;
+    --seblify-color-primary-on-inverse-surface-hover: #c3e9fb;
+    --seblify-color-primary-on-inverse-text: #006a9f;
+    --seblify-color-primary-on-inverse-border: #83cbed;
+
+    --seblify-color-secondary-fill: #b979ff;
+    --seblify-color-secondary-fill-hover: #c995ff;
+    --seblify-color-secondary-fill-text: #170622;
+    --seblify-color-secondary-surface: #281641;
+    --seblify-color-secondary-surface-hover: #39205a;
+    --seblify-color-secondary-border: #7f4fba;
+    --seblify-color-secondary-text: #dec3ff;
+    --seblify-color-secondary-on-inverse-surface: #eee5ff;
+    --seblify-color-secondary-on-inverse-surface-hover: #e0d0ff;
+    --seblify-color-secondary-on-inverse-text: #5f29be;
+    --seblify-color-secondary-on-inverse-border: #bea5f6;
+
+    --seblify-color-neutral-fill: #c6bfdc;
+    --seblify-color-neutral-fill-hover: #d7d1e9;
+    --seblify-color-neutral-fill-text: #111026;
+    --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: #4bea9d;
+    --seblify-color-success-fill-hover: #72f0b3;
+    --seblify-color-success-fill-text: #02150b;
+    --seblify-color-success-surface: #0a2e1f;
+    --seblify-color-success-surface-hover: #10422d;
+    --seblify-color-success-border: #2ca572;
+    --seblify-color-success-text: #a5f7cd;
+    --seblify-color-success-on-inverse-surface: #d9f5e9;
+    --seblify-color-success-on-inverse-surface-hover: #bfead8;
+    --seblify-color-success-on-inverse-text: #02744a;
+    --seblify-color-success-on-inverse-border: #7bd0aa;
+
+    --seblify-color-danger-fill: #ff5aa2;
+    --seblify-color-danger-fill-hover: #ff79b4;
+    --seblify-color-danger-fill-text: #210513;
+    --seblify-color-danger-surface: #371327;
+    --seblify-color-danger-surface-hover: #4d1b38;
+    --seblify-color-danger-border: #b54178;
+    --seblify-color-danger-text: #ffb4d6;
+    --seblify-color-danger-on-inverse-surface: #fae0ec;
+    --seblify-color-danger-on-inverse-surface-hover: #f2c6db;
+    --seblify-color-danger-on-inverse-text: #b51d55;
+    --seblify-color-danger-on-inverse-border: #e68bb4;
+
+    --seblify-color-warning-fill: #ffbe4d;
+    --seblify-color-warning-fill-hover: #ffce73;
+    --seblify-color-warning-fill-text: #180f02;
+    --seblify-color-warning-surface: #332207;
+    --seblify-color-warning-surface-hover: #49320d;
+    --seblify-color-warning-border: #9e6d25;
+    --seblify-color-warning-text: #ffdda3;
+    --seblify-color-warning-on-inverse-surface: #f8ead2;
+    --seblify-color-warning-on-inverse-surface-hover: #eed5aa;
+    --seblify-color-warning-on-inverse-text: #965304;
+    --seblify-color-warning-on-inverse-border: #d9ab62;
+
+    --seblify-color-info-fill: #78a7ff;
+    --seblify-color-info-fill-hover: #93b9ff;
+    --seblify-color-info-fill-text: #061125;
+    --seblify-color-info-surface: #14254a;
+    --seblify-color-info-surface-hover: #1d3464;
+    --seblify-color-info-border: #577abd;
+    --seblify-color-info-text: #bdd4ff;
+    --seblify-color-info-on-inverse-surface: #e0eaff;
+    --seblify-color-info-on-inverse-surface-hover: #cadbff;
+    --seblify-color-info-on-inverse-text: #1d4fb8;
+    --seblify-color-info-on-inverse-border: #95b5f5;
+
+    --seblify-color-focus-ring: #28d7ff;
+    --seblify-opacity-disabled: 0.5;
+    --seblify-shadow-control: 0 1px 3px rgb(0 0 0 / 48%);
+    --seblify-shadow-raised: 0 18px 38px rgb(0 0 0 / 48%);
+    --seblify-shadow-status: 0 12px 28px rgb(40 215 255 / 20%);
+    --seblify-z-index-tooltip: 30;
+    --seblify-z-index-floating-action-button: 30;
+  }
+}