fontastic 0.1.7 → 0.2.0

package/src/styles/themes/swiss.scss

@@ -1,283 +1,284 @@
-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;
-    }
-  }
-}
+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(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: #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.css

@@ -0,0 +1,17 @@
+@import "tailwindcss";
+
+@import "@fontsource-variable/inter";
+
+@import "./styles/base/reset.css";
+@import "./styles/base/variables.css";
+
+@import "./styles/components/scrollbox.css";
+@import "./styles/components/splash.css";
+@import "./styles/components/spinner.css";
+@import "./styles/components/buttons.css";
+@import "./styles/components/forms.css";
+@import "./styles/components/toolbar.css";
+@import "./styles/components/cards.css";
+@import "./styles/components/navigation.css";
+
+@import "./styles/fonts/md.css";

package/src/tsconfig.app.json

@@ -1,20 +1,11 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "baseUrl": "",
-    "types": [
-      "node"
-    ]
-  },
-  "files": [
-    "main.ts",
-    "polyfills.ts"
-  ],
-  "include": [
-    "**/*.d.ts"
-  ],
-  "exclude": [
-    "**/*.spec.ts"
-  ]
-}
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "..",
+    "types": ["node"]
+  },
+  "files": ["main.ts"],
+  "include": ["**/*.ts", "**/*.d.ts"],
+  "exclude": ["**/*.spec.ts", "**/*.test.ts", "**/vitest.d.ts", "**/vitest.config.*", "**/test-setup.ts", "../app/**/*.ts"]
+}

package/src/tsconfig.spec.json

@@ -1,23 +1,10 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/spec",
-    "types": [
-      "jasmine",
-      "node"
-    ]
-  },
-  "files": [
-    "test.ts",
-    "polyfills-test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ],
-  "exclude": [
-    "dist",
-    "release",
-    "node_modules"
-  ]
-}
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "outDir": "../out-tsc/spec",
+    "types": ["vitest/globals", "node"]
+  },
+  "include": ["**/*.spec.ts", "**/*.d.ts"],
+  "exclude": ["dist", "release", "node_modules"]
+}

package/src/typings.d.ts

@@ -1,9 +1,9 @@
-/* SystemJS module definition */
-declare const nodeModule: NodeModule;
-interface NodeModule {
-  id: string;
-}
-interface Window {
-  process: any;
-  require: any;
-}
+/* SystemJS module definition */
+declare const nodeModule: NodeModule;
+interface NodeModule {
+  id: string;
+}
+interface Window {
+  process: any;
+  require: any;
+}

package/src/vitest.d.ts

@@ -0,0 +1 @@
+/// <reference types="vitest/globals" />