Problem

Primer Prism doesn't work on small viewports. Let's make the app usable for small viewports (or at least show a message prompting people to use a larger viewport)

Describe the bug
When adding a color to a scale by clicking the "+" button, the current selected color remains selected, instead of the newly created one. This can be annoying as you start editing the color, only later realizing you were editing one you already made earlier.

To Reproduce
Steps to reproduce the behavior:

1. Click any scale
2. Click the "+" button
3. Notice the color selection remains the same

Expected behavior
Auto-select the latest created color (=latest index).

Screenshots
N/A

Environment
All

Describe the bug

App crashes in Safari:

https://primer.style/prism/local/81680851-365b-4cc2-89f0-4a5856b07bda/scale/7b1f34cc-d9d9-4c03-84f3-208bc962b7f8

To Reproduce
Steps to reproduce the behavior:

Using Safari (15.6.1) go here:

https://primer.style/prism/local/81680851-365b-4cc2-89f0-4a5856b07bda/scale/7b1f34cc-d9d9-4c03-84f3-208bc962b7f8

It won't load, white screen of death

Expected behavior
Expected page to load, it didn't

Exporting the palette, and re-importing, I get an invalid color error, and here's why:

  "coral": [
    "#2ebef",
    "#fce4e9",
    "#f8cdd8",
    "#f2a4be",
    "#e762a3",
    "#aa3e7e",
    "#72305d",
    "#492342",
    "#2d182c",
    "#140b16"
  ],

The first color in coral #2ebef is only 5 characters.

Screenshots
White screen

Environment

Safari (15.6.1)

Additional context

Just the specific color list (Coral) is corrupt, the other color lists for the group still work. I am not certain what I did to cause this, but I was working with linked curves IIR.

What

When I create a new palette and remove all colors from scale, I see a blank page

In Action

P. S.

What about to add issue template, to let reporters know what they need to provide? 🤔

Describe the bug
Seems like the global_state in localStorage grows overtime and hits a quota and errors out resulting in the inability to move or interact with the UI at all.

Uncaught DOMException: The quota has been exceeded. main.832ea5e9.chunk.js:1
    a global-state.tsx:450
    <anonymous> self-hosted:1115
    update interpreter.js:259
    m interpreter.js:104
    process scheduler.js:64
    schedule scheduler.js:43
    send interpreter.js:98
    t.prototype.defer/this.delayedEventsMap[e.id]< interpreter.js:739
    (Async: setTimeout handler)
    setTimeout interpreter.js:1258
    t interpreter.js:1257
    defer interpreter.js:735
    exec interpreter.js:783
    execute interpreter.js:198
    update interpreter.js:224
    m interpreter.js:104
    process scheduler.js:64
    schedule scheduler.js:43
    send interpreter.js:98
    onChange scale.tsx:441
    React 11
    bind_applyFunctionN self-hosted:1313
    Jt self-hosted:1276
    unstable_runWithPriority scheduler.production.min.js:18
    React 3
    bind_applyFunctionN self-hosted:1313
    Xt self-hosted:1276
    receiveMessage SelectChild.jsm:272
    receiveMessage SelectChild.jsm:475

To Reproduce
Steps to reproduce the behavior:

1. Use prism a lot, with a lot of scales

Environment

• OS: macOS BigSur
• Browser: Firefox
• Version: latest

Describe the bug
Adding a lot of scales to a palette break the palette card on the homepage.

To Reproduce
Steps to reproduce the behavior:

1. Go to the home page
2. Click on the '+' button on top right corner to create a new palette.
3. Click on new scale to add a new color. Add around 15 new scales.
4. Go back to home screen.
5. Observe the palette card, you can't see the color scales.

Expected behavior
Either the scales should be visible and Horizontally scrollable.
Or It should show a fixed number of scales.

Screenshots

Environment

• OS: OSX
• Browser Chrome
• Version 103

Describe the bug
Whenever you try to select a bg color the palette page lags,

To Reproduce
Steps to reproduce the behavior:

1. Create a palette
2. go to palette page
3. select background color with input with id 'bg-color', click on the color selection prompt and drag the cursor, see the lag as the values change

Expected behavior
Frames should not drop and the ui should not look laggy/choppy

Environment
Windows 10 chrome 102

Additional context
Reproducible if you run on localhost as well

I find myself getting a bit lost in our palettes (we have 20+ steps) highlighting the index value atop each color would be helpful imo. I've got this running locally can get a PR up if interested.

This might be intentional or an oversight but there is no license attached.

Can you clarify if a license will be added?

I think it would be nice to insert cards mid-palette. I've had two extent colors that I knew I wanted to use and then fill in the gaps between. Perhaps the '+' could add a new card to the right of whichever card is selected. For example where the arrow is below:

Hey there, I was playing around with the codebase. Added the delete button on the card. Let me know what are your views on this. I'd be happy to do a PR.

When using HSL values from my colors in Figma inside Primer Prism, the resulting color is not what is supossed to be, am I missing something?

Hey! I'm interested in drafting some PRs and don't want to nuke the format. Is there a code format that is preferred here that can be added? I assume @github/prettier-config

Describe the bug
App crashes when an empty scale is opened

To Reproduce

1. Create a new palette
2. Import the following JSON

{
  "lightgrey": [],
  "dimgrey": [],
  "olivedrab": "#6b8e23"
}

3. select either the lightgrey or dimgrey scales

Expected behavior
An empty scale should be displayed, it should allow adding a color using the + button.
Optionally, the pane on the right could continue to function but without displaying any color settings, just the scale settings.

P.S. Sorry for not making this issue earlier

Describe the bug
Some colors dont seem to be represented correctly.

To Reproduce
Steps to reproduce the behavior:

1. Go to prism
2. Click on the blue palette
3. Enter hsl(189.5,59.4%,74.9%) for a color value

Expected behavior
The outputted color in the palette and it's corresponding hex/rgba color don't seem to match expectations. For example, if you use convertacolor and paste in hsl(189.5,59.4%,74.9%) I get values I'd expect. However, the rgba/hex values from prism are a good bit off.

Screenshots

Environment

• OS: MacOS Monterey
• Browser Chrome
• Version 102.0.5005.61

Additional context
I could also be misunderstanding how this works, but I seemed to get true-ish values for when I went through it with a gray palette.

Describe the bug
App crashes when a user deletes the selected color using the - button

To Reproduce
Steps to reproduce the behavior:

1. Go to https://primer.style/prism/.
2. Create a palette.
3. Select a scale.
4. Select the last color in the scale.
5. Click the - button.

Expected behavior
The color that is now the latest after deletion should be selected

Actual behavior
The website presents a completely white screen, and the application throws the following error.

VM1050 react_devtools_backend.js:4026 Error: Failed to parse color: ""
    at g (parseToRgba.ts:51:3)
    at B (getLuminance.ts:18:21)
    at _ (getContrast.ts:11:22)
    at Be (scale.tsx:497:31)
    at oi (react-dom.production.min.js:157:137)
    at Fi (react-dom.production.min.js:180:154)
    at $u (react-dom.production.min.js:269:343)
    at Tc (react-dom.production.min.js:250:347)
    at jc (react-dom.production.min.js:250:278)
    at kc (react-dom.production.min.js:250:138)
overrideMethod @ VM1050 react_devtools_backend.js:4026
uu @ react-dom.production.min.js:216
a.componentDidCatch.n.callback @ react-dom.production.min.js:217
da @ react-dom.production.min.js:131
hu @ react-dom.production.min.js:220
Cc @ react-dom.production.min.js:259
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vo @ react-dom.production.min.js:122
_c @ react-dom.production.min.js:252
bc @ react-dom.production.min.js:243
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vo @ react-dom.production.min.js:122
qo @ react-dom.production.min.js:123
Ko @ react-dom.production.min.js:122
Le @ react-dom.production.min.js:292
Xt @ react-dom.production.min.js:73
VM1050 react_devtools_backend.js:4026 Error: Failed to parse color: ""
    at g (parseToRgba.ts:51:3)
    at B (getLuminance.ts:18:21)
    at _ (getContrast.ts:11:22)
    at Be (scale.tsx:497:31)
    at oi (react-dom.production.min.js:157:137)
    at Fi (react-dom.production.min.js:180:154)
    at $u (react-dom.production.min.js:269:343)
    at Tc (react-dom.production.min.js:250:347)
    at jc (react-dom.production.min.js:250:278)
    at kc (react-dom.production.min.js:250:138)
overrideMethod @ VM1050 react_devtools_backend.js:4026
uu @ react-dom.production.min.js:216
n.callback @ react-dom.production.min.js:216
da @ react-dom.production.min.js:131
hu @ react-dom.production.min.js:220
Cc @ react-dom.production.min.js:259
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vo @ react-dom.production.min.js:122
_c @ react-dom.production.min.js:252
bc @ react-dom.production.min.js:243
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vo @ react-dom.production.min.js:122
qo @ react-dom.production.min.js:123
Ko @ react-dom.production.min.js:122
Le @ react-dom.production.min.js:292
Xt @ react-dom.production.min.js:73
parseToRgba.ts:51 Uncaught Error: Failed to parse color: ""
    at g (parseToRgba.ts:51:3)
    at B (getLuminance.ts:18:21)
    at _ (getContrast.ts:11:22)
    at Be (scale.tsx:497:31)
    at oi (react-dom.production.min.js:157:137)
    at Fi (react-dom.production.min.js:180:154)
    at $u (react-dom.production.min.js:269:343)
    at Tc (react-dom.production.min.js:250:347)
    at jc (react-dom.production.min.js:250:278)
    at kc (react-dom.production.min.js:250:138)
g @ parseToRgba.ts:51
B @ getLuminance.ts:18
_ @ getContrast.ts:11
Be @ scale.tsx:497
oi @ react-dom.production.min.js:157
Fi @ react-dom.production.min.js:180
$u @ react-dom.production.min.js:269
Tc @ react-dom.production.min.js:250
jc @ react-dom.production.min.js:250
kc @ react-dom.production.min.js:250
bc @ react-dom.production.min.js:243
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vo @ react-dom.production.min.js:122
qo @ react-dom.production.min.js:123
Ko @ react-dom.production.min.js:122
Le @ react-dom.production.min.js:292
Xt @ react-dom.production.min.js:73

This error is very similar to #10, but not completely since in #10 all the colors have to be deleted.
Pull request #15 does fix issue #10, but not this one.

Environment

• OS: Windows 10 21H1 Build 19043.1766
• Browser: Chrome 102.0.5005.115

Describe the bug
When I select a scale and delete a color the page goes blank

To Reproduce
Steps to reproduce the behavior:

1. Go to prism
2. Create a new palette or go to an existing palette
3. Select an existing scale or add a new sacle
4. On the right panel select delete color for the scale (screenshot below)

Expected behavior
Not exactly sure but the page probably shouldn't go blank

Screenshots

Environment
Chrome Version 102.0.5005.115 (Official Build) (x86_64)
Mac OS Catalina - Version 10.15.7

Additional context
Posted a video here: https://twitter.com/DamiDina/status/1539291589847171073

Describe the bug
App crashes when applying linked curves and invalid values

To Reproduce
Steps to reproduce the behavior:

1. Create a curve
2. Apply it to your color
3. Adjust curve via input spinner to push curve toward a non-existant value (out of bounds)

Expected behavior
The app doesn't crash, causing me not to reach my color palette anymore. I shouldn't be able to use the spinner to create a non-existant color

Screenshots (Video)
https://user-images.githubusercontent.com/20825047/192326341-56e3fa9b-a3f4-4d92-8de3-706a3e43708c.mp4

Additional context
It seems like there might be a few things at work. App crashes when an invalid hex value is created but it also seems like the linked curves are messing with the input values.

It would also be nice if I could reach my palettes again. If I attempt to open the color palette that caused the app to crash, it crashes again