quentin_duwa/dinggadingga-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update depedencies and adding custom colors

Browse Source
This commit is contained in:
MastersGame
2026-06-11 10:40:55 +02:00
parent 8efa4eab12
commit 25c3de6c65
8 changed files with 1126 additions and 1099 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2037
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

44
package.json
View File

@@ -21,32 +21,32 @@
},
"private": true,
"dependencies": {
"@angular/common": "^20.1.0",
"@angular/compiler": "^20.1.0",
"@angular/core": "^20.1.0",
"@angular/forms": "^20.1.0",
"@angular/platform-browser": "^20.1.0",
"@angular/platform-server": "^20.1.0",
"@angular/router": "^20.1.0",
"@angular/ssr": "^20.1.5",
"@qd/qd-design": "^0.1.0",
"express": "^5.1.0",
"rxjs": "~7.8.0",
"@angular/common": "^22.0.1",
"@angular/compiler": "^22.0.1",
"@angular/core": "^22.0.1",
"@angular/forms": "^22.0.1",
"@angular/platform-browser": "^22.0.1",
"@angular/platform-server": "^22.0.1",
"@angular/router": "^22.0.1",
"@angular/ssr": "^22.0.1",
"@qd/qd-design": "^0.1.2",
"express": "^5.2.1",
"rxjs": "~7.8.2",
"tslib": "^2.3.0"
},
"devDependencies": {
"@angular/build": "^20.1.5",
"@angular/cli": "^20.1.5",
"@angular/compiler-cli": "^20.1.0",
"@types/express": "^5.0.1",
"@types/jasmine": "~5.1.0",
"@types/node": "^20.17.19",
"jasmine-core": "~5.8.0",
"karma": "~6.4.0",
"@angular/build": "^22.0.1",
"@angular/cli": "^22.0.1",
"@angular/compiler-cli": "^22.0.1",
"@types/express": "~5.0.3",
"@types/jasmine": "~6.0.0",
"@types/node": "^25.9.3",
"jasmine-core": "~6.3.0",
"karma": "~6.4.4",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-coverage": "~2.2.1",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.8.2"
"karma-jasmine-html-reporter": "~2.2.0",
"typescript": "~6.0.3"
}
}

17
src/styles.css Normal file
View File

@@ -0,0 +1,17 @@
/* Error: Can't find stylesheet to import.
* ,
* 5 | @forward "@qd/qd-design/src/styles/qd_design_system";
* | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
* '
* styles.scss 5:1 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
"Droid Sans Mono", monospace, monospace;
white-space: pre;
display: block;
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
content: "Error: Can't find stylesheet to import.\a \2577 \a 5 \2502 @forward \"@qd/qd-design/src/styles/qd_design_system\";\d\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a styles.scss 5:1 root stylesheet";
}

21
src/styles.scss
View File

@@ -1 +1,22 @@
/* You can add global styles to this file, and also import other style files */
@use "./styles/colors/light-theme";
@use './styles/colors/dark-theme';
@forward "@qd/qd-design/src/styles/qd_design_system";
body {
background: var(--md-sys-color-surface);
@include light-theme.light-theme-colors-tokens;
transition: background-color 0.33s, color 0.33s;
}
@media (prefers-color-scheme: dark) {
body:not(.light-theme) {
@include dark-theme.dark-theme-colors-tokens;
}
}
body.dark-theme {
@include dark-theme.dark-theme-colors-tokens;
}

51
src/styles/colors/dark-theme.scss Normal file
View File

@@ -0,0 +1,51 @@
@mixin dark-theme-colors-tokens {
--md-sys-color-primary: rgb(255 179 174);
--md-sys-color-surface-tint: rgb(255 179 174);
--md-sys-color-on-primary: rgb(87 29 28);
--md-sys-color-primary-container: rgb(115 51 49);
--md-sys-color-on-primary-container: rgb(255 218 215);
--md-sys-color-secondary: rgb(231 189 186);
--md-sys-color-on-secondary: rgb(68 41 40);
--md-sys-color-secondary-container: rgb(93 63 61);
--md-sys-color-on-secondary-container: rgb(255 218 215);
--md-sys-color-tertiary: rgb(226 194 140);
--md-sys-color-on-tertiary: rgb(64 45 5);
--md-sys-color-tertiary-container: rgb(89 67 25);
--md-sys-color-on-tertiary-container: rgb(255 222 168);
--md-sys-color-error: rgb(255 180 171);
--md-sys-color-on-error: rgb(105 0 5);
--md-sys-color-error-container: rgb(147 0 10);
--md-sys-color-on-error-container: rgb(255 218 214);
--md-sys-color-background: rgb(26 17 17);
--md-sys-color-on-background: rgb(241 222 221);
--md-sys-color-surface: rgb(26 17 17);
--md-sys-color-on-surface: rgb(241 222 221);
--md-sys-color-surface-variant: rgb(83 67 66);
--md-sys-color-on-surface-variant: rgb(216 194 192);
--md-sys-color-outline: rgb(160 140 139);
--md-sys-color-outline-variant: rgb(83 67 66);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(241 222 221);
--md-sys-color-inverse-on-surface: rgb(56 46 45);
--md-sys-color-inverse-primary: rgb(144 74 71);
--md-sys-color-primary-fixed: rgb(255 218 215);
--md-sys-color-on-primary-fixed: rgb(59 8 9);
--md-sys-color-primary-fixed-dim: rgb(255 179 174);
--md-sys-color-on-primary-fixed-variant: rgb(115 51 49);
--md-sys-color-secondary-fixed: rgb(255 218 215);
--md-sys-color-on-secondary-fixed: rgb(44 21 20);
--md-sys-color-secondary-fixed-dim: rgb(231 189 186);
--md-sys-color-on-secondary-fixed-variant: rgb(93 63 61);
--md-sys-color-tertiary-fixed: rgb(255 222 168);
--md-sys-color-on-tertiary-fixed: rgb(39 25 0);
--md-sys-color-tertiary-fixed-dim: rgb(226 194 140);
--md-sys-color-on-tertiary-fixed-variant: rgb(89 67 25);
--md-sys-color-surface-dim: rgb(26 17 17);
--md-sys-color-surface-bright: rgb(66 55 54);
--md-sys-color-surface-container-lowest: rgb(20 12 12);
--md-sys-color-surface-container-low: rgb(35 25 25);
--md-sys-color-surface-container: rgb(39 29 29);
--md-sys-color-surface-container-high: rgb(50 40 39);
--md-sys-color-surface-container-highest: rgb(61 50 49);
}

3
src/styles/colors/light-theme.css Normal file
View File

@@ -0,0 +1,3 @@
/*# sourceMappingURL=light-theme.css.map */

1
src/styles/colors/light-theme.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"light-theme.css"}

51
src/styles/colors/light-theme.scss Normal file
View File

@@ -0,0 +1,51 @@
@mixin light-theme-colors-tokens {
--md-sys-color-primary: rgb(144 74 71);
--md-sys-color-surface-tint: rgb(144 74 71);
--md-sys-color-on-primary: rgb(255 255 255);
--md-sys-color-primary-container: rgb(255 218 215);
--md-sys-color-on-primary-container: rgb(115 51 49);
--md-sys-color-secondary: rgb(119 86 84);
--md-sys-color-on-secondary: rgb(255 255 255);
--md-sys-color-secondary-container: rgb(255 218 215);
--md-sys-color-on-secondary-container: rgb(93 63 61);
--md-sys-color-tertiary: rgb(115 91 46);
--md-sys-color-on-tertiary: rgb(255 255 255);
--md-sys-color-tertiary-container: rgb(255 222 168);
--md-sys-color-on-tertiary-container: rgb(89 67 25);
--md-sys-color-error: rgb(186 26 26);
--md-sys-color-on-error: rgb(255 255 255);
--md-sys-color-error-container: rgb(255 218 214);
--md-sys-color-on-error-container: rgb(147 0 10);
--md-sys-color-background: rgb(255 248 247);
--md-sys-color-on-background: rgb(35 25 25);
--md-sys-color-surface: rgb(255 248 247);
--md-sys-color-on-surface: rgb(35 25 25);
--md-sys-color-surface-variant: rgb(244 221 219);
--md-sys-color-on-surface-variant: rgb(83 67 66);
--md-sys-color-outline: rgb(133 115 113);
--md-sys-color-outline-variant: rgb(216 194 192);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(56 46 45);
--md-sys-color-inverse-on-surface: rgb(255 237 235);
--md-sys-color-inverse-primary: rgb(255 179 174);
--md-sys-color-primary-fixed: rgb(255 218 215);
--md-sys-color-on-primary-fixed: rgb(59 8 9);
--md-sys-color-primary-fixed-dim: rgb(255 179 174);
--md-sys-color-on-primary-fixed-variant: rgb(115 51 49);
--md-sys-color-secondary-fixed: rgb(255 218 215);
--md-sys-color-on-secondary-fixed: rgb(44 21 20);
--md-sys-color-secondary-fixed-dim: rgb(231 189 186);
--md-sys-color-on-secondary-fixed-variant: rgb(93 63 61);
--md-sys-color-tertiary-fixed: rgb(255 222 168);
--md-sys-color-on-tertiary-fixed: rgb(39 25 0);
--md-sys-color-tertiary-fixed-dim: rgb(226 194 140);
--md-sys-color-on-tertiary-fixed-variant: rgb(89 67 25);
--md-sys-color-surface-dim: rgb(232 214 212);
--md-sys-color-surface-bright: rgb(255 248 247);
--md-sys-color-surface-container-lowest: rgb(255 255 255);
--md-sys-color-surface-container-low: rgb(255 240 239);
--md-sys-color-surface-container: rgb(252 234 232);
--md-sys-color-surface-container-high: rgb(246 228 226);
--md-sys-color-surface-container-highest: rgb(241 222 221);
}