Skip to content

Commit

Permalink
Update Sveltia UI
Browse files Browse the repository at this point in the history
  • Loading branch information
kyoshino committed Jul 17, 2023
1 parent 8f2b19a commit 05427a9
Show file tree
Hide file tree
Showing 28 changed files with 94 additions and 94 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
},
"dependencies": {
"@ltd/j-toml": "^1.38.0",
"@sveltia/ui": "^0.5.0",
"@sveltia/ui": "^0.6.0",
"fast-deep-equal": "^3.1.3",
"flat": "^5.0.2",
"isomorphic-dompurify": "^1.8.0",
Expand Down
8 changes: 4 additions & 4 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
z-index: 100;
display: flex;
flex-direction: column;
background-color: var(--primary-background-color);
background-color: var(--sui-primary-background-color);
.row {
flex: auto;
Expand All @@ -43,7 +43,7 @@
.preview {
flex: auto;
overflow: hidden;
border-right: 1px solid var(--primary-border-color);
border-right: 1px solid var(--sui-primary-border-color);
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/lib/components/assets/shared/drop-zone.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@
position: absolute;
inset: 0;
z-index: 10;
background-color: hsl(var(--background-color-4-hsl) / 80%);
background-color: hsl(var(--sui-background-color-4-hsl) / 80%);
backdrop-filter: blur(8px);
pointer-events: none;
Expand All @@ -137,10 +137,10 @@
display: flex;
justify-content: center;
align-items: center;
font-size: var(--font-size--xxx-large);
font-size: var(--sui-font-size-xxx-large);
border-width: 8px;
border-style: dashed;
border-color: var(--primary-accent-color-foreground);
border-color: var(--sui-primary-accent-color-foreground);
border-radius: 8px;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/assets/shared/info-panel.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@
.preview {
overflow: hidden;
margin: 0 0 16px;
border-radius: var(--control--medium--border-radius);
border-radius: var(--sui-control-medium-border-radius);
aspect-ratio: 1 / 1;
}
Expand Down
6 changes: 3 additions & 3 deletions src/lib/components/assets/shared/simple-image-grid.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
:global(.option) {
:global(button) {
border-radius: var(--control--medium--border-radius);
border-radius: var(--sui-control-medium-border-radius);
padding: 4px;
width: 100%;
height: auto;
Expand All @@ -30,7 +30,7 @@
:global(img),
:global(video) {
flex: none;
border-radius: var(--control--medium--border-radius);
border-radius: var(--sui-control-medium-border-radius);
aspect-ratio: 1 / 1;
object-fit: contain;
}
Expand All @@ -39,7 +39,7 @@
:global(button[aria-selected='true']) {
outline-width: 4px;
outline-style: solid;
outline-color: var(--primary-accent-color);
outline-color: var(--sui-primary-accent-color);
:global(.icon) {
display: none;
Expand Down
8 changes: 4 additions & 4 deletions src/lib/components/assets/shared/upload-assets-preview.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,14 @@
height: 48px;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--control--medium--border-radius);
border-radius: var(--sui-control-medium-border-radius);
}
.image {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--tertiary-background-color);
background-color: var(--sui-tertiary-background-color);
}
.meta {
Expand All @@ -80,8 +80,8 @@
gap: 4px;
.size {
font-size: var(--font-size--small);
color: var(--secondary-foreground-color);
font-size: var(--sui-font-size-small);
color: var(--sui-secondary-foreground-color);
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions src/lib/components/common/basic-grid-view.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: var(--secondary-border-color);
border-radius: var(--control--medium--border-radius);
border-color: var(--sui-secondary-border-color);
border-radius: var(--sui-control-medium-border-radius);
padding: 0;
height: auto;
aspect-ratio: 1 / 1;
Expand All @@ -48,7 +48,7 @@
inset: auto 0 0 0;
z-index: 1;
padding: 16px 16px 16px 16px;
background-color: hsl(var(--background-color-4-hsl) / 80%);
background-color: hsl(var(--sui-background-color-4-hsl) / 80%);
:global(span) {
display: -webkit-box;
Expand All @@ -67,7 +67,7 @@
}
:global([role='row'][aria-selected='true']) {
border-color: var(--primary-accent-color);
border-color: var(--sui-primary-accent-color);
}
}
</style>
12 changes: 6 additions & 6 deletions src/lib/components/common/basic-list-view.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
}
:global([role='row']:hover) {
background-color: var(--highlight-background-color);
background-color: var(--sui-highlight-background-color);
}
:global([role='gridcell']) {
Expand All @@ -32,7 +32,7 @@
height: 40px;
padding: 0 8px;
max-width: 100%;
color: var(--secondary-foreground-color);
color: var(--sui-secondary-foreground-color);
white-space: nowrap;
:global(.label) {
Expand All @@ -51,7 +51,7 @@
:global([role='row'] [role='gridcell']) {
border-width: 1px 0 0;
border-color: var(--control-border-color);
border-color: var(--sui-control-border-color);
}
:global([role='row']:last-child [role='gridcell']) {
Expand All @@ -64,21 +64,21 @@
:global([role='gridcell'].title) {
width: 100%; // flex: auto
color: var(--primary-foreground-color);
color: var(--sui-primary-foreground-color);
}
:global([role='gridcell'].image) {
width: 32px;
:global(img) {
background-color: var(--primary-accent-color-foreground);
background-color: var(--sui-primary-accent-color-foreground);
}
:global(img),
:global(video) {
width: 32px;
height: 32px;
border-radius: var(--control--medium--border-radius);
border-radius: var(--sui-control-medium-border-radius);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/common/image.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
width: 100%;
height: 100%;
object-fit: contain;
background-color: var(--tertiary-background-color);
background-color: var(--sui-tertiary-background-color);
&.cover {
object-fit: cover;
Expand Down
22 changes: 11 additions & 11 deletions src/lib/components/common/page-container.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,9 @@
flex: none;
width: 240px;
overflow-y: auto;
background-color: var(--tertiary-background-color);
background-color: var(--sui-tertiary-background-color);
border-width: 0 1px 0 0;
border-color: var(--primary-border-color);
border-color: var(--sui-primary-border-color);
:global([role='radiogroup']) {
width: 100%;
Expand All @@ -87,7 +87,7 @@
:global(button) {
display: flex;
justify-content: flex-start;
border-radius: var(--control--medium--border-radius);
border-radius: var(--sui-control-medium-border-radius);
padding: 0 12px;
height: 32px;
width: 100%;
Expand Down Expand Up @@ -117,13 +117,13 @@
}
:global([role='option'][aria-selected='true']) {
color: var(--highlight-foreground-color);
background-color: var(--highlight-background-color);
color: var(--sui-highlight-foreground-color);
background-color: var(--sui-highlight-background-color);
}
:global([role='option'].dragover) {
color: var(--primary-accent-color-foreground) !important;
background-color: var(--primary-accent-color) !important;
color: var(--sui-primary-accent-color-foreground) !important;
background-color: var(--sui-primary-accent-color) !important;
}
}
}
Expand All @@ -140,20 +140,20 @@
}
:global(.primary:not(.global)[role='toolbar']) {
background-color: var(--tertiary-background-color);
background-color: var(--sui-tertiary-background-color);
}
:global(.secondary[role='toolbar']) {
border-width: 0 0 1px;
border-color: var(--primary-border-color);
border-color: var(--sui-primary-border-color);
}
:global(.list-container) {
flex: auto;
overflow-y: auto;
overscroll-behavior-y: contain;
padding: 16px;
border-radius: var(--control--medium--border-radius);
border-radius: var(--sui-control-medium-border-radius);
}
}
Expand All @@ -173,7 +173,7 @@
flex: none;
overflow: auto;
width: 320px;
border-left: 1px solid var(--primary-border-color);
border-left: 1px solid var(--sui-primary-border-color);
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/lib/components/contents/details/column-header.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -112,19 +112,19 @@
<style lang="scss">
.header {
flex: none !important;
background-color: var(--tertiary-background-color);
background-color: var(--sui-tertiary-background-color);
& > :global([role='toolbar']) {
margin-right: auto;
margin-left: auto;
max-width: 800px;
:global(h3) {
font-size: var(--font-size--default);
font-size: var(--sui-font-size-default);
}
:global(button.error) {
color: var(--error-foreground-color);
color: var(--sui-error-foreground-color);
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@
z-index: 100;
display: flex;
flex-direction: column;
background-color: var(--primary-background-color);
background-color: var(--sui-primary-background-color);
.cols {
flex: auto;
Expand All @@ -173,7 +173,7 @@
&:first-child:not(:last-child) {
border-width: 0 1px 0 0;
border-color: var(--primary-border-color);
border-color: var(--sui-primary-border-color);
}
& > :global(.content) {
Expand Down
Loading

0 comments on commit 05427a9

Please sign in to comment.