💄 Add decision tokens
This commit is contained in:
GOMA
parent
fa2730f2b0
commit
b5d3c44d3f
31
src/tokens/themes/decisions/_artwork.scss
Normal file
31
src/tokens/themes/decisions/_artwork.scss
Normal file
|
|
@ -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)
|
||||
);
|
||||
174
src/tokens/themes/decisions/_background.scss
Normal file
174
src/tokens/themes/decisions/_background.scss
Normal file
|
|
@ -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),
|
||||
);
|
||||
76
src/tokens/themes/decisions/_border.scss
Normal file
76
src/tokens/themes/decisions/_border.scss
Normal file
|
|
@ -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),
|
||||
);
|
||||
80
src/tokens/themes/decisions/_text.scss
Normal file
80
src/tokens/themes/decisions/_text.scss
Normal file
|
|
@ -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),
|
||||
);
|
||||
Loading…
Reference in New Issue
Block a user