frontpack 0.1.0

data/app/assets/stylesheets/frontpack/200-design.scss

@@ -0,0 +1,75 @@
+@use "010-config" as config;
+@use "020-mixins" as mixins;
+
+body {
+  background: config.$background;
+  color: config.$foreground;
+  --default-off-icon: 'cancel';
+  --default-on-icon: 'check_circle';
+}
+
+@if config.$header-enable {
+  #header {
+    background: config.$header-background;
+    color: config.$header-foreground;
+    border-bottom: config.$header-border-bottom;
+    padding: config.$header-padding;
+  }
+}
+
+@if config.$main-menu-enable {
+  #main-menu {
+    a {
+      font-size: 2rem;
+      text-decoration: none;
+      background: config.$main-menu-background;
+      padding: config.$main-menu-padding;
+
+      &:hover {
+        background: config.$main-menu-hover-background;
+      }
+    }
+  }
+}
+
+@if config.$breadcrumbs-enable {
+  #breadcrumbs {
+    background: config.$breadcrumbs-background;
+    color: config.$breadcrumbs-foreground;
+    border-bottom: config.$breadcrumbs-border-bottom;
+    padding: config.$breadcrumbs-padding;
+    *:before {
+      content: '> ';
+    }
+    *:after {
+      content: ' ';
+    }
+  }
+}
+
+@if config.$left-column-enable {
+  #left {
+    background: config.$left-column-background;
+    color: config.$left-column-foreground;
+    border-right: config.$left-column-border-right;
+    padding: config.$left-column-padding;
+  }
+}
+
+@if config.$right-column-enable {
+  #right {
+    background: config.$right-column-background;
+    color: config.$right-column-foreground;
+    border-left: config.$right-column-border-left;
+    padding: config.$right-column-padding;
+  }
+}
+
+@if config.$footer-enable {
+  #footer {
+    background: config.$footer-background;
+    color: config.$footer-foreground;
+    border-top: config.$footer-border-top;
+    padding: config.$footer-padding;
+  }
+}

data/app/assets/stylesheets/frontpack/201-box.scss

@@ -0,0 +1,6 @@
+@use "010-config" as config;
+@use "020-mixins" as mixins;
+
+.box {
+  @include mixins.background-variants(config.$theme-colors);
+}

data/app/assets/stylesheets/frontpack/202-borders.scss

@@ -0,0 +1,5 @@
+@use "010-config" as config;
+@use "020-mixins" as mixins;
+
+@include mixins.size-variants(outline-width, o, 1px, true, true, true);
+@include mixins.size-variants(border, b, 1px, true, true, true, solid config.$default-border-color);

data/app/assets/stylesheets/frontpack/300-typography.scss

@@ -0,0 +1,128 @@
+@use "010-config" as config;
+@use "020-mixins" as mixins;
+
+body {
+  font-family: config.$text-font;
+}
+
+a, a:link {
+  color: config.$link-color;
+}
+
+a:link.no-underscore {
+  text-decoration: none;
+}
+
+a:active {
+  color: config.$link-color-active;
+}
+
+a:hover {
+  color: config.$link-color-hover;
+}
+
+p {
+  padding: .5em 0;
+}
+
+dl {
+  dt {
+    font-weight: 700;
+    text-wrap: nowrap;
+    white-space: nowrap;
+    &:after {
+      content: ":";
+    }
+  }
+  dd {
+    padding: 0;
+    margin: 0;
+  }
+  &.columns {
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    grid-gap: .5em;
+
+    dt {
+      text-align: right;
+    }
+  }
+  &.row {
+    display: block;
+    grid-gap: .5em;
+    dt, dd {
+      display: inline;
+      margin-right: .5em;
+    }
+    dd + dt {
+      margin-left: .5em;
+    }
+  }
+}
+
+ul {
+  &.responsive {
+    width: min-content;
+    display: inline-flex;
+    flex-flow: column nowrap;
+
+    li {
+      display: block;
+      white-space: nowrap;
+    }
+  }
+
+  &.links {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    li {
+      display: block;
+
+      a {
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-content: center;
+
+        text-decoration: none;
+        color: config.$secondary;
+
+        i {
+          font-size: 1rem;
+          margin: 0 .5rem 0 0;
+        }
+      }
+    }
+  }
+}
+
+.bold {
+  font-weight: 700;
+}
+
+@for $i from 6 through 1 {
+  h#{$i} {
+    font-size: 4em - $i * .35em;
+  }
+}
+
+li {
+  @include mixins.color-variants(config.$theme-colors);
+}
+
+@each $name, $colors in config.$theme-colors {
+  .text-#{$name} {
+    color: nth($colors, 1);
+  }
+}
+
+p, div, span, i, h1, h2, h3, h4, h5, h6 {
+  @include mixins.color-variants(config.$theme-colors);
+  @include mixins.outline-variants(config.$theme-colors);
+  @include mixins.background-variants(config.$theme-colors, 20%, 0%, 50%);
+  @include mixins.responsive-breakpoints using($breakpoint) {
+    @include mixins.font-sizes($breakpoint);
+  }
+}
+

data/app/assets/stylesheets/frontpack/800-components.scss

@@ -0,0 +1,85 @@
+@use "010-config" as config;
+@use "020-mixins" as mixins;
+@use "802-buttons" as buttons;
+
+toggle-button[icon]:before {
+  content: attr(icon);
+  font-family: config.$icon-font;
+}
+
+toggle-button[mode="copy"] {
+  cursor: pointer;
+}
+
+toggle-button {
+  @extend %button-appearance;
+}
+
+text-box {
+  @include mixins.background-variants(config.$theme-colors, 0%, 0%, 10%, 0.2);
+}
+
+expandable-item {
+  display: block;
+
+  ul {
+    margin: 0;
+  }
+
+  li a.active {
+    @extend .bold;
+
+    &::before {
+      content: '> ';
+    }
+
+    &::after {
+      content: ' <';
+    }
+  }
+}
+
+expandable-area {
+  display: none;
+}
+
+#loading {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background-color: transparentize(config.$background, .4);
+  font-size: 4em;
+}
+
+/* STATUS - empty, dragging, ready, error, loading */
+image-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 10em;
+  width: available;
+  padding: .25em;
+  border: 2px dashed config.$highlight;
+  font-weight: bold;
+  font-size: 1.5em;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+image-preview:hover {
+  color: config.$highlight;
+}
+
+image-preview[status='dragging'] {
+  background-color: transparentize(config.$success, 0.9);
+  border: 2px solid config.$highlight;
+}
+
+image-preview[status='ready'] {
+  border: 2px solid config.$highlight;
+}

data/app/assets/stylesheets/frontpack/801-card.scss

@@ -0,0 +1,53 @@
+@use "010-config" as config;
+@use "020-mixins" as mixins;
+
+div.card {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-grid;
+  grid-template-columns: 100%;
+  grid-template-rows: min-content 1fr min-content;
+  grid-template-areas: 'header' 'content' 'footer';
+  box-shadow: 2px 2px 5px config.$card-header-background-color;
+
+  h2 {
+    grid-area: header;
+    color: config.$card-header-foreground-color;
+    background: config.$card-header-background-color;
+    margin: 0;
+    padding: .25rem;
+    text-align: center;
+    border-bottom: 1px solid config.$card-border-color;
+    border-top-left-radius: .25em;
+    border-top-right-radius: .25em;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
+  }
+
+  > div {
+    border-left: 1px solid config.$card-border-color;
+    border-right: 1px solid config.$card-border-color;
+
+    &:last-child {
+      border-bottom: 1px solid config.$card-border-color;
+    }
+  }
+
+  @each $color-name, $colors in config.$theme-colors {
+    &.#{$color-name} {
+      h2 {
+        @include mixins.frontpack-gradient(nth($colors, 1), nth($colors, 2), 10px, -10%)
+      }
+
+      div {
+        border-color: nth($colors, 1);
+      }
+    }
+  }
+
+  .footer {
+    grid-area: footer;
+    @include mixins.background-variants(config.$theme-colors, 0%, 0%, 0%, 0.2);
+  }
+
+  @include mixins.grid-area((content));
+}

data/app/assets/stylesheets/frontpack/802-buttons.scss

@@ -0,0 +1,58 @@
+@use "010-config" as config;
+@use "020-mixins" as mixins;
+@use "300-typography" as typography;
+
+%button-appearance {
+  @extend .bold;
+  display: inline-block;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1rem;
+  white-space: nowrap;
+  padding: .5rem 1rem;
+  border-radius: .25rem;
+  @include mixins.background-variants(config.$theme-colors, 0%, 10%, 10%, .2, true);
+
+  &.small {
+    padding: .2rem .4rem;
+  }
+
+  &[data-icon]:before {
+    content: attr(data-icon);
+    font-family: config.$icon-font;
+  }
+}
+
+button, input[type=button], input[type=reset], input[type=submit] {
+  @extend %button-appearance;
+  @include mixins.background-variants(config.$theme-colors, 0%, -5%, -10%, 0);
+
+  &.glow {
+    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.5), inset -1px -1px 1px rgba(0, 0, 0, 0.5);
+  }
+}
+
+a.button {
+  @extend %button-appearance;
+  @include mixins.color-variants(config.$theme-colors, 0%, 0%);
+  text-decoration: none !important;
+}
+
+.button-group {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+
+  button, a.button {
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-right: 0;
+    }
+
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}

data/app/assets/stylesheets/frontpack/803-form-controls.scss

@@ -0,0 +1,161 @@
+@use "010-config" as config;
+@use "101-container" as container;
+
+form {
+  @extend .container;
+  padding: config.$default-padding;
+}
+
+.field {
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  grid-template-rows: min-content 2.5em min-content;
+  grid-template-areas: "label label label" "input input input" "details . error";
+  grid-gap: .25rem;
+
+  label {
+    grid-area: label;
+  }
+
+  small {
+    grid-area: details;
+    white-space: nowrap;
+  }
+
+  i {
+    grid-area: error;
+    white-space: nowrap;
+    color: config.$input-text-error;
+  }
+
+  &.hidden {
+    display: none;
+  }
+
+  &.fluid-height {
+    grid-template-rows: min-content 1fr min-content;
+  }
+
+  &.rich-text {
+    grid-template-rows: min-content min-content 1fr min-content;
+    grid-template-areas: "label label label" "toolbar toolbar toolbar" "input input input" "details . error";
+
+    trix-toolbar {
+      grid-area: toolbar;
+
+      button {
+        background: config.$light;
+      }
+    }
+
+    trix-editor {
+      grid-area: input;
+      background: config.$input-background;
+    }
+  }
+}
+
+.check-control {
+  display: inline-grid;
+  grid-template-columns: min-content 1fr;
+  grid-template-rows: 1.5em 2fr;
+  grid-template-areas: ". ." "input label";
+
+  label {
+    grid-area: label
+  }
+
+  input {
+    grid-area: input;
+  }
+
+  &.inline {
+    grid-template-rows: 2fr;
+    grid-template-areas: "input label";
+  }
+}
+
+%form-input {
+  /* RESET */
+  filter: none;
+  outline: none;
+
+  grid-area: input;
+  background: config.$input-background;
+  color: config.$input-foreground;
+  border: none;
+  border-bottom: config.$input-border-color config.$input-border-bottom-width solid;
+  padding: .25rem;
+  font-size: 14pt;
+
+  &:focus, {
+    border-bottom-color: config.$input-border-color-focus;
+    transition: border-bottom-color ease-in 0.1s;
+
+    &.error {
+      border-bottom-color: config.$input-border-color-error;
+    }
+  }
+
+  &.error {
+    background: config.$input-background-color-error;
+  }
+}
+
+input {
+  @extend %form-input;
+}
+
+select {
+  @extend %form-input;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: config.$input-background url('data:image/svg+xml;plain,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="rgba(0,0,0,.8)"/></svg>') right center no-repeat;
+}
+
+label[data-required] {
+  &:after {
+    content: '*';
+    color: config.$highlight;
+  }
+}
+
+textarea {
+  @extend %form-input;
+  resize: vertical;
+}
+
+fieldset {
+  border: solid 1px config.$fieldset-border-color;
+  border-radius: .25rem;
+  margin: 0;
+  padding: .5rem;
+
+  legend {
+    padding: 0 .5rem;
+  }
+}
+
+.actions {
+  grid-column: span 12;
+}
+
+ul.auto-complete-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  background: config.$input-background;
+  border: config.$input-border-color 1px solid;
+  box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
+  li {
+    padding: .25em;
+    cursor: pointer;
+    &:hover {
+      background: config.$input-background-focus;
+    }
+    & + li {
+      border-top: rgba(0, 0, 0, 0.1) 1px solid;
+    }
+  }
+}

data/app/assets/stylesheets/frontpack/804-table.scss

@@ -0,0 +1,60 @@
+@use "010-config" as config;
+
+table.responsive {
+  table-layout: fixed;
+  border-collapse: collapse;
+
+  th, td {
+    padding: .5em;
+  }
+
+  &.stripped {
+    tbody {
+      tr:nth-child(odd) {
+        td, th {
+          background: config.$table-stripped-odd-row-background;
+        }
+      }
+    }
+  }
+
+  &.selectable {
+    tbody {
+      tr:hover {
+        th, td {
+          background: config.$table-selectable-hover-background-color;
+        }
+      }
+    }
+  }
+
+  &.bordered {
+    border: config.$table-bordered-border-color 3px solid;
+  }
+
+  &.bordered-rows {
+    thead {
+      tr {
+        th, td {
+          border-bottom: config.$table-bordered-rows-border-color 2px solid;
+        }
+      }
+    }
+
+    tbody {
+      tr:not(:first-of-type) {
+        th, td {
+          border-top: config.$table-bordered-rows-border-color 1px dashed;
+        }
+      }
+    }
+  }
+
+  &.bordered-columns {
+    tbody, thead {
+      tr th:not(:last-child), tr td:not(:last-child) {
+        border-right: config.$table-bordered-columns-border-color 2px solid;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/frontpack/805-switch-toggle.scss

@@ -0,0 +1,43 @@
+@use "010-config" as config;
+@use "300-typography" as typography;
+
+.switch-toggle {
+  grid-area: input;
+
+  input {
+    display: none;
+  }
+
+  label {
+    position: relative;
+    display: inline-block;
+    @extend .bold;
+    width: 4.5em;
+    height: 2.5em;
+    margin: 0;
+    cursor: pointer;
+    border: config.$default-border-color 1px solid;
+  }
+}
+
+.switch-toggle label::before {
+  font-family: config.$icon-font;
+  font-size: 1.2em;
+  position: absolute;
+  content: var(--off-icon, var(--default-off-icon));
+  text-align: center;
+  line-height: 2rem;
+  top: calc(.25rem - 1px);
+  left: calc(.25rem - 1px);
+  width: 2rem;
+  height: 2rem;
+  background-color: config.$danger;
+  transition: .3s ease-in-out;
+}
+
+.switch-toggle input[type="checkbox"]:checked + label::before {
+  content: var(--on-icon, var(--default-on-icon));
+  left: 50%;
+  color: #fff;
+  background-color: config.$success;
+}

data/app/assets/stylesheets/frontpack/frontpack.scss

@@ -0,0 +1,18 @@
+@forward "010-config";
+
+@use "000-reset" as reset;
+@use "020-mixins" as mixins;
+@use "030-consts" as consts;
+@use "031-margins" as margins;
+@use "100-layout" as layout;
+@use "101-container" as container;
+@use "200-design" as design;
+@use "201-box" as box;
+@use "202-borders" as borders;
+@use "300-typography" as typography;
+@use "800-components" as components;
+@use "801-card" as card;
+@use "802-buttons" as buttons;
+@use "803-form-controls" as form-controls;
+@use "804-table" as table;
+@use "805-switch-toggle" as switch-toggle;