Merge pull request #243 from appwrite/chore-use-pink

chore: update classes and imports to use pink
This commit is contained in:
Torsten Dittmann
2023-02-02 14:21:33 +01:00
committed by GitHub
37 changed files with 185 additions and 75 deletions
+31 -32
View File
@@ -9,9 +9,8 @@
"version": "0.0.1",
"dependencies": {
"@analytics/google-analytics": "^1.0.5",
"@appwrite.io/pink": "^0.0.3",
"@aw-labs/appwrite-console": "^13.1.0",
"@aw-labs/icons": "0.0.0-82",
"@aw-labs/ui": "0.0.0-82",
"@popperjs/core": "^2.11.6",
"@sentry/svelte": "^7.19.0",
"@sentry/tracing": "^7.19.0",
@@ -144,6 +143,21 @@
"resolved": "https://registry.npmjs.org/@analytics/type-utils/-/type-utils-0.6.0.tgz",
"integrity": "sha512-1Yw7u/COtxx06BfwlI+kVhsa/upKYzmCNrT4c8QDeCY2KMYlnijkUjtHiPU08HxyTIVB5j6d75O0YWVIHwQS8g=="
},
"node_modules/@appwrite.io/pink": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.3.tgz",
"integrity": "sha512-hxLMLvtUGkurnKcdwRH36GyeNZelOPSl5qrniwWwGQbpO+S8SakjMNqL1AF/+4JnypfNZUzJNRGTo+VGbrwang==",
"dependencies": {
"@appwrite.io/pink-icons": "*",
"normalize.css": "^8.0.1",
"the-new-css-reset": "^1.7.3"
}
},
"node_modules/@appwrite.io/pink-icons": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.0.2.tgz",
"integrity": "sha512-yv8IpWzgRj+C3fMbG0PwweIKUDBFz+GQZPpsiqdQEBNuMhNSwWSkYqTj7gumO3GUiIcMl4xhSGXY+vE2itswRg=="
},
"node_modules/@aw-labs/appwrite-console": {
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-13.1.0.tgz",
@@ -153,21 +167,6 @@
"isomorphic-form-data": "2.0.0"
}
},
"node_modules/@aw-labs/icons": {
"version": "0.0.0-82",
"resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-82.tgz",
"integrity": "sha512-TQ3abZGBjisd4WpeBVSUihY98drljdlcdw++z8icNpQVYohmUejRHU59mhmIfXCkhpA1s0tW+5xEMp0WmLNp9Q=="
},
"node_modules/@aw-labs/ui": {
"version": "0.0.0-82",
"resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-82.tgz",
"integrity": "sha512-zZDTP117uxMrwzAacOcpSXI77FMFcfv6+Da1R5sDWoqxhvZ0Wyx0Z6cn3dakV0M3zJfYZQ49LmSnU/5wqHPc7A==",
"dependencies": {
"@aw-labs/icons": "*",
"normalize.css": "^8.0.1",
"the-new-css-reset": "^1.7.3"
}
},
"node_modules/@babel/code-frame": {
"version": "7.16.7",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
@@ -7739,6 +7738,21 @@
"resolved": "https://registry.npmjs.org/@analytics/type-utils/-/type-utils-0.6.0.tgz",
"integrity": "sha512-1Yw7u/COtxx06BfwlI+kVhsa/upKYzmCNrT4c8QDeCY2KMYlnijkUjtHiPU08HxyTIVB5j6d75O0YWVIHwQS8g=="
},
"@appwrite.io/pink": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.3.tgz",
"integrity": "sha512-hxLMLvtUGkurnKcdwRH36GyeNZelOPSl5qrniwWwGQbpO+S8SakjMNqL1AF/+4JnypfNZUzJNRGTo+VGbrwang==",
"requires": {
"@appwrite.io/pink-icons": "*",
"normalize.css": "^8.0.1",
"the-new-css-reset": "^1.7.3"
}
},
"@appwrite.io/pink-icons": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.0.2.tgz",
"integrity": "sha512-yv8IpWzgRj+C3fMbG0PwweIKUDBFz+GQZPpsiqdQEBNuMhNSwWSkYqTj7gumO3GUiIcMl4xhSGXY+vE2itswRg=="
},
"@aw-labs/appwrite-console": {
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-13.1.0.tgz",
@@ -7748,21 +7762,6 @@
"isomorphic-form-data": "2.0.0"
}
},
"@aw-labs/icons": {
"version": "0.0.0-82",
"resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-82.tgz",
"integrity": "sha512-TQ3abZGBjisd4WpeBVSUihY98drljdlcdw++z8icNpQVYohmUejRHU59mhmIfXCkhpA1s0tW+5xEMp0WmLNp9Q=="
},
"@aw-labs/ui": {
"version": "0.0.0-82",
"resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-82.tgz",
"integrity": "sha512-zZDTP117uxMrwzAacOcpSXI77FMFcfv6+Da1R5sDWoqxhvZ0Wyx0Z6cn3dakV0M3zJfYZQ49LmSnU/5wqHPc7A==",
"requires": {
"@aw-labs/icons": "*",
"normalize.css": "^8.0.1",
"the-new-css-reset": "^1.7.3"
}
},
"@babel/code-frame": {
"version": "7.16.7",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
+2 -3
View File
@@ -20,13 +20,12 @@
},
"dependencies": {
"@analytics/google-analytics": "^1.0.5",
"analytics": "^0.8.1",
"@appwrite.io/pink": "^0.0.3",
"@aw-labs/appwrite-console": "^13.1.0",
"@aw-labs/icons": "0.0.0-82",
"@aw-labs/ui": "0.0.0-82",
"@popperjs/core": "^2.11.6",
"@sentry/svelte": "^7.19.0",
"@sentry/tracing": "^7.19.0",
"analytics": "^0.8.1",
"echarts": "^5.4.0",
"pretty-bytes": "^6.0.0",
"prismjs": "^1.29.0",
+38
View File
@@ -4,6 +4,44 @@
<meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="/favicon.png" />
<link
rel="preload"
href="/fonts/inter/inter-v8-latin-600.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="/fonts/inter/inter-v8-latin-regular.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="/fonts/poppins/poppins-v19-latin-500.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="/fonts/poppins/poppins-v19-latin-600.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="/fonts/poppins/poppins-v19-latin-700.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="/fonts/source-code-pro/source-code-pro-v20-latin-regular.woff2"
as="font"
type="font/woff2"
crossorigin />
<link rel="preload" as="style" type="text/css" href="/fonts/main.css" />
<link rel="stylesheet" href="/fonts/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
+6 -5
View File
@@ -19,7 +19,8 @@
{#if dismissible}
<button
type="button"
class="x-button"
class="button is-text is-only-icon"
style="--button-size:1.5rem;"
aria-label="close alert box"
on:click={() => dispatch('dismiss')}>
<span class="icon-x" aria-hidden="true" />
@@ -31,15 +32,15 @@
class:icon-exclamation={type === 'warning'}
class:icon-exclamation-circle={type === 'error'}
aria-hidden="true" />
<div class="content">
<div class="alert-content">
{#if $$slots.title}
<h6 class="title">
<h6 class="alert-title">
<slot name="title" />
</h6>
{/if}
<p class="message"><slot /></p>
<p class="alert-message"><slot /></p>
{#if buttons?.length}
<div class="buttons u-flex">
<div class="alert-buttons u-flex">
{#each buttons as button}
<button class="button is-text" on:click={button.method}>
<span class="text">{button.name}</span>
+2 -2
View File
@@ -285,7 +285,7 @@
{:else}
{#each Array.from(eventString.values()) as route, i}
<button
class:u-opacity-0-5={helper !== route.description}
class:u-opacity-50={helper !== route.description}
on:mouseenter={() => {
helper = route.description;
}}
@@ -294,7 +294,7 @@
}}>
{route.value}
</button>
<span class="u-opacity-0-5">
<span class="u-opacity-50">
{i + 1 < eventString?.size ? '.' : ''}
</span>
{/each}
+2 -1
View File
@@ -34,7 +34,8 @@
<h4 class="body-text-1">How can we improve?</h4>
<button
type="button"
class="x-button u-margin-inline-start-auto"
class="button is-text is-only-icon u-margin-inline-start-auto"
style="--button-size:1.5rem;"
aria-label="Close Modal"
title="Close Modal"
on:click={() => (show = false)}>
+2 -1
View File
@@ -37,7 +37,8 @@
<h4 class="body-text-1">How are we doing?</h4>
<button
type="button"
class="x-button u-margin-inline-start-auto"
class="button is-text is-only-icon u-margin-inline-start-auto"
style="--button-size:1.5rem;"
aria-label="Close Modal"
title="Close Modal"
on:click={() => (show = false)}>
+2 -1
View File
@@ -14,7 +14,8 @@
</h4>
<button
type="button"
class="x-button"
class="button is-text is-only-icon"
style="--button-size:1.5rem;"
aria-label="Close"
title="Close"
on:click={() => (show = false)}>
+2 -1
View File
@@ -91,7 +91,8 @@
{#if closable}
<button
type="button"
class="x-button"
class="button is-text is-only-icon"
style="--button-size:1.5rem;"
aria-label="Close Modal"
title="Close Modal"
on:click={() =>
+5 -1
View File
@@ -63,7 +63,11 @@
bind:value={search} />
<span class="icon-search" aria-hidden="true" />
{#if isWithEndButton && search}
<button class="x-button" aria-label="Clear search" on:click={() => (search = '')}>
<button
class="button is-text is-only-icon"
style="--button-size:1.5rem;"
aria-label="Clear search"
on:click={() => (search = '')}>
<span class="icon-x" aria-hidden="true" />
</button>
{/if}
+4 -4
View File
@@ -20,7 +20,7 @@
<span class="amount">{$uploader.files.length}</span>
</h4>
<button
class="icon-button"
class="upload-box-button"
class:is-open={!$uploader.isCollapsed}
aria-label="toggle upload box"
on:click={() => uploader.toggle()}>
@@ -28,7 +28,7 @@
</button>
<button
on:click={() => uploader.reset()}
class="icon-button"
class="upload-box-button"
aria-label="close upload box">
<span class="icon-x" aria-hidden="true" />
</button>
@@ -52,7 +52,7 @@
<label for={file.name} class="file-name u-trim">{file.name}</label>
<button
class="icon-button"
class="upload-box-button"
aria-label="Failed"
on:mouseenter={() => (hovering = true)}
on:mouseleave={() => (hovering = false)}
@@ -74,7 +74,7 @@
<label for={file.name} class="file-name u-trim">{file.name}</label>
<Pill danger>Failed</Pill>
<button
class="icon-button"
class="upload-box-button"
aria-label="Failed"
on:click|preventDefault={() => uploader.removeFromQueue(file.$id)}>
<span class="icon-x" />
+4 -4
View File
@@ -4,10 +4,10 @@
<p
class="helper u-margin-block-start-12"
class:u-info={type === 'info'}
class:u-error={type === 'error'}
class:u-success={type === 'success'}
class:u-warning={type === 'warning'}>
class:u-color-text-info={type === 'info'}
class:u-color-text-danger={type === 'error'}
class:u-color-text-success={type === 'success'}
class:u-color-text-warning={type === 'warning'}>
{#if type}
<span
class:icon-info={type === 'info' || type === 'neutral'}
+2 -1
View File
@@ -68,7 +68,8 @@
<button
on:click={() => (files = null)}
type="button"
class="x-button"
class="button is-text is-only-icon"
style="--button-size:1.5rem;"
aria-label="remove file"
title="Remove file">
<span class="icon-x" aria-hidden="true" />
+5 -1
View File
@@ -52,7 +52,11 @@
on:input={valueChange} />
<span class="icon-search" aria-hidden="true" />
{#if isWithEndButton && value}
<button class="x-button" aria-label="Clear search" on:click={() => (value = '')}>
<button
class="button is-text is-only-icon"
style="--button-size:1.5rem;"
aria-label="Clear search"
on:click={() => (value = '')}>
<span class="icon-x" aria-hidden="true" />
</button>
{/if}
+5 -1
View File
@@ -50,7 +50,11 @@
<section class="cover-frame">
<header class="cover-frame-header u-flex u-gap-16 u-main-space-between u-cross-center">
<h1 class="body-text-1" name="title">Function ID: {$log.func.$id}</h1>
<button on:click={() => ($log.show = false)} class="x-button" aria-label="close popup">
<button
on:click={() => ($log.show = false)}
class="button is-text is-only-icon"
style="--button-size:1.5rem;"
aria-label="close popup">
<span class="icon-x" aria-hidden="true" />
</button>
</header>
+6 -2
View File
@@ -15,7 +15,11 @@
class:is-warning={type === 'warning'}
class:is-danger={type === 'error'}
class:is-info={type === 'info'}>
<button class="x-button" aria-label="close alert" on:click={() => dispatch('dismiss')}>
<button
class="button is-text is-only-icon"
style="--button-size:1.5rem;"
aria-label="close alert"
on:click={() => dispatch('dismiss')}>
<span class="icon-x" aria-hidden="true" />
</button>
<div class="alert-sticky-image">
@@ -33,7 +37,7 @@
<p><slot /></p>
</div>
{#if buttons}
<div class="buttons u-flex">
<div class="alert-sticky-buttons u-flex">
{#each buttons as button}
<button class="button is-text is-small" on:click={button.method}>
<span class="text">{button.name}</span>
+1 -1
View File
@@ -47,7 +47,7 @@
<header class="main-header u-padding-inline-end-0">
<button
class:u-hide={!showSideNavigation}
class="icon-button is-no-desktop"
class="icon-button is-not-desktop"
aria-label="Open Menu"
on:click={toggleMenu}>
<span class:icon-x={isOpen} class:icon-menu={!isOpen} aria-hidden="true" />
+5 -5
View File
@@ -33,9 +33,9 @@
<div class="u-margin-block-start-auto" />
<div class="u-margin-block-start-auto is-no-mobile" />
<div class="u-margin-block-start-auto is-not-mobile" />
<div
class="container u-margin-block-start-20 is-no-mobile"
class="container u-margin-block-start-20 is-not-mobile"
style="--p-container-max-size: var(--container-size-large);">
{#if $app.themeInUse === 'dark'}
<img src={LoginDark} alt="" class="u-only-dark" />
@@ -46,13 +46,13 @@
<div class="u-margin-block-start-auto" />
<div class="u-margin-block-start-auto is-no-mobile" />
<div class="u-margin-block-start-auto is-not-mobile" />
<div
class="container u-text-color-light-gray is-no-mobile"
class="container u-color-text-gray is-not-mobile"
style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
<p>Integrate with your favourite technologies</p>
<ul
class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1 u-opacity-0-5">
class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1 u-opacity-50">
{#each technologies as tech}
<li>
<img
+5 -1
View File
@@ -88,7 +88,11 @@
<div class="body-text-1">{title}</div>
<slot name="header" />
<button class="x-button" aria-label="close wizard" on:click={handleExit}>
<button
class="button is-text is-only-icon"
style="--button-size:1.5rem;"
aria-label="close wizard"
on:click={handleExit}>
<span class="icon-x" aria-hidden="true" />
</button>
</header>
+2 -1
View File
@@ -1,4 +1,5 @@
import '@aw-labs/ui/src/_index.scss';
import '@appwrite.io/pink';
import '@appwrite.io/pink-icons';
import 'tippy.js/dist/tippy.css';
import { sdkForConsole } from '$lib/stores/sdk';
import { redirect } from '@sveltejs/kit';
@@ -50,7 +50,7 @@
<h2 class="heading-level-5">Getting Started Guide</h2>
<p class="u-line-height-1-5">Let's get your project up and running</p>
</div>
<div class="grid-1-2-col-2 u-flex u-main-end u-cross-end is-no-mobile">
<div class="grid-1-2-col-2 u-flex u-main-end u-cross-end is-not-mobile">
<img src={onBoardIntro} alt="" class="card-header-image" />
</div>
</header>
@@ -85,8 +85,8 @@
id="Security"
label="Certificate verification (SSL/TLS)"
bind:value={security}>
<span class="u-error">Warning:</span> Untrusted or self-signed certificates may
not be secure.
<span class="u-color-text-danger">Warning:</span> Untrusted or self-signed
certificates may not be secure.
<a
href="https://appwrite.io/docs/custom-domains#enjoySSLCert"
target="_blank"
@@ -32,8 +32,8 @@
id="Security"
label="Certificate verification (SSL/TLS)"
bind:value={$createWebhook.security}>
<span class="u-error">Warning:</span> Untrusted or self-signed certificates may not be
secure.
<span class="u-color-text-danger">Warning:</span> Untrusted or self-signed certificates
may not be secure.
<a
href="https://appwrite.io/docs/custom-domains#enjoySSLCert"
target="_blank"
@@ -54,7 +54,7 @@
<svelte:fragment slot="icons">
<li>
<span
class:u-opacity-0-2={!bucket.encryption}
class:u-opacity-20={!bucket.encryption}
class="icon-lock-closed"
aria-hidden="true"
use:tooltip={{
@@ -65,7 +65,7 @@
</li>
<li>
<span
class:u-opacity-0-2={!bucket.antivirus}
class:u-opacity-20={!bucket.antivirus}
class="icon-shield-check"
aria-hidden="true"
use:tooltip={{
Binary file not shown.
Binary file not shown.
+47
View File
@@ -0,0 +1,47 @@
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('source-code-pro/source-code-pro-v20-latin-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('inter/inter-v8-latin-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('inter/inter-v8-latin-600.woff2') format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('poppins/poppins-v19-latin-500.woff2') format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('poppins/poppins-v19-latin-600.woff2') format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('poppins/poppins-v19-latin-700.woff2') format('woff2');
}
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.