@squeditor/squeditor-framework 1.0.0

package/project-template/src/assets/scss/_base.scss

@@ -0,0 +1,140 @@
+// _base.scss
+
+*,
+::before,
+::after {
+    border-color: var(--sq-color-border);
+}
+
+body {
+    font-family: var(--sq-font-sans);
+    color: var(--sq-color-body-text);
+    background-color: var(--sq-color-body-bg);
+    -webkit-font-smoothing: antialiased;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.sq-nav-link,
+.btn {
+    font-family: var(--sq-font-heading);
+    color: var(--sq-color-heading-text);
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-bottom: 0.75em;
+}
+
+h1 {
+    @apply text-4xl lg:text-5xl;
+}
+
+h2 {
+    @apply text-3xl lg:text-4xl;
+}
+
+h3 {
+    @apply text-2xl lg:text-3xl;
+}
+
+h4 {
+    @apply text-xl lg:text-2xl;
+}
+
+h5 {
+    @apply text-lg lg:text-xl;
+}
+
+h6 {
+    @apply text-base lg:text-lg;
+}
+
+.text-muted {
+    color: var(--sq-color-muted-text);
+}
+
+.bg-muted {
+    background-color: var(--sq-color-muted-bg);
+}
+
+// Headline Highlight Effect
+.sq-highlight {
+    @apply bg-gradient-to-r from-fuchsia-600 to-blue-400 bg-clip-text text-transparent;
+    display: inline-block;
+    position: relative;
+}
+
+// Badge styling
+.sq-badge {
+    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium tracking-tight mb-6 border;
+    color: var(--sq-color-secondary);
+}
+
+// Only apply paragraph and list styles if the author didn't supply their own layout classes
+p:not([class]) {
+    margin-bottom: 1rem;
+    line-height: 1.6;
+}
+
+ul:not([class]),
+ol:not([class]) {
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+}
+
+ul:not([class]) {
+    list-style-type: disc;
+}
+
+ol:not([class]) {
+    list-style-type: decimal;
+}
+
+pre,
+code {
+    @apply bg-fuchsia-600/5 text-fuchsia-700;
+    font-family: var(--sq-font-mono);
+    padding: 0.1rem 0.25rem;
+    border-radius: var(--sq-radius-sm);
+    font-size: 0.875rem;
+    font-style: italic;
+}
+
+pre {
+    @apply bg-zinc-600/5 text-zinc-600;
+    padding: 1rem;
+    border-radius: var(--sq-radius-md);
+    overflow-x: auto;
+}
+
+.sq-theme-dark {
+    code {
+        @apply bg-zinc-100/5 text-fuchsia-400;
+    }
+
+    pre {
+        @apply bg-zinc-100/5 text-zinc-100;
+    }
+}
+
+// Ensure default UIKit links without classes use the secondary color
+a:not([class]) {
+    color: var(--sq-color-secondary);
+    text-decoration: none;
+    transition: color 0.2s ease, text-decoration-color 0.2s ease;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}

package/project-template/src/assets/scss/_components.scss

@@ -0,0 +1,165 @@
+// _components.scss
+
+// 1. Buttons
+.btn {
+    appearance: none;
+    background: var(--sq-btn-bg);
+    color: var(--sq-btn-text);
+    border-radius: var(--sq-btn-radius);
+    height: var(--sq-btn-height);
+    font-size: var(--sq-btn-font-size);
+    font-weight: var(--sq-btn-font-weight);
+
+    @apply inline-flex items-center justify-center gap-2 py-0 px-4 transition-colors transition-all duration-200 cursor-pointer border-none outline-none no-underline;
+}
+
+.btn-sm {
+    @apply text-sm px-3;
+    height: 2rem;
+}
+
+.btn-lg {
+    @apply text-lg px-6;
+    height: 3rem;
+}
+
+.btn-default {
+    --sq-btn-bg: var(--sq-btn-default-bg);
+    --sq-btn-text: var(--sq-btn-default-text);
+    @apply hover:bg-opacity-90;
+}
+
+.btn-primary {
+    --sq-btn-bg: var(--sq-btn-primary-bg);
+    --sq-btn-text: var(--sq-btn-primary-text);
+    @apply hover:bg-opacity-90;
+}
+
+.btn-secondary {
+    --sq-btn-bg: var(--sq-btn-secondary-bg);
+    --sq-btn-text: var(--sq-btn-secondary-text);
+    @apply hover:bg-opacity-90;
+}
+
+.btn-ghost {
+    --sq-btn-bg: transparent;
+    --sq-btn-text: var(--sq-color-body-text);
+
+    &:hover {
+        background: var(--sq-btn-ghost-hover-bg);
+    }
+}
+
+.btn-accent {
+    --sq-btn-bg: var(--sq-btn-accent-bg);
+    --sq-btn-text: var(--sq-btn-accent-text);
+    @apply hover:bg-opacity-90;
+}
+
+// 2. Form Elements
+.form-input,
+.form-select,
+.form-textarea {
+    background: var(--sq-form-bg);
+    border: 1px solid var(--sq-form-border);
+    color: var(--sq-form-text);
+    border-radius: var(--sq-form-radius);
+    min-height: var(--sq-form-min-height);
+    padding: var(--sq-form-padding);
+    padding-top: 0;
+    padding-bottom: 0;
+
+    @apply w-full text-base shadow-sm transition-all outline-none;
+
+    &:focus {
+        border-color: var(--sq-form-focus-border);
+        box-shadow: 0 0 0 4px var(--sq-form-focus-ring);
+    }
+
+    &:disabled {
+        @apply bg-zinc-50;
+    }
+}
+
+.form-textarea {
+    min-height: 5rem;
+    padding-top: var(--sq-form-padding);
+    padding-bottom: var(--sq-form-padding);
+}
+
+.form-checkbox,
+.form-radio {
+    @apply w-4 h-4 border border-solid border-zinc-200 outline-none;
+}
+
+.form-label {
+    @apply block text-sm font-medium mb-1 opacity-60;
+}
+
+// 3. Squeditor Cards & Headers
+.sq-card {
+    background: var(--sq-card-bg);
+    border: 1px solid var(--sq-card-border);
+    border-radius: var(--sq-radius-lg);
+    padding: var(--sq-space-lg);
+    transition: all 0.3s ease;
+
+    &:hover {
+        box-shadow: var(--sq-card-shadow-hover);
+        transform: translateY(-4px);
+    }
+}
+
+.sq--header {
+    z-index: var(--sq-z-sticky);
+
+    &--sticky {
+        box-shadow: var(--sq-shadow-sm);
+        backdrop-filter: blur(10px);
+    }
+}
+
+.sq-theme-dark {
+    .sq-header--sticky {
+        background: rgb(0 0 0 / 75%);
+    }
+}
+
+// ---------------------------------------------------------
+// Page Transitions
+// ---------------------------------------------------------
+
+.sq-page-transition {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    z-index: 9999;
+    pointer-events: none;
+    overflow: hidden;
+
+    &.is-active {
+        pointer-events: all;
+    }
+
+    svg,
+    .sq-transition-slide,
+    .sq-transition-blinds {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    svg {
+        display: block;
+        width: 100vw;
+        height: 100vh;
+    }
+
+    .sq-transition-blinds {
+        display: flex;
+    }
+}

package/project-template/src/assets/scss/_config.scss

@@ -0,0 +1,13 @@
+// _config.scss
+// Framework Configuration Variables
+// ==========================================
+
+// Global Auto-Contrast Minimum Threshold 
+// Adjust this to change when button text flips from dark to light.
+// 4.5 = Strict WCAG AA contrast
+// 2.5 = Loose UI preference (default)
+$sq-min-contrast-ratio: 2.5;
+
+// Global Text Colors for Auto-Contrast
+$sq-contrast-dark-text: #19191b;
+$sq-contrast-light-text: #ffffff;

package/project-template/src/assets/scss/_functions.scss

@@ -0,0 +1,81 @@
+// _functions.scss
+@use "sass:math";
+@use "sass:meta";
+@use "sass:color";
+
+// Calculate relative luminance based on WCAG formulas
+@function luminance($color) {
+    @if meta.type-of($color) !='color' {
+        @return 0; // Fallback
+    }
+
+    $r: math.div(color.channel($color, "red", $space: rgb), 255);
+    $g: math.div(color.channel($color, "green", $space: rgb), 255);
+    $b: math.div(color.channel($color, "blue", $space: rgb), 255);
+
+    @if $r <=0.03928 {
+        $r: math.div($r, 12.92);
+    }
+
+    @else {
+        $r: math.pow(math.div($r + 0.055, 1.055), 2.4);
+    }
+
+    @if $g <=0.03928 {
+        $g: math.div($g, 12.92);
+    }
+
+    @else {
+        $g: math.pow(math.div($g + 0.055, 1.055), 2.4);
+    }
+
+    @if $b <=0.03928 {
+        $b: math.div($b, 12.92);
+    }
+
+    @else {
+        $b: math.pow(math.div($b + 0.055, 1.055), 2.4);
+    }
+
+    @return (0.2126 * $r)+(0.7152 * $g)+(0.0722 * $b);
+}
+
+// Calculate true contrast ratio between two colors
+@function contrast-ratio($color1, $color2) {
+    $luminance1: luminance($color1);
+    $luminance2: luminance($color2);
+
+    $l1: math.max($luminance1, $luminance2);
+    $l2: math.min($luminance1, $luminance2);
+
+    @return math.div($l1 + 0.05, $l2 + 0.05);
+}
+
+// Automatically choose light or dark text based on a minimum contrast threshold
+@function sq-color-contrast($background, $light: $sq-contrast-light-text, $dark: $sq-contrast-dark-text, $min-contrast: $sq-min-contrast-ratio) {
+    @if meta.type-of($background) !='color' {
+        @return $dark; // Safe fallback if a CSS variable is passed directly
+    }
+
+    $light-ratio: contrast-ratio($background, $light);
+    $dark-ratio: contrast-ratio($background, $dark);
+
+    // If light text meets the minimum threshold, ALWAYS prefer it (forces white text on teal/blue).
+    @if $light-ratio >=$min-contrast {
+        @return $light;
+    }
+
+    // If light text fails but dark text meets the minimum threshold, use dark.
+    @if $dark-ratio >=$min-contrast {
+        @return $dark;
+    }
+
+    // If NEITHER meets the minimum, fallback to whichever one is strictly higher.
+    @if $light-ratio >$dark-ratio {
+        @return $light;
+    }
+
+    @else {
+        @return $dark;
+    }
+}

package/project-template/src/assets/scss/_tokens.scss

@@ -0,0 +1,229 @@
+// _tokens.scss — Design tokens as CSS custom properties
+
+// 1. Define SASS Variables for calculations
+$color-primary: #1c2020 !default;
+$color-primary-dark: #ffffff !default;
+$color-secondary: #038677 !default;
+$color-secondary-dark: #d5f37b !default;
+$color-accent: #F0FF44 !default;
+$color-accent-dark: #F0FF44 !default;
+$color-white: #FFFFFF !default;
+$color-muted-text: #777f7f !default;
+$color-muted-bg: #f8f8f8 !default;
+$color-light: #f8f8f8 !default;
+$color-body-bg: #FFFFFF !default;
+$color-body-text: #19191b !default;
+$color-heading-text: #19191b !default;
+$color-border: rgba(138, 138, 138, 0.196) !default;
+
+:root {
+    // Brand colors
+    --sq-color-primary: #{$color-primary};
+    --sq-color-primary-contrast: #{sq-color-contrast($color-primary, $sq-contrast-light-text, $sq-contrast-dark-text, $sq-min-contrast-ratio)};
+    --sq-color-secondary: #{$color-secondary};
+    --sq-color-secondary-contrast: #{sq-color-contrast($color-secondary, $sq-contrast-light-text, $sq-contrast-dark-text, $sq-min-contrast-ratio)};
+    --sq-color-accent: #{$color-accent};
+    --sq-color-accent-contrast: #{sq-color-contrast($color-accent, $sq-contrast-light-text, $sq-contrast-dark-text, $sq-min-contrast-ratio)};
+    --sq-color-white: #{$color-white};
+    --sq-color-muted-text: #{$color-muted-text};
+    --sq-color-muted-bg: #{$color-muted-bg};
+    --sq-color-light: #{$color-light};
+    --sq-color-body-bg: #{$color-body-bg};
+    --sq-color-body-text: #{$color-body-text};
+    --sq-color-heading-text: #{$color-heading-text};
+    --sq-color-border: #{$color-border};
+
+    // Typography
+    --sq-font-sans: "TASA Orbiter", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    --sq-font-heading: "TASA Orbiter", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    --sq-font-serif: 'Georgia', 'Times New Roman', serif;
+    --sq-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+    // Spacing scale
+    --sq-space-xs: 0.25rem;
+    --sq-space-sm: 0.5rem;
+    --sq-space-md: 1rem;
+    --sq-space-lg: 2rem;
+    --sq-space-xl: 4rem;
+    --sq-space-2xl: 8rem;
+
+    // Border radius
+    --sq-radius-xs: 0.15rem;
+    --sq-radius-sm: 0.25rem;
+    --sq-radius-md: 0.5rem;
+    --sq-radius-lg: 0.75rem;
+    --sq-radius-xl: 1rem;
+    --sq-radius-2xl: 1.5rem;
+    --sq-radius-3xl: 2rem;
+    --sq-radius-full: 9999px;
+
+    // Shadows
+    --sq-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+    --sq-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
+    --sq-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
+
+    // Z-index scale
+    --sq-z-sticky: 980;
+    --sq-z-offcanvas: 1000;
+    --sq-z-modal: 1100;
+    --sq-z-tooltip: 1200;
+
+    // Page Transitions
+    --sq-page-transition-from: var(--sq-color-secondary);
+    --sq-page-transition-via: var(--sq-color-accent);
+    --sq-page-transition-to: var(--sq-color-accent);
+
+    // --- Component Tokens ---
+
+    // Buttons
+    --sq-btn-height: 2.25rem; // h-9
+    --sq-btn-bg: transparent;
+    --sq-btn-text: var(--sq-color-body-text);
+    --sq-btn-radius: var(--sq-radius-lg);
+    --sq-btn-font-size: 1rem; // text-base
+    --sq-btn-font-weight: 500;
+
+    --sq-btn-default-bg: var(--sq-color-light);
+    --sq-btn-default-text: var(--sq-color-muted-text);
+    --sq-btn-primary-bg: var(--sq-color-primary);
+    --sq-btn-primary-text: var(--sq-color-primary-contrast);
+    --sq-btn-secondary-bg: var(--sq-color-secondary);
+    --sq-btn-secondary-text: var(--sq-color-secondary-contrast);
+    --sq-btn-accent-bg: var(--sq-color-accent);
+    --sq-btn-accent-text: var(--sq-color-accent-contrast);
+    --sq-btn-ghost-hover-bg: var(--sq-color-light);
+
+    // Forms
+    --sq-form-min-height: 2.5rem; // h-10
+    --sq-form-padding: 0.75rem;
+    --sq-form-bg: var(--sq-color-white);
+    --sq-form-border: #E2E8F0; // zinc-200
+    --sq-form-text: var(--sq-color-body-text);
+    --sq-form-radius: var(--sq-radius-md);
+    --sq-form-focus-ring: rgba(15, 23, 42, 0.1); // primary w/ opacity
+    --sq-form-focus-border: var(--sq-color-primary);
+
+    // Navbar
+    --sq-navbar-nav-min-height: 60px;
+    --sq-navbar-nav-padding: 0px;
+    --sq-navbar-nav-gap: 1.75rem;
+    --sq-navbar-nav-color: var(--sq-color-body-text);
+    --sq-navbar-nav-hover-color: var(--sq-color-secondary);
+
+    // Dropdown
+    --sq-dropdown-width: 300px;
+    --sq-dropdown-padding: 2rem;
+    --sq-dropdown-bg: var(--sq-color-white);
+    --sq-dropdown-text: var(--sq-color-body-text);
+
+    // Accordion
+    --sq-accordion-title-bg: #8b8b8b15; // zinc-50
+    --sq-accordion-title-text: var(--sq-color-primary);
+    --sq-accordion-content-text: var(--sq-color-muted-text); // zinc-600
+
+    // Tabs
+    --sq-tab-text: #94A3B8; // zinc-400
+    --sq-tab-active-text: var(--sq-color-primary);
+    --sq-tab-active-border: var(--sq-color-primary);
+
+    // Offcanvas
+    --sq-offcanvas-width: 300px;
+    --sq-offcanvas-padding: 2rem;
+    --sq-offcanvas-bg: var(--sq-color-white);
+    --sq-offcanvas-text: var(--sq-color-body-text);
+    --sq-offcanvas-border: var(--sq-color-border);
+    --sq-offcanvas-close-color: var(--sq-color-muted-text);
+
+    // Cards
+    --sq-card-bg: var(--sq-color-white);
+    --sq-card-border: var(--sq-color-border);
+    --sq-card-shadow: var(--sq-shadow-sm);
+    --sq-card-shadow-hover: var(--sq-shadow-md);
+
+    // Modal
+    --sq-modal-padding: 1.75rem;
+    --sq-modal-border: var(--sq-color-border);
+    --sq-modal-bg: var(--sq-color-white);
+    --sq-modal-text: var(--sq-color-body-text);
+    --sq-modal-close-color: var(--sq-color-muted-text);
+    --sq-modal-radius: var(--sq-radius-lg);
+
+    // Sticky
+    --sq-sticky-bg: var(--sq-color-white);
+    --sq-sticky-text: var(--sq-color-body-text);
+
+    // Drop
+    --sq-drop-bg: var(--sq-color-white);
+    --sq-drop-text: var(--sq-color-body-text);
+    --sq-drop-border: var(--sq-color-border);
+    --sq-drop-close-color: var(--sq-color-muted-text);
+}
+
+// Global Schema Overrides
+.sq-theme-dark {
+    // Brand colors (Dark Mode Specific Overrides)
+    --sq-color-primary: #{$color-primary-dark};
+    --sq-color-primary-contrast: #{sq-color-contrast($color-primary-dark, $sq-contrast-light-text, $sq-contrast-dark-text, $sq-min-contrast-ratio)};
+    --sq-color-secondary: #{$color-secondary-dark};
+    --sq-color-secondary-contrast: #{sq-color-contrast($color-secondary-dark, $sq-contrast-light-text, $sq-contrast-dark-text, $sq-min-contrast-ratio)};
+    --sq-color-accent: #{$color-accent-dark};
+    --sq-color-accent-contrast: #{sq-color-contrast($color-accent-dark, $sq-contrast-light-text, $sq-contrast-dark-text, $sq-min-contrast-ratio)};
+
+    // Standard structural adjustments
+    --sq-color-body-bg: #19191b;
+    --sq-color-body-text: #F1F5F9;
+    --sq-color-heading-text: #ffffff;
+    --sq-color-muted-text: #c7cacd;
+    --sq-color-muted-bg: #272729;
+
+    // Buttons
+    --sq-btn-default-bg: var(--sq-color-light);
+    --sq-btn-default-text: var(--sq-color-muted-text);
+    --sq-btn-primary-bg: var(--sq-color-primary);
+    --sq-btn-primary-text: var(--sq-color-primary-contrast);
+    --sq-btn-secondary-bg: var(--sq-color-secondary);
+    --sq-btn-secondary-text: var(--sq-color-secondary-contrast);
+    --sq-btn-accent-bg: var(--sq-color-accent);
+    --sq-btn-accent-text: var(--sq-color-accent-contrast);
+    --sq-btn-ghost-hover-bg: var(--sq-color-muted-bg); // zinc-100
+
+    // Forms
+    --sq-form-bg: #19191b;
+    --sq-form-border: #8d8d8d1c;
+    --sq-form-text: #F1F5F9;
+    --sq-form-focus-ring: rgba(99, 102, 241, 0.2); // secondary w/ opacity
+    --sq-form-focus-border: var(--sq-color-secondary);
+
+    // Accordion
+    --sq-accordion-title-text: #F1F5F9;
+    --sq-accordion-content-text: var(--sq-color-muted-text);
+
+    // Tabs
+    --sq-tab-text: var(--sq-color-muted-text);
+    --sq-tab-active-text: #FFFFFF;
+    --sq-tab-active-border: var(--sq-color-secondary);
+
+    // Offcanvas
+    --sq-offcanvas-bg: #19191b;
+    --sq-offcanvas-text: #F1F5F9;
+    --sq-offcanvas-close-color: var(--sq-color-muted-text);
+
+    // Modal
+    --sq-modal-bg: #19191b;
+    --sq-modal-text: #F1F5F9;
+    --sq-modal-close-color: var(--sq-color-muted-text);
+
+    // Sticky
+    --sq-sticky-bg: #19191b;
+    --sq-sticky-text: #F1F5F9;
+
+    // Drop
+    --sq-drop-bg: #19191b;
+    --sq-drop-text: #F1F5F9;
+    --sq-drop-close-color: var(--sq-color-muted-text);
+
+    // Cards
+    --sq-card-bg: #19191b;
+    --sq-card-shadow: none;
+    --sq-card-shadow-hover: none;
+}

package/project-template/src/assets/scss/_transitions.scss

@@ -0,0 +1,36 @@
+// src/assets/scss/_transitions.scss
+
+.sq-page-transition {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    z-index: 9999;
+    pointer-events: none;
+    overflow: hidden;
+
+    &.is-active {
+        pointer-events: all;
+    }
+
+    svg,
+    .sq-transition-slide,
+    .sq-transition-blinds {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    svg {
+        display: block;
+        width: 100vw;
+        height: 100vh;
+    }
+
+    .sq-transition-blinds {
+        display: flex;
+    }
+}