From ab440f9eccba7598c27e66573850fb152d134217 Mon Sep 17 00:00:00 2001 From: ldvtz Date: Sat, 30 Nov 2024 17:02:03 +0100 Subject: [PATCH 1/5] export preset --- design-library/package.json | 6 +- design-library/pnpm-lock.yaml | 85 +++- design-library/src/index.ts | 3 + design-library/src/primevue/preset.ts | 663 ++++++++++++++++++++++++++ 4 files changed, 752 insertions(+), 5 deletions(-) create mode 100644 design-library/src/primevue/preset.ts diff --git a/design-library/package.json b/design-library/package.json index 79eb8dd0..05390dda 100644 --- a/design-library/package.json +++ b/design-library/package.json @@ -97,5 +97,9 @@ "vitest": "^1.6.0", "vue-loader": "^16.8.3", "vue-tsc": "^1.8.8" + }, + "dependencies": { + "@primevue/themes": "^4.2.4", + "primevue": "^4.2.4" } -} +} \ No newline at end of file diff --git a/design-library/pnpm-lock.yaml b/design-library/pnpm-lock.yaml index f47388b5..d9f177a1 100644 --- a/design-library/pnpm-lock.yaml +++ b/design-library/pnpm-lock.yaml @@ -8,6 +8,12 @@ importers: .: dependencies: + '@primevue/themes': + specifier: ^4.2.4 + version: 4.2.4 + primevue: + specifier: ^4.2.4 + version: 4.2.4(vue@3.4.27(typescript@4.9.5)) tailwindcss: specifier: ^3.3.2 version: 3.3.3 @@ -1182,6 +1188,7 @@ packages: '@humanwhocodes/config-array@0.11.11': resolution: {integrity: sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==} engines: {node: '>=10.10.0'} + deprecated: Use @eslint/config-array instead '@humanwhocodes/module-importer@1.0.1': resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==} @@ -1189,6 +1196,7 @@ packages: '@humanwhocodes/object-schema@1.2.1': resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} + deprecated: Use @eslint/object-schema instead '@isaacs/cliui@8.0.2': resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} @@ -1269,6 +1277,28 @@ packages: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} + '@primeuix/styled@0.3.2': + resolution: {integrity: sha512-ColZes0+/WKqH4ob2x8DyNYf1NENpe5ZguOvx5yCLxaP8EIMVhLjWLO/3umJiDnQU4XXMLkn2mMHHw+fhTX/mw==} + engines: {node: '>=12.11.0'} + + '@primeuix/utils@0.3.2': + resolution: {integrity: sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw==} + engines: {node: '>=12.11.0'} + + '@primevue/core@4.2.4': + resolution: {integrity: sha512-QFvPcGSvyIhZPLdnjJnYrwbDtwbA1/FyGLI7VYDgYv4twsgtLw0kgKDyWB1uwM0xdJhv8CCmu7hfxcsPaLuIFg==} + engines: {node: '>=12.11.0'} + peerDependencies: + vue: ^3.3.0 + + '@primevue/icons@4.2.4': + resolution: {integrity: sha512-vteUFM7qvWiDJWxhBbDRgc2VY6kQQyJ91yOukqfWHy4gAgfTz1jiUXMAzc7j269oh4CNFpTNhCe9riS7402HGg==} + engines: {node: '>=12.11.0'} + + '@primevue/themes@4.2.4': + resolution: {integrity: sha512-nVM8/8qoV+lxSTK2k6Q19xyjrBlOjrgPzoA9OneKhlMYucBjWhSf3dBQaB9JgXRXAEwV5bzh4KPfcrMqn53QJA==} + engines: {node: '>=12.11.0'} + '@radix-ui/number@1.0.1': resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==} @@ -2351,6 +2381,7 @@ packages: abab@2.0.6: resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==} + deprecated: Use your platform's native atob() and btoa() methods instead abbrev@1.1.1: resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==} @@ -2364,6 +2395,7 @@ packages: acorn-import-assertions@1.9.0: resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==} + deprecated: package has been renamed to acorn-import-attributes peerDependencies: acorn: ^8 @@ -2978,6 +3010,7 @@ packages: domexception@4.0.0: resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==} engines: {node: '>=12'} + deprecated: Use your platform's native DOMException instead dotenv-expand@10.0.0: resolution: {integrity: sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==} @@ -3148,6 +3181,7 @@ packages: eslint@8.48.0: resolution: {integrity: sha512-sb6DLeIuRXxeM1YljSe1KEx9/YYeZFQWcV8Rq9HfigmdDEugjLEVEa1ozDjL6YDjBpQHPJxJzze+alxi4T3OLg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options. hasBin: true espree@9.6.1: @@ -3420,13 +3454,16 @@ packages: glob@7.1.6: resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==} + deprecated: Glob versions prior to v9 are no longer supported glob@7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} + deprecated: Glob versions prior to v9 are no longer supported glob@8.1.0: resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==} engines: {node: '>=12'} + deprecated: Glob versions prior to v9 are no longer supported globals@11.12.0: resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} @@ -3559,6 +3596,7 @@ packages: inflight@1.0.6: resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} + deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} @@ -4586,6 +4624,10 @@ packages: resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==} engines: {node: '>= 0.8'} + primevue@4.2.4: + resolution: {integrity: sha512-aMQymoO489isReSF/bScypswOnLBU29qkeTulGj3Wntb9plvzTIWjA4+iyDOsyxGmV5GVIvD+DuTw5FNCDWgSw==} + engines: {node: '>=12.11.0'} + process-nextick-args@2.0.1: resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} @@ -4869,14 +4911,17 @@ packages: rimraf@2.6.3: resolution: {integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==} + deprecated: Rimraf versions prior to v4 are no longer supported hasBin: true rimraf@2.7.1: resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==} + deprecated: Rimraf versions prior to v4 are no longer supported hasBin: true rimraf@3.0.2: resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==} + deprecated: Rimraf versions prior to v4 are no longer supported hasBin: true rimraf@5.0.1: @@ -5565,8 +5610,8 @@ packages: vue-component-type-helpers@1.8.4: resolution: {integrity: sha512-6bnLkn8O0JJyiFSIF0EfCogzeqNXpnjJ0vW/SZzNHfe6sPx30lTtTXlE5TFs2qhJlAtDFybStVNpL73cPe3OMQ==} - vue-component-type-helpers@2.0.22: - resolution: {integrity: sha512-gPr2Ba7efUwy/Vfbuf735bHSVdN4ycoZUCHfypkI33M9DUH+ieRblLLVM2eImccFYaWNWwEzURx02EgoXDBmaQ==} + vue-component-type-helpers@2.1.10: + resolution: {integrity: sha512-lfgdSLQKrUmADiSV6PbBvYgQ33KF3Ztv6gP85MfGaGaSGMTXORVaHT1EHfsqCgzRNBstPKYDmvAV9Do5CmJ07A==} vue-demi@0.14.6: resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==} @@ -6934,6 +6979,29 @@ snapshots: '@pkgjs/parseargs@0.11.0': optional: true + '@primeuix/styled@0.3.2': + dependencies: + '@primeuix/utils': 0.3.2 + + '@primeuix/utils@0.3.2': {} + + '@primevue/core@4.2.4(vue@3.4.27(typescript@4.9.5))': + dependencies: + '@primeuix/styled': 0.3.2 + '@primeuix/utils': 0.3.2 + vue: 3.4.27(typescript@4.9.5) + + '@primevue/icons@4.2.4(vue@3.4.27(typescript@4.9.5))': + dependencies: + '@primeuix/utils': 0.3.2 + '@primevue/core': 4.2.4(vue@3.4.27(typescript@4.9.5)) + transitivePeerDependencies: + - vue + + '@primevue/themes@4.2.4': + dependencies: + '@primeuix/styled': 0.3.2 + '@radix-ui/number@1.0.1': dependencies: '@babel/runtime': 7.22.11 @@ -7966,7 +8034,7 @@ snapshots: ts-dedent: 2.2.0 type-fest: 2.19.0 vue: 3.4.27(typescript@4.9.5) - vue-component-type-helpers: 2.0.22 + vue-component-type-helpers: 2.1.10 transitivePeerDependencies: - encoding - supports-color @@ -10929,6 +10997,15 @@ snapshots: pretty-hrtime@1.0.3: {} + primevue@4.2.4(vue@3.4.27(typescript@4.9.5)): + dependencies: + '@primeuix/styled': 0.3.2 + '@primeuix/utils': 0.3.2 + '@primevue/core': 4.2.4(vue@3.4.27(typescript@4.9.5)) + '@primevue/icons': 4.2.4(vue@3.4.27(typescript@4.9.5)) + transitivePeerDependencies: + - vue + process-nextick-args@2.0.1: {} process@0.11.10: {} @@ -12031,7 +12108,7 @@ snapshots: vue-component-type-helpers@1.8.4: {} - vue-component-type-helpers@2.0.22: {} + vue-component-type-helpers@2.1.10: {} vue-demi@0.14.6(vue@3.4.27(typescript@4.9.5)): dependencies: diff --git a/design-library/src/index.ts b/design-library/src/index.ts index 63c5a5ba..b8c56b47 100644 --- a/design-library/src/index.ts +++ b/design-library/src/index.ts @@ -8,6 +8,9 @@ export { default as tailwindPlugin } from "./tokens/plugin/tailwindPlugin"; // Themes export { default as bccForbundetTheme } from "./tokens/tailwind/bccForbundetTheme"; +// Primevue preset +export { default as primeVuePreset } from "./primevue/preset"; + // Composables export { default as useAnimatedNumber } from "./composables/animatedNumber"; diff --git a/design-library/src/primevue/preset.ts b/design-library/src/primevue/preset.ts new file mode 100644 index 00000000..d68b8f44 --- /dev/null +++ b/design-library/src/primevue/preset.ts @@ -0,0 +1,663 @@ +import { definePreset } from "@primevue/themes"; +import Aura from "@primevue/themes/aura"; + +// default preset until primevue releases converter (planned until end of Q4) +const preset = definePreset(Aura, { + primitive: { + borderRadius: { + none: "0", + xs: "2px", + sm: "4px", + md: "6px", + lg: "8px", + xl: "12px", + }, + emerald: { + 50: "#f4f8f7", + 100: "#cadfd8", + 200: "#a1c6b9", + 300: "#77ad9b", + 400: "#4e937c", + 500: "#247a5d", + 600: "#1f684f", + 700: "#195541", + 800: "#144333", + 900: "#0e3125", + 950: "#091f17", + }, + green: { + 50: "#f0fdf4", + 100: "#dcfce7", + 200: "#bbf7d0", + 300: "#86efac", + 400: "#4ade80", + 500: "#22c55e", + 600: "#16a34a", + 700: "#15803d", + 800: "#166534", + 900: "#14532d", + 950: "#052e16", + }, + lime: { + 50: "#f7fee7", + 100: "#ecfccb", + 200: "#d9f99d", + 300: "#bef264", + 400: "#a3e635", + 500: "#84cc16", + 600: "#65a30d", + 700: "#4d7c0f", + 800: "#3f6212", + 900: "#365314", + 950: "#1a2e05", + }, + red: { + 50: "#fef2f2", + 100: "#fee2e2", + 200: "#fecaca", + 300: "#fca5a5", + 400: "#f87171", + 500: "#ef4444", + 600: "#dc2626", + 700: "#b91c1c", + 800: "#991b1b", + 900: "#7f1d1d", + 950: "#450a0a", + }, + orange: { + 50: "#fff7ed", + 100: "#ffedd5", + 200: "#fed7aa", + 300: "#fdba74", + 400: "#fb923c", + 500: "#f97316", + 600: "#ea580c", + 700: "#c2410c", + 800: "#9a3412", + 900: "#7c2d12", + 950: "#431407", + }, + amber: { + 50: "#fffbeb", + 100: "#fef3c7", + 200: "#fde68a", + 300: "#fcd34d", + 400: "#fbbf24", + 500: "#f59e0b", + 600: "#d97706", + 700: "#b45309", + 800: "#92400e", + 900: "#78350f", + 950: "#451a03", + }, + yellow: { + 50: "#fefce8", + 100: "#fef9c3", + 200: "#fef08a", + 300: "#fde047", + 400: "#facc15", + 500: "#eab308", + 600: "#ca8a04", + 700: "#a16207", + 800: "#854d0e", + 900: "#713f12", + 950: "#422006", + }, + teal: { + 50: "#f0fdfa", + 100: "#ccfbf1", + 200: "#99f6e4", + 300: "#5eead4", + 400: "#2dd4bf", + 500: "#14b8a6", + 600: "#0d9488", + 700: "#0f766e", + 800: "#115e59", + 900: "#134e4a", + 950: "#042f2e", + }, + cyan: { + 50: "#ecfeff", + 100: "#cffafe", + 200: "#a5f3fc", + 300: "#67e8f9", + 400: "#22d3ee", + 500: "#06b6d4", + 600: "#0891b2", + 700: "#0e7490", + 800: "#155e75", + 900: "#164e63", + 950: "#083344", + }, + sky: { + 50: "#f0f9ff", + 100: "#e0f2fe", + 200: "#bae6fd", + 300: "#7dd3fc", + 400: "#38bdf8", + 500: "#0ea5e9", + 600: "#0284c7", + 700: "#0369a1", + 800: "#075985", + 900: "#0c4a6e", + 950: "#082f49", + }, + blue: { + 50: "#eff6ff", + 100: "#dbeafe", + 200: "#bfdbfe", + 300: "#93c5fd", + 400: "#60a5fa", + 500: "#3b82f6", + 600: "#2563eb", + 700: "#1d4ed8", + 800: "#1e40af", + 900: "#1e3a8a", + 950: "#172554", + }, + indigo: { + 50: "#eef2ff", + 100: "#e0e7ff", + 200: "#c7d2fe", + 300: "#a5b4fc", + 400: "#818cf8", + 500: "#6366f1", + 600: "#4f46e5", + 700: "#4338ca", + 800: "#3730a3", + 900: "#312e81", + 950: "#1e1b4b", + }, + violet: { + 50: "#f5f3ff", + 100: "#ede9fe", + 200: "#ddd6fe", + 300: "#c4b5fd", + 400: "#a78bfa", + 500: "#8b5cf6", + 600: "#7c3aed", + 700: "#6d28d9", + 800: "#5b21b6", + 900: "#4c1d95", + 950: "#2e1065", + }, + purple: { + 50: "#faf5ff", + 100: "#f3e8ff", + 200: "#e9d5ff", + 300: "#d8b4fe", + 400: "#c084fc", + 500: "#a855f7", + 600: "#9333ea", + 700: "#7e22ce", + 800: "#6b21a8", + 900: "#581c87", + 950: "#3b0764", + }, + fuchsia: { + 50: "#fdf4ff", + 100: "#fae8ff", + 200: "#f5d0fe", + 300: "#f0abfc", + 400: "#e879f9", + 500: "#d946ef", + 600: "#c026d3", + 700: "#a21caf", + 800: "#86198f", + 900: "#701a75", + 950: "#4a044e", + }, + pink: { + 50: "#fdf2f8", + 100: "#fce7f3", + 200: "#fbcfe8", + 300: "#f9a8d4", + 400: "#f472b6", + 500: "#ec4899", + 600: "#db2777", + 700: "#be185d", + 800: "#9d174d", + 900: "#831843", + 950: "#500724", + }, + rose: { + 50: "#fff1f2", + 100: "#ffe4e6", + 200: "#fecdd3", + 300: "#fda4af", + 400: "#fb7185", + 500: "#f43f5e", + 600: "#e11d48", + 700: "#be123c", + 800: "#9f1239", + 900: "#881337", + 950: "#4c0519", + }, + slate: { + 50: "#f8fafc", + 100: "#f1f5f9", + 200: "#e2e8f0", + 300: "#cbd5e1", + 400: "#94a3b8", + 500: "#64748b", + 600: "#475569", + 700: "#334155", + 800: "#1e293b", + 900: "#0f172a", + 950: "#020617", + }, + gray: { + 50: "#f9fafb", + 100: "#f3f4f6", + 200: "#e5e7eb", + 300: "#d1d5db", + 400: "#9ca3af", + 500: "#6b7280", + 600: "#4b5563", + 700: "#374151", + 800: "#1f2937", + 900: "#111827", + 950: "#030712", + }, + zinc: { + 50: "#fafafa", + 100: "#f4f4f5", + 200: "#e4e4e7", + 300: "#d4d4d8", + 400: "#a1a1aa", + 500: "#71717a", + 600: "#52525b", + 700: "#3f3f46", + 800: "#27272a", + 900: "#18181b", + 950: "#09090b", + }, + neutral: { + 50: "#fafafa", + 100: "#f5f5f5", + 200: "#e5e5e5", + 300: "#d4d4d4", + 400: "#a3a3a3", + 500: "#737373", + 600: "#525252", + 700: "#404040", + 800: "#262626", + 900: "#171717", + 950: "#0a0a0a", + }, + stone: { + 50: "#fafaf9", + 100: "#f5f5f4", + 200: "#e7e5e4", + 300: "#d6d3d1", + 400: "#a8a29e", + 500: "#78716c", + 600: "#57534e", + 700: "#44403c", + 800: "#292524", + 900: "#1c1917", + 950: "#0c0a09", + }, + }, + semantic: { + transitionDuration: "0.2s", + focusRing: { + width: "1px", + style: "solid", + color: "{primary.color}", + offset: "2px", + shadow: "none", + }, + disabledOpacity: "0.6", + iconSize: "1rem", + anchorGutter: "2px", + primary: { + 50: "#f4f8f7", + 100: "#cadfd8", + 200: "#a1c6b9", + 300: "#77ad9b", + 400: "#4e937c", + 500: "#247a5d", + 600: "#1f684f", + 700: "#195541", + 800: "#144333", + 900: "#0e3125", + 950: "#091f17", + }, + formField: { + paddingX: "0.75rem", + paddingY: "0.5rem", + sm: { + fontSize: "0.875rem", + paddingX: "0.625rem", + paddingY: "0.375rem", + }, + lg: { + fontSize: "1.125rem", + paddingX: "0.875rem", + paddingY: "0.625rem", + }, + borderRadius: "{border.radius.md}", + focusRing: { + width: "0", + style: "none", + color: "transparent", + offset: "0", + shadow: "none", + }, + transitionDuration: "{transition.duration}", + }, + list: { + padding: "0.25rem 0.25rem", + gap: "2px", + header: { + padding: "0.5rem 1rem 0.25rem 1rem", + }, + option: { + padding: "0.5rem 0.75rem", + borderRadius: "{border.radius.sm}", + }, + optionGroup: { + padding: "0.5rem 0.75rem", + fontWeight: "600", + }, + }, + content: { + borderRadius: "{border.radius.md}", + }, + mask: { + transitionDuration: "0.15s", + }, + navigation: { + list: { + padding: "0.25rem 0.25rem", + gap: "2px", + }, + item: { + padding: "0.5rem 0.75rem", + borderRadius: "{border.radius.sm}", + gap: "0.5rem", + }, + submenuLabel: { + padding: "0.5rem 0.75rem", + fontWeight: "600", + }, + submenuIcon: { + size: "0.875rem", + }, + }, + overlay: { + select: { + borderRadius: "{border.radius.md}", + shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)", + }, + popover: { + borderRadius: "{border.radius.md}", + padding: "0.75rem", + shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)", + }, + modal: { + borderRadius: "{border.radius.xl}", + padding: "1.25rem", + shadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)", + }, + navigation: { + shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)", + }, + }, + colorScheme: { + light: { + surface: { + 0: "#ffffff", + 50: "#f8fafc", + 100: "#f1f5f9", + 200: "#e2e8f0", + 300: "#cbd5e1", + 400: "#94a3b8", + 500: "#64748b", + 600: "#475569", + 700: "#334155", + 800: "#1e293b", + 900: "#0f172a", + 950: "#020617", + }, + primary: { + color: "{primary.500}", + contrastColor: "#ffffff", + hoverColor: "{primary.600}", + activeColor: "{primary.700}", + }, + highlight: { + background: "{primary.50}", + focusBackground: "{primary.100}", + color: "{primary.700}", + focusColor: "{primary.800}", + }, + mask: { + background: "rgba(0,0,0,0.4)", + color: "{surface.200}", + }, + formField: { + background: "{surface.0}", + disabledBackground: "{surface.200}", + filledBackground: "{surface.50}", + filledHoverBackground: "{surface.50}", + filledFocusBackground: "{surface.50}", + borderColor: "{surface.300}", + hoverBorderColor: "{surface.400}", + focusBorderColor: "{primary.color}", + invalidBorderColor: "{red.400}", + color: "{surface.700}", + disabledColor: "{surface.500}", + placeholderColor: "{surface.500}", + invalidPlaceholderColor: "{red.600}", + floatLabelColor: "{surface.500}", + floatLabelFocusColor: "{primary.600}", + floatLabelActiveColor: "{surface.500}", + floatLabelInvalidColor: "{form.field.invalid.placeholder.color}", + iconColor: "{surface.400}", + shadow: "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)", + }, + text: { + color: "{surface.700}", + hoverColor: "{surface.800}", + mutedColor: "{surface.500}", + hoverMutedColor: "{surface.600}", + }, + content: { + background: "{surface.0}", + hoverBackground: "{surface.100}", + borderColor: "{surface.200}", + color: "{text.color}", + hoverColor: "{text.hover.color}", + }, + overlay: { + select: { + background: "{surface.0}", + borderColor: "{surface.200}", + color: "{text.color}", + }, + popover: { + background: "{surface.0}", + borderColor: "{surface.200}", + color: "{text.color}", + }, + modal: { + background: "{surface.0}", + borderColor: "{surface.200}", + color: "{text.color}", + }, + }, + list: { + option: { + focusBackground: "{surface.100}", + selectedBackground: "{highlight.background}", + selectedFocusBackground: "{highlight.focus.background}", + color: "{text.color}", + focusColor: "{text.hover.color}", + selectedColor: "{highlight.color}", + selectedFocusColor: "{highlight.focus.color}", + icon: { + color: "{surface.400}", + focusColor: "{surface.500}", + }, + }, + optionGroup: { + background: "transparent", + color: "{text.muted.color}", + }, + }, + navigation: { + item: { + focusBackground: "{surface.100}", + activeBackground: "{surface.100}", + color: "{text.color}", + focusColor: "{text.hover.color}", + activeColor: "{text.hover.color}", + icon: { + color: "{surface.400}", + focusColor: "{surface.500}", + activeColor: "{surface.500}", + }, + }, + submenuLabel: { + background: "transparent", + color: "{text.muted.color}", + }, + submenuIcon: { + color: "{surface.400}", + focusColor: "{surface.500}", + activeColor: "{surface.500}", + }, + }, + }, + dark: { + surface: { + 0: "#ffffff", + 50: "#fafafa", + 100: "#f4f4f5", + 200: "#e4e4e7", + 300: "#d4d4d8", + 400: "#a1a1aa", + 500: "#71717a", + 600: "#52525b", + 700: "#3f3f46", + 800: "#27272a", + 900: "#18181b", + 950: "#09090b", + }, + primary: { + color: "{primary.400}", + contrastColor: "{surface.900}", + hoverColor: "{primary.300}", + activeColor: "{primary.200}", + }, + highlight: { + background: "color-mix(in srgb, {primary.400}, transparent 84%)", + focusBackground: "color-mix(in srgb, {primary.400}, transparent 76%)", + color: "rgba(255,255,255,.87)", + focusColor: "rgba(255,255,255,.87)", + }, + mask: { + background: "rgba(0,0,0,0.6)", + color: "{surface.200}", + }, + formField: { + background: "{surface.950}", + disabledBackground: "{surface.700}", + filledBackground: "{surface.800}", + filledHoverBackground: "{surface.800}", + filledFocusBackground: "{surface.800}", + borderColor: "{surface.600}", + hoverBorderColor: "{surface.500}", + focusBorderColor: "{primary.color}", + invalidBorderColor: "{red.300}", + color: "{surface.0}", + disabledColor: "{surface.400}", + placeholderColor: "{surface.400}", + invalidPlaceholderColor: "{red.400}", + floatLabelColor: "{surface.400}", + floatLabelFocusColor: "{primary.color}", + floatLabelActiveColor: "{surface.400}", + floatLabelInvalidColor: "{form.field.invalid.placeholder.color}", + iconColor: "{surface.400}", + shadow: "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)", + }, + text: { + color: "{surface.0}", + hoverColor: "{surface.0}", + mutedColor: "{surface.400}", + hoverMutedColor: "{surface.300}", + }, + content: { + background: "{surface.900}", + hoverBackground: "{surface.800}", + borderColor: "{surface.700}", + color: "{text.color}", + hoverColor: "{text.hover.color}", + }, + overlay: { + select: { + background: "{surface.900}", + borderColor: "{surface.700}", + color: "{text.color}", + }, + popover: { + background: "{surface.900}", + borderColor: "{surface.700}", + color: "{text.color}", + }, + modal: { + background: "{surface.900}", + borderColor: "{surface.700}", + color: "{text.color}", + }, + }, + list: { + option: { + focusBackground: "{surface.800}", + selectedBackground: "{highlight.background}", + selectedFocusBackground: "{highlight.focus.background}", + color: "{text.color}", + focusColor: "{text.hover.color}", + selectedColor: "{highlight.color}", + selectedFocusColor: "{highlight.focus.color}", + icon: { + color: "{surface.500}", + focusColor: "{surface.400}", + }, + }, + optionGroup: { + background: "transparent", + color: "{text.muted.color}", + }, + }, + navigation: { + item: { + focusBackground: "{surface.800}", + activeBackground: "{surface.800}", + color: "{text.color}", + focusColor: "{text.hover.color}", + activeColor: "{text.hover.color}", + icon: { + color: "{surface.500}", + focusColor: "{surface.400}", + activeColor: "{surface.400}", + }, + }, + submenuLabel: { + background: "transparent", + color: "{text.muted.color}", + }, + submenuIcon: { + color: "{surface.500}", + focusColor: "{surface.400}", + activeColor: "{surface.400}", + }, + }, + }, + }, + }, +}); + +export default preset; From b72cb1ba0c03cad31510d731719ff22be6c075ad Mon Sep 17 00:00:00 2001 From: ldvtz Date: Sun, 1 Dec 2024 09:35:50 +0100 Subject: [PATCH 2/5] export only preset config --- design-library/src/primevue/preset.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/design-library/src/primevue/preset.ts b/design-library/src/primevue/preset.ts index d68b8f44..91ecc40e 100644 --- a/design-library/src/primevue/preset.ts +++ b/design-library/src/primevue/preset.ts @@ -2,7 +2,7 @@ import { definePreset } from "@primevue/themes"; import Aura from "@primevue/themes/aura"; // default preset until primevue releases converter (planned until end of Q4) -const preset = definePreset(Aura, { +const preset = { primitive: { borderRadius: { none: "0", @@ -658,6 +658,6 @@ const preset = definePreset(Aura, { }, }, }, -}); +}; export default preset; From 23d59841c8d59df9c6f290e616b496b7e607c08f Mon Sep 17 00:00:00 2001 From: ldvtz Date: Sun, 1 Dec 2024 09:43:38 +0100 Subject: [PATCH 3/5] uninstall primevue --- design-library/package.json | 4 ---- design-library/src/primevue/preset.ts | 3 --- 2 files changed, 7 deletions(-) diff --git a/design-library/package.json b/design-library/package.json index 05390dda..ea3da754 100644 --- a/design-library/package.json +++ b/design-library/package.json @@ -97,9 +97,5 @@ "vitest": "^1.6.0", "vue-loader": "^16.8.3", "vue-tsc": "^1.8.8" - }, - "dependencies": { - "@primevue/themes": "^4.2.4", - "primevue": "^4.2.4" } } \ No newline at end of file diff --git a/design-library/src/primevue/preset.ts b/design-library/src/primevue/preset.ts index 91ecc40e..e9f45335 100644 --- a/design-library/src/primevue/preset.ts +++ b/design-library/src/primevue/preset.ts @@ -1,6 +1,3 @@ -import { definePreset } from "@primevue/themes"; -import Aura from "@primevue/themes/aura"; - // default preset until primevue releases converter (planned until end of Q4) const preset = { primitive: { From a8192c62e0d41555a3fc181ce676338f2682893c Mon Sep 17 00:00:00 2001 From: ldvtz Date: Sun, 1 Dec 2024 09:55:25 +0100 Subject: [PATCH 4/5] primevue as peer dependency --- design-library/package.json | 12 ++++++- design-library/pnpm-lock.yaml | 64 ----------------------------------- 2 files changed, 11 insertions(+), 65 deletions(-) diff --git a/design-library/package.json b/design-library/package.json index ea3da754..bdf1b009 100644 --- a/design-library/package.json +++ b/design-library/package.json @@ -52,7 +52,17 @@ }, "peerDependencies": { "tailwindcss": "^3.3.2", - "vue": "^3.4.0" + "vue": "^3.4.0", + "primevue": "^4.2.4", + "@primevue/themes": "^4.2.4" + }, + "peerDependenciesMeta": { + "primevue": { + "optional": true + }, + "@primevue/themes": { + "optional": true + } }, "devDependencies": { "@babel/core": "^7.22.11", diff --git a/design-library/pnpm-lock.yaml b/design-library/pnpm-lock.yaml index d9f177a1..97e01e6a 100644 --- a/design-library/pnpm-lock.yaml +++ b/design-library/pnpm-lock.yaml @@ -8,12 +8,6 @@ importers: .: dependencies: - '@primevue/themes': - specifier: ^4.2.4 - version: 4.2.4 - primevue: - specifier: ^4.2.4 - version: 4.2.4(vue@3.4.27(typescript@4.9.5)) tailwindcss: specifier: ^3.3.2 version: 3.3.3 @@ -1277,28 +1271,6 @@ packages: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} - '@primeuix/styled@0.3.2': - resolution: {integrity: sha512-ColZes0+/WKqH4ob2x8DyNYf1NENpe5ZguOvx5yCLxaP8EIMVhLjWLO/3umJiDnQU4XXMLkn2mMHHw+fhTX/mw==} - engines: {node: '>=12.11.0'} - - '@primeuix/utils@0.3.2': - resolution: {integrity: sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw==} - engines: {node: '>=12.11.0'} - - '@primevue/core@4.2.4': - resolution: {integrity: sha512-QFvPcGSvyIhZPLdnjJnYrwbDtwbA1/FyGLI7VYDgYv4twsgtLw0kgKDyWB1uwM0xdJhv8CCmu7hfxcsPaLuIFg==} - engines: {node: '>=12.11.0'} - peerDependencies: - vue: ^3.3.0 - - '@primevue/icons@4.2.4': - resolution: {integrity: sha512-vteUFM7qvWiDJWxhBbDRgc2VY6kQQyJ91yOukqfWHy4gAgfTz1jiUXMAzc7j269oh4CNFpTNhCe9riS7402HGg==} - engines: {node: '>=12.11.0'} - - '@primevue/themes@4.2.4': - resolution: {integrity: sha512-nVM8/8qoV+lxSTK2k6Q19xyjrBlOjrgPzoA9OneKhlMYucBjWhSf3dBQaB9JgXRXAEwV5bzh4KPfcrMqn53QJA==} - engines: {node: '>=12.11.0'} - '@radix-ui/number@1.0.1': resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==} @@ -4624,10 +4596,6 @@ packages: resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==} engines: {node: '>= 0.8'} - primevue@4.2.4: - resolution: {integrity: sha512-aMQymoO489isReSF/bScypswOnLBU29qkeTulGj3Wntb9plvzTIWjA4+iyDOsyxGmV5GVIvD+DuTw5FNCDWgSw==} - engines: {node: '>=12.11.0'} - process-nextick-args@2.0.1: resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} @@ -6979,29 +6947,6 @@ snapshots: '@pkgjs/parseargs@0.11.0': optional: true - '@primeuix/styled@0.3.2': - dependencies: - '@primeuix/utils': 0.3.2 - - '@primeuix/utils@0.3.2': {} - - '@primevue/core@4.2.4(vue@3.4.27(typescript@4.9.5))': - dependencies: - '@primeuix/styled': 0.3.2 - '@primeuix/utils': 0.3.2 - vue: 3.4.27(typescript@4.9.5) - - '@primevue/icons@4.2.4(vue@3.4.27(typescript@4.9.5))': - dependencies: - '@primeuix/utils': 0.3.2 - '@primevue/core': 4.2.4(vue@3.4.27(typescript@4.9.5)) - transitivePeerDependencies: - - vue - - '@primevue/themes@4.2.4': - dependencies: - '@primeuix/styled': 0.3.2 - '@radix-ui/number@1.0.1': dependencies: '@babel/runtime': 7.22.11 @@ -10997,15 +10942,6 @@ snapshots: pretty-hrtime@1.0.3: {} - primevue@4.2.4(vue@3.4.27(typescript@4.9.5)): - dependencies: - '@primeuix/styled': 0.3.2 - '@primeuix/utils': 0.3.2 - '@primevue/core': 4.2.4(vue@3.4.27(typescript@4.9.5)) - '@primevue/icons': 4.2.4(vue@3.4.27(typescript@4.9.5)) - transitivePeerDependencies: - - vue - process-nextick-args@2.0.1: {} process@0.11.10: {} From 9703938b0b0003d5a0a6cd756276e4b20e650f73 Mon Sep 17 00:00:00 2001 From: ldvtz Date: Fri, 6 Dec 2024 12:14:53 +0100 Subject: [PATCH 5/5] update lockfile --- design-library/pnpm-lock.yaml | 64 +++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/design-library/pnpm-lock.yaml b/design-library/pnpm-lock.yaml index 97e01e6a..d9f177a1 100644 --- a/design-library/pnpm-lock.yaml +++ b/design-library/pnpm-lock.yaml @@ -8,6 +8,12 @@ importers: .: dependencies: + '@primevue/themes': + specifier: ^4.2.4 + version: 4.2.4 + primevue: + specifier: ^4.2.4 + version: 4.2.4(vue@3.4.27(typescript@4.9.5)) tailwindcss: specifier: ^3.3.2 version: 3.3.3 @@ -1271,6 +1277,28 @@ packages: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} + '@primeuix/styled@0.3.2': + resolution: {integrity: sha512-ColZes0+/WKqH4ob2x8DyNYf1NENpe5ZguOvx5yCLxaP8EIMVhLjWLO/3umJiDnQU4XXMLkn2mMHHw+fhTX/mw==} + engines: {node: '>=12.11.0'} + + '@primeuix/utils@0.3.2': + resolution: {integrity: sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw==} + engines: {node: '>=12.11.0'} + + '@primevue/core@4.2.4': + resolution: {integrity: sha512-QFvPcGSvyIhZPLdnjJnYrwbDtwbA1/FyGLI7VYDgYv4twsgtLw0kgKDyWB1uwM0xdJhv8CCmu7hfxcsPaLuIFg==} + engines: {node: '>=12.11.0'} + peerDependencies: + vue: ^3.3.0 + + '@primevue/icons@4.2.4': + resolution: {integrity: sha512-vteUFM7qvWiDJWxhBbDRgc2VY6kQQyJ91yOukqfWHy4gAgfTz1jiUXMAzc7j269oh4CNFpTNhCe9riS7402HGg==} + engines: {node: '>=12.11.0'} + + '@primevue/themes@4.2.4': + resolution: {integrity: sha512-nVM8/8qoV+lxSTK2k6Q19xyjrBlOjrgPzoA9OneKhlMYucBjWhSf3dBQaB9JgXRXAEwV5bzh4KPfcrMqn53QJA==} + engines: {node: '>=12.11.0'} + '@radix-ui/number@1.0.1': resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==} @@ -4596,6 +4624,10 @@ packages: resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==} engines: {node: '>= 0.8'} + primevue@4.2.4: + resolution: {integrity: sha512-aMQymoO489isReSF/bScypswOnLBU29qkeTulGj3Wntb9plvzTIWjA4+iyDOsyxGmV5GVIvD+DuTw5FNCDWgSw==} + engines: {node: '>=12.11.0'} + process-nextick-args@2.0.1: resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} @@ -6947,6 +6979,29 @@ snapshots: '@pkgjs/parseargs@0.11.0': optional: true + '@primeuix/styled@0.3.2': + dependencies: + '@primeuix/utils': 0.3.2 + + '@primeuix/utils@0.3.2': {} + + '@primevue/core@4.2.4(vue@3.4.27(typescript@4.9.5))': + dependencies: + '@primeuix/styled': 0.3.2 + '@primeuix/utils': 0.3.2 + vue: 3.4.27(typescript@4.9.5) + + '@primevue/icons@4.2.4(vue@3.4.27(typescript@4.9.5))': + dependencies: + '@primeuix/utils': 0.3.2 + '@primevue/core': 4.2.4(vue@3.4.27(typescript@4.9.5)) + transitivePeerDependencies: + - vue + + '@primevue/themes@4.2.4': + dependencies: + '@primeuix/styled': 0.3.2 + '@radix-ui/number@1.0.1': dependencies: '@babel/runtime': 7.22.11 @@ -10942,6 +10997,15 @@ snapshots: pretty-hrtime@1.0.3: {} + primevue@4.2.4(vue@3.4.27(typescript@4.9.5)): + dependencies: + '@primeuix/styled': 0.3.2 + '@primeuix/utils': 0.3.2 + '@primevue/core': 4.2.4(vue@3.4.27(typescript@4.9.5)) + '@primevue/icons': 4.2.4(vue@3.4.27(typescript@4.9.5)) + transitivePeerDependencies: + - vue + process-nextick-args@2.0.1: {} process@0.11.10: {}