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

package/src/ui/sidebar.css

@@ -0,0 +1,103 @@
+/* first level width: 2 * grid spacing (--pacem-sidebar-width) */
+pacem-sidebar {
+    z-index: calc(var(--pacem-zindex-menu) + 1);
+    display: block;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 0;
+
+    &::part(drawer),
+    .sidebar-drawer {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: var(--pacem-sidebar-width);
+        color: var(--pacem-sidebar-foreground);
+        background: var(--pacem-sidebar-background);
+        border-right: 1px solid var(--pacem-color-border);
+        box-sizing: border-box;
+        /* initial state */
+        transform: translateX(calc(-1 * var(--pacem-sidebar-width)));
+        opacity: 0;
+    }
+
+    /* open state */
+    &::part(open),
+    .sidebar-drawer.drawer-open {
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+    &.sidebar-noborder::part(drawer) {
+        border: 0;
+    }
+
+    /* coloring: --pacem--sb (background), --pacem--sb-ink (foreground) */
+    &.sidebar-primary { --pacem--sb: var(--pacem-color-primary); --pacem--sb-ink: var(--pacem-color-primary-inverse); }
+    &.sidebar-secondary { --pacem--sb: var(--pacem-color-secondary); --pacem--sb-ink: var(--pacem-color-secondary-inverse); }
+    &.sidebar-accent { --pacem--sb: var(--pacem-color-accent); --pacem--sb-ink: var(--pacem-color-accent-inverse); }
+    &.sidebar-warning { --pacem--sb: var(--pacem-color-warning); --pacem--sb-ink: var(--pacem-color-warning-inverse); }
+    &.sidebar-success { --pacem--sb: var(--pacem-color-success); --pacem--sb-ink: var(--pacem-color-success-inverse); }
+    &.sidebar-danger { --pacem--sb: var(--pacem-color-danger); --pacem--sb-ink: var(--pacem-color-danger-inverse); }
+    &.sidebar-error { --pacem--sb: var(--pacem-color-error); --pacem--sb-ink: var(--pacem-color-error-inverse); }
+    &.sidebar-invert { --pacem--sb: var(--pacem-color-default); --pacem--sb-ink: var(--pacem-color-default-inverse); }
+    &.sidebar-disabled { --pacem--sb: var(--pacem-color-disabled); --pacem--sb-ink: var(--pacem-color-disabled-inverse); }
+}
+
+pacem-sidebar:is(.sidebar-primary, .sidebar-secondary, .sidebar-accent, .sidebar-warning, .sidebar-success, .sidebar-danger, .sidebar-error, .sidebar-invert, .sidebar-disabled) {
+    &::part(drawer),
+    .sidebar-drawer {
+        background: linear-gradient(to bottom, var(--pacem--sb) 0, hsl(from var(--pacem--sb) h s max(0, l - 20)) 100%);
+        border-color: transparent;
+        color: var(--pacem--sb-ink);
+    }
+}
+
+.pacem-body.pacem-sidebar-open {
+    padding-left: calc(var(--pacem-sidebar-width) + var(--pacem-layout-aside-padding));
+
+    @media screen and (--pacem-lg) {
+        &.pacem-menu-open {
+            padding-left: calc(var(--pacem-sidebar-width) + var(--pacem-menu-width) + var(--pacem-layout-aside-padding));
+        }
+    }
+
+    pacem-menu.menu-sync {
+        transform: translateX(var(--pacem-sidebar-width));
+    }
+}
+
+pacem-sidebar nav.pacem-sidebar {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    height: 100%;
+    padding: var(--pacem-sidebar-nav-spacing) 0;
+    box-sizing: border-box;
+
+    > .sidebar-start,
+    > .sidebar-end {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    > .sidebar-start {
+        grid-row: 1;
+    }
+
+    > .sidebar-end {
+        grid-row: 3;
+    }
+
+    .sidebar-button {
+        margin: 0;
+    }
+}
+
+.pacem-body.pacem-animations pacem-sidebar::part(drawer),
+.pacem-body.pacem-animations pacem-sidebar .sidebar-drawer {
+    transition: transform .3s var(--pacem-easing-in-out-sine), opacity .2s linear;
+}

package/src/ui/sticky-header.css

@@ -0,0 +1,22 @@
+pacem-sticky-header {
+    pointer-events: none !important;
+    display: none !important;
+
+    :--shadows & {
+        box-shadow: 0 1px var(--pacem-grid-spacing) rgba(0,0,0,0.5);
+    }
+}
+
+/* while scrolling (> threshold) */
+.pacem-body.sticky-header-fade[header] header[pacem],
+.pacem-body.sticky-header-fade[header] .pacem-header,
+.pacem-body.sticky-header-fade[header][headbar] header[pacem],
+.pacem-body.sticky-header-fade[header][headbar] .pacem-header,
+.pacem-body.sticky-header-fade[header][headbar-prepend] header[pacem],
+.pacem-body.sticky-header-fade[header][headbar-prepend] .pacem-header {
+    transform: translateY(-100%);
+}
+
+.pacem-body[headbar][header].sticky-header-fade .pacem-toolbar.toolbar-header {
+    transform: translateX(0) translateY(0);
+}

package/src/ui/tabs.css

@@ -0,0 +1,355 @@
+/* tab height: 1.5 * grid spacing (--pacem--tab-h); border: --pacem-border-tab (0 in the dark theme) */
+pacem-tabs {
+    --pacem--tab-h: calc(var(--pacem-grid-spacing) * 1.5);
+    display: block;
+
+    pacem-tab {
+        display: none;
+        opacity: 0;
+        pointer-events: none;
+
+        &.tab-out,
+        &.tab-in,
+        &.tab-focus {
+            display: block;
+        }
+
+        &.tab-previous {
+            transform: translateX(calc(-1 * var(--pacem-grid-spacing)));
+        }
+
+        &.tab-next {
+            transform: translateX(var(--pacem-grid-spacing));
+        }
+
+        &.tab-focus,
+        &.pacem-tab-focus {
+            pointer-events: auto;
+            opacity: 1;
+            transform: none;
+        }
+    }
+
+    .pacem-tabs-content {
+        background: var(--pacem-color-tab-back);
+        padding: var(--pacem-grid-spacing);
+        border-radius: var(--pacem-border-radius);
+        border: var(--pacem-border-tab) solid var(--pacem-color-border);
+        z-index: 0;
+        overflow: hidden;
+        display: grid;
+
+        > pacem-tab {
+            grid-column: 1;
+            grid-row: 1;
+            align-self: start;
+            overflow: auto;
+        }
+
+        /* #region unused */
+        .tab-heading {
+            padding: 0 0 calc(var(--pacem-grid-spacing) / 2) 0;
+            margin: 0;
+        }
+
+        .tab-body,
+        .tab-footer {
+            padding: calc(var(--pacem-grid-spacing) / 2) 0;
+            color: rgb(from var(--pacem-color-default) r g b / 80%);
+            line-height: 1.3333;
+        }
+
+        :is(.tab-heading, .tab-body, .tab-footer):last-child {
+            padding-bottom: 0;
+        }
+
+        .tab-heading {
+            line-height: 1.1;
+            font-family: var(--pacem-font-main);
+            font-size: calc(1.5rem * var(--pacem-font-main-rem-factor));
+            min-height: var(--pacem-grid-spacing);
+            text-transform: var(--pacem-transform-heading);
+
+            &.heading-bigger {
+                font-size: calc(2rem * var(--pacem-font-main-rem-factor));
+            }
+
+            h1, h2, h3, h4, h5, h6 {
+                font-size: 1em;
+                margin: 0;
+                padding: 0;
+                line-height: 1;
+                font-weight: normal;
+            }
+
+            :--shadows & {
+                text-shadow: 0 2px 5px rgba(0,0,0,0.5);
+            }
+        }
+        /* #endregion */
+    }
+
+    &:is(.rise, .tabs-rise) {
+        .pacem-tabs-content {
+            box-shadow: 0 4px 16px rgba(0,0,0,0.125);
+
+            :--light-scheme & {
+                box-shadow: 0 2px 24px rgba(0,0,0,0.075);
+            }
+        }
+
+        .pacem-tabs.tabs-vertical pacem-button.pacem-adapter-page.pacem-adapter-active {
+            box-shadow: -2px 2px 4px rgba(0,0,0,0.125);
+
+            :--light-scheme & {
+                box-shadow: -2px 2px 4px rgba(0,0,0,0.05);
+            }
+        }
+    }
+
+    &.tabs-flat {
+        .pacem-tabs-content {
+            box-shadow: none;
+            background: none;
+            border: none;
+            padding-left: var(--pacem-size-1);
+            padding-right: var(--pacem-size-1);
+        }
+
+        .pacem-tabs.tabs-vertical pacem-button.pacem-adapter-page.pacem-adapter-active {
+            box-shadow: none;
+        }
+    }
+
+    &.tabs-no-ypad .pacem-tabs-content {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    &.tabs-no-xpad .pacem-tabs-content {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    &.tabs-nopad .pacem-tabs-content {
+        padding: 0;
+    }
+}
+
+/* tabs (header) */
+pacem-tabs {
+    .pacem-tabs {
+        pacem-adapter.pacem-tabs-adapter {
+            .pacem-adapter-dashboard {
+                list-style-type: none;
+                display: flex;
+                flex-direction: row;
+                align-items: flex-start;
+                margin: 0 0 0 round(calc(2 * var(--pacem--tab-h)), 1px);
+                padding: 0;
+                clear: right;
+
+                > li > pacem-button.pacem-adapter-page {
+                    padding: calc(var(--pacem-grid-spacing) / 6) calc(var(--pacem-grid-spacing) / 2) 0 calc(var(--pacem-grid-spacing) / 2);
+                    margin: 0;
+                    background-color: transparent;
+                    height: var(--pacem--tab-h);
+                    box-sizing: border-box;
+                    border-top-left-radius: var(--pacem-border-radius);
+                    border-top-right-radius: var(--pacem-border-radius);
+
+                    &.pacem-disabled {
+                        box-shadow: none;
+                    }
+
+                    > pacem-span {
+                        display: block;
+                        box-sizing: border-box;
+                        height: calc(var(--pacem--tab-h) - var(--pacem-grid-spacing) / 6);
+                        line-height: calc(var(--pacem--tab-h) - var(--pacem-grid-spacing) / 6);
+                        margin: 0 calc(var(--pacem-grid-spacing) / 2);
+                        border-bottom: 1px solid transparent;
+                        transition: border-color .3s linear;
+
+                        > span {
+                            display: block;
+                        }
+                    }
+
+                    &.pacem-adapter-active {
+                        background-color: var(--pacem-color-tab-back);
+                        border-top: var(--pacem-border-tab) solid var(--pacem-color-border);
+                        border-right: var(--pacem-border-tab) solid var(--pacem-color-border);
+                        border-left: var(--pacem-border-tab) solid var(--pacem-color-border);
+                        border-bottom: 0;
+                        z-index: 1;
+                        transform: translateY(var(--pacem-border-tab));
+
+                        > pacem-span {
+                            border-color: var(--pacem-color-tab-highlight);
+                        }
+                    }
+                }
+            }
+
+            .pacem-adapter-next,
+            .pacem-adapter-previous {
+                font-size: 0;
+                float: left;
+                height: var(--pacem--tab-h);
+                line-height: var(--pacem--tab-h);
+                display: block;
+                width: var(--pacem--tab-h);
+                background-color: transparent;
+                margin: 0;
+
+                &::before {
+                    /* .Icon() */
+                    position: absolute;
+                    display: inline-block;
+                    text-align: center;
+                    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;
+                    font-size: var(--pacem-grid-spacing);
+                    left: 0;
+                    width: 100%;
+                    line-height: var(--pacem--tab-h);
+                }
+            }
+
+            .pacem-adapter-next::before {
+                content: 'chevron_right';
+            }
+
+            .pacem-adapter-previous::before {
+                content: 'chevron_left';
+            }
+        }
+
+        &.tabs-vertical {
+            display: flex;
+            flex-direction: row;
+
+            pacem-adapter.pacem-tabs-adapter {
+                flex-basis: calc(var(--pacem-grid-cell) * 2);
+                flex-grow: 0;
+                flex-shrink: 0;
+
+                .pacem-adapter-dashboard {
+                    display: block;
+                    margin: calc(2 * var(--pacem-grid-spacing)) 0 0 0;
+
+                    > li {
+                        display: list-item;
+
+                        > pacem-button.pacem-adapter-page {
+                            padding: calc(var(--pacem-grid-spacing) / 4) 0 calc(var(--pacem-grid-spacing) / 4) calc(var(--pacem-grid-spacing) / 2);
+                            display: block;
+                            border-bottom-left-radius: var(--pacem-border-radius);
+                            border-top-right-radius: 0;
+
+                            > pacem-span {
+                                display: block;
+                                text-align: left;
+                                margin: 0;
+                                padding: 0 calc(var(--pacem-grid-spacing) / 2) 0 0;
+                                height: calc(var(--pacem--tab-h) - var(--pacem-grid-spacing) / 2);
+                                line-height: calc(var(--pacem--tab-h) - var(--pacem-grid-spacing) / 2);
+                                border-bottom: none;
+                                border-right: 1px solid transparent;
+                            }
+
+                            &.pacem-adapter-active {
+                                border-top: var(--pacem-border-tab) solid var(--pacem-color-border);
+                                border-bottom: var(--pacem-border-tab) solid var(--pacem-color-border);
+                                border-left: var(--pacem-border-tab) solid var(--pacem-color-border);
+                                border-right: 0;
+                                z-index: 1;
+                                transform: translateX(var(--pacem-border-tab));
+
+                                > pacem-span {
+                                    border-color: var(--pacem-color-tab-highlight);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .pacem-adapter-next,
+                .pacem-adapter-previous {
+                    margin-left: calc(var(--pacem-grid-spacing) / 2);
+                    margin-bottom: 0;
+                    margin-right: 0;
+
+                    &::before {
+                        position: static;
+                    }
+                }
+
+                .pacem-adapter-next::before {
+                    content: 'keyboard_arrow_down';
+                }
+
+                .pacem-adapter-previous::before {
+                    content: 'keyboard_arrow_up';
+                }
+            }
+
+            .pacem-tabs-content {
+                flex-grow: 1;
+            }
+        }
+    }
+
+    &.tabs-flat > .pacem-tabs pacem-adapter.pacem-tabs-adapter .pacem-adapter-dashboard > li > pacem-button.pacem-adapter-page.pacem-adapter-active {
+        background: none;
+        border: none;
+    }
+
+    &.tabs-rise {
+        .pacem-tabs-content,
+        .pacem-tabs pacem-adapter.pacem-tabs-adapter .pacem-adapter-dashboard > li > pacem-button.pacem-adapter-page.pacem-adapter-active {
+            border: 1px solid;
+            border-top-color: var(--pacem-color-border-light);
+            border-left-color: var(--pacem-color-border-dawn);
+            border-right-color: var(--pacem-color-border-dusk);
+        }
+
+        .pacem-tabs-content {
+            border-bottom-color: var(--pacem-color-border-dark);
+        }
+
+        .pacem-tabs pacem-adapter.pacem-tabs-adapter .pacem-adapter-dashboard > li > pacem-button.pacem-adapter-page.pacem-adapter-active {
+            border-bottom: 0;
+            transform: translateY(1px);
+        }
+
+        > .pacem-tabs.tabs-vertical pacem-adapter.pacem-tabs-adapter .pacem-adapter-dashboard > li > pacem-button.pacem-adapter-page.pacem-adapter-active {
+            border: 1px solid;
+            border-top-color: var(--pacem-color-border-light);
+            border-bottom-color: var(--pacem-color-border-dark);
+            border-left-color: var(--pacem-color-border-dawn);
+            border-right: 0;
+            transform: translateX(1px);
+        }
+    }
+}
+
+pacem-tab::part(label) {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+.pacem-animations pacem-tabs pacem-tab {
+    transition: opacity .2s, transform .2s var(--pacem-easing-out-sine);
+}

package/src/ui/ticker.css

@@ -0,0 +1,105 @@
+pacem-ticker {
+    display: inline-grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    overflow: hidden;
+
+    &::part(ticker-outgoing),
+    &::part(ticker-incoming) {
+        grid-area: 1/1;
+    }
+
+    &::part(ticker-outgoing) {
+        transform: none;
+        z-index: 1;
+    }
+
+    &::part(ticker-incoming) {
+        transform: translateX(100%);
+        opacity: 0;
+        z-index: 0;
+    }
+
+    &.ticking {
+        &::part(ticker-outgoing) {
+            transform: translateX(-100%);
+            opacity: 0;
+        }
+
+        &::part(ticker-incoming) {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+
+    /* transitions in */
+    /* 1. bottom -> top */
+    &.ticker-bottom-in {
+        &::part(ticker-incoming) { transform: translateY(100%); }
+        &::part(ticker-outgoing) { transform: translateY(0); }
+
+        &.ticking {
+            &::part(ticker-incoming) { transform: translateY(0); }
+            /* default combo with top-out */
+            &::part(ticker-outgoing) { transform: translateY(-100%); }
+        }
+    }
+
+    /* 2. top -> bottom */
+    &.ticker-top-in {
+        &::part(ticker-incoming) { transform: translateY(-100%); }
+        &::part(ticker-outgoing) { transform: translateY(0); }
+
+        &.ticking {
+            &::part(ticker-incoming) { transform: translateY(0); }
+            /* default combo with bottom-out */
+            &::part(ticker-outgoing) { transform: translateY(100%); }
+        }
+    }
+
+    /* 3. left -> right */
+    &.ticker-left-in {
+        &::part(ticker-incoming) { transform: translateX(-100%); }
+        &::part(ticker-outgoing) { transform: translateX(0); }
+
+        &.ticking {
+            &::part(ticker-incoming) { transform: translateX(0); }
+            /* default combo with right-out */
+            &::part(ticker-outgoing) { transform: translateX(100%); }
+        }
+    }
+
+    /* 4. right -> left: default */
+
+    /* transitions out */
+    /* 1. -> top */
+    &.ticker-top-out {
+        &::part(ticker-outgoing) { transform: translateY(0); }
+        &.ticking::part(ticker-outgoing) { transform: translateY(-100%); }
+    }
+
+    /* 2. -> bottom */
+    &.ticker-bottom-out {
+        &::part(ticker-outgoing) { transform: translateY(0); }
+        &.ticking::part(ticker-outgoing) { transform: translateY(100%); }
+    }
+
+    /* 3. -> right */
+    &.ticker-right-out {
+        &::part(ticker-outgoing) { transform: translateX(0); }
+        &.ticking::part(ticker-outgoing) { transform: translateX(100%); }
+    }
+
+    /* 4. -> left */
+    &.ticker-left-out {
+        &::part(ticker-outgoing) { transform: translateX(0); }
+        &.ticking::part(ticker-outgoing) { transform: translateX(-100%); }
+    }
+}
+
+.pacem-animations pacem-ticker.ticking {
+    &::part(ticker-outgoing),
+    &::part(ticker-incoming) {
+        transition: all var(--pacem-easing-in-out-sine) .3s;
+    }
+}

package/src/ui/timeline.css

@@ -0,0 +1,106 @@
+/* Step icon: 1 grid spacing, plus a border of 1/6 on each side (--pacem--tl-sz).
+   Step colors: --pacem--tl, --pacem--tl-ink (.Coloring()).
+   The connector next to the icon was an SVG data uri with the color baked in: here the same SVG is a mask,
+   painted with the color. */
+.pacem-timeline {
+    display: block;
+
+    > .timeline-step {
+        --pacem--tl: var(--pacem-color-default);
+        --pacem--tl-ink: var(--pacem-color-default-inverse);
+        --pacem--tl-sz: calc(var(--pacem-grid-spacing) * 4 / 3);
+        display: grid;
+        grid-template-columns: auto 1fr;
+        grid-template-rows: auto 1fr;
+        grid-template-areas: 'icon content' 'pad content';
+        align-content: start;
+
+        > *,
+        > .step-content {
+            grid-area: content;
+        }
+
+        > .step-icon,
+        > .step-pad {
+            margin-right: var(--pacem-grid-spacing);
+        }
+
+        > .step-icon {
+            grid-area: icon;
+            box-sizing: border-box;
+            width: var(--pacem--tl-sz);
+            height: var(--pacem--tl-sz);
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: calc(var(--pacem-grid-spacing) / 1.5);
+            position: relative;
+            border: calc(var(--pacem-grid-spacing) / 6) solid;
+            color: var(--pacem--tl-ink);
+            border-color: var(--pacem--tl);
+            background-color: var(--pacem--tl);
+
+            &::after {
+                position: absolute;
+                top: 0;
+                left: calc(var(--pacem--tl-sz) - var(--pacem-grid-spacing) / 6);
+                content: '';
+                width: 24px;
+                height: 24px;
+                background-color: rgb(from var(--pacem-color-timeline-frame) r g b / 99%);
+                mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M0,12 H12' stroke='%23000' stroke-width='1'/%3E %3Ccircle fill='%23000' cx='12' cy='12' r='2'/%3E %3C/svg%3E");
+            }
+
+            :--shadows & {
+                box-shadow: 0 calc(var(--pacem-grid-spacing) / 3) var(--pacem-grid-spacing) rgba(0,0,0,0.5);
+            }
+
+            :--glows & {
+                background-origin: content-box;
+                box-shadow: inset 0 0 calc(var(--pacem-grid-spacing) / 6) #000, 0 0 var(--pacem-grid-spacing) rgb(from var(--pacem-color-timeline-frame) r g b / 50%);
+                border-color: rgb(from var(--pacem--tl) r g b / 50%);
+                background: radial-gradient(ellipse at center, rgb(from var(--pacem--tl) r g b / 25%) 50%, rgb(from var(--pacem--tl) r g b / 50%) 100%);
+
+                &::after {
+                    background-color: rgb(from var(--pacem-color-timeline-frame) r g b / 50%);
+                }
+            }
+
+            :--glows:--shadows & {
+                box-shadow: inset 0 0 calc(var(--pacem-grid-spacing) / 2) rgba(0,0,0,0.5), 0 calc(var(--pacem-grid-spacing) / 6) calc(var(--pacem-grid-spacing) / 3) rgba(0,0,0,0.5), 0 0 var(--pacem-grid-spacing) rgb(from var(--pacem-color-timeline-frame) r g b / 50%);
+            }
+        }
+
+        > .step-pad {
+            grid-area: pad;
+            width: calc(var(--pacem--tl-sz) * .5);
+        }
+
+        &:not(:last-child):not(.last-step) > .step-pad {
+            border-right: 1px solid var(--pacem-color-timeline-frame);
+
+            :--glows & {
+                border-right: 1px dashed rgb(from var(--pacem-color-timeline-frame) r g b / 50%);
+            }
+        }
+
+        > .pacem-panel > .panel-heading {
+            padding-top: 0;
+            padding-bottom: 0;
+            line-height: var(--pacem--tl-sz);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        /* coloring */
+        &.step-disabled { --pacem--tl: var(--pacem-color-disabled); --pacem--tl-ink: var(--pacem-color-disabled-inverse); }
+        &.step-success { --pacem--tl: var(--pacem-color-success); --pacem--tl-ink: var(--pacem-color-success-inverse); }
+        &.step-danger { --pacem--tl: var(--pacem-color-danger); --pacem--tl-ink: var(--pacem-color-danger-inverse); }
+        &.step-error { --pacem--tl: var(--pacem-color-error); --pacem--tl-ink: var(--pacem-color-danger-inverse); }
+        &.step-accent { --pacem--tl: var(--pacem-color-accent); --pacem--tl-ink: var(--pacem-color-accent-inverse); }
+        &.step-warning { --pacem--tl: var(--pacem-color-warning); --pacem--tl-ink: var(--pacem-color-warning-inverse); }
+        &.step-primary { --pacem--tl: var(--pacem-color-primary); --pacem--tl-ink: var(--pacem-color-primary-inverse); }
+    }
+}