Merge pull request #96 from appwrite/style-level-10

style: level 10
appwrite · Nov 16, 2023 · a2e9f11 · a2e9f11 · vercel · Nov 16, 2023
2 parents a8bec1b + 6427eae
commit a2e9f11
Show file tree

Hide file tree

Showing 40 changed files with 1,170 additions and 572 deletions.
diff --git a/.changeset/dirty-hounds-do.md b/.changeset/dirty-hounds-do.md
@@ -0,0 +1,6 @@
+---
+"@appwrite.io/pink-icons": patch
+"@appwrite.io/pink": patch
+---
+
+patch bump
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -0,0 +1,14 @@
+{
+  "mode": "pre",
+  "tag": "sl10",
+  "initialVersions": {
+    "@appwrite.io/kitchensink": "0.0.0",
+    "@appwrite.io/pink-design": "0.0.0-rc1",
+    "@appwrite.io/fonts": "0.0.0",
+    "@appwrite.io/pink-icons": "0.0.6",
+    "@appwrite.io/pink": "0.0.6"
+  },
+  "changesets": [
+    "dirty-hounds-do"
+  ]
+}
diff --git a/apps/kitchensink/cover-frame-2.html b/apps/kitchensink/cover-frame-2.html
diff --git a/apps/kitchensink/error-console-page.html b/apps/kitchensink/error-console-page.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@appwrite/kitchensink - user demo</title>
+  </head>
+
+  <body>
+    <main class="" id="main">
+      {{> topNav}}
+      <section class="main-content">
+        <div class="top-cover">
+          <div class="container">
+
+          </div>
+        </div>
+        <div class="container">
+          <div class="modal u-width-full-line u-margin-inline-auto u-margin-block-start-negative-168">
+            <form class="modal-form">
+              <header class="modal-header">
+                <div class="u-flex u-main-space-between u-cross-center u-gap-16">
+                  <h4 class="modal-title heading-level-4">Organization not found</h4>
+                </div>
+              </header>
+              <div class="modal-content">
+                <p>The organization with the requested ID could not be found.</p>
+                <div class="u-flex u-margin-block-start-32 u-gap-16">
+                  <button class="button">
+                    <span class="text">Go to console</span>
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        <footer class="main-footer"></footer>
+      </section>
+    </main>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/apps/kitchensink/error-not-found-modal.html b/apps/kitchensink/error-not-found-modal.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@appwrite/kitchensink</title>
+</head>
+
+<body>
+<div class="u-flex u-full-screen-height u-main-center u-cross-center">
+    <div class="modal">
+        <form class="modal-form" method="dialog">
+            <header class="modal-header">
+                <div class="u-flex u-main-space-between u-cross-center u-gap-16">
+                    <h4 class="modal-title heading-level-4">Missing Redirect URL </h4>
+                    <button class="button is-text is-small is-only-icon u-hide" aria-label="Close modal">
+                        <span class="icon-x" aria-hidden="true"></span>
+                    </button>
+                </div>
+            </header>
+            <div class="modal-content">
+                <p>Your Oauth sign in flow is missing a proper redirect URL. Send a request for a new session with a valid callback URL.</p>
+                <ul class="form-list">
+                    <li class="form-item">
+                        <label class="label u-block">Code</label>
+                        <code class="inline-code u-block u-width-fit-content u-margin-block-start-8">DEPLOYMENT_NOT_FOUND</code>
+                    </li>
+                </ul>
+                <div class="u-flex u-gap-16">
+                    <button class="button is-secondary">
+                        <span class="text">OAuth docs</span>
+                    </button>
+                    <button class="button">
+                        <span class="text">Go to console</span>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+
+<script type="module" src="/main.js"></script>
+</body>
+</html>
diff --git a/apps/kitchensink/package.json b/apps/kitchensink/package.json
@@ -16,8 +16,8 @@
   "license": "ISC",
   "devDependencies": {
     "@appwrite.io/fonts": "*",
-    "@appwrite.io/pink": "*",
-    "@appwrite.io/pink-icons": "*",
+    "@appwrite.io/pink": "0.0.7-sl10.0",
+    "@appwrite.io/pink-icons": "0.0.7-sl10.0",
     "vite-plugin-handlebars": "^1.6.0"
   }
 }
diff --git a/apps/kitchensink/vite.config.js b/apps/kitchensink/vite.config.js
@@ -21,6 +21,7 @@ const config = {
         wizard: new URL("./wizard.html", import.meta.url).pathname,
         wizardForm: new URL("./wizard-form.html", import.meta.url).pathname,
         coverFrame: new URL("./cover-frame.html", import.meta.url).pathname,
+        coverFrame2: new URL("./cover-frame-2.html", import.meta.url).pathname,
         users: new URL("./users.html", import.meta.url).pathname,
         user: new URL("./user.html", import.meta.url).pathname,
         functions: new URL("./functions.html", import.meta.url).pathname,
@@ -37,6 +38,8 @@ const config = {
         gettingStarted: new URL("./getting-started.html", import.meta.url).pathname,
         modalDemo: new URL("./modal-demo.html", import.meta.url).pathname,
         filters: new URL("./filters.html", import.meta.url).pathname,
+        errorNotFoundModal: new URL("./error-not-found-modal.html", import.meta.url).pathname,
+        errorConsolePage: new URL("./error-console-page.html", import.meta.url).pathname,
       },
     },
   },

diff --git a/apps/pink/package.json b/apps/pink/package.json
@@ -29,8 +29,8 @@
   },
   "devDependencies": {
     "@appwrite.io/fonts": "*",
-    "@appwrite.io/pink": "*",
-    "@appwrite.io/pink-icons": "*",
+    "@appwrite.io/pink": "0.0.7-sl10.0",
+    "@appwrite.io/pink-icons": "0.0.7-sl10.0",
     "@types/prismjs": "^1.26.0",
     "glob": "^8.0.3",
     "sass": "^1.57.1"

diff --git a/apps/pink/src/pages/elements/loader.mdx b/apps/pink/src/pages/elements/loader.mdx
@@ -15,4 +15,21 @@ description: Use loaders to indicate to users that something is in progress and
 
 <Preview center>
     <div class="loader is-small"></div>
+</Preview>
+
+
+## Loading precent state
+Work different from the other rotate loaders.
+| State Class          | Type     |                                                 |
+| -------------------- | -------- | ----------------------------------------------- |
+| `is-loading`         | Loading  | Change behaving from rotating to loading        |
+
+| param                         | represents                                                                       | Example:                                           |
+| ----------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------- |
+| `--loading`                   | Loading precent                                                                  | `--loading: 65%;`                                  |
+| `-loader-bg-color-light`      | inner circle color (light-mode) that will fit background-color of the container  | `--loader-bg-color-light: var(--color-neutral-5);` |
+| `-loader-bg-color-dark`       | inner circle color (dark-mode) that will fit background-color of the container   | `--loader-bg-color-dark: var(--color-neutral-400);`|
+
+<Preview center>
+    <div class="loader is-loading" style="--loading:65%; --loader-bg-color-light:var(--color-neutral-5); --loader-bg-color-dark:var(--color-neutral-400);"></div>
 </Preview>
diff --git a/apps/pink/src/pages/elements/table.mdx b/apps/pink/src/pages/elements/table.mdx
@@ -291,6 +291,8 @@ In the Appwrite console, we use three styles of tables:
     </table>
 </Preview><br /><br /><br />
 
+## Remove Outer Style Table
+
 | Class                    | Type                 |                                                                                  |
 | ------------------------ | -------------------- | -------------------------------------------------------------------------------- |
 | `is-remove-outer-styles` | Without Outer Styles | Secondary table - in the Appwrite console used mostly inside a card or a wizard. |
@@ -384,10 +386,64 @@ In the Appwrite console, we use three styles of tables:
     </div>
   </section>
 </Preview>
+
+## Remove Outer Style Table - List with Table View
+
+<Preview center>
+    <section class="card">
+        <ul class="table is-remove-outer-styles u-sep-block-start">
+            <li class="table-row">
+                <label class="table-col u-cursor-pointer">
+                    <div class="u-flex u-cross-center u-gap-8">
+                        <input class="is-small u-margin-inline-end-8" type="radio" name="a" />
+                        <div class="avatar is-size-x-small">
+                            <img src="/assets/node.234c8244.svg" alt="node" />
+                        </div>
+                        <div class="u-flex u-gap-8">
+                            <span class="text">repo-name</span>
+                            <time class="u-color-text-gray" datetime="2011-11-18T14:54:39.929">30m ago</time>
+                        </div>
+                    </div>
+                </label>
+            </li>
+            <li class="table-row">
+                <label class="table-col u-cursor-pointer">
+                    <div class="u-flex u-cross-center u-gap-8">
+                        <input class="is-small u-margin-inline-end-8" type="radio" name="a" />
+                        <div class="avatar is-size-x-small">
+                            <img src="/assets/node.234c8244.svg" alt="node" />
+                        </div>
+                        <div class="u-flex u-gap-8">
+                            <span class="text">repo-name</span>
+                            <time class="u-color-text-gray" datetime="2011-11-18T14:54:39.929">30m ago</time>
+                        </div>
+                    </div>
+                </label>
+            </li>
+            <li class="table-row">
+                <label class="table-col u-cursor-pointer">
+                    <div class="u-flex u-cross-center u-gap-8">
+                        <input class="is-small u-margin-inline-end-8" type="radio" name="a" />
+                        <div class="avatar is-size-x-small">
+                            <img src="/assets/node.234c8244.svg" alt="node" />
+                        </div>
+                        <div class="u-flex u-gap-8">
+                            <span class="text">repo-name</span>
+                            <time class="u-color-text-gray" datetime="2011-11-18T14:54:39.929">30m ago</time>
+                        </div>
+                    </div>
+                </label>
+            </li>
+        </ul>
+    </section>
+</Preview>
 <br />
 <br />
 <br />
 
+
+
+
 | Class              | Type         |                                                                                                      |
 | ------------------ | ------------ | ---------------------------------------------------------------------------------------------------- |
 | `is-sticky-scroll` | Inner Scroll | Used in case the content of a table exceeds the maximum width and the first column should be sticky. |