xt/pylib-solid
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

enhance(style):调整PostCSS配置以及全局主题配置。

Browse Source
This commit is contained in:
徐涛 2023-12-24 20:34:43 +08:00
parent 15037988ff
commit 58477778c9
4 changed files with 66 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
postcss.config.js
View File

@ -6,7 +6,9 @@ export default {
"postcss-advanced-variables": {},
"postcss-custom-properties": {},
"postcss-color-mod-function": {},
"postcss-utilities": {},
"postcss-utilities": {
centerMethod: "flexbox",
},
lost: {},
precss: {},
"postcss-preset-env": {

19
src/mixins.css
View File

@ -8,11 +8,24 @@
$direction: row,
$justify: flex-start,
$align: flex-start,
$gap: 0
$gap: --space-none
) {
display: flex;
display: block flex;
flex-direction: $direction;
justify-content: $justify;
align-items: $align;
gap: $gap;
gap: var($gap);
}
@mixin inline-flex(
$direction: row,
$justify: flex-start,
$align: flex-start,
$gap: --spacing-none
) {
display: inline flex;
flex-direction: $direction;
justify-content: $justify;
align-items: $align;
gap: var($gap);
}

5
src/styles.css
View File

@ -30,6 +30,7 @@
}
body {
font-size: var(--font-size-m);
background-color: rgba(219, 219, 219, 0.05);
@include dark-mode {
background-color: rgba(36, 36, 36, 0.05);
@ -42,3 +43,7 @@ body,
overflow: hidden;
user-select: none;
}
a {
text-decoration: none;
}

42
src/variables.css
View File

@ -18,6 +18,30 @@
--palette-pink: #f018e8;
--palette-blue-gray: #63687c;
--palette-indigo: #4c5897;
--palette-white: #ffffff;
--palette-black: #000000;
--palette-white-0: var(--palette-white);
--palette-white-1: color-mod(var(--palette-white) shade(10%));
--palette-white-2: color-mod(var(--palette-white) shade(20%));
--palette-white-3: color-mod(var(--palette-white) shade(30%));
--palette-white-4: color-mod(var(--palette-white) shade(40%));
--palette-white-5: color-mod(var(--palette-white) shade(50%));
--palette-white-6: color-mod(var(--palette-white) shade(60%));
--palette-white-7: color-mod(var(--palette-white) shade(70%));
--palette-white-8: color-mod(var(--palette-white) shade(80%));
--palette-white-9: color-mod(var(--palette-white) shade(90%));
--palette-black-0: color-mod(var(--palette-black) tint(90%));
--palette-black-1: color-mod(var(--palette-black) tint(80%));
--palette-black-2: color-mod(var(--palette-black) tint(70%));
--palette-black-3: color-mod(var(--palette-black) tint(60%));
--palette-black-4: color-mod(var(--palette-black) tint(50%));
--palette-black-5: color-mod(var(--palette-black) tint(40%));
--palette-black-6: color-mod(var(--palette-black) tint(30%));
--palette-black-7: color-mod(var(--palette-black) tint(20%));
--palette-black-8: color-mod(var(--palette-black) tint(10%));
--palette-black-9: var(--palette-black);
--palette-gray-0: color-mod(var(--palette-gray) tint(60%));
--palette-gray-1: color-mod(var(--palette-gray) tint(50%));
@ -184,6 +208,7 @@
--palette-indigo-8: color-mod(var(--palette-indigo) shade(20%));
--palette-indigo-9: color-mod(var(--palette-indigo) shade(30%));
--spacing-none: 0;
--spacing-xxs: 0.25rem;
--spacing-xs: 0.5rem;
--spacing-s: 0.75rem;
@ -191,4 +216,21 @@
--spacing-l: 1.5rem;
--spacing-xl: 2rem;
--spacing-xxl: 3rem;
--border-radius-none: 0;
--border-radius-xxs: 2px;
--border-radius-xs: 4px;
--border-radius-s: 6px;
--border-radius-m: 8px;
--border-radius-l: 12px;
--border-radius-xl: 16px;
--border-radius-xxl: 24px;
--font-size-xxs: 0.5rem;
--font-size-xs: 0.65rem;
--font-size-s: 0.875rem;
--font-size-m: 1rem;
--font-size-l: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-xxl: 2rem;
}