refactor(Style): add SASS to reduce style repetition

- Use list, maps and loops to reduce code duplication with small variations
- Use SASS functions for some extreme cases
- Keep native CSS variables to allow overriding/reference in other
  styles

refactor(Style): change css theme variables to SASS

add sass files from catppuccin to the project instead of importing it from NPM

refactor(Style): use SASS functions to reduce code boilerplate
This commit is contained in:
Alexander Navarro 2024-03-13 11:45:24 -03:00
parent d52de9bc59
commit daa5eb27b6
14 changed files with 579 additions and 694 deletions

30
pnpm-lock.yaml generated
View file

@ -19,13 +19,16 @@ dependencies:
version: 18.2.17
astro:
specifier: ^4.0.6
version: 4.0.6(typescript@5.2.2)
version: 4.0.6(sass@1.71.1)(typescript@5.2.2)
react:
specifier: ^18.0.0
version: 18.2.0
react-dom:
specifier: ^18.0.0
version: 18.2.0(react@18.2.0)
sass:
specifier: ^1.71.1
version: 1.71.1
sharp:
specifier: ^0.32.6
version: 0.32.6
@ -1142,7 +1145,7 @@ packages:
'@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.3)
'@types/babel__core': 7.20.5
react-refresh: 0.14.0
vite: 5.0.7
vite: 5.0.7(sass@1.71.1)
transitivePeerDependencies:
- supports-color
dev: false
@ -1372,7 +1375,7 @@ packages:
engines: {node: '>=8'}
dev: true
/astro@4.0.6(typescript@5.2.2):
/astro@4.0.6(sass@1.71.1)(typescript@5.2.2):
resolution: {integrity: sha512-P7CfFqWKzkJozzF6IoOC6qoI2ONndV8P3ULhGDgMiXPL7xVkWI5haTBSpyrcjBx643tVXspIRsSV/v+Cx+CjGw==}
engines: {node: '>=18.14.1', npm: '>=6.14.0'}
hasBin: true
@ -1433,7 +1436,7 @@ packages:
tsconfck: 3.0.0(typescript@5.2.2)
unist-util-visit: 5.0.0
vfile: 6.0.1
vite: 5.0.7
vite: 5.0.7(sass@1.71.1)
vitefu: 0.2.5(vite@5.0.7)
which-pm: 2.1.1
yargs-parser: 21.1.1
@ -3198,6 +3201,10 @@ packages:
engines: {node: '>= 4'}
dev: true
/immutable@4.3.5:
resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
dev: false
/import-fresh@3.3.0:
resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
engines: {node: '>=6'}
@ -5031,6 +5038,16 @@ packages:
suf-log: 2.5.3
dev: true
/sass@1.71.1:
resolution: {integrity: sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==}
engines: {node: '>=14.0.0'}
hasBin: true
dependencies:
chokidar: 3.5.3
immutable: 4.3.5
source-map-js: 1.0.2
dev: false
/sax@1.3.0:
resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
dev: false
@ -5815,7 +5832,7 @@ packages:
vfile-message: 4.0.2
dev: false
/vite@5.0.7:
/vite@5.0.7(sass@1.71.1):
resolution: {integrity: sha512-B4T4rJCDPihrQo2B+h1MbeGL/k/GMAHzhQ8S0LjQ142s6/+l3hHTT095ORvsshj4QCkoWu3Xtmob5mazvakaOw==}
engines: {node: ^18.0.0 || >=20.0.0}
hasBin: true
@ -5846,6 +5863,7 @@ packages:
esbuild: 0.19.8
postcss: 8.4.32
rollup: 4.7.0
sass: 1.71.1
optionalDependencies:
fsevents: 2.3.3
dev: false
@ -5858,7 +5876,7 @@ packages:
vite:
optional: true
dependencies:
vite: 5.0.7
vite: 5.0.7(sass@1.71.1)
dev: false
/vscode-languageserver-textdocument@1.0.11: