diff --git a/package.json b/package.json index d91820b11f..744f474932 100644 --- a/package.json +++ b/package.json @@ -228,6 +228,7 @@ "@emotion-icons/material": "3.9.0", "@emotion-icons/material-outlined": "3.8.0", "@floating-ui/react-dom-interactions": "^0.6.0", + "@newskit-themes/newskit-website": "1.0.2", "@seznam/compose-react-refs": "^1.0.5", "@storybook/react": "^6.5.16", "aria-hidden": "^1.1.3", diff --git a/site/components/__tests__/__snapshots__/enum-table.test.tsx.snap b/site/components/__tests__/__snapshots__/enum-table.test.tsx.snap index 008d980b0d..7a724f49e4 100644 --- a/site/components/__tests__/__snapshots__/enum-table.test.tsx.snap +++ b/site/components/__tests__/__snapshots__/enum-table.test.tsx.snap @@ -9,21 +9,21 @@ exports[`EnumTable renders enum as expected 1`] = ` } .emotion-1 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 14px; line-height: 1.5; font-weight: 400; - letter-spacing: 0; - background-color: #F0F1F3; - box-shadow: 0 3px 4px 2px #F0F1F3; + letter-spacing: 0em; + background-color: #ffffff; + box-shadow: 0 3px 4px 2px #ffffff; } .emotion-1, .emotion-1 td, .emotion-1 th { - color: #09111C; + color: #09111c; border-spacing: 0; - border: solid 1px #DEE2E5; + border: solid 1px #dee2e5; } .emotion-1 td, diff --git a/site/components/__tests__/__snapshots__/site-header.test.tsx.snap b/site/components/__tests__/__snapshots__/site-header.test.tsx.snap index 7c5ba6ef48..36c42503d0 100644 --- a/site/components/__tests__/__snapshots__/site-header.test.tsx.snap +++ b/site/components/__tests__/__snapshots__/site-header.test.tsx.snap @@ -10,15 +10,15 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi z-index: 4; height: 48px; border-bottom-width: 1px; - border-bottom-color: #DEE2E5; - background-color: #FFFFFF; - font-family: "Poppins",sans-serif; + border-bottom-color: #dee2e5; + background-color: #ffffff; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 1.5; font-weight: 500; - letter-spacing: 0; - padding-top: 0; - padding-bottom: 0; + letter-spacing: 0em; + padding-top: 0px; + padding-bottom: 0px; } @media screen and (min-width: 1024px) { @@ -119,7 +119,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi appearance: none; background-color: transparent; border-radius: 50%; - color: #3358CC; + color: #3358cc; cursor: pointer; } @@ -129,28 +129,28 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-4 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-4:hover:not(:disabled) { - background-color: #ECF1FF; + background-color: #ecf1ff; } .emotion-4:active:not(:disabled) { - background-color: #D5E0FC; + background-color: #d5e0fc; } .emotion-4:disabled { background-color: transparent; - color: #C0C7CC; + color: #a1acb4; } .emotion-4:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-4:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -184,8 +184,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi display: inline-block; vertical-align: middle; overflow: hidden; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; vertical-align: unset; display: inline-block; } @@ -209,8 +209,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi .emotion-5.emotion-5 { width: 24px; height: 24px; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -231,7 +231,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi .emotion-7 { display: inline-block; - color: #2E3F54; + color: #2e3f54; } @media screen and (prefers-reduced-motion: no-preference) { @@ -251,7 +251,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-7 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-8 { @@ -301,8 +301,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-11 { - fill: #09111C; - color: #09111C; + fill: #09111c; + color: #09111c; } .emotion-12 { @@ -391,30 +391,30 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi .emotion-16 { margin: 0; - color: #09111C; - font-family: "Poppins",sans-serif; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 16px; line-height: 18px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; margin-block-start: 4px; margin-block-end: 24px; } .emotion-16 svg { - fill: #09111C; + fill: #09111c; } .emotion-16::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-16::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -452,7 +452,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi .emotion-19 { display: inline-block; - color: #3358CC; + color: #3358cc; -webkit-text-decoration: none; text-decoration: none; } @@ -474,31 +474,31 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-19 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-19:hover:not(:disabled) { - color: #254CAC; + color: #254cac; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-19:hover:not(:disabled) svg { - fill: #254CAC; + fill: #254cac; } .emotion-19:active:not(:disabled) { - color: #12387A; + color: #14328d; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-19:active:not(:disabled) svg { - fill: #12387A; + fill: #14328d; } .emotion-19:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -544,11 +544,11 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi .emotion-22 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; - font-weight: 400; - letter-spacing: 0; + font-weight: 500; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; display: block; @@ -556,13 +556,13 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi .emotion-22::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-22::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -570,7 +570,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -631,8 +631,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-125 { - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; vertical-align: unset; display: inline-block; } @@ -656,8 +656,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi .emotion-125.emotion-125 { width: 24px; height: 24px; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -744,10 +744,10 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi appearance: none; background-color: transparent; border-style: solid; - border-color: #2E3F54; + border-color: #2e3f54; border-width: 1px; border-radius: 24px; - color: #2E3F54; + color: #2e3f54; cursor: pointer; } @@ -757,30 +757,30 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-127 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-127:hover:not(:disabled) { - background-color: #F0F1F3; - border-color: #15263E; + background-color: #f0f1f3; + border-color: #15263e; } .emotion-127:active:not(:disabled) { - background-color: #DEE2E5; - border-color: #09111C; + background-color: #dee2e5; + border-color: #09111c; } .emotion-127:disabled { - border-color: #DEE2E5; - color: #C0C7CC; + border-color: #dee2e5; + color: #a1acb4; } .emotion-127:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-127:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -811,7 +811,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-128 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -834,24 +834,24 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi .emotion-129 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 12px; line-height: 18px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-129::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-129::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -888,9 +888,9 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F0F1F3; + background-color: #f0f1f3; border-radius: 8px; - color: #5A6A79; + color: #5a6a79; } .emotion-130 svg { @@ -899,19 +899,20 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-130 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-130:hover:not(:disabled) { - background-color: #F0F1F3; + background-color: #f0f1f3; } .emotion-131 { margin: 0; - font-family: 'DM Mono',courier; - font-size: 14px; + font-family: DM Mono,courier,monospace; font-weight: 400; line-height: 21px; + font-size: 14px; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } @@ -1029,7 +1030,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi -moz-appearance: none; -ms-appearance: none; appearance: none; - color: #5A6A79; + color: #5a6a79; -webkit-text-decoration: none; text-decoration: none; border-color: transparent; @@ -1037,10 +1038,10 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi border-style: solid; cursor: pointer; width: 100%; - color: #3358CC; + color: #3358cc; -webkit-text-decoration: none; text-decoration: none; - border-color: transparent transparent #3358CC transparent; + border-color: transparent transparent #3358cc transparent; border-width: 4px; border-style: solid; -webkit-box-pack: center; @@ -1069,13 +1070,13 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-143:hover:not(:disabled) { - color: #5A6A79; + color: #3358cc; -webkit-text-decoration: none; text-decoration: none; } .emotion-143:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -1107,24 +1108,24 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi .emotion-144 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-144::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-144::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -1162,7 +1163,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi -moz-appearance: none; -ms-appearance: none; appearance: none; - color: #5A6A79; + color: #5a6a79; -webkit-text-decoration: none; text-decoration: none; border-color: transparent; @@ -1196,13 +1197,13 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-146:hover:not(:disabled) { - color: #5A6A79; + color: #3358cc; -webkit-text-decoration: none; text-decoration: none; } .emotion-146:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -1278,10 +1279,10 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi appearance: none; background-color: transparent; border-style: solid; - border-color: #2E3F54; + border-color: #2e3f54; border-width: 1px; border-radius: 24px; - color: #2E3F54; + color: #2e3f54; cursor: pointer; } @@ -1291,30 +1292,30 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-279 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-279:hover:not(:disabled) { - background-color: #F0F1F3; - border-color: #15263E; + background-color: #f0f1f3; + border-color: #15263e; } .emotion-279:active:not(:disabled) { - background-color: #DEE2E5; - border-color: #09111C; + background-color: #dee2e5; + border-color: #09111c; } .emotion-279:disabled { - border-color: #DEE2E5; - color: #C0C7CC; + border-color: #dee2e5; + color: #a1acb4; } .emotion-279:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-279:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -1385,7 +1386,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F0F1F3; + background-color: #f0f1f3; border-radius: 50%; cursor: pointer; } @@ -1396,15 +1397,15 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-283:hover:not(:disabled) { - background-color: #DEE2E5; + background-color: #dee2e5; } .emotion-283:active:not(:disabled) { - background-color: #DEE2E5; + background-color: #dee2e5; } .emotion-283:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -1435,7 +1436,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-284 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -3066,15 +3067,15 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s z-index: 4; height: 48px; border-bottom-width: 1px; - border-bottom-color: #DEE2E5; - background-color: #FFFFFF; - font-family: "Poppins",sans-serif; + border-bottom-color: #dee2e5; + background-color: #ffffff; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 1.5; font-weight: 500; - letter-spacing: 0; - padding-top: 0; - padding-bottom: 0; + letter-spacing: 0em; + padding-top: 0px; + padding-bottom: 0px; } @media screen and (min-width: 1024px) { @@ -3175,7 +3176,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s appearance: none; background-color: transparent; border-radius: 50%; - color: #3358CC; + color: #3358cc; cursor: pointer; } @@ -3185,28 +3186,28 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-4 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-4:hover:not(:disabled) { - background-color: #ECF1FF; + background-color: #ecf1ff; } .emotion-4:active:not(:disabled) { - background-color: #D5E0FC; + background-color: #d5e0fc; } .emotion-4:disabled { background-color: transparent; - color: #C0C7CC; + color: #a1acb4; } .emotion-4:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-4:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -3240,8 +3241,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s display: inline-block; vertical-align: middle; overflow: hidden; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; vertical-align: unset; display: inline-block; } @@ -3265,8 +3266,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s .emotion-5.emotion-5 { width: 24px; height: 24px; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -3287,7 +3288,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s .emotion-7 { display: inline-block; - color: #2E3F54; + color: #2e3f54; } @media screen and (prefers-reduced-motion: no-preference) { @@ -3307,7 +3308,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-7 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-8 { @@ -3357,8 +3358,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-11 { - fill: #09111C; - color: #09111C; + fill: #09111c; + color: #09111c; } .emotion-12 { @@ -3447,30 +3448,30 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s .emotion-16 { margin: 0; - color: #09111C; - font-family: "Poppins",sans-serif; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 16px; line-height: 18px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; margin-block-start: 4px; margin-block-end: 24px; } .emotion-16 svg { - fill: #09111C; + fill: #09111c; } .emotion-16::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-16::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -3508,7 +3509,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s .emotion-19 { display: inline-block; - color: #3358CC; + color: #3358cc; -webkit-text-decoration: none; text-decoration: none; } @@ -3530,31 +3531,31 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-19 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-19:hover:not(:disabled) { - color: #254CAC; + color: #254cac; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-19:hover:not(:disabled) svg { - fill: #254CAC; + fill: #254cac; } .emotion-19:active:not(:disabled) { - color: #12387A; + color: #14328d; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-19:active:not(:disabled) svg { - fill: #12387A; + fill: #14328d; } .emotion-19:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -3600,11 +3601,11 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s .emotion-22 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; - font-weight: 400; - letter-spacing: 0; + font-weight: 500; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; display: block; @@ -3612,13 +3613,13 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s .emotion-22::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-22::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -3626,7 +3627,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -3687,8 +3688,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-125 { - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; vertical-align: unset; display: inline-block; } @@ -3712,8 +3713,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s .emotion-125.emotion-125 { width: 24px; height: 24px; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -3800,10 +3801,10 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s appearance: none; background-color: transparent; border-style: solid; - border-color: #2E3F54; + border-color: #2e3f54; border-width: 1px; border-radius: 24px; - color: #2E3F54; + color: #2e3f54; cursor: pointer; } @@ -3813,30 +3814,30 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-127 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-127:hover:not(:disabled) { - background-color: #F0F1F3; - border-color: #15263E; + background-color: #f0f1f3; + border-color: #15263e; } .emotion-127:active:not(:disabled) { - background-color: #DEE2E5; - border-color: #09111C; + background-color: #dee2e5; + border-color: #09111c; } .emotion-127:disabled { - border-color: #DEE2E5; - color: #C0C7CC; + border-color: #dee2e5; + color: #a1acb4; } .emotion-127:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-127:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -3867,7 +3868,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-128 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -3890,24 +3891,24 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s .emotion-129 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 12px; line-height: 18px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-129::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-129::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -3944,9 +3945,9 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F0F1F3; + background-color: #f0f1f3; border-radius: 8px; - color: #5A6A79; + color: #5a6a79; } .emotion-130 svg { @@ -3955,19 +3956,20 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-130 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-130:hover:not(:disabled) { - background-color: #F0F1F3; + background-color: #f0f1f3; } .emotion-131 { margin: 0; - font-family: 'DM Mono',courier; - font-size: 14px; + font-family: DM Mono,courier,monospace; font-weight: 400; line-height: 21px; + font-size: 14px; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } @@ -4085,7 +4087,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s -moz-appearance: none; -ms-appearance: none; appearance: none; - color: #5A6A79; + color: #5a6a79; -webkit-text-decoration: none; text-decoration: none; border-color: transparent; @@ -4093,10 +4095,10 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s border-style: solid; cursor: pointer; width: 100%; - color: #3358CC; + color: #3358cc; -webkit-text-decoration: none; text-decoration: none; - border-color: transparent transparent #3358CC transparent; + border-color: transparent transparent #3358cc transparent; border-width: 4px; border-style: solid; -webkit-box-pack: center; @@ -4125,13 +4127,13 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-143:hover:not(:disabled) { - color: #5A6A79; + color: #3358cc; -webkit-text-decoration: none; text-decoration: none; } .emotion-143:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -4163,24 +4165,24 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s .emotion-144 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-144::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-144::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -4218,7 +4220,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s -moz-appearance: none; -ms-appearance: none; appearance: none; - color: #5A6A79; + color: #5a6a79; -webkit-text-decoration: none; text-decoration: none; border-color: transparent; @@ -4252,13 +4254,13 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-146:hover:not(:disabled) { - color: #5A6A79; + color: #3358cc; -webkit-text-decoration: none; text-decoration: none; } .emotion-146:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -4334,10 +4336,10 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s appearance: none; background-color: transparent; border-style: solid; - border-color: #2E3F54; + border-color: #2e3f54; border-width: 1px; border-radius: 24px; - color: #2E3F54; + color: #2e3f54; cursor: pointer; } @@ -4347,30 +4349,30 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-279 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-279:hover:not(:disabled) { - background-color: #F0F1F3; - border-color: #15263E; + background-color: #f0f1f3; + border-color: #15263e; } .emotion-279:active:not(:disabled) { - background-color: #DEE2E5; - border-color: #09111C; + background-color: #dee2e5; + border-color: #09111c; } .emotion-279:disabled { - border-color: #DEE2E5; - color: #C0C7CC; + border-color: #dee2e5; + color: #a1acb4; } .emotion-279:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-279:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -4441,7 +4443,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F0F1F3; + background-color: #f0f1f3; border-radius: 50%; cursor: pointer; } @@ -4452,15 +4454,15 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-283:hover:not(:disabled) { - background-color: #DEE2E5; + background-color: #dee2e5; } .emotion-283:active:not(:disabled) { - background-color: #DEE2E5; + background-color: #dee2e5; } .emotion-283:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -4491,7 +4493,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-284 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -6122,15 +6124,15 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` z-index: 4; height: 48px; border-bottom-width: 1px; - border-bottom-color: #DEE2E5; - background-color: #FFFFFF; - font-family: "Poppins",sans-serif; + border-bottom-color: #dee2e5; + background-color: #ffffff; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 1.5; font-weight: 500; - letter-spacing: 0; - padding-top: 0; - padding-bottom: 0; + letter-spacing: 0em; + padding-top: 0px; + padding-bottom: 0px; } @media screen and (min-width: 1024px) { @@ -6231,7 +6233,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` appearance: none; background-color: transparent; border-radius: 50%; - color: #3358CC; + color: #3358cc; cursor: pointer; } @@ -6241,28 +6243,28 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-4 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-4:hover:not(:disabled) { - background-color: #ECF1FF; + background-color: #ecf1ff; } .emotion-4:active:not(:disabled) { - background-color: #D5E0FC; + background-color: #d5e0fc; } .emotion-4:disabled { background-color: transparent; - color: #C0C7CC; + color: #a1acb4; } .emotion-4:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-4:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -6296,8 +6298,8 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; vertical-align: unset; display: inline-block; } @@ -6321,8 +6323,8 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` .emotion-5.emotion-5 { width: 24px; height: 24px; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -6343,7 +6345,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` .emotion-7 { display: inline-block; - color: #2E3F54; + color: #2e3f54; } @media screen and (prefers-reduced-motion: no-preference) { @@ -6363,7 +6365,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-7 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-8 { @@ -6413,8 +6415,8 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-11 { - fill: #09111C; - color: #09111C; + fill: #09111c; + color: #09111c; } .emotion-12 { @@ -6503,30 +6505,30 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` .emotion-16 { margin: 0; - color: #09111C; - font-family: "Poppins",sans-serif; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 16px; line-height: 18px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; margin-block-start: 4px; margin-block-end: 24px; } .emotion-16 svg { - fill: #09111C; + fill: #09111c; } .emotion-16::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-16::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -6564,7 +6566,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` .emotion-19 { display: inline-block; - color: #3358CC; + color: #3358cc; -webkit-text-decoration: none; text-decoration: none; } @@ -6586,31 +6588,31 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-19 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-19:hover:not(:disabled) { - color: #254CAC; + color: #254cac; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-19:hover:not(:disabled) svg { - fill: #254CAC; + fill: #254cac; } .emotion-19:active:not(:disabled) { - color: #12387A; + color: #14328d; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-19:active:not(:disabled) svg { - fill: #12387A; + fill: #14328d; } .emotion-19:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -6656,11 +6658,11 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` .emotion-22 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; - font-weight: 400; - letter-spacing: 0; + font-weight: 500; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; display: block; @@ -6668,13 +6670,13 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` .emotion-22::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-22::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -6682,7 +6684,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -6743,8 +6745,8 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-125 { - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; vertical-align: unset; display: inline-block; } @@ -6768,8 +6770,8 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` .emotion-125.emotion-125 { width: 24px; height: 24px; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -6856,10 +6858,10 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` appearance: none; background-color: transparent; border-style: solid; - border-color: #2E3F54; + border-color: #2e3f54; border-width: 1px; border-radius: 24px; - color: #2E3F54; + color: #2e3f54; cursor: pointer; } @@ -6869,30 +6871,30 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-127 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-127:hover:not(:disabled) { - background-color: #F0F1F3; - border-color: #15263E; + background-color: #f0f1f3; + border-color: #15263e; } .emotion-127:active:not(:disabled) { - background-color: #DEE2E5; - border-color: #09111C; + background-color: #dee2e5; + border-color: #09111c; } .emotion-127:disabled { - border-color: #DEE2E5; - color: #C0C7CC; + border-color: #dee2e5; + color: #a1acb4; } .emotion-127:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-127:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -6923,7 +6925,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-128 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -6946,24 +6948,24 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` .emotion-129 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 12px; line-height: 18px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-129::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-129::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -7000,9 +7002,9 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F0F1F3; + background-color: #f0f1f3; border-radius: 8px; - color: #5A6A79; + color: #5a6a79; } .emotion-130 svg { @@ -7011,19 +7013,20 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-130 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-130:hover:not(:disabled) { - background-color: #F0F1F3; + background-color: #f0f1f3; } .emotion-131 { margin: 0; - font-family: 'DM Mono',courier; - font-size: 14px; + font-family: DM Mono,courier,monospace; font-weight: 400; line-height: 21px; + font-size: 14px; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } @@ -7141,7 +7144,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` -moz-appearance: none; -ms-appearance: none; appearance: none; - color: #5A6A79; + color: #5a6a79; -webkit-text-decoration: none; text-decoration: none; border-color: transparent; @@ -7175,13 +7178,13 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-143:hover:not(:disabled) { - color: #5A6A79; + color: #3358cc; -webkit-text-decoration: none; text-decoration: none; } .emotion-143:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -7213,24 +7216,24 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` .emotion-144 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-144::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-144::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -7280,10 +7283,10 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` appearance: none; background-color: transparent; border-style: solid; - border-color: #2E3F54; + border-color: #2e3f54; border-width: 1px; border-radius: 24px; - color: #2E3F54; + color: #2e3f54; cursor: pointer; } @@ -7293,30 +7296,30 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-279 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-279:hover:not(:disabled) { - background-color: #F0F1F3; - border-color: #15263E; + background-color: #f0f1f3; + border-color: #15263e; } .emotion-279:active:not(:disabled) { - background-color: #DEE2E5; - border-color: #09111C; + background-color: #dee2e5; + border-color: #09111c; } .emotion-279:disabled { - border-color: #DEE2E5; - color: #C0C7CC; + border-color: #dee2e5; + color: #a1acb4; } .emotion-279:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-279:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -7387,7 +7390,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F0F1F3; + background-color: #f0f1f3; border-radius: 50%; cursor: pointer; } @@ -7398,15 +7401,15 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-283:hover:not(:disabled) { - background-color: #DEE2E5; + background-color: #dee2e5; } .emotion-283:active:not(:disabled) { - background-color: #DEE2E5; + background-color: #dee2e5; } .emotion-283:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -7437,7 +7440,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-284 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } diff --git a/site/components/base-card/__tests__/__snapshots__/base-card.test.tsx.snap b/site/components/base-card/__tests__/__snapshots__/base-card.test.tsx.snap index 852e3c33bd..3566356900 100644 --- a/site/components/base-card/__tests__/__snapshots__/base-card.test.tsx.snap +++ b/site/components/base-card/__tests__/__snapshots__/base-card.test.tsx.snap @@ -39,23 +39,23 @@ exports[`BaseCard Renders default (vertical) non-interactive card 1`] = ` } .emotion-4 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-4::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-4::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -63,26 +63,26 @@ exports[`BaseCard Renders default (vertical) non-interactive card 1`] = ` display: inline; font: inherit; margin: 0; - color: #09111C; + color: #09111c; } .emotion-5 svg { - fill: #09111C; + fill: #09111c; } .emotion-6 { margin: 0; - color: #2E3F54; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-6 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-6::before { @@ -138,7 +138,7 @@ exports[`BaseCard Renders horizontal interactive card 1`] = ` border-style: solid; border-radius: 12px; border-width: 1px; - border-color: #DEE2E5; + border-color: #dee2e5; position: relative; display: -webkit-box; display: -webkit-flex; @@ -153,7 +153,7 @@ exports[`BaseCard Renders horizontal interactive card 1`] = ` } .emotion-0:hover:not(:disabled) { - box-shadow: 0 8px 16px 0 rgba(10,10,10,0.08); + box-shadow: 0px 8px 16px 0px #00000014; } .emotion-1 { @@ -196,35 +196,35 @@ exports[`BaseCard Renders horizontal interactive card 1`] = ` } .emotion-4 .nk-headline-kicker { - color: #3358CC; + color: #3358cc; } .emotion-4:hover:not(:disabled) .nk-headline-kicker { - color: #254CAC; + color: #254cac; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-4:active:not(:disabled) .nk-headline-kicker { - color: #12387A; + color: #14328d; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-4:visited:not(:disabled) .nk-headline-kicker { - color: #6454E3; + color: #6454e3; } .emotion-4 .nk-headline-heading { - color: #09111C; + color: #09111c; } .emotion-4 .nk-headline-heading svg { - fill: #09111C; + fill: #09111c; } .emotion-4:focus-visible:not(:disabled) .nk-card-headline { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -250,23 +250,23 @@ exports[`BaseCard Renders horizontal interactive card 1`] = ` } .emotion-5 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-5::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-5::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -274,26 +274,26 @@ exports[`BaseCard Renders horizontal interactive card 1`] = ` display: inline; font: inherit; margin: 0; - color: #09111C; + color: #09111c; } .emotion-6 svg { - fill: #09111C; + fill: #09111c; } .emotion-7 { margin: 0; - color: #2E3F54; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-7 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-7::before { @@ -398,23 +398,23 @@ exports[`BaseCard Renders horizontal non-interactive card 1`] = ` } .emotion-4 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-4::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-4::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -422,26 +422,26 @@ exports[`BaseCard Renders horizontal non-interactive card 1`] = ` display: inline; font: inherit; margin: 0; - color: #09111C; + color: #09111c; } .emotion-5 svg { - fill: #09111C; + fill: #09111c; } .emotion-6 { margin: 0; - color: #2E3F54; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-6 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-6::before { @@ -497,7 +497,7 @@ exports[`BaseCard Renders vertical interactive card 1`] = ` border-style: solid; border-radius: 12px; border-width: 1px; - border-color: #DEE2E5; + border-color: #dee2e5; position: relative; display: -webkit-box; display: -webkit-flex; @@ -512,7 +512,7 @@ exports[`BaseCard Renders vertical interactive card 1`] = ` } .emotion-0:hover:not(:disabled) { - box-shadow: 0 8px 16px 0 rgba(10,10,10,0.08); + box-shadow: 0px 8px 16px 0px #00000014; } .emotion-1 { @@ -542,35 +542,35 @@ exports[`BaseCard Renders vertical interactive card 1`] = ` } .emotion-4 .nk-headline-kicker { - color: #3358CC; + color: #3358cc; } .emotion-4:hover:not(:disabled) .nk-headline-kicker { - color: #254CAC; + color: #254cac; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-4:active:not(:disabled) .nk-headline-kicker { - color: #12387A; + color: #14328d; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-4:visited:not(:disabled) .nk-headline-kicker { - color: #6454E3; + color: #6454e3; } .emotion-4 .nk-headline-heading { - color: #09111C; + color: #09111c; } .emotion-4 .nk-headline-heading svg { - fill: #09111C; + fill: #09111c; } .emotion-4:focus-visible:not(:disabled) .nk-card-headline { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -596,23 +596,23 @@ exports[`BaseCard Renders vertical interactive card 1`] = ` } .emotion-5 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-5::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-5::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -620,26 +620,26 @@ exports[`BaseCard Renders vertical interactive card 1`] = ` display: inline; font: inherit; margin: 0; - color: #09111C; + color: #09111c; } .emotion-6 svg { - fill: #09111C; + fill: #09111c; } .emotion-7 { margin: 0; - color: #2E3F54; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-7 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-7::before { diff --git a/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap b/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap index d7ea12af82..9cb1f4e4c6 100644 --- a/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap +++ b/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap @@ -54,56 +54,56 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` .emotion-3 { margin: 0; - color: #09111C; + color: #09111c; display: inline-block; } .emotion-3 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 1439px) { .emotion-3 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-3::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-3::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1440px) { .emotion-3 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-3::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-3::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -120,14 +120,14 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` .emotion-6 { border-style: solid; - border-color: #C0C7CC; - border-width: 0 0 1px 0; - color: #09111C; - font-family: "Poppins",sans-serif; + border-color: #c0c7cc; + border-width: 0px 0px 1px 0px; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 12px; line-height: 1.5; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; margin-bottom: 16px; height: 40px; text-align: left; @@ -139,14 +139,14 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` .emotion-7 { border-style: solid; - border-color: #C0C7CC; - border-width: 0 0 1px 0; - color: #09111C; - font-family: "Poppins",sans-serif; + border-color: #c0c7cc; + border-width: 0px 0px 1px 0px; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 12px; line-height: 1.5; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; margin-bottom: 16px; height: 40px; text-align: left; @@ -158,14 +158,14 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` .emotion-10 { border-style: solid; - border-color: #C0C7CC; - border-width: 0 0 1px 0; - color: #09111C; - font-family: "Poppins",sans-serif; + border-color: #c0c7cc; + border-width: 0px 0px 1px 0px; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 12px; line-height: 1.5; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; margin-bottom: 16px; height: 40px; text-align: left; @@ -177,25 +177,25 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` .emotion-11 { border-style: solid; - border-color: #DEE2E5; - border-width: 0 0 1px 0; - color: #2E3F54; - font-family: "DM Sans",sans-serif; + border-color: #dee2e5; + border-width: 0px 0px 1px 0px; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 14px; line-height: 1.5; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; border-width: 0; } .emotion-12 { - padding: 16px 16px 16px 0; + padding: 16px 16px 16px 0px; text-align: left; vertical-align: top; } .emotion-13 { - padding: 16px 16px 16px 0; + padding: 16px 16px 16px 0px; min-width: 100px; text-align: left; vertical-align: top; @@ -234,9 +234,9 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F0F1F3; + background-color: #f0f1f3; border-radius: 4px; - color: #2E3F54; + color: #2e3f54; white-space: nowrap; } @@ -246,15 +246,16 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` } .emotion-14 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-15 { margin: 0; - font-family: 'DM Mono',courier; - font-size: 14px; + font-family: DM Mono,courier,monospace; font-weight: 400; line-height: 21px; + font-size: 14px; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } @@ -272,7 +273,7 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` } .emotion-18 { - padding: 16px 16px 16px 0; + padding: 16px 16px 16px 0px; max-width: 100px; text-align: left; vertical-align: top; @@ -301,8 +302,8 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` width: 24px; height: 24px; min-height: 32px; - padding-inline: 0; - padding-block: 0; + padding-inline: 0px; + padding-block: 0px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; @@ -315,8 +316,8 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` -ms-appearance: none; appearance: none; border-style: solid; - border-color: #007B22; - background-color: #E5F4EA; + border-color: #007b22; + background-color: #e5f4ea; border-radius: 50%; border-width: 1px; } @@ -327,14 +328,14 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` } .emotion-19 svg { - fill: #007B22; + fill: #007b22; } .emotion-20 { display: inline-block; vertical-align: middle; overflow: hidden; - fill: #007B22; + fill: #007b22; vertical-align: unset; display: inline-block; } @@ -356,7 +357,7 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` } .emotion-20.emotion-20 { - fill: #007B22; + fill: #007b22; } @media screen and (prefers-reduced-motion: no-preference) { @@ -556,56 +557,56 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` .emotion-3 { margin: 0; - color: #09111C; + color: #09111c; display: inline-block; } .emotion-3 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 1439px) { .emotion-3 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-3::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-3::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1440px) { .emotion-3 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-3::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-3::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -616,20 +617,20 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` .emotion-5 { margin: 0; - color: #2E3F54; + color: #2e3f54; } .emotion-5 svg { - fill: #2E3F54; + fill: #2e3f54; } @media screen and (max-width: 1439px) { .emotion-5 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -648,11 +649,11 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` @media screen and (min-width: 1440px) { .emotion-5 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -681,14 +682,14 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` .emotion-8 { border-style: solid; - border-color: #C0C7CC; - border-width: 0 0 1px 0; - color: #09111C; - font-family: "Poppins",sans-serif; + border-color: #c0c7cc; + border-width: 0px 0px 1px 0px; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 12px; line-height: 1.5; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; margin-bottom: 16px; height: 40px; text-align: left; @@ -700,14 +701,14 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` .emotion-9 { border-style: solid; - border-color: #C0C7CC; - border-width: 0 0 1px 0; - color: #09111C; - font-family: "Poppins",sans-serif; + border-color: #c0c7cc; + border-width: 0px 0px 1px 0px; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 12px; line-height: 1.5; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; margin-bottom: 16px; height: 40px; text-align: left; @@ -719,14 +720,14 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` .emotion-12 { border-style: solid; - border-color: #C0C7CC; - border-width: 0 0 1px 0; - color: #09111C; - font-family: "Poppins",sans-serif; + border-color: #c0c7cc; + border-width: 0px 0px 1px 0px; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 12px; line-height: 1.5; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; margin-bottom: 16px; height: 40px; text-align: left; @@ -738,25 +739,25 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` .emotion-13 { border-style: solid; - border-color: #DEE2E5; - border-width: 0 0 1px 0; - color: #2E3F54; - font-family: "DM Sans",sans-serif; + border-color: #dee2e5; + border-width: 0px 0px 1px 0px; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 14px; line-height: 1.5; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; border-width: 0; } .emotion-14 { - padding: 16px 16px 16px 0; + padding: 16px 16px 16px 0px; text-align: left; vertical-align: top; } .emotion-15 { - padding: 16px 16px 16px 0; + padding: 16px 16px 16px 0px; min-width: 100px; text-align: left; vertical-align: top; @@ -795,9 +796,9 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F0F1F3; + background-color: #f0f1f3; border-radius: 4px; - color: #2E3F54; + color: #2e3f54; white-space: nowrap; } @@ -807,15 +808,16 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-16 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-17 { margin: 0; - font-family: 'DM Mono',courier; - font-size: 14px; + font-family: DM Mono,courier,monospace; font-weight: 400; line-height: 21px; + font-size: 14px; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } @@ -833,7 +835,7 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-20 { - padding: 16px 16px 16px 0; + padding: 16px 16px 16px 0px; max-width: 100px; text-align: left; vertical-align: top; @@ -862,8 +864,8 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` width: 24px; height: 24px; min-height: 32px; - padding-inline: 0; - padding-block: 0; + padding-inline: 0px; + padding-block: 0px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; @@ -876,8 +878,8 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` -ms-appearance: none; appearance: none; border-style: solid; - border-color: #007B22; - background-color: #E5F4EA; + border-color: #007b22; + background-color: #e5f4ea; border-radius: 50%; border-width: 1px; } @@ -888,14 +890,14 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-21 svg { - fill: #007B22; + fill: #007b22; } .emotion-22 { display: inline-block; vertical-align: middle; overflow: hidden; - fill: #007B22; + fill: #007b22; vertical-align: unset; display: inline-block; } @@ -917,7 +919,7 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-22.emotion-22 { - fill: #007B22; + fill: #007b22; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1068,12 +1070,12 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` appearance: none; border-radius: borderRadiusSharp; background-color: transparent; - color: #5A6A79; + color: #5a6a79; cursor: pointer; border-radius: borderRadiusSharp; background-color: transparent; - color: #09111C; - border-color: #3358CC; + color: #09111c; + border-color: #3358cc; } .emotion-36 svg { @@ -1082,11 +1084,11 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-36:hover:not(:disabled) { - color: #2E3F54; + color: #2e3f54; } .emotion-36:active:not(:disabled) { - color: #2E3F54; + color: #2e3f54; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1107,24 +1109,24 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` .emotion-37 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-37::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-37::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -1170,7 +1172,7 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` appearance: none; border-radius: borderRadiusSharp; background-color: transparent; - color: #5A6A79; + color: #5a6a79; cursor: pointer; } @@ -1180,11 +1182,11 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-40:hover:not(:disabled) { - color: #2E3F54; + color: #2e3f54; } .emotion-40:active:not(:disabled) { - color: #2E3F54; + color: #2e3f54; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1204,7 +1206,7 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-42 { - background-color: #3358CC; + background-color: #3358cc; position: absolute; z-index: 2; bottom: 0px; @@ -1212,7 +1214,7 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-43 { - background-color: #DEE2E5; + background-color: #dee2e5; display: block; position: absolute; z-index: 1; @@ -1228,7 +1230,7 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-44:focus:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: -3px; diff --git a/site/components/content-structure/__tests__/__snapshots__/content-structure.test.tsx.snap b/site/components/content-structure/__tests__/__snapshots__/content-structure.test.tsx.snap index 614234cf7d..9625a9312a 100644 --- a/site/components/content-structure/__tests__/__snapshots__/content-structure.test.tsx.snap +++ b/site/components/content-structure/__tests__/__snapshots__/content-structure.test.tsx.snap @@ -117,20 +117,20 @@ exports[`Content Primary renders with description and children 1`] = ` .emotion-2 { margin: 0; - color: #2E3F54; + color: #2e3f54; } .emotion-2 svg { - fill: #2E3F54; + fill: #2e3f54; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -149,11 +149,11 @@ exports[`Content Primary renders with description and children 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -172,11 +172,11 @@ exports[`Content Primary renders with description and children 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -195,11 +195,11 @@ exports[`Content Primary renders with description and children 1`] = ` @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -309,20 +309,20 @@ exports[`Content Primary renders with description only 1`] = ` .emotion-2 { margin: 0; - color: #2E3F54; + color: #2e3f54; } .emotion-2 svg { - fill: #2E3F54; + fill: #2e3f54; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -341,11 +341,11 @@ exports[`Content Primary renders with description only 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -364,11 +364,11 @@ exports[`Content Primary renders with description only 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -387,11 +387,11 @@ exports[`Content Primary renders with description only 1`] = ` @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -506,101 +506,101 @@ exports[`Content Primary renders with headline and children 1`] = ` .emotion-2 { margin: 0; - color: #09111C; + color: #09111c; } .emotion-2 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -724,101 +724,101 @@ exports[`Content Primary renders with headline and description 1`] = ` .emotion-2 { margin: 0; - color: #09111C; + color: #09111c; } .emotion-2 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -837,20 +837,20 @@ exports[`Content Primary renders with headline and description 1`] = ` .emotion-4 { margin: 0; - color: #2E3F54; + color: #2e3f54; } .emotion-4 svg { - fill: #2E3F54; + fill: #2e3f54; } @media screen and (max-width: 767px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -869,11 +869,11 @@ exports[`Content Primary renders with headline and description 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -892,11 +892,11 @@ exports[`Content Primary renders with headline and description 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -915,11 +915,11 @@ exports[`Content Primary renders with headline and description 1`] = ` @media screen and (min-width: 1440px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -1021,101 +1021,101 @@ exports[`Content Primary renders with headline only 1`] = ` .emotion-2 { margin: 0; - color: #09111C; + color: #09111c; } .emotion-2 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -1220,101 +1220,101 @@ exports[`Content Primary renders with headline, description and content 1`] = ` .emotion-2 { margin: 0; - color: #09111C; + color: #09111c; } .emotion-2 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -1357,20 +1357,20 @@ exports[`Content Primary renders with headline, description and content 1`] = ` .emotion-4 { margin: 0; - color: #2E3F54; + color: #2e3f54; } .emotion-4 svg { - fill: #2E3F54; + fill: #2e3f54; } @media screen and (max-width: 767px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -1389,11 +1389,11 @@ exports[`Content Primary renders with headline, description and content 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -1412,11 +1412,11 @@ exports[`Content Primary renders with headline, description and content 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -1435,11 +1435,11 @@ exports[`Content Primary renders with headline, description and content 1`] = ` @media screen and (min-width: 1440px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -1654,20 +1654,20 @@ exports[`Content Secondary renders with description and children 1`] = ` .emotion-2 { margin: 0; - color: #2E3F54; + color: #2e3f54; } .emotion-2 svg { - fill: #2E3F54; + fill: #2e3f54; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -1686,11 +1686,11 @@ exports[`Content Secondary renders with description and children 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -1709,11 +1709,11 @@ exports[`Content Secondary renders with description and children 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -1732,11 +1732,11 @@ exports[`Content Secondary renders with description and children 1`] = ` @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -1846,20 +1846,20 @@ exports[`Content Secondary renders with description only 1`] = ` .emotion-2 { margin: 0; - color: #2E3F54; + color: #2e3f54; } .emotion-2 svg { - fill: #2E3F54; + fill: #2e3f54; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -1878,11 +1878,11 @@ exports[`Content Secondary renders with description only 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -1901,11 +1901,11 @@ exports[`Content Secondary renders with description only 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -1924,11 +1924,11 @@ exports[`Content Secondary renders with description only 1`] = ` @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -2043,101 +2043,101 @@ exports[`Content Secondary renders with headline and children 1`] = ` .emotion-2 { margin: 0; - color: #09111C; + color: #09111c; } .emotion-2 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -2259,101 +2259,101 @@ exports[`Content Secondary renders with headline and description 1`] = ` .emotion-2 { margin: 0; - color: #09111C; + color: #09111c; } .emotion-2 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -2372,20 +2372,20 @@ exports[`Content Secondary renders with headline and description 1`] = ` .emotion-4 { margin: 0; - color: #2E3F54; + color: #2e3f54; } .emotion-4 svg { - fill: #2E3F54; + fill: #2e3f54; } @media screen and (max-width: 767px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -2404,11 +2404,11 @@ exports[`Content Secondary renders with headline and description 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -2427,11 +2427,11 @@ exports[`Content Secondary renders with headline and description 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -2450,11 +2450,11 @@ exports[`Content Secondary renders with headline and description 1`] = ` @media screen and (min-width: 1440px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -2554,101 +2554,101 @@ exports[`Content Secondary renders with headline only 1`] = ` .emotion-2 { margin: 0; - color: #09111C; + color: #09111c; } .emotion-2 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -2751,101 +2751,101 @@ exports[`Content Secondary renders with headline, description and content 1`] = .emotion-2 { margin: 0; - color: #09111C; + color: #09111c; } .emotion-2 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -2888,20 +2888,20 @@ exports[`Content Secondary renders with headline, description and content 1`] = .emotion-4 { margin: 0; - color: #2E3F54; + color: #2e3f54; } .emotion-4 svg { - fill: #2E3F54; + fill: #2e3f54; } @media screen and (max-width: 767px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -2920,11 +2920,11 @@ exports[`Content Secondary renders with headline, description and content 1`] = @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -2943,11 +2943,11 @@ exports[`Content Secondary renders with headline, description and content 1`] = @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -2966,11 +2966,11 @@ exports[`Content Secondary renders with headline, description and content 1`] = @media screen and (min-width: 1440px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -3203,20 +3203,20 @@ exports[`Content Tertiary renders with description and children 1`] = ` .emotion-2 { margin: 0; - color: #2E3F54; + color: #2e3f54; } .emotion-2 svg { - fill: #2E3F54; + fill: #2e3f54; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -3235,11 +3235,11 @@ exports[`Content Tertiary renders with description and children 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -3258,11 +3258,11 @@ exports[`Content Tertiary renders with description and children 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -3281,11 +3281,11 @@ exports[`Content Tertiary renders with description and children 1`] = ` @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -3395,20 +3395,20 @@ exports[`Content Tertiary renders with description only 1`] = ` .emotion-2 { margin: 0; - color: #2E3F54; + color: #2e3f54; } .emotion-2 svg { - fill: #2E3F54; + fill: #2e3f54; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -3427,11 +3427,11 @@ exports[`Content Tertiary renders with description only 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -3450,11 +3450,11 @@ exports[`Content Tertiary renders with description only 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -3473,11 +3473,11 @@ exports[`Content Tertiary renders with description only 1`] = ` @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -3592,101 +3592,101 @@ exports[`Content Tertiary renders with headline and children 1`] = ` .emotion-2 { margin: 0; - color: #09111C; + color: #09111c; } .emotion-2 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -3808,101 +3808,101 @@ exports[`Content Tertiary renders with headline and description 1`] = ` .emotion-2 { margin: 0; - color: #09111C; + color: #09111c; } .emotion-2 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -3921,20 +3921,20 @@ exports[`Content Tertiary renders with headline and description 1`] = ` .emotion-4 { margin: 0; - color: #2E3F54; + color: #2e3f54; } .emotion-4 svg { - fill: #2E3F54; + fill: #2e3f54; } @media screen and (max-width: 767px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -3953,11 +3953,11 @@ exports[`Content Tertiary renders with headline and description 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -3976,11 +3976,11 @@ exports[`Content Tertiary renders with headline and description 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -3999,11 +3999,11 @@ exports[`Content Tertiary renders with headline and description 1`] = ` @media screen and (min-width: 1440px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -4103,101 +4103,101 @@ exports[`Content Tertiary renders with headline only 1`] = ` .emotion-2 { margin: 0; - color: #09111C; + color: #09111c; } .emotion-2 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -4300,101 +4300,101 @@ exports[`Content Tertiary renders with headline, description and content 1`] = ` .emotion-2 { margin: 0; - color: #09111C; + color: #09111c; } .emotion-2 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 767px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1440px) { .emotion-2 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-2::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -4437,20 +4437,20 @@ exports[`Content Tertiary renders with headline, description and content 1`] = ` .emotion-4 { margin: 0; - color: #2E3F54; + color: #2e3f54; } .emotion-4 svg { - fill: #2E3F54; + fill: #2e3f54; } @media screen and (max-width: 767px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -4469,11 +4469,11 @@ exports[`Content Tertiary renders with headline, description and content 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -4492,11 +4492,11 @@ exports[`Content Tertiary renders with headline, description and content 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -4515,11 +4515,11 @@ exports[`Content Tertiary renders with headline, description and content 1`] = ` @media screen and (min-width: 1440px) { .emotion-4 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } diff --git a/site/components/flags/mono-keyboard/__tests__/__snapshots__/mono-keyboard.test.tsx.snap b/site/components/flags/mono-keyboard/__tests__/__snapshots__/mono-keyboard.test.tsx.snap index 76017b70b5..c0bdb605d2 100644 --- a/site/components/flags/mono-keyboard/__tests__/__snapshots__/mono-keyboard.test.tsx.snap +++ b/site/components/flags/mono-keyboard/__tests__/__snapshots__/mono-keyboard.test.tsx.snap @@ -36,7 +36,7 @@ exports[`MonoKeyboard with multiple keys should render as expected 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -66,8 +66,8 @@ exports[`MonoKeyboard with multiple keys should render as expected 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; vertical-align: unset; display: inline-block; } @@ -91,8 +91,8 @@ exports[`MonoKeyboard with multiple keys should render as expected 1`] = ` .emotion-6.emotion-6 { width: 16px; height: 16px; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; } @media screen and (prefers-reduced-motion: no-preference) { @@ -256,8 +256,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro display: inline-block; vertical-align: middle; overflow: hidden; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; vertical-align: unset; display: inline-block; } @@ -281,8 +281,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; } @media screen and (prefers-reduced-motion: no-preference) { @@ -370,8 +370,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro display: inline-block; vertical-align: middle; overflow: hidden; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; vertical-align: unset; display: inline-block; } @@ -395,8 +395,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; } @media screen and (prefers-reduced-motion: no-preference) { @@ -484,8 +484,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro display: inline-block; vertical-align: middle; overflow: hidden; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; vertical-align: unset; display: inline-block; } @@ -509,8 +509,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; } @media screen and (prefers-reduced-motion: no-preference) { @@ -598,8 +598,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro display: inline-block; vertical-align: middle; overflow: hidden; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; vertical-align: unset; display: inline-block; } @@ -623,8 +623,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; } @media screen and (prefers-reduced-motion: no-preference) { @@ -712,8 +712,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardBack display: inline-block; vertical-align: middle; overflow: hidden; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; vertical-align: unset; display: inline-block; } @@ -737,8 +737,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardBack .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; } @media screen and (prefers-reduced-motion: no-preference) { @@ -826,8 +826,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardRetu display: inline-block; vertical-align: middle; overflow: hidden; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; vertical-align: unset; display: inline-block; } @@ -851,8 +851,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardRetu .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; } @media screen and (prefers-reduced-motion: no-preference) { @@ -940,8 +940,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardTab display: inline-block; vertical-align: middle; overflow: hidden; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; vertical-align: unset; display: inline-block; } @@ -965,8 +965,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardTab .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1054,8 +1054,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedSpaceBar for display: inline-block; vertical-align: middle; overflow: hidden; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; vertical-align: unset; display: inline-block; } @@ -1079,8 +1079,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedSpaceBar for .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #3358CC; - fill: #3358CC; + color: #3358cc; + fill: #3358cc; } @media screen and (prefers-reduced-motion: no-preference) { diff --git a/site/components/header-index/__tests__/__snapshots__/header-index.test.tsx.snap b/site/components/header-index/__tests__/__snapshots__/header-index.test.tsx.snap index b3fd125489..0845e23e8a 100644 --- a/site/components/header-index/__tests__/__snapshots__/header-index.test.tsx.snap +++ b/site/components/header-index/__tests__/__snapshots__/header-index.test.tsx.snap @@ -4,7 +4,7 @@ exports[`HeaderIndex renders without crashing 1`] = ` .emotion-0 { border-bottom: 1px solid; - border-color: #DEE2E5; + border-color: #dee2e5; } @media screen and (max-width: 767px) { @@ -145,11 +145,11 @@ exports[`HeaderIndex renders without crashing 1`] = ` height: 0; width: 100%; border-radius: 8px; - background-color: #F0F1F3; + background-color: #f0f1f3; } .emotion-4 svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-5 { @@ -237,55 +237,55 @@ exports[`HeaderIndex renders without crashing 1`] = ` .emotion-9 { margin: 0; - color: #09111C; + color: #09111c; } .emotion-9 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 767px) { .emotion-9 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 36px; line-height: 40.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-9::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-9::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) { .emotion-9 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 48px; line-height: 54px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-9::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-9::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -298,34 +298,34 @@ exports[`HeaderIndex renders without crashing 1`] = ` @media screen and (min-width: 1024px) { .emotion-10 { - margin-bottom: 0; + margin-bottom: 0px; } } .emotion-11 { margin: 0; - color: #2E3F54; - font-family: "Poppins",sans-serif; + color: #2e3f54; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 30px; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-11 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-11::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-11::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } diff --git a/site/components/icons/__tests__/__snapshots__/icons.test.tsx.snap b/site/components/icons/__tests__/__snapshots__/icons.test.tsx.snap index df93859902..1cc0dc4065 100644 --- a/site/components/icons/__tests__/__snapshots__/icons.test.tsx.snap +++ b/site/components/icons/__tests__/__snapshots__/icons.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Icons IconExpandLess icon renders as expected 1`] = ` .emotion-0 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -47,7 +47,7 @@ exports[`Icons IconExpandLess icon renders as expected 1`] = ` exports[`Icons IconExpandMore icon renders as expected 1`] = ` .emotion-0 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -92,7 +92,7 @@ exports[`Icons IconExpandMore icon renders as expected 1`] = ` exports[`Icons IconFilledAA icon renders as expected 1`] = ` .emotion-0 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -132,7 +132,7 @@ exports[`Icons IconFilledAA icon renders as expected 1`] = ` exports[`Icons IconFilledAAA icon renders as expected 1`] = ` .emotion-0 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -193,8 +193,8 @@ exports[`Icons IconFilledCheckCircle icon renders as expected 1`] = ` width: 32px; height: 32px; min-height: 32px; - padding-inline: 0; - padding-block: 0; + padding-inline: 0px; + padding-block: 0px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; @@ -207,8 +207,8 @@ exports[`Icons IconFilledCheckCircle icon renders as expected 1`] = ` -ms-appearance: none; appearance: none; border-style: solid; - border-color: #007B22; - background-color: #E5F4EA; + border-color: #007b22; + background-color: #e5f4ea; border-radius: 50%; border-width: 1px; } @@ -219,14 +219,14 @@ exports[`Icons IconFilledCheckCircle icon renders as expected 1`] = ` } .emotion-0 svg { - fill: #007B22; + fill: #007b22; } .emotion-1 { display: inline-block; vertical-align: middle; overflow: hidden; - fill: #007B22; + fill: #007b22; vertical-align: unset; display: inline-block; } @@ -250,7 +250,7 @@ exports[`Icons IconFilledCheckCircle icon renders as expected 1`] = ` .emotion-1.emotion-1 { width: 24px; height: 24px; - fill: #007B22; + fill: #007b22; } @media screen and (prefers-reduced-motion: no-preference) { @@ -296,7 +296,7 @@ exports[`Icons IconFilledCheckCircle icon renders as expected 1`] = ` exports[`Icons IconFilledChrome icon renders as expected 1`] = ` .emotion-0 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -343,7 +343,7 @@ exports[`Icons IconFilledChrome icon renders as expected 1`] = ` exports[`Icons IconFilledCircle icon renders as expected 1`] = ` .emotion-0 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -404,8 +404,8 @@ exports[`Icons IconFilledCrossCircle icon renders as expected 1`] = ` width: 32px; height: 32px; min-height: 32px; - padding-inline: 0; - padding-block: 0; + padding-inline: 0px; + padding-block: 0px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; @@ -418,8 +418,8 @@ exports[`Icons IconFilledCrossCircle icon renders as expected 1`] = ` -ms-appearance: none; appearance: none; border-style: solid; - border-color: #D60000; - background-color: #FEECEC; + border-color: #d60000; + background-color: #feecec; border-radius: 50%; border-width: 1px; } @@ -430,14 +430,14 @@ exports[`Icons IconFilledCrossCircle icon renders as expected 1`] = ` } .emotion-0 svg { - fill: #D60000; + fill: #d60000; } .emotion-1 { display: inline-block; vertical-align: middle; overflow: hidden; - fill: #D60000; + fill: #d60000; vertical-align: unset; display: inline-block; } @@ -461,7 +461,7 @@ exports[`Icons IconFilledCrossCircle icon renders as expected 1`] = ` .emotion-1.emotion-1 { width: 24px; height: 24px; - fill: #D60000; + fill: #d60000; } @media screen and (prefers-reduced-motion: no-preference) { @@ -507,7 +507,7 @@ exports[`Icons IconFilledCrossCircle icon renders as expected 1`] = ` exports[`Icons IconFilledDark icon renders as expected 1`] = ` .emotion-0 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -556,7 +556,7 @@ exports[`Icons IconFilledDark icon renders as expected 1`] = ` exports[`Icons IconFilledEdge icon renders as expected 1`] = ` .emotion-0 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -594,7 +594,7 @@ exports[`Icons IconFilledEdge icon renders as expected 1`] = ` exports[`Icons IconFilledFirefox icon renders as expected 1`] = ` .emotion-0 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -632,7 +632,7 @@ exports[`Icons IconFilledFirefox icon renders as expected 1`] = ` exports[`Icons IconFilledGitHub icon renders as expected 1`] = ` .emotion-0 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -671,7 +671,7 @@ exports[`Icons IconFilledGitHub icon renders as expected 1`] = ` exports[`Icons IconFilledLight icon renders as expected 1`] = ` .emotion-0 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -720,7 +720,7 @@ exports[`Icons IconFilledLight icon renders as expected 1`] = ` exports[`Icons IconFilledNpm icon renders as expected 1`] = ` .emotion-0 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -760,7 +760,7 @@ exports[`Icons IconFilledNpm icon renders as expected 1`] = ` exports[`Icons IconFilledNullDot icon renders as expected 1`] = ` .emotion-0 { - fill: #DEE2E5; + fill: #dee2e5; vertical-align: unset; display: inline-block; margin: 0 6px; @@ -785,7 +785,7 @@ exports[`Icons IconFilledNullDot icon renders as expected 1`] = ` .emotion-0.emotion-0 { width: 12px; height: 12px; - fill: #DEE2E5; + fill: #dee2e5; } @media screen and (prefers-reduced-motion: no-preference) { @@ -823,7 +823,7 @@ exports[`Icons IconFilledNullDot icon renders as expected 1`] = ` exports[`Icons IconFilledSafari icon renders as expected 1`] = ` .emotion-0 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -861,7 +861,7 @@ exports[`Icons IconFilledSafari icon renders as expected 1`] = ` exports[`Icons IconFilledSearch icon renders as expected 1`] = ` .emotion-0 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -899,7 +899,7 @@ exports[`Icons IconFilledSearch icon renders as expected 1`] = ` exports[`Icons IconFilledTimer icon renders as expected 1`] = ` .emotion-0 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } diff --git a/site/components/legacy-block/__tests__/__snapshots__/legacyblock.test.tsx.snap b/site/components/legacy-block/__tests__/__snapshots__/legacyblock.test.tsx.snap index d524c9beac..9c257ec377 100644 --- a/site/components/legacy-block/__tests__/__snapshots__/legacyblock.test.tsx.snap +++ b/site/components/legacy-block/__tests__/__snapshots__/legacyblock.test.tsx.snap @@ -63,9 +63,9 @@ exports[`Block with overflow set to scrollY renders no overflow prop 1`] = ` exports[`Block with responsive style props renders a responsive styled div 1`] = ` .emotion-0 { - color: #09111C; - background-color: #F0F1F3; - font-family: "DM Sans",sans-serif; + color: #09111c; + background-color: #ffffff; + font-family: DM Sans,sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; @@ -126,9 +126,9 @@ exports[`Block with responsive style props renders a responsive styled div 1`] = @media screen and (min-width: 0px) { .emotion-0 { - color: #2E3F54; - background-color: #F0F1F3; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + background-color: #f0f1f3; + font-family: DM Sans,sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; @@ -185,9 +185,9 @@ exports[`Block with responsive style props renders a responsive styled div 1`] = @media screen and (min-width: 480px) { .emotion-0 { - color: #5A6A79; - background-color: #DEE2E5; - font-family: "DM Sans",sans-serif; + color: #5a6a79; + background-color: #dee2e5; + font-family: DM Sans,sans-serif; font-weight: 400; font-size: 18px; line-height: 1.5; @@ -255,9 +255,9 @@ exports[`Block with responsive style props renders a responsive styled div 1`] = exports[`Block with simple style props renders a styled div 1`] = ` .emotion-0 { - color: #09111C; - background-color: #12387A; - font-family: "DM Sans",sans-serif; + color: #09111c; + background-color: #14328d; + font-family: DM Sans,sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; diff --git a/site/components/logo/__tests__/__snapshots__/logo.test.tsx.snap b/site/components/logo/__tests__/__snapshots__/logo.test.tsx.snap index 825c59e552..efc3bac3a0 100644 --- a/site/components/logo/__tests__/__snapshots__/logo.test.tsx.snap +++ b/site/components/logo/__tests__/__snapshots__/logo.test.tsx.snap @@ -30,8 +30,8 @@ exports[`Logo Default logo renders as expected 1`] = ` } .emotion-2 { - fill: #09111C; - color: #09111C; + fill: #09111c; + color: #09111c; }
( type="standalone" href={href} key={name} - overrides={{typographyPreset: 'utilityLink020'}} + overrides={{typographyPreset: 'utilityLabel020'}} > {name} diff --git a/site/components/search/search.tsx b/site/components/search/search.tsx index 3e9bcf99fe..b8211115e1 100644 --- a/site/components/search/search.tsx +++ b/site/components/search/search.tsx @@ -184,7 +184,7 @@ export const Search: React.FC = ({sidebarOpen}) => { '--docsearch-logo-color': theme.colors.inkNonEssential, // modal - '--docsearch-modal-background': theme.colors.interfaceBackground, + '--docsearch-modal-background': theme.colors.interface010, '--docsearch-modal-width': '720px', '--docsearch-modal-height': '850px', '--docsearch-modal-shadow': theme.shadows.shadow060, @@ -199,7 +199,7 @@ export const Search: React.FC = ({sidebarOpen}) => { '--docsearch-hit-shadow': 0, '--docsearch-hit-color': theme.colors.inkContrast, '--docsearch-hit-active-color': theme.colors.inkContrast, - '--docsearch-hit-background': theme.colors.interface010, + '--docsearch-hit-background': theme.colors.interface020, '--docsearch-hit-height': '70px', // key diff --git a/site/components/section-introduction/__tests__/__snapshots__/section-introduction.test.ts.snap b/site/components/section-introduction/__tests__/__snapshots__/section-introduction.test.ts.snap index bba742c09e..e753276fa2 100644 --- a/site/components/section-introduction/__tests__/__snapshots__/section-introduction.test.ts.snap +++ b/site/components/section-introduction/__tests__/__snapshots__/section-introduction.test.ts.snap @@ -80,10 +80,10 @@ exports[`SectionIntroduction renders with all props 1`] = ` -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; - padding-inline: 0; - padding-block: 0; - padding-inline: 0; - padding-block: 0; + padding-inline: 0px; + padding-block: 0px; + padding-inline: 0px; + padding-block: 0px; background-color: transparent; } @@ -96,46 +96,46 @@ exports[`SectionIntroduction renders with all props 1`] = ` @media screen and (max-width: 767px) { .emotion-4 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 28px; line-height: 31.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-4::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-4::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) { .emotion-4 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-4::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-4::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -144,11 +144,11 @@ exports[`SectionIntroduction renders with all props 1`] = ` display: inline; font: inherit; margin: 0; - color: #09111C; + color: #09111c; } .emotion-5 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 767px) { @@ -171,28 +171,28 @@ exports[`SectionIntroduction renders with all props 1`] = ` .emotion-7 { margin: 0; - color: #2E3F54; - font-family: "Poppins",sans-serif; + color: #2e3f54; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 30px; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-7 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-7::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-7::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } diff --git a/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap b/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap index 69c327ced3..159659a0f8 100644 --- a/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap +++ b/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap @@ -65,9 +65,9 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-3 { background-color: transparent; - color: #09111C; + color: #09111c; margin-top: 16px; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-3.collapsed>li { @@ -75,7 +75,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` max-height: 0px; -webkit-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; - margin-bottom: 0; + margin-bottom: 0px; visibility: hidden; } @@ -90,11 +90,11 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-4 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 18px; line-height: 20.25px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; margin-inline: 32px; margin-block: 4px; @@ -102,13 +102,13 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-4::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-4::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -160,7 +160,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` appearance: none; background-color: transparent; border-radius: 50%; - color: #3358CC; + color: #3358cc; cursor: pointer; } @@ -170,28 +170,28 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` } .emotion-6 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-6:hover:not(:disabled) { - background-color: #ECF1FF; + background-color: #ecf1ff; } .emotion-6:active:not(:disabled) { - background-color: #D5E0FC; + background-color: #d5e0fc; } .emotion-6:disabled { background-color: transparent; - color: #C0C7CC; + color: #a1acb4; } .emotion-6:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-6:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -222,8 +222,8 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` } .emotion-7 { - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; vertical-align: unset; display: inline-block; } @@ -247,8 +247,8 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-7.emotion-7 { width: 24px; height: 24px; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -269,7 +269,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-8 { box-sizing: border-box; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-9 { @@ -312,15 +312,15 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #5A6A79; + color: #5a6a79; cursor: pointer; width: 100%; -webkit-text-decoration: none; text-decoration: none; - border-color: transparent transparent transparent #3358CC; + border-color: transparent transparent transparent #3358cc; border-width: 4px; border-style: solid; - color: #3358CC; + color: #3358cc; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -334,12 +334,12 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` } .emotion-9:hover:not(:disabled) { - color: #254CAC; - background-color: #D5E0FC; + color: #254cac; + background-color: #d5e0fc; } .emotion-9:active:not(:disabled) { - color: #12387A; + color: #14328d; } @media screen and (prefers-reduced-motion: no-preference) { @@ -360,24 +360,24 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-10 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-10::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-10::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -402,24 +402,24 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-19 { margin: 0; background-color: transparent; - color: #09111C; - font-family: "Poppins",sans-serif; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 16px; line-height: 18px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-19::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-19::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -463,7 +463,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #5A6A79; + color: #5a6a79; cursor: pointer; width: 100%; -webkit-box-pack: start; @@ -479,12 +479,12 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` } .emotion-21:hover:not(:disabled) { - color: #254CAC; - background-color: #D5E0FC; + color: #254cac; + background-color: #d5e0fc; } .emotion-21:active:not(:disabled) { - color: #12387A; + color: #14328d; } @media screen and (prefers-reduced-motion: no-preference) { @@ -513,7 +513,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-36 { border-style: solid; - border-color: #DEE2E5; + border-color: #dee2e5; border-width: 1px; border-width: 0px; margin: 0; @@ -803,7 +803,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-2 { box-sizing: border-box; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-3 { @@ -848,15 +848,15 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #5A6A79; + color: #5a6a79; cursor: pointer; width: 100%; -webkit-text-decoration: none; text-decoration: none; - border-color: transparent transparent transparent #3358CC; + border-color: transparent transparent transparent #3358cc; border-width: 4px; border-style: solid; - color: #3358CC; + color: #3358cc; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -870,12 +870,12 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` } .emotion-3:hover:not(:disabled) { - color: #254CAC; - background-color: #D5E0FC; + color: #254cac; + background-color: #d5e0fc; } .emotion-3:active:not(:disabled) { - color: #12387A; + color: #14328d; } @media screen and (prefers-reduced-motion: no-preference) { @@ -896,24 +896,24 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-4 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-4::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-4::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -1028,9 +1028,9 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` .emotion-3 { background-color: transparent; - color: #09111C; + color: #09111c; margin-top: 16px; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-3.collapsed>li { @@ -1038,7 +1038,7 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` max-height: 0px; -webkit-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; - margin-bottom: 0; + margin-bottom: 0px; visibility: hidden; } @@ -1053,11 +1053,11 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` .emotion-4 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 18px; line-height: 20.25px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; margin-inline: 32px; margin-block: 4px; @@ -1065,13 +1065,13 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` .emotion-4::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-4::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -1123,7 +1123,7 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` appearance: none; background-color: transparent; border-radius: 50%; - color: #3358CC; + color: #3358cc; cursor: pointer; } @@ -1133,28 +1133,28 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` } .emotion-6 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-6:hover:not(:disabled) { - background-color: #ECF1FF; + background-color: #ecf1ff; } .emotion-6:active:not(:disabled) { - background-color: #D5E0FC; + background-color: #d5e0fc; } .emotion-6:disabled { background-color: transparent; - color: #C0C7CC; + color: #a1acb4; } .emotion-6:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-6:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -1185,8 +1185,8 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` } .emotion-7 { - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; vertical-align: unset; display: inline-block; } @@ -1210,8 +1210,8 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` .emotion-7.emotion-7 { width: 24px; height: 24px; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1232,7 +1232,7 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` .emotion-8 { box-sizing: border-box; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-9 { @@ -1275,7 +1275,7 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #5A6A79; + color: #5a6a79; cursor: pointer; width: 100%; -webkit-box-pack: start; @@ -1291,12 +1291,12 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` } .emotion-9:hover:not(:disabled) { - color: #254CAC; - background-color: #D5E0FC; + color: #254cac; + background-color: #d5e0fc; } .emotion-9:active:not(:disabled) { - color: #12387A; + color: #14328d; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1317,24 +1317,24 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` .emotion-10 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-10::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-10::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -1359,24 +1359,24 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` .emotion-19 { margin: 0; background-color: transparent; - color: #09111C; - font-family: "Poppins",sans-serif; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 16px; line-height: 18px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-19::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-19::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -1390,7 +1390,7 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` .emotion-36 { border-style: solid; - border-color: #DEE2E5; + border-color: #dee2e5; border-width: 1px; border-width: 0px; margin: 0; @@ -1768,9 +1768,9 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-3 { background-color: transparent; - color: #09111C; + color: #09111c; margin-top: 16px; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-3.collapsed>li { @@ -1778,7 +1778,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] max-height: 0px; -webkit-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; - margin-bottom: 0; + margin-bottom: 0px; visibility: hidden; } @@ -1793,11 +1793,11 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-4 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 18px; line-height: 20.25px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; margin-inline: 32px; margin-block: 4px; @@ -1805,13 +1805,13 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-4::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-4::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -1863,7 +1863,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] appearance: none; background-color: transparent; border-radius: 50%; - color: #3358CC; + color: #3358cc; cursor: pointer; } @@ -1873,28 +1873,28 @@ exports[`Sidebar navigation should render only routes under current section 1`] } .emotion-6 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-6:hover:not(:disabled) { - background-color: #ECF1FF; + background-color: #ecf1ff; } .emotion-6:active:not(:disabled) { - background-color: #D5E0FC; + background-color: #d5e0fc; } .emotion-6:disabled { background-color: transparent; - color: #C0C7CC; + color: #a1acb4; } .emotion-6:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-6:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -1925,8 +1925,8 @@ exports[`Sidebar navigation should render only routes under current section 1`] } .emotion-7 { - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; vertical-align: unset; display: inline-block; } @@ -1950,8 +1950,8 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-7.emotion-7 { width: 24px; height: 24px; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1972,7 +1972,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-8 { box-sizing: border-box; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-9 { @@ -2015,7 +2015,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] border-color: transparent; border-width: 4px; border-style: solid; - color: #5A6A79; + color: #5a6a79; cursor: pointer; width: 100%; -webkit-box-pack: start; @@ -2031,12 +2031,12 @@ exports[`Sidebar navigation should render only routes under current section 1`] } .emotion-9:hover:not(:disabled) { - color: #254CAC; - background-color: #D5E0FC; + color: #254cac; + background-color: #d5e0fc; } .emotion-9:active:not(:disabled) { - color: #12387A; + color: #14328d; } @media screen and (prefers-reduced-motion: no-preference) { @@ -2057,24 +2057,24 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-10 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-10::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-10::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -2099,24 +2099,24 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-19 { margin: 0; background-color: transparent; - color: #09111C; - font-family: "Poppins",sans-serif; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 16px; line-height: 18px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-19::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-19::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -2130,7 +2130,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-36 { border-style: solid; - border-color: #DEE2E5; + border-color: #dee2e5; border-width: 1px; border-width: 0px; margin: 0; @@ -2420,7 +2420,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-2 { box-sizing: border-box; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-3 { @@ -2465,7 +2465,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] border-color: transparent; border-width: 4px; border-style: solid; - color: #5A6A79; + color: #5a6a79; cursor: pointer; width: 100%; -webkit-box-pack: start; @@ -2481,12 +2481,12 @@ exports[`Sidebar navigation should render only routes under current section 1`] } .emotion-3:hover:not(:disabled) { - color: #254CAC; - background-color: #D5E0FC; + color: #254cac; + background-color: #d5e0fc; } .emotion-3:active:not(:disabled) { - color: #12387A; + color: #14328d; } @media screen and (prefers-reduced-motion: no-preference) { @@ -2507,24 +2507,24 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-4 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-4::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-4::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } diff --git a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap index 09db2e5c76..4c4dbef362 100644 --- a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap +++ b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap @@ -71,13 +71,13 @@ exports[`Sidebar renders correctly when closed 1`] = ` z-index: 3; padding-top: 16px; margin-top: 48px; - background-color: #F0F1F3; + background-color: #f0f1f3; border-style: solid; - border-color: #DEE2E5; - border-width: 0 1px 0 0; + border-color: #dee2e5; + border-width: 0px 1px 0px 0px; width: 276px; margin-top: 80px; - padding-top: 0; + padding-top: 0px; overflow: hidden; } @@ -129,9 +129,9 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-7 { background-color: transparent; - color: #09111C; + color: #09111c; margin-top: 16px; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-7.collapsed>li { @@ -139,7 +139,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` max-height: 0px; -webkit-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; - margin-bottom: 0; + margin-bottom: 0px; visibility: hidden; } @@ -154,11 +154,11 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-8 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 18px; line-height: 20.25px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; margin-inline: 32px; margin-block: 4px; @@ -166,13 +166,13 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-8::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-8::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -224,7 +224,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` appearance: none; background-color: transparent; border-radius: 50%; - color: #3358CC; + color: #3358cc; cursor: pointer; } @@ -234,28 +234,28 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-10 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-10:hover:not(:disabled) { - background-color: #ECF1FF; + background-color: #ecf1ff; } .emotion-10:active:not(:disabled) { - background-color: #D5E0FC; + background-color: #d5e0fc; } .emotion-10:disabled { background-color: transparent; - color: #C0C7CC; + color: #a1acb4; } .emotion-10:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-10:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -286,8 +286,8 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-11 { - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; vertical-align: unset; display: inline-block; } @@ -311,8 +311,8 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-11.emotion-11 { width: 24px; height: 24px; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -333,7 +333,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-12 { box-sizing: border-box; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-13 { @@ -376,7 +376,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #5A6A79; + color: #5a6a79; cursor: pointer; width: 100%; -webkit-box-pack: start; @@ -392,12 +392,12 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-13:hover:not(:disabled) { - color: #254CAC; - background-color: #D5E0FC; + color: #254cac; + background-color: #d5e0fc; } .emotion-13:active:not(:disabled) { - color: #12387A; + color: #14328d; } @media screen and (prefers-reduced-motion: no-preference) { @@ -418,24 +418,24 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-14 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-14::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-14::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -480,7 +480,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #5A6A79; + color: #5a6a79; cursor: pointer; width: 100%; -webkit-box-pack: start; @@ -496,12 +496,12 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-37:hover:not(:disabled) { - color: #254CAC; - background-color: #D5E0FC; + color: #254cac; + background-color: #d5e0fc; } .emotion-37:active:not(:disabled) { - color: #12387A; + color: #14328d; } @media screen and (prefers-reduced-motion: no-preference) { @@ -541,24 +541,24 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-41 { margin: 0; background-color: transparent; - color: #09111C; - font-family: "Poppins",sans-serif; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 16px; line-height: 18px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-41::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-41::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -572,7 +572,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-469 { border-style: solid; - border-color: #DEE2E5; + border-color: #dee2e5; border-width: 1px; border-width: 0px; margin: 0; @@ -3214,10 +3214,10 @@ exports[`Sidebar renders correctly when closed 1`] = ` max-width: 100%; min-width: 100%; height: 100%; - background-color: #F0F1F3; + background-color: #f0f1f3; border-style: solid; - border-color: #DEE2E5; - border-width: 0 1px 0 0; + border-color: #dee2e5; + border-width: 0px 1px 0px 0px; margin-block-start: 48px; } @@ -3383,8 +3383,8 @@ exports[`Sidebar renders correctly when closed 1`] = ` box-sizing: border-box; grid-area: content; overflow: hidden auto; - padding-inline: 0; - padding-block: 0; + padding-inline: 0px; + padding-block: 0px; } @media screen { @@ -3450,9 +3450,9 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-5 { background-color: transparent; - color: #09111C; + color: #09111c; margin-top: 16px; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-5.collapsed>li { @@ -3460,7 +3460,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` max-height: 0px; -webkit-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; - margin-bottom: 0; + margin-bottom: 0px; visibility: hidden; } @@ -3475,11 +3475,11 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-6 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 18px; line-height: 20.25px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; margin-inline: 32px; margin-block: 4px; @@ -3487,13 +3487,13 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-6::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-6::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -3545,7 +3545,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` appearance: none; background-color: transparent; border-radius: 50%; - color: #3358CC; + color: #3358cc; cursor: pointer; } @@ -3555,28 +3555,28 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-8 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-8:hover:not(:disabled) { - background-color: #ECF1FF; + background-color: #ecf1ff; } .emotion-8:active:not(:disabled) { - background-color: #D5E0FC; + background-color: #d5e0fc; } .emotion-8:disabled { background-color: transparent; - color: #C0C7CC; + color: #a1acb4; } .emotion-8:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-8:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -3607,8 +3607,8 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-9 { - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; vertical-align: unset; display: inline-block; } @@ -3632,8 +3632,8 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-9.emotion-9 { width: 24px; height: 24px; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -3654,7 +3654,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-10 { box-sizing: border-box; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-11 { @@ -3697,7 +3697,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #5A6A79; + color: #5a6a79; cursor: pointer; width: 100%; -webkit-box-pack: start; @@ -3713,12 +3713,12 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-11:hover:not(:disabled) { - color: #254CAC; - background-color: #D5E0FC; + color: #254cac; + background-color: #d5e0fc; } .emotion-11:active:not(:disabled) { - color: #12387A; + color: #14328d; } @media screen and (prefers-reduced-motion: no-preference) { @@ -3739,24 +3739,24 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-12 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-12::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-12::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -3801,7 +3801,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #5A6A79; + color: #5a6a79; cursor: pointer; width: 100%; -webkit-box-pack: start; @@ -3817,12 +3817,12 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-35:hover:not(:disabled) { - color: #254CAC; - background-color: #D5E0FC; + color: #254cac; + background-color: #d5e0fc; } .emotion-35:active:not(:disabled) { - color: #12387A; + color: #14328d; } @media screen and (prefers-reduced-motion: no-preference) { @@ -3862,24 +3862,24 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-39 { margin: 0; background-color: transparent; - color: #09111C; - font-family: "Poppins",sans-serif; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 16px; line-height: 18px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-39::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-39::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -3893,7 +3893,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-467 { border-style: solid; - border-color: #DEE2E5; + border-color: #dee2e5; border-width: 1px; border-width: 0px; margin: 0; @@ -3954,23 +3954,23 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-474 { margin: 0; - color: #2E3F54; - font-family: "Poppins",sans-serif; + color: #2e3f54; + font-family: Poppins,sans-serif; font-size: 16px; line-height: 1.5; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; } .emotion-474 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-475 { display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -4005,12 +4005,12 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-479 { display: block; - color: #2E3F54; - font-family: "Poppins",sans-serif; + color: #2e3f54; + font-family: Poppins,sans-serif; font-size: 16px; line-height: 24px; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; margin-bottom: 16px; margin-right: 4px; @@ -4018,18 +4018,18 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-479 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-479::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-479::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -4067,7 +4067,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` position: absolute; top: 50%; left: calc((16px / 2) + 4px); - background-color: #3358CC; + background-color: #3358cc; border-radius: 50%; opacity: 0; width: 1px; @@ -4087,22 +4087,22 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-482:valid:hover:not(:disabled) { - background-color: #00601A; + background-color: #00601a; opacity: 0.2; } .emotion-482:valid:hover:active:not(:disabled) { - background-color: #00601A; + background-color: #00601a; opacity: 0.4; } .emotion-482:invalid:hover:not(:disabled) { - background-color: #A90000; + background-color: #a90000; opacity: 0.2; } .emotion-482:invalid:hover:active:not(:disabled) { - background-color: #A90000; + background-color: #a90000; opacity: 0.4; } @@ -4140,21 +4140,21 @@ exports[`Sidebar renders correctly when closed 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - background-color: #85939C; + background-color: #85939c; border-radius: 20rem; padding-inline: 4px; } .emotion-483:checked:not(:disabled) { - background-color: #3358CC; + background-color: #3358cc; } .emotion-483:disabled { - background-color: #DEE2E5; + background-color: #dee2e5; } .emotion-483:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -4169,11 +4169,11 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-483:checked:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; - background-color: #3358CC; + background-color: #3358cc; } @media not all and (min-resolution: 0.001dpcm) { @@ -4185,11 +4185,11 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-483:checked:focus-visible:hover:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; - background-color: #3358CC; + background-color: #3358cc; } @media not all and (min-resolution: 0.001dpcm) { @@ -4222,11 +4222,11 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-485 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-485:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-485 svg { @@ -4249,11 +4249,11 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-486 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-486:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-486 svg { @@ -4264,7 +4264,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-487 { - background-color: #FFFFFF; + background-color: #ffffff; border-radius: 50%; width: 16px; height: 16px; @@ -4278,7 +4278,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-487 svg { - fill: #09111C; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -4308,17 +4308,17 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-489 { - color: #2E3F54; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 14px; line-height: 21px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-489:disabled { - color: #C0C7CC; + color: #a1acb4; } .emotion-489::before { @@ -7270,13 +7270,13 @@ exports[`Sidebar renders correctly when open 1`] = ` z-index: 3; padding-top: 16px; margin-top: 48px; - background-color: #F0F1F3; + background-color: #f0f1f3; border-style: solid; - border-color: #DEE2E5; - border-width: 0 1px 0 0; + border-color: #dee2e5; + border-width: 0px 1px 0px 0px; width: 276px; margin-top: 80px; - padding-top: 0; + padding-top: 0px; overflow: hidden; } @@ -7328,9 +7328,9 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-7 { background-color: transparent; - color: #09111C; + color: #09111c; margin-top: 16px; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-7.collapsed>li { @@ -7338,7 +7338,7 @@ exports[`Sidebar renders correctly when open 1`] = ` max-height: 0px; -webkit-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; - margin-bottom: 0; + margin-bottom: 0px; visibility: hidden; } @@ -7353,11 +7353,11 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-8 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 18px; line-height: 20.25px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; margin-inline: 32px; margin-block: 4px; @@ -7365,13 +7365,13 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-8::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-8::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -7423,7 +7423,7 @@ exports[`Sidebar renders correctly when open 1`] = ` appearance: none; background-color: transparent; border-radius: 50%; - color: #3358CC; + color: #3358cc; cursor: pointer; } @@ -7433,28 +7433,28 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-10 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-10:hover:not(:disabled) { - background-color: #ECF1FF; + background-color: #ecf1ff; } .emotion-10:active:not(:disabled) { - background-color: #D5E0FC; + background-color: #d5e0fc; } .emotion-10:disabled { background-color: transparent; - color: #C0C7CC; + color: #a1acb4; } .emotion-10:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-10:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -7485,8 +7485,8 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-11 { - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; vertical-align: unset; display: inline-block; } @@ -7510,8 +7510,8 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-11.emotion-11 { width: 24px; height: 24px; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -7532,7 +7532,7 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-12 { box-sizing: border-box; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-13 { @@ -7575,7 +7575,7 @@ exports[`Sidebar renders correctly when open 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #5A6A79; + color: #5a6a79; cursor: pointer; width: 100%; -webkit-box-pack: start; @@ -7591,12 +7591,12 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-13:hover:not(:disabled) { - color: #254CAC; - background-color: #D5E0FC; + color: #254cac; + background-color: #d5e0fc; } .emotion-13:active:not(:disabled) { - color: #12387A; + color: #14328d; } @media screen and (prefers-reduced-motion: no-preference) { @@ -7617,24 +7617,24 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-14 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-14::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-14::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -7679,7 +7679,7 @@ exports[`Sidebar renders correctly when open 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #5A6A79; + color: #5a6a79; cursor: pointer; width: 100%; -webkit-box-pack: start; @@ -7695,12 +7695,12 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-37:hover:not(:disabled) { - color: #254CAC; - background-color: #D5E0FC; + color: #254cac; + background-color: #d5e0fc; } .emotion-37:active:not(:disabled) { - color: #12387A; + color: #14328d; } @media screen and (prefers-reduced-motion: no-preference) { @@ -7740,24 +7740,24 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-41 { margin: 0; background-color: transparent; - color: #09111C; - font-family: "Poppins",sans-serif; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 16px; line-height: 18px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-41::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-41::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -7771,7 +7771,7 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-469 { border-style: solid; - border-color: #DEE2E5; + border-color: #dee2e5; border-width: 1px; border-width: 0px; margin: 0; @@ -10416,10 +10416,10 @@ exports[`Sidebar renders correctly when open 1`] = ` max-width: 100%; min-width: 100%; height: 100%; - background-color: #F0F1F3; + background-color: #f0f1f3; border-style: solid; - border-color: #DEE2E5; - border-width: 0 1px 0 0; + border-color: #dee2e5; + border-width: 0px 1px 0px 0px; margin-block-start: 48px; } @@ -10585,8 +10585,8 @@ exports[`Sidebar renders correctly when open 1`] = ` box-sizing: border-box; grid-area: content; overflow: hidden auto; - padding-inline: 0; - padding-block: 0; + padding-inline: 0px; + padding-block: 0px; } @media screen { @@ -10652,9 +10652,9 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-5 { background-color: transparent; - color: #09111C; + color: #09111c; margin-top: 16px; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-5.collapsed>li { @@ -10662,7 +10662,7 @@ exports[`Sidebar renders correctly when open 1`] = ` max-height: 0px; -webkit-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; - margin-bottom: 0; + margin-bottom: 0px; visibility: hidden; } @@ -10677,11 +10677,11 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-6 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 18px; line-height: 20.25px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; margin-inline: 32px; margin-block: 4px; @@ -10689,13 +10689,13 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-6::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-6::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -10747,7 +10747,7 @@ exports[`Sidebar renders correctly when open 1`] = ` appearance: none; background-color: transparent; border-radius: 50%; - color: #3358CC; + color: #3358cc; cursor: pointer; } @@ -10757,28 +10757,28 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-8 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-8:hover:not(:disabled) { - background-color: #ECF1FF; + background-color: #ecf1ff; } .emotion-8:active:not(:disabled) { - background-color: #D5E0FC; + background-color: #d5e0fc; } .emotion-8:disabled { background-color: transparent; - color: #C0C7CC; + color: #a1acb4; } .emotion-8:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-8:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -10809,8 +10809,8 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-9 { - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; vertical-align: unset; display: inline-block; } @@ -10834,8 +10834,8 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-9.emotion-9 { width: 24px; height: 24px; - color: #09111C; - fill: #09111C; + color: #09111c; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -10856,7 +10856,7 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-10 { box-sizing: border-box; - margin-bottom: 0; + margin-bottom: 0px; } .emotion-11 { @@ -10899,7 +10899,7 @@ exports[`Sidebar renders correctly when open 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #5A6A79; + color: #5a6a79; cursor: pointer; width: 100%; -webkit-box-pack: start; @@ -10915,12 +10915,12 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-11:hover:not(:disabled) { - color: #254CAC; - background-color: #D5E0FC; + color: #254cac; + background-color: #d5e0fc; } .emotion-11:active:not(:disabled) { - color: #12387A; + color: #14328d; } @media screen and (prefers-reduced-motion: no-preference) { @@ -10941,24 +10941,24 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-12 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-12::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-12::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -11003,7 +11003,7 @@ exports[`Sidebar renders correctly when open 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #5A6A79; + color: #5a6a79; cursor: pointer; width: 100%; -webkit-box-pack: start; @@ -11019,12 +11019,12 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-35:hover:not(:disabled) { - color: #254CAC; - background-color: #D5E0FC; + color: #254cac; + background-color: #d5e0fc; } .emotion-35:active:not(:disabled) { - color: #12387A; + color: #14328d; } @media screen and (prefers-reduced-motion: no-preference) { @@ -11064,24 +11064,24 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-39 { margin: 0; background-color: transparent; - color: #09111C; - font-family: "Poppins",sans-serif; + color: #09111c; + font-family: Poppins,sans-serif; font-size: 16px; line-height: 18px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-39::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-39::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -11095,7 +11095,7 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-467 { border-style: solid; - border-color: #DEE2E5; + border-color: #dee2e5; border-width: 1px; border-width: 0px; margin: 0; @@ -11156,23 +11156,23 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-474 { margin: 0; - color: #2E3F54; - font-family: "Poppins",sans-serif; + color: #2e3f54; + font-family: Poppins,sans-serif; font-size: 16px; line-height: 1.5; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; } .emotion-474 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-475 { display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -11207,12 +11207,12 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-479 { display: block; - color: #2E3F54; - font-family: "Poppins",sans-serif; + color: #2e3f54; + font-family: Poppins,sans-serif; font-size: 16px; line-height: 24px; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; margin-bottom: 16px; margin-right: 4px; @@ -11220,18 +11220,18 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-479 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-479::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-479::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -11269,7 +11269,7 @@ exports[`Sidebar renders correctly when open 1`] = ` position: absolute; top: 50%; left: calc((16px / 2) + 4px); - background-color: #3358CC; + background-color: #3358cc; border-radius: 50%; opacity: 0; width: 1px; @@ -11289,22 +11289,22 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-482:valid:hover:not(:disabled) { - background-color: #00601A; + background-color: #00601a; opacity: 0.2; } .emotion-482:valid:hover:active:not(:disabled) { - background-color: #00601A; + background-color: #00601a; opacity: 0.4; } .emotion-482:invalid:hover:not(:disabled) { - background-color: #A90000; + background-color: #a90000; opacity: 0.2; } .emotion-482:invalid:hover:active:not(:disabled) { - background-color: #A90000; + background-color: #a90000; opacity: 0.4; } @@ -11342,21 +11342,21 @@ exports[`Sidebar renders correctly when open 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - background-color: #85939C; + background-color: #85939c; border-radius: 20rem; padding-inline: 4px; } .emotion-483:checked:not(:disabled) { - background-color: #3358CC; + background-color: #3358cc; } .emotion-483:disabled { - background-color: #DEE2E5; + background-color: #dee2e5; } .emotion-483:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -11371,11 +11371,11 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-483:checked:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; - background-color: #3358CC; + background-color: #3358cc; } @media not all and (min-resolution: 0.001dpcm) { @@ -11387,11 +11387,11 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-483:checked:focus-visible:hover:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; - background-color: #3358CC; + background-color: #3358cc; } @media not all and (min-resolution: 0.001dpcm) { @@ -11424,11 +11424,11 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-485 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-485:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-485 svg { @@ -11451,11 +11451,11 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-486 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-486:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-486 svg { @@ -11466,7 +11466,7 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-487 { - background-color: #FFFFFF; + background-color: #ffffff; border-radius: 50%; width: 16px; height: 16px; @@ -11480,7 +11480,7 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-487 svg { - fill: #09111C; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -11510,17 +11510,17 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-489 { - color: #2E3F54; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 14px; line-height: 21px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-489:disabled { - color: #C0C7CC; + color: #a1acb4; } .emotion-489::before { diff --git a/site/components/site-footer.tsx b/site/components/site-footer.tsx index a08526641b..07e28c1b65 100644 --- a/site/components/site-footer.tsx +++ b/site/components/site-footer.tsx @@ -14,7 +14,7 @@ import { import {Link} from './link'; const Footer = styled.footer` - ${getColorCssFromTheme('background', 'interface010')} + ${getColorCssFromTheme('background', 'interface020')} ${getSizingCssFromTheme('paddingTop', { xs: 'sizing070', md: 'sizing080', diff --git a/site/components/step/__tests__/__snapshots__/step.test.tsx.snap b/site/components/step/__tests__/__snapshots__/step.test.tsx.snap index f7dd0e4519..8e61b3e67d 100644 --- a/site/components/step/__tests__/__snapshots__/step.test.tsx.snap +++ b/site/components/step/__tests__/__snapshots__/step.test.tsx.snap @@ -70,9 +70,9 @@ exports[`Step renders with props 1`] = ` -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #3358CC; + background-color: #3358cc; border-radius: 24px; - color: #FFFFFF; + color: #ffffff; } .emotion-1 svg { @@ -82,24 +82,24 @@ exports[`Step renders with props 1`] = ` .emotion-2 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-2::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-2::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -136,9 +136,9 @@ exports[`Step renders with props 1`] = ` -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #C6C6C6; + background-color: #c6c6c6; border-radius: 24px; - color: #3B3B3B; + color: #3b3b3b; } .emotion-3 svg { @@ -151,7 +151,7 @@ exports[`Step renders with props 1`] = ` } .emotion-4 { - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } diff --git a/site/components/svg-previewer/__tests__/__snapshots__/svg-previewer.test.tsx.snap b/site/components/svg-previewer/__tests__/__snapshots__/svg-previewer.test.tsx.snap index a0b6db381b..10c2971957 100644 --- a/site/components/svg-previewer/__tests__/__snapshots__/svg-previewer.test.tsx.snap +++ b/site/components/svg-previewer/__tests__/__snapshots__/svg-previewer.test.tsx.snap @@ -26,8 +26,8 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff position: fixed; top: var(--headerSize); margin-top: -12px; - background: #F0F1F3; - border-bottom-color: #DEE2E5; + background: #f0f1f3; + border-bottom-color: #dee2e5; border-bottom-width: 1px; border-bottom-style: solid; z-index: 1000; @@ -74,21 +74,21 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff max-width: 196px; min-height: 48px; margin-bottom: 8px; - background-color: #F0F1F3; + background-color: #f0f1f3; border-style: solid; border-color: transparent; border-width: 1px; border-radius: 8px; - color: #2E3F54; + color: #2e3f54; text-overflow: ellipsis; - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; margin-block: 0px; } .emotion-3 svg { - fill: #2E3F54; + fill: #2e3f54; } @media not all and (min-resolution: 0.001dpcm) { @@ -138,12 +138,12 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - color: #2E3F54; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 1.5; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; } .emotion-7 { @@ -210,7 +210,7 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -270,7 +270,7 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff position: absolute; top: 50%; left: calc(100% - (24px / 2) - 4px); - background-color: #3358CC; + background-color: #3358cc; border-radius: 50%; opacity: 0; width: 1px; @@ -290,22 +290,22 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff } .emotion-16:valid:hover:not(:disabled) { - background-color: #00601A; + background-color: #00601a; opacity: 0.2; } .emotion-16:valid:hover:active:not(:disabled) { - background-color: #00601A; + background-color: #00601a; opacity: 0.4; } .emotion-16:invalid:hover:not(:disabled) { - background-color: #A90000; + background-color: #a90000; opacity: 0.2; } .emotion-16:invalid:hover:active:not(:disabled) { - background-color: #A90000; + background-color: #a90000; opacity: 0.4; } @@ -343,17 +343,17 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff -webkit-box-align: center; -ms-flex-align: center; align-items: center; - background-color: #3358CC; + background-color: #3358cc; border-radius: 20rem; padding-inline: 4px; } .emotion-17:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; - background-color: #3358CC; + background-color: #3358cc; } @media not all and (min-resolution: 0.001dpcm) { @@ -386,11 +386,11 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff } .emotion-19 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-19:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-19 svg { @@ -404,7 +404,7 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -438,11 +438,11 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff } .emotion-22 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-22:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-22 svg { @@ -453,7 +453,7 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff } .emotion-25 { - background-color: #FFFFFF; + background-color: #ffffff; border-radius: 50%; width: 24px; height: 24px; @@ -467,7 +467,7 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff } .emotion-25 svg { - fill: #09111C; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -497,17 +497,17 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff } .emotion-27 { - color: #2E3F54; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 14px; line-height: 21px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-27:disabled { - color: #C0C7CC; + color: #a1acb4; } .emotion-27::before { @@ -558,23 +558,23 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff margin-bottom: 8px; background-color: transparent; border-style: solid; - border-color: #85939C; + border-color: #85939c; border-width: 1px; border-radius: 8px; - color: #2E3F54; + color: #2e3f54; text-overflow: ellipsis; } .emotion-29 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-29:focus:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; border-color: transparent; - background-color: #F0F1F3; + background-color: #f0f1f3; } @media not all and (min-resolution: 0.001dpcm) { @@ -586,20 +586,20 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff } .emotion-29:hover:not(:disabled) { - background-color: #F0F1F3; + background-color: #f0f1f3; } .emotion-29:valid:hover:not(:disabled) { - border-color: #007B22; - background-color: #F0F1F3; + border-color: #007b22; + background-color: #f0f1f3; } .emotion-29:valid:focus:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; border-color: transparent; - background-color: #F0F1F3; + background-color: #f0f1f3; } @media not all and (min-resolution: 0.001dpcm) { @@ -611,20 +611,20 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff } .emotion-29:disabled { - border-color: #DEE2E5; - color: #C0C7CC; + border-color: #dee2e5; + color: #a1acb4; } .emotion-29:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-29:invalid:focus:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; border-color: transparent; - background-color: #F0F1F3; + background-color: #f0f1f3; } @media not all and (min-resolution: 0.001dpcm) { @@ -636,8 +636,8 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff } .emotion-29:invalid:hover:not(:disabled) { - border-color: #D60000; - background-color: #F0F1F3; + border-color: #d60000; + background-color: #f0f1f3; } .emotion-32 { @@ -645,12 +645,12 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - color: #5A6A79; - font-family: "DM Sans",sans-serif; + color: #5a6a79; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 1.5; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; } .emotion-39 { @@ -690,7 +690,7 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff appearance: none; background-color: transparent; border-radius: 8px; - color: #3358CC; + color: #3358cc; cursor: pointer; margin-right: 20px; } @@ -701,27 +701,27 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff } .emotion-39 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-39:hover:not(:disabled) { - background-color: #ECF1FF; + background-color: #ecf1ff; } .emotion-39:active:not(:disabled) { - background-color: #D5E0FC; + background-color: #d5e0fc; } .emotion-39:disabled { - color: #C0C7CC; + color: #a1acb4; } .emotion-39:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-39:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -753,24 +753,24 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff .emotion-40 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-40::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-40::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -809,9 +809,9 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #3358CC; + background-color: #3358cc; border-radius: 8px; - color: #FFFFFF; + color: #ffffff; cursor: pointer; } @@ -821,28 +821,28 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff } .emotion-41 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-41:hover:not(:disabled) { - background-color: #254CAC; + background-color: #254cac; } .emotion-41:active:not(:disabled) { - background-color: #12387A; + background-color: #14328d; } .emotion-41:disabled { - background-color: #DEE2E5; - color: #C0C7CC; + background-color: #dee2e5; + color: #a1acb4; } .emotion-41:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-41:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -922,16 +922,16 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff .emotion-48 { margin: 0; - color: #2E3F54; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 1.5; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; } .emotion-48 svg { - fill: #2E3F54; + fill: #2e3f54; }
@@ -1222,12 +1222,12 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff @@ -1429,8 +1429,8 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = position: fixed; top: var(--headerSize); margin-top: -12px; - background: #F0F1F3; - border-bottom-color: #DEE2E5; + background: #f0f1f3; + border-bottom-color: #dee2e5; border-bottom-width: 1px; border-bottom-style: solid; z-index: 1000; @@ -1479,16 +1479,16 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = margin-bottom: 8px; background-color: transparent; border-style: solid; - border-color: #DEE2E5; + border-color: #dee2e5; border-width: 1px; border-radius: 8px; - color: #C0C7CC; + color: #a1acb4; text-overflow: ellipsis; margin-block: 0px; } .emotion-3 svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-4 { @@ -1531,11 +1531,11 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = white-space: nowrap; text-overflow: ellipsis; color: inherit; - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 1.5; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; } .emotion-7 { @@ -1578,7 +1578,7 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -1638,7 +1638,7 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = position: absolute; top: 50%; left: calc(100% - (24px / 2) - 4px); - background-color: #3358CC; + background-color: #3358cc; border-radius: 50%; opacity: 0; width: 1px; @@ -1658,22 +1658,22 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = } .emotion-15:valid:hover:not(:disabled) { - background-color: #00601A; + background-color: #00601a; opacity: 0.2; } .emotion-15:valid:hover:active:not(:disabled) { - background-color: #00601A; + background-color: #00601a; opacity: 0.4; } .emotion-15:invalid:hover:not(:disabled) { - background-color: #A90000; + background-color: #a90000; opacity: 0.2; } .emotion-15:invalid:hover:active:not(:disabled) { - background-color: #A90000; + background-color: #a90000; opacity: 0.4; } @@ -1711,17 +1711,17 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = -webkit-box-align: center; -ms-flex-align: center; align-items: center; - background-color: #3358CC; + background-color: #3358cc; border-radius: 20rem; padding-inline: 4px; } .emotion-16:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; - background-color: #3358CC; + background-color: #3358cc; } @media not all and (min-resolution: 0.001dpcm) { @@ -1754,11 +1754,11 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = } .emotion-18 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-18:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-18 svg { @@ -1772,7 +1772,7 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -1806,11 +1806,11 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = } .emotion-21 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-21:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-21 svg { @@ -1821,7 +1821,7 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = } .emotion-24 { - background-color: #FFFFFF; + background-color: #ffffff; border-radius: 50%; width: 24px; height: 24px; @@ -1835,7 +1835,7 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = } .emotion-24 svg { - fill: #09111C; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1865,17 +1865,17 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = } .emotion-26 { - color: #2E3F54; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 14px; line-height: 21px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-26:disabled { - color: #C0C7CC; + color: #a1acb4; } .emotion-26::before { @@ -1944,7 +1944,7 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = appearance: none; background-color: transparent; border-radius: 8px; - color: #3358CC; + color: #3358cc; cursor: pointer; margin-right: 20px; } @@ -1955,27 +1955,27 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = } .emotion-28 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-28:hover:not(:disabled) { - background-color: #ECF1FF; + background-color: #ecf1ff; } .emotion-28:active:not(:disabled) { - background-color: #D5E0FC; + background-color: #d5e0fc; } .emotion-28:disabled { - color: #C0C7CC; + color: #a1acb4; } .emotion-28:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-28:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -2007,24 +2007,24 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = .emotion-29 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-29::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-29::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -2063,9 +2063,9 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #3358CC; + background-color: #3358cc; border-radius: 8px; - color: #FFFFFF; + color: #ffffff; cursor: pointer; } @@ -2075,28 +2075,28 @@ exports[`SvgPreviewer should render correctly when not receiving any data 1`] = } .emotion-30 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-30:hover:not(:disabled) { - background-color: #254CAC; + background-color: #254cac; } .emotion-30:active:not(:disabled) { - background-color: #12387A; + background-color: #14328d; } .emotion-30:disabled { - background-color: #DEE2E5; - color: #C0C7CC; + background-color: #dee2e5; + color: #a1acb4; } .emotion-30:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-30:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -2333,8 +2333,8 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = position: fixed; top: var(--headerSize); margin-top: -12px; - background: #F0F1F3; - border-bottom-color: #DEE2E5; + background: #f0f1f3; + border-bottom-color: #dee2e5; border-bottom-width: 1px; border-bottom-style: solid; z-index: 1000; @@ -2383,24 +2383,24 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = margin-bottom: 8px; background-color: transparent; border-style: solid; - border-color: #85939C; + border-color: #85939c; border-width: 1px; border-radius: 8px; - color: #2E3F54; + color: #2e3f54; text-overflow: ellipsis; margin-block: 0px; } .emotion-3 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-3:focus:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; border-color: transparent; - background-color: #F0F1F3; + background-color: #f0f1f3; } @media not all and (min-resolution: 0.001dpcm) { @@ -2412,20 +2412,20 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-3:hover:not(:disabled) { - background-color: #F0F1F3; + background-color: #f0f1f3; } .emotion-3:valid:hover:not(:disabled) { - border-color: #007B22; - background-color: #F0F1F3; + border-color: #007b22; + background-color: #f0f1f3; } .emotion-3:valid:focus:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; border-color: transparent; - background-color: #F0F1F3; + background-color: #f0f1f3; } @media not all and (min-resolution: 0.001dpcm) { @@ -2437,20 +2437,20 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-3:disabled { - border-color: #DEE2E5; - color: #C0C7CC; + border-color: #dee2e5; + color: #a1acb4; } .emotion-3:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-3:invalid:focus:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; border-color: transparent; - background-color: #F0F1F3; + background-color: #f0f1f3; } @media not all and (min-resolution: 0.001dpcm) { @@ -2462,8 +2462,8 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-3:invalid:hover:not(:disabled) { - border-color: #D60000; - background-color: #F0F1F3; + border-color: #d60000; + background-color: #f0f1f3; } .emotion-4 { @@ -2505,12 +2505,12 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - color: #5A6A79; - font-family: "DM Sans",sans-serif; + color: #5a6a79; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 1.5; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; } .emotion-7 { @@ -2553,7 +2553,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -2613,7 +2613,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = position: absolute; top: 50%; left: calc(100% - (24px / 2) - 4px); - background-color: #3358CC; + background-color: #3358cc; border-radius: 50%; opacity: 0; width: 1px; @@ -2633,22 +2633,22 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-15:valid:hover:not(:disabled) { - background-color: #00601A; + background-color: #00601a; opacity: 0.2; } .emotion-15:valid:hover:active:not(:disabled) { - background-color: #00601A; + background-color: #00601a; opacity: 0.4; } .emotion-15:invalid:hover:not(:disabled) { - background-color: #A90000; + background-color: #a90000; opacity: 0.2; } .emotion-15:invalid:hover:active:not(:disabled) { - background-color: #A90000; + background-color: #a90000; opacity: 0.4; } @@ -2686,17 +2686,17 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = -webkit-box-align: center; -ms-flex-align: center; align-items: center; - background-color: #3358CC; + background-color: #3358cc; border-radius: 20rem; padding-inline: 4px; } .emotion-16:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; - background-color: #3358CC; + background-color: #3358cc; } @media not all and (min-resolution: 0.001dpcm) { @@ -2729,11 +2729,11 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-18 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-18:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-18 svg { @@ -2747,7 +2747,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E3F54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -2781,11 +2781,11 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-21 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-21:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-21 svg { @@ -2796,7 +2796,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-24 { - background-color: #FFFFFF; + background-color: #ffffff; border-radius: 50%; width: 24px; height: 24px; @@ -2810,7 +2810,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-24 svg { - fill: #09111C; + fill: #09111c; } @media screen and (prefers-reduced-motion: no-preference) { @@ -2840,17 +2840,17 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-26 { - color: #2E3F54; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 14px; line-height: 21px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-26:disabled { - color: #C0C7CC; + color: #a1acb4; } .emotion-26::before { @@ -2901,23 +2901,23 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = margin-bottom: 8px; background-color: transparent; border-style: solid; - border-color: #85939C; + border-color: #85939c; border-width: 1px; border-radius: 8px; - color: #2E3F54; + color: #2e3f54; text-overflow: ellipsis; } .emotion-28 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-28:focus:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; border-color: transparent; - background-color: #F0F1F3; + background-color: #f0f1f3; } @media not all and (min-resolution: 0.001dpcm) { @@ -2929,20 +2929,20 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-28:hover:not(:disabled) { - background-color: #F0F1F3; + background-color: #f0f1f3; } .emotion-28:valid:hover:not(:disabled) { - border-color: #007B22; - background-color: #F0F1F3; + border-color: #007b22; + background-color: #f0f1f3; } .emotion-28:valid:focus:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; border-color: transparent; - background-color: #F0F1F3; + background-color: #f0f1f3; } @media not all and (min-resolution: 0.001dpcm) { @@ -2954,20 +2954,20 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-28:disabled { - border-color: #DEE2E5; - color: #C0C7CC; + border-color: #dee2e5; + color: #a1acb4; } .emotion-28:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-28:invalid:focus:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; border-color: transparent; - background-color: #F0F1F3; + background-color: #f0f1f3; } @media not all and (min-resolution: 0.001dpcm) { @@ -2979,8 +2979,8 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-28:invalid:hover:not(:disabled) { - border-color: #D60000; - background-color: #F0F1F3; + border-color: #d60000; + background-color: #f0f1f3; } .emotion-38 { @@ -3020,7 +3020,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = appearance: none; background-color: transparent; border-radius: 8px; - color: #3358CC; + color: #3358cc; cursor: pointer; margin-right: 20px; } @@ -3031,27 +3031,27 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-38 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-38:hover:not(:disabled) { - background-color: #ECF1FF; + background-color: #ecf1ff; } .emotion-38:active:not(:disabled) { - background-color: #D5E0FC; + background-color: #d5e0fc; } .emotion-38:disabled { - color: #C0C7CC; + color: #a1acb4; } .emotion-38:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-38:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -3083,24 +3083,24 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = .emotion-39 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; display: inline-block; } .emotion-39::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-39::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -3139,9 +3139,9 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #3358CC; + background-color: #3358cc; border-radius: 8px; - color: #FFFFFF; + color: #ffffff; cursor: pointer; } @@ -3151,28 +3151,28 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-40 svg { - fill: #FFFFFF; + fill: #ffffff; } .emotion-40:hover:not(:disabled) { - background-color: #254CAC; + background-color: #254cac; } .emotion-40:active:not(:disabled) { - background-color: #12387A; + background-color: #14328d; } .emotion-40:disabled { - background-color: #DEE2E5; - color: #C0C7CC; + background-color: #dee2e5; + color: #a1acb4; } .emotion-40:disabled svg { - fill: #C0C7CC; + fill: #a1acb4; } .emotion-40:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -3252,16 +3252,16 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = .emotion-47 { margin: 0; - color: #2E3F54; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 1.5; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; } .emotion-47 svg { - fill: #2E3F54; + fill: #2e3f54; }
@@ -3543,12 +3543,12 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = diff --git a/site/components/svg-previewer/colors-theme-list.tsx b/site/components/svg-previewer/colors-theme-list.tsx index b7105c0780..03b6ccca32 100644 --- a/site/components/svg-previewer/colors-theme-list.tsx +++ b/site/components/svg-previewer/colors-theme-list.tsx @@ -6,8 +6,6 @@ import { docsThemeLight, foundationsThemeDark, foundationsThemeLight, - guidesThemeDark, - guidesThemeLight, patternsThemeDark, patternsThemeLight, } from '../../theme/doc-theme'; @@ -44,14 +42,6 @@ const accessibilityThemeDarkColors = { colors: accessibilityThemeDark.colors, }; -const guidesThemeLightColors = { - colors: guidesThemeLight.colors, -}; - -const guidesThemeDarkColors = { - colors: guidesThemeDark.colors, -}; - const compiledDocsThemeLightColors = compileTheme( docsThemeLightColors as UncompiledTheme, ); @@ -84,14 +74,6 @@ const compiledAccessibilityThemeDarkColors = compileTheme( accessibilityThemeDarkColors as UncompiledTheme, ); -const compiledGuideThemeLightColors = compileTheme( - guidesThemeLightColors as UncompiledTheme, -); - -const compiledGuideThemeDarkColors = compileTheme( - guidesThemeDarkColors as UncompiledTheme, -); - export const themeList = [ { name: 'Docs Theme', @@ -113,16 +95,10 @@ export const themeList = [ defaultLight: compiledAccessibilityThemeLightColors, dark: compiledAccessibilityThemeDarkColors, }, - { - name: 'Guide Theme', - defaultLight: compiledGuideThemeLightColors, - dark: compiledGuideThemeDarkColors, - }, ]; export type ThemeNames = | 'Docs Theme' | 'Foundations Theme' | 'Patterns Theme' - | 'Accessibility Theme' - | 'Guide Theme'; + | 'Accessibility Theme'; diff --git a/site/components/table-of-contents/__tests__/__snapshots__/table-of-contents.test.tsx.snap b/site/components/table-of-contents/__tests__/__snapshots__/table-of-contents.test.tsx.snap index 2c36f00d6f..25aeb213ae 100644 --- a/site/components/table-of-contents/__tests__/__snapshots__/table-of-contents.test.tsx.snap +++ b/site/components/table-of-contents/__tests__/__snapshots__/table-of-contents.test.tsx.snap @@ -28,15 +28,15 @@ exports[`TableOfContent should render with no errors 1`] = ` .emotion-2 { display: inline-block; - color: #5A6A79; + color: #5a6a79; border-style: solid; - border-color: #DEE2E5; + border-color: #dee2e5; border-width: 2px; -webkit-text-decoration: none; text-decoration: none; - color: #09111C; + color: #09111c; border-style: solid; - border-color: #3358CC; + border-color: #3358cc; border-width: 2px; -webkit-text-decoration: none; text-decoration: none; @@ -63,11 +63,11 @@ exports[`TableOfContent should render with no errors 1`] = ` } .emotion-2:hover:not(:disabled) { - color: #2E3F54; + color: #2e3f54; } .emotion-2:active:not(:disabled) { - color: #2E3F54; + color: #2e3f54; } .emotion-3 { @@ -91,19 +91,19 @@ exports[`TableOfContent should render with no errors 1`] = ` .emotion-4 { margin: 0; - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 12px; line-height: 1.5; font-weight: 600; - letter-spacing: 0; + letter-spacing: 0em; display: block; } .emotion-5 { display: inline-block; - color: #5A6A79; + color: #5a6a79; border-style: solid; - border-color: #DEE2E5; + border-color: #dee2e5; border-width: 2px; -webkit-text-decoration: none; text-decoration: none; @@ -130,11 +130,11 @@ exports[`TableOfContent should render with no errors 1`] = ` } .emotion-5:hover:not(:disabled) { - color: #2E3F54; + color: #2e3f54; } .emotion-5:active:not(:disabled) { - color: #2E3F54; + color: #2e3f54; }
.emotion-0 { margin: 0; - color: #2E3F54; - font-family: "Poppins",sans-serif; + color: #2e3f54; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 30px; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-0 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-0::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-0::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -72,14 +72,14 @@ exports[`UnpackContent renders fragment with text and block components 1`] = ` .emotion-3 { margin-right: 8px; - color: #2E3F54; + color: #2e3f54; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .emotion-3 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-3 svg, @@ -91,8 +91,8 @@ exports[`UnpackContent renders fragment with text and block components 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - color: #2E3F54; - fill: #2E3F54; + color: #2e3f54; + fill: #2e3f54; vertical-align: unset; display: inline-block; } @@ -116,8 +116,8 @@ exports[`UnpackContent renders fragment with text and block components 1`] = ` .emotion-4.emotion-4 { width: 8px; height: 8px; - color: #2E3F54; - fill: #2E3F54; + color: #2e3f54; + fill: #2e3f54; } @media screen and (prefers-reduced-motion: no-preference) { @@ -138,17 +138,17 @@ exports[`UnpackContent renders fragment with text and block components 1`] = ` .emotion-6 { margin: 0; - color: #2E3F54; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 14px; line-height: 21px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-6 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-6::before { @@ -272,28 +272,28 @@ exports[`UnpackContent renders fragment with text and block components 1`] = ` .emotion-0 { margin: 0; - color: #2E3F54; - font-family: "Poppins",sans-serif; + color: #2e3f54; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 30px; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-0 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-0::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-0::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -309,34 +309,34 @@ exports[`UnpackContent renders fragment with text and inline components 1`] = ` .emotion-0 { margin: 0; - color: #2E3F54; - font-family: "Poppins",sans-serif; + color: #2e3f54; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 30px; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-0 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-0::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-0::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } .emotion-1 { display: inline-block; - color: #3358CC; + color: #3358cc; -webkit-text-decoration: underline; text-decoration: underline; } @@ -358,51 +358,51 @@ exports[`UnpackContent renders fragment with text and inline components 1`] = ` } .emotion-1 svg { - fill: #3358CC; + fill: #3358cc; } .emotion-1:hover:not(:disabled) { - color: #254CAC; + color: #254cac; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-1:hover:not(:disabled) svg { - fill: #254CAC; + fill: #254cac; } .emotion-1:active:not(:disabled) { - color: #12387A; + color: #14328d; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-1:active:not(:disabled) svg { - fill: #12387A; + fill: #14328d; } .emotion-1:visited:not(:disabled) { - color: #6454E3; + color: #6454e3; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-1:visited:not(:disabled) svg { - fill: #6454E3; + fill: #6454e3; } .emotion-1:visited:hover:not(:disabled) { - color: #6454E3; + color: #6454e3; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-1:visited:hover:not(:disabled) svg { - fill: #6454E3; + fill: #6454e3; } .emotion-1:focus-visible:not(:disabled) { - outline-color: #3768FB; + outline-color: #3768fb; outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -442,7 +442,7 @@ exports[`UnpackContent renders fragment with text and inline components 1`] = ` .emotion-4 { background-color: rgba(27, 31, 35, 0.05); - color: #5A6A79; + color: #5a6a79; border-radius: 3px; font-size: 85%; margin: 0; @@ -482,28 +482,28 @@ exports[`UnpackContent renders simple text 1`] = ` .emotion-0 { margin: 0; - color: #2E3F54; - font-family: "Poppins",sans-serif; + color: #2e3f54; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 30px; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-0 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-0::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-0::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } diff --git a/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap b/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap index 5f7ef25579..344651f8b7 100644 --- a/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap +++ b/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap @@ -35,8 +35,8 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` width: 32px; height: 32px; min-height: 32px; - padding-inline: 0; - padding-block: 0; + padding-inline: 0px; + padding-block: 0px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; @@ -49,8 +49,8 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` -ms-appearance: none; appearance: none; border-style: solid; - border-color: #D60000; - background-color: #FEECEC; + border-color: #d60000; + background-color: #feecec; border-radius: 50%; border-width: 1px; } @@ -61,14 +61,14 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` } .emotion-2 svg { - fill: #D60000; + fill: #d60000; } .emotion-3 { display: inline-block; vertical-align: middle; overflow: hidden; - fill: #D60000; + fill: #d60000; vertical-align: unset; display: inline-block; } @@ -92,7 +92,7 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` .emotion-3.emotion-3 { width: 24px; height: 24px; - fill: #D60000; + fill: #d60000; } @media screen and (prefers-reduced-motion: no-preference) { @@ -130,8 +130,8 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` .emotion-7 { box-sizing: border-box; - padding-inline: 0; - padding-block: 0; + padding-inline: 0px; + padding-block: 0px; } .emotion-7 a:not(.nk-card-link) { @@ -145,7 +145,7 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` .emotion-9 { border-style: solid; - border-color: #D60000; + border-color: #d60000; border-width: 4px; border-radius: 4px; border-width: 0px; @@ -155,23 +155,23 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` } .emotion-11 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-11::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-11::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -179,26 +179,26 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` display: inline; font: inherit; margin: 0; - color: #D60000; + color: #d60000; } .emotion-12 svg { - fill: #D60000; + fill: #d60000; } .emotion-14 { margin: 0; - color: #2E3F54; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-14 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-14::before { @@ -322,8 +322,8 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` width: 32px; height: 32px; min-height: 32px; - padding-inline: 0; - padding-block: 0; + padding-inline: 0px; + padding-block: 0px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; @@ -336,8 +336,8 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` -ms-appearance: none; appearance: none; border-style: solid; - border-color: #007B22; - background-color: #E5F4EA; + border-color: #007b22; + background-color: #e5f4ea; border-radius: 50%; border-width: 1px; } @@ -348,14 +348,14 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` } .emotion-2 svg { - fill: #007B22; + fill: #007b22; } .emotion-3 { display: inline-block; vertical-align: middle; overflow: hidden; - fill: #007B22; + fill: #007b22; vertical-align: unset; display: inline-block; } @@ -379,7 +379,7 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` .emotion-3.emotion-3 { width: 24px; height: 24px; - fill: #007B22; + fill: #007b22; } @media screen and (prefers-reduced-motion: no-preference) { @@ -417,8 +417,8 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` .emotion-7 { box-sizing: border-box; - padding-inline: 0; - padding-block: 0; + padding-inline: 0px; + padding-block: 0px; } .emotion-7 a:not(.nk-card-link) { @@ -432,7 +432,7 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` .emotion-9 { border-style: solid; - border-color: #007B22; + border-color: #007b22; border-width: 4px; border-radius: 4px; border-width: 0px; @@ -442,23 +442,23 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` } .emotion-11 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-11::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-11::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } @@ -466,26 +466,26 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` display: inline; font: inherit; margin: 0; - color: #007B22; + color: #007b22; } .emotion-12 svg { - fill: #007B22; + fill: #007b22; } .emotion-14 { margin: 0; - color: #2E3F54; - font-family: "DM Sans",sans-serif; + color: #2e3f54; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-14 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-14::before { diff --git a/site/templates/foundation-page-template/__tests__/__snapshots__/foundation-page-template.test.tsx.snap b/site/templates/foundation-page-template/__tests__/__snapshots__/foundation-page-template.test.tsx.snap index b213ca4dda..7d2b8f07f8 100644 --- a/site/templates/foundation-page-template/__tests__/__snapshots__/foundation-page-template.test.tsx.snap +++ b/site/templates/foundation-page-template/__tests__/__snapshots__/foundation-page-template.test.tsx.snap @@ -3,36 +3,40 @@ exports[`Foundation Page Template renders with feature card 1`] = ` .emotion-0 { - --color-inkBrand010: #6454E3; - --color-inkBrand020: #37239C; - --color-interfaceBrand010: #6454E3; - --color-interfaceBrand020: #37239C; - --color-interfaceBrand030: #6454E3; - --color-interfaceBrand040: #6454E3; - --color-interfaceBrand050: #37239C; - --color-illustrationPalette010: #EFF0FF; - --color-illustrationPalette020: #C0C2FC; - --color-illustrationPalette030: #A3A3FB; - --color-illustrationPalette040: #8883F6; + --color-inkBrand010: #6454e3; + --color-inkBrand020: #37239c; + --color-interfaceBrand010: #6454e3; + --color-interfaceBrand020: #37239c; + --color-illustrationPalette010: #eff0ff; + --color-illustrationPalette020: #c0c2fc; + --color-illustrationPalette030: #a3a3fb; + --color-illustrationPalette040: #8883f6; --color-illustrationPalette050: #6e61e4; - --color-illustrationPalette060: #6454E3; - --color-illustrationPalette070: #4C33CC; - --color-illustrationPalette080: #37239C; + --color-illustrationPalette060: #6454e3; + --color-illustrationPalette070: #4c33cc; + --color-illustrationPalette080: #37239c; --color-illustrationPalette090: #231668; - --color-illustrationPalette100: #0F0936; - --color-illustrationHighlight010: #8883F6; - --color-illustrationInterface020: #DFE0FE; - --color-illustrationInterface030: #C0C2FC; - --color-illustrationInterface040: #A3A3FB; - --color-illustrationInterface050: #8883F6; + --color-illustrationPalette100: #0f0936; + --color-illustrationHighlight010: #8883f6; + --color-illustrationBackground020: #f1f1f1; + --color-illustrationBorder010: #e2e2e2; + --color-illustrationBorder020: #c6c6c6; + --color-illustrationDisabled: #e2e2e2; + --color-illustrationInterface020: #dfe0fe; + --color-illustrationInterface030: #c0c2fc; + --color-illustrationInterface040: #a3a3fb; + --color-illustrationInterface050: #8883f6; --color-illustrationInterface060: #6e61e4; - --color-illustrationInterface070: #6454E3; - --color-illustrationInterface080: #4C33CC; - --color-illustrationInterface090: #37239C; + --color-illustrationInterface070: #6454e3; + --color-illustrationInterface080: #4c33cc; + --color-illustrationInterface090: #37239c; --color-illustrationInterface100: #231668; - --color-illustrationAnatomySubtle: #C0C2FC; - --color-illustrationAnatomyBorder010: #C0C2FC; - --color-illustrationAnatomyBorder020: #4C33CC; + --color-illustrationAnatomySubtle: #c0c2fc; + --color-illustrationAnatomyBorder010: #c0c2fc; + --color-illustrationAnatomyBorder020: #4c33cc; + --color-interfaceBrand050: #37239c; + --color-interfaceBrand040: #6454e3; + --color-interfaceBrand030: #6454e3; } .emotion-1 { @@ -161,36 +165,40 @@ exports[`Foundation Page Template renders with feature card 1`] = ` exports[`Foundation Page Template renders with mandatory props only 1`] = ` .emotion-0 { - --color-inkBrand010: #6454E3; - --color-inkBrand020: #37239C; - --color-interfaceBrand010: #6454E3; - --color-interfaceBrand020: #37239C; - --color-interfaceBrand030: #6454E3; - --color-interfaceBrand040: #6454E3; - --color-interfaceBrand050: #37239C; - --color-illustrationPalette010: #EFF0FF; - --color-illustrationPalette020: #C0C2FC; - --color-illustrationPalette030: #A3A3FB; - --color-illustrationPalette040: #8883F6; + --color-inkBrand010: #6454e3; + --color-inkBrand020: #37239c; + --color-interfaceBrand010: #6454e3; + --color-interfaceBrand020: #37239c; + --color-illustrationPalette010: #eff0ff; + --color-illustrationPalette020: #c0c2fc; + --color-illustrationPalette030: #a3a3fb; + --color-illustrationPalette040: #8883f6; --color-illustrationPalette050: #6e61e4; - --color-illustrationPalette060: #6454E3; - --color-illustrationPalette070: #4C33CC; - --color-illustrationPalette080: #37239C; + --color-illustrationPalette060: #6454e3; + --color-illustrationPalette070: #4c33cc; + --color-illustrationPalette080: #37239c; --color-illustrationPalette090: #231668; - --color-illustrationPalette100: #0F0936; - --color-illustrationHighlight010: #8883F6; - --color-illustrationInterface020: #DFE0FE; - --color-illustrationInterface030: #C0C2FC; - --color-illustrationInterface040: #A3A3FB; - --color-illustrationInterface050: #8883F6; + --color-illustrationPalette100: #0f0936; + --color-illustrationHighlight010: #8883f6; + --color-illustrationBackground020: #f1f1f1; + --color-illustrationBorder010: #e2e2e2; + --color-illustrationBorder020: #c6c6c6; + --color-illustrationDisabled: #e2e2e2; + --color-illustrationInterface020: #dfe0fe; + --color-illustrationInterface030: #c0c2fc; + --color-illustrationInterface040: #a3a3fb; + --color-illustrationInterface050: #8883f6; --color-illustrationInterface060: #6e61e4; - --color-illustrationInterface070: #6454E3; - --color-illustrationInterface080: #4C33CC; - --color-illustrationInterface090: #37239C; + --color-illustrationInterface070: #6454e3; + --color-illustrationInterface080: #4c33cc; + --color-illustrationInterface090: #37239c; --color-illustrationInterface100: #231668; - --color-illustrationAnatomySubtle: #C0C2FC; - --color-illustrationAnatomyBorder010: #C0C2FC; - --color-illustrationAnatomyBorder020: #4C33CC; + --color-illustrationAnatomySubtle: #c0c2fc; + --color-illustrationAnatomyBorder010: #c0c2fc; + --color-illustrationAnatomyBorder020: #4c33cc; + --color-interfaceBrand050: #37239c; + --color-interfaceBrand040: #6454e3; + --color-interfaceBrand030: #6454e3; } .emotion-1 { diff --git a/site/templates/guide-page-template/guide-page-template.tsx b/site/templates/guide-page-template/guide-page-template.tsx index 8fd95a0545..840b319507 100644 --- a/site/templates/guide-page-template/guide-page-template.tsx +++ b/site/templates/guide-page-template/guide-page-template.tsx @@ -1,8 +1,6 @@ import React from 'react'; -import {ThemeProvider} from 'newskit'; import Layout from '../../components/layout'; import {PageTemplate} from '../page-template'; -import {guidesThemeLight, guidesThemeDark} from '../../theme/doc-theme'; import {OnwardJourneySectionProps} from '../template-sections'; import {GuidePageTemplateProps} from './types'; @@ -23,31 +21,22 @@ export const GuidePageTemplate: React.FC = ({ ...rest }) => ( - {({themeMode}) => ( - <> - - - {children} - - - - )} + + {children} + ); diff --git a/site/templates/pattern-page-template/__tests__/__snapshots__/pattern-page-template.test.tsx.snap b/site/templates/pattern-page-template/__tests__/__snapshots__/pattern-page-template.test.tsx.snap index e469985313..825cdfd1f7 100644 --- a/site/templates/pattern-page-template/__tests__/__snapshots__/pattern-page-template.test.tsx.snap +++ b/site/templates/pattern-page-template/__tests__/__snapshots__/pattern-page-template.test.tsx.snap @@ -5,34 +5,38 @@ exports[`Foundation Page Template renders with feature card 1`] = ` .emotion-0 { --color-inkBrand010: #017582; --color-inkBrand020: #004249; - --color-interfaceBrand010: #C7E7EA; - --color-interfaceBrand020: #97D0D6; - --color-interfaceBrand030: #017582; - --color-interfaceBrand040: #005B65; - --color-interfaceBrand050: #004249; - --color-illustrationPalette010: #E6F4F6; - --color-illustrationPalette020: #C7E7EA; - --color-illustrationPalette030: #97D0D6; - --color-illustrationPalette040: #5EB8C0; - --color-illustrationPalette050: #289FAB; + --color-interfaceBrand010: #c7e7ea; + --color-interfaceBrand020: #97d0d6; + --color-illustrationPalette010: #e6f4f6; + --color-illustrationPalette020: #c7e7ea; + --color-illustrationPalette030: #97d0d6; + --color-illustrationPalette040: #5eb8c0; + --color-illustrationPalette050: #289fab; --color-illustrationPalette060: #06808e; --color-illustrationPalette070: #017582; - --color-illustrationPalette080: #005B65; + --color-illustrationPalette080: #005b65; --color-illustrationPalette090: #004249; - --color-illustrationPalette100: #002B30; - --color-illustrationHighlight010: #289FAB; - --color-illustrationInterface020: #E6F4F6; - --color-illustrationInterface030: #C7E7EA; - --color-illustrationInterface040: #97D0D6; - --color-illustrationInterface050: #5EB8C0; - --color-illustrationInterface060: #289FAB; + --color-illustrationPalette100: #002b30; + --color-illustrationHighlight010: #289fab; + --color-illustrationBackground020: #f1f1f1; + --color-illustrationBorder010: #e2e2e2; + --color-illustrationBorder020: #c6c6c6; + --color-illustrationDisabled: #e2e2e2; + --color-illustrationInterface020: #e6f4f6; + --color-illustrationInterface030: #c7e7ea; + --color-illustrationInterface040: #97d0d6; + --color-illustrationInterface050: #5eb8c0; + --color-illustrationInterface060: #289fab; --color-illustrationInterface070: #06808e; --color-illustrationInterface080: #017582; - --color-illustrationInterface090: #005B65; + --color-illustrationInterface090: #005b65; --color-illustrationInterface100: #004249; - --color-illustrationAnatomySubtle: #97D0D6; - --color-illustrationAnatomyBorder010: #97D0D6; - --color-illustrationAnatomyBorder020: #005B65; + --color-illustrationAnatomySubtle: #97d0d6; + --color-illustrationAnatomyBorder010: #97d0d6; + --color-illustrationAnatomyBorder020: #005b65; + --color-interfaceBrand050: #004249; + --color-interfaceBrand040: #005b65; + --color-interfaceBrand030: #017582; } .emotion-1 { @@ -163,34 +167,38 @@ exports[`Foundation Page Template renders with mandatory props only 1`] = ` .emotion-0 { --color-inkBrand010: #017582; --color-inkBrand020: #004249; - --color-interfaceBrand010: #C7E7EA; - --color-interfaceBrand020: #97D0D6; - --color-interfaceBrand030: #017582; - --color-interfaceBrand040: #005B65; - --color-interfaceBrand050: #004249; - --color-illustrationPalette010: #E6F4F6; - --color-illustrationPalette020: #C7E7EA; - --color-illustrationPalette030: #97D0D6; - --color-illustrationPalette040: #5EB8C0; - --color-illustrationPalette050: #289FAB; + --color-interfaceBrand010: #c7e7ea; + --color-interfaceBrand020: #97d0d6; + --color-illustrationPalette010: #e6f4f6; + --color-illustrationPalette020: #c7e7ea; + --color-illustrationPalette030: #97d0d6; + --color-illustrationPalette040: #5eb8c0; + --color-illustrationPalette050: #289fab; --color-illustrationPalette060: #06808e; --color-illustrationPalette070: #017582; - --color-illustrationPalette080: #005B65; + --color-illustrationPalette080: #005b65; --color-illustrationPalette090: #004249; - --color-illustrationPalette100: #002B30; - --color-illustrationHighlight010: #289FAB; - --color-illustrationInterface020: #E6F4F6; - --color-illustrationInterface030: #C7E7EA; - --color-illustrationInterface040: #97D0D6; - --color-illustrationInterface050: #5EB8C0; - --color-illustrationInterface060: #289FAB; + --color-illustrationPalette100: #002b30; + --color-illustrationHighlight010: #289fab; + --color-illustrationBackground020: #f1f1f1; + --color-illustrationBorder010: #e2e2e2; + --color-illustrationBorder020: #c6c6c6; + --color-illustrationDisabled: #e2e2e2; + --color-illustrationInterface020: #e6f4f6; + --color-illustrationInterface030: #c7e7ea; + --color-illustrationInterface040: #97d0d6; + --color-illustrationInterface050: #5eb8c0; + --color-illustrationInterface060: #289fab; --color-illustrationInterface070: #06808e; --color-illustrationInterface080: #017582; - --color-illustrationInterface090: #005B65; + --color-illustrationInterface090: #005b65; --color-illustrationInterface100: #004249; - --color-illustrationAnatomySubtle: #97D0D6; - --color-illustrationAnatomyBorder010: #97D0D6; - --color-illustrationAnatomyBorder020: #005B65; + --color-illustrationAnatomySubtle: #97d0d6; + --color-illustrationAnatomyBorder010: #97d0d6; + --color-illustrationAnatomyBorder020: #005b65; + --color-interfaceBrand050: #004249; + --color-interfaceBrand040: #005b65; + --color-interfaceBrand030: #017582; } .emotion-1 { diff --git a/site/templates/template-sections/__tests__/__snapshots__/accessibility-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/accessibility-section.test.tsx.snap index 9e418f1b84..ad9f32c799 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/accessibility-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/accessibility-section.test.tsx.snap @@ -35,10 +35,10 @@ exports[`AccessibilitySection renders section as expected 1`] = ` -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; - padding-inline: 0; - padding-block: 0; - padding-inline: 0; - padding-block: 0; + padding-inline: 0px; + padding-block: 0px; + padding-inline: 0px; + padding-block: 0px; background-color: transparent; } @@ -51,46 +51,46 @@ exports[`AccessibilitySection renders section as expected 1`] = ` @media screen and (max-width: 767px) { .emotion-4 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 28px; line-height: 31.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-4::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-4::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) { .emotion-4 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-4::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-4::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -99,11 +99,11 @@ exports[`AccessibilitySection renders section as expected 1`] = ` display: inline; font: inherit; margin: 0; - color: #09111C; + color: #09111c; } .emotion-5 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 1023px) { @@ -120,28 +120,28 @@ exports[`AccessibilitySection renders section as expected 1`] = ` .emotion-7 { margin: 0; - color: #2E3F54; - font-family: "Poppins",sans-serif; + color: #2e3f54; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 30px; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-7 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-7::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-7::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -163,76 +163,76 @@ exports[`AccessibilitySection renders section as expected 1`] = ` .emotion-10 { margin: 0; - color: #09111C; + color: #09111c; display: inline-block; } .emotion-10 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 1439px) { .emotion-10 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 22.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-10::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-10::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 1440px) { .emotion-10 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 24px; line-height: 27px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-10::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-10::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } .emotion-12 { margin: 0; - color: #2E3F54; + color: #2e3f54; } .emotion-12 svg { - fill: #2E3F54; + fill: #2e3f54; } @media screen and (max-width: 1439px) { .emotion-12 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -251,11 +251,11 @@ exports[`AccessibilitySection renders section as expected 1`] = ` @media screen and (min-width: 1440px) { .emotion-12 { - font-family: "DM Sans",sans-serif; + font-family: DM Sans,sans-serif; font-size: 18px; line-height: 27px; font-weight: 400; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } @@ -563,7 +563,7 @@ exports[`AccessibilitySection renders section as expected 1`] = ` .emotion-1 { border-style: solid; - border-color: #DEE2E5; + border-color: #dee2e5; border-width: 1px; border-width: 0px; margin: 0; diff --git a/site/templates/template-sections/__tests__/__snapshots__/anatomy-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/anatomy-section.test.tsx.snap index 863ba1701a..8daacb46ac 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/anatomy-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/anatomy-section.test.tsx.snap @@ -35,10 +35,10 @@ exports[`AnatomySection renders section as expected 1`] = ` -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; - padding-inline: 0; - padding-block: 0; - padding-inline: 0; - padding-block: 0; + padding-inline: 0px; + padding-block: 0px; + padding-inline: 0px; + padding-block: 0px; background-color: transparent; } @@ -51,46 +51,46 @@ exports[`AnatomySection renders section as expected 1`] = ` @media screen and (max-width: 767px) { .emotion-4 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 28px; line-height: 31.5px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-4::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-4::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @media screen and (min-width: 768px) { .emotion-4 { - font-family: "Poppins",sans-serif; + font-family: Poppins,sans-serif; font-size: 32px; line-height: 36px; font-weight: 700; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-4::before { content: ''; - margin-bottom: -0.2155em; + margin-bottom: -0.2035em; display: block; } .emotion-4::after { content: ''; - margin-top: -0.2125em; + margin-top: -0.2215em; display: block; } } @@ -99,11 +99,11 @@ exports[`AnatomySection renders section as expected 1`] = ` display: inline; font: inherit; margin: 0; - color: #09111C; + color: #09111c; } .emotion-5 svg { - fill: #09111C; + fill: #09111c; } @media screen and (max-width: 1023px) { @@ -120,28 +120,28 @@ exports[`AnatomySection renders section as expected 1`] = ` .emotion-7 { margin: 0; - color: #2E3F54; - font-family: "Poppins",sans-serif; + color: #2e3f54; + font-family: Poppins,sans-serif; font-size: 20px; line-height: 30px; font-weight: 500; - letter-spacing: 0; + letter-spacing: 0em; padding: 0.5px 0px; } .emotion-7 svg { - fill: #2E3F54; + fill: #2e3f54; } .emotion-7::before { content: ''; - margin-bottom: -0.403em; + margin-bottom: -0.391em; display: block; } .emotion-7::after { content: ''; - margin-top: -0.4em; + margin-top: -0.409em; display: block; } @@ -150,7 +150,7 @@ exports[`AnatomySection renders section as expected 1`] = ` } .emotion-9 { - margin-bottom: 0; + margin-bottom: 0px; }
{ ([ - ['docsThemeLight', docsThemeLight, undefined], - ['docsThemeDark', docsThemeDark, darkOverrides], - ['foundationsThemeLight', foundationsThemeLight, foundationsLightOverrides], - ['foundationsThemeDark', foundationsThemeDark, foundationsDarkOverrides], - ['patternsThemeLight', patternsThemeLight, patternsLightOverrides], - ['patternsThemeDark', patternsThemeDark, patternsDarkOverrides], - [ - 'accessibilityThemeLight', - accessibilityThemeLight, - accessibilityLightOverrides, - ], - [ - 'accessibilityThemeDark', - accessibilityThemeDark, - accessibilityDarkOverrides, - ], - ] as Test[]).forEach(([themeName, theme, themeOverrides]) => { + ['docsThemeLight', docsThemeLight], + ['docsThemeDark', docsThemeDark], + ['foundationsThemeLight', foundationsThemeLight], + ['foundationsThemeDark', foundationsThemeDark], + ['patternsThemeLight', patternsThemeLight], + ['patternsThemeDark', patternsThemeDark], + ['accessibilityThemeLight', accessibilityThemeLight], + ['accessibilityThemeDark', accessibilityThemeDark], + ] as Test[]).forEach(([themeName, theme]) => { it(`should match expected snapshot for ${themeName}`, () => { expect(theme).toMatchSnapshot(); }); @@ -53,15 +33,5 @@ describe('Docs theme', () => { expect(errorLogger).not.toHaveBeenCalled(); }); - - it(`should not override ${themeName} uneccessarily`, () => { - const warningLogger = jest.fn(); - createTheme({ - overrides: themeOverrides, - checkOverrides: true, - warningLogger, - }); - expect(warningLogger).not.toHaveBeenCalled(); - }); }); }); diff --git a/site/theme/colors-dark.json b/site/theme/colors-dark.json deleted file mode 100644 index b7992e273c..0000000000 --- a/site/theme/colors-dark.json +++ /dev/null @@ -1,101 +0,0 @@ -{ - "colors": { - "inkBase": "{{colors.darkBlue020}}", - "inkContrast": "{{colors.white}}", - "inkSubtle": "{{colors.darkBlue030}}", - "inkNonEssential": "{{colors.darkBlue050}}", - "inkInverse": "{{colors.darkBlue100}}", - "inkPositive": "{{colors.green050}}", - "inkNegative": "{{colors.red050}}", - "inkNotice": "{{colors.darkBlue030}}", - "inkInformative": "{{colors.teal050}}", - "inkBrand010": "{{colors.blue030}}", - "inkBrand020": "{{colors.blue050}}", - "interfaceBackground": "{{colors.darkBlue100}}", - "interface010": "{{colors.darkBlue095}}", - "interface020": "{{colors.darkBlue095}}", - "interface030": "{{colors.darkBlue090}}", - "interface040": "{{colors.darkBlue090}}", - "interface050": "{{colors.darkBlue080}}", - "interface060": "{{colors.darkBlue010}}", - "interfacePositive010": "{{colors.green050}}", - "interfacePositive020": "{{colors.green090}}", - "interfaceNegative010": "{{colors.red050}}", - "interfaceNegative020": "{{colors.red090}}", - "interfaceNotice010": "{{colors.darkBlue030}}", - "interfaceNotice020": "{{colors.darkBlue080}}", - "interfaceInformative010": "{{colors.teal050}}", - "interfaceInformative020": "{{colors.teal090}}", - "interfaceNeutral010": "{{colors.darkBlue030}}", - "interfaceNeutral020": "{{colors.darkBlue080}}", - "interfaceSkeleton010": "{{colors.darkBlue090}}", - "interfaceSkeleton020": "{{colors.darkBlue090}}", - "interactivePrimary010": "{{colors.darkBlue090}}", - "interactivePrimary020": "{{colors.darkBlue080}}", - "interactivePrimary030": "{{colors.blue050}}", - "interactivePrimary040": "{{colors.blue040}}", - "interactivePrimary050": "{{colors.blue030}}", - "interactiveSecondary010": "{{colors.darkBlue090}}", - "interactiveSecondary020": "{{colors.darkBlue080}}", - "interactiveSecondary030": "{{colors.darkBlue050}}", - "interactiveSecondary040": "{{colors.darkBlue030}}", - "interactiveSecondary050": "{{colors.darkBlue030}}", - "interactivePositive010": "{{colors.green090}}", - "interactivePositive020": "{{colors.green080}}", - "interactivePositive030": "{{colors.green050}}", - "interactivePositive040": "{{colors.green040}}", - "interactivePositive050": "{{colors.green030}}", - "interactiveNegative010": "{{colors.red100}}", - "interactiveNegative020": "{{colors.red080}}", - "interactiveNegative030": "{{colors.red050}}", - "interactiveNegative040": "{{colors.red040}}", - "interactiveNegative050": "{{colors.red030}}", - "interactiveInverse010": "{{colors.blackTint010}}", - "interactiveInverse020": "{{colors.blackTint020}}", - "interactiveInverse030": "{{colors.blackTint090}}", - "interactiveInverse040": "{{colors.blackTint070}}", - "interactiveInverse050": "{{colors.blackTint080}}", - "interactiveInput010": "{{colors.darkBlue090}}", - "interactiveInput020": "{{colors.darkBlue060}}", - "interactiveInput030": "{{colors.blue090}}", - "interactiveInput040": "{{colors.blue050}}", - "interactiveInput050": "{{colors.blue030}}", - "interactiveLink010": "{{colors.blue050}}", - "interactiveLink020": "{{colors.blue040}}", - "interactiveLink030": "{{colors.blue030}}", - "interactiveDisabled010": "{{colors.darkBlue080}}", - "interactiveVisited010": "{{colors.purple050}}", - - "illustrationHighlight010": "{{colors.white}}", - "illustrationSubtle010": "{{colors.blue080}}", - "illustrationShadow010": "{{colors.blackTint060}}", - "illustrationGradient010": "linear-gradient(0deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1) 100%)", - "illustrationGradient020": "linear-gradient(0deg, rgba(22,39,64,0.00) 0%, rgba(22,39,64,1) 100%)", - "illustrationBackground010": "{{colors.darkBlue095}}", - "illustrationBackground020": "{{colors.darkBlue095}}", - "illustrationBorder010": "{{colors.blue070}}", - "illustrationBorder020": "{{colors.blue060}}", - "illustrationDisabled": "{{colors.blue070}}", - "illustrationInterface010": "{{colors.blue055}}", - "illustrationInterface020": "{{colors.blue070}}", - "illustrationInterface030": "{{colors.blue080}}", - "illustrationInterface040": "{{colors.blue090}}", - "illustrationInterface050": "{{colors.blue100}}", - "illustrationInterface060": "{{colors.blue030}}", - "illustrationInterface070": "{{colors.blue040}}", - "illustrationInterface080": "{{colors.blue050}}", - "illustrationInterface090": "{{colors.blue055}}", - "illustrationInterface100": "{{colors.blue010}}", - "illustrationAnatomySubtle": "{{colors.blue040}}", - "illustrationAnatomyBorder010": "{{colors.blue080}}", - "illustrationAnatomyBorder020": "{{colors.blue040}}" - }, - "shadows": { - "shadow010": "0 0 2px 0 rgba(10,10,10,0.28)", - "shadow020": "0 2px 4px 0 rgba(10,10,10,0.28)", - "shadow030": "0 4px 8px 0 rgba(10,10,10,0.28)", - "shadow040": "0 8px 16px 0 rgba(10,10,10,0.28)", - "shadow050": "0 16px 24px 0 rgba(10,10,10,0.28)", - "shadow060": "0 20px 32px 0 rgba(10,10,10,0.28)" - } -} diff --git a/site/theme/colors-light.json b/site/theme/colors-light.json deleted file mode 100644 index ae651e1f5f..0000000000 --- a/site/theme/colors-light.json +++ /dev/null @@ -1,131 +0,0 @@ -{ - "colors": { - "blue055": "#446be4", - "purple055": "#6e61e4", - "teal055": "#06808e", - - "darkBlue100": "#09111C", - "darkBlue095": "#0F1B2C", - "darkBlue090": "#15263E", - "darkBlue080": "#2E3F54", - "darkBlue070": "#435365", - "darkBlue060": "#5A6A79", - "darkBlue050": "#85939C", - "darkBlue040": "#A1ACB4", - "darkBlue030": "#C0C7CC", - "darkBlue020": "#DEE2E5", - "darkBlue010": "#F0F1F3", - - "inkBase": "{{colors.darkBlue080}}", - "inkContrast": "{{colors.darkBlue100}}", - "inkSubtle": "{{colors.darkBlue060}}", - "inkWhiteSubtle": "{{colors.whiteTint080}}", - "inkWhiteContrast": "{{colors.white}}", - "inkNonEssential": "{{colors.darkBlue030}}", - "inkInverse": "{{colors.white}}", - "inkLight010": "{{colors.white}}", - "inkDark010": "{{colors.darkBlue100}}", - "inkPositive": "{{colors.green060}}", - "inkNegative": "{{colors.red060}}", - "inkNotice": "{{colors.darkBlue070}}", - "inkInformative": "{{colors.teal060}}", - "inkBrand010": "{{colors.blue060}}", - "inkBrand020": "{{colors.blue080}}", - "inkBrand030": "{{colors.teal060}}", - "interfaceBackground": "{{colors.white}}", - "interface010": "{{colors.darkBlue010}}", - "interface020": "{{colors.darkBlue010}}", - "interface030": "{{colors.darkBlue020}}", - "interface040": "{{colors.darkBlue020}}", - "interface050": "{{colors.darkBlue030}}", - "interface060": "{{colors.darkBlue100}}", - "interfaceBrand010": "{{colors.blue060}}", - "interfaceBrand020": "{{colors.blue080}}", - "interfaceBrand030": "{{colors.blue060}}", - "interfaceBrand040": "{{colors.blue060}}", - "interfaceBrand050": "{{colors.blue080}}", - "interfaceBrand060": "{{colors.teal060}}", - "interfacePositive010": "{{colors.green060}}", - "interfacePositive020": "{{colors.green010}}", - "interfaceNegative010": "{{colors.red060}}", - "interfaceNegative020": "{{colors.red010}}", - "interfaceNotice010": "{{colors.darkBlue080}}", - "interfaceNotice020": "{{colors.darkBlue010}}", - "interfaceInformative010": "{{colors.teal060}}", - "interfaceInformative020": "{{colors.teal010}}", - "interfaceNeutral010": "{{colors.darkBlue080}}", - "interfaceNeutral020": "{{colors.darkBlue010}}", - "interfaceSkeleton010": "{{colors.darkBlue010}}", - "interfaceSkeleton020": "{{colors.darkBlue020}}", - "interactivePrimary010": "{{colors.blue010}}", - "interactivePrimary020": "{{colors.blue020}}", - "interactivePrimary030": "{{colors.blue060}}", - "interactivePrimary040": "{{colors.blue070}}", - "interactivePrimary050": "{{colors.blue080}}", - "interactiveSecondary010": "{{colors.darkBlue010}}", - "interactiveSecondary020": "{{colors.darkBlue020}}", - "interactiveSecondary030": "{{colors.darkBlue080}}", - "interactiveSecondary040": "{{colors.darkBlue090}}", - "interactiveSecondary050": "{{colors.darkBlue100}}", - "interactivePositive010": "{{colors.green010}}", - "interactivePositive020": "{{colors.green020}}", - "interactivePositive030": "{{colors.green060}}", - "interactivePositive040": "{{colors.green070}}", - "interactivePositive050": "{{colors.green080}}", - "interactiveNegative010": "{{colors.red010}}", - "interactiveNegative020": "{{colors.red020}}", - "interactiveNegative030": "{{colors.red060}}", - "interactiveNegative040": "{{colors.red070}}", - "interactiveNegative050": "{{colors.red080}}", - "interactiveInverse010": "{{colors.whiteTint010}}", - "interactiveInverse020": "{{colors.whiteTint020}}", - "interactiveInverse030": "{{colors.white}}", - "interactiveInverse040": "{{colors.whiteTint070}}", - "interactiveInverse050": "{{colors.whiteTint080}}", - "interactiveInput010": "{{colors.darkBlue010}}", - "interactiveInput020": "{{colors.darkBlue050}}", - "interactiveInput030": "{{colors.blue010}}", - "interactiveInput040": "{{colors.blue060}}", - "interactiveInput050": "{{colors.blue070}}", - "interactiveLink010": "{{colors.blue060}}", - "interactiveLink020": "{{colors.blue070}}", - "interactiveLink030": "{{colors.blue080}}", - "interactiveDisabled010": "{{colors.darkBlue020}}", - "interactiveVisited010": "{{colors.purple060}}", - "interactiveFocus010": "{{colors.focus010}}", - - "illustrationPalette010": "{{colors.blue010}}", - "illustrationPalette020": "{{colors.blue030}}", - "illustrationPalette030": "{{colors.blue040}}", - "illustrationPalette040": "{{colors.blue050}}", - "illustrationPalette050": "{{colors.blue055}}", - "illustrationPalette060": "{{colors.blue060}}", - "illustrationPalette070": "{{colors.blue070}}", - "illustrationPalette080": "{{colors.blue080}}", - "illustrationPalette090": "{{colors.blue090}}", - "illustrationPalette100": "{{colors.blue100}}", - "illustrationHighlight010": "{{colors.blue050}}", - "illustrationSubtle010": "{{colors.darkBlue050}}", - "illustrationShadow010": "{{colors.blackTint030}}", - "illustrationGradient010": "linear-gradient(0deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1) 100%)", - "illustrationGradient020": "linear-gradient(0deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1) 100%)", - "illustrationBackground010": "{{colors.blue010}}", - "illustrationBackground020": "{{colors.darkBlue010}}", - "illustrationBorder010": "{{colors.darkBlue020}}", - "illustrationBorder020": "{{colors.darkBlue030}}", - "illustrationDisabled": "{{colors.darkBlue020}}", - "illustrationInterface010": "{{colors.white}}", - "illustrationInterface020": "{{colors.blue020}}", - "illustrationInterface030": "{{colors.blue030}}", - "illustrationInterface040": "{{colors.blue040}}", - "illustrationInterface050": "{{colors.blue050}}", - "illustrationInterface060": "{{colors.blue055}}", - "illustrationInterface070": "{{colors.blue060}}", - "illustrationInterface080": "{{colors.blue070}}", - "illustrationInterface090": "{{colors.blue080}}", - "illustrationInterface100": "{{colors.blue090}}", - "illustrationAnatomySubtle": "{{colors.blue030}}", - "illustrationAnatomyBorder010": "{{colors.blue030}}", - "illustrationAnatomyBorder020": "{{colors.blue070}}" - } -} diff --git a/site/theme/doc-theme.ts b/site/theme/doc-theme.ts index 1c89dfb9b9..a4d6d99a34 100644 --- a/site/theme/doc-theme.ts +++ b/site/theme/doc-theme.ts @@ -1,360 +1,128 @@ -import {createTheme} from 'newskit'; -import colorsLight from './colors-light.json'; -import colorsDark from './colors-dark.json'; -import fonts from './fonts.json'; -import typographyPresets from './typography-presets.json'; -import overlaysDark from './overlays-dark.json'; -import overlays from './overlays.json'; -import {stylePresets} from './style-presets'; -import {componentDefaults} from './component-defaults'; - -export const foundationsLightOverrides = { - colors: { - inkBrand010: '{{colors.purple060}}', - inkBrand020: '{{colors.purple080}}', - interfaceBrand010: '{{colors.purple060}}', - interfaceBrand020: '{{colors.purple080}}', - interfaceBrand030: '{{colors.purple060}}', - interfaceBrand040: '{{colors.purple060}}', - interfaceBrand050: '{{colors.purple080}}', - - illustrationPalette010: '{{colors.purple010}}', - illustrationPalette020: '{{colors.purple030}}', - illustrationPalette030: '{{colors.purple040}}', - illustrationPalette040: '{{colors.purple050}}', - illustrationPalette050: '{{colors.purple055}}', - illustrationPalette060: '{{colors.purple060}}', - illustrationPalette070: '{{colors.purple070}}', - illustrationPalette080: '{{colors.purple080}}', - illustrationPalette090: '{{colors.purple090}}', - illustrationPalette100: '{{colors.purple100}}', - illustrationHighlight010: '{{colors.purple050}}', - illustrationInterface020: '{{colors.purple020}}', - illustrationInterface030: '{{colors.purple030}}', - illustrationInterface040: '{{colors.purple040}}', - illustrationInterface050: '{{colors.purple050}}', - illustrationInterface060: '{{colors.purple055}}', - illustrationInterface070: '{{colors.purple060}}', - illustrationInterface080: '{{colors.purple070}}', - illustrationInterface090: '{{colors.purple080}}', - illustrationInterface100: '{{colors.purple090}}', - illustrationAnatomySubtle: '{{colors.purple030}}', - illustrationAnatomyBorder010: '{{colors.purple030}}', - illustrationAnatomyBorder020: '{{colors.purple070}}', - }, -}; - -export const foundationsDarkOverrides = { - colors: { - inkBrand010: '{{colors.purple050}}', - inkBrand020: '{{colors.purple030}}', - interfaceBrand010: '{{colors.purple060}}', - interfaceBrand020: '{{colors.purple080}}', - interfaceBrand030: '{{colors.purple060}}', - interfaceBrand040: '{{colors.purple060}}', - interfaceBrand050: '{{colors.purple080}}', - - illustrationPalette010: '{{colors.purple010}}', - illustrationPalette020: '{{colors.purple030}}', - illustrationPalette030: '{{colors.purple040}}', - illustrationPalette040: '{{colors.purple050}}', - illustrationPalette050: '{{colors.purple055}}', - illustrationPalette060: '{{colors.purple060}}', - illustrationPalette070: '{{colors.purple070}}', - illustrationPalette080: '{{colors.purple080}}', - illustrationPalette090: '{{colors.purple090}}', - illustrationPalette100: '{{colors.purple100}}', - illustrationHighlight010: '{{colors.white}}', - illustrationSubtle010: '{{colors.purple080}}', - illustrationBackground010: '{{colors.darkBlue095}}', - illustrationBackground020: '{{colors.darkBlue095}}', - illustrationBorder010: '{{colors.purple070}}', - illustrationBorder020: '{{colors.purple060}}', - illustrationDisabled: '{{colors.purple070}}', - illustrationInterface010: '{{colors.purple055}}', - illustrationInterface020: '{{colors.purple070}}', - illustrationInterface030: '{{colors.purple080}}', - illustrationInterface040: '{{colors.purple090}}', - illustrationInterface050: '{{colors.purple100}}', - illustrationInterface060: '{{colors.purple030}}', - illustrationInterface070: '{{colors.purple040}}', - illustrationInterface080: '{{colors.purple055}}', - illustrationInterface090: '{{colors.purple040}}', - illustrationInterface100: '{{colors.purple010}}', - illustrationAnatomySubtle: '{{colors.purple040}}', - illustrationAnatomyBorder010: '{{colors.purple080}}', - illustrationAnatomyBorder020: '{{colors.purple040}}', - }, -}; - -export const guidesLightOverrides = { - colors: { - inkBrand010: '{{colors.blue060}}', - inkBrand020: '{{colors.blue080}}', - interfaceBrand010: '{{colors.blue060}}', - interfaceBrand020: '{{colors.blue080}}', - interfaceBrand030: '{{colors.blue060}}', - interfaceBrand040: '{{colors.blue060}}', - interfaceBrand050: '{{colors.blue080}}', - - illustrationPalette010: '{{colors.blue010}}', - illustrationPalette020: '{{colors.blue030}}', - illustrationPalette030: '{{colors.blue040}}', - illustrationPalette040: '{{colors.blue050}}', - illustrationPalette050: '{{colors.blue055}}', - illustrationPalette060: '{{colors.blue060}}', - illustrationPalette070: '{{colors.blue070}}', - illustrationPalette080: '{{colors.blue080}}', - illustrationPalette090: '{{colors.blue090}}', - illustrationPalette100: '{{colors.blue100}}', - illustrationHighlight010: '{{colors.blue050}}', - illustrationSubtle010: '{{colors.darkBlue050}}', - illustrationBackground010: '{{colors.blue010}}', - illustrationBackground020: '{{colors.darkBlue010}}', - illustrationBorder010: '{{colors.darkBlue020}}', - illustrationBorder020: '{{colors.darkBlue030}}', - illustrationDisabled: '{{colors.darkBlue020}}', - illustrationInterface010: '{{colors.white}}', - illustrationInterface020: '{{colors.blue020}}', - illustrationInterface030: '{{colors.blue030}}', - illustrationInterface040: '{{colors.blue040}}', - illustrationInterface050: '{{colors.blue050}}', - illustrationInterface060: '{{colors.blue055}}', - illustrationInterface070: '{{colors.blue060}}', - illustrationInterface080: '{{colors.blue070}}', - illustrationInterface090: '{{colors.blue080}}', - illustrationInterface100: '{{colors.blue090}}', - illustrationAnatomySubtle: '{{colors.blue030}}', - illustrationAnatomyBorder010: '{{colors.blue030}}', - illustrationAnatomyBorder020: '{{colors.blue070}}', - }, -}; - -export const guidesDarkOverrides = { - colors: { - inkBrand010: '{{colors.blue050}}', - inkBrand020: '{{colors.blue030}}', - interfaceBrand010: '{{colors.blue060}}', - interfaceBrand020: '{{colors.blue080}}', - interfaceBrand030: '{{colors.blue060}}', - interfaceBrand040: '{{colors.blue060}}', - interfaceBrand050: '{{colors.blue080}}', +import {createTheme, newskitLightTheme} from 'newskit'; +import documentationLight from '@newskit-themes/newskit-website/Documentation-light.json'; +import documentationLightAccessibility from '@newskit-themes/newskit-website/Documentation-light-accessibility.json'; +import documentationLightFoundations from '@newskit-themes/newskit-website/Documentation-light-foundations.json'; +import documentationLightPatterns from '@newskit-themes/newskit-website/Documentation-light-patterns.json'; - illustrationPalette010: '{{colors.blue010}}', - illustrationPalette020: '{{colors.blue030}}', - illustrationPalette030: '{{colors.blue040}}', - illustrationPalette040: '{{colors.blue050}}', - illustrationPalette050: '{{colors.blue055}}', - illustrationPalette060: '{{colors.blue060}}', - illustrationPalette070: '{{colors.blue070}}', - illustrationPalette080: '{{colors.blue080}}', - illustrationPalette090: '{{colors.blue090}}', - illustrationPalette100: '{{colors.blue100}}', - illustrationHighlight010: '{{colors.white}}', - illustrationSubtle010: '{{colors.blue080}}', - illustrationBackground010: '{{colors.darkBlue095}}', - illustrationBackground020: '{{colors.darkBlue095}}', - illustrationBorder010: '{{colors.blue070}}', - illustrationBorder020: '{{colors.blue060}}', - illustrationDisabled: '{{colors.blue080}}', - illustrationInterface010: '{{colors.blue055}}', - illustrationInterface020: '{{colors.blue070}}', - illustrationInterface030: '{{colors.blue080}}', - illustrationInterface040: '{{colors.blue090}}', - illustrationInterface050: '{{colors.blue100}}', - illustrationInterface060: '{{colors.blue030}}', - illustrationInterface070: '{{colors.blue040}}', - illustrationInterface080: '{{colors.blue050}}', - illustrationInterface090: '{{colors.blue055}}', - illustrationInterface100: '{{colors.blue010}}', - illustrationAnatomySubtle: '{{colors.blue040}}', - illustrationAnatomyBorder010: '{{colors.blue080}}', - illustrationAnatomyBorder020: '{{colors.blue040}}', - }, -}; - -export const patternsLightOverrides = { - colors: { - inkBrand010: '{{colors.teal060}}', - inkBrand020: '{{colors.teal080}}', - interfaceBrand010: '{{colors.teal020}}', - interfaceBrand020: '{{colors.teal030}}', - interfaceBrand030: '{{colors.teal060}}', - interfaceBrand040: '{{colors.teal070}}', - interfaceBrand050: '{{colors.teal080}}', - - illustrationPalette010: '{{colors.teal010}}', - illustrationPalette020: '{{colors.teal020}}', - illustrationPalette030: '{{colors.teal030}}', - illustrationPalette040: '{{colors.teal040}}', - illustrationPalette050: '{{colors.teal050}}', - illustrationPalette060: '{{colors.teal055}}', - illustrationPalette070: '{{colors.teal060}}', - illustrationPalette080: '{{colors.teal070}}', - illustrationPalette090: '{{colors.teal080}}', - illustrationPalette100: '{{colors.teal090}}', - illustrationHighlight010: '{{colors.teal050}}', - illustrationInterface020: '{{colors.teal010}}', - illustrationInterface030: '{{colors.teal020}}', - illustrationInterface040: '{{colors.teal030}}', - illustrationInterface050: '{{colors.teal040}}', - illustrationInterface060: '{{colors.teal050}}', - illustrationInterface070: '{{colors.teal055}}', - illustrationInterface080: '{{colors.teal060}}', - illustrationInterface090: '{{colors.teal070}}', - illustrationInterface100: '{{colors.teal080}}', - illustrationAnatomySubtle: '{{colors.teal030}}', - illustrationAnatomyBorder010: '{{colors.teal030}}', - illustrationAnatomyBorder020: '{{colors.teal070}}', - }, -}; - -export const patternsDarkOverrides = { - colors: { - inkBrand010: '{{colors.teal050}}', - inkBrand020: '{{colors.teal030}}', - interfaceBrand010: '{{colors.teal080}}', - interfaceBrand020: '{{colors.teal060}}', - interfaceBrand030: '{{colors.teal060}}', - interfaceBrand040: '{{colors.teal080}}', - interfaceBrand050: '{{colors.teal080}}', +import documentationDark from '@newskit-themes/newskit-website/Documentation-dark.json'; +import documentationDarkAccessibility from '@newskit-themes/newskit-website/Documentation-dark-accessibility.json'; +import documentationDarkFoundations from '@newskit-themes/newskit-website/Documentation-dark-foundations.json'; +import documentationDarkPatterns from '@newskit-themes/newskit-website/Documentation-dark-patterns.json'; - illustrationPalette010: '{{colors.teal010}}', - illustrationPalette020: '{{colors.teal020}}', - illustrationPalette030: '{{colors.teal030}}', - illustrationPalette040: '{{colors.teal040}}', - illustrationPalette050: '{{colors.teal050}}', - illustrationPalette060: '{{colors.teal055}}', - illustrationPalette070: '{{colors.teal060}}', - illustrationPalette080: '{{colors.teal070}}', - illustrationPalette090: '{{colors.teal080}}', - illustrationPalette100: '{{colors.teal090}}', - illustrationHighlight010: '{{colors.white}}', - illustrationSubtle010: '{{colors.teal060}}', - illustrationBackground010: '{{colors.darkBlue095}}', - illustrationBackground020: '{{colors.darkBlue095}}', - illustrationBorder010: '{{colors.teal060}}', - illustrationBorder020: '{{colors.teal055}}', - illustrationDisabled: '{{colors.teal070}}', - illustrationInterface010: '{{colors.teal050}}', - illustrationInterface020: '{{colors.teal070}}', - illustrationInterface030: '{{colors.teal060}}', - illustrationInterface040: '{{colors.teal070}}', - illustrationInterface050: '{{colors.teal080}}', - illustrationInterface060: '{{colors.teal020}}', - illustrationInterface070: '{{colors.teal030}}', - illustrationInterface080: '{{colors.teal040}}', - illustrationInterface090: '{{colors.teal050}}', - illustrationInterface100: '{{colors.teal010}}', - illustrationAnatomySubtle: '{{colors.teal040}}', - illustrationAnatomyBorder010: '{{colors.teal080}}', - illustrationAnatomyBorder020: '{{colors.teal040}}', - }, -}; +import {stylePresets} from './style-presets'; +import {componentDefaults} from './component-defaults'; -export const accessibilityLightOverrides = { - colors: { - inkBrand010: '{{colors.purple050}}', - inkBrand020: '{{colors.purple080}}', - interfaceBrand010: '{{colors.purple020}}', - interfaceBrand020: '{{colors.purple040}}', - interfaceBrand030: '{{colors.purple050}}', - interfaceBrand040: '{{colors.purple070}}', - interfaceBrand050: '{{colors.purple080}}', +// How we get font metrics in. +// If we had different fonts in different themes, this implementation would look different +// Docs site uses the same fonts for each theme - so we just use the same from Light theme as the 'default' +const {fonts} = documentationLight; + +Object.assign(fonts.fontFamily010, { + fontMetrics: { + fontWeight010: { + ascent: 992, + capHeight: 700, + descent: -310, + lineGap: 0, + unitsPerEm: 1000, + }, }, -}; - -export const accessibilityDarkOverrides = { - colors: { - inkBrand010: '{{colors.purple050}}', - inkBrand020: '{{colors.purple030}}', - interfaceBrand010: '{{colors.purple090}}', - interfaceBrand020: '{{colors.purple080}}', - interfaceBrand030: '{{colors.purple050}}', - interfaceBrand040: '{{colors.purple040}}', - interfaceBrand050: '{{colors.purple020}}', +}); +Object.assign(fonts.fontFamily020, { + fontMetrics: { + fontWeight010: { + ascent: 992, + capHeight: 700, + descent: -310, + lineGap: 0, + unitsPerEm: 1000, + }, }, -}; - -const lightAndDarkCommonOverrides = { - stylePresets, - typographyPresets, - componentDefaults, - fonts, - overlays, -}; - -export const darkOverrides = { - ...lightAndDarkCommonOverrides, - shadows: colorsDark.shadows, - colors: colorsDark.colors, - overlays: overlaysDark, - outline: { - safariOutlineStyleDefault: 'solid', +}); +Object.assign(fonts.fontFamily030, { + fontMetrics: { + fontWeight010: { + ascent: 992, + capHeight: 700, + descent: -310, + lineGap: 0, + unitsPerEm: 1000, + }, }, -}; - -export const lightOverrides = { - ...lightAndDarkCommonOverrides, +}); - colors: colorsLight.colors, -}; +// We only need to add fontMetrics into the light theme - all other themes come from this export const docsThemeLight = createTheme({ name: 'docs-theme-light', - overrides: lightOverrides, + baseTheme: newskitLightTheme, // TODO: Use newsKitTheme from Publisher eventually + overrides: { + ...documentationLight, + fonts, + stylePresets, + componentDefaults, + }, }); export const docsThemeDark = createTheme({ name: 'docs-theme-dark', baseTheme: docsThemeLight, - overrides: darkOverrides, + overrides: { + ...documentationDark, + fonts, + outlines: { + safariOutlineStyleDefault: 'solid', + }, + }, }); export const foundationsThemeLight = createTheme({ name: 'docs-foundations-light', baseTheme: docsThemeLight, - overrides: foundationsLightOverrides, + overrides: { + ...documentationLightFoundations, + fonts, + }, }); export const foundationsThemeDark = createTheme({ name: 'docs-foundations-dark', baseTheme: docsThemeDark, - overrides: foundationsDarkOverrides, -}); - -export const patternsThemeLight = createTheme({ - name: 'docs-patterns-light', - baseTheme: docsThemeLight, - overrides: patternsLightOverrides, -}); - -export const patternsThemeDark = createTheme({ - name: 'docs-patterns-dark', - baseTheme: docsThemeDark, - overrides: patternsDarkOverrides, + overrides: { + ...documentationDarkFoundations, + fonts, + }, }); export const accessibilityThemeLight = createTheme({ name: 'docs-accessibility-light', baseTheme: docsThemeLight, - overrides: accessibilityLightOverrides, + overrides: { + ...documentationLightAccessibility, + fonts, + }, }); export const accessibilityThemeDark = createTheme({ name: 'docs-accessibility-dark', baseTheme: docsThemeDark, - overrides: accessibilityDarkOverrides, + overrides: {...documentationDarkAccessibility, fonts}, }); -export const guidesThemeLight = createTheme({ - name: 'docs-guides-light', +export const patternsThemeLight = createTheme({ + name: 'docs-patterns-light', baseTheme: docsThemeLight, - overrides: guidesLightOverrides, + overrides: { + ...documentationLightPatterns, + fonts, + }, }); -export const guidesThemeDark = createTheme({ - name: 'docs-guides-dark', +export const patternsThemeDark = createTheme({ + name: 'docs-patterns-dark', baseTheme: docsThemeDark, - overrides: guidesDarkOverrides, + overrides: { + ...documentationDarkPatterns, + fonts, + }, }); diff --git a/site/theme/fonts.json b/site/theme/fonts.json deleted file mode 100644 index acbd4cd8d4..0000000000 --- a/site/theme/fonts.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "fontFamily040": { - "fontFamily": "'DM Mono', courier", - "fontMetrics": { - "fontWeight010": { - "capHeight": 700, - "ascent": 992, - "descent": -310, - "lineGap": 0, - "unitsPerEm": 1000 - } - } - } -} diff --git a/site/theme/overlays-dark.json b/site/theme/overlays-dark.json deleted file mode 100644 index 75cff1117a..0000000000 --- a/site/theme/overlays-dark.json +++ /dev/null @@ -1,7 +0,0 @@ - -{ - "overlayGradientInverseHorizontal": "linear-gradient(-90deg, rgba(22,255,255,0.00) 0%,rgba(255,255,255,1.00) 100%)", - "overlayGradientInverseVertical": "linear-gradient(180deg, rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 100%)", - "overlayGradientBaseHorizontal": "linear-gradient(270deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00) 100%)", - "overlayGradientBaseVertical": "linear-gradient(180deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00)100%)" -} \ No newline at end of file diff --git a/site/theme/overlays.json b/site/theme/overlays.json deleted file mode 100644 index 4ce1dee2fb..0000000000 --- a/site/theme/overlays.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "overlayTintBase010": "rgba(22,39,64,0.2)", - "overlayTintBase020": "rgba(22,39,64,0.4)", - "overlayTintBase030": "rgba(22,39,64,0.6)", - "overlayTintBase040": "rgba(22,39,64,0.8)", - "overlayGradientInverseVertical": "linear-gradient(180deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00)100%)", - "overlayGradientInverseHorizontal": "linear-gradient(270deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00) 100%)" -} - - \ No newline at end of file diff --git a/site/theme/style-presets.ts b/site/theme/style-presets.ts index 2a002cced2..dc9e468ddf 100644 --- a/site/theme/style-presets.ts +++ b/site/theme/style-presets.ts @@ -52,7 +52,7 @@ export const stylePresets = { borderStyle: 'solid', }, hover: { - color: '{{colors.inkSubtle}}', + color: '{{colors.interactivePrimary030}}', textDecoration: 'none', }, selected: { @@ -590,8 +590,8 @@ export const stylePresets = { base: { backgroundColor: '{{colors.interactiveInverse030}}', borderRadius: '{{borders.borderRadiusDefault}}', - color: '{{colors.inkBrand030}}', - iconColor: '{{colors.inkBrand030}}', + color: '{{colors.teal060}}', + iconColor: '{{colors.teal060}}', }, hover: { backgroundColor: '{{colors.interactiveInverse020}}', @@ -600,18 +600,18 @@ export const stylePresets = { }, active: { backgroundColor: '{{colors.interactiveInverse050}}', - color: '{{colors.inkBrand030}}', - iconColor: '{{colors.inkBrand030}}', + color: '{{colors.teal060}}', + iconColor: '{{colors.teal060}}', }, disabled: { backgroundColor: '{{colors.interactiveInverse020}}', - color: '{{colors.inkBrand030}}', - iconColor: '{{colors.inkBrand030}}', + color: '{{colors.teal060}}', + iconColor: '{{colors.teal060}}', }, loading: { backgroundColor: '{{colors.interactiveInverse020}}', - color: '{{colors.inkBrand030}}', - iconColor: '{{colors.inkBrand030}}', + color: '{{colors.teal060}}', + iconColor: '{{colors.teal060}}', }, 'focus-visible': { outlineColor: '{{outlines.outlineColorDefault}}', @@ -664,8 +664,8 @@ export const stylePresets = { base: { backgroundColor: '{{colors.interactiveInverse030}}', borderRadius: '{{borders.borderRadiusDefault}}', - color: '{{colors.inkBrand030}}', - iconColor: '{{colors.inkBrand030}}', + color: '{{colors.teal060}}', + iconColor: '{{colors.teal060}}', }, hover: { backgroundColor: '{{colors.interactiveInverse020}}', @@ -674,8 +674,8 @@ export const stylePresets = { }, active: { backgroundColor: '{{colors.interactiveInverse050}}', - color: '{{colors.inkBrand030}}', - iconColor: '{{colors.inkBrand030}}', + color: '{{colors.teal060}}', + iconColor: '{{colors.teal060}}', }, }, @@ -777,7 +777,7 @@ export const stylePresets = { latestReleaseCardContainerInteractive: { base: { - backgroundColor: '{{colors.interactivePrimary010}}', + backgroundColor: '{{colors.illustrationBackground010}}', borderRadius: '{{borders.borderRadiusRounded030}}', color: '{{colors.inkContrast}}', }, @@ -943,7 +943,7 @@ export const stylePresets = { }, sidebar: { base: { - backgroundColor: '{{colors.interface010}}', + backgroundColor: '{{colors.interface020}}', borderStyle: 'solid', borderColor: '{{colors.interface040}}', borderWidth: diff --git a/site/theme/typography-presets.json b/site/theme/typography-presets.json deleted file mode 100644 index fca59c56d1..0000000000 --- a/site/theme/typography-presets.json +++ /dev/null @@ -1,146 +0,0 @@ -{ - "editorialDisplay010": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontWeight": "{{fonts.fontWeight040}}" - }, - "editorialDisplay020": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontWeight": "{{fonts.fontWeight040}}" - }, - "editorialDisplay030": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontWeight": "{{fonts.fontWeight040}}" - }, - "editorialHeadline010": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontWeight": "{{fonts.fontWeight040}}" - }, - "editorialHeadline020": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontWeight": "{{fonts.fontWeight040}}" - }, - "editorialHeadline030": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontWeight": "{{fonts.fontWeight040}}" - }, - "editorialHeadline040": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontWeight": "{{fonts.fontWeight040}}" - }, - "editorialHeadline050": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontWeight": "{{fonts.fontWeight040}}" - }, - "editorialHeadline060": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontWeight": "{{fonts.fontWeight040}}" - }, - "editorialHeadline070": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontWeight": "{{fonts.fontWeight040}}" - }, - "editorialHeadline080": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontWeight": "{{fonts.fontWeight040}}" - }, - "editorialSubheadline010": { - "fontWeight": "{{fonts.fontWeight020}}", - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "lineHeight": "{{fonts.fontLineHeight040}}" - }, - "editorialSubheadline020": { - "fontWeight": "{{fonts.fontWeight020}}", - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "lineHeight": "{{fonts.fontLineHeight040}}" - }, - "editorialSubheadline030": { - "fontWeight": "{{fonts.fontWeight020}}", - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "lineHeight": "{{fonts.fontLineHeight040}}" - }, - "editorialSubheadline040": { - "fontWeight": "{{fonts.fontWeight020}}", - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "lineHeight": "{{fonts.fontLineHeight040}}" - }, - "editorialSubheadline050": { - "fontWeight": "{{fonts.fontWeight020}}", - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "lineHeight": "{{fonts.fontLineHeight040}}" - }, - "utilitySubheading010": { - "lineHeight": "{{fonts.fontLineHeight040}}" - }, - "utilitySubheading020": { - "lineHeight": "{{fonts.fontLineHeight040}}" - }, - "utilitySubheading030": { - "lineHeight": "{{fonts.fontLineHeight040}}" - }, - "utilitySubheading040": { - "lineHeight": "{{fonts.fontLineHeight040}}" - }, - "utilitySubheading050": { - "lineHeight": "{{fonts.fontLineHeight040}}" - }, - "utilityButton010": { - "fontWeight": "{{fonts.fontWeight030}}" - }, - "utilityButton020": { - "fontWeight": "{{fonts.fontWeight030}}" - }, - "utilityButton030": { - "fontWeight": "{{fonts.fontWeight030}}" - }, - "utilityCode010": { - "fontFamily": "{{fonts.fontFamily040.fontFamily}}", - "fontSize": "{{fonts.fontSize010}}", - "fontWeight": "{{fonts.fontWeight010}}", - "lineHeight": "{{fonts.fontLineHeight040}}" - }, - "utilityCode020": { - "fontFamily": "{{fonts.fontFamily040.fontFamily}}", - "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight010}}", - "lineHeight": "{{fonts.fontLineHeight040}}" - }, - "utilityCode030": { - "fontFamily": "{{fonts.fontFamily040.fontFamily}}", - "fontSize": "{{fonts.fontSize030}}", - "fontWeight": "{{fonts.fontWeight010}}", - "lineHeight": "{{fonts.fontLineHeight040}}" - }, - "editorialDropCap010": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontWeight": "{{fonts.fontWeight040}}" - }, - "editorialDropCap020": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontWeight": "{{fonts.fontWeight040}}" - }, - "editorialDropCap030": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontWeight": "{{fonts.fontWeight040}}" - }, - "utilityLink010": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize010}}", - "lineHeight": "{{fonts.fontLineHeight040}}", - "fontWeight": "{{fonts.fontWeight010}}", - "letterSpacing": "{{fonts.fontLetterSpacing030}}" - }, - "utilityLink020": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize020}}", - "lineHeight": "{{fonts.fontLineHeight040}}", - "fontWeight": "{{fonts.fontWeight010}}", - "letterSpacing": "{{fonts.fontLetterSpacing030}}" - }, - "utilityLink030": { - "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize030}}", - "lineHeight": "{{fonts.fontLineHeight040}}", - "fontWeight": "{{fonts.fontWeight010}}", - "letterSpacing": "{{fonts.fontLetterSpacing030}}" - } -} diff --git a/src/popover/__tests__/__snapshots__/popover.test.tsx.snap b/src/popover/__tests__/__snapshots__/popover.test.tsx.snap index e22997727d..d82526bba5 100644 --- a/src/popover/__tests__/__snapshots__/popover.test.tsx.snap +++ b/src/popover/__tests__/__snapshots__/popover.test.tsx.snap @@ -8581,4 +8581,4 @@ exports[`Popover should render correct styles: with pointer y coordinate 1`] = ` />
-`; +`; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 477cd5fb10..7a994c574a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2557,6 +2557,11 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" +"@newskit-themes/newskit-website@1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@newskit-themes/newskit-website/-/newskit-website-1.0.2.tgz#010214a9d05f89e78a6651aefee4136985119b72" + integrity sha512-DQHBfVmCeOjJc0A9aXYVdQmnpBUdXSseSYJ7yATiO4snFFqjsVQlLhHsEThkmUrO0ArDmMelPtQAGket8XLXdw== + "@next/env@13.1.0": version "13.1.0" resolved "https://registry.yarnpkg.com/@next/env/-/env-13.1.0.tgz#fdb4d4711c6bd544dd80f0afd9846af2699b8c1c"