seblify 0.3.0 → 0.4.0

package/dist/themes/sorbet.css

@@ -0,0 +1,373 @@
+:root:not([data-seblify-theme]),
+:root[data-seblify-theme='sorbet'] {
+  color-scheme: light;
+
+  --seblify-color-background: #fbf7fb;
+  --seblify-color-surface: #fffefe;
+  --seblify-color-surface-raised: #ffffff;
+  --seblify-color-surface-muted: #f0e8f4;
+  --seblify-color-surface-hover: #e7dced;
+  --seblify-color-surface-inverse: #211827;
+  --seblify-color-surface-inverse-hover: #30233a;
+  --seblify-color-border: #ded2e5;
+  --seblify-color-border-strong: #bca9c8;
+  --seblify-color-border-inverse: #6c5d75;
+  --seblify-color-text: #251c2c;
+  --seblify-color-text-muted: #655a6f;
+  --seblify-color-text-subtle: #8b7d95;
+  --seblify-color-text-inverse: #fff8fe;
+
+  --seblify-color-primary-fill: #7e61c9;
+  --seblify-color-primary-fill-hover: #6a4fb1;
+  --seblify-color-primary-fill-text: #fffaff;
+  --seblify-color-primary-surface: #eee8ff;
+  --seblify-color-primary-surface-hover: #e1d7fb;
+  --seblify-color-primary-border: #c2b1ec;
+  --seblify-color-primary-text: #60449d;
+  --seblify-color-primary-on-inverse-surface: #2c2346;
+  --seblify-color-primary-on-inverse-surface-hover: #3b2f5e;
+  --seblify-color-primary-on-inverse-text: #e0d5ff;
+  --seblify-color-primary-on-inverse-border: #7965ba;
+
+  --seblify-color-secondary-fill: #2fae82;
+  --seblify-color-secondary-fill-hover: #268f6c;
+  --seblify-color-secondary-fill-text: #f8fffc;
+  --seblify-color-secondary-surface: #e1f5ee;
+  --seblify-color-secondary-surface-hover: #cbecdf;
+  --seblify-color-secondary-border: #92d3bd;
+  --seblify-color-secondary-text: #20765a;
+  --seblify-color-secondary-on-inverse-surface: #163127;
+  --seblify-color-secondary-on-inverse-surface-hover: #204436;
+  --seblify-color-secondary-on-inverse-text: #bdf4dc;
+  --seblify-color-secondary-on-inverse-border: #559a7e;
+
+  --seblify-color-neutral-fill: #70657a;
+  --seblify-color-neutral-fill-hover: #5d5267;
+  --seblify-color-neutral-fill-text: #fff8fe;
+  --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: #251c2c;
+  --seblify-color-strong-fill-hover: #130d18;
+  --seblify-color-strong-fill-text: #fff8fe;
+  --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: #31a96e;
+  --seblify-color-success-fill-hover: #278b5a;
+  --seblify-color-success-fill-text: #f8fffb;
+  --seblify-color-success-surface: #e2f6eb;
+  --seblify-color-success-surface-hover: #ceecd9;
+  --seblify-color-success-border: #94d0ae;
+  --seblify-color-success-text: #23744c;
+  --seblify-color-success-on-inverse-surface: #173124;
+  --seblify-color-success-on-inverse-surface-hover: #214433;
+  --seblify-color-success-on-inverse-text: #bef3d0;
+  --seblify-color-success-on-inverse-border: #59996e;
+
+  --seblify-color-danger-fill: #d75f83;
+  --seblify-color-danger-fill-hover: #bd4d70;
+  --seblify-color-danger-fill-text: #fff9fb;
+  --seblify-color-danger-surface: #fae5ed;
+  --seblify-color-danger-surface-hover: #f3d0dc;
+  --seblify-color-danger-border: #e8a3ba;
+  --seblify-color-danger-text: #a34161;
+  --seblify-color-danger-on-inverse-surface: #3a1c2a;
+  --seblify-color-danger-on-inverse-surface-hover: #4e2638;
+  --seblify-color-danger-on-inverse-text: #ffc9d9;
+  --seblify-color-danger-on-inverse-border: #a75f79;
+
+  --seblify-color-warning-fill: #d98254;
+  --seblify-color-warning-fill-hover: #bd6c41;
+  --seblify-color-warning-fill-text: #fffaf5;
+  --seblify-color-warning-surface: #faeadf;
+  --seblify-color-warning-surface-hover: #f2d9c8;
+  --seblify-color-warning-border: #dfad91;
+  --seblify-color-warning-text: #9c5635;
+  --seblify-color-warning-on-inverse-surface: #3a261a;
+  --seblify-color-warning-on-inverse-surface-hover: #4e3324;
+  --seblify-color-warning-on-inverse-text: #ffdcc4;
+  --seblify-color-warning-on-inverse-border: #a87456;
+
+  --seblify-color-info-fill: #4c93c4;
+  --seblify-color-info-fill-hover: #3d7eaa;
+  --seblify-color-info-fill-text: #fbfdff;
+  --seblify-color-info-surface: #e3f1fa;
+  --seblify-color-info-surface-hover: #cfe7f5;
+  --seblify-color-info-border: #9bcbe8;
+  --seblify-color-info-text: #3b729a;
+  --seblify-color-info-on-inverse-surface: #173044;
+  --seblify-color-info-on-inverse-surface-hover: #21445e;
+  --seblify-color-info-on-inverse-text: #c7ecff;
+  --seblify-color-info-on-inverse-border: #5f95b9;
+
+  --seblify-color-focus-ring: #7e61c9;
+  --seblify-opacity-disabled: 0.55;
+  --seblify-shadow-control: 0 1px 3px rgb(37 28 44 / 15%);
+  --seblify-shadow-raised: 0 14px 34px rgb(37 28 44 / 12%);
+  --seblify-shadow-status: 0 12px 28px rgb(126 97 201 / 14%);
+  --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='sorbet'][data-color-mode='dark'] {
+  color-scheme: dark;
+
+  --seblify-color-background: #111019;
+  --seblify-color-surface: #191724;
+  --seblify-color-surface-raised: #211e2e;
+  --seblify-color-surface-muted: #2d293d;
+  --seblify-color-surface-hover: #39344b;
+  --seblify-color-surface-inverse: #fff7fb;
+  --seblify-color-surface-inverse-hover: #ffffff;
+  --seblify-color-border: #383245;
+  --seblify-color-border-strong: #675d78;
+  --seblify-color-border-inverse: #d9ccd9;
+  --seblify-color-text: #fff7fb;
+  --seblify-color-text-muted: #d5c9dc;
+  --seblify-color-text-subtle: #9c8ea8;
+  --seblify-color-text-inverse: #191724;
+
+  --seblify-color-primary-fill: #c7b4ff;
+  --seblify-color-primary-fill-hover: #d6c8ff;
+  --seblify-color-primary-fill-text: #1d1233;
+  --seblify-color-primary-surface: #2c2346;
+  --seblify-color-primary-surface-hover: #3b2f5e;
+  --seblify-color-primary-border: #7965ba;
+  --seblify-color-primary-text: #e0d5ff;
+  --seblify-color-primary-on-inverse-surface: #eee8ff;
+  --seblify-color-primary-on-inverse-surface-hover: #e1d7fb;
+  --seblify-color-primary-on-inverse-text: #60449d;
+  --seblify-color-primary-on-inverse-border: #c2b1ec;
+
+  --seblify-color-secondary-fill: #8ee6c2;
+  --seblify-color-secondary-fill-hover: #a8efd1;
+  --seblify-color-secondary-fill-text: #041a11;
+  --seblify-color-secondary-surface: #163127;
+  --seblify-color-secondary-surface-hover: #204436;
+  --seblify-color-secondary-border: #559a7e;
+  --seblify-color-secondary-text: #bdf4dc;
+  --seblify-color-secondary-on-inverse-surface: #e1f5ee;
+  --seblify-color-secondary-on-inverse-surface-hover: #cbecdf;
+  --seblify-color-secondary-on-inverse-text: #20765a;
+  --seblify-color-secondary-on-inverse-border: #92d3bd;
+
+  --seblify-color-neutral-fill: #d5c9dc;
+  --seblify-color-neutral-fill-hover: #e8ddeb;
+  --seblify-color-neutral-fill-text: #191724;
+  --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: #8ee4ae;
+  --seblify-color-success-fill-hover: #a7edbf;
+  --seblify-color-success-fill-text: #06180d;
+  --seblify-color-success-surface: #173124;
+  --seblify-color-success-surface-hover: #214433;
+  --seblify-color-success-border: #59996e;
+  --seblify-color-success-text: #bef3d0;
+  --seblify-color-success-on-inverse-surface: #e2f6eb;
+  --seblify-color-success-on-inverse-surface-hover: #ceecd9;
+  --seblify-color-success-on-inverse-text: #23744c;
+  --seblify-color-success-on-inverse-border: #94d0ae;
+
+  --seblify-color-danger-fill: #ff9ab8;
+  --seblify-color-danger-fill-hover: #ffb0c8;
+  --seblify-color-danger-fill-text: #230811;
+  --seblify-color-danger-surface: #3a1c2a;
+  --seblify-color-danger-surface-hover: #4e2638;
+  --seblify-color-danger-border: #a75f79;
+  --seblify-color-danger-text: #ffc9d9;
+  --seblify-color-danger-on-inverse-surface: #fae5ed;
+  --seblify-color-danger-on-inverse-surface-hover: #f3d0dc;
+  --seblify-color-danger-on-inverse-text: #a34161;
+  --seblify-color-danger-on-inverse-border: #e8a3ba;
+
+  --seblify-color-warning-fill: #ffc28f;
+  --seblify-color-warning-fill-hover: #ffd1aa;
+  --seblify-color-warning-fill-text: #241007;
+  --seblify-color-warning-surface: #3a261a;
+  --seblify-color-warning-surface-hover: #4e3324;
+  --seblify-color-warning-border: #a87456;
+  --seblify-color-warning-text: #ffdcc4;
+  --seblify-color-warning-on-inverse-surface: #faeadf;
+  --seblify-color-warning-on-inverse-surface-hover: #f2d9c8;
+  --seblify-color-warning-on-inverse-text: #9c5635;
+  --seblify-color-warning-on-inverse-border: #dfad91;
+
+  --seblify-color-info-fill: #98d9ff;
+  --seblify-color-info-fill-hover: #b3e4ff;
+  --seblify-color-info-fill-text: #061522;
+  --seblify-color-info-surface: #173044;
+  --seblify-color-info-surface-hover: #21445e;
+  --seblify-color-info-border: #5f95b9;
+  --seblify-color-info-text: #c7ecff;
+  --seblify-color-info-on-inverse-surface: #e3f1fa;
+  --seblify-color-info-on-inverse-surface-hover: #cfe7f5;
+  --seblify-color-info-on-inverse-text: #3b729a;
+  --seblify-color-info-on-inverse-border: #9bcbe8;
+
+  --seblify-color-focus-ring: #c7b4ff;
+  --seblify-opacity-disabled: 0.5;
+  --seblify-shadow-control: 0 1px 3px rgb(0 0 0 / 42%);
+  --seblify-shadow-raised: 0 16px 38px rgb(0 0 0 / 44%);
+  --seblify-shadow-status: 0 12px 28px rgb(199 180 255 / 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='sorbet']:not([data-color-mode]) {
+    color-scheme: dark;
+
+    --seblify-color-background: #111019;
+    --seblify-color-surface: #191724;
+    --seblify-color-surface-raised: #211e2e;
+    --seblify-color-surface-muted: #2d293d;
+    --seblify-color-surface-hover: #39344b;
+    --seblify-color-surface-inverse: #fff7fb;
+    --seblify-color-surface-inverse-hover: #ffffff;
+    --seblify-color-border: #383245;
+    --seblify-color-border-strong: #675d78;
+    --seblify-color-border-inverse: #d9ccd9;
+    --seblify-color-text: #fff7fb;
+    --seblify-color-text-muted: #d5c9dc;
+    --seblify-color-text-subtle: #9c8ea8;
+    --seblify-color-text-inverse: #191724;
+
+    --seblify-color-primary-fill: #c7b4ff;
+    --seblify-color-primary-fill-hover: #d6c8ff;
+    --seblify-color-primary-fill-text: #1d1233;
+    --seblify-color-primary-surface: #2c2346;
+    --seblify-color-primary-surface-hover: #3b2f5e;
+    --seblify-color-primary-border: #7965ba;
+    --seblify-color-primary-text: #e0d5ff;
+    --seblify-color-primary-on-inverse-surface: #eee8ff;
+    --seblify-color-primary-on-inverse-surface-hover: #e1d7fb;
+    --seblify-color-primary-on-inverse-text: #60449d;
+    --seblify-color-primary-on-inverse-border: #c2b1ec;
+
+    --seblify-color-secondary-fill: #8ee6c2;
+    --seblify-color-secondary-fill-hover: #a8efd1;
+    --seblify-color-secondary-fill-text: #041a11;
+    --seblify-color-secondary-surface: #163127;
+    --seblify-color-secondary-surface-hover: #204436;
+    --seblify-color-secondary-border: #559a7e;
+    --seblify-color-secondary-text: #bdf4dc;
+    --seblify-color-secondary-on-inverse-surface: #e1f5ee;
+    --seblify-color-secondary-on-inverse-surface-hover: #cbecdf;
+    --seblify-color-secondary-on-inverse-text: #20765a;
+    --seblify-color-secondary-on-inverse-border: #92d3bd;
+
+    --seblify-color-neutral-fill: #d5c9dc;
+    --seblify-color-neutral-fill-hover: #e8ddeb;
+    --seblify-color-neutral-fill-text: #191724;
+    --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: #8ee4ae;
+    --seblify-color-success-fill-hover: #a7edbf;
+    --seblify-color-success-fill-text: #06180d;
+    --seblify-color-success-surface: #173124;
+    --seblify-color-success-surface-hover: #214433;
+    --seblify-color-success-border: #59996e;
+    --seblify-color-success-text: #bef3d0;
+    --seblify-color-success-on-inverse-surface: #e2f6eb;
+    --seblify-color-success-on-inverse-surface-hover: #ceecd9;
+    --seblify-color-success-on-inverse-text: #23744c;
+    --seblify-color-success-on-inverse-border: #94d0ae;
+
+    --seblify-color-danger-fill: #ff9ab8;
+    --seblify-color-danger-fill-hover: #ffb0c8;
+    --seblify-color-danger-fill-text: #230811;
+    --seblify-color-danger-surface: #3a1c2a;
+    --seblify-color-danger-surface-hover: #4e2638;
+    --seblify-color-danger-border: #a75f79;
+    --seblify-color-danger-text: #ffc9d9;
+    --seblify-color-danger-on-inverse-surface: #fae5ed;
+    --seblify-color-danger-on-inverse-surface-hover: #f3d0dc;
+    --seblify-color-danger-on-inverse-text: #a34161;
+    --seblify-color-danger-on-inverse-border: #e8a3ba;
+
+    --seblify-color-warning-fill: #ffc28f;
+    --seblify-color-warning-fill-hover: #ffd1aa;
+    --seblify-color-warning-fill-text: #241007;
+    --seblify-color-warning-surface: #3a261a;
+    --seblify-color-warning-surface-hover: #4e3324;
+    --seblify-color-warning-border: #a87456;
+    --seblify-color-warning-text: #ffdcc4;
+    --seblify-color-warning-on-inverse-surface: #faeadf;
+    --seblify-color-warning-on-inverse-surface-hover: #f2d9c8;
+    --seblify-color-warning-on-inverse-text: #9c5635;
+    --seblify-color-warning-on-inverse-border: #dfad91;
+
+    --seblify-color-info-fill: #98d9ff;
+    --seblify-color-info-fill-hover: #b3e4ff;
+    --seblify-color-info-fill-text: #061522;
+    --seblify-color-info-surface: #173044;
+    --seblify-color-info-surface-hover: #21445e;
+    --seblify-color-info-border: #5f95b9;
+    --seblify-color-info-text: #c7ecff;
+    --seblify-color-info-on-inverse-surface: #e3f1fa;
+    --seblify-color-info-on-inverse-surface-hover: #cfe7f5;
+    --seblify-color-info-on-inverse-text: #3b729a;
+    --seblify-color-info-on-inverse-border: #9bcbe8;
+
+    --seblify-color-focus-ring: #c7b4ff;
+    --seblify-opacity-disabled: 0.5;
+    --seblify-shadow-control: 0 1px 3px rgb(0 0 0 / 42%);
+    --seblify-shadow-raised: 0 16px 38px rgb(0 0 0 / 44%);
+    --seblify-shadow-status: 0 12px 28px rgb(199 180 255 / 18%);
+    --seblify-z-index-tooltip: 30;
+    --seblify-z-index-floating-action-button: 30;
+  }
+}