diff --git a/packages/blade/src/tokens/global/colors.ts b/packages/blade/src/tokens/global/colors.ts index dbc2815f624..6a88e6ce4ef 100644 --- a/packages/blade/src/tokens/global/colors.ts +++ b/packages/blade/src/tokens/global/colors.ts @@ -67,275 +67,252 @@ export type Color = Readonly<{ export const colors: Color = { chromatic: { azure: { - 50: `hsla(222, 100%, 96%, ${opacity[9]})`, - 100: `hsla(218, 93%, 88%, ${opacity[9]})`, - 200: `hsla(216, 92%, 81%, ${opacity[9]})`, - 300: `hsla(215, 91%, 74%, ${opacity[9]})`, - 400: `hsla(213, 91%, 66%, ${opacity[9]})`, - 500: `hsla(213, 89%, 56%, ${opacity[9]})`, - 600: `hsla(218, 89%, 51%, ${opacity[9]})`, - 700: `hsla(223, 95%, 48%, ${opacity[9]})`, - 800: `hsla(227, 100%, 45%, ${opacity[9]})`, - 900: `hsla(230, 100%, 42%, ${opacity[9]})`, - 950: `hsla(234, 100%, 34%, ${opacity[9]})`, - a00: `hsla(218, 89%, 51%, ${opacity[0]})`, - a50: `hsla(218, 89%, 51%, ${opacity[1]})`, - a100: `hsla(218, 89%, 51%, ${opacity[2]})`, - a200: `hsla(218, 89%, 51%, ${opacity[3]})`, + 50: `hsla(222, 100%, 98%, ${opacity[11]})`, + 100: `hsla(221, 90%, 92%, ${opacity[11]})`, + 200: `hsla(219, 95%, 85%, ${opacity[11]})`, + 300: `hsla(220, 100%, 73%, ${opacity[11]})`, + 400: `hsla(223, 100%, 65%, ${opacity[11]})`, + 500: `hsla(227, 100%, 59%, ${opacity[11]})`, + 600: `hsla(227, 71%, 51%, ${opacity[11]})`, + 700: `hsla(227, 69%, 42%, ${opacity[11]})`, + 800: `hsla(227, 69%, 34%, ${opacity[11]})`, + 900: `hsla(227, 69%, 25%, ${opacity[11]})`, + 1000: `hsla(227, 69%, 17%, ${opacity[11]})`, + a50: `hsla(227, 100%, 59%, ${opacity[1]})`, + a100: `hsla(227, 100%, 59%, ${opacity[3]})`, + a150: `hsla(227, 100%, 59%, undefined)`, + a200: `hsla(227, 100%, 59%, ${opacity[4]})`, }, emerald: { - 50: `hsla(107, 100%, 96%, ${opacity[9]})`, - 100: `hsla(113, 69%, 83%, ${opacity[9]})`, - 200: `hsla(121, 65%, 71%, ${opacity[9]})`, - 300: `hsla(130, 62%, 60%, ${opacity[9]})`, - 400: `hsla(137, 60%, 50%, ${opacity[9]})`, - 500: `hsla(149, 99%, 35%, ${opacity[9]})`, - 600: `hsla(155, 100%, 31%, ${opacity[9]})`, - 700: `hsla(160, 100%, 26%, ${opacity[9]})`, - 800: `hsla(163, 100%, 22%, ${opacity[9]})`, - 900: `hsla(164, 100%, 17%, ${opacity[9]})`, - 950: `hsla(165, 100%, 13%, ${opacity[9]})`, - a00: `hsla(155, 100%, 31%, ${opacity[0]})`, - a50: `hsla(155, 100%, 31%, ${opacity[1]})`, - a100: `hsla(155, 100%, 31%, ${opacity[2]})`, - a200: `hsla(155, 100%, 31%, ${opacity[3]})`, + 50: `hsla(152, 60%, 95%, ${opacity[11]})`, + 100: `hsla(151, 57%, 91%, ${opacity[11]})`, + 200: `hsla(150, 59%, 82%, ${opacity[11]})`, + 300: `hsla(150, 59%, 73%, ${opacity[11]})`, + 400: `hsla(150, 59%, 55%, ${opacity[11]})`, + 500: `hsla(150, 100%, 37%, ${opacity[11]})`, + 600: `hsla(150, 100%, 32%, ${opacity[11]})`, + 700: `hsla(150, 100%, 27%, ${opacity[11]})`, + 800: `hsla(150, 100%, 21%, ${opacity[11]})`, + 900: `hsla(150, 100%, 16%, ${opacity[11]})`, + 1000: `hsla(150, 100%, 11%, ${opacity[11]})`, + a50: `hsla(150, 100%, 32%, ${opacity[1]})`, + a100: `hsla(150, 100%, 32%, ${opacity[3]})`, + a150: `hsla(150, 100%, 32%, undefined)`, + a200: `hsla(150, 100%, 32%, ${opacity[4]})`, }, crimson: { - 50: `hsla(0, 100%, 97%, ${opacity[9]})`, - 100: `hsla(0, 100%, 92%, ${opacity[9]})`, - 200: `hsla(3, 100%, 86%, ${opacity[9]})`, - 300: `hsla(5, 100%, 80%, ${opacity[9]})`, - 400: `hsla(6, 100%, 75%, ${opacity[9]})`, - 500: `hsla(8, 99%, 65%, ${opacity[9]})`, - 600: `hsla(9, 91%, 56%, ${opacity[9]})`, - 700: `hsla(8, 73%, 47%, ${opacity[9]})`, - 800: `hsla(7, 72%, 40%, ${opacity[9]})`, - 900: `hsla(5, 69%, 32%, ${opacity[9]})`, - 950: `hsla(3, 66%, 24%, ${opacity[9]})`, - a00: `hsla(9, 91%, 56%, ${opacity[0]})`, - a50: `hsla(9, 91%, 56%, ${opacity[1]})`, - a100: `hsla(9, 91%, 56%, ${opacity[2]})`, - a200: `hsla(9, 91%, 56%, ${opacity[3]})`, + 50: `hsla(0, 100%, 98%, ${opacity[11]})`, + 100: `hsla(4, 93%, 94%, ${opacity[11]})`, + 200: `hsla(3, 97%, 88%, ${opacity[11]})`, + 300: `hsla(4, 96%, 79%, ${opacity[11]})`, + 400: `hsla(4, 93%, 68%, ${opacity[11]})`, + 500: `hsla(4, 86%, 58%, ${opacity[11]})`, + 600: `hsla(4, 74%, 49%, ${opacity[11]})`, + 700: `hsla(4, 77%, 40%, ${opacity[11]})`, + 800: `hsla(0, 83%, 33%, ${opacity[11]})`, + 900: `hsla(0, 84%, 29%, ${opacity[11]})`, + 1000: `hsla(0, 84%, 25%, ${opacity[11]})`, + a50: `hsla(4, 74%, 49%, ${opacity[1]})`, + a100: `hsla(4, 74%, 49%, ${opacity[3]})`, + a150: `hsla(4, 74%, 49%, undefined)`, + a200: `hsla(4, 74%, 49%, ${opacity[4]})`, }, cider: { - 50: `hsla(32, 100%, 94%, ${opacity[9]})`, - 100: `hsla(32, 97%, 86%, ${opacity[9]})`, - 200: `hsla(33, 94%, 79%, ${opacity[9]})`, - 300: `hsla(33, 94%, 72%, ${opacity[9]})`, - 400: `hsla(34, 93%, 65%, ${opacity[9]})`, - 500: `hsla(35, 84%, 54%, ${opacity[9]})`, - 600: `hsla(36, 100%, 44%, ${opacity[9]})`, - 700: `hsla(38, 97%, 38%, ${opacity[9]})`, - 800: `hsla(40, 90%, 32%, ${opacity[9]})`, - 900: `hsla(41, 82%, 26%, ${opacity[9]})`, - 950: `hsla(42, 74%, 20%, ${opacity[9]})`, - a00: `hsla(36, 100%, 44%, ${opacity[0]})`, - a50: `hsla(36, 100%, 44%, ${opacity[1]})`, - a100: `hsla(36, 100%, 44%, ${opacity[2]})`, - a200: `hsla(36, 100%, 44%, ${opacity[3]})`, + 50: `hsla(24, 100%, 96%, ${opacity[11]})`, + 100: `hsla(25, 100%, 90%, ${opacity[11]})`, + 200: `hsla(25, 100%, 80%, ${opacity[11]})`, + 300: `hsla(25, 100%, 72%, ${opacity[11]})`, + 400: `hsla(25, 100%, 63%, ${opacity[11]})`, + 500: `hsla(25, 100%, 55%, ${opacity[11]})`, + 600: `hsla(25, 90%, 48%, ${opacity[11]})`, + 700: `hsla(25, 85%, 42%, ${opacity[11]})`, + 800: `hsla(25, 82%, 35%, ${opacity[11]})`, + 900: `hsla(25, 80%, 28%, ${opacity[11]})`, + 1000: `hsla(25, 82%, 20%, ${opacity[11]})`, + a50: `hsla(25, 90%, 48%, ${opacity[1]})`, + a100: `hsla(25, 90%, 48%, ${opacity[3]})`, + a150: `hsla(25, 90%, 48%, undefined)`, + a200: `hsla(25, 90%, 48%, ${opacity[4]})`, }, - orchid: { - 50: `hsla(258, 100%, 96%, ${opacity[9]})`, - 100: `hsla(263, 100%, 92%, ${opacity[9]})`, - 200: `hsla(264, 100%, 87%, ${opacity[9]})`, - 300: `hsla(267, 100%, 83%, ${opacity[9]})`, - 400: `hsla(268, 100%, 79%, ${opacity[9]})`, - 500: `hsla(269, 100%, 69%, ${opacity[9]})`, - 600: `hsla(271, 96%, 61%, ${opacity[9]})`, - 700: `hsla(276, 79%, 47%, ${opacity[9]})`, - 800: `hsla(280, 95%, 36%, ${opacity[9]})`, - 900: `hsla(283, 96%, 29%, ${opacity[9]})`, - 950: `hsla(286, 96%, 22%, ${opacity[9]})`, - a00: `hsla(271, 96%, 61%, ${opacity[0]})`, - a50: `hsla(271, 96%, 61%, ${opacity[1]})`, - a100: `hsla(271, 96%, 61%, ${opacity[2]})`, - a200: `hsla(271, 96%, 61%, ${opacity[3]})`, + sapphire: { + 50: `hsla(201, 92%, 95%, ${opacity[11]})`, + 100: `hsla(200, 88%, 90%, ${opacity[11]})`, + 200: `hsla(200, 89%, 82%, ${opacity[11]})`, + 300: `hsla(200, 90%, 72%, ${opacity[11]})`, + 400: `hsla(200, 90%, 65%, ${opacity[11]})`, + 500: `hsla(198, 90%, 52%, ${opacity[11]})`, + 600: `hsla(200, 84%, 44%, ${opacity[11]})`, + 700: `hsla(200, 84%, 37%, ${opacity[11]})`, + 800: `hsla(200, 84%, 29%, ${opacity[11]})`, + 900: `hsla(200, 84%, 22%, ${opacity[11]})`, + 1000: `hsla(199, 84%, 15%, ${opacity[11]})`, + a50: `hsla(200, 84%, 44%, ${opacity[1]})`, + a100: `hsla(200, 84%, 44%, ${opacity[3]})`, + a150: `hsla(200, 84%, 44%, undefined)`, + a200: `hsla(200, 84%, 44%, ${opacity[4]})`, }, - magenta: { - 50: `hsla(309, 100%, 96%, ${opacity[9]})`, - 100: `hsla(307, 100%, 91%, ${opacity[9]})`, - 200: `hsla(303, 100%, 85%, ${opacity[9]})`, - 300: `hsla(301, 100%, 80%, ${opacity[9]})`, - 400: `hsla(300, 100%, 75%, ${opacity[9]})`, - 500: `hsla(303, 100%, 65%, ${opacity[9]})`, - 600: `hsla(308, 75%, 51%, ${opacity[9]})`, - 700: `hsla(313, 88%, 40%, ${opacity[9]})`, - 800: `hsla(317, 100%, 32%, ${opacity[9]})`, - 900: `hsla(321, 100%, 26%, ${opacity[9]})`, - 950: `hsla(324, 100%, 20%, ${opacity[9]})`, - a00: `hsla(308, 75%, 51%, ${opacity[0]})`, - a50: `hsla(308, 75%, 51%, ${opacity[1]})`, - a100: `hsla(308, 75%, 51%, ${opacity[2]})`, - a200: `hsla(308, 75%, 51%, ${opacity[3]})`, + sea: { + 50: `hsla(180, 39%, 95%, ${opacity[11]})`, + 100: `hsla(180, 42%, 92%, ${opacity[11]})`, + 200: `hsla(180, 33%, 82%, ${opacity[11]})`, + 300: `hsla(180, 35%, 70%, ${opacity[11]})`, + 400: `hsla(180, 30%, 52%, ${opacity[11]})`, + 500: `hsla(180, 45%, 40%, ${opacity[11]})`, + 600: `hsla(180, 60%, 30%, ${opacity[11]})`, + 700: `hsla(180, 55%, 25%, ${opacity[11]})`, + 800: `hsla(180, 61%, 20%, ${opacity[11]})`, + 900: `hsla(180, 91%, 13%, ${opacity[11]})`, + 1000: `hsla(180, 91%, 8%, ${opacity[11]})`, + a50: `hsla(180, 60%, 30%, ${opacity[1]})`, + a100: `hsla(180, 60%, 30%, ${opacity[3]})`, + a150: `hsla(180, 60%, 30%, undefined)`, + a200: `hsla(180, 60%, 30%, ${opacity[4]})`, }, - sapphire: { - 50: `hsla(180, 100%, 97%, ${opacity[9]})`, - 100: `hsla(181, 75%, 85%, ${opacity[9]})`, - 200: `hsla(184, 72%, 73%, ${opacity[9]})`, - 300: `hsla(185, 70%, 62%, ${opacity[9]})`, - 400: `hsla(187, 68%, 52%, ${opacity[9]})`, - 500: `hsla(190, 100%, 39%, ${opacity[9]})`, - 600: `hsla(193, 100%, 35%, ${opacity[9]})`, - 700: `hsla(195, 100%, 31%, ${opacity[9]})`, - 800: `hsla(196, 100%, 27%, ${opacity[9]})`, - 900: `hsla(197, 100%, 23%, ${opacity[9]})`, - 950: `hsla(198, 100%, 20%, ${opacity[9]})`, - a00: `hsla(193, 100%, 35%, ${opacity[0]})`, - a50: `hsla(193, 100%, 35%, ${opacity[1]})`, - a100: `hsla(193, 100%, 35%, ${opacity[2]})`, - a200: `hsla(193, 100%, 35%, ${opacity[3]})`, + cloud: { + 50: `hsla(198, 39%, 95%, ${opacity[11]})`, + 100: `hsla(201, 39%, 93%, ${opacity[11]})`, + 200: `hsla(200, 35%, 85%, ${opacity[11]})`, + 300: `hsla(200, 35%, 70%, ${opacity[11]})`, + 400: `hsla(200, 30%, 52%, ${opacity[11]})`, + 500: `hsla(200, 45%, 40%, ${opacity[11]})`, + 600: `hsla(200, 60%, 30%, ${opacity[11]})`, + 700: `hsla(201, 55%, 25%, ${opacity[11]})`, + 800: `hsla(200, 61%, 20%, ${opacity[11]})`, + 900: `hsla(200, 91%, 13%, ${opacity[11]})`, + 1000: `hsla(200, 91%, 8%, ${opacity[11]})`, + a50: `hsla(200, 60%, 30%, ${opacity[1]})`, + a100: `hsla(200, 60%, 30%, ${opacity[3]})`, + a150: `hsla(200, 60%, 30%, undefined)`, + a200: `hsla(200, 60%, 30%, ${opacity[4]})`, + }, + forest: { + 50: `hsla(152, 60%, 95%, ${opacity[11]})`, + 100: `hsla(151, 57%, 91%, ${opacity[11]})`, + 200: `hsla(150, 59%, 82%, ${opacity[11]})`, + 300: `hsla(150, 59%, 73%, ${opacity[11]})`, + 400: `hsla(150, 59%, 55%, ${opacity[11]})`, + 500: `hsla(155, 100%, 37%, ${opacity[11]})`, + 600: `hsla(155, 100%, 31%, ${opacity[11]})`, + 700: `hsla(155, 100%, 27%, ${opacity[11]})`, + 800: `hsla(155, 100%, 21%, ${opacity[11]})`, + 900: `hsla(155, 100%, 16%, ${opacity[11]})`, + 1000: `hsla(155, 100%, 11%, ${opacity[11]})`, + a50: `hsla(155, 100%, 31%, ${opacity[1]})`, + a100: `hsla(155, 100%, 31%, ${opacity[3]})`, + a150: `hsla(155, 100%, 31%, undefined)`, + a200: `hsla(155, 100%, 31%, ${opacity[4]})`, }, }, neutral: { blueGrayLight: { - 0: `hsla(0, 0%, 100%, ${opacity[9]})`, - 50: `hsla(220, 27%, 98%, ${opacity[9]})`, - 100: `hsla(220, 30%, 96%, ${opacity[9]})`, - 200: `hsla(214, 21%, 94%, ${opacity[9]})`, - 300: `hsla(216, 19%, 89%, ${opacity[9]})`, - 400: `hsla(218, 19%, 81%, ${opacity[9]})`, - 500: `hsla(214, 18%, 69%, ${opacity[9]})`, - 600: `hsla(216, 16%, 60%, ${opacity[9]})`, - 700: `hsla(216, 15%, 54%, ${opacity[9]})`, - 800: `hsla(217, 18%, 45%, ${opacity[9]})`, - 900: `hsla(216, 27%, 36%, ${opacity[9]})`, - 1000: `hsla(216, 33%, 29%, ${opacity[9]})`, - 1100: `hsla(216, 44%, 23%, ${opacity[9]})`, - 1200: `hsla(217, 56%, 17%, ${opacity[9]})`, - 1300: `hsla(215, 70%, 13%, ${opacity[9]})`, - a00: `hsla(216, 44%, 23%, ${opacity[0]})`, - a50: `hsla(216, 15%, 54%, ${opacity[1]})`, - a100: `hsla(216, 15%, 54%, ${opacity[2]})`, - a200: `hsla(216, 15%, 54%, ${opacity[3]})`, - a300: `hsla(214, 21%, 94%, ${opacity[1]})`, - a400: `hsla(214, 21%, 94%, ${opacity[2]})`, - a500: `hsla(214, 21%, 94%, ${opacity[3]})`, - a1100: `hsla(214, 18%, 69%, ${opacity[6]})`, + 0: `hsla(0, 0%, 100%, ${opacity[11]})`, + 50: `hsla(210, 40%, 98%, ${opacity[11]})`, + 100: `hsla(213, 47%, 96%, ${opacity[11]})`, + 200: `hsla(214, 40%, 92%, ${opacity[11]})`, + 300: `hsla(214, 28%, 84%, ${opacity[11]})`, + 400: `hsla(211, 27%, 76%, ${opacity[11]})`, + 500: `hsla(211, 24%, 65%, ${opacity[11]})`, + 600: `hsla(211, 22%, 56%, ${opacity[11]})`, + 700: `hsla(211, 20%, 52%, ${opacity[11]})`, + 800: `hsla(211, 23%, 45%, ${opacity[11]})`, + 900: `hsla(211, 26%, 34%, ${opacity[11]})`, + 1000: `hsla(211, 29%, 26%, ${opacity[11]})`, + 1100: `hsla(211, 33%, 21%, ${opacity[11]})`, + 1200: `hsla(212, 39%, 16%, ${opacity[11]})`, + 1300: `hsla(211, 53%, 10%, ${opacity[11]})`, + a50: `hsla(211, 20%, 52%, ${opacity[1]})`, + a75: `hsla(211, 20%, 52%, ${opacity[2]})`, + a100: `hsla(211, 20%, 52%, ${opacity[3]})`, + a200: `hsla(211, 20%, 52%, ${opacity[4]})`, + a400: `hsla(211, 20%, 52%, ${opacity[7]})`, }, blueGrayDark: { - 0: `hsla(0, 0%, 99%, ${opacity[9]})`, - 50: `hsla(215, 12%, 92%, ${opacity[9]})`, - 100: `hsla(218, 11%, 84%, ${opacity[9]})`, - 200: `hsla(218, 11%, 76%, ${opacity[9]})`, - 300: `hsla(219, 10%, 60%, ${opacity[9]})`, - 400: `hsla(219, 12%, 45%, ${opacity[9]})`, - 500: `hsla(220, 16%, 37%, ${opacity[9]})`, - 600: `hsla(220, 23%, 29%, ${opacity[9]})`, - 700: `hsla(220, 35%, 22%, ${opacity[9]})`, - 800: `hsla(219, 41%, 19%, ${opacity[9]})`, - 900: `hsla(218, 49%, 17%, ${opacity[9]})`, - 1000: `hsla(218, 52%, 16%, ${opacity[9]})`, - 1100: `hsla(218, 54%, 15%, ${opacity[9]})`, - 1200: `hsla(218, 59%, 13%, ${opacity[9]})`, - 1300: `hsla(218, 67%, 10%, ${opacity[9]})`, - a00: `hsla(220, 11%, 84%, ${opacity[0]})`, - a50: `hsla(220, 11%, 84%, ${opacity[1]})`, - a100: `hsla(220, 11%, 84%, ${opacity[2]})`, - a200: `hsla(220, 11%, 84%, ${opacity[3]})`, - a300: `hsla(217, 11%, 76%, ${opacity[1]})`, - a400: `hsla(217, 11%, 76%, ${opacity[2]})`, - a500: `hsla(217, 11%, 76%, ${opacity[3]})`, - a1100: `hsla(221, 16%, 37%, ${opacity[6]})`, - }, - navyGrayLight: { - 0: `hsla(0, 0%, 100%, ${opacity[9]})`, - 50: `hsla(230, 27%, 98%, ${opacity[9]})`, - 100: `hsla(230, 30%, 96%, ${opacity[9]})`, - 200: `hsla(224, 21%, 94%, ${opacity[9]})`, - 300: `hsla(226, 19%, 89%, ${opacity[9]})`, - 400: `hsla(228, 19%, 81%, ${opacity[9]})`, - 500: `hsla(225, 18%, 69%, ${opacity[9]})`, - 600: `hsla(226, 16%, 60%, ${opacity[9]})`, - 700: `hsla(226, 15%, 54%, ${opacity[9]})`, - 800: `hsla(227, 18%, 45%, ${opacity[9]})`, - 900: `hsla(226, 27%, 36%, ${opacity[9]})`, - 1000: `hsla(226, 33%, 29%, ${opacity[9]})`, - 1100: `hsla(226, 44%, 23%, ${opacity[9]})`, - 1200: `hsla(228, 56%, 17%, ${opacity[9]})`, - 1300: `hsla(226, 70%, 13%, ${opacity[9]})`, - a00: `hsla(226, 44%, 23%, ${opacity[0]})`, - a50: `hsla(226, 15%, 54%, ${opacity[1]})`, - a100: `hsla(226, 15%, 54%, ${opacity[2]})`, - a200: `hsla(226, 15%, 54%, ${opacity[3]})`, - a300: `hsla(223, 21%, 94%, ${opacity[1]})`, - a400: `hsla(223, 21%, 94%, ${opacity[2]})`, - a500: `hsla(223, 21%, 94%, ${opacity[3]})`, - a1100: `hsla(225, 18%, 69%, ${opacity[6]})`, - }, - navyGrayDark: { - 0: `hsla(0, 0%, 99%, ${opacity[9]})`, - 50: `hsla(228, 12%, 92%, ${opacity[9]})`, - 100: `hsla(233, 11%, 84%, ${opacity[9]})`, - 200: `hsla(231, 11%, 76%, ${opacity[9]})`, - 300: `hsla(229, 10%, 60%, ${opacity[9]})`, - 400: `hsla(229, 12%, 45%, ${opacity[9]})`, - 500: `hsla(230, 16%, 37%, ${opacity[9]})`, - 600: `hsla(230, 23%, 29%, ${opacity[9]})`, - 700: `hsla(231, 35%, 22%, ${opacity[9]})`, - 800: `hsla(231, 41%, 19%, ${opacity[9]})`, - 900: `hsla(230, 49%, 17%, ${opacity[9]})`, - 1000: `hsla(230, 52%, 16%, ${opacity[9]})`, - 1100: `hsla(231, 54%, 15%, ${opacity[9]})`, - 1200: `hsla(231, 59%, 13%, ${opacity[9]})`, - 1300: `hsla(231, 67%, 10%, ${opacity[9]})`, - a00: `hsla(233, 11%, 84%, ${opacity[0]})`, - a50: `hsla(233, 11%, 84%, ${opacity[1]})`, - a100: `hsla(233, 11%, 84%, ${opacity[2]})`, - a200: `hsla(233, 11%, 84%, ${opacity[3]})`, - a300: `hsla(231, 11%, 76%, ${opacity[1]})`, - a400: `hsla(231, 11%, 76%, ${opacity[2]})`, - a500: `hsla(231, 11%, 76%, ${opacity[3]})`, - a1100: `hsla(230, 16%, 37%, ${opacity[6]})`, + 0: `hsla(240, 20%, 99%, ${opacity[11]})`, + 50: `hsla(210, 40%, 98%, ${opacity[11]})`, + 100: `hsla(213, 47%, 96%, ${opacity[11]})`, + 200: `hsla(214, 40%, 92%, ${opacity[11]})`, + 300: `hsla(214, 28%, 84%, ${opacity[11]})`, + 400: `hsla(211, 27%, 76%, ${opacity[11]})`, + 500: `hsla(211, 24%, 65%, ${opacity[11]})`, + 600: `hsla(211, 22%, 56%, ${opacity[11]})`, + 700: `hsla(211, 20%, 52%, ${opacity[11]})`, + 800: `hsla(211, 23%, 45%, ${opacity[11]})`, + 900: `hsla(211, 26%, 34%, ${opacity[11]})`, + 1000: `hsla(211, 29%, 26%, ${opacity[11]})`, + 1100: `hsla(211, 33%, 21%, ${opacity[11]})`, + 1200: `hsla(212, 39%, 16%, ${opacity[11]})`, + 1300: `hsla(211, 53%, 10%, ${opacity[11]})`, + a50: `hsla(214, 40%, 92%, ${opacity[1]})`, + a75: `hsla(214, 40%, 92%, ${opacity[2]})`, + a100: `hsla(214, 40%, 92%, ${opacity[3]})`, + a200: `hsla(214, 40%, 92%, ${opacity[4]})`, + a400: `hsla(214, 40%, 92%, ${opacity[7]})`, }, ashGrayLight: { - 0: `hsla(0, 0%, 100%, ${opacity[9]})`, - 50: `hsla(216, 9%, 98%, ${opacity[9]})`, - 100: `hsla(216, 9%, 96%, ${opacity[9]})`, - 200: `hsla(216, 6%, 94%, ${opacity[9]})`, - 300: `hsla(216, 4%, 89%, ${opacity[9]})`, - 400: `hsla(214, 7%, 81%, ${opacity[9]})`, - 500: `hsla(216, 6%, 69%, ${opacity[9]})`, - 600: `hsla(215, 6%, 60%, ${opacity[9]})`, - 700: `hsla(214, 6%, 55%, ${opacity[9]})`, - 800: `hsla(216, 7%, 45%, ${opacity[9]})`, - 900: `hsla(218, 9%, 36%, ${opacity[9]})`, - 1000: `hsla(219, 12%, 28%, ${opacity[9]})`, - 1100: `hsla(214, 15%, 18%, ${opacity[9]})`, - 1200: `hsla(216, 15%, 13%, ${opacity[9]})`, - 1300: `hsla(214, 24%, 6%, ${opacity[9]})`, - a00: `hsla(214, 15%, 18%, ${opacity[0]})`, - a50: `hsla(214, 15%, 18%, ${opacity[1]})`, - a100: `hsla(214, 15%, 18%, ${opacity[2]})`, - a200: `hsla(214, 15%, 18%, ${opacity[3]})`, - a300: `hsla(210, 6%, 94%, ${opacity[1]})`, - a400: `hsla(210, 6%, 94%, ${opacity[2]})`, - a500: `hsla(210, 6%, 94%, ${opacity[3]})`, - a1100: `hsla(214, 15%, 18%, ${opacity[6]})`, + 0: `hsla(0, 0%, 100%, ${opacity[11]})`, + 50: `hsla(240, 9%, 98%, ${opacity[11]})`, + 100: `hsla(210, 9%, 96%, ${opacity[11]})`, + 200: `hsla(210, 6%, 94%, ${opacity[11]})`, + 300: `hsla(210, 4%, 89%, ${opacity[11]})`, + 400: `hsla(214, 7%, 81%, ${opacity[11]})`, + 500: `hsla(216, 6%, 69%, ${opacity[11]})`, + 600: `hsla(215, 6%, 60%, ${opacity[11]})`, + 700: `hsla(214, 6%, 55%, ${opacity[11]})`, + 800: `hsla(216, 7%, 45%, ${opacity[11]})`, + 900: `hsla(218, 9%, 36%, ${opacity[11]})`, + 1000: `hsla(219, 12%, 28%, ${opacity[11]})`, + 1100: `hsla(214, 15%, 18%, ${opacity[11]})`, + 1200: `hsla(216, 15%, 13%, ${opacity[11]})`, + 1300: `hsla(214, 24%, 6%, ${opacity[11]})`, + a50: `hsla(214, 6%, 55%, ${opacity[1]})`, + a75: `hsla(214, 6%, 55%, ${opacity[1]})`, + a100: `hsla(214, 6%, 55%, ${opacity[3]})`, + a200: `hsla(214, 6%, 55%, ${opacity[4]})`, + a400: `hsla(214, 6%, 55%, ${opacity[4]})`, }, ashGrayDark: { - 0: `hsla(0, 0%, 99%, ${opacity[9]})`, - 50: `hsla(240, 2%, 92%, ${opacity[9]})`, - 100: `hsla(240, 1%, 84%, ${opacity[9]})`, - 200: `hsla(228, 4%, 76%, ${opacity[9]})`, - 300: `hsla(227, 4%, 60%, ${opacity[9]})`, - 400: `hsla(229, 4%, 50%, ${opacity[9]})`, - 500: `hsla(232, 4%, 40%, ${opacity[9]})`, - 600: `hsla(232, 5%, 32%, ${opacity[9]})`, - 700: `hsla(230, 5%, 22%, ${opacity[9]})`, - 800: `hsla(230, 6%, 19%, ${opacity[9]})`, - 900: `hsla(230, 7%, 17%, ${opacity[9]})`, - 1000: `hsla(230, 8%, 15%, ${opacity[9]})`, - 1100: `hsla(231, 11%, 12%, ${opacity[9]})`, - 1200: `hsla(231, 17%, 8%, ${opacity[9]})`, - 1300: `hsla(228, 5%, 4%, ${opacity[9]})`, - a00: `hsla(240, 1%, 84%, ${opacity[0]})`, - a50: `hsla(240, 1%, 84%, ${opacity[1]})`, - a100: `hsla(240, 1%, 84%, ${opacity[2]})`, - a200: `hsla(240, 1%, 84%, ${opacity[3]})`, - a300: `hsla(228, 4%, 76%, ${opacity[1]})`, - a400: `hsla(228, 4%, 76%, ${opacity[2]})`, - a500: `hsla(228, 4%, 76%, ${opacity[3]})`, - a1100: `hsla(231, 11%, 12%, ${opacity[7]})`, + 0: `hsla(0, 0%, 99%, ${opacity[11]})`, + 50: `hsla(240, 2%, 92%, ${opacity[11]})`, + 100: `hsla(240, 1%, 84%, ${opacity[11]})`, + 200: `hsla(228, 4%, 76%, ${opacity[11]})`, + 300: `hsla(227, 4%, 60%, ${opacity[11]})`, + 400: `hsla(229, 4%, 50%, ${opacity[11]})`, + 500: `hsla(233, 4%, 40%, ${opacity[11]})`, + 600: `hsla(233, 5%, 32%, ${opacity[11]})`, + 700: `hsla(230, 6%, 22%, ${opacity[11]})`, + 800: `hsla(230, 6%, 19%, ${opacity[11]})`, + 900: `hsla(230, 7%, 17%, ${opacity[11]})`, + 1000: `hsla(230, 8%, 15%, ${opacity[11]})`, + 1100: `hsla(231, 12%, 12%, ${opacity[11]})`, + 1200: `hsla(231, 17%, 8%, ${opacity[11]})`, + 1300: `hsla(240, 5%, 4%, ${opacity[11]})`, + a50: `hsla(228, 4%, 76%, ${opacity[1]})`, + a75: `hsla(228, 4%, 76%, ${opacity[1]})`, + a100: `hsla(228, 4%, 76%, ${opacity[3]})`, + a200: `hsla(228, 4%, 76%, ${opacity[4]})`, + a400: `hsla(228, 4%, 76%, ${opacity[4]})`, + }, + white: { + 10: `hsla(0, 0%, 100%, ${opacity[1]})`, + 25: `hsla(0, 0%, 100%, ${opacity[2]})`, + 50: `hsla(0, 0%, 100%, ${opacity[3]})`, + 100: `hsla(0, 0%, 100%, ${opacity[4]})`, + 200: `hsla(0, 0%, 100%, ${opacity[5]})`, + 300: `hsla(0, 0%, 100%, ${opacity[7]})`, + 400: `hsla(0, 0%, 100%, ${opacity[9]})`, + 450: `hsla(0, 0%, 100%, ${opacity[10]})`, + 500: `hsla(0, 0%, 100%, ${opacity[11]})`, + }, + black: { + 10: `hsla(0, 0%, 0%, ${opacity[1]})`, + 25: `hsla(0, 0%, 0%, ${opacity[2]})`, + 50: `hsla(0, 0%, 0%, ${opacity[3]})`, + 100: `hsla(0, 0%, 0%, ${opacity[4]})`, + 200: `hsla(0, 0%, 0%, ${opacity[6]})`, + 300: `hsla(0, 0%, 0%, ${opacity[8]})`, + 400: `hsla(0, 0%, 0%, ${opacity[9]})`, + 450: `hsla(0, 0%, 0%, ${opacity[10]})`, + 500: `hsla(0, 0%, 0%, ${opacity[11]})`, }, }, }; diff --git a/packages/blade/src/tokens/theme/bladeTheme.ts b/packages/blade/src/tokens/theme/bladeTheme.ts index 6f8c4846ff0..b066caa385a 100644 --- a/packages/blade/src/tokens/theme/bladeTheme.ts +++ b/packages/blade/src/tokens/theme/bladeTheme.ts @@ -13,2652 +13,900 @@ const colors: ColorsWithModes = { onLight: { surface: { background: { - level1: { - lowContrast: globalColors.neutral.blueGrayLight[100], - highContrast: globalColors.neutral.blueGrayLight[1200], + gray: { + subtle: globalColors.neutral.blueGrayLight[100], + moderate: globalColors.neutral.blueGrayLight[50], + intense: globalColors.neutral.blueGrayLight[0], }, - level2: { - lowContrast: globalColors.neutral.blueGrayLight[0], - highContrast: globalColors.neutral.blueGrayLight[1100], + primary: { + subtle: globalColors.chromatic.azure.a50, + intense: globalColors.chromatic.azure[500], }, - level3: { - lowContrast: globalColors.neutral.blueGrayLight[50], - highContrast: globalColors.neutral.blueGrayLight[1000], + sea: { subtle: globalColors.chromatic.sea[50], intense: globalColors.chromatic.sea[800] }, + cloud: { + subtle: globalColors.chromatic.cloud[50], + intense: globalColors.chromatic.cloud[800], }, }, border: { - normal: { - lowContrast: globalColors.neutral.blueGrayLight.a100, - highContrast: globalColors.neutral.blueGrayLight.a400, + gray: { + normal: globalColors.neutral.blueGrayLight[500], + subtle: globalColors.neutral.blueGrayLight[300], + muted: globalColors.neutral.blueGrayLight.a100, }, - subtle: { - lowContrast: globalColors.neutral.blueGrayLight.a50, - highContrast: globalColors.neutral.blueGrayLight.a300, + primary: { + normal: globalColors.chromatic.azure[500], + muted: globalColors.chromatic.azure.a100, }, }, text: { - normal: { - lowContrast: globalColors.neutral.blueGrayLight[1200], - highContrast: globalColors.neutral.blueGrayLight[0], - }, - subtle: { - lowContrast: globalColors.neutral.blueGrayLight[900], - highContrast: globalColors.neutral.blueGrayLight[100], - }, - subdued: { - lowContrast: globalColors.neutral.blueGrayLight[800], - highContrast: globalColors.neutral.blueGrayLight[300], - }, - muted: { - lowContrast: globalColors.neutral.blueGrayLight[600], - highContrast: globalColors.neutral.blueGrayLight[400], - }, - placeholder: { - lowContrast: globalColors.neutral.blueGrayLight[500], - highContrast: globalColors.neutral.blueGrayLight[500], + gray: { + normal: globalColors.neutral.blueGrayLight[1200], + subtle: globalColors.neutral.blueGrayLight[900], + muted: globalColors.neutral.blueGrayLight[600], + disabled: globalColors.neutral.blueGrayLight.a200, + }, + primary: { normal: globalColors.chromatic.azure[500] }, + onSea: { + onSubtle: globalColors.chromatic.forest[800], + onIntense: globalColors.chromatic.forest[200], + }, + onCloud: { + onSubtle: globalColors.chromatic.azure[600], + onIntense: globalColors.chromatic.azure[200], + }, + staticWhite: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[450], + muted: globalColors.neutral.white[200], + disabled: globalColors.neutral.white[100], + }, + staticBlack: { + normal: globalColors.neutral.black[500], + subtle: globalColors.neutral.black[300], + muted: globalColors.neutral.black[200], + disabled: globalColors.neutral.black[100], }, }, - action: { - icon: { - default: { - lowContrast: globalColors.neutral.blueGrayLight[500], - highContrast: globalColors.neutral.blueGrayLight.a500, - }, - hover: { - lowContrast: globalColors.neutral.blueGrayLight[800], - highContrast: globalColors.neutral.blueGrayLight[0], - }, - focus: { - lowContrast: globalColors.neutral.blueGrayLight[800], - highContrast: globalColors.neutral.blueGrayLight[0], - }, - active: { - lowContrast: globalColors.neutral.blueGrayLight[800], - highContrast: globalColors.neutral.blueGrayLight[0], - }, - disabled: { - lowContrast: globalColors.neutral.blueGrayLight.a100, - highContrast: globalColors.neutral.blueGrayLight.a100, - }, - }, - }, - overlay: { - background: { - 400: globalColors.neutral.blueGrayLight.a1100, - 800: globalColors.neutral.ashGrayLight.a1100, - }, - }, - popup: { background: globalColors.neutral.blueGrayLight[0] }, - }, - brand: { - primary: { - 300: globalColors.chromatic.azure.a50, - 400: globalColors.chromatic.azure.a100, - 500: globalColors.chromatic.azure[600], - 600: globalColors.chromatic.azure[700], - 700: globalColors.chromatic.azure[800], - 800: globalColors.chromatic.azure[950], - }, - gray: { - 200: { - lowContrast: globalColors.neutral.blueGrayLight[50], - highContrast: globalColors.neutral.blueGrayLight[1000], - }, - 300: { - lowContrast: globalColors.neutral.blueGrayLight[100], - highContrast: globalColors.neutral.blueGrayLight[900], - }, - 400: { - lowContrast: globalColors.neutral.blueGrayLight[300], - highContrast: globalColors.neutral.blueGrayLight[800], - }, - 500: { - lowContrast: globalColors.neutral.blueGrayLight[500], - highContrast: globalColors.neutral.blueGrayLight[700], - }, - 600: { - lowContrast: globalColors.neutral.blueGrayLight[600], - highContrast: globalColors.neutral.blueGrayLight[500], - }, - 700: { - lowContrast: globalColors.neutral.blueGrayLight[800], - highContrast: globalColors.neutral.blueGrayLight[100], - }, - a50: { - lowContrast: globalColors.neutral.blueGrayLight.a50, - highContrast: globalColors.neutral.blueGrayLight.a300, - }, - a100: { - lowContrast: globalColors.neutral.blueGrayLight.a100, - highContrast: globalColors.neutral.blueGrayLight.a400, + icon: { + gray: { + normal: globalColors.neutral.blueGrayLight[1200], + subtle: globalColors.neutral.blueGrayLight[900], + muted: globalColors.neutral.blueGrayLight[600], + disabled: globalColors.neutral.blueGrayLight.a200, + }, + primary: { normal: globalColors.chromatic.azure[500] }, + onSea: { + onSubtle: globalColors.chromatic.forest[600], + onIntense: globalColors.chromatic.forest[400], + }, + onCloud: { + onSubtle: globalColors.chromatic.azure[400], + onIntense: globalColors.chromatic.azure[300], + }, + staticWhite: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[450], + muted: globalColors.neutral.white[200], + disabled: globalColors.neutral.white[100], + }, + staticBlack: { + normal: globalColors.neutral.black[500], + subtle: globalColors.neutral.black[300], + muted: globalColors.neutral.black[200], + disabled: globalColors.neutral.black[100], }, }, - secondary: { 500: globalColors.chromatic.emerald[500] }, }, feedback: { background: { positive: { - lowContrast: globalColors.chromatic.emerald.a50, - highContrast: globalColors.chromatic.emerald[700], + subtle: globalColors.chromatic.emerald.a50, + intense: globalColors.chromatic.emerald[600], }, negative: { - lowContrast: globalColors.chromatic.crimson.a50, - highContrast: globalColors.chromatic.crimson[700], + subtle: globalColors.chromatic.crimson.a50, + intense: globalColors.chromatic.crimson[600], }, notice: { - lowContrast: globalColors.chromatic.cider.a50, - highContrast: globalColors.chromatic.cider[700], + subtle: globalColors.chromatic.cider.a50, + intense: globalColors.chromatic.cider[600], }, information: { - lowContrast: globalColors.chromatic.sapphire.a50, - highContrast: globalColors.chromatic.sapphire[600], + subtle: globalColors.chromatic.sapphire.a50, + intense: globalColors.chromatic.sapphire[600], }, neutral: { - lowContrast: globalColors.neutral.blueGrayLight.a50, - highContrast: globalColors.neutral.blueGrayLight[1000], + subtle: globalColors.neutral.blueGrayLight.a50, + intense: globalColors.neutral.blueGrayLight[1000], }, }, border: { positive: { - lowContrast: globalColors.chromatic.emerald.a200, - highContrast: globalColors.chromatic.emerald[700], + subtle: globalColors.chromatic.emerald.a100, + intense: globalColors.chromatic.emerald[700], }, negative: { - lowContrast: globalColors.chromatic.crimson.a200, - highContrast: globalColors.chromatic.crimson[700], + subtle: globalColors.chromatic.crimson.a100, + intense: globalColors.chromatic.crimson[700], }, notice: { - lowContrast: globalColors.chromatic.cider.a200, - highContrast: globalColors.chromatic.cider[700], + subtle: globalColors.chromatic.cider.a100, + intense: globalColors.chromatic.cider[700], }, information: { - lowContrast: globalColors.chromatic.sapphire.a200, - highContrast: globalColors.chromatic.sapphire[600], + subtle: globalColors.chromatic.sapphire.a100, + intense: globalColors.chromatic.sapphire[700], }, neutral: { - lowContrast: globalColors.neutral.blueGrayLight.a200, - highContrast: globalColors.neutral.blueGrayLight[1000], + subtle: globalColors.neutral.blueGrayLight.a100, + intense: globalColors.neutral.blueGrayLight[1100], }, }, text: { positive: { - lowContrast: globalColors.chromatic.emerald[700], - highContrast: globalColors.neutral.blueGrayLight[0], + subtle: globalColors.chromatic.emerald[100], + intense: globalColors.chromatic.emerald[800], }, negative: { - lowContrast: globalColors.chromatic.crimson[700], - highContrast: globalColors.neutral.blueGrayLight[0], + subtle: globalColors.chromatic.crimson[100], + intense: globalColors.chromatic.crimson[800], }, notice: { - lowContrast: globalColors.chromatic.cider[700], - highContrast: globalColors.neutral.blueGrayLight[0], + subtle: globalColors.chromatic.cider[100], + intense: globalColors.chromatic.cider[700], }, information: { - lowContrast: globalColors.chromatic.sapphire[600], - highContrast: globalColors.neutral.blueGrayLight[0], + subtle: globalColors.chromatic.sapphire[100], + intense: globalColors.chromatic.sapphire[800], }, neutral: { - lowContrast: globalColors.neutral.blueGrayLight[900], - highContrast: globalColors.neutral.blueGrayLight[0], + subtle: globalColors.neutral.blueGrayLight[500], + intense: globalColors.neutral.blueGrayLight[1100], }, }, icon: { positive: { - lowContrast: globalColors.chromatic.emerald[700], - highContrast: globalColors.neutral.blueGrayLight[0], + subtle: globalColors.chromatic.emerald[100], + intense: globalColors.chromatic.emerald[800], }, negative: { - lowContrast: globalColors.chromatic.crimson[700], - highContrast: globalColors.neutral.blueGrayLight[0], + subtle: globalColors.chromatic.crimson[100], + intense: globalColors.chromatic.crimson[800], }, notice: { - lowContrast: globalColors.chromatic.cider[700], - highContrast: globalColors.neutral.blueGrayLight[0], + subtle: globalColors.chromatic.cider[100], + intense: globalColors.chromatic.cider[700], }, information: { - lowContrast: globalColors.chromatic.sapphire[600], - highContrast: globalColors.neutral.blueGrayLight[0], + subtle: globalColors.chromatic.sapphire[100], + intense: globalColors.chromatic.sapphire[800], }, neutral: { - lowContrast: globalColors.neutral.blueGrayLight[900], - highContrast: globalColors.neutral.blueGrayLight[0], - }, - }, - positive: { - action: { - background: { - primary: { - default: { - highContrast: globalColors.chromatic.emerald[700], - lowContrast: globalColors.chromatic.emerald.a50, - }, - hover: { - highContrast: globalColors.chromatic.emerald[800], - lowContrast: globalColors.chromatic.emerald.a100, - }, - focus: { - highContrast: globalColors.chromatic.emerald[900], - lowContrast: globalColors.chromatic.emerald.a200, - }, - active: { - highContrast: globalColors.chromatic.emerald[900], - lowContrast: globalColors.chromatic.emerald.a200, - }, - disabled: { - highContrast: globalColors.chromatic.emerald[700], - lowContrast: globalColors.chromatic.emerald.a50, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.emerald.a50 }, - hover: { lowContrast: globalColors.chromatic.emerald.a100 }, - focus: { lowContrast: globalColors.chromatic.emerald.a200 }, - active: { lowContrast: globalColors.chromatic.emerald.a200 }, - disabled: { lowContrast: globalColors.chromatic.emerald.a50 }, - }, - }, - border: { - primary: { - default: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald.a200, - }, - hover: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald.a200, - }, - focus: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald.a200, - }, - active: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald.a200, - }, - disabled: { - highContrast: globalColors.chromatic.emerald[500], - lowContrast: globalColors.chromatic.emerald.a200, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.emerald.a200 }, - hover: { lowContrast: globalColors.chromatic.emerald.a200 }, - focus: { lowContrast: globalColors.chromatic.emerald.a200 }, - active: { lowContrast: globalColors.chromatic.emerald.a200 }, - disabled: { lowContrast: globalColors.chromatic.emerald.a200 }, - }, - }, - text: { - primary: { - default: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[700], - }, - hover: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[700], - }, - focus: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[700], - }, - active: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[700], - }, - disabled: { - highContrast: globalColors.chromatic.emerald[500], - lowContrast: globalColors.chromatic.emerald.a200, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.emerald[700] }, - hover: { lowContrast: globalColors.chromatic.emerald[700] }, - focus: { lowContrast: globalColors.chromatic.emerald[700] }, - active: { lowContrast: globalColors.chromatic.emerald[700] }, - disabled: { lowContrast: globalColors.chromatic.emerald.a200 }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.emerald[700], - highContrast: globalColors.chromatic.emerald[50], - }, - hover: { - lowContrast: globalColors.chromatic.emerald[600], - highContrast: globalColors.chromatic.emerald[50], - }, - focus: { - lowContrast: globalColors.chromatic.emerald[800], - highContrast: globalColors.chromatic.emerald[100], - }, - active: { - lowContrast: globalColors.chromatic.emerald[800], - highContrast: globalColors.chromatic.emerald[100], - }, - disabled: { - lowContrast: globalColors.chromatic.emerald[200], - highContrast: globalColors.chromatic.emerald[100], - }, - }, - }, - icon: { - primary: { - default: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[700], - }, - hover: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[700], - }, - focus: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[700], - }, - active: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[700], - }, - disabled: { - highContrast: globalColors.chromatic.emerald[500], - lowContrast: globalColors.chromatic.emerald.a200, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.emerald[700] }, - hover: { lowContrast: globalColors.chromatic.emerald[700] }, - focus: { lowContrast: globalColors.chromatic.emerald[700] }, - active: { lowContrast: globalColors.chromatic.emerald[700] }, - disabled: { lowContrast: globalColors.chromatic.emerald.a200 }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.emerald[700], - highContrast: globalColors.chromatic.emerald[50], - }, - hover: { - lowContrast: globalColors.chromatic.emerald[600], - highContrast: globalColors.chromatic.emerald[50], - }, - focus: { - lowContrast: globalColors.chromatic.emerald[800], - highContrast: globalColors.chromatic.emerald[100], - }, - active: { - lowContrast: globalColors.chromatic.emerald[800], - highContrast: globalColors.chromatic.emerald[100], - }, - disabled: { - lowContrast: globalColors.chromatic.emerald[200], - highContrast: globalColors.chromatic.emerald[100], - }, - }, - }, - }, - }, - negative: { - action: { - background: { - primary: { - default: { - highContrast: globalColors.chromatic.crimson[700], - lowContrast: globalColors.chromatic.crimson.a50, - }, - hover: { - highContrast: globalColors.chromatic.crimson[800], - lowContrast: globalColors.chromatic.crimson.a100, - }, - focus: { - highContrast: globalColors.chromatic.crimson[900], - lowContrast: globalColors.chromatic.crimson.a200, - }, - active: { - highContrast: globalColors.chromatic.crimson[900], - lowContrast: globalColors.chromatic.crimson.a200, - }, - disabled: { - highContrast: globalColors.chromatic.crimson[700], - lowContrast: globalColors.chromatic.crimson.a50, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.crimson.a50 }, - hover: { lowContrast: globalColors.chromatic.crimson.a100 }, - focus: { lowContrast: globalColors.chromatic.crimson.a200 }, - active: { lowContrast: globalColors.chromatic.crimson.a200 }, - disabled: { lowContrast: globalColors.chromatic.crimson.a50 }, - }, - }, - border: { - primary: { - default: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson.a200, - }, - hover: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson.a200, - }, - focus: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson.a200, - }, - active: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson.a200, - }, - disabled: { - highContrast: globalColors.chromatic.crimson[500], - lowContrast: globalColors.chromatic.crimson.a200, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.crimson.a200 }, - hover: { lowContrast: globalColors.chromatic.crimson.a200 }, - focus: { lowContrast: globalColors.chromatic.crimson.a200 }, - active: { lowContrast: globalColors.chromatic.crimson.a200 }, - disabled: { lowContrast: globalColors.chromatic.crimson.a200 }, - }, - }, - text: { - primary: { - default: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[700], - }, - hover: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[700], - }, - focus: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[700], - }, - active: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[700], - }, - disabled: { - highContrast: globalColors.chromatic.crimson[500], - lowContrast: globalColors.chromatic.crimson.a200, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.crimson[700] }, - hover: { lowContrast: globalColors.chromatic.crimson[700] }, - focus: { lowContrast: globalColors.chromatic.crimson[700] }, - active: { lowContrast: globalColors.chromatic.crimson[700] }, - disabled: { lowContrast: globalColors.chromatic.crimson.a200 }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.crimson[700], - highContrast: globalColors.chromatic.crimson[50], - }, - hover: { - lowContrast: globalColors.chromatic.crimson[600], - highContrast: globalColors.chromatic.crimson[50], - }, - focus: { - lowContrast: globalColors.chromatic.crimson[800], - highContrast: globalColors.chromatic.crimson[100], - }, - active: { - lowContrast: globalColors.chromatic.crimson[800], - highContrast: globalColors.chromatic.crimson[100], - }, - disabled: { - lowContrast: globalColors.chromatic.crimson.a200, - highContrast: globalColors.chromatic.crimson[500], - }, - }, - }, - icon: { - primary: { - default: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[700], - }, - hover: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[700], - }, - focus: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[700], - }, - active: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[700], - }, - disabled: { - highContrast: globalColors.chromatic.crimson[500], - lowContrast: globalColors.chromatic.crimson.a200, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.crimson[700] }, - hover: { lowContrast: globalColors.chromatic.crimson[700] }, - focus: { lowContrast: globalColors.chromatic.crimson[700] }, - active: { lowContrast: globalColors.chromatic.crimson[700] }, - disabled: { lowContrast: globalColors.chromatic.crimson.a200 }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.crimson[700], - highContrast: globalColors.chromatic.crimson[50], - }, - hover: { - lowContrast: globalColors.chromatic.crimson[600], - highContrast: globalColors.chromatic.crimson[50], - }, - focus: { - lowContrast: globalColors.chromatic.crimson[800], - highContrast: globalColors.chromatic.crimson[100], - }, - active: { - lowContrast: globalColors.chromatic.crimson[800], - highContrast: globalColors.chromatic.crimson[100], - }, - disabled: { - lowContrast: globalColors.chromatic.crimson.a200, - highContrast: globalColors.chromatic.crimson[500], - }, - }, - }, + subtle: globalColors.neutral.blueGrayLight[500], + intense: globalColors.neutral.blueGrayLight[1100], }, }, - notice: { - action: { - background: { - primary: { - default: { - highContrast: globalColors.chromatic.cider[700], - lowContrast: globalColors.chromatic.cider.a50, - }, - hover: { - highContrast: globalColors.chromatic.cider[800], - lowContrast: globalColors.chromatic.cider.a100, - }, - focus: { - highContrast: globalColors.chromatic.cider[900], - lowContrast: globalColors.chromatic.cider.a200, - }, - active: { - highContrast: globalColors.chromatic.cider[900], - lowContrast: globalColors.chromatic.cider.a200, - }, - disabled: { - highContrast: globalColors.chromatic.cider[700], - lowContrast: globalColors.chromatic.cider.a50, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.cider.a50 }, - hover: { lowContrast: globalColors.chromatic.cider.a100 }, - focus: { lowContrast: globalColors.chromatic.cider.a200 }, - active: { lowContrast: globalColors.chromatic.cider.a200 }, - disabled: { lowContrast: globalColors.chromatic.cider.a50 }, - }, - }, - border: { - primary: { - default: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider.a200, - }, - hover: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider.a200, - }, - focus: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider.a200, - }, - active: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider.a200, - }, - disabled: { - highContrast: globalColors.chromatic.cider[500], - lowContrast: globalColors.chromatic.cider.a200, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.cider.a200 }, - hover: { lowContrast: globalColors.chromatic.cider.a200 }, - focus: { lowContrast: globalColors.chromatic.cider.a200 }, - active: { lowContrast: globalColors.chromatic.cider.a200 }, - disabled: { lowContrast: globalColors.chromatic.cider.a200 }, - }, - }, - text: { - primary: { - default: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[700], - }, - hover: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[700], - }, - focus: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[700], - }, - active: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[700], - }, - disabled: { - highContrast: globalColors.chromatic.cider[500], - lowContrast: globalColors.chromatic.cider.a200, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.cider[700] }, - hover: { lowContrast: globalColors.chromatic.cider[700] }, - focus: { lowContrast: globalColors.chromatic.cider[700] }, - active: { lowContrast: globalColors.chromatic.cider[700] }, - disabled: { lowContrast: globalColors.chromatic.cider.a200 }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.cider[700], - highContrast: globalColors.chromatic.cider[50], - }, - hover: { - lowContrast: globalColors.chromatic.cider[600], - highContrast: globalColors.chromatic.cider[50], - }, - focus: { - lowContrast: globalColors.chromatic.cider[800], - highContrast: globalColors.chromatic.cider[100], - }, - active: { - lowContrast: globalColors.chromatic.cider[800], - highContrast: globalColors.chromatic.cider[100], - }, - disabled: { - lowContrast: globalColors.chromatic.cider.a200, - highContrast: globalColors.chromatic.cider[500], - }, - }, - }, - icon: { - primary: { - default: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[700], - }, - hover: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[700], - }, - focus: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[700], - }, - active: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[700], - }, - disabled: { - highContrast: globalColors.chromatic.cider[500], - lowContrast: globalColors.chromatic.cider.a200, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.cider[700] }, - hover: { lowContrast: globalColors.chromatic.cider[700] }, - focus: { lowContrast: globalColors.chromatic.cider[700] }, - active: { lowContrast: globalColors.chromatic.cider[700] }, - disabled: { lowContrast: globalColors.chromatic.cider.a200 }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.cider[700], - highContrast: globalColors.chromatic.cider[50], - }, - hover: { - lowContrast: globalColors.chromatic.cider[600], - highContrast: globalColors.chromatic.cider[50], - }, - focus: { - lowContrast: globalColors.chromatic.cider[800], - highContrast: globalColors.chromatic.cider[100], - }, - active: { - lowContrast: globalColors.chromatic.cider[800], - highContrast: globalColors.chromatic.cider[100], - }, - disabled: { - lowContrast: globalColors.chromatic.cider.a200, - highContrast: globalColors.chromatic.cider[500], - }, - }, - }, + }, + interactive: { + background: { + positive: { + default: globalColors.chromatic.emerald[600], + highlighted: globalColors.chromatic.emerald[700], + disabled: globalColors.chromatic.emerald.a50, + faded: globalColors.chromatic.emerald.a50, + fadedHighlighted: globalColors.chromatic.emerald.a100, }, - }, - information: { - action: { - background: { - primary: { - default: { - highContrast: globalColors.chromatic.sapphire[600], - lowContrast: globalColors.chromatic.sapphire.a50, - }, - hover: { - highContrast: globalColors.chromatic.sapphire[700], - lowContrast: globalColors.chromatic.sapphire.a100, - }, - focus: { - highContrast: globalColors.chromatic.sapphire[800], - lowContrast: globalColors.chromatic.sapphire.a200, - }, - active: { - highContrast: globalColors.chromatic.sapphire[800], - lowContrast: globalColors.chromatic.sapphire.a200, - }, - disabled: { - highContrast: globalColors.chromatic.sapphire[600], - lowContrast: globalColors.chromatic.sapphire.a50, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.sapphire.a50 }, - hover: { lowContrast: globalColors.chromatic.sapphire.a100 }, - focus: { lowContrast: globalColors.chromatic.sapphire.a200 }, - active: { lowContrast: globalColors.chromatic.sapphire.a200 }, - disabled: { lowContrast: globalColors.chromatic.sapphire.a50 }, - }, - }, - border: { - primary: { - default: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire.a200, - }, - hover: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire.a200, - }, - focus: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire.a200, - }, - active: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire.a200, - }, - disabled: { - highContrast: globalColors.chromatic.sapphire[400], - lowContrast: globalColors.chromatic.sapphire.a200, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.sapphire.a200 }, - hover: { lowContrast: globalColors.chromatic.sapphire.a200 }, - focus: { lowContrast: globalColors.chromatic.sapphire.a200 }, - active: { lowContrast: globalColors.chromatic.sapphire.a200 }, - disabled: { lowContrast: globalColors.chromatic.sapphire.a200 }, - }, - }, - text: { - primary: { - default: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[700], - }, - hover: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[700], - }, - focus: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[700], - }, - active: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[700], - }, - disabled: { - highContrast: globalColors.chromatic.sapphire[400], - lowContrast: globalColors.chromatic.sapphire.a200, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.sapphire[700] }, - hover: { lowContrast: globalColors.chromatic.sapphire[700] }, - focus: { lowContrast: globalColors.chromatic.sapphire[700] }, - active: { lowContrast: globalColors.chromatic.sapphire[700] }, - disabled: { lowContrast: globalColors.chromatic.sapphire.a200 }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.sapphire[700], - highContrast: globalColors.chromatic.sapphire[50], - }, - hover: { - lowContrast: globalColors.chromatic.sapphire[600], - highContrast: globalColors.chromatic.sapphire[50], - }, - focus: { - lowContrast: globalColors.chromatic.sapphire[800], - highContrast: globalColors.chromatic.sapphire[100], - }, - active: { - lowContrast: globalColors.chromatic.sapphire[800], - highContrast: globalColors.chromatic.sapphire[100], - }, - disabled: { - lowContrast: globalColors.chromatic.sapphire.a200, - highContrast: globalColors.chromatic.sapphire[400], - }, - }, - }, - icon: { - primary: { - default: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[700], - }, - hover: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[700], - }, - focus: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[700], - }, - active: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[700], - }, - disabled: { - highContrast: globalColors.chromatic.sapphire[400], - lowContrast: globalColors.chromatic.sapphire.a200, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.sapphire[700] }, - hover: { lowContrast: globalColors.chromatic.sapphire[700] }, - focus: { lowContrast: globalColors.chromatic.sapphire[700] }, - active: { lowContrast: globalColors.chromatic.sapphire[700] }, - disabled: { lowContrast: globalColors.chromatic.sapphire.a200 }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.sapphire[700], - highContrast: globalColors.chromatic.sapphire[50], - }, - hover: { - lowContrast: globalColors.chromatic.sapphire[600], - highContrast: globalColors.chromatic.sapphire[50], - }, - focus: { - lowContrast: globalColors.chromatic.sapphire[800], - highContrast: globalColors.chromatic.sapphire[100], - }, - active: { - lowContrast: globalColors.chromatic.sapphire[800], - highContrast: globalColors.chromatic.sapphire[100], - }, - disabled: { - lowContrast: globalColors.chromatic.sapphire.a200, - highContrast: globalColors.chromatic.sapphire[400], - }, - }, - }, + negative: { + default: globalColors.chromatic.crimson[600], + highlighted: globalColors.chromatic.crimson[700], + disabled: globalColors.chromatic.crimson.a50, + faded: globalColors.chromatic.crimson.a50, + fadedHighlighted: globalColors.chromatic.crimson.a100, }, - }, - neutral: { - action: { - background: { - primary: { - default: { - highContrast: globalColors.neutral.blueGrayLight[1000], - lowContrast: globalColors.neutral.blueGrayLight.a50, - }, - hover: { - highContrast: globalColors.neutral.blueGrayLight[1100], - lowContrast: globalColors.neutral.blueGrayLight.a100, - }, - focus: { - highContrast: globalColors.neutral.blueGrayLight[1200], - lowContrast: globalColors.neutral.blueGrayLight.a200, - }, - active: { - highContrast: globalColors.neutral.blueGrayLight[1200], - lowContrast: globalColors.neutral.blueGrayLight.a200, - }, - disabled: { - highContrast: globalColors.neutral.blueGrayLight[1000], - lowContrast: globalColors.neutral.blueGrayLight.a50, - }, - }, - secondary: { - default: { lowContrast: globalColors.neutral.blueGrayLight.a50 }, - hover: { lowContrast: globalColors.neutral.blueGrayLight.a100 }, - focus: { lowContrast: globalColors.neutral.blueGrayLight.a200 }, - active: { lowContrast: globalColors.neutral.blueGrayLight.a200 }, - disabled: { lowContrast: globalColors.neutral.blueGrayLight.a50 }, - }, - }, - border: { - primary: { - default: { - highContrast: globalColors.neutral.blueGrayLight[500], - lowContrast: globalColors.neutral.blueGrayLight.a200, - }, - hover: { - highContrast: globalColors.neutral.blueGrayLight[500], - lowContrast: globalColors.neutral.blueGrayLight.a200, - }, - focus: { - highContrast: globalColors.neutral.blueGrayLight[500], - lowContrast: globalColors.neutral.blueGrayLight.a200, - }, - active: { - highContrast: globalColors.neutral.blueGrayLight[500], - lowContrast: globalColors.neutral.blueGrayLight.a200, - }, - disabled: { - highContrast: globalColors.neutral.blueGrayLight[700], - lowContrast: globalColors.neutral.blueGrayLight.a200, - }, - }, - secondary: { - default: { lowContrast: globalColors.neutral.blueGrayLight.a200 }, - hover: { lowContrast: globalColors.neutral.blueGrayLight.a200 }, - focus: { lowContrast: globalColors.neutral.blueGrayLight.a200 }, - active: { lowContrast: globalColors.neutral.blueGrayLight.a200 }, - disabled: { lowContrast: globalColors.neutral.blueGrayLight.a200 }, - }, - }, - text: { - primary: { - default: { - highContrast: globalColors.neutral.blueGrayLight[50], - lowContrast: globalColors.neutral.blueGrayLight[900], - }, - hover: { - highContrast: globalColors.neutral.blueGrayLight[50], - lowContrast: globalColors.neutral.blueGrayLight[900], - }, - focus: { - highContrast: globalColors.neutral.blueGrayLight[50], - lowContrast: globalColors.neutral.blueGrayLight[900], - }, - active: { - highContrast: globalColors.neutral.blueGrayLight[50], - lowContrast: globalColors.neutral.blueGrayLight[900], - }, - disabled: { - highContrast: globalColors.neutral.blueGrayLight[700], - lowContrast: globalColors.neutral.blueGrayLight.a200, - }, - }, - secondary: { - default: { lowContrast: globalColors.neutral.blueGrayLight[900] }, - hover: { lowContrast: globalColors.neutral.blueGrayLight[900] }, - focus: { lowContrast: globalColors.neutral.blueGrayLight[900] }, - active: { lowContrast: globalColors.neutral.blueGrayLight[900] }, - disabled: { lowContrast: globalColors.neutral.blueGrayLight.a200 }, - }, - link: { - default: { - lowContrast: globalColors.neutral.blueGrayLight[900], - highContrast: globalColors.neutral.blueGrayLight[50], - }, - hover: { - lowContrast: globalColors.neutral.blueGrayLight[800], - highContrast: globalColors.neutral.blueGrayLight[200], - }, - focus: { - lowContrast: globalColors.neutral.blueGrayLight[1000], - highContrast: globalColors.neutral.blueGrayLight[400], - }, - active: { - lowContrast: globalColors.neutral.blueGrayLight[1000], - highContrast: globalColors.neutral.blueGrayLight[400], - }, - disabled: { - lowContrast: globalColors.neutral.blueGrayLight.a200, - highContrast: globalColors.neutral.blueGrayLight[700], - }, - }, - }, - icon: { - primary: { - default: { - highContrast: globalColors.neutral.blueGrayLight[50], - lowContrast: globalColors.neutral.blueGrayLight[900], - }, - hover: { - highContrast: globalColors.neutral.blueGrayLight[50], - lowContrast: globalColors.neutral.blueGrayLight[900], - }, - focus: { - highContrast: globalColors.neutral.blueGrayLight[50], - lowContrast: globalColors.neutral.blueGrayLight[900], - }, - active: { - highContrast: globalColors.neutral.blueGrayLight[50], - lowContrast: globalColors.neutral.blueGrayLight[900], - }, - disabled: { - highContrast: globalColors.neutral.blueGrayLight[700], - lowContrast: globalColors.neutral.blueGrayLight.a200, - }, - }, - secondary: { - default: { lowContrast: globalColors.neutral.blueGrayLight[900] }, - hover: { lowContrast: globalColors.neutral.blueGrayLight[900] }, - focus: { lowContrast: globalColors.neutral.blueGrayLight[900] }, - active: { lowContrast: globalColors.neutral.blueGrayLight[900] }, - disabled: { lowContrast: globalColors.neutral.blueGrayLight.a200 }, - }, - link: { - default: { - lowContrast: globalColors.neutral.blueGrayLight[900], - highContrast: globalColors.neutral.blueGrayLight[50], - }, - hover: { - lowContrast: globalColors.neutral.blueGrayLight[800], - highContrast: globalColors.neutral.blueGrayLight[200], - }, - focus: { - lowContrast: globalColors.neutral.blueGrayLight[1000], - highContrast: globalColors.neutral.blueGrayLight[400], - }, - active: { - lowContrast: globalColors.neutral.blueGrayLight[1000], - highContrast: globalColors.neutral.blueGrayLight[400], - }, - disabled: { - lowContrast: globalColors.neutral.blueGrayLight.a200, - highContrast: globalColors.neutral.blueGrayLight[700], - }, - }, - }, + notice: { + default: globalColors.chromatic.cider[600], + highlighted: globalColors.chromatic.cider[700], + disabled: globalColors.chromatic.cider.a50, + faded: globalColors.chromatic.cider.a50, + fadedHighlighted: globalColors.chromatic.cider.a100, }, - }, - }, - action: { - background: { - primary: { - default: globalColors.chromatic.azure[600], - hover: globalColors.chromatic.azure[700], - focus: globalColors.chromatic.azure[800], - active: globalColors.chromatic.azure[900], - disabled: globalColors.neutral.blueGrayLight[300], + information: { + default: globalColors.chromatic.sapphire[600], + highlighted: globalColors.chromatic.sapphire[700], + disabled: globalColors.chromatic.sapphire.a50, + faded: globalColors.chromatic.sapphire.a50, + fadedHighlighted: globalColors.chromatic.sapphire.a100, }, - secondary: { - default: globalColors.chromatic.azure.a00, - hover: globalColors.chromatic.azure.a50, - focus: globalColors.chromatic.azure.a100, - active: globalColors.chromatic.azure.a200, - disabled: globalColors.neutral.blueGrayLight.a00, + neutral: { + default: globalColors.neutral.blueGrayLight[1000], + highlighted: globalColors.neutral.blueGrayLight[1100], + disabled: globalColors.neutral.blueGrayLight.a100, + faded: globalColors.neutral.blueGrayLight.a100, + fadedHighlighted: globalColors.neutral.blueGrayLight.a200, }, - tertiary: { + gray: { default: globalColors.neutral.blueGrayLight.a50, - hover: globalColors.neutral.blueGrayLight.a100, - focus: globalColors.neutral.blueGrayLight.a200, - active: globalColors.neutral.blueGrayLight.a200, + highlighted: globalColors.neutral.blueGrayLight.a100, disabled: globalColors.neutral.blueGrayLight.a50, + faded: globalColors.neutral.blueGrayLight.a75, + fadedHighlighted: globalColors.neutral.blueGrayLight.a100, + }, + primary: { + default: globalColors.chromatic.azure[500], + highlighted: globalColors.chromatic.azure[600], + disabled: globalColors.chromatic.azure.a50, + faded: globalColors.chromatic.azure.a50, + fadedHighlighted: globalColors.chromatic.azure.a100, + }, + staticBlack: { + default: globalColors.neutral.black[500], + highlighted: globalColors.neutral.black[500], + disabled: globalColors.neutral.black[200], + faded: globalColors.neutral.black[50], + fadedHighlighted: globalColors.neutral.black[100], + }, + staticWhite: { + default: globalColors.neutral.white[500], + highlighted: globalColors.neutral.white[400], + disabled: globalColors.neutral.white[50], + faded: globalColors.neutral.white[50], + fadedHighlighted: globalColors.neutral.white[100], }, }, border: { - primary: { - default: globalColors.chromatic.azure[600], - hover: globalColors.chromatic.azure[700], - focus: globalColors.chromatic.azure[800], - active: globalColors.chromatic.azure[900], - disabled: globalColors.neutral.blueGrayLight[300], + positive: { + default: globalColors.chromatic.emerald[600], + highlighted: globalColors.chromatic.emerald[700], + disabled: globalColors.chromatic.emerald.a100, + faded: globalColors.chromatic.emerald.a100, + }, + negative: { + default: globalColors.chromatic.crimson[600], + highlighted: globalColors.chromatic.crimson[700], + disabled: globalColors.chromatic.crimson.a100, + faded: globalColors.chromatic.crimson.a100, }, - secondary: { - default: globalColors.chromatic.azure[600], - hover: globalColors.chromatic.azure[600], - focus: globalColors.chromatic.azure[600], - active: globalColors.chromatic.azure[600], - disabled: globalColors.neutral.blueGrayLight[400], - }, - tertiary: { - default: globalColors.neutral.blueGrayLight.a00, - hover: globalColors.neutral.blueGrayLight[300], - focus: globalColors.neutral.blueGrayLight[300], - active: globalColors.neutral.blueGrayLight[300], + notice: { + default: globalColors.chromatic.cider[600], + highlighted: globalColors.chromatic.cider[700], + disabled: globalColors.chromatic.cider.a100, + faded: globalColors.chromatic.cider.a100, + }, + information: { + default: globalColors.chromatic.sapphire[600], + highlighted: globalColors.chromatic.sapphire[700], + disabled: globalColors.chromatic.sapphire.a100, + faded: globalColors.chromatic.sapphire.a100, + }, + neutral: { + default: globalColors.neutral.blueGrayLight[700], + highlighted: globalColors.neutral.blueGrayLight[700], disabled: globalColors.neutral.blueGrayLight[300], + faded: globalColors.neutral.blueGrayLight.a100, }, - }, - text: { - primary: { - default: globalColors.neutral.blueGrayLight[0], - hover: globalColors.neutral.blueGrayLight[0], - focus: globalColors.neutral.blueGrayLight[0], - active: globalColors.neutral.blueGrayLight[0], - disabled: globalColors.neutral.blueGrayLight[600], - }, - secondary: { - default: globalColors.chromatic.azure[600], - hover: globalColors.chromatic.azure[600], - focus: globalColors.chromatic.azure[600], - active: globalColors.chromatic.azure[600], - disabled: globalColors.neutral.blueGrayLight[400], - }, - tertiary: { - default: globalColors.neutral.blueGrayLight[1000], - hover: globalColors.neutral.blueGrayLight[1000], - focus: globalColors.neutral.blueGrayLight[1000], - active: globalColors.neutral.blueGrayLight[1000], - disabled: globalColors.neutral.blueGrayLight[400], - }, - link: { - default: globalColors.chromatic.azure[600], - hover: globalColors.chromatic.azure[700], - focus: globalColors.chromatic.azure[800], - active: globalColors.chromatic.azure[800], - disabled: globalColors.neutral.blueGrayLight[400], - visited: globalColors.chromatic.orchid[400], + gray: { + default: globalColors.neutral.blueGrayLight[400], + highlighted: globalColors.neutral.blueGrayLight[400], + disabled: globalColors.neutral.blueGrayLight[200], + faded: globalColors.neutral.blueGrayLight.a100, }, - }, - icon: { primary: { - default: globalColors.neutral.blueGrayLight[0], - hover: globalColors.neutral.blueGrayLight[0], - focus: globalColors.neutral.blueGrayLight[0], - active: globalColors.neutral.blueGrayLight[0], - disabled: globalColors.neutral.blueGrayLight[600], - }, - secondary: { - default: globalColors.chromatic.azure[600], - hover: globalColors.chromatic.azure[600], - focus: globalColors.chromatic.azure[600], - active: globalColors.chromatic.azure[600], - disabled: globalColors.neutral.blueGrayLight[400], - }, - tertiary: { - default: globalColors.neutral.blueGrayLight[1000], - hover: globalColors.neutral.blueGrayLight[1000], - focus: globalColors.neutral.blueGrayLight[1000], - active: globalColors.neutral.blueGrayLight[1000], - disabled: globalColors.neutral.blueGrayLight[400], - }, - link: { - default: globalColors.chromatic.azure[600], - hover: globalColors.chromatic.azure[700], - focus: globalColors.chromatic.azure[800], - active: globalColors.chromatic.azure[800], - disabled: globalColors.neutral.blueGrayLight[400], - visited: globalColors.chromatic.orchid[400], + default: globalColors.chromatic.azure[500], + highlighted: globalColors.chromatic.azure[500], + disabled: globalColors.chromatic.azure.a100, + faded: globalColors.chromatic.azure.a100, }, - }, - }, - static: { white: globalColors.neutral.ashGrayLight[0] }, - white: { - action: { - background: { - primary: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[200], - focus: globalColors.neutral.ashGrayLight[300], - active: globalColors.neutral.ashGrayLight[300], - disabled: globalColors.neutral.ashGrayLight.a400, - }, - secondary: { - default: globalColors.neutral.ashGrayLight.a00, - hover: globalColors.neutral.ashGrayLight.a400, - focus: globalColors.neutral.ashGrayLight.a500, - active: globalColors.neutral.ashGrayLight.a500, - disabled: globalColors.neutral.ashGrayLight.a00, - }, - tertiary: { - default: globalColors.neutral.ashGrayLight.a300, - hover: globalColors.neutral.ashGrayLight.a400, - focus: globalColors.neutral.ashGrayLight.a500, - active: globalColors.neutral.ashGrayLight.a500, - disabled: globalColors.neutral.ashGrayLight.a300, - }, - }, - border: { - primary: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[200], - focus: globalColors.neutral.ashGrayLight[300], - active: globalColors.neutral.ashGrayLight[300], - disabled: globalColors.neutral.ashGrayLight.a400, - }, - secondary: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[0], - focus: globalColors.neutral.ashGrayLight[0], - active: globalColors.neutral.ashGrayLight[0], - disabled: globalColors.neutral.ashGrayLight.a500, - }, - tertiary: { - default: globalColors.neutral.ashGrayLight.a00, - hover: globalColors.neutral.ashGrayLight.a00, - focus: globalColors.neutral.ashGrayLight.a00, - active: globalColors.neutral.ashGrayLight.a00, - disabled: globalColors.neutral.ashGrayLight.a00, - }, - }, - text: { - primary: { - default: globalColors.chromatic.azure[600], - hover: globalColors.chromatic.azure[600], - focus: globalColors.chromatic.azure[600], - active: globalColors.chromatic.azure[600], - disabled: globalColors.neutral.ashGrayLight.a500, - }, - secondary: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[0], - focus: globalColors.neutral.ashGrayLight[0], - active: globalColors.neutral.ashGrayLight[0], - disabled: globalColors.neutral.ashGrayLight.a500, - }, - tertiary: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[0], - focus: globalColors.neutral.ashGrayLight[0], - active: globalColors.neutral.ashGrayLight[0], - disabled: globalColors.neutral.ashGrayLight.a500, - }, - link: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[300], - focus: globalColors.neutral.ashGrayLight[400], - active: globalColors.neutral.ashGrayLight[400], - disabled: globalColors.neutral.ashGrayLight.a500, - visited: globalColors.chromatic.orchid[400], - }, - }, - icon: { - primary: { - default: globalColors.chromatic.azure[600], - hover: globalColors.chromatic.azure[600], - focus: globalColors.chromatic.azure[600], - active: globalColors.chromatic.azure[600], - disabled: globalColors.neutral.ashGrayLight.a500, - }, - secondary: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[0], - focus: globalColors.neutral.ashGrayLight[0], - active: globalColors.neutral.ashGrayLight[0], - disabled: globalColors.neutral.ashGrayLight.a500, - }, - tertiary: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[0], - focus: globalColors.neutral.ashGrayLight[0], - active: globalColors.neutral.ashGrayLight[0], - disabled: globalColors.neutral.ashGrayLight.a500, - }, - link: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[300], - focus: globalColors.neutral.ashGrayLight[400], - active: globalColors.neutral.ashGrayLight[400], - disabled: globalColors.neutral.ashGrayLight.a500, - visited: globalColors.chromatic.orchid[400], - }, + staticWhite: { + default: globalColors.neutral.white[500], + highlighted: globalColors.neutral.white[400], + disabled: globalColors.neutral.white[100], + faded: globalColors.neutral.white[50], }, - }, - }, - badge: { - background: { - blue: { - lowContrast: globalColors.chromatic.azure.a50, - highContrast: globalColors.chromatic.azure[600], - }, - }, - border: { - blue: { - lowContrast: globalColors.chromatic.azure.a200, - highContrast: globalColors.chromatic.azure[600], + staticBlack: { + default: globalColors.neutral.black[500], + highlighted: globalColors.neutral.black[500], + disabled: globalColors.neutral.black[100], + faded: globalColors.neutral.black[100], }, }, text: { - blue: { - lowContrast: globalColors.chromatic.azure[600], - highContrast: globalColors.neutral.blueGrayLight[0], + positive: { + normal: globalColors.chromatic.emerald[700], + subtle: globalColors.chromatic.emerald[600], + muted: globalColors.chromatic.emerald[400], + disabled: globalColors.chromatic.emerald.a200, }, - }, - icon: { - blue: { - lowContrast: globalColors.chromatic.azure[600], - highContrast: globalColors.neutral.blueGrayLight[0], + negative: { + normal: globalColors.chromatic.crimson[600], + subtle: globalColors.chromatic.crimson[500], + muted: globalColors.chromatic.crimson[400], + disabled: globalColors.chromatic.crimson.a200, }, - }, - }, - }, - onDark: { - surface: { - background: { - level1: { - lowContrast: globalColors.neutral.blueGrayDark[1300], - highContrast: globalColors.neutral.blueGrayDark[800], + notice: { + normal: globalColors.chromatic.cider[700], + subtle: globalColors.chromatic.cider[600], + muted: globalColors.chromatic.cider[400], + disabled: globalColors.chromatic.cider.a200, }, - level2: { - lowContrast: globalColors.neutral.blueGrayDark[1100], - highContrast: globalColors.neutral.blueGrayDark[700], + information: { + normal: globalColors.chromatic.sapphire[700], + subtle: globalColors.chromatic.sapphire[600], + muted: globalColors.chromatic.sapphire[400], + disabled: globalColors.chromatic.sapphire.a200, }, - level3: { - lowContrast: globalColors.neutral.blueGrayDark[900], - highContrast: globalColors.neutral.blueGrayDark[600], + neutral: { + normal: globalColors.neutral.blueGrayLight[1100], + subtle: globalColors.neutral.blueGrayLight[900], + muted: globalColors.neutral.blueGrayLight[600], + disabled: globalColors.neutral.blueGrayLight.a200, }, - }, - border: { - normal: { - lowContrast: globalColors.neutral.blueGrayDark.a100, - highContrast: globalColors.neutral.blueGrayDark.a400, + gray: { + normal: globalColors.neutral.blueGrayLight[1200], + subtle: globalColors.neutral.blueGrayLight[900], + muted: globalColors.neutral.blueGrayLight[600], + disabled: globalColors.neutral.blueGrayLight.a200, }, - subtle: { - lowContrast: globalColors.neutral.blueGrayDark.a50, - highContrast: globalColors.neutral.blueGrayDark.a300, + primary: { + normal: globalColors.chromatic.azure[600], + subtle: globalColors.chromatic.azure[500], + muted: globalColors.chromatic.azure[400], + disabled: globalColors.chromatic.azure.a100, + }, + onPrimary: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[400], + muted: globalColors.neutral.white[300], + disabled: globalColors.neutral.white[100], + }, + staticWhite: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[400], + muted: globalColors.neutral.white[300], + disabled: globalColors.neutral.white[100], + }, + staticBlack: { + normal: globalColors.neutral.black[500], + subtle: globalColors.neutral.black[400], + muted: globalColors.neutral.black[300], + disabled: globalColors.neutral.black[100], }, }, - text: { - normal: { - lowContrast: globalColors.neutral.blueGrayDark[0], - highContrast: globalColors.neutral.blueGrayDark[0], - }, - subtle: { - lowContrast: globalColors.neutral.blueGrayDark[50], - highContrast: globalColors.neutral.blueGrayDark[50], + icon: { + positive: { + normal: globalColors.chromatic.emerald[700], + subtle: globalColors.chromatic.emerald[600], + muted: globalColors.chromatic.emerald[400], + disabled: globalColors.chromatic.emerald.a200, }, - subdued: { - lowContrast: globalColors.neutral.blueGrayDark[100], - highContrast: globalColors.neutral.blueGrayDark[100], + negative: { + normal: globalColors.chromatic.crimson[600], + subtle: globalColors.chromatic.crimson[500], + muted: globalColors.chromatic.crimson[400], + disabled: globalColors.chromatic.crimson.a200, }, - muted: { - lowContrast: globalColors.neutral.blueGrayDark[200], - highContrast: globalColors.neutral.blueGrayDark[200], + notice: { + normal: globalColors.chromatic.cider[700], + subtle: globalColors.chromatic.cider[600], + muted: globalColors.chromatic.cider[400], + disabled: globalColors.chromatic.cider.a200, }, - placeholder: { - lowContrast: globalColors.neutral.blueGrayDark[300], - highContrast: globalColors.neutral.blueGrayDark[300], + information: { + normal: globalColors.chromatic.sapphire[700], + subtle: globalColors.chromatic.sapphire[600], + muted: globalColors.chromatic.sapphire[400], + disabled: globalColors.chromatic.sapphire.a200, }, - }, - action: { - icon: { - default: { - lowContrast: globalColors.neutral.blueGrayDark[400], - highContrast: globalColors.neutral.blueGrayDark.a200, - }, - hover: { - lowContrast: globalColors.neutral.blueGrayDark[200], - highContrast: globalColors.neutral.blueGrayDark[0], - }, - focus: { - lowContrast: globalColors.neutral.blueGrayDark[200], - highContrast: globalColors.neutral.blueGrayDark[0], - }, - active: { - lowContrast: globalColors.neutral.blueGrayDark[200], - highContrast: globalColors.neutral.blueGrayDark[0], - }, - disabled: { - lowContrast: globalColors.neutral.blueGrayDark.a100, - highContrast: globalColors.neutral.blueGrayDark.a100, - }, + neutral: { + normal: globalColors.neutral.blueGrayLight[1100], + subtle: globalColors.neutral.blueGrayLight[900], + muted: globalColors.neutral.blueGrayLight[600], + disabled: globalColors.neutral.blueGrayLight.a200, }, - }, - overlay: { - background: { - 400: globalColors.neutral.blueGrayDark.a1100, - 800: globalColors.neutral.ashGrayDark.a1100, + gray: { + normal: globalColors.neutral.blueGrayLight[1200], + subtle: globalColors.neutral.blueGrayLight[900], + muted: globalColors.neutral.blueGrayLight[600], + disabled: globalColors.neutral.blueGrayLight.a200, }, + primary: { + normal: globalColors.chromatic.azure[600], + subtle: globalColors.chromatic.azure[500], + muted: globalColors.chromatic.azure[400], + disabled: globalColors.chromatic.azure.a100, + }, + onPrimary: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[400], + muted: globalColors.neutral.white[300], + disabled: globalColors.neutral.white[100], + }, + staticWhite: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[400], + muted: globalColors.neutral.white[300], + disabled: globalColors.neutral.white[100], + }, + staticBlack: { + normal: globalColors.neutral.black[500], + subtle: globalColors.neutral.black[400], + muted: globalColors.neutral.black[300], + disabled: globalColors.neutral.black[100], + }, + }, + hover: { subtle: globalColors.neutral.white[50], intense: globalColors.neutral.black[10] }, + }, + overlay: { + background: { + moderate: globalColors.neutral.blueGrayLight.a200, + subtle: globalColors.neutral.black[200], }, - popup: { background: globalColors.neutral.blueGrayDark[700] }, }, - brand: { - primary: { - 300: globalColors.chromatic.azure.a100, - 400: globalColors.chromatic.azure.a200, - 500: globalColors.chromatic.azure[400], - 600: globalColors.chromatic.azure[500], - 700: globalColors.chromatic.azure[600], - 800: globalColors.chromatic.azure[900], + popup: { + background: { + subtle: globalColors.neutral.blueGrayLight[0], + intense: globalColors.neutral.blueGrayLight[1000], }, - gray: { - 200: { - lowContrast: globalColors.neutral.blueGrayDark[800], - highContrast: globalColors.neutral.blueGrayDark[600], - }, - 300: { - lowContrast: globalColors.neutral.blueGrayDark[700], - highContrast: globalColors.neutral.blueGrayDark[500], + border: { + subtle: globalColors.neutral.blueGrayLight.a100, + intense: globalColors.neutral.blueGrayLight[900], + }, + }, + elevation: { + lowRaised: `hsla(212, 39%, 16%, ${opacity[1]})`, + midRaised: `hsla(212, 39%, 16%, ${opacity[2]})`, + highRaised: `hsla(212, 39%, 16%, ${opacity[3]})`, + }, + transparent: `hsla(0, 0%, 100%, ${opacity[0]})`, + }, + onDark: { + surface: { + background: { + gray: { + subtle: globalColors.neutral.blueGrayDark[1300], + moderate: globalColors.neutral.blueGrayDark[1200], + intense: globalColors.neutral.blueGrayDark[1100], }, - 400: { - lowContrast: globalColors.neutral.blueGrayDark[600], - highContrast: globalColors.neutral.blueGrayDark[400], + primary: { + subtle: globalColors.chromatic.azure.a200, + intense: globalColors.chromatic.azure[500], }, - 500: { - lowContrast: globalColors.neutral.blueGrayDark[500], - highContrast: globalColors.neutral.blueGrayDark[300], + sea: { subtle: globalColors.chromatic.sea[900], intense: globalColors.chromatic.sea[100] }, + cloud: { + subtle: globalColors.chromatic.cloud[900], + intense: globalColors.chromatic.cloud[100], }, - 600: { - lowContrast: globalColors.neutral.blueGrayDark[400], - highContrast: globalColors.neutral.blueGrayDark[200], + }, + border: { + gray: { + normal: globalColors.neutral.blueGrayDark[700], + subtle: globalColors.neutral.blueGrayDark[900], + muted: globalColors.neutral.blueGrayDark.a100, }, - 700: { - lowContrast: globalColors.neutral.blueGrayDark[200], - highContrast: globalColors.neutral.blueGrayDark[50], + primary: { + normal: globalColors.chromatic.azure[500], + muted: globalColors.chromatic.azure.a200, }, - a50: { - lowContrast: globalColors.neutral.blueGrayDark.a50, - highContrast: globalColors.neutral.blueGrayDark.a300, + }, + text: { + gray: { + normal: globalColors.neutral.blueGrayDark[50], + subtle: globalColors.neutral.blueGrayDark[300], + muted: globalColors.neutral.blueGrayDark[600], + disabled: globalColors.neutral.blueGrayDark.a200, + }, + primary: { normal: globalColors.chromatic.azure[300] }, + onSea: { + onSubtle: globalColors.chromatic.forest[200], + onIntense: globalColors.chromatic.forest[800], + }, + onCloud: { + onSubtle: globalColors.chromatic.azure[200], + onIntense: globalColors.chromatic.azure[600], + }, + staticWhite: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[450], + muted: globalColors.neutral.white[200], + disabled: globalColors.neutral.white[100], + }, + staticBlack: { + normal: globalColors.neutral.black[500], + subtle: globalColors.neutral.black[300], + muted: globalColors.neutral.black[200], + disabled: globalColors.neutral.black[100], }, - a100: { - lowContrast: globalColors.neutral.blueGrayDark.a100, - highContrast: globalColors.neutral.blueGrayDark.a400, + }, + icon: { + gray: { + normal: globalColors.neutral.blueGrayDark[50], + subtle: globalColors.neutral.blueGrayDark[300], + muted: globalColors.neutral.blueGrayDark[600], + disabled: globalColors.neutral.blueGrayDark.a200, + }, + primary: { normal: globalColors.chromatic.azure[300] }, + onSea: { + onSubtle: globalColors.chromatic.forest[400], + onIntense: globalColors.chromatic.forest[600], + }, + onCloud: { + onSubtle: globalColors.chromatic.azure[300], + onIntense: globalColors.chromatic.azure[400], + }, + staticWhite: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[450], + muted: globalColors.neutral.white[200], + disabled: globalColors.neutral.white[100], + }, + staticBlack: { + normal: globalColors.neutral.black[500], + subtle: globalColors.neutral.black[300], + muted: globalColors.neutral.black[200], + disabled: globalColors.neutral.black[100], }, }, - secondary: { 500: globalColors.chromatic.emerald[500] }, }, feedback: { background: { positive: { - lowContrast: globalColors.chromatic.emerald.a100, - highContrast: globalColors.chromatic.emerald[700], + subtle: globalColors.chromatic.emerald.a100, + intense: globalColors.chromatic.emerald[700], }, negative: { - lowContrast: globalColors.chromatic.crimson.a100, - highContrast: globalColors.chromatic.crimson[700], + subtle: globalColors.chromatic.crimson.a100, + intense: globalColors.chromatic.crimson[700], }, notice: { - lowContrast: globalColors.chromatic.cider.a100, - highContrast: globalColors.chromatic.cider[800], + subtle: globalColors.chromatic.cider.a100, + intense: globalColors.chromatic.cider[700], }, information: { - lowContrast: globalColors.chromatic.sapphire.a100, - highContrast: globalColors.chromatic.sapphire[600], + subtle: globalColors.chromatic.sapphire.a100, + intense: globalColors.chromatic.sapphire[700], }, neutral: { - lowContrast: globalColors.neutral.blueGrayDark.a100, - highContrast: globalColors.neutral.blueGrayDark.a100, + subtle: globalColors.neutral.blueGrayDark.a50, + intense: globalColors.neutral.blueGrayDark[1000], }, }, border: { positive: { - lowContrast: globalColors.chromatic.emerald.a200, - highContrast: globalColors.chromatic.emerald[700], + subtle: globalColors.chromatic.emerald.a200, + intense: globalColors.chromatic.emerald[800], }, negative: { - lowContrast: globalColors.chromatic.crimson.a200, - highContrast: globalColors.chromatic.crimson[700], + subtle: globalColors.chromatic.crimson.a200, + intense: globalColors.chromatic.crimson[800], }, notice: { - lowContrast: globalColors.chromatic.cider.a200, - highContrast: globalColors.chromatic.cider[800], + subtle: globalColors.chromatic.cider.a200, + intense: globalColors.chromatic.cider[800], }, information: { - lowContrast: globalColors.chromatic.sapphire.a200, - highContrast: globalColors.chromatic.sapphire[600], + subtle: globalColors.chromatic.sapphire.a200, + intense: globalColors.chromatic.sapphire[800], }, neutral: { - lowContrast: globalColors.neutral.blueGrayDark.a200, - highContrast: globalColors.neutral.blueGrayDark[50], + subtle: globalColors.neutral.blueGrayLight.a100, + intense: globalColors.neutral.blueGrayLight[1100], }, }, text: { positive: { - lowContrast: globalColors.chromatic.emerald[500], - highContrast: globalColors.neutral.blueGrayDark[0], + subtle: globalColors.chromatic.emerald[50], + intense: globalColors.chromatic.emerald[500], }, negative: { - lowContrast: globalColors.chromatic.crimson[400], - highContrast: globalColors.neutral.blueGrayDark[0], + subtle: globalColors.chromatic.crimson[50], + intense: globalColors.chromatic.crimson[500], }, notice: { - lowContrast: globalColors.chromatic.cider[400], - highContrast: globalColors.neutral.blueGrayDark[0], + subtle: globalColors.chromatic.cider[50], + intense: globalColors.chromatic.cider[500], }, information: { - lowContrast: globalColors.chromatic.sapphire[400], - highContrast: globalColors.neutral.blueGrayDark[0], + subtle: globalColors.chromatic.sapphire[50], + intense: globalColors.chromatic.sapphire[500], }, neutral: { - lowContrast: globalColors.neutral.blueGrayDark[100], - highContrast: globalColors.neutral.blueGrayDark[50], + subtle: globalColors.neutral.blueGrayDark[700], + intense: globalColors.neutral.blueGrayDark[100], }, }, icon: { positive: { - lowContrast: globalColors.chromatic.emerald[500], - highContrast: globalColors.neutral.blueGrayDark[0], + subtle: globalColors.chromatic.emerald[50], + intense: globalColors.chromatic.emerald[500], }, negative: { - lowContrast: globalColors.chromatic.crimson[400], - highContrast: globalColors.neutral.blueGrayDark[0], + subtle: globalColors.chromatic.crimson[50], + intense: globalColors.chromatic.crimson[500], }, notice: { - lowContrast: globalColors.chromatic.cider[400], - highContrast: globalColors.neutral.blueGrayDark[0], + subtle: globalColors.chromatic.cider[50], + intense: globalColors.chromatic.cider[500], }, information: { - lowContrast: globalColors.chromatic.sapphire[400], - highContrast: globalColors.neutral.blueGrayDark[0], + subtle: globalColors.chromatic.sapphire[50], + intense: globalColors.chromatic.sapphire[500], }, neutral: { - lowContrast: globalColors.neutral.blueGrayDark[100], - highContrast: globalColors.neutral.blueGrayDark[50], + subtle: globalColors.neutral.blueGrayDark[700], + intense: globalColors.neutral.blueGrayDark[100], }, }, - positive: { - action: { - background: { - primary: { - default: { - highContrast: globalColors.chromatic.emerald[700], - lowContrast: globalColors.chromatic.emerald.a50, - }, - hover: { - highContrast: globalColors.chromatic.emerald[800], - lowContrast: globalColors.chromatic.emerald.a100, - }, - focus: { - highContrast: globalColors.chromatic.emerald[900], - lowContrast: globalColors.chromatic.emerald.a200, - }, - active: { - highContrast: globalColors.chromatic.emerald[900], - lowContrast: globalColors.chromatic.emerald.a200, - }, - disabled: { - highContrast: globalColors.chromatic.emerald[700], - lowContrast: globalColors.chromatic.emerald.a50, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.emerald.a50 }, - hover: { lowContrast: globalColors.chromatic.emerald.a100 }, - focus: { lowContrast: globalColors.chromatic.emerald.a200 }, - active: { lowContrast: globalColors.chromatic.emerald.a200 }, - disabled: { lowContrast: globalColors.chromatic.emerald.a50 }, - }, - }, - border: { - primary: { - default: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[700], - }, - hover: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[700], - }, - focus: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[700], - }, - active: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[700], - }, - disabled: { - highContrast: globalColors.chromatic.emerald[500], - lowContrast: globalColors.chromatic.emerald[700], - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.emerald[700] }, - hover: { lowContrast: globalColors.chromatic.emerald[700] }, - focus: { lowContrast: globalColors.chromatic.emerald[700] }, - active: { lowContrast: globalColors.chromatic.emerald[700] }, - disabled: { lowContrast: globalColors.chromatic.emerald[700] }, - }, - }, - text: { - primary: { - default: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[500], - }, - hover: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[500], - }, - focus: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[500], - }, - active: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[500], - }, - disabled: { - highContrast: globalColors.chromatic.emerald[500], - lowContrast: globalColors.chromatic.emerald[800], - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.emerald[500] }, - hover: { lowContrast: globalColors.chromatic.emerald[500] }, - focus: { lowContrast: globalColors.chromatic.emerald[500] }, - active: { lowContrast: globalColors.chromatic.emerald[500] }, - disabled: { lowContrast: globalColors.chromatic.emerald[800] }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.emerald[500], - highContrast: globalColors.chromatic.emerald[50], - }, - hover: { - lowContrast: globalColors.chromatic.emerald[600], - highContrast: globalColors.chromatic.emerald[50], - }, - focus: { - lowContrast: globalColors.chromatic.emerald[700], - highContrast: globalColors.chromatic.emerald[100], - }, - active: { - lowContrast: globalColors.chromatic.emerald[700], - highContrast: globalColors.chromatic.emerald[100], - }, - disabled: { - lowContrast: globalColors.chromatic.emerald[800], - highContrast: globalColors.chromatic.emerald[100], - }, - }, - }, - icon: { - primary: { - default: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[500], - }, - hover: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[500], - }, - focus: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[500], - }, - active: { - highContrast: globalColors.chromatic.emerald[50], - lowContrast: globalColors.chromatic.emerald[500], - }, - disabled: { - highContrast: globalColors.chromatic.emerald[500], - lowContrast: globalColors.chromatic.emerald[800], - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.emerald[500] }, - hover: { lowContrast: globalColors.chromatic.emerald[500] }, - focus: { lowContrast: globalColors.chromatic.emerald[500] }, - active: { lowContrast: globalColors.chromatic.emerald[500] }, - disabled: { lowContrast: globalColors.chromatic.emerald[800] }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.emerald[500], - highContrast: globalColors.chromatic.emerald[50], - }, - hover: { - lowContrast: globalColors.chromatic.emerald[600], - highContrast: globalColors.chromatic.emerald[50], - }, - focus: { - lowContrast: globalColors.chromatic.emerald[700], - highContrast: globalColors.chromatic.emerald[100], - }, - active: { - lowContrast: globalColors.chromatic.emerald[700], - highContrast: globalColors.chromatic.emerald[100], - }, - disabled: { - lowContrast: globalColors.chromatic.emerald[800], - highContrast: globalColors.chromatic.emerald[100], - }, - }, - }, + }, + interactive: { + background: { + positive: { + default: globalColors.chromatic.emerald[600], + highlighted: globalColors.chromatic.emerald[700], + disabled: globalColors.chromatic.emerald.a100, + faded: globalColors.chromatic.emerald.a150, + fadedHighlighted: globalColors.chromatic.emerald.a200, }, - }, - negative: { - action: { - background: { - primary: { - default: { - highContrast: globalColors.chromatic.crimson[700], - lowContrast: globalColors.chromatic.crimson.a50, - }, - hover: { - highContrast: globalColors.chromatic.crimson[800], - lowContrast: globalColors.chromatic.crimson.a100, - }, - focus: { - highContrast: globalColors.chromatic.crimson[900], - lowContrast: globalColors.chromatic.crimson.a200, - }, - active: { - highContrast: globalColors.chromatic.crimson[900], - lowContrast: globalColors.chromatic.crimson.a200, - }, - disabled: { - highContrast: globalColors.chromatic.crimson[700], - lowContrast: globalColors.chromatic.crimson.a50, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.crimson.a50 }, - hover: { lowContrast: globalColors.chromatic.crimson.a100 }, - focus: { lowContrast: globalColors.chromatic.crimson.a200 }, - active: { lowContrast: globalColors.chromatic.crimson.a200 }, - disabled: { lowContrast: globalColors.chromatic.crimson.a50 }, - }, - }, - border: { - primary: { - default: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[500], - }, - hover: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[500], - }, - focus: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[500], - }, - active: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[500], - }, - disabled: { - highContrast: globalColors.chromatic.crimson[500], - lowContrast: globalColors.chromatic.crimson[900], - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.crimson[500] }, - hover: { lowContrast: globalColors.chromatic.crimson[500] }, - focus: { lowContrast: globalColors.chromatic.crimson[500] }, - active: { lowContrast: globalColors.chromatic.crimson[500] }, - disabled: { lowContrast: globalColors.chromatic.crimson[900] }, - }, - }, - text: { - primary: { - default: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[400], - }, - hover: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[400], - }, - focus: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[400], - }, - active: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[400], - }, - disabled: { - highContrast: globalColors.chromatic.crimson[500], - lowContrast: globalColors.chromatic.crimson[800], - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.crimson[400] }, - hover: { lowContrast: globalColors.chromatic.crimson[400] }, - focus: { lowContrast: globalColors.chromatic.crimson[400] }, - active: { lowContrast: globalColors.chromatic.crimson[400] }, - disabled: { lowContrast: globalColors.chromatic.crimson[800] }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.crimson[500], - highContrast: globalColors.chromatic.crimson[50], - }, - hover: { - lowContrast: globalColors.chromatic.crimson[400], - highContrast: globalColors.chromatic.crimson[50], - }, - focus: { - lowContrast: globalColors.chromatic.crimson[600], - highContrast: globalColors.chromatic.crimson[100], - }, - active: { - lowContrast: globalColors.chromatic.crimson[600], - highContrast: globalColors.chromatic.crimson[100], - }, - disabled: { - lowContrast: globalColors.chromatic.crimson[900], - highContrast: globalColors.chromatic.crimson[500], - }, - }, - }, - icon: { - primary: { - default: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[400], - }, - hover: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[400], - }, - focus: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[400], - }, - active: { - highContrast: globalColors.chromatic.crimson[50], - lowContrast: globalColors.chromatic.crimson[400], - }, - disabled: { - highContrast: globalColors.chromatic.crimson[500], - lowContrast: globalColors.chromatic.crimson[800], - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.crimson[400] }, - hover: { lowContrast: globalColors.chromatic.crimson[400] }, - focus: { lowContrast: globalColors.chromatic.crimson[400] }, - active: { lowContrast: globalColors.chromatic.crimson[400] }, - disabled: { lowContrast: globalColors.chromatic.crimson[800] }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.crimson[500], - highContrast: globalColors.chromatic.crimson[50], - }, - hover: { - lowContrast: globalColors.chromatic.crimson[400], - highContrast: globalColors.chromatic.crimson[50], - }, - focus: { - lowContrast: globalColors.chromatic.crimson[600], - highContrast: globalColors.chromatic.crimson[100], - }, - active: { - lowContrast: globalColors.chromatic.crimson[600], - highContrast: globalColors.chromatic.crimson[100], - }, - disabled: { - lowContrast: globalColors.chromatic.crimson[900], - highContrast: globalColors.chromatic.crimson[500], - }, - }, - }, + negative: { + default: globalColors.chromatic.crimson[600], + highlighted: globalColors.chromatic.crimson[700], + disabled: globalColors.chromatic.crimson.a100, + faded: globalColors.chromatic.crimson.a150, + fadedHighlighted: globalColors.chromatic.crimson.a200, }, - }, - notice: { - action: { - background: { - primary: { - default: { - highContrast: globalColors.chromatic.cider[800], - lowContrast: globalColors.chromatic.cider.a50, - }, - hover: { - highContrast: globalColors.chromatic.cider[900], - lowContrast: globalColors.chromatic.cider.a100, - }, - focus: { - highContrast: globalColors.chromatic.cider[950], - lowContrast: globalColors.chromatic.cider.a200, - }, - active: { - highContrast: globalColors.chromatic.cider[950], - lowContrast: globalColors.chromatic.cider.a200, - }, - disabled: { - highContrast: globalColors.chromatic.cider[800], - lowContrast: globalColors.chromatic.cider.a50, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.cider.a50 }, - hover: { lowContrast: globalColors.chromatic.cider.a100 }, - focus: { lowContrast: globalColors.chromatic.cider.a200 }, - active: { lowContrast: globalColors.chromatic.cider.a200 }, - disabled: { lowContrast: globalColors.chromatic.cider.a50 }, - }, - }, - border: { - primary: { - default: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[800], - }, - hover: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[800], - }, - focus: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[800], - }, - active: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[800], - }, - disabled: { - highContrast: globalColors.chromatic.cider[500], - lowContrast: globalColors.chromatic.cider[900], - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.cider[800] }, - hover: { lowContrast: globalColors.chromatic.cider[800] }, - focus: { lowContrast: globalColors.chromatic.cider[800] }, - active: { lowContrast: globalColors.chromatic.cider[800] }, - disabled: { lowContrast: globalColors.chromatic.cider[900] }, - }, - }, - text: { - primary: { - default: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[500], - }, - hover: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[500], - }, - focus: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[500], - }, - active: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[500], - }, - disabled: { - highContrast: globalColors.chromatic.cider[500], - lowContrast: globalColors.chromatic.cider[900], - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.cider[500] }, - hover: { lowContrast: globalColors.chromatic.cider[500] }, - focus: { lowContrast: globalColors.chromatic.cider[500] }, - active: { lowContrast: globalColors.chromatic.cider[500] }, - disabled: { lowContrast: globalColors.chromatic.cider[900] }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.cider[500], - highContrast: globalColors.chromatic.cider[50], - }, - hover: { - lowContrast: globalColors.chromatic.cider[400], - highContrast: globalColors.chromatic.cider[50], - }, - focus: { - lowContrast: globalColors.chromatic.cider[600], - highContrast: globalColors.chromatic.cider[100], - }, - active: { - lowContrast: globalColors.chromatic.cider[600], - highContrast: globalColors.chromatic.cider[100], - }, - disabled: { - lowContrast: globalColors.chromatic.cider[900], - highContrast: globalColors.chromatic.cider[500], - }, - }, - }, - icon: { - primary: { - default: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[500], - }, - hover: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[500], - }, - focus: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[500], - }, - active: { - highContrast: globalColors.chromatic.cider[50], - lowContrast: globalColors.chromatic.cider[500], - }, - disabled: { - highContrast: globalColors.chromatic.cider[500], - lowContrast: globalColors.chromatic.cider[900], - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.cider[500] }, - hover: { lowContrast: globalColors.chromatic.cider[500] }, - focus: { lowContrast: globalColors.chromatic.cider[500] }, - active: { lowContrast: globalColors.chromatic.cider[500] }, - disabled: { lowContrast: globalColors.chromatic.cider[900] }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.cider[500], - highContrast: globalColors.chromatic.cider[50], - }, - hover: { - lowContrast: globalColors.chromatic.cider[400], - highContrast: globalColors.chromatic.cider[50], - }, - focus: { - lowContrast: globalColors.chromatic.cider[600], - highContrast: globalColors.chromatic.cider[100], - }, - active: { - lowContrast: globalColors.chromatic.cider[600], - highContrast: globalColors.chromatic.cider[100], - }, - disabled: { - lowContrast: globalColors.chromatic.cider[900], - highContrast: globalColors.chromatic.cider[500], - }, - }, - }, + notice: { + default: globalColors.chromatic.cider[600], + highlighted: globalColors.chromatic.cider[700], + disabled: globalColors.chromatic.cider.a100, + faded: globalColors.chromatic.cider.a150, + fadedHighlighted: globalColors.chromatic.cider.a200, }, - }, - information: { - action: { - background: { - primary: { - default: { - highContrast: globalColors.chromatic.sapphire[600], - lowContrast: globalColors.chromatic.sapphire.a50, - }, - hover: { - highContrast: globalColors.chromatic.sapphire[700], - lowContrast: globalColors.chromatic.sapphire.a100, - }, - focus: { - highContrast: globalColors.chromatic.sapphire[800], - lowContrast: globalColors.chromatic.sapphire.a200, - }, - active: { - highContrast: globalColors.chromatic.sapphire[800], - lowContrast: globalColors.chromatic.sapphire.a200, - }, - disabled: { - highContrast: globalColors.chromatic.sapphire[600], - lowContrast: globalColors.chromatic.sapphire.a50, - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.sapphire.a50 }, - hover: { lowContrast: globalColors.chromatic.sapphire.a100 }, - focus: { lowContrast: globalColors.chromatic.sapphire.a200 }, - active: { lowContrast: globalColors.chromatic.sapphire.a200 }, - disabled: { lowContrast: globalColors.chromatic.sapphire.a50 }, - }, - }, - border: { - primary: { - default: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[700], - }, - hover: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[700], - }, - focus: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[700], - }, - active: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[700], - }, - disabled: { - highContrast: globalColors.chromatic.sapphire[400], - lowContrast: globalColors.chromatic.sapphire[900], - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.sapphire[700] }, - hover: { lowContrast: globalColors.chromatic.sapphire[700] }, - focus: { lowContrast: globalColors.chromatic.sapphire[700] }, - active: { lowContrast: globalColors.chromatic.sapphire[700] }, - disabled: { lowContrast: globalColors.chromatic.sapphire[900] }, - }, - }, - text: { - primary: { - default: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[500], - }, - hover: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[500], - }, - focus: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[500], - }, - active: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[500], - }, - disabled: { - highContrast: globalColors.chromatic.sapphire[400], - lowContrast: globalColors.chromatic.sapphire[900], - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.sapphire[500] }, - hover: { lowContrast: globalColors.chromatic.sapphire[500] }, - focus: { lowContrast: globalColors.chromatic.sapphire[500] }, - active: { lowContrast: globalColors.chromatic.sapphire[500] }, - disabled: { lowContrast: globalColors.chromatic.sapphire[900] }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.sapphire[500], - highContrast: globalColors.chromatic.sapphire[50], - }, - hover: { - lowContrast: globalColors.chromatic.sapphire[400], - highContrast: globalColors.chromatic.sapphire[50], - }, - focus: { - lowContrast: globalColors.chromatic.sapphire[600], - highContrast: globalColors.chromatic.sapphire[100], - }, - active: { - lowContrast: globalColors.chromatic.sapphire[600], - highContrast: globalColors.chromatic.sapphire[100], - }, - disabled: { - lowContrast: globalColors.chromatic.sapphire[900], - highContrast: globalColors.chromatic.sapphire[400], - }, - }, - }, - icon: { - primary: { - default: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[500], - }, - hover: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[500], - }, - focus: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[500], - }, - active: { - highContrast: globalColors.chromatic.sapphire[50], - lowContrast: globalColors.chromatic.sapphire[500], - }, - disabled: { - highContrast: globalColors.chromatic.sapphire[400], - lowContrast: globalColors.chromatic.sapphire[900], - }, - }, - secondary: { - default: { lowContrast: globalColors.chromatic.sapphire[500] }, - hover: { lowContrast: globalColors.chromatic.sapphire[500] }, - focus: { lowContrast: globalColors.chromatic.sapphire[500] }, - active: { lowContrast: globalColors.chromatic.sapphire[500] }, - disabled: { lowContrast: globalColors.chromatic.sapphire[900] }, - }, - link: { - default: { - lowContrast: globalColors.chromatic.sapphire[500], - highContrast: globalColors.chromatic.sapphire[50], - }, - hover: { - lowContrast: globalColors.chromatic.sapphire[400], - highContrast: globalColors.chromatic.sapphire[50], - }, - focus: { - lowContrast: globalColors.chromatic.sapphire[600], - highContrast: globalColors.chromatic.sapphire[100], - }, - active: { - lowContrast: globalColors.chromatic.sapphire[600], - highContrast: globalColors.chromatic.sapphire[100], - }, - disabled: { - lowContrast: globalColors.chromatic.sapphire[900], - highContrast: globalColors.chromatic.sapphire[400], - }, - }, - }, + information: { + default: globalColors.chromatic.sapphire[600], + highlighted: globalColors.chromatic.sapphire[700], + disabled: globalColors.chromatic.sapphire.a100, + faded: globalColors.chromatic.sapphire.a150, + fadedHighlighted: globalColors.chromatic.sapphire.a200, }, - }, - neutral: { - action: { - background: { - primary: { - default: { - highContrast: globalColors.neutral.blueGrayDark[50], - lowContrast: globalColors.neutral.blueGrayDark.a50, - }, - hover: { - highContrast: globalColors.neutral.blueGrayDark[100], - lowContrast: globalColors.neutral.blueGrayDark.a100, - }, - focus: { - highContrast: globalColors.neutral.blueGrayDark[200], - lowContrast: globalColors.neutral.blueGrayDark.a200, - }, - active: { - highContrast: globalColors.neutral.blueGrayDark[200], - lowContrast: globalColors.neutral.blueGrayDark.a200, - }, - disabled: { - highContrast: globalColors.neutral.blueGrayDark[50], - lowContrast: globalColors.neutral.blueGrayDark.a50, - }, - }, - secondary: { - default: { lowContrast: globalColors.neutral.blueGrayDark.a50 }, - hover: { lowContrast: globalColors.neutral.blueGrayDark.a100 }, - focus: { lowContrast: globalColors.neutral.blueGrayDark.a200 }, - active: { lowContrast: globalColors.neutral.blueGrayDark.a200 }, - disabled: { lowContrast: globalColors.neutral.blueGrayDark.a50 }, - }, - }, - border: { - primary: { - default: { - highContrast: globalColors.neutral.blueGrayDark[300], - lowContrast: globalColors.neutral.blueGrayDark[400], - }, - hover: { - highContrast: globalColors.neutral.blueGrayDark[300], - lowContrast: globalColors.neutral.blueGrayDark[400], - }, - focus: { - highContrast: globalColors.neutral.blueGrayDark[300], - lowContrast: globalColors.neutral.blueGrayDark[400], - }, - active: { - highContrast: globalColors.neutral.blueGrayDark[300], - lowContrast: globalColors.neutral.blueGrayDark[400], - }, - disabled: { - highContrast: globalColors.neutral.blueGrayDark[300], - lowContrast: globalColors.neutral.blueGrayDark[400], - }, - }, - secondary: { - default: { lowContrast: globalColors.neutral.blueGrayDark[400] }, - hover: { lowContrast: globalColors.neutral.blueGrayDark[400] }, - focus: { lowContrast: globalColors.neutral.blueGrayDark[400] }, - active: { lowContrast: globalColors.neutral.blueGrayDark[400] }, - disabled: { lowContrast: globalColors.neutral.blueGrayDark[400] }, - }, - }, - text: { - primary: { - default: { - highContrast: globalColors.neutral.blueGrayDark[700], - lowContrast: globalColors.neutral.blueGrayDark[100], - }, - hover: { - highContrast: globalColors.neutral.blueGrayDark[700], - lowContrast: globalColors.neutral.blueGrayDark[100], - }, - focus: { - highContrast: globalColors.neutral.blueGrayDark[700], - lowContrast: globalColors.neutral.blueGrayDark[100], - }, - active: { - highContrast: globalColors.neutral.blueGrayDark[700], - lowContrast: globalColors.neutral.blueGrayDark[100], - }, - disabled: { - highContrast: globalColors.neutral.blueGrayDark[300], - lowContrast: globalColors.neutral.blueGrayDark[400], - }, - }, - secondary: { - default: { lowContrast: globalColors.neutral.blueGrayDark[100] }, - hover: { lowContrast: globalColors.neutral.blueGrayDark[100] }, - focus: { lowContrast: globalColors.neutral.blueGrayDark[100] }, - active: { lowContrast: globalColors.neutral.blueGrayDark[100] }, - disabled: { lowContrast: globalColors.neutral.blueGrayDark[400] }, - }, - link: { - default: { - lowContrast: globalColors.neutral.blueGrayDark[100], - highContrast: globalColors.neutral.blueGrayDark[100], - }, - hover: { - lowContrast: globalColors.neutral.blueGrayDark[200], - highContrast: globalColors.neutral.blueGrayDark[200], - }, - focus: { - lowContrast: globalColors.neutral.blueGrayDark[300], - highContrast: globalColors.neutral.blueGrayDark[300], - }, - active: { - lowContrast: globalColors.neutral.blueGrayDark[300], - highContrast: globalColors.neutral.blueGrayDark[300], - }, - disabled: { - lowContrast: globalColors.neutral.blueGrayDark[400], - highContrast: globalColors.neutral.blueGrayDark[400], - }, - }, - }, - icon: { - primary: { - default: { - highContrast: globalColors.neutral.blueGrayDark[700], - lowContrast: globalColors.neutral.blueGrayDark[100], - }, - hover: { - highContrast: globalColors.neutral.blueGrayDark[700], - lowContrast: globalColors.neutral.blueGrayDark[100], - }, - focus: { - highContrast: globalColors.neutral.blueGrayDark[700], - lowContrast: globalColors.neutral.blueGrayDark[100], - }, - active: { - highContrast: globalColors.neutral.blueGrayDark[700], - lowContrast: globalColors.neutral.blueGrayDark[100], - }, - disabled: { - highContrast: globalColors.neutral.blueGrayDark[300], - lowContrast: globalColors.neutral.blueGrayDark[400], - }, - }, - secondary: { - default: { lowContrast: globalColors.neutral.blueGrayDark[100] }, - hover: { lowContrast: globalColors.neutral.blueGrayDark[100] }, - focus: { lowContrast: globalColors.neutral.blueGrayDark[100] }, - active: { lowContrast: globalColors.neutral.blueGrayDark[100] }, - disabled: { lowContrast: globalColors.neutral.blueGrayDark[400] }, - }, - link: { - default: { - lowContrast: globalColors.neutral.blueGrayDark[100], - highContrast: globalColors.neutral.blueGrayDark[100], - }, - hover: { - lowContrast: globalColors.neutral.blueGrayDark[200], - highContrast: globalColors.neutral.blueGrayDark[200], - }, - focus: { - lowContrast: globalColors.neutral.blueGrayDark[300], - highContrast: globalColors.neutral.blueGrayDark[300], - }, - active: { - lowContrast: globalColors.neutral.blueGrayDark[300], - highContrast: globalColors.neutral.blueGrayDark[300], - }, - disabled: { - lowContrast: globalColors.neutral.blueGrayDark[400], - highContrast: globalColors.neutral.blueGrayDark[400], - }, - }, - }, + neutral: { + default: globalColors.neutral.blueGrayDark[900], + highlighted: globalColors.neutral.blueGrayDark[1000], + disabled: globalColors.neutral.blueGrayDark.a100, + faded: globalColors.neutral.blueGrayDark.a75, + fadedHighlighted: globalColors.neutral.blueGrayDark.a100, }, - }, - }, - action: { - background: { - primary: { - default: globalColors.chromatic.azure[500], - hover: globalColors.chromatic.azure[600], - focus: globalColors.chromatic.azure[700], - active: globalColors.chromatic.azure[800], - disabled: globalColors.neutral.blueGrayDark[600], - }, - secondary: { - default: globalColors.chromatic.azure.a00, - hover: globalColors.chromatic.azure.a50, - focus: globalColors.chromatic.azure.a100, - active: globalColors.chromatic.azure.a200, - disabled: globalColors.neutral.blueGrayDark.a00, - }, - tertiary: { + gray: { default: globalColors.neutral.blueGrayDark.a50, - hover: globalColors.neutral.blueGrayDark.a100, - focus: globalColors.neutral.blueGrayDark.a200, - active: globalColors.neutral.blueGrayLight.a200, + highlighted: globalColors.neutral.blueGrayDark.a100, disabled: globalColors.neutral.blueGrayDark.a50, + faded: globalColors.neutral.blueGrayDark.a75, + fadedHighlighted: globalColors.neutral.blueGrayDark.a100, + }, + primary: { + default: globalColors.chromatic.azure[400], + highlighted: globalColors.chromatic.azure[500], + disabled: globalColors.chromatic.azure.a100, + faded: globalColors.chromatic.azure.a150, + fadedHighlighted: globalColors.chromatic.azure.a200, + }, + staticBlack: { + default: globalColors.neutral.black[500], + highlighted: globalColors.neutral.black[500], + disabled: globalColors.neutral.black[200], + faded: globalColors.neutral.black[50], + fadedHighlighted: globalColors.neutral.black[100], + }, + staticWhite: { + default: globalColors.neutral.white[500], + highlighted: globalColors.neutral.white[400], + disabled: globalColors.neutral.white[50], + faded: globalColors.neutral.white[50], + fadedHighlighted: globalColors.neutral.white[100], }, }, border: { - primary: { - default: globalColors.chromatic.azure[500], - hover: globalColors.chromatic.azure[600], - focus: globalColors.chromatic.azure[700], - active: globalColors.chromatic.azure[800], - disabled: globalColors.neutral.blueGrayDark[600], + positive: { + default: globalColors.chromatic.emerald[600], + highlighted: globalColors.chromatic.emerald[700], + disabled: globalColors.chromatic.emerald.a100, + faded: globalColors.chromatic.emerald.a100, }, - secondary: { + negative: { + default: globalColors.chromatic.crimson[600], + highlighted: globalColors.chromatic.crimson[700], + disabled: globalColors.chromatic.crimson.a100, + faded: globalColors.chromatic.crimson.a100, + }, + notice: { + default: globalColors.chromatic.cider[600], + highlighted: globalColors.chromatic.cider[700], + disabled: globalColors.chromatic.cider.a100, + faded: globalColors.chromatic.cider.a100, + }, + information: { + default: globalColors.chromatic.sapphire[600], + highlighted: globalColors.chromatic.sapphire[700], + disabled: globalColors.chromatic.sapphire.a100, + faded: globalColors.chromatic.sapphire.a100, + }, + neutral: { + default: globalColors.neutral.blueGrayDark[500], + highlighted: globalColors.neutral.blueGrayDark[500], + disabled: globalColors.neutral.blueGrayLight[900], + faded: globalColors.neutral.blueGrayDark.a100, + }, + gray: { + default: globalColors.neutral.blueGrayDark[800], + highlighted: globalColors.neutral.blueGrayDark[800], + disabled: globalColors.neutral.blueGrayDark[1000], + faded: globalColors.neutral.blueGrayDark.a100, + }, + primary: { default: globalColors.chromatic.azure[400], - hover: globalColors.chromatic.azure[400], - focus: globalColors.chromatic.azure[400], - active: globalColors.chromatic.azure[400], - disabled: globalColors.neutral.blueGrayDark[500], - }, - tertiary: { - default: globalColors.neutral.blueGrayDark.a00, - hover: globalColors.neutral.blueGrayDark[400], - focus: globalColors.neutral.blueGrayDark[400], - active: globalColors.neutral.blueGrayDark[400], - disabled: globalColors.neutral.blueGrayDark[600], + highlighted: globalColors.chromatic.azure[500], + disabled: globalColors.chromatic.azure.a200, + faded: globalColors.chromatic.azure.a150, + }, + staticWhite: { + default: globalColors.neutral.white[500], + highlighted: globalColors.neutral.white[400], + disabled: globalColors.neutral.white[100], + faded: globalColors.neutral.white[50], + }, + staticBlack: { + default: globalColors.neutral.black[500], + highlighted: globalColors.neutral.black[500], + disabled: globalColors.neutral.black[100], + faded: globalColors.neutral.black[100], }, }, text: { - primary: { - default: globalColors.neutral.blueGrayDark[0], - hover: globalColors.neutral.blueGrayDark[0], - focus: globalColors.neutral.blueGrayDark[0], - active: globalColors.neutral.blueGrayDark[0], - disabled: globalColors.neutral.blueGrayDark[300], + positive: { + normal: globalColors.chromatic.emerald[400], + subtle: globalColors.chromatic.emerald[500], + muted: globalColors.chromatic.emerald[700], + disabled: globalColors.chromatic.emerald.a200, }, - secondary: { - default: globalColors.chromatic.azure[400], - hover: globalColors.chromatic.azure[400], - focus: globalColors.chromatic.azure[400], - active: globalColors.chromatic.azure[400], - disabled: globalColors.neutral.blueGrayDark[500], - }, - tertiary: { - default: globalColors.neutral.blueGrayDark[100], - hover: globalColors.neutral.blueGrayDark[100], - focus: globalColors.neutral.blueGrayDark[100], - active: globalColors.neutral.blueGrayDark[100], - disabled: globalColors.neutral.blueGrayDark[500], - }, - link: { - default: globalColors.chromatic.azure[300], - hover: globalColors.chromatic.azure[400], - focus: globalColors.chromatic.azure[500], - active: globalColors.chromatic.azure[500], - disabled: globalColors.neutral.blueGrayDark[400], - visited: globalColors.chromatic.orchid[300], + negative: { + normal: globalColors.chromatic.crimson[400], + subtle: globalColors.chromatic.crimson[500], + muted: globalColors.chromatic.crimson[700], + disabled: globalColors.chromatic.crimson.a200, + }, + notice: { + normal: globalColors.chromatic.cider[400], + subtle: globalColors.chromatic.cider[500], + muted: globalColors.chromatic.cider[700], + disabled: globalColors.chromatic.cider.a200, + }, + information: { + normal: globalColors.chromatic.sapphire[400], + subtle: globalColors.chromatic.sapphire[500], + muted: globalColors.chromatic.sapphire[700], + disabled: globalColors.chromatic.sapphire.a200, + }, + neutral: { + normal: globalColors.neutral.blueGrayDark[50], + subtle: globalColors.neutral.blueGrayDark[300], + muted: globalColors.neutral.blueGrayDark[600], + disabled: globalColors.neutral.blueGrayDark.a200, + }, + gray: { + normal: globalColors.neutral.blueGrayDark[50], + subtle: globalColors.neutral.blueGrayDark[300], + muted: globalColors.neutral.blueGrayDark[600], + disabled: globalColors.neutral.blueGrayDark.a200, + }, + primary: { + normal: globalColors.chromatic.azure[300], + subtle: globalColors.chromatic.azure[400], + muted: globalColors.chromatic.azure[600], + disabled: globalColors.chromatic.azure.a200, + }, + onPrimary: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[400], + muted: globalColors.neutral.white[300], + disabled: globalColors.neutral.white[100], + }, + staticWhite: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[400], + muted: globalColors.neutral.white[300], + disabled: globalColors.neutral.white[100], + }, + staticBlack: { + normal: globalColors.neutral.black[500], + subtle: globalColors.neutral.black[400], + muted: globalColors.neutral.black[300], + disabled: globalColors.neutral.black[100], }, }, icon: { - primary: { - default: globalColors.neutral.blueGrayDark[0], - hover: globalColors.neutral.blueGrayDark[0], - focus: globalColors.neutral.blueGrayDark[0], - active: globalColors.neutral.blueGrayDark[0], - disabled: globalColors.neutral.blueGrayDark[300], + positive: { + normal: globalColors.chromatic.emerald[400], + subtle: globalColors.chromatic.emerald[500], + muted: globalColors.chromatic.emerald[700], + disabled: globalColors.chromatic.emerald.a200, }, - secondary: { - default: globalColors.chromatic.azure[400], - hover: globalColors.chromatic.azure[400], - focus: globalColors.chromatic.azure[400], - active: globalColors.chromatic.azure[400], - disabled: globalColors.neutral.blueGrayDark[500], - }, - tertiary: { - default: globalColors.neutral.blueGrayDark[100], - hover: globalColors.neutral.blueGrayDark[100], - focus: globalColors.neutral.blueGrayLight[1000], - active: globalColors.neutral.blueGrayDark[100], - disabled: globalColors.neutral.blueGrayDark[500], - }, - link: { - default: globalColors.chromatic.azure[300], - hover: globalColors.chromatic.azure[400], - focus: globalColors.chromatic.azure[500], - active: globalColors.chromatic.azure[500], - disabled: globalColors.neutral.blueGrayDark[400], - visited: globalColors.chromatic.orchid[300], + negative: { + normal: globalColors.chromatic.crimson[400], + subtle: globalColors.chromatic.crimson[500], + muted: globalColors.chromatic.crimson[700], + disabled: globalColors.chromatic.crimson.a200, }, - }, - }, - static: { white: globalColors.neutral.ashGrayLight[0] }, - white: { - action: { - background: { - primary: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[200], - focus: globalColors.neutral.ashGrayLight[300], - active: globalColors.neutral.ashGrayLight[300], - disabled: globalColors.neutral.ashGrayLight.a400, - }, - secondary: { - default: globalColors.neutral.ashGrayLight.a00, - hover: globalColors.neutral.ashGrayLight.a400, - focus: globalColors.neutral.ashGrayLight.a500, - active: globalColors.neutral.ashGrayLight.a500, - disabled: globalColors.neutral.ashGrayLight.a00, - }, - tertiary: { - default: globalColors.neutral.ashGrayLight.a300, - hover: globalColors.neutral.ashGrayLight.a400, - focus: globalColors.neutral.ashGrayLight.a500, - active: globalColors.neutral.ashGrayLight.a500, - disabled: globalColors.neutral.ashGrayLight.a300, - }, - }, - border: { - primary: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[200], - focus: globalColors.neutral.ashGrayLight[300], - active: globalColors.neutral.ashGrayLight[300], - disabled: globalColors.neutral.ashGrayLight.a400, - }, - secondary: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[0], - focus: globalColors.neutral.ashGrayLight[0], - active: globalColors.neutral.ashGrayLight[0], - disabled: globalColors.neutral.ashGrayLight.a500, - }, - tertiary: { - default: globalColors.neutral.ashGrayLight.a00, - hover: globalColors.neutral.ashGrayLight.a00, - focus: globalColors.neutral.ashGrayLight.a00, - active: globalColors.neutral.ashGrayLight.a00, - disabled: globalColors.neutral.ashGrayLight.a00, - }, - }, - text: { - primary: { - default: globalColors.chromatic.azure[500], - hover: globalColors.chromatic.azure[500], - focus: globalColors.chromatic.azure[500], - active: globalColors.chromatic.azure[500], - disabled: globalColors.neutral.ashGrayLight.a500, - }, - secondary: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[0], - focus: globalColors.neutral.ashGrayLight[0], - active: globalColors.neutral.ashGrayLight[0], - disabled: globalColors.neutral.ashGrayLight.a500, - }, - tertiary: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[0], - focus: globalColors.neutral.ashGrayLight[0], - active: globalColors.neutral.ashGrayLight[0], - disabled: globalColors.neutral.ashGrayLight.a500, - }, - link: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[300], - focus: globalColors.neutral.ashGrayLight[400], - active: globalColors.neutral.ashGrayLight[400], - disabled: globalColors.neutral.ashGrayLight.a500, - visited: globalColors.chromatic.orchid[300], - }, - }, - icon: { - primary: { - default: globalColors.chromatic.azure[500], - hover: globalColors.chromatic.azure[500], - focus: globalColors.chromatic.azure[500], - active: globalColors.chromatic.azure[500], - disabled: globalColors.neutral.ashGrayLight.a500, - }, - secondary: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[0], - focus: globalColors.neutral.ashGrayLight[0], - active: globalColors.neutral.ashGrayLight[0], - disabled: globalColors.neutral.ashGrayLight.a500, - }, - tertiary: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[0], - focus: globalColors.neutral.ashGrayLight[0], - active: globalColors.neutral.ashGrayLight[0], - disabled: globalColors.neutral.ashGrayLight.a500, - }, - link: { - default: globalColors.neutral.ashGrayLight[0], - hover: globalColors.neutral.ashGrayLight[300], - focus: globalColors.neutral.ashGrayLight[400], - active: globalColors.neutral.ashGrayLight[400], - disabled: globalColors.neutral.ashGrayLight.a500, - visited: globalColors.chromatic.orchid[300], - }, + notice: { + normal: globalColors.chromatic.cider[400], + subtle: globalColors.chromatic.cider[500], + muted: globalColors.chromatic.cider[700], + disabled: globalColors.chromatic.cider.a200, }, + information: { + normal: globalColors.chromatic.sapphire[400], + subtle: globalColors.chromatic.sapphire[500], + muted: globalColors.chromatic.sapphire[700], + disabled: globalColors.chromatic.sapphire.a200, + }, + neutral: { + normal: globalColors.neutral.blueGrayDark[50], + subtle: globalColors.neutral.blueGrayDark[300], + muted: globalColors.neutral.blueGrayDark[600], + disabled: globalColors.neutral.blueGrayDark.a200, + }, + gray: { + normal: globalColors.neutral.blueGrayDark[50], + subtle: globalColors.neutral.blueGrayDark[300], + muted: globalColors.neutral.blueGrayDark[600], + disabled: globalColors.neutral.blueGrayDark.a200, + }, + primary: { + normal: globalColors.chromatic.azure[300], + subtle: globalColors.chromatic.azure[400], + muted: globalColors.chromatic.azure[600], + disabled: globalColors.chromatic.azure.a200, + }, + onPrimary: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[400], + muted: globalColors.neutral.white[300], + disabled: globalColors.neutral.white[100], + }, + staticWhite: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[400], + muted: globalColors.neutral.white[300], + disabled: globalColors.neutral.white[100], + }, + staticBlack: { + normal: globalColors.neutral.black[500], + subtle: globalColors.neutral.black[400], + muted: globalColors.neutral.black[300], + disabled: globalColors.neutral.black[100], + }, + }, + hover: { subtle: globalColors.neutral.black[25], intense: globalColors.neutral.white[100] }, + }, + overlay: { + background: { + moderate: globalColors.neutral.blueGrayDark.a200, + subtle: globalColors.neutral.black[400], }, }, - badge: { + popup: { background: { - blue: { - lowContrast: globalColors.chromatic.azure.a100, - highContrast: globalColors.chromatic.azure[600], - }, + subtle: globalColors.neutral.blueGrayDark[1000], + intense: globalColors.neutral.blueGrayDark[1000], }, border: { - blue: { - lowContrast: globalColors.chromatic.azure.a200, - highContrast: globalColors.chromatic.azure[600], - }, - }, - text: { - blue: { - lowContrast: globalColors.chromatic.azure[400], - highContrast: globalColors.neutral.blueGrayDark[0], - }, - }, - icon: { - blue: { - lowContrast: globalColors.chromatic.azure[400], - highContrast: globalColors.neutral.blueGrayDark[0], - }, + subtle: globalColors.neutral.blueGrayDark.a100, + intense: globalColors.neutral.blueGrayDark.a100, }, }, + elevation: { + lowRaised: `hsla(211, 53%, 10%, ${opacity[1]})`, + midRaised: `hsla(211, 53%, 10%, ${opacity[2]})`, + highRaised: `hsla(211, 53%, 10%, ${opacity[3]})`, + }, + transparent: `hsla(0, 0%, 100%, ${opacity[0]})`, }, };