appwrite / pink Goto Github PK

Pink. Appwrite's official framework agnostic design system 🎨 🩷

License: MIT License

HTML 46.26% JavaScript 0.63% SCSS 14.08% CSS 0.73% Handlebars 2.21% Svelte 4.97% Astro 5.13% TypeScript 0.63% MDX 25.36%

appwrite component component-library css design-system design-systems hacktoberfest

pink's Introduction

Appwrite's open-source design system for building consistent and reusable user interfaces.

Pink Design is a CSS library designed for building accessible and visually appealing user interfaces. The library is built with a focus on accessibility, ensuring that users of all abilities can easily interact with your web application. Pink Design offers a wide range of classes and components that can be easily integrated into your project. Whether you're building a complex user interface or a simple web app, Pink Design has everything you need to create a polished and professional look.

Getting Started

NPM

Install the CSS library:

npm install "@appwrite.io/pink"

After installing Pink Design as a package, include Pink Design as CSS library by importing it in your JavaScript files.

import "@appwrite.io/pink";
// optionally, add icons
import "@appwrite.io/pink-icons";

CDN

Copy the following code into the <head> section of your HTML file.

<link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink" />
<!-- optionally, add icons -->
<link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink-icons" />

Accessibility

Our design library is designed to be inclusive, making it easy for everyone to interact with and navigate, regardless of any unique needs they may have. This enhances the user experience for all and aligns with the ethical standards of web development. At Appwrite, we are dedicated to fostering accessibility in all that we do.

We are constantly striving to improve. If you notice any areas where we can enhance accessibility, please do not hesitate to share your feedback and suggestions.

The documentation website for Pink Design has been built with Astro web framework .

Supported Browsers

Browser	Version
Chrome	>=99
Safari	>=15.4
Firefox	>=97
Opera	>=85
Chrome for Android	>=109
Safari iOS	>=15.4
Samsung Internet	>=18

Contributing

All code contributions - including those from people with commit access - must go through a pull request and be approved by a core team member before being merged. This is to ensure a proper review of all the code.

We truly ❤️ pull requests! If you wish to help, you can learn more about how you can contribute to this project in the contribution guide.

Security

For security issues, kindly email us at [email protected] instead of posting a public issue on GitHub.

Join our growing community around the world! See our official Blog. Follow us on Twitter, Facebook Page, Facebook Group, Dev Community or join our live Discord server for more help, ideas, and discussions.

License

This repository is available under the MIT.

pink's People

Contributors

Stargazers

Watchers

pink's Issues

📚 Documentation: Readme updates

💭 Description

update README.md to :

Include documentation site link .
Replace words like Pink Design with documentation website to eliminate ambiguity .

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

Roadmap for appwrite pink design

🔖 Feature description

Admin template: dark mode support
More components:

🎤 Pitch

It should be good for everyone

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: Cannot apply dark theme

👟 Reproduction steps

When I add $theme-dark: ".theme-dark"; to my CSS, the application stops working. See attached image. Note that I included the lang="scss" attribute in the style tag.

I am using Windows 11 but will test on Linux and update my findings.

👍 Expected behavior

Apply the dark theme to the app

👎 Actual Behavior

Application errors out

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: Table content gets shrinked on mobile

👟 Reproduction steps

On mobile, go to https://pink.appwrite.io/foundations/border-radius
Scroll first table to the right

👍 Expected behavior

The description should be larger

👎 Actual Behavior

The description is on a tight space

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

Firefox

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

📚 Documentation: Clicking a button inside input refreshes the page

💭 Description

On elements/input-fields page, clicking a button inside the input field (i.e. to show/hide password, or copy text) causes a whole page refresh.

This happens because most of the input field examples are inside a form, so a button click submits the form by default. The issue would be resolved by setting type="button" on all of these buttons.

<form class="form u-width-full-line u-max-width-500">
  <ul class="form-list">
    <li class="form-item">
      <label class="label">Label</label>
      <div class="input-text-wrapper">
        <input type="password" class="input-text" placeholder="Placeholder" />
        <button
          class="show-password-button"
          aria-label="show password"
          type="button"
        >
          <span class="icon-eye" aria-hidden="true"></span>
        </button>
      </div>
    </li>
    ...
  </ul>
</form>

I have a PR ready if all this sounds alright 😄

As for the Code of Conduct below, I'm getting a 404. This seems to be the correct link.

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

📚 Documentation: The "Getting Started" page has an invalid npm install

💭 Description

npm install @appwrite.io/pink doesn't work. It yields the following error:

+ npm install @appwrite.io/pink
+             ~~~~~~~~~
The splatting operator '@' cannot be used to reference variables in an expression. '@appwrite' can be used only as an argument to a
command. To reference variables in an expression use '$appwrite'.
    + CategoryInfo          : ParserError: (:) [], ParentContainsErrorRecordException
    + FullyQualifiedErrorId : SplattingNotPermitted

This is also true of the repository's readme. Fortunately, all you need to do to fix this is enclose the package name in quotes as follows: npm install "@appwrite.io/pink". I'll make a pull request with this change for your convenience.

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: there is a bug whit modals

👟 Reproduction steps

Im using this whit an astro project, when i copy and paste the code from de the dos it doesn´t show as is spected

this is my code

<li><button class="card s-xciFPC5Srn6Q"><div class="avatar is-size-large s-xciFPC5Srn6Q"><span class="icon-plus s-xciFPC5Srn6Q"></span></div> <h4 class="text u-font-size-20 u-bold s-xciFPC5Srn6Q" style="text-wrap: balance;">Nueva tienda</h4> <p class="text s-xciFPC5Srn6Q" style="text-wrap: pretty;">Crea una nueva tienda donde podras administrar tus productos y poder
    realizar registros de las mismas
    <button class="button s-yu7OS-GWNOYq"><span class="s-yu7OS-GWNOYq">Open Modal</span></button> <dialog class="modal s-yu7OS-GWNOYq" id="dialog" open=""><form class="modal-form s-yu7OS-GWNOYq" method="dialog"><header class="modal-header s-yu7OS-GWNOYq"><div class="u-flex u-main-space-between u-cross-center u-gap-16 s-yu7OS-GWNOYq"><div class="avatar is-color-orange is-medium s-yu7OS-GWNOYq"><span class="icon-exclamation s-yu7OS-GWNOYq" aria-hidden="true"></span></div> <h4 class="modal-title heading-level-5 s-yu7OS-GWNOYq">Modal title</h4> <button class="button is-text is-small is-only-icon s-yu7OS-GWNOYq" aria-label="Close modal"><span class="icon-x s-yu7OS-GWNOYq" aria-hidden="true"></span></button></div></header> <div class="modal-content u-small s-yu7OS-GWNOYq">Modal label text.</div> <div class="modal-footer s-yu7OS-GWNOYq"><div class="u-flex u-main-end u-gap-16 s-yu7OS-GWNOYq"><button class="button is-text s-yu7OS-GWNOYq"><span class="text s-yu7OS-GWNOYq">Button</span></button> <button class="button is-secondary s-yu7OS-GWNOYq"><span class="text s-yu7OS-GWNOYq">Button</span></button></div></div></form></dialog></p></button><!--<Team-card>--><!--<New-store-card>--></li>

👍 Expected behavior

it should be looking like this

👎 Actual Behavior

but it looks like this

🎲 Appwrite version

Different version (specify in environment)

💻 Operating system

Linux

🧱 Your Environment

in runnin on a wsl machine, in an astro project, i just copy it from the demo
https://github.com/appwrite/demos-for-astro
and upgraded all dependecys
but even i've seen this behavior on a codepen instance

https://codepen.io/Trongar/pen/BabyWaP

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: Change cursor pointer in checkbox's disabled state

👟 Reproduction steps

hover on the top of the checkbox which is disabled. it will change the cursor to the pointer.

👍 Expected behavior

Ideally, since the checkbox is disabled we should not show a cursor pointer in this case. we can either set the cursor to not-allowed. or just remove the cursor pointer if the checkbox is disabled.
here is an example of how it should work in a disabled state.

Screen.Recording.2023-06-07.at.1.08.58.AM.mov

👎 Actual Behavior

hover on the top of the checkbox which is disabled. it will change the cursor to the pointer.

Screen.Recording.2023-06-07.at.1.07.35.AM.mov

🎲 Appwrite version

Appwrite Cloud

💻 Operating system

MacOS

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: Nuxt3 import errors

👟 Reproduction steps

Start a new Nuxt3 project: npx nuxi@latest init <project-name>
Run command npm install "@appwrite.io/pink"
In app.vue, add:

<script>
  import "@appwrite.io/pink-icons"
</script>

Start the dev server.

There's an error message from postcss about too much recursion in the Stackblitz example.
Locally, the terminal gets blank and none of the styling is working.
https://stackblitz.com/edit/nuxt-starter-yqsbtw?file=app.vue

👍 Expected behavior

I expect it to work as per the documentation - that I will be able to use the design system on my pages and in my components.

👎 Actual Behavior

From Stackblitz:

🎲 Appwrite version

Appwrite Cloud

💻 Operating system

MacOS

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🚀 Enhancement: Update Footer Year to Reflect Current Year

🔖 Enhancement description

Update the footer year in the documentation to reflect the current year (2024). This enhancement ensures that users have access to accurate and up-to-date information without manual intervention.

🎤 Pitch

Keeping the footer year up to date is crucial for maintaining the accuracy and credibility of our documentation. Users rely on our documentation to be current and trustworthy, and an outdated footer can undermine their confidence in the information provided.

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

📚 Documentation: To improve Readme File of KitchensPink

💭 Description

To improve the readme file of pink/apps
/kitchensink/ , It's one of the important part of the repository so it's should have a proper readme file.

I'll made sure to add every feature and usage of the kitchenspink folder in the repository.

Please assign me this issue to improve the file under hacktoberfest label

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

📚 Documentation: Fix typo

💭 Description

There is a typo on the documentation for Responsive page.
"...In Pink Desing responsive library, there is no overlap between the different resolutions"
Desing should be Design instead

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

📚 Documentation: Input field icon overlapping input text

💭 Description

Some of the input fields on elements/input-fields page have text overlapping with the icon, and with a icon coming from an external source (1Password Chrome extension in this case). Basically, it needs some padding on the right to accommodate the icon.

I classified this as a documentation issue instead of a bug, as it seems there already is a way to handle this, via style="--amount-of-buttons:1" property, it just wasn't applied to these specific examples.

Although, in the last input example, problem is solved by using a u-padding-indline-end-56 class, instead of using that --amount-of-buttons custom property. Which of the 2 approaches is the recommended one?

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🚀 Feature: Allow users to copy icon names by clicking on the icons

🔖 Feature description

To improve the user experience and save time, I propose adding a feature that allows users to copy the icon names by simply clicking on the icons. When a user clicks on an icon, the icon name should be automatically copied to their clipboard, allowing them to easily paste it wherever they need it.

This feature would not only save time for users but also reduce the likelihood of errors when manually copying icon names. It would make the Pink application more user-friendly and efficient.

🎤 Pitch

This feature should be implemented because it would make it much easier and faster for users to work with the Pink application's icons. Currently, users have to manually copy the icon names to use them in code or other applications, which can be a tedious and error-prone process. By allowing users to simply click on an icon to copy its name, we can greatly streamline this workflow and save users time and effort.

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: @appwrite.io/fonts is private or missing

👟 Reproduction steps

@appwrite.io/fonts is not in the npm registry, or you have no permission to fetch it.

👍 Expected behavior

N/A

👎 Actual Behavior

N/A

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: Console warning of using 'end' instead 'flex-end'

👟 Reproduction steps

Running app with pink design installed

👍 Expected behavior

No Warnings should be generated.

👎 Actual Behavior

Console warnings are generating when you use "u-main-end" or "u-cross-end". Suggest using

autoprefixer: end value has mixed support, consider using flex-end instead

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: Image Links Are Broken

👟 Reproduction steps

Visit Pink, Scroll down to bottom (footer).

See -

👍 Expected behavior

Fix the URLs for the Avatar images or use Initials as fallbacks.

👎 Actual Behavior

Broken Images.

🎲 Appwrite version

Appwrite Cloud

💻 Operating system

Linux

🧱 Your Environment

Pink seems to be using Cloud in the back.

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: When the Box Model page is opened in 100% screen size, the page exceeds the page and te github stars needs to be updated

👟 Reproduction steps

So while I was going through the documentation, and opened this page of Box Model-> https://pink.appwrite.io/utilities/box-model , I see the Github stars were not visible on this particular page in my Edge Browser.

Thus I can work on this issue.

👍 Expected behavior

👎 Actual Behavior

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

Icons are too small

On the website, All icon sizes are too small.

🐛 Bug Report: Broken link inf design secrtion of homeopage

👟 Reproduction steps

When we move to the site and scroll down, we confront "design" section where there is "storage" button. As we click on the button we see it is getting redirected to https://pink.appwrite.io/users.html which shows

👍 Expected behavior

As we click on other buttons of design section we see it gets redirected to the homepage and thus it needs to change in this button too.

👎 Actual Behavior

This happened

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: Code not copied

👟 Reproduction steps

On the Home page of the build section, there were two code blocks with the copy button but the copy button doesn't work for some reason.

👍 Expected behavior

Copy code when we click on the copy button.

👎 Actual Behavior

The code doesn't copy when we click on the copy button.

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: Poor legibility/contrast of text selected in code panel when in dark theme

👟 Reproduction steps

Dark theme is enabled
User selects code panel with syntax highlighting
Code has low contrast to selection background, and poor legibility

See dark and light mode comparison below.

👍 Expected behavior

The expectation based on usual best practices is that the highlighted text would be something to contrast directly with the highlight/selection colour (the purple is just an example).

👎 Actual Behavior

Screenshot of example when in dark theme.

🎲 Appwrite version

Different version (specify in environment)

💻 Operating system

Windows

🧱 Your Environment

Pink v0.0.2 via unpkg CDN.
Windows 10
Chrome and Firefox

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

📚 Documentation: Wrong steps under Setup guidelines in the documentation page

💭 Description

When we visit https://github.com/appwrite/pink/blob/main/CONTRIBUTING.md and follow the setup guidelines we see that it instructs us to clone appwrite ui repository eventhough the repository is https://github.com/appwrite/pink, thus this needs to be changed.

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: Some icons from heroicons dont work

👟 Reproduction steps

"@appwrite.io/pink-icons" to your project
use <div class="icon-login"></div>

👍 Expected behavior

this icon should appear

👎 Actual Behavior

It's an empty div

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

@appwrite.io/pink - 0.0.6-rc.9

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🚀 Feature: Update Header UI to show github stars

🔖 Feature description

Update Github Stars UI component in website header

Current UI

Proposed Change

🎤 Pitch

I want to change the UI component in site header to show github stars since:

The number next to Github icon and label seems ambiguous as it may represent no of forks , etc . Putting star icon next to it represents that it is github stars .
No need to write text Github as label next to Github icon .

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

Feature request: Adding transform scale(1.01) to the cards under article section

👟 Reproduction steps

I want to add the the transform scale (1.01) or making the cards little bigger while hovering, which can make the UI more cool.

👍 Expected behavior

It would make the cards little bit bigger while hovering with a smooth transitioning

👎 Actual Behavior

While hovering the cards, it does'nt show any effect

🎲 Appwrite version

Appwrite Cloud

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: File Upload Box progress indicator stretches horizontally

👟 Reproduction steps

I found this unwanted feature while exploring the showcases in the main website.

Apparently, if the horizontal space is limited, the component gets stretched, so just open the link and shrink the browser window to reproduce this.

👍 Expected behavior

Not to stretch.

👎 Actual Behavior

Ok, viewport not too stretched so there's enough space to grow:

YACK!

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: Wrong text color on code panel when using light theme

👟 Reproduction steps

Go to code panel component page
Change theme from dark mode to light mode

👍 Expected behavior

Code panel's text color should remain the same

👎 Actual Behavior

The text color changes

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

Firefox

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: RTL support: Switch

👟 Reproduction steps

Something like this fixes this behaviour

[dir=rtl] .switch:where(:checked)::before {
    transform: translateX(-1rem);
}

👍 Expected behavior

To be this

👎 Actual Behavior

Magic URL dir = 'rtl'
Passowrd dir = 'ltr'

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: The npm install command on the Getting Started page doesn't work for Powershell

👟 Reproduction steps

Copy the npm install command from the Pink Design Getting Started page

Run the command in Powershell

👍 Expected behavior

The npm install should work.

👎 Actual Behavior

The npm install fails.

🎲 Appwrite version

Appwrite Cloud

💻 Operating system

Windows

🧱 Your Environment

N/A

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: scrollbar appears on phone chrome dev tools

👟 Reproduction steps

Visit https://codepen.io/omar2205/pen/XWBoWKr
Open a debug version (https://user-images.githubusercontent.com/1373867/216283364-f2e64c1d-c53f-425e-9eb3-3eb3e5ccf620.png)
Switch to responsive / phone

Even if I deleted everything (even the body element), there are still scrollbars.

It's visible even on https://pink.appwrite.io/getting-started (refresh in responsive mode)

Weirdly enough, this behaviour is only happening in dev tools. When testing on an actual phone, it's not visible.

👍 Expected behavior

There shouldn't be scrollbars

👎 Actual Behavior

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🚀 Feature: Purging Classes that aren't being used

🔖 Feature description

There are several classes in appwrite pink, let's just assume three classes c1, c2 and c3.

I only use c1, I am also getting c2 and c3 bundled which is just useless load for me, and this thing for applies to other users as well who are using a certain amount of classes and not the entirety.

Can we make it such that only the css you use gets bundled?

🎤 Pitch

Taking in example from Tailwind CSS

"Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project."

https://tailwindcss.com/docs/optimizing-for-production

Can something similar be done for appwrite pink?

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: Clicking between side-nav links closes the collapsible section

👟 Reproduction steps

Open a side-nav menu collapsible
Click between two links

👍 Expected behavior

Remain as it is

👎 Actual Behavior

Closes the collapsible section

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

Firefox

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🚀 Feature: GitHub A11y bot for alt text

🔖 Feature description

You should add https://github.com/github/accessibility-alt-text-bot, or have another way (I'll volunteer!) to add alt-text to your images for accessibility.

🎤 Pitch

Since appwrite/pink is accessibility forward, alt-text on images is imperative to meet compliance standards. If you don't want to add a bot, I volunteer to make pull requests to add alt-text to your images. Accessibility is my thing.

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

🐛 Bug Report: Sticky tabs indicating wrong active session on certain resolutions

👟 Reproduction steps

Go to the home page, using a 4k viewport, or a small mobile phone viewport
Scroll down to the sticky tabs (Design, Build, Collaborate)
Navigate between sections

👍 Expected behavior

The tabs should accurately dictate which section is currently visible

👎 Actual Behavior

The tabs show an active session other than the one visible

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

Firefox

👀 Have you spent some time to check if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

appwrite / pink Goto Github PK

pink's Introduction

Getting Started

NPM

CDN

Accessibility

Supported Browsers

Contributing

Security

Follow Us

License

pink's People

Contributors

Stargazers

Watchers

Forkers

pink's Issues

💭 Description

👀 Have you spent some time to check if this issue has been raised before?

🏢 Have you read the Code of Conduct?

🔖 Feature description

🎤 Pitch

👀 Have you spent some time to check if this issue has been raised before?

🏢 Have you read the Code of Conduct?

👟 Reproduction steps

👍 Expected behavior

👎 Actual Behavior

🎲 Appwrite version

💻 Operating system

🧱 Your Environment

👀 Have you spent some time to check if this issue has been raised before?

🏢 Have you read the Code of Conduct?

👟 Reproduction steps

👍 Expected behavior

👎 Actual Behavior

🎲 Appwrite version

💻 Operating system

🧱 Your Environment

👀 Have you spent some time to check if this issue has been raised before?

🏢 Have you read the Code of Conduct?

💭 Description

👀 Have you spent some time to check if this issue has been raised before?

🏢 Have you read the Code of Conduct?

💭 Description

👀 Have you spent some time to check if this issue has been raised before?

🏢 Have you read the Code of Conduct?

👟 Reproduction steps

👍 Expected behavior

👎 Actual Behavior

🎲 Appwrite version

💻 Operating system

🧱 Your Environment

👀 Have you spent some time to check if this issue has been raised before?

🏢 Have you read the Code of Conduct?

👟 Reproduction steps

👍 Expected behavior

👎 Actual Behavior

🎲 Appwrite version

💻 Operating system

🧱 Your Environment

👀 Have you spent some time to check if this issue has been raised before?

🏢 Have you read the Code of Conduct?

👟 Reproduction steps

👍 Expected behavior

👎 Actual Behavior

🎲 Appwrite version

💻 Operating system

🧱 Your Environment

👀 Have you spent some time to check if this issue has been raised before?

🏢 Have you read the Code of Conduct?

🔖 Enhancement description

🎤 Pitch

👀 Have you spent some time to check if this issue has been raised before?

🏢 Have you read the Code of Conduct?

💭 Description

👀 Have you spent some time to check if this issue has been raised before?

🏢 Have you read the Code of Conduct?

💭 Description

👀 Have you spent some time to check if this issue has been raised before?

🏢 Have you read the Code of Conduct?