Feat(variables-scss): Formatting color tokens and support themes #DS-1461

[curdaj]

Description

Additional context

Issue reference

[netlify]

✅ Deploy Preview for spirit-design-system ready!

Name	Link
🔨 Latest commit	1402cb5
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system/deploys/66e2fbe8c1ca3d000877fc08
😎 Deploy Preview	https://deploy-preview-1624--spirit-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 96 (🟢 up 1 from production) Accessibility: 93 (no change from production) Best Practices: 100 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for spirit-design-system-storybook canceled.

Name	Link
🔨 Latest commit	1402cb5
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/66e2fbe8e2bc7d0008ec1264

[coveralls]

coverage: 78.696%. remained the same
when pulling 1402cb5 on feat/ds-1461-formatting-colors
into 01aa3cf on main.

[coveralls]

coverage: 78.698%. remained the same
when pulling 63c80b3 on feat/ds-1461-formatting-colors
into 497de39 on main.

[coveralls]

coverage: 78.698%. remained the same
when pulling 63c80b3 on feat/ds-1461-formatting-colors
into 497de39 on main.

[pavelklibani]

uf... good job xD

[literat]

Good job for solving all those parsing issues 👏 I know that some parts of the code are copied from previous exporters, but also think that we can do better. I have reserved some time to do the code review again together. There are a few blind spots for me, so let's discuss them :-) Thanks.

[crishpeen]

$focus-color: (
    basic: (
        color 01: $focus-basic-color-01,
    ),
) !default;

color 01 -> color-01

---

$gradients-color: (
    basic-overlay: (
        color 01: $gradients-basic-overlay-color-01,
        color 02: $gradients-basic-overlay-color-02,
    ),
) !default;

can this object be called gradient-colors? Or is it an exception?

---

You are missing the global colors map

$colors: (
    action: $action-colors,
    background: $background-colors,
    border: $border-colors,
    custom: $custom-colors,
    disabled: $disabled-colors,
    emotion: $emotion-colors,
    focus: $focus-colors,
    gradient: $gradient-colors,
    neutral: $neutral-colors,
    selected: $selected-colors,
    shadow: $shadow-colors,
    text: $text-colors,
) !default;

It links other maps

[curdaj]

$focus-color: (
    basic: (
        color 01: $focus-basic-color-01,
    ),
) !default;

color 01 -> color-01

$gradients-color: (
    basic-overlay: (
        color 01: $gradients-basic-overlay-color-01,
        color 02: $gradients-basic-overlay-color-02,
    ),
) !default;

can this object be called gradient-colors? Or is it an exception?

You are missing the global colors map

$colors: (
    action: $action-colors,
    background: $background-colors,
    border: $border-colors,
    custom: $custom-colors,
    disabled: $disabled-colors,
    emotion: $emotion-colors,
    focus: $focus-colors,
    gradient: $gradient-colors,
    neutral: $neutral-colors,
    selected: $selected-colors,
    shadow: $shadow-colors,
    text: $text-colors,
) !default;

It links other maps

ad 1 - fixed in figma/supernova

ad 2 - in Supernova, there is a gradients name of the group, so its correct.
It should be renamed to gradient in Supernova.

ad 3 - added logic for global color object at the end of the file