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

package/src/tokens/theme.css

@@ -0,0 +1,221 @@
+/* Generated from theme/less by theme/css/tools/tokens.ts, then curated by hand. */
+@layer pacem.tokens {
+    :root, [data-theme] {
+        --pacem-max-z-index: 2000;
+        --pacem-theme-lightblue: #262b3e;
+        --pacem-theme-blue: #1e2336;
+        --pacem-theme-red: #ff005a;
+        --pacem-theme-teal: #429bbb;
+        --pacem-grid-cell: 76px;
+        --pacem-grid-spacing: 24px;
+        --pacem-theme-dark: #000;
+        --pacem-color-error: #BF215B;
+        --pacem-color-error-inverse: #fff;
+        --pacem-color-highlight: #a7f8ab;
+        --pacem-color-highlight-fore: var(--pacem-theme-blue);
+        --pacem-color-tech: rgb(from var(--pacem-color-highlight) r g b / 60%);
+        --pacem-color-watermark: #c0c0c0;
+        --pacem-theme-light: #fff;
+        --pacem-font-weight: 300;
+        --pacem-font-std-weight: var(--pacem-font-weight);
+        --pacem-font-main-weight: 400;
+        --pacem-font-tech-weight: 400;
+        --pacem-font-main: 'PT Sans Narrow', 'Segoe UI Light', Helvetica, sans-serif;
+        --pacem-font-tech: 'Fira Mono', Monospace;
+        --pacem-font-size: 14px;
+        --pacem-font-rem-factor: 1;
+        --pacem-font-std: 'Roboto Condensed', 'Segoe UI', Helvetica, sans-serif;
+        --pacem-font-std-rem-factor: 1;
+        --pacem-font-main-rem-factor: 1;
+        --pacem-font-tech-rem-factor: var(--pacem-font-rem-factor);
+        --pacem-font-icons: 'Material Symbols Outlined';
+        --pacem-font-icon-size: var(--pacem-grid-spacing);
+        --pacem-font-icon-fill: 1;
+        --pacem-font-icon-offset: -1px;
+        --pacem-color-green: #1ebb8f;
+        --pacem-color-green-inverse: #fff;
+        --pacem-color-yellow: #c2b010;
+        --pacem-color-yellow-inverse: #fff;
+        --pacem-color-brown: #a6715e;
+        --pacem-color-brown-inverse: #fff;
+        --pacem-color-red: #dd2020;
+        --pacem-color-red-inverse: #fff;
+        --pacem-color-pink: #ff0085;
+        --pacem-color-pink-inverse: #fff;
+        --pacem-color-blue: #116e8b;
+        --pacem-color-blue-inverse: #fff;
+        --pacem-color-orange: #d46d00;
+        --pacem-color-orange-inverse: #fff;
+        --pacem-color-purple: #624472;
+        --pacem-color-purple-inverse: #fff;
+        --pacem-color-teal: var(--pacem-theme-teal);
+        --pacem-color-teal-inverse: #fff;
+        --pacem-color-gray: #808080;
+        --pacem-color-gray-inverse: #fff;
+        --pacem-layout-aside-width: calc(10 * var(--pacem-grid-spacing));
+        --pacem-layout-aside-padding: var(--pacem-grid-cell);
+        --pacem-layout-aside-gap: var(--pacem-grid-cell);
+        --pacem-layout-header-height: var(--pacem-grid-cell);
+        --pacem-layout-toolbar-height: var(--pacem-grid-spacing);
+        --pacem-layout-footer-height: calc(var(--pacem-layout-header-height) - var(--pacem-layout-toolbar-height));
+        --pacem-layout-bigfooter-height: var(--pacem-layout-header-height);
+        --pacem-color-background: var(--pacem-theme-blue);
+        --pacem-color-root: hsl(from var(--pacem-color-background) h s max(0, l - 3));
+        --pacem-color-background-alt: #0e456e;
+        --pacem-color-default: var(--pacem-theme-light);
+        --pacem-color-default-inverse: var(--pacem-theme-dark);
+        --pacem-color-info: var(--pacem-color-blue);
+        --pacem-color-info-inverse: var(--pacem-color-blue-inverse);
+        --pacem-color-success: #4dc2b4;
+        --pacem-color-success-inverse: var(--pacem-theme-light);
+        --pacem-color-warning: #c5c023;
+        --pacem-color-warning-inverse: var(--pacem-theme-light);
+        --pacem-color-danger: #fa1f1f;
+        --pacem-color-danger-inverse: var(--pacem-color-error-inverse);
+        --pacem-color-accent: var(--pacem-theme-red);
+        --pacem-color-accent-inverse: var(--pacem-theme-light);
+        --pacem-color-primary: var(--pacem-theme-teal);
+        --pacem-color-primary-inverse: var(--pacem-theme-light);
+        --pacem-color-secondary: #5e7881;
+        --pacem-color-secondary-inverse: #fff;
+        --pacem-color-disabled: #6f717d;
+        --pacem-color-disabled-inverse: var(--pacem-color-default);
+        --pacem-color-title: var(--pacem-color-accent);
+        --pacem-color-title-inverse: transparent;
+        --pacem-color-code: var(--pacem-color-default);
+        --pacem-color-code-back: rgb(from var(--pacem-color-code) r g b / 10%);
+        --pacem-color-codeblock-back: #000;
+        --pacem-flag-uppercase-headings: 1;
+        --pacem-flag-uppercase-titles: 1;
+        --pacem-flag-uppercase-carousels: var(--pacem-flag-uppercase-headings);
+        --pacem-flag-uppercase-buttons: var(--pacem-flag-uppercase-headings);
+        --pacem-flag-dark: 1;
+        --pacem-flag-shadows: 1;
+        --pacem-flag-gradients: 1;
+        --pacem-flag-glows: 0;
+        --pacem-flag-blur: 0;
+        --pacem-border-radius: 0px;
+        --pacem-flag-menuitem-borders: 0;
+        --pacem-color-border: rgb(from var(--pacem-color-default) r g b / 10%);
+        --pacem-color-border-light: rgba(255,255,255,0.1);
+        --pacem-color-border-dawn: rgba(255,255,255,0.05);
+        --pacem-color-border-dusk: rgba(0,0,0,0.1);
+        --pacem-color-border-dark: rgba(0,0,0,0.25);
+        --pacem-color-shadow: rgba(0,0,0,0.5);
+        --pacem-size-scrollbar: 10px;
+        --pacem-color-scrollbar-track: rgba(0,0,0,0.0);
+        --pacem-color-scrollbar-thumb: var(--pacem-theme-lightblue);
+        --pacem-color-button-border-light: rgb(from var(--pacem-theme-light) r g b / 33%);
+        --pacem-color-button-border: rgb(from var(--pacem-theme-light) r g b / 0%);
+        --pacem-color-button-border-dark: rgb(from var(--pacem-theme-dark) r g b / 0%);
+        --pacem-color-button-back: var(--pacem-theme-lightblue);
+        --pacem-color-button-fore: var(--pacem-theme-light);
+        --pacem-color-button-fore-disabled: var(--pacem-color-button-fore);
+        --pacem-color-button-back-disabled: var(--pacem-color-button-back);
+        --pacem-button-hover-percentage: 5;
+        /* button hover background (ui/button.less: lighten in dark themes, darken in light ones) */
+        --pacem-color-button-back-hover: hsl(from var(--pacem-color-button-back) h s min(100, l + var(--pacem-button-hover-percentage)));
+        --pacem-font-btn: var(--pacem-font-std);
+        --pacem-button-fontsize: calc(1.1rem * var(--pacem-font-rem-factor));
+        --pacem-border-button-radius: var(--pacem-border-radius);
+        --pacem-color-link: var(--pacem-color-primary);
+        --pacem-border-panel-radius: var(--pacem-border-radius);
+        --pacem-border-card-radius: var(--pacem-border-panel-radius);
+        --pacem-corner-size: 8px;
+        --pacem-corner-datacell-size: 3px;
+        --pacem-datarow-color: transparent;
+        --pacem-datarow-hover-color: rgb(from var(--pacem-color-border) r g b / 5%);
+        --pacem-datarow-alt-color: rgb(from hsl(from var(--pacem-color-background) h s max(0, l - 5)) r g b / 20%);
+        --pacem-menu-hamburger-button-size: var(--pacem-layout-header-height);
+        --pacem-menu-hamburger-button-desktop-size: var(--pacem-grid-cell);
+        --pacem-menu-link-color: rgb(from var(--pacem-color-default) r g b / 60%);
+        --pacem-menu-link-hover-color: var(--pacem-color-default);
+        --pacem-menu-link-active-color: var(--pacem-color-primary);
+        --pacem-menu-link-active-backgroundcolor: rgb(from var(--pacem-color-default) r g b / 5%);
+        --pacem-menu-link-active-decorcolor: var(--pacem-menu-link-active-color);
+        --pacem-menu-link-fontfamily: var(--pacem-font-std);
+        --pacem-menu-link-fontsize: calc(1rem * var(--pacem-font-rem-factor));
+        --pacem-menu-nav-background: var(--pacem-color-background);
+        --pacem-menu-nav-outset-spacing: calc(var(--pacem-grid-spacing) / 1.5);
+        --pacem-menu-width: var(--pacem-layout-aside-width);
+        --pacem-sidebar-width: calc(var(--pacem-grid-spacing) * 2);
+        --pacem-sidebar-background: var(--pacem-color-background);
+        --pacem-sidebar-foreground: var(--pacem-color-default);
+        --pacem-sidebar-nav-spacing: var(--pacem-menu-nav-outset-spacing);
+        --pacem-color-breadcrumb-home-fore: var(--pacem-theme-teal);
+        --pacem-color-balloon: hsl(from var(--pacem-theme-lightblue) h s max(0, l - 2));
+        --pacem-balloon-color-contrast: var(--pacem-color-background);
+        --pacem-flag-balloon-shadows: var(--pacem-flag-shadows);
+        /* (Less chose it by scheme and by the luminance of the background: dark, very dark, light) */
+        --pacem-shadow-balloon: 0 calc(var(--pacem-grid-spacing) / 12) calc(var(--pacem-grid-spacing) / 3) rgb(from var(--pacem-theme-dark) r g b / 50%);
+        --pacem-balloon-tail-size: var(--pacem-grid-spacing);
+        --pacem-balloon-tail-inset: calc(var(--pacem-grid-spacing) / 3);
+        --pacem-window-color: var(--pacem-color-balloon);
+        --pacem-color-contextmenu-hover-back: hsl(from var(--pacem-color-button-back) h s min(100, l + var(--pacem-button-hover-percentage)));
+        --pacem-color-contextmenu-hover-fore: var(--pacem-color-default);
+        /* contextmenu separators (ui/{theme}/button.less) */
+        --pacem-contextmenu-hr-back: rgb(from var(--pacem-theme-dark) r g b / 10%);
+        --pacem-contextmenu-hr-border: 1px solid rgb(from var(--pacem-theme-light) r g b / 5%);
+        --pacem-color-calendarday-hover: rgb(from var(--pacem-color-default) r g b / 5%);
+        --pacem-color-calendarday-focus: rgb(from var(--pacem-color-primary) r g b / 5%);
+        --pacem-color-calendarday-today: rgb(from var(--pacem-color-primary) r g b / 2.5%);
+        --pacem-color-agenda-clock: rgb(from var(--pacem-color-default) r g b / 25%);
+        --pacem-color-event-back: hsl(from var(--pacem-theme-teal) h s min(100, l + 5));
+        --pacem-color-event-fore: var(--pacem-color-default);
+        --pacem-color-schedule-header: var(--pacem-color-border);
+        --pacem-color-schedule-subheader: var(--pacem-color-background);
+        --pacem-color-tag-back: var(--pacem-color-event-back);
+        --pacem-color-tag-fore: var(--pacem-color-event-fore);
+        --pacem-color-suggest-border: var(--pacem-theme-blue);
+        --pacem-color-suggest-back: var(--pacem-theme-lightblue);
+        --pacem-color-suggest-border-light: var(--pacem-color-border-light);
+        --pacem-color-suggest-border-dark: var(--pacem-color-border-dark);
+        --pacem-color-suggest-highlight: var(--pacem-theme-teal);
+        --pacem-color-suggest-focus-back: var(--pacem-theme-teal);
+        --pacem-color-suggest-focus-fore: var(--pacem-theme-light);
+        --pacem-color-suggest-focus-highlight: var(--pacem-theme-blue);
+        --pacem-color-slider-thumb: hsl(from var(--pacem-color-button-back) h s min(100, l + 5));
+        --pacem-color-tab-back: var(--pacem-color-background);
+        --pacem-color-tab-highlight: var(--pacem-color-highlight);
+        --pacem-border-tab: 0;
+        --pacem-color-lightbox: var(--pacem-color-background);
+        --pacem-color-lightbox-back: rgb(from var(--pacem-theme-dark) r g b / 50%);
+        --pacem-color-gallery-back: var(--pacem-color-lightbox-back);
+        --pacem-color-map: var(--pacem-theme-dark);
+        --pacem-color-marquee-back: #000;
+        --pacem-color-marquee-back2: hsl(from var(--pacem-color-background) h s max(0, l - 3));
+        --pacem-color-marquee-fore: var(--pacem-color-default);
+        --pacem-color-window-border: var(--pacem-color-border);
+        --pacem-color-toast-back: rgb(from var(--pacem-color-background) r g b / 75%);
+        --pacem-color-timeline-frame: var(--pacem-color-primary);
+        --pacem-color-field-back: var(--pacem-theme-lightblue);
+        --pacem-color-field-label: var(--pacem-theme-teal);
+        --pacem-field-outline-width: 0;
+        --pacem-field-minimal-fontsize: .9142857;
+        --pacem-field-height: calc(var(--pacem-grid-spacing) * 1.25);
+        --pacem-color-field-outline: rgb(from var(--pacem-theme-teal) r g b / 40%);
+        --pacem-border-field-size: 2px;
+        --pacem-flag-field-underline: 1;
+        --pacem-border-field-radius: var(--pacem-border-radius);
+        --pacem-border-input-radius: var(--pacem-border-field-radius);
+        --pacem-color-input-toggle: var(--pacem-color-primary);
+        --pacem-color-input-icon: var(--pacem-color-primary);
+        --pacem-color-input-back: rgba(255,255,255,0.05);
+        --pacem-color-input-fore: rgb(from var(--pacem-color-default) r g b / 80%);
+        --pacem-color-input-fore-focus: var(--pacem-color-default);
+        --pacem-color-field-fore: var(--pacem-color-input-fore);
+        --pacem-color-field-fore-focus: var(--pacem-color-input-fore-focus);
+        --pacem-color-field-fore-error: var(--pacem-color-error);
+        --pacem-width-desktop: 80vw;
+        --pacem-height-block: 50vh;
+        --pacem-easing-default: ease-out;
+        --pacem-easing-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        --pacem-easing-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+        --pacem-easing-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+        --pacem-easing-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
+        --pacem-easing-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
+        --pacem-easing-in-out-extreme: cubic-bezier(0.0, 1.00, 1.00, 0.0);
+        --pacem-easing-out-back2: cubic-bezier(0.0, 1.6, 1.0, 0.8);
+        --pacem-easing-out-bump: cubic-bezier(0.0, 1.6, 0.0, 1.0);
+    }
+}

package/src/traits.css

@@ -0,0 +1,18 @@
+/* Theme traits: the compile-time flags of the Less theme (@shadows, @gradients, @glows...), as zero-specificity
+   selectors on the root. They switch the few *structural* rules that tokens cannot express (rules that exist
+   in some modes only), with the same cascade the Less guards had.
+
+   Usage:    :--no-shadows .pacem-card > .card-heading { ... }   or, nested:   :--no-shadows & { ... }
+
+   Available traits (each with its negation :--no-{trait}):
+     :--shadows          drop shadows
+     :--gradients        glossy gradients
+     :--glows            glowing texts on hover/focus
+     :--blur             backdrop blur
+     :--dark-scheme      dark color scheme (alias of its negation: :--light-scheme)
+     :--field-underline  underlined form fields (alias of its negation: :--field-box)
+     :--field-outline    focus outline on every form field, of width --pacem-field-outline-width
+   plus any custom trait declared in the configuration.
+
+   Which modes have which traits is configured per mode (pacem-theme.json, "traits"), on top of the built-in
+   bases (tools/config.ts, BASES): the selectors are generated at build time by tools/traits.ts. */

package/src/transforms/index.css

@@ -0,0 +1,5 @@
+/* transforms (theme/less/pacem/transforms) */
+.pacem-highlight {
+    color: var(--pacem-color-highlight-fore);
+    background-color: var(--pacem-color-highlight);
+}

package/src/ui/anchor.css

@@ -0,0 +1,55 @@
+pacem-a {
+    display: inline-block;
+    color: var(--pacem-color-link);
+    cursor: default;
+
+    &:hover {
+        color: hsl(from var(--pacem-color-link) h s min(100, l + 10));
+    }
+
+    &.a-target::after,
+    &.a-download::after {
+        /* .IconCore() */
+        font-family: var(--pacem-font-icons);
+        text-transform: none;
+        letter-spacing: normal;
+        word-wrap: normal;
+        white-space: nowrap;
+        direction: ltr;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        -moz-osx-font-smoothing: grayscale;
+        font-feature-settings: 'liga';
+        transition: font-variation-settings .25s var(--pacem-easing-in-out-sine);
+        font-variation-settings: 'FILL' var(--pacem-font-icon-fill), 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: .1em;
+        line-height: 1;
+    }
+
+    &.a-target::after {
+        content: 'launch';
+    }
+
+    &.a-url {
+        cursor: pointer;
+    }
+
+    &.a-download::after {
+        content: 'vertical_align_bottom';
+    }
+
+    /* disabled link */
+    &.pacem-disabled {
+        color: var(--pacem-color-disabled);
+
+        &:hover {
+            color: var(--pacem-color-disabled);
+        }
+
+        &.a-url {
+            cursor: default;
+        }
+    }
+}