From 3e96717a0836f6bfd8fec82c32802b4b944707cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Thu, 7 Mar 2024 10:21:21 +0100 Subject: [PATCH] Switched to Pico v2 (#2) * feat: added pico v2 * fix: rename pico css Stripe vars * fix: navbar dropdown * fix: payment modal font size var * fix: payment method background color * chore: remove unused CSS --- package-lock.json | 11 +++--- package.json | 2 +- src/assets/form.css | 52 ++++++++++++++--------------- src/assets/main.css | 61 +++++++--------------------------- src/components/NavBar.vue | 11 ++---- src/forms/AddPaymentMethod.vue | 28 ++++++++-------- src/helpers/cssVariables.ts | 39 ++++++++++++++++++---- src/stories/NavBar.stories.ts | 4 +-- 8 files changed, 98 insertions(+), 110 deletions(-) diff --git a/package-lock.json b/package-lock.json index 26d51f7..8e93351 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "@m-media/vue3-gate-keeper": "^0.1.5", "@m-media/vue3-meta-tags": "^0.0.4", - "@picocss/pico": "^1.5.6", + "@picocss/pico": "^2.0.6", "@stripe/stripe-js": "^1.42.1", "pinia": "^2.0.23", "vue": "^3.2.41", @@ -3607,9 +3607,12 @@ "dev": true }, "node_modules/@picocss/pico": { - "version": "1.5.13", - "resolved": "https://registry.npmjs.org/@picocss/pico/-/pico-1.5.13.tgz", - "integrity": "sha512-BPTeE4JC95+7/vsG9r+6hDR1qUkV4YZ1blI/TI6peOmM94XubjmUDE3jUi4f6DBV6WmCL76ueTct/NerJ33E8A==" + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@picocss/pico/-/pico-2.0.6.tgz", + "integrity": "sha512-/d8qsykowelD6g8k8JYgmCagOIulCPHMEc2NC4u7OjmpQLmtSetLhEbt0j1n3fPNJVcrT84dRp0RfJBn3wJROA==", + "engines": { + "node": ">=18.19.0" + } }, "node_modules/@pinia/testing": { "version": "0.0.14", diff --git a/package.json b/package.json index 027c996..0ac2935 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "dependencies": { "@m-media/vue3-gate-keeper": "^0.1.5", "@m-media/vue3-meta-tags": "^0.0.4", - "@picocss/pico": "^1.5.6", + "@picocss/pico": "^2.0.6", "@stripe/stripe-js": "^1.42.1", "pinia": "^2.0.23", "vue": "^3.2.41", diff --git a/src/assets/form.css b/src/assets/form.css index cbcbc5a..765cae3 100644 --- a/src/assets/form.css +++ b/src/assets/form.css @@ -2,53 +2,53 @@ /* Any invalid */ :where(input, select, textarea, .input):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week], :placeholder-shown, :focus):invalid { - background-image: var(--icon-invalid); - padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; - padding-left: var(--form-element-spacing-horizontal); - -webkit-padding-start: var(--form-element-spacing-horizontal) !important; - padding-inline-start: var(--form-element-spacing-horizontal) !important; - -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; - padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; + background-image: var(--pico-icon-invalid); + padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; + padding-left: var(--pico-form-element-spacing-horizontal); + -webkit-padding-start: var(--pico-form-element-spacing-horizontal) !important; + padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; + -webkit-padding-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; + padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; background-position: center right .75rem; background-size: 1rem auto; background-repeat: no-repeat; } :where(input, select, textarea, .input):not(:placeholder-shown, :focus):invalid { - --border-color: var(--form-element-invalid-border-color); + --border-color: var(--pico-form-element-invalid-border-color); } :where(input, select, textarea, .input):not(:placeholder-shown, :focus):invalid+small { - color: var(--form-element-invalid-border-color); + color: var(--pico-form-element-invalid-border-color); } .input { - padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); - margin-bottom: var(--spacing); + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin-bottom: var(--pico-spacing); width: 100%; - --background-color: var(--form-element-background-color); - --border-color: var(--form-element-border-color); - --color: var(--form-element-color); + --background-color: var(--pico-form-element-background-color); + --border-color: var(--pico-form-element-border-color); + --color: var(--pico-form-element-color); --box-shadow: none; - border: var(--border-width) solid var(--border-color); - border-radius: var(--border-radius); + border: var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius: var(--pico-border-radius); outline: 0; - background-color: var(--background-color); - box-shadow: var(--box-shadow); - color: var(--color); - font-weight: var(--font-weight); - transition: background-color var(--transition), - border-color var(--transition), color var(--transition), - box-shadow var(--transition); + background-color: var(--pico-form-element-background-color); + box-shadow: var(--pico-box-shadow); + color: var(--pico-color); + font-weight: var(--pico-font-weight); + transition: background-color var(--pico-transition), + border-color var(--pico-transition), color var(--pico-transition), + box-shadow var(--pico-transition); font-size: 1rem; - line-height: var(--line-height); + line-height: var(--pico-line-height); font-family: inherit; letter-spacing: inherit; - height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2); + height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); /* Below helps with Stripe input */ overflow: hidden; } .input::placeholder { - color: var(--form-element-placeholder-color); + color: var(--pico-form-element-placeholder-color); } \ No newline at end of file diff --git a/src/assets/main.css b/src/assets/main.css index 1418ff9..540ede3 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,43 +1,6 @@ @import "@picocss/pico"; @import "./form.css"; -:root, -:root:not([data-theme]), -/* or data-theme is light */ -:root:not([data-theme=dark]), -[data-theme=light] { - --primary: hsl(195 85% 35%); - --primary-hover: hsl(195 85% 45%); - --muted-color: hsl(205, 10%, 45%); -} - -:root, -:root:not([data-theme]), -[data-theme=dark], -:root:not([data-theme=light]) { - --muted-color: hsl(205, 10%, 60%); -} - -a { - --color: hsl(195 85% 41%); -} - -:root a, -:root:not([data-theme]) a, -/* or data-theme is light */ -:root:not([data-theme=dark]) a, -[data-theme=light] a { - --color: hsl(195 85% 35%); -} - -:root p, -:root:not([data-theme]) p, -/* or data-theme is light */ -:root:not([data-theme=dark]) p, -[data-theme=light] p { - --color: var(--text-color); -} - body { min-height: 100vh; text-rendering: optimizeLegibility; @@ -84,27 +47,27 @@ article>:last-child:not(footer) { /* If the last child is the header, */ article>:last-child:is(header) { - margin-bottom: calc(var(--block-spacing-vertical)* -2); + margin-bottom: calc(var(--pico-block-spacing-vertical)* -2); } /* If the .images are the first child, remove margin-top and add a margin-bottom */ article>:first-child:is(.images) { - margin-top: calc(var(--block-spacing-vertical)* -1); - margin-bottom: var(--block-spacing-vertical); - margin-left: calc(var(--block-spacing-horizontal)* -1); - margin-right: calc(var(--block-spacing-horizontal)* -1); + margin-top: calc(var(--pico-block-spacing-vertical)* -1); + margin-bottom: var(--pico-block-spacing-vertical); + margin-left: calc(var(--pico-block-spacing-horizontal)* -1); + margin-right: calc(var(--pico-block-spacing-horizontal)* -1); - width: calc(100% + var(--block-spacing-horizontal)* 2); + width: calc(100% + var(--pico-block-spacing-horizontal)* 2); } /* If the last child is images, remove margin-bottom */ article>:last-child:is(.images) { - margin-bottom: calc(var(--block-spacing-vertical)* -1); + margin-bottom: calc(var(--pico-block-spacing-vertical)* -1); } /* If the last child is the footer, remove the margin-top */ article>:first-child:is(footer) { - margin-top: calc(var(--block-spacing-vertical)* -1); + margin-top: calc(var(--pico-block-spacing-vertical)* -1); } /* make a simple slider with flex */ @@ -134,13 +97,13 @@ a:has(>article):is([aria-current]) { display: block; text-decoration: none; color: inherit; - --color: var(--text-color); + --pico-color: var(--pico-text-color); } a:has(>article):hover { text-decoration: none; color: inherit; - --color: var(--text-color); + --pico-color: var(--pico-text-color); } main~footer ul { @@ -194,6 +157,6 @@ label:has(+select:required)::after, label:has(>input[type="checkbox"]:required)::after, label:has(>input[type="radio"]:required)::after { content: "*"; - color: var(--del-color); - margin-left: calc(var(--nav-link-spacing-vertical) / 2); + color: var(--pico-del-color); + margin-left: calc(var(--pico-nav-link-spacing-vertical) / 2); } \ No newline at end of file diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue index 6abff92..146e0eb 100644 --- a/src/components/NavBar.vue +++ b/src/components/NavBar.vue @@ -25,19 +25,14 @@ const blur = () => {