seblify 0.2.1 → 0.4.0

package/dist/themes/studio.css

@@ -0,0 +1,369 @@
+:root:not([data-seblify-theme]),
+:root[data-seblify-theme='studio'] {
+  color-scheme: light;
+
+  --seblify-color-background: #faf7f2;
+  --seblify-color-surface: #fffdf9;
+  --seblify-color-surface-raised: #ffffff;
+  --seblify-color-surface-muted: #f2ebe4;
+  --seblify-color-surface-hover: #ebe1d8;
+  --seblify-color-surface-inverse: #15110f;
+  --seblify-color-surface-inverse-hover: #241d19;
+  --seblify-color-border: #ded0c4;
+  --seblify-color-border-strong: #c5afa0;
+  --seblify-color-border-inverse: #4a3b32;
+  --seblify-color-text: #211916;
+  --seblify-color-text-muted: #6f5f55;
+  --seblify-color-text-subtle: #8b7a70;
+  --seblify-color-text-inverse: #fff4e7;
+
+  --seblify-color-primary-fill: #b43f5a;
+  --seblify-color-primary-fill-hover: #9f334d;
+  --seblify-color-primary-fill-text: #fff4e7;
+  --seblify-color-primary-surface: #fae8ed;
+  --seblify-color-primary-surface-hover: #f5d5dd;
+  --seblify-color-primary-border: #e6a6b5;
+  --seblify-color-primary-text: #8f2b43;
+  --seblify-color-primary-on-inverse-surface: #2a1218;
+  --seblify-color-primary-on-inverse-surface-hover: #3a1922;
+  --seblify-color-primary-on-inverse-text: #e07088;
+  --seblify-color-primary-on-inverse-border: #743044;
+
+  --seblify-color-secondary-fill: #6f3a55;
+  --seblify-color-secondary-fill-hover: #5e2f47;
+  --seblify-color-secondary-fill-text: #fff4e7;
+  --seblify-color-secondary-surface: #f4e5ee;
+  --seblify-color-secondary-surface-hover: #ecd3e0;
+  --seblify-color-secondary-border: #d7a6bf;
+  --seblify-color-secondary-text: #6f3a55;
+  --seblify-color-secondary-on-inverse-surface: #1d1519;
+  --seblify-color-secondary-on-inverse-surface-hover: #2b1d25;
+  --seblify-color-secondary-on-inverse-text: #d8a4bd;
+  --seblify-color-secondary-on-inverse-border: #6f3a55;
+
+  --seblify-color-neutral-fill: #6f5f55;
+  --seblify-color-neutral-fill-hover: #5b4d45;
+  --seblify-color-neutral-fill-text: #fff4e7;
+  --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: #211916;
+  --seblify-color-strong-fill-hover: #080706;
+  --seblify-color-strong-fill-text: #fff4e7;
+  --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: #777447;
+  --seblify-color-success-fill-hover: #66633c;
+  --seblify-color-success-fill-text: #fff4e7;
+  --seblify-color-success-surface: #eeeddf;
+  --seblify-color-success-surface-hover: #e1dfc4;
+  --seblify-color-success-border: #cbc790;
+  --seblify-color-success-text: #5d5b34;
+  --seblify-color-success-on-inverse-surface: #1e1d13;
+  --seblify-color-success-on-inverse-surface-hover: #2a2818;
+  --seblify-color-success-on-inverse-text: #c6c18a;
+  --seblify-color-success-on-inverse-border: #777447;
+
+  --seblify-color-danger-fill: #b83d45;
+  --seblify-color-danger-fill-hover: #9f3239;
+  --seblify-color-danger-fill-text: #fff4e7;
+  --seblify-color-danger-surface: #fae7e8;
+  --seblify-color-danger-surface-hover: #f3d2d4;
+  --seblify-color-danger-border: #e2a2a7;
+  --seblify-color-danger-text: #923038;
+  --seblify-color-danger-on-inverse-surface: #2b1515;
+  --seblify-color-danger-on-inverse-surface-hover: #3a1d1d;
+  --seblify-color-danger-on-inverse-text: #efa5a5;
+  --seblify-color-danger-on-inverse-border: #873638;
+
+  --seblify-color-warning-fill: #9a6d24;
+  --seblify-color-warning-fill-hover: #805918;
+  --seblify-color-warning-fill-text: #fff4e7;
+  --seblify-color-warning-surface: #f8edd8;
+  --seblify-color-warning-surface-hover: #efddbd;
+  --seblify-color-warning-border: #d8b46c;
+  --seblify-color-warning-text: #7a5418;
+  --seblify-color-warning-on-inverse-surface: #2a2115;
+  --seblify-color-warning-on-inverse-surface-hover: #382c1a;
+  --seblify-color-warning-on-inverse-text: #e4c382;
+  --seblify-color-warning-on-inverse-border: #8a6c38;
+
+  --seblify-color-info-fill: #a5664a;
+  --seblify-color-info-fill-hover: #8f543b;
+  --seblify-color-info-fill-text: #fff4e7;
+  --seblify-color-info-surface: #f6e6de;
+  --seblify-color-info-surface-hover: #edd3c6;
+  --seblify-color-info-border: #d49d85;
+  --seblify-color-info-text: #844932;
+  --seblify-color-info-on-inverse-surface: #251914;
+  --seblify-color-info-on-inverse-surface-hover: #332119;
+  --seblify-color-info-on-inverse-text: #dfa085;
+  --seblify-color-info-on-inverse-border: #784531;
+
+  --seblify-color-focus-ring: #b43f5a;
+  --seblify-opacity-disabled: 0.56;
+  --seblify-shadow-control: 0 1px 3px rgb(33 25 22 / 18%);
+  --seblify-shadow-raised: 0 12px 28px rgb(33 25 22 / 16%);
+  --seblify-shadow-status: 0 10px 24px rgb(180 63 90 / 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='studio'][data-color-mode='dark'] {
+  color-scheme: dark;
+
+  --seblify-color-background: #080706;
+  --seblify-color-surface: #15110f;
+  --seblify-color-surface-raised: #1c1714;
+  --seblify-color-surface-muted: #241d19;
+  --seblify-color-surface-hover: #2c231e;
+  --seblify-color-surface-inverse: #f3e7d9;
+  --seblify-color-surface-inverse-hover: #fff4e7;
+  --seblify-color-border: #302721;
+  --seblify-color-border-strong: #4a3b32;
+  --seblify-color-border-inverse: #d7c7b8;
+  --seblify-color-text: #f3e7d9;
+  --seblify-color-text-muted: #b9aa9c;
+  --seblify-color-text-subtle: #817367;
+  --seblify-color-text-inverse: #15110f;
+
+  --seblify-color-primary-fill: #b43f5a;
+  --seblify-color-primary-fill-hover: #cf5771;
+  --seblify-color-primary-fill-text: #fff4e7;
+  --seblify-color-primary-surface: #2a1218;
+  --seblify-color-primary-surface-hover: #3a1922;
+  --seblify-color-primary-border: #743044;
+  --seblify-color-primary-text: #e07088;
+  --seblify-color-primary-on-inverse-surface: #fae8ed;
+  --seblify-color-primary-on-inverse-surface-hover: #f5d5dd;
+  --seblify-color-primary-on-inverse-text: #8f2b43;
+  --seblify-color-primary-on-inverse-border: #e6a6b5;
+
+  --seblify-color-secondary-fill: #6f3a55;
+  --seblify-color-secondary-fill-hover: #8a4b6b;
+  --seblify-color-secondary-fill-text: #fff4e7;
+  --seblify-color-secondary-surface: #1d1519;
+  --seblify-color-secondary-surface-hover: #2b1d25;
+  --seblify-color-secondary-border: #6f3a55;
+  --seblify-color-secondary-text: #d8a4bd;
+  --seblify-color-secondary-on-inverse-surface: #f4e5ee;
+  --seblify-color-secondary-on-inverse-surface-hover: #ecd3e0;
+  --seblify-color-secondary-on-inverse-text: #6f3a55;
+  --seblify-color-secondary-on-inverse-border: #d7a6bf;
+
+  --seblify-color-neutral-fill: #b9aa9c;
+  --seblify-color-neutral-fill-hover: #d2c3b5;
+  --seblify-color-neutral-fill-text: #15110f;
+  --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: #777447;
+  --seblify-color-success-fill-hover: #8d8958;
+  --seblify-color-success-fill-text: #fff4e7;
+  --seblify-color-success-surface: #1e1d13;
+  --seblify-color-success-surface-hover: #2a2818;
+  --seblify-color-success-border: #777447;
+  --seblify-color-success-text: #c6c18a;
+  --seblify-color-success-on-inverse-surface: #eeeddf;
+  --seblify-color-success-on-inverse-surface-hover: #e1dfc4;
+  --seblify-color-success-on-inverse-text: #5d5b34;
+  --seblify-color-success-on-inverse-border: #cbc790;
+
+  --seblify-color-danger-fill: #c95657;
+  --seblify-color-danger-fill-hover: #dd6f70;
+  --seblify-color-danger-fill-text: #fff4e7;
+  --seblify-color-danger-surface: #2b1515;
+  --seblify-color-danger-surface-hover: #3a1d1d;
+  --seblify-color-danger-border: #873638;
+  --seblify-color-danger-text: #efa5a5;
+  --seblify-color-danger-on-inverse-surface: #fae7e8;
+  --seblify-color-danger-on-inverse-surface-hover: #f3d2d4;
+  --seblify-color-danger-on-inverse-text: #923038;
+  --seblify-color-danger-on-inverse-border: #e2a2a7;
+
+  --seblify-color-warning-fill: #c9a15c;
+  --seblify-color-warning-fill-hover: #dbb874;
+  --seblify-color-warning-fill-text: #15110f;
+  --seblify-color-warning-surface: #2a2115;
+  --seblify-color-warning-surface-hover: #382c1a;
+  --seblify-color-warning-border: #8a6c38;
+  --seblify-color-warning-text: #e4c382;
+  --seblify-color-warning-on-inverse-surface: #f8edd8;
+  --seblify-color-warning-on-inverse-surface-hover: #efddbd;
+  --seblify-color-warning-on-inverse-text: #7a5418;
+  --seblify-color-warning-on-inverse-border: #d8b46c;
+
+  --seblify-color-info-fill: #a5664a;
+  --seblify-color-info-fill-hover: #bc795b;
+  --seblify-color-info-fill-text: #fff4e7;
+  --seblify-color-info-surface: #251914;
+  --seblify-color-info-surface-hover: #332119;
+  --seblify-color-info-border: #784531;
+  --seblify-color-info-text: #dfa085;
+  --seblify-color-info-on-inverse-surface: #f6e6de;
+  --seblify-color-info-on-inverse-surface-hover: #edd3c6;
+  --seblify-color-info-on-inverse-text: #844932;
+  --seblify-color-info-on-inverse-border: #d49d85;
+
+  --seblify-color-focus-ring: #e07088;
+  --seblify-opacity-disabled: 0.5;
+  --seblify-shadow-control: 0 1px 3px rgb(0 0 0 / 42%);
+  --seblify-shadow-raised: 0 12px 28px rgb(0 0 0 / 42%);
+  --seblify-shadow-status: 0 10px 24px rgb(180 63 90 / 22%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-seblify-theme]):not([data-color-mode]),
+  :root[data-seblify-theme='studio']:not([data-color-mode]) {
+    color-scheme: dark;
+
+    --seblify-color-background: #080706;
+    --seblify-color-surface: #15110f;
+    --seblify-color-surface-raised: #1c1714;
+    --seblify-color-surface-muted: #241d19;
+    --seblify-color-surface-hover: #2c231e;
+    --seblify-color-surface-inverse: #f3e7d9;
+    --seblify-color-surface-inverse-hover: #fff4e7;
+    --seblify-color-border: #302721;
+    --seblify-color-border-strong: #4a3b32;
+    --seblify-color-border-inverse: #d7c7b8;
+    --seblify-color-text: #f3e7d9;
+    --seblify-color-text-muted: #b9aa9c;
+    --seblify-color-text-subtle: #817367;
+    --seblify-color-text-inverse: #15110f;
+
+    --seblify-color-primary-fill: #b43f5a;
+    --seblify-color-primary-fill-hover: #cf5771;
+    --seblify-color-primary-fill-text: #fff4e7;
+    --seblify-color-primary-surface: #2a1218;
+    --seblify-color-primary-surface-hover: #3a1922;
+    --seblify-color-primary-border: #743044;
+    --seblify-color-primary-text: #e07088;
+    --seblify-color-primary-on-inverse-surface: #fae8ed;
+    --seblify-color-primary-on-inverse-surface-hover: #f5d5dd;
+    --seblify-color-primary-on-inverse-text: #8f2b43;
+    --seblify-color-primary-on-inverse-border: #e6a6b5;
+
+    --seblify-color-secondary-fill: #6f3a55;
+    --seblify-color-secondary-fill-hover: #8a4b6b;
+    --seblify-color-secondary-fill-text: #fff4e7;
+    --seblify-color-secondary-surface: #1d1519;
+    --seblify-color-secondary-surface-hover: #2b1d25;
+    --seblify-color-secondary-border: #6f3a55;
+    --seblify-color-secondary-text: #d8a4bd;
+    --seblify-color-secondary-on-inverse-surface: #f4e5ee;
+    --seblify-color-secondary-on-inverse-surface-hover: #ecd3e0;
+    --seblify-color-secondary-on-inverse-text: #6f3a55;
+    --seblify-color-secondary-on-inverse-border: #d7a6bf;
+
+    --seblify-color-neutral-fill: #b9aa9c;
+    --seblify-color-neutral-fill-hover: #d2c3b5;
+    --seblify-color-neutral-fill-text: #15110f;
+    --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: #777447;
+    --seblify-color-success-fill-hover: #8d8958;
+    --seblify-color-success-fill-text: #fff4e7;
+    --seblify-color-success-surface: #1e1d13;
+    --seblify-color-success-surface-hover: #2a2818;
+    --seblify-color-success-border: #777447;
+    --seblify-color-success-text: #c6c18a;
+    --seblify-color-success-on-inverse-surface: #eeeddf;
+    --seblify-color-success-on-inverse-surface-hover: #e1dfc4;
+    --seblify-color-success-on-inverse-text: #5d5b34;
+    --seblify-color-success-on-inverse-border: #cbc790;
+
+    --seblify-color-danger-fill: #c95657;
+    --seblify-color-danger-fill-hover: #dd6f70;
+    --seblify-color-danger-fill-text: #fff4e7;
+    --seblify-color-danger-surface: #2b1515;
+    --seblify-color-danger-surface-hover: #3a1d1d;
+    --seblify-color-danger-border: #873638;
+    --seblify-color-danger-text: #efa5a5;
+    --seblify-color-danger-on-inverse-surface: #fae7e8;
+    --seblify-color-danger-on-inverse-surface-hover: #f3d2d4;
+    --seblify-color-danger-on-inverse-text: #923038;
+    --seblify-color-danger-on-inverse-border: #e2a2a7;
+
+    --seblify-color-warning-fill: #c9a15c;
+    --seblify-color-warning-fill-hover: #dbb874;
+    --seblify-color-warning-fill-text: #15110f;
+    --seblify-color-warning-surface: #2a2115;
+    --seblify-color-warning-surface-hover: #382c1a;
+    --seblify-color-warning-border: #8a6c38;
+    --seblify-color-warning-text: #e4c382;
+    --seblify-color-warning-on-inverse-surface: #f8edd8;
+    --seblify-color-warning-on-inverse-surface-hover: #efddbd;
+    --seblify-color-warning-on-inverse-text: #7a5418;
+    --seblify-color-warning-on-inverse-border: #d8b46c;
+
+    --seblify-color-info-fill: #a5664a;
+    --seblify-color-info-fill-hover: #bc795b;
+    --seblify-color-info-fill-text: #fff4e7;
+    --seblify-color-info-surface: #251914;
+    --seblify-color-info-surface-hover: #332119;
+    --seblify-color-info-border: #784531;
+    --seblify-color-info-text: #dfa085;
+    --seblify-color-info-on-inverse-surface: #f6e6de;
+    --seblify-color-info-on-inverse-surface-hover: #edd3c6;
+    --seblify-color-info-on-inverse-text: #844932;
+    --seblify-color-info-on-inverse-border: #d49d85;
+
+    --seblify-color-focus-ring: #e07088;
+    --seblify-opacity-disabled: 0.5;
+    --seblify-shadow-control: 0 1px 3px rgb(0 0 0 / 42%);
+    --seblify-shadow-raised: 0 12px 28px rgb(0 0 0 / 42%);
+    --seblify-shadow-status: 0 10px 24px rgb(180 63 90 / 22%);
+  }
+}