diff --git a/apps/demo/CHANGELOG.md b/apps/demo/CHANGELOG.md index bd3d34a340..271b0ee861 100644 --- a/apps/demo/CHANGELOG.md +++ b/apps/demo/CHANGELOG.md @@ -3,6 +3,39 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + + +# [1.0.0-alpha.1](https://github.com/lmc-eu/spirit-design-system/compare/@lmc-eu/spirit-demo-app@1.0.0-alpha.0...@lmc-eu/spirit-demo-app@1.0.0-alpha.1) (2024-11-06) + +### Features + +- **web:** Remove `spirit-` prefix from themes ([29ededb](https://github.com/lmc-eu/spirit-design-system/commit/29ededb)) + +**Note:** Version bump only for package @lmc-eu/spirit-demo-app + + + +# [1.0.0-alpha.0](https://github.com/lmc-eu/spirit-design-system/compare/@lmc-eu/spirit-demo-app@0.0.8...@lmc-eu/spirit-demo-app@1.0.0-alpha.0) (2024-10-17) + +### BREAKING CHANGES + +- **web:** Switch `Header` component to v3 design tokens [#DS-1453](https://github.com/lmc-eu/spirit-design-system/issues/DS-1453) ([840c28a](https://github.com/lmc-eu/spirit-design-system/commit/840c28a)) + +### Documentation + +- **form-validations,web,web-react:** Add theme switcher to the demo app [#DS-1479](https://github.com/lmc-eu/spirit-design-system/issues/DS-1479) ([02381f2](https://github.com/lmc-eu/spirit-design-system/commit/02381f2)) +- **form-validations,web,web-react:** Redesign the demo app [#DS-1479](https://github.com/lmc-eu/spirit-design-system/issues/DS-1479) ([2a2e309](https://github.com/lmc-eu/spirit-design-system/commit/2a2e309)) +- Set default background color to main element in demos ([ed4d322](https://github.com/lmc-eu/spirit-design-system/commit/ed4d322)) +- **web-twig:** Redesign the demo app [#DS-1479](https://github.com/lmc-eu/spirit-design-system/issues/DS-1479) ([18f7fe0](https://github.com/lmc-eu/spirit-design-system/commit/18f7fe0)) + +### Features + +- **web:** Switch Demo styles to v3 design tokens structure [#DS-1430](https://github.com/lmc-eu/spirit-design-system/issues/DS-1430) ([8f27889](https://github.com/lmc-eu/spirit-design-system/commit/8f27889)) + +### Tests + +- **web,web-react:** Update visual snapshots after demo apps redesign [#DS-1479](https://github.com/lmc-eu/spirit-design-system/issues/DS-1479) ([b9b23e5](https://github.com/lmc-eu/spirit-design-system/commit/b9b23e5)) + ## [0.0.9](https://github.com/lmc-eu/spirit-design-system/compare/@lmc-eu/spirit-demo-app@0.0.8...@lmc-eu/spirit-demo-app@0.0.9) (2024-11-22) diff --git a/apps/demo/config/vite/app.ts b/apps/demo/config/vite/app.ts index 458268351f..944e3f4cea 100644 --- a/apps/demo/config/vite/app.ts +++ b/apps/demo/config/vite/app.ts @@ -44,6 +44,17 @@ export default defineConfig({ }, runtimeOptions: { data: { + themes: [ + { + id: 'light-default', + name: 'Light Default', + }, + { + id: 'light-on-brand', + name: 'Light on Brand', + }, + ], + is_development: process.env.NODE_ENV === 'development', // Get the list of components directories and pass their names to the data web_components: getListOfNestedDirectories('../../packages/web/src/scss/components', 'index.html'), // Get the list of helpers directories and pass their names to the data diff --git a/apps/demo/package.json b/apps/demo/package.json index c8fc469441..ead35ac02b 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -1,6 +1,6 @@ { "name": "@lmc-eu/spirit-demo-app", - "version": "0.0.9", + "version": "1.0.0-alpha.1", "description": "Demo platform of the Spirit Design System", "license": "MIT", "private": true, diff --git a/apps/demo/partials/boxList.hbs b/apps/demo/partials/boxList.hbs deleted file mode 100644 index 4de8e4ccba..0000000000 --- a/apps/demo/partials/boxList.hbs +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/apps/demo/partials/card.hbs b/apps/demo/partials/card.hbs new file mode 100644 index 0000000000..d934a61cff --- /dev/null +++ b/apps/demo/partials/card.hbs @@ -0,0 +1,5 @@ +
  • + + {{content}} + +
    • diff --git a/apps/demo/partials/cardList.hbs b/apps/demo/partials/cardList.hbs new file mode 100644 index 0000000000..cc56399ec3 --- /dev/null +++ b/apps/demo/partials/cardList.hbs @@ -0,0 +1,5 @@ + diff --git a/apps/demo/partials/component.hbs b/apps/demo/partials/component.hbs deleted file mode 100644 index 59fd60c5a7..0000000000 --- a/apps/demo/partials/component.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
  • - {{component.title}} -
    • diff --git a/apps/demo/partials/cover.hbs b/apps/demo/partials/cover.hbs new file mode 100644 index 0000000000..83bf99da92 --- /dev/null +++ b/apps/demo/partials/cover.hbs @@ -0,0 +1,50 @@ +
    +
    + +

    + {{title}} + + {{#if isUnstable}} + Unstable + {{/if}} +

    + + + +
    +
    diff --git a/apps/demo/partials/footer.hbs b/apps/demo/partials/footer.hbs new file mode 100644 index 0000000000..102bd37239 --- /dev/null +++ b/apps/demo/partials/footer.hbs @@ -0,0 +1,7 @@ + diff --git a/apps/demo/partials/form-validations/layout/default.hbs b/apps/demo/partials/form-validations/layout/default.hbs new file mode 100644 index 0000000000..0ed0b0e8c6 --- /dev/null +++ b/apps/demo/partials/form-validations/layout/default.hbs @@ -0,0 +1,16 @@ +{{#> layout/base package="Form Validations" packageUrl="/packages/form-validations/" title=title}} + + {{> header}} + {{> cover}} + +
    +
    + + {{> @partial-block}} + +
    +
    + + {{> footer}} + +{{/layout/base}} diff --git a/apps/demo/partials/header.hbs b/apps/demo/partials/header.hbs index a5c8b9f3fe..81dde5ee82 100644 --- a/apps/demo/partials/header.hbs +++ b/apps/demo/partials/header.hbs @@ -1,20 +1,149 @@ -
    -
    +
    + + {{> web/assets/spiritLogoInverted }} + -

    Spirit Design System

    -

    {{#if package}}{{package}} - {{/if}}Development Preview

    + +
    + +
    + + + + + + + +
    + + + +
    +
    + + +
    + + Close + + + + + + + +
    -
    + + diff --git a/apps/demo/partials/layout/base.hbs b/apps/demo/partials/layout/base.hbs index a9f2839d49..885dcc3455 100644 --- a/apps/demo/partials/layout/base.hbs +++ b/apps/demo/partials/layout/base.hbs @@ -3,7 +3,15 @@ - {{#if package}}{{package}} - {{/if}}Development Preview + + {{#if title}} + {{title}} — + {{#if package}}{{package}} —{{/if}} + Spirit Design System + {{else}} + Spirit Design System — Development preview + {{/if}} + @@ -19,11 +27,32 @@ + + + + + {{#> scripts}} {{/scripts}} - + {{> @partial-block}} diff --git a/apps/demo/partials/layout/default.hbs b/apps/demo/partials/layout/default.hbs deleted file mode 100644 index 61f4fc6e0b..0000000000 --- a/apps/demo/partials/layout/default.hbs +++ /dev/null @@ -1,20 +0,0 @@ -{{#> layout/base package=package}} - - {{#*inline "scripts"}} - {{/inline}} - - {{#with package as |pkgName|}} - {{> header package=pkgName}} - {{else}} - {{> header package=""}} - {{/with}} - -
    -
    - - {{> @partial-block}} - -
    -
    - -{{/layout/base}} diff --git a/apps/demo/partials/layout/plain.hbs b/apps/demo/partials/layout/plain.hbs deleted file mode 100644 index c5b819609a..0000000000 --- a/apps/demo/partials/layout/plain.hbs +++ /dev/null @@ -1,11 +0,0 @@ -{{#> layout/base}} - -
    -
    - - {{> @partial-block}} - -
    -
    - -{{/layout/base}} diff --git a/apps/demo/partials/section.hbs b/apps/demo/partials/section.hbs deleted file mode 100644 index d342e9b9bf..0000000000 --- a/apps/demo/partials/section.hbs +++ /dev/null @@ -1,7 +0,0 @@ -
    - -

    {{title}}

    - - {{> @partial-block}} - -
    diff --git a/apps/demo/partials/themeSwitcher.hbs b/apps/demo/partials/themeSwitcher.hbs new file mode 100644 index 0000000000..09890be719 --- /dev/null +++ b/apps/demo/partials/themeSwitcher.hbs @@ -0,0 +1,15 @@ +
    + +
    + +
    + +
    +
    +
    diff --git a/apps/demo/partials/tileList.hbs b/apps/demo/partials/tileList.hbs deleted file mode 100644 index 4e8ae9d7f7..0000000000 --- a/apps/demo/partials/tileList.hbs +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/apps/demo/partials/web-react/demo.hbs b/apps/demo/partials/web-react/demo.hbs index f410b9e6a6..e24b9d6751 100644 --- a/apps/demo/partials/web-react/demo.hbs +++ b/apps/demo/partials/web-react/demo.hbs @@ -1,6 +1,6 @@ -{{#> web-react/layout/plain }} +{{#> web-react/layout/default }} -
    - +
    + -{{/web-react/layout/plain }} +{{/web-react/layout/default }} diff --git a/apps/demo/partials/web-react/icons.hbs b/apps/demo/partials/web-react/icons.hbs index dccd493afb..bcaba9a846 100644 --- a/apps/demo/partials/web-react/icons.hbs +++ b/apps/demo/partials/web-react/icons.hbs @@ -1,10 +1,8 @@ -{{#> web-react/layout/default page="icons"}} +{{#> web-react/layout/default page="icons" title="Icons"}} - {{#> section title="Icons"}} + {{> web-react/tabs }} -
    - - - {{/section}} +
    + {{/web-react/layout/default}} diff --git a/apps/demo/partials/web-react/index.hbs b/apps/demo/partials/web-react/index.hbs index aabbdf6f5a..70e385a499 100644 --- a/apps/demo/partials/web-react/index.hbs +++ b/apps/demo/partials/web-react/index.hbs @@ -1,11 +1,11 @@ -{{#> web-react/layout/default page="components"}} +{{#> web-react/layout/default page="components" title="Components"}} - {{#> section title="Components"}} - {{#> boxList}} - {{#each @web_react_components as |component|}} - {{> component component=component path="src/components"}} - {{/each}} - {{/boxList}} - {{/section}} + {{> web-react/tabs }} + + {{#> cardList}} + {{#each @web_react_components as |component|}} + {{> card content=component.title path="src/components" urlname=component.name}} + {{/each}} + {{/cardList}} {{/web-react/layout/default}} diff --git a/apps/demo/partials/web-react/layout/default.hbs b/apps/demo/partials/web-react/layout/default.hbs index b122af3178..55085376b6 100644 --- a/apps/demo/partials/web-react/layout/default.hbs +++ b/apps/demo/partials/web-react/layout/default.hbs @@ -1,19 +1,20 @@ -{{#> layout/base package="Spirit Web React" }} +{{#> layout/base package="Web React" packageUrl="/packages/web-react/" title=title}} {{#*inline "scripts"}} - + {{/inline}} - {{> header package="Web React" }} + {{> header}} + {{> cover}} -
    +
    - {{> web-react/tabs }} - {{> @partial-block }}
    + {{> footer}} + {{/layout/base }} diff --git a/apps/demo/partials/web-react/layout/plain.hbs b/apps/demo/partials/web-react/layout/plain.hbs deleted file mode 100644 index 183dcd3ae8..0000000000 --- a/apps/demo/partials/web-react/layout/plain.hbs +++ /dev/null @@ -1,9 +0,0 @@ -{{#> layout/plain }} - - {{#*inline "scripts"}} - - {{/inline}} - - {{> @partial-block }} - -{{/layout/plain}} diff --git a/apps/demo/partials/web-react/tabs.hbs b/apps/demo/partials/web-react/tabs.hbs index 8015b06460..67aa2f3327 100644 --- a/apps/demo/partials/web-react/tabs.hbs +++ b/apps/demo/partials/web-react/tabs.hbs @@ -1,8 +1,20 @@ - +
    + +
    +
    +
    + + + +
    +
    +
    + +
    diff --git a/apps/demo/partials/web/assets/jobBoardLogo.hbs b/apps/demo/partials/web/assets/jobBoardLogo.hbs new file mode 100644 index 0000000000..e569bd493f --- /dev/null +++ b/apps/demo/partials/web/assets/jobBoardLogo.hbs @@ -0,0 +1,52 @@ + + JobBoard logo + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/demo/partials/web/assets/jobBoardLogoInverted.hbs b/apps/demo/partials/web/assets/jobBoardLogoInverted.hbs new file mode 100644 index 0000000000..5ab977759c --- /dev/null +++ b/apps/demo/partials/web/assets/jobBoardLogoInverted.hbs @@ -0,0 +1,52 @@ + + JobBoard logo + + + + + + + + + + + + + + + + + + diff --git a/apps/demo/partials/web/assets/spiritLogoInverted.hbs b/apps/demo/partials/web/assets/spiritLogoInverted.hbs new file mode 100644 index 0000000000..e7a805d3f8 --- /dev/null +++ b/apps/demo/partials/web/assets/spiritLogoInverted.hbs @@ -0,0 +1,6 @@ +Spirit diff --git a/apps/demo/partials/web/helpers.hbs b/apps/demo/partials/web/helpers.hbs index 2200afb2ff..1451b71350 100644 --- a/apps/demo/partials/web/helpers.hbs +++ b/apps/demo/partials/web/helpers.hbs @@ -1,17 +1,13 @@ -{{#> web/layout/default page="helpers"}} +{{#> web/layout/default page="helpers" title="Helpers"}} - {{#> section title="Helpers"}} + {{> web/tabs}} - {{#> boxList}} - - {{#each @helpers as |helper|}} -
  • - {{helper.title}} + {{#> cardList}} + {{#each @helpers as |helper|}} +
  • + {{helper.title}}
    • - {{/each}} - - {{/boxList}} - - {{/section}} + {{/each}} + {{/cardList}} {{/web/layout/default}} diff --git a/apps/demo/partials/web/icons.hbs b/apps/demo/partials/web/icons.hbs index 4904cb2400..077e2f485d 100644 --- a/apps/demo/partials/web/icons.hbs +++ b/apps/demo/partials/web/icons.hbs @@ -1,20 +1,16 @@ -{{#> web/layout/default page="icons"}} +{{#> web/layout/default page="icons" title="Icons"}} - {{#> section title="Icons"}} + {{> web/tabs}} - {{#> tileList}} - - {{#each @icons as |icon|}} -
  • - - - -

    {{icon}}

    -
    • - {{/each}} - - {{/tileList}} - - {{/section}} + {{/web/layout/default}} diff --git a/apps/demo/partials/web/index.hbs b/apps/demo/partials/web/index.hbs index d81c2ffa94..b31e3ab637 100644 --- a/apps/demo/partials/web/index.hbs +++ b/apps/demo/partials/web/index.hbs @@ -1,11 +1,11 @@ -{{#> web/layout/default page="components"}} +{{#> web/layout/default page="components" title="Components"}} - {{#>section title="Components"}} - {{#> boxList}} - {{#each @web_components as |component|}} - {{> component component=component path="src/scss/components"}} - {{/each}} - {{/boxList}} - {{/section}} + {{> web/tabs}} + + {{#> cardList}} + {{#each @web_components as |component|}} + {{> card content=component.title path="src/scss/components" urlname=component.name}} + {{/each}} + {{/cardList}} {{/web/layout/default}} diff --git a/apps/demo/partials/web/layout/default.hbs b/apps/demo/partials/web/layout/default.hbs index cb97a84412..27b9ff1bcf 100644 --- a/apps/demo/partials/web/layout/default.hbs +++ b/apps/demo/partials/web/layout/default.hbs @@ -1,19 +1,16 @@ -{{#> layout/base package="Spirit Web"}} +{{#> layout/base package="Web" packageUrl="/packages/web/" title=title}} - {{> header package="Web"}} + {{> header}} + {{> cover}} - {{#*inline "scripts"}} - - {{/inline}} - -
    +
    - {{> web/tabs}} - {{> @partial-block}}
    + {{> footer}} + {{/layout/base}} diff --git a/apps/demo/partials/web/layout/plain.hbs b/apps/demo/partials/web/layout/plain.hbs deleted file mode 100644 index 0244decafe..0000000000 --- a/apps/demo/partials/web/layout/plain.hbs +++ /dev/null @@ -1,9 +0,0 @@ -{{#> layout/plain}} - - {{#*inline "scripts"}} - - {{/inline}} - - {{> @partial-block}} - -{{/layout/plain}} diff --git a/apps/demo/partials/web/tabs.hbs b/apps/demo/partials/web/tabs.hbs index 0893598d83..9219747408 100644 --- a/apps/demo/partials/web/tabs.hbs +++ b/apps/demo/partials/web/tabs.hbs @@ -1,11 +1,24 @@ - +
    + +
    +
    +
    + + + +
    +
    + +
    + +
    diff --git a/apps/storybook/CHANGELOG.md b/apps/storybook/CHANGELOG.md index 1a1aa2636b..70c256ece9 100644 --- a/apps/storybook/CHANGELOG.md +++ b/apps/storybook/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + + +# [0.1.0-alpha.0](https://github.com/lmc-eu/spirit-design-system/compare/@lmc-eu/spirit-storybook@0.0.8...@lmc-eu/spirit-storybook@0.1.0-alpha.0) (2024-10-17) + +### Features + +- **storybook:** Add themes to Storybook ([66bbed8](https://github.com/lmc-eu/spirit-design-system/commit/66bbed8)) + ## [0.0.9](https://github.com/lmc-eu/spirit-design-system/compare/@lmc-eu/spirit-storybook@0.0.8...@lmc-eu/spirit-storybook@0.0.9) (2024-11-22) diff --git a/apps/storybook/assets/stylesheets/index.scss b/apps/storybook/assets/stylesheets/index.scss index 54786a2b0a..be82c5e4d5 100644 --- a/apps/storybook/assets/stylesheets/index.scss +++ b/apps/storybook/assets/stylesheets/index.scss @@ -1,5 +1,4 @@ -@forward '../../../../packages/design-tokens/src/scss'; - +@forward '../../../../packages/web/src/scss/themes'; @forward '../../../../packages/web/src/scss/foundation'; @forward '../../../../packages/web/src/scss/helpers'; @forward '../../../../packages/web/src/scss/components'; diff --git a/apps/storybook/package.json b/apps/storybook/package.json index 2cba7e7750..30109ca502 100644 --- a/apps/storybook/package.json +++ b/apps/storybook/package.json @@ -1,6 +1,6 @@ { "name": "@lmc-eu/spirit-storybook", - "version": "0.0.9", + "version": "0.1.0-alpha.0", "description": "Storybook of the Spirit Design System", "license": "MIT", "private": true, diff --git a/apps/web-twig-demo/templates/assets/spiritLogoInverted.html.twig b/apps/web-twig-demo/templates/assets/spiritLogoInverted.html.twig new file mode 100644 index 0000000000..e7a805d3f8 --- /dev/null +++ b/apps/web-twig-demo/templates/assets/spiritLogoInverted.html.twig @@ -0,0 +1,6 @@ +Spirit diff --git a/apps/web-twig-demo/templates/default.html.twig b/apps/web-twig-demo/templates/default.html.twig index 2482192e43..caf8a495d0 100644 --- a/apps/web-twig-demo/templates/default.html.twig +++ b/apps/web-twig-demo/templates/default.html.twig @@ -1,20 +1,21 @@ {% extends 'layout/default.html.twig' %} -{% block content %} +{% block title %}Components{% endblock%} -
    +{% block content %} -

    Components

    -
      + {% include 'partials/tabs.html.twig' %} - {% for component in components %} -
    • - {{ component }} -
      • - {% endfor %} + -
    + {% for component in components %} +
  • + + {{ component }} + +
    • + {% endfor %} -
    + {% endblock %} diff --git a/apps/web-twig-demo/templates/helpers.html.twig b/apps/web-twig-demo/templates/helpers.html.twig index 5145f53ee3..c4c3c10022 100644 --- a/apps/web-twig-demo/templates/helpers.html.twig +++ b/apps/web-twig-demo/templates/helpers.html.twig @@ -1,20 +1,21 @@ {% extends 'layout/default.html.twig' %} -{% block content %} +{% block title %}Helpers{% endblock%} -
    +{% block content %} -

    Helpers

    - + {% for helper in helpers %} +
  • + + {{ helper | replace({'-': ' '}) | title }} + +
    • + {% endfor %} -
    + {% endblock %} diff --git a/apps/web-twig-demo/templates/layout/base.html.twig b/apps/web-twig-demo/templates/layout/base.html.twig index 97901db60b..1f174a3b78 100644 --- a/apps/web-twig-demo/templates/layout/base.html.twig +++ b/apps/web-twig-demo/templates/layout/base.html.twig @@ -3,7 +3,10 @@ - Spirit Web Twig — Development Preview + + + {%- if block('title') is defined %}{% block title %}{% endblock %} —{% endif %} Web Twig — Spirit Design System + @@ -18,11 +21,40 @@ {# As we also use this demo for visual testing we need to block render until the font is loaded. #} + + {% set themes = [ + { + id: 'light-default', + name: 'Light Default', + }, + { + id: 'light-on-brand', + name: 'Light on Brand', + }, + ] %} + + {{ encore_entry_link_tags('app') }} {{ encore_entry_script_tags('app') }} - + {% block body %}{% endblock %} diff --git a/apps/web-twig-demo/templates/layout/default.html.twig b/apps/web-twig-demo/templates/layout/default.html.twig index bb64fa5f83..90630d90a4 100644 --- a/apps/web-twig-demo/templates/layout/default.html.twig +++ b/apps/web-twig-demo/templates/layout/default.html.twig @@ -1,17 +1,42 @@ {% extends 'layout/base.html.twig' %} - {% block body %} - {% block header %}{% include 'partials/header.html.twig' %}{% endblock %} + {% set title -%} + {% block title %}{% endblock %} + {%- endset %} + + {% set parentPageName -%} + {% block parentPageName %}{% endblock %} + {%- endset %} + + {% set parentPageUrl = '.' %} + {% if parentPageName == 'Components' %} + {% set parentPageUrl = '/' %} + {% endif %} + + {% set isUnstable -%} + {% block isUnstable %}{% endblock %} + {%- endset %} -
    -
    + {% block header %} + {% include 'partials/header.html.twig' with { themes } only %} + {% include 'partials/cover.html.twig' with { isUnstable, parentPageName, parentPageUrl, title } only %} + {% endblock %} - {% include 'partials/tabs.html.twig' %} + {# Pre-render page content due to TwigX limitations. #} + {%- set renderedContent -%} + {% block content %}{% endblock %} + {%- endset -%} - {% block content %}{% endblock %} +
    + -
    + {{ renderedContent }} + +
    + + {% include 'partials/footer.html.twig' only %} + {% endblock %} diff --git a/apps/web-twig-demo/templates/layout/plain.html.twig b/apps/web-twig-demo/templates/layout/plain.html.twig deleted file mode 100644 index a8e1c368c1..0000000000 --- a/apps/web-twig-demo/templates/layout/plain.html.twig +++ /dev/null @@ -1,11 +0,0 @@ -{% extends 'layout/base.html.twig' %} - -{% block body %} -
    -
    - - {% block content %}{% endblock %} - -
    -
    -{% endblock %} diff --git a/apps/web-twig-demo/templates/partials/cover.html.twig b/apps/web-twig-demo/templates/partials/cover.html.twig new file mode 100644 index 0000000000..d5032e7939 --- /dev/null +++ b/apps/web-twig-demo/templates/partials/cover.html.twig @@ -0,0 +1,39 @@ +
    + + +

    + {{ title }} + + {% if isUnstable %} + Unstable + {% endif %} +

    + + +
      +
    1. + Spirit + +
      2. +
    2. + Web Twig + +
      3. + {% if parentPageName %} +
    3. + {{ parentPageName }} + +
      4. + {% endif %} +
    4. + {# Use instead of so `href` can be empty (= current URL): #} + {{ title }} +
      5. +
    +     + +     +
    diff --git a/apps/web-twig-demo/templates/partials/footer.html.twig b/apps/web-twig-demo/templates/partials/footer.html.twig new file mode 100644 index 0000000000..3a12754b3f --- /dev/null +++ b/apps/web-twig-demo/templates/partials/footer.html.twig @@ -0,0 +1,7 @@ +
    + + + © Alma Career Oy and its subsidiaries + + +
    diff --git a/apps/web-twig-demo/templates/partials/header.html.twig b/apps/web-twig-demo/templates/partials/header.html.twig index e3265050b1..5bf596d0e4 100644 --- a/apps/web-twig-demo/templates/partials/header.html.twig +++ b/apps/web-twig-demo/templates/partials/header.html.twig @@ -1,17 +1,56 @@ -
    -
    - -

    Spirit Design System

    -

    Web Twig — Development Preview

    - -
    - - GitHub Project - - - Spirit Docs → - -
    - -
    -
    +
    + + + {% include 'assets/spiritLogoInverted.html.twig' %} + + + + + + + + Web + + + Web React + + + Web Twig + + + Form Validations + + + + + + {% include "partials/themeSwitcher.html.twig" with { isLabelHidden: true, themes } only %} + + +
    + + + + + + + + Web + + + Web React + + + Web Twig + + + Form Validations + + + + + + {% include "partials/themeSwitcher.html.twig" with { themes } only %} + + + diff --git a/apps/web-twig-demo/templates/partials/tabs.html.twig b/apps/web-twig-demo/templates/partials/tabs.html.twig index 043acbd71b..d7342ce96e 100644 --- a/apps/web-twig-demo/templates/partials/tabs.html.twig +++ b/apps/web-twig-demo/templates/partials/tabs.html.twig @@ -1,16 +1,30 @@ {% set routeName = app.request.get('_route') %} - +{% set isComponentsSelected = routeName == 'index' %} +{% set isIconsSelected = routeName == 'icons_index' %} +{% set isHelpersSelected = routeName == 'helpers_index' %} +{% set isValidationsSelected = routeName == 'validations_index' %} + +
    + + + + Components + + + Icons + + + Helpers + + + Validations + + + +
    diff --git a/apps/web-twig-demo/templates/partials/themeSwitcher.html.twig b/apps/web-twig-demo/templates/partials/themeSwitcher.html.twig new file mode 100644 index 0000000000..f6f54a4466 --- /dev/null +++ b/apps/web-twig-demo/templates/partials/themeSwitcher.html.twig @@ -0,0 +1,13 @@ + diff --git a/apps/web-twig-demo/templates/validations.html.twig b/apps/web-twig-demo/templates/validations.html.twig index d05fd5bc8b..d08e58be0e 100644 --- a/apps/web-twig-demo/templates/validations.html.twig +++ b/apps/web-twig-demo/templates/validations.html.twig @@ -1,46 +1,47 @@ {% extends 'layout/default.html.twig' %} +{% block title %}Validations{% endblock%} + {% block content %} -
    + {% include 'partials/tabs.html.twig' %} - - -

    Real-World examples

    + + +

    Real-World examples

    -
    - - {% set usernameInputProps = { "data-spirit-required-message": "Please choose a username" }%} - - {% set zipcodeInputProps = { "data-spirit-pattern-message": "Invalid ZIP code", "data-spirit-pattern": "/d{5}|\d{3}[ ]?\d{2}/" }%} - - {% set ageInputProps = { "data-spirit-min-message": "You must be at least 14-years-old", }%} - - {% set passwordInputProps = { - "data-spirit-required-message": "Please choose a password", - "data-spirit-pattern": "/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/", - "data-spirit-pattern-message": "Minimum 8 characters, at least one uppercase letter, one lowercase letter and one number" - } %} - - {% set retypepasswordInputProps = { - "data-spirit-equals": "#password", - "data-spirit-equals-message": "Passwords don't match", - } %} - - {% set emailInputProps = { "data-spirit-required-message": "Please enter your email", } %} - - {% set phoneInputProps = { "data-spirit-pattern": "/^(?:\+\d{3}\s?)?(\d{3}\s?){3}$/", "data-spirit-pattern-message": "Invalid phone number", } %} - - -
    - -
    -     -
    -     -     -
    +
    + + {% set usernameInputProps = { "data-spirit-required-message": "Please choose a username" }%} + + {% set zipcodeInputProps = { "data-spirit-pattern-message": "Invalid ZIP code", "data-spirit-pattern": "/d{5}|\d{3}[ ]?\d{2}/" }%} + + {% set ageInputProps = { "data-spirit-min-message": "You must be at least 14-years-old", }%} + + {% set passwordInputProps = { + "data-spirit-required-message": "Please choose a password", + "data-spirit-pattern": "/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/", + "data-spirit-pattern-message": "Minimum 8 characters, at least one uppercase letter, one lowercase letter and one number" + } %} + + {% set retypepasswordInputProps = { + "data-spirit-equals": "#password", + "data-spirit-equals-message": "Passwords don't match", + } %} + + {% set emailInputProps = { "data-spirit-required-message": "Please enter your email", } %} + + {% set phoneInputProps = { "data-spirit-pattern": "/^(?:\+\d{3}\s?)?(\d{3}\s?){3}$/", "data-spirit-pattern-message": "Invalid phone number", } %} + + +
    + +
    +     +
    + + -{{ encore_entry_script_tags('formValidations') }} + {{ encore_entry_script_tags('formValidations') }} {% endblock %} diff --git a/apps/web-twig-demo/yarn.lock b/apps/web-twig-demo/yarn.lock index f772d54468..b74474721c 100644 --- a/apps/web-twig-demo/yarn.lock +++ b/apps/web-twig-demo/yarn.lock @@ -10,12 +10,13 @@ "@jridgewell/gen-mapping" "^0.3.0" "@jridgewell/trace-mapping" "^0.3.9" -"@babel/code-frame@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.7.tgz#882fd9e09e8ee324e496bd040401c6f046ef4465" - integrity sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA== +"@babel/code-frame@^7.25.7", "@babel/code-frame@^7.25.9": + version "7.26.2" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85" + integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ== dependencies: - "@babel/highlight" "^7.24.7" + "@babel/helper-validator-identifier" "^7.25.9" + js-tokens "^4.0.0" picocolors "^1.0.0" "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9": @@ -23,41 +24,42 @@ resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.9.tgz#71cdb00a1ce3a329ce4cbec3a44f9fef35669730" integrity sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ== -"@babel/compat-data@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.24.7.tgz#d23bbea508c3883ba8251fb4164982c36ea577ed" - integrity sha512-qJzAIcv03PyaWqxRgO4mSU3lihncDT296vnyuE2O8uA4w3UHWI4S3hgeZd1L8W1Bft40w9JxJ2b412iDUFFRhw== +"@babel/compat-data@^7.25.8", "@babel/compat-data@^7.25.9": + version "7.26.2" + resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.2.tgz#278b6b13664557de95b8f35b90d96785850bb56e" + integrity sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg== -"@babel/core@7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.24.7.tgz#b676450141e0b52a3d43bc91da86aa608f950ac4" - integrity sha512-nykK+LEK86ahTkX/3TgauT0ikKoNCfKHEaZYTUVupJdTLzGNvrblu4u6fa7DhZONAltdf8e662t/abY8idrd/g== +"@babel/core@7.25.8": + version "7.25.8" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.25.8.tgz#a57137d2a51bbcffcfaeba43cb4dd33ae3e0e1c6" + integrity sha512-Oixnb+DzmRT30qu9d3tJSQkxuygWm32DFykT4bRoORPa9hZ/L4KhVB/XiRm6KG+roIEM7DBQlmg27kw2HZkdZg== dependencies: "@ampproject/remapping" "^2.2.0" - "@babel/code-frame" "^7.24.7" - "@babel/generator" "^7.24.7" - "@babel/helper-compilation-targets" "^7.24.7" - "@babel/helper-module-transforms" "^7.24.7" - "@babel/helpers" "^7.24.7" - "@babel/parser" "^7.24.7" - "@babel/template" "^7.24.7" - "@babel/traverse" "^7.24.7" - "@babel/types" "^7.24.7" + "@babel/code-frame" "^7.25.7" + "@babel/generator" "^7.25.7" + "@babel/helper-compilation-targets" "^7.25.7" + "@babel/helper-module-transforms" "^7.25.7" + "@babel/helpers" "^7.25.7" + "@babel/parser" "^7.25.8" + "@babel/template" "^7.25.7" + "@babel/traverse" "^7.25.7" + "@babel/types" "^7.25.8" convert-source-map "^2.0.0" debug "^4.1.0" gensync "^1.0.0-beta.2" json5 "^2.2.3" semver "^6.3.1" -"@babel/generator@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.24.7.tgz#1654d01de20ad66b4b4d99c135471bc654c55e6d" - integrity sha512-oipXieGC3i45Y1A41t4tAqpnEZWgB/lC6Ehh6+rOviR5XWpTtMmLN+fGjz9vOiNRt0p6RtO6DtD0pdU3vpqdSA== +"@babel/generator@^7.25.7", "@babel/generator@^7.25.9": + version "7.26.2" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.2.tgz#87b75813bec87916210e5e01939a4c823d6bb74f" + integrity sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw== dependencies: - "@babel/types" "^7.24.7" + "@babel/parser" "^7.26.2" + "@babel/types" "^7.26.0" "@jridgewell/gen-mapping" "^0.3.5" "@jridgewell/trace-mapping" "^0.3.25" - jsesc "^2.5.1" + jsesc "^3.0.2" "@babel/helper-annotate-as-pure@^7.18.6": version "7.18.6" @@ -66,20 +68,20 @@ dependencies: "@babel/types" "^7.18.6" -"@babel/helper-annotate-as-pure@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz#5373c7bc8366b12a033b4be1ac13a206c6656aab" - integrity sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg== +"@babel/helper-annotate-as-pure@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4" + integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g== dependencies: - "@babel/types" "^7.24.7" + "@babel/types" "^7.25.9" -"@babel/helper-builder-binary-assignment-operator-visitor@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.24.7.tgz#37d66feb012024f2422b762b9b2a7cfe27c7fba3" - integrity sha512-xZeCVVdwb4MsDBkkyZ64tReWYrLRHlMN72vP7Bdm3OUOuyFZExhsHUUnuWnm2/XOlAJzR0LfPpB56WXZn0X/lA== +"@babel/helper-builder-binary-assignment-operator-visitor@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.25.9.tgz#f41752fe772a578e67286e6779a68a5a92de1ee9" + integrity sha512-C47lC7LIDCnz0h4vai/tpNOI95tCd5ZT3iBt/DBH5lXKHZsyNQv18yf1wIIg2ntiQNgmAvA+DgZ82iW8Qdym8g== dependencies: - "@babel/traverse" "^7.24.7" - "@babel/types" "^7.24.7" + "@babel/traverse" "^7.25.9" + "@babel/types" "^7.25.9" "@babel/helper-compilation-targets@^7.22.6": version "7.22.9" @@ -92,30 +94,28 @@ lru-cache "^5.1.1" semver "^6.3.1" -"@babel/helper-compilation-targets@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.24.7.tgz#4eb6c4a80d6ffeac25ab8cd9a21b5dfa48d503a9" - integrity sha512-ctSdRHBi20qWOfy27RUb4Fhp07KSJ3sXcuSvTrXrc4aG8NSYDo1ici3Vhg9bg69y5bj0Mr1lh0aeEgTvc12rMg== +"@babel/helper-compilation-targets@^7.25.7", "@babel/helper-compilation-targets@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz#55af025ce365be3cdc0c1c1e56c6af617ce88875" + integrity sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ== dependencies: - "@babel/compat-data" "^7.24.7" - "@babel/helper-validator-option" "^7.24.7" - browserslist "^4.22.2" + "@babel/compat-data" "^7.25.9" + "@babel/helper-validator-option" "^7.25.9" + browserslist "^4.24.0" lru-cache "^5.1.1" semver "^6.3.1" -"@babel/helper-create-class-features-plugin@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.7.tgz#2eaed36b3a1c11c53bdf80d53838b293c52f5b3b" - integrity sha512-kTkaDl7c9vO80zeX1rJxnuRpEsD5tA81yh11X1gQo+PhSti3JS+7qeZo9U4RHobKRiFPKaGK3svUAeb8D0Q7eg== - dependencies: - "@babel/helper-annotate-as-pure" "^7.24.7" - "@babel/helper-environment-visitor" "^7.24.7" - "@babel/helper-function-name" "^7.24.7" - "@babel/helper-member-expression-to-functions" "^7.24.7" - "@babel/helper-optimise-call-expression" "^7.24.7" - "@babel/helper-replace-supers" "^7.24.7" - "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7" - "@babel/helper-split-export-declaration" "^7.24.7" +"@babel/helper-create-class-features-plugin@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz#7644147706bb90ff613297d49ed5266bde729f83" + integrity sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ== + dependencies: + "@babel/helper-annotate-as-pure" "^7.25.9" + "@babel/helper-member-expression-to-functions" "^7.25.9" + "@babel/helper-optimise-call-expression" "^7.25.9" + "@babel/helper-replace-supers" "^7.25.9" + "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9" + "@babel/traverse" "^7.25.9" semver "^6.3.1" "@babel/helper-create-regexp-features-plugin@^7.18.6": @@ -126,13 +126,13 @@ "@babel/helper-annotate-as-pure" "^7.18.6" regexpu-core "^5.3.1" -"@babel/helper-create-regexp-features-plugin@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.24.7.tgz#be4f435a80dc2b053c76eeb4b7d16dd22cfc89da" - integrity sha512-03TCmXy2FtXJEZfbXDTSqq1fRJArk7lX9DOFC/47VthYcxyIOx+eXQmdo6DOQvrbpIix+KfXwvuXdFDZHxt+rA== +"@babel/helper-create-regexp-features-plugin@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.9.tgz#3e8999db94728ad2b2458d7a470e7770b7764e26" + integrity sha512-ORPNZ3h6ZRkOyAa/SaHU+XsLZr0UQzRwuDQ0cczIA17nAzZ+85G5cVkOJIj7QavLZGSe8QXUmNFxSZzjcZF9bw== dependencies: - "@babel/helper-annotate-as-pure" "^7.24.7" - regexpu-core "^5.3.1" + "@babel/helper-annotate-as-pure" "^7.25.9" + regexpu-core "^6.1.1" semver "^6.3.1" "@babel/helper-define-polyfill-provider@^0.6.1": @@ -146,63 +146,50 @@ lodash.debounce "^4.0.8" resolve "^1.14.2" -"@babel/helper-environment-visitor@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.24.7.tgz#4b31ba9551d1f90781ba83491dd59cf9b269f7d9" - integrity sha512-DoiN84+4Gnd0ncbBOM9AZENV4a5ZiL39HYMyZJGZ/AZEykHYdJw0wW3kdcsh9/Kn+BRXHLkkklZ51ecPKmI1CQ== - dependencies: - "@babel/types" "^7.24.7" - -"@babel/helper-function-name@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.24.7.tgz#75f1e1725742f39ac6584ee0b16d94513da38dd2" - integrity sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA== - dependencies: - "@babel/template" "^7.24.7" - "@babel/types" "^7.24.7" - -"@babel/helper-hoist-variables@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.24.7.tgz#b4ede1cde2fd89436397f30dc9376ee06b0f25ee" - integrity sha512-MJJwhkoGy5c4ehfoRyrJ/owKeMl19U54h27YYftT0o2teQ3FJ3nQUf/I3LlJsX4l3qlw7WRXUmiyajvHXoTubQ== +"@babel/helper-define-polyfill-provider@^0.6.2": + version "0.6.3" + resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.3.tgz#f4f2792fae2ef382074bc2d713522cf24e6ddb21" + integrity sha512-HK7Bi+Hj6H+VTHA3ZvBis7V/6hu9QuTrnMXNybfUf2iiuU/N97I8VjB+KbhFF8Rld/Lx5MzoCwPCpPjfK+n8Cg== dependencies: - "@babel/types" "^7.24.7" + "@babel/helper-compilation-targets" "^7.22.6" + "@babel/helper-plugin-utils" "^7.22.5" + debug "^4.1.1" + lodash.debounce "^4.0.8" + resolve "^1.14.2" -"@babel/helper-member-expression-to-functions@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.7.tgz#67613d068615a70e4ed5101099affc7a41c5225f" - integrity sha512-LGeMaf5JN4hAT471eJdBs/GK1DoYIJ5GCtZN/EsL6KUiiDZOvO/eKE11AMZJa2zP4zk4qe9V2O/hxAmkRc8p6w== +"@babel/helper-member-expression-to-functions@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3" + integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ== dependencies: - "@babel/traverse" "^7.24.7" - "@babel/types" "^7.24.7" + "@babel/traverse" "^7.25.9" + "@babel/types" "^7.25.9" -"@babel/helper-module-imports@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz#f2f980392de5b84c3328fc71d38bd81bbb83042b" - integrity sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA== +"@babel/helper-module-imports@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715" + integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw== dependencies: - "@babel/traverse" "^7.24.7" - "@babel/types" "^7.24.7" + "@babel/traverse" "^7.25.9" + "@babel/types" "^7.25.9" -"@babel/helper-module-transforms@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.24.7.tgz#31b6c9a2930679498db65b685b1698bfd6c7daf8" - integrity sha512-1fuJEwIrp+97rM4RWdO+qrRsZlAeL1lQJoPqtCYWv0NL115XM93hIH4CSRln2w52SqvmY5hqdtauB6QFCDiZNQ== +"@babel/helper-module-transforms@^7.25.7", "@babel/helper-module-transforms@^7.25.9": + version "7.26.0" + resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae" + integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw== dependencies: - "@babel/helper-environment-visitor" "^7.24.7" - "@babel/helper-module-imports" "^7.24.7" - "@babel/helper-simple-access" "^7.24.7" - "@babel/helper-split-export-declaration" "^7.24.7" - "@babel/helper-validator-identifier" "^7.24.7" + "@babel/helper-module-imports" "^7.25.9" + "@babel/helper-validator-identifier" "^7.25.9" + "@babel/traverse" "^7.25.9" -"@babel/helper-optimise-call-expression@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.24.7.tgz#8b0a0456c92f6b323d27cfd00d1d664e76692a0f" - integrity sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A== +"@babel/helper-optimise-call-expression@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e" + integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ== dependencies: - "@babel/types" "^7.24.7" + "@babel/types" "^7.25.9" -"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3": +"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.18.6": version "7.20.2" resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629" integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ== @@ -212,751 +199,618 @@ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295" integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg== -"@babel/helper-plugin-utils@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.7.tgz#98c84fe6fe3d0d3ae7bfc3a5e166a46844feb2a0" - integrity sha512-Rq76wjt7yz9AAc1KnlRKNAi/dMSVWgDRx43FHoJEbcYU6xOWaE2dVPwcdTukJrjxS65GITyfbvEYHvkirZ6uEg== +"@babel/helper-plugin-utils@^7.25.7", "@babel/helper-plugin-utils@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz#9cbdd63a9443a2c92a725cca7ebca12cc8dd9f46" + integrity sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw== -"@babel/helper-remap-async-to-generator@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.24.7.tgz#b3f0f203628522713849d49403f1a414468be4c7" - integrity sha512-9pKLcTlZ92hNZMQfGCHImUpDOlAgkkpqalWEeftW5FBya75k8Li2ilerxkM/uBEj01iBZXcCIB/bwvDYgWyibA== +"@babel/helper-remap-async-to-generator@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz#e53956ab3d5b9fb88be04b3e2f31b523afd34b92" + integrity sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw== dependencies: - "@babel/helper-annotate-as-pure" "^7.24.7" - "@babel/helper-environment-visitor" "^7.24.7" - "@babel/helper-wrap-function" "^7.24.7" + "@babel/helper-annotate-as-pure" "^7.25.9" + "@babel/helper-wrap-function" "^7.25.9" + "@babel/traverse" "^7.25.9" -"@babel/helper-replace-supers@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.24.7.tgz#f933b7eed81a1c0265740edc91491ce51250f765" - integrity sha512-qTAxxBM81VEyoAY0TtLrx1oAEJc09ZK67Q9ljQToqCnA+55eNwCORaxlKyu+rNfX86o8OXRUSNUnrtsAZXM9sg== +"@babel/helper-replace-supers@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.25.9.tgz#ba447224798c3da3f8713fc272b145e33da6a5c5" + integrity sha512-IiDqTOTBQy0sWyeXyGSC5TBJpGFXBkRynjBeXsvbhQFKj2viwJC76Epz35YLU1fpe/Am6Vppb7W7zM4fPQzLsQ== dependencies: - "@babel/helper-environment-visitor" "^7.24.7" - "@babel/helper-member-expression-to-functions" "^7.24.7" - "@babel/helper-optimise-call-expression" "^7.24.7" + "@babel/helper-member-expression-to-functions" "^7.25.9" + "@babel/helper-optimise-call-expression" "^7.25.9" + "@babel/traverse" "^7.25.9" -"@babel/helper-simple-access@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz#bcade8da3aec8ed16b9c4953b74e506b51b5edb3" - integrity sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg== +"@babel/helper-simple-access@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.25.9.tgz#6d51783299884a2c74618d6ef0f86820ec2e7739" + integrity sha512-c6WHXuiaRsJTyHYLJV75t9IqsmTbItYfdj99PnzYGQZkYKvan5/2jKJ7gu31J3/BJ/A18grImSPModuyG/Eo0Q== dependencies: - "@babel/traverse" "^7.24.7" - "@babel/types" "^7.24.7" + "@babel/traverse" "^7.25.9" + "@babel/types" "^7.25.9" -"@babel/helper-skip-transparent-expression-wrappers@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.24.7.tgz#5f8fa83b69ed5c27adc56044f8be2b3ea96669d9" - integrity sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ== +"@babel/helper-skip-transparent-expression-wrappers@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9" + integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA== dependencies: - "@babel/traverse" "^7.24.7" - "@babel/types" "^7.24.7" - -"@babel/helper-split-export-declaration@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.7.tgz#83949436890e07fa3d6873c61a96e3bbf692d856" - integrity sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA== - dependencies: - "@babel/types" "^7.24.7" + "@babel/traverse" "^7.25.9" + "@babel/types" "^7.25.9" "@babel/helper-string-parser@^7.19.4": version "7.19.4" resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63" integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw== -"@babel/helper-string-parser@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.7.tgz#4d2d0f14820ede3b9807ea5fc36dfc8cd7da07f2" - integrity sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg== +"@babel/helper-string-parser@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c" + integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA== "@babel/helper-validator-identifier@^7.19.1": version "7.19.1" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2" integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w== -"@babel/helper-validator-identifier@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db" - integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w== +"@babel/helper-validator-identifier@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7" + integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ== "@babel/helper-validator-option@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz#de52000a15a177413c8234fa3a8af4ee8102d0ac" integrity sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw== -"@babel/helper-validator-option@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.24.7.tgz#24c3bb77c7a425d1742eec8fb433b5a1b38e62f6" - integrity sha512-yy1/KvjhV/ZCL+SM7hBrvnZJ3ZuT9OuZgIJAGpPEToANvc3iM6iDvBnRjtElWibHU6n8/LPR/EjX9EtIEYO3pw== +"@babel/helper-validator-option@^7.25.7", "@babel/helper-validator-option@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72" + integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw== -"@babel/helper-wrap-function@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.24.7.tgz#52d893af7e42edca7c6d2c6764549826336aae1f" - integrity sha512-N9JIYk3TD+1vq/wn77YnJOqMtfWhNewNE+DJV4puD2X7Ew9J4JvrzrFDfTfyv5EgEXVy9/Wt8QiOErzEmv5Ifw== +"@babel/helper-wrap-function@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz#d99dfd595312e6c894bd7d237470025c85eea9d0" + integrity sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g== dependencies: - "@babel/helper-function-name" "^7.24.7" - "@babel/template" "^7.24.7" - "@babel/traverse" "^7.24.7" - "@babel/types" "^7.24.7" + "@babel/template" "^7.25.9" + "@babel/traverse" "^7.25.9" + "@babel/types" "^7.25.9" -"@babel/helpers@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.24.7.tgz#aa2ccda29f62185acb5d42fb4a3a1b1082107416" - integrity sha512-NlmJJtvcw72yRJRcnCmGvSi+3jDEg8qFu3z0AFoymmzLx5ERVWyzd9kVXr7Th9/8yIJi2Zc6av4Tqz3wFs8QWg== +"@babel/helpers@^7.25.7": + version "7.26.0" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.0.tgz#30e621f1eba5aa45fe6f4868d2e9154d884119a4" + integrity sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw== dependencies: - "@babel/template" "^7.24.7" - "@babel/types" "^7.24.7" + "@babel/template" "^7.25.9" + "@babel/types" "^7.26.0" -"@babel/highlight@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.7.tgz#a05ab1df134b286558aae0ed41e6c5f731bf409d" - integrity sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw== +"@babel/parser@^7.25.8", "@babel/parser@^7.25.9", "@babel/parser@^7.26.2": + version "7.26.2" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.2.tgz#fd7b6f487cfea09889557ef5d4eeb9ff9a5abd11" + integrity sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ== dependencies: - "@babel/helper-validator-identifier" "^7.24.7" - chalk "^2.4.2" - js-tokens "^4.0.0" - picocolors "^1.0.0" + "@babel/types" "^7.26.0" -"@babel/parser@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.7.tgz#9a5226f92f0c5c8ead550b750f5608e766c8ce85" - integrity sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw== +"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz#cc2e53ebf0a0340777fff5ed521943e253b4d8fe" + integrity sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g== + dependencies: + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/traverse" "^7.25.9" -"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.24.7.tgz#fd059fd27b184ea2b4c7e646868a9a381bbc3055" - integrity sha512-TiT1ss81W80eQsN+722OaeQMY/G4yTb4G9JrqeiDADs3N8lbPMGldWi9x8tyqCW5NLx1Jh2AvkE6r6QvEltMMQ== +"@babel/plugin-bugfix-safari-class-field-initializer-scope@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.9.tgz#af9e4fb63ccb8abcb92375b2fcfe36b60c774d30" + integrity sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw== dependencies: - "@babel/helper-environment-visitor" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.24.7.tgz#468096ca44bbcbe8fcc570574e12eb1950e18107" - integrity sha512-unaQgZ/iRu/By6tsjMZzpeBZjChYfLYry6HrEXPoz3KmfF0sVBQ1l8zKMQ4xRGLWVsjuvB8nQfjNP/DcfEOCsg== +"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.9.tgz#e8dc26fcd616e6c5bf2bd0d5a2c151d4f92a9137" + integrity sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.24.7.tgz#e4eabdd5109acc399b38d7999b2ef66fc2022f89" - integrity sha512-+izXIbke1T33mY4MSNnrqhPXDz01WYhEf3yF5NbnUtkiNnm+XBZJl3kNfoK6NKmYlz/D07+l2GWVK/QfDkNCuQ== +"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.9.tgz#807a667f9158acac6f6164b4beb85ad9ebc9e1d1" + integrity sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7" - "@babel/plugin-transform-optional-chaining" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9" + "@babel/plugin-transform-optional-chaining" "^7.25.9" -"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.24.7.tgz#71b21bb0286d5810e63a1538aa901c58e87375ec" - integrity sha512-utA4HuR6F4Vvcr+o4DnjL8fCOlgRFGbeeBEGNg3ZTrLFw6VWG5XmUrvcQ0FjIYMU2ST4XcR2Wsp7t9qOAPnxMg== +"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.9.tgz#de7093f1e7deaf68eadd7cc6b07f2ab82543269e" + integrity sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg== dependencies: - "@babel/helper-environment-visitor" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/traverse" "^7.25.9" "@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2": version "7.21.0-placeholder-for-preset-env.2" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703" integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w== -"@babel/plugin-syntax-async-generators@^7.8.4": - version "7.8.4" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d" - integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw== +"@babel/plugin-syntax-import-assertions@^7.25.7": + version "7.26.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.26.0.tgz#620412405058efa56e4a564903b79355020f445f" + integrity sha512-QCWT5Hh830hK5EQa7XzuqIkQU9tT/whqbDz7kuaZMHFl1inRRg7JnuAEOQ0Ur0QUl0NufCk1msK2BeY79Aj/eg== dependencies: - "@babel/helper-plugin-utils" "^7.8.0" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-syntax-class-properties@^7.12.13": - version "7.12.13" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10" - integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA== +"@babel/plugin-syntax-import-attributes@^7.25.7": + version "7.26.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.26.0.tgz#3b1412847699eea739b4f2602c74ce36f6b0b0f7" + integrity sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A== dependencies: - "@babel/helper-plugin-utils" "^7.12.13" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-syntax-class-static-block@^7.14.5": - version "7.14.5" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz#195df89b146b4b78b3bf897fd7a257c84659d406" - integrity sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw== +"@babel/plugin-syntax-unicode-sets-regex@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357" + integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg== dependencies: - "@babel/helper-plugin-utils" "^7.14.5" + "@babel/helper-create-regexp-features-plugin" "^7.18.6" + "@babel/helper-plugin-utils" "^7.18.6" -"@babel/plugin-syntax-dynamic-import@^7.8.3": - version "7.8.3" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3" - integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ== +"@babel/plugin-transform-arrow-functions@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz#7821d4410bee5daaadbb4cdd9a6649704e176845" + integrity sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg== dependencies: - "@babel/helper-plugin-utils" "^7.8.0" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-syntax-export-namespace-from@^7.8.3": - version "7.8.3" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a" - integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q== +"@babel/plugin-transform-async-generator-functions@^7.25.8": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.9.tgz#1b18530b077d18a407c494eb3d1d72da505283a2" + integrity sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw== dependencies: - "@babel/helper-plugin-utils" "^7.8.3" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/helper-remap-async-to-generator" "^7.25.9" + "@babel/traverse" "^7.25.9" -"@babel/plugin-syntax-import-assertions@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.24.7.tgz#2a0b406b5871a20a841240586b1300ce2088a778" - integrity sha512-Ec3NRUMoi8gskrkBe3fNmEQfxDvY8bgfQpz6jlk/41kX9eUjvpyqWU7PBP/pLAvMaSQjbMNKJmvX57jP+M6bPg== +"@babel/plugin-transform-async-to-generator@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz#c80008dacae51482793e5a9c08b39a5be7e12d71" + integrity sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-module-imports" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/helper-remap-async-to-generator" "^7.25.9" -"@babel/plugin-syntax-import-attributes@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.24.7.tgz#b4f9ea95a79e6912480c4b626739f86a076624ca" - integrity sha512-hbX+lKKeUMGihnK8nvKqmXBInriT3GVjzXKFriV3YC6APGxMbP8RZNFwy91+hocLXq90Mta+HshoB31802bb8A== +"@babel/plugin-transform-block-scoped-functions@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.25.9.tgz#5700691dbd7abb93de300ca7be94203764fce458" + integrity sha512-toHc9fzab0ZfenFpsyYinOX0J/5dgJVA2fm64xPewu7CoYHWEivIWKxkK2rMi4r3yQqLnVmheMXRdG+k239CgA== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-syntax-import-meta@^7.10.4": - version "7.10.4" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51" - integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g== +"@babel/plugin-transform-block-scoping@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.9.tgz#c33665e46b06759c93687ca0f84395b80c0473a1" + integrity sha512-1F05O7AYjymAtqbsFETboN1NvBdcnzMerO+zlMyJBEz6WkMdejvGWw9p05iTSjC85RLlBseHHQpYaM4gzJkBGg== dependencies: - "@babel/helper-plugin-utils" "^7.10.4" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-syntax-json-strings@^7.8.3": - version "7.8.3" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a" - integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA== +"@babel/plugin-transform-class-properties@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.9.tgz#a8ce84fedb9ad512549984101fa84080a9f5f51f" + integrity sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q== dependencies: - "@babel/helper-plugin-utils" "^7.8.0" + "@babel/helper-create-class-features-plugin" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-syntax-logical-assignment-operators@^7.10.4": - version "7.10.4" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699" - integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig== +"@babel/plugin-transform-class-static-block@^7.25.8": + version "7.26.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.26.0.tgz#6c8da219f4eb15cae9834ec4348ff8e9e09664a0" + integrity sha512-6J2APTs7BDDm+UMqP1useWqhcRAXo0WIoVj26N7kPFB6S73Lgvyka4KTZYIxtgYXiN5HTyRObA72N2iu628iTQ== dependencies: - "@babel/helper-plugin-utils" "^7.10.4" + "@babel/helper-create-class-features-plugin" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3": - version "7.8.3" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9" - integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ== +"@babel/plugin-transform-classes@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz#7152457f7880b593a63ade8a861e6e26a4469f52" + integrity sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg== dependencies: - "@babel/helper-plugin-utils" "^7.8.0" + "@babel/helper-annotate-as-pure" "^7.25.9" + "@babel/helper-compilation-targets" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/helper-replace-supers" "^7.25.9" + "@babel/traverse" "^7.25.9" + globals "^11.1.0" -"@babel/plugin-syntax-numeric-separator@^7.10.4": - version "7.10.4" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97" - integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug== +"@babel/plugin-transform-computed-properties@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz#db36492c78460e534b8852b1d5befe3c923ef10b" + integrity sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA== dependencies: - "@babel/helper-plugin-utils" "^7.10.4" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/template" "^7.25.9" -"@babel/plugin-syntax-object-rest-spread@^7.8.3": - version "7.8.3" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871" - integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA== +"@babel/plugin-transform-destructuring@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz#966ea2595c498224340883602d3cfd7a0c79cea1" + integrity sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ== dependencies: - "@babel/helper-plugin-utils" "^7.8.0" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-syntax-optional-catch-binding@^7.8.3": - version "7.8.3" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1" - integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q== +"@babel/plugin-transform-dotall-regex@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.9.tgz#bad7945dd07734ca52fe3ad4e872b40ed09bb09a" + integrity sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA== dependencies: - "@babel/helper-plugin-utils" "^7.8.0" + "@babel/helper-create-regexp-features-plugin" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-syntax-optional-chaining@^7.8.3": - version "7.8.3" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a" - integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg== +"@babel/plugin-transform-duplicate-keys@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.9.tgz#8850ddf57dce2aebb4394bb434a7598031059e6d" + integrity sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw== dependencies: - "@babel/helper-plugin-utils" "^7.8.0" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-syntax-private-property-in-object@^7.14.5": - version "7.14.5" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz#0dc6671ec0ea22b6e94a1114f857970cd39de1ad" - integrity sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg== +"@babel/plugin-transform-duplicate-named-capturing-groups-regex@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.9.tgz#6f7259b4de127721a08f1e5165b852fcaa696d31" + integrity sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog== dependencies: - "@babel/helper-plugin-utils" "^7.14.5" + "@babel/helper-create-regexp-features-plugin" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-syntax-top-level-await@^7.14.5": - version "7.14.5" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c" - integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw== +"@babel/plugin-transform-dynamic-import@^7.25.8": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.9.tgz#23e917de63ed23c6600c5dd06d94669dce79f7b8" + integrity sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg== dependencies: - "@babel/helper-plugin-utils" "^7.14.5" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-syntax-unicode-sets-regex@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357" - integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg== +"@babel/plugin-transform-exponentiation-operator@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.25.9.tgz#ece47b70d236c1d99c263a1e22b62dc20a4c8b0f" + integrity sha512-KRhdhlVk2nObA5AYa7QMgTMTVJdfHprfpAk4DjZVtllqRg9qarilstTKEhpVjyt+Npi8ThRyiV8176Am3CodPA== dependencies: - "@babel/helper-create-regexp-features-plugin" "^7.18.6" - "@babel/helper-plugin-utils" "^7.18.6" - -"@babel/plugin-transform-arrow-functions@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.7.tgz#4f6886c11e423bd69f3ce51dbf42424a5f275514" - integrity sha512-Dt9LQs6iEY++gXUwY03DNFat5C2NbO48jj+j/bSAz6b3HgPs39qcPiYt77fDObIcFwj3/C2ICX9YMwGflUoSHQ== - dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - -"@babel/plugin-transform-async-generator-functions@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.24.7.tgz#7330a5c50e05181ca52351b8fd01642000c96cfd" - integrity sha512-o+iF77e3u7ZS4AoAuJvapz9Fm001PuD2V3Lp6OSE4FYQke+cSewYtnek+THqGRWyQloRCyvWL1OkyfNEl9vr/g== - dependencies: - "@babel/helper-environment-visitor" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/helper-remap-async-to-generator" "^7.24.7" - "@babel/plugin-syntax-async-generators" "^7.8.4" - -"@babel/plugin-transform-async-to-generator@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.7.tgz#72a3af6c451d575842a7e9b5a02863414355bdcc" - integrity sha512-SQY01PcJfmQ+4Ash7NE+rpbLFbmqA2GPIgqzxfFTL4t1FKRq4zTms/7htKpoCUI9OcFYgzqfmCdH53s6/jn5fA== - dependencies: - "@babel/helper-module-imports" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/helper-remap-async-to-generator" "^7.24.7" - -"@babel/plugin-transform-block-scoped-functions@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.24.7.tgz#a4251d98ea0c0f399dafe1a35801eaba455bbf1f" - integrity sha512-yO7RAz6EsVQDaBH18IDJcMB1HnrUn2FJ/Jslc/WtPPWcjhpUJXU/rjbwmluzp7v/ZzWcEhTMXELnnsz8djWDwQ== - dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - -"@babel/plugin-transform-block-scoping@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.7.tgz#42063e4deb850c7bd7c55e626bf4e7ab48e6ce02" - integrity sha512-Nd5CvgMbWc+oWzBsuaMcbwjJWAcp5qzrbg69SZdHSP7AMY0AbWFqFO0WTFCA1jxhMCwodRwvRec8k0QUbZk7RQ== - dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - -"@babel/plugin-transform-class-properties@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.24.7.tgz#256879467b57b0b68c7ddfc5b76584f398cd6834" - integrity sha512-vKbfawVYayKcSeSR5YYzzyXvsDFWU2mD8U5TFeXtbCPLFUqe7GyCgvO6XDHzje862ODrOwy6WCPmKeWHbCFJ4w== - dependencies: - "@babel/helper-create-class-features-plugin" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" - -"@babel/plugin-transform-class-static-block@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.7.tgz#c82027ebb7010bc33c116d4b5044fbbf8c05484d" - integrity sha512-HMXK3WbBPpZQufbMG4B46A90PkuuhN9vBCb5T8+VAHqvAqvcLi+2cKoukcpmUYkszLhScU3l1iudhrks3DggRQ== - dependencies: - "@babel/helper-create-class-features-plugin" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/plugin-syntax-class-static-block" "^7.14.5" - -"@babel/plugin-transform-classes@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.24.7.tgz#4ae6ef43a12492134138c1e45913f7c46c41b4bf" - integrity sha512-CFbbBigp8ln4FU6Bpy6g7sE8B/WmCmzvivzUC6xDAdWVsjYTXijpuuGJmYkAaoWAzcItGKT3IOAbxRItZ5HTjw== - dependencies: - "@babel/helper-annotate-as-pure" "^7.24.7" - "@babel/helper-compilation-targets" "^7.24.7" - "@babel/helper-environment-visitor" "^7.24.7" - "@babel/helper-function-name" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/helper-replace-supers" "^7.24.7" - "@babel/helper-split-export-declaration" "^7.24.7" - globals "^11.1.0" + "@babel/helper-builder-binary-assignment-operator-visitor" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-computed-properties@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.7.tgz#4cab3214e80bc71fae3853238d13d097b004c707" - integrity sha512-25cS7v+707Gu6Ds2oY6tCkUwsJ9YIDbggd9+cu9jzzDgiNq7hR/8dkzxWfKWnTic26vsI3EsCXNd4iEB6e8esQ== +"@babel/plugin-transform-export-namespace-from@^7.25.8": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.9.tgz#90745fe55053394f554e40584cda81f2c8a402a2" + integrity sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/template" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-destructuring@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.24.7.tgz#a097f25292defb6e6cc16d6333a4cfc1e3c72d9e" - integrity sha512-19eJO/8kdCQ9zISOf+SEUJM/bAUIsvY3YDnXZTupUCQ8LgrWnsG/gFB9dvXqdXnRXMAM8fvt7b0CBKQHNGy1mw== +"@babel/plugin-transform-for-of@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.9.tgz#4bdc7d42a213397905d89f02350c5267866d5755" + integrity sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9" -"@babel/plugin-transform-dotall-regex@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.24.7.tgz#5f8bf8a680f2116a7207e16288a5f974ad47a7a0" - integrity sha512-ZOA3W+1RRTSWvyqcMJDLqbchh7U4NRGqwRfFSVbOLS/ePIP4vHB5e8T8eXcuqyN1QkgKyj5wuW0lcS85v4CrSw== +"@babel/plugin-transform-function-name@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz#939d956e68a606661005bfd550c4fc2ef95f7b97" + integrity sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA== dependencies: - "@babel/helper-create-regexp-features-plugin" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-compilation-targets" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/traverse" "^7.25.9" -"@babel/plugin-transform-duplicate-keys@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.24.7.tgz#dd20102897c9a2324e5adfffb67ff3610359a8ee" - integrity sha512-JdYfXyCRihAe46jUIliuL2/s0x0wObgwwiGxw/UbgJBr20gQBThrokO4nYKgWkD7uBaqM7+9x5TU7NkExZJyzw== +"@babel/plugin-transform-json-strings@^7.25.8": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.9.tgz#c86db407cb827cded902a90c707d2781aaa89660" + integrity sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-dynamic-import@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.7.tgz#4d8b95e3bae2b037673091aa09cd33fecd6419f4" - integrity sha512-sc3X26PhZQDb3JhORmakcbvkeInvxz+A8oda99lj7J60QRuPZvNAk9wQlTBS1ZynelDrDmTU4pw1tyc5d5ZMUg== +"@babel/plugin-transform-literals@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz#1a1c6b4d4aa59bc4cad5b6b3a223a0abd685c9de" + integrity sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/plugin-syntax-dynamic-import" "^7.8.3" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-exponentiation-operator@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.24.7.tgz#b629ee22645f412024297d5245bce425c31f9b0d" - integrity sha512-Rqe/vSc9OYgDajNIK35u7ot+KeCoetqQYFXM4Epf7M7ez3lWlOjrDjrwMei6caCVhfdw+mIKD4cgdGNy5JQotQ== +"@babel/plugin-transform-logical-assignment-operators@^7.25.8": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz#b19441a8c39a2fda0902900b306ea05ae1055db7" + integrity sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q== dependencies: - "@babel/helper-builder-binary-assignment-operator-visitor" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-export-namespace-from@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.24.7.tgz#176d52d8d8ed516aeae7013ee9556d540c53f197" - integrity sha512-v0K9uNYsPL3oXZ/7F9NNIbAj2jv1whUEtyA6aujhekLs56R++JDQuzRcP2/z4WX5Vg/c5lE9uWZA0/iUoFhLTA== +"@babel/plugin-transform-member-expression-literals@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.9.tgz#63dff19763ea64a31f5e6c20957e6a25e41ed5de" + integrity sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/plugin-syntax-export-namespace-from" "^7.8.3" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-for-of@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.24.7.tgz#f25b33f72df1d8be76399e1b8f3f9d366eb5bc70" - integrity sha512-wo9ogrDG1ITTTBsy46oGiN1dS9A7MROBTcYsfS8DtsImMkHk9JXJ3EWQM6X2SUw4x80uGPlwj0o00Uoc6nEE3g== +"@babel/plugin-transform-modules-amd@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.9.tgz#49ba478f2295101544abd794486cd3088dddb6c5" + integrity sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7" + "@babel/helper-module-transforms" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-function-name@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.24.7.tgz#6d8601fbffe665c894440ab4470bc721dd9131d6" - integrity sha512-U9FcnA821YoILngSmYkW6FjyQe2TyZD5pHt4EVIhmcTkrJw/3KqcrRSxuOo5tFZJi7TE19iDyI1u+weTI7bn2w== +"@babel/plugin-transform-modules-commonjs@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.25.9.tgz#d165c8c569a080baf5467bda88df6425fc060686" + integrity sha512-dwh2Ol1jWwL2MgkCzUSOvfmKElqQcuswAZypBSUsScMXvgdT8Ekq5YA6TtqpTVWH+4903NmboMuH1o9i8Rxlyg== dependencies: - "@babel/helper-compilation-targets" "^7.24.7" - "@babel/helper-function-name" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-module-transforms" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/helper-simple-access" "^7.25.9" -"@babel/plugin-transform-json-strings@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.24.7.tgz#f3e9c37c0a373fee86e36880d45b3664cedaf73a" - integrity sha512-2yFnBGDvRuxAaE/f0vfBKvtnvvqU8tGpMHqMNpTN2oWMKIR3NqFkjaAgGwawhqK/pIN2T3XdjGPdaG0vDhOBGw== +"@babel/plugin-transform-modules-systemjs@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.9.tgz#8bd1b43836269e3d33307151a114bcf3ba6793f8" + integrity sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/plugin-syntax-json-strings" "^7.8.3" + "@babel/helper-module-transforms" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/helper-validator-identifier" "^7.25.9" + "@babel/traverse" "^7.25.9" -"@babel/plugin-transform-literals@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.24.7.tgz#36b505c1e655151a9d7607799a9988fc5467d06c" - integrity sha512-vcwCbb4HDH+hWi8Pqenwnjy+UiklO4Kt1vfspcQYFhJdpthSnW8XvWGyDZWKNVrVbVViI/S7K9PDJZiUmP2fYQ== +"@babel/plugin-transform-modules-umd@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.9.tgz#6710079cdd7c694db36529a1e8411e49fcbf14c9" + integrity sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-module-transforms" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-logical-assignment-operators@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.24.7.tgz#a58fb6eda16c9dc8f9ff1c7b1ba6deb7f4694cb0" - integrity sha512-4D2tpwlQ1odXmTEIFWy9ELJcZHqrStlzK/dAOWYyxX3zT0iXQB6banjgeOJQXzEc4S0E0a5A+hahxPaEFYftsw== +"@babel/plugin-transform-named-capturing-groups-regex@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz#454990ae6cc22fd2a0fa60b3a2c6f63a38064e6a" + integrity sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4" + "@babel/helper-create-regexp-features-plugin" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-member-expression-literals@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.24.7.tgz#3b4454fb0e302e18ba4945ba3246acb1248315df" - integrity sha512-T/hRC1uqrzXMKLQ6UCwMT85S3EvqaBXDGf0FaMf4446Qx9vKwlghvee0+uuZcDUCZU5RuNi4781UQ7R308zzBw== +"@babel/plugin-transform-new-target@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.9.tgz#42e61711294b105c248336dcb04b77054ea8becd" + integrity sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - -"@babel/plugin-transform-modules-amd@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.24.7.tgz#65090ed493c4a834976a3ca1cde776e6ccff32d7" - integrity sha512-9+pB1qxV3vs/8Hdmz/CulFB8w2tuu6EB94JZFsjdqxQokwGa9Unap7Bo2gGBGIvPmDIVvQrom7r5m/TCDMURhg== - dependencies: - "@babel/helper-module-transforms" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-modules-commonjs@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.7.tgz#9fd5f7fdadee9085886b183f1ad13d1ab260f4ab" - integrity sha512-iFI8GDxtevHJ/Z22J5xQpVqFLlMNstcLXh994xifFwxxGslr2ZXXLWgtBeLctOD63UFDArdvN6Tg8RFw+aEmjQ== +"@babel/plugin-transform-nullish-coalescing-operator@^7.25.8": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.25.9.tgz#bcb1b0d9e948168102d5f7104375ca21c3266949" + integrity sha512-ENfftpLZw5EItALAD4WsY/KUWvhUlZndm5GC7G3evUsVeSJB6p0pBeLQUnRnBCBx7zV0RKQjR9kCuwrsIrjWog== dependencies: - "@babel/helper-module-transforms" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/helper-simple-access" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-modules-systemjs@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.24.7.tgz#f8012316c5098f6e8dee6ecd58e2bc6f003d0ce7" - integrity sha512-GYQE0tW7YoaN13qFh3O1NCY4MPkUiAH3fiF7UcV/I3ajmDKEdG3l+UOcbAm4zUE3gnvUU+Eni7XrVKo9eO9auw== +"@babel/plugin-transform-numeric-separator@^7.25.8": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz#bfed75866261a8b643468b0ccfd275f2033214a1" + integrity sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q== dependencies: - "@babel/helper-hoist-variables" "^7.24.7" - "@babel/helper-module-transforms" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/helper-validator-identifier" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-modules-umd@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.24.7.tgz#edd9f43ec549099620df7df24e7ba13b5c76efc8" - integrity sha512-3aytQvqJ/h9z4g8AsKPLvD4Zqi2qT+L3j7XoFFu1XBlZWEl2/1kWnhmAbxpLgPrHSY0M6UA02jyTiwUVtiKR6A== - dependencies: - "@babel/helper-module-transforms" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" - -"@babel/plugin-transform-named-capturing-groups-regex@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.24.7.tgz#9042e9b856bc6b3688c0c2e4060e9e10b1460923" - integrity sha512-/jr7h/EWeJtk1U/uz2jlsCioHkZk1JJZVcc8oQsJ1dUlaJD83f4/6Zeh2aHt9BIFokHIsSeDfhUmju0+1GPd6g== - dependencies: - "@babel/helper-create-regexp-features-plugin" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" - -"@babel/plugin-transform-new-target@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.24.7.tgz#31ff54c4e0555cc549d5816e4ab39241dfb6ab00" - integrity sha512-RNKwfRIXg4Ls/8mMTza5oPF5RkOW8Wy/WgMAp1/F1yZ8mMbtwXW+HDoJiOsagWrAhI5f57Vncrmr9XeT4CVapA== - dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - -"@babel/plugin-transform-nullish-coalescing-operator@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.7.tgz#1de4534c590af9596f53d67f52a92f12db984120" - integrity sha512-Ts7xQVk1OEocqzm8rHMXHlxvsfZ0cEF2yomUqpKENHWMF4zKk175Y4q8H5knJes6PgYad50uuRmt3UJuhBw8pQ== - dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3" +"@babel/plugin-transform-object-rest-spread@^7.25.8": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz#0203725025074164808bcf1a2cfa90c652c99f18" + integrity sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg== + dependencies: + "@babel/helper-compilation-targets" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/plugin-transform-parameters" "^7.25.9" -"@babel/plugin-transform-numeric-separator@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.24.7.tgz#bea62b538c80605d8a0fac9b40f48e97efa7de63" - integrity sha512-e6q1TiVUzvH9KRvicuxdBTUj4AdKSRwzIyFFnfnezpCfP2/7Qmbb8qbU2j7GODbl4JMkblitCQjKYUaX/qkkwA== - dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/plugin-syntax-numeric-separator" "^7.10.4" +"@babel/plugin-transform-object-super@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.9.tgz#385d5de135162933beb4a3d227a2b7e52bb4cf03" + integrity sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A== + dependencies: + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/helper-replace-supers" "^7.25.9" -"@babel/plugin-transform-object-rest-spread@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.7.tgz#d13a2b93435aeb8a197e115221cab266ba6e55d6" - integrity sha512-4QrHAr0aXQCEFni2q4DqKLD31n2DL+RxcwnNjDFkSG0eNQ/xCavnRkfCUjsyqGC2OviNJvZOF/mQqZBw7i2C5Q== - dependencies: - "@babel/helper-compilation-targets" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/plugin-syntax-object-rest-spread" "^7.8.3" - "@babel/plugin-transform-parameters" "^7.24.7" - -"@babel/plugin-transform-object-super@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.24.7.tgz#66eeaff7830bba945dd8989b632a40c04ed625be" - integrity sha512-A/vVLwN6lBrMFmMDmPPz0jnE6ZGx7Jq7d6sT/Ev4H65RER6pZ+kczlf1DthF5N0qaPHBsI7UXiE8Zy66nmAovg== +"@babel/plugin-transform-optional-catch-binding@^7.25.8": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz#10e70d96d52bb1f10c5caaac59ac545ea2ba7ff3" + integrity sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/helper-replace-supers" "^7.24.7" - -"@babel/plugin-transform-optional-catch-binding@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.24.7.tgz#00eabd883d0dd6a60c1c557548785919b6e717b4" - integrity sha512-uLEndKqP5BfBbC/5jTwPxLh9kqPWWgzN/f8w6UwAIirAEqiIVJWWY312X72Eub09g5KF9+Zn7+hT7sDxmhRuKA== + "@babel/helper-plugin-utils" "^7.25.9" + +"@babel/plugin-transform-optional-chaining@^7.25.8", "@babel/plugin-transform-optional-chaining@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.9.tgz#e142eb899d26ef715435f201ab6e139541eee7dd" + integrity sha512-6AvV0FsLULbpnXeBjrY4dmWF8F7gf8QnvTEoO/wX/5xm/xE1Xo8oPuD3MPS+KS9f9XBEAWN7X1aWr4z9HdOr7A== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/plugin-syntax-optional-catch-binding" "^7.8.3" - -"@babel/plugin-transform-optional-chaining@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.7.tgz#b8f6848a80cf2da98a8a204429bec04756c6d454" - integrity sha512-tK+0N9yd4j+x/4hxF3F0e0fu/VdcxU18y5SevtyM/PCFlQvXbR0Zmlo2eBrKtVipGNFzpq56o8WsIIKcJFUCRQ== + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9" + +"@babel/plugin-transform-parameters@^7.25.7", "@babel/plugin-transform-parameters@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz#b856842205b3e77e18b7a7a1b94958069c7ba257" + integrity sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7" - "@babel/plugin-syntax-optional-chaining" "^7.8.3" - -"@babel/plugin-transform-parameters@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.24.7.tgz#5881f0ae21018400e320fc7eb817e529d1254b68" - integrity sha512-yGWW5Rr+sQOhK0Ot8hjDJuxU3XLRQGflvT4lhlSY0DFvdb3TwKaY26CJzHtYllU0vT9j58hc37ndFPsqT1SrzA== - dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - -"@babel/plugin-transform-private-methods@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.24.7.tgz#e6318746b2ae70a59d023d5cc1344a2ba7a75f5e" - integrity sha512-COTCOkG2hn4JKGEKBADkA8WNb35TGkkRbI5iT845dB+NyqgO8Hn+ajPbSnIQznneJTa3d30scb6iz/DhH8GsJQ== + "@babel/helper-plugin-utils" "^7.25.9" + +"@babel/plugin-transform-private-methods@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz#847f4139263577526455d7d3223cd8bda51e3b57" + integrity sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw== dependencies: - "@babel/helper-create-class-features-plugin" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" - -"@babel/plugin-transform-private-property-in-object@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.24.7.tgz#4eec6bc701288c1fab5f72e6a4bbc9d67faca061" - integrity sha512-9z76mxwnwFxMyxZWEgdgECQglF2Q7cFLm0kMf8pGwt+GSJsY0cONKj/UuO4bOH0w/uAel3ekS4ra5CEAyJRmDA== + "@babel/helper-create-class-features-plugin" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" + +"@babel/plugin-transform-private-property-in-object@^7.25.8": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz#9c8b73e64e6cc3cbb2743633885a7dd2c385fe33" + integrity sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw== dependencies: - "@babel/helper-annotate-as-pure" "^7.24.7" - "@babel/helper-create-class-features-plugin" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/plugin-syntax-private-property-in-object" "^7.14.5" + "@babel/helper-annotate-as-pure" "^7.25.9" + "@babel/helper-create-class-features-plugin" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-property-literals@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.24.7.tgz#f0d2ed8380dfbed949c42d4d790266525d63bbdc" - integrity sha512-EMi4MLQSHfd2nrCqQEWxFdha2gBCqU4ZcCng4WBGZ5CJL4bBRW0ptdqqDdeirGZcpALazVVNJqRmsO8/+oNCBA== +"@babel/plugin-transform-property-literals@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.9.tgz#d72d588bd88b0dec8b62e36f6fda91cedfe28e3f" + integrity sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-regenerator@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.7.tgz#021562de4534d8b4b1851759fd7af4e05d2c47f8" - integrity sha512-lq3fvXPdimDrlg6LWBoqj+r/DEWgONuwjuOuQCSYgRroXDH/IdM1C0IZf59fL5cHLpjEH/O6opIRBbqv7ELnuA== +"@babel/plugin-transform-regenerator@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.9.tgz#03a8a4670d6cebae95305ac6defac81ece77740b" + integrity sha512-vwDcDNsgMPDGP0nMqzahDWE5/MLcX8sv96+wfX7as7LoF/kr97Bo/7fI00lXY4wUXYfVmwIIyG80fGZ1uvt2qg== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" regenerator-transform "^0.15.2" -"@babel/plugin-transform-reserved-words@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.7.tgz#80037fe4fbf031fc1125022178ff3938bb3743a4" - integrity sha512-0DUq0pHcPKbjFZCfTss/pGkYMfy3vFWydkUBd9r0GHpIyfs2eCDENvqadMycRS9wZCXR41wucAfJHJmwA0UmoQ== +"@babel/plugin-transform-reserved-words@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.9.tgz#0398aed2f1f10ba3f78a93db219b27ef417fb9ce" + integrity sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-shorthand-properties@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.7.tgz#85448c6b996e122fa9e289746140aaa99da64e73" - integrity sha512-KsDsevZMDsigzbA09+vacnLpmPH4aWjcZjXdyFKGzpplxhbeB4wYtury3vglQkg6KM/xEPKt73eCjPPf1PgXBA== +"@babel/plugin-transform-shorthand-properties@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz#bb785e6091f99f826a95f9894fc16fde61c163f2" + integrity sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-spread@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.24.7.tgz#e8a38c0fde7882e0fb8f160378f74bd885cc7bb3" - integrity sha512-x96oO0I09dgMDxJaANcRyD4ellXFLLiWhuwDxKZX5g2rWP1bTPkBSwCYv96VDXVT1bD9aPj8tppr5ITIh8hBng== +"@babel/plugin-transform-spread@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz#24a35153931b4ba3d13cec4a7748c21ab5514ef9" + integrity sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9" -"@babel/plugin-transform-sticky-regex@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.24.7.tgz#96ae80d7a7e5251f657b5cf18f1ea6bf926f5feb" - integrity sha512-kHPSIJc9v24zEml5geKg9Mjx5ULpfncj0wRpYtxbvKyTtHCYDkVE3aHQ03FrpEo4gEe2vrJJS1Y9CJTaThA52g== +"@babel/plugin-transform-sticky-regex@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz#c7f02b944e986a417817b20ba2c504dfc1453d32" + integrity sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-template-literals@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.7.tgz#a05debb4a9072ae8f985bcf77f3f215434c8f8c8" - integrity sha512-AfDTQmClklHCOLxtGoP7HkeMw56k1/bTQjwsfhL6pppo/M4TOBSq+jjBUBLmV/4oeFg4GWMavIl44ZeCtmmZTw== +"@babel/plugin-transform-template-literals@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz#6dbd4a24e8fad024df76d1fac6a03cf413f60fe1" + integrity sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-typeof-symbol@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.7.tgz#f074be466580d47d6e6b27473a840c9f9ca08fb0" - integrity sha512-VtR8hDy7YLB7+Pet9IarXjg/zgCMSF+1mNS/EQEiEaUPoFXCVsHG64SIxcaaI2zJgRiv+YmgaQESUfWAdbjzgg== +"@babel/plugin-transform-typeof-symbol@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.25.9.tgz#224ba48a92869ddbf81f9b4a5f1204bbf5a2bc4b" + integrity sha512-v61XqUMiueJROUv66BVIOi0Fv/CUuZuZMl5NkRoCVxLAnMexZ0A3kMe7vvZ0nulxMuMp0Mk6S5hNh48yki08ZA== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-unicode-escapes@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.7.tgz#2023a82ced1fb4971630a2e079764502c4148e0e" - integrity sha512-U3ap1gm5+4edc2Q/P+9VrBNhGkfnf+8ZqppY71Bo/pzZmXhhLdqgaUl6cuB07O1+AQJtCLfaOmswiNbSQ9ivhw== +"@babel/plugin-transform-unicode-escapes@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz#a75ef3947ce15363fccaa38e2dd9bc70b2788b82" + integrity sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q== dependencies: - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-unicode-property-regex@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.24.7.tgz#9073a4cd13b86ea71c3264659590ac086605bbcd" - integrity sha512-uH2O4OV5M9FZYQrwc7NdVmMxQJOCCzFeYudlZSzUAHRFeOujQefa92E74TQDVskNHCzOXoigEuoyzHDhaEaK5w== +"@babel/plugin-transform-unicode-property-regex@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.9.tgz#a901e96f2c1d071b0d1bb5dc0d3c880ce8f53dd3" + integrity sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg== dependencies: - "@babel/helper-create-regexp-features-plugin" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-create-regexp-features-plugin" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-unicode-regex@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.7.tgz#dfc3d4a51127108099b19817c0963be6a2adf19f" - integrity sha512-hlQ96MBZSAXUq7ltkjtu3FJCCSMx/j629ns3hA3pXnBXjanNP0LHi+JpPeA81zaWgVK1VGH95Xuy7u0RyQ8kMg== +"@babel/plugin-transform-unicode-regex@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz#5eae747fe39eacf13a8bd006a4fb0b5d1fa5e9b1" + integrity sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA== dependencies: - "@babel/helper-create-regexp-features-plugin" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-create-regexp-features-plugin" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/plugin-transform-unicode-sets-regex@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.24.7.tgz#d40705d67523803a576e29c63cef6e516b858ed9" - integrity sha512-2G8aAvF4wy1w/AGZkemprdGMRg5o6zPNhbHVImRz3lss55TYCBd6xStN19rt8XJHq20sqV0JbyWjOWwQRwV/wg== +"@babel/plugin-transform-unicode-sets-regex@^7.25.7": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.9.tgz#65114c17b4ffc20fa5b163c63c70c0d25621fabe" + integrity sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ== dependencies: - "@babel/helper-create-regexp-features-plugin" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" + "@babel/helper-create-regexp-features-plugin" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" -"@babel/preset-env@7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.24.7.tgz#ff067b4e30ba4a72f225f12f123173e77b987f37" - integrity sha512-1YZNsc+y6cTvWlDHidMBsQZrZfEFjRIo/BZCT906PMdzOyXtSLTgqGdrpcuTDCXyd11Am5uQULtDIcCfnTc8fQ== +"@babel/preset-env@7.25.8": + version "7.25.8" + resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.25.8.tgz#dc6b719627fb29cd9cccbbbe041802fd575b524c" + integrity sha512-58T2yulDHMN8YMUxiLq5YmWUnlDCyY1FsHM+v12VMx+1/FlrUj5tY50iDCpofFQEM8fMYOaY9YRvym2jcjn1Dg== dependencies: - "@babel/compat-data" "^7.24.7" - "@babel/helper-compilation-targets" "^7.24.7" - "@babel/helper-plugin-utils" "^7.24.7" - "@babel/helper-validator-option" "^7.24.7" - "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.24.7" - "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.24.7" - "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.24.7" - "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.24.7" + "@babel/compat-data" "^7.25.8" + "@babel/helper-compilation-targets" "^7.25.7" + "@babel/helper-plugin-utils" "^7.25.7" + "@babel/helper-validator-option" "^7.25.7" + "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.25.7" + "@babel/plugin-bugfix-safari-class-field-initializer-scope" "^7.25.7" + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.25.7" + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.25.7" + "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.25.7" "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2" - "@babel/plugin-syntax-async-generators" "^7.8.4" - "@babel/plugin-syntax-class-properties" "^7.12.13" - "@babel/plugin-syntax-class-static-block" "^7.14.5" - "@babel/plugin-syntax-dynamic-import" "^7.8.3" - "@babel/plugin-syntax-export-namespace-from" "^7.8.3" - "@babel/plugin-syntax-import-assertions" "^7.24.7" - "@babel/plugin-syntax-import-attributes" "^7.24.7" - "@babel/plugin-syntax-import-meta" "^7.10.4" - "@babel/plugin-syntax-json-strings" "^7.8.3" - "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4" - "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3" - "@babel/plugin-syntax-numeric-separator" "^7.10.4" - "@babel/plugin-syntax-object-rest-spread" "^7.8.3" - "@babel/plugin-syntax-optional-catch-binding" "^7.8.3" - "@babel/plugin-syntax-optional-chaining" "^7.8.3" - "@babel/plugin-syntax-private-property-in-object" "^7.14.5" - "@babel/plugin-syntax-top-level-await" "^7.14.5" + "@babel/plugin-syntax-import-assertions" "^7.25.7" + "@babel/plugin-syntax-import-attributes" "^7.25.7" "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6" - "@babel/plugin-transform-arrow-functions" "^7.24.7" - "@babel/plugin-transform-async-generator-functions" "^7.24.7" - "@babel/plugin-transform-async-to-generator" "^7.24.7" - "@babel/plugin-transform-block-scoped-functions" "^7.24.7" - "@babel/plugin-transform-block-scoping" "^7.24.7" - "@babel/plugin-transform-class-properties" "^7.24.7" - "@babel/plugin-transform-class-static-block" "^7.24.7" - "@babel/plugin-transform-classes" "^7.24.7" - "@babel/plugin-transform-computed-properties" "^7.24.7" - "@babel/plugin-transform-destructuring" "^7.24.7" - "@babel/plugin-transform-dotall-regex" "^7.24.7" - "@babel/plugin-transform-duplicate-keys" "^7.24.7" - "@babel/plugin-transform-dynamic-import" "^7.24.7" - "@babel/plugin-transform-exponentiation-operator" "^7.24.7" - "@babel/plugin-transform-export-namespace-from" "^7.24.7" - "@babel/plugin-transform-for-of" "^7.24.7" - "@babel/plugin-transform-function-name" "^7.24.7" - "@babel/plugin-transform-json-strings" "^7.24.7" - "@babel/plugin-transform-literals" "^7.24.7" - "@babel/plugin-transform-logical-assignment-operators" "^7.24.7" - "@babel/plugin-transform-member-expression-literals" "^7.24.7" - "@babel/plugin-transform-modules-amd" "^7.24.7" - "@babel/plugin-transform-modules-commonjs" "^7.24.7" - "@babel/plugin-transform-modules-systemjs" "^7.24.7" - "@babel/plugin-transform-modules-umd" "^7.24.7" - "@babel/plugin-transform-named-capturing-groups-regex" "^7.24.7" - "@babel/plugin-transform-new-target" "^7.24.7" - "@babel/plugin-transform-nullish-coalescing-operator" "^7.24.7" - "@babel/plugin-transform-numeric-separator" "^7.24.7" - "@babel/plugin-transform-object-rest-spread" "^7.24.7" - "@babel/plugin-transform-object-super" "^7.24.7" - "@babel/plugin-transform-optional-catch-binding" "^7.24.7" - "@babel/plugin-transform-optional-chaining" "^7.24.7" - "@babel/plugin-transform-parameters" "^7.24.7" - "@babel/plugin-transform-private-methods" "^7.24.7" - "@babel/plugin-transform-private-property-in-object" "^7.24.7" - "@babel/plugin-transform-property-literals" "^7.24.7" - "@babel/plugin-transform-regenerator" "^7.24.7" - "@babel/plugin-transform-reserved-words" "^7.24.7" - "@babel/plugin-transform-shorthand-properties" "^7.24.7" - "@babel/plugin-transform-spread" "^7.24.7" - "@babel/plugin-transform-sticky-regex" "^7.24.7" - "@babel/plugin-transform-template-literals" "^7.24.7" - "@babel/plugin-transform-typeof-symbol" "^7.24.7" - "@babel/plugin-transform-unicode-escapes" "^7.24.7" - "@babel/plugin-transform-unicode-property-regex" "^7.24.7" - "@babel/plugin-transform-unicode-regex" "^7.24.7" - "@babel/plugin-transform-unicode-sets-regex" "^7.24.7" + "@babel/plugin-transform-arrow-functions" "^7.25.7" + "@babel/plugin-transform-async-generator-functions" "^7.25.8" + "@babel/plugin-transform-async-to-generator" "^7.25.7" + "@babel/plugin-transform-block-scoped-functions" "^7.25.7" + "@babel/plugin-transform-block-scoping" "^7.25.7" + "@babel/plugin-transform-class-properties" "^7.25.7" + "@babel/plugin-transform-class-static-block" "^7.25.8" + "@babel/plugin-transform-classes" "^7.25.7" + "@babel/plugin-transform-computed-properties" "^7.25.7" + "@babel/plugin-transform-destructuring" "^7.25.7" + "@babel/plugin-transform-dotall-regex" "^7.25.7" + "@babel/plugin-transform-duplicate-keys" "^7.25.7" + "@babel/plugin-transform-duplicate-named-capturing-groups-regex" "^7.25.7" + "@babel/plugin-transform-dynamic-import" "^7.25.8" + "@babel/plugin-transform-exponentiation-operator" "^7.25.7" + "@babel/plugin-transform-export-namespace-from" "^7.25.8" + "@babel/plugin-transform-for-of" "^7.25.7" + "@babel/plugin-transform-function-name" "^7.25.7" + "@babel/plugin-transform-json-strings" "^7.25.8" + "@babel/plugin-transform-literals" "^7.25.7" + "@babel/plugin-transform-logical-assignment-operators" "^7.25.8" + "@babel/plugin-transform-member-expression-literals" "^7.25.7" + "@babel/plugin-transform-modules-amd" "^7.25.7" + "@babel/plugin-transform-modules-commonjs" "^7.25.7" + "@babel/plugin-transform-modules-systemjs" "^7.25.7" + "@babel/plugin-transform-modules-umd" "^7.25.7" + "@babel/plugin-transform-named-capturing-groups-regex" "^7.25.7" + "@babel/plugin-transform-new-target" "^7.25.7" + "@babel/plugin-transform-nullish-coalescing-operator" "^7.25.8" + "@babel/plugin-transform-numeric-separator" "^7.25.8" + "@babel/plugin-transform-object-rest-spread" "^7.25.8" + "@babel/plugin-transform-object-super" "^7.25.7" + "@babel/plugin-transform-optional-catch-binding" "^7.25.8" + "@babel/plugin-transform-optional-chaining" "^7.25.8" + "@babel/plugin-transform-parameters" "^7.25.7" + "@babel/plugin-transform-private-methods" "^7.25.7" + "@babel/plugin-transform-private-property-in-object" "^7.25.8" + "@babel/plugin-transform-property-literals" "^7.25.7" + "@babel/plugin-transform-regenerator" "^7.25.7" + "@babel/plugin-transform-reserved-words" "^7.25.7" + "@babel/plugin-transform-shorthand-properties" "^7.25.7" + "@babel/plugin-transform-spread" "^7.25.7" + "@babel/plugin-transform-sticky-regex" "^7.25.7" + "@babel/plugin-transform-template-literals" "^7.25.7" + "@babel/plugin-transform-typeof-symbol" "^7.25.7" + "@babel/plugin-transform-unicode-escapes" "^7.25.7" + "@babel/plugin-transform-unicode-property-regex" "^7.25.7" + "@babel/plugin-transform-unicode-regex" "^7.25.7" + "@babel/plugin-transform-unicode-sets-regex" "^7.25.7" "@babel/preset-modules" "0.1.6-no-external-plugins" babel-plugin-polyfill-corejs2 "^0.4.10" - babel-plugin-polyfill-corejs3 "^0.10.4" + babel-plugin-polyfill-corejs3 "^0.10.6" babel-plugin-polyfill-regenerator "^0.6.1" - core-js-compat "^3.31.0" + core-js-compat "^3.38.1" semver "^6.3.1" "@babel/preset-modules@0.1.6-no-external-plugins": @@ -980,28 +834,25 @@ dependencies: regenerator-runtime "^0.13.11" -"@babel/template@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.7.tgz#02efcee317d0609d2c07117cb70ef8fb17ab7315" - integrity sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig== - dependencies: - "@babel/code-frame" "^7.24.7" - "@babel/parser" "^7.24.7" - "@babel/types" "^7.24.7" - -"@babel/traverse@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.7.tgz#de2b900163fa741721ba382163fe46a936c40cf5" - integrity sha512-yb65Ed5S/QAcewNPh0nZczy9JdYXkkAbIsEo+P7BE7yO3txAY30Y/oPa3QkQ5It3xVG2kpKMg9MsdxZaO31uKA== - dependencies: - "@babel/code-frame" "^7.24.7" - "@babel/generator" "^7.24.7" - "@babel/helper-environment-visitor" "^7.24.7" - "@babel/helper-function-name" "^7.24.7" - "@babel/helper-hoist-variables" "^7.24.7" - "@babel/helper-split-export-declaration" "^7.24.7" - "@babel/parser" "^7.24.7" - "@babel/types" "^7.24.7" +"@babel/template@^7.25.7", "@babel/template@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016" + integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg== + dependencies: + "@babel/code-frame" "^7.25.9" + "@babel/parser" "^7.25.9" + "@babel/types" "^7.25.9" + +"@babel/traverse@^7.25.7", "@babel/traverse@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84" + integrity sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw== + dependencies: + "@babel/code-frame" "^7.25.9" + "@babel/generator" "^7.25.9" + "@babel/parser" "^7.25.9" + "@babel/template" "^7.25.9" + "@babel/types" "^7.25.9" debug "^4.3.1" globals "^11.1.0" @@ -1014,14 +865,18 @@ "@babel/helper-validator-identifier" "^7.19.1" to-fast-properties "^2.0.0" -"@babel/types@^7.24.7": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.7.tgz#6027fe12bc1aa724cd32ab113fb7f1988f1f66f2" - integrity sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q== +"@babel/types@^7.25.8", "@babel/types@^7.25.9", "@babel/types@^7.26.0": + version "7.26.0" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.0.tgz#deabd08d6b753bc8e0f198f8709fb575e31774ff" + integrity sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA== dependencies: - "@babel/helper-string-parser" "^7.24.7" - "@babel/helper-validator-identifier" "^7.24.7" - to-fast-properties "^2.0.0" + "@babel/helper-string-parser" "^7.25.9" + "@babel/helper-validator-identifier" "^7.25.9" + +"@bufbuild/protobuf@^2.0.0": + version "2.2.2" + resolved "https://registry.yarnpkg.com/@bufbuild/protobuf/-/protobuf-2.2.2.tgz#1a6d89603fb215dc4d4178052d05b30b83c75402" + integrity sha512-UNtPCbrwrenpmrXuRwn9jYpPoweNXj8X5sMvYgsqYyaH8jQ6LfUJSk3dJLnBK+6sfYPrF4iAIo5sd5HQ+tg75A== "@csstools/normalize.css@12.1.1": version "12.1.1" @@ -1045,13 +900,20 @@ dependencies: "@floating-ui/utils" "^0.2.1" -"@floating-ui/dom@1.6.5": - version "1.6.5" - resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.5.tgz#323f065c003f1d3ecf0ff16d2c2c4d38979f4cb9" - integrity sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw== +"@floating-ui/core@^1.6.0": + version "1.6.8" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12" + integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA== dependencies: - "@floating-ui/core" "^1.0.0" - "@floating-ui/utils" "^0.2.0" + "@floating-ui/utils" "^0.2.8" + +"@floating-ui/dom@1.6.11": + version "1.6.11" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.11.tgz#8631857838d34ee5712339eb7cbdfb8ad34da723" + integrity sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ== + dependencies: + "@floating-ui/core" "^1.6.0" + "@floating-ui/utils" "^0.2.8" "@floating-ui/dom@^1.5.3": version "1.6.3" @@ -1066,6 +928,11 @@ resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2" integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q== +"@floating-ui/utils@^0.2.8": + version "0.2.8" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62" + integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig== + "@hotwired/stimulus-webpack-helpers@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@hotwired/stimulus-webpack-helpers/-/stimulus-webpack-helpers-1.0.1.tgz#4cd74487adeca576c9865ac2b9fe5cb20cef16dd" @@ -1172,34 +1039,39 @@ resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b" integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A== -"@lmc-eu/spirit-demo@0.1.1": - version "0.1.1" - resolved "https://registry.yarnpkg.com/@lmc-eu/spirit-demo/-/spirit-demo-0.1.1.tgz#990f2ab1e453640a8186f0546eff5f2eafa4bb0f" - integrity sha512-l1BMmNobCYjZLsVi5vir5VZXDnZHn/i08mBv9ELEdcWJNTF7POkSPn2uS5jOUZ3ScdzKPH7UMRjYJVjsgVMWKQ== +"@lmc-eu/spirit-demo@0.1.3": + version "0.1.3" + resolved "https://registry.yarnpkg.com/@lmc-eu/spirit-demo/-/spirit-demo-0.1.3.tgz#12cd8a6bb2b35879936f8352a2705e8b58492ac1" + integrity sha512-2QN24fCytvytATgwD8rQOmxB87oQsl2V8qFvHLfj1nfR1j9HivF5koQkT+NzeBeTEg/8JVpstc+zQR9UxCKZvw== -"@lmc-eu/spirit-design-tokens@2.0.1", "@lmc-eu/spirit-design-tokens@^2.0.1": - version "2.0.1" - resolved "https://registry.yarnpkg.com/@lmc-eu/spirit-design-tokens/-/spirit-design-tokens-2.0.1.tgz#8e5ba7f68a5727a5e32fc67af2cc3a78d00a1355" - integrity sha512-flQi6nQxJAPW/XpF3TQVA8spSX1k8cK826riujzbBcH5E66d4YQpsZBhDuwE0bmwgnRt7z0kG+EO3bPvObVbeA== +"@lmc-eu/spirit-design-tokens@2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@lmc-eu/spirit-design-tokens/-/spirit-design-tokens-2.1.1.tgz#751b772f09e6e0f5b4b3023bcada318addf86339" + integrity sha512-zZD9cwlGT+osr8Ji4mFnQOYRtKyRECTty74BnGWPIY4hhuVOAFXElOXZmGUEiQwAmBErt4rpFEJld1+k2TKEZQ== -"@lmc-eu/spirit-form-validations@2.0.1": - version "2.0.1" - resolved "https://registry.yarnpkg.com/@lmc-eu/spirit-form-validations/-/spirit-form-validations-2.0.1.tgz#d9856ca69b278b2f2361c65d931a1ecd967fca4c" - integrity sha512-/iKDgErDsD6JVMdpZFdiC6ipF8QGI9/u/6IphXSgqzJO/XL5dngBk5HlhY5BppqL2kmSXOrZqaWWRWyYi9Qyyg== +"@lmc-eu/spirit-design-tokens@^2.1.1": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@lmc-eu/spirit-design-tokens/-/spirit-design-tokens-2.1.2.tgz#f8ed7a2df30aae7f3a269ced76eb6ab247a49874" + integrity sha512-AgVwpU/p/GISwzk7O5+saB+MNkInq45nHAzQKnGwmaalsNxBLVBzr7y3RF2Jp/jCD7q4eyx7bwerDXXlSxijOA== + +"@lmc-eu/spirit-form-validations@2.0.4": + version "2.0.4" + resolved "https://registry.yarnpkg.com/@lmc-eu/spirit-form-validations/-/spirit-form-validations-2.0.4.tgz#f0a78057da828869ed9766817c8e8fd38240ffbd" + integrity sha512-488C0DEKY1BYJU18HFUBWjTe0MXvBNkghFPArm5BG4TMwIFyNxUloqMoIU409LcJeEiHYHX+ENwLP+vKRMRR0Q== "@lmc-eu/spirit-icons@^0.10.2": version "0.10.2" resolved "https://registry.yarnpkg.com/@lmc-eu/spirit-icons/-/spirit-icons-0.10.2.tgz#8e5891b6685f2eb86f80c82c331ee9993b7c8e6d" integrity sha512-YsvnppB6jUMLP2aR0raXlFBEca10DIqWWoIB6iS+1LswcYDUQmEh0NfYYacNEdLeKLHN/fGdtDHInvNUmU2y3w== -"@lmc-eu/spirit-web@2.1.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@lmc-eu/spirit-web/-/spirit-web-2.1.0.tgz#625784cb73a71649684f07020fe5771dbe3c35fa" - integrity sha512-KcIOYbDONNbslMHQ0wCky130bN2/ioye3wHVIIsjH92cyZtM080Ez0qZq9/FpWVJJAGI0JMnUVyx1JT8GSRZpA== +"@lmc-eu/spirit-web@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@lmc-eu/spirit-web/-/spirit-web-2.5.0.tgz#3df81c3f1e42aaa66e185d1c845e71df45290ba1" + integrity sha512-iB8TWQrImOnCdFncITdniyAwz+6kV1p/5KLEJkXZPWh7x3U8FQB/DkIYEMMmvzK/LPPoTmZ32maPC4wnBeRG/Q== dependencies: "@csstools/normalize.css" "^12.0.0" "@floating-ui/dom" "^1.5.3" - "@lmc-eu/spirit-design-tokens" "^2.0.1" + "@lmc-eu/spirit-design-tokens" "^2.1.1" "@lmc-eu/spirit-icons" "^0.10.2" "@nuxt/friendly-errors-webpack-plugin@^2.5.1": @@ -1228,10 +1100,10 @@ loader-utils "^2.0.0" schema-utils "^3.0.0" -"@symfony/webpack-encore@4.6.1": - version "4.6.1" - resolved "https://registry.yarnpkg.com/@symfony/webpack-encore/-/webpack-encore-4.6.1.tgz#a3ced0baf1b02feb6d1a564906aff0e479b07259" - integrity sha512-JbOjy0P6P9pcbgVE3nceFnCCneRO+tbcLUkQh9rpPj/sHtFl12foSjHz6uY93ZGZGAvTyqEslie+4MlD/rUtnQ== +"@symfony/webpack-encore@4.7.0": + version "4.7.0" + resolved "https://registry.yarnpkg.com/@symfony/webpack-encore/-/webpack-encore-4.7.0.tgz#d8f9ddc28ddb4175d65e3dd9de3a86e38e6fff52" + integrity sha512-vlvg1mYLVSaujTEUmkd/ucwK7LG7+89PHfOwfz/sJ53n2IFGtuAXyPyXL0igJ0tMcKvDuCShiWTX1nfnzT/Srw== dependencies: "@nuxt/friendly-errors-webpack-plugin" "^2.5.1" assets-webpack-plugin "7.0.*" @@ -1240,9 +1112,8 @@ clean-webpack-plugin "^4.0.0" css-loader "^6.7.0" css-minimizer-webpack-plugin "^5.0.0" - fast-levenshtein "^3.0.0" + fastest-levenshtein "^1.0.16" mini-css-extract-plugin "^2.6.0" - pkg-up "^3.1.0" pretty-error "^4.0.0" resolve-url-loader "^5.0.0" semver "^7.3.2" @@ -1289,27 +1160,6 @@ dependencies: "@types/node" "*" -"@types/eslint-scope@^3.7.3": - version "3.7.4" - resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16" - integrity sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA== - dependencies: - "@types/eslint" "*" - "@types/estree" "*" - -"@types/eslint@*": - version "8.37.0" - resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.37.0.tgz#29cebc6c2a3ac7fea7113207bf5a828fdf4d7ef1" - integrity sha512-Piet7dG2JBuDIfohBngQ3rCt7MgO9xCO4xIMKxBThCq5PNRB91IjlJ10eJVwfoNtvTErmxLzwBZ7rHZtbOMmFQ== - dependencies: - "@types/estree" "*" - "@types/json-schema" "*" - -"@types/estree@*": - version "1.0.1" - resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194" - integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA== - "@types/estree@^1.0.5": version "1.0.5" resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4" @@ -1369,7 +1219,7 @@ dependencies: "@types/istanbul-lib-report" "*" -"@types/json-schema@*", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9": +"@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9": version "7.0.11" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3" integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ== @@ -1754,13 +1604,13 @@ babel-plugin-polyfill-corejs2@^0.4.10: "@babel/helper-define-polyfill-provider" "^0.6.1" semver "^6.3.1" -babel-plugin-polyfill-corejs3@^0.10.4: - version "0.10.4" - resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.4.tgz#789ac82405ad664c20476d0233b485281deb9c77" - integrity sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg== +babel-plugin-polyfill-corejs3@^0.10.6: + version "0.10.6" + resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz#2deda57caef50f59c525aeb4964d3b2f867710c7" + integrity sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA== dependencies: - "@babel/helper-define-polyfill-provider" "^0.6.1" - core-js-compat "^3.36.1" + "@babel/helper-define-polyfill-provider" "^0.6.2" + core-js-compat "^3.38.0" babel-plugin-polyfill-regenerator@^0.6.1: version "0.6.1" @@ -1847,7 +1697,7 @@ browserslist@^4.0.0, browserslist@^4.21.4: node-releases "^2.0.8" update-browserslist-db "^1.0.10" -browserslist@^4.21.10, browserslist@^4.23.0: +browserslist@^4.21.10: version "4.23.0" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab" integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ== @@ -1867,15 +1717,20 @@ browserslist@^4.21.9: node-releases "^2.0.12" update-browserslist-db "^1.0.11" -browserslist@^4.22.2: - version "4.22.2" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.2.tgz#704c4943072bd81ea18997f3bd2180e89c77874b" - integrity sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A== +browserslist@^4.24.0, browserslist@^4.24.2: + version "4.24.2" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.2.tgz#f5845bc91069dbd55ee89faf9822e1d885d16580" + integrity sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg== dependencies: - caniuse-lite "^1.0.30001565" - electron-to-chromium "^1.4.601" - node-releases "^2.0.14" - update-browserslist-db "^1.0.13" + caniuse-lite "^1.0.30001669" + electron-to-chromium "^1.5.41" + node-releases "^2.0.18" + update-browserslist-db "^1.1.1" + +buffer-builder@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/buffer-builder/-/buffer-builder-0.2.0.tgz#3322cd307d8296dab1f604618593b261a3fade8f" + integrity sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg== buffer-from@^1.0.0: version "1.1.2" @@ -1915,7 +1770,7 @@ caniuse-api@^3.0.0: lodash.memoize "^4.1.2" lodash.uniq "^4.5.0" -caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001503, caniuse-lite@^1.0.30001565: +caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001503: version "1.0.30001579" resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz" integrity sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA== @@ -1925,7 +1780,12 @@ caniuse-lite@^1.0.30001587: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz#93a3ee17a35aa6a9f0c6ef1b2ab49507d1ab9079" integrity sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ== -chalk@^2.3.2, chalk@^2.4.2: +caniuse-lite@^1.0.30001669: + version "1.0.30001680" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz#5380ede637a33b9f9f1fc6045ea99bd142f3da5e" + integrity sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA== + +chalk@^2.3.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== @@ -1942,7 +1802,7 @@ chalk@^4.0.0, chalk@^4.1.0: ansi-styles "^4.1.0" supports-color "^7.1.0" -"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3: +chokidar@^3.5.3: version "3.5.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== @@ -2017,6 +1877,11 @@ colorette@^2.0.10, colorette@^2.0.14: resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a" integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w== +colorjs.io@^0.5.0: + version "0.5.2" + resolved "https://registry.yarnpkg.com/colorjs.io/-/colorjs.io-0.5.2.tgz#63b20139b007591ebc3359932bef84628eb3fcef" + integrity sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw== + commander@^10.0.1: version "10.0.1" resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06" @@ -2104,24 +1969,17 @@ cookie@0.5.0: resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b" integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw== -core-js-compat@^3.31.0: - version "3.31.1" - resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.31.1.tgz#5084ad1a46858df50ff89ace152441a63ba7aae0" - integrity sha512-wIDWd2s5/5aJSdpOJHfSibxNODxoGoWOBHt8JSPB41NOE94M7kuTPZCYLOlTtuoXTsBPKobpJ6T+y0SSy5L9SA== - dependencies: - browserslist "^4.21.9" - -core-js-compat@^3.36.1: - version "3.36.1" - resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.36.1.tgz#1818695d72c99c25d621dca94e6883e190cea3c8" - integrity sha512-Dk997v9ZCt3X/npqzyGdTlq6t7lDBhZwGvV94PKzDArjp7BTRm7WlDAXYd/OWdeFHO8OChQYRJNJvUCqCbrtKA== +core-js-compat@^3.38.0, core-js-compat@^3.38.1: + version "3.39.0" + resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.39.0.tgz#b12dccb495f2601dc860bdbe7b4e3ffa8ba63f61" + integrity sha512-VgEUx3VwlExr5no0tXlBt+silBvhTryPwCXRI2Id1PN8WTKu7MreethvddqOubrYxkFdv/RnYrqlv1sFNAUelw== dependencies: - browserslist "^4.23.0" + browserslist "^4.24.2" -core-js@3.37.1: - version "3.37.1" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.37.1.tgz#d21751ddb756518ac5a00e4d66499df981a62db9" - integrity sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw== +core-js@3.38.1: + version "3.38.1" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.38.1.tgz#aa375b79a286a670388a1a363363d53677c0383e" + integrity sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw== core-util-is@~1.0.0: version "1.0.3" @@ -2419,16 +2277,16 @@ electron-to-chromium@^1.4.431: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.468.tgz#3cbf64ad67d9f12bfe69fefe5eb1935ec4f6ab7a" integrity sha512-6M1qyhaJOt7rQtNti1lBA0GwclPH+oKCmsra/hkcWs5INLxfXXD/dtdnaKUYQu/pjOBP/8Osoe4mAcNvvzoFag== -electron-to-chromium@^1.4.601: - version "1.4.614" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.614.tgz#2fe789d61fa09cb875569f37c309d0c2701f91c0" - integrity sha512-X4ze/9Sc3QWs6h92yerwqv7aB/uU8vCjZcrMjA8N9R1pjMFRe44dLsck5FzLilOYvcXuDn93B+bpGYyufc70gQ== - electron-to-chromium@^1.4.668: version "1.4.715" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.715.tgz#bb16bcf2a3537962fccfa746b5c98c5f7404ff46" integrity sha512-XzWNH4ZSa9BwVUQSDorPWAUQ5WGuYz7zJUNpNif40zFCiCl20t8zgylmreNmn26h5kiyw2lg7RfTmeMBsDklqg== +electron-to-chromium@^1.5.41: + version "1.5.56" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.56.tgz#3213f369efc3a41091c3b2c05bc0f406108ac1df" + integrity sha512-7lXb9dAvimCFdvUMTyucD4mnIndt/xhRKFAlky0CyFogdnNmdPQNoHI23msF/2V4mpTxMzgMdjK4+YRlFlRQZw== + emoji-regex@^8.0.0: version "8.0.0" resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37" @@ -2452,10 +2310,10 @@ enhanced-resolve@^5.0.0: graceful-fs "^4.2.4" tapable "^2.2.0" -enhanced-resolve@^5.17.0: - version "5.17.0" - resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz#d037603789dd9555b89aaec7eb78845c49089bc5" - integrity sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA== +enhanced-resolve@^5.17.1: + version "5.17.1" + resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15" + integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg== dependencies: graceful-fs "^4.2.4" tapable "^2.2.0" @@ -2492,6 +2350,11 @@ escalade@^3.1.1: resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40" integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw== +escalade@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5" + integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA== + escape-html@~1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" @@ -2614,14 +2477,7 @@ fast-json-stable-stringify@^2.0.0: resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633" integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw== -fast-levenshtein@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-3.0.0.tgz#37b899ae47e1090e40e3fd2318e4d5f0142ca912" - integrity sha512-hKKNajm46uNmTlhHSyZkmToAc56uZJwYq7yrciZjqOxnlfQwERDQJmHPUp7m1m9wx8vgOe8IaCKZ5Kv2k1DdCQ== - dependencies: - fastest-levenshtein "^1.0.7" - -fastest-levenshtein@^1.0.12, fastest-levenshtein@^1.0.7: +fastest-levenshtein@^1.0.12, fastest-levenshtein@^1.0.16: version "1.0.16" resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5" integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg== @@ -2661,13 +2517,6 @@ find-cache-dir@^4.0.0: common-path-prefix "^3.0.0" pkg-dir "^7.0.0" -find-up@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73" - integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg== - dependencies: - locate-path "^3.0.0" - find-up@^4.0.0: version "4.1.0" resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19" @@ -3113,10 +2962,10 @@ js-tokens@^4.0.0: resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== -jsesc@^2.5.1: - version "2.5.2" - resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4" - integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA== +jsesc@^3.0.2, jsesc@~3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e" + integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g== jsesc@~0.5.0: version "0.5.0" @@ -3175,14 +3024,6 @@ loader-utils@^2.0.0: emojis-list "^3.0.0" json5 "^2.1.2" -locate-path@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e" - integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A== - dependencies: - p-locate "^3.0.0" - path-exists "^3.0.0" - locate-path@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0" @@ -3382,6 +3223,11 @@ node-releases@^2.0.14: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b" integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw== +node-releases@^2.0.18: + version "2.0.18" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f" + integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g== + node-releases@^2.0.8: version "2.0.10" resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f" @@ -3456,7 +3302,7 @@ open@^8.0.9: is-docker "^2.1.1" is-wsl "^2.2.0" -p-limit@^2.0.0, p-limit@^2.2.0: +p-limit@^2.2.0: version "2.3.0" resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1" integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w== @@ -3470,13 +3316,6 @@ p-limit@^4.0.0: dependencies: yocto-queue "^1.0.0" -p-locate@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4" - integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ== - dependencies: - p-limit "^2.0.0" - p-locate@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07" @@ -3514,11 +3353,6 @@ parseurl@~1.3.2, parseurl@~1.3.3: resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4" integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ== -path-exists@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515" - integrity sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ== - path-exists@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3" @@ -3559,6 +3393,11 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== +picocolors@^1.1.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" + integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== + picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" @@ -3600,13 +3439,6 @@ pkg-dir@^7.0.0: dependencies: find-up "^6.3.0" -pkg-up@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5" - integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA== - dependencies: - find-up "^3.0.0" - postcss-calc@^9.0.0: version "9.0.1" resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-9.0.1.tgz#a744fd592438a93d6de0f1434c572670361eb6c6" @@ -3968,6 +3800,13 @@ regenerate-unicode-properties@^10.1.0: dependencies: regenerate "^1.4.2" +regenerate-unicode-properties@^10.2.0: + version "10.2.0" + resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz#626e39df8c372338ea9b8028d1f99dc3fd9c3db0" + integrity sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA== + dependencies: + regenerate "^1.4.2" + regenerate@^1.4.2: version "1.4.2" resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" @@ -4007,6 +3846,30 @@ regexpu-core@^5.3.1: unicode-match-property-ecmascript "^2.0.0" unicode-match-property-value-ecmascript "^2.1.0" +regexpu-core@^6.1.1: + version "6.1.1" + resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-6.1.1.tgz#b469b245594cb2d088ceebc6369dceb8c00becac" + integrity sha512-k67Nb9jvwJcJmVpw0jPttR1/zVfnKf8Km0IPatrU/zJ5XeG3+Slx0xLXs9HByJSzXzrlz5EDvN6yLNMDc2qdnw== + dependencies: + regenerate "^1.4.2" + regenerate-unicode-properties "^10.2.0" + regjsgen "^0.8.0" + regjsparser "^0.11.0" + unicode-match-property-ecmascript "^2.0.0" + unicode-match-property-value-ecmascript "^2.1.0" + +regjsgen@^0.8.0: + version "0.8.0" + resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.8.0.tgz#df23ff26e0c5b300a6470cad160a9d090c3a37ab" + integrity sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q== + +regjsparser@^0.11.0: + version "0.11.2" + resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.11.2.tgz#7404ad42be00226d72bcf1f003f1f441861913d8" + integrity sha512-3OGZZ4HoLJkkAZx/48mTXJNlmqTGOzc0o9OWQPuWpkOlXXPbyN6OafCcoXUnBqE2D3f/T5L+pWc1kdEmnfnRsA== + dependencies: + jsesc "~3.0.2" + regjsparser@^0.9.1: version "0.9.1" resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709" @@ -4095,6 +3958,13 @@ rimraf@^3.0.0, rimraf@^3.0.2: dependencies: glob "^7.1.3" +rxjs@^7.4.0: + version "7.8.1" + resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543" + integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg== + dependencies: + tslib "^2.1.0" + safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1: version "5.1.2" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" @@ -4110,22 +3980,147 @@ safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.1.0, safe-buffer@~5.2.0: resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== -sass-loader@13.3.3: - version "13.3.3" - resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.3.3.tgz#60df5e858788cffb1a3215e5b92e9cba61e7e133" - integrity sha512-mt5YN2F1MOZr3d/wBRcZxeFgwgkH44wVc2zohO2YF6JiOMkiXe4BYRZpSu2sO1g71mo/j16txzUhsKZlqjVGzA== +sass-embedded-android-arm64@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.79.5.tgz#64649c79e08f90a3875dcc99ca176fadcb3d4865" + integrity sha512-pq1RJTENkRmEUMLiVuSGYwuLk8zXovWzrjQxlWZTF/Jn5F7Ypi/3v5huMmgJF5n+etsxjio1PN1idaQ5tPLBmg== + +sass-embedded-android-arm@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-android-arm/-/sass-embedded-android-arm-1.79.5.tgz#ad6cacfeb418a79e1fac48146fb6842028ba0bc8" + integrity sha512-gYtpQAE2uNFa5IBKBIzUq5ETDS6gnVRmhP5j+N5JGrOThYaGPcG4KrjlU9R3BfCmc7zP5WvlHFZsxSz+2JRT2w== + +sass-embedded-android-ia32@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-android-ia32/-/sass-embedded-android-ia32-1.79.5.tgz#5360f9b583288d670753814745c227f86ae24e7d" + integrity sha512-CgJZjLxYRkgjTP/76WumLlF7+1aW0LA+DSEJhkVaCxe5avndRCmPrNcX0PrtYSDvUgeQDvY7xF+fT9QXN1+NgQ== + +sass-embedded-android-riscv64@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.79.5.tgz#b2c1476772f0008c1388ea38a7294ef5c0db6ef6" + integrity sha512-OLbdmDSM/eOjO01PUYbS54BQOCM/HHHHWk/4M8HHdxwF3ojy5eqQaA63R1YQ3IJvLEE7dnudofOXmL01B5+yvQ== + +sass-embedded-android-x64@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-android-x64/-/sass-embedded-android-x64-1.79.5.tgz#c90533e0eaad9525e753b1ac8f3790e159017416" + integrity sha512-UbXxk/rdR3aVBkB7Fh/eAUL7oUADWgQrYpLe9Xu5A0gmthw0/zo/pu7kweBSrbgHnPfWIt/uxwmW4eEAmqqZWQ== + +sass-embedded-darwin-arm64@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.79.5.tgz#688c57bccb7edf1adb9965495005a074111a0caa" + integrity sha512-qeEl9XhYetZSY1j4nqvh3hB8tfYOAGsOQyVOCaxyX1bubMRSGPvPNIyftm14QzK7EDrE/K/0+FwCvflarOV4NQ== + +sass-embedded-darwin-x64@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.79.5.tgz#7f2011a9120a822ef227fbab7ed80881909a9850" + integrity sha512-y4pvkYCQhgruxlncub/2j+cZSmlpsZX9Rp1aTRIKvlNagqFStYzFZ6kX3CErlfCEAMYwRVEhP8z/OOoDqnjaZA== + +sass-embedded-linux-arm64@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.79.5.tgz#ce5845e2dc90edfc273ba9c94768e77565ab8452" + integrity sha512-kiUbrLiNAA7vOe6kpdukRhCad1u7ebwhB0ZE63+IgF5HFZ/Qo6GkhHIrVM9AfeLxUT3N6Z4BNtgdcRa9na4Pwg== + +sass-embedded-linux-arm@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.79.5.tgz#367286efd539af519c8e6e9b1619ae15376cafcf" + integrity sha512-rX6qAR8pE1pevYhGzbCpGFexdH4z6QMnw3IeiCNmkpJ4zMXNEN336xl6SZN0xaPiGuNDhUFcq0wgSq3RDKS5vQ== + +sass-embedded-linux-ia32@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.79.5.tgz#0610e1fcc2c5162513e2ff1accff4f950387f471" + integrity sha512-12pj3fBV0+VAX/RI6uYFxi/MoUoihRKP7iVpo9MaT/m+EtvN6mYsDpi/T4pTq2dKQYljoaFq8Rb6tR+FinS1zg== + +sass-embedded-linux-musl-arm64@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.79.5.tgz#e49c09238f0225f34b756c5d31a4d31fed32ef44" + integrity sha512-Qg1HuQ+ebz3wfPT7xty2G8BpDLXdyfMk7WqKd+X1DlFEcY/kcNapwMVFXS2fCYTTR3gcbIZ4p7eUiQySlkj93A== + +sass-embedded-linux-musl-arm@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.79.5.tgz#b7a9dad59932d30950e050566b621ea6eb2f35aa" + integrity sha512-EHFrbTgRymEFTf3JnjHzC24PO0WHFjLUEWUJqSuWKZw0+BCL7120MvYIrfkYymPp5UYk+STIjj+Fd9dYSWBrAg== + +sass-embedded-linux-musl-ia32@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-linux-musl-ia32/-/sass-embedded-linux-musl-ia32-1.79.5.tgz#c301d39c57688bd03c0bc8e6a39a4d538e4d1916" + integrity sha512-2qdsGIcdCnpsw8Ijuq8uk4RifxV/lTd1mqjrfge7AfFBtQIExbxZoYBtbSrcY63ONa+UWEf9Z1p6rZ3QySKWlg== + +sass-embedded-linux-musl-riscv64@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.79.5.tgz#0d159299a7ae4715d3f8d011447caca781963e27" + integrity sha512-wrc6s8YQt95koSkaLoP5HtvAAKxTPWqYZVxnoqp2bHgkKWlr4ymJll9vMcdU3//VxTgJbuH83U5ajzNCtHd0NQ== + +sass-embedded-linux-musl-x64@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.79.5.tgz#d353065b40733cdf2b025a0a045a37265751de46" + integrity sha512-1J6JrGpVp07GsBEzEGj/9u6UkVUuga2U7kpfkQxIdYOLmXmXmni6zNx89VehaP7X5OSscwJc/Zufh++6VcRQHw== + +sass-embedded-linux-riscv64@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.79.5.tgz#5707c645fe81fb43cff1bd5cc0cdc6e1b2c4bfb6" + integrity sha512-G45UKRAUgvxXhLROowTgVmyIVyGtRZoCMVH1vPi0EG5SePy43AkhjQVaUb6Ol6lfRRNpQqBFKw3UabxaMCM0Ow== + +sass-embedded-linux-x64@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.79.5.tgz#9da0591ff6113fdc9a6ecea8ef9d3ed039ac962c" + integrity sha512-EOk6pULzxM9b5B8uuuZbQXqfg2BQheAovQeYAw4ueHikaFoESOfaA8OG4kl0v1m5v5tKqAHOjy7xFhtpbEpqEw== + +sass-embedded-win32-arm64@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.79.5.tgz#919ff85cb65219eb61b9e1415850909e9e70a64f" + integrity sha512-KdkJOmJSe5lhR4Kxn522GbZo4jRUnQ+V4JQSaIbyxKndBpD81NGPYhDs0ikpJciqrwbmiBxVD5Qqeim6B1gdxA== + +sass-embedded-win32-ia32@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.79.5.tgz#eba284fb9df058a9d8bb452831cab0393bf7006e" + integrity sha512-1YX4TVw6j3eqxRyPK3t45V5WSyAzql6EgKIEtjPQ0+ByRyqLRuHXlotHPX6KOcc0rA3LMUHmdskN1o08sRIDhA== + +sass-embedded-win32-x64@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.79.5.tgz#64e5cbbb441fb39d67185a0bec64323306dba8a1" + integrity sha512-8Tj9hBpOd6e+j23uTDecFb1ezQhvjQ+jvgKdVg9VlvwKUWmEStnHKA0x1uIQTThIM3dLCsYe63b/wX43gP8tBA== + +sass-embedded@1.79.5: + version "1.79.5" + resolved "https://registry.yarnpkg.com/sass-embedded/-/sass-embedded-1.79.5.tgz#c8f21531aa8f9ac846032e5da633861c2379d9fa" + integrity sha512-QFdalnjGFkbNvb6/uQGmP4OIN+GQ5/R77eu0PsXduDB1YP5JW5DSWFVDAyK6l6C54P+3J3eXkjuPYC0mcwX+AA== + dependencies: + "@bufbuild/protobuf" "^2.0.0" + buffer-builder "^0.2.0" + colorjs.io "^0.5.0" + immutable "^4.0.0" + rxjs "^7.4.0" + supports-color "^8.1.1" + varint "^6.0.0" + optionalDependencies: + sass-embedded-android-arm "1.79.5" + sass-embedded-android-arm64 "1.79.5" + sass-embedded-android-ia32 "1.79.5" + sass-embedded-android-riscv64 "1.79.5" + sass-embedded-android-x64 "1.79.5" + sass-embedded-darwin-arm64 "1.79.5" + sass-embedded-darwin-x64 "1.79.5" + sass-embedded-linux-arm "1.79.5" + sass-embedded-linux-arm64 "1.79.5" + sass-embedded-linux-ia32 "1.79.5" + sass-embedded-linux-musl-arm "1.79.5" + sass-embedded-linux-musl-arm64 "1.79.5" + sass-embedded-linux-musl-ia32 "1.79.5" + sass-embedded-linux-musl-riscv64 "1.79.5" + sass-embedded-linux-musl-x64 "1.79.5" + sass-embedded-linux-riscv64 "1.79.5" + sass-embedded-linux-x64 "1.79.5" + sass-embedded-win32-arm64 "1.79.5" + sass-embedded-win32-ia32 "1.79.5" + sass-embedded-win32-x64 "1.79.5" + +sass-loader@14.2.1: + version "14.2.1" + resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-14.2.1.tgz#db9ad96b56dc1c1ea546101e76375d5b008fec70" + integrity sha512-G0VcnMYU18a4N7VoNDegg2OuMjYtxnqzQWARVWCIVSZwJeiL9kg8QMsuIZOplsJgTzZLF6jGxI3AClj8I9nRdQ== dependencies: neo-async "^2.6.2" -sass@1.77.5: - version "1.77.5" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.5.tgz#5f9009820297521356e962c0bed13ee36710edfe" - integrity sha512-oDfX1mukIlxacPdQqNb6mV2tVCrnE+P3nVYioy72V5tlk56CPNcO4TCuFcaCRKKfJ1M3lH95CleRS+dVKL2qMg== - dependencies: - chokidar ">=3.0.0 <4.0.0" - immutable "^4.0.0" - source-map-js ">=0.6.2 <2.0.0" - schema-utils@^3.0.0, schema-utils@^3.1.1: version "3.1.2" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.2.tgz#36c10abca6f7577aeae136c804b0c741edeadc99" @@ -4299,7 +4294,7 @@ sockjs@^0.3.24: uuid "^8.3.2" websocket-driver "^0.7.4" -"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2: +source-map-js@^1.0.1, source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== @@ -4422,7 +4417,7 @@ supports-color@^7.1.0: dependencies: has-flag "^4.0.0" -supports-color@^8.0.0: +supports-color@^8.0.0, supports-color@^8.1.1: version "8.1.1" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c" integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q== @@ -4540,6 +4535,11 @@ ts-loader@9.5.1: semver "^7.3.4" source-map "^0.7.4" +tslib@^2.1.0: + version "2.8.1" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f" + integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w== + type-is@~1.6.18: version "1.6.18" resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131" @@ -4548,10 +4548,10 @@ type-is@~1.6.18: media-typer "0.3.0" mime-types "~2.1.24" -typescript@5.4.5: - version "5.4.5" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611" - integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ== +typescript@5.6.3: + version "5.6.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b" + integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw== unicode-canonical-property-names-ecmascript@^2.0.0: version "2.0.0" @@ -4597,6 +4597,14 @@ update-browserslist-db@^1.0.13: escalade "^3.1.1" picocolors "^1.0.0" +update-browserslist-db@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5" + integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A== + dependencies: + escalade "^3.2.0" + picocolors "^1.1.0" + uri-js@^4.2.2: version "4.4.1" resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e" @@ -4624,6 +4632,11 @@ uuid@^8.3.0, uuid@^8.3.2: resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2" integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg== +varint@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/varint/-/varint-6.0.0.tgz#9881eb0ce8feaea6512439d19ddf84bf551661d0" + integrity sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg== + vary@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" @@ -4731,12 +4744,11 @@ webpack-sources@^3.2.3: resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde" integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w== -webpack@5.92.0: - version "5.92.0" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.92.0.tgz#cc114c71e6851d220b1feaae90159ed52c876bdf" - integrity sha512-Bsw2X39MYIgxouNATyVpCNVWBCuUwDgWtN78g6lSdPJRLaQ/PUVm/oXcaRAyY/sMFoKFQrsPeqvTizWtq7QPCA== +webpack@5.95.0: + version "5.95.0" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.95.0.tgz#8fd8c454fa60dad186fbe36c400a55848307b4c0" + integrity sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q== dependencies: - "@types/eslint-scope" "^3.7.3" "@types/estree" "^1.0.5" "@webassemblyjs/ast" "^1.12.1" "@webassemblyjs/wasm-edit" "^1.12.1" @@ -4745,7 +4757,7 @@ webpack@5.92.0: acorn-import-attributes "^1.9.5" browserslist "^4.21.10" chrome-trace-event "^1.0.2" - enhanced-resolve "^5.17.0" + enhanced-resolve "^5.17.1" es-module-lexer "^1.2.1" eslint-scope "5.1.1" events "^3.2.0" diff --git a/docs/DICTIONARIES.md b/docs/DICTIONARIES.md index 1fb7f5349a..4c3add34d2 100644 --- a/docs/DICTIONARIES.md +++ b/docs/DICTIONARIES.md @@ -11,6 +11,7 @@ This project uses `dictionaries` to unify props between different components. - [Alignment](#alignment) - [Color](#color) +- [Emphasis](#emphasis) - [Placement](#placement) - [Size](#size) - [Validation](#validation) @@ -33,6 +34,12 @@ This project uses `dictionaries` to unify props between different components. | Emotion Color | `success`, `informative`, `warning`, `danger` | EmotionColor | | Text Color | `primary`, `secondary`, `primary-inverted`, `secondary-inverted` | TextColor | +### Emphasis + +| Dictionary | Values | Code name | +| ---------- | --------------------------------------- | --------- | +| Emphasis | `regular`, `bold`, `semibold`, `italic` | Emphasis | + ### Placement | Dictionary | Values | Code name | diff --git a/docs/migrations/web-react/MIGRATION-v3.md b/docs/migrations/web-react/MIGRATION-v3.md new file mode 100644 index 0000000000..a81ebe7bb5 --- /dev/null +++ b/docs/migrations/web-react/MIGRATION-v3.md @@ -0,0 +1,177 @@ +# Migration Guide + +Introducing version 3 of the _spirit-web-react_ package. + +> Please follow these steps to safely upgrade to Spirit Design System v3 components. + +> ℹ️ Don't forget to check the [migration guide of the _spirit-web_ package][migration-guide-web] for general changes in +> available feature flags, CSS, and other changes that might affect your project. + +## Overview + +- [Component Changes](#component-changes) + - [Button and ButtonLink: `isSquare` Prop Renamed to `isSymmetrical`](#button-and-buttonlink-issquare-prop-renamed-to-issymmetrical) + - [Button and ButtonLink: Removed `inverted` Variant](#button-and-buttonlink-removed-inverted-variant) + - [Header: Removed `inverted` Variant](#header-removed-inverted-variant) + - [Heading: `elementType` Prop is Now Mandatory](#heading-elementtype-prop-is-now-mandatory) + - [Link: Removed `isUnderlined` Prop](#link-removed-isunderlined-prop) + - [Link: Removed `inverted` Variant](#link-removed-inverted-variant) + - [Link: The `hasVisitedStyleAllowed` Prop](#link-the-hasvisitedstyleallowed-prop) + - [Pill: Update Color Palette](#pill-update-color-palette) + - [ProductLogo: Removed `inverted` Variant](#productlogo-removed-inverted-variant) + - [Toast: Renamed Color Variant `inverted` to `neutral` in `ToastBar`](#toast-renamed-color-variant-inverted-to-neutral-in-toastbar) + +## Component Changes + +### Button and ButtonLink: `isSquare` Prop Renamed to `isSymmetrical` + +Button `isSquare` prop was renamed to `isSymmetrical`. + +#### Migration Guide + +🪄 Use codemods to automatically update your codebase: + +```sh +npx @lmc-eu/spirit-codemods -p -t v3/web-react/button-isSquare-prop-name +npx @lmc-eu/spirit-codemods -p -t v3/web-react/buttonLink-isSquare-prop-name +``` + +👉 See [Codemods documentation][readme-codemods] for more details. + +
    + 🔧 Manual Migration Steps + +Manually replace the props in your project. + +- `
    + +### Button and ButtonLink: Removed `inverted` Variant + +The `inverted` variant was removed from the `Button` and `ButtonLink` components. +Use themes instead to switch the color scheme. + +### Header: Removed `inverted` Variant + +The `inverted` variant was removed from the `Header` component. Instead the `primary` variant +was introduced. Use themes to switch the color scheme. + +### Heading: `elementType` Prop is Now Mandatory + +The `Heading` component previously had a default `elementType` of `"div"`. +We've removed this default to encourage developers to explicitly choose a more appropriate semantic HTML element. + +#### Migration Guide + +🪄 Use codemods to automatically update your codebase: + +```sh +npx @lmc-eu/spirit-codemods -p -t v3/web-react/heading-elementType-prop +``` + +👉 See [Codemods documentation][readme-codemods] for more details. + +⚠️ This codemod will add `elementType="div"` where it's missing. +**We highly recommend reviewing these changes and updating them to use the most appropriate semantic HTML elements.** + +
    + 🔧 Manual Migration Steps + +Manually replace the props in your project. + +- `` → `` +
    + +### Link: Removed `isUnderlined` Prop + +The `isUnderlined` property was removed, please use `underlined` instead. + +#### Migration Guide + +🪄 Use codemods to automatically update your codebase: + +```sh +npx @lmc-eu/spirit-codemods -p -t v3/web-react/link-underlined-prop +``` + +👉 See [Codemods documentation][readme-codemods] for more details. + +
    + 🔧 Manual Migration Steps + +Manually replace the props in your project. + +- `` → `` +
    + +### Link: Removed `inverted` Variant + +The `inverted` variant was removed from the `Link` component. +Use themes instead to switch the color scheme. + +### Link: The `hasVisitedStyleAllowed` Prop + +The `hasVisitedStyleAllowed` property was added. This property allows the link to have visited state style. There is also a change in the use of the visited state style for the `Heading` component, which had previously this state set by default. +Now a prop `hasVisitedStyleAllowed` has to be added to enable the visited state. + +#### Migration Guide + +🪄 Use codemods to automatically update your codebase: + +```sh +npx @lmc-eu/spirit-codemods -p -t v3/web-react/link-hasVisitedStyleAllowed-prop +``` + +👉 See [Codemods documentation][readme-codemods] for more details. + +
    + 🔧 Manual Migration Steps + +- `` → `` +
    + +### Pill: Update Color Palette + +The `color` prop of the `Pill` component no longer supports `primary`, `secondary`, `tertiary`, `inverted` +and `unselected` variants. Instead, the `neutral` variant was added. The current list of variants is: + +- `neutral` +- `danger` +- `informative` +- `success` +- `warning` + +### ProductLogo: Removed `inverted` Variant + +The `inverted` variant was removed from the `ProductLogo` component. + +### Toast: Renamed Color Variant `inverted` to `neutral` in `ToastBar` + +The `ToastBar` `color` prop variant `inverted` was renamed to `neutral`. + +#### Migration Guide + +🪄 Use codemods to automatically update your codebase: + +```sh +npx @lmc-eu/spirit-codemods -p -t v3/web-react/toastbar-inverted-neutral +``` + +👉 See [Codemods documentation][readme-codemods] for more details. + +
    + 🔧 Manual Migration Steps + +Manually replace the `ToastBar` prop color in your project. +Instead of using `inverted`, use `neutral`. + +- `` → `` +
    + +--- + +Please refer back to these instructions or reach out to our team if you encounter any issues during migration. + +[migration-guide-web]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/migrations/web/MIGRATION-v3.md +[readme-codemods]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/codemods/README.md diff --git a/docs/migrations/web-twig/MIGRATION-v4.md b/docs/migrations/web-twig/MIGRATION-v4.md new file mode 100644 index 0000000000..d0cced3146 --- /dev/null +++ b/docs/migrations/web-twig/MIGRATION-v4.md @@ -0,0 +1,128 @@ +# Migration Guide + +Introducing version 4 of the _spirit-web-twig_ package. + +> Please follow these steps to safely upgrade to Spirit Design System v4 components. + +> ℹ️ Don't forget to check the [migration guide of the _spirit-web_ package][migration-guide-web] for general changes in +> available feature flags, CSS, JavaScript plugins, and other changes that might affect your project. + +## Overview + +- [Component Changes](#component-changes) + - [Button and ButtonLink: `isSquare` Prop Renamed to `isSymmetrical`](#button-and-buttonlink-issquare-prop-renamed-to-issymmetrical) + - [Button and ButtonLink: Removed `inverted` Variant](#button-and-buttonlink-removed-inverted-variant) + - [Header: Removed `inverted` Variant](#header-removed-inverted-variant) + - [Heading: `elementType` Prop is Now Mandatory](#heading-elementtype-prop-is-now-mandatory) + - [Link: Removed `isUnderlined` Prop](#link-removed-isunderlined-prop) + - [Link: Removed `inverted` Variant](#link-removed-inverted-variant) + - [Link: The`hasVisitedStyleAllowed` Props](#link-the-hasvisitedstyleallowed-prop) + - [Pill: Update Color Palette](#pill-update-color-palette) + - [ProductLogo: Removed `inverted` Variant](#productlogo-removed-inverted-variant) + - [Toast: Link `underlined` Prop](#toast-link-underlined-prop) + - [Toast: Renamed Color Variant `inverted` to `neutral` in `ToastBar`](#toast-renamed-color-variant-inverted-to-neutral-in-toastbar) + +## Component Changes + +### Button and ButtonLink: `isSquare` Prop Renamed to `isSymmetrical` + +Button `isSquare` prop was renamed to `isSymmetrical`. + +#### Migration Guide + +- ` + + + + + + +); diff --git a/packages/codemods/src/transforms/v3/web-react/__testfixtures__/button-isSquare-prop-name.output.tsx b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/button-isSquare-prop-name.output.tsx new file mode 100644 index 0000000000..17bed9b9b9 --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/button-isSquare-prop-name.output.tsx @@ -0,0 +1,21 @@ +// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures. +import { Button } from '@lmc-eu/spirit-web-react'; + +export const MyComponent = () => ( + <> + + + + + + + +); diff --git a/packages/codemods/src/transforms/v3/web-react/__testfixtures__/buttonLink-isSquare-prop-name.input.tsx b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/buttonLink-isSquare-prop-name.input.tsx new file mode 100644 index 0000000000..faa8f68394 --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/buttonLink-isSquare-prop-name.input.tsx @@ -0,0 +1,23 @@ +// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures. +import { ButtonLink } from '@lmc-eu/spirit-web-react'; + +export const MyComponent = () => ( + <> + + Click me + + + Click me + + + Click me + + Click me + + Click me + + + Click me + + +); diff --git a/packages/codemods/src/transforms/v3/web-react/__testfixtures__/buttonLink-isSquare-prop-name.output.tsx b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/buttonLink-isSquare-prop-name.output.tsx new file mode 100644 index 0000000000..2ab1b2d51d --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/buttonLink-isSquare-prop-name.output.tsx @@ -0,0 +1,23 @@ +// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures. +import { ButtonLink } from '@lmc-eu/spirit-web-react'; + +export const MyComponent = () => ( + <> + + Click me + + + Click me + + + Click me + + Click me + + Click me + + + Click me + + +); diff --git a/packages/codemods/src/transforms/v3/web-react/__testfixtures__/heading-elementType-prop.input.tsx b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/heading-elementType-prop.input.tsx new file mode 100644 index 0000000000..77d8fee5c7 --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/heading-elementType-prop.input.tsx @@ -0,0 +1,20 @@ +// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures. +import { Heading } from '@lmc-eu/spirit-web-react'; + +export const MyComponent = () => ( + <> + Heading + Heading + Heading + + Heading + + + Heading + + Heading + + Heading + + +); diff --git a/packages/codemods/src/transforms/v3/web-react/__testfixtures__/heading-elementType-prop.output.tsx b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/heading-elementType-prop.output.tsx new file mode 100644 index 0000000000..9b03b15a4c --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/heading-elementType-prop.output.tsx @@ -0,0 +1,20 @@ +// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures. +import { Heading } from '@lmc-eu/spirit-web-react'; + +export const MyComponent = () => ( + <> + Heading + Heading + Heading + + Heading + + + Heading + + Heading + + Heading + + +); diff --git a/packages/codemods/src/transforms/v3/web-react/__testfixtures__/link-hasVisitedStyleAllowed-prop.input.tsx b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/link-hasVisitedStyleAllowed-prop.input.tsx new file mode 100644 index 0000000000..f1d8afeb52 --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/link-hasVisitedStyleAllowed-prop.input.tsx @@ -0,0 +1,30 @@ +// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures. +import { Heading, Link, Text } from '@lmc-eu/spirit-web-react'; + +export const MyComponent = () => ( + <> + + Test Link + + + Test Link 1 + Test Link 2 + + + Test Link 1 + Test Link 2 + + + Test Link + + +
    + Test Link 1 + Test Link 2 +
    +     + + Test Link + + +); diff --git a/packages/codemods/src/transforms/v3/web-react/__testfixtures__/link-hasVisitedStyleAllowed-prop.output.tsx b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/link-hasVisitedStyleAllowed-prop.output.tsx new file mode 100644 index 0000000000..dc359e1939 --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/link-hasVisitedStyleAllowed-prop.output.tsx @@ -0,0 +1,30 @@ +// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures. +import { Heading, Link, Text } from '@lmc-eu/spirit-web-react'; + +export const MyComponent = () => ( + <> + + Test Link + + + Test Link 1 + Test Link 2 + + + Test Link 1 + Test Link 2 + + + Test Link + + +
    + Test Link 1 + Test Link 2 +
    +     + + Test Link + + +); diff --git a/packages/codemods/src/transforms/v3/web-react/__testfixtures__/toastbar-inverted-neutral.input.tsx b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/toastbar-inverted-neutral.input.tsx new file mode 100644 index 0000000000..5e4249ea01 --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/toastbar-inverted-neutral.input.tsx @@ -0,0 +1,10 @@ +// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures. +import { ToastBar } from '@lmc-eu/spirit-web-react'; + +export const MyComponent = () => ( + <> + + + + +); diff --git a/packages/codemods/src/transforms/v3/web-react/__testfixtures__/toastbar-inverted-neutral.output.tsx b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/toastbar-inverted-neutral.output.tsx new file mode 100644 index 0000000000..fefa506eb0 --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/toastbar-inverted-neutral.output.tsx @@ -0,0 +1,10 @@ +// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures. +import { ToastBar } from '@lmc-eu/spirit-web-react'; + +export const MyComponent = () => ( + <> + + + + +); diff --git a/packages/codemods/src/transforms/v3/web-react/__tests__/button-isSquare-prop-name.test.ts b/packages/codemods/src/transforms/v3/web-react/__tests__/button-isSquare-prop-name.test.ts new file mode 100644 index 0000000000..470a9fd194 --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/__tests__/button-isSquare-prop-name.test.ts @@ -0,0 +1,3 @@ +import { testTransform } from '../../../../../tests/testUtils'; + +testTransform(__dirname, 'button-isSquare-prop-name'); diff --git a/packages/codemods/src/transforms/v3/web-react/__tests__/buttonLink-isSquare-prop-name.test.ts b/packages/codemods/src/transforms/v3/web-react/__tests__/buttonLink-isSquare-prop-name.test.ts new file mode 100644 index 0000000000..58ee32767f --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/__tests__/buttonLink-isSquare-prop-name.test.ts @@ -0,0 +1,3 @@ +import { testTransform } from '../../../../../tests/testUtils'; + +testTransform(__dirname, 'buttonLink-isSquare-prop-name'); diff --git a/packages/codemods/src/transforms/v3/web-react/__tests__/heading-elementType-prop.test.ts b/packages/codemods/src/transforms/v3/web-react/__tests__/heading-elementType-prop.test.ts new file mode 100644 index 0000000000..6ed0899188 --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/__tests__/heading-elementType-prop.test.ts @@ -0,0 +1,3 @@ +import { testTransform } from '../../../../../tests/testUtils'; + +testTransform(__dirname, 'heading-elementType-prop'); diff --git a/packages/codemods/src/transforms/v3/web-react/__tests__/link-hasVisitedStyleAllowed-prop.test.ts b/packages/codemods/src/transforms/v3/web-react/__tests__/link-hasVisitedStyleAllowed-prop.test.ts new file mode 100644 index 0000000000..236dbb2358 --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/__tests__/link-hasVisitedStyleAllowed-prop.test.ts @@ -0,0 +1,3 @@ +import { testTransform } from '../../../../../tests/testUtils'; + +testTransform(__dirname, 'link-hasVisitedStyleAllowed-prop'); diff --git a/packages/codemods/src/transforms/v3/web-react/__tests__/toastbar-inverted-neutral.test.ts b/packages/codemods/src/transforms/v3/web-react/__tests__/toastbar-inverted-neutral.test.ts new file mode 100644 index 0000000000..f9efbd782e --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/__tests__/toastbar-inverted-neutral.test.ts @@ -0,0 +1,3 @@ +import { testTransform } from '../../../../../tests/testUtils'; + +testTransform(__dirname, 'toastbar-inverted-neutral'); diff --git a/packages/codemods/src/transforms/v3/web-react/button-isSquare-prop-name.ts b/packages/codemods/src/transforms/v3/web-react/button-isSquare-prop-name.ts new file mode 100644 index 0000000000..8cc5de70f0 --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/button-isSquare-prop-name.ts @@ -0,0 +1,50 @@ +import { API, FileInfo } from 'jscodeshift'; + +const transform = (fileInfo: FileInfo, api: API) => { + const j = api.jscodeshift; + const root = j(fileInfo.source); + + // Find import statements for the specific module and Button specifier + const importStatements = root.find(j.ImportDeclaration, { + source: { + value: (value: string) => /^@lmc-eu\/spirit-web-react(\/.*)?$/.test(value), + }, + }); + + // Check if the module is imported + if (importStatements.length > 0) { + const componentSpecifier = importStatements.find(j.ImportSpecifier, { + imported: { + type: 'Identifier', + name: 'Button', + }, + }); + + // Check if Button specifier is present + if (componentSpecifier.length > 0) { + // Find Button components in the module + const components = root.find(j.JSXOpeningElement, { + name: { + type: 'JSXIdentifier', + name: 'Button', + }, + }); + + // Rename 'isSquare' attribute to 'isSymmetrical' + components + .find(j.JSXAttribute, { + name: { + type: 'JSXIdentifier', + name: 'isSquare', + }, + }) + .forEach((attributePath) => { + attributePath.node.name.name = 'isSymmetrical'; + }); + } + } + + return root.toSource(); +}; + +export default transform; diff --git a/packages/codemods/src/transforms/v3/web-react/buttonLink-isSquare-prop-name.ts b/packages/codemods/src/transforms/v3/web-react/buttonLink-isSquare-prop-name.ts new file mode 100644 index 0000000000..0f5da0116c --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/buttonLink-isSquare-prop-name.ts @@ -0,0 +1,50 @@ +import { API, FileInfo } from 'jscodeshift'; + +const transform = (fileInfo: FileInfo, api: API) => { + const j = api.jscodeshift; + const root = j(fileInfo.source); + + // Find import statements for the specific module and ButtonLink specifier + const importStatements = root.find(j.ImportDeclaration, { + source: { + value: (value: string) => /^@lmc-eu\/spirit-web-react(\/.*)?$/.test(value), + }, + }); + + // Check if the module is imported + if (importStatements.length > 0) { + const componentSpecifier = importStatements.find(j.ImportSpecifier, { + imported: { + type: 'Identifier', + name: 'ButtonLink', + }, + }); + + // Check if ButtonLink specifier is present + if (componentSpecifier.length > 0) { + // Find ButtonLink components in the module + const components = root.find(j.JSXOpeningElement, { + name: { + type: 'JSXIdentifier', + name: 'ButtonLink', + }, + }); + + // Rename 'isSquare' attribute to 'isSymmetrical' + components + .find(j.JSXAttribute, { + name: { + type: 'JSXIdentifier', + name: 'isSquare', + }, + }) + .forEach((attributePath) => { + attributePath.node.name.name = 'isSymmetrical'; + }); + } + } + + return root.toSource(); +}; + +export default transform; diff --git a/packages/codemods/src/transforms/v3/web-react/heading-elementType-prop.ts b/packages/codemods/src/transforms/v3/web-react/heading-elementType-prop.ts new file mode 100644 index 0000000000..1f6d8a65f6 --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/heading-elementType-prop.ts @@ -0,0 +1,49 @@ +import { API, FileInfo } from 'jscodeshift'; + +const transform = (fileInfo: FileInfo, api: API) => { + const j = api.jscodeshift; + const root = j(fileInfo.source); + + // Find import statements for the specific module and Heading specifier + const importStatements = root.find(j.ImportDeclaration, { + source: { + value: (value: string) => /^@lmc-eu\/spirit-web-react(\/.*)?$/.test(value), + }, + }); + + // Check if the module is imported + if (importStatements.length > 0) { + const componentSpecifier = importStatements.find(j.ImportSpecifier, { + imported: { + type: 'Identifier', + name: 'Heading', + }, + }); + + // Check if Heading specifier is present + if (componentSpecifier.length > 0) { + // Find Heading components in the module + const components = root.find(j.JSXOpeningElement, { + name: { + type: 'JSXIdentifier', + name: 'Heading', + }, + }); + + // Add 'elementType' prop if it's not already present + components.forEach((component) => { + const elementTypeProp = component.node.attributes?.find( + (attribute) => attribute.type === 'JSXAttribute' && attribute.name.name === 'elementType', + ); + + if (!elementTypeProp) { + component.node.attributes?.push(j.jsxAttribute(j.jsxIdentifier('elementType'), j.stringLiteral('div'))); + } + }); + } + } + + return root.toSource(); +}; + +export default transform; diff --git a/packages/codemods/src/transforms/v3/web-react/link-hasVisitedStyleAllowed-prop.ts b/packages/codemods/src/transforms/v3/web-react/link-hasVisitedStyleAllowed-prop.ts new file mode 100644 index 0000000000..afe4bb059c --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/link-hasVisitedStyleAllowed-prop.ts @@ -0,0 +1,48 @@ +import { API, FileInfo } from 'jscodeshift'; + +const transform = (fileInfo: FileInfo, api: API) => { + const j = api.jscodeshift; + const root = j(fileInfo.source); + + const importStatements = root.find(j.ImportDeclaration, { + source: { + value: (value: string) => /^@lmc-eu\/spirit-web-react(\/.*)?$/.test(value), + }, + }); + + if (importStatements.length > 0) { + const headingSpecifier = importStatements.find(j.ImportSpecifier, { + imported: { type: 'Identifier', name: 'Heading' }, + }); + + if (headingSpecifier.length > 0) { + root + .find(j.JSXElement, { + openingElement: { + name: { type: 'JSXIdentifier', name: 'Heading' }, + }, + }) + .forEach((headingPath) => { + j(headingPath) + .find(j.JSXOpeningElement, { + name: { type: 'JSXIdentifier', name: 'Link' }, + }) + .forEach((linkPath) => { + if (linkPath.node && linkPath.node.attributes) { + const hasVisitedStyleAllowedAttribute = linkPath.node.attributes.some( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'hasVisitedStyleAllowed', + ); + + if (!hasVisitedStyleAllowedAttribute) { + linkPath.node.attributes.push(j.jsxAttribute(j.jsxIdentifier('hasVisitedStyleAllowed'), null)); + } + } + }); + }); + } + } + + return root.toSource(); +}; + +export default transform; diff --git a/packages/codemods/src/transforms/v3/web-react/toastbar-inverted-neutral.ts b/packages/codemods/src/transforms/v3/web-react/toastbar-inverted-neutral.ts new file mode 100644 index 0000000000..24a6e23c7e --- /dev/null +++ b/packages/codemods/src/transforms/v3/web-react/toastbar-inverted-neutral.ts @@ -0,0 +1,52 @@ +import { API, FileInfo } from 'jscodeshift'; + +const transform = (fileInfo: FileInfo, api: API) => { + const j = api.jscodeshift; + const root = j(fileInfo.source); + + // Find import statements for the specific module and ToastBar specifier + const importStatements = root.find(j.ImportDeclaration, { + source: { + value: (value: string) => /^@lmc-eu\/spirit-web-react(\/.*)?$/.test(value), + }, + }); + + // Check if the module is imported + if (importStatements.length > 0) { + const componentSpecifier = importStatements.find(j.ImportSpecifier, { + imported: { + type: 'Identifier', + name: 'ToastBar', + }, + }); + + // Check if ToastBar specifier is present + if (componentSpecifier.length > 0) { + // Find ToastBar components in the module + const components = root.find(j.JSXOpeningElement, { + name: { + type: 'JSXIdentifier', + name: 'ToastBar', + }, + }); + + // If color set to `inverted`, change it to `neutral` + components + .find(j.JSXAttribute, { + name: { + type: 'JSXIdentifier', + name: 'color', + }, + }) + .forEach((attributePath) => { + if (attributePath.node.value?.type === 'StringLiteral' && attributePath.node.value.value === 'inverted') { + attributePath.node.value.value = 'neutral'; + } + }); + } + } + + return root.toSource(); +}; + +export default transform; diff --git a/packages/demo/CHANGELOG.md b/packages/demo/CHANGELOG.md index 143953de70..6fbc797a81 100644 --- a/packages/demo/CHANGELOG.md +++ b/packages/demo/CHANGELOG.md @@ -3,6 +3,24 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + + +# [1.0.0-alpha.0](https://github.com/lmc-eu/spirit-design-system/compare/@lmc-eu/spirit-demo@0.1.3...@lmc-eu/spirit-demo@1.0.0-alpha.0) (2024-10-17) + +### BREAKING CHANGES + +- **web:** Switch Link and typography helpers to v3 design tokens [#DS-1451](https://github.com/lmc-eu/spirit-design-system/issues/DS-1451) ([24c2a4b](https://github.com/lmc-eu/spirit-design-system/commit/24c2a4b)) + +### Documentation + +- **form-validations,web,web-react:** Redesign the demo app [#DS-1479](https://github.com/lmc-eu/spirit-design-system/issues/DS-1479) ([2a2e309](https://github.com/lmc-eu/spirit-design-system/commit/2a2e309)) + +### Features + +- **web:** Switch Demo styles to v3 design tokens structure [#DS-1430](https://github.com/lmc-eu/spirit-design-system/issues/DS-1430) ([8f27889](https://github.com/lmc-eu/spirit-design-system/commit/8f27889)) + +**Note:** Version bump only for package @lmc-eu/spirit-demo + ## [0.1.3](https://github.com/lmc-eu/spirit-design-system/compare/@lmc-eu/spirit-demo@0.1.2...@lmc-eu/spirit-demo@0.1.3) (2024-07-24) diff --git a/packages/demo/package.json b/packages/demo/package.json index e4df59b645..b809598232 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -1,6 +1,6 @@ { "name": "@lmc-eu/spirit-demo", - "version": "0.1.3", + "version": "1.0.0-alpha.0", "description": "Showcase tooling for demo of Spirit Design System", "license": "MIT", "publishConfig": { diff --git a/packages/demo/scss/index.scss b/packages/demo/scss/index.scss index f60c4170a5..9d0542be5c 100644 --- a/packages/demo/scss/index.scss +++ b/packages/demo/scss/index.scss @@ -1,36 +1,67 @@ -.docs-TileLink { - display: block; - padding: 1rem; - border: 2px solid #e9e9e9; - border-radius: 8px; - font-size: 1.125rem; /* Based on the `body-large-text-regular` style. */ - font-weight: 600; - line-height: 1.55; +// 1. Expand the page to fill the viewport height to be ready for various themes. +// 2. Make the footer sticky. + +html { + height: 100%; // 1. } -.docs-TileLink:hover, -.docs-TileLink:focus { - border-color: #dbdbdb; +body { + min-height: 100%; // 1. + display: grid; // 2. + grid-template-rows: auto auto 1fr auto; } -.docs-TileLink:active { - border-color: #d4d4d4; +.docs-Card { + display: block; + padding: var(--spirit-space-700); + border: var(--spirit-border-width-100) solid var(--spirit-color-border-interactive-state-default); + border-radius: var(--spirit-radius-300); + background-color: var(--spirit-color-background-primary); + font-size: var(--spirit-typography-body-large-semibold-mobile-font-size); + font-weight: var(--spirit-typography-body-large-semibold-mobile-font-weight); + line-height: var(--spirit-typography-body-large-semibold-mobile-line-height); + transition: box-shadow 125ms; + + @media (hover: hover) { + &:hover { + border-color: var(--spirit-color-border-interactive-state-hover); + text-decoration: none; + box-shadow: var(--spirit-shadow-100); + } + } + + &:active { + border-color: var(--spirit-color-border-interactive-state-active); + text-decoration: none; + } + + @media (min-width: 768px) { + padding: var(--spirit-space-900); + } } .docs-Heading { display: flex; flex-wrap: wrap; - gap: 0.5rem 0.75rem; + gap: var(--spirit-space-500) var(--spirit-space-600); align-items: baseline; - margin-bottom: 1.5rem; - font-size: 1.125rem; /* Based on the `heading-small-text` style. */ - font-weight: 700; - line-height: 1.2; + margin-bottom: var(--spirit-space-900); + font-size: var(--spirit-typography-heading-small-bold-mobile-font-size); + font-weight: var(--spirit-typography-heading-small-bold-mobile-font-weight); + line-height: var(--spirit-typography-heading-small-bold-mobile-line-height); + + @media (min-width: 768px) { + font-size: var(--spirit-typography-heading-small-bold-tablet-font-size); + } + + @media (min-width: 1280px) { + font-size: var(--spirit-typography-heading-small-bold-desktop-font-size); + } } .docs-Stack { display: grid; - row-gap: 1rem; + row-gap: var(--spirit-space-700); } .docs-Stack--start { @@ -42,17 +73,17 @@ } .docs-Box { - min-height: 2rem; - padding: 1rem; + min-height: var(--spirit-space-1000); + padding: var(--spirit-space-700); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - color: #fff; - background: #0b1c21; + color: var(--spirit-color-neutral-content-subtle); + background: var(--spirit-color-neutral-background-basic); } .docs-Box--small { - font-size: 0.75rem; + font-size: var(--spirit-typography-body-small-regular-mobile-font-size); text-align: center; white-space: normal; } @@ -63,36 +94,16 @@ justify-content: center; align-items: center; width: 100%; - padding: 3rem 1.5rem; + padding: var(--spirit-space-1200) var(--spirit-space-900); text-align: center; - gap: 2rem; - border: 1px dashed #3eac98; - background: #fff; + gap: var(--spirit-space-1000); + border: var(--spirit-border-width-200) dashed var(--spirit-color-border-basic); + border-radius: var(--spirit-radius-200); + background: var(--spirit-color-background-primary); } .docs-Placeholder__text { display: flex; flex-direction: column; - color: #3eac98; - gap: 0.5rem; -} - -@media (min-width: 768px) { - .docs-TileLink { - padding: 1.5rem; - } - - .docs-Heading { - font-size: 1.5rem; - } - - .docs-Box--small { - font-size: 0.875rem; - } -} - -@media (min-width: 1280px) { - .docs-Box--small { - font-size: 1rem; - } + gap: var(--spirit-space-500); } diff --git a/packages/design-tokens/.eslintrc.cjs b/packages/design-tokens/.eslintrc.cjs index 983c0137d9..29a5ad7346 100644 --- a/packages/design-tokens/.eslintrc.cjs +++ b/packages/design-tokens/.eslintrc.cjs @@ -8,5 +8,6 @@ module.exports = { rules: { 'prettier/prettier': 'off', + 'operator-linebreak': 'off', }, }; diff --git a/packages/design-tokens/.gitignore b/packages/design-tokens/.gitignore index 5ef5e94def..671facd69d 100644 --- a/packages/design-tokens/.gitignore +++ b/packages/design-tokens/.gitignore @@ -1,5 +1,5 @@ -esm -scss -cjs -umd -types +/esm +/scss +/cjs +/umd +/types diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index 4f0b618748..16d949c850 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -3,6 +3,44 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + + +# [3.0.0-alpha.2](https://github.com/lmc-eu/spirit-design-system/compare/@lmc-eu/spirit-design-tokens@3.0.0-alpha.2...@lmc-eu/spirit-design-tokens@3.0.0-alpha.3) (2024-11-25) + +### Chores + +- **design-tokens:** Force Publish + +**Note:** Version bump only for package @lmc-eu/spirit-design-tokens + + + +# [3.0.0-alpha.2](https://github.com/lmc-eu/spirit-design-system/compare/@lmc-eu/spirit-design-tokens@3.0.0-alpha.1...@lmc-eu/spirit-design-tokens@3.0.0-alpha.2) (2024-11-13) + +### Chores + +- **design-tokens:** Force Publish + +**Note:** Version bump only for package @lmc-eu/spirit-design-tokens + + + +# [3.0.0-alpha.1](https://github.com/lmc-eu/spirit-design-system/compare/@lmc-eu/spirit-design-tokens@3.0.0-alpha.0...@lmc-eu/spirit-design-tokens@3.0.0-alpha.1) (2024-11-06) + +### Chores + +- **design-tokens:** Force Publish + +**Note:** Version bump only for package @lmc-eu/spirit-design-tokens + + + +# [3.0.0-alpha.0](https://github.com/lmc-eu/spirit-design-system/compare/@lmc-eu/spirit-design-tokens@2.1.2...@lmc-eu/spirit-design-tokens@3.0.0-alpha.0) (2024-10-17) + +### BREAKING CHANGES + +- **design-tokens:** Introduce new design tokens structure [#DS-1430](https://github.com/lmc-eu/spirit-design-system/issues/DS-1430) ([1cbfaf0](https://github.com/lmc-eu/spirit-design-system/commit/1cbfaf0)) + ## [2.1.3](https://github.com/lmc-eu/spirit-design-system/compare/@lmc-eu/spirit-design-tokens@2.1.2...@lmc-eu/spirit-design-tokens@2.1.3) (2024-11-22) diff --git a/packages/design-tokens/README.md b/packages/design-tokens/README.md index e06fa45335..9c63d2f51e 100644 --- a/packages/design-tokens/README.md +++ b/packages/design-tokens/README.md @@ -2,142 +2,126 @@ > Design tokens for Spirit Design System. -⚠️ Spirit design tokens are managed with and generated by [Supernova]. DO NOT EDIT MANUALLY! +⚠️ Spirit design tokens are managed with and generated by [Supernova][supernova]. DO NOT EDIT MANUALLY! ## Table of Contents 1. [Available Design Tokens](#available-design-tokens) -2. [Install](#install) -3. [Basic Usage](#basic-usage) -4. [`@tokens` API](#tokens-api) -5. [FAQ](#faq) + 1. [Global Tokens](#global-tokens) + 2. [Theme Tokens](#theme-tokens) +2. [Themes](#themes) +3. [Install](#install) +4. [Basic Usage](#basic-usage) + 1. [In Sass](#in-sass) + 2. [In JavaScript](#in-javascript) +5. [Rebranding Spirit](#rebranding-spirit) +6. [FAQ](#faq) +7. [License](#license) ## Available Design Tokens -| Category | Supernova | Figma | Sass | -| ------------- | --------- | ----- | -------------------- | -| 🖼 Borders | ✅ | ❌ | [`_borders.sass`] | -| 🎨 Colors | ✅ | ✅ | [`_colors.sass`] | -| 🖌️ Gradients | ✅ | ✅ | [`_gradients.sass`] | -| 📏️ Measures | ✅ | ❌ | [`_measures.sass`] | -| ⚙️ Other | ✅ | ❌ | [`_other.sass`] | -| 🎱 Radii | ✅ | ❌ | [`_radii.sass`] | -| ⛱ Shadows | ✅ | ✅ | [`_shadows.sass`] | -| 🔠 Typography | ✅ | ✅ | [`_typography.sass`] | +Technically, design tokens are split into two categories: Global tokens and Theme tokens. +Global tokens are shared independently on themes, while the theme tokens are specific to a particular theme. -## Install +They are all managed in our [Figma][spirit-figma] and exported to our [Supernova workspace][spirit-supernova]. -🙋🏻‍♂️ **Hold on! Do you already use [`spirit-web`]?** Then you don't need to -install this package because `spirit-design-tokens` is installed automatically -as a dependency of [`spirit-web`]. +⚠️ All content in `src` is generated by Supernova and should not be edited manually. -If you want to use just `spirit-design-tokens` alone in your project, run: +The `scss` directory contains `@tokens.scss` linking all available tokens (including both global and theme tokens). -```shell -yarn add @lmc-eu/spirit-design-tokens -``` +### Global Tokens -or +The category consists of these groups: -```shell -npm install --save @lmc-eu/spirit-design-tokens -``` +- 🖼 Borders +- 🖌️ Gradients +- ⚙️ Other +- 🎱 Radii +- 🏖️ Shadows +- 📏️ Spacing +- 🔡 Typography -## Basic Usage +These tokens are shared globally and independently on themes. -The recommended approach in Sass is to import all Spirit design tokens at once -via the [`@tokens` API](#tokens-api): +### Theme Tokens -```scss -@use 'sass:map'; -@use 'node_modules/@lmc-eu/spirit-design-tokens/scss/@tokens' as tokens; - -.MyComponentThatMightGoToSpiritInFuture { - font-family: map.get(tokens.$body-medium-text-regular, font-family); - color: tokens.$text-primary-default; -} -``` +Currently, only tokens in the 🎨 Colors group are themeable. -This makes it easier to [migrate your code to Spirit][migrate-to-spirit] in the -future. +## Themes -
    -Optional: import by categories +You can find the list of the themes in the `@themes` file and in the `scss/themes` directory. +Each theme has its own directory with the same set of design tokens, but with different values. -You can also import individual design token files by categories, e.g.: +As of now, we support two light-mode color themes: -```scss -@use 'sass:map'; -@use 'node_modules/@lmc-eu/spirit-design-tokens/scss/colors'; -@use 'node_modules/@lmc-eu/spirit-design-tokens/scss/typography'; +- Light Default (listed first in `@themes`, i.e. the default theme) +- Light on Brand -.MyComponent { - font-family: map.get(typography.$body-medium-text-regular, font-family); - color: colors.$text-primary-default; -} -``` +Both themes can be used anywhere on the same page and combined as needed. -This approach is a bit more descriptive and thus provides slightly better -developer experience. You may find it more convenient in situations you -**don't** suppose your code will make its way to Spirit as this approach is -incompatible with `@tokens` API that makes rebranding possible. +### Using Themes -
    +The `scss` directory contains `@themes.scss` linking all available themes as Sass variables. +From the technical point of view, the theming is based on CSS variables. **However, this package +does not provide the CSS variables directly at the moment.** Instead, they are generated from +the `@themes` file in the [`spirit-web`][web-docs] package. -### In JavaScript +## Install -Additionally the design tokens are also provided as a JavaScript object. +🙋🏻‍♂️ **Hold on! Do you already use [`spirit-web`][web-docs]?** Then you don't need to +install this package because `spirit-design-tokens` is installed automatically +as a dependency of `spirit-web`. -```js -import * as SpiritDesignTokens from '@lmc-eu/spirit-design-tokens'; +If you want to use just `spirit-design-tokens` alone in your project, run: -const desktopBreakpoint = SpiritDesignTokens.breakpoints.desktop; +```shell +yarn add @lmc-eu/spirit-design-tokens ``` -The structure is the same as in the SASS. - -## `@tokens` API - -`@tokens` API enables quick and easy rebranding of Spirit Sass styles by -[replacing the path](#b-via-load-path) to design tokens. You need to be familiar -with it if you are building your custom design system based on Spirit or you are -going to contribute to Spirit. - -### Accessing `@tokens` +or -#### a) via full path +```shell +npm install --save @lmc-eu/spirit-design-tokens +``` -Access Spirit design tokens via the `@tokens` API without having to configure -load path, just like shown in the [basic example](#basic-usage). This is a good -choice for starting off quickly. However, it **doesn't enable rebranding**. +## Basic Usage -#### b) via load path +### In Sass -To get ready for rebranding, access Spirit design tokens via the `@tokens` API -while keeping them open to be replaced by another set of design tokens: +Sass (with the SCSS syntax) is the primary language for styling Spirit components. -```scss -@use 'sass:map'; -@use '@tokens' as tokens; +The best way to use the design tokens is to load their path in Sass: -.MyComponentThatIsReadyForSpirit { - font-family: map.get(tokens.$body-medium-text-regular, font-family); - color: tokens.$text-primary-default; -} +```shell +sass --load-path=node_modules/@lmc-eu/spirit-design-tokens/scss my-styles.scss ``` -##### Configuring Load Path +Or integrate them into your build system: -Because the `@tokens` file doesn't exist locally, tell Sass where it should -look for unreachable files. This is also a required step if you are importing -Spirit components from their Sass source. +
    +Vite example: -```shell -sass --load-path=node_modules/@lmc-eu/spirit-design-tokens/scss my-styles.scss +```javascript +// vite.config.js + +// … +import { defineConfig } from 'vite'; + +export default defineConfig({ + css: { + preprocessorOptions: { + scss: { + includePaths: [path.resolve(__dirname, 'node_modules/@lmc-eu/spirit-design-tokens/scss')], + }, + }, + }, +}); +// … ``` +
    -Or with Webpack and sass-loader: +Webpack example with sass-loader: ```javascript // webpack.config.js @@ -212,26 +196,48 @@ module: {
    -### Exposing Your Custom Design Tokens +The [`spirit-web`][web-docs] package or your own components can simply reach token values like this: + +```scss +@use 'sass:map'; +@use '@tokens' as tokens; + +.MyComponentThatMightGoToSpiritInFuture { + margin-bottom: tokens.$space-300; + font-family: map.get(tokens.$body-medium-regular, mobile, font-family); + color: tokens.$text-primary; +} +``` -In Spirit, the [`@tokens.scss`] file simply @forwards all design tokens exposed -by [`index.scss`] which in turn @forwards all design token categories. To make -your design tokens compatible with Spirit, just create a `@tokens.scss` file and -@forward all your design tokens through it, e.g.: +For your components you can also load the token files directly: ```scss -// @tokens.scss - -@forward 'borders'; -@forward 'colors'; -@forward 'gradients'; -@forward 'measures'; -@forward 'other'; -@forward 'radii'; -@forward 'shadows'; -@forward 'typography'; +@use 'node_modules/@lmc-eu/spirit-design-tokens/scss/@tokens' as tokens; +``` + +### In JavaScript + +Additionally, the design tokens are also provided as a JavaScript object. + +```js +import * as SpiritDesignTokens from '@lmc-eu/spirit-design-tokens'; + +const desktopBreakpoint = SpiritDesignTokens.breakpoints.desktop; ``` +The structure is the same as in Sass. + +## Rebranding Spirit + +The system is designed to be easily rebranded. To do so, you need to provide +your own design tokens and use `@tokens` and `@themes` files. Then forward your tokens +to these files and set the [correct load path](#basic-usage) for your project. + +Your tokens should contain the same structure as the Spirit tokens. The simplest +way to do this is to have the same structure in your Figma file and export it +using Supernova. If that's not possible, you can copy our tokens and adjust their values +to your needs. You can also add new tokens required by your design system. + ## FAQ
    @@ -309,7 +315,19 @@ Simply put, if you are going to build a design system based on Spirit: 4. use your design tokens in your code (and compile Spirit with them). To make your Sass design tokens compatible with Spirit, don't forget to expose -them via your custom [`@tokens` API](#tokens-api). +them via Sass load path. + +
    + +
    +Do I need themes? And if so, how many? + +You need at least one theme to define the default values for your design tokens. +If you want to support multiple themes, you can add more. The number of themes +is up to you and your design system requirements. + +But remember, each theme should contain the same set of tokens, just with different +values. This way, you can switch between themes without changing your components.
    @@ -317,17 +335,8 @@ them via your custom [`@tokens` API](#tokens-api). See the [LICENSE](LICENSE.md) file for information. +[spirit-figma]: https://www.figma.com/design/w9Ca4hvkuYLshsrHu1bYwT/ +[spirit-supernova]: https://spirit.design/ [supernova]: https://spirit.supernova-docs.io -[`@tokens.scss`]: src/scss/@tokens.scss -[`index.scss`]: src/scss/index.scss -[`_borders.sass`]: src/scss/generated/_borders.scss -[`_colors.sass`]: src/scss/generated/_colors.scss -[`_gradients.sass`]: src/scss/generated/_gradients.scss -[`_measures.sass`]: src/scss/generated/_measures.scss -[`_other.sass`]: src/scss/generated/_other.scss -[`_radii.sass`]: src/scss/generated/_radii.scss -[`_shadows.sass`]: src/scss/generated/_shadows.scss -[`_typography.sass`]: src/scss/generated/_typography.scss -[`spirit-web`]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web -[migrate-to-spirit]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/CONTRIBUTING.md#migrating-your-components-to-spirit +[web-docs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web#readme [sass-embedded]: https://sass-lang.com/documentation/breaking-changes/legacy-js-api/#bundlers diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 82caead9e5..c46802c21e 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@lmc-eu/spirit-design-tokens", - "version": "2.1.3", + "version": "3.0.0-alpha.3", "description": "Design tokens for Spirit Design System", "license": "MIT", "engines": { @@ -28,7 +28,7 @@ "build": "npm-run-all --serial build:prepare build:scss build:js", "build:prepare": "yarn clean", "build:js": "vite build", - "build:scss": "shx mkdir -p scss && shx cp -r src/scss/generated/* src/scss/@tokens.scss scss/", + "build:scss": "shx mkdir -p scss && shx cp -r src/scss/* scss/", "clean": "rimraf esm cjs umd scss types", "lint": "npm-run-all --serial lint:scripts lint:styles", "lint:scripts": "eslint ./src/**/*.ts", diff --git a/packages/design-tokens/src/js/generated/borders.ts b/packages/design-tokens/src/js/generated/borders.ts deleted file mode 100644 index 4bc1e06ab3..0000000000 --- a/packages/design-tokens/src/js/generated/borders.ts +++ /dev/null @@ -1,24 +0,0 @@ -export const borderStyle0 = 'none'; -export const borderStyle100 = 'solid'; -export const borderStyle200 = 'dashed'; -export const borderStyle = { - 0: borderStyle0, - 100: borderStyle100, - 200: borderStyle200, -}; - -export const borderWidth0 = 0; -export const borderWidth100 = '1px'; -export const borderWidth200 = '2px'; -export const borderWidth = { - 0: borderWidth0, - 100: borderWidth100, - 200: borderWidth200, -}; - -export const borders = { - borderStyle, - borderWidth, - style: borderStyle, - width: borderWidth, -}; diff --git a/packages/design-tokens/src/js/generated/colors.ts b/packages/design-tokens/src/js/generated/colors.ts deleted file mode 100644 index 2e1990f241..0000000000 --- a/packages/design-tokens/src/js/generated/colors.ts +++ /dev/null @@ -1,301 +0,0 @@ -export const actionInvertedActive = '#d4d4d4'; -export const actionInvertedDefault = '#e9e9e9'; -export const actionInvertedDisabled = '#c4c4c4'; -export const actionInvertedHover = '#dbdbdb'; -export const actionInverted = { - active: actionInvertedActive, - default: actionInvertedDefault, - disabled: actionInvertedDisabled, - hover: actionInvertedHover, -}; - -export const actionLinkInvertedActive = '#d4d4d4'; -export const actionLinkInvertedDefault = '#e9e9e9'; -export const actionLinkInvertedDisabled = '#c4c4c4'; -export const actionLinkInvertedHover = '#dbdbdb'; -export const actionLinkInvertedVisited = '#a7bcc2'; -export const actionLinkInverted = { - active: actionLinkInvertedActive, - default: actionLinkInvertedDefault, - disabled: actionLinkInvertedDisabled, - hover: actionLinkInvertedHover, - visited: actionLinkInvertedVisited, -}; - -export const actionLinkPrimaryActive = '#0b3a46'; -export const actionLinkPrimaryDefault = '#29616f'; -export const actionLinkPrimaryDisabled = '#979797'; -export const actionLinkPrimaryHover = '#1b5260'; -export const actionLinkPrimaryVisited = '#835ea1'; -export const actionLinkPrimary = { - active: actionLinkPrimaryActive, - default: actionLinkPrimaryDefault, - disabled: actionLinkPrimaryDisabled, - hover: actionLinkPrimaryHover, - visited: actionLinkPrimaryVisited, -}; - -export const actionLinkSecondaryActive = '#454b4e'; -export const actionLinkSecondaryDefault = '#758185'; -export const actionLinkSecondaryDisabled = '#979797'; -export const actionLinkSecondaryHover = '#5b6568'; -export const actionLinkSecondaryVisited = '#835ea1'; -export const actionLinkSecondary = { - active: actionLinkSecondaryActive, - default: actionLinkSecondaryDefault, - disabled: actionLinkSecondaryDisabled, - hover: actionLinkSecondaryHover, - visited: actionLinkSecondaryVisited, -}; - -export const actionLink = { - primary: actionLinkPrimary, - secondary: actionLinkSecondary, - inverted: actionLinkInverted, -}; - -export const actionPrimaryActive = '#0b3a46'; -export const actionPrimaryDefault = '#29616f'; -export const actionPrimaryDisabled = '#f5f5f5'; -export const actionPrimaryHover = '#1b5260'; -export const actionPrimary = { - active: actionPrimaryActive, - default: actionPrimaryDefault, - disabled: actionPrimaryDisabled, - hover: actionPrimaryHover, -}; - -export const actionSecondaryActive = '#c4c4c4'; -export const actionSecondaryDefault = '#a0a0a0'; -export const actionSecondaryDisabled = '#f5f5f5'; -export const actionSecondaryHover = '#737373'; -export const actionSecondary = { - active: actionSecondaryActive, - default: actionSecondaryDefault, - disabled: actionSecondaryDisabled, - hover: actionSecondaryHover, -}; - -export const actionSelectedActive = '#0b3a46'; -export const actionSelectedDefault = '#29616f'; -export const actionSelectedDisabled = '#a6a6a6'; -export const actionSelectedHover = '#1b5260'; -export const actionSelected = { - active: actionSelectedActive, - default: actionSelectedDefault, - disabled: actionSelectedDisabled, - hover: actionSelectedHover, -}; - -export const actionTertiaryActive = '#d4d4d4'; -export const actionTertiaryDefault = '#e9e9e9'; -export const actionTertiaryDisabled = '#f5f5f5'; -export const actionTertiaryHover = '#dbdbdb'; -export const actionTertiary = { - active: actionTertiaryActive, - default: actionTertiaryDefault, - disabled: actionTertiaryDisabled, - hover: actionTertiaryHover, -}; - -export const actionUnselectedActive = '#091417'; -export const actionUnselectedDefault = '#132930'; -export const actionUnselectedDisabled = '#a6a6a6'; -export const actionUnselectedHover = '#0b1c21'; -export const actionUnselected = { - active: actionUnselectedActive, - default: actionUnselectedDefault, - disabled: actionUnselectedDisabled, - hover: actionUnselectedHover, -}; - -export const action = { - inverted: actionInverted, - link: { - inverted: actionLinkInverted, - primary: actionLinkPrimary, - secondary: actionLinkSecondary, - }, - primary: actionPrimary, - secondary: actionSecondary, - selected: actionSelected, - tertiary: actionTertiary, - unselected: actionUnselected, -}; - -export const backgroundColorBackdrop = '#0b1c2199'; -export const backgroundColorBasic = '#fff'; -export const backgroundColorCover = '#f0f0f0'; -export const backgroundColor = { - backdrop: backgroundColorBackdrop, - basic: backgroundColorBasic, - cover: backgroundColorCover, -}; - -export const backgroundInteractiveActive = '#a4a4a44d'; -export const backgroundInteractiveDefault = '#fff0'; -export const backgroundInteractiveHover = '#b0b0b033'; -export const backgroundInteractive = { - active: backgroundInteractiveActive, - default: backgroundInteractiveDefault, - hover: backgroundInteractiveHover, -}; - -export const backgroundInteractiveInvertedActive = '#9f9f9fcc'; -export const backgroundInteractiveInvertedDefault = '#fff0'; -export const backgroundInteractiveInvertedHover = '#bbb6'; -export const backgroundInteractiveInverted = { - active: backgroundInteractiveInvertedActive, - default: backgroundInteractiveInvertedDefault, - hover: backgroundInteractiveInvertedHover, -}; - -export const backgroundInverted = '#132930'; - -export const background = { - ...backgroundColor, - interactive: { - ...backgroundInteractive, - inverted: backgroundInteractiveInverted, - }, - inverted: backgroundInverted, -}; - -export const borderPrimaryActive = '#b1b1b1'; -export const borderPrimaryDefault = '#d8d8d8'; -export const borderPrimaryDisabled = '#dfdfe0'; -export const borderPrimaryHover = '#c5c5c5'; -export const borderPrimarySelected = '#29616f'; -export const borderPrimary = { - active: borderPrimaryActive, - default: borderPrimaryDefault, - disabled: borderPrimaryDisabled, - hover: borderPrimaryHover, - selected: borderPrimarySelected, -}; - -export const borderSecondaryDefault = '#e9e9e9'; - -export const border = { - primary: borderPrimary, - secondary: { - default: borderSecondaryDefault, - }, -}; - -export const brandPrimary = '#0b1c21'; -export const brandSecondary = '#30588c'; -export const brand = { - primary: brandPrimary, - secondary: brandSecondary, -}; - -export const emotionDangerActive = '#6f2535'; -export const emotionDangerBackground = '#fbeef1'; -export const emotionDangerDefault = '#ba3e5a'; -export const emotionDangerDisabled = '#f5f5f5'; -export const emotionDangerHover = '#953248'; -export const emotionDanger = { - active: emotionDangerActive, - background: emotionDangerBackground, - default: emotionDangerDefault, - disabled: emotionDangerDisabled, - hover: emotionDangerHover, -}; - -export const emotionInformativeActive = '#26456e'; -export const emotionInformativeBackground = '#e8eff7'; -export const emotionInformativeDefault = '#3b6bab'; -export const emotionInformativeDisabled = '#f5f5f5'; -export const emotionInformativeHover = '#30588c'; -export const emotionInformative = { - active: emotionInformativeActive, - background: emotionInformativeBackground, - default: emotionInformativeDefault, - disabled: emotionInformativeDisabled, - hover: emotionInformativeHover, -}; - -export const emotionSuccessActive = '#33420a'; -export const emotionSuccessBackground = '#f6fbe9'; -export const emotionSuccessDefault = '#607c13'; -export const emotionSuccessDisabled = '#f5f5f5'; -export const emotionSuccessHover = '#485d0e'; -export const emotionSuccess = { - active: emotionSuccessActive, - background: emotionSuccessBackground, - default: emotionSuccessDefault, - disabled: emotionSuccessDisabled, - hover: emotionSuccessHover, -}; - -export const emotionWarningActive = '#423400'; -export const emotionWarningBackground = '#f8f2e4'; -export const emotionWarningDefault = '#a98300'; -export const emotionWarningDisabled = '#f5f5f5'; -export const emotionWarningHover = '#755b00'; -export const emotionWarning = { - active: emotionWarningActive, - background: emotionWarningBackground, - default: emotionWarningDefault, - disabled: emotionWarningDisabled, - hover: emotionWarningHover, -}; - -export const emotion = { - danger: emotionDanger, - informative: emotionInformative, - success: emotionSuccess, - warning: emotionWarning, -}; - -export const focusDefault = '#4666ae'; - -export const textPrimaryDefault = '#132930'; -export const textPrimaryDisabled = '#a6a6a6'; -export const textPrimary = { - default: textPrimaryDefault, - disabled: textPrimaryDisabled, -}; - -export const textPrimaryInvertedDefault = '#fff'; -export const textPrimaryInvertedDisabled = '#a6a6a6'; -export const textPrimaryInverted = { - default: textPrimaryInvertedDefault, - disabled: textPrimaryInvertedDisabled, -}; - -export const textSecondaryDefault = '#5c747b'; -export const textSecondaryDisabled = '#a6a6a6'; -export const textSecondary = { - default: textSecondaryDefault, - disabled: textSecondaryDisabled, -}; - -export const textSecondaryInvertedDefault = '#e9e9e9'; -export const textSecondaryInvertedDisabled = '#737373'; -export const textSecondaryInverted = { - default: textSecondaryInvertedDefault, - disabled: textSecondaryInvertedDisabled, -}; - -export const text = { - primary: textPrimary, - secondary: textSecondary, - inverted: { - primary: textPrimaryInverted, - secondary: textSecondaryInverted, - }, -}; - -export const colors = { - action, - background, - border, - brand, - emotion, - focus: { - default: focusDefault, - }, - text, -}; diff --git a/packages/design-tokens/src/js/generated/gradients.ts b/packages/design-tokens/src/js/generated/gradients.ts deleted file mode 100644 index 74479be532..0000000000 --- a/packages/design-tokens/src/js/generated/gradients.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const gradientBackgroundBasicOverlay = 'linear-gradient(var(--gradient-angle, 90deg), #fff 0%, #fff0 100%)'; - -export const gradients = { - backgroundBasicOverlay: gradientBackgroundBasicOverlay, -}; diff --git a/packages/design-tokens/src/js/generated/measures.ts b/packages/design-tokens/src/js/generated/measures.ts deleted file mode 100644 index e4d9e2d431..0000000000 --- a/packages/design-tokens/src/js/generated/measures.ts +++ /dev/null @@ -1,33 +0,0 @@ -export const space0 = 0; -export const space100 = '1px'; -export const space200 = '2px'; -export const space300 = '4px'; -export const space400 = '8px'; -export const space500 = '12px'; -export const space600 = '16px'; -export const space700 = '24px'; -export const space800 = '32px'; -export const space900 = '40px'; -export const space1000 = '48px'; -export const space1100 = '64px'; -export const space1200 = '80px'; - -export const space = { - 0: space0, - 100: space100, - 200: space200, - 300: space300, - 400: space400, - 500: space500, - 600: space600, - 700: space700, - 800: space800, - 900: space900, - 1000: space1000, - 1100: space1100, - 1200: space1200, -}; - -export const spaces = { - space, -}; diff --git a/packages/design-tokens/src/js/generated/radii.ts b/packages/design-tokens/src/js/generated/radii.ts deleted file mode 100644 index fe313f0c7b..0000000000 --- a/packages/design-tokens/src/js/generated/radii.ts +++ /dev/null @@ -1,15 +0,0 @@ -export const radius0 = 0; -export const radius100 = '4px'; -export const radius200 = '8px'; -export const radius300 = '12px'; - -export const radius = { - 0: radius0, - 100: radius100, - 200: radius200, - 300: radius300, -}; - -export const radii = { - radius, -}; diff --git a/packages/design-tokens/src/js/generated/shadows.ts b/packages/design-tokens/src/js/generated/shadows.ts deleted file mode 100644 index f9ea3fab2a..0000000000 --- a/packages/design-tokens/src/js/generated/shadows.ts +++ /dev/null @@ -1,18 +0,0 @@ -export const focus = '0 0 0 2px #d2c2ff99'; - -export const shadow100 = '0 2px 8px 0 #00000026'; -export const shadow200 = '0 4px 12px 0 #0003'; -export const shadow300 = '0 8px 24px 0 #00000040'; -export const shadow400 = '0 12px 32px 0 #00000040'; - -export const shadow = { - 100: shadow100, - 200: shadow200, - 300: shadow300, - 400: shadow400, -}; - -export const shadows = { - focus, - shadow, -}; diff --git a/packages/design-tokens/src/js/generated/typography.ts b/packages/design-tokens/src/js/generated/typography.ts deleted file mode 100644 index bc3c366177..0000000000 --- a/packages/design-tokens/src/js/generated/typography.ts +++ /dev/null @@ -1,374 +0,0 @@ -export const bodyLargeTextBold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.125rem', - fontStyle: 'normal', - fontWeight: 600, - lineHeight: 1.55, - }, -}; - -export const bodyLargeTextItalic = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.125rem', - fontStyle: 'italic', - fontWeight: 400, - lineHeight: 1.55, - }, -}; - -export const bodyLargeTextRegular = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.125rem', - fontStyle: 'normal', - fontWeight: 400, - lineHeight: 1.55, - }, -}; - -export const bodyLargeTextSemibold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.125rem', - fontStyle: 'normal', - fontWeight: 500, - lineHeight: 1.55, - }, -}; - -export const bodyLarge = { - bold: bodyLargeTextBold, - italic: bodyLargeTextItalic, - regular: bodyLargeTextRegular, - semibold: bodyLargeTextSemibold, -}; - -export const bodyMediumTextBold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1rem', - fontStyle: 'normal', - fontWeight: 600, - lineHeight: 1.5, - }, -}; - -export const bodyMediumTextItalic = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1rem', - fontStyle: 'italic', - fontWeight: 400, - lineHeight: 1.5, - }, -}; - -export const bodyMediumTextRegular = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1rem', - fontStyle: 'normal', - fontWeight: 400, - lineHeight: 1.5, - }, -}; - -export const bodyMediumTextSemibold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1rem', - fontStyle: 'normal', - fontWeight: 500, - lineHeight: 1.5, - }, -}; - -export const bodyMedium = { - bold: bodyMediumTextBold, - italic: bodyMediumTextItalic, - regular: bodyMediumTextRegular, - semibold: bodyMediumTextSemibold, -}; - -export const bodySmallTextBold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.875rem', - fontStyle: 'normal', - fontWeight: 600, - lineHeight: 1.42, - }, -}; - -export const bodySmallTextItalic = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.875rem', - fontStyle: 'italic', - fontWeight: 400, - lineHeight: 1.42, - }, -}; - -export const bodySmallTextRegular = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.875rem', - fontStyle: 'normal', - fontWeight: 400, - lineHeight: 1.42, - }, -}; - -export const bodySmallTextSemibold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.875rem', - fontStyle: 'normal', - fontWeight: 500, - lineHeight: 1.42, - }, -}; - -export const bodySmall = { - bold: bodySmallTextBold, - italic: bodySmallTextItalic, - regular: bodySmallTextRegular, - semibold: bodySmallTextSemibold, -}; - -export const bodyXLargeTextBold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.25rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.6, - }, -}; - -export const bodyXLargeTextItalic = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.25rem', - fontStyle: 'italic', - fontWeight: 400, - lineHeight: 1.6, - }, -}; - -export const bodyXLargeTextRegular = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.25rem', - fontStyle: 'normal', - fontWeight: 400, - lineHeight: 1.6, - }, -}; - -export const bodyXLargeTextSemibold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.25rem', - fontStyle: 'normal', - fontWeight: 500, - lineHeight: 1.6, - }, -}; - -export const bodyXLarge = { - bold: bodyXLargeTextBold, - italic: bodyXLargeTextItalic, - regular: bodyXLargeTextRegular, - semibold: bodyXLargeTextSemibold, -}; - -export const bodyXSmallTextBold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.75rem', - fontStyle: 'normal', - fontWeight: 600, - lineHeight: 1.32, - }, -}; - -export const bodyXSmallTextItalic = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.75rem', - fontStyle: 'italic', - fontWeight: 400, - lineHeight: 1.32, - }, -}; - -export const bodyXSmallTextRegular = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.75rem', - fontStyle: 'normal', - fontWeight: 400, - lineHeight: 1.32, - }, -}; - -export const bodyXSmallTextSemibold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.75rem', - fontStyle: 'normal', - fontWeight: 500, - lineHeight: 1.32, - }, -}; - -export const bodyXSmall = { - bold: bodyXSmallTextBold, - italic: bodyXSmallTextItalic, - regular: bodyXSmallTextRegular, - semibold: bodyXSmallTextSemibold, -}; - -export const body = { - large: bodyLarge, - medium: bodyMedium, - small: bodySmall, - xlarge: bodyXLarge, - xsmall: bodyXSmall, -}; - -export const headingLargeText = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '2rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - tablet: { - fontFamily: "'Inter', sans-serif", - fontSize: '3rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - desktop: { - fontFamily: "'Inter', sans-serif", - fontSize: '3rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, -}; - -export const headingMediumText = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.25rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - tablet: { - fontFamily: "'Inter', sans-serif", - fontSize: '2rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - desktop: { - fontFamily: "'Inter', sans-serif", - fontSize: '2rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, -}; - -export const headingSmallText = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.125rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - tablet: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.5rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - desktop: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.5rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, -}; - -export const headingXLargeText = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '3rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - tablet: { - fontFamily: "'Inter', sans-serif", - fontSize: '4rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - desktop: { - fontFamily: "'Inter', sans-serif", - fontSize: '4rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, -}; - -export const headingXSmallText = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - tablet: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.25rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - desktop: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.25rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, -}; -export const heading = { - large: headingLargeText, - medium: headingMediumText, - small: headingSmallText, - xlarge: headingXLargeText, - xsmall: headingXSmallText, -}; - -export const styles = { - body, - heading, -}; diff --git a/packages/design-tokens/src/js/global-tokens/borders.ts b/packages/design-tokens/src/js/global-tokens/borders.ts new file mode 100644 index 0000000000..081a896e7e --- /dev/null +++ b/packages/design-tokens/src/js/global-tokens/borders.ts @@ -0,0 +1,4 @@ +/* This file was generated by Supernova, don't change manually */ +export const borderWidth0 = 0; +export const borderWidth100 = '1px'; +export const borderWidth200 = '2px'; diff --git a/packages/design-tokens/src/js/global-tokens/gradients.ts b/packages/design-tokens/src/js/global-tokens/gradients.ts new file mode 100644 index 0000000000..938884ef91 --- /dev/null +++ b/packages/design-tokens/src/js/global-tokens/gradients.ts @@ -0,0 +1,7 @@ +/* This file was generated by Supernova, don't change manually */ +export const gradientBasicOverlay = + 'linear-gradient(var(--gradient-angle, 90deg), var(--spirit-color-gradient-basic-overlay-color-01, #fff) 0%, var(--spirit-color-gradient-basic-overlay-color-02, #fff0) 100%)'; + +export const gradients = { + basicOverlay: gradientBasicOverlay, +}; diff --git a/packages/design-tokens/src/js/generated/index.ts b/packages/design-tokens/src/js/global-tokens/index.ts similarity index 75% rename from packages/design-tokens/src/js/generated/index.ts rename to packages/design-tokens/src/js/global-tokens/index.ts index c3bd7c48cc..a147e4dfd0 100644 --- a/packages/design-tokens/src/js/generated/index.ts +++ b/packages/design-tokens/src/js/global-tokens/index.ts @@ -1,8 +1,7 @@ export * from './borders'; -export * from './colors'; export * from './gradients'; -export * from './measures'; export * from './other'; export * from './radii'; export * from './shadows'; +export * from './spacing'; export * from './typography'; diff --git a/packages/design-tokens/src/js/generated/other.ts b/packages/design-tokens/src/js/global-tokens/other.ts similarity index 51% rename from packages/design-tokens/src/js/generated/other.ts rename to packages/design-tokens/src/js/global-tokens/other.ts index b9bb992016..7e61c83b6b 100644 --- a/packages/design-tokens/src/js/generated/other.ts +++ b/packages/design-tokens/src/js/global-tokens/other.ts @@ -1,47 +1,42 @@ -export const containerMaxWidth = '1280px'; +/* This file was generated by Supernova, don't change manually */ +export const containerPaddingMobile = '16px'; +export const containerPaddingTablet = '32px'; +export const containerPaddingDesktop = '32px'; -export const gridColumns = 12; +export const containerMaxWidth = '1280px'; export const breakpointMobile = 0; -export const containerPaddingMobile = '16px'; -export const gridGutterMobile = '16px'; - export const breakpointTablet = '768px'; -export const containerPaddingTablet = '32px'; -export const gridGutterTablet = '32px'; - export const breakpointDesktop = '1280px'; -export const containerPaddingDesktop = '32px'; -export const gridGutterDesktop = '32px'; + +export const gridSpacingMobile = '16px'; +export const gridSpacingDesktop = '32px'; +export const gridSpacingTablet = '32px'; + +export const gridColumns = '12'; + +export const cssVariablePrefix = 'spirit-'; export const containers = { + padding: { + mobile: containerPaddingMobile, + tablet: containerPaddingTablet, + desktop: containerPaddingDesktop, + }, maxWidth: containerMaxWidth, }; -export const grids = { - columns: gridColumns, -}; - export const breakpoints = { mobile: breakpointMobile, tablet: breakpointTablet, desktop: breakpointDesktop, }; -export const containerPaddings = { - mobile: containerPaddingMobile, - tablet: containerPaddingTablet, - desktop: containerPaddingDesktop, -}; - -export const gridGutters = { - mobile: gridGutterMobile, - tablet: gridGutterTablet, - desktop: gridGutterDesktop, -}; - -export const others = { - breakpoints, - containerPaddings, - gridGutters, +export const grids = { + spacing: { + mobile: gridSpacingMobile, + desktop: gridSpacingDesktop, + tablet: gridSpacingTablet, + }, + columns: gridColumns, }; diff --git a/packages/design-tokens/src/js/global-tokens/radii.ts b/packages/design-tokens/src/js/global-tokens/radii.ts new file mode 100644 index 0000000000..530dd226a1 --- /dev/null +++ b/packages/design-tokens/src/js/global-tokens/radii.ts @@ -0,0 +1,18 @@ +/* This file was generated by Supernova, don't change manually */ +export const radius0 = 0; +export const radius100 = '2px'; +export const radius200 = '4px'; +export const radius300 = '8px'; +export const radius400 = '12px'; +export const radius500 = '16px'; +export const radiusFull = '9999px'; + +export const radii = { + 0: radius0, + 100: radius100, + 200: radius200, + 300: radius300, + 400: radius400, + 500: radius500, + full: radiusFull, +}; diff --git a/packages/design-tokens/src/js/global-tokens/shadows.ts b/packages/design-tokens/src/js/global-tokens/shadows.ts new file mode 100644 index 0000000000..1e61e6976c --- /dev/null +++ b/packages/design-tokens/src/js/global-tokens/shadows.ts @@ -0,0 +1,18 @@ +/* This file was generated by Supernova, don't change manually */ +export const focusRing = '0 0 0 2px var(--spirit-color-focus-focus-ring-color-01, #d2c2ffb2)'; + +export const shadow100 = '0 2px 8px 0 var(--spirit-color-shadow-shadow-100-color-01, #00000026)'; +export const shadow200 = '0 4px 12px 0 var(--spirit-color-shadow-shadow-200-color-01, #0003)'; +export const shadow300 = '0 8px 24px 0 var(--spirit-color-shadow-shadow-300-color-01, #00000040)'; +export const shadow400 = '0 12px 32px 0 var(--spirit-color-shadow-shadow-400-color-01, #00000040)'; + +export const focus = { + focusRing, +}; + +export const shadows = { + 100: shadow100, + 200: shadow200, + 300: shadow300, + 400: shadow400, +}; diff --git a/packages/design-tokens/src/js/global-tokens/spacing.ts b/packages/design-tokens/src/js/global-tokens/spacing.ts new file mode 100644 index 0000000000..4e2d7c792a --- /dev/null +++ b/packages/design-tokens/src/js/global-tokens/spacing.ts @@ -0,0 +1,40 @@ +/* This file was generated by Supernova, don't change manually */ +export const space0 = 0; +export const space100 = '1px'; +export const space200 = '2px'; +export const space300 = '4px'; +export const space400 = '6px'; +export const space500 = '8px'; +export const space600 = '12px'; +export const space700 = '16px'; +export const space800 = '20px'; +export const space900 = '24px'; +export const space1000 = '32px'; +export const space1100 = '40px'; +export const space1200 = '48px'; +export const space1300 = '56px'; +export const space1400 = '64px'; +export const space1500 = '72px'; +export const space1600 = '80px'; +export const space1700 = '96px'; + +export const spaces = { + 0: space0, + 100: space100, + 200: space200, + 300: space300, + 400: space400, + 500: space500, + 600: space600, + 700: space700, + 800: space800, + 900: space900, + 1000: space1000, + 1100: space1100, + 1200: space1200, + 1300: space1300, + 1400: space1400, + 1500: space1500, + 1600: space1600, + 1700: space1700, +}; diff --git a/packages/design-tokens/src/js/global-tokens/typography.ts b/packages/design-tokens/src/js/global-tokens/typography.ts new file mode 100644 index 0000000000..51cdbf566f --- /dev/null +++ b/packages/design-tokens/src/js/global-tokens/typography.ts @@ -0,0 +1,723 @@ +/* This file was generated by Supernova, don't change manually */ +export const headingXlargeRegular = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '36px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.2, + }, +}; + +export const headingXlargeSemibold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '36px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.2, + }, +}; + +export const headingXlargeBold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '36px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.2, + }, +}; + +export const headingXlargeItalic = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '36px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.2, + }, +}; + +export const headingLargeRegular = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.2, + }, +}; + +export const headingLargeSemibold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.2, + }, +}; + +export const headingLargeBold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.2, + }, +}; + +export const headingLargeItalic = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.2, + }, +}; + +export const headingMediumRegular = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.3, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.3, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.4, + }, +}; + +export const headingMediumSemibold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.3, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.3, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.4, + }, +}; + +export const headingMediumBold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.3, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.3, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.4, + }, +}; + +export const headingMediumItalic = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.3, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.3, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.4, + }, +}; + +export const headingSmallRegular = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.4, + }, +}; + +export const headingSmallSemibold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.4, + }, +}; + +export const headingSmallBold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.4, + }, +}; + +export const headingSmallItalic = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.4, + }, +}; + +export const headingXsmallRegular = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.4, + }, +}; + +export const headingXsmallSemibold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.4, + }, +}; + +export const headingXsmallBold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.4, + }, +}; + +export const headingXsmallItalic = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.4, + }, +}; + +export const bodyXlargeRegular = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyXlargeSemibold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.5, + }, +}; + +export const bodyXlargeBold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.5, + }, +}; + +export const bodyXlargeItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyLargeRegular = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyLargeSemibold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.5, + }, +}; + +export const bodyLargeBold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.5, + }, +}; + +export const bodyLargeItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyMediumRegular = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyMediumSemibold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.5, + }, +}; + +export const bodyMediumBold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.5, + }, +}; + +export const bodyMediumItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodySmallRegular = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodySmallSemibold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.5, + }, +}; + +export const bodySmallBold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.5, + }, +}; + +export const bodySmallItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallRegular = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallSemibold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallBold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const styles = { + headingXlargeRegular, + headingXlargeSemibold, + headingXlargeBold, + headingXlargeItalic, + headingLargeRegular, + headingLargeSemibold, + headingLargeBold, + headingLargeItalic, + headingMediumRegular, + headingMediumSemibold, + headingMediumBold, + headingMediumItalic, + headingSmallRegular, + headingSmallSemibold, + headingSmallBold, + headingSmallItalic, + headingXsmallRegular, + headingXsmallSemibold, + headingXsmallBold, + headingXsmallItalic, + bodyXlargeRegular, + bodyXlargeSemibold, + bodyXlargeBold, + bodyXlargeItalic, + bodyLargeRegular, + bodyLargeSemibold, + bodyLargeBold, + bodyLargeItalic, + bodyMediumRegular, + bodyMediumSemibold, + bodyMediumBold, + bodyMediumItalic, + bodySmallRegular, + bodySmallSemibold, + bodySmallBold, + bodySmallItalic, + bodyXsmallRegular, + bodyXsmallSemibold, + bodyXsmallBold, + bodyXsmallItalic, +}; diff --git a/packages/design-tokens/src/js/index.ts b/packages/design-tokens/src/js/index.ts index 69e4e4eb8b..03b1cf9db3 100644 --- a/packages/design-tokens/src/js/index.ts +++ b/packages/design-tokens/src/js/index.ts @@ -1 +1,2 @@ -export * from './generated'; +export * from './global-tokens'; +export * from './themes'; diff --git a/packages/design-tokens/src/js/themes/index.ts b/packages/design-tokens/src/js/themes/index.ts new file mode 100644 index 0000000000..d524a98c68 --- /dev/null +++ b/packages/design-tokens/src/js/themes/index.ts @@ -0,0 +1,12 @@ +import * as themeLightDefault from './theme-light-default'; +import * as themeLightOnBrand from './theme-light-on-brand'; + +// The first theme is the default theme, as the left column in the Figma table. +export const themes = { + themeLightDefault: { + tokens: themeLightDefault, + }, + themeLightOnBrand: { + tokens: themeLightOnBrand, + }, +}; diff --git a/packages/design-tokens/src/js/themes/theme-light-default/colors.ts b/packages/design-tokens/src/js/themes/theme-light-default/colors.ts new file mode 100644 index 0000000000..3241c0db6a --- /dev/null +++ b/packages/design-tokens/src/js/themes/theme-light-default/colors.ts @@ -0,0 +1,174 @@ +/* This file was generated by Supernova, don't change manually */ +export const backgroundBackdrop = '#1a1b1b80'; + +export const backgroundInteractiveStateActive = '#f1edff'; +export const backgroundInteractiveStateDefault = '#fff0'; +export const backgroundInteractiveStateHover = '#f8f6ff'; + +export const backgroundPrimary = '#fff'; +export const backgroundSecondary = '#f2f2f2'; +export const backgroundTertiary = '#f1edff'; + +export const borderBasic = '#d9d9d9'; +export const borderFocus = '#7847ff'; + +export const borderInteractiveStateActive = '#a5a5a5'; +export const borderInteractiveStateDefault = '#bfbfbf'; +export const borderInteractiveStateHover = '#b2b2b2'; +export const borderInteractiveStateSelected = '#7847ff'; + +export const componentButtonPlainBorder = '#fff0'; +export const componentButtonPlainContent = '#6039cc'; +export const componentButtonPlainStateActive = '#e4daff'; +export const componentButtonPlainStateDefault = '#fff0'; +export const componentButtonPlainStateHover = '#f1edff'; + +export const componentButtonPrimaryBorder = '#4e2ea6'; +export const componentButtonPrimaryContent = '#fff'; +export const componentButtonPrimaryStateActive = '#6039cc'; +export const componentButtonPrimaryStateDefault = '#7847ff'; +export const componentButtonPrimaryStateHover = '#6c40e5'; + +export const componentButtonSecondaryBorder = '#7847ff'; +export const componentButtonSecondaryContent = '#6039cc'; +export const componentButtonSecondaryStateActive = '#e4daff'; +export const componentButtonSecondaryStateDefault = '#fff'; +export const componentButtonSecondaryStateHover = '#f1edff'; + +export const componentButtonTertiaryBorder = '#e5e5e5'; +export const componentButtonTertiaryContent = '#202020'; +export const componentButtonTertiaryStateActive = '#d9d9d9'; +export const componentButtonTertiaryStateDefault = '#f2f2f2'; +export const componentButtonTertiaryStateHover = '#e5e5e5'; + +export const componentHeaderBackground = '#fff'; +export const componentHeaderItemBackgroundStateActive = '#f1edff'; +export const componentHeaderItemBackgroundStateDefault = '#fff0'; +export const componentHeaderItemBackgroundStateHover = '#f8f6ff'; +export const componentHeaderItemBackgroundStateSelected = '#fff0'; +export const componentHeaderItemStateActive = '#4e2ea6'; +export const componentHeaderItemStateDefault = '#404040'; +export const componentHeaderItemStateHover = '#6039cc'; +export const componentHeaderItemStateSelected = '#6039cc'; +export const componentHeaderStripeStateSelected = '#ffbe00'; +export const componentHeaderStripeStateUnselected = '#e4daff'; + +export const componentToggleSelectedBorder = '#327c3f'; +export const componentToggleSelectedContent = '#fff'; +export const componentToggleSelectedStateActive = '#3e9b4f'; +export const componentToggleSelectedStateDefault = '#327c3f'; +export const componentToggleSelectedStateHover = '#388b47'; +export const componentToggleUnselectedBorder = '#a5a5a5'; +export const componentToggleUnselectedContent = '#404040'; +export const componentToggleUnselectedStateActive = '#f2f2f2'; +export const componentToggleUnselectedStateDefault = '#fff'; +export const componentToggleUnselectedStateHover = '#f9f9f9'; + +export const disabledBackground = '#f9f9f9'; +export const disabledBorder = '#e5e5e5'; +export const disabledContent = '#a5a5a5'; +export const disabledForeground = '#d9d9d9'; + +export const emotionDangerBackgroundBasic = '#b60000'; +export const emotionDangerBackgroundSubtle = '#fef2f2'; +export const emotionDangerBorderBasic = '#b60000'; +export const emotionDangerBorderSubtle = '#f18080'; +export const emotionDangerContentBasic = '#940000'; +export const emotionDangerContentSubtle = '#fff'; +export const emotionDangerStateActive = '#e40000'; +export const emotionDangerStateDefault = '#b60000'; +export const emotionDangerStateHover = '#cd0000'; + +export const emotionInformativeBackgroundBasic = '#0052ad'; +export const emotionInformativeBackgroundSubtle = '#f2f7fd'; +export const emotionInformativeBorderBasic = '#0052ad'; +export const emotionInformativeBorderSubtle = '#80b2eb'; +export const emotionInformativeContentBasic = '#00428c'; +export const emotionInformativeContentSubtle = '#fff'; +export const emotionInformativeStateActive = '#0066d8'; +export const emotionInformativeStateDefault = '#0052ad'; +export const emotionInformativeStateHover = '#005cc2'; + +export const emotionSuccessBackgroundBasic = '#327c3f'; +export const emotionSuccessBackgroundSubtle = '#f5faf6'; +export const emotionSuccessBorderBasic = '#327c3f'; +export const emotionSuccessBorderSubtle = '#9ecda7'; +export const emotionSuccessContentBasic = '#286533'; +export const emotionSuccessContentSubtle = '#fff'; +export const emotionSuccessStateActive = '#3e9b4f'; +export const emotionSuccessStateDefault = '#327c3f'; +export const emotionSuccessStateHover = '#388b47'; + +export const emotionWarningBackgroundBasic = '#c26400'; +export const emotionWarningBackgroundSubtle = '#fef8f2'; +export const emotionWarningBorderBasic = '#c26400'; +export const emotionWarningBorderSubtle = '#f9be80'; +export const emotionWarningContentBasic = '#9d5100'; +export const emotionWarningContentSubtle = '#fff'; +export const emotionWarningStateActive = '#f27d00'; +export const emotionWarningStateDefault = '#c26400'; +export const emotionWarningStateHover = '#da7100'; + +export const focusFocusRingColor01 = '#d2c2ffb2'; + +export const formFieldDanger = '#b60000'; + +export const formFieldFilledBackgroundStateActive = '#fff'; +export const formFieldFilledBackgroundStateDefault = '#fff'; +export const formFieldFilledBackgroundStateHover = '#f9f9f9'; +export const formFieldFilledBorderStateActive = '#7f7f7f'; +export const formFieldFilledBorderStateDefault = '#a5a5a5'; +export const formFieldFilledBorderStateHover = '#999'; +export const formFieldFilledBorderStateSelected = '#7847ff'; +export const formFieldFilledContent = '#202020'; +export const formFieldFilledPlaceholder = '#666'; + +export const formFieldHelperText = '#7f7f7f'; +export const formFieldLabel = '#202020'; +export const formFieldSuccess = '#327c3f'; +export const formFieldWarning = '#c26400'; + +export const gradientBasicOverlayColor01 = '#fff'; +export const gradientBasicOverlayColor02 = '#fff0'; + +export const linkPrimaryStateActive = '#3c2480'; +export const linkPrimaryStateDefault = '#6039cc'; +export const linkPrimaryStateHover = '#4e2ea6'; + +export const linkSecondaryStateActive = '#3c2480'; +export const linkSecondaryStateDefault = '#535353'; +export const linkSecondaryStateHover = '#4e2ea6'; + +export const linkStateVisited = '#3c2480'; + +export const linkTertiaryStateActive = '#3c2480'; +export const linkTertiaryStateDefault = '#7f7f7f'; +export const linkTertiaryStateHover = '#4e2ea6'; + +export const neutralBackgroundBasic = '#202020'; +export const neutralBackgroundSubtle = '#f2f2f2'; +export const neutralBorderBasic = '#202020'; +export const neutralBorderSubtle = '#bfbfbf'; +export const neutralContentBasic = '#202020'; +export const neutralContentSubtle = '#fff'; +export const neutralStateActive = '#535353'; +export const neutralStateDefault = '#202020'; +export const neutralStateHover = '#404040'; + +export const selectedContentBasic = '#4e2ea6'; +export const selectedContentSubtle = '#fff'; +export const selectedStateActive = '#6039cc'; +export const selectedStateDefault = '#7847ff'; +export const selectedStateHover = '#6c40e5'; + +export const shadowShadow100Color01 = '#00000026'; + +export const shadowShadow200Color01 = '#0003'; + +export const shadowShadow300Color01 = '#00000040'; + +export const shadowShadow400Color01 = '#00000040'; + +export const textPrimary = '#202020'; +export const textSecondary = '#535353'; +export const textTertiary = '#7f7f7f'; diff --git a/packages/design-tokens/src/js/themes/theme-light-default/index.ts b/packages/design-tokens/src/js/themes/theme-light-default/index.ts new file mode 100644 index 0000000000..1bae1c0e49 --- /dev/null +++ b/packages/design-tokens/src/js/themes/theme-light-default/index.ts @@ -0,0 +1 @@ +export * from './colors'; diff --git a/packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts b/packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts new file mode 100644 index 0000000000..4aa065a9f7 --- /dev/null +++ b/packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts @@ -0,0 +1,174 @@ +/* This file was generated by Supernova, don't change manually */ +export const backgroundBackdrop = '#1a1b1b80'; + +export const backgroundInteractiveStateActive = '#ffffff1a'; +export const backgroundInteractiveStateDefault = '#fff0'; +export const backgroundInteractiveStateHover = '#ffffff0d'; + +export const backgroundPrimary = '#6039cc'; +export const backgroundSecondary = '#3c2480'; +export const backgroundTertiary = '#1e1240'; + +export const borderBasic = '#a07eff'; +export const borderFocus = '#1e1240'; + +export const borderInteractiveStateActive = '#bba3ff'; +export const borderInteractiveStateDefault = '#a07eff'; +export const borderInteractiveStateHover = '#ae91ff'; +export const borderInteractiveStateSelected = '#ffbe00'; + +export const componentButtonPlainBorder = '#fff0'; +export const componentButtonPlainContent = '#fff'; +export const componentButtonPlainStateActive = '#ffffff26'; +export const componentButtonPlainStateDefault = '#fff0'; +export const componentButtonPlainStateHover = '#ffffff1a'; + +export const componentButtonPrimaryBorder = '#1e1240'; +export const componentButtonPrimaryContent = '#3c2480'; +export const componentButtonPrimaryStateActive = '#e4daff'; +export const componentButtonPrimaryStateDefault = '#fff'; +export const componentButtonPrimaryStateHover = '#f1edff'; + +export const componentButtonSecondaryBorder = '#f8f6ff'; +export const componentButtonSecondaryContent = '#fff'; +export const componentButtonSecondaryStateActive = '#1a1b1b26'; +export const componentButtonSecondaryStateDefault = '#1a1b1b00'; +export const componentButtonSecondaryStateHover = '#1a1b1b1a'; + +export const componentButtonTertiaryBorder = '#1a1b1b00'; +export const componentButtonTertiaryContent = '#fff'; +export const componentButtonTertiaryStateActive = '#1a1b1b4d'; +export const componentButtonTertiaryStateDefault = '#1a1b1b33'; +export const componentButtonTertiaryStateHover = '#1a1b1b40'; + +export const componentHeaderBackground = '#6039cc'; +export const componentHeaderItemBackgroundStateActive = '#1a1b1b26'; +export const componentHeaderItemBackgroundStateDefault = '#fff0'; +export const componentHeaderItemBackgroundStateHover = '#1a1b1b1a'; +export const componentHeaderItemBackgroundStateSelected = '#fff0'; +export const componentHeaderItemStateActive = '#e5e5e5'; +export const componentHeaderItemStateDefault = '#fff'; +export const componentHeaderItemStateHover = '#f2f2f2'; +export const componentHeaderItemStateSelected = '#ffbe00'; +export const componentHeaderStripeStateSelected = '#fff'; +export const componentHeaderStripeStateUnselected = '#ffffff40'; + +export const componentToggleSelectedBorder = '#a07eff'; +export const componentToggleSelectedContent = '#fff'; +export const componentToggleSelectedStateActive = '#3e9b4f'; +export const componentToggleSelectedStateDefault = '#327c3f'; +export const componentToggleSelectedStateHover = '#388b47'; +export const componentToggleUnselectedBorder = '#a07eff'; +export const componentToggleUnselectedContent = '#4e2ea6'; +export const componentToggleUnselectedStateActive = '#e4daff'; +export const componentToggleUnselectedStateDefault = '#fff'; +export const componentToggleUnselectedStateHover = '#f1edff'; + +export const disabledBackground = '#ffffff1a'; +export const disabledBorder = '#fff3'; +export const disabledContent = '#ffffff80'; +export const disabledForeground = '#fff3'; + +export const emotionDangerBackgroundBasic = '#e40000'; +export const emotionDangerBackgroundSubtle = '#fce5e5'; +export const emotionDangerBorderBasic = '#e93333'; +export const emotionDangerBorderSubtle = '#ef6666'; +export const emotionDangerContentBasic = '#720000'; +export const emotionDangerContentSubtle = '#fff'; +export const emotionDangerStateActive = '#ec4d4d'; +export const emotionDangerStateDefault = '#e40000'; +export const emotionDangerStateHover = '#e93333'; + +export const emotionInformativeBackgroundBasic = '#0066d8'; +export const emotionInformativeBackgroundSubtle = '#e5f0fb'; +export const emotionInformativeBorderBasic = '#3385e0'; +export const emotionInformativeBorderSubtle = '#66a3e8'; +export const emotionInformativeContentBasic = '#00336c'; +export const emotionInformativeContentSubtle = '#fff'; +export const emotionInformativeStateActive = '#4d94e4'; +export const emotionInformativeStateDefault = '#0066d8'; +export const emotionInformativeStateHover = '#3385e0'; + +export const emotionSuccessBackgroundBasic = '#3e9b4f'; +export const emotionSuccessBackgroundSubtle = '#ecf5ed'; +export const emotionSuccessBorderBasic = '#65af72'; +export const emotionSuccessBorderSubtle = '#8bc395'; +export const emotionSuccessContentBasic = '#1f4e28'; +export const emotionSuccessContentSubtle = '#fff'; +export const emotionSuccessStateActive = '#78b984'; +export const emotionSuccessStateDefault = '#3e9b4f'; +export const emotionSuccessStateHover = '#65af72'; + +export const emotionWarningBackgroundBasic = '#f27d00'; +export const emotionWarningBackgroundSubtle = '#fef2e5'; +export const emotionWarningBorderBasic = '#f59733'; +export const emotionWarningBorderSubtle = '#f7b166'; +export const emotionWarningContentBasic = '#793f00'; +export const emotionWarningContentSubtle = '#fff'; +export const emotionWarningStateActive = '#f6a44d'; +export const emotionWarningStateDefault = '#f27d00'; +export const emotionWarningStateHover = '#f59733'; + +export const focusFocusRingColor01 = '#d2c2ffb2'; + +export const formFieldDanger = '#ec4d4d'; + +export const formFieldFilledBackgroundStateActive = '#fff'; +export const formFieldFilledBackgroundStateDefault = '#f9f9f9'; +export const formFieldFilledBackgroundStateHover = '#f1edff'; +export const formFieldFilledBorderStateActive = '#936cff'; +export const formFieldFilledBorderStateDefault = '#ae91ff'; +export const formFieldFilledBorderStateHover = '#a07eff'; +export const formFieldFilledBorderStateSelected = '#ffbe00'; +export const formFieldFilledContent = '#202020'; +export const formFieldFilledPlaceholder = '#666'; + +export const formFieldHelperText = '#c9b5ff'; +export const formFieldLabel = '#fff'; +export const formFieldSuccess = '#78b984'; +export const formFieldWarning = '#f6a44d'; + +export const gradientBasicOverlayColor01 = '#606060'; +export const gradientBasicOverlayColor02 = '#60606000'; + +export const linkPrimaryStateActive = '#e5e5e5'; +export const linkPrimaryStateDefault = '#fff'; +export const linkPrimaryStateHover = '#f2f2f2'; + +export const linkSecondaryStateActive = '#e5e5e5'; +export const linkSecondaryStateDefault = '#d6c8ff'; +export const linkSecondaryStateHover = '#f2f2f2'; + +export const linkStateVisited = '#ffbe00'; + +export const linkTertiaryStateActive = '#e5e5e5'; +export const linkTertiaryStateDefault = '#bba3ff'; +export const linkTertiaryStateHover = '#f2f2f2'; + +export const neutralBackgroundBasic = '#202020'; +export const neutralBackgroundSubtle = '#f2f2f2'; +export const neutralBorderBasic = '#202020'; +export const neutralBorderSubtle = '#bfbfbf'; +export const neutralContentBasic = '#202020'; +export const neutralContentSubtle = '#fff'; +export const neutralStateActive = '#535353'; +export const neutralStateDefault = '#202020'; +export const neutralStateHover = '#404040'; + +export const selectedContentBasic = '#fff'; +export const selectedContentSubtle = '#3c2480'; +export const selectedStateActive = '#ffd24d'; +export const selectedStateDefault = '#ffbe00'; +export const selectedStateHover = '#ffcb33'; + +export const shadowShadow100Color01 = '#00000026'; + +export const shadowShadow200Color01 = '#0003'; + +export const shadowShadow300Color01 = '#00000040'; + +export const shadowShadow400Color01 = '#00000040'; + +export const textPrimary = '#f9f9f9'; +export const textSecondary = '#d9d9d9'; +export const textTertiary = '#b2b2b2'; diff --git a/packages/design-tokens/src/js/themes/theme-light-on-brand/index.ts b/packages/design-tokens/src/js/themes/theme-light-on-brand/index.ts new file mode 100644 index 0000000000..1bae1c0e49 --- /dev/null +++ b/packages/design-tokens/src/js/themes/theme-light-on-brand/index.ts @@ -0,0 +1 @@ +export * from './colors'; diff --git a/packages/design-tokens/src/scss/@themes.scss b/packages/design-tokens/src/scss/@themes.scss new file mode 100644 index 0000000000..0951b387c6 --- /dev/null +++ b/packages/design-tokens/src/scss/@themes.scss @@ -0,0 +1,15 @@ +@use 'sass:meta'; +@use 'themes/theme-light-default'; +@use 'themes/theme-light-on-brand'; + +// The first theme is the default theme, as the left column in the Figma table. +$themes: ( + theme-light-default: ( + variables: meta.module-variables(theme-light-default), + mixins: meta.module-mixins(theme-light-default), + ), + theme-light-on-brand: ( + variables: meta.module-variables(theme-light-on-brand), + mixins: meta.module-mixins(theme-light-on-brand), + ), +); diff --git a/packages/design-tokens/src/scss/@tokens.scss b/packages/design-tokens/src/scss/@tokens.scss index 8405855b32..adc51194b1 100644 --- a/packages/design-tokens/src/scss/@tokens.scss +++ b/packages/design-tokens/src/scss/@tokens.scss @@ -1 +1,2 @@ -@forward 'index'; +@forward 'global-tokens'; +@forward 'themes'; diff --git a/packages/design-tokens/src/scss/README.md b/packages/design-tokens/src/scss/README.md new file mode 100644 index 0000000000..140eab6934 --- /dev/null +++ b/packages/design-tokens/src/scss/README.md @@ -0,0 +1,5 @@ +# ⚠️ **DO NOT EDIT MANUALLY!** + +The content of this directory is generated by [Supernova][supernova]. + +[supernova]: https://spirit.supernova-docs.io diff --git a/packages/design-tokens/src/scss/generated/_borders.scss b/packages/design-tokens/src/scss/generated/_borders.scss deleted file mode 100644 index c00c8b02e4..0000000000 --- a/packages/design-tokens/src/scss/generated/_borders.scss +++ /dev/null @@ -1,7 +0,0 @@ -// Generated Borders from Supernova. Do not edit manually. -$border-style-0: none !default; -$border-style-100: solid !default; -$border-style-200: dashed !default; -$border-width-0: 0 !default; -$border-width-100: 1px !default; -$border-width-200: 2px !default; diff --git a/packages/design-tokens/src/scss/generated/_colors.scss b/packages/design-tokens/src/scss/generated/_colors.scss deleted file mode 100644 index 826dd32ed2..0000000000 --- a/packages/design-tokens/src/scss/generated/_colors.scss +++ /dev/null @@ -1,194 +0,0 @@ -// Generated Colors from Supernova. Do not edit manually. -$action-inverted-active: #d4d4d4 !default; -$action-inverted-default: #e9e9e9 !default; -$action-inverted-disabled: #c4c4c4 !default; -$action-inverted-hover: #dbdbdb !default; -$action-link-inverted-active: #d4d4d4 !default; -$action-link-inverted-default: #e9e9e9 !default; -$action-link-inverted-disabled: #c4c4c4 !default; -$action-link-inverted-hover: #dbdbdb !default; -$action-link-inverted-visited: #a7bcc2 !default; -$action-link-primary-active: #0b3a46 !default; -$action-link-primary-default: #29616f !default; -$action-link-primary-disabled: #979797 !default; -$action-link-primary-hover: #1b5260 !default; -$action-link-primary-visited: #835ea1 !default; -$action-link-secondary-active: #454b4e !default; -$action-link-secondary-default: #758185 !default; -$action-link-secondary-disabled: #979797 !default; -$action-link-secondary-hover: #5b6568 !default; -$action-link-secondary-visited: #835ea1 !default; -$action-primary-active: #0b3a46 !default; -$action-primary-default: #29616f !default; -$action-primary-disabled: #f5f5f5 !default; -$action-primary-hover: #1b5260 !default; -$action-secondary-active: #c4c4c4 !default; -$action-secondary-default: #a0a0a0 !default; -$action-secondary-disabled: #f5f5f5 !default; -$action-secondary-hover: #737373 !default; -$action-selected-active: #0b3a46 !default; -$action-selected-default: #29616f !default; -$action-selected-disabled: #a6a6a6 !default; -$action-selected-hover: #1b5260 !default; -$action-tertiary-active: #d4d4d4 !default; -$action-tertiary-default: #e9e9e9 !default; -$action-tertiary-disabled: #f5f5f5 !default; -$action-tertiary-hover: #dbdbdb !default; -$action-unselected-active: #091417 !default; -$action-unselected-default: #132930 !default; -$action-unselected-disabled: #a6a6a6 !default; -$action-unselected-hover: #0b1c21 !default; -$background-backdrop: #0b1c2199 !default; -$background-basic: #fff !default; -$background-cover: #f0f0f0 !default; -$background-interactive-active: #a4a4a44d !default; -$background-interactive-default: #fff0 !default; -$background-interactive-hover: #b0b0b033 !default; -$background-interactive-inverted-active: #9f9f9fcc !default; -$background-interactive-inverted-default: #fff0 !default; -$background-interactive-inverted-hover: #bbb6 !default; -$background-inverted: #132930 !default; -$border-primary-active: #b1b1b1 !default; -$border-primary-default: #d8d8d8 !default; -$border-primary-disabled: #dfdfe0 !default; -$border-primary-hover: #c5c5c5 !default; -$border-primary-selected: #29616f !default; -$border-secondary-default: #e9e9e9 !default; -$brand-primary: #0b1c21 !default; -$brand-secondary: #30588c !default; -$emotion-danger-active: #6f2535 !default; -$emotion-danger-background: #fbeef1 !default; -$emotion-danger-default: #ba3e5a !default; -$emotion-danger-disabled: #f5f5f5 !default; -$emotion-danger-hover: #953248 !default; -$emotion-informative-active: #26456e !default; -$emotion-informative-background: #e8eff7 !default; -$emotion-informative-default: #3b6bab !default; -$emotion-informative-disabled: #f5f5f5 !default; -$emotion-informative-hover: #30588c !default; -$emotion-success-active: #33420a !default; -$emotion-success-background: #f6fbe9 !default; -$emotion-success-default: #607c13 !default; -$emotion-success-disabled: #f5f5f5 !default; -$emotion-success-hover: #485d0e !default; -$emotion-warning-active: #423400 !default; -$emotion-warning-background: #f8f2e4 !default; -$emotion-warning-default: #a98300 !default; -$emotion-warning-disabled: #f5f5f5 !default; -$emotion-warning-hover: #755b00 !default; -$focus-default: #4666ae !default; -$text-primary-default: #132930 !default; -$text-primary-disabled: #a6a6a6 !default; -$text-primary-inverted-default: #fff !default; -$text-primary-inverted-disabled: #a6a6a6 !default; -$text-secondary-default: #5c747b !default; -$text-secondary-disabled: #a6a6a6 !default; -$text-secondary-inverted-default: #e9e9e9 !default; -$text-secondary-inverted-disabled: #737373 !default; - -$action-colors: ( - inverted-active: $action-inverted-active, - inverted-default: $action-inverted-default, - inverted-disabled: $action-inverted-disabled, - inverted-hover: $action-inverted-hover, - link-inverted-active: $action-link-inverted-active, - link-inverted-default: $action-link-inverted-default, - link-inverted-disabled: $action-link-inverted-disabled, - link-inverted-hover: $action-link-inverted-hover, - link-inverted-visited: $action-link-inverted-visited, - link-primary-active: $action-link-primary-active, - link-primary-default: $action-link-primary-default, - link-primary-disabled: $action-link-primary-disabled, - link-primary-hover: $action-link-primary-hover, - link-primary-visited: $action-link-primary-visited, - link-secondary-active: $action-link-secondary-active, - link-secondary-default: $action-link-secondary-default, - link-secondary-disabled: $action-link-secondary-disabled, - link-secondary-hover: $action-link-secondary-hover, - link-secondary-visited: $action-link-secondary-visited, - primary-active: $action-primary-active, - primary-default: $action-primary-default, - primary-disabled: $action-primary-disabled, - primary-hover: $action-primary-hover, - secondary-active: $action-secondary-active, - secondary-default: $action-secondary-default, - secondary-disabled: $action-secondary-disabled, - secondary-hover: $action-secondary-hover, - selected-active: $action-selected-active, - selected-default: $action-selected-default, - selected-disabled: $action-selected-disabled, - selected-hover: $action-selected-hover, - tertiary-active: $action-tertiary-active, - tertiary-default: $action-tertiary-default, - tertiary-disabled: $action-tertiary-disabled, - tertiary-hover: $action-tertiary-hover, - unselected-active: $action-unselected-active, - unselected-default: $action-unselected-default, - unselected-disabled: $action-unselected-disabled, - unselected-hover: $action-unselected-hover, -) !default; - -$background-colors: ( - backdrop: $background-backdrop, - basic: $background-basic, - cover: $background-cover, - interactive-active: $background-interactive-active, - interactive-default: $background-interactive-default, - interactive-hover: $background-interactive-hover, - interactive-inverted-active: $background-interactive-inverted-active, - interactive-inverted-default: $background-interactive-inverted-default, - interactive-inverted-hover: $background-interactive-inverted-hover, - inverted: $background-inverted, -) !default; - -$border-colors: ( - primary-active: $border-primary-active, - primary-default: $border-primary-default, - primary-disabled: $border-primary-disabled, - primary-hover: $border-primary-hover, - primary-selected: $border-primary-selected, - secondary-default: $border-secondary-default, -) !default; - -$brand-colors: ( - primary: $brand-primary, - secondary: $brand-secondary, -) !default; - -$emotion-colors: ( - danger-active: $emotion-danger-active, - danger-background: $emotion-danger-background, - danger-default: $emotion-danger-default, - danger-disabled: $emotion-danger-disabled, - danger-hover: $emotion-danger-hover, - informative-active: $emotion-informative-active, - informative-background: $emotion-informative-background, - informative-default: $emotion-informative-default, - informative-disabled: $emotion-informative-disabled, - informative-hover: $emotion-informative-hover, - success-active: $emotion-success-active, - success-background: $emotion-success-background, - success-default: $emotion-success-default, - success-disabled: $emotion-success-disabled, - success-hover: $emotion-success-hover, - warning-active: $emotion-warning-active, - warning-background: $emotion-warning-background, - warning-default: $emotion-warning-default, - warning-disabled: $emotion-warning-disabled, - warning-hover: $emotion-warning-hover, -) !default; - -$focus-colors: ( - default: $focus-default, -) !default; - -$text-colors: ( - primary-default: $text-primary-default, - primary-disabled: $text-primary-disabled, - primary-inverted-default: $text-primary-inverted-default, - primary-inverted-disabled: $text-primary-inverted-disabled, - secondary-default: $text-secondary-default, - secondary-disabled: $text-secondary-disabled, - secondary-inverted-default: $text-secondary-inverted-default, - secondary-inverted-disabled: $text-secondary-inverted-disabled, -) !default; diff --git a/packages/design-tokens/src/scss/generated/_gradients.scss b/packages/design-tokens/src/scss/generated/_gradients.scss deleted file mode 100644 index 29e74463ea..0000000000 --- a/packages/design-tokens/src/scss/generated/_gradients.scss +++ /dev/null @@ -1,6 +0,0 @@ -// Generated Gradients from Supernova. Do not edit manually. -$gradient-background-basic-overlay: linear-gradient(var(--gradient-angle, 90deg), #fff 0%, #fff0 100%) !default; - -$gradients: ( - background-basic-overlay: $gradient-background-basic-overlay, -) !default; diff --git a/packages/design-tokens/src/scss/generated/_measures.scss b/packages/design-tokens/src/scss/generated/_measures.scss deleted file mode 100644 index d981908ed4..0000000000 --- a/packages/design-tokens/src/scss/generated/_measures.scss +++ /dev/null @@ -1,30 +0,0 @@ -// Generated Measures from Supernova. Do not edit manually. -$space-0: 0 !default; -$space-100: 1px !default; -$space-200: 2px !default; -$space-300: 4px !default; -$space-400: 8px !default; -$space-500: 12px !default; -$space-600: 16px !default; -$space-700: 24px !default; -$space-800: 32px !default; -$space-900: 40px !default; -$space-1000: 48px !default; -$space-1100: 64px !default; -$space-1200: 80px !default; - -$spaces: ( - 0: $space-0, - 100: $space-100, - 200: $space-200, - 300: $space-300, - 400: $space-400, - 500: $space-500, - 600: $space-600, - 700: $space-700, - 800: $space-800, - 900: $space-900, - 1000: $space-1000, - 1100: $space-1100, - 1200: $space-1200, -) !default; diff --git a/packages/design-tokens/src/scss/generated/_radii.scss b/packages/design-tokens/src/scss/generated/_radii.scss deleted file mode 100644 index d3cc05286e..0000000000 --- a/packages/design-tokens/src/scss/generated/_radii.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Generated Radii from Supernova. Do not edit manually. -$radius-0: 0 !default; -$radius-100: 4px !default; -$radius-200: 8px !default; -$radius-300: 12px !default; - -$radii: ( - 0: $radius-0, - 100: $radius-100, - 200: $radius-200, - 300: $radius-300, -) !default; diff --git a/packages/design-tokens/src/scss/generated/_shadows.scss b/packages/design-tokens/src/scss/generated/_shadows.scss deleted file mode 100644 index f33b8e4113..0000000000 --- a/packages/design-tokens/src/scss/generated/_shadows.scss +++ /dev/null @@ -1,13 +0,0 @@ -// Generated Shadows from Supernova. Do not edit manually. -$focus: 0 0 0 2px #d2c2ff99 !default; -$shadow-100: 0 2px 8px 0 #00000026 !default; -$shadow-200: 0 4px 12px 0 #0003 !default; -$shadow-300: 0 8px 24px 0 #00000040 !default; -$shadow-400: 0 12px 32px 0 #00000040 !default; - -$shadows: ( - 100: $shadow-100, - 200: $shadow-200, - 300: $shadow-300, - 400: $shadow-400, -) !default; diff --git a/packages/design-tokens/src/scss/generated/_typography.scss b/packages/design-tokens/src/scss/generated/_typography.scss deleted file mode 100644 index de61243496..0000000000 --- a/packages/design-tokens/src/scss/generated/_typography.scss +++ /dev/null @@ -1,348 +0,0 @@ -// Generated Typography from Supernova. Do not edit manually. -$body-large-text-bold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.125rem, - font-style: normal, - font-weight: 600, - line-height: 1.55, - ), -) !default; - -$body-large-text-italic: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.125rem, - font-style: italic, - font-weight: 400, - line-height: 1.55, - ), -) !default; - -$body-large-text-regular: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.125rem, - font-style: normal, - font-weight: 400, - line-height: 1.55, - ), -) !default; - -$body-large-text-semibold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.125rem, - font-style: normal, - font-weight: 500, - line-height: 1.55, - ), -) !default; - -$body-medium-text-bold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1rem, - font-style: normal, - font-weight: 600, - line-height: 1.5, - ), -) !default; - -$body-medium-text-italic: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1rem, - font-style: italic, - font-weight: 400, - line-height: 1.5, - ), -) !default; - -$body-medium-text-regular: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1rem, - font-style: normal, - font-weight: 400, - line-height: 1.5, - ), -) !default; - -$body-medium-text-semibold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1rem, - font-style: normal, - font-weight: 500, - line-height: 1.5, - ), -) !default; - -$body-small-text-bold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.875rem, - font-style: normal, - font-weight: 600, - line-height: 1.42, - ), -) !default; - -$body-small-text-italic: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.875rem, - font-style: italic, - font-weight: 400, - line-height: 1.42, - ), -) !default; - -$body-small-text-regular: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.875rem, - font-style: normal, - font-weight: 400, - line-height: 1.42, - ), -) !default; - -$body-small-text-semibold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.875rem, - font-style: normal, - font-weight: 500, - line-height: 1.42, - ), -) !default; - -$body-xlarge-text-bold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.25rem, - font-style: normal, - font-weight: 700, - line-height: 1.6, - ), -) !default; - -$body-xlarge-text-italic: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.25rem, - font-style: italic, - font-weight: 400, - line-height: 1.6, - ), -) !default; - -$body-xlarge-text-regular: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.25rem, - font-style: normal, - font-weight: 400, - line-height: 1.6, - ), -) !default; - -$body-xlarge-text-semibold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.25rem, - font-style: normal, - font-weight: 500, - line-height: 1.6, - ), -) !default; - -$body-xsmall-text-bold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.75rem, - font-style: normal, - font-weight: 600, - line-height: 1.32, - ), -) !default; - -$body-xsmall-text-italic: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.75rem, - font-style: italic, - font-weight: 400, - line-height: 1.32, - ), -) !default; - -$body-xsmall-text-regular: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.75rem, - font-style: normal, - font-weight: 400, - line-height: 1.32, - ), -) !default; - -$body-xsmall-text-semibold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.75rem, - font-style: normal, - font-weight: 500, - line-height: 1.32, - ), -) !default; - -$heading-large-text: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 2rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - tablet: ( - font-family: "'Inter', sans-serif", - font-size: 3rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - desktop: ( - font-family: "'Inter', sans-serif", - font-size: 3rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), -) !default; - -$heading-medium-text: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.25rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - tablet: ( - font-family: "'Inter', sans-serif", - font-size: 2rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - desktop: ( - font-family: "'Inter', sans-serif", - font-size: 2rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), -) !default; - -$heading-small-text: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.125rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - tablet: ( - font-family: "'Inter', sans-serif", - font-size: 1.5rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - desktop: ( - font-family: "'Inter', sans-serif", - font-size: 1.5rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), -) !default; - -$heading-xlarge-text: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 3rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - tablet: ( - font-family: "'Inter', sans-serif", - font-size: 4rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - desktop: ( - font-family: "'Inter', sans-serif", - font-size: 4rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), -) !default; - -$heading-xsmall-text: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - tablet: ( - font-family: "'Inter', sans-serif", - font-size: 1.25rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - desktop: ( - font-family: "'Inter', sans-serif", - font-size: 1.25rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), -) !default; - -$styles: ( - body-large-text-bold: $body-large-text-bold, - body-large-text-italic: $body-large-text-italic, - body-large-text-regular: $body-large-text-regular, - body-large-text-semibold: $body-large-text-semibold, - body-medium-text-bold: $body-medium-text-bold, - body-medium-text-italic: $body-medium-text-italic, - body-medium-text-regular: $body-medium-text-regular, - body-medium-text-semibold: $body-medium-text-semibold, - body-small-text-bold: $body-small-text-bold, - body-small-text-italic: $body-small-text-italic, - body-small-text-regular: $body-small-text-regular, - body-small-text-semibold: $body-small-text-semibold, - body-xlarge-text-bold: $body-xlarge-text-bold, - body-xlarge-text-italic: $body-xlarge-text-italic, - body-xlarge-text-regular: $body-xlarge-text-regular, - body-xlarge-text-semibold: $body-xlarge-text-semibold, - body-xsmall-text-bold: $body-xsmall-text-bold, - body-xsmall-text-italic: $body-xsmall-text-italic, - body-xsmall-text-regular: $body-xsmall-text-regular, - body-xsmall-text-semibold: $body-xsmall-text-semibold, - heading-large-text: $heading-large-text, - heading-medium-text: $heading-medium-text, - heading-small-text: $heading-small-text, - heading-xlarge-text: $heading-xlarge-text, - heading-xsmall-text: $heading-xsmall-text, -) !default; diff --git a/packages/design-tokens/src/scss/global-tokens/_borders.scss b/packages/design-tokens/src/scss/global-tokens/_borders.scss new file mode 100644 index 0000000000..45779987f6 --- /dev/null +++ b/packages/design-tokens/src/scss/global-tokens/_borders.scss @@ -0,0 +1,4 @@ +/* This file was generated by Supernova, don't change manually */ +$border-width-0: 0 !default; +$border-width-100: 1px !default; +$border-width-200: 2px !default; diff --git a/packages/design-tokens/src/scss/global-tokens/_gradients.scss b/packages/design-tokens/src/scss/global-tokens/_gradients.scss new file mode 100644 index 0000000000..9ebdd85b8e --- /dev/null +++ b/packages/design-tokens/src/scss/global-tokens/_gradients.scss @@ -0,0 +1,10 @@ +/* This file was generated by Supernova, don't change manually */ +$gradient-basic-overlay: linear-gradient( + var(--gradient-angle, 90deg), + var(--spirit-color-gradient-basic-overlay-color-01, #fff) 0%, + var(--spirit-color-gradient-basic-overlay-color-02, #fff0) 100% +) !default; + +$gradients: ( + basic-overlay: $gradient-basic-overlay, +) !default; diff --git a/packages/design-tokens/src/scss/generated/_other.scss b/packages/design-tokens/src/scss/global-tokens/_other.scss similarity index 51% rename from packages/design-tokens/src/scss/generated/_other.scss rename to packages/design-tokens/src/scss/global-tokens/_other.scss index 4f68fcf173..8021c3dc58 100644 --- a/packages/design-tokens/src/scss/generated/_other.scss +++ b/packages/design-tokens/src/scss/global-tokens/_other.scss @@ -1,38 +1,42 @@ -// Generated Generic Tokens (Other) from Supernova. Do not edit manually. +/* This file was generated by Supernova, don't change manually */ +$container-padding-mobile: 16px !default; +$container-padding-tablet: 32px !default; +$container-padding-desktop: 32px !default; + $container-max-width: 1280px !default; -$grid-columns: 12 !default; + $breakpoint-mobile: 0 !default; -$container-padding-mobile: 16px !default; -$grid-gutter-mobile: 16px !default; $breakpoint-tablet: 768px !default; -$container-padding-tablet: 32px !default; -$grid-gutter-tablet: 32px !default; $breakpoint-desktop: 1280px !default; -$container-padding-desktop: 32px !default; -$grid-gutter-desktop: 32px !default; + +$grid-spacing-mobile: 16px !default; +$grid-spacing-desktop: 32px !default; +$grid-spacing-tablet: 32px !default; + +$grid-columns: 12 !default; + +$css-variable-prefix: spirit- !default; $containers: ( + padding: ( + mobile: $container-padding-mobile, + tablet: $container-padding-tablet, + desktop: $container-padding-desktop, + ), max-width: $container-max-width, ) !default; -$grids: ( - columns: $grid-columns, -) !default; - $breakpoints: ( mobile: $breakpoint-mobile, tablet: $breakpoint-tablet, desktop: $breakpoint-desktop, ) !default; -$container-paddings: ( - mobile: $container-padding-mobile, - tablet: $container-padding-tablet, - desktop: $container-padding-desktop, -) !default; - -$grid-gutters: ( - mobile: $grid-gutter-mobile, - tablet: $grid-gutter-tablet, - desktop: $grid-gutter-desktop, +$grids: ( + spacing: ( + mobile: $grid-spacing-mobile, + desktop: $grid-spacing-desktop, + tablet: $grid-spacing-tablet, + ), + columns: $grid-columns, ) !default; diff --git a/packages/design-tokens/src/scss/global-tokens/_radii.scss b/packages/design-tokens/src/scss/global-tokens/_radii.scss new file mode 100644 index 0000000000..4aa5c8619a --- /dev/null +++ b/packages/design-tokens/src/scss/global-tokens/_radii.scss @@ -0,0 +1,18 @@ +/* This file was generated by Supernova, don't change manually */ +$radius-0: 0 !default; +$radius-100: 2px !default; +$radius-200: 4px !default; +$radius-300: 8px !default; +$radius-400: 12px !default; +$radius-500: 16px !default; +$radius-full: 9999px !default; + +$radii: ( + 0: $radius-0, + 100: $radius-100, + 200: $radius-200, + 300: $radius-300, + 400: $radius-400, + 500: $radius-500, + full: $radius-full, +) !default; diff --git a/packages/design-tokens/src/scss/global-tokens/_shadows.scss b/packages/design-tokens/src/scss/global-tokens/_shadows.scss new file mode 100644 index 0000000000..fedec905b0 --- /dev/null +++ b/packages/design-tokens/src/scss/global-tokens/_shadows.scss @@ -0,0 +1,18 @@ +/* This file was generated by Supernova, don't change manually */ +$focus-ring: 0 0 0 2px var(--spirit-color-focus-focus-ring-color-01, #d2c2ffb2) !default; + +$shadow-100: 0 2px 8px 0 var(--spirit-color-shadow-shadow-100-color-01, #00000026) !default; +$shadow-200: 0 4px 12px 0 var(--spirit-color-shadow-shadow-200-color-01, #0003) !default; +$shadow-300: 0 8px 24px 0 var(--spirit-color-shadow-shadow-300-color-01, #00000040) !default; +$shadow-400: 0 12px 32px 0 var(--spirit-color-shadow-shadow-400-color-01, #00000040) !default; + +$focus: ( + focus-ring: $focus-ring, +) !default; + +$shadows: ( + 100: $shadow-100, + 200: $shadow-200, + 300: $shadow-300, + 400: $shadow-400, +) !default; diff --git a/packages/design-tokens/src/scss/global-tokens/_spacing.scss b/packages/design-tokens/src/scss/global-tokens/_spacing.scss new file mode 100644 index 0000000000..942edf2eea --- /dev/null +++ b/packages/design-tokens/src/scss/global-tokens/_spacing.scss @@ -0,0 +1,40 @@ +/* This file was generated by Supernova, don't change manually */ +$space-0: 0 !default; +$space-100: 1px !default; +$space-200: 2px !default; +$space-300: 4px !default; +$space-400: 6px !default; +$space-500: 8px !default; +$space-600: 12px !default; +$space-700: 16px !default; +$space-800: 20px !default; +$space-900: 24px !default; +$space-1000: 32px !default; +$space-1100: 40px !default; +$space-1200: 48px !default; +$space-1300: 56px !default; +$space-1400: 64px !default; +$space-1500: 72px !default; +$space-1600: 80px !default; +$space-1700: 96px !default; + +$spaces: ( + 0: $space-0, + 100: $space-100, + 200: $space-200, + 300: $space-300, + 400: $space-400, + 500: $space-500, + 600: $space-600, + 700: $space-700, + 800: $space-800, + 900: $space-900, + 1000: $space-1000, + 1100: $space-1100, + 1200: $space-1200, + 1300: $space-1300, + 1400: $space-1400, + 1500: $space-1500, + 1600: $space-1600, + 1700: $space-1700, +) !default; diff --git a/packages/design-tokens/src/scss/global-tokens/_typography.scss b/packages/design-tokens/src/scss/global-tokens/_typography.scss new file mode 100644 index 0000000000..26c0b6e5f5 --- /dev/null +++ b/packages/design-tokens/src/scss/global-tokens/_typography.scss @@ -0,0 +1,723 @@ +/* This file was generated by Supernova, don't change manually */ +$heading-xlarge-regular: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 36px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-xlarge-semibold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 36px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), +) !default; + +$heading-xlarge-bold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 36px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), +) !default; + +$heading-xlarge-italic: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 36px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-large-regular: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-large-semibold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), +) !default; + +$heading-large-bold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), +) !default; + +$heading-large-italic: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-medium-regular: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 400, + line-height: 1.3, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 400, + line-height: 1.3, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 400, + line-height: 1.4, + ), +) !default; + +$heading-medium-semibold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 600, + line-height: 1.3, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 600, + line-height: 1.3, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 600, + line-height: 1.4, + ), +) !default; + +$heading-medium-bold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 700, + line-height: 1.3, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 700, + line-height: 1.3, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 700, + line-height: 1.4, + ), +) !default; + +$heading-medium-italic: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: italic, + font-weight: 400, + line-height: 1.3, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: italic, + font-weight: 400, + line-height: 1.3, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: italic, + font-weight: 400, + line-height: 1.4, + ), +) !default; + +$heading-small-regular: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 400, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 400, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 400, + line-height: 1.4, + ), +) !default; + +$heading-small-semibold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 600, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 600, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 600, + line-height: 1.4, + ), +) !default; + +$heading-small-bold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 700, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 700, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 700, + line-height: 1.4, + ), +) !default; + +$heading-small-italic: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: italic, + font-weight: 400, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: italic, + font-weight: 400, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 400, + line-height: 1.4, + ), +) !default; + +$heading-xsmall-regular: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 400, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 400, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 400, + line-height: 1.4, + ), +) !default; + +$heading-xsmall-semibold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 600, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 600, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 600, + line-height: 1.4, + ), +) !default; + +$heading-xsmall-bold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 700, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 700, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 700, + line-height: 1.4, + ), +) !default; + +$heading-xsmall-italic: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 400, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 400, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: italic, + font-weight: 400, + line-height: 1.4, + ), +) !default; + +$body-xlarge-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-xlarge-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 600, + line-height: 1.5, + ), +) !default; + +$body-xlarge-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-xlarge-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-large-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-large-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 600, + line-height: 1.5, + ), +) !default; + +$body-large-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-large-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: italic, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-medium-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-medium-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 600, + line-height: 1.5, + ), +) !default; + +$body-medium-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-medium-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: italic, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-small-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-small-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 600, + line-height: 1.5, + ), +) !default; + +$body-small-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-small-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: italic, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-xsmall-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: normal, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-xsmall-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: normal, + font-weight: 600, + line-height: 1.5, + ), +) !default; + +$body-xsmall-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: normal, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-xsmall-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: italic, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$styles: ( + heading-xlarge-regular: $heading-xlarge-regular, + heading-xlarge-semibold: $heading-xlarge-semibold, + heading-xlarge-bold: $heading-xlarge-bold, + heading-xlarge-italic: $heading-xlarge-italic, + heading-large-regular: $heading-large-regular, + heading-large-semibold: $heading-large-semibold, + heading-large-bold: $heading-large-bold, + heading-large-italic: $heading-large-italic, + heading-medium-regular: $heading-medium-regular, + heading-medium-semibold: $heading-medium-semibold, + heading-medium-bold: $heading-medium-bold, + heading-medium-italic: $heading-medium-italic, + heading-small-regular: $heading-small-regular, + heading-small-semibold: $heading-small-semibold, + heading-small-bold: $heading-small-bold, + heading-small-italic: $heading-small-italic, + heading-xsmall-regular: $heading-xsmall-regular, + heading-xsmall-semibold: $heading-xsmall-semibold, + heading-xsmall-bold: $heading-xsmall-bold, + heading-xsmall-italic: $heading-xsmall-italic, + body-xlarge-regular: $body-xlarge-regular, + body-xlarge-semibold: $body-xlarge-semibold, + body-xlarge-bold: $body-xlarge-bold, + body-xlarge-italic: $body-xlarge-italic, + body-large-regular: $body-large-regular, + body-large-semibold: $body-large-semibold, + body-large-bold: $body-large-bold, + body-large-italic: $body-large-italic, + body-medium-regular: $body-medium-regular, + body-medium-semibold: $body-medium-semibold, + body-medium-bold: $body-medium-bold, + body-medium-italic: $body-medium-italic, + body-small-regular: $body-small-regular, + body-small-semibold: $body-small-semibold, + body-small-bold: $body-small-bold, + body-small-italic: $body-small-italic, + body-xsmall-regular: $body-xsmall-regular, + body-xsmall-semibold: $body-xsmall-semibold, + body-xsmall-bold: $body-xsmall-bold, + body-xsmall-italic: $body-xsmall-italic, +) !default; diff --git a/packages/design-tokens/src/scss/generated/index.scss b/packages/design-tokens/src/scss/global-tokens/index.scss similarity index 75% rename from packages/design-tokens/src/scss/generated/index.scss rename to packages/design-tokens/src/scss/global-tokens/index.scss index 09d09db0f5..2b65192ccc 100644 --- a/packages/design-tokens/src/scss/generated/index.scss +++ b/packages/design-tokens/src/scss/global-tokens/index.scss @@ -1,8 +1,7 @@ @forward 'borders'; -@forward 'colors'; @forward 'gradients'; -@forward 'measures'; @forward 'other'; @forward 'radii'; @forward 'shadows'; +@forward 'spacing'; @forward 'typography'; diff --git a/packages/design-tokens/src/scss/index.scss b/packages/design-tokens/src/scss/index.scss deleted file mode 100644 index 9b5c0af68a..0000000000 --- a/packages/design-tokens/src/scss/index.scss +++ /dev/null @@ -1 +0,0 @@ -@forward 'generated'; diff --git a/packages/design-tokens/src/scss/themes/_color-tokens.scss b/packages/design-tokens/src/scss/themes/_color-tokens.scss new file mode 100644 index 0000000000..776e985669 --- /dev/null +++ b/packages/design-tokens/src/scss/themes/_color-tokens.scss @@ -0,0 +1,417 @@ +/* This file was generated by Supernova, don't change manually */ +$background-backdrop: var(--spirit-color-background-backdrop); + +$background-interactive-state-active: var(--spirit-color-background-interactive-state-active); +$background-interactive-state-default: var(--spirit-color-background-interactive-state-default); +$background-interactive-state-hover: var(--spirit-color-background-interactive-state-hover); + +$background-primary: var(--spirit-color-background-primary); +$background-secondary: var(--spirit-color-background-secondary); +$background-tertiary: var(--spirit-color-background-tertiary); + +$border-basic: var(--spirit-color-border-basic); +$border-focus: var(--spirit-color-border-focus); + +$border-interactive-state-active: var(--spirit-color-border-interactive-state-active); +$border-interactive-state-default: var(--spirit-color-border-interactive-state-default); +$border-interactive-state-hover: var(--spirit-color-border-interactive-state-hover); +$border-interactive-state-selected: var(--spirit-color-border-interactive-state-selected); + +$component-button-plain-border: var(--spirit-color-component-button-plain-border); +$component-button-plain-content: var(--spirit-color-component-button-plain-content); +$component-button-plain-state-active: var(--spirit-color-component-button-plain-state-active); +$component-button-plain-state-default: var(--spirit-color-component-button-plain-state-default); +$component-button-plain-state-hover: var(--spirit-color-component-button-plain-state-hover); + +$component-button-primary-border: var(--spirit-color-component-button-primary-border); +$component-button-primary-content: var(--spirit-color-component-button-primary-content); +$component-button-primary-state-active: var(--spirit-color-component-button-primary-state-active); +$component-button-primary-state-default: var(--spirit-color-component-button-primary-state-default); +$component-button-primary-state-hover: var(--spirit-color-component-button-primary-state-hover); + +$component-button-secondary-border: var(--spirit-color-component-button-secondary-border); +$component-button-secondary-content: var(--spirit-color-component-button-secondary-content); +$component-button-secondary-state-active: var(--spirit-color-component-button-secondary-state-active); +$component-button-secondary-state-default: var(--spirit-color-component-button-secondary-state-default); +$component-button-secondary-state-hover: var(--spirit-color-component-button-secondary-state-hover); + +$component-button-tertiary-border: var(--spirit-color-component-button-tertiary-border); +$component-button-tertiary-content: var(--spirit-color-component-button-tertiary-content); +$component-button-tertiary-state-active: var(--spirit-color-component-button-tertiary-state-active); +$component-button-tertiary-state-default: var(--spirit-color-component-button-tertiary-state-default); +$component-button-tertiary-state-hover: var(--spirit-color-component-button-tertiary-state-hover); + +$component-header-background: var(--spirit-color-component-header-background); +$component-header-item-background-state-active: var(--spirit-color-component-header-item-background-state-active); +$component-header-item-background-state-default: var(--spirit-color-component-header-item-background-state-default); +$component-header-item-background-state-hover: var(--spirit-color-component-header-item-background-state-hover); +$component-header-item-background-state-selected: var(--spirit-color-component-header-item-background-state-selected); +$component-header-item-state-active: var(--spirit-color-component-header-item-state-active); +$component-header-item-state-default: var(--spirit-color-component-header-item-state-default); +$component-header-item-state-hover: var(--spirit-color-component-header-item-state-hover); +$component-header-item-state-selected: var(--spirit-color-component-header-item-state-selected); +$component-header-stripe-state-selected: var(--spirit-color-component-header-stripe-state-selected); +$component-header-stripe-state-unselected: var(--spirit-color-component-header-stripe-state-unselected); + +$component-toggle-selected-border: var(--spirit-color-component-toggle-selected-border); +$component-toggle-selected-content: var(--spirit-color-component-toggle-selected-content); +$component-toggle-selected-state-active: var(--spirit-color-component-toggle-selected-state-active); +$component-toggle-selected-state-default: var(--spirit-color-component-toggle-selected-state-default); +$component-toggle-selected-state-hover: var(--spirit-color-component-toggle-selected-state-hover); +$component-toggle-unselected-border: var(--spirit-color-component-toggle-unselected-border); +$component-toggle-unselected-content: var(--spirit-color-component-toggle-unselected-content); +$component-toggle-unselected-state-active: var(--spirit-color-component-toggle-unselected-state-active); +$component-toggle-unselected-state-default: var(--spirit-color-component-toggle-unselected-state-default); +$component-toggle-unselected-state-hover: var(--spirit-color-component-toggle-unselected-state-hover); + +$disabled-background: var(--spirit-color-disabled-background); +$disabled-border: var(--spirit-color-disabled-border); +$disabled-content: var(--spirit-color-disabled-content); +$disabled-foreground: var(--spirit-color-disabled-foreground); + +$emotion-danger-background-basic: var(--spirit-color-emotion-danger-background-basic); +$emotion-danger-background-subtle: var(--spirit-color-emotion-danger-background-subtle); +$emotion-danger-border-basic: var(--spirit-color-emotion-danger-border-basic); +$emotion-danger-border-subtle: var(--spirit-color-emotion-danger-border-subtle); +$emotion-danger-content-basic: var(--spirit-color-emotion-danger-content-basic); +$emotion-danger-content-subtle: var(--spirit-color-emotion-danger-content-subtle); +$emotion-danger-state-active: var(--spirit-color-emotion-danger-state-active); +$emotion-danger-state-default: var(--spirit-color-emotion-danger-state-default); +$emotion-danger-state-hover: var(--spirit-color-emotion-danger-state-hover); + +$emotion-informative-background-basic: var(--spirit-color-emotion-informative-background-basic); +$emotion-informative-background-subtle: var(--spirit-color-emotion-informative-background-subtle); +$emotion-informative-border-basic: var(--spirit-color-emotion-informative-border-basic); +$emotion-informative-border-subtle: var(--spirit-color-emotion-informative-border-subtle); +$emotion-informative-content-basic: var(--spirit-color-emotion-informative-content-basic); +$emotion-informative-content-subtle: var(--spirit-color-emotion-informative-content-subtle); +$emotion-informative-state-active: var(--spirit-color-emotion-informative-state-active); +$emotion-informative-state-default: var(--spirit-color-emotion-informative-state-default); +$emotion-informative-state-hover: var(--spirit-color-emotion-informative-state-hover); + +$emotion-success-background-basic: var(--spirit-color-emotion-success-background-basic); +$emotion-success-background-subtle: var(--spirit-color-emotion-success-background-subtle); +$emotion-success-border-basic: var(--spirit-color-emotion-success-border-basic); +$emotion-success-border-subtle: var(--spirit-color-emotion-success-border-subtle); +$emotion-success-content-basic: var(--spirit-color-emotion-success-content-basic); +$emotion-success-content-subtle: var(--spirit-color-emotion-success-content-subtle); +$emotion-success-state-active: var(--spirit-color-emotion-success-state-active); +$emotion-success-state-default: var(--spirit-color-emotion-success-state-default); +$emotion-success-state-hover: var(--spirit-color-emotion-success-state-hover); + +$emotion-warning-background-basic: var(--spirit-color-emotion-warning-background-basic); +$emotion-warning-background-subtle: var(--spirit-color-emotion-warning-background-subtle); +$emotion-warning-border-basic: var(--spirit-color-emotion-warning-border-basic); +$emotion-warning-border-subtle: var(--spirit-color-emotion-warning-border-subtle); +$emotion-warning-content-basic: var(--spirit-color-emotion-warning-content-basic); +$emotion-warning-content-subtle: var(--spirit-color-emotion-warning-content-subtle); +$emotion-warning-state-active: var(--spirit-color-emotion-warning-state-active); +$emotion-warning-state-default: var(--spirit-color-emotion-warning-state-default); +$emotion-warning-state-hover: var(--spirit-color-emotion-warning-state-hover); + +$focus-focus-ring-color-01: var(--spirit-color-focus-focus-ring-color-01); + +$form-field-danger: var(--spirit-color-form-field-danger); + +$form-field-filled-background-state-active: var(--spirit-color-form-field-filled-background-state-active); +$form-field-filled-background-state-default: var(--spirit-color-form-field-filled-background-state-default); +$form-field-filled-background-state-hover: var(--spirit-color-form-field-filled-background-state-hover); +$form-field-filled-border-state-active: var(--spirit-color-form-field-filled-border-state-active); +$form-field-filled-border-state-default: var(--spirit-color-form-field-filled-border-state-default); +$form-field-filled-border-state-hover: var(--spirit-color-form-field-filled-border-state-hover); +$form-field-filled-border-state-selected: var(--spirit-color-form-field-filled-border-state-selected); +$form-field-filled-content: var(--spirit-color-form-field-filled-content); +$form-field-filled-placeholder: var(--spirit-color-form-field-filled-placeholder); + +$form-field-helper-text: var(--spirit-color-form-field-helper-text); +$form-field-label: var(--spirit-color-form-field-label); +$form-field-success: var(--spirit-color-form-field-success); +$form-field-warning: var(--spirit-color-form-field-warning); + +$gradient-basic-overlay-color-01: var(--spirit-color-gradient-basic-overlay-color-01); +$gradient-basic-overlay-color-02: var(--spirit-color-gradient-basic-overlay-color-02); + +$link-primary-state-active: var(--spirit-color-link-primary-state-active); +$link-primary-state-default: var(--spirit-color-link-primary-state-default); +$link-primary-state-hover: var(--spirit-color-link-primary-state-hover); + +$link-secondary-state-active: var(--spirit-color-link-secondary-state-active); +$link-secondary-state-default: var(--spirit-color-link-secondary-state-default); +$link-secondary-state-hover: var(--spirit-color-link-secondary-state-hover); + +$link-state-visited: var(--spirit-color-link-state-visited); + +$link-tertiary-state-active: var(--spirit-color-link-tertiary-state-active); +$link-tertiary-state-default: var(--spirit-color-link-tertiary-state-default); +$link-tertiary-state-hover: var(--spirit-color-link-tertiary-state-hover); + +$neutral-background-basic: var(--spirit-color-neutral-background-basic); +$neutral-background-subtle: var(--spirit-color-neutral-background-subtle); +$neutral-border-basic: var(--spirit-color-neutral-border-basic); +$neutral-border-subtle: var(--spirit-color-neutral-border-subtle); +$neutral-content-basic: var(--spirit-color-neutral-content-basic); +$neutral-content-subtle: var(--spirit-color-neutral-content-subtle); +$neutral-state-active: var(--spirit-color-neutral-state-active); +$neutral-state-default: var(--spirit-color-neutral-state-default); +$neutral-state-hover: var(--spirit-color-neutral-state-hover); + +$selected-content-basic: var(--spirit-color-selected-content-basic); +$selected-content-subtle: var(--spirit-color-selected-content-subtle); +$selected-state-active: var(--spirit-color-selected-state-active); +$selected-state-default: var(--spirit-color-selected-state-default); +$selected-state-hover: var(--spirit-color-selected-state-hover); + +$shadow-shadow-100-color-01: var(--spirit-color-shadow-shadow-100-color-01); + +$shadow-shadow-200-color-01: var(--spirit-color-shadow-shadow-200-color-01); + +$shadow-shadow-300-color-01: var(--spirit-color-shadow-shadow-300-color-01); + +$shadow-shadow-400-color-01: var(--spirit-color-shadow-shadow-400-color-01); + +$text-primary: var(--spirit-color-text-primary); +$text-secondary: var(--spirit-color-text-secondary); +$text-tertiary: var(--spirit-color-text-tertiary); + +$background-colors: ( + backdrop: $background-backdrop, + interactive: ( + state-active: $background-interactive-state-active, + state-default: $background-interactive-state-default, + state-hover: $background-interactive-state-hover, + ), + primary: $background-primary, + secondary: $background-secondary, + tertiary: $background-tertiary, +) !default; + +$border-colors: ( + basic: $border-basic, + focus: $border-focus, + interactive: ( + state-active: $border-interactive-state-active, + state-default: $border-interactive-state-default, + state-hover: $border-interactive-state-hover, + state-selected: $border-interactive-state-selected, + ), +) !default; + +$component-colors: ( + button: ( + plain: ( + border: $component-button-plain-border, + content: $component-button-plain-content, + state-active: $component-button-plain-state-active, + state-default: $component-button-plain-state-default, + state-hover: $component-button-plain-state-hover, + ), + primary: ( + border: $component-button-primary-border, + content: $component-button-primary-content, + state-active: $component-button-primary-state-active, + state-default: $component-button-primary-state-default, + state-hover: $component-button-primary-state-hover, + ), + secondary: ( + border: $component-button-secondary-border, + content: $component-button-secondary-content, + state-active: $component-button-secondary-state-active, + state-default: $component-button-secondary-state-default, + state-hover: $component-button-secondary-state-hover, + ), + tertiary: ( + border: $component-button-tertiary-border, + content: $component-button-tertiary-content, + state-active: $component-button-tertiary-state-active, + state-default: $component-button-tertiary-state-default, + state-hover: $component-button-tertiary-state-hover, + ), + ), + header: ( + background: $component-header-background, + item-background-state-active: $component-header-item-background-state-active, + item-background-state-default: $component-header-item-background-state-default, + item-background-state-hover: $component-header-item-background-state-hover, + item-background-state-selected: $component-header-item-background-state-selected, + item-state-active: $component-header-item-state-active, + item-state-default: $component-header-item-state-default, + item-state-hover: $component-header-item-state-hover, + item-state-selected: $component-header-item-state-selected, + stripe-state-selected: $component-header-stripe-state-selected, + stripe-state-unselected: $component-header-stripe-state-unselected, + ), + toggle: ( + selected-border: $component-toggle-selected-border, + selected-content: $component-toggle-selected-content, + selected-state-active: $component-toggle-selected-state-active, + selected-state-default: $component-toggle-selected-state-default, + selected-state-hover: $component-toggle-selected-state-hover, + unselected-border: $component-toggle-unselected-border, + unselected-content: $component-toggle-unselected-content, + unselected-state-active: $component-toggle-unselected-state-active, + unselected-state-default: $component-toggle-unselected-state-default, + unselected-state-hover: $component-toggle-unselected-state-hover, + ), +) !default; + +$disabled-colors: ( + background: $disabled-background, + border: $disabled-border, + content: $disabled-content, + foreground: $disabled-foreground, +) !default; + +$emotion-colors: ( + danger: ( + background-basic: $emotion-danger-background-basic, + background-subtle: $emotion-danger-background-subtle, + border-basic: $emotion-danger-border-basic, + border-subtle: $emotion-danger-border-subtle, + content-basic: $emotion-danger-content-basic, + content-subtle: $emotion-danger-content-subtle, + state-active: $emotion-danger-state-active, + state-default: $emotion-danger-state-default, + state-hover: $emotion-danger-state-hover, + ), + informative: ( + background-basic: $emotion-informative-background-basic, + background-subtle: $emotion-informative-background-subtle, + border-basic: $emotion-informative-border-basic, + border-subtle: $emotion-informative-border-subtle, + content-basic: $emotion-informative-content-basic, + content-subtle: $emotion-informative-content-subtle, + state-active: $emotion-informative-state-active, + state-default: $emotion-informative-state-default, + state-hover: $emotion-informative-state-hover, + ), + success: ( + background-basic: $emotion-success-background-basic, + background-subtle: $emotion-success-background-subtle, + border-basic: $emotion-success-border-basic, + border-subtle: $emotion-success-border-subtle, + content-basic: $emotion-success-content-basic, + content-subtle: $emotion-success-content-subtle, + state-active: $emotion-success-state-active, + state-default: $emotion-success-state-default, + state-hover: $emotion-success-state-hover, + ), + warning: ( + background-basic: $emotion-warning-background-basic, + background-subtle: $emotion-warning-background-subtle, + border-basic: $emotion-warning-border-basic, + border-subtle: $emotion-warning-border-subtle, + content-basic: $emotion-warning-content-basic, + content-subtle: $emotion-warning-content-subtle, + state-active: $emotion-warning-state-active, + state-default: $emotion-warning-state-default, + state-hover: $emotion-warning-state-hover, + ), +) !default; + +$focus-colors: ( + focus-ring: ( + color-01: $focus-focus-ring-color-01, + ), +) !default; + +$form-field-colors: ( + danger: $form-field-danger, + filled: ( + background-state-active: $form-field-filled-background-state-active, + background-state-default: $form-field-filled-background-state-default, + background-state-hover: $form-field-filled-background-state-hover, + border-state-active: $form-field-filled-border-state-active, + border-state-default: $form-field-filled-border-state-default, + border-state-hover: $form-field-filled-border-state-hover, + border-state-selected: $form-field-filled-border-state-selected, + content: $form-field-filled-content, + placeholder: $form-field-filled-placeholder, + ), + helper-text: $form-field-helper-text, + label: $form-field-label, + success: $form-field-success, + warning: $form-field-warning, +) !default; + +$gradient-colors: ( + basic-overlay: ( + color-01: $gradient-basic-overlay-color-01, + color-02: $gradient-basic-overlay-color-02, + ), +) !default; + +$link-colors: ( + primary: ( + state-active: $link-primary-state-active, + state-default: $link-primary-state-default, + state-hover: $link-primary-state-hover, + ), + secondary: ( + state-active: $link-secondary-state-active, + state-default: $link-secondary-state-default, + state-hover: $link-secondary-state-hover, + ), + state-visited: $link-state-visited, + tertiary: ( + state-active: $link-tertiary-state-active, + state-default: $link-tertiary-state-default, + state-hover: $link-tertiary-state-hover, + ), +) !default; + +$neutral-colors: ( + background-basic: $neutral-background-basic, + background-subtle: $neutral-background-subtle, + border-basic: $neutral-border-basic, + border-subtle: $neutral-border-subtle, + content-basic: $neutral-content-basic, + content-subtle: $neutral-content-subtle, + state-active: $neutral-state-active, + state-default: $neutral-state-default, + state-hover: $neutral-state-hover, +) !default; + +$selected-colors: ( + content-basic: $selected-content-basic, + content-subtle: $selected-content-subtle, + state-active: $selected-state-active, + state-default: $selected-state-default, + state-hover: $selected-state-hover, +) !default; + +$shadow-colors: ( + shadow-100: ( + color-01: $shadow-shadow-100-color-01, + ), + shadow-200: ( + color-01: $shadow-shadow-200-color-01, + ), + shadow-300: ( + color-01: $shadow-shadow-300-color-01, + ), + shadow-400: ( + color-01: $shadow-shadow-400-color-01, + ), +) !default; + +$text-colors: ( + primary: $text-primary, + secondary: $text-secondary, + tertiary: $text-tertiary, +) !default; + +$colors: ( + background: $background-colors, + border: $border-colors, + component: $component-colors, + disabled: $disabled-colors, + emotion: $emotion-colors, + focus: $focus-colors, + form-field: $form-field-colors, + gradient: $gradient-colors, + link: $link-colors, + neutral: $neutral-colors, + selected: $selected-colors, + shadow: $shadow-colors, + text: $text-colors, +) !default; diff --git a/packages/design-tokens/src/scss/themes/index.scss b/packages/design-tokens/src/scss/themes/index.scss new file mode 100644 index 0000000000..87f5c5395c --- /dev/null +++ b/packages/design-tokens/src/scss/themes/index.scss @@ -0,0 +1 @@ +@forward 'color-tokens'; diff --git a/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss new file mode 100644 index 0000000000..98f5f6ebe4 --- /dev/null +++ b/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss @@ -0,0 +1,318 @@ +/* This file was generated by Supernova, don't change manually */ +$background-backdrop: #1a1b1b80 !default; + +$background-interactive-state-active: #f1edff !default; +$background-interactive-state-default: #fff0 !default; +$background-interactive-state-hover: #f8f6ff !default; + +$background-primary: #fff !default; +$background-secondary: #f2f2f2 !default; +$background-tertiary: #f1edff !default; + +$border-basic: #d9d9d9 !default; +$border-focus: #7847ff !default; + +$border-interactive-state-active: #a5a5a5 !default; +$border-interactive-state-default: #bfbfbf !default; +$border-interactive-state-hover: #b2b2b2 !default; +$border-interactive-state-selected: #7847ff !default; + +$component-button-plain-border: #fff0 !default; +$component-button-plain-content: #6039cc !default; +$component-button-plain-state-active: #e4daff !default; +$component-button-plain-state-default: #fff0 !default; +$component-button-plain-state-hover: #f1edff !default; + +$component-button-primary-border: #4e2ea6 !default; +$component-button-primary-content: #fff !default; +$component-button-primary-state-active: #6039cc !default; +$component-button-primary-state-default: #7847ff !default; +$component-button-primary-state-hover: #6c40e5 !default; + +$component-button-secondary-border: #7847ff !default; +$component-button-secondary-content: #6039cc !default; +$component-button-secondary-state-active: #e4daff !default; +$component-button-secondary-state-default: #fff !default; +$component-button-secondary-state-hover: #f1edff !default; + +$component-button-tertiary-border: #e5e5e5 !default; +$component-button-tertiary-content: #202020 !default; +$component-button-tertiary-state-active: #d9d9d9 !default; +$component-button-tertiary-state-default: #f2f2f2 !default; +$component-button-tertiary-state-hover: #e5e5e5 !default; + +$component-header-background: #fff !default; +$component-header-item-background-state-active: #f1edff !default; +$component-header-item-background-state-default: #fff0 !default; +$component-header-item-background-state-hover: #f8f6ff !default; +$component-header-item-background-state-selected: #fff0 !default; +$component-header-item-state-active: #4e2ea6 !default; +$component-header-item-state-default: #404040 !default; +$component-header-item-state-hover: #6039cc !default; +$component-header-item-state-selected: #6039cc !default; +$component-header-stripe-state-selected: #ffbe00 !default; +$component-header-stripe-state-unselected: #e4daff !default; + +$component-toggle-selected-border: #327c3f !default; +$component-toggle-selected-content: #fff !default; +$component-toggle-selected-state-active: #3e9b4f !default; +$component-toggle-selected-state-default: #327c3f !default; +$component-toggle-selected-state-hover: #388b47 !default; +$component-toggle-unselected-border: #a5a5a5 !default; +$component-toggle-unselected-content: #404040 !default; +$component-toggle-unselected-state-active: #f2f2f2 !default; +$component-toggle-unselected-state-default: #fff !default; +$component-toggle-unselected-state-hover: #f9f9f9 !default; + +$disabled-background: #f9f9f9 !default; +$disabled-border: #e5e5e5 !default; +$disabled-content: #a5a5a5 !default; +$disabled-foreground: #d9d9d9 !default; + +$emotion-danger-background-basic: #b60000 !default; +$emotion-danger-background-subtle: #fef2f2 !default; +$emotion-danger-border-basic: #b60000 !default; +$emotion-danger-border-subtle: #f18080 !default; +$emotion-danger-content-basic: #940000 !default; +$emotion-danger-content-subtle: #fff !default; +$emotion-danger-state-active: #e40000 !default; +$emotion-danger-state-default: #b60000 !default; +$emotion-danger-state-hover: #cd0000 !default; + +$emotion-informative-background-basic: #0052ad !default; +$emotion-informative-background-subtle: #f2f7fd !default; +$emotion-informative-border-basic: #0052ad !default; +$emotion-informative-border-subtle: #80b2eb !default; +$emotion-informative-content-basic: #00428c !default; +$emotion-informative-content-subtle: #fff !default; +$emotion-informative-state-active: #0066d8 !default; +$emotion-informative-state-default: #0052ad !default; +$emotion-informative-state-hover: #005cc2 !default; + +$emotion-success-background-basic: #327c3f !default; +$emotion-success-background-subtle: #f5faf6 !default; +$emotion-success-border-basic: #327c3f !default; +$emotion-success-border-subtle: #9ecda7 !default; +$emotion-success-content-basic: #286533 !default; +$emotion-success-content-subtle: #fff !default; +$emotion-success-state-active: #3e9b4f !default; +$emotion-success-state-default: #327c3f !default; +$emotion-success-state-hover: #388b47 !default; + +$emotion-warning-background-basic: #c26400 !default; +$emotion-warning-background-subtle: #fef8f2 !default; +$emotion-warning-border-basic: #c26400 !default; +$emotion-warning-border-subtle: #f9be80 !default; +$emotion-warning-content-basic: #9d5100 !default; +$emotion-warning-content-subtle: #fff !default; +$emotion-warning-state-active: #f27d00 !default; +$emotion-warning-state-default: #c26400 !default; +$emotion-warning-state-hover: #da7100 !default; + +$focus-focus-ring-color-01: #d2c2ffb2 !default; + +$form-field-danger: #b60000 !default; + +$form-field-filled-background-state-active: #fff !default; +$form-field-filled-background-state-default: #fff !default; +$form-field-filled-background-state-hover: #f9f9f9 !default; +$form-field-filled-border-state-active: #7f7f7f !default; +$form-field-filled-border-state-default: #a5a5a5 !default; +$form-field-filled-border-state-hover: #999 !default; +$form-field-filled-border-state-selected: #7847ff !default; +$form-field-filled-content: #202020 !default; +$form-field-filled-placeholder: #666 !default; + +$form-field-helper-text: #7f7f7f !default; +$form-field-label: #202020 !default; +$form-field-success: #327c3f !default; +$form-field-warning: #c26400 !default; + +$gradient-basic-overlay-color-01: #fff !default; +$gradient-basic-overlay-color-02: #fff0 !default; + +$link-primary-state-active: #3c2480 !default; +$link-primary-state-default: #6039cc !default; +$link-primary-state-hover: #4e2ea6 !default; + +$link-secondary-state-active: #3c2480 !default; +$link-secondary-state-default: #535353 !default; +$link-secondary-state-hover: #4e2ea6 !default; + +$link-state-visited: #3c2480 !default; + +$link-tertiary-state-active: #3c2480 !default; +$link-tertiary-state-default: #7f7f7f !default; +$link-tertiary-state-hover: #4e2ea6 !default; + +$neutral-background-basic: #202020 !default; +$neutral-background-subtle: #f2f2f2 !default; +$neutral-border-basic: #202020 !default; +$neutral-border-subtle: #bfbfbf !default; +$neutral-content-basic: #202020 !default; +$neutral-content-subtle: #fff !default; +$neutral-state-active: #535353 !default; +$neutral-state-default: #202020 !default; +$neutral-state-hover: #404040 !default; + +$selected-content-basic: #4e2ea6 !default; +$selected-content-subtle: #fff !default; +$selected-state-active: #6039cc !default; +$selected-state-default: #7847ff !default; +$selected-state-hover: #6c40e5 !default; + +$shadow-shadow-100-color-01: #00000026 !default; + +$shadow-shadow-200-color-01: #0003 !default; + +$shadow-shadow-300-color-01: #00000040 !default; + +$shadow-shadow-400-color-01: #00000040 !default; + +$text-primary: #202020 !default; +$text-secondary: #535353 !default; +$text-tertiary: #7f7f7f !default; + +@mixin color-css-variables { + --spirit-color-background-backdrop: #{$background-backdrop}; + --spirit-color-background-interactive-state-active: #{$background-interactive-state-active}; + --spirit-color-background-interactive-state-default: #{$background-interactive-state-default}; + --spirit-color-background-interactive-state-hover: #{$background-interactive-state-hover}; + --spirit-color-background-primary: #{$background-primary}; + --spirit-color-background-secondary: #{$background-secondary}; + --spirit-color-background-tertiary: #{$background-tertiary}; + --spirit-color-border-basic: #{$border-basic}; + --spirit-color-border-focus: #{$border-focus}; + --spirit-color-border-interactive-state-active: #{$border-interactive-state-active}; + --spirit-color-border-interactive-state-default: #{$border-interactive-state-default}; + --spirit-color-border-interactive-state-hover: #{$border-interactive-state-hover}; + --spirit-color-border-interactive-state-selected: #{$border-interactive-state-selected}; + --spirit-color-component-button-plain-border: #{$component-button-plain-border}; + --spirit-color-component-button-plain-content: #{$component-button-plain-content}; + --spirit-color-component-button-plain-state-active: #{$component-button-plain-state-active}; + --spirit-color-component-button-plain-state-default: #{$component-button-plain-state-default}; + --spirit-color-component-button-plain-state-hover: #{$component-button-plain-state-hover}; + --spirit-color-component-button-primary-border: #{$component-button-primary-border}; + --spirit-color-component-button-primary-content: #{$component-button-primary-content}; + --spirit-color-component-button-primary-state-active: #{$component-button-primary-state-active}; + --spirit-color-component-button-primary-state-default: #{$component-button-primary-state-default}; + --spirit-color-component-button-primary-state-hover: #{$component-button-primary-state-hover}; + --spirit-color-component-button-secondary-border: #{$component-button-secondary-border}; + --spirit-color-component-button-secondary-content: #{$component-button-secondary-content}; + --spirit-color-component-button-secondary-state-active: #{$component-button-secondary-state-active}; + --spirit-color-component-button-secondary-state-default: #{$component-button-secondary-state-default}; + --spirit-color-component-button-secondary-state-hover: #{$component-button-secondary-state-hover}; + --spirit-color-component-button-tertiary-border: #{$component-button-tertiary-border}; + --spirit-color-component-button-tertiary-content: #{$component-button-tertiary-content}; + --spirit-color-component-button-tertiary-state-active: #{$component-button-tertiary-state-active}; + --spirit-color-component-button-tertiary-state-default: #{$component-button-tertiary-state-default}; + --spirit-color-component-button-tertiary-state-hover: #{$component-button-tertiary-state-hover}; + --spirit-color-component-header-background: #{$component-header-background}; + --spirit-color-component-header-item-background-state-default: #{$component-header-item-background-state-default}; + --spirit-color-component-header-item-background-state-hover: #{$component-header-item-background-state-hover}; + --spirit-color-component-header-item-background-state-selected: #{$component-header-item-background-state-selected}; + --spirit-color-component-header-item-state-active: #{$component-header-item-state-active}; + --spirit-color-component-header-item-state-default: #{$component-header-item-state-default}; + --spirit-color-component-header-item-state-hover: #{$component-header-item-state-hover}; + --spirit-color-component-header-item-state-selected: #{$component-header-item-state-selected}; + --spirit-color-component-header-stripe-state-selected: #{$component-header-stripe-state-selected}; + --spirit-color-component-header-stripe-state-unselected: #{$component-header-stripe-state-unselected}; + --spirit-color-component-toggle-selected-border: #{$component-toggle-selected-border}; + --spirit-color-component-toggle-selected-content: #{$component-toggle-selected-content}; + --spirit-color-component-toggle-selected-state-active: #{$component-toggle-selected-state-active}; + --spirit-color-component-toggle-selected-state-default: #{$component-toggle-selected-state-default}; + --spirit-color-component-toggle-selected-state-hover: #{$component-toggle-selected-state-hover}; + --spirit-color-component-toggle-unselected-border: #{$component-toggle-unselected-border}; + --spirit-color-component-toggle-unselected-content: #{$component-toggle-unselected-content}; + --spirit-color-component-toggle-unselected-state-active: #{$component-toggle-unselected-state-active}; + --spirit-color-component-toggle-unselected-state-default: #{$component-toggle-unselected-state-default}; + --spirit-color-component-toggle-unselected-state-hover: #{$component-toggle-unselected-state-hover}; + --spirit-color-disabled-background: #{$disabled-background}; + --spirit-color-disabled-border: #{$disabled-border}; + --spirit-color-disabled-content: #{$disabled-content}; + --spirit-color-disabled-foreground: #{$disabled-foreground}; + --spirit-color-emotion-danger-background-basic: #{$emotion-danger-background-basic}; + --spirit-color-emotion-danger-background-subtle: #{$emotion-danger-background-subtle}; + --spirit-color-emotion-danger-border-basic: #{$emotion-danger-border-basic}; + --spirit-color-emotion-danger-border-subtle: #{$emotion-danger-border-subtle}; + --spirit-color-emotion-danger-content-basic: #{$emotion-danger-content-basic}; + --spirit-color-emotion-danger-content-subtle: #{$emotion-danger-content-subtle}; + --spirit-color-emotion-danger-state-active: #{$emotion-danger-state-active}; + --spirit-color-emotion-danger-state-default: #{$emotion-danger-state-default}; + --spirit-color-emotion-danger-state-hover: #{$emotion-danger-state-hover}; + --spirit-color-emotion-informative-background-basic: #{$emotion-informative-background-basic}; + --spirit-color-emotion-informative-background-subtle: #{$emotion-informative-background-subtle}; + --spirit-color-emotion-informative-border-basic: #{$emotion-informative-border-basic}; + --spirit-color-emotion-informative-border-subtle: #{$emotion-informative-border-subtle}; + --spirit-color-emotion-informative-content-basic: #{$emotion-informative-content-basic}; + --spirit-color-emotion-informative-content-subtle: #{$emotion-informative-content-subtle}; + --spirit-color-emotion-informative-state-active: #{$emotion-informative-state-active}; + --spirit-color-emotion-informative-state-default: #{$emotion-informative-state-default}; + --spirit-color-emotion-informative-state-hover: #{$emotion-informative-state-hover}; + --spirit-color-emotion-success-background-basic: #{$emotion-success-background-basic}; + --spirit-color-emotion-success-background-subtle: #{$emotion-success-background-subtle}; + --spirit-color-emotion-success-border-basic: #{$emotion-success-border-basic}; + --spirit-color-emotion-success-border-subtle: #{$emotion-success-border-subtle}; + --spirit-color-emotion-success-content-basic: #{$emotion-success-content-basic}; + --spirit-color-emotion-success-content-subtle: #{$emotion-success-content-subtle}; + --spirit-color-emotion-success-state-active: #{$emotion-success-state-active}; + --spirit-color-emotion-success-state-default: #{$emotion-success-state-default}; + --spirit-color-emotion-success-state-hover: #{$emotion-success-state-hover}; + --spirit-color-emotion-warning-background-basic: #{$emotion-warning-background-basic}; + --spirit-color-emotion-warning-background-subtle: #{$emotion-warning-background-subtle}; + --spirit-color-emotion-warning-border-basic: #{$emotion-warning-border-basic}; + --spirit-color-emotion-warning-border-subtle: #{$emotion-warning-border-subtle}; + --spirit-color-emotion-warning-content-basic: #{$emotion-warning-content-basic}; + --spirit-color-emotion-warning-content-subtle: #{$emotion-warning-content-subtle}; + --spirit-color-emotion-warning-state-active: #{$emotion-warning-state-active}; + --spirit-color-emotion-warning-state-default: #{$emotion-warning-state-default}; + --spirit-color-emotion-warning-state-hover: #{$emotion-warning-state-hover}; + --spirit-color-focus-focus-ring-color-01: #{$focus-focus-ring-color-01}; + --spirit-color-form-field-danger: #{$form-field-danger}; + --spirit-color-form-field-filled-background-state-active: #{$form-field-filled-background-state-active}; + --spirit-color-form-field-filled-background-state-default: #{$form-field-filled-background-state-default}; + --spirit-color-form-field-filled-background-state-hover: #{$form-field-filled-background-state-hover}; + --spirit-color-form-field-filled-border-state-active: #{$form-field-filled-border-state-active}; + --spirit-color-form-field-filled-border-state-default: #{$form-field-filled-border-state-default}; + --spirit-color-form-field-filled-border-state-hover: #{$form-field-filled-border-state-hover}; + --spirit-color-form-field-filled-border-state-selected: #{$form-field-filled-border-state-selected}; + --spirit-color-form-field-filled-content: #{$form-field-filled-content}; + --spirit-color-form-field-filled-placeholder: #{$form-field-filled-placeholder}; + --spirit-color-form-field-helper-text: #{$form-field-helper-text}; + --spirit-color-form-field-label: #{$form-field-label}; + --spirit-color-form-field-success: #{$form-field-success}; + --spirit-color-form-field-warning: #{$form-field-warning}; + --spirit-color-gradient-basic-overlay-color-01: #{$gradient-basic-overlay-color-01}; + --spirit-color-gradient-basic-overlay-color-02: #{$gradient-basic-overlay-color-02}; + --spirit-color-link-primary-state-active: #{$link-primary-state-active}; + --spirit-color-link-primary-state-default: #{$link-primary-state-default}; + --spirit-color-link-primary-state-hover: #{$link-primary-state-hover}; + --spirit-color-link-secondary-state-active: #{$link-secondary-state-active}; + --spirit-color-link-secondary-state-default: #{$link-secondary-state-default}; + --spirit-color-link-secondary-state-hover: #{$link-secondary-state-hover}; + --spirit-color-link-state-visited: #{$link-state-visited}; + --spirit-color-link-tertiary-state-active: #{$link-tertiary-state-active}; + --spirit-color-link-tertiary-state-default: #{$link-tertiary-state-default}; + --spirit-color-link-tertiary-state-hover: #{$link-tertiary-state-hover}; + --spirit-color-neutral-background-basic: #{$neutral-background-basic}; + --spirit-color-neutral-background-subtle: #{$neutral-background-subtle}; + --spirit-color-neutral-border-basic: #{$neutral-border-basic}; + --spirit-color-neutral-border-subtle: #{$neutral-border-subtle}; + --spirit-color-neutral-content-basic: #{$neutral-content-basic}; + --spirit-color-neutral-content-subtle: #{$neutral-content-subtle}; + --spirit-color-neutral-state-active: #{$neutral-state-active}; + --spirit-color-neutral-state-default: #{$neutral-state-default}; + --spirit-color-neutral-state-hover: #{$neutral-state-hover}; + --spirit-color-selected-content-basic: #{$selected-content-basic}; + --spirit-color-selected-content-subtle: #{$selected-content-subtle}; + --spirit-color-selected-state-active: #{$selected-state-active}; + --spirit-color-selected-state-default: #{$selected-state-default}; + --spirit-color-selected-state-hover: #{$selected-state-hover}; + --spirit-color-shadow-shadow-100-color-01: #{$shadow-shadow-100-color-01}; + --spirit-color-shadow-shadow-200-color-01: #{$shadow-shadow-200-color-01}; + --spirit-color-shadow-shadow-300-color-01: #{$shadow-shadow-300-color-01}; + --spirit-color-shadow-shadow-400-color-01: #{$shadow-shadow-400-color-01}; + --spirit-color-text-primary: #{$text-primary}; + --spirit-color-text-secondary: #{$text-secondary}; + --spirit-color-text-tertiary: #{$text-tertiary}; +} diff --git a/packages/design-tokens/src/scss/themes/theme-light-default/index.scss b/packages/design-tokens/src/scss/themes/theme-light-default/index.scss new file mode 100644 index 0000000000..7011938362 --- /dev/null +++ b/packages/design-tokens/src/scss/themes/theme-light-default/index.scss @@ -0,0 +1 @@ +@forward 'colors'; diff --git a/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss new file mode 100644 index 0000000000..1bb0bbc19d --- /dev/null +++ b/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss @@ -0,0 +1,318 @@ +/* This file was generated by Supernova, don't change manually */ +$background-backdrop: #1a1b1b80 !default; + +$background-interactive-state-active: #ffffff1a !default; +$background-interactive-state-default: #fff0 !default; +$background-interactive-state-hover: #ffffff0d !default; + +$background-primary: #6039cc !default; +$background-secondary: #3c2480 !default; +$background-tertiary: #1e1240 !default; + +$border-basic: #a07eff !default; +$border-focus: #1e1240 !default; + +$border-interactive-state-active: #bba3ff !default; +$border-interactive-state-default: #a07eff !default; +$border-interactive-state-hover: #ae91ff !default; +$border-interactive-state-selected: #ffbe00 !default; + +$component-button-plain-border: #fff0 !default; +$component-button-plain-content: #fff !default; +$component-button-plain-state-active: #ffffff26 !default; +$component-button-plain-state-default: #fff0 !default; +$component-button-plain-state-hover: #ffffff1a !default; + +$component-button-primary-border: #1e1240 !default; +$component-button-primary-content: #3c2480 !default; +$component-button-primary-state-active: #e4daff !default; +$component-button-primary-state-default: #fff !default; +$component-button-primary-state-hover: #f1edff !default; + +$component-button-secondary-border: #f8f6ff !default; +$component-button-secondary-content: #fff !default; +$component-button-secondary-state-active: #1a1b1b26 !default; +$component-button-secondary-state-default: #1a1b1b00 !default; +$component-button-secondary-state-hover: #1a1b1b1a !default; + +$component-button-tertiary-border: #1a1b1b00 !default; +$component-button-tertiary-content: #fff !default; +$component-button-tertiary-state-active: #1a1b1b4d !default; +$component-button-tertiary-state-default: #1a1b1b33 !default; +$component-button-tertiary-state-hover: #1a1b1b40 !default; + +$component-header-background: #6039cc !default; +$component-header-item-background-state-active: #1a1b1b26 !default; +$component-header-item-background-state-default: #fff0 !default; +$component-header-item-background-state-hover: #1a1b1b1a !default; +$component-header-item-background-state-selected: #fff0 !default; +$component-header-item-state-active: #e5e5e5 !default; +$component-header-item-state-default: #fff !default; +$component-header-item-state-hover: #f2f2f2 !default; +$component-header-item-state-selected: #ffbe00 !default; +$component-header-stripe-state-selected: #fff !default; +$component-header-stripe-state-unselected: #ffffff40 !default; + +$component-toggle-selected-border: #a07eff !default; +$component-toggle-selected-content: #fff !default; +$component-toggle-selected-state-active: #3e9b4f !default; +$component-toggle-selected-state-default: #327c3f !default; +$component-toggle-selected-state-hover: #388b47 !default; +$component-toggle-unselected-border: #a07eff !default; +$component-toggle-unselected-content: #4e2ea6 !default; +$component-toggle-unselected-state-active: #e4daff !default; +$component-toggle-unselected-state-default: #fff !default; +$component-toggle-unselected-state-hover: #f1edff !default; + +$disabled-background: #ffffff1a !default; +$disabled-border: #fff3 !default; +$disabled-content: #ffffff80 !default; +$disabled-foreground: #fff3 !default; + +$emotion-danger-background-basic: #e40000 !default; +$emotion-danger-background-subtle: #fce5e5 !default; +$emotion-danger-border-basic: #e93333 !default; +$emotion-danger-border-subtle: #ef6666 !default; +$emotion-danger-content-basic: #720000 !default; +$emotion-danger-content-subtle: #fff !default; +$emotion-danger-state-active: #ec4d4d !default; +$emotion-danger-state-default: #e40000 !default; +$emotion-danger-state-hover: #e93333 !default; + +$emotion-informative-background-basic: #0066d8 !default; +$emotion-informative-background-subtle: #e5f0fb !default; +$emotion-informative-border-basic: #3385e0 !default; +$emotion-informative-border-subtle: #66a3e8 !default; +$emotion-informative-content-basic: #00336c !default; +$emotion-informative-content-subtle: #fff !default; +$emotion-informative-state-active: #4d94e4 !default; +$emotion-informative-state-default: #0066d8 !default; +$emotion-informative-state-hover: #3385e0 !default; + +$emotion-success-background-basic: #3e9b4f !default; +$emotion-success-background-subtle: #ecf5ed !default; +$emotion-success-border-basic: #65af72 !default; +$emotion-success-border-subtle: #8bc395 !default; +$emotion-success-content-basic: #1f4e28 !default; +$emotion-success-content-subtle: #fff !default; +$emotion-success-state-active: #78b984 !default; +$emotion-success-state-default: #3e9b4f !default; +$emotion-success-state-hover: #65af72 !default; + +$emotion-warning-background-basic: #f27d00 !default; +$emotion-warning-background-subtle: #fef2e5 !default; +$emotion-warning-border-basic: #f59733 !default; +$emotion-warning-border-subtle: #f7b166 !default; +$emotion-warning-content-basic: #793f00 !default; +$emotion-warning-content-subtle: #fff !default; +$emotion-warning-state-active: #f6a44d !default; +$emotion-warning-state-default: #f27d00 !default; +$emotion-warning-state-hover: #f59733 !default; + +$focus-focus-ring-color-01: #d2c2ffb2 !default; + +$form-field-danger: #ec4d4d !default; + +$form-field-filled-background-state-active: #fff !default; +$form-field-filled-background-state-default: #f9f9f9 !default; +$form-field-filled-background-state-hover: #f1edff !default; +$form-field-filled-border-state-active: #936cff !default; +$form-field-filled-border-state-default: #ae91ff !default; +$form-field-filled-border-state-hover: #a07eff !default; +$form-field-filled-border-state-selected: #ffbe00 !default; +$form-field-filled-content: #202020 !default; +$form-field-filled-placeholder: #666 !default; + +$form-field-helper-text: #c9b5ff !default; +$form-field-label: #fff !default; +$form-field-success: #78b984 !default; +$form-field-warning: #f6a44d !default; + +$gradient-basic-overlay-color-01: #606060 !default; +$gradient-basic-overlay-color-02: #60606000 !default; + +$link-primary-state-active: #e5e5e5 !default; +$link-primary-state-default: #fff !default; +$link-primary-state-hover: #f2f2f2 !default; + +$link-secondary-state-active: #e5e5e5 !default; +$link-secondary-state-default: #d6c8ff !default; +$link-secondary-state-hover: #f2f2f2 !default; + +$link-state-visited: #ffbe00 !default; + +$link-tertiary-state-active: #e5e5e5 !default; +$link-tertiary-state-default: #bba3ff !default; +$link-tertiary-state-hover: #f2f2f2 !default; + +$neutral-background-basic: #202020 !default; +$neutral-background-subtle: #f2f2f2 !default; +$neutral-border-basic: #202020 !default; +$neutral-border-subtle: #bfbfbf !default; +$neutral-content-basic: #202020 !default; +$neutral-content-subtle: #fff !default; +$neutral-state-active: #535353 !default; +$neutral-state-default: #202020 !default; +$neutral-state-hover: #404040 !default; + +$selected-content-basic: #fff !default; +$selected-content-subtle: #3c2480 !default; +$selected-state-active: #ffd24d !default; +$selected-state-default: #ffbe00 !default; +$selected-state-hover: #ffcb33 !default; + +$shadow-shadow-100-color-01: #00000026 !default; + +$shadow-shadow-200-color-01: #0003 !default; + +$shadow-shadow-300-color-01: #00000040 !default; + +$shadow-shadow-400-color-01: #00000040 !default; + +$text-primary: #f9f9f9 !default; +$text-secondary: #d9d9d9 !default; +$text-tertiary: #b2b2b2 !default; + +@mixin color-css-variables { + --spirit-color-background-backdrop: #{$background-backdrop}; + --spirit-color-background-interactive-state-active: #{$background-interactive-state-active}; + --spirit-color-background-interactive-state-default: #{$background-interactive-state-default}; + --spirit-color-background-interactive-state-hover: #{$background-interactive-state-hover}; + --spirit-color-background-primary: #{$background-primary}; + --spirit-color-background-secondary: #{$background-secondary}; + --spirit-color-background-tertiary: #{$background-tertiary}; + --spirit-color-border-basic: #{$border-basic}; + --spirit-color-border-focus: #{$border-focus}; + --spirit-color-border-interactive-state-active: #{$border-interactive-state-active}; + --spirit-color-border-interactive-state-default: #{$border-interactive-state-default}; + --spirit-color-border-interactive-state-hover: #{$border-interactive-state-hover}; + --spirit-color-border-interactive-state-selected: #{$border-interactive-state-selected}; + --spirit-color-component-button-plain-border: #{$component-button-plain-border}; + --spirit-color-component-button-plain-content: #{$component-button-plain-content}; + --spirit-color-component-button-plain-state-active: #{$component-button-plain-state-active}; + --spirit-color-component-button-plain-state-default: #{$component-button-plain-state-default}; + --spirit-color-component-button-plain-state-hover: #{$component-button-plain-state-hover}; + --spirit-color-component-button-primary-border: #{$component-button-primary-border}; + --spirit-color-component-button-primary-content: #{$component-button-primary-content}; + --spirit-color-component-button-primary-state-active: #{$component-button-primary-state-active}; + --spirit-color-component-button-primary-state-default: #{$component-button-primary-state-default}; + --spirit-color-component-button-primary-state-hover: #{$component-button-primary-state-hover}; + --spirit-color-component-button-secondary-border: #{$component-button-secondary-border}; + --spirit-color-component-button-secondary-content: #{$component-button-secondary-content}; + --spirit-color-component-button-secondary-state-active: #{$component-button-secondary-state-active}; + --spirit-color-component-button-secondary-state-default: #{$component-button-secondary-state-default}; + --spirit-color-component-button-secondary-state-hover: #{$component-button-secondary-state-hover}; + --spirit-color-component-button-tertiary-border: #{$component-button-tertiary-border}; + --spirit-color-component-button-tertiary-content: #{$component-button-tertiary-content}; + --spirit-color-component-button-tertiary-state-active: #{$component-button-tertiary-state-active}; + --spirit-color-component-button-tertiary-state-default: #{$component-button-tertiary-state-default}; + --spirit-color-component-button-tertiary-state-hover: #{$component-button-tertiary-state-hover}; + --spirit-color-component-header-background: #{$component-header-background}; + --spirit-color-component-header-item-background-state-default: #{$component-header-item-background-state-default}; + --spirit-color-component-header-item-background-state-hover: #{$component-header-item-background-state-hover}; + --spirit-color-component-header-item-background-state-selected: #{$component-header-item-background-state-selected}; + --spirit-color-component-header-item-state-active: #{$component-header-item-state-active}; + --spirit-color-component-header-item-state-default: #{$component-header-item-state-default}; + --spirit-color-component-header-item-state-hover: #{$component-header-item-state-hover}; + --spirit-color-component-header-item-state-selected: #{$component-header-item-state-selected}; + --spirit-color-component-header-stripe-state-selected: #{$component-header-stripe-state-selected}; + --spirit-color-component-header-stripe-state-unselected: #{$component-header-stripe-state-unselected}; + --spirit-color-component-toggle-selected-border: #{$component-toggle-selected-border}; + --spirit-color-component-toggle-selected-content: #{$component-toggle-selected-content}; + --spirit-color-component-toggle-selected-state-active: #{$component-toggle-selected-state-active}; + --spirit-color-component-toggle-selected-state-default: #{$component-toggle-selected-state-default}; + --spirit-color-component-toggle-selected-state-hover: #{$component-toggle-selected-state-hover}; + --spirit-color-component-toggle-unselected-border: #{$component-toggle-unselected-border}; + --spirit-color-component-toggle-unselected-content: #{$component-toggle-unselected-content}; + --spirit-color-component-toggle-unselected-state-active: #{$component-toggle-unselected-state-active}; + --spirit-color-component-toggle-unselected-state-default: #{$component-toggle-unselected-state-default}; + --spirit-color-component-toggle-unselected-state-hover: #{$component-toggle-unselected-state-hover}; + --spirit-color-disabled-background: #{$disabled-background}; + --spirit-color-disabled-border: #{$disabled-border}; + --spirit-color-disabled-content: #{$disabled-content}; + --spirit-color-disabled-foreground: #{$disabled-foreground}; + --spirit-color-emotion-danger-background-basic: #{$emotion-danger-background-basic}; + --spirit-color-emotion-danger-background-subtle: #{$emotion-danger-background-subtle}; + --spirit-color-emotion-danger-border-basic: #{$emotion-danger-border-basic}; + --spirit-color-emotion-danger-border-subtle: #{$emotion-danger-border-subtle}; + --spirit-color-emotion-danger-content-basic: #{$emotion-danger-content-basic}; + --spirit-color-emotion-danger-content-subtle: #{$emotion-danger-content-subtle}; + --spirit-color-emotion-danger-state-active: #{$emotion-danger-state-active}; + --spirit-color-emotion-danger-state-default: #{$emotion-danger-state-default}; + --spirit-color-emotion-danger-state-hover: #{$emotion-danger-state-hover}; + --spirit-color-emotion-informative-background-basic: #{$emotion-informative-background-basic}; + --spirit-color-emotion-informative-background-subtle: #{$emotion-informative-background-subtle}; + --spirit-color-emotion-informative-border-basic: #{$emotion-informative-border-basic}; + --spirit-color-emotion-informative-border-subtle: #{$emotion-informative-border-subtle}; + --spirit-color-emotion-informative-content-basic: #{$emotion-informative-content-basic}; + --spirit-color-emotion-informative-content-subtle: #{$emotion-informative-content-subtle}; + --spirit-color-emotion-informative-state-active: #{$emotion-informative-state-active}; + --spirit-color-emotion-informative-state-default: #{$emotion-informative-state-default}; + --spirit-color-emotion-informative-state-hover: #{$emotion-informative-state-hover}; + --spirit-color-emotion-success-background-basic: #{$emotion-success-background-basic}; + --spirit-color-emotion-success-background-subtle: #{$emotion-success-background-subtle}; + --spirit-color-emotion-success-border-basic: #{$emotion-success-border-basic}; + --spirit-color-emotion-success-border-subtle: #{$emotion-success-border-subtle}; + --spirit-color-emotion-success-content-basic: #{$emotion-success-content-basic}; + --spirit-color-emotion-success-content-subtle: #{$emotion-success-content-subtle}; + --spirit-color-emotion-success-state-active: #{$emotion-success-state-active}; + --spirit-color-emotion-success-state-default: #{$emotion-success-state-default}; + --spirit-color-emotion-success-state-hover: #{$emotion-success-state-hover}; + --spirit-color-emotion-warning-background-basic: #{$emotion-warning-background-basic}; + --spirit-color-emotion-warning-background-subtle: #{$emotion-warning-background-subtle}; + --spirit-color-emotion-warning-border-basic: #{$emotion-warning-border-basic}; + --spirit-color-emotion-warning-border-subtle: #{$emotion-warning-border-subtle}; + --spirit-color-emotion-warning-content-basic: #{$emotion-warning-content-basic}; + --spirit-color-emotion-warning-content-subtle: #{$emotion-warning-content-subtle}; + --spirit-color-emotion-warning-state-active: #{$emotion-warning-state-active}; + --spirit-color-emotion-warning-state-default: #{$emotion-warning-state-default}; + --spirit-color-emotion-warning-state-hover: #{$emotion-warning-state-hover}; + --spirit-color-focus-focus-ring-color-01: #{$focus-focus-ring-color-01}; + --spirit-color-form-field-danger: #{$form-field-danger}; + --spirit-color-form-field-filled-background-state-active: #{$form-field-filled-background-state-active}; + --spirit-color-form-field-filled-background-state-default: #{$form-field-filled-background-state-default}; + --spirit-color-form-field-filled-background-state-hover: #{$form-field-filled-background-state-hover}; + --spirit-color-form-field-filled-border-state-active: #{$form-field-filled-border-state-active}; + --spirit-color-form-field-filled-border-state-default: #{$form-field-filled-border-state-default}; + --spirit-color-form-field-filled-border-state-hover: #{$form-field-filled-border-state-hover}; + --spirit-color-form-field-filled-border-state-selected: #{$form-field-filled-border-state-selected}; + --spirit-color-form-field-filled-content: #{$form-field-filled-content}; + --spirit-color-form-field-filled-placeholder: #{$form-field-filled-placeholder}; + --spirit-color-form-field-helper-text: #{$form-field-helper-text}; + --spirit-color-form-field-label: #{$form-field-label}; + --spirit-color-form-field-success: #{$form-field-success}; + --spirit-color-form-field-warning: #{$form-field-warning}; + --spirit-color-gradient-basic-overlay-color-01: #{$gradient-basic-overlay-color-01}; + --spirit-color-gradient-basic-overlay-color-02: #{$gradient-basic-overlay-color-02}; + --spirit-color-link-primary-state-active: #{$link-primary-state-active}; + --spirit-color-link-primary-state-default: #{$link-primary-state-default}; + --spirit-color-link-primary-state-hover: #{$link-primary-state-hover}; + --spirit-color-link-secondary-state-active: #{$link-secondary-state-active}; + --spirit-color-link-secondary-state-default: #{$link-secondary-state-default}; + --spirit-color-link-secondary-state-hover: #{$link-secondary-state-hover}; + --spirit-color-link-state-visited: #{$link-state-visited}; + --spirit-color-link-tertiary-state-active: #{$link-tertiary-state-active}; + --spirit-color-link-tertiary-state-default: #{$link-tertiary-state-default}; + --spirit-color-link-tertiary-state-hover: #{$link-tertiary-state-hover}; + --spirit-color-neutral-background-basic: #{$neutral-background-basic}; + --spirit-color-neutral-background-subtle: #{$neutral-background-subtle}; + --spirit-color-neutral-border-basic: #{$neutral-border-basic}; + --spirit-color-neutral-border-subtle: #{$neutral-border-subtle}; + --spirit-color-neutral-content-basic: #{$neutral-content-basic}; + --spirit-color-neutral-content-subtle: #{$neutral-content-subtle}; + --spirit-color-neutral-state-active: #{$neutral-state-active}; + --spirit-color-neutral-state-default: #{$neutral-state-default}; + --spirit-color-neutral-state-hover: #{$neutral-state-hover}; + --spirit-color-selected-content-basic: #{$selected-content-basic}; + --spirit-color-selected-content-subtle: #{$selected-content-subtle}; + --spirit-color-selected-state-active: #{$selected-state-active}; + --spirit-color-selected-state-default: #{$selected-state-default}; + --spirit-color-selected-state-hover: #{$selected-state-hover}; + --spirit-color-shadow-shadow-100-color-01: #{$shadow-shadow-100-color-01}; + --spirit-color-shadow-shadow-200-color-01: #{$shadow-shadow-200-color-01}; + --spirit-color-shadow-shadow-300-color-01: #{$shadow-shadow-300-color-01}; + --spirit-color-shadow-shadow-400-color-01: #{$shadow-shadow-400-color-01}; + --spirit-color-text-primary: #{$text-primary}; + --spirit-color-text-secondary: #{$text-secondary}; + --spirit-color-text-tertiary: #{$text-tertiary}; +} diff --git a/packages/design-tokens/src/scss/themes/theme-light-on-brand/index.scss b/packages/design-tokens/src/scss/themes/theme-light-on-brand/index.scss new file mode 100644 index 0000000000..7011938362 --- /dev/null +++ b/packages/design-tokens/src/scss/themes/theme-light-on-brand/index.scss @@ -0,0 +1 @@ +@forward 'colors'; diff --git a/packages/form-validations/CHANGELOG.md b/packages/form-validations/CHANGELOG.md index 3440a52651..c51ef0c06e 100644 --- a/packages/form-validations/CHANGELOG.md +++ b/packages/form-validations/CHANGELOG.md @@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + + +## [2.0.8](https://github.com/lmc-eu/spirit-design-system/compare/@lmc-eu/spirit-form-validations@2.0.6...@lmc-eu/spirit-form-validations@2.0.8) (2024-11-25) + +### Code Refactoring + +- **form-validations:** Update form validations error lists ([4486006](https://github.com/lmc-eu/spirit-design-system/commit/4486006)) + +**Note:** Version bump only for package @lmc-eu/spirit-form-validations + ## [2.0.7](https://github.com/lmc-eu/spirit-design-system/compare/@lmc-eu/spirit-form-validations@2.0.5...@lmc-eu/spirit-form-validations@2.0.7) (2024-11-22) @@ -17,6 +27,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline - Update all non-major dependencies ([da33775](https://github.com/lmc-eu/spirit-design-system/commit/da33775)) - **web, web-react, web-twig:** Implement sass-embedded library ([07df504](https://github.com/lmc-eu/spirit-design-system/commit/07df504)) + + +## [2.0.6](https://github.com/lmc-eu/spirit-design-system/compare/@lmc-eu/spirit-form-validations@2.0.5...@lmc-eu/spirit-form-validations@2.0.6) (2024-10-17) + +### Documentation + +- **form-validations,web,web-react:** Redesign the demo app [#DS-1479](https://github.com/lmc-eu/spirit-design-system/issues/DS-1479) ([2a2e309](https://github.com/lmc-eu/spirit-design-system/commit/2a2e309)) + **Note:** Version bump only for package @lmc-eu/spirit-form-validations diff --git a/packages/form-validations/index.html b/packages/form-validations/index.html index 002f3d16fa..bbdace74d4 100644 --- a/packages/form-validations/index.html +++ b/packages/form-validations/index.html @@ -1,4 +1,4 @@ -{{#> layout/default package="Form Validations"}} +{{#> form-validations/layout/default package="Form Validations" title="Form Validations" }} ``` -If you use a bundler (Webpack, Rollup, ...), you can use `/js/*.js` files which are EcmaScript modules. +If you use a bundler (Webpack, Rollup, …), you can use `/js/*.js` files which are ECMAScript modules. #### Using Spirit Web as a Module in Browser @@ -105,11 +165,11 @@ We provide a version of Spirit Web as `ESM` (`spirit-web.esm.js` and `spirit-web Nearly all Spirit-Web plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality). Be sure to only use one set of data attributes on a single element (e.g., you cannot trigger a tooltip and modal from the same button.). -ℹ️ For turning off this functionality just do not set the `data-spirit-toggle` attribute and use the Programnatic API. +ℹ️ For turning off this functionality just do not set the `data-spirit-toggle` attribute and use the Programmatic API. > #### Selectors > -> Currently to query DOM elements we use the native methods `querySelector` and `querySelectorAll` for performance reasons, so you have to use valid selectors. +> Currently, to query DOM elements we use the native methods `querySelector` and `querySelectorAll` for performance reasons, so you have to use valid selectors. > If you use special selectors, for example: `collapse:Example` be sure to escape them. #### Events @@ -144,7 +204,7 @@ If you’d like to get a particular plugin instance, each plugin exposes a `getI #### CSS Selectors in Constructors You can also use a CSS selector as the first argument instead of a DOM element to initialize the plugin. -Currently the element for the plugin is found by the `querySelector` method since our plugins support a single element only. +Currently, the element for the plugin is found by the `querySelector` method since our plugins support a single element only. ```javascript var modal = new Modal('#myModal'); @@ -160,6 +220,7 @@ Spirit Design System is also available on CDN: | CSS: Foundation | https://cdn.jsdelivr.net/npm/@lmc-eu/spirit-web@latest/css/foundation.min.css | | CSS: Components | https://cdn.jsdelivr.net/npm/@lmc-eu/spirit-web@latest/css/components.min.css | | CSS: Helpers | https://cdn.jsdelivr.net/npm/@lmc-eu/spirit-web@latest/css/helpers.min.css | +| CSS: Themes | https://cdn.jsdelivr.net/npm/@lmc-eu/spirit-web@latest/css/themes.min.css | | CSS: Utilities | https://cdn.jsdelivr.net/npm/@lmc-eu/spirit-web@latest/css/utilities.min.css | | JavaScript | https://cdn.jsdelivr.net/npm/@lmc-eu/spirit-web@latest/js/bundle/spirit-web.bundle.min.js | @@ -167,10 +228,9 @@ Spirit Design System is also available on CDN: ## Rebranding -Design tokens and their [`@tokens` API][tokens-api] enable quick and easy -rebranding of Spirit Sass components and styles. Once you have created your own -design tokens, just provide them to your Sass compiler and you are ready to go! -Learn more in the [`spirit-design-tokens` docs][rebranding]. +Design tokens enable quick and easy rebranding of Spirit Sass components and styles. +Once you have created your own design tokens, just provide them to your Sass compiler and you are ready to go! +Learn more in the [`spirit-design-tokens` docs][design-tokens-rebranding]. ## Development @@ -197,12 +257,13 @@ Check your browser console to see if you are using any of the deprecated functio See the [LICENSE][license] file for information. -[configuring-load-path]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#configuring-load-path +[design-tokens-usage]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#basic-usage +[design-tokens-load-path]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#in-sass +[design-tokens-color-tokens]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/design-tokens/src/scss/themes/_color-tokens.scss +[design-tokens-rebranding]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#rebranding-spirit [deprecations]: https://github.com/lmc-eu/spirit-design-system/blob/main/static/deprecations-browser-console.png?raw=true [examples]: https://spirit-design-system.netlify.app/packages/web/ [feature-flags-docs]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/contribution/feature-flags.md [license]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/LICENSE.md [postcss-prefix-selector]: https://www.npmjs.com/package/postcss-prefix-selector -[rebranding]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#b-via-load-path -[tokens-api]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#tokens-api [vite]: https://vitejs.dev diff --git a/packages/web/package.json b/packages/web/package.json index 459d02c3a6..6fbc2fbd87 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -1,6 +1,6 @@ { "name": "@lmc-eu/spirit-web", - "version": "2.5.2", + "version": "3.0.0-alpha.5", "description": "CSS and vanilla JS implementation of Spirit Design System", "license": "MIT", "engines": { @@ -28,8 +28,9 @@ "css:compile:components": "sass --load-path=../design-tokens/scss src/scss/components/index.scss dist/css/components.css", "css:compile:foundation": "sass --load-path=../design-tokens/scss --load-path=../../node_modules src/scss/foundation/index.scss dist/css/foundation.css", "css:compile:helpers": "sass --load-path=../design-tokens/scss src/scss/helpers/index.scss dist/css/helpers.css", + "css:compile:themes": "sass --load-path=../design-tokens/scss src/scss/themes/index.scss dist/css/themes.css", "css:compile:utilities": "sass --load-path=../design-tokens/scss src/scss/utilities/index.scss dist/css/utilities.css", - "css:compile": "yarn css:compile:components && yarn css:compile:foundation && yarn css:compile:helpers && yarn css:compile:utilities", + "css:compile": "yarn css:compile:components && yarn css:compile:foundation && yarn css:compile:helpers && yarn css:compile:themes && yarn css:compile:utilities", "css:prefix": "postcss --config ./config/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"", "css:minify": "cleancss --format breaksWith=lf --source-map-inline-sources --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\"", "js": "npm-run-all js:compile", @@ -53,13 +54,13 @@ "dependencies": { "@csstools/normalize.css": "^12.0.0", "@floating-ui/dom": "^1.5.3", - "@lmc-eu/spirit-design-tokens": "^2.1.3", + "@lmc-eu/spirit-design-tokens": "^3.0.0-alpha.2", "@lmc-eu/spirit-icons": "^0.10.2" }, "devDependencies": { "@lmc-eu/browserslist-config": "2.0.1", "@lmc-eu/spirit-common": "^0.3.8", - "@lmc-eu/spirit-demo": "^0.1.3", + "@lmc-eu/spirit-demo": "^1.0.0-alpha.0", "@rollup/plugin-replace": "6.0.1", "@rollup/plugin-terser": "0.4.4", "@rollup/plugin-typescript": "12.1.1", diff --git a/packages/web/src/js/Toast.ts b/packages/web/src/js/Toast.ts index bb0f4d35b3..7357451fc5 100644 --- a/packages/web/src/js/Toast.ts +++ b/packages/web/src/js/Toast.ts @@ -14,6 +14,7 @@ import { CLASS_NAME_TRANSITIONING, CLASS_NAME_VISIBLE, DEFAULT_TOAST_AUTO_CLOSE_INTERVAL, + CLASS_NAME_LINK_NOT_UNDERLINED, } from './constants'; import { EventHandler, SelectorEngine } from './dom'; import { enableDismissTrigger, enableToggleTrigger, executeAfterTransition, SpiritConfig } from './utils'; @@ -30,11 +31,17 @@ const EVENT_SHOWN = `shown${EVENT_KEY}`; const COLOR_ICON_MAP = { danger: 'danger', informative: 'info', - inverted: 'info', + neutral: 'info', success: 'check-plain', warning: 'warning', }; +const UNDERLINE_MAP = { + hover: 'hover', + always: 'always', + never: 'never', +}; + const SELECTOR_QUEUE_ELEMENT = `[${ATTRIBUTE_DATA_ELEMENT}="toast-queue"]`; const SELECTOR_TEMPLATE_ELEMENT = `[${ATTRIBUTE_DATA_SNIPPET}="item"]`; const SELECTOR_ITEM_ELEMENT = `[${ATTRIBUTE_DATA_POPULATE_FIELD}="item"]`; @@ -52,6 +59,7 @@ export const PROPERTY_NAME_SLOWEST_TRANSITION = { const PROPERTY_NAME_FALLBACK_TRANSITION = 'opacity'; type Color = keyof typeof COLOR_ICON_MAP; +type Underlined = keyof typeof UNDERLINE_MAP; type Config = { autoCloseInterval: number; @@ -62,11 +70,11 @@ type Config = { enableLink: boolean; linkContent: HTMLElement | string; linkProps: { - color: 'primary' | 'secondary' | 'inverted'; + color: 'primary' | 'secondary' | 'tertiary'; elementType: string; href: string; isDisabled: boolean; - isUnderlined: boolean; + underlined: Underlined; target: '_blank' | '_self' | '_parent' | '_top'; }; hasIcon: boolean; @@ -160,10 +168,9 @@ class Toast extends BaseComponent { } updateOrRemoveCloseButton(closeButtonElement: HTMLElement) { - const { color, id, isDismissible } = this.config as Config; + const { id, isDismissible } = this.config as Config; if (isDismissible) { - closeButtonElement!.setAttribute('data-spirit-color', color); closeButtonElement!.setAttribute('data-spirit-dismiss', 'toast'); closeButtonElement!.setAttribute('data-spirit-target', `#${id}`); closeButtonElement!.setAttribute('aria-controls', id); @@ -196,17 +203,18 @@ class Toast extends BaseComponent { if (linkContent) { const linkElementWithType = document.createElement(linkProps.elementType || 'a'); linkElement.replaceWith(linkElementWithType); - const color = linkProps.color || 'inverted'; - const isUnderlined = linkProps.isUnderlined !== undefined ? linkProps.isUnderlined : true; + const { underlined = UNDERLINE_MAP.always } = linkProps; - if (isUnderlined) { + linkElementWithType.classList.add('ToastBar__link'); + if (underlined === UNDERLINE_MAP.always) { linkElementWithType.classList.add(CLASS_NAME_LINK_UNDERLINED); } + if (underlined === UNDERLINE_MAP.never) { + linkElementWithType.classList.add(CLASS_NAME_LINK_NOT_UNDERLINED); + } if (linkProps.isDisabled) { linkElementWithType.classList.add(CLASS_NAME_LINK_DISABLED); } - linkElementWithType.classList.add('ToastBar__link'); - linkElementWithType.classList.add(`link-${color}`); linkElementWithType.setAttribute('href', linkProps.href); linkProps.target && linkElementWithType.setAttribute('target', linkProps.target); linkElementWithType!.innerHTML = typeof linkContent === 'string' ? linkContent : linkContent.outerHTML; diff --git a/packages/web/src/js/constants.ts b/packages/web/src/js/constants.ts index 4c60f050dd..df9d5761fe 100644 --- a/packages/web/src/js/constants.ts +++ b/packages/web/src/js/constants.ts @@ -13,6 +13,7 @@ export const CLASS_NAME_OPEN = 'is-open'; export const CLASS_NAME_TRANSITIONING = 'is-transitioning'; export const CLASS_NAME_VISIBLE = 'is-visible'; export const CLASS_NAME_LINK_UNDERLINED = 'link-underlined'; +export const CLASS_NAME_LINK_NOT_UNDERLINED = 'link-not-underlined'; export const CLASS_NAME_LINK_DISABLED = 'link-disabled'; export const DEFAULT_TOAST_AUTO_CLOSE_INTERVAL = 3000; // milliseconds diff --git a/packages/web/src/scss/components/Accordion/_Accordion.scss b/packages/web/src/scss/components/Accordion/_Accordion.scss index cdb682bd5a..85a0e7fe64 100644 --- a/packages/web/src/scss/components/Accordion/_Accordion.scss +++ b/packages/web/src/scss/components/Accordion/_Accordion.scss @@ -68,7 +68,7 @@ inset: 0; z-index: -1; // 7. border-radius: theme.$accordion-border-radius; - background-color: theme.$accordion-item-background-color-default; // 3.a + background-color: theme.$accordion-item-background-color-state-default; // 3.a } &[aria-expanded='true'] { @@ -85,7 +85,7 @@ // 3.b // stylelint-disable-next-line selector-max-specificity -- High specificity to target the background pseudo element (2). .Accordion__itemHeader:hover .Accordion__itemToggle:first-of-type::before { - background-color: theme.$accordion-item-background-color-hover; + background-color: theme.$accordion-item-background-color-state-hover; } } @@ -93,7 +93,7 @@ // 3.c // stylelint-disable-next-line selector-max-specificity -- High specificity to override the hover state selector 3.b. .Accordion__itemHeader .Accordion__itemToggle:active:first-of-type::before { - background-color: theme.$accordion-item-background-color-active; + background-color: theme.$accordion-item-background-color-state-active; } } diff --git a/packages/web/src/scss/components/Accordion/_theme.scss b/packages/web/src/scss/components/Accordion/_theme.scss index 3c59c7918e..6b796ba1bb 100644 --- a/packages/web/src/scss/components/Accordion/_theme.scss +++ b/packages/web/src/scss/components/Accordion/_theme.scss @@ -1,16 +1,16 @@ @use '@tokens' as tokens; -$accordion-item-background-color-default: tokens.$background-interactive-default; -$accordion-item-background-color-hover: tokens.$background-interactive-hover; -$accordion-item-background-color-active: tokens.$background-interactive-active; -$accordion-header-typography: tokens.$body-medium-text-regular; -$accordion-header-typography-active: tokens.$body-medium-text-bold; -$accordion-header-typography-color: tokens.$text-primary-default; -$accordion-header-gap: tokens.$space-500; -$accordion-header-padding-y: tokens.$space-700; -$accordion-header-padding-x: tokens.$space-600; -$accordion-border-radius: tokens.$radius-100; -$accordion-divider-color: tokens.$action-tertiary-default; +$accordion-item-background-color-state-default: tokens.$background-interactive-state-default; +$accordion-item-background-color-state-hover: tokens.$background-interactive-state-hover; +$accordion-item-background-color-state-active: tokens.$background-interactive-state-active; +$accordion-header-typography: tokens.$body-medium-regular; +$accordion-header-typography-active: tokens.$body-medium-bold; +$accordion-header-typography-color: tokens.$text-primary; +$accordion-header-gap: tokens.$space-600; +$accordion-header-padding-y: tokens.$space-900; +$accordion-header-padding-x: tokens.$space-700; +$accordion-border-radius: tokens.$radius-200; +$accordion-divider-color: tokens.$border-basic; $accordion-divider-width: tokens.$border-width-100; -$accordion-divider-style: tokens.$border-style-100; -$accordion-content-padding-bottom: tokens.$space-600; +$accordion-divider-style: solid; +$accordion-content-padding-bottom: tokens.$space-700; diff --git a/packages/web/src/scss/components/Accordion/index.html b/packages/web/src/scss/components/Accordion/index.html index 401eb42947..abee501a38 100644 --- a/packages/web/src/scss/components/Accordion/index.html +++ b/packages/web/src/scss/components/Accordion/index.html @@ -1,4 +1,4 @@ -{{#> web/layout/plain }} +{{#> web/layout/default title="Accordion" parentPageName="Components" }}
    @@ -379,4 +379,4 @@

    -{{/web/layout/plain }} +{{/web/layout/default }} diff --git a/packages/web/src/scss/components/Alert/_Alert.scss b/packages/web/src/scss/components/Alert/_Alert.scss index 77a93451af..d22f36bfc9 100644 --- a/packages/web/src/scss/components/Alert/_Alert.scss +++ b/packages/web/src/scss/components/Alert/_Alert.scss @@ -1,4 +1,5 @@ @use 'theme'; +@use '@tokens' as tokens; @use '../../tools/dictionaries'; @use '../../tools/typography'; @@ -11,12 +12,12 @@ justify-content: flex-start; width: 100%; padding: theme.$padding; - border: theme.$border-width theme.$border-style var(--alert-color); + color: var(--#{tokens.$css-variable-prefix}alert-color); + border-width: theme.$border-width; + border-style: theme.$border-style; + border-color: var(--#{tokens.$css-variable-prefix}alert-border-color); border-radius: theme.$border-radius; -} - -.Alert strong { - font-weight: theme.$emphasis-font-weight; + background-color: var(--#{tokens.$css-variable-prefix}alert-background-color); } .Alert--center { @@ -24,13 +25,22 @@ justify-content: center; } -@include dictionaries.generate-colors('Alert', theme.$color-dictionary, theme.$color-dictionary-config); @include dictionaries.generate-colors( - 'Alert', - theme.$color-dictionary, - theme.$color-dictionary-config, - theme.$link-color-dictionary-states, - null, - 'alert-link', - ' :where(a)' // select all elements inside .Alert with low specificity + $class-name: 'Alert', + $dictionary-values: theme.$color-dictionary, + $config: theme.$color-dictionary-config ); + +.Alert :where(a) { + color: var(--#{tokens.$css-variable-prefix}alert-color); + + @media (hover: hover) { + &:hover { + color: var(--#{tokens.$css-variable-prefix}alert-color); + } + } + + &:active { + color: var(--#{tokens.$css-variable-prefix}alert-color); + } +} diff --git a/packages/web/src/scss/components/Alert/_theme.scss b/packages/web/src/scss/components/Alert/_theme.scss index f74446895d..cab8b1bac2 100644 --- a/packages/web/src/scss/components/Alert/_theme.scss +++ b/packages/web/src/scss/components/Alert/_theme.scss @@ -2,30 +2,22 @@ @use '@tokens' as tokens; @use '../../settings/dictionaries'; -$typography: tokens.$body-medium-text-regular; +$typography: tokens.$body-medium-regular; -$gap: tokens.$space-600; -$padding: tokens.$space-600; -$border-radius: tokens.$radius-200; -$border-style: tokens.$border-style-100; +$gap: tokens.$space-700; +$padding: tokens.$space-700; +$border-radius: tokens.$radius-300; +$border-style: solid; $border-width: tokens.$border-width-100; -$content-max-width: 640px; +$content-max-width: 800px; -$emphasis-font-weight: map.get(tokens.$body-medium-text-bold, 'mobile', 'font-weight'); - -$color-dictionary: dictionaries.$emotion-colors; - -$color-dictionary-config: ( - color: 'default', - background-color: 'background', +$color-dictionary: ( + emotion: dictionaries.$emotion-colors, ); -$link-color-dictionary-states: ( - '&:hover, &:focus': ( - color: 'hover', - ), - '&:active': ( - color: 'active', - ), +$color-dictionary-config: ( + color: 'content-basic', + border-color: 'border-basic', + background-color: 'background-subtle', ); diff --git a/packages/web/src/scss/components/Alert/index.html b/packages/web/src/scss/components/Alert/index.html index 908c1def50..0bd2204ef6 100644 --- a/packages/web/src/scss/components/Alert/index.html +++ b/packages/web/src/scss/components/Alert/index.html @@ -1,4 +1,4 @@ -{{#> web/layout/plain }} +{{#> web/layout/default title="Alert" parentPageName="Components" }}

    Alert Colors

    @@ -123,4 +123,4 @@

    Alert Icons

    -{{/web/layout/plain }} +{{/web/layout/default }} diff --git a/packages/web/src/scss/components/Breadcrumbs/_theme.scss b/packages/web/src/scss/components/Breadcrumbs/_theme.scss index 2ab2645c4e..213d4789c8 100644 --- a/packages/web/src/scss/components/Breadcrumbs/_theme.scss +++ b/packages/web/src/scss/components/Breadcrumbs/_theme.scss @@ -1,10 +1,9 @@ -@use 'sass:map'; @use '@tokens' as tokens; $breakpoints: tokens.$breakpoints; -$typography: tokens.$body-small-text-regular; -$color: tokens.$text-secondary-default; +$typography: tokens.$body-small-regular; +$color: tokens.$text-secondary; $gap-mobile-up: tokens.$space-300; -$gap-tablet-up: tokens.$space-400; +$gap-tablet-up: tokens.$space-500; diff --git a/packages/web/src/scss/components/Breadcrumbs/index.html b/packages/web/src/scss/components/Breadcrumbs/index.html index 33610a88f0..90ef87e091 100644 --- a/packages/web/src/scss/components/Breadcrumbs/index.html +++ b/packages/web/src/scss/components/Breadcrumbs/index.html @@ -1,4 +1,4 @@ -{{#> web/layout/plain }} +{{#> web/layout/default title="Breadcrumbs" parentPageName="Components" }}

    Default

    @@ -110,4 +110,4 @@

    Current page is not a link

    -{{/web/layout/plain }} +{{/web/layout/default }} diff --git a/packages/web/src/scss/components/Button/README.md b/packages/web/src/scss/components/Button/README.md index 5ec61f9758..8072a00eb6 100644 --- a/packages/web/src/scss/components/Button/README.md +++ b/packages/web/src/scss/components/Button/README.md @@ -6,7 +6,7 @@ Variants: - + @@ -46,7 +46,7 @@ Loading Button: -     - - +
    + Button {{color}} + +
    {{/each}} - + {{/each}} @@ -43,30 +43,28 @@

    Disabled

    {{#each @root.sizes as |size|}} -
    +

    Size {{size}}

    {{#each @root.colors as |color|}} -
    -
    - - - -
    +
    + + +
    {{/each}}
    -
    +
    {{/each}}
    @@ -79,45 +77,43 @@

    Loading

    {{#each @root.sizes as |size|}} -
    +

    Size {{size}}

    {{#each @root.colors as |color|}} -
    -
    - - Button {{color}} - - - - -
    +
    + + Button {{color}} + + + +
    {{/each}}
    -
    +
    {{/each}}
    -{{/web/layout/plain }} +{{/web/layout/default }} diff --git a/packages/web/src/scss/components/Checkbox/README.md b/packages/web/src/scss/components/Checkbox/README.md index fbb77113d1..dd6fdbfd40 100644 --- a/packages/web/src/scss/components/Checkbox/README.md +++ b/packages/web/src/scss/components/Checkbox/README.md @@ -39,10 +39,12 @@ See Validation state [dictionary][dictionary-validation]. Checkbox Label -
      -
    • First validation text
      • -
    • Second validation text
      • -
    +
    +
      +
    • First validation text
      • +
    • Second validation text
      • +
    +
    ``` diff --git a/packages/web/src/scss/components/Checkbox/_Checkbox.scss b/packages/web/src/scss/components/Checkbox/_Checkbox.scss index f3de871201..ee9074c751 100644 --- a/packages/web/src/scss/components/Checkbox/_Checkbox.scss +++ b/packages/web/src/scss/components/Checkbox/_Checkbox.scss @@ -1,4 +1,8 @@ -@use 'sass:map'; +// 1. We allow descending specificity order here because we don't want to set the background-image with SVG twice +// and therefore bloating the CSS. +// 2. We need to set the background-color of the non-disabled Checkbox input to initial color when it is hovered +// or active, because we need it contrasting with the background color. + @use 'theme'; @use '../../theme/form-fields' as form-fields-theme; @use '../../tools/form-fields' as form-fields-tools; @@ -11,7 +15,7 @@ $_field-name: 'Checkbox'; } .Checkbox__text { - margin-left: form-fields-theme.$gap; + margin-left: form-fields-theme.$inline-field-gap; } .Checkbox__label { @@ -37,17 +41,20 @@ $_field-name: 'Checkbox'; background-position: center; background-size: contain; background-repeat: no-repeat; + background-color: form-fields-theme.$input-background-color; + + &:checked, + &:indeterminate { + border-color: form-fields-theme.$inline-field-input-border-color-checked; + background-color: form-fields-theme.$inline-field-input-background-color-checked; + } &:checked { - color: form-fields-theme.$inline-field-input-color-checked; background-image: svg.escape(theme.$input-checked-mark); - background-color: form-fields-theme.$inline-field-input-color-checked; } &:indeterminate { - color: form-fields-theme.$inline-field-input-color-checked; background-image: svg.escape(theme.$input-indeterminate-mark); - background-color: form-fields-theme.$inline-field-input-color-checked; } } @@ -62,60 +69,65 @@ $_field-name: 'Checkbox'; @include form-fields-tools.input-field-validation-states($_field-name); -.Checkbox--disabled { - @include form-fields-tools.inline-field-root-disabled(); +.Checkbox--item { + @include form-fields-tools.item(); } -.Checkbox--disabled .Checkbox__label { - @include form-fields-tools.label-disabled(); +.Checkbox--item .Checkbox__label { + @include form-fields-tools.item-label(); } -.Checkbox--disabled .Checkbox__validationText { - @include form-fields-tools.validation-text-disabled(); +.Checkbox--item .Checkbox__validationText { + @include form-fields-tools.item-validation-text(); } -.Checkbox--disabled .Checkbox__helperText { - @include form-fields-tools.helper-text-disabled(); +.Checkbox--item .Checkbox__helperText { + @include form-fields-tools.item-helper-text(); } -.Checkbox--disabled > .Checkbox__input, -.Checkbox > .Checkbox__input:disabled { - @include form-fields-tools.input-disabled(); +.Checkbox--item:is(.Checkbox--disabled, .Checkbox.is-disabled) { + @include form-fields-tools.item-disabled(); } -.Checkbox--disabled > .Checkbox__input:checked, -.Checkbox--disabled > .Checkbox__input:indeterminate, -.Checkbox > .Checkbox__input:disabled:checked, -.Checkbox > .Checkbox__input:disabled:indeterminate { - background-color: form-fields-theme.$input-color-disabled; +:is(.Checkbox--disabled, .Checkbox.is-disabled) { + @include form-fields-tools.inline-field-root-disabled(); } -.Checkbox--item { - @include form-fields-tools.item(); - - display: flex; +:is(.Checkbox--disabled, .Checkbox.is-disabled) .Checkbox__label { + @include form-fields-tools.label-disabled(); } -.Checkbox--item.Checkbox--disabled { - @include form-fields-tools.item-disabled(); +:is(.Checkbox--disabled, .Checkbox.is-disabled) .Checkbox__validationText { + @include form-fields-tools.validation-text-disabled(); } -// stylelint-disable-next-line selector-max-class, selector-max-compound-selectors, selector-max-specificity -- We need to override the default styles for the label in Item. -.Checkbox--item .Checkbox__input:checked ~ .Checkbox__text > .Checkbox__label { - @include form-fields-tools.item-label-checked(); +:is(.Checkbox--disabled, .Checkbox.is-disabled) .Checkbox__helperText { + @include form-fields-tools.helper-text-disabled(); } -.Checkbox--item .Checkbox__validationText { - @include form-fields-tools.item-validation-text(); -} +:is(.Checkbox--disabled, .Checkbox.is-disabled) > .Checkbox__input, +.Checkbox > .Checkbox__input:disabled { + @include form-fields-tools.input-disabled(); -.Checkbox--item .Checkbox__helperText { - @include form-fields-tools.item-helper-text(); + border-color: form-fields-theme.$input-border-color-state-disabled; + background-color: form-fields-theme.$input-background-color-state-disabled; + + &:checked, + &:indeterminate { + border-color: form-fields-theme.$inline-field-input-border-color-checked-disabled; + } + + &:checked { + background-image: svg.escape(theme.$input-checked-mark-disabled); + } + + // stylelint-disable-next-line no-descending-specificity -- 1. + &:indeterminate { + background-image: svg.escape(theme.$input-indeterminate-mark-disabled); + } } -.Checkbox--item:not(.Checkbox--disabled):hover .Checkbox__validationText, -.Checkbox--item:not(.Checkbox--disabled):active .Checkbox__validationText, -.Checkbox--item:not(.Checkbox--disabled):hover .Checkbox__helperText, -.Checkbox--item:not(.Checkbox--disabled):active .Checkbox__helperText { - color: inherit; +// stylelint-disable-next-line selector-max-specificity -- 2. +.Checkbox--item:not(.Checkbox--disabled, .Checkbox.is-disabled) .Checkbox__input:is(:hover, :active):not(:checked) { + background-color: form-fields-theme.$input-background-color; } diff --git a/packages/web/src/scss/components/Checkbox/_theme.scss b/packages/web/src/scss/components/Checkbox/_theme.scss index 8d91d567ef..a1cd96e5f0 100644 --- a/packages/web/src/scss/components/Checkbox/_theme.scss +++ b/packages/web/src/scss/components/Checkbox/_theme.scss @@ -1,7 +1,11 @@ @use '@tokens' as tokens; -$input-border-radius: 2px; +$input-border-radius: tokens.$radius-200; $input-width: 18px; $input-margin: 3px; -$input-checked-mark: url('data:image/svg+xml,'); -$input-indeterminate-mark: url('data:image/svg+xml,'); +$input-checked-mark: var(--#{tokens.$css-variable-prefix}checkbox-input-background-image-url); +$input-checked-mark-disabled: var(--#{tokens.$css-variable-prefix}checkbox-input-disabled-background-image-url); +$input-indeterminate-mark: var(--#{tokens.$css-variable-prefix}checkbox-input-indeterminate-background-image-url); +$input-indeterminate-mark-disabled: var( + --#{tokens.$css-variable-prefix}checkbox-input-indeterminate-disabled-background-image-url +); diff --git a/packages/web/src/scss/components/Checkbox/index.html b/packages/web/src/scss/components/Checkbox/index.html index 93beba9792..c8389b28f4 100644 --- a/packages/web/src/scss/components/Checkbox/index.html +++ b/packages/web/src/scss/components/Checkbox/index.html @@ -1,4 +1,4 @@ -{{#> web/layout/plain }} +{{#> web/layout/default title="Checkbox" parentPageName="Components" }} -{{/web/layout/plain }} +{{/web/layout/default }} diff --git a/packages/web/src/scss/components/Flex/README.md b/packages/web/src/scss/components/Flex/README.md index 31ba964664..95caf886a7 100644 --- a/packages/web/src/scss/components/Flex/README.md +++ b/packages/web/src/scss/components/Flex/README.md @@ -148,14 +148,14 @@ Example: ## Custom Spacing -Use CSS custom properties to define custom spacing between items. Set the `--flex-spacing` property to one of the -spacing token values defined on the `:root` element, e.g. `--flex-spacing: var(--spirit-space-800)`. +Use CSS custom properties to define custom spacing between items. Set the `--flex-spacing-x` or the `--flex-spacing-y` +property to one of the spacing token values defined on the `:root` element, e.g. `--flex-spacing-x: var(--spirit-space-800)`. This will set the spacing to `var(--spirit-space-800)` for all breakpoints. ```html
    Item 1
    Item 2
    @@ -163,13 +163,13 @@ This will set the spacing to `var(--spirit-space-800)` for all breakpoints.
    ``` -ℹ️ We highly discourage from using absolute values like `--flex-spacing: 1rem`. It will work, but you will lose +ℹ️ We highly discourage from using absolute values like `--flex-spacing-x: 1rem`. It will work, but you will lose the consistency between the spacing and the design tokens. -If you need to set custom spacing from a specific breakpoint, use the `--flex-spacing-{breakpoint}` property, -e.g. `--flex-spacing-tablet: var(--spirit-space-800)`. The breakpoint value must be one of the breakpoint tokens +If you need to set custom spacing from a specific breakpoint, use the `--flex-spacing-x-{breakpoint}` or the `--flex-spacing-y-{breakpoint}` +property, e.g. `--flex-spacing-x-tablet: var(--spirit-space-800)`. The breakpoint value must be one of the breakpoint tokens except for the `mobile` breakpoint you don't need the suffix at all. The spacing is set to all larger breakpoints -automatically if you don't set them explicitly. E.g. if you set only `--flex-spacing-tablet: var(--spirit-space-800)` +automatically if you don't set them explicitly. E.g. if you set only `--flex-spacing-x-tablet: var(--spirit-space-800)` the spacing will be set to `var(--spirit-space-800)` for `tablet` and `desktop` breakpoints while on the `mobile` breakpoint the default spacing will be used. @@ -178,7 +178,7 @@ Custom spacing from tablet up: ```html
    Item 1
    Item 2
    @@ -191,7 +191,7 @@ Custom spacing for each breakpoint: ```html
    Item 1
    Item 2
    diff --git a/packages/web/src/scss/components/Flex/_Flex.scss b/packages/web/src/scss/components/Flex/_Flex.scss index 64a2a76ee2..379c94041c 100644 --- a/packages/web/src/scss/components/Flex/_Flex.scss +++ b/packages/web/src/scss/components/Flex/_Flex.scss @@ -2,20 +2,25 @@ // 2. Use `display: grid` so the orientation of alignmentX and alignmentY does not change as it would with `flex-direction: column`. // 3. Generate both `wrap` and `noWrap` classes to enable mobile-first and breakpoint-specific wrapping at the same time. -@use 'sass:string'; @use '../../tools/breakpoint'; @use '../../tools/dictionaries'; @use '../../tools/reset'; -@use '../../tools/spacing'; +@use '../../tools/responsive-properties'; @use 'theme'; .Flex { @include reset.list(); - @include spacing.create( - $output-property-name: '--flex-gap', - $responsive-property-base-name: '--flex-spacing', + @include responsive-properties.create-cascade( + $property: 'column-gap', + $input-custom-property-base-name: 'flex-spacing-x', $breakpoints: theme.$breakpoints, - $default-spacing: theme.$gap + $fallback-value: theme.$default-spacing + ); + @include responsive-properties.create-cascade( + $property: 'row-gap', + $input-custom-property-base-name: 'flex-spacing-y', + $breakpoints: theme.$breakpoints, + $fallback-value: theme.$default-spacing ); } @@ -23,14 +28,6 @@ flex: none; // 1. } -// stylelint-disable-next-line selector-max-universal -- Let's be bold and tweak all direct descendants regardless of their type to avoid inheritance of spacing for nested Flex. -.Flex > * { - @include spacing.prevent-inheritance( - $responsive-property-base-name: '--flex-spacing', - $breakpoints: theme.$breakpoints - ); -} - @each $breakpoint-name, $breakpoint-value in theme.$breakpoints { $infix: breakpoint.get-modifier('infix', $breakpoint-name, $breakpoint-value); diff --git a/packages/web/src/scss/components/Flex/_theme.scss b/packages/web/src/scss/components/Flex/_theme.scss index 2f1b7e8801..119fe23cde 100644 --- a/packages/web/src/scss/components/Flex/_theme.scss +++ b/packages/web/src/scss/components/Flex/_theme.scss @@ -5,4 +5,4 @@ $alignment-x-dictionary: list.join(dictionaries.$alignments-x-extended, space-between); $alignment-y-dictionary: list.join(dictionaries.$alignments-y-extended, baseline); $breakpoints: tokens.$breakpoints; -$gap: tokens.$space-600; +$default-spacing: tokens.$space-700; diff --git a/packages/web/src/scss/components/Flex/index.html b/packages/web/src/scss/components/Flex/index.html index 9b08412b9f..e22ea79627 100644 --- a/packages/web/src/scss/components/Flex/index.html +++ b/packages/web/src/scss/components/Flex/index.html @@ -1,4 +1,4 @@ -{{#> web/layout/plain }} +{{#> web/layout/default title="Flex" parentPageName="Components" }}

    Row Layout

    @@ -121,7 +121,7 @@

    Vertical Alignment

    Item 1
    Item 2
    is taller
    -
    Item 3 has bigger font size
    +
    Item 3 has bigger font size
    @@ -156,7 +156,7 @@

    Custom Spacing

    Item 1
    Item 2
    @@ -172,7 +172,7 @@

    Responsive Spacing

    Item 1
    Item 2
    @@ -182,4 +182,36 @@

    Responsive Spacing

    -{{/web/layout/plain }} +
    +

    Responsive Custom Horizontal Spacing

    +
    + +
    +
    Item 1
    +
    Item 2
    +
    Item 3
    +
    + +
    +
    + +
    +

    Responsive Custom Vertical Spacing

    +
    + +
    + {{setVar "items" 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 }} + {{#each @root.items}} +
    Item {{this}}
    + {{/each}} +
    + +
    +
    + +{{/web/layout/default }} diff --git a/packages/web/src/scss/components/Footer/README.md b/packages/web/src/scss/components/Footer/README.md index ff6c7fb500..a6fa57094b 100644 --- a/packages/web/src/scss/components/Footer/README.md +++ b/packages/web/src/scss/components/Footer/README.md @@ -16,7 +16,7 @@ The Footer supports several ready-to-use building blocks: This is how all supported building blocks of the Footer build up the complete composition: ```html -