diff --git a/documentation/components/app/Header.tsx b/documentation/components/app/Header.tsx index be7c40e10..b9bcce044 100644 --- a/documentation/components/app/Header.tsx +++ b/documentation/components/app/Header.tsx @@ -8,7 +8,8 @@ import { Flex, Drawer } from '@atom-learning/components' -import logo from '@atom-learning/theme/lib/assets/atom/logo.svg' +import logoAtom from '@atom-learning/theme/lib/assets/logos/atom/atom-learning-logotype-primary.svg' +import logoQuest from '@atom-learning/theme/lib/assets/logos/quest/logo.svg' import * as React from 'react' import buildConstants from '~/lib/build/constants.json' @@ -17,24 +18,32 @@ import { Navigation } from '~/components/app' import { Hamburger } from '@atom-learning/icons' import { useTheme } from '~/utilities/hooks/useTheme' -const NavigationHeader = () => ( - - - - {buildConstants['version']} - - -) +const NavigationHeader = () => { + const { theme } = useTheme() + return ( + + {theme === 'atom' && ( + + )} + {theme === 'quest' && ( + + )} + + {buildConstants['version']} + + + ) +} const BrandSwitch = () => { const { theme, updateTheme } = useTheme() return ( - + Brand { - {`$${token}`} + {`$${token}`} {value} diff --git a/documentation/components/markdown/editor-component/ComponentProps.tsx b/documentation/components/markdown/editor-component/ComponentProps.tsx index d3b68f985..107292fc3 100644 --- a/documentation/components/markdown/editor-component/ComponentProps.tsx +++ b/documentation/components/markdown/editor-component/ComponentProps.tsx @@ -106,7 +106,7 @@ export const ComponentProps: React.FC<{ component }> = ({ component }) => { return ( - + {component} diff --git a/documentation/components/markdown/editor-component/token-list/TokenListItem.tsx b/documentation/components/markdown/editor-component/token-list/TokenListItem.tsx index 371f7ff66..e06fab563 100644 --- a/documentation/components/markdown/editor-component/token-list/TokenListItem.tsx +++ b/documentation/components/markdown/editor-component/token-list/TokenListItem.tsx @@ -2,13 +2,7 @@ import { Flex, Box, styled, Text } from '@atom-learning/components' import * as React from 'react' const TokenListItemToken = ({ token }: { token: string }) => ( - + {`$${token}`} ) diff --git a/documentation/components/markdown/index.tsx b/documentation/components/markdown/index.tsx index 776c73200..0952d71d0 100644 --- a/documentation/components/markdown/index.tsx +++ b/documentation/components/markdown/index.tsx @@ -26,9 +26,7 @@ import { DosAndDonts } from './editor-component/DosAndDonts' import { Cards } from './editor-component/Cards' export const components = { - h2: (props) => ( - - ), + h2: (props) => , h3: (props) => , h4: (props) => , h5: (props) => , diff --git a/documentation/components/page/Layout.tsx b/documentation/components/page/Layout.tsx index 98d636df9..32425a9be 100644 --- a/documentation/components/page/Layout.tsx +++ b/documentation/components/page/Layout.tsx @@ -44,7 +44,7 @@ export const Layout: React.FC = (props) => { >
- + {removeStartingNumber(title)} diff --git a/documentation/content/components.badge.md b/documentation/content/components.badge.md index b604f203e..56c1f62e5 100644 --- a/documentation/content/components.badge.md +++ b/documentation/content/components.badge.md @@ -37,7 +37,7 @@ tabs: The following semantic themes are available: `success`, `warning`, `danger`, `neutral`, `info`. - The following non-semantic themes are available `grey`, `blue`, `purple`, `cyan`, `green`, `magenta`, `red`, `teal`, `orange`, `yellow`, `lime`. + The following non-semantic themes are available `grey`, `blue`, `pink`, `purple`, `cyan`, `green`, `magenta`, `red`, `teal`, `orange`, `yellow`, `lime`. If no theme is passed in. The badge theme defaults to "info". @@ -55,6 +55,7 @@ tabs: Grey Blue + Pink Purple Cyan Green @@ -77,6 +78,7 @@ tabs: Grey Blue + Pink Purple Cyan Green diff --git a/documentation/content/components.box.md b/documentation/content/components.box.md index a39e5b9fe..4a7a5e93a 100644 --- a/documentation/content/components.box.md +++ b/documentation/content/components.box.md @@ -28,7 +28,7 @@ tabs: This is a heading`} language={"tsx"} /> + This is a heading`} language={"tsx"} /> ## API Reference diff --git a/documentation/content/components.overview.styling.md b/documentation/content/components.overview.styling.md index fffeedf9d..340ea9276 100644 --- a/documentation/content/components.overview.styling.md +++ b/documentation/content/components.overview.styling.md @@ -58,7 +58,7 @@ tabs: This is a radio card option - + With some additional text This is another radio card option - + With some additional text And a further radio card option - + With some additional text diff --git a/documentation/content/components.slider.md b/documentation/content/components.slider.md index e3f503d47..e8a256826 100644 --- a/documentation/content/components.slider.md +++ b/documentation/content/components.slider.md @@ -125,7 +125,7 @@ tabs: Depending on the background of your page, you can change the theme of the track to be either light or tonal using `theme="light"`. Default is `theme="tonal"`. - + `} language={"tsx"} /> diff --git a/documentation/content/components.tabs.md b/documentation/content/components.tabs.md index 9f615b923..f3c264b7c 100644 --- a/documentation/content/components.tabs.md +++ b/documentation/content/components.tabs.md @@ -202,9 +202,9 @@ tabs: | Active tab bottom line | $primary800 | \#0F67F5 | - | Not active tab font-color | $tonal500 | \#333333 | + | Not active tab font-color | $grey900 | \#333333 | - | Not active tabs bottom line | $tonal100 | \#EEEEEE | + | Not active tabs bottom line | $grey200 | \#EEEEEE | diff --git a/documentation/content/components.textarea-field.md b/documentation/content/components.textarea-field.md index 418986ae4..6efd11166 100644 --- a/documentation/content/components.textarea-field.md +++ b/documentation/content/components.textarea-field.md @@ -97,13 +97,13 @@ tabs: | Bg color | $white | \#ffffff | - | Border-color | $tonal400 | \#545454 | + | Border-color | $grey800 | \#545454 | - | Label font-color | $tonal500 | \#333333 | + | Label font-color | $grey900 | \#333333 | - | Description font-color | $tonal300 | \#757575 | + | Description font-color | $grey700 | \#757575 | - | Text font-color | $tonal600 | \#1F1F1F | + | Text font-color | $grey1000 | \#1F1F1F | ![textarea placeholder variant](/assets/images/textarea-variant-2.svg "textarea placeholder variant") @@ -118,13 +118,13 @@ tabs: | Bg color | $white | \#ffffff | - | Border-color | $tonal400 | \#545454 | + | Border-color | $grey800 | \#545454 | - | Label font-color | $tonal500 | \#333333 | + | Label font-color | $grey900 | \#333333 | - | Description font-color | $tonal300 | \#757575 | + | Description font-color | $grey700 | \#757575 | - | Placeholder font-color | $tonal300 | \#757575 | + | Placeholder font-color | $grey700 | \#757575 | ![textarea focus variant](/assets/images/textarea-variant-3.svg "textarea focus variant") @@ -140,9 +140,9 @@ tabs: | Border-color | $primary800 | \#0F67F5 | - | Label font-color | $tonal500 | \#333333 | + | Label font-color | $grey900 | \#333333 | - | Text font-color | $tonal600 | \#1F1F1F | + | Text font-color | $grey1000 | \#1F1F1F | ![textarea disabled variant](/assets/images/textarea-variant-4.svg "textarea disabled variant") @@ -154,13 +154,13 @@ tabs: | ---------------- | --------- | -------- | - | Bg color | $tonal100 | \#EEEEEE | + | Bg color | $grey200 | \#EEEEEE | - | Border-color | $tonal400 | \#545454 | + | Border-color | $grey800 | \#545454 | - | Label font-color | $tonal500 | \#333333 | + | Label font-color | $grey900 | \#333333 | - | Text font-color | $tonal600 | \#1F1F1F | + | Text font-color | $grey1000 | \#1F1F1F | ![textarea error variant](/assets/images/textarea-variant-5.svg "textarea error variant") @@ -172,11 +172,11 @@ tabs: | ------------------------ | --------- | -------- | - | Bg color | $tonal100 | \#EEEEEE | + | Bg color | $grey200 | \#EEEEEE | | Border-color | $danger | \#EE0505 | - | Label font-color | $tonal500 | \#333333 | + | Label font-color | $grey900 | \#333333 | | Text font-color | $danger | \#EE0505 | diff --git a/documentation/content/components.textarea.md b/documentation/content/components.textarea.md index 0c37e1013..f85e97c69 100644 --- a/documentation/content/components.textarea.md +++ b/documentation/content/components.textarea.md @@ -87,13 +87,13 @@ tabs: | Bg color | $white | \#ffffff | - | Border-color | $tonal400 | \#545454 | + | Border-color | $grey800 | \#545454 | - | Label font-color | $tonal500 | \#333333 | + | Label font-color | $grey900 | \#333333 | - | Description font-color | $tonal300 | \#757575 | + | Description font-color | $grey700 | \#757575 | - | Text font-color | $tonal600 | \#1F1F1F | + | Text font-color | $grey1000 | \#1F1F1F | ![textarea placeholder variant](/assets/images/textarea-variant-2.svg "textarea placeholder variant") @@ -108,13 +108,13 @@ tabs: | Bg color | $white | \#ffffff | - | Border-color | $tonal400 | \#545454 | + | Border-color | $grey800 | \#545454 | - | Label font-color | $tonal500 | \#333333 | + | Label font-color | $grey900 | \#333333 | - | Description font-color | $tonal300 | \#757575 | + | Description font-color | $grey700 | \#757575 | - | Placeholder font-color | $tonal300 | \#757575 | + | Placeholder font-color | $grey700 | \#757575 | ![textarea focus variant](/assets/images/textarea-variant-3.svg "textarea focus variant") @@ -130,9 +130,9 @@ tabs: | Border-color | $primary800 | \#0F67F5 | - | Label font-color | $tonal500 | \#333333 | + | Label font-color | $grey900 | \#333333 | - | Text font-color | $tonal600 | \#1F1F1F | + | Text font-color | $grey1000 | \#1F1F1F | ![textarea disabled variant](/assets/images/textarea-variant-4.svg "textarea disabled variant") @@ -144,13 +144,13 @@ tabs: | ---------------- | --------- | -------- | - | Bg color | $tonal100 | \#EEEEEE | + | Bg color | $grey200 | \#EEEEEE | - | Border-color | $tonal400 | \#545454 | + | Border-color | $grey800 | \#545454 | - | Label font-color | $tonal500 | \#333333 | + | Label font-color | $grey900 | \#333333 | - | Text font-color | $tonal600 | \#1F1F1F | + | Text font-color | $grey1000 | \#1F1F1F | ![textarea error variant](/assets/images/textarea-variant-5.svg "textarea error variant") @@ -162,11 +162,11 @@ tabs: | ------------------------ | --------- | -------- | - | Bg color | $tonal100 | \#EEEEEE | + | Bg color | $grey200 | \#EEEEEE | | Border-color | $danger | \#EE0505 | - | Label font-color | $tonal500 | \#333333 | + | Label font-color | $grey900 | \#333333 | | Text font-color | $danger | \#EE0505 | diff --git a/documentation/content/components.top-bar.md b/documentation/content/components.top-bar.md index 78367f47f..8a2744867 100644 --- a/documentation/content/components.top-bar.md +++ b/documentation/content/components.top-bar.md @@ -36,11 +36,7 @@ tabs: ## TopBar Size Variant - TopBar has a default size of `md` which means that the default height of the component is 64px and the `Topbar.BrandLogo` is 24px. - - - If size `lg` is passed to the `TopBar` it will be 96px in height and the `TopBar.BrandLogo` will be 32px in height. - + TopBar has a default size of `md` which means that the default height of the component is 64px. If size `lg` is passed to the `TopBar` it will be 96px in height. @@ -107,10 +103,12 @@ tabs: ## API Reference - - + + + + + - - title: Visual content: >- ## Structure diff --git a/documentation/content/theme.typography.md b/documentation/content/theme.typography.md index e093def96..768e8d6cc 100644 --- a/documentation/content/theme.typography.md +++ b/documentation/content/theme.typography.md @@ -29,7 +29,7 @@ tabs: ```jsx - + Hello World diff --git a/documentation/package.json b/documentation/package.json index 426413cd5..e890c9f63 100644 --- a/documentation/package.json +++ b/documentation/package.json @@ -12,9 +12,9 @@ "format": "prettier '**/*.{js,ts,tsx}' --write" }, "dependencies": { - "@atom-learning/components": "0.0.0-semantically-released", + "@atom-learning/components": "workspace:*", "@atom-learning/icons": "^1.20.0", - "@atom-learning/theme": "3.1.0", + "@atom-learning/theme": "^4.0.0", "@lukeed/uuid": "^2.0.0", "immutable": "^4.3.7", "lodash.find": "^4.6.0", diff --git a/documentation/pages/_app.tsx b/documentation/pages/_app.tsx index 3647fc680..9edf34bc5 100644 --- a/documentation/pages/_app.tsx +++ b/documentation/pages/_app.tsx @@ -8,6 +8,11 @@ import { useIsMounted } from '~/utilities/hooks/useIsMounted' import { Layout as AppLayout } from '~/components/app' globalCss({ + '@font-face': { + fontFamily: '"National 2 Condensed"', + fontWeight: 700, + src: `url(/assets/national-2-condensed-bold.woff2) format('woff2')` + }, '*': { boxSizing: 'border-box' }, body: { margin: 0 } })() diff --git a/documentation/pages/_document.tsx b/documentation/pages/_document.tsx index 1066ba118..af4bd474f 100644 --- a/documentation/pages/_document.tsx +++ b/documentation/pages/_document.tsx @@ -10,7 +10,7 @@ const Document = () => { - +
diff --git a/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap b/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap index 74f2fa9bf..e8bddc2b7 100644 --- a/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap +++ b/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Accordion component renders an accordion 1`] = ` @media { :root, - .t-bgDNai { + .t-dfjnAG { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -186,29 +198,14 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-marsh1000: hsl(147, 17%, 18%); --colors-marsh1100: hsl(147, 24%, 13%); --colors-marsh1200: hsl(147, 14%, 7%); - --colors-tonal50: hsl(0, 0%, 96%); - --colors-tonal100: hsl(0, 0%, 92%); - --colors-tonal200: hsl(0, 0%, 62%); - --colors-tonal300: hsl(0, 0%, 46%); - --colors-tonal400: hsl(0, 0%, 33%); - --colors-tonal500: hsl(0, 0%, 20%); - --colors-tonal600: hsl(0, 0%, 12%); --colors-alpha100: hsla(0, 0%, 20%, 0.1); --colors-alpha150: hsla(0, 0%, 20%, 0.15); --colors-alpha200: hsla(0, 0%, 20%, 0.2); --colors-alpha250: hsla(0, 0%, 20%, 0.25); --colors-alpha600: hsla(0, 0%, 20%, 0.6); - --colors-brandRed: hsl(0, 91%, 64%); - --colors-brandRedAccent: hsl(14, 100%, 71%); - --colors-brandGreen: hsl(128, 47%, 53%); - --colors-brandGreenAccent: hsl(168, 100%, 20%); - --colors-brandPurple: hsl(256, 65%, 62%); - --colors-brandPurpleAccent: hsl(256, 93%, 35%); - --colors-brandYellow: hsl(41, 100%, 55%); - --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -223,13 +220,13 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-warningMid: hsl(41, 89%, 48%); --colors-warningDark: hsl(41, 100%, 41%); --colors-warningText: hsl(24, 100%, 37%); - --colors-subjectEnglish: hsl(0, 91%, 64%); - --colors-subjectMaths: hsl(217, 92%, 51%); + --colors-subjectEnglish: hsl(333, 75%, 59%); + --colors-subjectMaths: hsl(214, 100%, 58%); --colors-subjectScience: hsl(256, 65%, 62%); - --colors-subjectVerbalReasoning: hsl(128, 47%, 53%); + --colors-subjectVerbalReasoning: hsl(148, 84%, 36%); --colors-subjectNonVerbalReasoning: hsl(41, 100%, 55%); - --colors-subjectCreativeWriting: hsl(33, 100%, 50%); - --colors-subjectExamSkills: hsl(256, 93%, 35%); + --colors-subjectCreativeWriting: hsl(35, 95%, 50%); + --colors-subjectExamSkills: hsl(257, 53%, 35%); --colors-glBlueLight: hsl(222, 68%, 78%); --colors-glBluePrimary: hsl(222, 56%, 55%); --colors-glBlueDark: hsl(222, 35%, 43%); @@ -241,7 +238,7 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +263,7 @@ exports[`Accordion component renders an accordion 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; diff --git a/lib/src/components/action-icon/ActionIcon.tsx b/lib/src/components/action-icon/ActionIcon.tsx index ba8d19ecc..e0ac62824 100644 --- a/lib/src/components/action-icon/ActionIcon.tsx +++ b/lib/src/components/action-icon/ActionIcon.tsx @@ -106,7 +106,7 @@ const StyledButton = styled('button', { // prettier-ignore compoundVariants: [ - getSimpleVariant('neutral', '$tonal300', '$primary900', '$primary1000'), + getSimpleVariant('neutral', '$grey700', '$primary900', '$primary1000'), getSimpleVariant('primary', '$primary800', '$primary900', '$primary1000'), getSimpleVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'), getSimpleVariant('success', '$success', '$successMid', '$successDark'), diff --git a/lib/src/components/action-icon/__snapshots__/ActionIcon.test.tsx.snap b/lib/src/components/action-icon/__snapshots__/ActionIcon.test.tsx.snap index 50bb5ccb6..5f21729c9 100644 --- a/lib/src/components/action-icon/__snapshots__/ActionIcon.test.tsx.snap +++ b/lib/src/components/action-icon/__snapshots__/ActionIcon.test.tsx.snap @@ -33,8 +33,8 @@ exports[`ActionIcon component renders 1`] = ` vertical-align: middle; } - .c-hVoQtf { - background-color: var(--colors-tonal500); + .c-hkdxUu { + background-color: var(--colors-grey900); border-radius: var(--radii-0); box-shadow: var(--shadows-0); color: white; @@ -50,7 +50,7 @@ exports[`ActionIcon component renders 1`] = ` } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf { + .c-hkdxUu { animation-duration: 75ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; @@ -58,25 +58,25 @@ exports[`ActionIcon component renders 1`] = ` } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="top"] { + .c-hkdxUu[data-state="delayed-open"][data-side="top"] { animation-name: k-ftcNPK; } } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="right"] { + .c-hkdxUu[data-state="delayed-open"][data-side="right"] { animation-name: k-hbaHED; } } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="bottom"] { + .c-hkdxUu[data-state="delayed-open"][data-side="bottom"] { animation-name: k-daNevH; } } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="left"] { + .c-hkdxUu[data-state="delayed-open"][data-side="left"] { animation-name: k-fvyGIa; } } @@ -94,7 +94,7 @@ exports[`ActionIcon component renders 1`] = ` stroke-width: 1.5; } - .c-hVoQtf-gWQnqe-size-md { + .c-hkdxUu-gWQnqe-size-md { max-width: 250px; } } @@ -160,8 +160,8 @@ exports[`ActionIcon component renders an external link with the correct attribut vertical-align: middle; } - .c-hVoQtf { - background-color: var(--colors-tonal500); + .c-hkdxUu { + background-color: var(--colors-grey900); border-radius: var(--radii-0); box-shadow: var(--shadows-0); color: white; @@ -177,7 +177,7 @@ exports[`ActionIcon component renders an external link with the correct attribut } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf { + .c-hkdxUu { animation-duration: 75ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; @@ -185,25 +185,25 @@ exports[`ActionIcon component renders an external link with the correct attribut } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="top"] { + .c-hkdxUu[data-state="delayed-open"][data-side="top"] { animation-name: k-ftcNPK; } } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="right"] { + .c-hkdxUu[data-state="delayed-open"][data-side="right"] { animation-name: k-hbaHED; } } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="bottom"] { + .c-hkdxUu[data-state="delayed-open"][data-side="bottom"] { animation-name: k-daNevH; } } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="left"] { + .c-hkdxUu[data-state="delayed-open"][data-side="left"] { animation-name: k-fvyGIa; } } @@ -221,7 +221,7 @@ exports[`ActionIcon component renders an external link with the correct attribut stroke-width: 1.5; } - .c-hVoQtf-gWQnqe-size-md { + .c-hkdxUu-gWQnqe-size-md { max-width: 250px; } } diff --git a/lib/src/components/avatar/Avatar.tsx b/lib/src/components/avatar/Avatar.tsx index d1bc574fd..b94f90449 100644 --- a/lib/src/components/avatar/Avatar.tsx +++ b/lib/src/components/avatar/Avatar.tsx @@ -12,9 +12,9 @@ const avatarRootStyles = { display: 'flex', justifyContent: 'center', alignItems: 'center', - color: '$tonal400', + color: '$grey800', borderRadius: '$round', - border: '2px solid $tonal100', + border: '2px solid $grey200', backgroundColor: '$white', overflow: 'hidden', variants: { @@ -35,12 +35,12 @@ const StyledButton = styled('button', { ...avatarRootStyles, '&:not([disabled])': { '&:hover': { - borderColor: '$tonal400', - backgroundColor: '$tonal50' + borderColor: '$grey800', + backgroundColor: '$grey100' }, '&:active': { borderColor: '$primary800', - backgroundColor: '$tonal100' + backgroundColor: '$grey200' }, '&:focus-visible': focusVisibleStyleBlock() }, diff --git a/lib/src/components/avatar/AvatarInitial.tsx b/lib/src/components/avatar/AvatarInitial.tsx index 0faa842f2..0ca0dfdf8 100644 --- a/lib/src/components/avatar/AvatarInitial.tsx +++ b/lib/src/components/avatar/AvatarInitial.tsx @@ -28,7 +28,7 @@ export const AvatarInitial = () => { } return ( - + {name[0].toUpperCase()} ) diff --git a/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap b/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap index e4ce931b1..c1e436fa3 100644 --- a/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap +++ b/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap @@ -2,13 +2,13 @@ exports[`Avatar component renders a fallback icon instead of an initial if name is missing 1`] = ` @media { - .c-hMBZYr { + .c-fmVwAE { display: flex; justify-content: center; align-items: center; - color: var(--colors-tonal400); + color: var(--colors-grey800); border-radius: var(--radii-round); - border: 2px solid var(--colors-tonal100); + border: 2px solid var(--colors-grey200); background-color: var(--colors-white); overflow: hidden; } @@ -24,14 +24,12 @@ exports[`Avatar component renders a fallback icon instead of an initial if name object-fit: cover; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -47,29 +45,33 @@ exports[`Avatar component renders a fallback icon instead of an initial if name } @media { - .c-hMBZYr-kMhpXP-size-lg { + .c-fmVwAE-kMhpXP-size-lg { height: var(--sizes-5); width: var(--sizes-5); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-hMBZYr-fDXBFo-size-xs { + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + + .c-fmVwAE-fDXBFo-size-xs { height: var(--sizes-2); width: var(--sizes-2); } @@ -80,18 +82,18 @@ exports[`Avatar component renders a fallback icon instead of an initial if name stroke-width: 1.75; } - .c-dyvMgW-bhKTXb-size-xs { + .c-ctivzP-bhKTXb-size-xs { font-size: var(--fontSizes-xs); line-height: 1.6; } - .c-dyvMgW-bhKTXb-size-xs::before { + .c-ctivzP-bhKTXb-size-xs::before { content: ''; margin-bottom: -0.4364em; display: table; } - .c-dyvMgW-bhKTXb-size-xs::after { + .c-ctivzP-bhKTXb-size-xs::after { content: ''; margin-top: -0.4364em; display: table; @@ -99,8 +101,8 @@ exports[`Avatar component renders a fallback icon instead of an initial if name } @media { - .c-dyvMgW-ildsiYK-css { - color: var(--colors-tonal400); + .c-ctivzP-iksoatv-css { + color: var(--colors-grey800); } .c-PJLV-ieGSWOZ-css { @@ -117,7 +119,7 @@ exports[`Avatar component renders a fallback icon instead of an initial if name
.c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -190,29 +190,33 @@ exports[`Avatar component renders an icon avatar 1`] = ` } @media { - .c-hMBZYr-kMhpXP-size-lg { + .c-fmVwAE-kMhpXP-size-lg { height: var(--sizes-5); width: var(--sizes-5); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-hMBZYr-fDXBFo-size-xs { + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + + .c-fmVwAE-fDXBFo-size-xs { height: var(--sizes-2); width: var(--sizes-2); } @@ -223,18 +227,18 @@ exports[`Avatar component renders an icon avatar 1`] = ` stroke-width: 1.75; } - .c-dyvMgW-bhKTXb-size-xs { + .c-ctivzP-bhKTXb-size-xs { font-size: var(--fontSizes-xs); line-height: 1.6; } - .c-dyvMgW-bhKTXb-size-xs::before { + .c-ctivzP-bhKTXb-size-xs::before { content: ''; margin-bottom: -0.4364em; display: table; } - .c-dyvMgW-bhKTXb-size-xs::after { + .c-ctivzP-bhKTXb-size-xs::after { content: ''; margin-top: -0.4364em; display: table; @@ -242,8 +246,8 @@ exports[`Avatar component renders an icon avatar 1`] = ` } @media { - .c-dyvMgW-ildsiYK-css { - color: var(--colors-tonal400); + .c-ctivzP-iksoatv-css { + color: var(--colors-grey800); } .c-PJLV-ieGSWOZ-css { @@ -260,7 +264,7 @@ exports[`Avatar component renders an icon avatar 1`] = `
somobody's avatar .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -368,29 +370,33 @@ exports[`Avatar component renders an inital avatar 1`] = ` } @media { - .c-hMBZYr-kMhpXP-size-lg { + .c-fmVwAE-kMhpXP-size-lg { height: var(--sizes-5); width: var(--sizes-5); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-hMBZYr-fDXBFo-size-xs { + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + + .c-fmVwAE-fDXBFo-size-xs { height: var(--sizes-2); width: var(--sizes-2); } @@ -401,18 +407,18 @@ exports[`Avatar component renders an inital avatar 1`] = ` stroke-width: 1.75; } - .c-dyvMgW-bhKTXb-size-xs { + .c-ctivzP-bhKTXb-size-xs { font-size: var(--fontSizes-xs); line-height: 1.6; } - .c-dyvMgW-bhKTXb-size-xs::before { + .c-ctivzP-bhKTXb-size-xs::before { content: ''; margin-bottom: -0.4364em; display: table; } - .c-dyvMgW-bhKTXb-size-xs::after { + .c-ctivzP-bhKTXb-size-xs::after { content: ''; margin-top: -0.4364em; display: table; @@ -420,8 +426,8 @@ exports[`Avatar component renders an inital avatar 1`] = ` } @media { - .c-dyvMgW-ildsiYK-css { - color: var(--colors-tonal400); + .c-ctivzP-iksoatv-css { + color: var(--colors-grey800); } .c-PJLV-ieGSWOZ-css { @@ -438,10 +444,10 @@ exports[`Avatar component renders an inital avatar 1`] = `

A

@@ -451,13 +457,13 @@ exports[`Avatar component renders an inital avatar 1`] = ` exports[`Avatar component renders an xs size with the fallback icon when src and name are missing 1`] = ` @media { - .c-hMBZYr { + .c-fmVwAE { display: flex; justify-content: center; align-items: center; - color: var(--colors-tonal400); + color: var(--colors-grey800); border-radius: var(--radii-round); - border: 2px solid var(--colors-tonal100); + border: 2px solid var(--colors-grey200); background-color: var(--colors-white); overflow: hidden; } @@ -473,14 +479,12 @@ exports[`Avatar component renders an xs size with the fallback icon when src and object-fit: cover; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -496,29 +500,33 @@ exports[`Avatar component renders an xs size with the fallback icon when src and } @media { - .c-hMBZYr-kMhpXP-size-lg { + .c-fmVwAE-kMhpXP-size-lg { height: var(--sizes-5); width: var(--sizes-5); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-hMBZYr-fDXBFo-size-xs { + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + + .c-fmVwAE-fDXBFo-size-xs { height: var(--sizes-2); width: var(--sizes-2); } @@ -531,8 +539,8 @@ exports[`Avatar component renders an xs size with the fallback icon when src and } @media { - .c-dyvMgW-ildsiYK-css { - color: var(--colors-tonal400); + .c-ctivzP-iksoatv-css { + color: var(--colors-grey800); } .c-PJLV-ieGSWOZ-css { @@ -549,7 +557,7 @@ exports[`Avatar component renders an xs size with the fallback icon when src and
.c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } } @media { - .c-hMBZYr-kMhpXP-size-lg { + .c-fmVwAE-kMhpXP-size-lg { height: var(--sizes-5); width: var(--sizes-5); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } } @media { - .c-dyvMgW-ildsiYK-css { - color: var(--colors-tonal400); + .c-ctivzP-iksoatv-css { + color: var(--colors-grey800); } }

B

diff --git a/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap b/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap index 0dba7ac25..4b3121048 100644 --- a/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap +++ b/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Badge component renders 1`] = ` @media { :root, - .t-bgDNai { + .t-dfjnAG { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`Badge component renders 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`Badge component renders 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`Badge component renders 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`Badge component renders 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -186,29 +198,14 @@ exports[`Badge component renders 1`] = ` --colors-marsh1000: hsl(147, 17%, 18%); --colors-marsh1100: hsl(147, 24%, 13%); --colors-marsh1200: hsl(147, 14%, 7%); - --colors-tonal50: hsl(0, 0%, 96%); - --colors-tonal100: hsl(0, 0%, 92%); - --colors-tonal200: hsl(0, 0%, 62%); - --colors-tonal300: hsl(0, 0%, 46%); - --colors-tonal400: hsl(0, 0%, 33%); - --colors-tonal500: hsl(0, 0%, 20%); - --colors-tonal600: hsl(0, 0%, 12%); --colors-alpha100: hsla(0, 0%, 20%, 0.1); --colors-alpha150: hsla(0, 0%, 20%, 0.15); --colors-alpha200: hsla(0, 0%, 20%, 0.2); --colors-alpha250: hsla(0, 0%, 20%, 0.25); --colors-alpha600: hsla(0, 0%, 20%, 0.6); - --colors-brandRed: hsl(0, 91%, 64%); - --colors-brandRedAccent: hsl(14, 100%, 71%); - --colors-brandGreen: hsl(128, 47%, 53%); - --colors-brandGreenAccent: hsl(168, 100%, 20%); - --colors-brandPurple: hsl(256, 65%, 62%); - --colors-brandPurpleAccent: hsl(256, 93%, 35%); - --colors-brandYellow: hsl(41, 100%, 55%); - --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -223,13 +220,13 @@ exports[`Badge component renders 1`] = ` --colors-warningMid: hsl(41, 89%, 48%); --colors-warningDark: hsl(41, 100%, 41%); --colors-warningText: hsl(24, 100%, 37%); - --colors-subjectEnglish: hsl(0, 91%, 64%); - --colors-subjectMaths: hsl(217, 92%, 51%); + --colors-subjectEnglish: hsl(333, 75%, 59%); + --colors-subjectMaths: hsl(214, 100%, 58%); --colors-subjectScience: hsl(256, 65%, 62%); - --colors-subjectVerbalReasoning: hsl(128, 47%, 53%); + --colors-subjectVerbalReasoning: hsl(148, 84%, 36%); --colors-subjectNonVerbalReasoning: hsl(41, 100%, 55%); - --colors-subjectCreativeWriting: hsl(33, 100%, 50%); - --colors-subjectExamSkills: hsl(256, 93%, 35%); + --colors-subjectCreativeWriting: hsl(35, 95%, 50%); + --colors-subjectExamSkills: hsl(257, 53%, 35%); --colors-glBlueLight: hsl(222, 68%, 78%); --colors-glBluePrimary: hsl(222, 56%, 55%); --colors-glBlueDark: hsl(222, 35%, 43%); @@ -241,7 +238,7 @@ exports[`Badge component renders 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +263,7 @@ exports[`Badge component renders 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -319,14 +316,12 @@ exports[`Badge component renders 1`] = ` margin-right: var(--space-1); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -349,28 +344,32 @@ exports[`Badge component renders 1`] = ` padding-bottom: var(--space-0); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-dyvMgW-fmPQHp-noCapsize-true::before, - .c-dyvMgW-fmPQHp-noCapsize-true::after { + .c-ctivzP-fmPQHp-noCapsize-true::before, + .c-ctivzP-fmPQHp-noCapsize-true::after { display: none !important; } + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-goUgMm-ktaGtY-overflow-wrap { white-space: wrap; } @@ -382,7 +381,7 @@ exports[`Badge component renders 1`] = ` role="status" >

Some Text

@@ -393,7 +392,7 @@ exports[`Badge component renders 1`] = ` exports[`Badge component renders a md size and danger theme 1`] = ` @media { :root, - .t-bgDNai { + .t-dfjnAG { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -428,22 +427,34 @@ exports[`Badge component renders a md size and danger theme 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -456,18 +467,18 @@ exports[`Badge component renders a md size and danger theme 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -482,8 +493,8 @@ exports[`Badge component renders a md size and danger theme 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -504,18 +515,18 @@ exports[`Badge component renders a md size and danger theme 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -576,29 +587,14 @@ exports[`Badge component renders a md size and danger theme 1`] = ` --colors-marsh1000: hsl(147, 17%, 18%); --colors-marsh1100: hsl(147, 24%, 13%); --colors-marsh1200: hsl(147, 14%, 7%); - --colors-tonal50: hsl(0, 0%, 96%); - --colors-tonal100: hsl(0, 0%, 92%); - --colors-tonal200: hsl(0, 0%, 62%); - --colors-tonal300: hsl(0, 0%, 46%); - --colors-tonal400: hsl(0, 0%, 33%); - --colors-tonal500: hsl(0, 0%, 20%); - --colors-tonal600: hsl(0, 0%, 12%); --colors-alpha100: hsla(0, 0%, 20%, 0.1); --colors-alpha150: hsla(0, 0%, 20%, 0.15); --colors-alpha200: hsla(0, 0%, 20%, 0.2); --colors-alpha250: hsla(0, 0%, 20%, 0.25); --colors-alpha600: hsla(0, 0%, 20%, 0.6); - --colors-brandRed: hsl(0, 91%, 64%); - --colors-brandRedAccent: hsl(14, 100%, 71%); - --colors-brandGreen: hsl(128, 47%, 53%); - --colors-brandGreenAccent: hsl(168, 100%, 20%); - --colors-brandPurple: hsl(256, 65%, 62%); - --colors-brandPurpleAccent: hsl(256, 93%, 35%); - --colors-brandYellow: hsl(41, 100%, 55%); - --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -613,13 +609,13 @@ exports[`Badge component renders a md size and danger theme 1`] = ` --colors-warningMid: hsl(41, 89%, 48%); --colors-warningDark: hsl(41, 100%, 41%); --colors-warningText: hsl(24, 100%, 37%); - --colors-subjectEnglish: hsl(0, 91%, 64%); - --colors-subjectMaths: hsl(217, 92%, 51%); + --colors-subjectEnglish: hsl(333, 75%, 59%); + --colors-subjectMaths: hsl(214, 100%, 58%); --colors-subjectScience: hsl(256, 65%, 62%); - --colors-subjectVerbalReasoning: hsl(128, 47%, 53%); + --colors-subjectVerbalReasoning: hsl(148, 84%, 36%); --colors-subjectNonVerbalReasoning: hsl(41, 100%, 55%); - --colors-subjectCreativeWriting: hsl(33, 100%, 50%); - --colors-subjectExamSkills: hsl(256, 93%, 35%); + --colors-subjectCreativeWriting: hsl(35, 95%, 50%); + --colors-subjectExamSkills: hsl(257, 53%, 35%); --colors-glBlueLight: hsl(222, 68%, 78%); --colors-glBluePrimary: hsl(222, 56%, 55%); --colors-glBlueDark: hsl(222, 35%, 43%); @@ -631,7 +627,7 @@ exports[`Badge component renders a md size and danger theme 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -656,7 +652,7 @@ exports[`Badge component renders a md size and danger theme 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -716,14 +712,12 @@ exports[`Badge component renders a md size and danger theme 1`] = ` margin-right: var(--space-1); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -746,28 +740,32 @@ exports[`Badge component renders a md size and danger theme 1`] = ` padding-bottom: var(--space-0); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-dyvMgW-fmPQHp-noCapsize-true::before, - .c-dyvMgW-fmPQHp-noCapsize-true::after { + .c-ctivzP-fmPQHp-noCapsize-true::before, + .c-ctivzP-fmPQHp-noCapsize-true::after { display: none !important; } + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-goUgMm-ktaGtY-overflow-wrap { white-space: wrap; } @@ -786,7 +784,7 @@ exports[`Badge component renders a md size and danger theme 1`] = ` role="status" >

Some Text

@@ -797,7 +795,7 @@ exports[`Badge component renders a md size and danger theme 1`] = ` exports[`Badge component renders with an icon 1`] = ` @media { :root, - .t-bgDNai { + .t-dfjnAG { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -832,22 +830,34 @@ exports[`Badge component renders with an icon 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -860,18 +870,18 @@ exports[`Badge component renders with an icon 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -886,8 +896,8 @@ exports[`Badge component renders with an icon 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -908,18 +918,18 @@ exports[`Badge component renders with an icon 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -980,29 +990,14 @@ exports[`Badge component renders with an icon 1`] = ` --colors-marsh1000: hsl(147, 17%, 18%); --colors-marsh1100: hsl(147, 24%, 13%); --colors-marsh1200: hsl(147, 14%, 7%); - --colors-tonal50: hsl(0, 0%, 96%); - --colors-tonal100: hsl(0, 0%, 92%); - --colors-tonal200: hsl(0, 0%, 62%); - --colors-tonal300: hsl(0, 0%, 46%); - --colors-tonal400: hsl(0, 0%, 33%); - --colors-tonal500: hsl(0, 0%, 20%); - --colors-tonal600: hsl(0, 0%, 12%); --colors-alpha100: hsla(0, 0%, 20%, 0.1); --colors-alpha150: hsla(0, 0%, 20%, 0.15); --colors-alpha200: hsla(0, 0%, 20%, 0.2); --colors-alpha250: hsla(0, 0%, 20%, 0.25); --colors-alpha600: hsla(0, 0%, 20%, 0.6); - --colors-brandRed: hsl(0, 91%, 64%); - --colors-brandRedAccent: hsl(14, 100%, 71%); - --colors-brandGreen: hsl(128, 47%, 53%); - --colors-brandGreenAccent: hsl(168, 100%, 20%); - --colors-brandPurple: hsl(256, 65%, 62%); - --colors-brandPurpleAccent: hsl(256, 93%, 35%); - --colors-brandYellow: hsl(41, 100%, 55%); - --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -1017,13 +1012,13 @@ exports[`Badge component renders with an icon 1`] = ` --colors-warningMid: hsl(41, 89%, 48%); --colors-warningDark: hsl(41, 100%, 41%); --colors-warningText: hsl(24, 100%, 37%); - --colors-subjectEnglish: hsl(0, 91%, 64%); - --colors-subjectMaths: hsl(217, 92%, 51%); + --colors-subjectEnglish: hsl(333, 75%, 59%); + --colors-subjectMaths: hsl(214, 100%, 58%); --colors-subjectScience: hsl(256, 65%, 62%); - --colors-subjectVerbalReasoning: hsl(128, 47%, 53%); + --colors-subjectVerbalReasoning: hsl(148, 84%, 36%); --colors-subjectNonVerbalReasoning: hsl(41, 100%, 55%); - --colors-subjectCreativeWriting: hsl(33, 100%, 50%); - --colors-subjectExamSkills: hsl(256, 93%, 35%); + --colors-subjectCreativeWriting: hsl(35, 95%, 50%); + --colors-subjectExamSkills: hsl(257, 53%, 35%); --colors-glBlueLight: hsl(222, 68%, 78%); --colors-glBluePrimary: hsl(222, 56%, 55%); --colors-glBlueDark: hsl(222, 35%, 43%); @@ -1035,7 +1030,7 @@ exports[`Badge component renders with an icon 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -1060,7 +1055,7 @@ exports[`Badge component renders with an icon 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -1120,14 +1115,12 @@ exports[`Badge component renders with an icon 1`] = ` margin-right: var(--space-1); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -1160,28 +1153,32 @@ exports[`Badge component renders with an icon 1`] = ` padding-bottom: var(--space-0); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-dyvMgW-fmPQHp-noCapsize-true::before, - .c-dyvMgW-fmPQHp-noCapsize-true::after { + .c-ctivzP-fmPQHp-noCapsize-true::before, + .c-ctivzP-fmPQHp-noCapsize-true::after { display: none !important; } + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-goUgMm-ktaGtY-overflow-wrap { white-space: wrap; } @@ -1216,7 +1213,7 @@ exports[`Badge component renders with an icon 1`] = ` />

Some Text

diff --git a/lib/src/components/badge/stitches.badge.colorscheme.config.ts b/lib/src/components/badge/stitches.badge.colorscheme.config.ts index 1347a7747..03b500629 100644 --- a/lib/src/components/badge/stitches.badge.colorscheme.config.ts +++ b/lib/src/components/badge/stitches.badge.colorscheme.config.ts @@ -71,6 +71,15 @@ const blue = createTheme({ } }) +const pink = createTheme({ + colors: { + textSubtle: '$pink1000', + backgroundSubtle: '$pink200', + textBold: '#FFF', + backgroundBold: '$pink800' + } +}) + const purple = createTheme({ colors: { textSubtle: '$purple1000', @@ -160,6 +169,7 @@ export const colorSchemes = { warning, grey, blue, + pink, purple, cyan, green, diff --git a/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap b/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap index cd9fc7603..9c8ed288f 100644 --- a/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap +++ b/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap @@ -3,7 +3,7 @@ exports[`BannerRegular component renders 1`] = ` @media { :root, - .t-bgDNai { + .t-dfjnAG { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`BannerRegular component renders 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`BannerRegular component renders 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`BannerRegular component renders 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`BannerRegular component renders 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -186,29 +198,14 @@ exports[`BannerRegular component renders 1`] = ` --colors-marsh1000: hsl(147, 17%, 18%); --colors-marsh1100: hsl(147, 24%, 13%); --colors-marsh1200: hsl(147, 14%, 7%); - --colors-tonal50: hsl(0, 0%, 96%); - --colors-tonal100: hsl(0, 0%, 92%); - --colors-tonal200: hsl(0, 0%, 62%); - --colors-tonal300: hsl(0, 0%, 46%); - --colors-tonal400: hsl(0, 0%, 33%); - --colors-tonal500: hsl(0, 0%, 20%); - --colors-tonal600: hsl(0, 0%, 12%); --colors-alpha100: hsla(0, 0%, 20%, 0.1); --colors-alpha150: hsla(0, 0%, 20%, 0.15); --colors-alpha200: hsla(0, 0%, 20%, 0.2); --colors-alpha250: hsla(0, 0%, 20%, 0.25); --colors-alpha600: hsla(0, 0%, 20%, 0.6); - --colors-brandRed: hsl(0, 91%, 64%); - --colors-brandRedAccent: hsl(14, 100%, 71%); - --colors-brandGreen: hsl(128, 47%, 53%); - --colors-brandGreenAccent: hsl(168, 100%, 20%); - --colors-brandPurple: hsl(256, 65%, 62%); - --colors-brandPurpleAccent: hsl(256, 93%, 35%); - --colors-brandYellow: hsl(41, 100%, 55%); - --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -223,13 +220,13 @@ exports[`BannerRegular component renders 1`] = ` --colors-warningMid: hsl(41, 89%, 48%); --colors-warningDark: hsl(41, 100%, 41%); --colors-warningText: hsl(24, 100%, 37%); - --colors-subjectEnglish: hsl(0, 91%, 64%); - --colors-subjectMaths: hsl(217, 92%, 51%); + --colors-subjectEnglish: hsl(333, 75%, 59%); + --colors-subjectMaths: hsl(214, 100%, 58%); --colors-subjectScience: hsl(256, 65%, 62%); - --colors-subjectVerbalReasoning: hsl(128, 47%, 53%); + --colors-subjectVerbalReasoning: hsl(148, 84%, 36%); --colors-subjectNonVerbalReasoning: hsl(41, 100%, 55%); - --colors-subjectCreativeWriting: hsl(33, 100%, 50%); - --colors-subjectExamSkills: hsl(256, 93%, 35%); + --colors-subjectCreativeWriting: hsl(35, 95%, 50%); + --colors-subjectExamSkills: hsl(257, 53%, 35%); --colors-glBlueLight: hsl(222, 68%, 78%); --colors-glBluePrimary: hsl(222, 56%, 55%); --colors-glBlueDark: hsl(222, 35%, 43%); @@ -241,7 +238,7 @@ exports[`BannerRegular component renders 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +263,7 @@ exports[`BannerRegular component renders 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -330,8 +327,7 @@ exports[`BannerRegular component renders 1`] = ` flex-grow: 1; } - .c-jryFOR { - font-family: var(--fonts-display); + .c-iUMJTc { font-weight: 700; margin: 0; } @@ -341,14 +337,12 @@ exports[`BannerRegular component renders 1`] = ` color: var(--banner-heading-color); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -410,40 +404,45 @@ exports[`BannerRegular component renders 1`] = ` padding: var(--space-4); } - .c-jryFOR-dtbHih-size-sm { + .c-iUMJTc-kCkEYj-size-sm { + font-family: var(--fonts-body); font-size: var(--fontSizes-lg); line-height: 1.14; } - .c-jryFOR-dtbHih-size-sm::before { + .c-iUMJTc-kCkEYj-size-sm::before { content: ''; - margin-bottom: -0.2174em; + margin-bottom: -0.2078em; display: table; } - .c-jryFOR-dtbHih-size-sm::after { + .c-iUMJTc-kCkEYj-size-sm::after { content: ''; - margin-top: -0.2254em; + margin-top: -0.2078em; display: table; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; } + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-bYxtOe-llIiIE-containerSize-sm { margin-bottom: var(--space-4); } @@ -488,14 +487,14 @@ exports[`BannerRegular component renders 1`] = ` } @media (min-width: 800px) { - .c-dyvMgW-flAohk-size-md { + .c-ctivzP-flAohk-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } } @media (min-width: 800px) { - .c-dyvMgW-flAohk-size-md::before { + .c-ctivzP-flAohk-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; @@ -503,7 +502,7 @@ exports[`BannerRegular component renders 1`] = ` } @media (min-width: 800px) { - .c-dyvMgW-flAohk-size-md::after { + .c-ctivzP-flAohk-size-md::after { content: ''; margin-top: -0.3864em; display: table; @@ -611,12 +610,12 @@ exports[`BannerRegular component renders 1`] = ` class="c-PJLV c-gjbGPV c-gjbGPV-lppGPL-size-sm c-gjbGPV-iOglxG-size-md" >

Get ready for entrance exams

Talk to our admissions experts on to learn how to support your child. This is an example lor!

@@ -653,7 +652,7 @@ exports[`BannerRegular component renders 1`] = ` exports[`BannerRegular component renders dismissible variant 1`] = ` @media { :root, - .t-bgDNai { + .t-dfjnAG { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -688,22 +687,34 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -716,18 +727,18 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -742,8 +753,8 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -764,18 +775,18 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -836,29 +847,14 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` --colors-marsh1000: hsl(147, 17%, 18%); --colors-marsh1100: hsl(147, 24%, 13%); --colors-marsh1200: hsl(147, 14%, 7%); - --colors-tonal50: hsl(0, 0%, 96%); - --colors-tonal100: hsl(0, 0%, 92%); - --colors-tonal200: hsl(0, 0%, 62%); - --colors-tonal300: hsl(0, 0%, 46%); - --colors-tonal400: hsl(0, 0%, 33%); - --colors-tonal500: hsl(0, 0%, 20%); - --colors-tonal600: hsl(0, 0%, 12%); --colors-alpha100: hsla(0, 0%, 20%, 0.1); --colors-alpha150: hsla(0, 0%, 20%, 0.15); --colors-alpha200: hsla(0, 0%, 20%, 0.2); --colors-alpha250: hsla(0, 0%, 20%, 0.25); --colors-alpha600: hsla(0, 0%, 20%, 0.6); - --colors-brandRed: hsl(0, 91%, 64%); - --colors-brandRedAccent: hsl(14, 100%, 71%); - --colors-brandGreen: hsl(128, 47%, 53%); - --colors-brandGreenAccent: hsl(168, 100%, 20%); - --colors-brandPurple: hsl(256, 65%, 62%); - --colors-brandPurpleAccent: hsl(256, 93%, 35%); - --colors-brandYellow: hsl(41, 100%, 55%); - --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -873,13 +869,13 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` --colors-warningMid: hsl(41, 89%, 48%); --colors-warningDark: hsl(41, 100%, 41%); --colors-warningText: hsl(24, 100%, 37%); - --colors-subjectEnglish: hsl(0, 91%, 64%); - --colors-subjectMaths: hsl(217, 92%, 51%); + --colors-subjectEnglish: hsl(333, 75%, 59%); + --colors-subjectMaths: hsl(214, 100%, 58%); --colors-subjectScience: hsl(256, 65%, 62%); - --colors-subjectVerbalReasoning: hsl(128, 47%, 53%); + --colors-subjectVerbalReasoning: hsl(148, 84%, 36%); --colors-subjectNonVerbalReasoning: hsl(41, 100%, 55%); - --colors-subjectCreativeWriting: hsl(33, 100%, 50%); - --colors-subjectExamSkills: hsl(256, 93%, 35%); + --colors-subjectCreativeWriting: hsl(35, 95%, 50%); + --colors-subjectExamSkills: hsl(257, 53%, 35%); --colors-glBlueLight: hsl(222, 68%, 78%); --colors-glBluePrimary: hsl(222, 56%, 55%); --colors-glBlueDark: hsl(222, 35%, 43%); @@ -891,7 +887,7 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -916,7 +912,7 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -980,8 +976,7 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` flex-grow: 1; } - .c-jryFOR { - font-family: var(--fonts-display); + .c-iUMJTc { font-weight: 700; margin: 0; } @@ -991,14 +986,12 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` color: var(--banner-heading-color); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -1098,40 +1091,45 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` padding: var(--space-4); } - .c-jryFOR-dtbHih-size-sm { + .c-iUMJTc-kCkEYj-size-sm { + font-family: var(--fonts-body); font-size: var(--fontSizes-lg); line-height: 1.14; } - .c-jryFOR-dtbHih-size-sm::before { + .c-iUMJTc-kCkEYj-size-sm::before { content: ''; - margin-bottom: -0.2174em; + margin-bottom: -0.2078em; display: table; } - .c-jryFOR-dtbHih-size-sm::after { + .c-iUMJTc-kCkEYj-size-sm::after { content: ''; - margin-top: -0.2254em; + margin-top: -0.2078em; display: table; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; } + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-bYxtOe-llIiIE-containerSize-sm { margin-bottom: var(--space-4); } @@ -1191,14 +1189,14 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` } @media (min-width: 800px) { - .c-dyvMgW-flAohk-size-md { + .c-ctivzP-flAohk-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } } @media (min-width: 800px) { - .c-dyvMgW-flAohk-size-md::before { + .c-ctivzP-flAohk-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; @@ -1206,7 +1204,7 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` } @media (min-width: 800px) { - .c-dyvMgW-flAohk-size-md::after { + .c-ctivzP-flAohk-size-md::after { content: ''; margin-top: -0.3864em; display: table; @@ -1329,12 +1327,12 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` class="c-PJLV c-gjbGPV c-gjbGPV-lppGPL-size-sm c-gjbGPV-iOglxG-size-md" >

Get ready for entrance exams

Talk to our admissions experts on to learn how to support your child. This is an example lor!

diff --git a/lib/src/components/banner/banner-slim/BannerSlimText.tsx b/lib/src/components/banner/banner-slim/BannerSlimText.tsx index 819a47527..384a46fd7 100644 --- a/lib/src/components/banner/banner-slim/BannerSlimText.tsx +++ b/lib/src/components/banner/banner-slim/BannerSlimText.tsx @@ -7,7 +7,6 @@ import { useBannerContext } from '../BannerContext' const StyledText = styled(Text, { color: 'var(--banner-heading-color)', - fontWeight: '600', variants: { containerSize: { sm: {}, @@ -34,6 +33,7 @@ export const BannerSlimText = (props: React.ComponentProps) => { return ( .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } - .c-cBoNQA { + .c-ehbeFv { color: var(--banner-heading-color); - font-weight: 600; } .c-kaaUSm { @@ -424,28 +418,36 @@ exports[`BannerSlim component renders 1`] = ` width: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-dyvMgW-fmPQHp-noCapsize-true::before, - .c-dyvMgW-fmPQHp-noCapsize-true::after { + .c-ctivzP-fmPQHp-noCapsize-true::before, + .c-ctivzP-fmPQHp-noCapsize-true::after { display: none !important; } + .c-ctivzP-ecBjWS-weight-bold { + font-weight: 600; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-PJLV-fGHEql-size-sm { width: 100%; } @@ -561,7 +563,7 @@ exports[`BannerSlim component renders 1`] = ` />

Link your Prime and Nucleus accounts to see all your information in one place.

@@ -583,7 +585,7 @@ exports[`BannerSlim component renders 1`] = ` exports[`BannerSlim component renders dismissible variant 1`] = ` @media { :root, - .t-bgDNai { + .t-dfjnAG { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -618,22 +620,34 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -646,18 +660,18 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -672,8 +686,8 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -694,18 +708,18 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -766,29 +780,14 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` --colors-marsh1000: hsl(147, 17%, 18%); --colors-marsh1100: hsl(147, 24%, 13%); --colors-marsh1200: hsl(147, 14%, 7%); - --colors-tonal50: hsl(0, 0%, 96%); - --colors-tonal100: hsl(0, 0%, 92%); - --colors-tonal200: hsl(0, 0%, 62%); - --colors-tonal300: hsl(0, 0%, 46%); - --colors-tonal400: hsl(0, 0%, 33%); - --colors-tonal500: hsl(0, 0%, 20%); - --colors-tonal600: hsl(0, 0%, 12%); --colors-alpha100: hsla(0, 0%, 20%, 0.1); --colors-alpha150: hsla(0, 0%, 20%, 0.15); --colors-alpha200: hsla(0, 0%, 20%, 0.2); --colors-alpha250: hsla(0, 0%, 20%, 0.25); --colors-alpha600: hsla(0, 0%, 20%, 0.6); - --colors-brandRed: hsl(0, 91%, 64%); - --colors-brandRedAccent: hsl(14, 100%, 71%); - --colors-brandGreen: hsl(128, 47%, 53%); - --colors-brandGreenAccent: hsl(168, 100%, 20%); - --colors-brandPurple: hsl(256, 65%, 62%); - --colors-brandPurpleAccent: hsl(256, 93%, 35%); - --colors-brandYellow: hsl(41, 100%, 55%); - --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -803,13 +802,13 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` --colors-warningMid: hsl(41, 89%, 48%); --colors-warningDark: hsl(41, 100%, 41%); --colors-warningText: hsl(24, 100%, 37%); - --colors-subjectEnglish: hsl(0, 91%, 64%); - --colors-subjectMaths: hsl(217, 92%, 51%); + --colors-subjectEnglish: hsl(333, 75%, 59%); + --colors-subjectMaths: hsl(214, 100%, 58%); --colors-subjectScience: hsl(256, 65%, 62%); - --colors-subjectVerbalReasoning: hsl(128, 47%, 53%); + --colors-subjectVerbalReasoning: hsl(148, 84%, 36%); --colors-subjectNonVerbalReasoning: hsl(41, 100%, 55%); - --colors-subjectCreativeWriting: hsl(33, 100%, 50%); - --colors-subjectExamSkills: hsl(256, 93%, 35%); + --colors-subjectCreativeWriting: hsl(35, 95%, 50%); + --colors-subjectExamSkills: hsl(257, 53%, 35%); --colors-glBlueLight: hsl(222, 68%, 78%); --colors-glBluePrimary: hsl(222, 56%, 55%); --colors-glBlueDark: hsl(222, 35%, 43%); @@ -821,7 +820,7 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -846,7 +845,7 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -928,20 +927,17 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` object-fit: cover; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } - .c-cBoNQA { + .c-ehbeFv { color: var(--banner-heading-color); - font-weight: 600; } .c-kaaUSm { @@ -1035,28 +1031,36 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` width: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-dyvMgW-fmPQHp-noCapsize-true::before, - .c-dyvMgW-fmPQHp-noCapsize-true::after { + .c-ctivzP-fmPQHp-noCapsize-true::before, + .c-ctivzP-fmPQHp-noCapsize-true::after { display: none !important; } + .c-ctivzP-ecBjWS-weight-bold { + font-weight: 600; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-PJLV-fGHEql-size-sm { width: 100%; } @@ -1178,21 +1182,21 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` background: rgba(255, 255, 255, 0.75); } - .c-oUmPa-jCxibG-cv { + .c-oUmPa-fVNhqX-cv { background: transparent; - color: var(--colors-tonal300); + color: var(--colors-grey700); } - .c-oUmPa-jCxibG-cv:not(:disabled):hover, - .c-oUmPa-jCxibG-cv:not(:disabled):focus { + .c-oUmPa-fVNhqX-cv:not(:disabled):hover, + .c-oUmPa-fVNhqX-cv:not(:disabled):focus { color: var(--colors-primary900); } - .c-oUmPa-jCxibG-cv:not(:disabled):active { + .c-oUmPa-fVNhqX-cv:not(:disabled):active { color: var(--colors-primary1000); } - .c-cBoNQA-cRYaBy-cv { + .c-ehbeFv-cRYaBy-cv { margin-right: var(--space-6); } } @@ -1221,7 +1225,7 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` />

Link your Prime and Nucleus accounts to see all your information in one place.

@@ -1237,7 +1241,7 @@ exports[`BannerSlim component renders dismissible variant 1`] = `

Link your Prime and Nucleus accounts to see all your information in one place.

diff --git a/lib/src/components/button/Button.tsx b/lib/src/components/button/Button.tsx index c43ffe0fd..63d1f05ec 100644 --- a/lib/src/components/button/Button.tsx +++ b/lib/src/components/button/Button.tsx @@ -132,7 +132,7 @@ export const StyledButton = styled('button', { getButtonSolidVariant('primary', '$primary800', '$primary900', '$primary1000'), getButtonSolidVariant('secondary', '$primary1000', '$primary1100', '$primary1200'), getButtonSolidVariant('success', '$success', '$successMid', '$successDark'), - getButtonSolidVariant('warning', '$warning', '$warningMid', '$warningDark', '$tonal500'), + getButtonSolidVariant('warning', '$warning', '$warningMid', '$warningDark', '$grey900'), getButtonSolidVariant('danger', '$danger', '$dangerMid', '$dangerDark'), getButtonSolidVariant('neutral', 'white', opacify('white', -0.1), opacify('white', -0.25), '$primary800'), getButtonOutlineVariant('primary', '$primary800', '$primary900', '$primary1000'), diff --git a/lib/src/components/calendar/Calendar.tsx b/lib/src/components/calendar/Calendar.tsx index 631a37c5a..141e57489 100644 --- a/lib/src/components/calendar/Calendar.tsx +++ b/lib/src/components/calendar/Calendar.tsx @@ -22,17 +22,17 @@ const Grid = styled('div', { }) const StyledButton = styled(Button, { - color: '$tonal600', + color: '$grey1000', p: '$3', width: '$6', variants: { selected: { false: { - color: '$tonal600 !important', - fontWeight: '400', + color: '$grey1000 !important', + fontWeight: 400, '&:hover': { - bg: '$tonal100 !important', - color: '$tonal600 !important' + bg: '$grey200 !important', + color: '$grey1000 !important' }, '&[disabled]': { bg: 'white !important' } } @@ -182,7 +182,7 @@ export const Calendar = ({