fontastic 0.1.3 → 0.2.0

package/src/styles/base/variables.css

@@ -0,0 +1,356 @@
+@theme {
+  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+/* ---------------------------------------------------------------------------
+   Light mode — warm stone neutrals
+   --------------------------------------------------------------------------- */
+
+.light {
+  --surface-0: #FBFBF9;
+  --surface-1: #FFFFFF;
+  --surface-2: #F3F2EF;
+  --surface-3: #EAE8E4;
+
+  --border-subtle: #E9E7E2;
+  --border-default: #D8D5CE;
+
+  --text-primary: #1C1917;
+  --text-secondary: #57534E;
+  --text-muted: #A8A29E;
+
+  --accent: #92400E;
+  --accent-hover: #78350F;
+  --accent-text: #FFFFFF;
+  --accent-muted: rgba(146, 64, 14, 0.08);
+
+  --card-bg: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%);
+
+  --selected-bg: rgba(99, 102, 241, 0.06);
+  --selected-border: rgba(99, 102, 241, 0.25);
+  --hover-bg: rgba(0, 0, 0, 0.03);
+
+  --context-bg: #FFFFFF;
+  --context-border: #E5E3DE;
+  --context-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
+
+  --input-bg: #FFFFFF;
+  --input-border: #D2CFC8;
+  --input-focus-border: #6366F1;
+
+  --slider-track: #E5E3DE;
+  --slider-thumb: #868076;
+  --slider-thumb-hover: #635E55;
+
+  --scrollbar-thumb-color: #D2CFC8;
+  --scrollbar-thumb-hover-color: #B0ABA3;
+}
+
+/* ---------------------------------------------------------------------------
+   Dark mode — deep cool zinc
+   --------------------------------------------------------------------------- */
+
+.dark {
+  --surface-0: #0E0E11;
+  --surface-1: #161619;
+  --surface-2: #1E1E23;
+  --surface-3: #28282F;
+
+  --border-subtle: #232329;
+  --border-default: #2E2E36;
+
+  --text-primary: #EDEDF0;
+  --text-secondary: #A3A3B0;
+  --text-muted: #55555F;
+
+  --accent: #D97706;
+  --accent-hover: #B45309;
+  --accent-text: #FFFFFF;
+  --accent-muted: rgba(217, 119, 6, 0.10);
+
+  --card-bg: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%);
+
+  --selected-bg: rgba(129, 140, 248, 0.08);
+  --selected-border: rgba(129, 140, 248, 0.30);
+  --hover-bg: rgba(255, 255, 255, 0.04);
+
+  --context-bg: #1C1C21;
+  --context-border: #2E2E36;
+  --context-shadow: 0 4px 24px rgba(0, 0, 0, 0.32), 0 1px 4px rgba(0, 0, 0, 0.16);
+
+  --input-bg: #1C1C21;
+  --input-border: #3B3B44;
+  --input-focus-border: #818CF8;
+
+  --slider-track: #27272E;
+  --slider-thumb: #55555F;
+  --slider-thumb-hover: #7C7C88;
+
+  --scrollbar-thumb-color: #27272E;
+  --scrollbar-thumb-hover-color: #3B3B44;
+}
+
+/* ---------------------------------------------------------------------------
+   Dashboard — dark blue-green
+   --------------------------------------------------------------------------- */
+
+.dashboard {
+  --surface-0: #14202b;
+  --surface-1: #1a2631;
+  --surface-2: #1e2d3a;
+  --surface-3: #2d3e50;
+
+  --border-subtle: #0e161f;
+  --border-default: #2d3e50;
+
+  --text-primary: #FFFFFF;
+  --text-secondary: #637785;
+  --text-muted: #3d5060;
+
+  --accent: #00a0be;
+  --accent-hover: #008da6;
+  --accent-text: #FFFFFF;
+  --accent-muted: rgba(0, 160, 190, 0.10);
+
+  --card-bg: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%);
+
+  --selected-bg: rgba(0, 160, 190, 0.10);
+  --selected-border: rgba(0, 160, 190, 0.30);
+  --hover-bg: rgba(255, 255, 255, 0.04);
+
+  --context-bg: #1a2631;
+  --context-border: #2d3e50;
+  --context-shadow: 0 4px 24px rgba(0, 0, 0, 0.32), 0 1px 4px rgba(0, 0, 0, 0.16);
+
+  --input-bg: #1a2631;
+  --input-border: #2d3e50;
+  --input-focus-border: #00a0be;
+
+  --slider-track: #0e161f;
+  --slider-thumb: #637785;
+  --slider-thumb-hover: #7a8f9e;
+
+  --scrollbar-thumb-color: #2d3e50;
+  --scrollbar-thumb-hover-color: #3d5060;
+}
+
+/* ---------------------------------------------------------------------------
+   Euphoria — dark purple with gold accents
+   --------------------------------------------------------------------------- */
+
+.euphoria {
+  --surface-0: #23121c;
+  --surface-1: #2a1623;
+  --surface-2: #3a1f32;
+  --surface-3: #4a2942;
+
+  --border-subtle: #3a1f32;
+  --border-default: #4a2942;
+
+  --text-primary: #deb431;
+  --text-secondary: #943577;
+  --text-muted: #5a2a48;
+
+  --accent: #c10156;
+  --accent-hover: #a30148;
+  --accent-text: #FFFFFF;
+  --accent-muted: rgba(193, 1, 86, 0.10);
+
+  --card-bg: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%);
+
+  --selected-bg: rgba(222, 180, 49, 0.10);
+  --selected-border: rgba(222, 180, 49, 0.30);
+  --hover-bg: rgba(222, 180, 49, 0.05);
+
+  --context-bg: #2a1623;
+  --context-border: #4a2942;
+  --context-shadow: 0 4px 24px rgba(0, 0, 0, 0.32), 0 1px 4px rgba(0, 0, 0, 0.16);
+
+  --input-bg: #2a1623;
+  --input-border: #4a2942;
+  --input-focus-border: #deb431;
+
+  --slider-track: #3a1f32;
+  --slider-thumb: #943577;
+  --slider-thumb-hover: #deb431;
+
+  --scrollbar-thumb-color: #3a1f32;
+  --scrollbar-thumb-hover-color: #4a2942;
+}
+
+/* ---------------------------------------------------------------------------
+   Midnight — pure black
+   --------------------------------------------------------------------------- */
+
+.midnight {
+  --surface-0: #000000;
+  --surface-1: #0a0a0a;
+  --surface-2: #111111;
+  --surface-3: #1a1a1a;
+
+  --border-subtle: #1a1a1a;
+  --border-default: #2e2e2e;
+
+  --text-primary: #FFFFFF;
+  --text-secondary: #999999;
+  --text-muted: #555555;
+
+  --accent: #777777;
+  --accent-hover: #999999;
+  --accent-text: #FFFFFF;
+  --accent-muted: rgba(119, 119, 119, 0.10);
+
+  --card-bg: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%);
+
+  --selected-bg: rgba(255, 255, 255, 0.06);
+  --selected-border: rgba(255, 255, 255, 0.20);
+  --hover-bg: rgba(255, 255, 255, 0.04);
+
+  --context-bg: #0a0a0a;
+  --context-border: #2e2e2e;
+  --context-shadow: 0 4px 24px rgba(0, 0, 0, 0.48), 0 1px 4px rgba(0, 0, 0, 0.24);
+
+  --input-bg: #0a0a0a;
+  --input-border: #2e2e2e;
+  --input-focus-border: #FFFFFF;
+
+  --slider-track: #1a1a1a;
+  --slider-thumb: #555555;
+  --slider-thumb-hover: #777777;
+
+  --scrollbar-thumb-color: #1a1a1a;
+  --scrollbar-thumb-hover-color: #2e2e2e;
+}
+
+/* ---------------------------------------------------------------------------
+   Mellow — bright yellow with dark text
+   --------------------------------------------------------------------------- */
+
+.mellow {
+  --surface-0: #ffdf00;
+  --surface-1: #ffe52a;
+  --surface-2: #ddc000;
+  --surface-3: #ccb000;
+
+  --border-subtle: #ccb000;
+  --border-default: #252525;
+
+  --text-primary: #252525;
+  --text-secondary: #3e4245;
+  --text-muted: #777777;
+
+  --accent: #cc0000;
+  --accent-hover: #aa0000;
+  --accent-text: #FFFFFF;
+  --accent-muted: rgba(204, 0, 0, 0.08);
+
+  --card-bg: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%);
+
+  --selected-bg: rgba(37, 37, 37, 0.10);
+  --selected-border: rgba(37, 37, 37, 0.30);
+  --hover-bg: rgba(0, 0, 0, 0.06);
+
+  --context-bg: #ffe52a;
+  --context-border: #252525;
+  --context-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
+
+  --input-bg: #ffe52a;
+  --input-border: #252525;
+  --input-focus-border: #cc0000;
+
+  --slider-track: #ccb000;
+  --slider-thumb: #252525;
+  --slider-thumb-hover: #3e4245;
+
+  --scrollbar-thumb-color: #252525;
+  --scrollbar-thumb-hover-color: #3e4245;
+}
+
+/* ---------------------------------------------------------------------------
+   Passion — deep purple with hot pink accents
+   --------------------------------------------------------------------------- */
+
+.passion {
+  --surface-0: #620f72;
+  --surface-1: #69147a;
+  --surface-2: #7d0080;
+  --surface-3: #8a1090;
+
+  --border-subtle: #69147a;
+  --border-default: #fe1963;
+
+  --text-primary: #FFFFFF;
+  --text-secondary: #e0a0c0;
+  --text-muted: #9a5080;
+
+  --accent: #fe1963;
+  --accent-hover: #e01555;
+  --accent-text: #FFFFFF;
+  --accent-muted: rgba(254, 25, 99, 0.10);
+
+  --card-bg: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%);
+
+  --selected-bg: rgba(254, 25, 99, 0.12);
+  --selected-border: rgba(254, 25, 99, 0.35);
+  --hover-bg: rgba(255, 255, 255, 0.06);
+
+  --context-bg: #69147a;
+  --context-border: #fe1963;
+  --context-shadow: 0 4px 24px rgba(0, 0, 0, 0.32), 0 1px 4px rgba(0, 0, 0, 0.16);
+
+  --input-bg: #69147a;
+  --input-border: #fe1963;
+  --input-focus-border: #fe1963;
+
+  --slider-track: #69147a;
+  --slider-thumb: #fe1963;
+  --slider-thumb-hover: #ff4d88;
+
+  --scrollbar-thumb-color: #fe1963;
+  --scrollbar-thumb-hover-color: #ff4d88;
+}
+
+/* ---------------------------------------------------------------------------
+   Swiss — bold red with white text
+   --------------------------------------------------------------------------- */
+
+.swiss {
+  --surface-0: #ed1b24;
+  --surface-1: #d61720;
+  --surface-2: #c01520;
+  --surface-3: #aa1018;
+
+  --border-subtle: #d61720;
+  --border-default: #ffcccc;
+
+  --text-primary: #FFFFFF;
+  --text-secondary: #ffcccc;
+  --text-muted: #ff9999;
+
+  --accent: #d61720;
+  --accent-hover: #b01018;
+  --accent-text: #FFFFFF;
+  --accent-muted: rgba(214, 23, 32, 0.10);
+
+  --card-bg: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%);
+
+  --selected-bg: rgba(255, 255, 255, 0.12);
+  --selected-border: rgba(255, 255, 255, 0.30);
+  --hover-bg: rgba(255, 255, 255, 0.08);
+
+  --context-bg: #d61720;
+  --context-border: #ffcccc;
+  --context-shadow: 0 4px 24px rgba(0, 0, 0, 0.24), 0 1px 4px rgba(0, 0, 0, 0.12);
+
+  --input-bg: #d61720;
+  --input-border: #ffcccc;
+  --input-focus-border: #FFFFFF;
+
+  --slider-track: #aa1018;
+  --slider-thumb: #ffcccc;
+  --slider-thumb-hover: #FFFFFF;
+
+  --scrollbar-thumb-color: #aa1018;
+  --scrollbar-thumb-hover-color: #ffcccc;
+}

package/src/styles/components/buttons.css

@@ -0,0 +1,108 @@
+/* ==========================================================================
+Buttons — Base
+========================================================================== */
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    font-weight: 500;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    outline: none;
+    white-space: nowrap;
+    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* ==========================================================================
+Buttons — Sizes
+========================================================================== */
+
+.btn-xs {
+    font-size: 11px;
+    padding: 2px 8px;
+    border-radius: 3px;
+}
+
+.btn-sm {
+    font-size: 12px;
+    padding: 4px 12px;
+}
+
+.btn-md {
+    font-size: 13px;
+    padding: 6px 16px;
+}
+
+.btn-lg {
+    font-size: 14px;
+    padding: 8px 20px;
+}
+
+.btn-xl {
+    font-size: 15px;
+    padding: 10px 24px;
+    border-radius: 6px;
+}
+
+/* ==========================================================================
+Buttons — Variants
+========================================================================== */
+
+.btn-theme {
+    background-color: var(--surface-3);
+    color: var(--text-primary);
+    border-color: var(--border-default);
+}
+
+.btn-theme:hover:not(:disabled) {
+    background-color: var(--border-default);
+}
+
+.btn-default {
+    background-color: var(--surface-2);
+    color: var(--text-secondary);
+    border-color: var(--border-default);
+}
+
+.btn-default:hover:not(:disabled) {
+    background-color: var(--surface-3);
+    color: var(--text-primary);
+}
+
+.btn-outline {
+    background-color: transparent;
+    color: var(--text-secondary);
+    border-color: var(--border-default);
+}
+
+.btn-outline:hover:not(:disabled) {
+    background-color: var(--surface-2);
+    color: var(--text-primary);
+}
+
+.btn-ghost {
+    background-color: transparent;
+    color: var(--text-secondary);
+}
+
+.btn-ghost:hover:not(:disabled) {
+    background-color: var(--hover-bg);
+    color: var(--text-primary);
+}
+
+.btn-danger {
+    background-color: #dc2626;
+    color: #ffffff;
+}
+
+.btn-danger:hover:not(:disabled) {
+    background-color: #b91c1c;
+}

package/src/styles/components/cards.css

@@ -0,0 +1,60 @@
+/* ==========================================================================
+Cards
+========================================================================== */
+
+.card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+    margin-bottom: 2rem;
+}
+
+.card-header {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--border-subtle);
+    min-height: 56px;
+    padding: 0.75rem 1.5rem;
+}
+
+.card-title {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 1rem;
+}
+
+.card-title h2,
+.card-title h3,
+.card-title h4,
+.card-title h5,
+.card-title h6 {
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.25;
+    color: var(--text-primary);
+}
+
+.card-tools {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.75rem;
+}
+
+.card-body {
+    padding: 1.5rem;
+}
+
+.card-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: space-between;
+    padding: 0.75rem 1.5rem;
+    position: relative;
+    border-top: 1px solid var(--border-subtle);
+}

package/src/styles/components/forms.css

@@ -0,0 +1,70 @@
+/* ==========================================================================
+Form Label
+========================================================================== */
+
+.form-label {
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    margin-bottom: 6px;
+}
+
+/* ==========================================================================
+Form Input
+========================================================================== */
+
+.form-input {
+    background-color: var(--input-bg);
+    border: 1px solid var(--input-border);
+    border-radius: 4px;
+    height: 28px;
+    padding: 4px 8px;
+    color: var(--text-primary);
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 1.5;
+    outline: none;
+    box-shadow: none;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.form-input:focus {
+    border-color: var(--text-muted);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
+}
+
+.form-input::placeholder {
+    color: var(--text-muted);
+}
+
+/* ==========================================================================
+Form Select
+========================================================================== */
+
+.form-select {
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: var(--input-bg);
+    border: 1px solid var(--input-border);
+    border-radius: 4px;
+    height: 28px;
+    padding: 4px 28px 4px 8px;
+    color: var(--text-primary);
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 1.5;
+    outline: none;
+    box-shadow: none;
+    cursor: pointer;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    background-size: 12px;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.form-select:focus {
+    border-color: var(--text-muted);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
+}

package/src/styles/components/navigation.css

@@ -0,0 +1,24 @@
+/* ==========================================================================
+Settings Navigation
+========================================================================== */
+
+.settings-nav-link {
+    display: block;
+    padding: 6px 12px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    border-radius: 4px;
+    text-decoration: none;
+    transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.settings-nav-link:hover {
+    background-color: var(--hover-bg);
+    color: var(--text-primary);
+}
+
+.settings-nav-link.active {
+    background-color: var(--surface-3);
+    color: var(--text-primary);
+}

package/src/styles/components/scrollbox.css

@@ -0,0 +1,50 @@
+/* ==========================================================================
+Scrollbox
+========================================================================== */
+
+.scrollbox-x,
+.scrollbox-y {
+  --scrollbar-thumb: var(--scrollbar-thumb-color);
+  --scrollbar-thumb-hover: var(--scrollbar-thumb-hover-color);
+  --scrollbar-track: transparent;
+  --scrollbar-size: 5px;
+  --scrollbar-radius: 3px;
+}
+
+.scrollbox-x {
+  overflow-x: overlay;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+  scrollbar-width: thin;
+}
+
+.scrollbox-y {
+  overflow-y: overlay;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+  scrollbar-width: thin;
+}
+
+/* Webkit track */
+.scrollbox-x::-webkit-scrollbar {
+  height: var(--scrollbar-size);
+}
+
+.scrollbox-y::-webkit-scrollbar {
+  width: var(--scrollbar-size);
+}
+
+.scrollbox-x::-webkit-scrollbar-track,
+.scrollbox-y::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+
+/* Webkit thumb */
+.scrollbox-x::-webkit-scrollbar-thumb,
+.scrollbox-y::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-radius: var(--scrollbar-radius);
+}
+
+.scrollbox-x::-webkit-scrollbar-thumb:hover,
+.scrollbox-y::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover);
+}

package/src/styles/components/spinner.css

@@ -0,0 +1,7 @@
+.app-spinner {
+  @apply relative block rounded-full w-[19px] h-[19px] m-0 p-0 opacity-0 overflow-hidden border-4 border-[#00a0be];
+  border-left: 4px solid #fff;
+  &.is-animating {
+    @apply opacity-100 animate-spin;
+  }
+}