@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/global.d.ts

@@ -0,0 +1,76 @@
+//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// Global Component Type Declarations
+//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
+// Generated by: scripts/generate-global-types.ts
+//
+// This file provides TypeScript/Volar support for globally registered SleekSpace UI components.
+// Users should reference this file in their tsconfig.json:
+//
+// {
+//   "include": [
+//     "src/**/*",
+//     "node_modules/@skewedaspect/sleekspace-ui/src/global.d.ts"
+//   ]
+// }
+//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+import type { DefineComponent } from 'vue';
+
+declare module '@vue/runtime-core' {
+    export interface GlobalComponents {
+        SkAccordion: DefineComponent<import('./components/Accordion/SkAccordion.vue').SkAccordionComponentProps>;
+        SkAccordionItem: DefineComponent<import('./components/Accordion/SkAccordionItem.vue').SkAccordionItemComponentProps>;
+        SkAlert: DefineComponent<import('./components/Alert/SkAlert.vue').SkAlertComponentProps>;
+        SkAvatar: DefineComponent<import('./components/Avatar/SkAvatar.vue').SkAvatarComponentProps>;
+        SkBreadcrumbItem: DefineComponent<import('./components/Breadcrumbs/SkBreadcrumbItem.vue').SkBreadcrumbItemComponentProps>;
+        SkBreadcrumbs: DefineComponent<import('./components/Breadcrumbs/SkBreadcrumbs.vue').SkBreadcrumbsComponentProps>;
+        SkButton: DefineComponent<import('./components/Button/SkButton.vue').SkButtonComponentProps>;
+        SkCard: DefineComponent<import('./components/Card/SkCard.vue').SkCardComponentProps>;
+        SkCheckbox: DefineComponent<import('./components/Checkbox/SkCheckbox.vue').SkCheckboxComponentProps>;
+        SkCollapsible: DefineComponent<import('./components/Collapsible/SkCollapsible.vue').SkCollapsibleComponentProps>;
+        SkDivider: DefineComponent<import('./components/Divider/SkDivider.vue').SkDividerComponentProps>;
+        SkDropdown: DefineComponent<import('./components/Dropdown/SkDropdown.vue').SkDropdownComponentProps>;
+        SkDropdownMenuItem: DefineComponent<import('./components/Dropdown/SkDropdownMenuItem.vue').SkDropdownMenuItemComponentProps>;
+        SkDropdownSubmenu: DefineComponent<import('./components/Dropdown/SkDropdownSubmenu.vue').SkDropdownSubmenuComponentProps>;
+        SkField: DefineComponent<import('./components/Field/SkField.vue').SkFieldComponentProps>;
+        SkGroup: DefineComponent<import('./components/Group/SkGroup.vue').SkGroupComponentProps>;
+        SkInput: DefineComponent<import('./components/Input/SkInput.vue').SkInputComponentProps>;
+        SkListbox: DefineComponent<import('./components/Listbox/SkListbox.vue').SkListboxComponentProps>;
+        SkListboxItem: DefineComponent<import('./components/Listbox/SkListboxItem.vue').SkListboxItemComponentProps>;
+        SkModal: DefineComponent<import('./components/Modal/SkModal.vue').SkModalComponentProps>;
+        SkNavBar: DefineComponent<import('./components/NavBar/SkNavBar.vue').SkNavBarComponentProps>;
+        SkNumberInput: DefineComponent<import('./components/NumberInput/SkNumberInput.vue').SkNumberInputComponentProps>;
+        SkPage: DefineComponent<import('./components/Page/SkPage.vue').SkPageComponentProps>;
+        SkPagination: DefineComponent<import('./components/Pagination/SkPagination.vue').SkPaginationComponentProps>;
+        SkPaginationItem: DefineComponent<import('./components/Pagination/SkPaginationItem.vue').SkPaginationItemComponentProps>;
+        SkPanel: DefineComponent<import('./components/Panel/SkPanel.vue').SkPanelComponentProps>;
+        SkPopover: DefineComponent<import('./components/Popover/SkPopover.vue').SkPopoverComponentProps>;
+        SkProgress: DefineComponent<import('./components/Progress/SkProgress.vue').SkProgressComponentProps>;
+        SkRadio: DefineComponent<import('./components/Radio/SkRadio.vue').SkRadioComponentProps>;
+        SkRadioGroup: DefineComponent<import('./components/Radio/SkRadioGroup.vue').SkRadioGroupComponentProps>;
+        SkSidebar: DefineComponent<import('./components/Sidebar/SkSidebar.vue').SkSidebarComponentProps>;
+        SkSidebarItem: DefineComponent<import('./components/Sidebar/SkSidebarItem.vue').SkSidebarItemComponentProps>;
+        SkSidebarSection: DefineComponent<import('./components/Sidebar/SkSidebarSection.vue').SkSidebarSectionComponentProps>;
+        SkSkeleton: DefineComponent<import('./components/Skeleton/SkSkeleton.vue').SkSkeletonComponentProps>;
+        SkSlider: DefineComponent<import('./components/Slider/SkSlider.vue').SkSliderComponentProps>;
+        SkSpinner: DefineComponent<import('./components/Spinner/SkSpinner.vue').SkSpinnerComponentProps>;
+        SkSwitch: DefineComponent<import('./components/Switch/SkSwitch.vue').SkSwitchComponentProps>;
+        SkTab: DefineComponent<import('./components/Tabs/SkTab.vue').SkTabComponentProps>;
+        SkTable: DefineComponent<import('./components/Table/SkTable.vue').SkTableComponentProps>;
+        SkTabList: DefineComponent<import('./components/Tabs/SkTabList.vue').SkTabListComponentProps>;
+        SkTabPanel: DefineComponent<import('./components/Tabs/SkTabPanel.vue').SkTabPanelComponentProps>;
+        SkTabPanels: DefineComponent<Record<string, never>>;
+        SkTabs: DefineComponent<import('./components/Tabs/SkTabs.vue').SkTabsComponentProps>;
+        SkTag: DefineComponent<import('./components/Tag/SkTag.vue').SkTagComponentProps>;
+        SkTagsInput: DefineComponent<import('./components/TagsInput/SkTagsInput.vue').SkTagsInputComponentProps>;
+        SkTextarea: DefineComponent<import('./components/Textarea/SkTextarea.vue').SkTextareaComponentProps>;
+        SkTheme: DefineComponent<import('./components/Theme/SkTheme.vue').SkThemeComponentProps>;
+        SkToastProvider: DefineComponent<import('./components/Toast/SkToastProvider.vue').SkToastProviderComponentProps>;
+        SkTooltip: DefineComponent<import('./components/Tooltip/SkTooltip.vue').SkTooltipComponentProps>;
+    }
+}
+
+export {};
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

package/src/index.ts

@@ -0,0 +1,259 @@
+//----------------------------------------------------------------------------------------------------------------------
+
+import { App, Plugin } from 'vue';
+
+// Styles
+import './styles/index.scss';
+
+// Types
+import type { SkThemeComponentProps } from './components/Theme/types';
+
+// Components
+import SkAccordion, { type SkAccordionComponentProps } from './components/Accordion/SkAccordion.vue';
+import SkAccordionItem, { type SkAccordionItemComponentProps } from './components/Accordion/SkAccordionItem.vue';
+import SkAlert, { type SkAlertComponentProps } from './components/Alert/SkAlert.vue';
+import SkAvatar, { type SkAvatarComponentProps } from './components/Avatar/SkAvatar.vue';
+import SkBreadcrumbItem, {
+    type SkBreadcrumbItemComponentProps,
+} from './components/Breadcrumbs/SkBreadcrumbItem.vue';
+import SkBreadcrumbs, { type SkBreadcrumbsComponentProps } from './components/Breadcrumbs/SkBreadcrumbs.vue';
+import SkBreadcrumbSeparator from './components/Breadcrumbs/SkBreadcrumbSeparator.vue';
+import SkButton, { type SkButtonComponentProps } from './components/Button/SkButton.vue';
+import SkCard, { type SkCardComponentProps } from './components/Card/SkCard.vue';
+import SkCheckbox, { type SkCheckboxComponentProps } from './components/Checkbox/SkCheckbox.vue';
+import SkCollapsible, { type SkCollapsibleComponentProps } from './components/Collapsible/SkCollapsible.vue';
+import SkDivider, { type SkDividerComponentProps } from './components/Divider/SkDivider.vue';
+import SkDropdown, { type SkDropdownComponentProps } from './components/Dropdown/SkDropdown.vue';
+import SkDropdownMenuItem, {
+    type SkDropdownMenuItemComponentProps,
+} from './components/Dropdown/SkDropdownMenuItem.vue';
+import SkDropdownMenuSeparator from './components/Dropdown/SkDropdownMenuSeparator.vue';
+import SkDropdownSubmenu, {
+    type SkDropdownSubmenuComponentProps,
+} from './components/Dropdown/SkDropdownSubmenu.vue';
+import SkField, { type SkFieldComponentProps } from './components/Field/SkField.vue';
+import SkGroup, { type SkGroupComponentProps } from './components/Group/SkGroup.vue';
+import SkInput, { type SkInputComponentProps } from './components/Input/SkInput.vue';
+import SkListbox, { type SkListboxComponentProps } from './components/Listbox/SkListbox.vue';
+import SkListboxItem, { type SkListboxItemComponentProps } from './components/Listbox/SkListboxItem.vue';
+import SkListboxSeparator from './components/Listbox/SkListboxSeparator.vue';
+import SkModal, { type SkModalComponentProps } from './components/Modal/SkModal.vue';
+import SkNavBar, { type SkNavBarComponentProps } from './components/NavBar/SkNavBar.vue';
+import SkNumberInput, { type SkNumberInputComponentProps } from './components/NumberInput/SkNumberInput.vue';
+import SkPage, { type SkPageComponentProps } from './components/Page/SkPage.vue';
+import SkPagination, { type SkPaginationComponentProps } from './components/Pagination/SkPagination.vue';
+import SkPaginationItem, {
+    type SkPaginationItemComponentProps,
+} from './components/Pagination/SkPaginationItem.vue';
+import SkPanel, { type SkPanelComponentProps } from './components/Panel/SkPanel.vue';
+import SkPopover, { type SkPopoverComponentProps } from './components/Popover/SkPopover.vue';
+import SkProgress, { type SkProgressComponentProps } from './components/Progress/SkProgress.vue';
+import SkRadio, { type SkRadioComponentProps } from './components/Radio/SkRadio.vue';
+import SkRadioGroup, { type SkRadioGroupComponentProps } from './components/Radio/SkRadioGroup.vue';
+import SkSidebar, { type SkSidebarComponentProps } from './components/Sidebar/SkSidebar.vue';
+import SkSidebarItem, { type SkSidebarItemComponentProps } from './components/Sidebar/SkSidebarItem.vue';
+import SkSidebarSection, { type SkSidebarSectionComponentProps } from './components/Sidebar/SkSidebarSection.vue';
+import SkSkeleton, { type SkSkeletonComponentProps } from './components/Skeleton/SkSkeleton.vue';
+import SkSlider, { type SkSliderComponentProps } from './components/Slider/SkSlider.vue';
+import SkSpinner, { type SkSpinnerComponentProps } from './components/Spinner/SkSpinner.vue';
+import SkSwitch, { type SkSwitchComponentProps } from './components/Switch/SkSwitch.vue';
+import SkTable, { type SkTableComponentProps } from './components/Table/SkTable.vue';
+import SkTab, { type SkTabComponentProps } from './components/Tabs/SkTab.vue';
+import SkTabList, { type SkTabListComponentProps } from './components/Tabs/SkTabList.vue';
+import SkTabPanel, { type SkTabPanelComponentProps } from './components/Tabs/SkTabPanel.vue';
+import SkTabPanels from './components/Tabs/SkTabPanels.vue';
+import SkTabs, { type SkTabsComponentProps } from './components/Tabs/SkTabs.vue';
+import SkTag, { type SkTagComponentProps } from './components/Tag/SkTag.vue';
+import SkTagsInput, { type SkTagsInputComponentProps } from './components/TagsInput/SkTagsInput.vue';
+import SkTextarea, { type SkTextareaComponentProps } from './components/Textarea/SkTextarea.vue';
+import SkToastProvider, {
+    type SkToastProviderComponentProps,
+} from './components/Toast/SkToastProvider.vue';
+import SkTooltip, { type SkTooltipComponentProps } from './components/Tooltip/SkTooltip.vue';
+import SkTooltipProvider, {
+    type SkTooltipProviderProps,
+} from './components/Tooltip/SkTooltipProvider.vue';
+import SkTheme from './components/Theme/SkTheme.vue';
+
+//----------------------------------------------------------------------------------------------------------------------
+// Export Common Types
+//----------------------------------------------------------------------------------------------------------------------
+
+export * from './types';
+
+//----------------------------------------------------------------------------------------------------------------------
+// Export Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+export * from './components/Accordion/types';
+export * from './components/Alert/types';
+export * from './components/Avatar/types';
+export * from './components/Breadcrumbs/types';
+export * from './components/Button/types';
+export * from './components/Card/types';
+export * from './components/Checkbox/types';
+export * from './components/Collapsible/types';
+export * from './components/Divider/types';
+export * from './components/Dropdown/types';
+export * from './components/Field/types';
+export * from './components/Group/types';
+export * from './components/Input/types';
+export * from './components/Listbox/types';
+export * from './components/Modal/types';
+export * from './components/NavBar/types';
+export * from './components/NumberInput/types';
+export * from './components/Page/types';
+export * from './components/Pagination/types';
+export * from './components/Panel/types';
+export * from './components/Popover/types';
+export * from './components/Progress/types';
+export * from './components/Radio/types';
+export * from './components/Sidebar/types';
+export * from './components/Skeleton/types';
+export * from './components/Slider/types';
+export * from './components/Spinner/types';
+export * from './components/Switch/types';
+export * from './components/Table/types';
+export * from './components/Tabs/types';
+export * from './components/Tag/types';
+export * from './components/TagsInput/types';
+export * from './components/Textarea/types';
+export * from './components/Toast/types';
+export * from './components/Tooltip/types';
+export * from './components/Theme/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+// Export Composables
+//----------------------------------------------------------------------------------------------------------------------
+
+export { useTheme } from './components/Theme/useTheme';
+export { useToast } from './components/Toast/useToast';
+
+//----------------------------------------------------------------------------------------------------------------------
+// Export Components
+//----------------------------------------------------------------------------------------------------------------------
+
+export { SkAccordion, type SkAccordionComponentProps };
+export { SkAccordionItem, type SkAccordionItemComponentProps };
+export { SkAlert, type SkAlertComponentProps };
+export { SkAvatar, type SkAvatarComponentProps };
+export { SkBreadcrumbItem, type SkBreadcrumbItemComponentProps };
+export { SkBreadcrumbs, type SkBreadcrumbsComponentProps };
+export { SkBreadcrumbSeparator };
+export { SkButton, type SkButtonComponentProps };
+export { SkCard, type SkCardComponentProps };
+export { SkCheckbox, type SkCheckboxComponentProps };
+export { SkCollapsible, type SkCollapsibleComponentProps };
+export { SkDivider, type SkDividerComponentProps };
+export { SkDropdown, type SkDropdownComponentProps };
+export { SkDropdownMenuItem, type SkDropdownMenuItemComponentProps };
+export { SkDropdownMenuSeparator };
+export { SkDropdownSubmenu, type SkDropdownSubmenuComponentProps };
+export { SkField, type SkFieldComponentProps };
+export { SkGroup, type SkGroupComponentProps };
+export { SkInput, type SkInputComponentProps };
+export { SkListbox, type SkListboxComponentProps };
+export { SkListboxItem, type SkListboxItemComponentProps };
+export { SkListboxSeparator };
+export { SkModal, type SkModalComponentProps };
+export { SkNavBar, type SkNavBarComponentProps };
+export { SkNumberInput, type SkNumberInputComponentProps };
+export { SkPage, type SkPageComponentProps };
+export { SkPagination, type SkPaginationComponentProps };
+export { SkPaginationItem, type SkPaginationItemComponentProps };
+export { SkPanel, type SkPanelComponentProps };
+export { SkPopover, type SkPopoverComponentProps };
+export { SkProgress, type SkProgressComponentProps };
+export { SkRadio, type SkRadioComponentProps };
+export { SkRadioGroup, type SkRadioGroupComponentProps };
+export { SkSidebar, type SkSidebarComponentProps };
+export { SkSidebarItem, type SkSidebarItemComponentProps };
+export { SkSidebarSection, type SkSidebarSectionComponentProps };
+export { SkSkeleton, type SkSkeletonComponentProps };
+export { SkSlider, type SkSliderComponentProps };
+export { SkSpinner, type SkSpinnerComponentProps };
+export { SkSwitch, type SkSwitchComponentProps };
+export { SkTab, type SkTabComponentProps };
+export { SkTabList, type SkTabListComponentProps };
+export { SkTabPanel, type SkTabPanelComponentProps };
+export { SkTabPanels };
+export { SkTabs, type SkTabsComponentProps };
+export { SkTable, type SkTableComponentProps };
+export { SkTag, type SkTagComponentProps };
+export { SkTagsInput, type SkTagsInputComponentProps };
+export { SkTextarea, type SkTextareaComponentProps };
+export { SkToastProvider, type SkToastProviderComponentProps };
+export { SkTooltip, type SkTooltipComponentProps };
+export { SkTooltipProvider, type SkTooltipProviderProps };
+export { SkTheme, type SkThemeComponentProps };
+
+//----------------------------------------------------------------------------------------------------------------------
+// Plugin Definition
+//----------------------------------------------------------------------------------------------------------------------
+
+// Plugin installation
+const SleekSpaceUI : Plugin = {
+    install(app : App)
+    {
+        // Register components globally
+        app.component('SkAccordion', SkAccordion);
+        app.component('SkAccordionItem', SkAccordionItem);
+        app.component('SkAlert', SkAlert);
+        app.component('SkAvatar', SkAvatar);
+        app.component('SkBreadcrumbItem', SkBreadcrumbItem);
+        app.component('SkBreadcrumbs', SkBreadcrumbs);
+        app.component('SkBreadcrumbSeparator', SkBreadcrumbSeparator);
+        app.component('SkButton', SkButton);
+        app.component('SkCard', SkCard);
+        app.component('SkCheckbox', SkCheckbox);
+        app.component('SkCollapsible', SkCollapsible);
+        app.component('SkDivider', SkDivider);
+        app.component('SkDropdown', SkDropdown);
+        app.component('SkDropdownMenuItem', SkDropdownMenuItem);
+        app.component('SkDropdownMenuSeparator', SkDropdownMenuSeparator);
+        app.component('SkDropdownSubmenu', SkDropdownSubmenu);
+        app.component('SkField', SkField);
+        app.component('SkGroup', SkGroup);
+        app.component('SkInput', SkInput);
+        app.component('SkListbox', SkListbox);
+        app.component('SkListboxItem', SkListboxItem);
+        app.component('SkListboxSeparator', SkListboxSeparator);
+        app.component('SkModal', SkModal);
+        app.component('SkNavBar', SkNavBar);
+        app.component('SkNumberInput', SkNumberInput);
+        app.component('SkPage', SkPage);
+        app.component('SkPagination', SkPagination);
+        app.component('SkPaginationItem', SkPaginationItem);
+        app.component('SkPanel', SkPanel);
+        app.component('SkPopover', SkPopover);
+        app.component('SkProgress', SkProgress);
+        app.component('SkRadio', SkRadio);
+        app.component('SkRadioGroup', SkRadioGroup);
+        app.component('SkSidebar', SkSidebar);
+        app.component('SkSidebarItem', SkSidebarItem);
+        app.component('SkSidebarSection', SkSidebarSection);
+        app.component('SkSkeleton', SkSkeleton);
+        app.component('SkSlider', SkSlider);
+        app.component('SkSpinner', SkSpinner);
+        app.component('SkSwitch', SkSwitch);
+        app.component('SkTab', SkTab);
+        app.component('SkTabList', SkTabList);
+        app.component('SkTabPanel', SkTabPanel);
+        app.component('SkTabPanels', SkTabPanels);
+        app.component('SkTabs', SkTabs);
+        app.component('SkTable', SkTable);
+        app.component('SkTag', SkTag);
+        app.component('SkTagsInput', SkTagsInput);
+        app.component('SkTextarea', SkTextarea);
+        app.component('SkToastProvider', SkToastProvider);
+        app.component('SkTooltip', SkTooltip);
+        app.component('SkTooltipProvider', SkTooltipProvider);
+        app.component('SkTheme', SkTheme);
+    },
+};
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export default SleekSpaceUI;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/_scrollbar.scss

@@ -0,0 +1,100 @@
+/**
+ * Scrollbar Styling
+ *
+ * Custom scrollbar styling using both webkit-specific properties
+ * and the newer CSS scrollbar standard for cross-browser support.
+ *
+ * Browser Support:
+ * - Webkit (Chrome, Safari, Edge): Full support with ::-webkit-scrollbar
+ * - Firefox: Partial support with scrollbar-width and scrollbar-color
+ * - Future browsers: Standard scrollbar-* properties
+ */
+
+@layer base
+{
+    /* ===================================================================
+     * Modern Scrollbar Standard (Firefox, future browsers)
+     * =================================================================== */
+
+    *
+    {
+        /* Set scrollbar width */
+        scrollbar-width: thin;
+
+        /* Set scrollbar colors: thumb track */
+        scrollbar-color: var(--sk-scrollbar-thumb) var(--sk-scrollbar-track);
+    }
+
+    /* ===================================================================
+     * Webkit Scrollbar (Chrome, Safari, Edge)
+     * Provides more granular control over scrollbar appearance
+     * =================================================================== */
+
+    /* Scrollbar Track - The background groove */
+    *::-webkit-scrollbar
+    {
+        width: var(--sk-scrollbar-width);
+        height: var(--sk-scrollbar-height);
+    }
+
+    *::-webkit-scrollbar-track
+    {
+        background: var(--sk-scrollbar-track);
+        border-radius: var(--sk-scrollbar-border-radius);
+    }
+
+    /* Scrollbar Thumb - The draggable handle */
+    *::-webkit-scrollbar-thumb
+    {
+        background: var(--sk-scrollbar-thumb);
+        border-radius: var(--sk-scrollbar-border-radius);
+        border: 2px solid var(--sk-scrollbar-thumb-border);
+
+        /* Ensure minimum thumb size for usability */
+        min-height: var(--sk-scrollbar-thumb-min-size);
+        min-width: var(--sk-scrollbar-thumb-min-size);
+
+        /* Smooth transitions for interactive states */
+        transition:
+            background-color var(--sk-transition-duration-fast) var(--sk-transition-easing-standard),
+            border-color var(--sk-transition-duration-fast) var(--sk-transition-easing-standard);
+    }
+
+    /* Hover State */
+    *::-webkit-scrollbar-thumb:hover
+    {
+        background: var(--sk-scrollbar-thumb-hover);
+        border-color: color-mix(
+            in oklch,
+            var(--sk-scrollbar-thumb-hover),
+            var(--sk-color-gray-95) 20%
+        );
+    }
+
+    /* Active State (while dragging) */
+    *::-webkit-scrollbar-thumb:active
+    {
+        background: var(--sk-scrollbar-thumb-active);
+        border-color: color-mix(
+            in oklch,
+            var(--sk-scrollbar-thumb-active),
+            var(--sk-color-gray-95) 20%
+        );
+    }
+
+    /* Scrollbar Corner - Where horizontal and vertical scrollbars meet */
+    *::-webkit-scrollbar-corner
+    {
+        background: var(--sk-scrollbar-track);
+    }
+
+    /* ===================================================================
+     * Scrollbar Buttons (Optional)
+     * Hide the up/down arrows on webkit scrollbars for cleaner look
+     * =================================================================== */
+
+    *::-webkit-scrollbar-button
+    {
+        display: none;
+    }
+}

package/src/styles/base/_fonts.scss

@@ -0,0 +1,105 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Font Definitions
+//----------------------------------------------------------------------------------------------------------------------
+
+// Titillium Web Font Family
+@font-face
+{
+    font-family: "Titillium Web";
+    src: url("../fonts/Titillium_Web/TitilliumWeb-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face
+{
+    font-family: "Titillium Web";
+    src: url("../fonts/Titillium_Web/TitilliumWeb-Bold.ttf") format("truetype");
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face
+{
+    font-family: "Titillium Web";
+    src: url("../fonts/Titillium_Web/TitilliumWeb-Italic.ttf") format("truetype");
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face
+{
+    font-family: "Titillium Web";
+    src: url("../fonts/Titillium_Web/TitilliumWeb-BoldItalic.ttf") format("truetype");
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face
+{
+    font-family: "Titillium Web";
+    src: url("../fonts/Titillium_Web/TitilliumWeb-Light.ttf") format("truetype");
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face
+{
+    font-family: "Titillium Web";
+    src: url("../fonts/Titillium_Web/TitilliumWeb-LightItalic.ttf") format("truetype");
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face
+{
+    font-family: "Titillium Web";
+    src: url("../fonts/Titillium_Web/TitilliumWeb-SemiBold.ttf") format("truetype");
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face
+{
+    font-family: "Titillium Web";
+    src: url("../fonts/Titillium_Web/TitilliumWeb-SemiBoldItalic.ttf") format("truetype");
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face
+{
+    font-family: "Titillium Web";
+    src: url("../fonts/Titillium_Web/TitilliumWeb-Black.ttf") format("truetype");
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face
+{
+    font-family: "Titillium Web";
+    src: url("../fonts/Titillium_Web/TitilliumWeb-ExtraLight.ttf") format("truetype");
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face
+{
+    font-family: "Titillium Web";
+    src: url("../fonts/Titillium_Web/TitilliumWeb-ExtraLightItalic.ttf") format("truetype");
+    font-weight: 200;
+    font-style: italic;
+    font-display: swap;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/base/_global.scss

@@ -0,0 +1,47 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Global Base Styles
+//----------------------------------------------------------------------------------------------------------------------
+// Universal styles that apply across the entire application
+//----------------------------------------------------------------------------------------------------------------------
+
+*,
+*::before,
+*::after
+{
+    box-sizing: border-box;
+}
+
+:root,
+body
+{
+    font-family: var(--sk-font-family-base);
+}
+
+body
+{
+    margin: 0;
+    min-height: 100svh;
+    color: var(--sk-neutral-fg);
+}
+
+img,
+svg,
+video,
+canvas
+{
+    display: block;
+    max-width: 100%;
+}
+
+:where(button, input, textarea, select)
+{
+    font: inherit;
+}
+
+:focus-visible
+{
+    outline: var(--sk-focus-outline-width) solid currentColor;
+    outline-offset: var(--sk-focus-outline-offset);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/base/_index.scss

@@ -0,0 +1,24 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Base Layer - Main Import
+//----------------------------------------------------------------------------------------------------------------------
+// Loads all foundational styles in the correct order
+//----------------------------------------------------------------------------------------------------------------------
+
+@use 'sass:meta';
+
+@layer base
+{
+    // 1. CSS Reset (modern-normalize)
+    @include meta.load-css('reset');
+
+    // 2. Font Definitions
+    @include meta.load-css('fonts');
+
+    // 3. Global Base Styles
+    @include meta.load-css('global');
+
+    // 4. Typography
+    @include meta.load-css('typography');
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/base/_reset.scss

@@ -0,0 +1,11 @@
+//----------------------------------------------------------------------------------------------------------------------
+// CSS Reset
+//----------------------------------------------------------------------------------------------------------------------
+// Uses modern-normalize for a consistent baseline across browsers
+//----------------------------------------------------------------------------------------------------------------------
+
+@use 'sass:meta';
+
+@include meta.load-css('modern-normalize/modern-normalize.css');
+
+//----------------------------------------------------------------------------------------------------------------------