diff --git a/apps/demo/package.json b/apps/demo/package.json index 1cafea7fb..31a06efe6 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" @@ -35,11 +37,12 @@ "zod": "3.24.4" }, "devDependencies": { - "@prefabs.tech/tsconfig": "0.7.0", "@babel/core": "7.26.10", "@babel/plugin-syntax-flow": "7.26.0", "@babel/plugin-transform-react-jsx": "^7.21.5", "@prefabs.tech/eslint-config": "0.7.0", + "@prefabs.tech/stylelint-config": "0.7.0", + "@prefabs.tech/tsconfig": "0.7.0", "@testing-library/react": "16.3.2", "@types/jsdom": "21.1.7", "@types/node": "25.3.5", @@ -50,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..832e143e4 --- /dev/null +++ b/apps/demo/stylelint.config.js @@ -0,0 +1,3 @@ +import stylelintConfig from "@prefabs.tech/stylelint-config/index.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 90683f35c..6c66a6bf6 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", @@ -32,6 +34,7 @@ }, "devDependencies": { "@prefabs.tech/eslint-config": "0.7.0", + "@prefabs.tech/stylelint-config": "0.7.0", "@prefabs.tech/tsconfig": "0.7.0", "@types/jsdom": "21.1.7", "@types/node": "25.3.5", @@ -42,6 +45,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..832e143e4 --- /dev/null +++ b/packages/config/stylelint.config.js @@ -0,0 +1,3 @@ +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 9be5cd679..18f7c9b61 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/", @@ -42,6 +44,7 @@ "devDependencies": { "@prefabs.tech/eslint-config": "0.7.0", "@prefabs.tech/react-ui": "0.72.1", + "@prefabs.tech/stylelint-config": "0.7.0", "@prefabs.tech/tsconfig": "0.7.0", "@testing-library/react": "16.3.2", "@types/jsdom": "21.1.7", @@ -57,6 +60,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..832e143e4 --- /dev/null +++ b/packages/form/stylelint.config.js @@ -0,0 +1,3 @@ +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 b1ef4b725..84f365a1b 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/", @@ -41,6 +43,7 @@ "devDependencies": { "@prefabs.tech/eslint-config": "0.7.0", "@prefabs.tech/react-config": "0.72.1", + "@prefabs.tech/stylelint-config": "0.7.0", "@prefabs.tech/tsconfig": "0.7.0", "@testing-library/react": "16.3.2", "@types/jsdom": "21.1.7", @@ -53,6 +56,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..832e143e4 --- /dev/null +++ b/packages/i18n/stylelint.config.js @@ -0,0 +1,3 @@ +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 fbc43fb41..d5827f359 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/", @@ -35,6 +37,7 @@ "@prefabs.tech/react-config": "0.72.1", "@prefabs.tech/react-i18n": "0.72.1", "@prefabs.tech/react-ui": "0.72.1", + "@prefabs.tech/stylelint-config": "0.7.0", "@prefabs.tech/tsconfig": "0.7.0", "@testing-library/react": "16.3.2", "@types/jsdom": "21.1.7", @@ -50,6 +53,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..832e143e4 --- /dev/null +++ b/packages/layout/stylelint.config.js @@ -0,0 +1,3 @@ +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 136afd1fb..3328771cf 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/", @@ -42,6 +44,7 @@ "devDependencies": { "@dzangolab/flag-icon-css": "3.4.5", "@prefabs.tech/eslint-config": "0.7.0", + "@prefabs.tech/stylelint-config": "0.7.0", "@prefabs.tech/tsconfig": "0.7.0", "@testing-library/jest-dom": "6.6.4", "@testing-library/react": "16.3.2", @@ -59,6 +62,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..832e143e4 --- /dev/null +++ b/packages/ui/stylelint.config.js @@ -0,0 +1,3 @@ +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 6f95ddb90..0854705f5 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/", @@ -40,6 +42,7 @@ "@prefabs.tech/react-i18n": "0.72.1", "@prefabs.tech/react-layout": "0.72.1", "@prefabs.tech/react-ui": "0.72.1", + "@prefabs.tech/stylelint-config": "0.7.0", "@prefabs.tech/tsconfig": "0.7.0", "@testing-library/dom": "10.4.1", "@testing-library/react": "16.3.2", @@ -59,6 +62,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..832e143e4 --- /dev/null +++ b/packages/user/stylelint.config.js @@ -0,0 +1,3 @@ +import stylelintConfig from "@prefabs.tech/stylelint-config/index.js"; + +export default stylelintConfig; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c83dfce61..f1b72042b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -96,6 +96,9 @@ importers: '@prefabs.tech/eslint-config': specifier: 0.7.0 version: 0.7.0(@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)(typescript@5.9.3) + '@prefabs.tech/stylelint-config': + specifier: 0.7.0 + version: 0.7.0(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.7.0 version: 0.7.0 @@ -129,6 +132,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 @@ -150,6 +162,9 @@ importers: '@prefabs.tech/eslint-config': specifier: 0.7.0 version: 0.7.0(@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)(typescript@5.9.3) + '@prefabs.tech/stylelint-config': + specifier: 0.7.0 + version: 0.7.0(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.7.0 version: 0.7.0 @@ -180,6 +195,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 @@ -220,6 +244,9 @@ importers: '@prefabs.tech/react-ui': specifier: 0.72.1 version: link:../ui + '@prefabs.tech/stylelint-config': + specifier: 0.7.0 + version: 0.7.0(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.7.0 version: 0.7.0 @@ -265,6 +292,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 @@ -302,6 +338,9 @@ importers: '@prefabs.tech/react-config': specifier: 0.72.1 version: link:../config + '@prefabs.tech/stylelint-config': + specifier: 0.7.0 + version: 0.7.0(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.7.0 version: 0.7.0 @@ -338,6 +377,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 @@ -362,6 +410,9 @@ importers: '@prefabs.tech/react-ui': specifier: 0.72.1 version: link:../ui + '@prefabs.tech/stylelint-config': + specifier: 0.7.0 + version: 0.7.0(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.7.0 version: 0.7.0 @@ -407,6 +458,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 @@ -444,6 +504,9 @@ importers: '@prefabs.tech/eslint-config': specifier: 0.7.0 version: 0.7.0(@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)(typescript@5.9.3) + '@prefabs.tech/stylelint-config': + specifier: 0.7.0 + version: 0.7.0(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.7.0 version: 0.7.0 @@ -495,6 +558,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 @@ -529,6 +601,9 @@ importers: '@prefabs.tech/react-ui': specifier: 0.72.1 version: link:../ui + '@prefabs.tech/stylelint-config': + specifier: 0.7.0 + version: 0.7.0(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.7.0 version: 0.7.0 @@ -586,6 +661,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 @@ -819,6 +903,12 @@ packages: resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==} engines: {node: '>=18'} + '@cacheable/memory@2.0.8': + resolution: {integrity: sha512-FvEb29x5wVwu/Kf93IWwsOOEuhHh6dYCJF3vcKLzXc0KXIW181AOzv6ceT4ZpBHDvAfG60eqb+ekmrnLHIy+jw==} + + '@cacheable/utils@2.4.1': + resolution: {integrity: sha512-eiFgzCbIneyMlLOmNG4g9xzF7Hv3Mga4LjxjcSC/ues6VYq2+gUbQI8JqNuw/ZM8tJIeIaBGpswAsqV2V7ApgA==} + '@commitlint/cli@19.8.1': resolution: {integrity: sha512-LXUdNIkspyxrlV6VDHWBmCZRtkEVRpBKxi2Gtw3J54cGWhLCTouVD/Q6ZSaSvd2YaDObWK8mDjrz3TIKtaQMAA==} engines: {node: '>=v18'} @@ -924,6 +1014,25 @@ packages: resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==} engines: {node: '>=20.19.0'} + '@csstools/media-query-list-parser@5.0.0': + resolution: {integrity: sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==} + engines: {node: '>=20.19.0'} + peerDependencies: + '@csstools/css-parser-algorithms': ^4.0.0 + '@csstools/css-tokenizer': ^4.0.0 + + '@csstools/selector-resolve-nested@4.0.0': + resolution: {integrity: sha512-9vAPxmp+Dx3wQBIUwc1v7Mdisw1kbbaGqXUM8QLTgWg7SoPGYtXBsMXvsFs/0Bn5yoFhcktzxNZGNaUt0VjgjA==} + engines: {node: '>=20.19.0'} + peerDependencies: + postcss-selector-parser: ^7.1.1 + + '@csstools/selector-specificity@6.0.0': + resolution: {integrity: sha512-4sSgl78OtOXEX/2d++8A83zHNTgwCJMaR24FvsYL7Uf/VS8HZk9PTwR51elTbGqMuwH3szLvvOXEaVnqn0Z3zA==} + engines: {node: '>=20.19.0'} + peerDependencies: + postcss-selector-parser: ^7.1.1 + '@dzangolab/flag-icon-css@3.4.5': resolution: {integrity: sha512-XqVAi0O/KITtznpMK5TP4D+rWfwst5lrsbPbes5c5SPMGjwK7fuvlTdEmG2XUrxzYqDTIPshywyzdVYKooGdGA==} @@ -1373,6 +1482,15 @@ packages: '@jridgewell/trace-mapping@0.3.31': resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==} + '@keyv/bigmap@1.3.1': + resolution: {integrity: sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==} + engines: {node: '>= 18'} + peerDependencies: + keyv: ^5.6.0 + + '@keyv/serialize@1.1.1': + resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==} + '@napi-rs/wasm-runtime@0.2.12': resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==} @@ -1452,6 +1570,21 @@ packages: prettier: '>=3.3.3' typescript: '>=4.9.5' + '@prefabs.tech/stylelint-config@0.7.0': + resolution: {integrity: sha512-Gmfyyouu7m6QPz6vvtb4+fCPeCiZBWTS0BweB02VIcgED553j/lvlWwfn7yKzDsITZKt2HA24/Rxh5WG5vD+wg==} + 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.7.0': resolution: {integrity: sha512-MiEvKeoNVPSy79tYQOkFeaBoVViW27JYfSiEbCBT+Fvuk1XEkXyBpSxlpdKQDV5bsAg0C5VNSjRh4qH3eDjA+w==} @@ -1590,6 +1723,10 @@ packages: '@rtsao/scc@1.1.0': resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==} + '@sindresorhus/merge-streams@4.0.0': + resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==} + engines: {node: '>=18'} + '@slack/types@1.10.0': resolution: {integrity: sha512-tA7GG7Tj479vojfV3AoxbckalA48aK6giGjNtgH6ihpLwTyHE3fIgRrvt8TWfLwW8X8dyu7vgmAsGLRG7hWWOg==} engines: {node: '>= 8.9.0', npm: '>= 5.5.1'} @@ -2003,6 +2140,10 @@ packages: resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==} engines: {node: '>=12'} + ansi-regex@6.2.2: + resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==} + engines: {node: '>=12'} + ansi-styles@4.3.0: resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} engines: {node: '>=8'} @@ -2078,6 +2219,10 @@ packages: ast-types-flow@0.0.8: resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==} + astral-regex@2.0.0: + resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==} + engines: {node: '>=8'} + async@3.2.6: resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==} @@ -2164,6 +2309,9 @@ packages: resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==} engines: {node: '>=8'} + cacheable@2.3.4: + resolution: {integrity: sha512-djgxybDbw9fL/ZWMI3+CE8ZilNxcwFkVtDc1gJ+IlOSSWkSMPQabhV/XCHTQ6pwwN6aivXPZ43omTooZiX06Ew==} + call-bind-apply-helpers@1.0.2: resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==} engines: {node: '>= 0.4'} @@ -2270,6 +2418,9 @@ packages: color-name@1.1.4: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + colord@2.9.3: + resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==} + colorette@2.0.20: resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==} @@ -2365,6 +2516,15 @@ packages: typescript: optional: true + cosmiconfig@9.0.1: + resolution: {integrity: sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==} + engines: {node: '>=14'} + peerDependencies: + typescript: '>=4.9.5' + peerDependenciesMeta: + typescript: + optional: true + cross-spawn@6.0.5: resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==} engines: {node: '>=4.8'} @@ -2373,6 +2533,10 @@ packages: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} + css-functions-list@3.3.3: + resolution: {integrity: sha512-8HFEBPKhOpJPEPu70wJJetjKta86Gw9+CCyCnB3sui2qQfOvRyqBy4IKLKKAwdMpWb2lHXWk9Wb4Z6AmaUT1Pg==} + engines: {node: '>=12'} + css-select@4.3.0: resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==} @@ -2909,6 +3073,10 @@ packages: resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==} engines: {node: '>=8.6.0'} + fast-glob@3.3.3: + resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==} + engines: {node: '>=8.6.0'} + fast-json-stable-stringify@2.1.0: resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} @@ -2918,6 +3086,10 @@ packages: fast-uri@3.0.3: resolution: {integrity: sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw==} + fastest-levenshtein@1.0.16: + resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==} + engines: {node: '>= 4.9.1'} + fastq@1.17.1: resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==} @@ -2934,6 +3106,9 @@ packages: resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==} engines: {node: '>=8'} + file-entry-cache@11.1.2: + resolution: {integrity: sha512-N2WFfK12gmrK1c1GXOqiAJ1tc5YE+R53zvQ+t5P8S5XhnmKYVB5eZEiLNZKDSmoG8wqqbF9EXYBBW/nef19log==} + file-entry-cache@6.0.1: resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==} engines: {node: ^10.12.0 || >=12.0.0} @@ -2984,9 +3159,15 @@ packages: resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==} engines: {node: '>=16'} + flat-cache@6.1.22: + resolution: {integrity: sha512-N2dnzVJIphnNsjHcrxGW7DePckJ6haPrSFqpsBUhHYgwtKGVq4JrBGielEGD2fCVnsGm1zlBVZ8wGhkyuetgug==} + flatted@3.3.1: resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==} + flatted@3.4.2: + resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==} + follow-redirects@1.15.11: resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==} engines: {node: '>=4.0'} @@ -3038,6 +3219,10 @@ packages: resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==} engines: {node: 6.* || 8.* || >= 10.*} + get-east-asian-width@1.5.0: + resolution: {integrity: sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==} + engines: {node: '>=18'} + get-intrinsic@1.2.7: resolution: {integrity: sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==} engines: {node: '>= 0.4'} @@ -3109,6 +3294,14 @@ packages: resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==} engines: {node: '>=18'} + global-modules@2.0.0: + resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==} + engines: {node: '>=6'} + + global-prefix@3.0.0: + resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==} + engines: {node: '>=6'} + globals@11.12.0: resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} engines: {node: '>=4'} @@ -3141,6 +3334,13 @@ packages: resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==} engines: {node: '>=8'} + globby@16.2.0: + resolution: {integrity: sha512-QrJia2qDf5BB/V6HYlDTs0I0lBahyjLzpGQg3KT7FnCdTonAyPy2RtY802m2k4ALx6Dp752f82WsOczEVr3l6Q==} + engines: {node: '>=20'} + + globjoin@0.1.4: + resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==} + gopd@1.2.0: resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==} engines: {node: '>= 0.4'} @@ -3167,6 +3367,10 @@ packages: resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} engines: {node: '>=8'} + has-flag@5.0.1: + resolution: {integrity: sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==} + engines: {node: '>=12'} + has-property-descriptors@1.0.2: resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==} @@ -3182,6 +3386,10 @@ packages: resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==} engines: {node: '>= 0.4'} + hashery@1.5.1: + resolution: {integrity: sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==} + engines: {node: '>=20'} + hasown@2.0.2: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} @@ -3202,6 +3410,12 @@ packages: hoist-non-react-statics@3.3.2: resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} + hookified@1.15.1: + resolution: {integrity: sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==} + + hookified@2.2.0: + resolution: {integrity: sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA==} + hosted-git-info@2.8.9: resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==} @@ -3224,6 +3438,10 @@ packages: html-parse-stringify@3.0.1: resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==} + html-tags@5.1.0: + resolution: {integrity: sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==} + engines: {node: '>=20.10'} + http-proxy-agent@7.0.2: resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==} engines: {node: '>= 14'} @@ -3280,6 +3498,9 @@ packages: import-meta-resolve@4.1.0: resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==} + import-meta-resolve@4.2.0: + resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==} + imurmurhash@0.1.4: resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} engines: {node: '>=0.8.19'} @@ -3413,6 +3634,10 @@ packages: resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==} engines: {node: '>=8'} + is-path-inside@4.0.0: + resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==} + engines: {node: '>=12'} + is-plain-obj@1.1.0: resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==} engines: {node: '>=0.10.0'} @@ -3595,6 +3820,9 @@ packages: keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} + keyv@5.6.0: + resolution: {integrity: sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==} + kind-of@6.0.3: resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} engines: {node: '>=0.10.0'} @@ -3660,6 +3888,9 @@ packages: lodash.startcase@4.4.0: resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==} + lodash.truncate@4.4.2: + resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==} + lodash.uniq@4.5.0: resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==} @@ -3727,6 +3958,9 @@ packages: resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==} engines: {node: '>= 0.4'} + mathml-tag-names@4.0.0: + resolution: {integrity: sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==} + mdn-data@2.27.1: resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==} @@ -3734,6 +3968,10 @@ packages: resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==} engines: {node: '>=16.10'} + meow@14.1.0: + resolution: {integrity: sha512-EDYo6VlmtnumlcBCbh1gLJ//9jvM/ndXHfVXIFrZVr6fGcwTUyCTFNTLCKuY3ffbK8L/+3Mzqnd58RojiZqHVw==} + engines: {node: '>=20'} + meow@8.1.2: resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==} engines: {node: '>=10'} @@ -3867,6 +4105,10 @@ packages: resolution: {integrity: sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==} engines: {node: '>=10'} + normalize-path@3.0.0: + resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} + engines: {node: '>=0.10.0'} + normalize.css@8.0.1: resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==} @@ -4091,10 +4333,24 @@ packages: resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==} engines: {node: '>= 0.4'} + postcss-safe-parser@7.0.1: + resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==} + engines: {node: '>=18.0'} + peerDependencies: + postcss: ^8.4.31 + postcss-selector-parser@7.1.1: 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==} + postcss@8.5.12: resolution: {integrity: sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA==} engines: {node: ^10 || ^12 || >=14} @@ -4167,6 +4423,10 @@ packages: (For a CapTP with native promises, see @endo/eventual-send and @endo/captp) + qified@0.9.1: + resolution: {integrity: sha512-n7mar4T0xQ+39dE2vGTAlbxUEpndwPANH0kDef1/MYsB8Bba9wshkybIRx74qgcvKQPEWErf9AqAdYjhzY2Ilg==} + engines: {node: '>=20'} + queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} @@ -4544,6 +4804,14 @@ packages: resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} engines: {node: '>=8'} + slash@5.1.0: + resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==} + engines: {node: '>=14.16'} + + slice-ansi@4.0.0: + resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==} + engines: {node: '>=10'} + snake-case@3.0.4: resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==} @@ -4602,6 +4870,10 @@ packages: resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==} engines: {node: '>=12'} + string-width@8.2.1: + resolution: {integrity: sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA==} + engines: {node: '>=20'} + string.prototype.includes@2.0.1: resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==} engines: {node: '>= 0.4'} @@ -4639,6 +4911,10 @@ packages: resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==} engines: {node: '>=12'} + strip-ansi@7.2.0: + resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==} + engines: {node: '>=12'} + strip-bom@3.0.0: resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==} engines: {node: '>=4'} @@ -4659,6 +4935,29 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} + stylelint-config-recommended@18.0.0: + resolution: {integrity: sha512-mxgT2XY6YZ3HWWe3Di8umG6aBmWmHTblTgu/f10rqFXnyWxjKWwNdjSWkgkwCtxIKnqjSJzvFmPT5yabVIRxZg==} + engines: {node: '>=20.19.0'} + peerDependencies: + stylelint: ^17.0.0 + + stylelint-config-standard@40.0.0: + resolution: {integrity: sha512-EznGJxOUhtWck2r6dJpbgAdPATIzvpLdK9+i5qPd4Lx70es66TkBPljSg4wN3Qnc6c4h2n+WbUrUynQ3fanjHw==} + engines: {node: '>=20.19.0'} + 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'} + hasBin: true + supertokens-js-override@0.0.4: resolution: {integrity: sha512-r0JFBjkMIdep3Lbk3JA+MpnpuOtw4RSyrlRAbrzMcxwiYco3GFWl/daimQZ5b1forOiUODpOlXbSOljP/oyurg==} @@ -4668,14 +4967,25 @@ packages: supertokens-website@17.0.5: resolution: {integrity: sha512-NBOiKO3NV2VBAFgO+ZEmpOPVde2BwOjB6T0qjj2XaZX4jh+6yDGhrckJMwF5R0ucpTgOQXmBrpDnUJ5kFZlgiQ==} + supports-color@10.2.2: + resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==} + engines: {node: '>=18'} + supports-color@7.2.0: resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} engines: {node: '>=8'} + supports-hyperlinks@4.4.0: + resolution: {integrity: sha512-UKbpT93hN5Nr9go5UY7bopIB9YQlMz9nm/ct4IXt/irb5YRkn9WaqrOBJGZ5Pwvsd5FQzSVeYlGdXoCAPQZrPg==} + engines: {node: '>=20'} + supports-preserve-symlinks-flag@1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + svg-tags@1.0.0: + resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==} + symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} @@ -4683,6 +4993,10 @@ packages: resolution: {integrity: sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==} engines: {node: ^14.18.0 || >=16.0.0} + table@6.9.0: + resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==} + engines: {node: '>=10.0.0'} + tapable@2.2.1: resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==} engines: {node: '>=6'} @@ -4909,6 +5223,10 @@ packages: resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==} engines: {node: '>=18'} + unicorn-magic@0.4.0: + resolution: {integrity: sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==} + engines: {node: '>=20'} + universal-user-agent@5.0.0: resolution: {integrity: sha512-B5TPtzZleXyPrUMKCpEHFmVhMN6EhmJYjG5PQna9s7mXeSqGTLap4OpqLl5FCEFUI3UBmllkETwKf/db66Y54Q==} @@ -5182,6 +5500,10 @@ packages: wrappy@1.0.2: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} + write-file-atomic@7.0.1: + resolution: {integrity: sha512-OTIk8iR8/aCRWBqvxrzxR0hgxWpnYBblY1S5hDWBQfk/VFmJwzmJgQFN3WsoUKHISv2eAwe+PpbUzyL1CKTLXg==} + engines: {node: ^20.17.0 || >=22.9.0} + ws@8.20.0: resolution: {integrity: sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==} engines: {node: '>=10.0.0'} @@ -5350,7 +5672,7 @@ snapshots: '@babel/types': 7.26.9 '@jridgewell/gen-mapping': 0.3.5 '@jridgewell/trace-mapping': 0.3.25 - jsesc: 3.1.0 + jsesc: 3.0.2 '@babel/generator@7.27.0': dependencies: @@ -5570,6 +5892,18 @@ snapshots: '@bcoe/v8-coverage@1.0.2': {} + '@cacheable/memory@2.0.8': + dependencies: + '@cacheable/utils': 2.4.1 + '@keyv/bigmap': 1.3.1(keyv@5.6.0) + hookified: 1.15.1 + keyv: 5.6.0 + + '@cacheable/utils@2.4.1': + dependencies: + hashery: 1.5.1 + keyv: 5.6.0 + '@commitlint/cli@19.8.1(@types/node@25.3.5)(typescript@5.9.3)': dependencies: '@commitlint/format': 19.8.1 @@ -5704,6 +6038,19 @@ snapshots: '@csstools/css-tokenizer@4.0.0': {} + '@csstools/media-query-list-parser@5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)': + dependencies: + '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0) + '@csstools/css-tokenizer': 4.0.0 + + '@csstools/selector-resolve-nested@4.0.0(postcss-selector-parser@7.1.1)': + dependencies: + postcss-selector-parser: 7.1.1 + + '@csstools/selector-specificity@6.0.0(postcss-selector-parser@7.1.1)': + dependencies: + postcss-selector-parser: 7.1.1 + '@dzangolab/flag-icon-css@3.4.5': {} '@emnapi/core@1.8.1': @@ -6026,6 +6373,14 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.0 + '@keyv/bigmap@1.3.1(keyv@5.6.0)': + dependencies: + hashery: 1.5.1 + hookified: 1.15.1 + keyv: 5.6.0 + + '@keyv/serialize@1.1.1': {} + '@napi-rs/wasm-runtime@0.2.12': dependencies: '@emnapi/core': 1.8.1 @@ -6165,6 +6520,13 @@ snapshots: - eslint-plugin-import-x - supports-color + '@prefabs.tech/stylelint-config@0.7.0(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.7.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)': @@ -6254,6 +6616,8 @@ snapshots: '@rtsao/scc@1.1.0': {} + '@sindresorhus/merge-streams@4.0.0': {} + '@slack/types@1.10.0': {} '@slack/webhook@5.0.4': @@ -6717,6 +7081,8 @@ snapshots: ansi-regex@6.1.0: {} + ansi-regex@6.2.2: {} + ansi-styles@4.3.0: dependencies: color-convert: 2.0.1 @@ -6812,6 +7178,8 @@ snapshots: ast-types-flow@0.0.8: {} + astral-regex@2.0.0: {} + async@3.2.6: {} asynckit@0.4.0: {} @@ -6896,6 +7264,14 @@ snapshots: cac@6.7.14: {} + cacheable@2.3.4: + dependencies: + '@cacheable/memory': 2.0.8 + '@cacheable/utils': 2.4.1 + hookified: 1.15.1 + keyv: 5.6.0 + qified: 0.9.1 + call-bind-apply-helpers@1.0.2: dependencies: es-errors: 1.3.0 @@ -7020,6 +7396,8 @@ snapshots: color-name@1.1.4: {} + colord@2.9.3: {} + colorette@2.0.20: {} combined-stream@1.0.8: @@ -7136,6 +7514,15 @@ snapshots: optionalDependencies: typescript: 5.9.3 + cosmiconfig@9.0.1(typescript@5.9.3): + dependencies: + env-paths: 2.2.1 + import-fresh: 3.3.0 + js-yaml: 4.1.1 + parse-json: 5.2.0 + optionalDependencies: + typescript: 5.9.3 + cross-spawn@6.0.5: dependencies: nice-try: 1.0.5 @@ -7150,6 +7537,8 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 + css-functions-list@3.3.3: {} + css-select@4.3.0: dependencies: boolbase: 1.0.0 @@ -7903,12 +8292,22 @@ snapshots: merge2: 1.4.1 micromatch: 4.0.8 + fast-glob@3.3.3: + dependencies: + '@nodelib/fs.stat': 2.0.5 + '@nodelib/fs.walk': 1.2.8 + glob-parent: 5.1.2 + merge2: 1.4.1 + micromatch: 4.0.8 + fast-json-stable-stringify@2.1.0: {} fast-levenshtein@2.0.6: {} fast-uri@3.0.3: {} + fastest-levenshtein@1.0.16: {} + fastq@1.17.1: dependencies: reusify: 1.0.4 @@ -7921,6 +8320,10 @@ snapshots: dependencies: escape-string-regexp: 1.0.5 + file-entry-cache@11.1.2: + dependencies: + flat-cache: 6.1.22 + file-entry-cache@6.0.1: dependencies: flat-cache: 3.2.0 @@ -7976,8 +8379,16 @@ snapshots: flatted: 3.3.1 keyv: 4.5.4 + flat-cache@6.1.22: + dependencies: + cacheable: 2.3.4 + flatted: 3.4.2 + hookified: 1.15.1 + flatted@3.3.1: {} + flatted@3.4.2: {} + follow-redirects@1.15.11: {} for-each@0.3.5: @@ -8025,6 +8436,8 @@ snapshots: get-caller-file@2.0.5: {} + get-east-asian-width@1.5.0: {} + get-intrinsic@1.2.7: dependencies: call-bind-apply-helpers: 1.0.2 @@ -8135,6 +8548,16 @@ snapshots: dependencies: ini: 4.1.1 + global-modules@2.0.0: + dependencies: + global-prefix: 3.0.0 + + global-prefix@3.0.0: + dependencies: + ini: 1.3.8 + kind-of: 6.0.3 + which: 1.3.1 + globals@11.12.0: {} globals@13.24.0: @@ -8165,6 +8588,17 @@ snapshots: merge2: 1.4.1 slash: 3.0.0 + globby@16.2.0: + dependencies: + '@sindresorhus/merge-streams': 4.0.0 + fast-glob: 3.3.3 + ignore: 7.0.5 + is-path-inside: 4.0.0 + slash: 5.1.0 + unicorn-magic: 0.4.0 + + globjoin@0.1.4: {} + gopd@1.2.0: {} graceful-fs@4.2.11: {} @@ -8186,6 +8620,8 @@ snapshots: has-flag@4.0.0: {} + has-flag@5.0.1: {} + has-property-descriptors@1.0.2: dependencies: es-define-property: 1.0.1 @@ -8200,6 +8636,10 @@ snapshots: dependencies: has-symbols: 1.1.0 + hashery@1.5.1: + dependencies: + hookified: 1.15.1 + hasown@2.0.2: dependencies: function-bind: 1.1.2 @@ -8221,6 +8661,10 @@ snapshots: dependencies: react-is: 16.13.1 + hookified@1.15.1: {} + + hookified@2.2.0: {} + hosted-git-info@2.8.9: {} hosted-git-info@4.1.0: @@ -8247,6 +8691,8 @@ snapshots: dependencies: void-elements: 3.1.0 + html-tags@5.1.0: {} + http-proxy-agent@7.0.2: dependencies: agent-base: 7.1.3 @@ -8302,6 +8748,8 @@ snapshots: import-meta-resolve@4.1.0: {} + import-meta-resolve@4.2.0: {} + imurmurhash@0.1.4: {} indent-string@4.0.0: {} @@ -8426,6 +8874,8 @@ snapshots: is-path-inside@3.0.3: {} + is-path-inside@4.0.0: {} + is-plain-obj@1.1.0: {} is-plain-object@5.0.0: {} @@ -8618,6 +9068,10 @@ snapshots: dependencies: json-buffer: 3.0.1 + keyv@5.6.0: + dependencies: + '@keyv/serialize': 1.1.1 + kind-of@6.0.3: {} language-subtag-registry@0.3.23: {} @@ -8675,6 +9129,8 @@ snapshots: lodash.startcase@4.4.0: {} + lodash.truncate@4.4.2: {} + lodash.uniq@4.5.0: {} lodash.upperfirst@4.3.1: {} @@ -8731,10 +9187,14 @@ snapshots: math-intrinsics@1.1.0: {} + mathml-tag-names@4.0.0: {} + mdn-data@2.27.1: {} meow@12.1.1: {} + meow@14.1.0: {} + meow@8.1.2: dependencies: '@types/minimist': 1.2.5 @@ -8854,6 +9314,8 @@ snapshots: semver: 7.7.3 validate-npm-package-license: 3.0.4 + normalize-path@3.0.0: {} + normalize.css@8.0.1: {} npm-run-path@2.0.2: @@ -9067,11 +9529,21 @@ snapshots: possible-typed-array-names@1.0.0: {} + postcss-safe-parser@7.0.1(postcss@8.5.12): + dependencies: + postcss: 8.5.12 + postcss-selector-parser@7.1.1: dependencies: 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: dependencies: nanoid: 3.3.11 @@ -9132,6 +9604,10 @@ snapshots: q@1.5.1: {} + qified@0.9.1: + dependencies: + hookified: 2.2.0 + queue-microtask@1.2.3: {} quick-lru@4.0.1: {} @@ -9571,6 +10047,14 @@ snapshots: slash@3.0.0: {} + slash@5.1.0: {} + + slice-ansi@4.0.0: + dependencies: + ansi-styles: 4.3.0 + astral-regex: 2.0.0 + is-fullwidth-code-point: 3.0.0 + snake-case@3.0.4: dependencies: dot-case: 3.0.4 @@ -9632,6 +10116,11 @@ snapshots: emoji-regex: 9.2.2 strip-ansi: 7.1.0 + string-width@8.2.1: + dependencies: + get-east-asian-width: 1.5.0 + strip-ansi: 7.2.0 + string.prototype.includes@2.0.1: dependencies: call-bind: 1.0.8 @@ -9698,6 +10187,10 @@ snapshots: dependencies: ansi-regex: 6.1.0 + strip-ansi@7.2.0: + dependencies: + ansi-regex: 6.2.2 + strip-bom@3.0.0: {} strip-eof@1.0.0: {} @@ -9710,6 +10203,63 @@ snapshots: strip-json-comments@3.1.1: {} + stylelint-config-recommended@18.0.0(stylelint@17.9.1(typescript@5.9.3)): + dependencies: + stylelint: 17.9.1(typescript@5.9.3) + + stylelint-config-standard@40.0.0(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)) + + 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) + '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0) + '@csstools/css-syntax-patches-for-csstree': 1.1.3(css-tree@3.2.1) + '@csstools/css-tokenizer': 4.0.0 + '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0) + '@csstools/selector-resolve-nested': 4.0.0(postcss-selector-parser@7.1.1) + '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.1) + colord: 2.9.3 + cosmiconfig: 9.0.1(typescript@5.9.3) + css-functions-list: 3.3.3 + css-tree: 3.2.1 + debug: 4.4.3 + fast-glob: 3.3.3 + fastest-levenshtein: 1.0.16 + file-entry-cache: 11.1.2 + global-modules: 2.0.0 + globby: 16.2.0 + globjoin: 0.1.4 + html-tags: 5.1.0 + ignore: 7.0.5 + import-meta-resolve: 4.2.0 + is-plain-object: 5.0.0 + mathml-tag-names: 4.0.0 + meow: 14.1.0 + micromatch: 4.0.8 + normalize-path: 3.0.0 + picocolors: 1.1.1 + postcss: 8.5.12 + postcss-safe-parser: 7.0.1(postcss@8.5.12) + postcss-selector-parser: 7.1.1 + postcss-value-parser: 4.2.0 + string-width: 8.2.1 + supports-hyperlinks: 4.4.0 + svg-tags: 1.0.0 + table: 6.9.0 + write-file-atomic: 7.0.1 + transitivePeerDependencies: + - supports-color + - typescript + supertokens-js-override@0.0.4: {} supertokens-web-js@0.6.0: @@ -9722,18 +10272,35 @@ snapshots: browser-tabs-lock: 1.3.0 supertokens-js-override: 0.0.4 + supports-color@10.2.2: {} + supports-color@7.2.0: dependencies: has-flag: 4.0.0 + supports-hyperlinks@4.4.0: + dependencies: + has-flag: 5.0.1 + supports-color: 10.2.2 + supports-preserve-symlinks-flag@1.0.0: {} + svg-tags@1.0.0: {} + symbol-tree@3.2.4: {} synckit@0.11.12: dependencies: '@pkgr/core': 0.2.9 + table@6.9.0: + dependencies: + ajv: 8.17.1 + lodash.truncate: 4.4.2 + slice-ansi: 4.0.0 + string-width: 4.2.3 + strip-ansi: 6.0.1 + tapable@2.2.1: {} temp-dir@1.0.0: {} @@ -9947,6 +10514,8 @@ snapshots: unicorn-magic@0.1.0: {} + unicorn-magic@0.4.0: {} + universal-user-agent@5.0.0: dependencies: os-name: 3.1.0 @@ -10251,6 +10820,10 @@ snapshots: wrappy@1.0.2: {} + write-file-atomic@7.0.1: + dependencies: + signal-exit: 4.1.0 + ws@8.20.0: {} xlsx@https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz: {} 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": [] },