F: Add StyleLint tooling and fix some CSS issues
This commit is contained in:
Ivan
parent
76902b34ae
commit
f21295061d
1
.vscode/settings.json
vendored
1
.vscode/settings.json
vendored
|
|
@ -21,6 +21,7 @@
|
|||
"changeProcessCWD": true
|
||||
}
|
||||
],
|
||||
"stylelint.enable": true,
|
||||
"autopep8.args": [
|
||||
"--max-line-length",
|
||||
"120",
|
||||
|
|
|
|||
|
|
@ -71,6 +71,10 @@ This readme file is used mostly to document project dependencies and conventions
|
|||
- vite
|
||||
- jest
|
||||
- ts-jest
|
||||
- stylelint
|
||||
- stylelint-config-recommended
|
||||
- stylelint-config-standard
|
||||
- stylelint-config-tailwindcss
|
||||
- @vitejs/plugin-react
|
||||
- @types/jest
|
||||
- @lezer/generator
|
||||
|
|
|
|||
22
rsconcept/frontend/.stylelintrc.json
Normal file
22
rsconcept/frontend/.stylelintrc.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"extends": ["stylelint-config-recommended", "stylelint-config-standard", "stylelint-config-tailwindcss"],
|
||||
"rules": {
|
||||
"color-no-invalid-hex": true,
|
||||
"font-family-no-missing-generic-family-keyword": true,
|
||||
"unit-no-unknown": true,
|
||||
"block-no-empty": true,
|
||||
"selector-pseudo-element-no-unknown": true,
|
||||
"property-no-unknown": true,
|
||||
"declaration-block-no-duplicate-properties": true,
|
||||
"no-duplicate-selectors": true,
|
||||
"no-empty-source": true,
|
||||
|
||||
"import-notation": null,
|
||||
"at-rule-empty-line-before": null,
|
||||
"declaration-empty-line-before": null,
|
||||
"at-rule-no-unknown": null,
|
||||
"comment-no-empty": null,
|
||||
"comment-empty-line-before": null,
|
||||
"custom-property-empty-line-before": null
|
||||
}
|
||||
}
|
||||
858
rsconcept/frontend/package-lock.json
generated
858
rsconcept/frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -9,7 +9,7 @@
|
|||
"test:e2e": "playwright test",
|
||||
"dev": "vite --host",
|
||||
"build": "tsc && vite build",
|
||||
"lint": "eslint . --report-unused-disable-directives --max-warnings 0",
|
||||
"lint": "stylelint \"src/**/*.css\" && eslint . --report-unused-disable-directives --max-warnings 0",
|
||||
"lintFix": "eslint . --report-unused-disable-directives --max-warnings 0 --fix",
|
||||
"preview": "vite preview --port 3000"
|
||||
},
|
||||
|
|
@ -66,6 +66,10 @@
|
|||
"eslint-plugin-simple-import-sort": "^12.1.1",
|
||||
"globals": "^16.0.0",
|
||||
"jest": "^29.7.0",
|
||||
"stylelint": "^16.16.0",
|
||||
"stylelint-config-recommended": "^15.0.0",
|
||||
"stylelint-config-standard": "^37.0.0",
|
||||
"stylelint-config-tailwindcss": "^1.0.0",
|
||||
"tailwindcss": "^4.0.7",
|
||||
"ts-jest": "^29.2.6",
|
||||
"typescript": "^5.8.2",
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme {
|
||||
/* stylelint-disable-next-line custom-property-pattern */
|
||||
--color-*: initial;
|
||||
--color-transparent: transparent;
|
||||
--color-current: currentColor;
|
||||
--color-inherit: inherit;
|
||||
|
||||
--color-prim-0: var(--clr-prim-0);
|
||||
|
|
@ -35,6 +35,7 @@
|
|||
|
||||
--color-ok-600: var(--clr-ok-600);
|
||||
|
||||
/* stylelint-disable-next-line custom-property-pattern */
|
||||
--z-index-*: initial;
|
||||
--z-index-bottom: 0;
|
||||
--z-index-topmost: 99;
|
||||
|
|
@ -44,6 +45,7 @@
|
|||
--z-index-navigation: 50;
|
||||
--z-index-modal: 60;
|
||||
|
||||
/* stylelint-disable-next-line custom-property-pattern */
|
||||
--breakpoint-*: initial;
|
||||
--breakpoint-xs: 475px;
|
||||
--breakpoint-sm: 640px;
|
||||
|
|
|
|||
|
|
@ -49,11 +49,12 @@
|
|||
padding: 0.5rem;
|
||||
|
||||
font-size: var(--text-xs);
|
||||
|
||||
/* stylelint-disable-next-line custom-property-pattern */
|
||||
line-height: var(--tw-leading, var(--text-xs--line-height));
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -140,14 +141,13 @@
|
|||
}
|
||||
|
||||
@utility cc-view-hidden-item {
|
||||
outline-width: 0px;
|
||||
outline-width: 0;
|
||||
outline-color: transparent;
|
||||
|
||||
&.selected {
|
||||
outline-width: 2px;
|
||||
outline-color: var(--clr-prim-999);
|
||||
outline-style: solid;
|
||||
outline: 2px solid var(--clr-prim-999);
|
||||
}
|
||||
|
||||
&.inherited {
|
||||
outline-style: dashed;
|
||||
}
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
clip-path: inset(0% 0% 0% 0%);
|
||||
height: 4.5rem;
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,93 +20,93 @@
|
|||
/* Light Theme */
|
||||
/* prettier-ignore */
|
||||
:not(.dark):root {
|
||||
--clr-prim-0: hsl(000, 000%, 100%);
|
||||
--clr-prim-100: hsl(000, 000%, 098%);
|
||||
--clr-prim-200: hsl(000, 000%, 094%);
|
||||
--clr-prim-300: hsl(000, 000%, 091%);
|
||||
--clr-prim-400: hsl(000, 000%, 080%);
|
||||
--clr-prim-600: hsl(000, 000%, 065%);
|
||||
--clr-prim-800: hsl(000, 000%, 047%);
|
||||
--clr-prim-999: hsl(000, 000%, 000%);
|
||||
--clr-prim-0: hsl(000deg 000% 100%);
|
||||
--clr-prim-100: hsl(000deg 000% 098%);
|
||||
--clr-prim-200: hsl(000deg 000% 094%);
|
||||
--clr-prim-300: hsl(000deg 000% 091%);
|
||||
--clr-prim-400: hsl(000deg 000% 080%);
|
||||
--clr-prim-600: hsl(000deg 000% 065%);
|
||||
--clr-prim-800: hsl(000deg 000% 047%);
|
||||
--clr-prim-999: hsl(000deg 000% 000%);
|
||||
|
||||
--clr-sec-0: hsl(000, 000%, 100%);
|
||||
--clr-sec-100: hsl(190, 080%, 094%);
|
||||
--clr-sec-200: hsl(220, 080%, 092%);
|
||||
--clr-sec-300: hsl(220, 100%, 080%);
|
||||
--clr-sec-400: hsl(220, 100%, 070%);
|
||||
--clr-sec-600: hsl(220, 100%, 060%);
|
||||
--clr-sec-800: hsl(220, 100%, 050%);
|
||||
--clr-sec-0: hsl(000deg 000% 100%);
|
||||
--clr-sec-100: hsl(190deg 080% 094%);
|
||||
--clr-sec-200: hsl(220deg 080% 092%);
|
||||
--clr-sec-300: hsl(220deg 100%080%);
|
||||
--clr-sec-400: hsl(220deg 100% 070%);
|
||||
--clr-sec-600: hsl(220deg 100% 060%);
|
||||
--clr-sec-800: hsl(220deg 100% 050%);
|
||||
|
||||
--clr-warn-100: hsl(000, 100%, 095%);
|
||||
--clr-warn-600: hsl(000, 072%, 051%);
|
||||
--clr-warn-100: hsl(000deg 100% 095%);
|
||||
--clr-warn-600: hsl(000deg 072% 051%);
|
||||
|
||||
--clr-ok-600: hsl(120, 080%, 37%);
|
||||
--clr-ok-600: hsl(120deg 080% 37%);
|
||||
|
||||
--clr-select-node: hsl(162, 082%, 051%);
|
||||
--clr-select-node: hsl(162deg 082% 051%);
|
||||
|
||||
/* Highlight accents */
|
||||
--acc-bg-red: hsl(000, 100%, 089%);
|
||||
--acc-bg-green: hsl(100, 100%, 075%);
|
||||
--acc-bg-blue: hsl(235, 080%, 087%);
|
||||
--acc-bg-purple: hsl(274, 089%, 081%);
|
||||
--acc-bg-teal: hsl(192, 089%, 081%);
|
||||
--acc-bg-orange: hsl(028, 100%, 075%);
|
||||
--acc-bg-red: hsl(000deg 100% 089%);
|
||||
--acc-bg-green: hsl(100deg 100% 075%);
|
||||
--acc-bg-blue: hsl(235deg 080% 087%);
|
||||
--acc-bg-purple: hsl(274deg 089% 081%);
|
||||
--acc-bg-teal: hsl(192deg 089% 081%);
|
||||
--acc-bg-orange: hsl(028deg 100% 075%);
|
||||
|
||||
--acc-bg-green25: hsl(100, 100%, 096%);
|
||||
--acc-bg-green50: hsl(100, 100%, 090%);
|
||||
--acc-bg-orange50: hsl(028, 100%, 090%);
|
||||
--acc-bg-green25: hsl(100deg 100% 096%);
|
||||
--acc-bg-green50: hsl(100deg 100% 090%);
|
||||
--acc-bg-orange50: hsl(028deg 100% 090%);
|
||||
|
||||
--acc-fg-red: hsl(000, 090%, 045%);
|
||||
--acc-fg-green: hsl(100, 090%, 035%);
|
||||
--acc-fg-blue: hsl(235, 100%, 050%);
|
||||
--acc-fg-purple: hsl(270, 100%, 055%);
|
||||
--acc-fg-teal: hsl(200, 080%, 050%);
|
||||
--acc-fg-orange: hsl(028, 100%, 050%);
|
||||
--acc-fg-red: hsl(000deg 090% 045%);
|
||||
--acc-fg-green: hsl(100deg 090% 035%);
|
||||
--acc-fg-blue: hsl(235deg 100% 050%);
|
||||
--acc-fg-purple: hsl(270deg 100% 055%);
|
||||
--acc-fg-teal: hsl(200deg 080% 050%);
|
||||
--acc-fg-orange: hsl(028deg 100% 050%);
|
||||
}
|
||||
|
||||
/* Dark Theme */
|
||||
/* prettier-ignore */
|
||||
.dark:root {
|
||||
--clr-prim-0: hsl(000, 000%, 005%);
|
||||
--clr-prim-100: hsl(000, 000%, 009%);
|
||||
--clr-prim-200: hsl(000, 000%, 015%);
|
||||
--clr-prim-300: hsl(000, 000%, 022%);
|
||||
--clr-prim-400: hsl(000, 000%, 035%);
|
||||
--clr-prim-600: hsl(000, 000%, 055%);
|
||||
--clr-prim-800: hsl(000, 000%, 080%);
|
||||
--clr-prim-999: hsl(000, 000%, 093%);
|
||||
--clr-prim-0: hsl(000deg 000% 005%);
|
||||
--clr-prim-100: hsl(000deg 000% 009%);
|
||||
--clr-prim-200: hsl(000deg 000% 015%);
|
||||
--clr-prim-300: hsl(000deg 000% 022%);
|
||||
--clr-prim-400: hsl(000deg 000% 035%);
|
||||
--clr-prim-600: hsl(000deg 000% 055%);
|
||||
--clr-prim-800: hsl(000deg 000% 080%);
|
||||
--clr-prim-999: hsl(000deg 000% 093%);
|
||||
|
||||
--clr-sec-800: hsl(267, 070%, 070%);
|
||||
--clr-sec-600: hsl(267, 050%, 060%);
|
||||
--clr-sec-400: hsl(267, 050%, 050%);
|
||||
--clr-sec-300: hsl(267, 050%, 040%);
|
||||
--clr-sec-200: hsl(267, 050%, 032%);
|
||||
--clr-sec-100: hsl(269, 030%, 028%);
|
||||
--clr-sec-0: hsl(000, 000%, 100%);
|
||||
--clr-sec-800: hsl(267deg 070% 070%);
|
||||
--clr-sec-600: hsl(267deg 050% 060%);
|
||||
--clr-sec-400: hsl(267deg 050% 050%);
|
||||
--clr-sec-300: hsl(267deg 050% 040%);
|
||||
--clr-sec-200: hsl(267deg 050% 032%);
|
||||
--clr-sec-100: hsl(269deg 030% 028%);
|
||||
--clr-sec-0: hsl(000deg 000% 100%);
|
||||
|
||||
--clr-warn-100: hsl(000, 100%, 015%);
|
||||
--clr-warn-600: hsl(000, 080%, 055%);
|
||||
--clr-warn-100: hsl(000deg 100% 015%);
|
||||
--clr-warn-600: hsl(000deg 080% 055%);
|
||||
|
||||
--clr-ok-600: hsl(120, 080%, 042%);
|
||||
--clr-ok-600: hsl(120deg 080% 042%);
|
||||
|
||||
--clr-select-node: hsl(162, 082%, 041%);
|
||||
--clr-select-node: hsl(162deg 082% 041%);
|
||||
|
||||
/* Highlight accents */
|
||||
--acc-bg-red: hsl(000, 080%, 037%);
|
||||
--acc-bg-green: hsl(100, 080%, 025%);
|
||||
--acc-bg-blue: hsl(235, 054%, 049%);
|
||||
--acc-bg-purple: hsl(270, 080%, 050%);
|
||||
--acc-bg-teal: hsl(192, 080%, 030%);
|
||||
--acc-bg-orange: hsl(035, 100%, 035%);
|
||||
--acc-bg-red: hsl(000deg 080% 037%);
|
||||
--acc-bg-green: hsl(100deg 080% 025%);
|
||||
--acc-bg-blue: hsl(235deg 054% 049%);
|
||||
--acc-bg-purple: hsl(270deg 080% 050%);
|
||||
--acc-bg-teal: hsl(192deg 080% 030%);
|
||||
--acc-bg-orange: hsl(035deg 100% 035%);
|
||||
|
||||
--acc-bg-green25: hsl(100, 080%, 009%);
|
||||
--acc-bg-green50: hsl(100, 080%, 017%);
|
||||
--acc-bg-orange50: hsl(035, 100%, 016%);
|
||||
--acc-bg-green25: hsl(100deg 080% 009%);
|
||||
--acc-bg-green50: hsl(100deg 080% 017%);
|
||||
--acc-bg-orange50: hsl(035deg 100% 016%);
|
||||
|
||||
--acc-fg-red: hsl(000, 080%, 045%);
|
||||
--acc-fg-green: hsl(100, 080%, 035%);
|
||||
--acc-fg-blue: hsl(235, 100%, 080%);
|
||||
--acc-fg-purple: hsl(270, 100%, 080%);
|
||||
--acc-fg-teal: hsl(192, 100%, 045%);
|
||||
--acc-fg-orange: hsl(035, 100%, 050%);
|
||||
--acc-fg-red: hsl(000deg 080% 045%);
|
||||
--acc-fg-green: hsl(100deg 080% 035%);
|
||||
--acc-fg-blue: hsl(235deg 100% 080%);
|
||||
--acc-fg-purple: hsl(270deg 100% 080%);
|
||||
--acc-fg-teal: hsl(192deg 100% 045%);
|
||||
--acc-fg-orange: hsl(035deg 100% 050%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
/**
|
||||
* Module: Override imported components CSS styling.
|
||||
*/
|
||||
* Module: Override imported components CSS styling.
|
||||
*/
|
||||
@import './constants.css';
|
||||
@import './imports.css';
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
|
||||
:root {
|
||||
/* Import overrides */
|
||||
--toastify-color-dark: var(--clr-prim-300);
|
||||
|
|
@ -37,23 +39,18 @@
|
|||
border-width: 1px;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
padding-left: 0.375rem;
|
||||
padding-right: 0.375rem;
|
||||
padding-top: 0.15rem;
|
||||
padding-bottom: 0.15rem;
|
||||
padding: 0.15rem 0.375rem;
|
||||
}
|
||||
|
||||
.cm-editor.cm-focused {
|
||||
border-color: var(--clr-prim-400);
|
||||
outline-color: var(--clr-sec-600);
|
||||
outline-style: solid;
|
||||
outline-width: 2px;
|
||||
outline: 2px solid var(--clr-sec-600);
|
||||
}
|
||||
|
||||
.cm-editor .cm-placeholder {
|
||||
font-family: var(--font-main);
|
||||
color: var(--clr-prim-600);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.react-flow__handle {
|
||||
|
|
@ -89,7 +86,6 @@
|
|||
font-size: 14px;
|
||||
border: 1px solid;
|
||||
|
||||
background-color: var(--clr-prim-0);
|
||||
color: var(--clr-prim-999);
|
||||
border-color: var(--clr-prim-400);
|
||||
background-color: var(--clr-prim-0);
|
||||
|
|
|
|||
|
|
@ -33,11 +33,10 @@
|
|||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--clr-prim-400);
|
||||
accent-color: var(--clr-sec-600);
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: none;
|
||||
-moz-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
|
||||
hanging-punctuation: first last;
|
||||
|
|
@ -47,8 +46,8 @@
|
|||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -80,7 +79,7 @@
|
|||
background-color: var(--clr-prim-100);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 639px) {
|
||||
@media only screen and (width <= 639px) {
|
||||
:root {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
|
@ -89,9 +88,7 @@
|
|||
:focus,
|
||||
:focus-visible,
|
||||
:focus-within {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline: 2px solid transparent;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
|
|
@ -135,6 +132,7 @@
|
|||
:not([role='manuals']) & {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
[role='manuals'] & {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* Module: Utility classes for stlye features.
|
||||
* Module: Utility classes for style features.
|
||||
*/
|
||||
|
||||
@utility font-main {
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
|
||||
@utility clr-input {
|
||||
background-color: var(--clr-prim-0);
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--clr-prim-100);
|
||||
}
|
||||
|
|
@ -51,30 +52,28 @@
|
|||
background-color: var(--clr-prim-200);
|
||||
}
|
||||
|
||||
&:hover:not(:disabled),
|
||||
&:focus-visible {
|
||||
color: var(--clr-sec-0);
|
||||
background-color: var(--clr-sec-600);
|
||||
&:focus-visible,
|
||||
.focus-frame:has(:focus-visible) {
|
||||
outline: 2px solid var(--clr-sec-600);
|
||||
}
|
||||
|
||||
&:focus-visible,
|
||||
.focus-frame:has(:focus-visible) {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: var(--clr-sec-600);
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--clr-sec-0);
|
||||
background-color: var(--clr-sec-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility clr-btn-nav {
|
||||
color: var(--clr-prim-800);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--clr-sec-100);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: var(--clr-prim-600);
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--clr-sec-100);
|
||||
}
|
||||
}
|
||||
|
||||
@utility clr-hover {
|
||||
|
|
@ -86,23 +85,17 @@
|
|||
|
||||
@utility clr-outline {
|
||||
:is(&, .focus-frame):focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: var(--clr-sec-600);
|
||||
outline: 2px solid var(--clr-sec-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility focus-frame {
|
||||
:is(.clr-outline, &):focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: var(--clr-sec-600);
|
||||
outline: 2px solid var(--clr-sec-600);
|
||||
}
|
||||
|
||||
&:has(:focus-visible) {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: var(--clr-sec-600);
|
||||
outline: 2px solid var(--clr-sec-600);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -115,6 +108,7 @@
|
|||
@utility clr-text-controls {
|
||||
color: var(--clr-prim-800);
|
||||
background-color: transparent;
|
||||
|
||||
&:disabled {
|
||||
color: var(--clr-prim-600);
|
||||
}
|
||||
|
|
@ -140,10 +134,12 @@
|
|||
|
||||
@utility inline-icon {
|
||||
display: inline-block;
|
||||
font-size: 1.25rem;
|
||||
|
||||
margin-left: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
transform: translate(0, -0.2rem);
|
||||
|
||||
font-size: 1.25rem;
|
||||
color: var(--clr-sec-800);
|
||||
}
|
||||
|
||||
|
|
@ -219,11 +215,5 @@
|
|||
linear-gradient(to left, transparent, black calc(var(--mask-border-size))),
|
||||
linear-gradient(to right, transparent, black calc(var(--mask-border-size)));
|
||||
|
||||
-webkit-mask-image: linear-gradient(to top, transparent, black calc(var(--mask-border-size))),
|
||||
linear-gradient(to bottom, transparent, black calc(var(--mask-border-size))),
|
||||
linear-gradient(to left, transparent, black calc(var(--mask-border-size))),
|
||||
linear-gradient(to right, transparent, black calc(var(--mask-border-size)));
|
||||
|
||||
mask-composite: intersect;
|
||||
-webkit-mask-composite: destination-in;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user