@pallasoft/ps-design-system 1.0.0

package/LICENSE

@@ -0,0 +1,32 @@
+Pallasoft Proprietary License
+
+Version 1.0, 23-Jan-2024
+
+1. Grant of License:
+   Pallasoft grants you a non-exclusive, non-transferable, revocable license to use the software, solely for internal business purposes.
+
+2. Restrictions:
+   You may not:
+   a. Distribute or sublicense the software to third parties.
+   b. Reverse engineer, decompile, or disassemble the software.
+   c. Remove or alter any proprietary notices or labels on the software.
+
+3. Ownership:
+   Pallasoft retains all right, title, and interest in and to the software, including all intellectual property rights.
+
+4. Confidentiality:
+   You agree to keep the software confidential and not disclose it to third parties.
+
+5. Support and Updates:
+   This license does not entitle you to support or updates. Pallasoft may, at its discretion, provide support and updates.
+
+6. Termination:
+   This license is effective until terminated. Pallasoft may terminate the license at any time if you breach any terms. Upon termination, you must cease using the software.
+
+7. Governing Law:
+   This license is governed by the Canadian Laws. Any disputes arising out of this license shall be resolved in the courts of Canada.
+
+8. Contact Information:
+   For inquiries regarding this license, contact operations@pallasoft.com.
+
+[End of License]

package/README.md

@@ -0,0 +1,10 @@
+# @pallasoft/ps-design-system
+
+Shared Pallasoft design system package.
+
+## Scripts
+
+- `npm run build` compiles the package into `dist`.
+- `npm run lint` runs ESLint using the shared package baseline.
+- `npm run format:check` checks Prettier formatting.
+- `npm run release` publishes through semantic-release.

package/dist/constants/pallasoft-design-tokens.d.ts

@@ -0,0 +1,34 @@
+export declare const PallasoftColorTokens: {
+    readonly accent: "rgb(var(--ps-color-accent-rgb, 37 99 235) / <alpha-value>)";
+    readonly accentSoft: "rgb(var(--ps-color-accent-soft-rgb, 239 246 255) / <alpha-value>)";
+    readonly chart1: "rgb(var(--ps-chart-1-rgb, 71 85 105) / <alpha-value>)";
+    readonly chart2: "rgb(var(--ps-chart-2-rgb, 15 159 110) / <alpha-value>)";
+    readonly chart3: "rgb(var(--ps-chart-3-rgb, 37 99 235) / <alpha-value>)";
+    readonly chart4: "rgb(var(--ps-chart-4-rgb, 217 119 6) / <alpha-value>)";
+    readonly chart5: "rgb(var(--ps-chart-5-rgb, 124 58 237) / <alpha-value>)";
+    readonly danger: "rgb(var(--ps-color-danger-rgb, 220 38 38) / <alpha-value>)";
+    readonly dangerSoft: "rgb(var(--ps-color-danger-soft-rgb, 254 242 242) / <alpha-value>)";
+    readonly ink: "rgb(var(--ps-color-ink-rgb, 15 23 42) / <alpha-value>)";
+    readonly line: "rgb(var(--ps-color-line-rgb, 226 232 240) / <alpha-value>)";
+    readonly mist: "rgb(var(--ps-color-mist-rgb, 239 246 255) / <alpha-value>)";
+    readonly primary: "rgb(var(--ps-color-primary-rgb) / <alpha-value>)";
+    readonly primaryDark: "rgb(var(--ps-color-primary-dark-rgb) / <alpha-value>)";
+    readonly primarySoft: "rgb(var(--ps-color-primary-soft-rgb) / <alpha-value>)";
+    readonly secondary: "rgb(var(--ps-color-secondary-rgb) / <alpha-value>)";
+    readonly secondaryDark: "rgb(var(--ps-color-secondary-dark-rgb) / <alpha-value>)";
+    readonly secondarySoft: "rgb(var(--ps-color-secondary-soft-rgb) / <alpha-value>)";
+    readonly success: "rgb(var(--ps-color-success-rgb, 22 163 74) / <alpha-value>)";
+    readonly successSoft: "rgb(var(--ps-color-success-soft-rgb, 240 253 244) / <alpha-value>)";
+    readonly surface: "rgb(var(--ps-color-surface-rgb, 255 255 255) / <alpha-value>)";
+    readonly warning: "rgb(var(--ps-color-warning-rgb, 217 119 6) / <alpha-value>)";
+    readonly warningSoft: "rgb(var(--ps-color-warning-soft-rgb, 255 247 237) / <alpha-value>)";
+};
+export declare const PallasoftFontTokens: Record<string, string[]>;
+export declare const PallasoftShadowTokens: {
+    readonly card: "none";
+    readonly floating: "none";
+    readonly glass: "none";
+    readonly interactive: "none";
+    readonly panel: "none";
+    readonly subtle: "none";
+};

package/dist/constants/pallasoft-design-tokens.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PallasoftShadowTokens = exports.PallasoftFontTokens = exports.PallasoftColorTokens = void 0;
+exports.PallasoftColorTokens = {
+    accent: 'rgb(var(--ps-color-accent-rgb, 37 99 235) / <alpha-value>)',
+    accentSoft: 'rgb(var(--ps-color-accent-soft-rgb, 239 246 255) / <alpha-value>)',
+    chart1: 'rgb(var(--ps-chart-1-rgb, 71 85 105) / <alpha-value>)',
+    chart2: 'rgb(var(--ps-chart-2-rgb, 15 159 110) / <alpha-value>)',
+    chart3: 'rgb(var(--ps-chart-3-rgb, 37 99 235) / <alpha-value>)',
+    chart4: 'rgb(var(--ps-chart-4-rgb, 217 119 6) / <alpha-value>)',
+    chart5: 'rgb(var(--ps-chart-5-rgb, 124 58 237) / <alpha-value>)',
+    danger: 'rgb(var(--ps-color-danger-rgb, 220 38 38) / <alpha-value>)',
+    dangerSoft: 'rgb(var(--ps-color-danger-soft-rgb, 254 242 242) / <alpha-value>)',
+    ink: 'rgb(var(--ps-color-ink-rgb, 15 23 42) / <alpha-value>)',
+    line: 'rgb(var(--ps-color-line-rgb, 226 232 240) / <alpha-value>)',
+    mist: 'rgb(var(--ps-color-mist-rgb, 239 246 255) / <alpha-value>)',
+    primary: 'rgb(var(--ps-color-primary-rgb) / <alpha-value>)',
+    primaryDark: 'rgb(var(--ps-color-primary-dark-rgb) / <alpha-value>)',
+    primarySoft: 'rgb(var(--ps-color-primary-soft-rgb) / <alpha-value>)',
+    secondary: 'rgb(var(--ps-color-secondary-rgb) / <alpha-value>)',
+    secondaryDark: 'rgb(var(--ps-color-secondary-dark-rgb) / <alpha-value>)',
+    secondarySoft: 'rgb(var(--ps-color-secondary-soft-rgb) / <alpha-value>)',
+    success: 'rgb(var(--ps-color-success-rgb, 22 163 74) / <alpha-value>)',
+    successSoft: 'rgb(var(--ps-color-success-soft-rgb, 240 253 244) / <alpha-value>)',
+    surface: 'rgb(var(--ps-color-surface-rgb, 255 255 255) / <alpha-value>)',
+    warning: 'rgb(var(--ps-color-warning-rgb, 217 119 6) / <alpha-value>)',
+    warningSoft: 'rgb(var(--ps-color-warning-soft-rgb, 255 247 237) / <alpha-value>)',
+};
+exports.PallasoftFontTokens = {
+    brand: ['Manrope', 'ui-sans-serif', 'system-ui'],
+    sans: ['Manrope', 'ui-sans-serif', 'system-ui'],
+};
+exports.PallasoftShadowTokens = {
+    card: 'none',
+    floating: 'none',
+    glass: 'none',
+    interactive: 'none',
+    panel: 'none',
+    subtle: 'none',
+};

package/dist/enums/pallasoft-animation-name.d.ts

@@ -0,0 +1,5 @@
+export declare enum PallasoftAnimationName {
+    FadeIn = "ps-fade-in",
+    ScaleIn = "ps-scale-in",
+    SlideUp = "ps-slide-up"
+}

package/dist/enums/pallasoft-animation-name.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PallasoftAnimationName = void 0;
+var PallasoftAnimationName;
+(function (PallasoftAnimationName) {
+    PallasoftAnimationName["FadeIn"] = "ps-fade-in";
+    PallasoftAnimationName["ScaleIn"] = "ps-scale-in";
+    PallasoftAnimationName["SlideUp"] = "ps-slide-up";
+})(PallasoftAnimationName || (exports.PallasoftAnimationName = PallasoftAnimationName = {}));

package/dist/enums/pallasoft-color-name.d.ts

@@ -0,0 +1,10 @@
+export declare enum PallasoftColorName {
+    Danger = "danger",
+    Ink = "ink",
+    Line = "line",
+    Mist = "mist",
+    Primary = "primary",
+    Success = "success",
+    Surface = "surface",
+    Warning = "warning"
+}

package/dist/enums/pallasoft-color-name.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PallasoftColorName = void 0;
+var PallasoftColorName;
+(function (PallasoftColorName) {
+    PallasoftColorName["Danger"] = "danger";
+    PallasoftColorName["Ink"] = "ink";
+    PallasoftColorName["Line"] = "line";
+    PallasoftColorName["Mist"] = "mist";
+    PallasoftColorName["Primary"] = "primary";
+    PallasoftColorName["Success"] = "success";
+    PallasoftColorName["Surface"] = "surface";
+    PallasoftColorName["Warning"] = "warning";
+})(PallasoftColorName || (exports.PallasoftColorName = PallasoftColorName = {}));

package/dist/enums/pallasoft-font-family.d.ts

@@ -0,0 +1,4 @@
+export declare enum PallasoftFontFamily {
+    Brand = "brand",
+    Sans = "sans"
+}

package/dist/enums/pallasoft-font-family.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PallasoftFontFamily = void 0;
+var PallasoftFontFamily;
+(function (PallasoftFontFamily) {
+    PallasoftFontFamily["Brand"] = "brand";
+    PallasoftFontFamily["Sans"] = "sans";
+})(PallasoftFontFamily || (exports.PallasoftFontFamily = PallasoftFontFamily = {}));

package/dist/enums/pallasoft-theme-mode.d.ts

@@ -0,0 +1,5 @@
+export declare enum PallasoftThemeMode {
+    Dark = "dark",
+    Light = "light",
+    System = "system"
+}

package/dist/enums/pallasoft-theme-mode.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PallasoftThemeMode = void 0;
+var PallasoftThemeMode;
+(function (PallasoftThemeMode) {
+    PallasoftThemeMode["Dark"] = "dark";
+    PallasoftThemeMode["Light"] = "light";
+    PallasoftThemeMode["System"] = "system";
+})(PallasoftThemeMode || (exports.PallasoftThemeMode = PallasoftThemeMode = {}));

package/dist/enums/pallasoft-viewport-tier.d.ts

@@ -0,0 +1,5 @@
+export declare enum PallasoftViewportTier {
+    Mobile = "mobile",
+    Tablet = "tablet",
+    Desktop = "desktop"
+}

package/dist/enums/pallasoft-viewport-tier.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PallasoftViewportTier = void 0;
+var PallasoftViewportTier;
+(function (PallasoftViewportTier) {
+    PallasoftViewportTier["Mobile"] = "mobile";
+    PallasoftViewportTier["Tablet"] = "tablet";
+    PallasoftViewportTier["Desktop"] = "desktop";
+})(PallasoftViewportTier || (exports.PallasoftViewportTier = PallasoftViewportTier = {}));

package/dist/enums/pallasoft-z-index.d.ts

@@ -0,0 +1,12 @@
+export declare enum PallasoftZIndex {
+    Base = 0,
+    Docked = 10,
+    Sticky = 30,
+    Header = 40,
+    Dropdown = 700,
+    Popover = 800,
+    Overlay = 900,
+    Modal = 1000,
+    Toast = 1100,
+    TopLayer = 1200
+}

package/dist/enums/pallasoft-z-index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PallasoftZIndex = void 0;
+var PallasoftZIndex;
+(function (PallasoftZIndex) {
+    PallasoftZIndex[PallasoftZIndex["Base"] = 0] = "Base";
+    PallasoftZIndex[PallasoftZIndex["Docked"] = 10] = "Docked";
+    PallasoftZIndex[PallasoftZIndex["Sticky"] = 30] = "Sticky";
+    PallasoftZIndex[PallasoftZIndex["Header"] = 40] = "Header";
+    PallasoftZIndex[PallasoftZIndex["Dropdown"] = 700] = "Dropdown";
+    PallasoftZIndex[PallasoftZIndex["Popover"] = 800] = "Popover";
+    PallasoftZIndex[PallasoftZIndex["Overlay"] = 900] = "Overlay";
+    PallasoftZIndex[PallasoftZIndex["Modal"] = 1000] = "Modal";
+    PallasoftZIndex[PallasoftZIndex["Toast"] = 1100] = "Toast";
+    PallasoftZIndex[PallasoftZIndex["TopLayer"] = 1200] = "TopLayer";
+})(PallasoftZIndex || (exports.PallasoftZIndex = PallasoftZIndex = {}));

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export * from './constants/pallasoft-design-tokens';
+export * from './enums/pallasoft-animation-name';
+export * from './enums/pallasoft-color-name';
+export * from './enums/pallasoft-font-family';
+export * from './enums/pallasoft-theme-mode';
+export * from './enums/pallasoft-viewport-tier';
+export * from './enums/pallasoft-z-index';
+export * from './services/pallasoft-class-name-service';
+export * from './services/pallasoft-theme-mode-service';
+export * from './services/pallasoft-viewport-service';
+export * from './tailwind-preset';

package/dist/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./constants/pallasoft-design-tokens"), exports);
+__exportStar(require("./enums/pallasoft-animation-name"), exports);
+__exportStar(require("./enums/pallasoft-color-name"), exports);
+__exportStar(require("./enums/pallasoft-font-family"), exports);
+__exportStar(require("./enums/pallasoft-theme-mode"), exports);
+__exportStar(require("./enums/pallasoft-viewport-tier"), exports);
+__exportStar(require("./enums/pallasoft-z-index"), exports);
+__exportStar(require("./services/pallasoft-class-name-service"), exports);
+__exportStar(require("./services/pallasoft-theme-mode-service"), exports);
+__exportStar(require("./services/pallasoft-viewport-service"), exports);
+__exportStar(require("./tailwind-preset"), exports);

package/dist/services/pallasoft-class-name-service.d.ts

@@ -0,0 +1,3 @@
+export declare class PallasoftClassNameService {
+    static merge(...classNames: Array<string | false | null | undefined>): string;
+}

package/dist/services/pallasoft-class-name-service.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PallasoftClassNameService = void 0;
+class PallasoftClassNameService {
+    static merge(...classNames) {
+        return classNames.filter(Boolean).join(' ');
+    }
+}
+exports.PallasoftClassNameService = PallasoftClassNameService;

package/dist/services/pallasoft-theme-mode-service.d.ts

@@ -0,0 +1,12 @@
+import { PallasoftThemeMode } from '../enums/pallasoft-theme-mode';
+export declare class PallasoftThemeModeService {
+    static getDefaultMode(): PallasoftThemeMode;
+    static getResolvedMode(mode: PallasoftThemeMode, prefersDarkMode: boolean): PallasoftThemeMode;
+    static getRootClassName(mode: PallasoftThemeMode, prefersDarkMode?: boolean): string;
+    static getStorageKey(): string;
+    static getStoredMode(storage?: Storage): PallasoftThemeMode;
+    static storeMode(mode: PallasoftThemeMode, storage?: Storage): void;
+    static applyModeToElement(element: HTMLElement, mode: PallasoftThemeMode, prefersDarkMode?: boolean): PallasoftThemeMode;
+    static getNextMode(mode: PallasoftThemeMode): PallasoftThemeMode;
+    static getInlineBootScript(): string;
+}

package/dist/services/pallasoft-theme-mode-service.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PallasoftThemeModeService = void 0;
+const pallasoft_theme_mode_1 = require("../enums/pallasoft-theme-mode");
+const storageKey = 'pallasoft-theme-mode';
+const themeClassNames = ['ps-theme-light', 'ps-theme-dark'];
+class PallasoftThemeModeService {
+    static getDefaultMode() {
+        return pallasoft_theme_mode_1.PallasoftThemeMode.System;
+    }
+    static getResolvedMode(mode, prefersDarkMode) {
+        if (mode === pallasoft_theme_mode_1.PallasoftThemeMode.System) {
+            return prefersDarkMode ? pallasoft_theme_mode_1.PallasoftThemeMode.Dark : pallasoft_theme_mode_1.PallasoftThemeMode.Light;
+        }
+        return mode;
+    }
+    static getRootClassName(mode, prefersDarkMode = false) {
+        const resolvedMode = this.getResolvedMode(mode, prefersDarkMode);
+        return resolvedMode === pallasoft_theme_mode_1.PallasoftThemeMode.Dark ? 'ps-theme-dark' : 'ps-theme-light';
+    }
+    static getStorageKey() {
+        return storageKey;
+    }
+    static getStoredMode(storage) {
+        const value = storage?.getItem(storageKey);
+        if (value === pallasoft_theme_mode_1.PallasoftThemeMode.Dark || value === pallasoft_theme_mode_1.PallasoftThemeMode.Light || value === pallasoft_theme_mode_1.PallasoftThemeMode.System) {
+            return value;
+        }
+        return this.getDefaultMode();
+    }
+    static storeMode(mode, storage) {
+        storage?.setItem(storageKey, mode);
+    }
+    static applyModeToElement(element, mode, prefersDarkMode = false) {
+        const resolvedMode = this.getResolvedMode(mode, prefersDarkMode);
+        element.classList.remove(...themeClassNames);
+        element.classList.add(this.getRootClassName(mode, prefersDarkMode));
+        element.dataset.psThemeMode = mode;
+        element.dataset.psResolvedThemeMode = resolvedMode;
+        return resolvedMode;
+    }
+    static getNextMode(mode) {
+        return mode === pallasoft_theme_mode_1.PallasoftThemeMode.Dark ? pallasoft_theme_mode_1.PallasoftThemeMode.Light : pallasoft_theme_mode_1.PallasoftThemeMode.Dark;
+    }
+    static getInlineBootScript() {
+        return `(function(){try{var k='${storageKey}';var m=localStorage.getItem(k);var d=window.matchMedia('(prefers-color-scheme: dark)').matches;var r=(m==='${pallasoft_theme_mode_1.PallasoftThemeMode.Dark}')?'${pallasoft_theme_mode_1.PallasoftThemeMode.Dark}':(m==='${pallasoft_theme_mode_1.PallasoftThemeMode.Light}')?'${pallasoft_theme_mode_1.PallasoftThemeMode.Light}':(d?'${pallasoft_theme_mode_1.PallasoftThemeMode.Dark}':'${pallasoft_theme_mode_1.PallasoftThemeMode.Light}');var el=document.documentElement;el.classList.remove('${themeClassNames[0]}','${themeClassNames[1]}');el.classList.add('ps-theme-'+r);el.dataset.psThemeMode=m||'${pallasoft_theme_mode_1.PallasoftThemeMode.System}';el.dataset.psResolvedThemeMode=r;}catch(e){}})();`;
+    }
+}
+exports.PallasoftThemeModeService = PallasoftThemeModeService;

package/dist/services/pallasoft-viewport-service.d.ts

@@ -0,0 +1,8 @@
+import { PallasoftViewportTier } from '../enums/pallasoft-viewport-tier';
+export declare class PallasoftViewportService {
+    static readonly tabletMinWidth = 768;
+    static readonly desktopMinWidth = 1024;
+    static getTier(width: number): PallasoftViewportTier;
+    static getTabletQuery(): string;
+    static getDesktopQuery(): string;
+}

package/dist/services/pallasoft-viewport-service.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PallasoftViewportService = void 0;
+const pallasoft_viewport_tier_1 = require("../enums/pallasoft-viewport-tier");
+class PallasoftViewportService {
+    static getTier(width) {
+        if (width >= this.desktopMinWidth)
+            return pallasoft_viewport_tier_1.PallasoftViewportTier.Desktop;
+        if (width >= this.tabletMinWidth)
+            return pallasoft_viewport_tier_1.PallasoftViewportTier.Tablet;
+        return pallasoft_viewport_tier_1.PallasoftViewportTier.Mobile;
+    }
+    static getTabletQuery() {
+        return `(min-width: ${this.tabletMinWidth}px) and (max-width: ${this.desktopMinWidth - 1}px)`;
+    }
+    static getDesktopQuery() {
+        return `(min-width: ${this.desktopMinWidth}px)`;
+    }
+}
+exports.PallasoftViewportService = PallasoftViewportService;
+PallasoftViewportService.tabletMinWidth = 768;
+PallasoftViewportService.desktopMinWidth = 1024;