search

juxtopposed / realtimecolors

Real-time UI Colorpicking Tool. See your favorite colors of choice for a website in real time.
https://realtimecolors.com
Other
798 stars 31 forks source link

[Bug]: Tailwind Shades are inverted #108

Open marcellocurto opened 4 months ago

marcellocurto commented 4 months ago

Is there an existing issue for this?

Describe the bug

When I'm exporting shades for Tailwind CSS, they are in the wrong order. *-50 is supposed to be the brightest and *-950 the darkest color. A quick workaround for now is to click the Dark/Light button, as this reverts the order.

Interestingly, the order is correct when I select Themes as well.

This is the CSS as I currently get it from export:

colors: {
 'text': {
   50: 'hsl(246, 76%, 5%)',
   100: 'hsl(248, 76%, 10%)',
   200: 'hsl(247, 75%, 20%)',
   300: 'hsl(247, 75%, 30%)',
   400: 'hsl(247, 75%, 40%)',
   500: 'hsl(247, 75%, 50%)',
   600: 'hsl(247, 75%, 60%)',
   700: 'hsl(247, 75%, 70%)',
   800: 'hsl(247, 75%, 80%)',
   900: 'hsl(248, 76%, 90%)',
   950: 'hsl(246, 76%, 95%)',
 },
 'background': {
   50: 'hsl(240, 60%, 5%)',
   100: 'hsl(240, 61%, 10%)',
   200: 'hsl(240, 61%, 20%)',
   300: 'hsl(240, 59%, 30%)',
   400: 'hsl(240, 60%, 40%)',
   500: 'hsl(240, 60%, 50%)',
   600: 'hsl(240, 60%, 60%)',
   700: 'hsl(240, 59%, 70%)',
   800: 'hsl(240, 61%, 80%)',
   900: 'hsl(240, 61%, 90%)',
   950: 'hsl(240, 60%, 95%)',
 },
 'primary': {
   50: 'hsl(244, 68%, 5%)',
   100: 'hsl(243, 69%, 10%)',
   200: 'hsl(243, 69%, 20%)',
   300: 'hsl(243, 69%, 30%)',
   400: 'hsl(243, 68%, 40%)',
   500: 'hsl(243, 68%, 50%)',
   600: 'hsl(243, 68%, 60%)',
   700: 'hsl(243, 69%, 70%)',
   800: 'hsl(243, 69%, 80%)',
   900: 'hsl(243, 69%, 90%)',
   950: 'hsl(240, 68%, 95%)',
 },
 'secondary': {
   50: 'hsl(242, 100%, 5%)',
   100: 'hsl(244, 100%, 10%)',
   200: 'hsl(243, 100%, 20%)',
   300: 'hsl(243, 100%, 30%)',
   400: 'hsl(243, 100%, 40%)',
   500: 'hsl(243, 100%, 50%)',
   600: 'hsl(243, 100%, 60%)',
   700: 'hsl(243, 100%, 70%)',
   800: 'hsl(243, 100%, 80%)',
   900: 'hsl(244, 100%, 90%)',
   950: 'hsl(245, 100%, 95%)',
 },
 'accent': {
   50: 'hsl(242, 100%, 5%)',
   100: 'hsl(242, 100%, 10%)',
   200: 'hsl(242, 100%, 20%)',
   300: 'hsl(242, 100%, 30%)',
   400: 'hsl(242, 100%, 40%)',
   500: 'hsl(242, 100%, 50%)',
   600: 'hsl(242, 100%, 60%)',
   700: 'hsl(242, 100%, 70%)',
   800: 'hsl(242, 100%, 80%)',
   900: 'hsl(242, 100%, 90%)',
   950: 'hsl(242, 100%, 95%)',
 },
},

Reproduction Steps

  1. Go to https://www.realtimecolors.com/
  2. Click on Export -> Tailwind CSS
  3. Select shades.
  4. See error

Expected behavior

For the order of the colors to be the other way around.

Screenshots

No response

Device Info

MacOS 13 - Safari 16.5.2

Additional context

No response