@pacem/pacem-theme-css 0.0.0-stage → 2.0.0-abel

package/themes/dark.css

@@ -0,0 +1,6 @@
+/* Generated from theme/less by theme/css/tools/tokens.ts, then curated by hand. */
+@layer pacem.tokens {
+    :root[dark], [data-theme="dark"] {
+        color-scheme: dark;
+    }
+}

package/themes/light.css

@@ -0,0 +1,97 @@
+/* Generated from theme/less by theme/css/tools/tokens.ts, then curated by hand. */
+@layer pacem.tokens {
+    :root[light], [data-theme="light"] {
+        color-scheme: light;
+        /* light scheme: derivations mix towards black */
+        --pacem-mix-tint: #000;
+        --pacem-mix-shade: #fff;
+        --pacem-mix-hover: 10%;
+        --pacem-mix-emphasis: 20%;
+        --pacem-mix-inverse-hover: 7%;
+        --pacem-mix-container: 75%;
+        --pacem-mix-container-inverse: 25%;
+        --pacem-font-std-api-url: 'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap';
+        --pacem-font-std: 'Roboto Condensed', 'Segoe UI', Helvetica, sans-serif;
+        --pacem-font-main: 'PT Sans Narrow', 'Segoe UI Light', Helvetica, sans-serif;
+        --pacem-font-icons: 'Material Symbols Outlined';
+        --pacem-font-size: 14px;
+        --pacem-font-weight: 400;
+        --pacem-font-rem-factor: 1;
+        --pacem-font-icon-fill: 0;
+        --pacem-theme-blue: #fff;
+        --pacem-theme-red: #ff005a;
+        --pacem-theme-teal: #429bbb;
+        --pacem-theme-lightblue: rgb(242,242,242);
+        --pacem-color-background-alt: #efefef;
+        --pacem-color-danger: #c70808;
+        --pacem-color-tech: rgb(from var(--pacem-color-highlight) r g b / 60%);
+        --pacem-color-watermark: #c0c0c0;
+        --pacem-theme-light: #fff;
+        --pacem-color-default: #262b3e;
+        --pacem-color-default-inverse: #fff;
+        --pacem-color-highlight: #77c77d;
+        --pacem-color-highlight-fore: var(--pacem-color-default);
+        --pacem-color-success-inverse: #fff;
+        --pacem-color-codeblock-back: #f6f6f6;
+        --pacem-color-disabled: var(--pacem-color-watermark);
+        --pacem-color-warning: #c6b800;
+        --pacem-flag-shadows: 0;
+        --pacem-flag-gradients: 0;
+        --pacem-flag-glows: 0;
+        --pacem-flag-dark: 0;
+        --pacem-border-radius: 6px;
+        --pacem-color-scrollbar-thumb: #e4e7e9;
+        --pacem-color-yellow: #e4d102;
+        --pacem-color-yellow-inverse: #fff;
+        --pacem-color-orange: #e48d1c;
+        --pacem-color-orange-inverse: #fff;
+        --pacem-color-gray: #a8a8a8;
+        --pacem-color-gray-inverse: #fff;
+        --pacem-field-outline-width: 0;
+        --pacem-color-input-back: rgba(0,0,0,0.025);
+        --pacem-color-input-fore: rgb(from var(--pacem-color-default) r g b / 75%);
+        --pacem-color-button-border-light: #fff;
+        --pacem-color-button-border: #e0e3e8;
+        --pacem-color-button-border-dark: #d0d3d8;
+        --pacem-color-button-back: var(--pacem-theme-lightblue);
+        --pacem-color-button-fore: var(--pacem-color-default);
+        --pacem-color-button-back-hover: hsl(from var(--pacem-color-button-back) h s max(0, l - var(--pacem-button-hover-percentage)));
+        --pacem-contextmenu-hr-back: rgb(from var(--pacem-theme-dark) r g b / 7%);
+        --pacem-contextmenu-hr-border: 1px solid rgb(from var(--pacem-theme-light) r g b / 60%);
+        --pacem-button-fontsize: calc(1rem * var(--pacem-font-rem-factor));
+        --pacem-color-border-light: #fff;
+        --pacem-color-border-dawn: #f5f5f5;
+        --pacem-color-border-dusk: #f5f5f5;
+        --pacem-color-border-dark: #eee;
+        --pacem-color-shadow: rgba(0,0,0,0.05);
+        --pacem-datarow-alt-color: rgb(from hsl(from var(--pacem-color-background-alt) h s max(0, l - 5)) r g b / 20%);
+        --pacem-menu-link-fontfamily: var(--pacem-font-main);
+        --pacem-menu-link-fontsize: calc(1rem * var(--pacem-font-main-rem-factor));
+        --pacem-color-breadcrumb-home-fore: var(--pacem-color-accent);
+        --pacem-color-balloon: #e4e7e9;
+        --pacem-flag-balloon-shadows: 1;
+        --pacem-shadow-balloon: 0 calc(var(--pacem-grid-spacing) / 6) calc(var(--pacem-grid-spacing) / 3) rgb(from var(--pacem-theme-dark) r g b / 25%);
+        --pacem-color-contextmenu-hover-back: hsl(from var(--pacem-color-button-back) h s min(100, l + 1));
+        --pacem-color-contextmenu-hover-fore: hsl(from var(--pacem-color-default) h s max(0, l - var(--pacem-button-hover-percentage)));
+        --pacem-color-slider-thumb: hsl(from var(--pacem-color-button-back) h s max(0, l - 5));
+        --pacem-color-suggest-border: var(--pacem-color-button-border-dark);
+        --pacem-color-suggest-back: var(--pacem-theme-lightblue);
+        --pacem-color-suggest-border-light: rgba(255,255,255,0.8);
+        --pacem-color-suggest-border-dark: rgba(0,0,0,0.075);
+        --pacem-color-tab-back: var(--pacem-color-background);
+        --pacem-color-tab-highlight: var(--pacem-color-highlight);
+        --pacem-border-tab: 1px;
+        --pacem-color-lightbox-back: rgba(0,0,0,0.1);
+        --pacem-color-gallery-back: rgba(0,0,0,0.75);
+        --pacem-color-marquee-back: var(--pacem-theme-lightblue);
+        --pacem-color-marquee-fore: var(--pacem-color-default);
+        --pacem-color-event-back: hsl(from var(--pacem-theme-teal) h s min(100, l + 10));
+        --pacem-color-event-fore: #fff;
+        --pacem-color-field-back: #fff;
+        --pacem-border-field-size: 1px;
+        --pacem-color-field-label: var(--pacem-theme-teal);
+        --pacem-flag-field-underline: 0;
+        --pacem-color-field-fore-error: var(--pacem-color-error);
+    }
+}
+