robonen/lorem-blog
1
0
Fork 0
mirror of https://github.com/robonen/lorem-blog.git synced 2026-03-20 02:44:39 +00:00
Code Activity

feat(styles): enhance CSS variables for theming and add new color definitions

Browse Source
This commit is contained in:
Andrew Robonen
2025-06-15 15:38:40 +07:00
parent e528230264
commit 268a6f6f42
4 changed files with 58 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -8,6 +8,7 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<div id="teleports"></div>
<script type="module" src="/src/app/main.ts"></script> <script type="module" src="/src/app/main.ts"></script>
</body> </body>
</html> </html>

2
package.json
View File

@@ -12,6 +12,8 @@
"lint:check": "eslint ." "lint:check": "eslint ."
}, },
"dependencies": { "dependencies": {
"@robonen/stdlib": "^0.0.7",
"@robonen/vue": "^0.0.7",
"@tailwindcss/vite": "^4.1.8", "@tailwindcss/vite": "^4.1.8",
"tailwindcss": "^4.1.8", "tailwindcss": "^4.1.8",
"vue": "^3.5.13", "vue": "^3.5.13",

22
pnpm-lock.yaml generated
View File

@@ -8,6 +8,12 @@ importers:
.: .:
dependencies: dependencies:
'@robonen/stdlib':
specifier: ^0.0.7
version: 0.0.7
'@robonen/vue':
specifier: ^0.0.7
version: 0.0.7(typescript@5.8.3)
'@tailwindcss/vite': '@tailwindcss/vite':
specifier: ^4.1.8 specifier: ^4.1.8
version: 4.1.8(vite@6.3.5(@types/node@22.15.31)(jiti@2.4.2)(lightningcss@1.30.1)(yaml@2.8.0)) version: 4.1.8(vite@6.3.5(@types/node@22.15.31)(jiti@2.4.2)(lightningcss@1.30.1)(yaml@2.8.0))
@@ -458,10 +464,18 @@ packages:
resolution: {integrity: sha512-YLT9Zo3oNPJoBjBc4q8G2mjU4tqIbf5CEOORbUUr48dCD9q3umJ3IPlVqOqDakPfd2HuwccBaqlGhN4Gmr5OWg==} resolution: {integrity: sha512-YLT9Zo3oNPJoBjBc4q8G2mjU4tqIbf5CEOORbUUr48dCD9q3umJ3IPlVqOqDakPfd2HuwccBaqlGhN4Gmr5OWg==}
engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
'@robonen/stdlib@0.0.7':
resolution: {integrity: sha512-qoRFWceq0XO6n9LTSfu8oH+3zsdX76rJB+k2BoN+8/M/TT8zVE8NuHsJ6Xe5NrOZ42P1lbf7U56fNFgOMepq/A==}
engines: {node: '>=22.15.0'}
'@robonen/tsconfig@0.0.2': '@robonen/tsconfig@0.0.2':
resolution: {integrity: sha512-0Mt2EVY/eZ9iZDkrrvy+Ui3nP9Xb4TSO+9sCvlumU/GkVY6hZU7M+v9l5m8puBdtbj1MglgY0x9OSzUeyYx90Q==} resolution: {integrity: sha512-0Mt2EVY/eZ9iZDkrrvy+Ui3nP9Xb4TSO+9sCvlumU/GkVY6hZU7M+v9l5m8puBdtbj1MglgY0x9OSzUeyYx90Q==}
engines: {node: '>=22.16.0'} engines: {node: '>=22.16.0'}
'@robonen/vue@0.0.7':
resolution: {integrity: sha512-GrvqFsCwoAJb+NBbEPz7U+SIEE3dWaOmL1Sqe8+Rk6yYkFNMeAKAoN0Jk6oujxmgDIVi5NISmXMxnkI/4cbvIA==}
engines: {node: '>=22.15.0'}
'@rollup/rollup-android-arm-eabi@4.42.0': '@rollup/rollup-android-arm-eabi@4.42.0':
resolution: {integrity: sha512-gldmAyS9hpj+H6LpRNlcjQWbuKUtb94lodB9uCz71Jm+7BxK1VIOo7y62tZZwxhA7j1ylv/yQz080L5WkS+LoQ==} resolution: {integrity: sha512-gldmAyS9hpj+H6LpRNlcjQWbuKUtb94lodB9uCz71Jm+7BxK1VIOo7y62tZZwxhA7j1ylv/yQz080L5WkS+LoQ==}
cpu: [arm] cpu: [arm]
@@ -2715,8 +2729,16 @@ snapshots:
'@pkgr/core@0.2.7': {} '@pkgr/core@0.2.7': {}
'@robonen/stdlib@0.0.7': {}
'@robonen/tsconfig@0.0.2': {} '@robonen/tsconfig@0.0.2': {}
'@robonen/vue@0.0.7(typescript@5.8.3)':
dependencies:
vue: 3.5.16(typescript@5.8.3)
transitivePeerDependencies:
- typescript
'@rollup/rollup-android-arm-eabi@4.42.0': '@rollup/rollup-android-arm-eabi@4.42.0':
optional: true optional: true

34
src/app/assets/index.css
View File

@@ -21,23 +21,55 @@
--primary-dark: oklch(61% 0.1815 255.36); --primary-dark: oklch(61% 0.1815 255.36);
--primary-light: oklch(96% 0.0148 251.16); --primary-light: oklch(96% 0.0148 251.16);
--danger: oklch(64% 0.2107 11.41);
/* Default theme */ /* Default theme */
--background: var(--gray-200); --background: var(--gray-200);
--foreground: var(--black); --foreground: var(--black);
--surface: var(--white);
--surface-foreground: var(--black);
} }
.dark { .dark {
--background: var(--black); --background: var(--black);
--foreground: var(--white); --foreground: var(--white);
--surface: var(--black);
--surface-foreground: var(--white);
} }
@theme inline { @theme inline {
--gray-100: var(--gray-100);
--gray-200: var(--gray-200);
--gray-300: var(--gray-300);
--gray-400: var(--gray-400);
--gray-500: var(--gray-500);
--gray-600: var(--gray-600);
--gray-700: var(--gray-700);
--gray-800: var(--gray-800);
--gray-900: var(--gray-900);
--color-primary: var(--primary);
--color-primary-dark: var(--primary-dark);
--color-primary-light: var(--primary-light);
--color-danger: var(--danger);
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--color-primary: var(--primary); --color-foreground-muted: var(--gray-600);
--color-foreground-muted-light: var(--gray-500);
--color-surface: var(--surface);
--color-surface-foreground: var(--surface-foreground);
} }
@layer base { @layer base {
html {
scrollbar-gutter: stable;
}
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }