@squeditor/squeditor-framework 1.0.0

package/project-template/src/assets/scss/_uikit-overrides.scss

@@ -0,0 +1,187 @@
+// _uikit-overrides.scss
+
+// 0. Base
+.uk-text-center {
+    text-align: center;
+}
+
+// 1. Accordion
+.uk-accordion {
+    @apply space-y-4;
+
+    &-title {
+        background: var(--sq-accordion-title-bg);
+        color: var(--sq-accordion-title-text);
+
+        @apply text-lg font-bold py-4 px-6 rounded-lg transition-colors hover:bg-opacity-90 flex items-center justify-between !no-underline;
+
+        &::after {
+            @apply transition-transform duration-300;
+        }
+    }
+
+    &-card {
+        @apply border p-4;
+        border-radius: var(--sq-radius);
+        border-color: var(--sq-accordion-border);
+    }
+
+    &-divider {
+        >li:not(:last-child) {
+            border-bottom: 1px solid var(--sq-accordion-border);
+        }
+    }
+
+    &-title {
+        &::after {
+            content: "\e9e8";
+            font-family: "Squeditor Icons";
+            font-size: 1.5rem;
+            font-weight: 300;
+        }
+    }
+
+    .uk-open>&-title {
+        &::after {
+            @apply -rotate-90;
+        }
+    }
+
+    &-content {
+        color: var(--sq-accordion-content-text);
+        @apply py-4 px-6 leading-relaxed;
+    }
+}
+
+// 2. Tabs
+.uk-tab {
+    @apply relative flex items-center gap-2 mb-8 ml-0;
+
+    &::before {
+        content: "";
+        @apply absolute bottom-0 left-0 right-0 w-full border-b;
+    }
+
+    >li {
+        @apply p-0;
+
+        &.uk-active>a {
+            color: var(--sq-tab-active-text);
+            border-color: var(--sq-tab-active-border);
+            @apply bg-transparent;
+        }
+
+        >a {
+            color: var(--sq-tab-text);
+            @apply px-4 py-2 text-base font-semibold border-b-2 border-transparent transition-all !no-underline hover:text-opacity-80;
+        }
+    }
+}
+
+// 3. Offcanvas
+.uk-offcanvas-bar {
+    background: var(--sq-offcanvas-bg);
+    color: var(--sq-offcanvas-text);
+    border-right: 1px solid var(--sq-offcanvas-border);
+    width: var(--sq-offcanvas-width);
+    padding: var(--sq-offcanvas-padding);
+
+    @apply shadow-xl;
+
+    .uk-offcanvas-close {
+        color: var(--sq-offcanvas-close-color);
+        @apply top-4 right-4 hover:opacity-70 transition-colors;
+    }
+
+    // Default Nav styling inside Offcanvas
+    .uk-nav-default {
+        >li>a {
+            @apply hover:text-secondary transition-colors py-2 px-0;
+            color: inherit;
+            opacity: 0.8;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+
+        >li.uk-active>a {
+            @apply font-bold;
+            opacity: 1;
+        }
+    }
+}
+
+// 4. Dropdown Nav
+.uk-navbar {
+
+    &-nav {
+        display: flex;
+        gap: var(--sq-navbar-nav-gap);
+    }
+
+    &-nav>li>a,
+    &-item,
+    &-toggle {
+        @apply transition-all;
+        min-height: var(--sq-navbar-nav-min-height);
+        color: var(--sq-navbar-nav-color);
+        padding: var(--sq-navbar-nav-padding);
+
+        &:hover {
+            color: var(--sq-navbar-nav-hover-color);
+        }
+    }
+
+    &-dropdown {
+        width: var(--sq-dropdown-width);
+        padding: var(--sq-dropdown-padding);
+        background: var(--sq-dropdown-bg);
+        color: var(--sq-dropdown-text);
+
+        @apply shadow-xl;
+    }
+
+    a {
+        text-decoration: none !important;
+    }
+}
+
+// 5. Sticky
+.uk-sticky {
+    @apply transition-all duration-300 ease-in-out;
+    z-index: 1000;
+
+    &.sq-header--sticky {
+        background: var(--sq-sticky-bg);
+        color: var(--sq-sticky-text);
+    }
+}
+
+// 6. Modal
+.uk-modal-dialog {
+    background: var(--sq-modal-bg);
+    color: var(--sq-modal-text);
+    border-radius: var(--sq-modal-radius);
+    padding: var(--sq-modal-padding);
+    box-shadow: var(--sq-shadow-xl);
+
+    .uk-modal-header {
+        border-bottom: 1px solid var(--sq-modal-border);
+        padding: var(--sq-modal-padding);
+    }
+
+    .uk-modal-footer {
+        border-top: 1px solid var(--sq-modal-border);
+        padding: var(--sq-modal-padding);
+    }
+}
+
+// 7. Dropdown
+.uk-dropdown {
+    background: var(--sq-dropdown-bg);
+    color: var(--sq-dropdown-text);
+    border-radius: var(--sq-radius);
+    padding: var(--sq-dropdown-padding);
+    box-shadow: var(--sq-shadow-xl);
+}

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

@@ -0,0 +1,43 @@
+// Auto-generated by build-components.js — DO NOT EDIT
+// These imports point to the UIKit SCSS source files to enable tree-shaking natively via Vite
+
+// Core UIkit Dependencies
+@import "../../../node_modules/uikit/src/scss/variables.scss";
+@import "../../../node_modules/uikit/src/scss/mixins.scss";
+
+// Active UIkit Components
+@import "../../../node_modules/uikit/src/scss/components/mixin.scss";
+@import "../../../node_modules/uikit/src/scss/components/sticky.scss";
+@import "../../../node_modules/uikit/src/scss/components/utility.scss";
+@import "../../../node_modules/uikit/src/scss/components/grid.scss";
+@import "../../../node_modules/uikit/src/scss/components/nav.scss";
+@import "../../../node_modules/uikit/src/scss/components/navbar.scss";
+@import "../../../node_modules/uikit/src/scss/components/icon.scss";
+@import "../../../node_modules/uikit/src/scss/components/slidenav.scss";
+@import "../../../node_modules/uikit/src/scss/components/modal.scss";
+@import "../../../node_modules/uikit/src/scss/components/close.scss";
+@import "../../../node_modules/uikit/src/scss/components/accordion.scss";
+@import "../../../node_modules/uikit/src/scss/components/tab.scss";
+@import "../../../node_modules/uikit/src/scss/components/switcher.scss";
+@import "../../../node_modules/uikit/src/scss/components/offcanvas.scss";
+@import "../../../node_modules/uikit/src/scss/components/drop.scss";
+@import "../../../node_modules/uikit/src/scss/components/dropbar.scss";
+@import "../../../node_modules/uikit/src/scss/components/dropnav.scss";
+@import "../../../node_modules/uikit/src/scss/components/dropdown.scss";
+@import "../../../node_modules/uikit/src/scss/components/tooltip.scss";
+@import "../../../node_modules/uikit/src/scss/components/notification.scss";
+@import "../../../node_modules/uikit/src/scss/components/pagination.scss";
+@import "../../../node_modules/uikit/src/scss/components/dotnav.scss";
+@import "../../../node_modules/uikit/src/scss/components/slideshow.scss";
+@import "../../../node_modules/uikit/src/scss/components/slider.scss";
+@import "../../../node_modules/uikit/src/scss/components/lightbox.scss";
+@import "../../../node_modules/uikit/src/scss/components/animation.scss";
+@import "../../../node_modules/uikit/src/scss/components/visibility.scss";
+@import "../../../node_modules/uikit/src/scss/components/width.scss";
+@import "../../../node_modules/uikit/src/scss/components/height.scss";
+@import "../../../node_modules/uikit/src/scss/components/position.scss";
+@import "../../../node_modules/uikit/src/scss/components/cover.scss";
+@import "../../../node_modules/uikit/src/scss/components/transition.scss";
+@import "../../../node_modules/uikit/src/scss/components/spinner.scss";
+@import "../../../node_modules/uikit/src/scss/components/inverse.scss";
+@import "../../../node_modules/uikit/src/scss/components/svg.scss";

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

@@ -0,0 +1,31 @@
+// _utilities.scss
+
+.sq-text-gradient {
+    background: linear-gradient(135deg, var(--sq-color-primary), var(--sq-color-secondary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+// Background and Contrast Text Utilities
+.sq-bg-primary {
+    --sq-contrast-color: var(--sq-color-primary-contrast);
+    background-color: var(--sq-color-primary) !important;
+    color: var(--sq-contrast-color) !important;
+}
+
+.sq-bg-secondary {
+    --sq-contrast-color: var(--sq-color-secondary-contrast);
+    background-color: var(--sq-color-secondary) !important;
+    color: var(--sq-contrast-color) !important;
+}
+
+.sq-bg-accent {
+    --sq-contrast-color: var(--sq-color-accent-contrast);
+    background-color: var(--sq-color-accent) !important;
+    color: var(--sq-contrast-color) !important;
+}
+
+.sq-text-contrast {
+    color: var(--sq-contrast-color, inherit) !important;
+}

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

@@ -0,0 +1,10 @@
+// showcase/src/assets/scss/custom.scss
+// Add your custom styles here to override template defaults.
+// This file is safe to edit and will not be overwritten by framework updates.
+
+/* 
+Example:
+:root {
+    --sq-color-primary: #ff0000;
+}
+*/

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

@@ -0,0 +1,11 @@
+// main.scss
+@import 'config';
+@import 'functions';
+@import 'tokens';
+@import 'uikit_dynamic';
+@import 'uikit-overrides';
+@import 'utilities';
+@import 'base';
+@import 'components';
+@import 'custom';
+