fontastic 0.1.7 → 0.2.0

package/src/styles/components/splash.css

@@ -0,0 +1,47 @@
+/* ==========================================================================
+Splash Screen
+========================================================================== */
+
+.splash-screen {
+  display: none;
+}
+
+body.app-loading .splash-screen {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background-color: var(--surface-0);
+}
+
+body.app-loading .splash-screen .dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin: 0 3px;
+  border-radius: 50%;
+  background-color: var(--accent);
+  opacity: 0.5;
+  animation: splash-bounce 1.4s ease-in-out infinite both;
+}
+
+body.app-loading .splash-screen .dot-2 {
+  animation-delay: 0.16s;
+}
+
+body.app-loading .splash-screen .dot-3 {
+  animation-delay: 0.32s;
+}
+
+@keyframes splash-bounce {
+  0%, 80%, 100% {
+    transform: scale(0.6);
+    opacity: 0.3;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

package/src/styles/components/toolbar.css

@@ -0,0 +1,92 @@
+/* ==========================================================================
+Color Picker
+========================================================================== */
+
+.color-picker {
+    -webkit-appearance: none !important;
+    appearance: none !important;
+    width: 24px !important;
+    height: 24px !important;
+    padding: 0 !important;
+    border: 2px solid var(--input-border) !important;
+    border-radius: 50% !important;
+    background: none !important;
+    cursor: pointer !important;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.color-picker:hover {
+    border-color: var(--text-muted) !important;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+}
+
+.color-picker::-webkit-color-swatch-wrapper {
+    padding: 2px !important;
+}
+
+.color-picker::-webkit-color-swatch {
+    border: none !important;
+    border-radius: 50% !important;
+}
+
+/* ==========================================================================
+Preview Range (font size slider)
+========================================================================== */
+
+.preview-range {
+    -webkit-appearance: none !important;
+    appearance: none !important;
+    width: 100px !important;
+    height: 3px !important;
+    background: var(--slider-track) !important;
+    border-radius: 2px !important;
+    outline: none !important;
+    cursor: pointer;
+}
+
+.preview-range::-webkit-slider-thumb {
+    -webkit-appearance: none !important;
+    appearance: none !important;
+    width: 12px !important;
+    height: 12px !important;
+    background: var(--slider-thumb) !important;
+    border-radius: 50% !important;
+    border: none !important;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+}
+
+.preview-range::-webkit-slider-thumb:hover {
+    background: var(--slider-thumb-hover) !important;
+}
+
+/* ==========================================================================
+Reset Button
+========================================================================== */
+
+.toolbar-reset-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    color: var(--text-muted);
+    background-color: var(--hover-bg);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.toolbar-reset-btn span {
+    font-size: 22px;
+}
+
+.toolbar-reset-btn:hover {
+    background-color: var(--selected-bg);
+    color: var(--text-primary);
+}
+
+.toolbar-reset-btn:focus {
+    outline: none;
+}

package/src/styles/fonts/md.css

@@ -0,0 +1,39 @@
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  font-weight: 100 700;
+  font-display: block;
+  src: url(../../assets/fonts/md/MaterialSymbolsOutlined.woff2) format('woff2');
+}
+
+.material-symbols-outlined {
+  color: inherit;
+  font-family: "Material Symbols Outlined";
+  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;
+  vertical-align: middle;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "liga";
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
+}
+
+.material-symbols-outlined.icon-xs { font-size: 18px; }
+.material-symbols-outlined.icon-sm { font-size: 20px; }
+.material-symbols-outlined.icon-md { font-size: 24px; }
+.material-symbols-outlined.icon-lg { font-size: 28px; }
+.material-symbols-outlined.icon-xl { font-size: 32px; }