fontastic 0.1.3

package/src/styles/fonts/roboto.scss

@@ -0,0 +1,32 @@
+@font-face {
+    font-family: 'Roboto';
+    src: url('../../assets/fonts/roboto/Roboto-Regular-webfont.eot');
+    src: url('../../assets/fonts/roboto/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../../assets/fonts/roboto/Roboto-Regular-webfont.woff') format('woff'),
+         url('../../assets/fonts/roboto/Roboto-Regular-webfont.ttf') format('truetype'),
+         url('../../assets/fonts/roboto/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Roboto';
+    src: url('../../assets/fonts/roboto/Roboto-Medium-webfont.eot');
+    src: url('../../assets/fonts/roboto/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../../assets/fonts/roboto/Roboto-Medium-webfont.woff') format('woff'),
+         url('../../assets/fonts/roboto/Roboto-Medium-webfont.ttf') format('truetype'),
+         url('../../assets/fonts/roboto/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Roboto';
+    src: url('../../assets/fonts/roboto/Roboto-Bold-webfont.eot');
+    src: url('../../assets/fonts/roboto/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../../assets/fonts/roboto/Roboto-Bold-webfont.woff') format('woff'),
+         url('../../assets/fonts/roboto/Roboto-Bold-webfont.ttf') format('truetype'),
+         url('../../assets/fonts/roboto/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
+    font-weight: bold;
+    font-style: normal;
+}

package/src/styles/themes/dashboard.scss

@@ -0,0 +1,294 @@
+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(.5rem + var(--scrollbar-space));
+    --scrollbar-width: calc(.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

@@ -0,0 +1,283 @@
+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(.3rem + var(--scrollbar-space));
+    --scrollbar-width: calc(.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;
+    }
+  }
+}