seblify 0.3.0 → 0.4.0

package/dist/themes/solar.css

@@ -0,0 +1,373 @@
+:root:not([data-seblify-theme]),
+:root[data-seblify-theme='solar'] {
+  color-scheme: light;
+
+  --seblify-color-background: #fffaf2;
+  --seblify-color-surface: #ffffff;
+  --seblify-color-surface-raised: #ffffff;
+  --seblify-color-surface-muted: #f4f1eb;
+  --seblify-color-surface-hover: #ebe5dc;
+  --seblify-color-surface-inverse: #201713;
+  --seblify-color-surface-inverse-hover: #31231c;
+  --seblify-color-border: #ddd5c8;
+  --seblify-color-border-strong: #baa996;
+  --seblify-color-border-inverse: #665245;
+  --seblify-color-text: #241b16;
+  --seblify-color-text-muted: #665a50;
+  --seblify-color-text-subtle: #8b7c70;
+  --seblify-color-text-inverse: #fff8ed;
+
+  --seblify-color-primary-fill: #e85d2a;
+  --seblify-color-primary-fill-hover: #ca4c1f;
+  --seblify-color-primary-fill-text: #fffaf5;
+  --seblify-color-primary-surface: #ffe7dc;
+  --seblify-color-primary-surface-hover: #ffd2c1;
+  --seblify-color-primary-border: #f3a080;
+  --seblify-color-primary-text: #b8421a;
+  --seblify-color-primary-on-inverse-surface: #3a1d12;
+  --seblify-color-primary-on-inverse-surface-hover: #512919;
+  --seblify-color-primary-on-inverse-text: #ffc5a7;
+  --seblify-color-primary-on-inverse-border: #a85d3a;
+
+  --seblify-color-secondary-fill: #0f9f8f;
+  --seblify-color-secondary-fill-hover: #0b8579;
+  --seblify-color-secondary-fill-text: #f7fffe;
+  --seblify-color-secondary-surface: #dcf4f0;
+  --seblify-color-secondary-surface-hover: #c3e9e3;
+  --seblify-color-secondary-border: #83cec4;
+  --seblify-color-secondary-text: #08766b;
+  --seblify-color-secondary-on-inverse-surface: #102d2a;
+  --seblify-color-secondary-on-inverse-surface-hover: #18413d;
+  --seblify-color-secondary-on-inverse-text: #a5eee7;
+  --seblify-color-secondary-on-inverse-border: #3d9088;
+
+  --seblify-color-neutral-fill: #6f655c;
+  --seblify-color-neutral-fill-hover: #5b524b;
+  --seblify-color-neutral-fill-text: #fff8ed;
+  --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: #241b16;
+  --seblify-color-strong-fill-hover: #100a07;
+  --seblify-color-strong-fill-text: #fff8ed;
+  --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: #15945b;
+  --seblify-color-success-fill-hover: #0f7c4b;
+  --seblify-color-success-fill-text: #f6fffb;
+  --seblify-color-success-surface: #dcf3e7;
+  --seblify-color-success-surface-hover: #c4e9d5;
+  --seblify-color-success-border: #86caa8;
+  --seblify-color-success-text: #0e7145;
+  --seblify-color-success-on-inverse-surface: #102c1f;
+  --seblify-color-success-on-inverse-surface-hover: #183f2c;
+  --seblify-color-success-on-inverse-text: #a9efc7;
+  --seblify-color-success-on-inverse-border: #439069;
+
+  --seblify-color-danger-fill: #d83a48;
+  --seblify-color-danger-fill-hover: #bc2d3a;
+  --seblify-color-danger-fill-text: #fffafb;
+  --seblify-color-danger-surface: #fae1e4;
+  --seblify-color-danger-surface-hover: #f2c8cd;
+  --seblify-color-danger-border: #e6919b;
+  --seblify-color-danger-text: #aa2a35;
+  --seblify-color-danger-on-inverse-surface: #35171b;
+  --seblify-color-danger-on-inverse-surface-hover: #4b2027;
+  --seblify-color-danger-on-inverse-text: #ffc0c6;
+  --seblify-color-danger-on-inverse-border: #aa4f59;
+
+  --seblify-color-warning-fill: #c77b00;
+  --seblify-color-warning-fill-hover: #a76400;
+  --seblify-color-warning-fill-text: #fff9ed;
+  --seblify-color-warning-surface: #fff0cf;
+  --seblify-color-warning-surface-hover: #f6dc9f;
+  --seblify-color-warning-border: #dfa84e;
+  --seblify-color-warning-text: #8c5700;
+  --seblify-color-warning-on-inverse-surface: #332407;
+  --seblify-color-warning-on-inverse-surface-hover: #49340d;
+  --seblify-color-warning-on-inverse-text: #ffe4a3;
+  --seblify-color-warning-on-inverse-border: #a57724;
+
+  --seblify-color-info-fill: #256fc4;
+  --seblify-color-info-fill-hover: #1e5ca5;
+  --seblify-color-info-fill-text: #fbfdff;
+  --seblify-color-info-surface: #e1edf9;
+  --seblify-color-info-surface-hover: #cde0f3;
+  --seblify-color-info-border: #94bade;
+  --seblify-color-info-text: #1d5a9a;
+  --seblify-color-info-on-inverse-surface: #14273d;
+  --seblify-color-info-on-inverse-surface-hover: #1d3857;
+  --seblify-color-info-on-inverse-text: #c1ddfa;
+  --seblify-color-info-on-inverse-border: #5b82ae;
+
+  --seblify-color-focus-ring: #e85d2a;
+  --seblify-opacity-disabled: 0.55;
+  --seblify-shadow-control: 0 1px 3px rgb(36 27 22 / 16%);
+  --seblify-shadow-raised: 0 14px 32px rgb(36 27 22 / 13%);
+  --seblify-shadow-status: 0 12px 26px rgb(232 93 42 / 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='solar'][data-color-mode='dark'] {
+  color-scheme: dark;
+
+  --seblify-color-background: #100c09;
+  --seblify-color-surface: #1a130f;
+  --seblify-color-surface-raised: #241a14;
+  --seblify-color-surface-muted: #33241b;
+  --seblify-color-surface-hover: #442f23;
+  --seblify-color-surface-inverse: #fff2df;
+  --seblify-color-surface-inverse-hover: #fff9ef;
+  --seblify-color-border: #443126;
+  --seblify-color-border-strong: #7f604b;
+  --seblify-color-border-inverse: #d9c0a6;
+  --seblify-color-text: #fff2e8;
+  --seblify-color-text-muted: #dac5b3;
+  --seblify-color-text-subtle: #a88c78;
+  --seblify-color-text-inverse: #201713;
+
+  --seblify-color-primary-fill: #ff9a5c;
+  --seblify-color-primary-fill-hover: #ffad78;
+  --seblify-color-primary-fill-text: #200905;
+  --seblify-color-primary-surface: #3a1d12;
+  --seblify-color-primary-surface-hover: #512919;
+  --seblify-color-primary-border: #a85d3a;
+  --seblify-color-primary-text: #ffc5a7;
+  --seblify-color-primary-on-inverse-surface: #ffe7dc;
+  --seblify-color-primary-on-inverse-surface-hover: #ffd2c1;
+  --seblify-color-primary-on-inverse-text: #b8421a;
+  --seblify-color-primary-on-inverse-border: #f3a080;
+
+  --seblify-color-secondary-fill: #5bd9cc;
+  --seblify-color-secondary-fill-hover: #77e4d9;
+  --seblify-color-secondary-fill-text: #031614;
+  --seblify-color-secondary-surface: #102d2a;
+  --seblify-color-secondary-surface-hover: #18413d;
+  --seblify-color-secondary-border: #3d9088;
+  --seblify-color-secondary-text: #a5eee7;
+  --seblify-color-secondary-on-inverse-surface: #dcf4f0;
+  --seblify-color-secondary-on-inverse-surface-hover: #c3e9e3;
+  --seblify-color-secondary-on-inverse-text: #08766b;
+  --seblify-color-secondary-on-inverse-border: #83cec4;
+
+  --seblify-color-neutral-fill: #dac5b3;
+  --seblify-color-neutral-fill-hover: #ead8c9;
+  --seblify-color-neutral-fill-text: #201713;
+  --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: #60d799;
+  --seblify-color-success-fill-hover: #7ee4ae;
+  --seblify-color-success-fill-text: #03150b;
+  --seblify-color-success-surface: #102c1f;
+  --seblify-color-success-surface-hover: #183f2c;
+  --seblify-color-success-border: #439069;
+  --seblify-color-success-text: #a9efc7;
+  --seblify-color-success-on-inverse-surface: #dcf3e7;
+  --seblify-color-success-on-inverse-surface-hover: #c4e9d5;
+  --seblify-color-success-on-inverse-text: #0e7145;
+  --seblify-color-success-on-inverse-border: #86caa8;
+
+  --seblify-color-danger-fill: #ff828d;
+  --seblify-color-danger-fill-hover: #ff9aa3;
+  --seblify-color-danger-fill-text: #210608;
+  --seblify-color-danger-surface: #35171b;
+  --seblify-color-danger-surface-hover: #4b2027;
+  --seblify-color-danger-border: #aa4f59;
+  --seblify-color-danger-text: #ffc0c6;
+  --seblify-color-danger-on-inverse-surface: #fae1e4;
+  --seblify-color-danger-on-inverse-surface-hover: #f2c8cd;
+  --seblify-color-danger-on-inverse-text: #aa2a35;
+  --seblify-color-danger-on-inverse-border: #e6919b;
+
+  --seblify-color-warning-fill: #ffd166;
+  --seblify-color-warning-fill-hover: #ffdc85;
+  --seblify-color-warning-fill-text: #1a1002;
+  --seblify-color-warning-surface: #332407;
+  --seblify-color-warning-surface-hover: #49340d;
+  --seblify-color-warning-border: #a57724;
+  --seblify-color-warning-text: #ffe4a3;
+  --seblify-color-warning-on-inverse-surface: #fff0cf;
+  --seblify-color-warning-on-inverse-surface-hover: #f6dc9f;
+  --seblify-color-warning-on-inverse-text: #8c5700;
+  --seblify-color-warning-on-inverse-border: #dfa84e;
+
+  --seblify-color-info-fill: #83baf4;
+  --seblify-color-info-fill-hover: #9ac8f7;
+  --seblify-color-info-fill-text: #06111f;
+  --seblify-color-info-surface: #14273d;
+  --seblify-color-info-surface-hover: #1d3857;
+  --seblify-color-info-border: #5b82ae;
+  --seblify-color-info-text: #c1ddfa;
+  --seblify-color-info-on-inverse-surface: #e1edf9;
+  --seblify-color-info-on-inverse-surface-hover: #cde0f3;
+  --seblify-color-info-on-inverse-text: #1d5a9a;
+  --seblify-color-info-on-inverse-border: #94bade;
+
+  --seblify-color-focus-ring: #ffad78;
+  --seblify-opacity-disabled: 0.5;
+  --seblify-shadow-control: 0 1px 3px rgb(0 0 0 / 44%);
+  --seblify-shadow-raised: 0 14px 32px rgb(0 0 0 / 44%);
+  --seblify-shadow-status: 0 12px 26px rgb(255 154 92 / 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='solar']:not([data-color-mode]) {
+    color-scheme: dark;
+
+    --seblify-color-background: #100c09;
+    --seblify-color-surface: #1a130f;
+    --seblify-color-surface-raised: #241a14;
+    --seblify-color-surface-muted: #33241b;
+    --seblify-color-surface-hover: #442f23;
+    --seblify-color-surface-inverse: #fff2df;
+    --seblify-color-surface-inverse-hover: #fff9ef;
+    --seblify-color-border: #443126;
+    --seblify-color-border-strong: #7f604b;
+    --seblify-color-border-inverse: #d9c0a6;
+    --seblify-color-text: #fff2e8;
+    --seblify-color-text-muted: #dac5b3;
+    --seblify-color-text-subtle: #a88c78;
+    --seblify-color-text-inverse: #201713;
+
+    --seblify-color-primary-fill: #ff9a5c;
+    --seblify-color-primary-fill-hover: #ffad78;
+    --seblify-color-primary-fill-text: #200905;
+    --seblify-color-primary-surface: #3a1d12;
+    --seblify-color-primary-surface-hover: #512919;
+    --seblify-color-primary-border: #a85d3a;
+    --seblify-color-primary-text: #ffc5a7;
+    --seblify-color-primary-on-inverse-surface: #ffe7dc;
+    --seblify-color-primary-on-inverse-surface-hover: #ffd2c1;
+    --seblify-color-primary-on-inverse-text: #b8421a;
+    --seblify-color-primary-on-inverse-border: #f3a080;
+
+    --seblify-color-secondary-fill: #5bd9cc;
+    --seblify-color-secondary-fill-hover: #77e4d9;
+    --seblify-color-secondary-fill-text: #031614;
+    --seblify-color-secondary-surface: #102d2a;
+    --seblify-color-secondary-surface-hover: #18413d;
+    --seblify-color-secondary-border: #3d9088;
+    --seblify-color-secondary-text: #a5eee7;
+    --seblify-color-secondary-on-inverse-surface: #dcf4f0;
+    --seblify-color-secondary-on-inverse-surface-hover: #c3e9e3;
+    --seblify-color-secondary-on-inverse-text: #08766b;
+    --seblify-color-secondary-on-inverse-border: #83cec4;
+
+    --seblify-color-neutral-fill: #dac5b3;
+    --seblify-color-neutral-fill-hover: #ead8c9;
+    --seblify-color-neutral-fill-text: #201713;
+    --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: #60d799;
+    --seblify-color-success-fill-hover: #7ee4ae;
+    --seblify-color-success-fill-text: #03150b;
+    --seblify-color-success-surface: #102c1f;
+    --seblify-color-success-surface-hover: #183f2c;
+    --seblify-color-success-border: #439069;
+    --seblify-color-success-text: #a9efc7;
+    --seblify-color-success-on-inverse-surface: #dcf3e7;
+    --seblify-color-success-on-inverse-surface-hover: #c4e9d5;
+    --seblify-color-success-on-inverse-text: #0e7145;
+    --seblify-color-success-on-inverse-border: #86caa8;
+
+    --seblify-color-danger-fill: #ff828d;
+    --seblify-color-danger-fill-hover: #ff9aa3;
+    --seblify-color-danger-fill-text: #210608;
+    --seblify-color-danger-surface: #35171b;
+    --seblify-color-danger-surface-hover: #4b2027;
+    --seblify-color-danger-border: #aa4f59;
+    --seblify-color-danger-text: #ffc0c6;
+    --seblify-color-danger-on-inverse-surface: #fae1e4;
+    --seblify-color-danger-on-inverse-surface-hover: #f2c8cd;
+    --seblify-color-danger-on-inverse-text: #aa2a35;
+    --seblify-color-danger-on-inverse-border: #e6919b;
+
+    --seblify-color-warning-fill: #ffd166;
+    --seblify-color-warning-fill-hover: #ffdc85;
+    --seblify-color-warning-fill-text: #1a1002;
+    --seblify-color-warning-surface: #332407;
+    --seblify-color-warning-surface-hover: #49340d;
+    --seblify-color-warning-border: #a57724;
+    --seblify-color-warning-text: #ffe4a3;
+    --seblify-color-warning-on-inverse-surface: #fff0cf;
+    --seblify-color-warning-on-inverse-surface-hover: #f6dc9f;
+    --seblify-color-warning-on-inverse-text: #8c5700;
+    --seblify-color-warning-on-inverse-border: #dfa84e;
+
+    --seblify-color-info-fill: #83baf4;
+    --seblify-color-info-fill-hover: #9ac8f7;
+    --seblify-color-info-fill-text: #06111f;
+    --seblify-color-info-surface: #14273d;
+    --seblify-color-info-surface-hover: #1d3857;
+    --seblify-color-info-border: #5b82ae;
+    --seblify-color-info-text: #c1ddfa;
+    --seblify-color-info-on-inverse-surface: #e1edf9;
+    --seblify-color-info-on-inverse-surface-hover: #cde0f3;
+    --seblify-color-info-on-inverse-text: #1d5a9a;
+    --seblify-color-info-on-inverse-border: #94bade;
+
+    --seblify-color-focus-ring: #ffad78;
+    --seblify-opacity-disabled: 0.5;
+    --seblify-shadow-control: 0 1px 3px rgb(0 0 0 / 44%);
+    --seblify-shadow-raised: 0 14px 32px rgb(0 0 0 / 44%);
+    --seblify-shadow-status: 0 12px 26px rgb(255 154 92 / 18%);
+    --seblify-z-index-tooltip: 30;
+    --seblify-z-index-floating-action-button: 30;
+  }
+}