Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handmade color palettes throw an error with unquoted keys #362

Open
desig9stein opened this issue Nov 26, 2024 · 1 comment · May be fixed by #367
Open

Handmade color palettes throw an error with unquoted keys #362

desig9stein opened this issue Nov 26, 2024 · 1 comment · May be fixed by #367
Assignees
Labels
✅ status: resolved Applies to issues that have pending PRs resolving them, or PRs that have already merged.

Comments

@desig9stein
Copy link
Contributor

desig9stein commented Nov 26, 2024

Problem Summary:
When using wrapper mixins (like dark-theme()) and passing a handmade palette with unquoted keys, it causes a compilation error. However, if the keys in the palette are quoted, the error is resolved, and the mixins work as expected.

STEPS TO REPRODUCE

  1. Create a handmade palette
$handmade-palette: (
    primary: (
        50: #e6eff8,
        '50-contrast': black,
        100: #bfd7f2,
        '100-contrast': black
    ),
    secondary: (
        50: #fef7e2,
        '50-contrast': black,
        100: #fdeab7,
        '100-contrast': black
    )
    ...
);
  1. Use the palette in a wrapper mixin like dark-heme():
@include dark-theme(
    $palette: $handmade-palette
);
  1. Compilation error occurs.
image

BEHAVIOR:

Unquoted keys in palettes cause compilation errors.
Quoting keys resolves the issue.

EXPECTED BEHAVIOR:

The wrapper mixins (or theme()) should handle both quoted and unquoted keys in handmade palettes, OR
The documentation should explicitly state that palette keys must be quoted to avoid errors.

@desig9stein desig9stein changed the title Wrapper mixins around theme() throw an error when using a palette with unquoted keys Handmade color palettes throw an error with unquoted keys Nov 26, 2024
@simeonoff
Copy link
Contributor

simeonoff commented Dec 10, 2024

Seems this is only true for the gray color variants. Likely due to the fact that the key is interpreted as color instead of string.

I guess for handcrafted palettes, we should instruct users to define the keys in the map as explicit strings? So that named color keys like gray can be correctly interpolated.

@simeonoff simeonoff added the ✅ status: resolved Applies to issues that have pending PRs resolving them, or PRs that have already merged. label Dec 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✅ status: resolved Applies to issues that have pending PRs resolving them, or PRs that have already merged.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants