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

package/src/layout/tokens-chips.css

@@ -0,0 +1,15 @@
+.pacem-chip {
+    padding: 0 var(--pacem-size--12);
+    height: var(--pacem-grid-spacing);
+    line-height: var(--pacem-grid-spacing);
+    border-radius: calc(var(--pacem-grid-spacing) / 2);
+    box-sizing: border-box;
+    display: inline-block;
+}
+
+.pacem-token {
+    padding: 0 2px;
+    border-radius: min(3px, var(--pacem-border-radius));
+    box-sizing: border-box;
+    display: inline-block;
+}

package/src/layout/toolbar.css

@@ -0,0 +1,30 @@
+.pacem-toolbar {
+    display: grid;
+    grid-gap: 0;
+    padding: calc(var(--pacem-grid-spacing) / 2) 0;
+    grid-template-columns: auto 1fr auto 1fr auto;
+    grid-template-areas: 'left . center . right';
+    white-space: nowrap;
+
+    .toolbar-left,
+    .toolbar-center,
+    .toolbar-right {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .toolbar-left {
+        grid-area: left;
+        align-content: flex-start;
+    }
+
+    .toolbar-center {
+        grid-area: center;
+        align-content: center;
+    }
+
+    .toolbar-right {
+        grid-area: right;
+        align-content: flex-end;
+    }
+}

package/src/layout/typography.css

@@ -0,0 +1,106 @@
+body {
+    font-family: var(--pacem-font-std);
+    color: var(--pacem-color-default);
+}
+
+h1, h2, h3 {
+    margin: calc(var(--pacem-grid-spacing) / 3) 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: var(--pacem-font-main-weight);
+    font-family: var(--pacem-font-main);
+    line-height: 1.1;
+
+    &.pacem-title {
+        color: var(--pacem-color-title);
+        background-color: var(--pacem-color-title-inverse);
+        text-transform: var(--pacem-transform-title);
+    }
+}
+
+h1 {
+    font-size: calc(2rem * var(--pacem-font-main-rem-factor));
+}
+
+h2 {
+    font-size: calc(1.75rem * var(--pacem-font-main-rem-factor));
+}
+
+h3 {
+    font-size: calc(1.5rem * var(--pacem-font-main-rem-factor));
+}
+
+h4 {
+    font-size: calc(1.3333rem * var(--pacem-font-main-rem-factor));
+}
+
+h5 {
+    font-size: calc(1.25rem * var(--pacem-font-main-rem-factor));
+}
+
+h6 {
+    font-size: calc(1.1rem * var(--pacem-font-main-rem-factor));
+}
+
+p {
+    margin-bottom: .5rem;
+}
+
+small {
+    opacity: .8;
+    font-size: 0.86667em;
+}
+
+code,
+samp,
+kbd {
+    font-family: var(--pacem-font-tech);
+    font-size: calc(1rem * var(--pacem-font-tech-rem-factor));
+    padding: 0 calc(var(--pacem-grid-spacing) / 6);
+}
+
+samp,
+code {
+    color: var(--pacem-color-code);
+    background: var(--pacem-color-code-back);
+}
+
+kbd {
+    color: var(--pacem-color-background);
+    font-family: var(--pacem-font-tech);
+    font-size: calc(.86667rem * var(--pacem-font-tech-rem-factor));
+    background: rgb(from var(--pacem-color-default) r g b / 90%);
+    border-radius: calc(var(--pacem-grid-spacing) / 12);
+}
+
+mark, .pacem-highlight {
+    background-color: var(--pacem-color-primary);
+    color: var(--pacem-theme-light);
+}
+
+blockquote {
+    border: 0;
+    padding: 1em 1em 1em 2em;
+    position: static;
+    text-align: inherit;
+    margin: 1em 0;
+    font-style: italic;
+    color: inherit;
+    border-left: calc(var(--pacem-grid-spacing) / 6) solid var(--pacem-color-border);
+}
+
+hr {
+    margin: calc(var(--pacem-grid-spacing) / 2) 0;
+    height: 0;
+    border: 0;
+    border-top: 1px solid rgb(from var(--pacem-color-default) r g b / 10%);
+
+    &.spacer {
+        margin-bottom: var(--pacem-grid-spacing);
+    }
+}
+
+a, a:hover, a:visited {
+    color: var(--pacem-color-link);
+}

package/src/layout/visibility.css

@@ -0,0 +1,231 @@
+.full-width {
+    width: 100%;
+}
+
+.full-height {
+    height: 100%;
+}
+
+/* #region overflow-specific */
+
+.overflow-visible {
+    overflow: visible !important;
+}
+
+.overflow-scroll {
+    overflow: scroll !important;
+}
+
+.overflow-auto {
+    overflow: auto !important;
+}
+
+.overflow-hidden {
+    overflow: hidden !important;
+}
+
+.overflow-y-scroll {
+    overflow-y: scroll !important;
+}
+
+.overflow-y-auto {
+    overflow-y: auto !important;
+}
+
+.overflow-x-auto {
+    overflow-x: auto !important;
+}
+
+.overflow-x-scroll {
+    overflow-x: scroll !important;
+}
+
+.overflow-y-hidden {
+    overflow-y: hidden !important;
+}
+
+.overflow-x-hidden {
+    overflow-x: hidden !important;
+}
+
+/* #endregion */
+
+.hit-none,
+.pacem-inert {
+    pointer-events: none !important;
+}
+
+.hit-auto {
+    pointer-events: auto !important;
+}
+
+.pacem-hide {
+    display: none;
+}
+
+.select-none,
+.pacem-unselect {
+    user-select: none;
+}
+
+.pacem-invisibile {
+    visibility: hidden;
+}
+
+.pacem-show {
+    display: inherit;
+}
+
+.pacem-transparent {
+    opacity: 0 !important;
+}
+
+.display-block {
+    display: block !important;
+}
+
+.display-grid {
+    display: grid !important;
+}
+
+.display-inline-grid {
+    display: inline-grid !important;
+}
+
+.display-grid,
+.display-inline-grid {
+
+    &.grid-right {
+        justify-content: right;
+    }
+
+    &.grid-end {
+        justify-content: end;
+    }
+
+    &.grid-left {
+        justify-content: left;
+    }
+
+    &.grid-start {
+        justify-content: start;
+    }
+
+    &.grid-center {
+        justify-content: center;
+    }
+
+    &.grid-top {
+        align-items: start;
+    }
+
+    &.grid-middle {
+        align-items: center;
+    }
+
+    &.grid-bottom {
+        align-items: end;
+    }
+}
+
+.display-inline-flex {
+    display: inline-flex !important;
+}
+
+.display-flex {
+    display: flex !important;
+}
+
+.display-flex,
+.display-inline-flex {
+    flex-flow: row wrap;
+    align-content: stretch;
+    align-items: flex-start;
+
+    &.flex-nowrap {
+        flex-wrap: nowrap;
+    }
+
+    &.flex-fill {
+        align-items: stretch;
+
+        > * {
+            flex: 1 1 100%;
+
+            &.flex-auto,
+            &.self-auto {
+                flex: 0 0 auto;
+            }
+        }
+    }
+
+    > .flex-stretch,
+    > .self-stretch,
+    > .self-fill {
+        align-self: stretch;
+    }
+
+    &.flex-fill > .flex-noshrink,
+    > .flex-noshrink {
+        flex-shrink: 0;
+    }
+
+    &.flex-fill > .flex-nogrow,
+    > .flex-nogrow {
+        flex-grow: 0;
+    }
+
+    &.flex-vertical {
+        flex-direction: column;
+    }
+
+    &.flex-right {
+        justify-content: right;
+    }
+
+    &.flex-end {
+        justify-content: flex-end;
+    }
+
+    &.flex-left {
+        justify-content: left;
+    }
+
+    &.flex-start {
+        justify-content: flex-start;
+    }
+
+    &.flex-center {
+        justify-content: center;
+    }
+
+    &.flex-top {
+        align-items: flex-start;
+    }
+
+    &.flex-middle {
+        align-items: center;
+    }
+
+    &.flex-bottom {
+        align-items: flex-end;
+    }
+}
+
+.display-inline {
+    display: inline !important;
+
+    &.inline-middle {
+        vertical-align: middle;
+    }
+}
+
+.display-inline-block {
+    display: inline-block !important;
+
+    &.inline-block-middle {
+        vertical-align: middle;
+    }
+}
+
+/* responsive .hide-*, .show-* (media and container queries): generated/visibility.css */

package/src/maps/index.css

@@ -0,0 +1,20 @@
+/* maps (theme/less/pacem/maps): the map elements are configuration only; the adapters render into .pacem-map. */
+pacem-map,
+pacem-map-marker,
+pacem-map-circle,
+pacem-map-polygon,
+pacem-map-polyline,
+pacem-map-rectangle,
+pacem-map-geocoder,
+pacem-map-adapter-leaflet,
+pacem-map-adapter-google,
+pacem-map-adapter-azure {
+    font-size: 0;
+    display: none !important;
+    user-select: none;
+}
+
+.pacem-map > div {
+    min-height: calc(var(--pacem-grid-cell) * 3);
+    color: var(--pacem-color-map);
+}

package/src/media/index.css

@@ -0,0 +1,6 @@
+/* media (theme/less/pacem/media): non-UI components. */
+pacem-media-recorder,
+pacem-audio {
+    pointer-events: none !important;
+    display: none !important;
+}

package/src/media.css

@@ -0,0 +1,18 @@
+/* Breakpoints (were @threshold_* in theme-dark.less).
+   Custom properties cannot be used in media queries: these are resolved at build time by Lightning CSS. */
+@custom-media --pacem-sm (width >= 768px);
+@custom-media --pacem-md (width >= 992px);
+@custom-media --pacem-lg (width >= 1200px);
+@custom-media --pacem-xl (width >= 1824px);
+@custom-media --pacem-hd (width >= 1920px);
+@custom-media --pacem-2k (width >= 2048px);
+@custom-media --pacem-4k (width >= 3840px);
+
+/* `max-width: @threshold_* - 1` */
+@custom-media --pacem-below-sm (width < 768px);
+@custom-media --pacem-below-md (width < 992px);
+@custom-media --pacem-below-lg (width < 1200px);
+@custom-media --pacem-below-xl (width < 1824px);
+@custom-media --pacem-below-hd (width < 1920px);
+@custom-media --pacem-below-2k (width < 2048px);
+@custom-media --pacem-below-4k (width < 3840px);

package/src/pacem-content.css

@@ -0,0 +1,24 @@
+/* Pacem JS theme - content only (everything but the shell): was `shell_only=false, full_theme=false`. */
+@layer pacem.tokens, pacem.styles;
+
+@import "media.css";
+@import "tokens/system.css";
+@import "tokens/theme.css";
+@import "tokens/colors.css";
+@import "tokens/components.css";
+
+@import "base/preloader.css" layer(pacem.styles);
+@import "base/content.css" layer(pacem.styles);
+@import "basic/index.css" layer(pacem.styles);
+@import "layout/index.css" layer(pacem.styles);
+@import "ui/index.css" layer(pacem.styles);
+@import "scaffolding/index.css" layer(pacem.styles);
+@import "maps/index.css" layer(pacem.styles);
+@import "3d/index.css" layer(pacem.styles);
+@import "2d/index.css" layer(pacem.styles);
+@import "media/index.css" layer(pacem.styles);
+@import "plus/index.css" layer(pacem.styles);
+@import "charts/index.css" layer(pacem.styles);
+@import "fx/index.css" layer(pacem.styles);
+@import "transforms/index.css" layer(pacem.styles);
+@import "base/overrides.css" layer(pacem.styles);

package/src/pacem-shell.css

@@ -0,0 +1,14 @@
+/* Pacem JS theme - shell only (reset, layout, loader, menu, sidebar): was `shell_only=true`. */
+@layer pacem.tokens, pacem.styles;
+
+@import "media.css";
+@import "tokens/system.css";
+@import "tokens/theme.css";
+@import "tokens/colors.css";
+@import "tokens/components.css";
+
+@import "base/reset.css" layer(pacem.styles);
+@import "base/preloader.css" layer(pacem.styles);
+@import "base/shell.css" layer(pacem.styles);
+@import "layout/shell.css" layer(pacem.styles);
+@import "ui/shell.css" layer(pacem.styles);

package/src/pacem.css

@@ -0,0 +1,35 @@
+/* Pacem JS theme - full stylesheet (shell + content). Theme-agnostic: dark is the default,
+   load themes/*.css (or themes/all.css) and toggle html[light|dark] or [data-theme] to switch.
+
+   Layers: tokens first, then every style rule in one layer, in the same order as the Less theme
+   (a single layer keeps the original specificity-based cascade among Pacem's own rules, while
+   any unlayered stylesheet of the application overrides them). */
+@layer pacem.tokens, pacem.styles;
+
+@import "media.css";
+@import "tokens/system.css";
+@import "tokens/theme.css";
+@import "tokens/colors.css";
+@import "tokens/components.css";
+
+@import "base/reset.css" layer(pacem.styles);
+@import "base/preloader.css" layer(pacem.styles);
+/* shell */
+@import "base/shell.css" layer(pacem.styles);
+@import "layout/shell.css" layer(pacem.styles);
+@import "ui/shell.css" layer(pacem.styles);
+/* content */
+@import "base/content.css" layer(pacem.styles);
+@import "basic/index.css" layer(pacem.styles);
+@import "layout/index.css" layer(pacem.styles);
+@import "ui/index.css" layer(pacem.styles);
+@import "scaffolding/index.css" layer(pacem.styles);
+@import "maps/index.css" layer(pacem.styles);
+@import "3d/index.css" layer(pacem.styles);
+@import "2d/index.css" layer(pacem.styles);
+@import "media/index.css" layer(pacem.styles);
+@import "plus/index.css" layer(pacem.styles);
+@import "charts/index.css" layer(pacem.styles);
+@import "fx/index.css" layer(pacem.styles);
+@import "transforms/index.css" layer(pacem.styles);
+@import "base/overrides.css" layer(pacem.styles);