From 4fbcef493d666c852631ad35add1e4e92219adec Mon Sep 17 00:00:00 2001 From: kabin thakuri Date: Wed, 29 Apr 2026 12:30:21 +0545 Subject: [PATCH 1/2] refactor(stylelint): improve styles based on stylelint rules --- apps/demo/package.json | 5 + .../src/Views/Ui/components/Stepper/index.css | 6 +- .../src/Views/Ui/components/Tag/index.css | 4 +- .../Ui/components/YoutubeFacade/index.css | 36 ++--- apps/demo/src/Views/Ui/index.css | 7 +- apps/demo/src/assets/css/code-block.css | 12 +- apps/demo/src/assets/css/country.css | 2 +- apps/demo/src/assets/css/demo.css | 14 +- apps/demo/src/assets/css/header-addon.css | 16 +- apps/demo/src/assets/css/home.css | 4 +- apps/demo/src/assets/css/index.css | 29 ++-- .../assets/css/sticky-collapsible-footer.css | 2 +- apps/demo/src/assets/css/style.css | 6 +- apps/demo/src/assets/css/table.css | 22 +-- apps/demo/stylelint.config.js | 3 + makefile | 8 + package.json | 2 + packages/config/package.json | 5 + packages/config/stylelint.config.js | 3 + packages/form/package.json | 5 + packages/form/src/assets/css/date-input.css | 8 +- packages/form/src/assets/css/file-input.css | 67 ++++---- packages/form/src/assets/css/file-upload.css | 2 +- packages/form/src/assets/css/form.css | 9 +- packages/form/src/assets/css/index.css | 11 +- packages/form/src/assets/css/password.css | 2 +- packages/form/stylelint.config.js | 3 + packages/i18n/package.json | 5 + packages/i18n/src/assets/css/index.css | 2 +- packages/i18n/stylelint.config.js | 3 + packages/layout/package.json | 5 + .../assets/css/components/layout/footer.css | 4 +- .../css/components/layout/header-menu.css | 33 ++-- .../assets/css/components/layout/header.css | 22 ++- .../assets/css/components/layout/index.css | 18 +-- .../assets/css/components/layout/layout.css | 5 +- .../src/assets/css/components/layout/logo.css | 2 +- .../assets/css/components/layout/sidebar.css | 22 +-- .../layout/sticky-collapsible-footer.css | 2 +- .../css/components/layout/toggle-menu.css | 4 +- .../src/assets/css/components/layout/vars.css | 9 +- packages/layout/src/assets/css/index.css | 8 +- .../src/assets/css/layouts/header-layout.css | 37 ++--- .../css/layouts/sidebar-header-layout.css | 31 ++-- .../css/layouts/sidebar-only-layout.css | 8 +- packages/layout/stylelint.config.js | 3 + packages/ui/package.json | 5 + .../ui/src/assets/css/accordion-theme.css | 38 ++--- packages/ui/src/assets/css/accordion.css | 12 +- packages/ui/src/assets/css/auth-page.css | 1 + packages/ui/src/assets/css/button.css | 17 +- packages/ui/src/assets/css/card.css | 12 +- .../ui/src/assets/css/confirmation-modal.css | 9 +- packages/ui/src/assets/css/data.css | 3 +- packages/ui/src/assets/css/divider.css | 4 +- packages/ui/src/assets/css/dropdown-menu.css | 6 +- packages/ui/src/assets/css/file-card.css | 14 +- packages/ui/src/assets/css/files-list.css | 2 +- .../css/form-widgets/checkbox-input.css | 3 +- .../src/assets/css/form-widgets/checkbox.css | 6 +- .../assets/css/form-widgets/date-picker.css | 2 +- .../css/form-widgets/editable-title.css | 4 +- .../ui/src/assets/css/form-widgets/field.css | 2 +- .../ui/src/assets/css/form-widgets/index.css | 25 ++- .../ui/src/assets/css/form-widgets/input.css | 8 +- .../assets/css/form-widgets/radio-input.css | 2 +- .../ui/src/assets/css/form-widgets/select.css | 20 +-- .../assets/css/form-widgets/switch-input.css | 4 +- .../src/assets/css/form-widgets/textarea.css | 4 +- .../src/assets/css/form-widgets/typeahead.css | 6 +- packages/ui/src/assets/css/grid-container.css | 4 +- packages/ui/src/assets/css/index.css | 80 +++++----- packages/ui/src/assets/css/inline-link.css | 3 +- packages/ui/src/assets/css/loading-icon.css | 51 +++--- packages/ui/src/assets/css/loading-page.css | 23 ++- packages/ui/src/assets/css/message.css | 2 +- packages/ui/src/assets/css/modal.css | 17 +- .../ui/src/assets/css/navigation/index.css | 6 +- .../src/assets/css/navigation/nav-group.css | 33 ++-- .../ui/src/assets/css/navigation/nav-item.css | 5 +- .../assets/css/navigation/navigation-menu.css | 9 +- packages/ui/src/assets/css/page.css | 22 +-- packages/ui/src/assets/css/pagination.css | 2 +- packages/ui/src/assets/css/popup.css | 6 +- packages/ui/src/assets/css/reset.css | 15 +- packages/ui/src/assets/css/social-button.css | 4 +- packages/ui/src/assets/css/sortable.css | 14 +- packages/ui/src/assets/css/sso-button.css | 26 ++-- packages/ui/src/assets/css/stepper.css | 91 +++++------ packages/ui/src/assets/css/submenu.css | 29 ++-- packages/ui/src/assets/css/tab-theme.css | 6 +- packages/ui/src/assets/css/tab-view.css | 12 +- packages/ui/src/assets/css/table.css | 79 ++++------ packages/ui/src/assets/css/tabs.css | 10 +- packages/ui/src/assets/css/tooltip.css | 6 +- packages/ui/src/assets/css/vars.css | 19 +-- packages/ui/stylelint.config.js | 3 + packages/user/package.json | 5 + packages/user/src/assets/css/index.css | 16 +- .../user/src/assets/css/invitations-table.css | 10 +- packages/user/src/assets/css/profile.css | 12 +- packages/user/src/assets/css/signup.css | 2 +- packages/user/src/assets/css/users-table.css | 8 +- packages/user/src/assets/css/verify-email.css | 4 +- packages/user/stylelint.config.js | 3 + pnpm-lock.yaml | 145 +++++++++++++----- turbo.json | 6 + 107 files changed, 789 insertions(+), 724 deletions(-) create mode 100644 apps/demo/stylelint.config.js create mode 100644 packages/config/stylelint.config.js create mode 100644 packages/form/stylelint.config.js create mode 100644 packages/i18n/stylelint.config.js create mode 100644 packages/layout/stylelint.config.js create mode 100644 packages/ui/stylelint.config.js create mode 100644 packages/user/stylelint.config.js diff --git a/apps/demo/package.json b/apps/demo/package.json index 5927cc11a..048b44866 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -12,6 +12,8 @@ "preview": "vite preview", "snapshot:update": "vitest --environment jsdom run --update", "sort-package": "npx sort-package-json", + "stylelint": "stylelint \"src/**/*.{css,vue}\" --allow-empty-input", + "stylelint:fix": "stylelint \"src/**/*.{css,vue}\" --fix --allow-empty-input", "test": "CI=true vitest", "test:unit": "CI=true vitest", "typecheck": "tsc --noEmit -p tsconfig.vitest.json --composite false" @@ -51,6 +53,9 @@ "eslint": "9.39.4", "jsdom": "27.0.1", "prettier": "3.8.3", + "stylelint": "17.9.1", + "stylelint-config-standard": "40.0.0", + "stylelint-order": "8.1.1", "typescript": "5.9.3", "vite": "7.3.2", "vite-plugin-compression": "0.5.1", diff --git a/apps/demo/src/Views/Ui/components/Stepper/index.css b/apps/demo/src/Views/Ui/components/Stepper/index.css index c7a944260..792f99d6f 100644 --- a/apps/demo/src/Views/Ui/components/Stepper/index.css +++ b/apps/demo/src/Views/Ui/components/Stepper/index.css @@ -10,13 +10,13 @@ } .demo-stepper-button-wrapper { - margin-top: 3rem; display: flex; - justify-content: flex-start; gap: 1rem; + justify-content: flex-start; + margin-top: 3rem; } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .demo-stepper-wrapper { flex-direction: row; } diff --git a/apps/demo/src/Views/Ui/components/Tag/index.css b/apps/demo/src/Views/Ui/components/Tag/index.css index 205a6cc9f..4d64470ab 100644 --- a/apps/demo/src/Views/Ui/components/Tag/index.css +++ b/apps/demo/src/Views/Ui/components/Tag/index.css @@ -1,6 +1,6 @@ .demo-tag-container { - display: flex; align-items: center; - gap: 1rem; + display: flex; flex-wrap: wrap; + gap: 1rem; } diff --git a/apps/demo/src/Views/Ui/components/YoutubeFacade/index.css b/apps/demo/src/Views/Ui/components/YoutubeFacade/index.css index c55288016..2573372b6 100644 --- a/apps/demo/src/Views/Ui/components/YoutubeFacade/index.css +++ b/apps/demo/src/Views/Ui/components/YoutubeFacade/index.css @@ -1,14 +1,14 @@ .youTubeFacade { + display: flex; position: relative; width: 100%; - display: flex; } .videoEmbed, .youTubeFacade img { - width: 100%; - height: auto; border: none; + height: auto; + width: 100%; } .youTubeFacade img { @@ -20,26 +20,26 @@ } .youTubeFacade a:first-child::after { + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 234.67 165.33'%3E%3Cpath d='M229.763 25.817c-2.699-10.162-10.65-18.165-20.748-20.881C190.716 0 117.333 0 117.333 0S43.951 0 25.651 4.936C15.553 7.652 7.6 15.655 4.903 25.817 0 44.236 0 82.667 0 82.667s0 38.429 4.903 56.85C7.6 149.68 15.553 157.681 25.65 160.4c18.3 4.934 91.682 4.934 91.682 4.934s73.383 0 91.682-4.934c10.098-2.718 18.049-10.72 20.748-20.882 4.904-18.421 4.904-56.85 4.904-56.85s0-38.431-4.904-56.85' fill='red'%3E%3C/path%3E%3Cpath d='M93.333 117.559l61.333-34.89-61.333-34.894z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E") + center no-repeat; + background-size: 4rem; content: ""; + height: 4rem; + left: 50%; position: absolute; top: 50%; - left: 50%; translate: -50% -50%; width: 4rem; - height: 4rem; - background-size: 4rem; - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 234.67 165.33'%3E%3Cpath d='M229.763 25.817c-2.699-10.162-10.65-18.165-20.748-20.881C190.716 0 117.333 0 117.333 0S43.951 0 25.651 4.936C15.553 7.652 7.6 15.655 4.903 25.817 0 44.236 0 82.667 0 82.667s0 38.429 4.903 56.85C7.6 149.68 15.553 157.681 25.65 160.4c18.3 4.934 91.682 4.934 91.682 4.934s73.383 0 91.682-4.934c10.098-2.718 18.049-10.72 20.748-20.882 4.904-18.421 4.904-56.85 4.904-56.85s0-38.431-4.904-56.85' fill='red'%3E%3C/path%3E%3Cpath d='M93.333 117.559l61.333-34.89-61.333-34.894z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E") - center no-repeat; } .youTubeFacade a:last-child { - position: absolute; + background: #333; bottom: 1rem; + color: #fff; + font-family: arial, helvetica, sans-serif; left: 0; padding: 1rem; - font-family: arial, helvetica, sans-serif; - background: #333; - color: #fff; + position: absolute; } .youTubeFacade a:last-child::after { @@ -47,15 +47,15 @@ } .youTubeFacade a:last-child b { + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 507.9 113.39'%3E%3Cg fill='%23fff'%3E%3Cpath d='M64.792 80.99V32.396l42.082 24.297zm93.803-63.285a20.285 20.285 0 00-14.32-14.32C131.642 0 80.99 0 80.99 0S30.337 0 17.705 3.385a20.286 20.286 0 00-14.32 14.32C0 30.338 0 56.693 0 56.693S0 83.049 3.385 95.68A20.285 20.285 0 0017.705 110c12.632 3.386 63.285 3.386 63.285 3.386s50.652 0 63.285-3.386a20.284 20.284 0 0014.32-14.32c3.385-12.632 3.385-38.988 3.385-38.988s0-26.355-3.385-38.988m94.473 74.326c.887-2.314 1.332-6.098 1.332-11.35V58.556c0-5.097-.445-8.822-1.332-11.178-.888-2.355-2.452-3.533-4.69-3.533-2.163 0-3.69 1.178-4.577 3.533-.888 2.356-1.332 6.081-1.332 11.178V80.68c0 5.25.424 9.035 1.275 11.35.848 2.318 2.392 3.475 4.633 3.475 2.239 0 3.803-1.157 4.691-3.475zm-17.953 11.122c-3.207-2.16-5.486-5.52-6.835-10.079-1.352-4.554-2.027-10.617-2.027-18.185v-10.31c0-7.644.771-13.784 2.316-18.417 1.544-4.633 3.956-8.011 7.24-10.135 3.282-2.123 7.587-3.186 12.916-3.186 5.251 0 9.459 1.082 12.626 3.243 3.165 2.162 5.482 5.542 6.95 10.136 1.466 4.595 2.2 10.715 2.2 18.36v10.31c0 7.567-.714 13.65-2.142 18.243-1.43 4.595-3.747 7.955-6.951 10.077-3.205 2.124-7.548 3.186-13.03 3.186-5.64 0-10.06-1.082-13.263-3.243m248.053-57.981c-.81 1.005-1.352 2.646-1.621 4.923-.272 2.278-.404 5.734-.404 10.367v5.097h11.697V60.46c0-4.555-.155-8.011-.463-10.367-.309-2.355-.868-4.014-1.678-4.98-.812-.966-2.067-1.449-3.766-1.449-1.7 0-2.954.503-3.765 1.506zm-2.025 29.886v3.591c0 4.557.132 7.974.404 10.251.269 2.279.828 3.94 1.68 4.982.849 1.041 2.16 1.564 3.938 1.564 2.392 0 4.035-.927 4.923-2.781.887-1.853 1.37-4.942 1.447-9.268l13.785.812c.077.62.116 1.469.116 2.548 0 6.565-1.795 11.47-5.387 14.712-3.589 3.242-8.669 4.865-15.232 4.865-7.876 0-13.398-2.47-16.564-7.414-3.168-4.94-4.75-12.586-4.75-22.935V63.589c0-10.657 1.641-18.436 4.924-23.342 3.281-4.903 8.9-7.355 16.854-7.355 5.482 0 9.691 1.004 12.626 3.012 2.933 2.01 5 5.137 6.197 9.383 1.197 4.247 1.796 10.117 1.796 17.607v12.163h-26.757m-284.953-1.33l-18.187-65.68h15.869l6.37 29.77c1.623 7.339 2.82 13.594 3.591 18.766h.464c.54-3.706 1.738-9.922 3.591-18.65l6.603-29.886h15.869l-18.417 65.68v31.51h-15.754v-31.51M322.115 34.23v71.007h-12.511l-1.39-8.688h-.347c-3.399 6.564-8.496 9.845-15.291 9.845-4.71 0-8.185-1.543-10.425-4.633-2.24-3.087-3.359-7.915-3.359-14.48V34.23h15.985v52.126c0 3.168.348 5.426 1.043 6.776.695 1.353 1.853 2.027 3.475 2.027 1.39 0 2.722-.423 3.996-1.275 1.274-.849 2.22-1.928 2.838-3.241V34.229h15.986m81.995.001v71.007h-12.511l-1.391-8.688h-.345c-3.402 6.564-8.498 9.845-15.292 9.845-4.711 0-8.186-1.543-10.426-4.633-2.24-3.087-3.358-7.915-3.358-14.48V34.23h15.985v52.126c0 3.168.347 5.426 1.041 6.776.696 1.353 1.855 2.027 3.476 2.027 1.391 0 2.723-.423 3.996-1.275 1.275-.849 2.22-1.928 2.839-3.241V34.229h15.985'%3E%3C/path%3E%3Cpath d='M365.552 20.908h-15.87v84.329h-15.637v-84.33h-15.869V8.05h47.376v12.858m76.811 53.636c0 5.174-.215 9.229-.639 12.162-.424 2.937-1.139 5.021-2.143 6.255-1.004 1.236-2.357 1.854-4.053 1.854a7.404 7.404 0 01-3.65-.927c-1.12-.618-2.026-1.544-2.722-2.78V50.796c.54-1.93 1.467-3.513 2.78-4.749 1.313-1.234 2.74-1.853 4.285-1.853 1.623 0 2.876.637 3.766 1.91.886 1.275 1.505 3.418 1.853 6.43.348 3.011.523 7.297.523 12.857zm14.652-28.964c-.967-4.478-2.531-7.721-4.692-9.73-2.163-2.007-5.136-3.011-8.919-3.011-2.935 0-5.676.83-8.224 2.49a16.926 16.926 0 00-5.908 6.545h-.117l.001-37.416h-15.405v100.777h13.204l1.622-6.717h.347c1.235 2.393 3.088 4.285 5.56 5.675 2.47 1.39 5.213 2.085 8.225 2.085 5.404 0 9.382-2.491 11.931-7.471 2.548-4.982 3.823-12.76 3.823-23.341V64.23c0-7.953-.484-14.17-1.448-18.65'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") + center no-repeat; + background-size: 5rem; + color: transparent; display: inline-block; - width: 5rem; - margin-left: 0.25rem; font-size: 1.2rem; line-height: 1.2rem; - color: transparent; - background-size: 5rem; - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 507.9 113.39'%3E%3Cg fill='%23fff'%3E%3Cpath d='M64.792 80.99V32.396l42.082 24.297zm93.803-63.285a20.285 20.285 0 00-14.32-14.32C131.642 0 80.99 0 80.99 0S30.337 0 17.705 3.385a20.286 20.286 0 00-14.32 14.32C0 30.338 0 56.693 0 56.693S0 83.049 3.385 95.68A20.285 20.285 0 0017.705 110c12.632 3.386 63.285 3.386 63.285 3.386s50.652 0 63.285-3.386a20.284 20.284 0 0014.32-14.32c3.385-12.632 3.385-38.988 3.385-38.988s0-26.355-3.385-38.988m94.473 74.326c.887-2.314 1.332-6.098 1.332-11.35V58.556c0-5.097-.445-8.822-1.332-11.178-.888-2.355-2.452-3.533-4.69-3.533-2.163 0-3.69 1.178-4.577 3.533-.888 2.356-1.332 6.081-1.332 11.178V80.68c0 5.25.424 9.035 1.275 11.35.848 2.318 2.392 3.475 4.633 3.475 2.239 0 3.803-1.157 4.691-3.475zm-17.953 11.122c-3.207-2.16-5.486-5.52-6.835-10.079-1.352-4.554-2.027-10.617-2.027-18.185v-10.31c0-7.644.771-13.784 2.316-18.417 1.544-4.633 3.956-8.011 7.24-10.135 3.282-2.123 7.587-3.186 12.916-3.186 5.251 0 9.459 1.082 12.626 3.243 3.165 2.162 5.482 5.542 6.95 10.136 1.466 4.595 2.2 10.715 2.2 18.36v10.31c0 7.567-.714 13.65-2.142 18.243-1.43 4.595-3.747 7.955-6.951 10.077-3.205 2.124-7.548 3.186-13.03 3.186-5.64 0-10.06-1.082-13.263-3.243m248.053-57.981c-.81 1.005-1.352 2.646-1.621 4.923-.272 2.278-.404 5.734-.404 10.367v5.097h11.697V60.46c0-4.555-.155-8.011-.463-10.367-.309-2.355-.868-4.014-1.678-4.98-.812-.966-2.067-1.449-3.766-1.449-1.7 0-2.954.503-3.765 1.506zm-2.025 29.886v3.591c0 4.557.132 7.974.404 10.251.269 2.279.828 3.94 1.68 4.982.849 1.041 2.16 1.564 3.938 1.564 2.392 0 4.035-.927 4.923-2.781.887-1.853 1.37-4.942 1.447-9.268l13.785.812c.077.62.116 1.469.116 2.548 0 6.565-1.795 11.47-5.387 14.712-3.589 3.242-8.669 4.865-15.232 4.865-7.876 0-13.398-2.47-16.564-7.414-3.168-4.94-4.75-12.586-4.75-22.935V63.589c0-10.657 1.641-18.436 4.924-23.342 3.281-4.903 8.9-7.355 16.854-7.355 5.482 0 9.691 1.004 12.626 3.012 2.933 2.01 5 5.137 6.197 9.383 1.197 4.247 1.796 10.117 1.796 17.607v12.163h-26.757m-284.953-1.33l-18.187-65.68h15.869l6.37 29.77c1.623 7.339 2.82 13.594 3.591 18.766h.464c.54-3.706 1.738-9.922 3.591-18.65l6.603-29.886h15.869l-18.417 65.68v31.51h-15.754v-31.51M322.115 34.23v71.007h-12.511l-1.39-8.688h-.347c-3.399 6.564-8.496 9.845-15.291 9.845-4.71 0-8.185-1.543-10.425-4.633-2.24-3.087-3.359-7.915-3.359-14.48V34.23h15.985v52.126c0 3.168.348 5.426 1.043 6.776.695 1.353 1.853 2.027 3.475 2.027 1.39 0 2.722-.423 3.996-1.275 1.274-.849 2.22-1.928 2.838-3.241V34.229h15.986m81.995.001v71.007h-12.511l-1.391-8.688h-.345c-3.402 6.564-8.498 9.845-15.292 9.845-4.711 0-8.186-1.543-10.426-4.633-2.24-3.087-3.358-7.915-3.358-14.48V34.23h15.985v52.126c0 3.168.347 5.426 1.041 6.776.696 1.353 1.855 2.027 3.476 2.027 1.391 0 2.723-.423 3.996-1.275 1.275-.849 2.22-1.928 2.839-3.241V34.229h15.985'%3E%3C/path%3E%3Cpath d='M365.552 20.908h-15.87v84.329h-15.637v-84.33h-15.869V8.05h47.376v12.858m76.811 53.636c0 5.174-.215 9.229-.639 12.162-.424 2.937-1.139 5.021-2.143 6.255-1.004 1.236-2.357 1.854-4.053 1.854a7.404 7.404 0 01-3.65-.927c-1.12-.618-2.026-1.544-2.722-2.78V50.796c.54-1.93 1.467-3.513 2.78-4.749 1.313-1.234 2.74-1.853 4.285-1.853 1.623 0 2.876.637 3.766 1.91.886 1.275 1.505 3.418 1.853 6.43.348 3.011.523 7.297.523 12.857zm14.652-28.964c-.967-4.478-2.531-7.721-4.692-9.73-2.163-2.007-5.136-3.011-8.919-3.011-2.935 0-5.676.83-8.224 2.49a16.926 16.926 0 00-5.908 6.545h-.117l.001-37.416h-15.405v100.777h13.204l1.622-6.717h.347c1.235 2.393 3.088 4.285 5.56 5.675 2.47 1.39 5.213 2.085 8.225 2.085 5.404 0 9.382-2.491 11.931-7.471 2.548-4.982 3.823-12.76 3.823-23.341V64.23c0-7.953-.484-14.17-1.448-18.65'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") - center no-repeat; + margin-left: 0.25rem; + width: 5rem; } .youTubeFacade span { diff --git a/apps/demo/src/Views/Ui/index.css b/apps/demo/src/Views/Ui/index.css index 9981b0201..e708bc94b 100644 --- a/apps/demo/src/Views/Ui/index.css +++ b/apps/demo/src/Views/Ui/index.css @@ -1,14 +1,13 @@ .demo-button .container, .demo-modal .container { - display: flex; align-items: center; - gap: 1rem; + display: flex; flex-wrap: wrap; + gap: 1rem; } .demo-switch-input .container { display: flex; - flex-direction: column; + flex-flow: column wrap; gap: 1rem; - flex-wrap: wrap; } diff --git a/apps/demo/src/assets/css/code-block.css b/apps/demo/src/assets/css/code-block.css index 780db60cc..9e03a7828 100644 --- a/apps/demo/src/assets/css/code-block.css +++ b/apps/demo/src/assets/css/code-block.css @@ -9,24 +9,18 @@ .code-block pre { background-color: #f5f5f5; - padding: 1.5rem; - margin: 0; border-radius: 5px; + margin: 0; overflow-x: auto; + padding: 1.5rem; text-wrap: wrap; } -.code-block .actions { - position: absolute; - top: 0.5rem; - right: 0.5rem; -} - .code-block .actions { opacity: 0; position: absolute; - top: 0.5rem; right: 0.5rem; + top: 0.5rem; transition: all 0.3s ease-in-out; } diff --git a/apps/demo/src/assets/css/country.css b/apps/demo/src/assets/css/country.css index f405bdfad..d7155115e 100644 --- a/apps/demo/src/assets/css/country.css +++ b/apps/demo/src/assets/css/country.css @@ -1,9 +1,9 @@ .country-display .custom-render { + align-items: center; background-color: #eef2ff; border: 1px solid var(--border-color, #e2e8f0); border-radius: 1rem; display: inline-flex; - align-items: center; gap: 0.5rem; padding: 0.25rem 1rem; width: 8rem; diff --git a/apps/demo/src/assets/css/demo.css b/apps/demo/src/assets/css/demo.css index e35070c09..64680a1e0 100644 --- a/apps/demo/src/assets/css/demo.css +++ b/apps/demo/src/assets/css/demo.css @@ -1,18 +1,18 @@ .demo { - width: 100%; - height: 100%; + align-items: stretch; display: flex; flex-wrap: wrap; - align-items: stretch; + height: 100%; + width: 100%; } .demo > .demo-aside { - flex-basis: 17rem; - flex-grow: 1; display: flex; + flex-basis: 17rem; flex-direction: column; - padding: 1rem 1rem 1rem 0; + flex-grow: 1; gap: 1rem; + padding: 1rem 1rem 1rem 0; } .demo > .demo-main { @@ -90,7 +90,7 @@ font-weight: 600; } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .demo > .demo-aside { border-right: 1px solid var(--border-color, #e5e7eb); height: 100%; diff --git a/apps/demo/src/assets/css/header-addon.css b/apps/demo/src/assets/css/header-addon.css index 5d37bb259..df232f0f8 100644 --- a/apps/demo/src/assets/css/header-addon.css +++ b/apps/demo/src/assets/css/header-addon.css @@ -8,9 +8,9 @@ } .dz-layout .dz-header-container .header-addon { - grid-area: addon; color: var(--_layout-header-color); display: none; + grid-area: addon; } .dz-header-container .header-addon > a:hover { @@ -23,7 +23,13 @@ var(--dz-layout-nav-item-padding-h); } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { + .dz-header-container .header-addon:hover { + background-color: var(--hover-bg, #e5e5e5); + border-radius: 5px; + cursor: pointer; + } + .dz-layout[aria-expanded="true"] .dz-header-container .header-addon { display: block; order: 1; @@ -31,12 +37,6 @@ var(--dz-layout-nav-item-padding-h); } - .dz-header-container .header-addon:hover { - background-color: var(--hover-bg, #e5e5e5); - border-radius: 5px; - cursor: pointer; - } - .dz-header-container .dz-header-menu { order: 2; } diff --git a/apps/demo/src/assets/css/home.css b/apps/demo/src/assets/css/home.css index 49fc585ec..84cce8f93 100644 --- a/apps/demo/src/assets/css/home.css +++ b/apps/demo/src/assets/css/home.css @@ -1,11 +1,11 @@ .dz-grid-container .package { + border: 1px solid rgb(0 0 0 / 20%); border-radius: 8px; - border: 1px solid rgba(0, 0, 0, 0.2); cursor: pointer; display: flex; flex-direction: column; - padding: 1rem; gap: 0.25rem; + padding: 1rem; } .dz-grid-container .package:hover { diff --git a/apps/demo/src/assets/css/index.css b/apps/demo/src/assets/css/index.css index 2b72a6672..3ded2cc47 100644 --- a/apps/demo/src/assets/css/index.css +++ b/apps/demo/src/assets/css/index.css @@ -1,15 +1,14 @@ -@import "./vars.css"; -@import "./style.css"; -@import "./code-block.css"; -@import "./demo.css"; - -@import "./data.css"; -@import "./editable-title.css"; -@import "./header-addon.css"; -@import "./home.css"; -@import "./inline-link.css"; -@import "./select.css"; -@import "./sticky-collapsible-footer.css"; -@import "./tab-view.css"; -@import "./table-border.css"; -@import "./table.css"; +@import url("./vars.css"); +@import url("./style.css"); +@import url("./code-block.css"); +@import url("./demo.css"); +@import url("./data.css"); +@import url("./editable-title.css"); +@import url("./header-addon.css"); +@import url("./home.css"); +@import url("./inline-link.css"); +@import url("./select.css"); +@import url("./sticky-collapsible-footer.css"); +@import url("./tab-view.css"); +@import url("./table-border.css"); +@import url("./table.css"); diff --git a/apps/demo/src/assets/css/sticky-collapsible-footer.css b/apps/demo/src/assets/css/sticky-collapsible-footer.css index 955d048cc..5826dccc2 100644 --- a/apps/demo/src/assets/css/sticky-collapsible-footer.css +++ b/apps/demo/src/assets/css/sticky-collapsible-footer.css @@ -3,7 +3,7 @@ } .demo-section .demo-section-content .sticky-collapsible .content { - padding: 1rem; display: flex; gap: 0.5rem; + padding: 1rem; } diff --git a/apps/demo/src/assets/css/style.css b/apps/demo/src/assets/css/style.css index d932c71f8..ba6fc1543 100644 --- a/apps/demo/src/assets/css/style.css +++ b/apps/demo/src/assets/css/style.css @@ -4,18 +4,18 @@ .main-menu > ul > li:hover, .main-menu > ul > li .active { - text-decoration: underline; font-weight: normal; + text-decoration: underline; } code { background: lightgrey; border-radius: 0.25rem; - padding: 0.5rem 0.5rem; font-family: monospace; + padding: 0.5rem; } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .dz-layout > header > .dz-header-container { flex-wrap: wrap; } diff --git a/apps/demo/src/assets/css/table.css b/apps/demo/src/assets/css/table.css index a36dea7e9..41052f7b2 100644 --- a/apps/demo/src/assets/css/table.css +++ b/apps/demo/src/assets/css/table.css @@ -1,39 +1,39 @@ .demo-data-tables-page .column-name { - width: 14rem; max-width: 14rem; min-width: 14rem; + width: 14rem; } .demo-data-tables-page .column-age { - width: 12rem; max-width: 12rem; min-width: 12rem; + width: 12rem; } .demo-data-tables-page .column-city { - width: 13rem; max-width: 13rem; min-width: 13rem; + width: 13rem; } .demo-data-tables-page .column-country { - width: 15rem; max-width: 15rem; min-width: 15rem; + width: 15rem; } .demo-data-tables-page .column-quantity, .demo-data-tables-page .column-date, .demo-data-tables-page .column-amount { - width: 12rem; max-width: 12rem; min-width: 12rem; + width: 12rem; } .demo-data-tables-page .column-datetime { - width: 12rem; max-width: 12rem; min-width: 12rem; + width: 12rem; } .demo-data-tables-page .column-action { @@ -41,31 +41,31 @@ } .custom-static-filter-table .column-date { - width: 16rem; max-width: 16rem; min-width: 16rem; + width: 16rem; } .center-aligned-content-table .column-name { - width: 30rem; max-width: 30rem; min-width: 30rem; + width: 30rem; } .center-aligned-content-table .column-age { - width: 12rem; max-width: 12rem; min-width: 12rem; + width: 12rem; } .center-aligned-content-table .column-city { - width: 12rem; max-width: 12rem; min-width: 12rem; + width: 12rem; } .center-aligned-content-table .column-disabled { - width: 12rem; max-width: 12rem; min-width: 12rem; + width: 12rem; } diff --git a/apps/demo/stylelint.config.js b/apps/demo/stylelint.config.js new file mode 100644 index 000000000..7736fdf3a --- /dev/null +++ b/apps/demo/stylelint.config.js @@ -0,0 +1,3 @@ +import stylelintConfig from "@prefabs.tech/eslint-config/stylelint.js"; + +export default stylelintConfig; diff --git a/makefile b/makefile index 1fb5dace8..edf68f31b 100644 --- a/makefile +++ b/makefile @@ -42,6 +42,14 @@ sort-package: @printf "\033[0;32m>>> Format package.json\033[0m\n" pnpm sort-package +stylelint: + @printf "\033[0;32m>>> Lint style\033[0m\n" + pnpm stylelint + +stylelint.fix: + @printf "\033[0;32m>>>Fix lint style\033[0m\n" + pnpm stylelint:fix + test: @printf "\033[0;32m>>> Running tests\033[0m\n" pnpm test diff --git a/package.json b/package.json index bc328d553..69b5a97ab 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,8 @@ "lint:fix": "turbo run lint:fix", "prepare": "husky install", "sort-package": "npx sort-package-json && turbo run sort-package", + "stylelint": "turbo run stylelint", + "stylelint:fix": "turbo run stylelint:fix", "test": "turbo run test --parallel", "test:ci": "turbo run test:ci --parallel", "test:integration": "turbo run test:integration --parallel", diff --git a/packages/config/package.json b/packages/config/package.json index 054dd2c75..6cff666af 100644 --- a/packages/config/package.json +++ b/packages/config/package.json @@ -23,6 +23,8 @@ "lint:fix": "eslint . --fix", "snapshot:update": "vitest --environment jsdom run --update --passWithNoTests", "sort-package": "npx sort-package-json", + "stylelint": "stylelint \"src/**/*.{css,vue}\" --allow-empty-input", + "stylelint:fix": "stylelint \"src/**/*.{css,vue}\" --fix --allow-empty-input", "test": "vitest --environment jsdom run --coverage --passWithNoTests", "test:component": "vitest --environment jsdom run component/ --passWithNoTests", "test:snapshot": "vitest --environment jsdom run snapshot/ --passWithNoTests", @@ -42,6 +44,9 @@ "jsdom": "27.0.1", "prettier": "3.8.3", "react": "18.3.1", + "stylelint": "17.9.1", + "stylelint-config-standard": "40.0.0", + "stylelint-order": "8.1.1", "typescript": "5.9.3", "vite": "7.3.2", "vitest": "3.0.9" diff --git a/packages/config/stylelint.config.js b/packages/config/stylelint.config.js new file mode 100644 index 000000000..7736fdf3a --- /dev/null +++ b/packages/config/stylelint.config.js @@ -0,0 +1,3 @@ +import stylelintConfig from "@prefabs.tech/eslint-config/stylelint.js"; + +export default stylelintConfig; diff --git a/packages/form/package.json b/packages/form/package.json index 3bf78d869..f167cb532 100644 --- a/packages/form/package.json +++ b/packages/form/package.json @@ -23,6 +23,8 @@ "lint:fix": "eslint . --fix", "snapshot:update": "vitest --environment jsdom run --update --passWithNoTests", "sort-package": "npx sort-package-json", + "stylelint": "stylelint \"src/**/*.{css,vue}\" --allow-empty-input", + "stylelint:fix": "stylelint \"src/**/*.{css,vue}\" --fix --allow-empty-input", "test": "vitest --environment jsdom run --coverage", "test:component": "vitest --environment jsdom run component/", "test:snapshot": "vitest --environment jsdom run snapshot/", @@ -57,6 +59,9 @@ "primereact": "9.6.5", "react": "18.3.1", "react-dom": "18.3.1", + "stylelint": "17.9.1", + "stylelint-config-standard": "40.0.0", + "stylelint-order": "8.1.1", "typescript": "5.9.3", "vite": "7.3.2", "vitest": "3.0.9" diff --git a/packages/form/src/assets/css/date-input.css b/packages/form/src/assets/css/date-input.css index 3d469ea01..d5de394b9 100644 --- a/packages/form/src/assets/css/date-input.css +++ b/packages/form/src/assets/css/date-input.css @@ -8,8 +8,8 @@ input[type="date"] { background-color: var(--_background-color); - border-radius: var(--_border-radius); border: 1px solid var(--_border-color); + border-radius: var(--_border-radius); padding-block: var(--_padding-block); padding-inline: var(--_padding-inline); width: 100%; @@ -19,8 +19,8 @@ input[type="date"][aria-invalid="true"] { --_border-color: var(--dz-danger-color); background-image: url("data:image/svg+xml,"); - background-repeat: no-repeat; background-position: right calc(0.75 * var(--_padding-inline, 0.5rem)) center; + background-repeat: no-repeat; background-size: 1rem; } @@ -28,8 +28,8 @@ input[type="date"][aria-invalid="false"] { --_border-color: var(--dz-success-color); background-image: url("data:image/svg+xml,"); - background-repeat: no-repeat; background-position: right calc(0.75 * var(--_padding-inline, 0.5rem)) center; + background-repeat: no-repeat; background-size: 1rem; } @@ -40,6 +40,6 @@ input[type="date"]:focus-within { input[type="date"]:disabled { --_background-color: var(--field-bg-color-disabled, #f8f8f8); - opacity: 0.8; cursor: not-allowed; + opacity: 0.8; } diff --git a/packages/form/src/assets/css/file-input.css b/packages/form/src/assets/css/file-input.css index 42ca0739f..974d1d330 100644 --- a/packages/form/src/assets/css/file-input.css +++ b/packages/form/src/assets/css/file-input.css @@ -5,25 +5,21 @@ padding: 1rem 0; } -.file-input .selected { - padding-inline-start: 0px; -} - .file-input .selected li { + align-items: flex-start; + border-bottom: 1px solid #bdbdbd48; display: flex; flex-direction: row; - align-items: flex-start; - justify-content: space-between; gap: 0.5rem; + justify-content: space-between; + padding: 0.5rem 0; position: relative; - border-bottom: 1px solid #bdbdbd48; - padding: 0.5rem 0rem; } .file-input .selected li .info { - position: relative; display: flex; gap: 0.75rem; + position: relative; width: 90%; } @@ -32,10 +28,17 @@ } .file-input .selected li .preview { + background: lightgray; + height: 3.5rem; min-width: 3.5rem; width: 3.5rem; - height: 3.5rem; - background: lightgray; +} + +.file-input .details { + display: flex; + flex-direction: column; + gap: 0.5rem; + width: 80%; } .file-input .selected li .info .details { @@ -45,37 +48,36 @@ } .file-input .selected li .info .details > span { - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + -webkit-box-orient: vertical; display: -webkit-box; + -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word; text-overflow: ellipsis; - word-break: break-word; } .file-input .selected li .description-wrapper { display: grid; - grid-template-columns: auto 1fr; gap: 0.5rem; + grid-template-columns: auto 1fr; height: 2.3rem; width: 100%; } .file-input .dropzone { - flex: 1; - display: flex; - flex-direction: column; - align-items: "center"; - padding: 30px 20px; - border-width: 2; - border-radius: 2; - border-color: #eeeeee; - border-style: dashed; + align-items: center; background-color: var(--dz-input-fill-color); + border-color: #eee; + border-radius: 2px; + border-style: dashed; + border-width: 2px; color: #bdbdbd; + display: flex; + flex: 1; + flex-direction: column; outline: none; + padding: 30px 20px; transition: border 0.24s ease-in-out; } @@ -92,12 +94,12 @@ } .file-input .description-wrapper .description { + color: rgb(0 0 0 / 51.4%); cursor: pointer; - color: rgba(0, 0, 0, 0.514); - text-overflow: ellipsis; height: 2.3rem; max-width: 40rem; overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } @@ -109,21 +111,14 @@ visibility: visible; } -.file-input .details { - display: flex; - flex-direction: column; - gap: 0.5rem; - width: 80%; -} - .file-input .dz-file-errors { + background: rgb(255 0 0 / 10%); + border-radius: 6px; display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; - background: rgba(255, 0, 0, 0.1); padding: 0.75rem; - border-radius: 6px; } .file-input .dz-file-error { @@ -139,7 +134,7 @@ list-style: initial; } -@media screen and (max-width: 576px) { +@media screen and (width <= 576px) { .file-input .description-wrapper i { visibility: visible; } diff --git a/packages/form/src/assets/css/file-upload.css b/packages/form/src/assets/css/file-upload.css index 4d38daff4..83b1ec0e6 100644 --- a/packages/form/src/assets/css/file-upload.css +++ b/packages/form/src/assets/css/file-upload.css @@ -1,5 +1,5 @@ .file-upload { display: flex; - gap: 0.5rem; flex-direction: column; + gap: 0.5rem; } diff --git a/packages/form/src/assets/css/form.css b/packages/form/src/assets/css/form.css index 1eb374618..4e71f42d2 100644 --- a/packages/form/src/assets/css/form.css +++ b/packages/form/src/assets/css/form.css @@ -35,7 +35,7 @@ form .field .p-calendar > input { background-color: var(--dz-input-fill-color); } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .dz-form-actions { flex-direction: row; } @@ -45,21 +45,22 @@ form .field .p-calendar > input { } .dz-form-actions[data-alignment="right"] { - justify-content: flex-start; flex-direction: row-reverse; + justify-content: flex-start; } .dz-form-actions[data-reverse="true"] { - justify-content: flex-end; flex-direction: row-reverse; + justify-content: flex-end; } .dz-form-actions[data-direction="vertical"][data-reverse="true"] { flex-direction: column-reverse; } + .dz-form-actions[data-alignment="right"][data-reverse="true"] { - justify-content: flex-end; flex-direction: row; + justify-content: flex-end; } .dz-form-actions[data-alignment="center"], diff --git a/packages/form/src/assets/css/index.css b/packages/form/src/assets/css/index.css index b9af269af..2ee04bf57 100644 --- a/packages/form/src/assets/css/index.css +++ b/packages/form/src/assets/css/index.css @@ -1,6 +1,5 @@ -@import "./form.css"; - -@import "./date-input.css"; -@import "./file-input.css"; -@import "./file-upload.css"; -@import "./password.css"; +@import url("./form.css"); +@import url("./date-input.css"); +@import url("./file-input.css"); +@import url("./file-upload.css"); +@import url("./password.css"); diff --git a/packages/form/src/assets/css/password.css b/packages/form/src/assets/css/password.css index b08d4a118..786f107e4 100644 --- a/packages/form/src/assets/css/password.css +++ b/packages/form/src/assets/css/password.css @@ -1,7 +1,7 @@ .input-field-password { align-items: center; - border-radius: var(--border-radius); border: 1px solid var(--border-color); + border-radius: var(--border-radius); display: flex; text-align: left; width: 100%; diff --git a/packages/form/stylelint.config.js b/packages/form/stylelint.config.js new file mode 100644 index 000000000..7736fdf3a --- /dev/null +++ b/packages/form/stylelint.config.js @@ -0,0 +1,3 @@ +import stylelintConfig from "@prefabs.tech/eslint-config/stylelint.js"; + +export default stylelintConfig; diff --git a/packages/i18n/package.json b/packages/i18n/package.json index deb814302..1c4370d1f 100644 --- a/packages/i18n/package.json +++ b/packages/i18n/package.json @@ -23,6 +23,8 @@ "lint:fix": "eslint . --fix", "snapshot:update": "vitest --environment jsdom run --update --passWithNoTests", "sort-package": "npx sort-package-json", + "stylelint": "stylelint \"src/**/*.{css,vue}\" --allow-empty-input", + "stylelint:fix": "stylelint \"src/**/*.{css,vue}\" --fix --allow-empty-input", "test": "vitest --environment jsdom run --coverage", "test:component": "vitest --environment jsdom run component/", "test:snapshot": "vitest --environment jsdom run snapshot/", @@ -53,6 +55,9 @@ "prettier": "3.8.3", "react": "18.3.1", "react-dom": "18.3.1", + "stylelint": "17.9.1", + "stylelint-config-standard": "40.0.0", + "stylelint-order": "8.1.1", "typescript": "5.9.3", "vite": "7.3.2", "vitest": "3.0.9" diff --git a/packages/i18n/src/assets/css/index.css b/packages/i18n/src/assets/css/index.css index db99d73f4..15aafbf6a 100644 --- a/packages/i18n/src/assets/css/index.css +++ b/packages/i18n/src/assets/css/index.css @@ -1 +1 @@ -@import "./locale-badge.css"; +@import url("./locale-badge.css"); diff --git a/packages/i18n/stylelint.config.js b/packages/i18n/stylelint.config.js new file mode 100644 index 000000000..7736fdf3a --- /dev/null +++ b/packages/i18n/stylelint.config.js @@ -0,0 +1,3 @@ +import stylelintConfig from "@prefabs.tech/eslint-config/stylelint.js"; + +export default stylelintConfig; diff --git a/packages/layout/package.json b/packages/layout/package.json index 3d3af7479..3cc4604d5 100644 --- a/packages/layout/package.json +++ b/packages/layout/package.json @@ -23,6 +23,8 @@ "lint:fix": "eslint . --fix", "snapshot:update": "vitest --environment jsdom run --update --passWithNoTests", "sort-package": "npx sort-package-json", + "stylelint": "stylelint \"src/**/*.{css,vue}\" --allow-empty-input", + "stylelint:fix": "stylelint \"src/**/*.{css,vue}\" --fix --allow-empty-input", "test": "vitest --environment jsdom run --coverage", "test:component": "vitest --environment jsdom run component/", "test:snapshot": "vitest --environment jsdom run snapshot/", @@ -50,6 +52,9 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-router-dom": "6.28.2", + "stylelint": "17.9.1", + "stylelint-config-standard": "40.0.0", + "stylelint-order": "8.1.1", "typescript": "5.9.3", "vite": "7.3.2", "vitest": "3.0.9" diff --git a/packages/layout/src/assets/css/components/layout/footer.css b/packages/layout/src/assets/css/components/layout/footer.css index da557c47f..323bf6067 100644 --- a/packages/layout/src/assets/css/components/layout/footer.css +++ b/packages/layout/src/assets/css/components/layout/footer.css @@ -1,5 +1,5 @@ .dz-layout > footer { - --_layout-footer-bg-color: #ffffff; + --_layout-footer-bg-color: #fff; --_layout-footer-border: var( --dz-layout-footer-border, 1px solid var(--border-color, #e5e7eb) @@ -20,7 +20,7 @@ padding: var(--_layout-footer-padding-v) var(--_layout-footer-padding-h); } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .dz-layout > footer { flex-direction: row; justify-content: space-between; diff --git a/packages/layout/src/assets/css/components/layout/header-menu.css b/packages/layout/src/assets/css/components/layout/header-menu.css index 566c2fc11..bc6a4e410 100644 --- a/packages/layout/src/assets/css/components/layout/header-menu.css +++ b/packages/layout/src/assets/css/components/layout/header-menu.css @@ -5,18 +5,23 @@ 0.625rem ); - display: flex; - flex-wrap: wrap; color: var(--_layout-header-color); - flex-direction: column; + display: flex; + flex-flow: column wrap; gap: 0.375rem; } .dz-layout .dz-header-menu > ul.dz-user-menu { display: flex; + flex-direction: column; gap: 0.375rem; padding: 0; - flex-direction: column; +} + +.dz-layout .dz-header-menu span.dz-user-menu-item:hover, +.dz-layout ul.dz-user-menu li > span.dz-user-menu-item:hover { + background-color: var(--dz-layout-nav-item-hover-bg); + font-weight: 500; } .dz-layout .dz-header-menu > ul.dz-user-menu li > span.dz-user-menu-item { @@ -36,27 +41,21 @@ var(--_layout-header-item-padding-h); } -.dz-layout .dz-header-menu span.dz-user-menu-item > i, -ul.dz-user-menu li span.dz-user-menu-item > i { +ul.dz-user-menu li span.dz-user-menu-item > i, +.dz-layout .dz-header-menu span.dz-user-menu-item > i { font-size: 12px; margin-right: 0.5rem; } -.dz-layout ul.dz-user-menu li > span.dz-user-menu-item:hover, -.dz-layout .dz-header-menu span.dz-user-menu-item:hover { - background-color: var(--dz-layout-nav-item-hover-bg); - font-weight: 500; -} - .dz-layout .dz-header-menu .dz-user-menu .dz-nav-item { border-radius: 0.25rem; } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .dz-layout .dz-header-container > .dz-header-menu { align-items: center; - justify-content: space-between; flex-direction: row; + justify-content: space-between; } .dz-layout .dz-header-menu > ul.dz-user-menu { @@ -67,10 +66,10 @@ ul.dz-user-menu li span.dz-user-menu-item > i { cursor: pointer; } - .dz-layout ul.dz-user-menu li > span.dz-user-menu-item:hover, - .dz-layout .dz-header-menu span.dz-user-menu-item:hover { - background-color: var(--dropdown-trigger-bg-hover, #e5e5e5); + .dz-layout .dz-header-menu span.dz-user-menu-item:hover, + .dz-layout ul.dz-user-menu li > span.dz-user-menu-item:hover { background: initial; + background-color: var(--dropdown-trigger-bg-hover, #e5e5e5); border-radius: 5px; font-weight: initial; } diff --git a/packages/layout/src/assets/css/components/layout/header.css b/packages/layout/src/assets/css/components/layout/header.css index adce8ecdf..c1d29f44b 100644 --- a/packages/layout/src/assets/css/components/layout/header.css +++ b/packages/layout/src/assets/css/components/layout/header.css @@ -1,9 +1,7 @@ .dz-layout > header { - --_layout-header-color: var(--dz-layout-header-color, rgb(84, 84, 84)); - + --_layout-header-color: var(--dz-layout-header-color, rgb(84 84 84)); --_layout-header-padding-h: var(--dz-layout-header-padding-h, 1.5rem); --_layout-header-padding-v: var(--dz-layout-header-padding-v, 1rem); - --_layout-header-bg: var(--dz-layout-header-bg, transparent); --_layout-header-border: var( --dz-layout-header-border, @@ -19,13 +17,13 @@ } .dz-layout > header > .dz-header-container { + align-items: center; display: grid; + gap: 0.25rem; grid-template-areas: "logo toggle"; grid-template-columns: 1fr auto; padding: var(--_layout-header-padding-v) var(--_layout-header-padding-h); width: 100%; - align-items: center; - gap: 0.25rem; } .dz-layout > header > .dz-header-container > .dz-logo { @@ -57,22 +55,22 @@ display: none; } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .dz-layout > header > .dz-header-container { display: flex; - max-width: var(--_layout-header-max-width); - margin: auto; gap: var(--_layout-header-gap); justify-content: space-between; + margin: auto; + max-width: var(--_layout-header-max-width); } .dz-layout > header > .dz-header-container > .dz-header-title { + align-items: center; color: var(--_layout-header-color); + display: flex; font-size: 1rem; font-weight: bold; grid-area: title; - display: flex; - align-items: center; } .dz-layout @@ -84,8 +82,8 @@ .dz-layout > header > .dz-header-container > .dz-navigation-menu { display: flex; - grid-area: nav; flex-grow: 1; + grid-area: nav; } .dz-layout > header > .dz-header-container > .dz-toggle-menu { @@ -94,8 +92,8 @@ .dz-layout > header > .dz-header-container > .dz-header-menu { display: flex; - grid-area: menu; flex: 2; + grid-area: menu; justify-content: flex-end; } diff --git a/packages/layout/src/assets/css/components/layout/index.css b/packages/layout/src/assets/css/components/layout/index.css index 5fc5ae4ac..3b8ce4668 100644 --- a/packages/layout/src/assets/css/components/layout/index.css +++ b/packages/layout/src/assets/css/components/layout/index.css @@ -1,9 +1,9 @@ -@import "./footer.css"; -@import "./header.css"; -@import "./header-menu.css"; -@import "./layout.css"; -@import "./logo.css"; -@import "./sidebar.css"; -@import "./sticky-collapsible-footer.css"; -@import "./toggle-menu.css"; -@import "./vars.css"; +@import url("./footer.css"); +@import url("./header.css"); +@import url("./header-menu.css"); +@import url("./layout.css"); +@import url("./logo.css"); +@import url("./sidebar.css"); +@import url("./sticky-collapsible-footer.css"); +@import url("./toggle-menu.css"); +@import url("./vars.css"); diff --git a/packages/layout/src/assets/css/components/layout/layout.css b/packages/layout/src/assets/css/components/layout/layout.css index 4296e6fca..9e5da8653 100644 --- a/packages/layout/src/assets/css/components/layout/layout.css +++ b/packages/layout/src/assets/css/components/layout/layout.css @@ -1,8 +1,7 @@ .dz-layout { --_default-padding-h: 1rem; --_default-padding-v: 1.5rem; - - --_layout-main-bg: var(--dz-layout-main-bg, #ffffff); + --_layout-main-bg: var(--dz-layout-main-bg, #fff); --_layout-main-padding-h: var( --dz-layout-main-padding-h, var(--_default-padding-h) @@ -21,7 +20,7 @@ padding: var(--_layout-main-padding-v) var(--_layout-main-padding-h); } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .dz-layout { --_default-padding-h: 2rem; --_default-padding-v: 2.5rem; diff --git a/packages/layout/src/assets/css/components/layout/logo.css b/packages/layout/src/assets/css/components/layout/logo.css index c9835198a..9528deca5 100644 --- a/packages/layout/src/assets/css/components/layout/logo.css +++ b/packages/layout/src/assets/css/components/layout/logo.css @@ -21,7 +21,7 @@ .dz-layout .dz-logo .logo-default > span:first-child { align-items: center; - background: rgba(45, 45, 45, 0.25); + background: rgb(45 45 45 / 25%); border-radius: 50%; display: flex; flex-shrink: 0; diff --git a/packages/layout/src/assets/css/components/layout/sidebar.css b/packages/layout/src/assets/css/components/layout/sidebar.css index 66d3c555b..6f6ad6d36 100644 --- a/packages/layout/src/assets/css/components/layout/sidebar.css +++ b/packages/layout/src/assets/css/components/layout/sidebar.css @@ -1,7 +1,7 @@ .dz-layout > .dz-sidebar { --_default-padding-h: 1rem; --_default-padding-v: 1.5rem; - --_layout-sidebar-bg: var(--dz-layout-sidebar-bg, #ffffff); + --_layout-sidebar-bg: var(--dz-layout-sidebar-bg, #fff); --_layout-sidebar-border: var( --dz-layout-sidebar-border, 1px solid var(--border-color, #e5e7eb) @@ -37,21 +37,22 @@ } .dz-layout[aria-expanded="false"] > .dz-sidebar { - width: 0; overflow: hidden; + width: 0; } .dz-layout > .dz-sidebar > .dz-sidebar-header { align-items: center; + border-bottom: var(--_layout-sidebar-border); display: flex; gap: 1rem; justify-content: space-between; padding: var(--_layout-sidebar-padding-v) var(--_layout-sidebar-padding-h); - border-bottom: var(--_layout-sidebar-border); } .dz-layout > .dz-sidebar > .dz-sidebar-header > .dz-logo { --_layout-logo-max-width: var(--_layout-sidebar-logo-max-width); + width: 100%; } @@ -63,12 +64,12 @@ --_layout-nav-item-padding-h: var(--_layout-sidebar-padding-h); --_layout-nav-menu-padding-v: var(--_layout-sidebar-padding-v); --_layout-nav-menu-separator-color: var(--_layout-sidebar-separator-color); + flex: 1; - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; } -.dz-layout > .dz-sidebar > :not(.dz-sidebar-header):not(.dz-navigation-menu) { +.dz-layout > .dz-sidebar > :not(.dz-sidebar-header, .dz-navigation-menu) { border-top: 1px solid var(--_layout-sidebar-separator-color); } @@ -78,8 +79,8 @@ .dz-layout > .dz-sidebar .dz-user-menu[aria-orientation="horizontal"] { display: flex; - justify-content: space-between; gap: 0.25rem; + justify-content: space-between; padding: var(--_layout-sidebar-padding-v) var(--_layout-sidebar-padding-h); } @@ -100,15 +101,14 @@ padding: var(--_layout-sidebar-padding-v) var(--_layout-sidebar-padding-h); } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .dz-layout > .dz-sidebar { border-right: var(--_layout-sidebar-border); display: flex; flex-direction: column; - overflow-y: auto; - overflow-x: hidden; - width: var(--_layout-sidebar-width); + overflow: hidden auto; transition: width var(--_layout-sidebar-transition-duration) ease-in; + width: var(--_layout-sidebar-width); } .dz-layout[aria-expanded="false"] > .dz-sidebar { diff --git a/packages/layout/src/assets/css/components/layout/sticky-collapsible-footer.css b/packages/layout/src/assets/css/components/layout/sticky-collapsible-footer.css index d86eafc32..af93f8855 100644 --- a/packages/layout/src/assets/css/components/layout/sticky-collapsible-footer.css +++ b/packages/layout/src/assets/css/components/layout/sticky-collapsible-footer.css @@ -4,7 +4,7 @@ width: 100%; } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .sticky-collapsible { background: transparent; bottom: 0; diff --git a/packages/layout/src/assets/css/components/layout/toggle-menu.css b/packages/layout/src/assets/css/components/layout/toggle-menu.css index ec7960356..746d5a83e 100644 --- a/packages/layout/src/assets/css/components/layout/toggle-menu.css +++ b/packages/layout/src/assets/css/components/layout/toggle-menu.css @@ -7,16 +7,18 @@ line-height: 1; padding: 0.75rem; text-align: center; - width: 2.875rem; transition: background-color var(--transition-duration) ease; + width: 2.875rem; } .dz-layout .dz-toggle-menu:hover { background-color: color-mix(in srgb, var(--_background-color) 10%, white); } + .dz-layout .dz-toggle-menu:focus { background-color: color-mix(in srgb, var(--_background-color) 10%, white); } + .dz-layout .dz-toggle-menu:active { background-color: color-mix(in srgb, var(--_background-color) 20%, white); } diff --git a/packages/layout/src/assets/css/components/layout/vars.css b/packages/layout/src/assets/css/components/layout/vars.css index 6c497cacf..04ecb1e81 100644 --- a/packages/layout/src/assets/css/components/layout/vars.css +++ b/packages/layout/src/assets/css/components/layout/vars.css @@ -1,6 +1,5 @@ :root { --dz-layout-logo-max-width: 8rem; - --dz-layout-sidebar-bg: white; --dz-layout-sidebar-border: 1px solid var(--border-color, #e5e7eb); --dz-layout-sidebar-collapsed-width: 0; @@ -10,17 +9,14 @@ --dz-layout-sidebar-padding-v: 0.75rem; --dz-layout-sidebar-separator-color: var(--border-color, #e5e7eb); --dz-layout-sidebar-width: 16rem; - --dz-layout-nav-item-padding-h: 2rem; --dz-layout-nav-item-padding-v: 0.5rem; --dz-layout-nav-menu-padding-h: 0; --dz-layout-nav-menu-padding-v: 1rem; --dz-layout-nav-menu-separator-color: var(--border-color, #e5e7eb); - - --dz-layout-main-bg: #ffffff; + --dz-layout-main-bg: #fff; --dz-layout-main-padding-h: 1.5rem; --dz-layout-main-padding-v: 1.5rem; - --dz-layout-header-bg: transparent; --dz-layout-header-border: 1px solid var(--border-color, #e5e7eb); --dz-layout-header-color: var(--color, #374151); @@ -31,11 +27,10 @@ --dz-layout-header-padding-v: 0.75rem; } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { :root { --dz-layout-main-padding-h: 2rem; --dz-layout-main-padding-v: 1.25rem; - --dz-layout-sidebar-padding-v: 0.5rem; } } diff --git a/packages/layout/src/assets/css/index.css b/packages/layout/src/assets/css/index.css index 273f08179..099627dc5 100644 --- a/packages/layout/src/assets/css/index.css +++ b/packages/layout/src/assets/css/index.css @@ -1,4 +1,4 @@ -@import "./components/layout/index.css"; -@import "./layouts/sidebar-only-layout.css"; -@import "./layouts/sidebar-header-layout.css"; -@import "./layouts/header-layout.css"; +@import url("./components/layout/index.css"); +@import url("./layouts/sidebar-only-layout.css"); +@import url("./layouts/sidebar-header-layout.css"); +@import url("./layouts/header-layout.css"); diff --git a/packages/layout/src/assets/css/layouts/header-layout.css b/packages/layout/src/assets/css/layouts/header-layout.css index 2f71b6863..a9efaf538 100644 --- a/packages/layout/src/assets/css/layouts/header-layout.css +++ b/packages/layout/src/assets/css/layouts/header-layout.css @@ -1,10 +1,7 @@ .dz-header-layout { display: grid; - grid-template-areas: - "header" - "main"; - grid-template-columns: 1fr; - grid-template-rows: auto 1fr; + grid-template: + "header" auto "main" 1fr / 1fr; width: 100%; } @@ -17,6 +14,11 @@ margin-right: -0.75rem; } +.dz-header-layout > .dz-sidebar > .dz-sidebar-header > .dz-toggle-menu { + opacity: 1; + transition: opacity 0.5s ease-in; +} + .dz-header-layout[aria-expanded="false"] > .dz-sidebar > .dz-sidebar-header @@ -24,17 +26,13 @@ opacity: 0; transition: opacity 0.5s ease-in; } -.dz-header-layout > .dz-sidebar > .dz-sidebar-header > .dz-toggle-menu { - opacity: 1; - transition: opacity 0.5s ease-in; -} .dz-header-layout > .dz-sidebar { grid-area: sidebar; + height: 100%; position: fixed; - z-index: 999; width: 100%; - height: 100%; + z-index: 999; } .dz-header-layout > main { @@ -53,16 +51,21 @@ display: none; } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .dz-header-layout > .dz-sidebar { display: none !important; } .dz-header-layout > header { + --_layout-header-padding-h: var(--_layout-main-padding-h); + display: block; + grid-area: header; } + .dz-header-layout > footer { display: flex; + grid-area: footer; } .dz-header-layout { @@ -75,12 +78,6 @@ min-height: 100dvh; } - .dz-header-layout > header { - --_layout-header-padding-h: var(--_layout-main-padding-h); - - grid-area: header; - } - .dz-header-layout > header > .dz-header-container > .dz-toggle-menu { margin-right: -0.75rem; } @@ -90,8 +87,4 @@ max-width: 100%; min-width: 100%; } - - .dz-header-layout > footer { - grid-area: footer; - } } diff --git a/packages/layout/src/assets/css/layouts/sidebar-header-layout.css b/packages/layout/src/assets/css/layouts/sidebar-header-layout.css index 2e0f14ecf..0bd5cd279 100644 --- a/packages/layout/src/assets/css/layouts/sidebar-header-layout.css +++ b/packages/layout/src/assets/css/layouts/sidebar-header-layout.css @@ -1,10 +1,7 @@ .dz-sidebar-header-layout { display: grid; - grid-template-areas: - "header" - "main"; - grid-template-columns: 1fr; - grid-template-rows: auto 1fr; + grid-template: + "header" auto "main" 1fr / 1fr; width: 100%; } @@ -17,6 +14,11 @@ margin-right: -0.75rem; } +.dz-sidebar-header-layout > .dz-sidebar > .dz-sidebar-header > .dz-toggle-menu { + opacity: 1; + transition: opacity 0.5s ease-in; +} + .dz-sidebar-header-layout[aria-expanded="false"] > .dz-sidebar > .dz-sidebar-header @@ -24,17 +26,13 @@ opacity: 0; transition: opacity 0.5s ease-in; } -.dz-sidebar-header-layout > .dz-sidebar > .dz-sidebar-header > .dz-toggle-menu { - opacity: 1; - transition: opacity 0.5s ease-in; -} .dz-sidebar-header-layout > .dz-sidebar { grid-area: sidebar; + height: 100%; position: fixed; - z-index: 999; width: 100%; - height: 100%; + z-index: 999; } .dz-sidebar-header-layout > main { @@ -49,13 +47,10 @@ padding: 0.5rem 0; } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .dz-sidebar-header-layout { - grid-template-areas: - "header header" - "sidebar main"; - grid-template-columns: auto 1fr; - grid-template-rows: auto 1fr; + grid-template: + "header header" auto "sidebar main" 1fr / auto 1fr; height: 100dvh; } @@ -74,8 +69,8 @@ .dz-sidebar-header-layout > .dz-sidebar { grid-area: sidebar; position: unset; - width: var(--_layout-sidebar-width); transition: width var(--_layout-sidebar-transition-duration) ease-in; + width: var(--_layout-sidebar-width); } .dz-layout[aria-expanded="false"] > .dz-sidebar { diff --git a/packages/layout/src/assets/css/layouts/sidebar-only-layout.css b/packages/layout/src/assets/css/layouts/sidebar-only-layout.css index 5a1698ccb..a1affcd43 100644 --- a/packages/layout/src/assets/css/layouts/sidebar-only-layout.css +++ b/packages/layout/src/assets/css/layouts/sidebar-only-layout.css @@ -24,7 +24,7 @@ padding: 0.5rem 0; } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .dz-sidebar-only-layout { display: grid; grid-template-areas: "sidebar main"; @@ -32,15 +32,13 @@ height: 100dvh; } - .dz-sidebar-only-layout > .dz-sidebar { - grid-area: sidebar; - } - .dz-sidebar-only-layout > .dz-sidebar { --_layout-sidebar-collapsed-width: var( --dz-layout-sidebar-collapsed-width, 1.5rem ); + + grid-area: sidebar; } .dz-sidebar-only-layout > main { diff --git a/packages/layout/stylelint.config.js b/packages/layout/stylelint.config.js new file mode 100644 index 000000000..7736fdf3a --- /dev/null +++ b/packages/layout/stylelint.config.js @@ -0,0 +1,3 @@ +import stylelintConfig from "@prefabs.tech/eslint-config/stylelint.js"; + +export default stylelintConfig; diff --git a/packages/ui/package.json b/packages/ui/package.json index badc0510c..dfc6e2af9 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -24,6 +24,8 @@ "lint:fix": "eslint . --fix", "snapshot:update": "vitest --environment jsdom run --update --passWithNoTests", "sort-package": "npx sort-package-json", + "stylelint": "stylelint \"src/**/*.{css,vue}\" --allow-empty-input", + "stylelint:fix": "stylelint \"src/**/*.{css,vue}\" --fix --allow-empty-input", "test": "vitest --environment jsdom run --coverage", "test:component": "vitest --environment jsdom run component/", "test:snapshot": "vitest --environment jsdom run snapshot/", @@ -59,6 +61,9 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-router-dom": "6.28.2", + "stylelint": "17.9.1", + "stylelint-config-standard": "40.0.0", + "stylelint-order": "8.1.1", "typescript": "5.9.3", "vite": "7.3.2", "vitest": "3.0.9" diff --git a/packages/ui/src/assets/css/accordion-theme.css b/packages/ui/src/assets/css/accordion-theme.css index 21bca17ac..14b7d1bba 100644 --- a/packages/ui/src/assets/css/accordion-theme.css +++ b/packages/ui/src/assets/css/accordion-theme.css @@ -30,6 +30,10 @@ border-radius: var(--_border-radius); } +.accordion.horizontal > li { + min-height: var(--accordion-horizontal-height, 30rem); +} + .accordion.horizontal > li:not(:last-child) { border-right: 1px solid var(--border-color); } @@ -46,14 +50,14 @@ padding: var(--_padding); } -.accordion > li > button > i:first-child { - margin-right: 0.5rem; -} - .accordion > li > button > i { color: var(--color); } +.accordion > li > button > i:first-child { + margin-right: 0.5rem; +} + .accordion > li > button > span { color: var(--color); flex-grow: 1; @@ -68,17 +72,22 @@ width: 100%; } -.accordion.vertical > li.active > div[role="region"] { - max-height: var(--accordion-height, 30rem); - overflow-y: auto; -} - .accordion.horizontal > li > div[role="region"] { + height: 100%; max-width: 0; opacity: 0; overflow: hidden; transition: max-width var(--transition-duration) ease, opacity var(--transition-duration) ease; - height: 100%; +} + +.accordion > li.active, +.accordion > li.active > div[role="region"] { + width: 100%; +} + +.accordion.vertical > li.active > div[role="region"] { + max-height: var(--accordion-height, 30rem); + overflow-y: auto; } .accordion.horizontal > li.active > div[role="region"] { @@ -91,15 +100,6 @@ padding: var(--_padding); } -.accordion > li.active, -.accordion > li.active > div[role="region"] { - width: 100%; -} - -.accordion.horizontal > li { - min-height: var(--accordion-horizontal-height, 30rem); -} - .accordion.horizontal > li > button { padding: var(--_padding); width: min-content; diff --git a/packages/ui/src/assets/css/accordion.css b/packages/ui/src/assets/css/accordion.css index d91a9b17e..a7e77243c 100644 --- a/packages/ui/src/assets/css/accordion.css +++ b/packages/ui/src/assets/css/accordion.css @@ -19,7 +19,9 @@ } .accordion.horizontal > li > button { - flex-direction: column; + align-items: center; + flex-direction: column-reverse; + justify-content: space-between; } .accordion.horizontal { @@ -31,15 +33,9 @@ flex-direction: row; } -.accordion.horizontal > li > button { - align-items: center; - flex-direction: column-reverse; - justify-content: space-between; -} - .accordion.horizontal > li > button > span { margin: var(--accordion-title-margin, 0 0 4px 0); - text-orientation: sideways-right; + text-orientation: sideways; transform: rotate(180deg); writing-mode: vertical-rl; } diff --git a/packages/ui/src/assets/css/auth-page.css b/packages/ui/src/assets/css/auth-page.css index 92520b525..c0b533bf4 100644 --- a/packages/ui/src/assets/css/auth-page.css +++ b/packages/ui/src/assets/css/auth-page.css @@ -1,5 +1,6 @@ .dz-auth-page { --_auth-page-gap: var(--dz-auth-page-gap, 2rem); + display: flex; flex-direction: column; gap: var(--_auth-page-gap); diff --git a/packages/ui/src/assets/css/button.css b/packages/ui/src/assets/css/button.css index a90cec95f..27d3439ad 100644 --- a/packages/ui/src/assets/css/button.css +++ b/packages/ui/src/assets/css/button.css @@ -6,9 +6,9 @@ align-items: center; background-color: var(--_button-color); - border-radius: var(--_button-border-radius); border: none; - color: #ffffff; + border-radius: var(--_button-border-radius); + color: #fff; cursor: pointer; display: flex; font-size: var(--_button-font-size); @@ -52,25 +52,28 @@ } .dz-button:focus { - outline-offset: 2px; outline: 2px solid var(--_button-color); + outline-offset: 2px; } .dz-button:disabled { cursor: not-allowed; - pointer-events: none; opacity: 0.6; + pointer-events: none; } .dz-button.filled { border: 1px solid var(--_button-color); } + .dz-button.filled:hover:not(:disabled) { background-color: color-mix(in srgb, var(--_button-color) 75%, black); } + .dz-button.filled:focus:not(:disabled) { background-color: color-mix(in srgb, var(--_button-color) 75%, black); } + .dz-button.filled:active:not(:disabled) { background-color: color-mix(in srgb, var(--_button-color) 50%, black); } @@ -80,12 +83,15 @@ border: 1px solid var(--_button-color); color: var(--_button-color); } + .dz-button.outlined:hover:not(:disabled) { background-color: color-mix(in srgb, var(--_button-color) 10%, white); } + .dz-button.outlined:focus:not(:disabled) { background-color: color-mix(in srgb, var(--_button-color) 10%, white); } + .dz-button.outlined:active:not(:disabled) { background-color: color-mix(in srgb, var(--_button-color) 20%, white); } @@ -96,14 +102,17 @@ color: var(--_button-color); font-weight: normal; } + .dz-button.text-only:hover:not(:disabled) { background-color: color-mix(in srgb, var(--_button-color) 10%, white); border: 1px solid color-mix(in srgb, var(--_button-color) 10%, white); } + .dz-button.text-only:focus:not(:disabled) { background-color: color-mix(in srgb, var(--_button-color) 10%, white); border: 1px solid color-mix(in srgb, var(--_button-color) 10%, white); } + .dz-button.text-only:active:not(:disabled) { background-color: color-mix(in srgb, var(--_button-color) 20%, white); border: 1px solid color-mix(in srgb, var(--_button-color) 20%, white); diff --git a/packages/ui/src/assets/css/card.css b/packages/ui/src/assets/css/card.css index c9a0bbed9..85479edd5 100644 --- a/packages/ui/src/assets/css/card.css +++ b/packages/ui/src/assets/css/card.css @@ -1,18 +1,18 @@ .dz-card { - --_card-text-color: rgba(0, 0, 0, 0.87); + --_card-text-color: rgb(0 0 0 / 87%); + background-color: #fff; border-radius: 5px; - box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), - 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), + 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%); color: var(--_card-text-color); - -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; overflow: hidden; + transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .dz-card[data-variant-outlined="true"] { + border: 1px solid rgb(0 0 0 / 12%); box-shadow: none; - border: 1px solid rgba(0, 0, 0, 0.12); } .dz-card-body, diff --git a/packages/ui/src/assets/css/confirmation-modal.css b/packages/ui/src/assets/css/confirmation-modal.css index 5f9a47a84..2526fd3b8 100644 --- a/packages/ui/src/assets/css/confirmation-modal.css +++ b/packages/ui/src/assets/css/confirmation-modal.css @@ -1,12 +1,12 @@ :root { - --dz-dialog-background-color: rgba(255, 255, 255, 1); - --dz-dialog-overlay-color: rgba(0, 0, 0, 0.3); + --dz-dialog-background-color: rgb(255 255 255 / 100%); + --dz-dialog-overlay-color: rgb(0 0 0 / 30%); } .dz-dialog { background-color: var(--dz-dialog-background-color); - border-radius: 0.3rem; border: none; + border-radius: 0.3rem; box-shadow: 0 1px 3px var(--dz-dialog-overlay-color); flex-direction: column; gap: 1rem; @@ -53,8 +53,8 @@ .dz-dialog > .dz-dialog-footer { display: flex; - justify-content: flex-end; gap: 1rem; + justify-content: flex-end; } @keyframes open { @@ -62,6 +62,7 @@ opacity: 0; transform: scale(0); } + to { opacity: 1; transform: scale(1); diff --git a/packages/ui/src/assets/css/data.css b/packages/ui/src/assets/css/data.css index 82f8559c5..204b6f892 100644 --- a/packages/ui/src/assets/css/data.css +++ b/packages/ui/src/assets/css/data.css @@ -7,10 +7,9 @@ display: flex; flex-direction: column; gap: 0.25rem; - min-width: var(--_min-width); - padding-inline: var(--_padding-inline); padding-block: var(--_padding-block); + padding-inline: var(--_padding-inline); width: max-content; } diff --git a/packages/ui/src/assets/css/divider.css b/packages/ui/src/assets/css/divider.css index 7e120f1ed..905bc319a 100644 --- a/packages/ui/src/assets/css/divider.css +++ b/packages/ui/src/assets/css/divider.css @@ -1,13 +1,13 @@ .divider[role="separator"][data-aria-orientation="horizontal"] { + border-top: 1px solid #d0d0d0; height: 0; margin: 1rem 0; width: 100%; - border-top: 1px solid #d0d0d0; } .divider[role="separator"][data-aria-orientation="vertical"] { + border-left: 1px solid #d0d0d0; height: 100%; margin: 0 1rem; width: 0; - border-left: 1px solid #d0d0d0; } diff --git a/packages/ui/src/assets/css/dropdown-menu.css b/packages/ui/src/assets/css/dropdown-menu.css index 636fa0d63..6c83f370c 100644 --- a/packages/ui/src/assets/css/dropdown-menu.css +++ b/packages/ui/src/assets/css/dropdown-menu.css @@ -21,8 +21,8 @@ .dropdown-menu-trigger .dropdown-icon { display: inline-block; margin-left: 0.5rem; - transition: transform 0.3s ease; transform-origin: center; + transition: transform 0.3s ease; } .popup-trigger[aria-expanded="true"] @@ -48,8 +48,8 @@ ul.dropdown-menu-list { ul.dropdown-menu-list li { --_color: var(--color); - color: var(--_color); background-color: white; + color: var(--_color); cursor: pointer; padding: 0.7rem 1.25rem; transition: all var(--transition-duration) ease 0s; @@ -103,7 +103,7 @@ ul.dropdown-menu-list li .menu-item { gap: 0.5rem; } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .dropdown-menu-trigger:hover { background-color: var(--dropdown-trigger-bg-hover, #e5e5e5); border-radius: 5px; diff --git a/packages/ui/src/assets/css/file-card.css b/packages/ui/src/assets/css/file-card.css index 3343b076e..eec0b426f 100644 --- a/packages/ui/src/assets/css/file-card.css +++ b/packages/ui/src/assets/css/file-card.css @@ -1,15 +1,15 @@ .file-card { - box-shadow: -1px -1px 29px -14px rgba(0, 0, 0, 0.28); + box-shadow: -1px -1px 29px -14px rgb(0 0 0 / 28%); max-width: 100%; } .file-thumbnail-details-wrapper { + align-items: flex-start; display: flex; - padding: 1rem; flex-wrap: wrap; - justify-content: flex-start; - align-items: flex-start; gap: 1rem; + justify-content: flex-start; + padding: 1rem; } .file-card .file-thumbnail { @@ -56,8 +56,8 @@ .file-card .file-upload-download-details-wrapper { display: flex; - gap: 1rem; flex-wrap: wrap; + gap: 1rem; } .file-card .file-upload-details { @@ -96,8 +96,8 @@ .file-card .file-actions { display: flex; + flex-wrap: wrap; gap: 1rem; justify-content: flex-end; - flex-wrap: wrap; - padding: 0rem 1rem 1rem 1rem; + padding: 0 1rem 1rem; } diff --git a/packages/ui/src/assets/css/files-list.css b/packages/ui/src/assets/css/files-list.css index 8f714c733..6895f4333 100644 --- a/packages/ui/src/assets/css/files-list.css +++ b/packages/ui/src/assets/css/files-list.css @@ -1,5 +1,5 @@ .file-list-wrapper { display: flex; - gap: 1rem; flex-direction: column; + gap: 1rem; } diff --git a/packages/ui/src/assets/css/form-widgets/checkbox-input.css b/packages/ui/src/assets/css/form-widgets/checkbox-input.css index b8ccdfb30..da0b6edcd 100644 --- a/packages/ui/src/assets/css/form-widgets/checkbox-input.css +++ b/packages/ui/src/assets/css/form-widgets/checkbox-input.css @@ -9,7 +9,6 @@ } .field.checkbox > .checkbox-group.direction-horizontal { - flex-direction: row; - flex-wrap: wrap; + flex-flow: row wrap; gap: 1.5rem; } diff --git a/packages/ui/src/assets/css/form-widgets/checkbox.css b/packages/ui/src/assets/css/form-widgets/checkbox.css index b234b2aba..a4d523f1b 100644 --- a/packages/ui/src/assets/css/form-widgets/checkbox.css +++ b/packages/ui/src/assets/css/form-widgets/checkbox.css @@ -1,12 +1,12 @@ .checkbox-wrapper { + align-items: baseline; display: flex; gap: 0.5rem; - align-items: baseline; } .checkbox-wrapper > input[type="checkbox"] { + accent-color: var(--dz-primary-color); cursor: pointer; - width: auto; transform: scale(1.5); - accent-color: var(--dz-primary-color); + width: auto; } diff --git a/packages/ui/src/assets/css/form-widgets/date-picker.css b/packages/ui/src/assets/css/form-widgets/date-picker.css index 138272c9f..4d716623e 100644 --- a/packages/ui/src/assets/css/form-widgets/date-picker.css +++ b/packages/ui/src/assets/css/form-widgets/date-picker.css @@ -17,6 +17,6 @@ .field .p-calendar .p-inputtext:disabled { --_background-color: var(--field-bg-color-disabled, #f8f8f8); - opacity: 0.8; cursor: not-allowed; + opacity: 0.8; } diff --git a/packages/ui/src/assets/css/form-widgets/editable-title.css b/packages/ui/src/assets/css/form-widgets/editable-title.css index 90de6d694..08aa05ffd 100644 --- a/packages/ui/src/assets/css/form-widgets/editable-title.css +++ b/packages/ui/src/assets/css/form-widgets/editable-title.css @@ -1,8 +1,8 @@ .dz-editable-title { - display: flex; align-items: center; - justify-content: flex-start; + display: flex; gap: 0.5rem; + justify-content: flex-start; } .dz-editable-title > i { diff --git a/packages/ui/src/assets/css/form-widgets/field.css b/packages/ui/src/assets/css/form-widgets/field.css index ec84dd6b4..777e5b4e1 100644 --- a/packages/ui/src/assets/css/form-widgets/field.css +++ b/packages/ui/src/assets/css/form-widgets/field.css @@ -40,6 +40,6 @@ fieldset { fieldset legend { font-size: var(--form-label-font-size, 1em); - margin-bottom: 0.75rem; font-weight: 500; + margin-bottom: 0.75rem; } diff --git a/packages/ui/src/assets/css/form-widgets/index.css b/packages/ui/src/assets/css/form-widgets/index.css index e7ecc2546..e76743699 100644 --- a/packages/ui/src/assets/css/form-widgets/index.css +++ b/packages/ui/src/assets/css/form-widgets/index.css @@ -1,13 +1,12 @@ -@import "./field.css"; - -@import "./checkbox-input.css"; -@import "./checkbox.css"; -@import "./country-picker.css"; -@import "./date-picker.css"; -@import "./editable-title.css"; -@import "./input.css"; -@import "./radio-input.css"; -@import "./select.css"; -@import "./switch-input.css"; -@import "./textarea.css"; -@import "./typeahead.css"; +@import url("./field.css"); +@import url("./checkbox-input.css"); +@import url("./checkbox.css"); +@import url("./country-picker.css"); +@import url("./date-picker.css"); +@import url("./editable-title.css"); +@import url("./input.css"); +@import url("./radio-input.css"); +@import url("./select.css"); +@import url("./switch-input.css"); +@import url("./textarea.css"); +@import url("./typeahead.css"); diff --git a/packages/ui/src/assets/css/form-widgets/input.css b/packages/ui/src/assets/css/form-widgets/input.css index 2f646c962..70f9268e2 100644 --- a/packages/ui/src/assets/css/form-widgets/input.css +++ b/packages/ui/src/assets/css/form-widgets/input.css @@ -8,8 +8,8 @@ .input-field { background-color: var(--_background-color); - border-radius: var(--_border-radius); border: 1px solid var(--_border-color); + border-radius: var(--_border-radius); padding-block: var(--_padding-block); padding-inline: var(--_padding-inline); width: 100%; @@ -19,8 +19,8 @@ --_border-color: var(--dz-danger-color); background-image: url("data:image/svg+xml,"); - background-repeat: no-repeat; background-position: right calc(0.75 * var(--_padding-inline, 0.5rem)) center; + background-repeat: no-repeat; background-size: 1rem; } @@ -28,8 +28,8 @@ --_border-color: var(--dz-success-color); background-image: url("data:image/svg+xml,"); - background-repeat: no-repeat; background-position: right calc(0.75 * var(--_padding-inline, 0.5rem)) center; + background-repeat: no-repeat; background-size: 1rem; } @@ -40,6 +40,6 @@ .input-field:disabled { --_background-color: var(--field-bg-color-disabled, #f8f8f8); - opacity: 0.8; cursor: not-allowed; + opacity: 0.8; } diff --git a/packages/ui/src/assets/css/form-widgets/radio-input.css b/packages/ui/src/assets/css/form-widgets/radio-input.css index 270c5cd4c..9c4d07d47 100644 --- a/packages/ui/src/assets/css/form-widgets/radio-input.css +++ b/packages/ui/src/assets/css/form-widgets/radio-input.css @@ -5,8 +5,8 @@ } .radio-button-wrapper input[type="radio"] { + accent-color: var(--dz-primary-color); outline: none; transform: scale(1.5); width: auto; - accent-color: var(--dz-primary-color); } diff --git a/packages/ui/src/assets/css/form-widgets/select.css b/packages/ui/src/assets/css/form-widgets/select.css index 21b2d4e0f..94a9fab0b 100644 --- a/packages/ui/src/assets/css/form-widgets/select.css +++ b/packages/ui/src/assets/css/form-widgets/select.css @@ -7,7 +7,7 @@ --_padding-block: var(--field-padding-block, 0.5rem); --_padding-inline: var(--field-padding-inline, 0.75rem); --_placeholder-color: var(--field-placeholder-color, #7b7676); - --_options-menu-background-color: var(--list-menu-bg-color, #ffffff); + --_options-menu-background-color: var(--list-menu-bg-color, #fff); --_option-background-color-hover: var(--list-item-bg-hover, #ededed); --_option-background-color-active: var(--list-item-bg-active, #ededed); } @@ -18,7 +18,7 @@ --_icon-color: var(--field-icon-color, #7b7676); --_padding-block: var(--field-padding-block, 0.5rem); --_padding-inline: var(--field-padding-inline, 0.75rem); - --_options-menu-background-color: var(--list-menu-bg-color, #ffffff); + --_options-menu-background-color: var(--list-menu-bg-color, #fff); --_option-background-color-hover: var(--list-item-bg-hover, #ededed); --_option-background-color-active: var(--list-item-bg-active, #ededed); } @@ -31,8 +31,8 @@ .select > .label-container { align-items: center; background-color: var(--_background-color); - border-radius: var(--_border-radius); border: 1px solid var(--_border-color); + border-radius: var(--_border-radius); display: flex; flex-wrap: nowrap; justify-content: space-between; @@ -127,7 +127,7 @@ white-space: nowrap; } -.select-menu .selected-options-wrapper .divider[role=separator] { +.select-menu .selected-options-wrapper .divider[role="separator"] { margin: 0.65rem 0; } @@ -169,6 +169,11 @@ margin-left: 0.5rem; } +.select-menu ul[aria-multiselectable="true"] > li { + align-items: baseline; + gap: 0.5rem; +} + .select-menu ul > li:hover:not(.group-label), .select-menu ul > li.focused:not(.group-label) { background-color: var(--_option-background-color-hover); @@ -179,13 +184,8 @@ } .select-menu ul > li.disabled { - opacity: 0.8; cursor: not-allowed; -} - -.select-menu ul[aria-multiselectable="true"] > li { - gap: 0.5rem; - align-items: baseline; + opacity: 0.8; } .select-menu ul > li > span { diff --git a/packages/ui/src/assets/css/form-widgets/switch-input.css b/packages/ui/src/assets/css/form-widgets/switch-input.css index 1a137aba1..104e1a6c9 100644 --- a/packages/ui/src/assets/css/form-widgets/switch-input.css +++ b/packages/ui/src/assets/css/form-widgets/switch-input.css @@ -12,7 +12,7 @@ border: 1px solid var(--field-invalid-border-color); } -.switch-toggle input:before { +.switch-toggle input::before { background-color: white; border-radius: 50%; bottom: 0.25rem; @@ -30,7 +30,7 @@ opacity: 0.5; } -.switch-toggle input:checked:before { +.switch-toggle input:checked::before { transform: translateX(2rem); } diff --git a/packages/ui/src/assets/css/form-widgets/textarea.css b/packages/ui/src/assets/css/form-widgets/textarea.css index 43db0a37e..6fead3c25 100644 --- a/packages/ui/src/assets/css/form-widgets/textarea.css +++ b/packages/ui/src/assets/css/form-widgets/textarea.css @@ -23,8 +23,8 @@ --_border-color: var(--dz-danger-color); background-image: url("data:image/svg+xml,"); - background-repeat: no-repeat; background-position: right calc(0.75 * var(--_padding-inline, 0.5rem)) center; + background-repeat: no-repeat; background-size: 1rem; } @@ -32,7 +32,7 @@ --_border-color: var(--dz-success-color); background-image: url("data:image/svg+xml,"); - background-repeat: no-repeat; background-position: right calc(0.75 * var(--_padding-inline, 0.5rem)) center; + background-repeat: no-repeat; background-size: 1rem; } diff --git a/packages/ui/src/assets/css/form-widgets/typeahead.css b/packages/ui/src/assets/css/form-widgets/typeahead.css index 039636666..f974d3a37 100644 --- a/packages/ui/src/assets/css/form-widgets/typeahead.css +++ b/packages/ui/src/assets/css/form-widgets/typeahead.css @@ -7,7 +7,7 @@ --_padding-block: var(--field-padding-block, 0.5rem); --_padding-inline: var(--field-padding-inline, 0.75rem); --_placeholder-color: var(--field-placeholder-color, #7b7676); - --_options-menu-background-color: var(--list-menu-bg-color, #ffffff); + --_options-menu-background-color: var(--list-menu-bg-color, #fff); --_option-background-color-hover: var(--list-item-bg-hover, #ededed); --_option-background-color-active: var(--list-item-bg-active, #ededed); } @@ -18,7 +18,7 @@ --_icon-color: var(--field-icon-color, #7b7676); --_padding-block: var(--field-padding-block, 0.5rem); --_padding-inline: var(--field-padding-inline, 0.75rem); - --_options-menu-background-color: var(--list-menu-bg-color, #ffffff); + --_options-menu-background-color: var(--list-menu-bg-color, #fff); --_option-background-color-hover: var(--list-item-bg-hover, #ededed); --_option-background-color-active: var(--list-item-bg-active, #ededed); } @@ -55,8 +55,8 @@ } .typeahead-menu ul > li.disabled { - opacity: 0.8; cursor: not-allowed; + opacity: 0.8; } .typeahead > .loading { diff --git a/packages/ui/src/assets/css/grid-container.css b/packages/ui/src/assets/css/grid-container.css index 23587879d..2ff0b692c 100644 --- a/packages/ui/src/assets/css/grid-container.css +++ b/packages/ui/src/assets/css/grid-container.css @@ -1,10 +1,10 @@ .dz-grid-container { display: grid; - grid-template-columns: 1fr; gap: 1rem; + grid-template-columns: 1fr; } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .dz-grid-container { grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); } diff --git a/packages/ui/src/assets/css/index.css b/packages/ui/src/assets/css/index.css index 3e1b4dc9f..8167212d7 100644 --- a/packages/ui/src/assets/css/index.css +++ b/packages/ui/src/assets/css/index.css @@ -1,43 +1,41 @@ -@import "./reset.css"; - -@import "./accordion.css"; -@import "./auth-page.css"; -@import "./button.css"; -@import "./card.css"; -@import "./confirmation-modal.css"; -@import "./currency-picker.css"; -@import "./country-display.css"; -@import "./data.css"; -@import "./divider.css"; -@import "./dropdown-menu.css"; -@import "./file-card.css"; -@import "./files-list.css"; -@import "./files-table.css"; -@import "./form-widgets/index.css"; -@import "./social-button.css"; -@import "./grid-container.css"; -@import "./inline-link.css"; -@import "./loading-icon.css"; -@import "./loading-page.css"; -@import "./message.css"; -@import "./modal.css"; -@import "./navigation/index.css"; -@import "./page.css"; -@import "./pagination.css"; -@import "./popup.css"; -@import "./sortable.css"; -@import "./sso-button.css"; -@import "./stepper.css"; -@import "./submenu.css"; -@import "./subpane.css"; -@import "./tab-view.css"; -@import "./table.css"; -@import "./tabs.css"; -@import "./tag.css"; -@import "./tooltip.css"; - -@import "./vars.css"; +@import url("./reset.css"); +@import url("./accordion.css"); +@import url("./auth-page.css"); +@import url("./button.css"); +@import url("./card.css"); +@import url("./confirmation-modal.css"); +@import url("./currency-picker.css"); +@import url("./country-display.css"); +@import url("./data.css"); +@import url("./divider.css"); +@import url("./dropdown-menu.css"); +@import url("./file-card.css"); +@import url("./files-list.css"); +@import url("./files-table.css"); +@import url("./form-widgets/index.css"); +@import url("./social-button.css"); +@import url("./grid-container.css"); +@import url("./inline-link.css"); +@import url("./loading-icon.css"); +@import url("./loading-page.css"); +@import url("./message.css"); +@import url("./modal.css"); +@import url("./navigation/index.css"); +@import url("./page.css"); +@import url("./pagination.css"); +@import url("./popup.css"); +@import url("./sortable.css"); +@import url("./sso-button.css"); +@import url("./stepper.css"); +@import url("./submenu.css"); +@import url("./subpane.css"); +@import url("./tab-view.css"); +@import url("./table.css"); +@import url("./tabs.css"); +@import url("./tag.css"); +@import url("./tooltip.css"); +@import url("./vars.css"); /* Theme CSS */ -@import "./accordion-theme.css"; -@import "./tab-theme.css"; +@import url("./accordion-theme.css"); +@import url("./tab-theme.css"); diff --git a/packages/ui/src/assets/css/inline-link.css b/packages/ui/src/assets/css/inline-link.css index 71e0ec31f..200c0b6da 100644 --- a/packages/ui/src/assets/css/inline-link.css +++ b/packages/ui/src/assets/css/inline-link.css @@ -1,9 +1,8 @@ a.inline-link { --_color: var(--dz-primary-color, --color) -} -a.inline-link { color: var(--_color); + cursor: pointer; text-decoration: none; } diff --git a/packages/ui/src/assets/css/loading-icon.css b/packages/ui/src/assets/css/loading-icon.css index f2b2d9a2b..030c0eb60 100644 --- a/packages/ui/src/assets/css/loading-icon.css +++ b/packages/ui/src/assets/css/loading-icon.css @@ -1,23 +1,20 @@ .loading { - color: var(--loading-icon-color, #ffffff); + animation: load4 1.3s infinite linear; + border-radius: 50%; + color: var(--loading-icon-color, #fff); font-size: 0.2rem; - margin: 0 1.5rem; - width: 1em; height: 1em; - border-radius: 50%; + margin: 0 1.5rem; position: relative; text-indent: -9999em; - -webkit-animation: load4 1.3s infinite linear; - animation: load4 1.3s infinite linear; - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); transform: translateZ(0); + width: 1em; } -@-webkit-keyframes load4 { +@keyframes load4 { 0%, 100% { - box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, + box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; } @@ -32,13 +29,13 @@ } 37.5% { - box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, - 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 0, 2em 2em 0 0.2em, + 0 3em 0 0, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; } 50% { - box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, - 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0, + 0 3em 0 0.2em, -2em 2em 0 0, -3em 0 0 -1em, -2em -2em 0 -1em; } 62.5% { @@ -47,20 +44,20 @@ } 75% { - box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, - 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, + 0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0.2em, -2em -2em 0 0; } 87.5% { - box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, - 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; + box-shadow: 0 -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, + 0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0, -2em -2em 0 0.2em; } } @keyframes load4 { 0%, 100% { - box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, + box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; } @@ -75,13 +72,13 @@ } 37.5% { - box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, - 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 0, 2em 2em 0 0.2em, + 0 3em 0 0, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; } 50% { - box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, - 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0, + 0 3em 0 0.2em, -2em 2em 0 0, -3em 0 0 -1em, -2em -2em 0 -1em; } 62.5% { @@ -90,12 +87,12 @@ } 75% { - box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, - 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, + 0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0.2em, -2em -2em 0 0; } 87.5% { - box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, - 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; + box-shadow: 0 -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, + 0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0, -2em -2em 0 0.2em; } } diff --git a/packages/ui/src/assets/css/loading-page.css b/packages/ui/src/assets/css/loading-page.css index 44854d617..6fe003d57 100644 --- a/packages/ui/src/assets/css/loading-page.css +++ b/packages/ui/src/assets/css/loading-page.css @@ -1,31 +1,28 @@ .loading-container { - display: flex; - justify-content: center; align-items: center; + display: flex; height: 50%; + justify-content: center; } .loading-container > .loading { - font-size: 0.5rem; color: black; + font-size: 0.5rem; } .loading-overlay { - position: fixed; + align-items: center; + background-color: rgb(0 0 0 / 50%); display: flex; - width: 100%; height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - z-index: 300; + inset: 0; justify-content: center; - align-items: center; + position: fixed; + width: 100%; + z-index: 300; } .loading-overlay > .loading { + color: var(--loading-icon-color, #fff); font-size: 0.5rem; - color: var(--loading-icon-color, #ffffff); } diff --git a/packages/ui/src/assets/css/message.css b/packages/ui/src/assets/css/message.css index 683df67b0..806fba90b 100644 --- a/packages/ui/src/assets/css/message.css +++ b/packages/ui/src/assets/css/message.css @@ -1,7 +1,7 @@ .message { background-color: color-mix(in srgb, var(--_background-color) 10%, #fff); - border-radius: 0.5rem; border: 1px solid var(--_border-color); + border-radius: 0.5rem; color: var(--_color); display: flex; gap: 1rem; diff --git a/packages/ui/src/assets/css/modal.css b/packages/ui/src/assets/css/modal.css index 4a55e353c..7b3a48283 100644 --- a/packages/ui/src/assets/css/modal.css +++ b/packages/ui/src/assets/css/modal.css @@ -1,20 +1,17 @@ .dz-modal-overlay { + align-items: center; + background-color: rgb(0 0 0 / 50%); display: flex; + inset: 0; justify-content: center; - align-items: center; position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); z-index: 1000; } .dz-modal { background-color: #fff; border-radius: 5px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 10px rgb(0 0 0 / 20%); color: var(--color); max-height: 80%; min-width: 300px; @@ -32,8 +29,8 @@ } .dz-modal .dz-modal-header span[role="heading"] { - font-weight: bold; font-size: 1.5rem; + font-weight: bold; } .dz-modal .dz-modal-content { @@ -49,11 +46,11 @@ } .dz-modal .dz-close-button { - padding: 0.75rem; margin-left: auto; + padding: 0.75rem; } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .dz-modal.medium { max-width: 32rem; min-width: 32rem; diff --git a/packages/ui/src/assets/css/navigation/index.css b/packages/ui/src/assets/css/navigation/index.css index 7b409c5d4..4e5eb12fd 100644 --- a/packages/ui/src/assets/css/navigation/index.css +++ b/packages/ui/src/assets/css/navigation/index.css @@ -1,3 +1,3 @@ -@import "./nav-item.css"; -@import "./nav-group.css"; -@import "./navigation-menu.css"; +@import url("./nav-item.css"); +@import url("./nav-group.css"); +@import url("./navigation-menu.css"); diff --git a/packages/ui/src/assets/css/navigation/nav-group.css b/packages/ui/src/assets/css/navigation/nav-group.css index 4ac1b3704..f42178243 100644 --- a/packages/ui/src/assets/css/navigation/nav-group.css +++ b/packages/ui/src/assets/css/navigation/nav-group.css @@ -1,18 +1,19 @@ .dz-nav-group { - --_collapsible-reverse-submenu-bg: var(--dz-nav-collapsible-reverse-submenu-bg, #ffffff); + --_collapsible-reverse-submenu-bg: var(--dz-nav-collapsible-reverse-submenu-bg, #fff); + display: flex; flex-direction: column; padding: 0; } .dz-nav-group > .dz-group-submenu { - display: flex; align-items: start; + display: flex; flex-direction: column; - padding: 0; margin: 0; - overflow: hidden; max-height: 0; + overflow: hidden; + padding: 0; } .dz-nav-group[aria-expanded="true"] > ul.dz-group-submenu { @@ -40,6 +41,14 @@ transform: rotate(90deg); } +.dz-nav-group.collapsible-reverse > .dz-group-header .dz-nav-group-toggle { + transform: rotate(-90deg); +} + +.dz-nav-group.expanded > .dz-nav-item .dz-nav-group-toggle { + display: none; +} + .dz-nav-group.collapsible[aria-expanded="true"] > .dz-group-header .dz-nav-group-toggle { @@ -52,16 +61,17 @@ } .dz-nav-group.collapsible-reverse ul.dz-group-submenu { - position: absolute; background: var(--_collapsible-reverse-submenu-bg); bottom: 100%; margin: 1px 0; + position: absolute; width: 100%; z-index: 2; } .dz-nav-group.collapsible-reverse[aria-expanded="true"] ul.dz-group-submenu { - box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 -2px 12px 0 rgb(0 0 0 / 10%); + /* animation: levitate 1s ease forwards; */ } @@ -69,21 +79,12 @@ padding-left: var(--_nav-item-padding-h); } -.dz-nav-group.collapsible-reverse > .dz-group-header .dz-nav-group-toggle { - transform: rotate(-90deg); -} - .dz-nav-group.collapsible-reverse[aria-expanded="true"] > .dz-group-header .dz-nav-group-toggle { transform: rotate(90deg); } -/* Expanded */ -.dz-nav-group.expanded > .dz-nav-item .dz-nav-group-toggle { - display: none; -} - .dz-nav-group.expanded > .dz-nav-item.dz-group-header { background: unset; cursor: default; @@ -93,9 +94,11 @@ 0% { transform: translateY(0); } + 50% { transform: translateY(-3px); } + 100% { transform: translateY(0); } diff --git a/packages/ui/src/assets/css/navigation/nav-item.css b/packages/ui/src/assets/css/navigation/nav-item.css index 0c2c82385..a8ea2ef42 100644 --- a/packages/ui/src/assets/css/navigation/nav-item.css +++ b/packages/ui/src/assets/css/navigation/nav-item.css @@ -6,15 +6,14 @@ --_nav-item-border-radius: var(--dz-nav-item-border-radius, 0); --_nav-item-hover-bg: var(--dz-nav-item-hover-bg, #f0f2f7ad); --_nav-item-active-bg: var(--dz-nav-item-active-bg, #eff6ff); - --_nav-item-padding-h: var(--dz-nav-item-padding-h, 1rem); --_nav-item-padding-v: var(--dz-nav-item-padding-v, 0.5rem); --_nav-item-transition-duration: var(--transition-duration, 150ms); align-items: baseline; border-radius: var(--_nav-item-border-radius); - cursor: pointer; color: var(--_nav-item-color); + cursor: pointer; display: flex; gap: 0.75rem; padding: var(--_nav-item-padding-v) var(--_nav-item-padding-h); @@ -47,6 +46,6 @@ .dz-nav-item > span { flex: 1; - text-wrap: nowrap; text-overflow: ellipsis; + text-wrap: nowrap; } diff --git a/packages/ui/src/assets/css/navigation/navigation-menu.css b/packages/ui/src/assets/css/navigation/navigation-menu.css index bf4372ae8..84bc906aa 100644 --- a/packages/ui/src/assets/css/navigation/navigation-menu.css +++ b/packages/ui/src/assets/css/navigation/navigation-menu.css @@ -2,25 +2,22 @@ .dz-navigation-menu { --nav-menu-label-color: var( --dz-nav-menu-label-color, - #ffffff + #fff ); --_nav-menu-label-padding-h: var(--dz-nav-item-padding-h, 1rem); --_nav-menu-label-padding-v: var( --dz-nav-item-padding-v, 0.625rem ); - --_nav-menu-padding-h: var(--dz-nav-menu-padding-h, 0); --_nav-menu-padding-v: var(--dz-nav-menu-padding-v, 1rem); - --_nav-menu-separator-color: var( --dz-nav-menu-separator-color, #dbdbdb ); - --_nav-item-overlay-menu-background-color: var( --dz-nav-item-overlay-menu-background-color, - #ffffff + #fff ); display: flex; @@ -56,7 +53,7 @@ flex: 1; } -@media screen and (min-width: 576px) { +@media screen and (width >= 576px) { .dz-navigation-menu[data-horizontal="true"] { align-items: center; flex-direction: row; diff --git a/packages/ui/src/assets/css/page.css b/packages/ui/src/assets/css/page.css index fa8ac835d..2ac3b7ff7 100644 --- a/packages/ui/src/assets/css/page.css +++ b/packages/ui/src/assets/css/page.css @@ -3,8 +3,8 @@ --_page-max-width: var(--dz-page-centered-max-width, 954px); display: flex; - gap: var(--_page-gap); flex-direction: column; + gap: var(--_page-gap); } .dz-page > .dz-page-header { @@ -15,8 +15,12 @@ .dz-page[data-centered="true"] { justify-items: center; - max-width: var(--_page-max-width); margin: auto; + max-width: var(--_page-max-width); +} + +.dz-page > .dz-page-header > .dz-page-title-wrapper > h1 > span { + margin-left: 0.5rem; } .dz-page > .dz-page-content > div[role="alert"].error > span { @@ -31,30 +35,26 @@ } .dz-page > .dz-page-header > .dz-page-toolbar { - display: flex; - justify-content: flex-start; align-items: center; - gap: 0.5rem; + display: flex; flex-wrap: wrap; + gap: 0.5rem; + justify-content: flex-start; } .dz-page-toolbar[data-breadcrumb="true"] > :first-child { display: none; } -.dz-page > .dz-page-header > .dz-page-title-wrapper > h1 > span { - margin-left: 0.5rem; -} - -@media (min-width: 576px) { +@media (width >= 576px) { .dz-page > .dz-page-header { grid-template-columns: repeat(2, minmax(0, auto)); } .dz-page > .dz-page-header > .dz-page-toolbar { - margin-left: auto; height: fit-content; justify-content: flex-end; + margin-left: auto; } .dz-page > .dz-page-header > .dz-page-title-wrapper > h1 > span { diff --git a/packages/ui/src/assets/css/pagination.css b/packages/ui/src/assets/css/pagination.css index be4f1a4af..2ce5b91f5 100644 --- a/packages/ui/src/assets/css/pagination.css +++ b/packages/ui/src/assets/css/pagination.css @@ -51,8 +51,8 @@ .items-per-page-control select { background-color: #f8f9fa; - border-radius: 4px; border: 1px solid var(--border-color); + border-radius: 4px; } .items-per-page-control select:focus { diff --git a/packages/ui/src/assets/css/popup.css b/packages/ui/src/assets/css/popup.css index d1d7db6a2..7d947cc6d 100644 --- a/packages/ui/src/assets/css/popup.css +++ b/packages/ui/src/assets/css/popup.css @@ -9,10 +9,10 @@ } .popup-menu { - background-color: #ffffff; - border-radius: calc(var(--border-radius) * 1.5); + background-color: #fff; border: 1px solid var(--border-color); - box-shadow: 1px 1px 5px 1px #cccccc; + border-radius: calc(var(--border-radius) * 1.5); + box-shadow: 1px 1px 5px 1px #ccc; display: inline-block; margin-top: 4px; min-width: 12rem; diff --git a/packages/ui/src/assets/css/reset.css b/packages/ui/src/assets/css/reset.css index 91fbb9d39..0190f09aa 100644 --- a/packages/ui/src/assets/css/reset.css +++ b/packages/ui/src/assets/css/reset.css @@ -1,4 +1,5 @@ /* https://andy-bell.co.uk/a-modern-css-reset/ */ + /* Box sizing rules */ *, *::before, @@ -27,6 +28,10 @@ ol:not([role="list"]) { margin: 0; } +html { + font-size: 1rem; +} + /* Set core root defaults */ html:focus-within { scroll-behavior: smooth; @@ -40,7 +45,7 @@ body { "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Oxygen, Ubuntu; line-height: 1.5; min-height: 100vh; - text-rendering: optimizeSpeed; + text-rendering: optimizespeed; } /* A elements that don't have a class get default styles */ @@ -69,8 +74,8 @@ a[target="_blank"]::after { /* Make images easier to work with */ img, picture { - max-width: 100%; display: block; + max-width: 100%; } /* Inherit fonts for inputs and buttons */ @@ -92,11 +97,7 @@ select { *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; scroll-behavior: auto !important; + transition-duration: 0.01ms !important; } } - -html { - font-size: 1rem; -} diff --git a/packages/ui/src/assets/css/social-button.css b/packages/ui/src/assets/css/social-button.css index 9d15c3be2..b7d9304af 100644 --- a/packages/ui/src/assets/css/social-button.css +++ b/packages/ui/src/assets/css/social-button.css @@ -1,7 +1,7 @@ .facebook.dark { background-color: #1877F2 !important; border: none; - color: #ffffff !important; + color: #fff !important; padding: 6px 8px; width: 100%; } @@ -14,7 +14,7 @@ } .google.dark { - background-color: #FFFFFF !important; + background-color: #FFF !important; border: 1px solid #747775; color: #1F1F1F !important; width: 100%; diff --git a/packages/ui/src/assets/css/sortable.css b/packages/ui/src/assets/css/sortable.css index 316af1e57..07939bcdd 100644 --- a/packages/ui/src/assets/css/sortable.css +++ b/packages/ui/src/assets/css/sortable.css @@ -12,28 +12,28 @@ } .dz-sortable-list > li { + align-items: center; background-color: var(--sortable-item-bg-color); display: flex; + flex-wrap: wrap; justify-content: flex-start; - align-items: center; transition: all 0.2s ease-in-out; - flex-wrap: wrap; } .dz-sortable-list > li .grab-icon { - cursor: grab; color: var(--sortable-item-grab-icon-color); + cursor: grab; font-size: 0.6rem; } .dz-sortable-list > li > div { - padding: 0.5rem; + align-items: center; border-left: 1px solid var(--sortable-item-border-color); - margin: 2px 0; display: flex; - justify-content: center; - align-items: center; gap: 0.5rem; + justify-content: center; + margin: 2px 0; + padding: 0.5rem; } .dz-sortable-list > li:hover { diff --git a/packages/ui/src/assets/css/sso-button.css b/packages/ui/src/assets/css/sso-button.css index 4a3e22629..dda642c42 100644 --- a/packages/ui/src/assets/css/sso-button.css +++ b/packages/ui/src/assets/css/sso-button.css @@ -1,11 +1,15 @@ .sso-button { + align-items: center; background-image: none; - border-radius: 6px; border: 1px solid #dadce0; + border-radius: 6px; box-sizing: border-box; color: #3c4043; cursor: pointer; - font-family: "Roboto", sans-serif; + display: flex; + flex: 1; + flex-direction: row; + font-family: Roboto, sans-serif; font-size: 14px; height: 40px; letter-spacing: 0.25px; @@ -16,12 +20,8 @@ text-align: center; transition: all 0.218s ease-in-out; vertical-align: middle; - width: 100%; white-space: nowrap; - display: flex; - flex-direction: row; - align-items: center; - flex: 1; + width: 100%; } .sso-button.light.center { @@ -31,15 +31,15 @@ .sso-button.dark:hover, .sso-button.dark:focus, .sso-button.dark:active { - box-shadow: none; border-color: #d2e3fc; + box-shadow: none; opacity: 0.9; } .sso-button.light:active, .sso-button.light:focus, .sso-button.light:hover { - background-color: rgba(66, 133, 244, 0.04); + background-color: rgb(66 133 244 / 4%); } .sso-button.pill { @@ -47,13 +47,13 @@ } .sso-button > img { - border-top-left-radius: 3px; + align-items: center; + background-color: #fff; border-bottom-left-radius: 3px; + border-top-left-radius: 3px; display: flex; - justify-content: center; - align-items: center; - background-color: #ffffff; height: 36px; + justify-content: center; min-width: 36px; width: 36px; } diff --git a/packages/ui/src/assets/css/stepper.css b/packages/ui/src/assets/css/stepper.css index a7d33c099..0d2bcccc8 100644 --- a/packages/ui/src/assets/css/stepper.css +++ b/packages/ui/src/assets/css/stepper.css @@ -2,10 +2,10 @@ --stepper-active-color: var(--dz-primary-color); --stepper-completed-border-color: var(--dz-primary-color); --stepper-line-border-color: var(--border-color, #e5e7eb); - --stepper-number-color: #ffffff; + --stepper-number-color: #fff; --stepper-number-border-color: var(--border-color, #e5e7eb); --stepper-label-color: #6b7280; - --stepper-label-active-color: #000000; + --stepper-label-active-color: #000; } .stepper { @@ -15,10 +15,10 @@ } .stepper .actions { - margin-top: 2rem; display: flex; - justify-content: flex-start; gap: 1rem; + justify-content: flex-start; + margin-top: 2rem; position: relative; } @@ -27,10 +27,26 @@ padding-block: 2rem; } +.steps { + display: flex; + justify-content: space-between; + list-style: none; + padding: 0; +} + .stepper.vertical > .steps { flex-direction: column; } +.steps > .step { + align-items: center; + display: flex; + flex: 1; + flex-direction: column; + min-height: 7rem; + position: relative; +} + .stepper.vertical > .steps > .step { flex-direction: row; gap: 1rem; @@ -40,20 +56,20 @@ flex: unset; } -.steps { +.steps > .step .step-label { + align-items: center; + color: var(--stepper-label-color); display: flex; - justify-content: space-between; - list-style: none; - padding: 0; + margin-top: 0.5rem; + overflow-wrap: break-word; + text-align: center; + transition: all 0.4s ease; } -.steps > .step { +.steps > .step .step-content-wrapper { + align-items: center; display: flex; - min-height: 7rem; flex-direction: column; - flex: 1; - align-items: center; - position: relative; } .stepper.start .steps > .step, @@ -99,25 +115,9 @@ display: flex; height: 3rem; justify-content: center; - transition: all 0.4s ease; min-width: 3rem; - z-index: 1; -} - -.steps > .step .step-content-wrapper { - align-items: center; - display: flex; - flex-direction: column; -} - -.steps > .step .step-label { - color: var(--stepper-label-color); - display: flex; - align-items: center; - margin-top: 0.5rem; - word-break: break-word; - text-align: center; transition: all 0.4s ease; + z-index: 1; } .steps > .step > .step-number:hover, @@ -149,34 +149,37 @@ border-top: 1px dashed var(--stepper-line-border-color); } -.stepper.horizontal.center .steps > .step:first-child::before { - left: 50%; +.steps > .step:only-child::before { + display: none; } .stepper.vertical > .steps > .step::before { border: 0; border-left: 1px solid var(--stepper-line-border-color); - left: 1.5rem; - top: unset; bottom: 0; height: 100%; + left: 1.5rem; + top: unset; +} + +.stepper.start .steps > .step:last-child::before, +.stepper.end .steps > .step:first-child::before { + display: none; } .stepper.center .steps > .step:last-child::before { left: -50%; } -.stepper.start .steps > .step:last-child::before, -.stepper.end .steps > .step:first-child::before, -.steps > .step:only-child::before { - display: none; +.stepper.horizontal.center .steps > .step:first-child::before { + left: 50%; } -@media screen and (max-width: 576px) { +@media screen and (width <= 576px) { .steps > .step > .step-number { + font-size: 0.8rem; height: 2rem; min-width: 2rem; - font-size: 0.8rem; } .steps > .step > .step-number > i { @@ -187,11 +190,11 @@ font-size: 0.8rem; } - .stepper.vertical>.steps>.step:before { - left: 1rem; - } - .steps > .step::before { top: 15%; } + + .stepper.vertical>.steps>.step::before { + left: 1rem; + } } diff --git a/packages/ui/src/assets/css/submenu.css b/packages/ui/src/assets/css/submenu.css index 68f26faec..7fdca917e 100644 --- a/packages/ui/src/assets/css/submenu.css +++ b/packages/ui/src/assets/css/submenu.css @@ -1,44 +1,45 @@ -.sidebar[aria-expanded="false"] > .dz-responsive-menu > ul > li > .dz-submenu { - display: none; -} - -.dz-responsive-menu > ul > li[aria-expanded="true"] > .dz-submenu { - display: flex; -} - .dz-submenu { + animation: submenu-open var(--transition-duration); display: none; flex-direction: column; padding-left: 3rem; - animation: submenu-open var(--transition-duration); } .dz-submenu:hover { background: none !important; } +.dz-responsive-menu > ul > li[aria-expanded="true"] > .dz-submenu { + display: flex; +} + +.sidebar[aria-expanded="false"] > .dz-responsive-menu > ul > li > .dz-submenu { + display: none; +} + @keyframes submenu-open { from { transform: translateY(-0.6rem); } + to { transform: translateY(0); } } .dz-submenu > li > a { - display: block; - width: 100%; - text-decoration: none; - color: inherit; background: none !important; + color: inherit; + display: block; padding: 0.5rem; + text-decoration: none; + width: 100%; } .dz-submenu > li > a > span[role="label"], .dz-submenu > li > a > span[role="icon"] > i { - transition: all var(--transition-duration) ease; padding: 0 !important; + transition: all var(--transition-duration) ease; } .dz-submenu > li > a.active, diff --git a/packages/ui/src/assets/css/tab-theme.css b/packages/ui/src/assets/css/tab-theme.css index 346828fa2..bb1999465 100644 --- a/packages/ui/src/assets/css/tab-theme.css +++ b/packages/ui/src/assets/css/tab-theme.css @@ -4,8 +4,8 @@ } .tabbed-panel > div[role="tabpanel"] { - width: 100%; padding: 1.5rem 0.25rem; + width: 100%; } .tabbed-panel > div > button { @@ -17,13 +17,13 @@ display: flex; outline: 0; padding: var(--tab-padding, 1rem); - width: 100%; transition: border-color 200ms ease; + width: 100%; } .tabbed-panel > div > button:focus-visible { - outline-offset: -1px; outline: 1px solid var(--dz-primary-color); + outline-offset: -1px; } .tabbed-panel > div > button span { diff --git a/packages/ui/src/assets/css/tab-view.css b/packages/ui/src/assets/css/tab-view.css index a96007e80..20ee3b07a 100644 --- a/packages/ui/src/assets/css/tab-view.css +++ b/packages/ui/src/assets/css/tab-view.css @@ -1,20 +1,20 @@ -.tabbed-panel > div[role=tablist] > button { +.tabbed-panel > div[role="tablist"] > button { align-items: center; display: flex; gap: 1rem; max-width: 250px; } -.tabbed-panel > div[role=tablist] > button span { - text-wrap: nowrap; - text-overflow: ellipsis; +.tabbed-panel > div[role="tablist"] > button span { overflow: hidden; + text-overflow: ellipsis; + text-wrap: nowrap; } -.tabbed-panel > div[role=tablist] > button i { +.tabbed-panel > div[role="tablist"] > button i { color: var(--dz-secondary-color); - font-weight: 500; font-size: 14px; + font-weight: 500; } .tabbed-panel > div > button.active i { diff --git a/packages/ui/src/assets/css/table.css b/packages/ui/src/assets/css/table.css index b95d274c5..3ce6d1a91 100644 --- a/packages/ui/src/assets/css/table.css +++ b/packages/ui/src/assets/css/table.css @@ -6,7 +6,7 @@ --table-column-padding: 0.75rem; --table-header-footer-bg: transparent; --table-header-highlight-bg: transparent; - --table-loading-overlay-bg: rgba(255, 255, 255, 0.6); + --table-loading-overlay-bg: rgb(255 255 255 / 60%); --table-row-hover-bg: var(--hover-bg); --table-row-selected-bg: var(--highlight-bg); --table-stripe-color: transparent; @@ -15,16 +15,16 @@ .table-container { display: flex; flex-direction: column; - width: 100%; position: relative; + width: 100%; } .table-container > span { + font-size: 1rem; font-weight: 500; - text-align: center; - padding: 0.2rem 0; margin: 0; - font-size: 1rem; + padding: 0.2rem 0; + text-align: center; } .table-container > span[data-align="left"] { @@ -36,21 +36,18 @@ } .table-container .loading-overlay { + background: var(--table-loading-overlay-bg); + inset: 0; position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; z-index: 1; - background: var(--table-loading-overlay-bg); } .table-container .toolbar { align-items: center; background: var(--table-header-footer-bg); + border-bottom: none; display: flex; - flex-direction: row; - flex-wrap: wrap; + flex-flow: row wrap; gap: 1rem; justify-content: flex-end; padding: var(--table-column-padding); @@ -58,21 +55,22 @@ } .table-container .table-wrapper { - width: 100%; overflow-x: auto; + width: 100%; } .table-container .table-wrapper > table { - min-width: 100%; border-collapse: collapse; + min-width: 100%; } .table-container .table-wrapper > table > tbody { background: var(--table-body-bg); } -.table-container .table-wrapper > table > tfoot > tr { - background: var(--table-header-footer-bg, transparent); +.table-container .table-wrapper > table tr > th { + font-weight: 500; + text-align: left; } .table-container .toolbar, @@ -84,18 +82,19 @@ border: var(--table-border); } +.table-container .table-wrapper > table > tfoot > tr { + background: var(--table-header-footer-bg, transparent); +} + .table-container .pagination { background: var(--table-header-footer-bg); border-top: none; } -.table-container .toolbar { - border-bottom: none; -} - .table-container .table-wrapper > table > tbody > tr > td, .table-container .table-wrapper > table > thead > tr > th { overflow: hidden; + padding: var(--table-column-padding); } .table-container .table-wrapper > table > thead > tr > th.filter.multiselect, @@ -107,19 +106,14 @@ margin: auto; } -.table-container .table-wrapper > table tr > th { - text-align: left; - font-weight: 500; -} - .table-container .table-wrapper > table tr > td[data-align="center"], .table-container .table-wrapper > table tr > th[data-align="center"] { text-align: center; } .table-container .table-wrapper > table tr > td[data-align="right"] { - text-align: right; padding-right: 2rem; + text-align: right; } .table-container .table-wrapper > table tr > th[data-align="right"] { @@ -144,10 +138,6 @@ background: var(--table-header-highlight-bg); } -.table-container .table-wrapper > table > tbody > tr:nth-child(even) { - background: var(--table-stripe-color); -} - .table-container .table-wrapper > table > tbody > tr[data-selected="true"] { background: var(--table-row-selected-bg) !important; } @@ -162,16 +152,20 @@ transition: background var(--transition-duration) ease; } +.table-container .table-wrapper > table > tbody > tr:nth-child(even) { + background: var(--table-stripe-color); +} + .table-wrapper > table .header-row { background: var(--table-header-footer-bg); font-size: 1rem; } .table-wrapper > table tr.filters > th > div > input { - width: 100%; - min-width: 7rem; + background: #fff; font-weight: normal; - background: #ffffff; + min-width: 7rem; + width: 100%; } .table-wrapper @@ -188,7 +182,7 @@ > div > .select > .label-container { - background: #ffffff; + background: #fff; font-weight: normal; } @@ -201,26 +195,21 @@ min-width: 80px; } +.table-container .pagination .page-input-control input { + background: #fff; +} + .table-wrapper > table tr.filters > th > .number-range-filter .field input { - background: #ffffff; + background: #fff; font-weight: normal; width: 100%; } -.table-container .table-wrapper > table > tbody > tr > td, -.table-container .table-wrapper > table > thead > tr > th { - padding: var(--table-column-padding); -} - .table-container .table-wrapper > table > thead > tr > th.column-actions, .table-container .table-wrapper > table > thead > tr > th.column-select { - width: var(--table-actions-column-width); max-width: var(--table-actions-column-width); min-width: var(--table-actions-column-width); -} - -.table-container .pagination .page-input-control input { - background: #ffffff; + width: var(--table-actions-column-width); } .table-container diff --git a/packages/ui/src/assets/css/tabs.css b/packages/ui/src/assets/css/tabs.css index 282d24fc2..61db41709 100644 --- a/packages/ui/src/assets/css/tabs.css +++ b/packages/ui/src/assets/css/tabs.css @@ -1,7 +1,8 @@ .tabbed-panel { --_tab-border: var(--tab-border, 1px solid #ddd); - --_tab-active-border: var(--tab-active-border, 1px solid #000000); - --_tab-hover-border: var(--tab-hover-border, 1px solid #000000); + --_tab-active-border: var(--tab-active-border, 1px solid #000); + --_tab-hover-border: var(--tab-hover-border, 1px solid #000); + display: flex; flex-direction: column; overflow: hidden; @@ -44,6 +45,7 @@ } .tabbed-panel.left > div[role="tablist"] { + align-items: flex-start; border-right: var(--_tab-border); margin-right: 1rem; } @@ -56,10 +58,6 @@ width: max-content; } -.tabbed-panel.left > div[role="tablist"] { - align-items: flex-start; -} - .tabbed-panel.left > div[role="tablist"] > button, .tabbed-panel.right > div[role="tablist"] > button { width: 100%; diff --git a/packages/ui/src/assets/css/tooltip.css b/packages/ui/src/assets/css/tooltip.css index 4d7b81c47..88a902c89 100644 --- a/packages/ui/src/assets/css/tooltip.css +++ b/packages/ui/src/assets/css/tooltip.css @@ -7,9 +7,9 @@ background-color: var(--tooltip-bg-color); border-radius: 0.25rem; color: var(--tooltip-color); + max-width: 20rem; padding: 0.25rem; position: absolute; - max-width: 20rem; z-index: 1100; } @@ -20,8 +20,8 @@ content: ""; left: 50%; position: absolute; - transform: translateX(-50%); top: 100%; + transform: translateX(-50%); } .tooltip-container.left::after { @@ -53,6 +53,6 @@ content: ""; position: absolute; right:100%; - transform: translateY(-50%); top: 50%; + transform: translateY(-50%); } diff --git a/packages/ui/src/assets/css/vars.css b/packages/ui/src/assets/css/vars.css index 571616afc..7e2ca1446 100644 --- a/packages/ui/src/assets/css/vars.css +++ b/packages/ui/src/assets/css/vars.css @@ -1,7 +1,6 @@ :root { --border-color: #e5e7eb; --border-radius: 0.375rem; - --button-border-radius: 0.375rem; --button-primary-color: var(--dz-primary-color); --button-secondary-color: var(--dz-secondary-color); @@ -13,18 +12,14 @@ --button-medium-padding: 0.75rem 1.25rem; --button-large-padding: 0.875rem 1.75rem; --button-transition-duration: var(--transition-duration, 150ms); - --color: #2c2c2c; - --data-caption-color: var(--color); --data-stat-padding-block: 0.5rem; --data-stat-padding-inline: 0.75rem; --data-stat-min-width: 13rem; - --dropdown-bg-hover: var(--hover-bg); --dropdown-trigger-bg-hover: var(--hover-bg); --dropdown-trigger-bg: var(--highlight-bg); - --dz-primary-color: #2563eb; --dz-secondary-color: #475569; --dz-alternate-color: #0284c7; @@ -32,7 +27,6 @@ --dz-success-color: #22c55e; --dz-warning-color: #ea580c; --dz-tip-color: #b6af10; - --dz-nav-item-active-bg: var(--highlight-bg); --dz-nav-item-active-color: var(--dz-primary-color); --dz-nav-item-border-radius: 0; @@ -45,44 +39,35 @@ --dz-nav-menu-padding-h: 0; --dz-nav-menu-padding-v: 1rem; --dz-nav-menu-separator-color: var(--border-color); - --dz-page-gap: 1.5rem; --dz-page-centered-max-width: 954px; - --field-bg-color-disabled: #f8f8f8; --field-bg-color: transparent; --field-icon-color: #7b7676; --field-padding-block: 0.5rem; --field-padding-inline: 0.75rem; --field-placeholder-color: #7b7676; - --highlight-bg: #eff6ff; --hover-bg: var(--highlight-bg); - - --list-menu-bg-color: #ffffff; + --list-menu-bg-color: #fff; --list-item-bg-hover: var(--hover-bg); --list-item-bg-active: var(--highlight-bg); - --menu-border-color: var(--border-color); --menu-item-active-bg: var(--highlight-bg); --menu-item-active-color: #007aff; - --pagination-bg-color: transparent; --pagination-padding: 0.75rem; --pagination-gap: 0.5rem; - --submit-button-bg-color: var(--dz-primary-color); - --table-actions-column-width: 4rem; --table-body-bg: transparent; --table-border: 1px solid var(--border-color); --table-column-padding: 0.75rem; --table-header-footer-bg: transparent; --table-header-highlight-bg: transparent; - --table-loading-overlay-bg: rgba(255, 255, 255, 0.6); + --table-loading-overlay-bg: rgb(255 255 255 / 60%); --table-row-hover-bg: var(--hover-bg); --table-row-selected-bg: var(var(--highlight-bg)); --table-stripe-color: transparent; - --transition-duration: 150ms; } diff --git a/packages/ui/stylelint.config.js b/packages/ui/stylelint.config.js new file mode 100644 index 000000000..7736fdf3a --- /dev/null +++ b/packages/ui/stylelint.config.js @@ -0,0 +1,3 @@ +import stylelintConfig from "@prefabs.tech/eslint-config/stylelint.js"; + +export default stylelintConfig; diff --git a/packages/user/package.json b/packages/user/package.json index 9f3f94eaa..9f74fbb6c 100644 --- a/packages/user/package.json +++ b/packages/user/package.json @@ -23,6 +23,8 @@ "lint:fix": "eslint . --fix", "snapshot:update": "vitest --environment jsdom run --update --passWithNoTests", "sort-package": "npx sort-package-json", + "stylelint": "stylelint \"src/**/*.{css,vue}\" --allow-empty-input", + "stylelint:fix": "stylelint \"src/**/*.{css,vue}\" --fix --allow-empty-input", "test": "pnpm build && vitest --environment jsdom run --coverage", "test:component": "vitest --environment jsdom run component/", "test:snapshot": "vitest --environment jsdom run snapshot/", @@ -59,6 +61,9 @@ "react-dom": "18.3.1", "react-router-dom": "6.28.2", "react-toastify": "10.0.6", + "stylelint": "17.9.1", + "stylelint-config-standard": "40.0.0", + "stylelint-order": "8.1.1", "typescript": "5.9.3", "vite": "7.3.2", "vitest": "3.0.9" diff --git a/packages/user/src/assets/css/index.css b/packages/user/src/assets/css/index.css index 2386dd22f..43448ce0d 100644 --- a/packages/user/src/assets/css/index.css +++ b/packages/user/src/assets/css/index.css @@ -1,8 +1,8 @@ -@import "./forgot-password.css"; -@import "./invitation.css"; -@import "./invitations-table.css"; -@import "./login.css"; -@import "./profile.css"; -@import "./signup.css"; -@import "./users-table.css"; -@import "./verify-email.css"; +@import url("./forgot-password.css"); +@import url("./invitation.css"); +@import url("./invitations-table.css"); +@import url("./login.css"); +@import url("./profile.css"); +@import url("./signup.css"); +@import url("./users-table.css"); +@import url("./verify-email.css"); diff --git a/packages/user/src/assets/css/invitations-table.css b/packages/user/src/assets/css/invitations-table.css index 24426f807..7683681e8 100644 --- a/packages/user/src/assets/css/invitations-table.css +++ b/packages/user/src/assets/css/invitations-table.css @@ -3,31 +3,31 @@ } .table-invitations .column-appId { - width: 10rem; max-width: 10rem; min-width: 10rem; + width: 10rem; } .table-invitations .column-role { - width: 10rem; max-width: 10rem; min-width: 10rem; + width: 10rem; } .table-invitations .column-invitedBy { - width: 15rem; max-width: 15rem; min-width: 15rem; + width: 15rem; } .table-invitations .column-expiresAt { - width: 12rem; max-width: 12rem; min-width: 12rem; + width: 12rem; } .table-invitations .column-status { - width: 10rem; max-width: 10rem; min-width: 10rem; + width: 10rem; } diff --git a/packages/user/src/assets/css/profile.css b/packages/user/src/assets/css/profile.css index 39f2a4cd4..48692bc40 100644 --- a/packages/user/src/assets/css/profile.css +++ b/packages/user/src/assets/css/profile.css @@ -14,23 +14,15 @@ .profile .account-info .data.update-email .value { align-items: center; display: flex; - gap: 0.45rem; - margin-bottom: 0.5rem; flex-wrap: wrap; -} - -.profile .account-info .data.update-email { - gap: 0.75rem; + gap: 0.45rem; + margin-bottom: 0; } .profile .account-info .data.update-email { gap: 0.15rem; } -.profile .account-info .data.update-email .value { - margin-bottom: 0; -} - .profile .tabbed-panel h2 { font-weight: 500; margin-bottom: 1rem; diff --git a/packages/user/src/assets/css/signup.css b/packages/user/src/assets/css/signup.css index 582262a81..89f6613fa 100644 --- a/packages/user/src/assets/css/signup.css +++ b/packages/user/src/assets/css/signup.css @@ -1,5 +1,5 @@ .signup .terms-and-conditions { - font-size: 12px; color: #525252; + font-size: 12px; line-height: 1.35; } diff --git a/packages/user/src/assets/css/users-table.css b/packages/user/src/assets/css/users-table.css index 1d3eb89e0..89a3a0e62 100644 --- a/packages/user/src/assets/css/users-table.css +++ b/packages/user/src/assets/css/users-table.css @@ -3,25 +3,25 @@ } .table-users .column-name { + max-width: 15rem; min-width: 15rem; width: 15rem; - max-width: 15rem; } .table-users .column-roles { - width: 12rem; max-width: 12rem; min-width: 12rem; + width: 12rem; } .table-users .column-signedUpAt { - width: 12rem; max-width: 12rem; min-width: 12rem; + width: 12rem; } .table-users .column-disabled { - width: 13rem; max-width: 13rem; min-width: 13rem; + width: 13rem; } diff --git a/packages/user/src/assets/css/verify-email.css b/packages/user/src/assets/css/verify-email.css index cd251386f..21cb439bb 100644 --- a/packages/user/src/assets/css/verify-email.css +++ b/packages/user/src/assets/css/verify-email.css @@ -17,8 +17,8 @@ text-decoration: underline; } -.email-verification[data-centered=true] { +.email-verification[data-centered="true"] { align-items: flex-start; - max-width: var(--dz-page-max-width); margin: auto; + max-width: var(--dz-page-max-width); } diff --git a/packages/user/stylelint.config.js b/packages/user/stylelint.config.js new file mode 100644 index 000000000..7736fdf3a --- /dev/null +++ b/packages/user/stylelint.config.js @@ -0,0 +1,3 @@ +import stylelintConfig from "@prefabs.tech/eslint-config/stylelint.js"; + +export default stylelintConfig; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 10ed80524..150931454 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -98,7 +98,7 @@ importers: version: 7.25.9(@babel/core@7.26.10) '@prefabs.tech/eslint-config': specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config - version: https://codeload.github.com/prefabs-tech/tools/tar.gz/a09d813098f0ed301eb3a98db6bdb6306d457a2c#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) + version: https://codeload.github.com/prefabs-tech/tools/tar.gz/930931f25a48eb2d4e40225775a2220c137ec7ae#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) '@testing-library/react': specifier: 16.3.2 version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -129,6 +129,15 @@ importers: prettier: specifier: 3.8.3 version: 3.8.3 + stylelint: + specifier: 17.9.1 + version: 17.9.1(typescript@5.9.3) + stylelint-config-standard: + specifier: 40.0.0 + version: 40.0.0(stylelint@17.9.1(typescript@5.9.3)) + stylelint-order: + specifier: 8.1.1 + version: 8.1.1(stylelint@17.9.1(typescript@5.9.3)) typescript: specifier: 5.9.3 version: 5.9.3 @@ -149,7 +158,7 @@ importers: devDependencies: '@prefabs.tech/eslint-config': specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config - version: https://codeload.github.com/prefabs-tech/tools/tar.gz/a09d813098f0ed301eb3a98db6bdb6306d457a2c#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) + version: https://codeload.github.com/prefabs-tech/tools/tar.gz/930931f25a48eb2d4e40225775a2220c137ec7ae#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) '@prefabs.tech/tsconfig': specifier: 0.6.0 version: 0.6.0 @@ -180,6 +189,15 @@ importers: react: specifier: 18.3.1 version: 18.3.1 + stylelint: + specifier: 17.9.1 + version: 17.9.1(typescript@5.9.3) + stylelint-config-standard: + specifier: 40.0.0 + version: 40.0.0(stylelint@17.9.1(typescript@5.9.3)) + stylelint-order: + specifier: 8.1.1 + version: 8.1.1(stylelint@17.9.1(typescript@5.9.3)) typescript: specifier: 5.9.3 version: 5.9.3 @@ -216,7 +234,7 @@ importers: devDependencies: '@prefabs.tech/eslint-config': specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config - version: https://codeload.github.com/prefabs-tech/tools/tar.gz/a09d813098f0ed301eb3a98db6bdb6306d457a2c#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) + version: https://codeload.github.com/prefabs-tech/tools/tar.gz/930931f25a48eb2d4e40225775a2220c137ec7ae#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) '@prefabs.tech/react-ui': specifier: 0.72.1 version: link:../ui @@ -265,6 +283,15 @@ importers: react-dom: specifier: 18.3.1 version: 18.3.1(react@18.3.1) + stylelint: + specifier: 17.9.1 + version: 17.9.1(typescript@5.9.3) + stylelint-config-standard: + specifier: 40.0.0 + version: 40.0.0(stylelint@17.9.1(typescript@5.9.3)) + stylelint-order: + specifier: 8.1.1 + version: 8.1.1(stylelint@17.9.1(typescript@5.9.3)) typescript: specifier: 5.9.3 version: 5.9.3 @@ -298,7 +325,7 @@ importers: devDependencies: '@prefabs.tech/eslint-config': specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config - version: https://codeload.github.com/prefabs-tech/tools/tar.gz/a09d813098f0ed301eb3a98db6bdb6306d457a2c#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) + version: https://codeload.github.com/prefabs-tech/tools/tar.gz/930931f25a48eb2d4e40225775a2220c137ec7ae#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) '@prefabs.tech/react-config': specifier: 0.72.1 version: link:../config @@ -338,6 +365,15 @@ importers: react-dom: specifier: 18.3.1 version: 18.3.1(react@18.3.1) + stylelint: + specifier: 17.9.1 + version: 17.9.1(typescript@5.9.3) + stylelint-config-standard: + specifier: 40.0.0 + version: 40.0.0(stylelint@17.9.1(typescript@5.9.3)) + stylelint-order: + specifier: 8.1.1 + version: 8.1.1(stylelint@17.9.1(typescript@5.9.3)) typescript: specifier: 5.9.3 version: 5.9.3 @@ -352,7 +388,7 @@ importers: devDependencies: '@prefabs.tech/eslint-config': specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config - version: https://codeload.github.com/prefabs-tech/tools/tar.gz/a09d813098f0ed301eb3a98db6bdb6306d457a2c#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) + version: https://codeload.github.com/prefabs-tech/tools/tar.gz/930931f25a48eb2d4e40225775a2220c137ec7ae#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) '@prefabs.tech/react-config': specifier: 0.72.1 version: link:../config @@ -407,6 +443,15 @@ importers: react-router-dom: specifier: 6.28.2 version: 6.28.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + stylelint: + specifier: 17.9.1 + version: 17.9.1(typescript@5.9.3) + stylelint-config-standard: + specifier: 40.0.0 + version: 40.0.0(stylelint@17.9.1(typescript@5.9.3)) + stylelint-order: + specifier: 8.1.1 + version: 8.1.1(stylelint@17.9.1(typescript@5.9.3)) typescript: specifier: 5.9.3 version: 5.9.3 @@ -443,7 +488,7 @@ importers: version: 3.4.5 '@prefabs.tech/eslint-config': specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config - version: https://codeload.github.com/prefabs-tech/tools/tar.gz/a09d813098f0ed301eb3a98db6bdb6306d457a2c#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) + version: https://codeload.github.com/prefabs-tech/tools/tar.gz/930931f25a48eb2d4e40225775a2220c137ec7ae#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) '@prefabs.tech/tsconfig': specifier: 0.6.0 version: 0.6.0 @@ -495,6 +540,15 @@ importers: react-router-dom: specifier: 6.28.2 version: 6.28.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + stylelint: + specifier: 17.9.1 + version: 17.9.1(typescript@5.9.3) + stylelint-config-standard: + specifier: 40.0.0 + version: 40.0.0(stylelint@17.9.1(typescript@5.9.3)) + stylelint-order: + specifier: 8.1.1 + version: 8.1.1(stylelint@17.9.1(typescript@5.9.3)) typescript: specifier: 5.9.3 version: 5.9.3 @@ -516,7 +570,7 @@ importers: devDependencies: '@prefabs.tech/eslint-config': specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config - version: https://codeload.github.com/prefabs-tech/tools/tar.gz/a09d813098f0ed301eb3a98db6bdb6306d457a2c#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) + version: https://codeload.github.com/prefabs-tech/tools/tar.gz/930931f25a48eb2d4e40225775a2220c137ec7ae#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) '@prefabs.tech/react-form': specifier: 0.72.1 version: link:../form @@ -586,6 +640,15 @@ importers: react-toastify: specifier: 10.0.6 version: 10.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + stylelint: + specifier: 17.9.1 + version: 17.9.1(typescript@5.9.3) + stylelint-config-standard: + specifier: 40.0.0 + version: 40.0.0(stylelint@17.9.1(typescript@5.9.3)) + stylelint-order: + specifier: 8.1.1 + version: 8.1.1(stylelint@17.9.1(typescript@5.9.3)) typescript: specifier: 5.9.3 version: 5.9.3 @@ -1479,19 +1542,22 @@ packages: '@popperjs/core@2.11.8': resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} - '@prefabs.tech/eslint-config@https://codeload.github.com/prefabs-tech/tools/tar.gz/a09d813098f0ed301eb3a98db6bdb6306d457a2c#path:packages/eslint-config': - resolution: {path: packages/eslint-config, tarball: https://codeload.github.com/prefabs-tech/tools/tar.gz/a09d813098f0ed301eb3a98db6bdb6306d457a2c} + '@prefabs.tech/eslint-config@https://codeload.github.com/prefabs-tech/tools/tar.gz/930931f25a48eb2d4e40225775a2220c137ec7ae#path:packages/eslint-config': + resolution: {path: packages/eslint-config, tarball: https://codeload.github.com/prefabs-tech/tools/tar.gz/930931f25a48eb2d4e40225775a2220c137ec7ae} version: 0.6.0 peerDependencies: eslint: '>=9.0.0' prettier: '>=3.3.3' stylelint: '>=17.0.0' stylelint-config-recommended-vue: '>=1.6.0' + stylelint-config-standard: '>=40.0.0' stylelint-order: '>=8.0.0' typescript: '>=4.9.5' peerDependenciesMeta: stylelint-config-recommended-vue: optional: true + stylelint-config-standard: + optional: true stylelint-order: optional: true @@ -4253,6 +4319,11 @@ packages: resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==} engines: {node: '>=4'} + postcss-sorting@10.0.0: + resolution: {integrity: sha512-TXbU+h6vVRW+86c/+ewhWq9k7pr7ijASTnepVhCQiC87zAOTkvB1v2dHyWP+ggstSTX/PNvjzS+IOqzejndz9w==} + peerDependencies: + postcss: ^8.4.20 + postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} @@ -4840,13 +4911,6 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} - stylelint-config-prettier@9.0.5: - resolution: {integrity: sha512-U44lELgLZhbAD/xy/vncZ2Pq8sh2TnpiPvo38Ifg9+zeioR+LAkHu0i6YORIOxFafZoVg0xqQwex6e6F25S5XA==} - engines: {node: '>= 12'} - hasBin: true - peerDependencies: - stylelint: '>= 11.x < 15' - stylelint-config-recommended@18.0.0: resolution: {integrity: sha512-mxgT2XY6YZ3HWWe3Di8umG6aBmWmHTblTgu/f10rqFXnyWxjKWwNdjSWkgkwCtxIKnqjSJzvFmPT5yabVIRxZg==} engines: {node: '>=20.19.0'} @@ -4859,6 +4923,12 @@ packages: peerDependencies: stylelint: ^17.0.0 + stylelint-order@8.1.1: + resolution: {integrity: sha512-LqsEB6VggJuu5v10RtkrQsBObcdwBE7GuAOlwfc/LR3VL/w8UqKX2BOLIjhyGt0Gne/njo7gRNGiJAKhfmPMNw==} + engines: {node: '>=20.19.0'} + peerDependencies: + stylelint: ^16.18.0 || ^17.0.0 + stylelint@17.9.1: resolution: {integrity: sha512-THTmnAPJTrg/JhkTWZlSyrO+HUYMx6ELthIHeMyD2WOKqXIJUFQv2Yxn91bvUrZdbBJaW2dUuQdPST2wcQ6C3g==} engines: {node: '>=20.19.0'} @@ -5007,12 +5077,6 @@ packages: resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==} engines: {node: '>=8'} - ts-api-utils@2.4.0: - resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==} - engines: {node: '>=18.12'} - peerDependencies: - typescript: '>=4.8.4' - ts-api-utils@2.5.0: resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==} engines: {node: '>=18.12'} @@ -6402,7 +6466,7 @@ snapshots: '@popperjs/core@2.11.8': {} - '@prefabs.tech/eslint-config@https://codeload.github.com/prefabs-tech/tools/tar.gz/a09d813098f0ed301eb3a98db6bdb6306d457a2c#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3)': + '@prefabs.tech/eslint-config@https://codeload.github.com/prefabs-tech/tools/tar.gz/930931f25a48eb2d4e40225775a2220c137ec7ae#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3)': dependencies: '@eslint/js': 9.39.4 eslint: 9.39.4(jiti@2.4.2) @@ -6422,11 +6486,12 @@ snapshots: globals: 17.3.0 prettier: 3.8.3 stylelint: 17.9.1(typescript@5.9.3) - stylelint-config-prettier: 9.0.5(stylelint@17.9.1(typescript@5.9.3)) - stylelint-config-standard: 40.0.0(stylelint@17.9.1(typescript@5.9.3)) typescript: 5.9.3 typescript-eslint: 8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3) vue-eslint-parser: 10.2.0(eslint@9.39.4(jiti@2.4.2)) + optionalDependencies: + stylelint-config-standard: 40.0.0(stylelint@17.9.1(typescript@5.9.3)) + stylelint-order: 8.1.1(stylelint@17.9.1(typescript@5.9.3)) transitivePeerDependencies: - '@stylistic/eslint-plugin' - '@types/eslint' @@ -6677,7 +6742,7 @@ snapshots: eslint: 9.39.4(jiti@2.4.2) ignore: 7.0.5 natural-compare: 1.4.0 - ts-api-utils: 2.4.0(typescript@5.9.3) + ts-api-utils: 2.5.0(typescript@5.9.3) typescript: 5.9.3 transitivePeerDependencies: - supports-color @@ -6696,8 +6761,8 @@ snapshots: '@typescript-eslint/project-service@8.54.0(typescript@5.9.3)': dependencies: - '@typescript-eslint/tsconfig-utils': 8.54.0(typescript@5.9.3) - '@typescript-eslint/types': 8.54.0 + '@typescript-eslint/tsconfig-utils': 8.59.1(typescript@5.9.3) + '@typescript-eslint/types': 8.59.1 debug: 4.4.3 typescript: 5.9.3 transitivePeerDependencies: @@ -6737,7 +6802,7 @@ snapshots: '@typescript-eslint/utils': 8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3) debug: 4.4.3 eslint: 9.39.4(jiti@2.4.2) - ts-api-utils: 2.4.0(typescript@5.9.3) + ts-api-utils: 2.5.0(typescript@5.9.3) typescript: 5.9.3 transitivePeerDependencies: - supports-color @@ -6756,7 +6821,7 @@ snapshots: minimatch: 9.0.5 semver: 7.7.3 tinyglobby: 0.2.15 - ts-api-utils: 2.4.0(typescript@5.9.3) + ts-api-utils: 2.5.0(typescript@5.9.3) typescript: 5.9.3 transitivePeerDependencies: - supports-color @@ -7935,7 +8000,7 @@ snapshots: eslint-plugin-n@17.20.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3): dependencies: '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.4.2)) - '@typescript-eslint/utils': 8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3) + '@typescript-eslint/utils': 8.59.1(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3) enhanced-resolve: 5.17.1 eslint: 9.39.4(jiti@2.4.2) eslint-plugin-es-x: 7.8.0(eslint@9.39.4(jiti@2.4.2)) @@ -9446,6 +9511,10 @@ snapshots: cssesc: 3.0.0 util-deprecate: 1.0.2 + postcss-sorting@10.0.0(postcss@8.5.12): + dependencies: + postcss: 8.5.12 + postcss-value-parser@4.2.0: {} postcss@8.5.12: @@ -10107,10 +10176,6 @@ snapshots: strip-json-comments@3.1.1: {} - stylelint-config-prettier@9.0.5(stylelint@17.9.1(typescript@5.9.3)): - dependencies: - stylelint: 17.9.1(typescript@5.9.3) - stylelint-config-recommended@18.0.0(stylelint@17.9.1(typescript@5.9.3)): dependencies: stylelint: 17.9.1(typescript@5.9.3) @@ -10120,6 +10185,12 @@ snapshots: stylelint: 17.9.1(typescript@5.9.3) stylelint-config-recommended: 18.0.0(stylelint@17.9.1(typescript@5.9.3)) + stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)): + dependencies: + postcss: 8.5.12 + postcss-sorting: 10.0.0(postcss@8.5.12) + stylelint: 17.9.1(typescript@5.9.3) + stylelint@17.9.1(typescript@5.9.3): dependencies: '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0) @@ -10295,10 +10366,6 @@ snapshots: trim-newlines@3.0.1: {} - ts-api-utils@2.4.0(typescript@5.9.3): - dependencies: - typescript: 5.9.3 - ts-api-utils@2.5.0(typescript@5.9.3): dependencies: typescript: 5.9.3 diff --git a/turbo.json b/turbo.json index 47d6dcd5e..7f7e6863a 100644 --- a/turbo.json +++ b/turbo.json @@ -33,6 +33,12 @@ "sort-package": { "outputs": [] }, + "stylelint": { + "outputs": [] + }, + "stylelint:fix": { + "outputs": [] + }, "test": { "outputs": [] }, From 51b2f561cf168f77036c7e0a4f655e9fe5856f50 Mon Sep 17 00:00:00 2001 From: kabin thakuri Date: Wed, 29 Apr 2026 14:48:21 +0545 Subject: [PATCH 2/2] chore(stylelint-config): add separate stylelint-config dependency and update stylelint configuration --- apps/demo/package.json | 1 + apps/demo/stylelint.config.js | 2 +- packages/config/package.json | 1 + packages/config/stylelint.config.js | 2 +- packages/form/package.json | 1 + packages/form/stylelint.config.js | 2 +- packages/i18n/package.json | 1 + packages/i18n/stylelint.config.js | 2 +- packages/layout/package.json | 1 + packages/layout/stylelint.config.js | 2 +- packages/ui/package.json | 1 + packages/ui/stylelint.config.js | 2 +- packages/user/package.json | 1 + packages/user/stylelint.config.js | 2 +- pnpm-lock.yaml | 44 +++++++++++++++++++++++++++++ 15 files changed, 58 insertions(+), 7 deletions(-) diff --git a/apps/demo/package.json b/apps/demo/package.json index 048b44866..db0d37363 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -43,6 +43,7 @@ "@babel/plugin-syntax-flow": "7.26.0", "@babel/plugin-transform-react-jsx": "^7.21.5", "@prefabs.tech/eslint-config": "git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config", + "@prefabs.tech/stylelint-config": "git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/stylelint-config", "@testing-library/react": "16.3.2", "@types/jsdom": "21.1.7", "@types/node": "25.3.5", diff --git a/apps/demo/stylelint.config.js b/apps/demo/stylelint.config.js index 7736fdf3a..832e143e4 100644 --- a/apps/demo/stylelint.config.js +++ b/apps/demo/stylelint.config.js @@ -1,3 +1,3 @@ -import stylelintConfig from "@prefabs.tech/eslint-config/stylelint.js"; +import stylelintConfig from "@prefabs.tech/stylelint-config/index.js"; export default stylelintConfig; diff --git a/packages/config/package.json b/packages/config/package.json index 6cff666af..fdf8cbc1f 100644 --- a/packages/config/package.json +++ b/packages/config/package.json @@ -34,6 +34,7 @@ }, "devDependencies": { "@prefabs.tech/eslint-config": "git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config", + "@prefabs.tech/stylelint-config": "git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/stylelint-config", "@prefabs.tech/tsconfig": "0.6.0", "@types/jsdom": "21.1.7", "@types/node": "25.3.5", diff --git a/packages/config/stylelint.config.js b/packages/config/stylelint.config.js index 7736fdf3a..832e143e4 100644 --- a/packages/config/stylelint.config.js +++ b/packages/config/stylelint.config.js @@ -1,3 +1,3 @@ -import stylelintConfig from "@prefabs.tech/eslint-config/stylelint.js"; +import stylelintConfig from "@prefabs.tech/stylelint-config/index.js"; export default stylelintConfig; diff --git a/packages/form/package.json b/packages/form/package.json index f167cb532..5cb8d6dda 100644 --- a/packages/form/package.json +++ b/packages/form/package.json @@ -43,6 +43,7 @@ }, "devDependencies": { "@prefabs.tech/eslint-config": "git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config", + "@prefabs.tech/stylelint-config": "git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/stylelint-config", "@prefabs.tech/react-ui": "0.72.1", "@prefabs.tech/tsconfig": "0.6.0", "@testing-library/react": "16.3.2", diff --git a/packages/form/stylelint.config.js b/packages/form/stylelint.config.js index 7736fdf3a..832e143e4 100644 --- a/packages/form/stylelint.config.js +++ b/packages/form/stylelint.config.js @@ -1,3 +1,3 @@ -import stylelintConfig from "@prefabs.tech/eslint-config/stylelint.js"; +import stylelintConfig from "@prefabs.tech/stylelint-config/index.js"; export default stylelintConfig; diff --git a/packages/i18n/package.json b/packages/i18n/package.json index 1c4370d1f..707ec3e4f 100644 --- a/packages/i18n/package.json +++ b/packages/i18n/package.json @@ -42,6 +42,7 @@ }, "devDependencies": { "@prefabs.tech/eslint-config": "git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config", + "@prefabs.tech/stylelint-config": "git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/stylelint-config", "@prefabs.tech/react-config": "0.72.1", "@prefabs.tech/tsconfig": "0.6.0", "@testing-library/react": "16.3.2", diff --git a/packages/i18n/stylelint.config.js b/packages/i18n/stylelint.config.js index 7736fdf3a..832e143e4 100644 --- a/packages/i18n/stylelint.config.js +++ b/packages/i18n/stylelint.config.js @@ -1,3 +1,3 @@ -import stylelintConfig from "@prefabs.tech/eslint-config/stylelint.js"; +import stylelintConfig from "@prefabs.tech/stylelint-config/index.js"; export default stylelintConfig; diff --git a/packages/layout/package.json b/packages/layout/package.json index 3cc4604d5..4e53993a3 100644 --- a/packages/layout/package.json +++ b/packages/layout/package.json @@ -34,6 +34,7 @@ }, "devDependencies": { "@prefabs.tech/eslint-config": "git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config", + "@prefabs.tech/stylelint-config": "git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/stylelint-config", "@prefabs.tech/react-config": "0.72.1", "@prefabs.tech/react-i18n": "0.72.1", "@prefabs.tech/react-ui": "0.72.1", diff --git a/packages/layout/stylelint.config.js b/packages/layout/stylelint.config.js index 7736fdf3a..832e143e4 100644 --- a/packages/layout/stylelint.config.js +++ b/packages/layout/stylelint.config.js @@ -1,3 +1,3 @@ -import stylelintConfig from "@prefabs.tech/eslint-config/stylelint.js"; +import stylelintConfig from "@prefabs.tech/stylelint-config/index.js"; export default stylelintConfig; diff --git a/packages/ui/package.json b/packages/ui/package.json index dfc6e2af9..6780c6921 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -44,6 +44,7 @@ "devDependencies": { "@dzangolab/flag-icon-css": "3.4.5", "@prefabs.tech/eslint-config": "git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config", + "@prefabs.tech/stylelint-config": "git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/stylelint-config", "@prefabs.tech/tsconfig": "0.6.0", "@testing-library/jest-dom": "6.6.4", "@testing-library/react": "16.3.2", diff --git a/packages/ui/stylelint.config.js b/packages/ui/stylelint.config.js index 7736fdf3a..832e143e4 100644 --- a/packages/ui/stylelint.config.js +++ b/packages/ui/stylelint.config.js @@ -1,3 +1,3 @@ -import stylelintConfig from "@prefabs.tech/eslint-config/stylelint.js"; +import stylelintConfig from "@prefabs.tech/stylelint-config/index.js"; export default stylelintConfig; diff --git a/packages/user/package.json b/packages/user/package.json index 9f74fbb6c..8eac8463d 100644 --- a/packages/user/package.json +++ b/packages/user/package.json @@ -38,6 +38,7 @@ }, "devDependencies": { "@prefabs.tech/eslint-config": "git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config", + "@prefabs.tech/stylelint-config": "git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/stylelint-config", "@prefabs.tech/react-form": "0.72.1", "@prefabs.tech/react-i18n": "0.72.1", "@prefabs.tech/react-layout": "0.72.1", diff --git a/packages/user/stylelint.config.js b/packages/user/stylelint.config.js index 7736fdf3a..832e143e4 100644 --- a/packages/user/stylelint.config.js +++ b/packages/user/stylelint.config.js @@ -1,3 +1,3 @@ -import stylelintConfig from "@prefabs.tech/eslint-config/stylelint.js"; +import stylelintConfig from "@prefabs.tech/stylelint-config/index.js"; export default stylelintConfig; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 150931454..b1b2300be 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -99,6 +99,9 @@ importers: '@prefabs.tech/eslint-config': specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config version: https://codeload.github.com/prefabs-tech/tools/tar.gz/930931f25a48eb2d4e40225775a2220c137ec7ae#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) + '@prefabs.tech/stylelint-config': + specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/stylelint-config + version: https://codeload.github.com/prefabs-tech/tools/tar.gz/de617fd82163608ff70b45050c9e539490cc29e1#path:packages/stylelint-config(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3)) '@testing-library/react': specifier: 16.3.2 version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -159,6 +162,9 @@ importers: '@prefabs.tech/eslint-config': specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config version: https://codeload.github.com/prefabs-tech/tools/tar.gz/930931f25a48eb2d4e40225775a2220c137ec7ae#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) + '@prefabs.tech/stylelint-config': + specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/stylelint-config + version: https://codeload.github.com/prefabs-tech/tools/tar.gz/de617fd82163608ff70b45050c9e539490cc29e1#path:packages/stylelint-config(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3)) '@prefabs.tech/tsconfig': specifier: 0.6.0 version: 0.6.0 @@ -238,6 +244,9 @@ importers: '@prefabs.tech/react-ui': specifier: 0.72.1 version: link:../ui + '@prefabs.tech/stylelint-config': + specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/stylelint-config + version: https://codeload.github.com/prefabs-tech/tools/tar.gz/de617fd82163608ff70b45050c9e539490cc29e1#path:packages/stylelint-config(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3)) '@prefabs.tech/tsconfig': specifier: 0.6.0 version: 0.6.0 @@ -329,6 +338,9 @@ importers: '@prefabs.tech/react-config': specifier: 0.72.1 version: link:../config + '@prefabs.tech/stylelint-config': + specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/stylelint-config + version: https://codeload.github.com/prefabs-tech/tools/tar.gz/de617fd82163608ff70b45050c9e539490cc29e1#path:packages/stylelint-config(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3)) '@prefabs.tech/tsconfig': specifier: 0.6.0 version: 0.6.0 @@ -398,6 +410,9 @@ importers: '@prefabs.tech/react-ui': specifier: 0.72.1 version: link:../ui + '@prefabs.tech/stylelint-config': + specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/stylelint-config + version: https://codeload.github.com/prefabs-tech/tools/tar.gz/de617fd82163608ff70b45050c9e539490cc29e1#path:packages/stylelint-config(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3)) '@prefabs.tech/tsconfig': specifier: 0.6.0 version: 0.6.0 @@ -489,6 +504,9 @@ importers: '@prefabs.tech/eslint-config': specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/eslint-config version: https://codeload.github.com/prefabs-tech/tools/tar.gz/930931f25a48eb2d4e40225775a2220c137ec7ae#path:packages/eslint-config(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3) + '@prefabs.tech/stylelint-config': + specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/stylelint-config + version: https://codeload.github.com/prefabs-tech/tools/tar.gz/de617fd82163608ff70b45050c9e539490cc29e1#path:packages/stylelint-config(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3)) '@prefabs.tech/tsconfig': specifier: 0.6.0 version: 0.6.0 @@ -583,6 +601,9 @@ importers: '@prefabs.tech/react-ui': specifier: 0.72.1 version: link:../ui + '@prefabs.tech/stylelint-config': + specifier: git+https://github.com/prefabs-tech/tools.git#refactor/eslint-config&path:packages/stylelint-config + version: https://codeload.github.com/prefabs-tech/tools/tar.gz/de617fd82163608ff70b45050c9e539490cc29e1#path:packages/stylelint-config(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3)) '@prefabs.tech/tsconfig': specifier: 0.6.0 version: 0.6.0 @@ -1561,6 +1582,22 @@ packages: stylelint-order: optional: true + '@prefabs.tech/stylelint-config@https://codeload.github.com/prefabs-tech/tools/tar.gz/de617fd82163608ff70b45050c9e539490cc29e1#path:packages/stylelint-config': + resolution: {path: packages/stylelint-config, tarball: https://codeload.github.com/prefabs-tech/tools/tar.gz/de617fd82163608ff70b45050c9e539490cc29e1} + version: 0.6.0 + peerDependencies: + stylelint: '>=17.0.0' + stylelint-config-recommended-vue: '>=1.6.0' + stylelint-config-standard: '>=40.0.0' + stylelint-order: '>=8.0.0' + peerDependenciesMeta: + stylelint-config-recommended-vue: + optional: true + stylelint-config-standard: + optional: true + stylelint-order: + optional: true + '@prefabs.tech/tsconfig@0.6.0': resolution: {integrity: sha512-CuXKJujWd6S/Jqci04Nk7fVA0j66v9A8uGQTscTMrTRGHcfLNSmNkvvmqZG9jEvSahmXmrlJbmyTcwEwXrSBew==} @@ -6500,6 +6537,13 @@ snapshots: - eslint-plugin-import-x - supports-color + '@prefabs.tech/stylelint-config@https://codeload.github.com/prefabs-tech/tools/tar.gz/de617fd82163608ff70b45050c9e539490cc29e1#path:packages/stylelint-config(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))': + dependencies: + stylelint: 17.9.1(typescript@5.9.3) + optionalDependencies: + stylelint-config-standard: 40.0.0(stylelint@17.9.1(typescript@5.9.3)) + stylelint-order: 8.1.1(stylelint@17.9.1(typescript@5.9.3)) + '@prefabs.tech/tsconfig@0.6.0': {} '@reduxjs/toolkit@1.9.7(react-redux@8.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(redux@4.2.1))(react@18.3.1)':