From b5d3c44d3f3027a596b21dc9da6027d73ff797c1 Mon Sep 17 00:00:00 2001 From: GOMA Date: Tue, 15 Jul 2025 12:49:18 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20decision=20tokens?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tokens/themes/decisions/_artwork.scss | 31 ++++ src/tokens/themes/decisions/_background.scss | 174 +++++++++++++++++++ src/tokens/themes/decisions/_border.scss | 76 ++++++++ src/tokens/themes/decisions/_text.scss | 80 +++++++++ 4 files changed, 361 insertions(+) create mode 100644 src/tokens/themes/decisions/_artwork.scss create mode 100644 src/tokens/themes/decisions/_background.scss create mode 100644 src/tokens/themes/decisions/_border.scss create mode 100644 src/tokens/themes/decisions/_text.scss diff --git a/src/tokens/themes/decisions/_artwork.scss b/src/tokens/themes/decisions/_artwork.scss new file mode 100644 index 0000000..5bd83f9 --- /dev/null +++ b/src/tokens/themes/decisions/_artwork.scss @@ -0,0 +1,31 @@ +@use '../../../base/colors/blue-france'; +@use '../../../base/colors/red-marianne'; +@use "sass:list"; + +$light-color-list: ( + blue-france.$blue-france-sun-113, + blue-france.$blue-france-main-525, + blue-france.$blue-france-950, + red-marianne.$red-marianne-472 +); + +$dark-color-list: ( + blue-france.$blue-france-625, + blue-france.$blue-france-main-525, + blue-france.$blue-france-100, + red-marianne.$red-marianne-472 +); + +$artwork-light: ( + "major-blue-france": list.nth($light-color-list, 1), + "minor-blue-france": list.nth($light-color-list, 2), + "decorative-blue-france": list.nth($light-color-list, 3), + "minor-red-marianne": list.nth($light-color-list, 4) +); + +$artwork-dark: ( + "major-blue-france": list.nth($dark-color-list, 1), + "minor-blue-france": list.nth($dark-color-list, 2), + "decorative-blue-france": list.nth($dark-color-list, 3), + "minor-red-marianne": list.nth($dark-color-list, 4) +); \ No newline at end of file diff --git a/src/tokens/themes/decisions/_background.scss b/src/tokens/themes/decisions/_background.scss new file mode 100644 index 0000000..3d0de12 --- /dev/null +++ b/src/tokens/themes/decisions/_background.scss @@ -0,0 +1,174 @@ +@use '../../../base/colors/blue-france'; +@use '../../../base/colors/error'; +@use '../../../base/colors/focus'; +@use '../../../base/colors/grey' as grey-variant; +@use '../../../base/colors/info'; +@use '../../../base/colors/success'; +@use '../../../base/colors/warning'; +@use "sass:list"; + +$light-color-list: ( + grey-variant.$grey-1000, + grey-variant.$grey-1000-hover, + grey-variant.$grey-1000-active, + grey-variant.$grey-975, + grey-variant.$grey-975-hover, + grey-variant.$grey-975-active, + blue-france.$blue-france-975, + grey-variant.$grey-950, + blue-france.$blue-france-sun-113, + blue-france.$blue-france-sun-113-hover, + blue-france.$blue-france-sun-113-active, + blue-france.$blue-france-925, + blue-france.$blue-france-925-hover, + blue-france.$blue-france-925-active, + success.$success-425, + error.$error-425, + warning.$warning-425, + info.$info-425, + success.$success-950, + error.$error-950, + warning.$warning-950, + info.$info-950, + grey-variant.$grey-925, + #161616a3, + #00000000, + #0000000a, + #00000014, + blue-france.$blue-france-950, + grey-variant.$grey-1000, + grey-variant.$grey-1000, + grey-variant.$grey-950, + grey-variant.$grey-950, + grey-variant.$grey-975, + grey-variant.$grey-975, +); + +$dark-color-list: ( + grey-variant.$grey-50, + grey-variant.$grey-50-hover, + grey-variant.$grey-50-active, + grey-variant.$grey-75, + grey-variant.$grey-75-hover, + grey-variant.$grey-75-active, + blue-france.$blue-france-75, + grey-variant.$grey-100, + blue-france.$blue-france-625, + blue-france.$blue-france-625-hover, + blue-france.$blue-france-625-active, + blue-france.$blue-france-125, + blue-france.$blue-france-125-hover, + blue-france.$blue-france-125-active, + success.$success-625, + error.$error-625, + warning.$warning-625, + info.$info-625, + success.$success-100, + error.$error-100, + warning.$warning-100, + info.$info-100, + grey-variant.$grey-125, + #161616a3, + #ffffff00, + #ffffff14, + #ffffff29, + blue-france.$blue-france-100, + grey-variant.$grey-75, + grey-variant.$grey-100, + grey-variant.$grey-125, + grey-variant.$grey-150, + grey-variant.$grey-125, + grey-variant.$grey-150, +); + +$background-light: ( + "background-default-grey": list.nth($light-color-list, 1), + "background-default-grey-hover": list.nth($light-color-list, 2), + "background-default-grey-active": list.nth($light-color-list, 3), + "background-alt-grey": list.nth($light-color-list, 4), + "background-alt-grey-hover": list.nth($light-color-list, 5), + "background-alt-grey-active": list.nth($light-color-list, 6), + "background-alt-blue-france": list.nth($light-color-list, 7), + "background-contrast-grey": list.nth($light-color-list, 8), + "background-action-high-blue-france": list.nth($light-color-list, 9), + "background-action-high-blue-france-hover": list.nth($light-color-list, 10), + "background-action-high-blue-france-active": list.nth($light-color-list, 11), + "background-action-low-blue-france": list.nth($light-color-list, 12), + "background-action-low-blue-france-hover": list.nth($light-color-list, 13), + "background-action-low-blue-france-active": list.nth($light-color-list, 14), + "background-active-blue-france": list.nth($light-color-list, 9), + "background-open-blue-france": list.nth($light-color-list, 12), + "background-open-blue-france-hover": list.nth($light-color-list, 13), + "background-open-blue-france-active": list.nth($light-color-list, 14), + "background-flat-success": list.nth($light-color-list, 15), + "background-flat-error": list.nth($light-color-list, 16), + "background-flat-warning": list.nth($light-color-list, 17), + "background-flat-info": list.nth($light-color-list, 18), + "background-action-high-success": list.nth($light-color-list, 15), + "background-action-high-error": list.nth($light-color-list, 16), + "background-action-high-warning": list.nth($light-color-list, 17), + "background-action-high-info": list.nth($light-color-list, 18), + "background-contrast-success": list.nth($light-color-list, 19), + "background-contrast-error": list.nth($light-color-list, 20), + "background-contrast-warning": list.nth($light-color-list, 21), + "background-contrast-info": list.nth($light-color-list, 22), + "background-disabled-grey": list.nth($light-color-list, 23), + "background-overlay-grey": list.nth($light-color-list, 24), + "background-transparent": list.nth($light-color-list, 25), + "background-transparent-hover": list.nth($light-color-list, 26), + "background-transparent-active": list.nth($light-color-list, 27), + "background-contrast-blue-france": list.nth($light-color-list, 28), + "background-raised-grey": list.nth($light-color-list, 29), + "background-overlap-grey": list.nth($light-color-list, 30), + "background-contrast-raised-grey": list.nth($light-color-list, 31), + "background-contrast-overlap-grey": list.nth($light-color-list, 32), + "background-lifted-grey": list.nth($light-color-list, 29), + "background-alt-raised-grey": list.nth($light-color-list, 33), + "background-alt-overlap-grey": list.nth($light-color-list, 34), +); + +$background-dark: ( + "background-default-grey": list.nth($dark-color-list, 1), + "background-default-grey-hover": list.nth($dark-color-list, 2), + "background-default-grey-active": list.nth($dark-color-list, 3), + "background-alt-grey": list.nth($dark-color-list, 4), + "background-alt-grey-hover": list.nth($dark-color-list, 5), + "background-alt-grey-active": list.nth($dark-color-list, 6), + "background-alt-blue-france": list.nth($dark-color-list, 7), + "background-contrast-grey": list.nth($dark-color-list, 8), + "background-action-high-blue-france": list.nth($dark-color-list, 9), + "background-action-high-blue-france-hover": list.nth($dark-color-list, 10), + "background-action-high-blue-france-active": list.nth($dark-color-list, 11), + "background-action-low-blue-france": list.nth($dark-color-list, 12), + "background-action-low-blue-france-hover": list.nth($dark-color-list, 13), + "background-action-low-blue-france-active": list.nth($dark-color-list, 14), + "background-active-blue-france": list.nth($dark-color-list, 9), + "background-open-blue-france": list.nth($dark-color-list, 12), + "background-open-blue-france-hover": list.nth($dark-color-list, 13), + "background-open-blue-france-active": list.nth($dark-color-list, 14), + "background-flat-success": list.nth($dark-color-list, 15), + "background-flat-error": list.nth($dark-color-list, 16), + "background-flat-warning": list.nth($dark-color-list, 17), + "background-flat-info": list.nth($dark-color-list, 18), + "background-action-high-success": list.nth($dark-color-list, 15), + "background-action-high-error": list.nth($dark-color-list, 16), + "background-action-high-warning": list.nth($dark-color-list, 17), + "background-action-high-info": list.nth($dark-color-list, 18), + "background-contrast-success": list.nth($dark-color-list, 19), + "background-contrast-error": list.nth($dark-color-list, 20), + "background-contrast-warning": list.nth($dark-color-list, 21), + "background-contrast-info": list.nth($dark-color-list, 22), + "background-disabled-grey": list.nth($dark-color-list, 23), + "background-overlay-grey": list.nth($dark-color-list, 24), + "background-transparent": list.nth($dark-color-list, 25), + "background-transparent-hover": list.nth($dark-color-list, 26), + "background-transparent-active": list.nth($dark-color-list, 27), + "background-contrast-blue-france": list.nth($dark-color-list, 28), + "background-raised-grey": list.nth($dark-color-list, 29), + "background-overlap-grey": list.nth($dark-color-list, 30), + "background-contrast-raised-grey": list.nth($dark-color-list, 31), + "background-contrast-overlap-grey": list.nth($dark-color-list, 32), + "background-lifted-grey": list.nth($dark-color-list, 29), + "background-alt-raised-grey": list.nth($dark-color-list, 33), + "background-alt-overlap-grey": list.nth($dark-color-list, 34), +); diff --git a/src/tokens/themes/decisions/_border.scss b/src/tokens/themes/decisions/_border.scss new file mode 100644 index 0000000..0dc0f05 --- /dev/null +++ b/src/tokens/themes/decisions/_border.scss @@ -0,0 +1,76 @@ +@use '../../../base/colors/blue-france'; +@use '../../../base/colors/error'; +@use '../../../base/colors/focus'; +@use '../../../base/colors/grey' as grey-variant; +@use '../../../base/colors/info'; +@use '../../../base/colors/success'; +@use '../../../base/colors/warning'; +@use "sass:list"; + +$light-color-list: ( + grey-variant.$grey-900, + grey-variant.$grey-625, + blue-france.$blue-france-main-525, + blue-france.$blue-france-sun-113, + grey-variant.$grey-50, + blue-france.$blue-france-925, + grey-variant.$grey-925, + grey-variant.$grey-200, + success.$success-425, + error.$error-425, + warning.$warning-425, + info.$info-425, + blue-france.$blue-france-850, +); + +$dark-color-list: ( + grey-variant.$grey-175, + grey-variant.$grey-425, + blue-france.$blue-france-main-525, + blue-france.$blue-france-625, + grey-variant.$grey-1000, + blue-france.$blue-france-125, + grey-variant.$grey-125, + grey-variant.$grey-850, + success.$success-625, + error.$error-625, + warning.$warning-625, + info.$info-625, + blue-france.$blue-france-200, +); + +$border-light: ( + "border-default-grey": list.nth($light-color-list, 1), + "border-contrast-grey": list.nth($light-color-list, 2), + "border-default-blue-france": list.nth($light-color-list, 3), + "border-action-high-blue-france": list.nth($light-color-list, 4), + "border-action-high-grey": list.nth($light-color-list, 5), + "border-active-blue-france": list.nth($light-color-list, 4), + "border-open-blue-france": list.nth($light-color-list, 6), + "border-disabled-grey": list.nth($light-color-list, 7), + "border-plain-blue-france": list.nth($light-color-list, 4), + "border-plain-grey": list.nth($light-color-list, 8), + "border-plain-success": list.nth($light-color-list, 9), + "border-plain-error": list.nth($light-color-list, 10), + "border-plain-warning": list.nth($light-color-list, 11), + "border-plain-info": list.nth($light-color-list, 12), + "border-action-low-blue-france": list.nth($light-color-list, 13), +); + +$border-dark: ( + "border-default-grey": list.nth($dark-color-list, 1), + "border-contrast-grey": list.nth($dark-color-list, 2), + "border-default-blue-france": list.nth($dark-color-list, 3), + "border-action-high-blue-france": list.nth($dark-color-list, 4), + "border-action-high-grey": list.nth($dark-color-list, 5), + "border-active-blue-france": list.nth($dark-color-list, 4), + "border-open-blue-france": list.nth($dark-color-list, 6), + "border-disabled-grey": list.nth($dark-color-list, 7), + "border-plain-blue-france": list.nth($dark-color-list, 4), + "border-plain-grey": list.nth($dark-color-list, 8), + "border-plain-success": list.nth($dark-color-list, 9), + "border-plain-error": list.nth($dark-color-list, 10), + "border-plain-warning": list.nth($dark-color-list, 11), + "border-plain-info": list.nth($dark-color-list, 12), + "border-action-low-blue-france": list.nth($dark-color-list, 13), +); \ No newline at end of file diff --git a/src/tokens/themes/decisions/_text.scss b/src/tokens/themes/decisions/_text.scss new file mode 100644 index 0000000..67b7efe --- /dev/null +++ b/src/tokens/themes/decisions/_text.scss @@ -0,0 +1,80 @@ +@use '../../../base/colors/blue-france'; +@use '../../../base/colors/error'; +@use '../../../base/colors/focus'; +@use '../../../base/colors/grey' as grey-variant; +@use '../../../base/colors/info'; +@use '../../../base/colors/success'; +@use '../../../base/colors/warning'; +@use "sass:list"; + +$light-color-list: ( + grey-variant.$grey-50, + blue-france.$blue-france-sun-113, + grey-variant.$grey-200, + grey-variant.$grey-425, + info.$info-425, + warning.$warning-425, + error.$error-425, + grey-variant.$grey-1000, + blue-france.$blue-france-975, + grey-variant.$grey-625, + success.$success-425, +); + +$dark-color-list: ( + grey-variant.$grey-1000, + blue-france.$blue-france-625, + grey-variant.$grey-850, + grey-variant.$grey-625, + info.$info-625, + warning.$warning-625, + error.$error-625, + grey-variant.$grey-50, + blue-france.$blue-france-sun-113, + grey-variant.$grey-425, + success.$success-625, +); + +$text-light: ( + "text-title-grey": list.nth($light-color-list, 1), + "text-title-blue-france": list.nth($light-color-list, 2), + "text-default-grey": list.nth($light-color-list, 3), + "text-mention-grey": list.nth($light-color-list, 4), + "text-label-grey": list.nth($light-color-list, 1), + "text-action-high-blue-france": list.nth($light-color-list, 2), + "text-action-high-grey": list.nth($light-color-list, 1), + "text-action-high-info": list.nth($light-color-list, 5), + "text-action-high-warning": list.nth($light-color-list, 6), + "text-action-high-error": list.nth($light-color-list, 7), + "text-inverted-grey": list.nth($light-color-list, 8), + "text-inverted-blue-france": list.nth($light-color-list, 9), + "text-active-blue-france": list.nth($light-color-list, 2), + "text-active-grey": list.nth($light-color-list, 1), + "text-disabled-grey": list.nth($light-color-list, 10), + "text-default-success": list.nth($light-color-list, 11), + "text-default-error": list.nth($light-color-list, 7), + "text-default-warning": list.nth($light-color-list, 6), + "text-default-info": list.nth($light-color-list, 5), +); + +$text-dark: ( + "text-title-grey": list.nth($dark-color-list, 1), + "text-title-blue-france": list.nth($dark-color-list, 2), + "text-default-grey": list.nth($dark-color-list, 3), + "text-mention-grey": list.nth($dark-color-list, 4), + "text-label-grey": list.nth($dark-color-list, 1), + "text-action-high-blue-france": list.nth($dark-color-list, 2), + "text-action-high-grey": list.nth($dark-color-list, 1), + "text-action-high-info": list.nth($dark-color-list, 5), + "text-action-high-warning": list.nth($dark-color-list, 6), + "text-action-high-error": list.nth($dark-color-list, 7), + "text-inverted-grey": list.nth($dark-color-list, 8), + "text-inverted-blue-france": list.nth($dark-color-list, 9), + "text-active-blue-france": list.nth($dark-color-list, 2), + "text-active-grey": list.nth($dark-color-list, 1), + "text-disabled-grey": list.nth($dark-color-list, 10), + "text-default-success": list.nth($dark-color-list, 11), + "text-default-error": list.nth($dark-color-list, 7), + "text-default-warning": list.nth($dark-color-list, 6), + "text-default-info": list.nth($dark-color-list, 5), +); \ No newline at end of file