mirror of
https://github.com/Bubberstation/Bubberstation.git
synced 2026-08-30 00:29:02 +01:00
d7d22f7c85
## About The Pull Request > [!IMPORTANT] > This PR need's a tgui-core v2 release > Until then, and until I'm sure everything is fine and I'm satisfied, PR will be in the draft. > Also TestMerge would be useful as there are quite a lot of changes and I might have made a mistake somewhere Moving all SCSS variables to 21th century technology - [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/var) All variables are taken from and depend on tgui-core. However, you are free to create completely new variables as well as tgui-core-dependent variables. This step gives you much more flexibility when creating themes and manipulating colors For more details, go [here](https://github.com/tgstation/tgui-core/pull/112) Also a few little things: - Links in chat got a new colors and no underline on hover - TGsay scrollbar replaced with thin default scrollbar ### Themes Some themes started to look a little different, as well as more coherent, since the replaced color changes in all components, not just the imported ones <details> <summary> Examples </summary> Terminal | Before | After | Before - KitchenSink | After - KitchenSink | - | - | - | - | |  |  |  |  | NTOS95 | Before | After | Before - KitchenSink | After - KitchenSink | - | - | - | - | |  |  |  |  | </details> These are not all the themes that have received improvements, but in the rest of them they are small There may also be bugs, so TestMerge is highly recommended ### TGchat unread counter I've made some changes into the chat tab unread coutner, you can see it bellow It now takes up no space in the tab and has absolute positioning in the top right corner  ### TODO - [x] Migrate all themes to CSS Variables - [x] Migrate all UI styles to CSS Variables - [x] _Test everything I can get with my hands on to make sure nothing is missing or broken_ Also, I think in the future it would be good to drop color.scss, base.scss and functions.scss files from the repository and use tgui-core files. ### Removed as unused style files I can't find any defined in it classes as used 1. PersonalCrafting.scss 2. TachyonArray.scss 3. UtilityModulesPane.scss ## Why It's Good For The Game All compiled styles have a much smaller size, as there is no need to use SCSS to compile themes, in fact it is enough just to change the values of variables It also gives you the ability to use custom cursors in themes if you override --cursor-xxx variables After all themes migration: 763kb -> 210kb tgui.bundle.css As well as more consistent colors in the theme and the ability to create MORE diverse themes, of varying degrees of complexity And... maybe... light theme for TGUI ## Changelog 🆑 refactor: All TGUI styles was migrated to CSS Variables, if you find something odd in styles, feel free to make an issue on GitHub /🆑 --------- Co-authored-by: jlsnow301 <jlsnow301@pm.me>
59 lines
1.9 KiB
JSON
59 lines
1.9 KiB
JSON
{
|
|
"private": true,
|
|
"name": "tgui-workspace",
|
|
"version": "6.0.0",
|
|
"packageManager": "yarn@4.8.1",
|
|
"workspaces": [
|
|
"packages/*"
|
|
],
|
|
"scripts": {
|
|
"tgui:analyze": "webpack --analyze",
|
|
"tgui:bench": "webpack --env TGUI_BENCH=1 && node packages/tgui-bench/index.js",
|
|
"tgui:build": "BROWSERSLIST_IGNORE_OLD_DATA=true webpack",
|
|
"tgui:dev": "node --experimental-modules packages/tgui-dev-server/index.js",
|
|
"tgui:lint": "eslint packages --ext .js,.cjs,.ts,.tsx",
|
|
"tgui:prettier": "prettier --check .",
|
|
"tgui:sonar": "eslint packages -c .eslintrc-sonar.yml",
|
|
"tgui:test": "jest --watch",
|
|
"tgui:test-simple": "CI=true jest --color",
|
|
"tgui:test-ci": "CI=true jest --color --collect-coverage",
|
|
"tgui:tsc": "tsc",
|
|
"tgui:prettier-fix": "prettier --write .",
|
|
"tgui:eslint-fix": "eslint --fix packages --ext .js,.cjs,.ts,.jsx,.tsx"
|
|
},
|
|
"dependencies": {
|
|
"@swc/core": "^1.9.1",
|
|
"@swc/jest": "^0.2.37",
|
|
"@types/jest": "^29.5.14",
|
|
"@types/node": "^22.9.0",
|
|
"@types/webpack-env": "^1.18.5",
|
|
"@types/wicg-file-system-access": "^2023.10.5",
|
|
"@typescript-eslint/parser": "^8.13.0",
|
|
"@typescript-eslint/utils": "^8.13.0",
|
|
"css-loader": "^7.1.2",
|
|
"esbuild-loader": "^4.2.2",
|
|
"eslint": "^8.57.0",
|
|
"eslint-config-prettier": "^9.1.0",
|
|
"eslint-plugin-react": "^7.34.1",
|
|
"eslint-plugin-simple-import-sort": "^12.0.0",
|
|
"eslint-plugin-sonarjs": "^0.25.0",
|
|
"eslint-plugin-unused-imports": "^3.1.0",
|
|
"file-loader": "^6.2.0",
|
|
"jest": "^29.7.0",
|
|
"jest-circus": "^29.7.0",
|
|
"jest-environment-jsdom": "^29.7.0",
|
|
"jsdom": "^25.0.1",
|
|
"mini-css-extract-plugin": "^2.9.2",
|
|
"prettier": "^3.2.5",
|
|
"sass": "^1.80.6",
|
|
"sass-loader": "^16.0.3",
|
|
"style-loader": "^4.0.0",
|
|
"swc-loader": "^0.2.6",
|
|
"typescript": "^5.6.3",
|
|
"url-loader": "^4.1.1",
|
|
"webpack": "^5.96.1",
|
|
"webpack-bundle-analyzer": "^4.10.2",
|
|
"webpack-cli": "^5.1.4"
|
|
}
|
|
}
|