@pallamart/pm-design-system 1.0.0

package/README.md

@@ -0,0 +1,21 @@
+# @pallamart/pm-design-system
+
+Pallamart design tokens, Tailwind presets, and shared styles.
+
+## Development
+
+Use Node.js from `.nvmrc`, then install dependencies:
+
+```sh
+npm install
+```
+
+Available checks:
+
+```sh
+npm run build
+npm run format:check
+npm run lint
+```
+
+The package is published from `dist/`. Source code lives in `src/`; do not edit generated output directly.

package/dist/color.d.ts

@@ -0,0 +1,19 @@
+export declare enum PallamartColor {
+    Primary = "#9346F2",
+    Error = "#eaa9a9",
+    ErrorContrast = "#942424",
+    Warning = "#ffc78f",
+    WarningContrast = "#d16900",
+    Success = "#afff8f",
+    SuccessContrast = "#1d6600",
+    White = "#FFFFFF",
+    Black = "#1D1D20",
+    Grey = "#64748b",
+    GreyLight = "#f6f7f8",
+    GreyDark = "#334155",
+    Red = "#D63A2F",
+    Blue = "#3b82f6",
+    Yellow = "#eab308",
+    Green = "#559B60"
+}
+export { PallamartColor as Color };

package/dist/color.js

@@ -0,0 +1,20 @@
+export var PallamartColor;
+(function (PallamartColor) {
+    PallamartColor["Primary"] = "#9346F2";
+    PallamartColor["Error"] = "#eaa9a9";
+    PallamartColor["ErrorContrast"] = "#942424";
+    PallamartColor["Warning"] = "#ffc78f";
+    PallamartColor["WarningContrast"] = "#d16900";
+    PallamartColor["Success"] = "#afff8f";
+    PallamartColor["SuccessContrast"] = "#1d6600";
+    PallamartColor["White"] = "#FFFFFF";
+    PallamartColor["Black"] = "#1D1D20";
+    PallamartColor["Grey"] = "#64748b";
+    PallamartColor["GreyLight"] = "#f6f7f8";
+    PallamartColor["GreyDark"] = "#334155";
+    PallamartColor["Red"] = "#D63A2F";
+    PallamartColor["Blue"] = "#3b82f6";
+    PallamartColor["Yellow"] = "#eab308";
+    PallamartColor["Green"] = "#559B60";
+})(PallamartColor || (PallamartColor = {}));
+export { PallamartColor as Color };

package/dist/external/index.d.ts

@@ -0,0 +1,3 @@
+export * from '../color.js';
+export * from '../tailwind-preset.js';
+export * from '../z-index.js';

package/dist/external/index.js

@@ -0,0 +1,3 @@
+export * from '../color.js';
+export * from '../tailwind-preset.js';
+export * from '../z-index.js';

package/dist/external/tailwind-preset.d.ts

@@ -0,0 +1 @@
+export { PallamartTailwindPreset, PallamartTailwindPreset as PallamartExternalTailwindPreset, } from '../tailwind-preset.js';

package/dist/external/tailwind-preset.js

@@ -0,0 +1 @@
+export { PallamartTailwindPreset, PallamartTailwindPreset as PallamartExternalTailwindPreset, } from '../tailwind-preset.js';

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './color.js';
+export * from './tailwind-preset.js';
+export * from './z-index.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './color.js';
+export * from './tailwind-preset.js';
+export * from './z-index.js';

package/dist/internal/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../z-index.js';
+export * from './tailwind-preset.js';

package/dist/internal/index.js

@@ -0,0 +1,2 @@
+export * from '../z-index.js';
+export * from './tailwind-preset.js';

package/dist/internal/tailwind-preset.d.ts

@@ -0,0 +1,2 @@
+import type { Config } from 'tailwindcss';
+export declare const PallamartInternalTailwindPreset: Partial<Config>;

package/dist/internal/tailwind-preset.js

@@ -0,0 +1,86 @@
+import { PallamartFontSize, PallamartMotion, PallamartScreens, PallamartSharedScale, } from '../shared-tailwind-theme.js';
+export const PallamartInternalTailwindPreset = {
+    theme: {
+        screens: PallamartScreens,
+        extend: {
+            colors: {
+                border: 'var(--border)',
+                input: 'var(--input)',
+                ring: 'var(--ring)',
+                background: 'var(--background)',
+                foreground: 'var(--foreground)',
+                card: {
+                    DEFAULT: 'var(--card)',
+                    foreground: 'var(--card-foreground)',
+                },
+                popover: {
+                    DEFAULT: 'var(--popover)',
+                    foreground: 'var(--popover-foreground)',
+                },
+                primary: {
+                    DEFAULT: 'var(--primary)',
+                    foreground: 'var(--primary-foreground)',
+                    hover: 'var(--primary-hover)',
+                },
+                secondary: {
+                    DEFAULT: 'var(--secondary)',
+                    foreground: 'var(--secondary-foreground)',
+                },
+                muted: {
+                    DEFAULT: 'var(--muted)',
+                    foreground: 'var(--muted-foreground)',
+                },
+                accent: {
+                    DEFAULT: 'var(--accent)',
+                    foreground: 'var(--accent-foreground)',
+                },
+                destructive: {
+                    DEFAULT: 'var(--destructive)',
+                    foreground: 'var(--destructive-foreground)',
+                    muted: 'var(--destructive-muted)',
+                },
+                warning: {
+                    DEFAULT: 'var(--warning)',
+                    foreground: 'var(--warning-foreground)',
+                    muted: 'var(--warning-muted)',
+                },
+                success: {
+                    DEFAULT: 'var(--success)',
+                    foreground: 'var(--success-foreground)',
+                    muted: 'var(--success-muted)',
+                },
+                info: 'var(--info)',
+                sidebar: {
+                    'DEFAULT': 'var(--sidebar)',
+                    'foreground': 'var(--sidebar-foreground)',
+                    'primary': 'var(--sidebar-primary)',
+                    'primary-foreground': 'var(--sidebar-primary-foreground)',
+                    'accent': 'var(--sidebar-accent)',
+                    'accent-foreground': 'var(--sidebar-accent-foreground)',
+                    'border': 'var(--sidebar-border)',
+                    'ring': 'var(--sidebar-ring)',
+                },
+                overlay: 'rgb(15 23 42 / 0.62)',
+                chart: {
+                    '1': 'var(--chart-1)',
+                    '2': 'var(--chart-2)',
+                    '3': 'var(--chart-3)',
+                    '4': 'var(--chart-4)',
+                    '5': 'var(--chart-5)',
+                },
+            },
+            borderRadius: {
+                lg: 'var(--radius)',
+                md: 'calc(var(--radius) - 2px)',
+                sm: 'calc(var(--radius) - 4px)',
+            },
+            fontFamily: {
+                sans: ['Geist Variable', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+            },
+            ...PallamartSharedScale,
+            fontSize: PallamartFontSize,
+            ...PallamartMotion,
+        },
+    },
+    plugins: [],
+};

package/dist/shared-tailwind-theme.d.ts

@@ -0,0 +1,131 @@
+export declare const PallamartScreens: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
+export declare const PallamartFontSize: {
+    'header-0': [string, {
+        fontWeight: number;
+    }];
+    'header-1': [string, {
+        fontWeight: number;
+    }];
+    'header-1-regular': [string, {
+        fontWeight: number;
+    }];
+    'keyboard-1': [string, {
+        fontWeight: number;
+    }];
+    'body-1': [string, {
+        fontWeight: number;
+    }];
+    'header-2': [string, {
+        fontWeight: number;
+    }];
+    'header-2-regular': [string, {
+        fontWeight: number;
+    }];
+    'body-2': [string, {
+        fontWeight: number;
+    }];
+    'header-3': [string, {
+        fontWeight: number;
+    }];
+    'header-3-regular': [string, {
+        fontWeight: number;
+    }];
+    'body-3': [string, {
+        fontWeight: number;
+    }];
+    'header-4': [string, {
+        fontWeight: number;
+    }];
+    'header-4-regular': [string, {
+        fontWeight: number;
+    }];
+    'body-4': [string, {
+        fontWeight: number;
+    }];
+};
+export declare const PallamartSharedScale: {
+    height: {
+        '168': string;
+    };
+    width: {
+        '168': string;
+    };
+    maxHeight: {
+        '168': string;
+    };
+    maxWidth: {
+        '168': string;
+    };
+    transitionProperty: {
+        move: string;
+    };
+};
+export declare const PallamartMotion: {
+    keyframes: {
+        'fade-in': {
+            '0%': {
+                opacity: string;
+            };
+            '100%': {
+                opacity: string;
+            };
+        };
+        'fade-out': {
+            '0%': {
+                opacity: string;
+            };
+            '100%': {
+                opacity: string;
+            };
+        };
+        'slide-fade-in': {
+            '0%': {
+                opacity: string;
+                transform: string;
+            };
+            '100%': {
+                opacity: string;
+            };
+        };
+        'slide-fade-out': {
+            '0%': {
+                opacity: string;
+            };
+            '100%': {
+                opacity: string;
+                transform: string;
+            };
+        };
+        'slide-down-to-bottom': {
+            '0%': {
+                transform: string;
+            };
+            '100%': {
+                transform: string;
+            };
+        };
+        'slide-up-from-bottom': {
+            '0%': {
+                transform: string;
+            };
+            '100%': {
+                transform: string;
+            };
+        };
+    };
+    animation: {
+        'fade-in': string;
+        'fade-out': string;
+        'slide-fade-in': string;
+        'slide-fade-out': string;
+        'slide-down-to-bottom': string;
+        'slide-up-from-bottom': string;
+    };
+};

package/dist/shared-tailwind-theme.js

@@ -0,0 +1,95 @@
+export const PallamartScreens = {
+    'xs': '386px',
+    'sm': '480px',
+    'md': '768px',
+    'lg': '976px',
+    'xl': '1128px',
+    '2xl': '1528px',
+};
+export const PallamartFontSize = {
+    'header-0': ['86px', { fontWeight: 700 }],
+    'header-1': ['40px', { fontWeight: 700 }],
+    'header-1-regular': ['40px', { fontWeight: 400 }],
+    'keyboard-1': ['21px', { fontWeight: 400 }],
+    'body-1': ['18px', { fontWeight: 400 }],
+    'header-2': ['28px', { fontWeight: 700 }],
+    'header-2-regular': ['28px', { fontWeight: 400 }],
+    'body-2': ['16px', { fontWeight: 400 }],
+    'header-3': ['20px', { fontWeight: 600 }],
+    'header-3-regular': ['20px', { fontWeight: 400 }],
+    'body-3': ['12px', { fontWeight: 400 }],
+    'header-4': ['16px', { fontWeight: 600 }],
+    'header-4-regular': ['16px', { fontWeight: 400 }],
+    'body-4': ['8px', { fontWeight: 400 }],
+};
+export const PallamartSharedScale = {
+    height: { '168': '42rem' },
+    width: { '168': '42rem' },
+    maxHeight: { '168': '42rem' },
+    maxWidth: { '168': '42rem' },
+    transitionProperty: {
+        move: 'left, right',
+    },
+};
+export const PallamartMotion = {
+    keyframes: {
+        'fade-in': {
+            '0%': {
+                opacity: '0',
+            },
+            '100%': {
+                opacity: '1',
+            },
+        },
+        'fade-out': {
+            '0%': {
+                opacity: '1',
+            },
+            '100%': {
+                opacity: '0',
+            },
+        },
+        'slide-fade-in': {
+            '0%': {
+                opacity: '0',
+                transform: 'translateY(0)',
+            },
+            '100%': {
+                opacity: '1',
+            },
+        },
+        'slide-fade-out': {
+            '0%': {
+                opacity: '1',
+            },
+            '100%': {
+                opacity: '0',
+                transform: 'translateY(0)',
+            },
+        },
+        'slide-down-to-bottom': {
+            '0%': {
+                transform: 'translateY(0)',
+            },
+            '100%': {
+                transform: 'translateY(100%)',
+            },
+        },
+        'slide-up-from-bottom': {
+            '0%': {
+                transform: 'translateY(100%)',
+            },
+            '100%': {
+                transform: 'translateY(0)',
+            },
+        },
+    },
+    animation: {
+        'fade-in': 'fade-in 0.2s ease-out forwards',
+        'fade-out': 'fade-out 0.2s ease-in forwards',
+        'slide-fade-in': 'slide-fade-in 0.2s ease-out forwards',
+        'slide-fade-out': 'slide-fade-out 0.2s ease-in forwards',
+        'slide-down-to-bottom': 'slide-down-to-bottom 0.2s ease-out forwards',
+        'slide-up-from-bottom': 'slide-up-from-bottom 0.2s ease-out forwards',
+    },
+};

package/dist/styles/components/auth/auth.css

@@ -0,0 +1,25 @@
+/* Base */
+.pallamart-btn-auth-microsoft,
+a.pallamart-btn-auth-microsoft {
+	@apply flex w-full items-center justify-center gap-3 rounded-md border border-input bg-card px-4 py-3 text-body-2 text-card-foreground transition-colors;
+}
+
+.pallamart-btn-auth-microsoft:enabled,
+a.pallamart-btn-auth-microsoft:not([aria-disabled='true']) {
+	@apply bg-card text-card-foreground;
+}
+
+.pallamart-btn-auth-microsoft:enabled:hover,
+a.pallamart-btn-auth-microsoft:not([aria-disabled='true']):hover {
+	@apply bg-accent text-accent-foreground;
+}
+
+.pallamart-btn-auth-microsoft:enabled:active,
+a.pallamart-btn-auth-microsoft:not([aria-disabled='true']):active {
+	@apply bg-secondary;
+}
+
+.pallamart-btn-auth-microsoft:disabled,
+a.pallamart-btn-auth-microsoft[aria-disabled='true'] {
+	@apply bg-muted text-muted-foreground;
+}

package/dist/styles/components/auth/index.css

@@ -0,0 +1 @@
+@import url('auth.css');

package/dist/styles/components/buttons/accent-link.css

@@ -0,0 +1,15 @@
+/* Base */
+.pallamart-link-accent,
+a.pallamart-link-accent {
+	@apply px-3 py-2 rounded-full bg-primary tracking-wide shadow-lg transition-all;
+}
+
+.pallamart-link-accent:hover:not(:disabled),
+a.pallamart-link-accent:not([aria-disabled='true']):hover {
+	@apply hover:bg-opacity-90;
+}
+
+.pallamart-link-accent:disabled,
+a.pallamart-link-accent[aria-disabled='true'] {
+	@apply bg-grey text-black border-grey;
+}

package/dist/styles/components/buttons/index.css

@@ -0,0 +1,4 @@
+@import url('accent-link.css');
+@import url('primary-button.css');
+@import url('secondary-button.css');
+@import url('link.css');

package/dist/styles/components/buttons/link.css

@@ -0,0 +1,31 @@
+/* Base */
+.pallamart-link,
+a.pallamart-link {
+	@apply text-primary;
+}
+
+.pallamart-link:disabled,
+a.pallamart-link[aria-disabled='true'] {
+	@apply text-grey;
+}
+
+.pallamart-link:hover:not(:disabled),
+a.pallamart-link:not([aria-disabled='true']):hover {
+	@apply underline;
+}
+
+/* Danger */
+.pallamart-link-danger,
+a.pallamart-link-danger {
+	@apply text-error-contrast;
+}
+
+.pallamart-link-danger:disabled,
+a.pallamart-link-danger[aria-disabled='true'] {
+	@apply text-grey;
+}
+
+.pallamart-link-danger:hover:not(:disabled),
+a.pallamart-link-danger:not([aria-disabled='true']):hover {
+	@apply underline;
+}

package/dist/styles/components/buttons/primary-button.css

@@ -0,0 +1,25 @@
+/* Base */
+.pallamart-btn-primary,
+a.pallamart-btn-primary {
+	@apply inline-flex min-h-10 w-full items-center justify-center rounded-md border px-4 py-2 text-body-2 transition-colors sm:w-auto;
+}
+
+.pallamart-btn-primary:enabled,
+a.pallamart-btn-primary:not([aria-disabled='true']) {
+	@apply border-primary bg-primary text-white;
+}
+
+.pallamart-btn-primary:enabled:hover,
+a.pallamart-btn-primary:not([aria-disabled='true']):hover {
+	@apply border-primary-hover bg-primary-hover;
+}
+
+.pallamart-btn-primary:enabled:active,
+a.pallamart-btn-primary:not([aria-disabled='true']):active {
+	@apply border-primary bg-background text-primary;
+}
+
+.pallamart-btn-primary:disabled,
+a.pallamart-btn-primary[aria-disabled='true'] {
+	@apply border-input bg-muted text-muted-foreground;
+}

package/dist/styles/components/buttons/secondary-button.css

@@ -0,0 +1,25 @@
+/* Base */
+.pallamart-btn-secondary,
+a.pallamart-btn-secondary {
+	@apply inline-flex min-h-10 w-full items-center justify-center rounded-md border px-4 py-2 text-body-2 transition-colors sm:w-auto;
+}
+
+.pallamart-btn-secondary:enabled,
+a.pallamart-btn-secondary:not([aria-disabled='true']) {
+	@apply border-input bg-secondary text-secondary-foreground;
+}
+
+.pallamart-btn-secondary:enabled:hover,
+a.pallamart-btn-secondary:not([aria-disabled='true']):hover {
+	@apply border-input bg-accent text-accent-foreground;
+}
+
+.pallamart-btn-secondary:enabled:active,
+a.pallamart-btn-secondary:not([aria-disabled='true']):active {
+	@apply border-input bg-secondary text-secondary-foreground;
+}
+
+.pallamart-btn-secondary:disabled,
+a.pallamart-btn-secondary[aria-disabled='true'] {
+	@apply border-input bg-muted text-muted-foreground;
+}

package/dist/styles/components/containers/card.css

@@ -0,0 +1,12 @@
+/* Base */
+.pallamart-card {
+	@apply rounded-lg border border-border bg-card p-6 text-card-foreground transition-colors;
+}
+
+.pallamart-card:hover {
+	@apply cursor-pointer border-primary shadow-sm;
+}
+
+.pallamart-static-card {
+	@apply rounded-lg border border-border bg-card p-6 text-card-foreground transition-colors;
+}

package/dist/styles/components/containers/index.css

@@ -0,0 +1 @@
+@import url('card.css');

package/dist/styles/components/form/checkbox.css

@@ -0,0 +1,26 @@
+/* Base */
+.pallamart-checkbox {
+	@apply h-4 w-4 shrink-0 appearance-none rounded-sm border border-input bg-background align-middle transition-colors cursor-pointer;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: 0.75rem 0.75rem;
+}
+
+.pallamart-checkbox:checked {
+	@apply border-primary bg-primary;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.pallamart-checkbox:focus {
+	@apply border-primary outline-none ring-2 ring-offset-2;
+	--tw-ring-color: color-mix(in oklch, var(--primary) 15%, transparent);
+}
+
+.pallamart-checkbox:disabled,
+.pallamart-checkbox[aria-disabled='true'] {
+	@apply cursor-not-allowed bg-muted;
+}
+
+.pallamart-checkbox[aria-invalid='true'] {
+	@apply border-error-contrast;
+}

package/dist/styles/components/form/form-input.css

@@ -0,0 +1,40 @@
+/* Base */
+.pallamart-input {
+	@apply flex flex-col space-y-2 w-full;
+}
+
+.pallamart-input label {
+	@apply text-header-4 text-foreground;
+}
+
+.pallamart-input input:not([type='checkbox'], [type='range']),
+.pallamart-input textarea,
+.pallamart-input select {
+	@apply w-full rounded-md border border-input bg-background px-3 py-2 text-body-2 text-foreground transition-colors;
+}
+
+.pallamart-input select {
+	@apply appearance-none cursor-pointer;
+}
+
+.pallamart-input input:focus,
+.pallamart-input textarea:focus,
+.pallamart-input select:focus {
+	@apply border-ring outline-none ring-2 ring-ring;
+}
+
+.pallamart-input input:not([type='checkbox'], [type='range']):disabled,
+.pallamart-input textarea:disabled,
+.pallamart-input select:disabled {
+	@apply cursor-not-allowed bg-muted text-muted-foreground;
+}
+
+.pallamart-input input:not([type='checkbox'], [type='range'])[aria-invalid='true'],
+.pallamart-input textarea[aria-invalid='true'],
+.pallamart-input select[aria-invalid='true'] {
+	@apply border-error-contrast;
+}
+
+.pallamart-input p {
+	@apply text-body-3 text-error-contrast;
+}

package/dist/styles/components/form/index.css

@@ -0,0 +1,2 @@
+@import url('form-input.css');
+@import url('checkbox.css');

package/dist/styles/components/index.css

@@ -0,0 +1,5 @@
+@import url('auth');
+@import url('buttons');
+@import url('containers');
+@import url('form');
+@import url('loaders');