fontastic 1.3.2 → 1.4.0

package/src/styles/themes/dashboard.scss

@@ -1,293 +0,0 @@
-body[data-theme='dashboard'] {
-  @apply text-dashboard bg-dashboard;
-}
-
-[data-theme='dashboard'] {
-  .hover-scrollbox-x,
-  .hover-scrollbox-y {
-    --scrollbar-color: #00a1be79;
-    --scrollbar-hover-color: #00a1beb9;
-    --scrollbar-space: 0.2rem;
-    --scrollbar-height: calc(0.5rem + var(--scrollbar-space));
-    --scrollbar-width: calc(0.5rem + var(--scrollbar-space));
-  }
-
-  a {
-    @apply text-dashboard;
-    &:hover,
-    &:active {
-      @apply text-dashboard;
-    }
-  }
-
-  .active {
-    @apply text-[#637785];
-  }
-
-  .favorite {
-    @apply text-red-600;
-  }
-
-  .disabled,
-  .disabled i {
-    @apply text-[#637785];
-  }
-
-  .enabled {
-    @apply text-dashboard;
-  }
-
-  .selected {
-    @apply bg-[#1a2631];
-  }
-
-  .material-icons {
-    @apply text-dashboard;
-  }
-
-  .material-icons-rounded {
-    .material-icons {
-      &:hover {
-        @apply text-dashboard bg-[#1a2631];
-      }
-    }
-  }
-
-  /* ==========================================================================
-  Inputs
-  ========================================================================== */
-
-  input,
-  select {
-    @apply text-gray-700;
-    &:focus {
-      @apply text-gray-700;
-    }
-  }
-
-  input:not([type='range']):not([type='color']):not(.form-control-hidden),
-  select:not([type='range']):not(.form-control-hidden) {
-    @apply border border-solid border-dashboard;
-  }
-
-  input[type='color'] {
-    @apply border-none;
-  }
-
-  .radio label,
-  .checkbox label {
-    @apply border-2 border-solid border-white;
-  }
-
-  .radio :checked ~ label::before,
-  .checkbox :checked ~ label::before {
-    @apply bg-white;
-  }
-
-  .radio :checked ~ span,
-  .checkbox :checked ~ span {
-    @apply text-white;
-  }
-
-  /* ==========================================================================
-  Range Slider
-  ========================================================================== */
-
-  input[type='range'] {
-    @apply bg-dashboard;
-  }
-
-  input[type='range']::-webkit-slider-runnable-track {
-    @apply bg-[#2d3e50];
-  }
-
-  input[type='range']::-webkit-slider-thumb {
-    @apply bg-[#2d3e50] border-[#00a0be];
-  }
-
-  /* ==========================================================================
-  App Button
-  ========================================================================== */
-
-  .app-btn {
-    @apply bg-[#1a2631];
-    &:hover {
-      @apply bg-[#2b3b4b];
-    }
-  }
-
-  /* ==========================================================================
-  Toolbar
-  ========================================================================== */
-
-  .input-preview.preview-text button {
-    span.material-icons {
-      color: #fff;
-    }
-    background-color: #2d3e50;
-  }
-
-  .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: #495d74;
-  }
-
-  .paginator {
-    a {
-      @apply bg-[#1a2631];
-      i.material-icons {
-        color: #fff;
-      }
-    }
-  }
-
-  .border-top {
-    @apply border-t border-solid border-dashboard;
-  }
-
-  .border-right {
-    @apply border-r border-solid border-dashboard;
-  }
-
-  .border-bottom {
-    @apply border-b border-solid border-dashboard;
-  }
-
-  .border-left {
-    @apply border-l border-solid border-dashboard;
-  }
-
-  .border-top-dashed {
-    @apply border-t border-dashed border-dashboard;
-  }
-
-  .border-right-dashed {
-    @apply border-r border-dashed border-dashboard;
-  }
-
-  .border-bottom-dashed {
-    @apply border-b border-dashed border-dashboard;
-  }
-
-  .border-left-dashed {
-    @apply border-left border-dashed border-dashboard;
-  }
-
-  details {
-    > summary {
-      @apply text-white;
-    }
-    > details {
-      &::after {
-        background-color: #00a0be;
-      }
-      &::before {
-        background-color: #00a0be;
-      }
-    }
-    ul {
-      li {
-        &::after {
-          background-color: #00a0be;
-        }
-        &::before {
-          background-color: #00a0be;
-        }
-        span {
-          color: #fff;
-        }
-        span:last-child {
-          color: #00a0be;
-        }
-      }
-    }
-  }
-
-  .table {
-    @apply text-white;
-    thead > tr {
-      @apply bg-[#1a2631];
-    }
-    &.striped > tbody > tr:nth-child(odd) {
-      @apply bg-[#172230ce];
-    }
-    .material-icons {
-      @apply text-white;
-    }
-    [class^='icon-'] {
-      @apply text-white;
-    }
-  }
-
-  .form-control {
-    @apply text-white bg-dashboard border border-solid border-dashboard;
-    .input-group-checkbox {
-      @apply bg-dashboard;
-    }
-  }
-
-  fieldset {
-    @apply border border-solid border-dashboard;
-    legend {
-      @apply text-dashboard;
-    }
-    dt {
-      label {
-        @apply text-white;
-      }
-    }
-    dd {
-      @apply border-l border-solid border-[#91a8bebd];
-    }
-    dl:hover dt,
-    dl:hover dd {
-      @apply border-[#0e161f];
-    }
-    dl:hover dt label {
-      @apply text-dashboard;
-    }
-    dl dd label:hover {
-      @apply text-dashboard;
-    }
-  }
-
-  .glyph-list {
-    &__wrapper-item {
-      @apply bg-[#14202b] border-2 border-[#0e161f];
-      &:hover {
-        @apply bg-[#91a8bebd];
-      }
-    }
-  }
-
-  /* ==========================================================================
-  Typescale
-  ========================================================================== */
-
-  .typescale {
-    &__label {
-      @apply bg-[#1a2631];
-    }
-    &__label-text {
-      @apply text-white;
-    }
-    &__wrapper {
-      @apply bg-[#14202b];
-      &.active {
-        @apply bg-[#1a2631];
-      }
-    }
-  }
-
-  /* ==========================================================================
-  Modal
-  ========================================================================== */
-
-  .modal {
-    &__content {
-      @apply bg-dashboard;
-    }
-  }
-}

package/src/styles/themes/euphoria.scss

@@ -1,284 +0,0 @@
-body[data-theme='euphoria'] {
-  background-color: var(--background-color);
-  color: var(--font-color);
-}
-
-[data-theme='euphoria'] {
-  .hover-scrollbox-x,
-  .hover-scrollbox-y {
-    --scrollbar-color: #deb431;
-    --scrollbar-hover-color: #deb431;
-    --scrollbar-space: 0.1rem;
-    --scrollbar-height: calc(0.3rem + var(--scrollbar-space));
-    --scrollbar-width: calc(0.3rem + var(--scrollbar-space));
-  }
-
-  a {
-    color: var(--font-color);
-    &:hover,
-    &:active {
-      color: var(--font-color);
-    }
-  }
-
-  .active {
-    color: #c10156 !important;
-  }
-
-  .favorite {
-    color: #c10156 !important;
-  }
-
-  .disabled,
-  .disabled i {
-    color: #c10156;
-  }
-
-  .enabled {
-    color: var(--font-color);
-  }
-
-  .selected {
-    background-color: var(--border-color);
-  }
-
-  .material-icons {
-    color: #deb431;
-  }
-
-  .material-icons-rounded {
-    .material-icons {
-      &:hover {
-        @apply text-[#943577] bg-[#3a1f32];
-      }
-    }
-  }
-
-  /* ==========================================================================
-  App Button
-  ========================================================================== */
-
-  .app-btn {
-    @apply bg-[#3a1f32];
-    span {
-      @apply text-[#deb431];
-    }
-    &:hover {
-      @apply bg-[#3a1f32b4];
-    }
-  }
-
-  input:not(.form-control-hidden):not([type='range']),
-  select:not(.form-control-hidden) {
-    border: 1px solid #3c1f31 !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-euphoria;
-  }
-
-  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: #3c1f31;
-      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 {
-      color: #deb431;
-    }
-    > details {
-      &::after {
-        background-color: #c80054;
-      }
-      &::before {
-        background-color: #c80054;
-      }
-    }
-    ul {
-      li {
-        &::after {
-          background-color: #c80054;
-        }
-        &::before {
-          background-color: #c80054;
-        }
-        span {
-          color: #deb431;
-        }
-        span:last-child {
-          color: #c80054;
-        }
-      }
-    }
-  }
-
-  .table {
-    color: var(--font-color);
-    thead > tr {
-      background-color: var(--border-color);
-    }
-    &.striped > tbody > tr:nth-child(odd) {
-      @apply bg-euphoria;
-    }
-    .material-icons {
-      color: var(--font-color);
-    }
-    [class^='icon-'] {
-      color: var(--font-color);
-    }
-  }
-
-  .form-control {
-    color: var(--font-color);
-    background-color: var(--background-color);
-    border: 1px solid var(--border-color);
-    .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-[#23121c] border-2 border-[#25141e];
-      &:hover {
-        @apply bg-[#221723];
-      }
-    }
-  }
-
-  /* ==========================================================================
-  Typescale
-  ========================================================================== */
-
-  .typescale {
-    &__label {
-      @apply bg-[#301624];
-    }
-    &__label-text {
-      @apply text-[#deb431];
-    }
-    &__wrapper {
-      @apply bg-[#23121c];
-      &.active {
-        @apply bg-[#301624];
-      }
-    }
-  }
-
-  /* ==========================================================================
-  Modal
-  ========================================================================== */
-
-  .modal {
-    &__content {
-      @apply bg-euphoria;
-    }
-  }
-}