refactor to light-dark colors.

This commit is contained in:
Vixalie
2025-03-08 10:41:29 +08:00
parent 1d69513955
commit 33905e9007
12 changed files with 434 additions and 187 deletions

View File

@@ -3,6 +3,9 @@
flex: 2;
border-radius: calc(var(--border-radius) * 2);
padding: calc(var(--spacing) * 2);
background-color: var(--color-dark-surface-container);
background-color: light-dark(
var(--color-light-surface-container),
var(--color-dark-surface-container)
);
}
}

View File

@@ -24,8 +24,8 @@
padding-inline: calc(var(--spacing) * 2);
padding-block: calc(var(--spacing) * 3);
border-radius: calc(var(--border-radius) * 2);
background-color: var(--color-dark-surface);
color: var(--color-dark-on-surface);
background-color: light-dark(var(--color-light-surface), var(--color-dark-surface));
color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
display: flex;
flex-direction: row;
align-items: center;
@@ -37,14 +37,20 @@
text-overflow: ellipsis;
}
&:hover {
background-color: color-mix(in oklch, var(--color-dark-on-surface) 8%, transparent);
background-color: light-dark(
color-mix(in oklch, var(--color-light-on-surface) 8%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 8%, transparent)
);
}
}
.empty_prompt {
padding-block: calc(var(--spacing) * 1);
text-align: center;
font-size: calc(var(--font-size) * 0.8);
color: var(--color-dark-on-surface-variant);
color: light-dark(
var(--color-light-on-surface-variant),
var(--color-dark-on-surface-variant)
);
}
}
}

View File

@@ -0,0 +1,16 @@
@layer pages {
.pattern_header {
flex: 0 0;
display: flex;
flex-direction: row;
align-items: center;
gap: calc(var(--spacing) * 2);
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
border-radius: calc(var(--border-radius) * 2);
color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
background-color: light-dark(
var(--color-light-surface-container),
var(--color-dark-surface-container)
);
}
}

View File

@@ -2,6 +2,9 @@
.pattern_detail {
flex: 2;
border-radius: calc(var(--border-radius) * 2);
background-color: var(--color-dark-surface-container);
background-color: light-dark(
var(--color-light-surface-container),
var(--color-dark-surface-container)
);
}
}

View File

@@ -5,6 +5,9 @@
overflow: hidden;
flex: 1;
border-radius: calc(var(--border-radius) * 2);
background-color: var(--color-dark-surface-container);
background-color: light-dark(
var(--color-light-surface-container),
var(--color-dark-surface-container)
);
}
}

View File

@@ -3,7 +3,10 @@
flex: 1;
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
border-radius: calc(var(--border-radius) * 2);
background-color: var(--color-dark-surface-container);
background-color: light-dark(
var(--color-light-surface-container),
var(--color-dark-surface-container)
);
display: flex;
flex-direction: column;
gap: calc(var(--spacing));