fontastic 0.1.3

package/src/styles/themes/passion.scss

@@ -0,0 +1,280 @@
+body[data-theme="passion"] {
+  background-color: var(--background-color);
+  color: var(--font-color);
+}
+
+[data-theme="passion"] {
+
+  .hover-scrollbox-x,
+  .hover-scrollbox-y {
+    --scrollbar-color: #fe1963;
+    --scrollbar-hover-color: #fe1961cb;
+    --scrollbar-space: 0.1rem;
+    --scrollbar-height: calc(.3rem + var(--scrollbar-space));
+    --scrollbar-width: calc(.3rem + var(--scrollbar-space));
+  }
+
+  a {
+    color: var(--font-color);
+    &:hover,
+    &:active {
+      color: var(--font-color);
+    }
+  }
+
+  .active {
+    color: #fe206f !important;
+  }
+
+  .favorite {
+    color: #fe206f !important;
+  }
+
+  .disabled,
+  .disabled i {
+    color: var(--border-color);
+  }
+
+  .enabled {
+    color: var(--font-color);
+  }
+
+  .selected {
+    background-color: #69147a;
+  }
+
+  .material-icons {
+    color: var(--font-color);
+  }
+
+  .material-icons-rounded {
+    .material-icons {
+      &:hover {
+        @apply text-[#e94049] bg-[#69147a];
+      }
+    }
+  }
+
+  /* ==========================================================================
+  App Button
+  ========================================================================== */
+
+  .app-btn {
+    @apply bg-[#fe1963];
+    span {
+      @apply text-white;
+    }
+    &:hover {
+      @apply bg-[#fe1961d7];
+    }
+  }
+
+  input:not(.form-control-hidden):not([type="range"]),
+  select:not(.form-control-hidden) {
+    border: 1px solid var(--border-color) !important;
+  }
+
+  .radio label,
+  .checkbox label {
+    border: 2px solid var(--font-color);
+  }
+  
+  .radio :checked ~ label::before,
+  .checkbox :checked ~ label::before {
+    background-color: var(--font-color);
+  }
+  
+  .radio :checked ~ span,
+  .checkbox :checked ~ span {
+    color: var(--font-color);
+  }
+
+  // Toolbar text.
+  .input-preview.preview-text button {
+    background-color: var(--border-color) !important;
+  }
+
+  // Toolbar switch text.
+  .input-preview.quick-text button span.material-icons,
+  .input-preview.latest-news button span.material-icons,
+  .input-preview.preview-casing button span.material-icons,
+  .input-preview.preview-reset button span.material-icons {
+    color: var(--font-color) !important;
+  }
+
+  .input-preview.preview-size {
+    input {
+      color: red !important;
+    }
+  }
+
+  input[type="range"] {
+    @apply bg-passion;
+  }
+
+  input[type="range"]::-webkit-slider-runnable-track {
+    background: var(--font-color);
+  }
+  
+  input[type="range"]::-webkit-slider-thumb {
+    background: var(--font-color) !important;
+    border: 3px solid var(--border-color) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .paginator {
+    a {
+      background-color: #7d0080;
+      i.material-icons {
+        color: #fff;
+      }
+    }
+  }
+
+  .border-top {
+    border-top: 1px solid var(--border-color) !important;
+  }
+
+  .border-right {
+    border-right: 1px solid var(--border-color) !important;
+  }
+
+  .border-bottom {
+    border-bottom: 1px solid var(--border-color) !important;
+  }
+
+  .border-left {
+    border-left: 1px solid var(--border-color) !important;
+  }
+
+  .border-top-dashed {
+    border-top: 1px dashed var(--border-color) !important;
+  }
+  
+  .border-right-dashed {
+    border-right: 1px dashed var(--border-color) !important;
+  }
+  
+  .border-bottom-dashed {
+    border-bottom: 1px dashed var(--border-color) !important;
+  }
+  
+  .border-left-dashed {
+    border-left: 1px dashed var(--border-color) !important;
+  }
+
+  details {
+    >summary {
+      @apply text-white;
+    }
+    >details {
+      &::after {
+        background-color: #fe1963;
+      }
+      &::before {
+        background-color: #fe1963;
+      }
+    }
+    ul {
+      li {
+        &::after {
+          background-color: #fe1963;
+        }
+        &::before {
+          background-color: #fe1963;
+        }
+        span {
+          color: #fff;
+        }
+        span:last-child {
+          color: #fe1963;
+        }
+      }
+    }
+  }
+
+  .table {
+    color: var(--font-color);
+    thead > tr {
+      @apply bg-[#69147a];
+    }
+    &.striped > tbody > tr:nth-child(odd) {
+      @apply bg-passion;
+    }
+    .material-icons {
+      color: var(--font-color);
+    }
+    [class^="icon-"] {
+      color: var(--font-color);
+    }
+  }
+
+  .form-control {
+    color: #fff;
+    background-color: var(--background-color);
+    //border: 1px solid #fff;
+    .input-group-checkbox {
+      background-color: var(--border-color);
+    }
+  }
+
+  fieldset {
+    border: 1px solid var(--border-color);
+    legend {
+      color: var(--font-color);
+    }
+    dt {
+      label {
+        color: var(--font-color);
+      }
+    }
+    dd {
+      border-left: 1px solid var(--font-color);
+    }
+    dl:hover dt,
+    dl:hover dd {
+      border-color: #c10156;
+    }
+    dl:hover dt label {
+      color: var(--font-color);
+    }
+    dl dd label:hover {
+      color: var(--font-color);
+    }
+  }
+
+  .glyph-list {
+    &__wrapper-item {
+      @apply bg-[#620f72] border-2 border-[#69147a];
+    }
+  }
+
+  /* ==========================================================================
+  Typescale
+  ========================================================================== */
+
+  .typescale {
+    &__label {
+      @apply bg-[#69147a];
+    }
+    &__label-text {
+      @apply text-white;
+    }
+    &__wrapper {
+      @apply bg-[#620f72];
+      &.active {
+        @apply bg-[#fe1963];
+      }
+    }
+  }
+
+  /* ==========================================================================
+  Modal
+  ========================================================================== */
+
+  .modal {
+    &__content {
+      @apply bg-passion;
+    }
+  }
+}

package/src/styles/themes/swiss.scss

@@ -0,0 +1,283 @@
+body[data-theme="swiss"] {
+  background-color: var(--background-color);
+  color: var(--font-color);
+}
+
+[data-theme="swiss"] {
+
+  .hover-scrollbox-x,
+  .hover-scrollbox-y {
+    --scrollbar-color: #fff;
+    --scrollbar-hover-color: rgba(255, 255, 255, 0.76);
+    --scrollbar-space: 0.1rem;
+    --scrollbar-height: calc(.3rem + var(--scrollbar-space));
+    --scrollbar-width: calc(.3rem + var(--scrollbar-space));
+  }
+
+  a {
+    color: var(--font-color);
+    &:hover,
+    &:active {
+      color: var(--font-color);
+    }
+  }
+
+  .active {
+    color: #fff !important;
+  }
+
+  .favorite {
+    color: #fff !important;
+  }
+
+  .disabled,
+  .disabled i {
+    color: var(--border-color);
+  }
+
+  .enabled {
+    color: var(--font-color);
+  }
+
+  .selected {
+    @apply bg-[#e94049];
+  }
+
+  .material-icons {
+    color: var(--font-color);
+  }
+
+  .material-icons-rounded {
+    .material-icons {
+      &:hover {
+        @apply text-[#e94049] bg-[#ffffff];
+      }
+    }
+  }
+
+  /* ==========================================================================
+  App Button
+  ========================================================================== */
+
+  .app-btn {
+    @apply bg-[#d61720];
+    span {
+      @apply text-white;
+    }
+    &:hover {
+      @apply bg-[#fd1e29e0];
+    }
+  }
+
+  input:not(.form-control-hidden):not([type="range"]),
+  select:not(.form-control-hidden) {
+    border: 1px solid var(--border-color) !important;
+  }
+
+  .radio label,
+  .checkbox label {
+    border: 2px solid var(--font-color);
+  }
+  
+  .radio :checked ~ label::before,
+  .checkbox :checked ~ label::before {
+    background-color: var(--font-color);
+  }
+  
+  .radio :checked ~ span,
+  .checkbox :checked ~ span {
+    color: var(--font-color);
+  }
+
+  // Toolbar text.
+  .input-preview.preview-text button {
+    span.material-icons {
+      color: #de1823;
+    }
+    background-color: #fff;
+  }
+
+  // Toolbar switch text.
+  .input-preview.quick-text button span.material-icons,
+  .input-preview.latest-news button span.material-icons,
+  .input-preview.preview-casing button span.material-icons,
+  .input-preview.preview-reset button span.material-icons {
+    color: var(--font-color) !important;
+  }
+
+  .input-preview.preview-size {
+    input {
+      color: red !important;
+    }
+  }
+
+  input[type="range"] {
+    @apply bg-swiss;
+  }
+
+  input[type="range"]::-webkit-slider-runnable-track {
+    background: var(--font-color);
+  }
+  
+  input[type="range"]::-webkit-slider-thumb {
+    background: var(--font-color) !important;
+    border: 3px solid var(--background-color) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .paginator {
+    a {
+      background-color: #de1823;
+      i.material-icons {
+        color: #fff; 
+      }
+    }
+  }
+
+  .border-top {
+    border-top: 1px solid var(--border-color) !important;
+  }
+
+  .border-right {
+    border-right: 1px solid var(--border-color) !important;
+  }
+
+  .border-bottom {
+    border-bottom: 1px solid var(--border-color) !important;
+  }
+
+  .border-left {
+    border-left: 1px solid var(--border-color) !important;
+  }
+
+  .border-top-dashed {
+    border-top: 1px dashed var(--border-color) !important;
+  }
+  
+  .border-right-dashed {
+    border-right: 1px dashed var(--border-color) !important;
+  }
+  
+  .border-bottom-dashed {
+    border-bottom: 1px dashed var(--border-color) !important;
+  }
+  
+  .border-left-dashed {
+    border-left: 1px dashed var(--border-color) !important;
+  }
+
+  details {
+    >summary {
+      @apply text-white;
+    }
+    >details {
+      &::after {
+        background-color: #fff;
+      }
+      &::before {
+        background-color: #fff;
+      }
+    }
+    ul {
+      li {
+        &::after {
+          background-color: #fff;
+        }
+        &::before {
+          background-color: #fff;
+        }
+        span {
+          color: #fff;
+        }
+        span:last-child {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .table {
+    color: var(--font-color);
+    thead > tr {
+      background-color: var(--background-color);
+    }
+    &.striped > tbody > tr:nth-child(odd) {
+      background-color: var(--background-color);
+    }
+    .material-icons {
+      color: var(--font-color);
+    }
+    [class^="icon-"] {
+      color: var(--font-color);
+    }
+  }
+
+  .form-control {
+    color: #fff;
+    background-color: var(--background-color);
+    border: 1px solid #fff;
+    .input-group-checkbox {
+      background-color: var(--border-color);
+    }
+  }
+
+  fieldset {
+    border: 1px solid var(--border-color);
+    legend {
+      color: var(--font-color);
+    }
+    dt {
+      label {
+        color: var(--font-color);
+      }
+    }
+    dd {
+      border-left: 1px solid var(--font-color);
+    }
+    dl:hover dt,
+    dl:hover dd {
+      border-color: #c10156;
+    }
+    dl:hover dt label {
+      color: var(--font-color);
+    }
+    dl dd label:hover {
+      color: var(--font-color);
+    }
+  }
+
+  .glyph-list {
+    &__wrapper-item {
+      @apply bg-[#ed1b24] border-2 border-[#fff];
+    }
+  }
+
+  /* ==========================================================================
+  Typescale
+  ========================================================================== */
+
+  .typescale {
+    &__label {
+      @apply bg-[#d61720];
+    }
+    &__label-text {
+      @apply text-white;
+    }
+    &__wrapper {
+      @apply bg-[#ed1b24];
+      &.active {
+        @apply bg-[#d61720];
+      }
+    }
+  }
+
+  /* ==========================================================================
+  Modal
+  ========================================================================== */
+
+  .modal {
+    &__content {
+      @apply bg-swiss;
+    }
+  }
+}

package/src/styles/tools/_functions.scss

@@ -0,0 +1,5 @@
+// Functions
+
+@function z-index($level: 'base') {
+  @return map-get($layers, $level);
+}

package/src/styles/tools/_mixins.scss

@@ -0,0 +1,159 @@
+// Mixins
+
+@mixin loading-transition($visibilityDuration: 0s, $opacityDuration: 1s) {
+  opacity: 0;
+  visibility: hidden;
+  transition: visibility 0s, opacity 1s linear;
+}
+
+@mixin nav-summary {
+  @apply list-none text-default flex items-center justify-start py-0 px-[5px] h-[34px];
+  input {
+    color: inherit;
+    &:focus {
+      color: inherit;
+    }
+  }
+}
+
+@mixin nav-details {
+  margin: 0;
+  padding: 2px 8px;
+  position: relative;
+  span {
+    color: #3e4245;
+    padding-left: 4px;
+  }
+  span:last-child {
+    color: #00a0be;
+  }
+}
+
+@mixin include-material-icon($icon) {
+  content: $icon;
+  vertical-align: 0%;
+  color: inherit;
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  cursor: pointer;
+}
+
+@mixin tree-lines($height) {
+  margin-left: 16px;
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: -5px;
+    left: 0;
+    width: 1px;
+    height: calc(#{$height} + 6px);
+    background-color: #00a0be;
+  }
+
+  &:last-child::after {
+    height: calc(#{$height} / 2 + 6px);
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: calc(#{$height} / 2);
+    left: 0;
+    width: 8px;
+    height: 1px;
+    background-color: #00a0be;
+  }
+
+  &[open]:not(:last-child)::after {
+    height: calc(100% + 6px);
+  }
+}
+
+@mixin font-family-bold($weight: bold) {
+  font-family: $base-font-family;
+  font-weight: $weight;
+}
+
+@mixin font-family-medium($weight: 300) {
+  font-family: $base-font-family;
+  font-weight: $weight;
+}
+
+@mixin font-family-regular($weight: normal) {
+  font-family: $base-font-family;
+  font-weight: $weight;
+}
+
+@mixin visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+}
+
+@mixin aspect-ratio($width, $height) {
+  &:before {
+    display: block;
+    content: "";
+    width: 100%;
+    padding-top: ($height / $width) * 100%;
+  }
+}
+
+@mixin font-size($sizeValue: 12) {
+  font-size: $sizeValue + px; // fallback for old browsers
+  font-size: (0.0625 * $sizeValue) + rem;
+}
+
+@mixin line-height($heightValue: 20) {
+  line-height: $heightValue + px; // fallback for old browsers
+  line-height: (0.0625 * $heightValue) + rem;
+}
+
+@mixin rhythm($sizeValue: 12, $heightValue: 20) {
+  @include font-size($sizeValue);
+  @include line-height($heightValue);
+}
+
+// @see https://anotheruiguy.gitbooks.io/sassintherealworld_book-i/handy-tools/setting-default-mixin-values.html
+// @include add-border;
+@mixin add-border($border-position: all, $border-size: 1px, $border-pattern: solid, $border-color: $black) {
+  @if $border-position == $border-position-all {
+    border: $border-size $border-pattern $border-color;
+  } @else {
+    border-#{$border-position}: $border-size $border-pattern $border-color;
+  }
+}
+
+@mixin elevation($level) {
+  @if $level == 1 {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  }
+  @else if $level == 2 {
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  }
+  @else if $level == 3 {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  }
+  @else if $level == 4 {
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  }
+  @else if $level == 5 {
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+  }
+}