seblify 0.3.0 → 0.4.0

package/dist/themes/cobalt.css

@@ -0,0 +1,373 @@
+:root:not([data-seblify-theme]),
+:root[data-seblify-theme='cobalt'] {
+  color-scheme: light;
+
+  --seblify-color-background: #f6f9fe;
+  --seblify-color-surface: #ffffff;
+  --seblify-color-surface-raised: #ffffff;
+  --seblify-color-surface-muted: #e9f0fb;
+  --seblify-color-surface-hover: #dce8f7;
+  --seblify-color-surface-inverse: #0b1830;
+  --seblify-color-surface-inverse-hover: #122447;
+  --seblify-color-border: #cfdced;
+  --seblify-color-border-strong: #9fb6d3;
+  --seblify-color-border-inverse: #4d6387;
+  --seblify-color-text: #122033;
+  --seblify-color-text-muted: #52657d;
+  --seblify-color-text-subtle: #7a8ba3;
+  --seblify-color-text-inverse: #f8fbff;
+
+  --seblify-color-primary-fill: #1f67d2;
+  --seblify-color-primary-fill-hover: #1958b8;
+  --seblify-color-primary-fill-text: #fbfdff;
+  --seblify-color-primary-surface: #e0ecff;
+  --seblify-color-primary-surface-hover: #cbdfff;
+  --seblify-color-primary-border: #92b8f3;
+  --seblify-color-primary-text: #174fa7;
+  --seblify-color-primary-on-inverse-surface: #11294f;
+  --seblify-color-primary-on-inverse-surface-hover: #193967;
+  --seblify-color-primary-on-inverse-text: #b4d1ff;
+  --seblify-color-primary-on-inverse-border: #4d7fc8;
+
+  --seblify-color-secondary-fill: #0d9488;
+  --seblify-color-secondary-fill-hover: #0b7d74;
+  --seblify-color-secondary-fill-text: #f8fffe;
+  --seblify-color-secondary-surface: #dff4f1;
+  --seblify-color-secondary-surface-hover: #c7ebe6;
+  --seblify-color-secondary-border: #8ed0c8;
+  --seblify-color-secondary-text: #0a6f68;
+  --seblify-color-secondary-on-inverse-surface: #0e2d2c;
+  --seblify-color-secondary-on-inverse-surface-hover: #16403e;
+  --seblify-color-secondary-on-inverse-text: #a4eee7;
+  --seblify-color-secondary-on-inverse-border: #3b8d86;
+
+  --seblify-color-neutral-fill: #64748b;
+  --seblify-color-neutral-fill-hover: #536176;
+  --seblify-color-neutral-fill-text: #fbfdff;
+  --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: #122033;
+  --seblify-color-strong-fill-hover: #07101f;
+  --seblify-color-strong-fill-text: #f8fbff;
+  --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: #16865a;
+  --seblify-color-success-fill-hover: #106f4a;
+  --seblify-color-success-fill-text: #f7fffb;
+  --seblify-color-success-surface: #ddf3e9;
+  --seblify-color-success-surface-hover: #c5ead9;
+  --seblify-color-success-border: #86c9aa;
+  --seblify-color-success-text: #0f6c49;
+  --seblify-color-success-on-inverse-surface: #102c22;
+  --seblify-color-success-on-inverse-surface-hover: #183d2f;
+  --seblify-color-success-on-inverse-text: #a8ecc9;
+  --seblify-color-success-on-inverse-border: #43906a;
+
+  --seblify-color-danger-fill: #d3364a;
+  --seblify-color-danger-fill-hover: #b92b3d;
+  --seblify-color-danger-fill-text: #fffafb;
+  --seblify-color-danger-surface: #fae1e5;
+  --seblify-color-danger-surface-hover: #f2c8d0;
+  --seblify-color-danger-border: #e6909c;
+  --seblify-color-danger-text: #a72a3a;
+  --seblify-color-danger-on-inverse-surface: #361722;
+  --seblify-color-danger-on-inverse-surface-hover: #4b2030;
+  --seblify-color-danger-on-inverse-text: #ffc0c9;
+  --seblify-color-danger-on-inverse-border: #aa4e61;
+
+  --seblify-color-warning-fill: #bd7a18;
+  --seblify-color-warning-fill-hover: #9d6310;
+  --seblify-color-warning-fill-text: #fff9ed;
+  --seblify-color-warning-surface: #f7ead3;
+  --seblify-color-warning-surface-hover: #edd7ae;
+  --seblify-color-warning-border: #d7ad68;
+  --seblify-color-warning-text: #835710;
+  --seblify-color-warning-on-inverse-surface: #302414;
+  --seblify-color-warning-on-inverse-surface-hover: #44331d;
+  --seblify-color-warning-on-inverse-text: #f4d79e;
+  --seblify-color-warning-on-inverse-border: #927348;
+
+  --seblify-color-info-fill: #0f7db8;
+  --seblify-color-info-fill-hover: #0b699d;
+  --seblify-color-info-fill-text: #f8fdff;
+  --seblify-color-info-surface: #dff0f9;
+  --seblify-color-info-surface-hover: #c8e4f3;
+  --seblify-color-info-border: #8fc5e1;
+  --seblify-color-info-text: #0b6394;
+  --seblify-color-info-on-inverse-surface: #102c40;
+  --seblify-color-info-on-inverse-surface-hover: #183d58;
+  --seblify-color-info-on-inverse-text: #ace7fb;
+  --seblify-color-info-on-inverse-border: #4688ad;
+
+  --seblify-color-focus-ring: #1f67d2;
+  --seblify-opacity-disabled: 0.55;
+  --seblify-shadow-control: 0 1px 3px rgb(18 32 51 / 16%);
+  --seblify-shadow-raised: 0 14px 34px rgb(18 32 51 / 13%);
+  --seblify-shadow-status: 0 12px 26px rgb(31 103 210 / 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='cobalt'][data-color-mode='dark'] {
+  color-scheme: dark;
+
+  --seblify-color-background: #071123;
+  --seblify-color-surface: #0d1a33;
+  --seblify-color-surface-raised: #132340;
+  --seblify-color-surface-muted: #1c3051;
+  --seblify-color-surface-hover: #263e64;
+  --seblify-color-surface-inverse: #f5f9ff;
+  --seblify-color-surface-inverse-hover: #ffffff;
+  --seblify-color-border: #2b4166;
+  --seblify-color-border-strong: #55709c;
+  --seblify-color-border-inverse: #c5d3e7;
+  --seblify-color-text: #eef5ff;
+  --seblify-color-text-muted: #b7c7dd;
+  --seblify-color-text-subtle: #8094b3;
+  --seblify-color-text-inverse: #0b1830;
+
+  --seblify-color-primary-fill: #72a8ff;
+  --seblify-color-primary-fill-hover: #8bb8ff;
+  --seblify-color-primary-fill-text: #041226;
+  --seblify-color-primary-surface: #11294f;
+  --seblify-color-primary-surface-hover: #193967;
+  --seblify-color-primary-border: #4d7fc8;
+  --seblify-color-primary-text: #b4d1ff;
+  --seblify-color-primary-on-inverse-surface: #e0ecff;
+  --seblify-color-primary-on-inverse-surface-hover: #cbdfff;
+  --seblify-color-primary-on-inverse-text: #174fa7;
+  --seblify-color-primary-on-inverse-border: #92b8f3;
+
+  --seblify-color-secondary-fill: #5bd7ca;
+  --seblify-color-secondary-fill-hover: #75e2d7;
+  --seblify-color-secondary-fill-text: #031614;
+  --seblify-color-secondary-surface: #0e2d2c;
+  --seblify-color-secondary-surface-hover: #16403e;
+  --seblify-color-secondary-border: #3b8d86;
+  --seblify-color-secondary-text: #a4eee7;
+  --seblify-color-secondary-on-inverse-surface: #dff4f1;
+  --seblify-color-secondary-on-inverse-surface-hover: #c7ebe6;
+  --seblify-color-secondary-on-inverse-text: #0a6f68;
+  --seblify-color-secondary-on-inverse-border: #8ed0c8;
+
+  --seblify-color-neutral-fill: #b7c7dd;
+  --seblify-color-neutral-fill-hover: #c9d7e8;
+  --seblify-color-neutral-fill-text: #0b1830;
+  --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: #5fd59a;
+  --seblify-color-success-fill-hover: #79e1ad;
+  --seblify-color-success-fill-text: #03150d;
+  --seblify-color-success-surface: #102c22;
+  --seblify-color-success-surface-hover: #183d2f;
+  --seblify-color-success-border: #43906a;
+  --seblify-color-success-text: #a8ecc9;
+  --seblify-color-success-on-inverse-surface: #ddf3e9;
+  --seblify-color-success-on-inverse-surface-hover: #c5ead9;
+  --seblify-color-success-on-inverse-text: #0f6c49;
+  --seblify-color-success-on-inverse-border: #86c9aa;
+
+  --seblify-color-danger-fill: #ff8191;
+  --seblify-color-danger-fill-hover: #ff9aa7;
+  --seblify-color-danger-fill-text: #21060a;
+  --seblify-color-danger-surface: #361722;
+  --seblify-color-danger-surface-hover: #4b2030;
+  --seblify-color-danger-border: #aa4e61;
+  --seblify-color-danger-text: #ffc0c9;
+  --seblify-color-danger-on-inverse-surface: #fae1e5;
+  --seblify-color-danger-on-inverse-surface-hover: #f2c8d0;
+  --seblify-color-danger-on-inverse-text: #a72a3a;
+  --seblify-color-danger-on-inverse-border: #e6909c;
+
+  --seblify-color-warning-fill: #e7bd70;
+  --seblify-color-warning-fill-hover: #f0cd89;
+  --seblify-color-warning-fill-text: #180f04;
+  --seblify-color-warning-surface: #302414;
+  --seblify-color-warning-surface-hover: #44331d;
+  --seblify-color-warning-border: #927348;
+  --seblify-color-warning-text: #f4d79e;
+  --seblify-color-warning-on-inverse-surface: #f7ead3;
+  --seblify-color-warning-on-inverse-surface-hover: #edd7ae;
+  --seblify-color-warning-on-inverse-text: #835710;
+  --seblify-color-warning-on-inverse-border: #d7ad68;
+
+  --seblify-color-info-fill: #74cdf3;
+  --seblify-color-info-fill-hover: #8bd9f7;
+  --seblify-color-info-fill-text: #03131d;
+  --seblify-color-info-surface: #102c40;
+  --seblify-color-info-surface-hover: #183d58;
+  --seblify-color-info-border: #4688ad;
+  --seblify-color-info-text: #ace7fb;
+  --seblify-color-info-on-inverse-surface: #dff0f9;
+  --seblify-color-info-on-inverse-surface-hover: #c8e4f3;
+  --seblify-color-info-on-inverse-text: #0b6394;
+  --seblify-color-info-on-inverse-border: #8fc5e1;
+
+  --seblify-color-focus-ring: #8bb8ff;
+  --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(114 168 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='cobalt']:not([data-color-mode]) {
+    color-scheme: dark;
+
+    --seblify-color-background: #071123;
+    --seblify-color-surface: #0d1a33;
+    --seblify-color-surface-raised: #132340;
+    --seblify-color-surface-muted: #1c3051;
+    --seblify-color-surface-hover: #263e64;
+    --seblify-color-surface-inverse: #f5f9ff;
+    --seblify-color-surface-inverse-hover: #ffffff;
+    --seblify-color-border: #2b4166;
+    --seblify-color-border-strong: #55709c;
+    --seblify-color-border-inverse: #c5d3e7;
+    --seblify-color-text: #eef5ff;
+    --seblify-color-text-muted: #b7c7dd;
+    --seblify-color-text-subtle: #8094b3;
+    --seblify-color-text-inverse: #0b1830;
+
+    --seblify-color-primary-fill: #72a8ff;
+    --seblify-color-primary-fill-hover: #8bb8ff;
+    --seblify-color-primary-fill-text: #041226;
+    --seblify-color-primary-surface: #11294f;
+    --seblify-color-primary-surface-hover: #193967;
+    --seblify-color-primary-border: #4d7fc8;
+    --seblify-color-primary-text: #b4d1ff;
+    --seblify-color-primary-on-inverse-surface: #e0ecff;
+    --seblify-color-primary-on-inverse-surface-hover: #cbdfff;
+    --seblify-color-primary-on-inverse-text: #174fa7;
+    --seblify-color-primary-on-inverse-border: #92b8f3;
+
+    --seblify-color-secondary-fill: #5bd7ca;
+    --seblify-color-secondary-fill-hover: #75e2d7;
+    --seblify-color-secondary-fill-text: #031614;
+    --seblify-color-secondary-surface: #0e2d2c;
+    --seblify-color-secondary-surface-hover: #16403e;
+    --seblify-color-secondary-border: #3b8d86;
+    --seblify-color-secondary-text: #a4eee7;
+    --seblify-color-secondary-on-inverse-surface: #dff4f1;
+    --seblify-color-secondary-on-inverse-surface-hover: #c7ebe6;
+    --seblify-color-secondary-on-inverse-text: #0a6f68;
+    --seblify-color-secondary-on-inverse-border: #8ed0c8;
+
+    --seblify-color-neutral-fill: #b7c7dd;
+    --seblify-color-neutral-fill-hover: #c9d7e8;
+    --seblify-color-neutral-fill-text: #0b1830;
+    --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: #5fd59a;
+    --seblify-color-success-fill-hover: #79e1ad;
+    --seblify-color-success-fill-text: #03150d;
+    --seblify-color-success-surface: #102c22;
+    --seblify-color-success-surface-hover: #183d2f;
+    --seblify-color-success-border: #43906a;
+    --seblify-color-success-text: #a8ecc9;
+    --seblify-color-success-on-inverse-surface: #ddf3e9;
+    --seblify-color-success-on-inverse-surface-hover: #c5ead9;
+    --seblify-color-success-on-inverse-text: #0f6c49;
+    --seblify-color-success-on-inverse-border: #86c9aa;
+
+    --seblify-color-danger-fill: #ff8191;
+    --seblify-color-danger-fill-hover: #ff9aa7;
+    --seblify-color-danger-fill-text: #21060a;
+    --seblify-color-danger-surface: #361722;
+    --seblify-color-danger-surface-hover: #4b2030;
+    --seblify-color-danger-border: #aa4e61;
+    --seblify-color-danger-text: #ffc0c9;
+    --seblify-color-danger-on-inverse-surface: #fae1e5;
+    --seblify-color-danger-on-inverse-surface-hover: #f2c8d0;
+    --seblify-color-danger-on-inverse-text: #a72a3a;
+    --seblify-color-danger-on-inverse-border: #e6909c;
+
+    --seblify-color-warning-fill: #e7bd70;
+    --seblify-color-warning-fill-hover: #f0cd89;
+    --seblify-color-warning-fill-text: #180f04;
+    --seblify-color-warning-surface: #302414;
+    --seblify-color-warning-surface-hover: #44331d;
+    --seblify-color-warning-border: #927348;
+    --seblify-color-warning-text: #f4d79e;
+    --seblify-color-warning-on-inverse-surface: #f7ead3;
+    --seblify-color-warning-on-inverse-surface-hover: #edd7ae;
+    --seblify-color-warning-on-inverse-text: #835710;
+    --seblify-color-warning-on-inverse-border: #d7ad68;
+
+    --seblify-color-info-fill: #74cdf3;
+    --seblify-color-info-fill-hover: #8bd9f7;
+    --seblify-color-info-fill-text: #03131d;
+    --seblify-color-info-surface: #102c40;
+    --seblify-color-info-surface-hover: #183d58;
+    --seblify-color-info-border: #4688ad;
+    --seblify-color-info-text: #ace7fb;
+    --seblify-color-info-on-inverse-surface: #dff0f9;
+    --seblify-color-info-on-inverse-surface-hover: #c8e4f3;
+    --seblify-color-info-on-inverse-text: #0b6394;
+    --seblify-color-info-on-inverse-border: #8fc5e1;
+
+    --seblify-color-focus-ring: #8bb8ff;
+    --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(114 168 255 / 18%);
+    --seblify-z-index-tooltip: 30;
+    --seblify-z-index-floating-action-button: 30;
+  }
+}