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

package/src/scaffolding/formfield.css

@@ -0,0 +1,364 @@
+/* Form fields, first part of formfield.less (the responsive part is generated/formfield.css, the rest fieldset.css).
+   Measures: field padding (@_left, @_h) spacing * 5/6; readonly top offset .2 * field height / 1.5;
+   minimal label height: minimal font size * font size * 1.5625. */
+@custom-selector :--min .form-minimal > pacem-form-field:not(.field-full), pacem-form-field.field-minimal;
+@custom-selector :--nolabel .form-nolabels > pacem-form-field:not(.field-label), pacem-form-field.field-nolabel;
+
+@keyframes pacem-rotate-anim {
+    0% {
+        transform: rotate(0);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes pacem-autocomplete-anim {
+    0% {
+        opacity: 0;
+        transform: translateY(var(--pacem-grid-spacing));
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes pacem-label-before-anim {
+    0% {
+        transform: rotate(-180deg);
+    }
+
+    100% {
+        transform: rotate(0);
+    }
+}
+
+@keyframes pacem-label-before-anim-inline {
+    0% {
+        transform: rotate(-90deg);
+    }
+
+    100% {
+        transform: rotate(0);
+    }
+}
+
+pacem-form-field {
+    display: flex;
+    align-content: stretch;
+    align-items: stretch;
+
+    > pacem-form {
+        flex: 1 1 auto;
+    }
+}
+
+.pacem-field {
+    margin-bottom: calc(var(--pacem-grid-spacing) / 3);
+    z-index: 0;
+    padding: calc(var(--pacem-grid-spacing) / 3) 0 calc(var(--pacem-grid-spacing) * 5 / 6) 0;
+    border-radius: var(--pacem-border-field-radius);
+    transition: background linear .3s, border linear .3s;
+
+    > label.pacem-label {
+        position: relative;
+        padding-left: calc(var(--pacem-grid-spacing) * 5 / 6);
+        display: inline-block;
+        color: var(--pacem-color-field-label);
+        font-family: var(--pacem-font-main);
+        font-size: calc(1.05rem * var(--pacem-font-main-rem-factor));
+        /* (pacem-label-anim: empty keyframes, dropped by Less as well) */
+        animation: pacem-label-anim .25s ease-in-out both;
+        min-height: var(--pacem-field-height);
+
+        /* .LabelTopMargin() */
+        :--field-box & {
+            margin-top: calc(var(--pacem-grid-spacing) / 3 + .2 * (var(--pacem-field-height) / 1.5) + var(--pacem-border-field-size));
+        }
+
+        :--field-underline & {
+            margin-top: calc(var(--pacem-grid-spacing) / 3 + .2 * (var(--pacem-field-height) / 1.5));
+        }
+    }
+
+    .pacem-input-container {
+        padding: calc(var(--pacem-grid-spacing) / 3) calc(var(--pacem-grid-spacing) * 5 / 6) 0 calc(var(--pacem-grid-spacing) * 5 / 6);
+    }
+
+    .pacem-validators {
+        list-style-type: none;
+        color: var(--pacem-color-danger);
+        margin-top: var(--pacem-border-field-size);
+    }
+
+    img.pacem-readonly {
+        padding: 0;
+        border: calc(var(--pacem-grid-spacing) / 12) solid var(--pacem-color-default);
+        margin: calc(var(--pacem-grid-spacing) / 3) 0 calc(var(--pacem-grid-spacing) / 3) calc(var(--pacem-grid-spacing) * 5 / 6);
+    }
+
+    :is(.pacem-viewfinder, .pacem-input) {
+        transition: border-color .22s linear;
+    }
+
+    /* (childforms break the rule) */
+    &.pacem-invalid {
+        > .pacem-input-container > :not(pacem-childform) :is(.pacem-viewfinder, .pacem-input),
+        > .pacem-input-container.pacem-fieldgroup > :is(.fieldgroup-prepend, .fieldgroup-append) {
+            border-color: rgb(from var(--pacem-color-error) r g b / 20%);
+        }
+
+        &.pacem-dirty > .pacem-input-container > :not(pacem-childform) :is(.pacem-viewfinder, .pacem-input),
+        &.pacem-dirty > .pacem-input-container.pacem-fieldgroup > :is(.fieldgroup-prepend, .fieldgroup-append) {
+            border-color: var(--pacem-color-error);
+        }
+
+        :--field-outline & > .pacem-input-container > .pacem-focus:not(pacem-childform) :is(.pacem-viewfinder, .pacem-input) {
+            box-shadow: 0 0 0 var(--pacem-field-outline-width) rgb(from var(--pacem-color-error) r g b / 40%);
+        }
+    }
+
+    &.pacem-has-value.pacem-valid {
+        &.pacem-dirty > .pacem-input-container > :not(pacem-childform) :is(.pacem-viewfinder, .pacem-input),
+        &.pacem-dirty > .pacem-input-container.pacem-fieldgroup > :is(.fieldgroup-prepend, .fieldgroup-append) {
+            border-color: rgb(from var(--pacem-color-success) r g b / 100%);
+        }
+
+        &.pacem-pristine > .pacem-input-container > :not(pacem-childform) :is(.pacem-viewfinder, .pacem-input),
+        &.pacem-pristine > .pacem-input-container.pacem-fieldgroup > :is(.fieldgroup-prepend, .fieldgroup-append) {
+            border-color: rgb(from var(--pacem-color-success) r g b / 40%);
+        }
+
+        :--field-outline & > .pacem-input-container > .pacem-focus:not(pacem-childform) :is(.pacem-viewfinder, .pacem-input) {
+            box-shadow: 0 0 0 var(--pacem-field-outline-width) rgb(from var(--pacem-color-success) r g b / 40%);
+        }
+    }
+}
+
+/* lazy validation */
+:--field-outline .lazy-validation > pacem-form-field > .pacem-field.pacem-pristine :is(.pacem-viewfinder, .pacem-input) {
+    box-shadow: 0 0 0 var(--pacem-field-outline-width) var(--pacem-color-field-outline);
+}
+
+.lazy-validation > pacem-form-field > .pacem-field.pacem-pristine :is(.pacem-viewfinder, .pacem-input) {
+    border-color: var(--pacem-color-border);
+}
+
+/* forced outline (where fields have no outline of their own) */
+:--no-field-outline pacem-form-field.field-outline .pacem-field {
+    > .pacem-input-container > .pacem-focus:not(pacem-childform) :is(.pacem-viewfinder, .pacem-input) {
+        box-shadow: 0 0 0 2px var(--pacem-color-field-outline);
+    }
+
+    &.pacem-invalid > .pacem-input-container > .pacem-focus:not(pacem-childform) :is(.pacem-viewfinder, .pacem-input) {
+        box-shadow: 0 0 0 2px rgb(from var(--pacem-color-error) r g b / 40%);
+    }
+
+    &.pacem-has-value.pacem-valid > .pacem-input-container > .pacem-focus:not(pacem-childform) :is(.pacem-viewfinder, .pacem-input) {
+        box-shadow: 0 0 0 2px rgb(from var(--pacem-color-success) r g b / 40%);
+    }
+}
+
+:--no-field-outline .lazy-validation > pacem-form-field.field-outline .pacem-field:is(.pacem-valid, .pacem-invalid).pacem-pristine > .pacem-input-container > .pacem-focus:not(pacem-childform) :is(.pacem-viewfinder, .pacem-input) {
+    box-shadow: 0 0 0 2px var(--pacem-color-field-outline);
+}
+
+:--field-box .pacem-field {
+    border: var(--pacem-border-field-size) solid transparent;
+}
+
+:--field-underline .pacem-field {
+    border-bottom: var(--pacem-border-field-size) solid transparent;
+}
+
+/* .FieldInline() (and generated/formfield.css) */
+pacem-form-field.field-inline > .pacem-field {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: flex-start;
+    align-content: stretch;
+
+    > label.pacem-label {
+        flex: 0 0 calc(var(--pacem-grid-spacing) * 4);
+    }
+
+    > .pacem-input-container {
+        flex: 1 1 auto;
+    }
+
+    &.pacem-editable > label.pacem-label::before {
+        /* .Icon(): icons.css */
+        content: 'keyboard_arrow_right';
+        font-size: calc(var(--pacem-grid-spacing) / 1.5);
+        top: 3px;
+        left: 3px;
+        animation: pacem-label-before-anim-inline .3s ease-in .5s both;
+    }
+
+    &.pacem-readonly {
+        > label.pacem-label {
+            flex-basis: calc(var(--pacem-grid-spacing) * 5);
+            margin-left: 0;
+        }
+
+        :--field-box & > .pacem-input-container {
+            margin-top: calc(.2 * (var(--pacem-field-height) / 1.5) + var(--pacem-border-field-size));
+        }
+
+        :--field-underline & > .pacem-input-container {
+            margin-top: calc(.2 * (var(--pacem-field-height) / 1.5));
+        }
+    }
+}
+
+pacem-form-field.field-center > .pacem-field > .pacem-input-container {
+    text-align: center;
+}
+
+.pacem-field.pacem-editable {
+    &:not(.pacem-has-value) select.pacem-select:not(:focus) {
+        color: var(--pacem-color-watermark);
+        font-style: italic;
+        font-family: var(--pacem-font-std);
+    }
+
+    div[contenteditable][pacem]:focus,
+    .pacem-input:focus,
+    .pacem-input:focus + label,
+    select.pacem-select:focus {
+        color: var(--pacem-color-input-fore-focus);
+    }
+}
+
+.pacem-animations .pacem-field {
+    div[contenteditable][pacem]:focus,
+    .pacem-input:focus,
+    .pacem-input:focus + label,
+    select.pacem-select:focus {
+        transition: color .2s;
+    }
+}
+
+.pacem-input-container .pacem-latlng .pacem-latlng-fields[hidden] {
+    display: none !important;
+}
+
+/* editable vs readonly */
+.pacem-field.pacem-editable {
+    background-color: var(--pacem-color-field-back);
+    border-color: transparent;
+
+    > label.pacem-label {
+        margin-left: calc(var(--pacem-grid-spacing) * 5 / 6);
+
+        &::before {
+            /* .Icon(): icons.css */
+            content: 'keyboard_arrow_down';
+            font-size: calc(var(--pacem-grid-spacing) / 1.5);
+            position: absolute;
+            top: calc(var(--pacem-grid-spacing) * 5 / 6 * .1);
+            left: 0;
+            display: block;
+            width: calc(var(--pacem-grid-spacing) * 5 / 6 * .8);
+            height: calc(var(--pacem-grid-spacing) * 5 / 6 * .8);
+            animation: pacem-label-before-anim .3s ease-in .5s both;
+        }
+    }
+}
+
+.pacem-form .pacem-buttonset.buttons {
+    padding-top: 0;
+}
+
+/* fetching */
+.pacem-field.pacem-editable.pacem-fetching label.pacem-label::before {
+    /* .Icon(): icons.css */
+    content: 'refresh';
+    font-size: calc(var(--pacem-grid-spacing) / 1.5);
+    animation: pacem-rotate-anim .67s linear infinite;
+}
+
+/* #region "minimal" aspect */
+:--min > pacem-form.pacem-field {
+    background-color: transparent;
+    box-shadow: none;
+    border: 0;
+    margin: 0;
+    padding-top: 0;
+    padding-bottom: calc(var(--pacem-grid-spacing) / 3);
+}
+
+:--min > pacem-form.pacem-field > label.pacem-label {
+    margin: 0;
+    font-size: calc(1rem * var(--pacem-field-minimal-fontsize) * var(--pacem-font-main-rem-factor));
+    min-height: 0;
+    height: calc(var(--pacem-field-minimal-fontsize) * var(--pacem-font-size) * 1.5625);
+    line-height: calc(var(--pacem-field-minimal-fontsize) * var(--pacem-font-size) * 1.5625);
+}
+
+:--min > pacem-form.pacem-field.pacem-editable > label.pacem-label::after {
+    display: none;
+}
+
+:--min > pacem-form.pacem-field.pacem-readonly > label.pacem-label {
+    padding-left: 0;
+}
+
+:--min > pacem-form.pacem-field.pacem-editable > label.pacem-label:not(.pacem-tooltip) {
+    padding-left: 0;
+}
+
+:--min > pacem-form.pacem-field.pacem-editable > label.pacem-label:not(.pacem-tooltip)::before {
+    display: none;
+}
+
+:--min > pacem-form.pacem-field > .pacem-input-container {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+:--min > pacem-form.pacem-field.pacem-readonly > .pacem-input-container .pacem-readonly:not(pacem-childform) .pacem-readonly {
+    display: flex;
+    align-items: center;
+}
+
+:--min > pacem-form.pacem-field.pacem-readonly > .pacem-input-container > pacem-childform.pacem-readonly pacem-form.pacem-readonly,
+:--min > pacem-form.pacem-field.pacem-readonly > .pacem-input-container > pacem-childform.pacem-readonly pacem-childform.pacem-readonly {
+    display: block;
+}
+
+:--min > pacem-form.pacem-field.pacem-readonly > .pacem-input-container .pacem-readonly::before {
+    line-height: var(--pacem-field-height);
+}
+
+:--min > pacem-form.pacem-field.pacem-editable.pacem-fetching label.pacem-label::after {
+    /* .Icon(): icons.css */
+    content: 'refresh';
+    font-size: calc(var(--pacem-grid-spacing) / 1.5);
+    animation: pacem-rotate-anim .67s linear infinite;
+}
+/* #endregion */
+
+/* no label */
+:--nolabel > .pacem-field > label.pacem-label {
+    display: none;
+}
+
+:--nolabel > .pacem-field > .pacem-input-container {
+    padding-top: 0;
+}
+
+/* stretch */
+@media (--pacem-lg) {
+    pacem-form-field.field-stretch :is(pacem-input-text, pacem-input-password, pacem-input-tel, pacem-input-url, pacem-input-email,
+        pacem-input-search, pacem-suggest, pacem-select, pacem-checkbox, pacem-radio, pacem-checkbox-list, pacem-radio-list,
+        pacem-textarea, pacem-textarea-markdown, pacem-datetime-picker, pacem-calendar-picker, pacem-upload, pacem-tags,
+        pacem-latlng, pacem-input-number) {
+        min-width: 0;
+        max-width: none;
+        display: block;
+    }
+}

package/src/scaffolding/generated/calendar-picker.css

@@ -0,0 +1,40 @@
+/* Generated by theme/css/tools/generate.ts: do not edit, edit the generator instead. */
+.pacem-calendar-picker-dropdown .dropdown-grid {
+    > .calendar-header > .calendar-heading {
+        &.day-1 { grid-column: 1; }
+        &.day-2 { grid-column: 2; }
+        &.day-3 { grid-column: 3; }
+        &.day-4 { grid-column: 4; }
+        &.day-5 { grid-column: 5; }
+        &.day-6 { grid-column: 6; }
+        &.day-7 { grid-column: 7; }
+    }
+    > pacem-calendar-month-picker .pacem-month-picker > .calendar-month {
+        &.month-1 { grid-column: 1; grid-row: 1; }
+        &.month-2 { grid-column: 2; grid-row: 1; }
+        &.month-3 { grid-column: 3; grid-row: 1; }
+        &.month-4 { grid-column: 4; grid-row: 1; }
+        &.month-5 { grid-column: 1; grid-row: 2; }
+        &.month-6 { grid-column: 2; grid-row: 2; }
+        &.month-7 { grid-column: 3; grid-row: 2; }
+        &.month-8 { grid-column: 4; grid-row: 2; }
+        &.month-9 { grid-column: 1; grid-row: 3; }
+        &.month-10 { grid-column: 2; grid-row: 3; }
+        &.month-11 { grid-column: 3; grid-row: 3; }
+        &.month-12 { grid-column: 4; grid-row: 3; }
+    }
+    > pacem-calendar-year-picker .pacem-year-picker > .calendar-year {
+        &.year-1 { grid-column: 1; grid-row: 1; }
+        &.year-2 { grid-column: 2; grid-row: 1; }
+        &.year-3 { grid-column: 3; grid-row: 1; }
+        &.year-4 { grid-column: 4; grid-row: 1; }
+        &.year-5 { grid-column: 1; grid-row: 2; }
+        &.year-6 { grid-column: 2; grid-row: 2; }
+        &.year-7 { grid-column: 3; grid-row: 2; }
+        &.year-8 { grid-column: 4; grid-row: 2; }
+        &.year-9 { grid-column: 1; grid-row: 3; }
+        &.year-10 { grid-column: 2; grid-row: 3; }
+        &.year-11 { grid-column: 3; grid-row: 3; }
+        &.year-12 { grid-column: 4; grid-row: 3; }
+    }
+}

package/src/scaffolding/generated/colors.css

@@ -0,0 +1,115 @@
+/* Generated by theme/css/tools/generate.ts: do not edit, edit the generator instead. */
+/* checkbox.css */
+pacem-checkbox.checkbox-root { --pacem--chk: var(--pacem-color-root); --pacem--chk-ink: var(--pacem-color-root-inverse); }
+pacem-checkbox.checkbox-background { --pacem--chk: var(--pacem-color-background); --pacem--chk-ink: var(--pacem-color-background-inverse); }
+pacem-checkbox.checkbox-default { --pacem--chk: var(--pacem-color-default); --pacem--chk-ink: var(--pacem-color-default-inverse); }
+pacem-checkbox.checkbox-invert { --pacem--chk: var(--pacem-color-invert); --pacem--chk-ink: var(--pacem-color-invert-inverse); }
+pacem-checkbox.checkbox-primary { --pacem--chk: var(--pacem-color-primary); --pacem--chk-ink: var(--pacem-color-primary-inverse); }
+pacem-checkbox.checkbox-secondary { --pacem--chk: var(--pacem-color-secondary); --pacem--chk-ink: var(--pacem-color-secondary-inverse); }
+pacem-checkbox.checkbox-accent { --pacem--chk: var(--pacem-color-accent); --pacem--chk-ink: var(--pacem-color-accent-inverse); }
+pacem-checkbox.checkbox-info { --pacem--chk: var(--pacem-color-info); --pacem--chk-ink: var(--pacem-color-info-inverse); }
+pacem-checkbox.checkbox-success { --pacem--chk: var(--pacem-color-success); --pacem--chk-ink: var(--pacem-color-success-inverse); }
+pacem-checkbox.checkbox-warning { --pacem--chk: var(--pacem-color-warning); --pacem--chk-ink: var(--pacem-color-warning-inverse); }
+pacem-checkbox.checkbox-danger { --pacem--chk: var(--pacem-color-danger); --pacem--chk-ink: var(--pacem-color-danger-inverse); }
+pacem-checkbox.checkbox-error { --pacem--chk: var(--pacem-color-error); --pacem--chk-ink: var(--pacem-color-error-inverse); }
+pacem-checkbox.checkbox-disabled { --pacem--chk: var(--pacem-color-disabled); --pacem--chk-ink: var(--pacem-color-disabled-inverse); }
+pacem-checkbox.checkbox-green { --pacem--chk: var(--pacem-color-green); --pacem--chk-ink: var(--pacem-color-green-inverse); }
+pacem-checkbox.checkbox-yellow { --pacem--chk: var(--pacem-color-yellow); --pacem--chk-ink: var(--pacem-color-yellow-inverse); }
+pacem-checkbox.checkbox-brown { --pacem--chk: var(--pacem-color-brown); --pacem--chk-ink: var(--pacem-color-brown-inverse); }
+pacem-checkbox.checkbox-red { --pacem--chk: var(--pacem-color-red); --pacem--chk-ink: var(--pacem-color-red-inverse); }
+pacem-checkbox.checkbox-pink { --pacem--chk: var(--pacem-color-pink); --pacem--chk-ink: var(--pacem-color-pink-inverse); }
+pacem-checkbox.checkbox-blue { --pacem--chk: var(--pacem-color-blue); --pacem--chk-ink: var(--pacem-color-blue-inverse); }
+pacem-checkbox.checkbox-orange { --pacem--chk: var(--pacem-color-orange); --pacem--chk-ink: var(--pacem-color-orange-inverse); }
+pacem-checkbox.checkbox-purple { --pacem--chk: var(--pacem-color-purple); --pacem--chk-ink: var(--pacem-color-purple-inverse); }
+pacem-checkbox.checkbox-teal { --pacem--chk: var(--pacem-color-teal); --pacem--chk-ink: var(--pacem-color-teal-inverse); }
+pacem-checkbox.checkbox-gray { --pacem--chk: var(--pacem-color-gray); --pacem--chk-ink: var(--pacem-color-gray-inverse); }
+
+pacem-form-field.switcher-root { --pacem--switcher: var(--pacem-color-root); --pacem--switcher-ink: var(--pacem-color-root-inverse); }
+pacem-form-field.switcher-background { --pacem--switcher: var(--pacem-color-background); --pacem--switcher-ink: var(--pacem-color-background-inverse); }
+pacem-form-field.switcher-default { --pacem--switcher: var(--pacem-color-default); --pacem--switcher-ink: var(--pacem-color-default-inverse); }
+pacem-form-field.switcher-invert { --pacem--switcher: var(--pacem-color-invert); --pacem--switcher-ink: var(--pacem-color-invert-inverse); }
+pacem-form-field.switcher-primary { --pacem--switcher: var(--pacem-color-primary); --pacem--switcher-ink: var(--pacem-color-primary-inverse); }
+pacem-form-field.switcher-secondary { --pacem--switcher: var(--pacem-color-secondary); --pacem--switcher-ink: var(--pacem-color-secondary-inverse); }
+pacem-form-field.switcher-accent { --pacem--switcher: var(--pacem-color-accent); --pacem--switcher-ink: var(--pacem-color-accent-inverse); }
+pacem-form-field.switcher-info { --pacem--switcher: var(--pacem-color-info); --pacem--switcher-ink: var(--pacem-color-info-inverse); }
+pacem-form-field.switcher-success { --pacem--switcher: var(--pacem-color-success); --pacem--switcher-ink: var(--pacem-color-success-inverse); }
+pacem-form-field.switcher-warning { --pacem--switcher: var(--pacem-color-warning); --pacem--switcher-ink: var(--pacem-color-warning-inverse); }
+pacem-form-field.switcher-danger { --pacem--switcher: var(--pacem-color-danger); --pacem--switcher-ink: var(--pacem-color-danger-inverse); }
+pacem-form-field.switcher-error { --pacem--switcher: var(--pacem-color-error); --pacem--switcher-ink: var(--pacem-color-error-inverse); }
+pacem-form-field.switcher-disabled { --pacem--switcher: var(--pacem-color-disabled); --pacem--switcher-ink: var(--pacem-color-disabled-inverse); }
+pacem-form-field.switcher-green { --pacem--switcher: var(--pacem-color-green); --pacem--switcher-ink: var(--pacem-color-green-inverse); }
+pacem-form-field.switcher-yellow { --pacem--switcher: var(--pacem-color-yellow); --pacem--switcher-ink: var(--pacem-color-yellow-inverse); }
+pacem-form-field.switcher-brown { --pacem--switcher: var(--pacem-color-brown); --pacem--switcher-ink: var(--pacem-color-brown-inverse); }
+pacem-form-field.switcher-red { --pacem--switcher: var(--pacem-color-red); --pacem--switcher-ink: var(--pacem-color-red-inverse); }
+pacem-form-field.switcher-pink { --pacem--switcher: var(--pacem-color-pink); --pacem--switcher-ink: var(--pacem-color-pink-inverse); }
+pacem-form-field.switcher-blue { --pacem--switcher: var(--pacem-color-blue); --pacem--switcher-ink: var(--pacem-color-blue-inverse); }
+pacem-form-field.switcher-orange { --pacem--switcher: var(--pacem-color-orange); --pacem--switcher-ink: var(--pacem-color-orange-inverse); }
+pacem-form-field.switcher-purple { --pacem--switcher: var(--pacem-color-purple); --pacem--switcher-ink: var(--pacem-color-purple-inverse); }
+pacem-form-field.switcher-teal { --pacem--switcher: var(--pacem-color-teal); --pacem--switcher-ink: var(--pacem-color-teal-inverse); }
+pacem-form-field.switcher-gray { --pacem--switcher: var(--pacem-color-gray); --pacem--switcher-ink: var(--pacem-color-gray-inverse); }
+
+/* slider.css */
+pacem-slider.slider-root { --pacem--slider: var(--pacem-color-root); }
+pacem-slider.slider-background { --pacem--slider: var(--pacem-color-background); }
+pacem-slider.slider-default { --pacem--slider: var(--pacem-color-default); }
+pacem-slider.slider-invert { --pacem--slider: var(--pacem-color-invert); }
+pacem-slider.slider-primary { --pacem--slider: var(--pacem-color-primary); }
+pacem-slider.slider-secondary { --pacem--slider: var(--pacem-color-secondary); }
+pacem-slider.slider-accent { --pacem--slider: var(--pacem-color-accent); }
+pacem-slider.slider-info { --pacem--slider: var(--pacem-color-info); }
+pacem-slider.slider-success { --pacem--slider: var(--pacem-color-success); }
+pacem-slider.slider-warning { --pacem--slider: var(--pacem-color-warning); }
+pacem-slider.slider-danger { --pacem--slider: var(--pacem-color-danger); }
+pacem-slider.slider-error { --pacem--slider: var(--pacem-color-error); }
+pacem-slider.slider-disabled { --pacem--slider: var(--pacem-color-disabled); }
+pacem-slider.slider-green { --pacem--slider: var(--pacem-color-green); }
+pacem-slider.slider-yellow { --pacem--slider: var(--pacem-color-yellow); }
+pacem-slider.slider-brown { --pacem--slider: var(--pacem-color-brown); }
+pacem-slider.slider-red { --pacem--slider: var(--pacem-color-red); }
+pacem-slider.slider-pink { --pacem--slider: var(--pacem-color-pink); }
+pacem-slider.slider-blue { --pacem--slider: var(--pacem-color-blue); }
+pacem-slider.slider-orange { --pacem--slider: var(--pacem-color-orange); }
+pacem-slider.slider-purple { --pacem--slider: var(--pacem-color-purple); }
+pacem-slider.slider-teal { --pacem--slider: var(--pacem-color-teal); }
+pacem-slider.slider-gray { --pacem--slider: var(--pacem-color-gray); }
+
+pacem-form-field.slider-root { --pacem--slider-field: var(--pacem-color-root); }
+pacem-form-field.slider-background { --pacem--slider-field: var(--pacem-color-background); }
+pacem-form-field.slider-default { --pacem--slider-field: var(--pacem-color-default); }
+pacem-form-field.slider-invert { --pacem--slider-field: var(--pacem-color-invert); }
+pacem-form-field.slider-primary { --pacem--slider-field: var(--pacem-color-primary); }
+pacem-form-field.slider-secondary { --pacem--slider-field: var(--pacem-color-secondary); }
+pacem-form-field.slider-accent { --pacem--slider-field: var(--pacem-color-accent); }
+pacem-form-field.slider-info { --pacem--slider-field: var(--pacem-color-info); }
+pacem-form-field.slider-success { --pacem--slider-field: var(--pacem-color-success); }
+pacem-form-field.slider-warning { --pacem--slider-field: var(--pacem-color-warning); }
+pacem-form-field.slider-danger { --pacem--slider-field: var(--pacem-color-danger); }
+pacem-form-field.slider-error { --pacem--slider-field: var(--pacem-color-error); }
+pacem-form-field.slider-disabled { --pacem--slider-field: var(--pacem-color-disabled); }
+pacem-form-field.slider-green { --pacem--slider-field: var(--pacem-color-green); }
+pacem-form-field.slider-yellow { --pacem--slider-field: var(--pacem-color-yellow); }
+pacem-form-field.slider-brown { --pacem--slider-field: var(--pacem-color-brown); }
+pacem-form-field.slider-red { --pacem--slider-field: var(--pacem-color-red); }
+pacem-form-field.slider-pink { --pacem--slider-field: var(--pacem-color-pink); }
+pacem-form-field.slider-blue { --pacem--slider-field: var(--pacem-color-blue); }
+pacem-form-field.slider-orange { --pacem--slider-field: var(--pacem-color-orange); }
+pacem-form-field.slider-purple { --pacem--slider-field: var(--pacem-color-purple); }
+pacem-form-field.slider-teal { --pacem--slider-field: var(--pacem-color-teal); }
+pacem-form-field.slider-gray { --pacem--slider-field: var(--pacem-color-gray); }
+
+/* childform.css */
+pacem-childform.childform-accent { --pacem--cf: var(--pacem-color-accent); --pacem--cf-ink: var(--pacem-color-accent-inverse); }
+pacem-childform.childform-primary { --pacem--cf: var(--pacem-color-primary); --pacem--cf-ink: var(--pacem-color-primary-inverse); }
+pacem-childform.childform-success { --pacem--cf: var(--pacem-color-success); --pacem--cf-ink: var(--pacem-color-success-inverse); }
+pacem-childform.childform-danger { --pacem--cf: var(--pacem-color-danger); --pacem--cf-ink: var(--pacem-color-danger-inverse); }
+pacem-childform.childform-error { --pacem--cf: var(--pacem-color-error); --pacem--cf-ink: var(--pacem-color-error-inverse); }
+pacem-childform.childform-warning { --pacem--cf: var(--pacem-color-warning); --pacem--cf-ink: var(--pacem-color-warning-inverse); }
+pacem-childform.childform-disabled { --pacem--cf: var(--pacem-color-disabled); --pacem--cf-ink: var(--pacem-color-default); }
+
+pacem-form-field.childform-accent { --pacem--cf-field: var(--pacem-color-accent); --pacem--cf-field-ink: var(--pacem-color-accent-inverse); }
+pacem-form-field.childform-primary { --pacem--cf-field: var(--pacem-color-primary); --pacem--cf-field-ink: var(--pacem-color-primary-inverse); }
+pacem-form-field.childform-success { --pacem--cf-field: var(--pacem-color-success); --pacem--cf-field-ink: var(--pacem-color-success-inverse); }
+pacem-form-field.childform-danger { --pacem--cf-field: var(--pacem-color-danger); --pacem--cf-field-ink: var(--pacem-color-danger-inverse); }
+pacem-form-field.childform-error { --pacem--cf-field: var(--pacem-color-error); --pacem--cf-field-ink: var(--pacem-color-error-inverse); }
+pacem-form-field.childform-warning { --pacem--cf-field: var(--pacem-color-warning); --pacem--cf-field-ink: var(--pacem-color-warning-inverse); }
+pacem-form-field.childform-disabled { --pacem--cf-field: var(--pacem-color-disabled); --pacem--cf-field-ink: var(--pacem-color-default); }