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

package/src/ui/generated/calendar.css

@@ -0,0 +1,363 @@
+/* Generated by theme/css/tools/generate.ts: do not edit, edit the generator instead. */
+pacem-calendar .pacem-calendar.calendar-grid {
+    .calendar-day {
+        &.week-1 { grid-row: 1; }
+        &.week-2 { grid-row: 2; }
+        &.week-3 { grid-row: 3; }
+        &.week-4 { grid-row: 4; }
+        &.week-5 { grid-row: 5; }
+        &.week-6 { grid-row: 6; }
+        &.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; }
+    }
+    .calendar-week .calendar-event {
+        &.day-start-1 { grid-column-start: 1; }
+        &.day-start-2 { grid-column-start: 2; }
+        &.day-start-3 { grid-column-start: 3; }
+        &.day-start-4 { grid-column-start: 4; }
+        &.day-start-5 { grid-column-start: 5; }
+        &.day-start-6 { grid-column-start: 6; }
+        &.day-start-7 { grid-column-start: 7; }
+        &.day-end-2 { grid-column-end: 2; }
+        &.day-end-3 { grid-column-end: 3; }
+        &.day-end-4 { grid-column-end: 4; }
+        &.day-end-5 { grid-column-end: 5; }
+        &.day-end-6 { grid-column-end: 6; }
+        &.day-end-7 { grid-column-end: 7; }
+        &.day-end-8 { grid-column-end: 8; }
+    }
+}
+
+pacem-agenda .pacem-agenda.agenda-grid {
+    .agenda-slot {
+        &.hour-1 { grid-row: 2; }
+        &.hour-2 { grid-row: 3; }
+        &.hour-3 { grid-row: 4; }
+        &.hour-4 { grid-row: 5; }
+        &.hour-5 { grid-row: 6; }
+        &.hour-6 { grid-row: 7; }
+        &.hour-7 { grid-row: 8; }
+        &.hour-8 { grid-row: 9; }
+        &.hour-9 { grid-row: 10; }
+        &.hour-10 { grid-row: 11; }
+        &.hour-11 { grid-row: 12; }
+        &.hour-12 { grid-row: 13; }
+        &.hour-13 { grid-row: 14; }
+        &.hour-14 { grid-row: 15; }
+        &.hour-15 { grid-row: 16; }
+        &.hour-16 { grid-row: 17; }
+        &.hour-17 { grid-row: 18; }
+        &.hour-18 { grid-row: 19; }
+        &.hour-19 { grid-row: 20; }
+        &.hour-20 { grid-row: 21; }
+        &.hour-21 { grid-row: 22; }
+        &.hour-22 { grid-row: 23; }
+        &.hour-23 { grid-row: 24; }
+        &.hour-24 { grid-row: 25; }
+        &.hour-25 { grid-row: 26; }
+        &.hour-26 { grid-row: 27; }
+        &.hour-27 { grid-row: 28; }
+        &.hour-28 { grid-row: 29; }
+        &.hour-29 { grid-row: 30; }
+        &.hour-30 { grid-row: 31; }
+        &.hour-31 { grid-row: 32; }
+        &.hour-32 { grid-row: 33; }
+        &.hour-33 { grid-row: 34; }
+        &.hour-34 { grid-row: 35; }
+        &.hour-35 { grid-row: 36; }
+        &.hour-36 { grid-row: 37; }
+        &.hour-37 { grid-row: 38; }
+        &.hour-38 { grid-row: 39; }
+        &.hour-39 { grid-row: 40; }
+        &.hour-40 { grid-row: 41; }
+        &.hour-41 { grid-row: 42; }
+        &.hour-42 { grid-row: 43; }
+        &.hour-43 { grid-row: 44; }
+        &.hour-44 { grid-row: 45; }
+        &.hour-45 { grid-row: 46; }
+        &.hour-46 { grid-row: 47; }
+        &.hour-47 { grid-row: 48; }
+        &.hour-48 { grid-row: 49; }
+        &.day-1 { grid-column: 2; }
+        &.day-2 { grid-column: 3; }
+        &.day-3 { grid-column: 4; }
+        &.day-4 { grid-column: 5; }
+        &.day-5 { grid-column: 6; }
+        &.day-6 { grid-column: 7; }
+        &.day-7 { grid-column: 8; }
+    }
+    .agenda-left {
+        &.hour-1 { grid-row: 2; }
+        &.hour-2 { grid-row: 3; }
+        &.hour-3 { grid-row: 4; }
+        &.hour-4 { grid-row: 5; }
+        &.hour-5 { grid-row: 6; }
+        &.hour-6 { grid-row: 7; }
+        &.hour-7 { grid-row: 8; }
+        &.hour-8 { grid-row: 9; }
+        &.hour-9 { grid-row: 10; }
+        &.hour-10 { grid-row: 11; }
+        &.hour-11 { grid-row: 12; }
+        &.hour-12 { grid-row: 13; }
+        &.hour-13 { grid-row: 14; }
+        &.hour-14 { grid-row: 15; }
+        &.hour-15 { grid-row: 16; }
+        &.hour-16 { grid-row: 17; }
+        &.hour-17 { grid-row: 18; }
+        &.hour-18 { grid-row: 19; }
+        &.hour-19 { grid-row: 20; }
+        &.hour-20 { grid-row: 21; }
+        &.hour-21 { grid-row: 22; }
+        &.hour-22 { grid-row: 23; }
+        &.hour-23 { grid-row: 24; }
+        &.hour-24 { grid-row: 25; }
+        &.hour-25 { grid-row: 26; }
+        &.hour-26 { grid-row: 27; }
+        &.hour-27 { grid-row: 28; }
+        &.hour-28 { grid-row: 29; }
+        &.hour-29 { grid-row: 30; }
+        &.hour-30 { grid-row: 31; }
+        &.hour-31 { grid-row: 32; }
+        &.hour-32 { grid-row: 33; }
+        &.hour-33 { grid-row: 34; }
+        &.hour-34 { grid-row: 35; }
+        &.hour-35 { grid-row: 36; }
+        &.hour-36 { grid-row: 37; }
+        &.hour-37 { grid-row: 38; }
+        &.hour-38 { grid-row: 39; }
+        &.hour-39 { grid-row: 40; }
+        &.hour-40 { grid-row: 41; }
+        &.hour-41 { grid-row: 42; }
+        &.hour-42 { grid-row: 43; }
+        &.hour-43 { grid-row: 44; }
+        &.hour-44 { grid-row: 45; }
+        &.hour-45 { grid-row: 46; }
+        &.hour-46 { grid-row: 47; }
+        &.hour-47 { grid-row: 48; }
+        &.hour-48 { grid-row: 49; }
+    }
+    .all-day {
+        &.day-1 { grid-column: 2; }
+        &.day-2 { grid-column: 3; }
+        &.day-3 { grid-column: 4; }
+        &.day-4 { grid-column: 5; }
+        &.day-5 { grid-column: 6; }
+        &.day-6 { grid-column: 7; }
+        &.day-7 { grid-column: 8; }
+    }
+    pacem-clock {
+        &.hour-0 { grid-row: 2; }
+        &.hour-1 { grid-row: 4; }
+        &.hour-2 { grid-row: 6; }
+        &.hour-3 { grid-row: 8; }
+        &.hour-4 { grid-row: 10; }
+        &.hour-5 { grid-row: 12; }
+        &.hour-6 { grid-row: 14; }
+        &.hour-7 { grid-row: 16; }
+        &.hour-8 { grid-row: 18; }
+        &.hour-9 { grid-row: 20; }
+        &.hour-10 { grid-row: 22; }
+        &.hour-11 { grid-row: 24; }
+        &.hour-12 { grid-row: 26; }
+        &.hour-13 { grid-row: 28; }
+        &.hour-14 { grid-row: 30; }
+        &.hour-15 { grid-row: 32; }
+        &.hour-16 { grid-row: 34; }
+        &.hour-17 { grid-row: 36; }
+        &.hour-18 { grid-row: 38; }
+        &.hour-19 { grid-row: 40; }
+        &.hour-20 { grid-row: 42; }
+        &.hour-21 { grid-row: 44; }
+        &.hour-22 { grid-row: 46; }
+        &.hour-23 { grid-row: 48; }
+        &.minute-0 { --pacem--min: 0; }
+        &.minute-1 { --pacem--min: 1; }
+        &.minute-2 { --pacem--min: 2; }
+        &.minute-3 { --pacem--min: 3; }
+        &.minute-4 { --pacem--min: 4; }
+        &.minute-5 { --pacem--min: 5; }
+        &.minute-6 { --pacem--min: 6; }
+        &.minute-7 { --pacem--min: 7; }
+        &.minute-8 { --pacem--min: 8; }
+        &.minute-9 { --pacem--min: 9; }
+        &.minute-10 { --pacem--min: 10; }
+        &.minute-11 { --pacem--min: 11; }
+        &.minute-12 { --pacem--min: 12; }
+        &.minute-13 { --pacem--min: 13; }
+        &.minute-14 { --pacem--min: 14; }
+        &.minute-15 { --pacem--min: 15; }
+        &.minute-16 { --pacem--min: 16; }
+        &.minute-17 { --pacem--min: 17; }
+        &.minute-18 { --pacem--min: 18; }
+        &.minute-19 { --pacem--min: 19; }
+        &.minute-20 { --pacem--min: 20; }
+        &.minute-21 { --pacem--min: 21; }
+        &.minute-22 { --pacem--min: 22; }
+        &.minute-23 { --pacem--min: 23; }
+        &.minute-24 { --pacem--min: 24; }
+        &.minute-25 { --pacem--min: 25; }
+        &.minute-26 { --pacem--min: 26; }
+        &.minute-27 { --pacem--min: 27; }
+        &.minute-28 { --pacem--min: 28; }
+        &.minute-29 { --pacem--min: 29; }
+        &.minute-30 { --pacem--min: 30; }
+        &.minute-31 { --pacem--min: 31; }
+        &.minute-32 { --pacem--min: 32; }
+        &.minute-33 { --pacem--min: 33; }
+        &.minute-34 { --pacem--min: 34; }
+        &.minute-35 { --pacem--min: 35; }
+        &.minute-36 { --pacem--min: 36; }
+        &.minute-37 { --pacem--min: 37; }
+        &.minute-38 { --pacem--min: 38; }
+        &.minute-39 { --pacem--min: 39; }
+        &.minute-40 { --pacem--min: 40; }
+        &.minute-41 { --pacem--min: 41; }
+        &.minute-42 { --pacem--min: 42; }
+        &.minute-43 { --pacem--min: 43; }
+        &.minute-44 { --pacem--min: 44; }
+        &.minute-45 { --pacem--min: 45; }
+        &.minute-46 { --pacem--min: 46; }
+        &.minute-47 { --pacem--min: 47; }
+        &.minute-48 { --pacem--min: 48; }
+        &.minute-49 { --pacem--min: 49; }
+        &.minute-50 { --pacem--min: 50; }
+        &.minute-51 { --pacem--min: 51; }
+        &.minute-52 { --pacem--min: 52; }
+        &.minute-53 { --pacem--min: 53; }
+        &.minute-54 { --pacem--min: 54; }
+        &.minute-55 { --pacem--min: 55; }
+        &.minute-56 { --pacem--min: 56; }
+        &.minute-57 { --pacem--min: 57; }
+        &.minute-58 { --pacem--min: 58; }
+        &.minute-59 { --pacem--min: 59; }
+    }
+    .agenda-allday .agenda-event {
+        &.day-start-1 { grid-column-start: 1; }
+        &.day-start-2 { grid-column-start: 2; }
+        &.day-start-3 { grid-column-start: 3; }
+        &.day-start-4 { grid-column-start: 4; }
+        &.day-start-5 { grid-column-start: 5; }
+        &.day-start-6 { grid-column-start: 6; }
+        &.day-start-7 { grid-column-start: 7; }
+        &.day-end-2 { grid-column-end: 2; }
+        &.day-end-3 { grid-column-end: 3; }
+        &.day-end-4 { grid-column-end: 4; }
+        &.day-end-5 { grid-column-end: 5; }
+        &.day-end-6 { grid-column-end: 6; }
+        &.day-end-7 { grid-column-end: 7; }
+        &.day-end-8 { grid-column-end: 8; }
+    }
+    .agenda-day .agenda-event-wrapper {
+        &.hour-start-1 { grid-row-start: 1; }
+        &.hour-start-2 { grid-row-start: 2; }
+        &.hour-start-3 { grid-row-start: 3; }
+        &.hour-start-4 { grid-row-start: 4; }
+        &.hour-start-5 { grid-row-start: 5; }
+        &.hour-start-6 { grid-row-start: 6; }
+        &.hour-start-7 { grid-row-start: 7; }
+        &.hour-start-8 { grid-row-start: 8; }
+        &.hour-start-9 { grid-row-start: 9; }
+        &.hour-start-10 { grid-row-start: 10; }
+        &.hour-start-11 { grid-row-start: 11; }
+        &.hour-start-12 { grid-row-start: 12; }
+        &.hour-start-13 { grid-row-start: 13; }
+        &.hour-start-14 { grid-row-start: 14; }
+        &.hour-start-15 { grid-row-start: 15; }
+        &.hour-start-16 { grid-row-start: 16; }
+        &.hour-start-17 { grid-row-start: 17; }
+        &.hour-start-18 { grid-row-start: 18; }
+        &.hour-start-19 { grid-row-start: 19; }
+        &.hour-start-20 { grid-row-start: 20; }
+        &.hour-start-21 { grid-row-start: 21; }
+        &.hour-start-22 { grid-row-start: 22; }
+        &.hour-start-23 { grid-row-start: 23; }
+        &.hour-start-24 { grid-row-start: 24; }
+        &.hour-start-25 { grid-row-start: 25; }
+        &.hour-start-26 { grid-row-start: 26; }
+        &.hour-start-27 { grid-row-start: 27; }
+        &.hour-start-28 { grid-row-start: 28; }
+        &.hour-start-29 { grid-row-start: 29; }
+        &.hour-start-30 { grid-row-start: 30; }
+        &.hour-start-31 { grid-row-start: 31; }
+        &.hour-start-32 { grid-row-start: 32; }
+        &.hour-start-33 { grid-row-start: 33; }
+        &.hour-start-34 { grid-row-start: 34; }
+        &.hour-start-35 { grid-row-start: 35; }
+        &.hour-start-36 { grid-row-start: 36; }
+        &.hour-start-37 { grid-row-start: 37; }
+        &.hour-start-38 { grid-row-start: 38; }
+        &.hour-start-39 { grid-row-start: 39; }
+        &.hour-start-40 { grid-row-start: 40; }
+        &.hour-start-41 { grid-row-start: 41; }
+        &.hour-start-42 { grid-row-start: 42; }
+        &.hour-start-43 { grid-row-start: 43; }
+        &.hour-start-44 { grid-row-start: 44; }
+        &.hour-start-45 { grid-row-start: 45; }
+        &.hour-start-46 { grid-row-start: 46; }
+        &.hour-start-47 { grid-row-start: 47; }
+        &.hour-start-48 { grid-row-start: 48; }
+        &.hour-end-2 { grid-row-end: 2; }
+        &.hour-end-3 { grid-row-end: 3; }
+        &.hour-end-4 { grid-row-end: 4; }
+        &.hour-end-5 { grid-row-end: 5; }
+        &.hour-end-6 { grid-row-end: 6; }
+        &.hour-end-7 { grid-row-end: 7; }
+        &.hour-end-8 { grid-row-end: 8; }
+        &.hour-end-9 { grid-row-end: 9; }
+        &.hour-end-10 { grid-row-end: 10; }
+        &.hour-end-11 { grid-row-end: 11; }
+        &.hour-end-12 { grid-row-end: 12; }
+        &.hour-end-13 { grid-row-end: 13; }
+        &.hour-end-14 { grid-row-end: 14; }
+        &.hour-end-15 { grid-row-end: 15; }
+        &.hour-end-16 { grid-row-end: 16; }
+        &.hour-end-17 { grid-row-end: 17; }
+        &.hour-end-18 { grid-row-end: 18; }
+        &.hour-end-19 { grid-row-end: 19; }
+        &.hour-end-20 { grid-row-end: 20; }
+        &.hour-end-21 { grid-row-end: 21; }
+        &.hour-end-22 { grid-row-end: 22; }
+        &.hour-end-23 { grid-row-end: 23; }
+        &.hour-end-24 { grid-row-end: 24; }
+        &.hour-end-25 { grid-row-end: 25; }
+        &.hour-end-26 { grid-row-end: 26; }
+        &.hour-end-27 { grid-row-end: 27; }
+        &.hour-end-28 { grid-row-end: 28; }
+        &.hour-end-29 { grid-row-end: 29; }
+        &.hour-end-30 { grid-row-end: 30; }
+        &.hour-end-31 { grid-row-end: 31; }
+        &.hour-end-32 { grid-row-end: 32; }
+        &.hour-end-33 { grid-row-end: 33; }
+        &.hour-end-34 { grid-row-end: 34; }
+        &.hour-end-35 { grid-row-end: 35; }
+        &.hour-end-36 { grid-row-end: 36; }
+        &.hour-end-37 { grid-row-end: 37; }
+        &.hour-end-38 { grid-row-end: 38; }
+        &.hour-end-39 { grid-row-end: 39; }
+        &.hour-end-40 { grid-row-end: 40; }
+        &.hour-end-41 { grid-row-end: 41; }
+        &.hour-end-42 { grid-row-end: 42; }
+        &.hour-end-43 { grid-row-end: 43; }
+        &.hour-end-44 { grid-row-end: 44; }
+        &.hour-end-45 { grid-row-end: 45; }
+        &.hour-end-46 { grid-row-end: 46; }
+        &.hour-end-47 { grid-row-end: 47; }
+        &.hour-end-48 { grid-row-end: 48; }
+        &.hour-end-49 { grid-row-end: 49; }
+    }
+}
+
+pacem-schedule .pacem-schedule .schedule-header.schedule-grid .schedule-heading {
+    &.day-1 { grid-column: 2; }
+    &.day-2 { grid-column: 3; }
+    &.day-3 { grid-column: 4; }
+    &.day-4 { grid-column: 5; }
+    &.day-5 { grid-column: 6; }
+    &.day-6 { grid-column: 7; }
+    &.day-7 { grid-column: 8; }
+}

package/src/ui/hidden.css

@@ -0,0 +1,40 @@
+/*#region HIDDEN*/
+.pacem-hidden {
+    transition: all .3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
+    opacity: 0;
+    transform: scale(0,0);
+
+    &.slide {
+        transition: all .3s cubic-bezier(0.95, 0.05, 0.795, 0.035);
+        transform: none;
+        overflow: hidden;
+        height: 0;
+
+        &.horizontal {
+            height: auto;
+            width: 0;
+        }
+    }
+}
+
+.pacem-shown {
+    transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    opacity: 1;
+    transform: scale(1,1);
+
+    &.slide {
+        transition: all .3s cubic-bezier(0.19, 1, 0.22, 1);
+        transform: none;
+        overflow: hidden;
+    }
+}
+/*#endregion*/
+
+/* non-UI components */
+pacem-menu-cursor,
+pacem-media-query,
+pacem-vibrate,
+pacem-binder {
+    pointer-events: none !important;
+    display: none !important;
+}

package/src/ui/icon.css

@@ -0,0 +1,90 @@
+pacem-icon {
+    display: inline-block;
+    vertical-align: middle;
+    border-radius: 50%;
+
+    > i,
+    > i.pacem-icon,
+    > i.material-icons,
+    > i.material-symbols-outlined,
+    > i.material-symbols-sharp,
+    > i.material-symbols-rounded,
+    > img,
+    > svg {
+        display: block;
+    }
+
+    &.icon-fill > i {
+        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    }
+
+    &.icon-outline > i {
+        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    }
+
+    &.icon-text-bottom { vertical-align: text-bottom; }
+    &.icon-text-top { vertical-align: text-top; }
+    &.icon-top { vertical-align: top; }
+    &.icon-bottom { vertical-align: bottom; }
+
+    /* icon rotations */
+    &.icon-rotate {
+        transform-origin: center center;
+
+        &.rotate-45 { transform: rotate(45deg); }
+        &.rotate-90 { transform: rotate(90deg); }
+        &.rotate-135 { transform: rotate(135deg); }
+        &.rotate-180 { transform: rotate(180deg); }
+        &.rotate-225 { transform: rotate(225deg); }
+        &.rotate-270 { transform: rotate(270deg); }
+        &.rotate-315 { transform: rotate(315deg); }
+    }
+
+    &.icon-flip {
+        &.flip-horizontal { transform: scale(-1,1); }
+        &.flip-vertical { transform: scale(1,-1); }
+    }
+}
+
+/* sizes (pacem-icon and i.pacem-icon keep their own specificity) */
+/* #region legacy sizes */
+pacem-icon.icon-size-small, i.pacem-icon.icon-size-small { font-size: calc(.9 * var(--pacem-font-icon-size)); }
+pacem-icon.icon-size-smaller, i.pacem-icon.icon-size-smaller { font-size: calc(.8667 * var(--pacem-font-icon-size)); }
+pacem-icon.icon-size-tiny, i.pacem-icon.icon-size-tiny { font-size: calc(.75 * var(--pacem-font-icon-size)); }
+pacem-icon.icon-size-smallest, i.pacem-icon.icon-size-smallest { font-size: calc(.6667 * var(--pacem-font-icon-size)); }
+pacem-icon.icon-size-big, i.pacem-icon.icon-size-big { font-size: calc(1.3333 * var(--pacem-font-icon-size)); }
+pacem-icon.icon-size-bigger, i.pacem-icon.icon-size-bigger { font-size: calc(1.6667 * var(--pacem-font-icon-size)); }
+pacem-icon.icon-size-huge, i.pacem-icon.icon-size-huge { font-size: calc(2 * var(--pacem-font-icon-size)); }
+pacem-icon.icon-size-biggest, i.pacem-icon.icon-size-biggest { font-size: calc(2.5 * var(--pacem-font-icon-size)); }
+pacem-icon.icon-size-regular, i.pacem-icon.icon-size-regular { font-size: var(--pacem-font-icon-size); }
+/* #endregion */
+pacem-icon.icon-size-1, i.pacem-icon.icon-size-1 { font-size: var(--pacem-size-1); }
+pacem-icon.icon-size--1, i.pacem-icon.icon-size--1 { font-size: var(--pacem-size--1); }
+pacem-icon.icon-size-2, i.pacem-icon.icon-size-2 { font-size: var(--pacem-size-2); }
+pacem-icon.icon-size--2, i.pacem-icon.icon-size--2 { font-size: var(--pacem-size--2); }
+pacem-icon.icon-size-3, i.pacem-icon.icon-size-3 { font-size: var(--pacem-size-3); }
+pacem-icon.icon-size--3, i.pacem-icon.icon-size--3 { font-size: var(--pacem-size--3); }
+pacem-icon.icon-size-4, i.pacem-icon.icon-size-4 { font-size: var(--pacem-size-4); }
+pacem-icon.icon-size--4, i.pacem-icon.icon-size--4 { font-size: var(--pacem-size--4); }
+pacem-icon.icon-size-5, i.pacem-icon.icon-size-5 { font-size: var(--pacem-size-5); }
+pacem-icon.icon-size--5, i.pacem-icon.icon-size--5 { font-size: var(--pacem-size--5); }
+pacem-icon.icon-size-6, i.pacem-icon.icon-size-6 { font-size: var(--pacem-size-6); }
+pacem-icon.icon-size--6, i.pacem-icon.icon-size--6 { font-size: var(--pacem-size--6); }
+pacem-icon.icon-size-7, i.pacem-icon.icon-size-7 { font-size: var(--pacem-size-7); }
+pacem-icon.icon-size--7, i.pacem-icon.icon-size--7 { font-size: var(--pacem-size--7); }
+pacem-icon.icon-size-8, i.pacem-icon.icon-size-8 { font-size: var(--pacem-size-8); }
+pacem-icon.icon-size--8, i.pacem-icon.icon-size--8 { font-size: var(--pacem-size--8); }
+pacem-icon.icon-size-9, i.pacem-icon.icon-size-9 { font-size: var(--pacem-size-9); }
+pacem-icon.icon-size--9, i.pacem-icon.icon-size--9 { font-size: var(--pacem-size--9); }
+pacem-icon.icon-size-10, i.pacem-icon.icon-size-10 { font-size: var(--pacem-size-10); }
+pacem-icon.icon-size--10, i.pacem-icon.icon-size--10 { font-size: var(--pacem-size--10); }
+pacem-icon.icon-size-11, i.pacem-icon.icon-size-11 { font-size: var(--pacem-size-11); }
+pacem-icon.icon-size--11, i.pacem-icon.icon-size--11 { font-size: var(--pacem-size--11); }
+pacem-icon.icon-size-12, i.pacem-icon.icon-size-12 { font-size: var(--pacem-size-12); }
+pacem-icon.icon-size--12, i.pacem-icon.icon-size--12 { font-size: var(--pacem-size--12); }
+
+/* avoid selection */
+pacem-icon,
+i.pacem-icon {
+    user-select: none;
+}

package/src/ui/image.css

@@ -0,0 +1,140 @@
+pacem-img {
+    background-position: center center;
+    background-repeat: no-repeat;
+    display: inline-block;
+    position: relative;
+}
+
+pacem-img::before {
+    --pacem--img-sz: calc(2 * var(--pacem-grid-spacing));
+    --pacem--img-brd: calc(var(--pacem-grid-spacing) / 8);
+    display: block;
+    content: '';
+    width: var(--pacem--img-sz);
+    height: var(--pacem--img-sz);
+    border-radius: 50%;
+    border: var(--pacem--img-brd) solid var(--pacem-color-border);
+    border-top-color: var(--pacem-color-default);
+    animation: rotate-anim linear 1s infinite both;
+    top: 50%;
+    left: 50%;
+    margin-left: calc(-.5 * var(--pacem--img-sz) - var(--pacem--img-brd));
+    margin-top: calc(-.5 * var(--pacem--img-sz) - var(--pacem--img-brd));
+    position: absolute;
+    transition: transform .2s var(--pacem-easing-in-out-sine), opacity .2s linear;
+    pointer-events: none;
+}
+
+pacem-img.img-ready::before {
+    transform: scale(0);
+    opacity: 0;
+    animation: none;
+}
+
+/* blends: --pacem--blend */
+pacem-img.img-ready.img-blend {
+    background-blend-mode: luminosity;
+
+    &.blend-accent { --pacem--blend: var(--pacem-color-accent); }
+    &.blend-success { --pacem--blend: var(--pacem-color-success); }
+    &.blend-warning { --pacem--blend: var(--pacem-color-warning); }
+    &.blend-primary { --pacem--blend: var(--pacem-color-primary); }
+    &.blend-danger { --pacem--blend: var(--pacem-color-danger); }
+    &.blend-error { --pacem--blend: var(--pacem-color-error); }
+    &.blend-default { --pacem--blend: var(--pacem-color-background); }
+    &.blend-invert { --pacem--blend: var(--pacem-color-default); }
+    &.blend-alt { --pacem--blend: var(--pacem-color-background-alt); }
+
+    &:is(.blend-accent, .blend-success, .blend-warning, .blend-primary, .blend-danger, .blend-error, .blend-default, .blend-invert, .blend-alt) {
+        background-color: var(--pacem--blend);
+
+        :--blur & {
+            opacity: .6667;
+        }
+    }
+}
+
+pacem-img.img-grayscale {
+    filter: grayscale(100%);
+}
+
+/* #region PICTURE */
+pacem-picture-source,
+pacem-picture::part(source),
+pacem-picture > picture > source {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+pacem-picture {
+    display: inline-block;
+
+    &::part(picture) {
+        display: flex;
+        flex-flow: row wrap;
+        align-content: stretch;
+        align-items: stretch;
+    }
+
+    &::part(img) {
+        flex: 1 1 100%;
+    }
+
+    > picture,
+    &::part(picture),
+    &::part(img),
+    > picture > img {
+        width: 100%;
+        height: 100%;
+        max-width: inherit;
+        min-width: inherit;
+        max-height: inherit;
+        min-height: inherit;
+    }
+
+    /* fitting and positioning: --pacem--pic-fit, --pacem--pic-pos */
+    &:is(.picture-auto, .picture-fill, .picture-contain, .picture-cover) {
+        &::part(img),
+        > picture > img {
+            object-fit: var(--pacem--pic-fit);
+        }
+    }
+
+    &:is(.picture-right, .picture-left, .picture-center):is(.picture-top, .picture-middle, .picture-bottom) {
+        &::part(img),
+        > picture > img {
+            object-position: var(--pacem--pic-pos);
+        }
+    }
+
+    &.picture-auto { --pacem--pic-fit: none; }
+    &.picture-fill { --pacem--pic-fit: fill; }
+    &.picture-contain { --pacem--pic-fit: contain; }
+    &.picture-cover { --pacem--pic-fit: cover; }
+
+    &.picture-right {
+        &.picture-top { --pacem--pic-pos: right top; }
+        &.picture-middle { --pacem--pic-pos: right center; }
+        &.picture-bottom { --pacem--pic-pos: right bottom; }
+    }
+
+    &.picture-left {
+        &.picture-top { --pacem--pic-pos: left top; }
+        &.picture-middle { --pacem--pic-pos: left center; }
+        &.picture-bottom { --pacem--pic-pos: left bottom; }
+    }
+
+    &.picture-center {
+        &.picture-top { --pacem--pic-pos: center top; }
+        &.picture-middle { --pacem--pic-pos: center center; }
+        &.picture-bottom { --pacem--pic-pos: center bottom; }
+    }
+
+    &.picture-grayscale {
+        &::part(img),
+        > picture > img {
+            filter: grayscale(100%);
+        }
+    }
+}
+/* #endregion */

package/src/ui/index.css

@@ -0,0 +1,30 @@
+/* ui (content part), same order as theme/less/pacem/ui/dark/index.less. The shell part is shell.css. */
+@import "hidden.css";
+@import "collapse.css";
+/* (the grid placements first: e.g. .schedule-day must override the headings' day-N columns, as in Less) */
+@import "generated/calendar.css";
+@import "calendar.css";
+@import "balloon.css";
+@import "toast.css";
+@import "anchor.css";
+@import "button.css";
+@import "pager.css";
+@import "icon.css";
+@import "image.css";
+@import "progressbar.css";
+@import "tuner.css";
+@import "dialog.css";
+@import "binder.css";
+@import "markdown.css";
+@import "view.css";
+@import "marquee.css";
+@import "tabs.css";
+@import "toc.css";
+@import "led.css";
+@import "timeline.css";
+@import "window.css";
+@import "sticky-header.css";
+@import "blade.css";
+@import "divider.css";
+@import "ticker.css";
+@import "bottom-sheet.css";