Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feat-pink-v2' into fix-feedback-changes

Browse Source 
# Conflicts:
#	package.json
#	pnpm-lock.yaml
This commit is contained in:
ernstmul
2025-03-03 15:11:19 +01:00
parent d079632c9c 3eec8e2767
commit d5a93d411d
83 changed files with 558 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -2
View File
@@ -21,9 +21,9 @@
"dependencies": {
"@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb",
"@appwrite.io/pink-icons": "0.25.0",
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a ",
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553 ",
"@appwrite.io/pink-legacy": "^1.0.2",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@92f19f5",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@2d87f553",
"@popperjs/core": "^2.11.8",
"@sentry/sveltekit": "^8.38.0",
"@stripe/stripe-js": "^3.5.0",
pnpm-lock.yaml
Generated
+14 -14
View File
@@ -15,14 +15,14 @@ importers:
specifier: 0.25.0
version: 0.25.0
'@appwrite.io/pink-icons-svelte':
specifier: 'https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a '
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a(svelte@4.2.19)
specifier: 'https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553 '
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553(svelte@4.2.19)
'@appwrite.io/pink-legacy':
specifier: ^1.0.2
version: 1.0.2
'@appwrite.io/pink-svelte':
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@92f19f5
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@92f19f5(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@2d87f553
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@2d87f553(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
'@popperjs/core':
specifier: ^2.11.8
version: 2.11.8
@@ -215,14 +215,14 @@ packages:
resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb}
version: 1.2.1
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@92f19f58b2d9458cb6eefc15e7085ae921e96286':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@92f19f58b2d9458cb6eefc15e7085ae921e96286}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553}
version: 1.0.0-next.7
peerDependencies:
svelte: ^4.0.0
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553a5c2deececd363f3ed4b15ec69894b6a':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553a5c2deececd363f3ed4b15ec69894b6a}
version: 1.0.0-next.7
peerDependencies:
svelte: ^4.0.0
@@ -236,8 +236,8 @@ packages:
'@appwrite.io/pink-legacy@1.0.2':
resolution: {integrity: sha512-1AYNcfbV+x0Tyj56CoieSq5g7+u+7F5/LDVN/z+Hx1kp9gj7xc1eT39Dy832xxfihImF6ksjp0FXEMVSBR8cew==}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@92f19f5':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@92f19f5}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@2d87f553':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@2d87f553}
version: 1.0.0-next.85
peerDependencies:
react-dom: ^18.0.0
@@ -4099,11 +4099,11 @@ snapshots:
'@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb': {}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@92f19f58b2d9458cb6eefc15e7085ae921e96286(svelte@4.2.19)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553(svelte@4.2.19)':
dependencies:
svelte: 4.2.19
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a(svelte@4.2.19)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553a5c2deececd363f3ed4b15ec69894b6a(svelte@4.2.19)':
dependencies:
svelte: 4.2.19
@@ -4116,9 +4116,9 @@ snapshots:
'@appwrite.io/pink-icons': 1.0.0
the-new-css-reset: 1.11.3
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@92f19f5(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@2d87f553(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
dependencies:
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@92f19f58b2d9458cb6eefc15e7085ae921e96286(svelte@4.2.19)
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553a5c2deececd363f3ed4b15ec69894b6a(svelte@4.2.19)
'@floating-ui/dom': 1.6.13
'@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19)
'@melt-ui/svelte': 0.86.3(svelte@4.2.19)
src/lib/charts/base.json
+19 -19
View File
@@ -1,20 +1,20 @@
{
"backgroundColor": "var(--color-bgcolor-neutral-primary)",
"backgroundColor": "var(--bgcolor-neutral-primary)",
"categoryAxis": {
"axisLine": {
"lineStyle": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
},
"show": true
},
"axisTick": {
"lineStyle": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
},
"show": true
},
"axisLabel": {
"color": "var(--color-fgcolor-neutral-tertiary)",
"color": "var(--fgcolor-neutral-tertiary)",
"show": true
},
"splitLine": {
@@ -26,12 +26,12 @@
},
"valueAxis": {
"axisLabel": {
"color": "var(--color-fgcolor-neutral-tertiary)",
"color": "var(--fgcolor-neutral-tertiary)",
"show": true
},
"splitLine": {
"lineStyle": {
"color": ["var(--color-border-neutral)"]
"color": ["var(--border-neutral)"]
},
"show": true
},
@@ -48,23 +48,23 @@
"logAxis": {
"axisLine": {
"lineStyle": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
},
"show": true
},
"axisTick": {
"lineStyle": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
},
"show": true
},
"axisLabel": {
"color": "var(--color-fgcolor-neutral-tertiary)",
"color": "var(--fgcolor-neutral-tertiary)",
"show": true
},
"splitLine": {
"lineStyle": {
"color": ["var(--color-border-neutral)"]
"color": ["var(--border-neutral)"]
},
"show": true
},
@@ -75,23 +75,23 @@
"timeAxis": {
"axisLine": {
"lineStyle": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
},
"show": true
},
"axisTick": {
"lineStyle": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
},
"show": true
},
"axisLabel": {
"color": "var(--color-fgcolor-neutral-tertiary)",
"color": "var(--fgcolor-neutral-tertiary)",
"show": true
},
"splitLine": {
"lineStyle": {
"color": ["var(--color-border-neutral)"]
"color": ["var(--border-neutral)"]
},
"show": true
},
@@ -100,18 +100,18 @@
}
},
"tooltip": {
"backgroundColor": "var(--color-bgcolor-neutral-primary)",
"borderColor": "var(--color-border-neutral)",
"backgroundColor": "var(--bgcolor-neutral-primary)",
"borderColor": "var(--border-neutral)",
"textStyle": {
"color": "var(--color-fgcolor-neutral-secondary)"
"color": "var(--fgcolor-neutral-secondary)"
},
"axisPointer": {
"lineStyle": {
"color": "var(--color-border-neutral-strong)",
"color": "var(--border-neutral-strong)",
"width": 1
},
"crossStyle": {
"color": "var(--color-border-neutral-strong)",
"color": "var(--border-neutral-strong)",
"width": 1
}
}
src/lib/charts/dark.json
+3 -3
View File
@@ -120,10 +120,10 @@
"color": "#444444"
}
},
"backgroundColor": "var(--color-bgcolor-neutral-primary)",
"borderColor": "var(--color-border-neutral)",
"backgroundColor": "var(--bgcolor-neutral-primary)",
"borderColor": "var(--border-neutral)",
"textStyle": {
"color": "var(--color-fgcolor-neutral-secondary)"
"color": "var(--fgcolor-neutral-secondary)"
}
},
"timeline": {
src/lib/charts/light.json
+19 -19
View File
@@ -1,82 +1,82 @@
{
"backgroundColor": "var(--color-bgcolor-neutral-primary)",
"backgroundColor": "var(--bgcolor-neutral-primary)",
"categoryAxis": {
"axisLine": {
"lineStyle": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
}
},
"axisTick": {
"lineStyle": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
}
},
"axisLabel": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
}
},
"valueAxis": {
"axisLabel": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
},
"splitLine": {
"lineStyle": {
"color": ["var(--color-border-neutral)"]
"color": ["var(--border-neutral)"]
}
}
},
"logAxis": {
"axisLine": {
"lineStyle": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
}
},
"axisTick": {
"lineStyle": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
}
},
"axisLabel": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
},
"splitLine": {
"lineStyle": {
"color": ["var(--color-border-neutral)"]
"color": ["var(--border-neutral)"]
}
}
},
"timeAxis": {
"axisLine": {
"lineStyle": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
}
},
"axisTick": {
"lineStyle": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
}
},
"axisLabel": {
"color": "var(--color-fgcolor-neutral-tertiary)"
"color": "var(--fgcolor-neutral-tertiary)"
},
"splitLine": {
"lineStyle": {
"color": ["var(--color-border-neutral)"]
"color": ["var(--border-neutral)"]
}
}
},
"tooltip": {
"backgroundColor": "var(--color-bgcolor-neutral-primary)",
"borderColor": "var(--color-border-neutral)",
"backgroundColor": "var(--bgcolor-neutral-primary)",
"borderColor": "var(--border-neutral)",
"textStyle": {
"color": "var(--color-fgcolor-neutral-secondary)"
"color": "var(--fgcolor-neutral-secondary)"
},
"axisPointer": {
"lineStyle": {
"color": "var(--color-border-neutral-strong)"
"color": "var(--border-neutral-strong)"
},
"crossStyle": {
"color": "var(--color-border-neutral-strong)"
"color": "var(--border-neutral-strong)"
}
}
}
src/lib/commandCenter/panels/root.svelte
+3 -3
View File
@@ -68,9 +68,9 @@
src={`${base}/icons/${$app.themeInUse}/color/${command.image}.svg`}
alt={command.label} />
{:else if command.icon}
<Icon icon={command.icon} size="s" color="--color-fgcolor-neutral-tertiary" />
<Icon icon={command.icon} size="s" color="--fgcolor-neutral-tertiary" />
{:else}
<Icon icon={IconArrowSmRight} size="s" color="--color-fgcolor-neutral-tertiary" />
<Icon icon={IconArrowSmRight} size="s" color="--fgcolor-neutral-tertiary" />
{/if}
<span>
{command.label}
@@ -103,7 +103,7 @@
<style>
.then {
color: var(--color-fgcolor-neutral-tertiary, #97979b);
color: var(--fgcolor-neutral-tertiary, #97979b);
font-size: var(--font-size-s, 14px);
font-weight: 400;
}
src/lib/commandCenter/panels/template.svelte
+15 -15
View File
@@ -300,12 +300,12 @@
<Icon
icon={item.icon}
size="s"
color="--color-fgcolor-neutral-tertiary" />
color="--fgcolor-neutral-tertiary" />
{:else}
<Icon
icon={IconArrowSmRight}
size="s"
color="--color-fgcolor-neutral-tertiary" />
color="--fgcolor-neutral-tertiary" />
{/if}
<span>
{item.label}
@@ -378,15 +378,15 @@
}
.card {
--cmd-center-bg: var(--color-bgcolor-neutral-primary, #fff);
--footer-bg: var(--color-bgcolor-neutral-primary, #fff);
--cmd-center-border: var(--color-border-neutral, #ededf0);
--result-bg: var(--color-overlay-neutral-hover, rgba(25, 25, 28, 0.03));
--kbd-bg: var(--color-overlay-on-neutral, rgba(0, 0, 0, 0.06));
--kbd-color: var(--color-fgcolor-neutral-secondary, #56565c);
--icon-color: var(--color-fgcolor-neutral-tertiary, #97979b);
--label-color: var(--color-fgColor-neutral-secondary, #56565c);
--crumb-color: var(--color-fgColor-neutral-secondary, #56565c);
--cmd-center-bg: var(--bgcolor-neutral-primary);
--footer-bg: var(--bgcolor-neutral-primary);
--cmd-center-border: var(--border-neutral);
--result-bg: var(--color-overlay-neutral-hover);
--kbd-bg: var(--color-overlay-on-neutral);
--kbd-color: var(--fgcolor-neutral-secondary);
--icon-color: var(--fgcolor-neutral-tertiary);
--label-color: var(--fgcolor-neutral-secondary);
--crumb-color: var(--fgcolor-neutral-secondary);
}
// Elements
@@ -432,7 +432,7 @@
align-items: center;
width: 100%;
border-bottom: 1px solid var(--color-border-neutral, #ededf0);
border-bottom: 1px solid var(--border-neutral, #ededf0);
font-size: 16px;
padding: 1rem;
@@ -480,7 +480,7 @@
padding: 1rem;
.group {
color: var(--color-fgcolor-neutral-secondary, #56565c);
color: var(--fgcolor-neutral-secondary, #56565c);
margin-inline-start: 0.25rem;
margin-block-end: 0.25rem;
position: relative;
@@ -548,7 +548,7 @@
content: '';
position: absolute;
left: -8px;
border-left: 1px solid var(--color-border-neutral, #ededf0);
border-left: 1px solid var(--border-neutral, #ededf0);
height: 100%;
}
}
@@ -558,7 +558,7 @@
.footer {
background: var(--footer-bg);
border-top: 1px solid var(--color-border-neutral, #ededf0);
border-top: 1px solid var(--border-neutral, #ededf0);
padding: 0.75rem 1rem;
}
src/lib/components/breadcrumbs.svelte
+10 -10
View File
@@ -194,7 +194,7 @@
>{#if selectedOrg?.tierName}<Badge
variant="secondary"
content={selectedOrg?.tierName} />{/if}</span>
<Icon icon={IconChevronDown} size="s" color="--color-fgcolor-neutral-secondary" />
<Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
</button>
{:else}
<button
@@ -208,7 +208,7 @@
>{selectedOrg?.name ?? 'Organization'}</span>
<span class="not-mobile"
><Badge variant="secondary" content={selectedOrg?.tierName ?? ''} /></span>
<Icon icon={IconChevronDown} size="s" color="--color-fgcolor-neutral-secondary" />
<Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
</button>
{/if}
@@ -372,7 +372,7 @@
overflow: hidden;
text-overflow: ellipsis;
max-width: 60px;
color: var(--color-fgcolor-neutral-secondary);
color: var(--fgcolor-neutral-secondary);
@media (min-width: 390px) {
max-width: 95px;
@@ -409,7 +409,7 @@
transition: color 0.2s ease;
color: var(--color-fgcolor-neutral-primary, #2d2d31);
color: var(--fgcolor-neutral-primary, #2d2d31);
border-radius: var(--corner-radius-medium, 8px);
cursor: default;
@@ -427,29 +427,29 @@
:global(.trigger[data-highlighted]) {
outline: none;
background: var(--color-bgcolor-neutral-secondary, #f4f4f7);
background: var(--bgcolor-neutral-secondary, #f4f4f7);
}
:global(.trigger[data-highlighted]:focus) {
outline: none;
box-shadow: 0 0 0 2px var(--color-bgcolor-neutral-secondary, #f4f4f7);
box-shadow: 0 0 0 2px var(--bgcolor-neutral-secondary, #f4f4f7);
}
.trigger:focus {
z-index: 30;
box-shadow:
var(--shadow-offsetx-0, 0px) var(--shadow-offsety-0, 0px) 0 2px
var(--color-bgcolor-neutral-default, #fafafb),
0 0 0 4px var(--color-border-focus, #818186);
var(--bgcolor-neutral-default, #fafafb),
0 0 0 4px var(--border-focus, #818186);
}
.separator {
height: 1px;
margin-block: 2px;
margin-inline-start: calc(var(--base-4) * -1);
width: calc(100% + var(--base-8));
background-color: var(--color-border-neutral);
background-color: var(--border-neutral);
}
.breadcrumb-separator {
color: var(--color-fgcolor-neutral-tertiary, #97979b);
color: var(--fgcolor-neutral-tertiary, #97979b);
}
</style>
src/lib/components/customId.svelte
+1 -1
View File
@@ -28,7 +28,7 @@
<Card.Base
variant="secondary"
padding="s"
--input-background-color="var(--color-bgcolor-neutral-primary)">
--input-background-color="var(--bgcolor-neutral-primary)">
<Layout.Stack gap="xl">
<Layout.Stack gap="s">
<Layout.Stack direction="row" justifyContent="space-between" alignContent="center">
src/lib/components/filePicker.svelte
+3 -3
View File
@@ -446,7 +446,7 @@
<article
style:--card-bg-color="transparent"
style:--shadow-small="none"
style:--color-border="var(--color-neutral-15)"
style:--border="var(--color-neutral-15)"
class="card u-grid u-cross-center u-width-full-line common-section is-border-dashed">
<div
class="u-flex u-flex-vertical u-cross-center u-gap-24 u-overflow-hidden">
@@ -476,7 +476,7 @@
noMedia
--card-bg-color="transparent"
--shadow-small="none"
--color-border="var(--color-neutral-15)">
--border="var(--color-neutral-15)">
<div class="common-section">
<div class="u-text-center common-section">
<Typography.Title size="s">
@@ -505,7 +505,7 @@
noMedia
--card-bg-color="transparent"
--shadow-small="none"
--color-border="var(--color-neutral-15)">
--border="var(--color-neutral-15)">
<div class="u-text-center u-flex-vertical u-cross-center u-gap-24">
<Typography.Title size="s">No buckets found</Typography.Title>
<Button
src/lib/components/filters/filters.svelte
+1 -1
View File
@@ -239,7 +239,7 @@
hr {
height: 1px;
width: calc(100% + 2rem);
background-color: hsl(var(--color-border));
background-color: hsl(var(--border));
margin-block-start: 1rem;
margin-inline: -1rem;
src/lib/components/git/repositories.svelte
+3 -3
View File
@@ -183,20 +183,20 @@
<Layout.Stack gap="s" direction="row" alignItems="center">
<Typography.Text
truncate
color="--color-fgcolor-neutral-secondary">
color="--fgcolor-neutral-secondary">
{repo.name}
</Typography.Text>
{#if repo.private}
<Icon
size="s"
icon={IconLockClosed}
color="--color-fgcolor-neutral-tertiary" />
color="--fgcolor-neutral-tertiary" />
{/if}
<time datetime={repo.pushedAt}>
<Typography.Caption
variant="400"
truncate
color="--color-fgcolor-neutral-tertiary">
color="--fgcolor-neutral-tertiary">
{timeFromNow(repo.pushedAt)}
</Typography.Caption>
</time>
src/lib/components/navbar.svelte
+2 -2
View File
@@ -374,8 +374,8 @@
align-items: center;
gap: var(--space-4, 8px);
border-radius: var(--border-radius-xs, 6px);
border: var(--border-width-s, 1px) solid var(--color-border-neutral-strong, #d8d8db);
background: var(--color-bgcolor-neutral-primary, #fff);
border: var(--border-width-s, 1px) solid var(--border-neutral-strong, #d8d8db);
background: var(--bgcolor-neutral-primary, #fff);
cursor: pointer;
}
src/lib/components/paginator.svelte
+1 -1
View File
@@ -17,7 +17,7 @@
{#if !hideFooter}
<Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-secondary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
Total results: {total}
</Typography.Text>
<div>
src/lib/components/permissions/team.svelte
+1 -1
View File
@@ -96,7 +96,7 @@
<Typography.Caption variant="400">Text</Typography.Caption>
<Typography.Caption
variant="400"
color="--color-fgcolor-neutral-tertiary">
color="--fgcolor-neutral-tertiary">
Secondary Text
</Typography.Caption>
</Layout.Stack>
src/lib/components/permissions/user.svelte
+3 -3
View File
@@ -105,7 +105,7 @@
>{user.name}</Typography.Caption>
<Typography.Caption
variant="400"
color="--color-fgcolor-neutral-tertiary">
color="--fgcolor-neutral-tertiary">
{user.$id}
</Typography.Caption>
</Layout.Stack>
@@ -120,7 +120,7 @@
: user.phone}</Typography.Caption>
<Typography.Caption
variant="400"
color="--color-fgcolor-neutral-tertiary">
color="--fgcolor-neutral-tertiary">
{user.$id}
</Typography.Caption>
</Layout.Stack>
@@ -134,7 +134,7 @@
>{user.name ? user.name : '-'}</Typography.Caption>
<Typography.Caption
variant="400"
color="--color-fgcolor-neutral-tertiary">
color="--fgcolor-neutral-tertiary">
{user.$id}
</Typography.Caption>
</Layout.Stack>
src/lib/components/searchQuery.svelte
+1 -1
View File
@@ -64,7 +64,7 @@
{disabled}
{required}
bind:value={search}
--color-bgcolor-neutral-default="var(--color-bgcolor-neutral-primary)">
--bgcolor-neutral-default="var(--bgcolor-neutral-primary)">
<svelte:fragment slot="start">
<Icon icon={IconSearch} />
</svelte:fragment>
src/lib/components/sidebar.svelte
+23 -25
View File
@@ -95,7 +95,7 @@
state = 'closed';
sideBarIsOpen = false;
}}>
<Icon icon={IconSearch} color="--color-fgcolor-neutral-tertiary" />
<Icon icon={IconSearch} color="--fgcolor-neutral-tertiary" />
</Button.Button>
</div>
<Link.Button
@@ -121,11 +121,9 @@
</div>
{#if state !== 'icons'}
<div class="info" in:fade={{ delay: 200, duration: 200 }}>
<Typography.Text
variant="m-500"
color="--color-fgcolor-neutral-secondary"
<Typography.Text variant="m-500" color="--fgcolor-neutral-secondary"
>{progressCard.title}</Typography.Text>
<Typography.Text color="--color-fgcolor-neutral-secondary"
<Typography.Text color="--fgcolor-neutral-secondary"
>{progressCard.percentage}% complete</Typography.Text>
</div>
{/if}
@@ -358,47 +356,47 @@
.link-icon {
height: 16px;
color: var(--color-fgcolor-neutral-weak);
color: var(--fgcolor-neutral-weak);
transition: color 0.2s ease-in-out;
}
&:hover {
background: var(--color-bgcolor-neutral-secondary, #f4f4f7);
background: var(--bgcolor-neutral-secondary);
.link-icon {
color: var(--color-fgcolor-neutral-tertiary);
color: var(--fgcolor-neutral-tertiary);
}
}
&:focus-visible {
background: var(--color-bgcolor-neutral-secondary, #f4f4f7);
background: var(--bgcolor-neutral-secondary);
/* box-shadow/state/focus */
box-shadow:
var(--shadow-offsetx-0, 0px) var(--shadow-offsety-0, 0px) 0 2px
var(--color-bgcolor-neutral-default, #fafafb),
0px 0px 0px 4px var(--color-border-focus, #818186);
var(--bgcolor-neutral-default, #fafafb),
0px 0px 0px 4px var(--border-focus, #818186);
}
&:active {
background: var(--color-bgcolor-neutral-secondary, #f4f4f7);
background: var(--bgcolor-neutral-secondary, #f4f4f7);
.link-text {
color: var(--color-fgcolor-neutral-primary);
color: var(--fgcolor-neutral-primary);
}
.link-icon {
color: var(--color-fgcolor-neutral-tertiary);
color: var(--fgcolor-neutral-tertiary);
}
}
}
.active {
background: var(--color-bgcolor-neutral-secondary, #f4f4f7);
background: var(--bgcolor-neutral-secondary, #f4f4f7);
.link-text {
color: var(--color-fgcolor-neutral-primary);
color: var(--fgcolor-neutral-primary);
}
.link-icon {
color: var(--color-fgcolor-neutral-tertiary);
color: var(--fgcolor-neutral-tertiary);
}
}
@@ -417,7 +415,7 @@
transition-behavior: allow-discrete;
opacity: 1;
visibility: visible;
color: var(--color-fgcolor-neutral-secondary, #56565c);
color: var(--fgcolor-neutral-secondary, #56565c);
filter: blur(0);
&.has-text {
@@ -457,8 +455,8 @@
align-items: center;
margin-bottom: var(--gap-s, 8px);
border-bottom: var(--border-width-s, 1px) solid var(--color-border-neutral, #ededf0);
background: var(--color-bgcolor-neutral-primary, #fff);
border-bottom: var(--border-width-s, 1px) solid var(--border-neutral, #ededf0);
background: var(--bgcolor-neutral-primary, #fff);
}
.products-label-container {
@@ -477,11 +475,11 @@
.products-label {
font-size: var(--font-size-xs);
color: var(--color-fgcolor-neutral-tertiary);
color: var(--fgcolor-neutral-tertiary);
}
.products-label-indicator {
border-bottom: 1px solid var(--color-border-neutral);
border-bottom: 1px solid var(--border-neutral);
height: 1px;
width: 18px;
align-self: center;
@@ -526,8 +524,8 @@
margin-block-end: var(--space-6, 12px);
align-self: stretch;
border-radius: var(--border-radius-s, 8px);
border: 1px solid var(--color-border-neutral, #ededf0);
background: var(--color-bgcolor-neutral-default, #fafafb);
border: 1px solid var(--border-neutral, #ededf0);
background: var(--bgcolor-neutral-default, #fafafb);
transition: all 0.2s ease-in-out;
@media (min-width: 1024px) {
@@ -582,7 +580,7 @@
height: calc(100vh - 48px);
display: flex;
justify-content: flex-end;
background-color: var(--color-bgcolor-neutral-primary, #fff);
background-color: var(--bgcolor-neutral-primary, #fff);
z-index: 14;
position: fixed;
top: 48px;
src/lib/components/support.svelte
+3 -3
View File
@@ -175,12 +175,12 @@
:global(.theme-dark .support-option-card) {
/* override required due to the card's background color */
background: var(--color-bgcolor-neutral-default, #19191c) !important;
background: var(--bgcolor-neutral-default, #19191c) !important;
}
:global(.theme-light .support-option-card) {
border: 1px solid var(--color-border-neutral, #ededf0);
border: 1px solid var(--border-neutral, #ededf0);
/* override required due to the card's background color */
background: var(--color-bgcolor-neutral-default, #fafafb) !important;
background: var(--bgcolor-neutral-default, #fafafb) !important;
}
</style>
src/lib/components/usageCard.svelte
+2 -2
View File
@@ -8,12 +8,12 @@
<Card radius="s" padding="xs" isTile>
<Layout.Stack gap="xxxs">
<Typography.Caption variant="400" color="--color-fgcolor-neutral-tertiary">
<Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
{description}
</Typography.Caption>
<slot>
{#if value !== null && value !== undefined}
<Typography.Text size="s" truncate color="--color-fgcolor-neutral-primary"
<Typography.Text size="s" truncate color="--fgcolor-neutral-primary"
>{value}</Typography.Text>
{:else}
<Skeleton variant="line" width={100} height={19.5} />
src/lib/components/viewSelector.svelte
+1 -1
View File
@@ -115,7 +115,7 @@
{#if !hideView}
<ToggleButton
--color-bgcolor-neutral-default="var(--color-bgcolor-neutral-primary)"
--bgcolor-neutral-default="var(--bgcolor-neutral-primary)"
on:change={onViewChange}
active={view}
buttons={[
src/lib/layout/cover.svelte
+2 -2
View File
@@ -23,8 +23,8 @@
container-type: inline-size;
padding-block-start: var(--base-32);
padding-block-end: var(--base-16);
border-bottom: 1px solid var(--color-border-neutral, #2d2d31);
background: var(--color-bgcolor-neutral-primary, #1d1d21);
border-bottom: 1px solid var(--border-neutral, #2d2d31);
background: var(--bgcolor-neutral-primary, #1d1d21);
margin-left: -190px;
padding-left: 190px;
}
src/lib/layout/coverTitle.svelte
+1 -4
View File
@@ -13,9 +13,6 @@
</Button.Anchor>
</span>
{/if}
<Typography.Title
truncate
color="--color-fgcolor-neutral-primary"
size={$isSmallViewport ? 'm' : 'l'}>
<Typography.Title truncate color="--fgcolor-neutral-primary" size={$isSmallViewport ? 'm' : 'l'}>
<slot />
</Typography.Title>
src/lib/layout/usage.svelte
+1 -1
View File
@@ -84,7 +84,7 @@
<Layout.Stack gap="s">
<div
style:max-width="250px"
style:--input-background-color="var(--color-bgcolor-neutral-primary)">
style:--input-background-color="var(--bgcolor-neutral-primary)">
<InputSelect
on:change={(e) => goto(`${path}/${e.detail}`)}
id="period"
src/lib/layout/wizardCover.svelte
+1 -1
View File
@@ -60,6 +60,6 @@
height: 100%;
max-height: 100vh;
overflow-y: auto;
background: var(--color-bgcolor-neutral-primary);
background: var(--bgcolor-neutral-primary);
}
</style>
src/routes/(console)/(migration-wizard)/resource-form.svelte
+2 -2
View File
@@ -418,7 +418,7 @@
height: 1.5rem;
flex-shrink: 0;
border-radius: 100%;
border: 1px solid hsl(var(--color-border));
border: 1px solid hsl(var(--border));
position: relative;
i {
@@ -431,7 +431,7 @@
}
.buttons-list {
border-block-end: 1px solid hsl(var(--color-border));
border-block-end: 1px solid hsl(var(--border));
padding-block-end: 0.625rem;
}
src/routes/(console)/onboarding/create-project/+page.svelte
+2 -2
View File
@@ -202,13 +202,13 @@
@use '@appwrite.io/pink-legacy/src/abstract/variables/devices';
:global(body) {
background: var(--color-bgcolor-neutral-default, #19191c);
background: var(--bgcolor-neutral-default, #19191c);
}
.page-container {
width: calc(100% - 2rem);
margin: 0 1rem;
gap: 4.5rem;
background: var(--color-bgcolor-neutral-default, #19191c);
background: var(--bgcolor-neutral-default, #19191c);
@media #{devices.$break2open} {
width: 700px;
src/routes/(console)/onboarding/create-project/loading.svelte
+8 -8
View File
@@ -196,7 +196,7 @@
<style lang="scss">
:global(.theme-dark) {
--icon-content-background-color: var(--color-bgcolor-neutral-primary, #1d1d21);
--icon-content-background-color: var(--bgcolor-neutral-primary, #1d1d21);
--icon-content-border-color: var(--color-overlay-skeleton);
--icon-container-background-color: #242427;
--icon-container-border-color: rgba(255, 255, 255, 0.02);
@@ -216,7 +216,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--color-fgcolor-neutral-primary, #2d2d31);
color: var(--fgcolor-neutral-primary, #2d2d31);
--animation-type: cubic-bezier(0.77, 0, 0.175, 1);
--icon-colorize-animation-duration: 0.3s; // duration of icons going from gray to colorized
@@ -393,10 +393,10 @@
}
.border-right {
border-right: 1px solid var(--color-border-neutral);
border-right: 1px solid var(--border-neutral);
}
.border-bottom {
border-bottom: 1px solid var(--color-border-neutral);
border-bottom: 1px solid var(--border-neutral);
grid-column: 1/8;
@media (min-width: 768px) {
grid-column: 1/10;
@@ -406,7 +406,7 @@
.vertical-fade-top {
background: linear-gradient(
to bottom,
var(--color-bgcolor-neutral-default, #19191c) 0%,
var(--bgcolor-neutral-default, #19191c) 0%,
transparent 100%
);
grid-column: 1/8;
@@ -417,7 +417,7 @@
.vertical-fade-bottom {
background: linear-gradient(
to top,
var(--color-bgcolor-neutral-default, #19191c) 0%,
var(--bgcolor-neutral-default, #19191c) 0%,
transparent 100%
);
grid-column: 1/8;
@@ -428,14 +428,14 @@
.horizontal-fade-left {
background: linear-gradient(
to right,
var(--color-bgcolor-neutral-default, #19191c) 0%,
var(--bgcolor-neutral-default, #19191c) 0%,
transparent 100%
);
}
.horizontal-fade-right {
background: linear-gradient(
to left,
var(--color-bgcolor-neutral-default, #19191c) 0%,
var(--bgcolor-neutral-default, #19191c) 0%,
transparent 100%
);
grid-column-start: 7;
src/routes/(console)/organization-[organization]/domains/recordsCard.svelte
+2 -2
View File
@@ -94,8 +94,8 @@
{/each}
</Table.Root>
<Layout.Stack gap="s" direction="row" alignItems="center">
<Icon icon={IconInfo} size="s" color="--color-fgcolor-neutral-secondary" />
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-secondary">
<Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />
<Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
A list of all domain providers and their DNS setting is available <Link
variant="muted"
href="#">here</Link
src/routes/(console)/organization-[organization]/header.svelte
+1 -1
View File
@@ -92,7 +92,7 @@
<svelte:fragment slot="header">
<span class="u-flex u-cross-center u-gap-8 u-min-width-0">
<span class="u-trim">
<Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
<Typography.Title color="--fgcolor-neutral-primary" size="xl"
>{$organization.name}</Typography.Title>
</span>
{#if isCloud && $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
src/routes/(console)/project-[project]/auth/header.svelte
+1 -1
View File
@@ -52,7 +52,7 @@
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--color-fgcolor-neutral-primary" size="xl">Auth</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size="xl">Auth</Typography.Title>
</svelte:fragment>
<Tabs>
{#each tabs as tab}
src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
+4 -4
View File
@@ -323,7 +323,7 @@
.u-border-vertical {
width: 1px;
height: 34px;
background-color: hsl(var(--color-border));
background-color: hsl(var(--border));
}
:global(.small-ellipse) {
@@ -349,7 +349,7 @@
.policy-card-item-padding {
padding: var(--space-3, 6px) var(--space-4, 8px);
border-block-end: solid 0.0625rem hsl(var(--color-border));
border-block-end: solid 0.0625rem hsl(var(--border));
}
.policy-card-item-padding:last-child {
@@ -377,7 +377,7 @@
}
:global(.theme-light .policy-item-subtitles) {
color: var(--color-fgColor-neutral-secondary, #56565c);
color: var(--fgcolor-neutral-secondary, #56565c);
}
:global(.theme-light .policy-item-caption) {
@@ -435,7 +435,7 @@
.policy-card-item-padding[data-visible='true'][data-show-every='true']:nth-child(3):not(
:last-child
) {
border-block-end: solid 0.0625rem hsl(var(--color-border));
border-block-end: solid 0.0625rem hsl(var(--border));
}
.policy-card-item-padding[data-visible='true'][data-show-every='true']:nth-child(3)
src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeItem.svelte
+1 -1
View File
@@ -50,7 +50,7 @@
<Layout.Stack direction="row" alignContent="space-between">
<Layout.Stack gap="xxs" direction="row" alignItems="center">
<Typography.Text variant="m-500">{label}</Typography.Text>
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
{getAttributeType(attribute)}
</Typography.Text>
</Layout.Stack>
src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
+1 -1
View File
@@ -101,7 +101,7 @@
<Layout.Stack direction="row" alignContent="space-between">
<Layout.Stack gap="xxs" direction="row" alignItems="center">
<Typography.Text variant="m-500">{label}</Typography.Text>
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
{optionalText}
</Typography.Text>
</Layout.Stack>
src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
+13 -13
View File
@@ -38,7 +38,7 @@
<a
href={`${base}/project-${project}/databases/database-${databaseId}`}
class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile is-selected">
<Icon icon={IconDatabase} size="s" color="--color-fgcolor-neutral-weak" />
<Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
{data.database.name}
</a>
<div class="collection-content">
@@ -54,7 +54,7 @@
<Icon
icon={IconTable}
size="s"
color="--color-fgcolor-neutral-weak" />
color="--fgcolor-neutral-weak" />
<span class="text collection-name" data-private
>{collection.name}</span>
</a>
@@ -136,7 +136,7 @@
.database-name {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-fgcolor-neutral-secondary);
color: var(--fgcolor-neutral-secondary);
}
.collection-content {
@@ -146,8 +146,8 @@
margin-bottom: auto;
padding-bottom: 16px;
scrollbar-width: thin;
scrollbar-color: var(--color-border-neutral, #ededf0) transparent;
color: var(--color-fgcolor-neutral-secondary, #56565c);
scrollbar-color: var(--border-neutral, #ededf0) transparent;
color: var(--fgcolor-neutral-secondary, #56565c);
&::-webkit-scrollbar {
width: 4px;
@@ -160,28 +160,28 @@
}
&::-webkit-scrollbar-thumb {
background: var(--color-border-neutral, #ededf0);
background: var(--border-neutral, #ededf0);
border-radius: 2px;
&:hover {
background: var(--color-border-neutral-emphasis, #dbdbdf);
background: var(--border-neutral-emphasis, #dbdbdf);
}
}
}
.drop-list {
border-left: 1px solid var(--color-border-neutral, #ededf0);
border-left: 1px solid var(--border-neutral, #ededf0);
flex: 1;
padding-left: 4px;
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-fgcolor-neutral-secondary);
color: var(--fgcolor-neutral-secondary);
.is-selected,
li:hover {
color: var(--color-fgcolor-neutral-primary);
color: var(--fgcolor-neutral-primary);
border-radius: var(--border-radius-xs, 4px);
background: var(--color-bgcolor-neutral-tertiary, #fafafb);
background: var(--bgcolor-neutral-tertiary, #fafafb);
}
.collection-name {
@@ -189,7 +189,7 @@
overflow: hidden;
text-overflow: ellipsis;
line-clamp: 1;
color: var(--color-fgcolor-neutral-secondary, #56565c);
color: var(--fgcolor-neutral-secondary, #56565c);
}
}
@@ -208,7 +208,7 @@
gap: var(--space-2, 4px);
transition: color 0.2s ease;
color: var(--color-fgcolor-neutral-secondary);
color: var(--fgcolor-neutral-secondary);
border-radius: var(--corner-radius-medium, 8px);
cursor: default;
src/routes/(console)/project-[project]/databases/header.svelte
+1 -2
View File
@@ -26,8 +26,7 @@
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
>Databases</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size="xl">Databases</Typography.Title>
</svelte:fragment>
<Tabs>
{#each tabs as tab}
src/routes/(console)/project-[project]/functions/function-[function]/+page.svelte
+1 -1
View File
@@ -256,7 +256,7 @@
</Button>
{#if $tags?.length}
<div
style="flex-basis:1px; background-color:hsl(var(--color-border)); width: 1px">
style="flex-basis:1px; background-color:hsl(var(--border)); width: 1px">
</div>
<Button text on:click={clearAll}>Clear all</Button>
{/if}
src/routes/(console)/project-[project]/functions/function-[function]/executions/+page.svelte
+1 -1
View File
@@ -205,7 +205,7 @@
</Button>
{#if $tags?.length}
<div
style="flex-basis: 1px; background-color: hsl(var(--color-border)); width: 1px;">
style="flex-basis: 1px; background-color: hsl(var(--border)); width: 1px;">
</div>
<Button text on:click={clearAll}>Clear All</Button>
{/if}
src/routes/(console)/project-[project]/functions/header.svelte
+1 -2
View File
@@ -25,8 +25,7 @@
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
>Functions</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size="xl">Functions</Typography.Title>
</svelte:fragment>
<Tabs>
src/routes/(console)/project-[project]/messaging/header.svelte
+1 -2
View File
@@ -31,8 +31,7 @@
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
>Messaging</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size="xl">Messaging</Typography.Title>
</svelte:fragment>
<Tabs>
{#each tabs as tab}
src/routes/(console)/project-[project]/messaging/providers/wizard/settings.svelte
+3 -3
View File
@@ -158,11 +158,11 @@
}
:global(.clickable-list) {
--color-border: var(--color-neutral-5);
--p-clickable-button-bg-color-hover: var(--color-border);
--border: var(--color-neutral-5);
--p-clickable-button-bg-color-hover: var(--border);
:global(.theme-dark) & {
--color-border: var(--color-neutral-85);
--border: var(--color-neutral-85);
}
}
src/routes/(console)/project-[project]/overview/header.svelte
+3 -3
View File
@@ -16,7 +16,7 @@
{#if !$page.url.pathname.includes('get-started')}
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--color-fgcolor-neutral-primary" size="xl">
<Typography.Title color="--fgcolor-neutral-primary" size="xl">
{$project?.name}
</Typography.Title>
<Id value={$project.$id}>{$project.$id}</Id>
@@ -31,13 +31,13 @@
alignItems={$isSmallViewport ? 'flex-start' : 'center'}
gap="xl">
<Layout.Stack direction="column" gap={$isSmallViewport ? 's' : 'xs'}>
<Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
<Typography.Title color="--fgcolor-neutral-primary" size="xl"
>{#if $user.name === $user.email}
Welcome to Appwrite
{:else}
Welcome, {$user.name}
{/if}</Typography.Title>
<Typography.Text size="m" color="--color-fgcolor-neutral-secondary"
<Typography.Text size="m" color="--fgcolor-neutral-secondary"
>Follow a few quick steps to get started with Appwrite</Typography.Text>
</Layout.Stack>
<div class="dashboard-header-button">
src/routes/(console)/project-[project]/overview/onboard.svelte
+10 -12
View File
@@ -79,7 +79,7 @@
<Step.List>
<Step.Item state="previous"
><div>
<Typography.Title color="--color-fgcolor-neutral-tertiary" size="s"
<Typography.Title color="--fgcolor-neutral-tertiary" size="s"
>Create project</Typography.Title>
</div></Step.Item>
<Step.Item state="current">
@@ -88,9 +88,8 @@
gap={$isSmallViewport ? 'xl' : 'xxl'}>
<div class="step-info">
<Layout.Stack gap="m">
<Typography.Title
color="--color-fgcolor-neutral-primary"
size="s">Connect your platform</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size="s"
>Connect your platform</Typography.Title>
<div class="build-info">
<span>
Start building with your preferred web, mobile, and
@@ -355,7 +354,7 @@
</Layout.Stack></Step.Item>
<Step.Item state="next"
><div>
<Typography.Title color="--color-fgcolor-neutral-tertiary" size="s"
<Typography.Title color="--fgcolor-neutral-tertiary" size="s"
>Build your app</Typography.Title>
</div></Step.Item>
</Step.List>
@@ -363,12 +362,12 @@
<Step.List>
<Step.Item state="previous"
><div>
<Typography.Title color="--color-fgcolor-neutral-tertiary" size="s"
<Typography.Title color="--fgcolor-neutral-tertiary" size="s"
>Create project</Typography.Title>
</div></Step.Item>
<Step.Item state="previous"
><div>
<Typography.Title color="--color-fgcolor-neutral-tertiary" size="s"
<Typography.Title color="--fgcolor-neutral-tertiary" size="s"
>Connect your platform</Typography.Title>
</div></Step.Item>
<Step.Item state="current">
@@ -377,9 +376,8 @@
gap={$isSmallViewport ? 'xl' : 'xxl'}>
<div class="step-info">
<Layout.Stack gap="m">
<Typography.Title
color="--color-fgcolor-neutral-primary"
size="s">Build your app</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size="s"
>Build your app</Typography.Title>
<div class="build-info">
<span>
Continue building your app by setting up services such
@@ -547,7 +545,7 @@
justifyContent="space-between">
<Typography.Text
size="m"
color="--color-fgcolor-neutral-secondary">
color="--fgcolor-neutral-secondary">
Join our Discord for support, tips and
product updates</Typography.Text>
<div class="arrow-icon arrow-icon-discord">
@@ -643,7 +641,7 @@
}
.arrow-icon {
color: var(--color-border-neutral-strong);
color: var(--border-neutral-strong);
display: none;
@media (min-width: 768px) {
display: flex;
src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte
+1 -1
View File
@@ -57,7 +57,7 @@
& .inner-card {
border: 0.54px solid rgba(237, 237, 240, 0.08);
background: var(--color-bgColor-neutral-primary, #1d1d21);
background: var(--bgcolor-neutral-primary, #1d1d21);
}
}
</style>
src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
+1 -3
View File
@@ -133,9 +133,7 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
gap="xs">
<Layout.Stack direction="row" alignItems="center" gap="s">
<Icon size="m" icon={IconAndroid} />
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
{$createPlatform.name} ({$createPlatform.key})
</Typography.Text>
</Layout.Stack>
src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
+1 -3
View File
@@ -161,9 +161,7 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject.client.config.endpoint}"
gap="xs">
<Layout.Stack direction="row" alignItems="center" gap="s">
<Icon size="m" icon={IconApple} />
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
{$createPlatform.name} ({$createPlatform.key})
</Typography.Text>
</Layout.Stack>
src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
+1 -3
View File
@@ -217,9 +217,7 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.e
gap="xs">
<Layout.Stack direction="row" alignItems="center" gap="s">
<Icon size="m" icon={IconFlutter} />
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
{$createPlatform.name} ({$createPlatform.key})
</Typography.Text>
</Layout.Stack>
src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
+1 -3
View File
@@ -187,9 +187,7 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}";
gap="xs">
<Layout.Stack direction="row" alignItems="center" gap="s">
<Icon size="m" icon={IconReact} />
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
{$createPlatform.name} ({$createPlatform.key})
</Typography.Text>
</Layout.Stack>
src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
+3 -3
View File
@@ -271,9 +271,9 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
><Layout.Stack direction="row" alignItems="center">
<Icon
icon={IconInfo}
color="--color-fgcolor-neutral-tertiary" /><Typography.Text
color="--fgcolor-neutral-tertiary" /><Typography.Text
variant="m-500"
color="--color-fgcolor-neutral-primary">
color="--fgcolor-neutral-primary">
Demo app runs on http://localhost:{selectedFramework.portNumber}</Typography.Text
></Layout.Stack>
<Button.Anchor
@@ -283,7 +283,7 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
><Layout.Stack direction="row" gap="xs"
>Open <Icon
icon={IconExternalLink}
color="--color-fgcolor-neutral-tertiary" /></Layout.Stack
color="--fgcolor-neutral-tertiary" /></Layout.Stack
></Button.Anchor
></Layout.Stack
></Card.Base>
src/routes/(console)/project-[project]/settings/header.svelte
+1 -2
View File
@@ -51,8 +51,7 @@
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
>Settings</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size="xl">Settings</Typography.Title>
</svelte:fragment>
<Tabs>
src/routes/(console)/project-[project]/settings/migrations/+page.svelte
+6 -21
View File
@@ -183,15 +183,12 @@
<Layout.Stack alignItems="center" gap="xl">
<Layout.Stack alignItems="center">
<AvatarGroup
--icon-fill="var(--color-fgcolor-neutral-tertiary)"
--icon-fill="var(--fgcolor-neutral-tertiary)"
icons={[IconUserGroup, IconDatabase, IconLightningBolt, IconFolder]}
size="s" />
<Arrow direction="down" />
<Avatar alt="appwrite" size="s">
<Icon
icon={IconCloud}
size="s"
color="--color-fgcolor-neutral-tertiary" />
<Icon icon={IconCloud} size="s" color="--fgcolor-neutral-tertiary" />
</Avatar>
</Layout.Stack>
<Button
@@ -217,17 +214,11 @@
<Layout.Stack alignItems="center" gap="xl">
<Layout.Stack direction="row" justifyContent="center" alignItems="center">
<Avatar alt="appwrite" size="s">
<Icon
icon={IconServer}
size="s"
color="--color-fgcolor-neutral-tertiary" />
<Icon icon={IconServer} size="s" color="--fgcolor-neutral-tertiary" />
</Avatar>
<Arrow direction="right" />
<Avatar alt="appwrite" size="s">
<Icon
icon={IconCloud}
size="s"
color="--color-fgcolor-neutral-tertiary" />
<Icon icon={IconCloud} size="s" color="--fgcolor-neutral-tertiary" />
</Avatar>
</Layout.Stack>
<div>
@@ -250,17 +241,11 @@
<Layout.Stack alignItems="center" gap="xl">
<Layout.Stack direction="row" justifyContent="center" alignItems="center">
<Avatar alt="appwrite" size="s">
<Icon
icon={IconCloud}
size="s"
color="--color-fgcolor-neutral-tertiary" />
<Icon icon={IconCloud} size="s" color="--fgcolor-neutral-tertiary" />
</Avatar>
<Arrow direction="right" />
<Avatar alt="appwrite" size="s">
<Icon
icon={IconServer}
size="s"
color="--color-fgcolor-neutral-tertiary" />
<Icon icon={IconServer} size="s" color="--fgcolor-neutral-tertiary" />
</Avatar>
</Layout.Stack>
<div>
src/routes/(console)/project-[project]/settings/migrations/details.svelte
+1 -1
View File
@@ -131,7 +131,7 @@
padding: 1.25rem;
&:not(:last-child) {
border-bottom: 1px solid hsl(var(--color-border));
border-bottom: 1px solid hsl(var(--border));
}
}
}
src/routes/(console)/project-[project]/sites/(components)/deploymentDomains.svelte
+2 -2
View File
@@ -14,7 +14,7 @@
<Link external href={`${$protocol}${domains.rules[0]?.domain}`} variant="muted">
<Layout.Stack gap="xxs" direction="row" alignItems="center">
<Trim alternativeTrim>
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
{domains.rules[0]?.domain}
</Typography.Text>
</Trim>
@@ -45,7 +45,7 @@
</Popover>
{/if}
{:else}
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
No domains available
</Typography.Text>
{/if}
src/routes/(console)/project-[project]/sites/(components)/logs.svelte
+1 -1
View File
@@ -81,7 +81,7 @@
{#if !hideTitle}
<Layout.Stack direction="row" justifyContent="space-between">
<Layout.Stack direction="row" alignItems="center" gap="s" inline>
<Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
Deployment logs
</Typography.Text>
<Badge
src/routes/(console)/project-[project]/sites/(components)/logsTimer.svelte
+2 -2
View File
@@ -11,14 +11,14 @@
<Layout.Stack direction="row" alignItems="center" inline>
{#if ['processing', 'building'].includes(status)}
<Typography.Code color="--color-fgcolor-neutral-secondary">
<Typography.Code color="--fgcolor-neutral-secondary">
<Layout.Stack direction="row" alignItems="center" inline>
<p use:timer={{ start: deployment.$createdAt }} />
<Spinner size="s" />
</Layout.Stack>
</Typography.Code>
{:else}
<Typography.Code color="--color-fgcolor-neutral-secondary">
<Typography.Code color="--fgcolor-neutral-secondary">
{formatTimeDetailed(deployment.buildTime)}
</Typography.Code>
{/if}
src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
+13 -33
View File
@@ -70,7 +70,7 @@
<Layout.Stack gap="xl">
<Layout.Stack direction="row" alignItems="flex-start">
<Layout.Stack gap="xxs">
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
Domains
</Typography.Text>
<DeploymentDomains domains={proxyRuleList} />
@@ -85,27 +85,19 @@
<Layout.Stack direction="row" gap="xl">
{#if deployment.status === 'failed'}
<Layout.Stack gap="xxs" inline>
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
Status
</Typography.Text>
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
<Status status={deployment.status} label={deployment.status} />
</Typography.Text>
</Layout.Stack>
{:else}
<Layout.Stack gap="xxs" inline>
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
Deployed
</Typography.Text>
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
<DeploymentCreatedBy {deployment} />
</Typography.Text>
</Layout.Stack>
@@ -116,36 +108,26 @@
<Layout.Stack gap="xxl" direction="row" wrap="wrap" inline>
{#if deployment?.buildTime}
<Layout.Stack gap="xxs" inline>
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
Build time
</Typography.Text>
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
{formatTimeDetailed(deployment.buildTime)}
</Typography.Text>
</Layout.Stack>
{/if}
<Layout.Stack gap="xxs" inline>
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
Total size
</Typography.Text>
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
{totalSize.value}{totalSize.unit}
</Typography.Text>
</Layout.Stack>
</Layout.Stack>
<Layout.Stack gap="xxl" direction="row" wrap="wrap" inline>
<Layout.Stack gap="xxs" inline>
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
<Layout.Stack direction="row" gap="xxs" alignItems="center">
Global CDN <Tooltip>
<Icon icon={IconInfo} size="s" />
@@ -165,9 +147,7 @@
</Layout.Stack>
</Layout.Stack>
<Layout.Stack gap="xxs" inline>
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
<Layout.Stack direction="row" gap="xxs" alignItems="center">
DDoS protection <Tooltip>
<Icon icon={IconInfo} size="s" />
@@ -189,10 +169,10 @@
</Layout.Stack>
</Layout.Stack>
<Layout.Stack gap="xxs">
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
Source
</Typography.Text>
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
<DeploymentSource {deployment} />
</Typography.Text>
</Layout.Stack>
src/routes/(console)/project-[project]/sites/create-site/aside.svelte
+7 -10
View File
@@ -22,8 +22,8 @@
<Layout.Stack gap="xxxs">
<Typography.Caption variant="400">Git repository</Typography.Caption>
<Layout.Stack gap="xxs" alignItems="center" direction="row">
<Icon size="s" icon={IconGithub} color="--color-fgcolor-neutral-primary" />
<Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
<Icon size="s" icon={IconGithub} color="--fgcolor-neutral-primary" />
<Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
{repositoryName}
</Typography.Text>
</Layout.Stack>
@@ -33,11 +33,8 @@
<Layout.Stack gap="xxxs">
<Typography.Caption variant="400">Branch</Typography.Caption>
<Layout.Stack gap="xxs" alignItems="center" direction="row">
<Icon
size="s"
icon={IconGitBranch}
color="--color-fgcolor-neutral-primary" />
<Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
<Icon size="s" icon={IconGitBranch} color="--fgcolor-neutral-primary" />
<Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
{branch}
</Typography.Text>
</Layout.Stack>
@@ -47,7 +44,7 @@
{#if rootDir && showAfter}
<Layout.Stack gap="xxxs">
<Typography.Caption variant="400">Root directory</Typography.Caption>
<Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
{rootDir}
</Typography.Text>
</Layout.Stack>
@@ -60,7 +57,7 @@
{#if frameworkIcon}
<SvgIcon iconSize="small" size={16} name={frameworkIcon} />
{/if}
<Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
{framework.name}
</Typography.Text>
</Layout.Stack>
@@ -71,7 +68,7 @@
<Layout.Stack gap="xxxs">
<Typography.Caption variant="400">Domain</Typography.Caption>
<Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
{#key domain}
<Trim alternativeTrim>
{$consoleVariables._APP_OPTIONS_FORCE_HTTPS
src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte
+2 -2
View File
@@ -25,7 +25,7 @@
iconSize="small"
size={16}
name={getFrameworkIcon(data.site.framework)} />
<Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
{data.site.name}
</Typography.Text>
<Tag variant="code" size="xs">{data.site.$id}</Tag>
@@ -47,7 +47,7 @@
<svelte:fragment slot="footer">
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
{#if ['processing', 'building'].includes(data.deployment.status)}
<Typography.Text variant="m-400" color="--color-fgColor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
Deployment will continue in the background
</Typography.Text>
{/if}
src/routes/(console)/project-[project]/sites/create-site/domain.svelte
+2 -2
View File
@@ -36,7 +36,7 @@
<Layout.Stack gap="s">
<InputText id="domain" placeholder="my-domain" bind:value={domain}>
<svelte:fragment slot="end">
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
.{$consoleVariables._APP_DOMAIN_SITES}
</Typography.Text>
</svelte:fragment>
@@ -64,7 +64,7 @@
{:else}
<Card isTile padding="s" radius="s">
<Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
<Layout.Stack direction="row" gap="s" alignItems="center">
<span class="icon-globe-alt"></span>
{domain}.{$consoleVariables._APP_DOMAIN_SITES}
src/routes/(console)/project-[project]/sites/create-site/finish/(components)/check.svelte
+3 -3
View File
@@ -15,7 +15,7 @@
cx="10"
cy="10"
r="8"
fill="var(--color-bgcolor-accent)"
fill="var(--bgcolor-accent)"
fill-opacity=".08"
in:fade={{ duration: 250, delay: 1000 }} />
<circle
@@ -25,7 +25,7 @@
cx="10"
cy="10"
r="8"
stroke="var(--color-bgcolor-accent)"
stroke="var(--bgcolor-accent)"
stroke-linecap="round"
stroke-linejoin="round"
stroke-opacity=".32"
@@ -33,7 +33,7 @@
</g>
<path
in:draw={{ duration: 1000 }}
stroke="var(--color-fgcolor-accent)"
stroke="var(--fgcolor-accent)"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.2"
src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
+4 -4
View File
@@ -80,7 +80,7 @@
<Icon
icon={IconArrowSmRight}
size="l"
color="--color-fgcolor-neutral-weak" />
color="--fgcolor-neutral-weak" />
</Layout.Stack>
<Typography.Text variant="m-400">
Connect to a new repository or an existing one.
@@ -101,7 +101,7 @@
<Icon
icon={IconArrowSmRight}
size="l"
color="--color-fgcolor-neutral-weak" />
color="--fgcolor-neutral-weak" />
</Layout.Stack>
<Typography.Text variant="m-400">
Connect to an existing domain or add a new one.
@@ -121,7 +121,7 @@
<Icon
icon={IconArrowSmRight}
size="l"
color="--color-fgcolor-neutral-weak" />
color="--fgcolor-neutral-weak" />
</Layout.Stack>
<Typography.Text variant="m-400">
Share your progress and start collaborating with your team.
@@ -141,7 +141,7 @@
<Icon
icon={IconArrowSmRight}
size="l"
color="--color-fgcolor-neutral-weak" />
color="--fgcolor-neutral-weak" />
</Layout.Stack>
<Typography.Text variant="m-400">
Open the preview of your site on any mobile or tablet
src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte
+1 -1
View File
@@ -59,7 +59,7 @@
secondary>View templates</Button>
{:else}
<Layout.Stack gap="s">
<Typography.Text variation="m-500" color="--color-fgcolor-neutral-primary">
<Typography.Text variation="m-500" color="--fgcolor-neutral-primary">
Missing a repository?
</Typography.Text>
<Typography.Text variation="m-400">
src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
+2 -2
View File
@@ -164,8 +164,8 @@
alignItems="center"
gap="xs">
<Layout.Stack direction="row" alignItems="center" gap="xs">
<Icon icon={IconGithub} color="--color-fgcolor-neutral-primary" />
<Typography.Text variation="m-500" color="--color-fgcolor-neutral-primary">
<Icon icon={IconGithub} color="--fgcolor-neutral-primary" />
<Typography.Text variation="m-500" color="--fgcolor-neutral-primary">
{data.repository?.organization}/{data.repository?.name}
</Typography.Text>
</Layout.Stack>
src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
+2 -7
View File
@@ -228,9 +228,7 @@
gap="xs">
<Layout.Stack direction="row" alignItems="center" gap="s">
<Icon size="s" icon={IconGithub} />
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
{$repository.name}
</Typography.Text>
</Layout.Stack>
@@ -339,10 +337,7 @@
<Aside {framework} {repositoryName} {branch} {rootDir} showAfter={showSiteConfig}>
<Layout.Stack>
<Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography.Text
variant="m-500"
truncate
color="--color-fgcolor-neutral-primary">
<Typography.Text variant="m-500" truncate color="--fgcolor-neutral-primary">
{name || data.template.name}
</Typography.Text>
{#if data?.template?.demoUrl}
src/routes/(console)/project-[project]/sites/createSiteModal.svelte
+3 -3
View File
@@ -28,7 +28,7 @@
src={$app?.themeInUse === 'dark' ? TemplateDark : TemplateLight} />
<Layout.Stack gap="s">
<Typography.Text variant="m-600">Clone a template</Typography.Text>
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-secondary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
Clone a pre-built template to quickly set up your site
</Typography.Text>
</Layout.Stack>
@@ -48,14 +48,14 @@
<Layout.Stack gap="s">
<Typography.Text variant="m-600">Connect a repository</Typography.Text>
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-secondary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
Connect to one of your existing Git repositories
</Typography.Text>
</Layout.Stack>
</Card>
</div>
</Layout.Stack>
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-secondary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
Or simply drag and drop your files to create a site <Link
variant="muted"
href={`${base}/project-${$page.params.project}/sites/create-site/manual`}>
src/routes/(console)/project-[project]/sites/header.svelte
+1 -1
View File
@@ -25,7 +25,7 @@
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--color-fgcolor-neutral-primary" size="xl">Sites</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size="xl">Sites</Typography.Title>
</svelte:fragment>
<Tabs variant="primary" let:root>
src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
+1 -1
View File
@@ -76,7 +76,7 @@
{#if $tags?.length}
<!-- TODO: add vertical divider to pink 2 -->
<div
style="flex-basis:1px; background-color:hsl(var(--color-border)); width: 1px">
style="flex-basis:1px; background-color:hsl(var(--border)); width: 1px">
</div>
<Button text on:click={clearAll} size="s">Clear all</Button>
{/if}
src/routes/(console)/project-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte
+1 -1
View File
@@ -137,7 +137,7 @@
</Layout.Stack>
</Link>
</Layout.Stack>
<Typography.Caption variant="400" color="--color-fgcolor-neutral-tertiary">
<Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
Last updated {timeFromNow($repository?.pushedAt)}
</Typography.Caption>
</Layout.Stack>
src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
+1 -1
View File
@@ -77,7 +77,7 @@
<Layout.Stack gap="xl">
<Layout.Stack direction="row" justifyContent="space-between" alignItems="flex-end" wrap="wrap">
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
Metrics for {range !== SiteUsageRange.TwentyFourHours
? `${toLocaleDate(
new Date(
src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte
+1 -1
View File
@@ -31,7 +31,7 @@
<Layout.Stack style="overflow-x: auto;">
<Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
<Layout.Stack gap="xs" direction="row" alignItems="center" inline>
<Typography.Text variant="l-500" color="--color-fgcolor-neutral-primary">
<Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
Deployments
</Typography.Text><Badge
variant="secondary"
src/routes/(console)/project-[project]/sites/site-[site]/domains/recordsCard.svelte
+2 -2
View File
@@ -38,8 +38,8 @@
</Table.Row>
</Table.Root>
<Layout.Stack gap="s" direction="row" alignItems="center">
<Icon icon={IconInfo} size="s" color="--color-fgcolor-neutral-secondary" />
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-secondary">
<Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />
<Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
A list of all domain providers and their DNS setting is available <Link
variant="muted"
href="#">here</Link
src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte
+2 -2
View File
@@ -26,7 +26,7 @@
<Layout.Stack>
<Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
<Layout.Stack gap="xs" direction="row" alignItems="center" inline>
<Typography.Text variant="l-500" color="--color-fgcolor-neutral-primary">
<Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
Domains
</Typography.Text>
<Badge variant="secondary" content={proxyRuleList?.total.toString()} size="s" />
@@ -45,7 +45,7 @@
<Typography.Text variant="m-500">
Add your first custom domain
</Typography.Text>
<Typography.Caption variant="500" color="--color-fgcolor-neutral-tertiary">
<Typography.Caption variant="500" color="--fgcolor-neutral-tertiary">
Personalize your site and enhance its accessibility and branding with a
unique domain.
</Typography.Caption>
src/routes/(console)/project-[project]/sites/site-[site]/instantRollbackModal.svelte
+4 -6
View File
@@ -86,7 +86,7 @@
</Layout.Stack>
<Layout.Stack direction="row" alignItems="center" gap="s">
<Typography.Caption variant="400" color="--color-fgcolor-neutral-secondary">
<Typography.Caption variant="400" color="--fgcolor-neutral-secondary">
<Status status="ready">{capitalize(deployment.status)}</Status>
</Typography.Caption>
<svg
@@ -97,7 +97,7 @@
fill="none">
<circle cx="1" cy="1.5" r="1" fill="currentColor" />
</svg>
<Typography.Caption variant="400" color="--color-fgcolor-neutral-secondary">
<Typography.Caption variant="400" color="--fgcolor-neutral-secondary">
{calculateSize(deployment.size)}
</Typography.Caption>
<svg
@@ -108,7 +108,7 @@
fill="none">
<circle cx="1" cy="1.5" r="1" fill="currentColor" />
</svg>
<Typography.Caption variant="400" color="--color-fgcolor-neutral-secondary">
<Typography.Caption variant="400" color="--fgcolor-neutral-secondary">
Created {timeFromNow(deployment.$createdAt)}
{#if deployment?.providerCommitAuthorUrl && deployment?.providerCommitAuthor}
by <Link href={deployment.providerCommitAuthorUrl} external
@@ -130,9 +130,7 @@
bind:group={selectedDeploymentId}
value={prodDeployment.$id}>
<Layout.Stack gap="s">
<Typography.Caption
variant="400"
color="--color-fgcolor-neutral-secondary">
<Typography.Caption variant="400" color="--fgcolor-neutral-secondary">
Created {timeFromNow(prodDeployment.$createdAt)}
{#if prodDeployment?.providerCommitAuthorUrl && prodDeployment?.providerCommitAuthor}
by <Link href={prodDeployment.providerCommitAuthorUrl} external
src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsRequest.svelte
+2 -2
View File
@@ -84,8 +84,8 @@
</Table.Root>
<p>
<Layout.Stack direction="row" gap="xs" alignItems="center">
<Icon icon={IconInfo} size="s" color="--color-fgcolor-neutral-secondary" /> Missing
headers? Check our docs to see the supported data and how to log it.
<Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" /> Missing headers?
Check our docs to see the supported data and how to log it.
</Layout.Stack>
</p>
{:else}
src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsResponse.svelte
+2 -2
View File
@@ -66,8 +66,8 @@
</Table.Root>
<p>
<Layout.Stack direction="row" gap="xs" alignItems="center">
<Icon icon={IconInfo} size="s" color="--color-fgcolor-neutral-secondary" /> Missing
headers? Check our docs to see the supported data and how to log it.
<Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" /> Missing headers?
Check our docs to see the supported data and how to log it.
</Layout.Stack>
</p>
{:else}
src/routes/(console)/project-[project]/sites/site-[site]/logs/sheet.svelte
+5 -13
View File
@@ -67,9 +67,7 @@
<Layout.Stack gap="xl">
<Layout.Stack direction="row" gap="xxxl">
<Layout.Stack gap="xs" inline>
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
Method
</Typography.Text>
<Typography.Text variant="m-400">
@@ -77,9 +75,7 @@
</Typography.Text>
</Layout.Stack>
<Layout.Stack gap="xs" inline>
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
Status code
</Typography.Text>
<span>
@@ -92,9 +88,7 @@
</span>
</Layout.Stack>
<Layout.Stack gap="xs" inline>
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
Duration
</Typography.Text>
<Typography.Text variant="m-400">
@@ -102,9 +96,7 @@
</Typography.Text>
</Layout.Stack>
<Layout.Stack gap="xs" inline>
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
Created
</Typography.Text>
<Typography.Text variant="m-400">
@@ -113,7 +105,7 @@
</Layout.Stack>
</Layout.Stack>
<Layout.Stack gap="xs" inline alignItems="flex-start">
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
Path
</Typography.Text>
<div>
src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRepository.svelte
+4 -4
View File
@@ -129,7 +129,7 @@
alignItems="center"
gap="xs">
<Layout.Stack direction="row" gap="s">
<Icon icon={IconGithub} color="--color-fgcolor-neutral-primary" />
<Icon icon={IconGithub} color="--fgcolor-neutral-primary" />
<Layout.Stack gap="xxxs">
<Skeleton variant="line" width={100} height={20} />
<Skeleton variant="line" width={200} height={15} />
@@ -161,16 +161,16 @@
<Card isTile padding="xs" radius="s" variant="secondary">
<Layout.Stack direction="row" gap="s">
<Layout.Stack direction="row" gap="s">
<Icon icon={IconGithub} color="--color-fgcolor-neutral-primary" />
<Icon icon={IconGithub} color="--fgcolor-neutral-primary" />
<Layout.Stack gap="xxxs">
<Typography.Text
variant="m-400"
color="--color-fgcolor-neutral-primary">
color="--fgcolor-neutral-primary">
{repository.name}
</Typography.Text>
<Typography.Caption
variant="400"
color="--color-fgcolor-neutral-tertiary">
color="--fgcolor-neutral-tertiary">
Last updated: {toLocaleDateTime(repository.pushedAt)}
</Typography.Caption>
</Layout.Stack>
src/routes/(console)/project-[project]/storage/header.svelte
+1 -2
View File
@@ -26,8 +26,7 @@
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
>Storage</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size="xl">Storage</Typography.Title>
</svelte:fragment>
<Tabs>
{#each tabs as tab}
src/routes/(public)/auth/+layout.svelte
+2 -4
View File
@@ -15,9 +15,7 @@
</div>
<footer>
<!-- TODO: change text style to eyebrow -->
<Typography.Text size="s" color="--color-fgColor-neutral-secondary">
POWERED BY
</Typography.Text>
<Typography.Text size="s" color="--fgcolor-neutral-secondary">POWERED BY</Typography.Text>
{#if $app.themeInUse === 'dark'}
<img
src="/console/images/appwrite-logo-dark.svg"
@@ -37,7 +35,7 @@
<style lang="scss">
.auth-bg {
position: fixed;
background: var(--color-bgcolor-neutral-primary, #fff);
background: var(--bgcolor-neutral-primary, #fff);
background-size: cover;
top: 0;
left: 0;
src/themes/dark-cloud.json
+69 -64
View File
@@ -49,70 +49,75 @@
"web-green-700": "rgba(10, 113, 79, 100%)",
"web-orange-500": "rgba(254, 124, 67, 100%)",
"web-orange-700": "rgba(97, 37, 10, 100%)",
"color-fgcolor-neutral-primary": "var(--neutral-50)",
"color-fgcolor-neutral-secondary": "var(--neutral-250)",
"color-fgcolor-neutral-tertiary": "var(--neutral-500)",
"color-bgcolor-neutral-default": "var(--neutral-900)",
"color-fgcolor-neutral-weak": "var(--neutral-600)",
"color-fgcolor-accent": "var(--neutral-0)",
"color-fgcolor-accent-neutral": "var(--neutral-0)",
"color-fgcolor-on-accent": "var(--neutral-0)",
"color-bgcolor-neutral-primary": "var(--neutral-850)",
"color-bgcolor-neutral-secondary": "var(--neutral-800)",
"color-fgcolor-success": "var(--web-green-500)",
"color-bgcolor-neutral-tertiary": "var(--neutral-800)",
"color-bgcolor-neutral-invert": "var(--neutral-25)",
"color-bgcolor-neutral-invert-weak": "var(--neutral-300)",
"color-bgcolor-neutral-invert-weaker": "var(--neutral-400)",
"color-bgcolor-accent": "var(--brand-pink-500)",
"color-bgcolor-accent-weak": "rgba(253, 54, 110, 24%)",
"color-bgcolor-accent-secondary": "var(--brand-pink-600)",
"color-bgcolor-accent-tertiary": "var(--brand-pink-700)",
"color-bgcolor-success-weaker": "rgba(16, 185, 129, 16%)",
"color-bgcolor-success-weak": "rgba(16, 185, 129, 24%)",
"color-bgcolor-success": "var(--web-green-500)",
"color-bgcolor-success-strong": "var(--web-green-700)",
"color-bgcolor-error-weaker": "rgba(255, 69, 58, 16%)",
"color-bgcolor-error-weak": "rgba(255, 69, 58, 28%)",
"color-bgcolor-error": "var(--web-red-500)",
"color-bgcolor-error-strong": "var(--web-red-700)",
"color-bgcolor-warning": "var(--web-orange-500)",
"color-bgcolor-warning-weak": "rgba(254, 124, 67, 24%)",
"color-bgcolor-warning-weaker": "rgba(254, 124, 67, 16%)",
"color-bgcolor-warning-strong": "var(--web-orange-700)",
"color-fgcolor-on-success": "var(--neutral-0)",
"color-fgcolor-on-success-weak": "var(--web-green-200)",
"color-fgcolor-error": "var(--web-red-500)",
"color-fgcolor-on-error": "var(--neutral-0)",
"color-fgcolor-on-error-weak": "var(--web-red-200)",
"color-border-neutral": "var(--neutral-800)",
"color-fgcolor-warning": "var(--web-orange-500)",
"color-border-neutral-strong": "var(--neutral-750)",
"color-fgcolor-on-warning": "var(--neutral-0)",
"color-border-neutral-stronger": "var(--neutral-600)",
"color-fgcolor-on-warning-weak": "var(--web-orange-200)",
"color-border-neutral-strongest": "var(--neutral-0)",
"color-border-focus": "var(--neutral-600)",
"color-border-accent": "var(--neutral-0)",
"color-border-accent-secondary": "var(--neutral-0)",
"color-border-success": "var(--web-green-500)",
"color-border-success-weak": "rgba(16, 185, 129, 32%)",
"color-border-warning": "var(--web-orange-500)",
"color-border-warning-weak": "rgba(254, 124, 67, 32%)",
"color-border-error": "var(--web-red-500)",
"color-border-error-weak": "rgba(255, 69, 58, 32%)",
"color-overlay-on-accent": "rgba(255, 255, 255, 32%)",
"color-overlay-accent-hover": "rgba(0, 0, 0, 20%)",
"color-overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
"color-overlay-on-neutral": "rgba(255, 255, 255, 20%)",
"color-overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
"color-overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
"color-overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
"color-overlay-scrim": "rgba(0, 0, 0, 48%)",
"color-overlay-skeleton": "rgba(255, 255, 255, 8%)",
"gradient-border-button-secondary-bottom": "var(--color-border-neutral-strong)",
"gradient-border-button-secondary-top": "var(--color-border-neutral)",
"color-fgcolor-on-invert": "var(--neutral-800)",
"web-red-800": "rgba(143, 14, 14, 100%)",
"web-red-900": "rgba(107, 11, 11, 100%)",
"bgcolor-neutral-default": "var(--neutral-900)",
"bgcolor-neutral-primary": "var(--neutral-850)",
"bgcolor-neutral-secondary": "var(--neutral-800)",
"bgcolor-neutral-tertiary": "var(--neutral-800)",
"bgcolor-neutral-invert": "var(--neutral-25)",
"bgcolor-neutral-invert-weak": "var(--neutral-300)",
"bgcolor-neutral-invert-weaker": "var(--neutral-400)",
"bgcolor-neutral-invert-weakest": "var(--neutral-750)",
"bgcolor-accent": "var(--brand-pink-500)",
"bgcolor-accent-weak": "rgba(253, 54, 110, 24%)",
"bgcolor-accent-secondary": "var(--brand-pink-600)",
"bgcolor-accent-tertiary": "var(--brand-pink-700)",
"bgcolor-success-weaker": "rgba(16, 185, 129, 16%)",
"bgcolor-success-weak": "rgba(16, 185, 129, 24%)",
"bgcolor-success": "var(--web-green-500)",
"bgcolor-success-strong": "var(--web-green-700)",
"bgcolor-error-weaker": "rgba(255, 69, 58, 16%)",
"bgcolor-error-weak": "rgba(255, 69, 58, 28%)",
"bgcolor-error": "var(--web-red-500)",
"bgcolor-error-strong": "var(--web-red-700)",
"bgcolor-warning": "var(--web-orange-500)",
"bgcolor-warning-weak": "rgba(254, 124, 67, 24%)",
"bgcolor-warning-weaker": "rgba(254, 124, 67, 16%)",
"bgcolor-warning-strong": "var(--web-orange-700)",
"bgcolor-error-strong-secondary": "var(--web-red-800)",
"bgcolor-error-strong-tertiary": "var(--web-red-900)",
"fgcolor-neutral-primary": "var(--neutral-50)",
"fgcolor-neutral-secondary": "var(--neutral-250)",
"fgcolor-neutral-tertiary": "var(--neutral-500)",
"fgcolor-neutral-weak": "var(--neutral-600)",
"fgcolor-accent": "var(--neutral-0)",
"fgcolor-accent-neutral": "var(--neutral-0)",
"fgcolor-on-accent": "var(--neutral-0)",
"fgcolor-success": "var(--web-green-500)",
"fgcolor-on-success": "var(--neutral-0)",
"fgcolor-on-success-weak": "var(--web-green-200)",
"fgcolor-error": "var(--web-red-500)",
"fgcolor-on-error": "var(--neutral-0)",
"fgcolor-on-error-weak": "var(--web-red-200)",
"fgcolor-warning": "var(--web-orange-500)",
"fgcolor-on-warning": "var(--neutral-0)",
"fgcolor-on-warning-weak": "var(--web-orange-200)",
"fgcolor-on-invert": "var(--neutral-1000)",
"border-neutral": "var(--neutral-800)",
"border-neutral-strong": "var(--neutral-750)",
"border-neutral-stronger": "var(--neutral-600)",
"border-neutral-strongest": "var(--neutral-0)",
"border-focus": "var(--neutral-600)",
"border-accent": "var(--neutral-0)",
"border-accent-secondary": "var(--neutral-0)",
"border-success": "var(--web-green-500)",
"border-success-weak": "rgba(16, 185, 129, 32%)",
"border-warning": "var(--web-orange-500)",
"border-warning-weak": "rgba(254, 124, 67, 32%)",
"border-error": "var(--web-red-500)",
"border-error-weak": "rgba(255, 69, 58, 32%)",
"overlay-on-accent": "rgba(255, 255, 255, 32%)",
"overlay-accent-hover": "rgba(0, 0, 0, 20%)",
"overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
"overlay-on-neutral": "rgba(255, 255, 255, 20%)",
"overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
"overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
"overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
"overlay-scrim": "rgba(0, 0, 0, 48%)",
"overlay-skeleton": "rgba(255, 255, 255, 8%)",
"gradient-border-button-secondary-bottom": "var(--border-neutral-strong)",
"gradient-border-button-secondary-top": "var(--border-neutral)",
"font-family-brand": "Aeonik Pro",
"font-family-sansserif": "Inter",
"font-family-monospace": "Aeonik Fono",
src/themes/dark.json
+69 -65
View File
@@ -49,71 +49,75 @@
"web-green-700": "rgba(10, 113, 79, 100%)",
"web-orange-500": "rgba(254, 124, 67, 100%)",
"web-orange-700": "rgba(97, 37, 10, 100%)",
"color-fgcolor-neutral-primary": "var(--neutral-50)",
"color-fgcolor-neutral-secondary": "var(--neutral-250)",
"color-fgcolor-neutral-tertiary": "var(--neutral-500)",
"color-bgcolor-neutral-default": "var(--neutral-900)",
"color-fgcolor-neutral-weak": "var(--neutral-600)",
"color-fgcolor-accent": "var(--neutral-0)",
"color-fgcolor-accent-neutral": "var(--neutral-0)",
"color-fgcolor-on-accent": "var(--neutral-0)",
"color-bgcolor-neutral-primary": "var(--neutral-850)",
"color-bgcolor-neutral-secondary": "var(--neutral-800)",
"color-fgcolor-success": "var(--web-green-500)",
"color-bgcolor-neutral-tertiary": "var(--neutral-800)",
"color-bgcolor-neutral-invert": "var(--neutral-25)",
"color-bgcolor-neutral-invert-weak": "var(--neutral-300)",
"color-bgcolor-neutral-invert-weaker": "var(--neutral-400)",
"color-bgcolor-accent": "var(--brand-pink-500)",
"color-bgcolor-accent-weak": "rgba(253, 54, 110, 24%)",
"color-bgcolor-accent-secondary": "var(--brand-pink-600)",
"color-bgcolor-accent-tertiary": "var(--brand-pink-700)",
"color-bgcolor-success-weaker": "rgba(16, 185, 129, 16%)",
"color-bgcolor-success-weak": "rgba(16, 185, 129, 24%)",
"color-bgcolor-success": "var(--web-green-500)",
"color-bgcolor-success-strong": "var(--web-green-700)",
"color-bgcolor-error-weaker": "rgba(255, 69, 58, 16%)",
"color-bgcolor-error-weak": "rgba(255, 69, 58, 28%)",
"color-bgcolor-error": "var(--web-red-500)",
"color-bgcolor-error-strong": "var(--web-red-700)",
"color-bgcolor-warning": "var(--web-orange-500)",
"color-bgcolor-warning-weak": "rgba(254, 124, 67, 24%)",
"color-bgcolor-warning-weaker": "rgba(254, 124, 67, 16%)",
"color-bgcolor-warning-strong": "var(--web-orange-700)",
"color-fgcolor-on-success": "var(--neutral-0)",
"color-fgcolor-on-success-weak": "var(--web-green-200)",
"color-fgcolor-error": "var(--web-red-500)",
"color-fgcolor-on-error": "var(--neutral-0)",
"color-fgcolor-on-error-weak": "var(--web-red-200)",
"color-border-neutral": "var(--neutral-800)",
"color-fgcolor-warning": "var(--web-orange-500)",
"color-fgcolor-on-warning": "var(--neutral-0)",
"color-border-neutral-strong": "var(--neutral-750)",
"color-border-neutral-stronger": "var(--neutral-600)",
"color-fgcolor-on-warning-weak": "var(--web-orange-200)",
"color-border-neutral-strongest": "var(--neutral-0)",
"color-border-focus": "var(--neutral-600)",
"color-border-accent": "var(--neutral-0)",
"color-border-accent-secondary": "var(--neutral-0)",
"color-border-success": "var(--web-green-500)",
"color-border-success-weak": "rgba(16, 185, 129, 32%)",
"color-border-warning": "var(--web-orange-500)",
"color-border-warning-weak": "rgba(254, 124, 67, 32%)",
"color-border-error": "var(--web-red-500)",
"color-border-error-weak": "rgba(255, 69, 58, 32%)",
"color-overlay-on-accent": "rgba(255, 255, 255, 32%)",
"color-overlay-accent-hover": "rgba(0, 0, 0, 20%)",
"color-overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
"color-overlay-on-neutral": "rgba(255, 255, 255, 20%)",
"color-overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
"color-overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
"color-overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
"color-overlay-skeleton": "rgba(255, 255, 255, 8%)",
"color-overlay-scrim": "rgba(0, 0, 0, 48%)",
"color-overlay-scrim-weak": "rgba(25, 25, 28, 40%)",
"gradient-border-button-secondary-bottom": "var(--color-border-neutral-strong)",
"gradient-border-button-secondary-top": "var(--color-border-neutral)",
"color-fgcolor-on-invert": "var(--neutral-800)",
"web-red-800": "rgba(143, 14, 14, 100%)",
"web-red-900": "rgba(107, 11, 11, 100%)",
"bgcolor-neutral-default": "var(--neutral-900)",
"bgcolor-neutral-primary": "var(--neutral-850)",
"bgcolor-neutral-secondary": "var(--neutral-800)",
"bgcolor-neutral-tertiary": "var(--neutral-800)",
"bgcolor-neutral-invert": "var(--neutral-25)",
"bgcolor-neutral-invert-weak": "var(--neutral-300)",
"bgcolor-neutral-invert-weaker": "var(--neutral-400)",
"bgcolor-neutral-invert-weakest": "var(--neutral-750)",
"bgcolor-accent": "var(--brand-pink-500)",
"bgcolor-accent-weak": "rgba(253, 54, 110, 24%)",
"bgcolor-accent-secondary": "var(--brand-pink-600)",
"bgcolor-accent-tertiary": "var(--brand-pink-700)",
"bgcolor-success-weaker": "rgba(16, 185, 129, 16%)",
"bgcolor-success-weak": "rgba(16, 185, 129, 24%)",
"bgcolor-success": "var(--web-green-500)",
"bgcolor-success-strong": "var(--web-green-700)",
"bgcolor-error-weaker": "rgba(255, 69, 58, 16%)",
"bgcolor-error-weak": "rgba(255, 69, 58, 28%)",
"bgcolor-error": "var(--web-red-500)",
"bgcolor-error-strong": "var(--web-red-700)",
"bgcolor-warning": "var(--web-orange-500)",
"bgcolor-warning-weak": "rgba(254, 124, 67, 24%)",
"bgcolor-warning-weaker": "rgba(254, 124, 67, 16%)",
"bgcolor-warning-strong": "var(--web-orange-700)",
"bgcolor-error-strong-secondary": "var(--web-red-800)",
"bgcolor-error-strong-tertiary": "var(--web-red-900)",
"fgcolor-neutral-primary": "var(--neutral-50)",
"fgcolor-neutral-secondary": "var(--neutral-250)",
"fgcolor-neutral-tertiary": "var(--neutral-500)",
"fgcolor-neutral-weak": "var(--neutral-600)",
"fgcolor-accent": "var(--neutral-0)",
"fgcolor-accent-neutral": "var(--neutral-0)",
"fgcolor-on-accent": "var(--neutral-0)",
"fgcolor-success": "var(--web-green-500)",
"fgcolor-on-success": "var(--neutral-0)",
"fgcolor-on-success-weak": "var(--web-green-200)",
"fgcolor-error": "var(--web-red-500)",
"fgcolor-on-error": "var(--neutral-0)",
"fgcolor-on-error-weak": "var(--web-red-200)",
"fgcolor-warning": "var(--web-orange-500)",
"fgcolor-on-warning": "var(--neutral-0)",
"fgcolor-on-warning-weak": "var(--web-orange-200)",
"fgcolor-on-invert": "var(--neutral-1000)",
"border-neutral": "var(--neutral-800)",
"border-neutral-strong": "var(--neutral-750)",
"border-neutral-stronger": "var(--neutral-600)",
"border-neutral-strongest": "var(--neutral-0)",
"border-focus": "var(--neutral-600)",
"border-accent": "var(--neutral-0)",
"border-accent-secondary": "var(--neutral-0)",
"border-success": "var(--web-green-500)",
"border-success-weak": "rgba(16, 185, 129, 32%)",
"border-warning": "var(--web-orange-500)",
"border-warning-weak": "rgba(254, 124, 67, 32%)",
"border-error": "var(--web-red-500)",
"border-error-weak": "rgba(255, 69, 58, 32%)",
"overlay-on-accent": "rgba(255, 255, 255, 32%)",
"overlay-accent-hover": "rgba(0, 0, 0, 20%)",
"overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
"overlay-on-neutral": "rgba(255, 255, 255, 20%)",
"overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
"overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
"overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
"overlay-scrim": "rgba(0, 0, 0, 48%)",
"overlay-skeleton": "rgba(255, 255, 255, 8%)",
"gradient-border-button-secondary-bottom": "var(--border-neutral-strong)",
"gradient-border-button-secondary-top": "var(--border-neutral)",
"font-family-brand": "Inter",
"font-family-sansserif": "Inter",
"font-family-monospace": "Fira Code",
src/themes/light-cloud.json
+69 -64
View File
@@ -49,70 +49,75 @@
"web-green-700": "rgba(10, 113, 79, 100%)",
"web-orange-500": "rgba(254, 124, 67, 100%)",
"web-orange-700": "rgba(97, 37, 10, 100%)",
"color-fgcolor-neutral-primary": "var(--neutral-800)",
"color-fgcolor-neutral-secondary": "var(--neutral-700)",
"color-fgcolor-neutral-tertiary": "var(--neutral-400)",
"color-bgcolor-neutral-default": "var(--neutral-25)",
"color-fgcolor-neutral-weak": "var(--neutral-200)",
"color-fgcolor-accent": "var(--brand-pink-500)",
"color-fgcolor-accent-neutral": "var(--neutral-900)",
"color-fgcolor-on-accent": "var(--neutral-0)",
"color-bgcolor-neutral-primary": "var(--neutral-0)",
"color-bgcolor-neutral-secondary": "var(--neutral-40)",
"color-fgcolor-success": "var(--web-green-700)",
"color-bgcolor-neutral-tertiary": "var(--neutral-50)",
"color-bgcolor-neutral-invert": "var(--neutral-900)",
"color-bgcolor-neutral-invert-weak": "var(--neutral-700)",
"color-bgcolor-neutral-invert-weaker": "var(--neutral-500)",
"color-bgcolor-accent": "var(--brand-pink-500)",
"color-bgcolor-accent-weak": "rgba(252, 53, 110, 12%)",
"color-bgcolor-accent-secondary": "var(--brand-pink-600)",
"color-bgcolor-accent-tertiary": "var(--brand-pink-700)",
"color-bgcolor-success-weaker": "rgba(16, 185, 129, 4%)",
"color-bgcolor-success-weak": "rgba(16, 185, 129, 16%)",
"color-bgcolor-success": "var(--web-green-500)",
"color-bgcolor-success-strong": "var(--web-green-700)",
"color-bgcolor-error-weaker": "rgba(255, 69, 58, 4%)",
"color-bgcolor-error-weak": "rgba(255, 69, 58, 16%)",
"color-bgcolor-error": "var(--web-red-500)",
"color-bgcolor-error-strong": "var(--web-red-700)",
"color-bgcolor-warning": "var(--web-orange-500)",
"color-bgcolor-warning-weak": "rgba(254, 124, 67, 16%)",
"color-bgcolor-warning-weaker": "rgba(254, 124, 67, 4%)",
"color-bgcolor-warning-strong": "var(--web-orange-700)",
"color-fgcolor-on-success": "var(--neutral-0)",
"color-fgcolor-on-success-weak": "var(--web-green-700)",
"color-fgcolor-error": "var(--web-red-700)",
"color-fgcolor-on-error": "var(--neutral-0)",
"color-fgcolor-on-error-weak": "var(--web-red-700)",
"color-border-neutral": "var(--neutral-50)",
"color-fgcolor-warning": "var(--web-orange-700)",
"color-border-neutral-strong": "var(--neutral-200)",
"color-fgcolor-on-warning": "var(--neutral-0)",
"color-border-neutral-stronger": "var(--neutral-500)",
"color-fgcolor-on-warning-weak": "var(--web-orange-700)",
"color-border-neutral-strongest": "var(--neutral-900)",
"color-border-focus": "var(--neutral-300)",
"color-border-accent": "var(--brand-pink-500)",
"color-border-accent-secondary": "var(--brand-pink-600)",
"color-border-success": "var(--web-green-500)",
"color-border-success-weak": "rgba(16, 185, 129, 32%)",
"color-border-warning": "var(--web-orange-500)",
"color-border-warning-weak": "rgba(254, 124, 67, 32%)",
"color-border-error": "var(--web-red-500)",
"color-border-error-weak": "rgba(255, 69, 58, 32%)",
"color-overlay-on-accent": "rgba(255, 255, 255, 32%)",
"color-overlay-accent-hover": "rgba(0, 0, 0, 20%)",
"color-overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
"color-overlay-on-neutral": "rgba(0, 0, 0, 6%)",
"color-overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
"color-overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
"color-overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
"color-overlay-scrim": "rgba(25, 25, 28, 80%)",
"color-overlay-skeleton": "rgba(25, 25, 28, 4%)",
"gradient-border-button-secondary-bottom": "var(--color-border-neutral)",
"gradient-border-button-secondary-top": "var(--color-border-neutral-strong)",
"color-fgcolor-on-invert": "var(--neutral-25)",
"web-red-800": "rgba(143, 14, 14, 100%)",
"web-red-900": "rgba(107, 11, 11, 100%)",
"bgcolor-neutral-default": "var(--neutral-25)",
"bgcolor-neutral-primary": "var(--neutral-0)",
"bgcolor-neutral-secondary": "var(--neutral-40)",
"bgcolor-neutral-tertiary": "var(--neutral-50)",
"bgcolor-neutral-invert": "var(--neutral-900)",
"bgcolor-neutral-invert-weak": "var(--neutral-700)",
"bgcolor-neutral-invert-weaker": "var(--neutral-500)",
"bgcolor-neutral-invert-weakest": "var(--neutral-100)",
"bgcolor-accent": "var(--brand-pink-500)",
"bgcolor-accent-weak": "rgba(252, 53, 110, 12%)",
"bgcolor-accent-secondary": "var(--brand-pink-600)",
"bgcolor-accent-tertiary": "var(--brand-pink-700)",
"bgcolor-success-weaker": "rgba(16, 185, 129, 4%)",
"bgcolor-success-weak": "rgba(16, 185, 129, 16%)",
"bgcolor-success": "var(--web-green-500)",
"bgcolor-success-strong": "var(--web-green-700)",
"bgcolor-error-weaker": "rgba(255, 69, 58, 4%)",
"bgcolor-error-weak": "rgba(255, 69, 58, 16%)",
"bgcolor-error": "var(--web-red-500)",
"bgcolor-error-strong": "var(--web-red-700)",
"bgcolor-warning": "var(--web-orange-500)",
"bgcolor-warning-weak": "rgba(254, 124, 67, 16%)",
"bgcolor-warning-weaker": "rgba(254, 124, 67, 4%)",
"bgcolor-warning-strong": "var(--web-orange-700)",
"bgcolor-error-strong-secondary": "var(--web-red-800)",
"bgcolor-error-strong-tertiary": "var(--web-red-900)",
"fgcolor-neutral-primary": "var(--neutral-800)",
"fgcolor-neutral-secondary": "var(--neutral-700)",
"fgcolor-neutral-tertiary": "var(--neutral-400)",
"fgcolor-neutral-weak": "var(--neutral-200)",
"fgcolor-accent": "var(--brand-pink-500)",
"fgcolor-accent-neutral": "var(--neutral-900)",
"fgcolor-on-accent": "var(--neutral-0)",
"fgcolor-success": "var(--web-green-700)",
"fgcolor-on-success": "var(--neutral-0)",
"fgcolor-on-success-weak": "var(--web-green-700)",
"fgcolor-error": "var(--web-red-700)",
"fgcolor-on-error": "var(--neutral-0)",
"fgcolor-on-error-weak": "var(--web-red-700)",
"fgcolor-warning": "var(--web-orange-700)",
"fgcolor-on-warning": "var(--neutral-0)",
"fgcolor-on-warning-weak": "var(--web-orange-700)",
"fgcolor-on-invert": "var(--neutral-25)",
"border-neutral": "var(--neutral-50)",
"border-neutral-strong": "var(--neutral-200)",
"border-neutral-stronger": "var(--neutral-500)",
"border-neutral-strongest": "var(--neutral-900)",
"border-focus": "var(--neutral-300)",
"border-accent": "var(--brand-pink-500)",
"border-accent-secondary": "var(--brand-pink-600)",
"border-success": "var(--web-green-500)",
"border-success-weak": "rgba(16, 185, 129, 32%)",
"border-warning": "var(--web-orange-500)",
"border-warning-weak": "rgba(254, 124, 67, 32%)",
"border-error": "var(--web-red-500)",
"border-error-weak": "rgba(255, 69, 58, 32%)",
"overlay-on-accent": "rgba(255, 255, 255, 32%)",
"overlay-accent-hover": "rgba(0, 0, 0, 20%)",
"overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
"overlay-on-neutral": "rgba(0, 0, 0, 6%)",
"overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
"overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
"overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
"overlay-scrim": "rgba(25, 25, 28, 80%)",
"overlay-skeleton": "rgba(25, 25, 28, 4%)",
"gradient-border-button-secondary-bottom": "var(--border-neutral)",
"gradient-border-button-secondary-top": "var(--border-neutral-strong)",
"font-family-brand": "Aeonik Pro",
"font-family-sansserif": "Inter",
"font-family-monospace": "Aeonik Fono",
src/themes/light.json
+71 -67
View File
@@ -49,74 +49,78 @@
"web-green-700": "rgba(10, 113, 79, 100%)",
"web-orange-500": "rgba(254, 124, 67, 100%)",
"web-orange-700": "rgba(97, 37, 10, 100%)",
"color-fgcolor-neutral-primary": "var(--neutral-800)",
"color-fgcolor-neutral-secondary": "var(--neutral-700)",
"color-fgcolor-neutral-tertiary": "var(--neutral-400)",
"color-bgcolor-neutral-default": "var(--neutral-25)",
"color-fgcolor-neutral-weak": "var(--neutral-200)",
"color-fgcolor-accent": "var(--brand-pink-500)",
"color-fgcolor-accent-neutral": "var(--neutral-900)",
"color-fgcolor-on-accent": "var(--neutral-0)",
"color-bgcolor-neutral-primary": "var(--neutral-0)",
"color-bgcolor-neutral-secondary": "var(--neutral-40)",
"color-fgcolor-success": "var(--web-green-700)",
"color-bgcolor-neutral-tertiary": "var(--neutral-50)",
"color-bgcolor-neutral-invert": "var(--neutral-900)",
"color-bgcolor-neutral-invert-weak": "var(--neutral-700)",
"color-bgcolor-neutral-invert-weaker": "var(--neutral-500)",
"color-bgcolor-accent": "var(--brand-pink-500)",
"color-bgcolor-accent-weak": "rgba(252, 53, 110, 12%)",
"color-bgcolor-accent-secondary": "var(--brand-pink-600)",
"color-bgcolor-accent-tertiary": "var(--brand-pink-700)",
"color-bgcolor-success-weaker": "rgba(16, 185, 129, 4%)",
"color-bgcolor-success-weak": "rgba(16, 185, 129, 16%)",
"color-bgcolor-success": "var(--web-green-500)",
"color-bgcolor-success-strong": "var(--web-green-700)",
"color-bgcolor-error-weaker": "rgba(255, 69, 58, 4%)",
"color-bgcolor-error-weak": "rgba(255, 69, 58, 16%)",
"color-bgcolor-error": "var(--web-red-500)",
"color-bgcolor-error-strong": "var(--web-red-700)",
"color-bgcolor-warning": "var(--web-orange-500)",
"color-bgcolor-warning-weak": "rgba(254, 124, 67, 16%)",
"color-bgcolor-warning-weaker": "rgba(254, 124, 67, 4%)",
"color-bgcolor-warning-strong": "var(--web-orange-700)",
"color-fgcolor-on-success": "var(--neutral-0)",
"color-fgcolor-on-success-weak": "var(--web-green-700)",
"color-fgcolor-error": "var(--web-red-700)",
"color-fgcolor-on-error": "var(--neutral-0)",
"color-fgcolor-on-error-weak": "var(--web-red-700)",
"color-border-neutral": "var(--neutral-50)",
"color-fgcolor-warning": "var(--web-orange-700)",
"color-border-neutral-strong": "var(--neutral-200)",
"color-fgcolor-on-warning": "var(--neutral-0)",
"color-border-neutral-stronger": "var(--neutral-500)",
"color-fgcolor-on-warning-weak": "var(--web-orange-700)",
"color-border-neutral-strongest": "var(--neutral-900)",
"color-border-focus": "var(--neutral-300)",
"color-border-accent": "var(--brand-pink-500)",
"color-border-accent-secondary": "var(--brand-pink-600)",
"color-border-success": "var(--web-green-500)",
"color-border-success-weak": "rgba(16, 185, 129, 32%)",
"color-border-warning": "var(--web-orange-500)",
"color-border-warning-weak": "rgba(254, 124, 67, 32%)",
"color-border-error": "var(--web-red-500)",
"color-border-error-weak": "rgba(255, 69, 58, 32%)",
"color-overlay-on-accent": "rgba(255, 255, 255, 32%)",
"color-overlay-accent-hover": "rgba(0, 0, 0, 20%)",
"color-overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
"color-overlay-on-neutral": "rgba(0, 0, 0, 6%)",
"color-overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
"color-overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
"color-overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
"color-overlay-skeleton": "rgba(25, 25, 28, 4%)",
"color-overlay-scrim-weak": "rgba(25, 25, 28, 40%)",
"color-overlay-scrim": "rgba(25, 25, 28, 80%)",
"gradient-border-button-secondary-bottom": "var(--color-border-neutral)",
"gradient-border-button-secondary-top": "var(--color-border-neutral-strong)",
"color-fgcolor-on-invert": "var(--neutral-25)",
"font-family-brand": "Inter",
"web-red-800": "rgba(143, 14, 14, 100%)",
"web-red-900": "rgba(107, 11, 11, 100%)",
"bgcolor-neutral-default": "var(--neutral-25)",
"bgcolor-neutral-primary": "var(--neutral-0)",
"bgcolor-neutral-secondary": "var(--neutral-40)",
"bgcolor-neutral-tertiary": "var(--neutral-50)",
"bgcolor-neutral-invert": "var(--neutral-900)",
"bgcolor-neutral-invert-weak": "var(--neutral-700)",
"bgcolor-neutral-invert-weaker": "var(--neutral-500)",
"bgcolor-neutral-invert-weakest": "var(--neutral-100)",
"bgcolor-accent": "var(--brand-pink-500)",
"bgcolor-accent-weak": "rgba(252, 53, 110, 12%)",
"bgcolor-accent-secondary": "var(--brand-pink-600)",
"bgcolor-accent-tertiary": "var(--brand-pink-700)",
"bgcolor-success-weaker": "rgba(16, 185, 129, 4%)",
"bgcolor-success-weak": "rgba(16, 185, 129, 16%)",
"bgcolor-success": "var(--web-green-500)",
"bgcolor-success-strong": "var(--web-green-700)",
"bgcolor-error-weaker": "rgba(255, 69, 58, 4%)",
"bgcolor-error-weak": "rgba(255, 69, 58, 16%)",
"bgcolor-error": "var(--web-red-500)",
"bgcolor-error-strong": "var(--web-red-700)",
"bgcolor-warning": "var(--web-orange-500)",
"bgcolor-warning-weak": "rgba(254, 124, 67, 16%)",
"bgcolor-warning-weaker": "rgba(254, 124, 67, 4%)",
"bgcolor-warning-strong": "var(--web-orange-700)",
"bgcolor-error-strong-secondary": "var(--web-red-800)",
"bgcolor-error-strong-tertiary": "var(--web-red-900)",
"fgcolor-neutral-primary": "var(--neutral-800)",
"fgcolor-neutral-secondary": "var(--neutral-700)",
"fgcolor-neutral-tertiary": "var(--neutral-400)",
"fgcolor-neutral-weak": "var(--neutral-200)",
"fgcolor-accent": "var(--brand-pink-500)",
"fgcolor-accent-neutral": "var(--neutral-900)",
"fgcolor-on-accent": "var(--neutral-0)",
"fgcolor-success": "var(--web-green-700)",
"fgcolor-on-success": "var(--neutral-0)",
"fgcolor-on-success-weak": "var(--web-green-700)",
"fgcolor-error": "var(--web-red-700)",
"fgcolor-on-error": "var(--neutral-0)",
"fgcolor-on-error-weak": "var(--web-red-700)",
"fgcolor-warning": "var(--web-orange-700)",
"fgcolor-on-warning": "var(--neutral-0)",
"fgcolor-on-warning-weak": "var(--web-orange-700)",
"fgcolor-on-invert": "var(--neutral-25)",
"border-neutral": "var(--neutral-50)",
"border-neutral-strong": "var(--neutral-200)",
"border-neutral-stronger": "var(--neutral-500)",
"border-neutral-strongest": "var(--neutral-900)",
"border-focus": "var(--neutral-300)",
"border-accent": "var(--brand-pink-500)",
"border-accent-secondary": "var(--brand-pink-600)",
"border-success": "var(--web-green-500)",
"border-success-weak": "rgba(16, 185, 129, 32%)",
"border-warning": "var(--web-orange-500)",
"border-warning-weak": "rgba(254, 124, 67, 32%)",
"border-error": "var(--web-red-500)",
"border-error-weak": "rgba(255, 69, 58, 32%)",
"overlay-on-accent": "rgba(255, 255, 255, 32%)",
"overlay-accent-hover": "rgba(0, 0, 0, 20%)",
"overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
"overlay-on-neutral": "rgba(0, 0, 0, 6%)",
"overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
"overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
"overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
"overlay-scrim": "rgba(25, 25, 28, 80%)",
"overlay-skeleton": "rgba(25, 25, 28, 4%)",
"gradient-border-button-secondary-bottom": "var(--border-neutral)",
"gradient-border-button-secondary-top": "var(--border-neutral-strong)",
"font-family-brand": "Aeonik Pro",
"font-family-sansserif": "Inter",
"font-family-monospace": "Fira Code",
"font-family-monospace": "Aeonik Fono",
"font-family-code": "Fira Code",
"font-weight-regular": "Regular",
"font-weight-medium": "Medium",