diff --git a/apps/roadmap/package.json b/apps/roadmap/package.json index 77e1e2e3..8bb2beeb 100644 --- a/apps/roadmap/package.json +++ b/apps/roadmap/package.json @@ -24,5 +24,5 @@ "typecheck": "tsgo --noEmit" }, "type": "module", - "version": "1.0.1" + "version": "1.0.2" } diff --git a/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-Bold.woff2 b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-Bold.woff2 new file mode 100644 index 00000000..3b735977 Binary files /dev/null and b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-Bold.woff2 differ diff --git a/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-BoldItalic.woff2 b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-BoldItalic.woff2 new file mode 100644 index 00000000..25b28580 Binary files /dev/null and b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-BoldItalic.woff2 differ diff --git a/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2 b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2 new file mode 100644 index 00000000..65039ac4 Binary files /dev/null and b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2 differ diff --git a/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2 b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2 new file mode 100644 index 00000000..5abb72ec Binary files /dev/null and b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2 differ diff --git a/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-ExtraLight.woff2 b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-ExtraLight.woff2 new file mode 100644 index 00000000..5a136036 Binary files /dev/null and b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-ExtraLight.woff2 differ diff --git a/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2 b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2 new file mode 100644 index 00000000..ad1940c3 Binary files /dev/null and b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2 differ diff --git a/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-Light.woff2 b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-Light.woff2 new file mode 100644 index 00000000..b1eac3fd Binary files /dev/null and b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-Light.woff2 differ diff --git a/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-LightItalic.woff2 b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-LightItalic.woff2 new file mode 100644 index 00000000..f0f492f2 Binary files /dev/null and b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-LightItalic.woff2 differ diff --git a/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-Medium.woff2 b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-Medium.woff2 new file mode 100644 index 00000000..e82765dd Binary files /dev/null and b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-Medium.woff2 differ diff --git a/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-MediumItalic.woff2 b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-MediumItalic.woff2 new file mode 100644 index 00000000..c9e218a1 Binary files /dev/null and b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-MediumItalic.woff2 differ diff --git a/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-Regular.woff2 b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-Regular.woff2 new file mode 100644 index 00000000..d2babdfc Binary files /dev/null and b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-Regular.woff2 differ diff --git a/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2 b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2 new file mode 100644 index 00000000..dc05d06d Binary files /dev/null and b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2 differ diff --git a/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-SemiBold.woff2 b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-SemiBold.woff2 new file mode 100644 index 00000000..a7d9ece2 Binary files /dev/null and b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-SemiBold.woff2 differ diff --git a/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2 b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2 new file mode 100644 index 00000000..f9111766 Binary files /dev/null and b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2 differ diff --git a/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext.css b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext.css new file mode 100644 index 00000000..f4d5cdfe --- /dev/null +++ b/apps/roadmap/public/fonts/AtkinsonHyperlegibleNext.css @@ -0,0 +1,114 @@ +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-ExtraLight.woff2") format("woff2"); + font-weight: 200; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-ExtraLightItalic.woff2") format("woff2"); + font-weight: 200; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-Light.woff2") format("woff2"); + font-weight: 300; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-LightItalic.woff2") format("woff2"); + font-weight: 300; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-RegularItalic.woff2") format("woff2"); + font-weight: 400; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-Medium.woff2") format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-MediumItalic.woff2") format("woff2"); + font-weight: 500; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-SemiBold.woff2") format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-SemiBoldItalic.woff2") format("woff2"); + font-weight: 600; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-BoldItalic.woff2") format("woff2"); + font-weight: 700; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-ExtraBold.woff2") format("woff2"); + font-weight: 800; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2") format("woff2"); + font-weight: 800; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("./AtkinsonHyperlegibleNext-SemiBold.woff2") format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} diff --git a/apps/roadmap/public/themeEditor.css b/apps/roadmap/public/themeEditor.css index 97b43db0..666ea914 100644 --- a/apps/roadmap/public/themeEditor.css +++ b/apps/roadmap/public/themeEditor.css @@ -1,3 +1,161 @@ +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("https://instructure.ai/roadmap/fonts/AtkinsonHyperlegibleNext-ExtraLight.woff2") + format("woff2"); + font-weight: 200; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("https://instructure.ai/roadmap/fonts/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2") + format("woff2"); + font-weight: 200; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("https://instructure.ai/roadmap/fonts/AtkinsonHyperlegibleNext-Light.woff2") + format("woff2"); + font-weight: 300; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("https://instructure.ai/roadmap/fonts/AtkinsonHyperlegibleNext-LightItalic.woff2") + format("woff2"); + font-weight: 300; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("https://instructure.ai/roadmap/fonts/AtkinsonHyperlegibleNext-Regular.woff2") + format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("https://instructure.ai/roadmap/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2") + format("woff2"); + font-weight: 400; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("https://instructure.ai/roadmap/fonts/AtkinsonHyperlegibleNext-Medium.woff2") + format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("https://instructure.ai/roadmap/fonts/AtkinsonHyperlegibleNext-MediumItalic.woff2") + format("woff2"); + font-weight: 500; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("https://instructure.ai/roadmap/fonts/AtkinsonHyperlegibleNext-SemiBold.woff2") + format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("https://instructure.ai/roadmap/fonts/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2") + format("woff2"); + font-weight: 600; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("https://instructure.ai/roadmap/fonts/AtkinsonHyperlegibleNext-Bold.woff2") + format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("https://instructure.ai/roadmap/fonts/AtkinsonHyperlegibleNext-BoldItalic.woff2") + format("woff2"); + font-weight: 700; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("https://instructure.ai/roadmap/fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2") + format("woff2"); + font-weight: 800; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("https://instructure.ai/roadmap/fonts/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2") + format("woff2"); + font-weight: 800; + font-style: italic; + font-display: swap; +} + +:root, +html, +body, +[class$="-view--block"], +h1, +h2, +h3, +h4, +h5, +h6, +span, +p, +div { + font-family: + "Atkinson Hyperlegible Next", "Helvetica Neue", Helvetica, Arial, sans-serif; +} + :root { --v12-background-color: #f2f4f4; } @@ -38,6 +196,19 @@ body.primary-nav-expanded .ic-app-header { border-radius: 1rem 1rem 0; } +.ic-app-header__logomark { + border-radius: 1rem; +} + +.ic-app-header__logomark:focus { + box-shadow: inset 0 0 0 0.125rem #6a7883; +} + +.ic-app-header__logomark:hover, +.ic-app-header__logomark:focus { + background-color: rgba(0, 0, 0, 0.2); +} + .ic-app-header__menu-list { padding-bottom: 0.5rem; } @@ -52,9 +223,18 @@ body.primary-nav-expanded .ic-app-header { padding: 0.5625rem 0; } +.ic-app-header__menu-list-link:focus { + box-shadow: inset 0 0 0 0.125rem #6a7883; +} + .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link { - background: #09508c; + background: #0c294a; +} + +.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active + .ic-app-header__menu-list-link:focus { + box-shadow: inset 0 0 0 0.125rem #103868; } .ic-app-header__menu-list-link.ic-app-header__menu-list-link--nav-toggle { diff --git a/apps/roadmap/src/App.tsx b/apps/roadmap/src/App.tsx index 4b796571..a57099a1 100644 --- a/apps/roadmap/src/App.tsx +++ b/apps/roadmap/src/App.tsx @@ -10,6 +10,7 @@ import { sendHeight, } from "./utils"; import "./App.css"; +import "./assets/fonts/AtkinsonHyperlegibleNext.css"; const App: FC = () => { const [overlayOpen, setOverlayOpen] = useState(false); @@ -70,8 +71,25 @@ const App: FC = () => { })); }, [roadmap]); + // Debounce loading state + const [showLoading, setShowLoading] = useState(false); + useEffect(() => { + if (!roadmap) { + const timeout = setTimeout(() => setShowLoading(true), 1000); + return () => clearTimeout(timeout); + } else { + setShowLoading(false); + } + }, [roadmap]); + return ( - + {Entries.length ? ( <> { /> )} - ) : ( + ) : showLoading ? ( - )} + ) : null} ); }; diff --git a/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-Bold.woff2 b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-Bold.woff2 new file mode 100644 index 00000000..3b735977 Binary files /dev/null and b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-Bold.woff2 differ diff --git a/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-BoldItalic.woff2 b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-BoldItalic.woff2 new file mode 100644 index 00000000..25b28580 Binary files /dev/null and b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-BoldItalic.woff2 differ diff --git a/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2 b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2 new file mode 100644 index 00000000..65039ac4 Binary files /dev/null and b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2 differ diff --git a/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2 b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2 new file mode 100644 index 00000000..5abb72ec Binary files /dev/null and b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2 differ diff --git a/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-ExtraLight.woff2 b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-ExtraLight.woff2 new file mode 100644 index 00000000..5a136036 Binary files /dev/null and b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-ExtraLight.woff2 differ diff --git a/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2 b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2 new file mode 100644 index 00000000..ad1940c3 Binary files /dev/null and b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2 differ diff --git a/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-Light.woff2 b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-Light.woff2 new file mode 100644 index 00000000..b1eac3fd Binary files /dev/null and b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-Light.woff2 differ diff --git a/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-LightItalic.woff2 b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-LightItalic.woff2 new file mode 100644 index 00000000..f0f492f2 Binary files /dev/null and b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-LightItalic.woff2 differ diff --git a/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-Medium.woff2 b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-Medium.woff2 new file mode 100644 index 00000000..e82765dd Binary files /dev/null and b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-Medium.woff2 differ diff --git a/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-MediumItalic.woff2 b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-MediumItalic.woff2 new file mode 100644 index 00000000..c9e218a1 Binary files /dev/null and b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-MediumItalic.woff2 differ diff --git a/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-Regular.woff2 b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-Regular.woff2 new file mode 100644 index 00000000..d2babdfc Binary files /dev/null and b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-Regular.woff2 differ diff --git a/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2 b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2 new file mode 100644 index 00000000..dc05d06d Binary files /dev/null and b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2 differ diff --git a/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-SemiBold.woff2 b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-SemiBold.woff2 new file mode 100644 index 00000000..a7d9ece2 Binary files /dev/null and b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-SemiBold.woff2 differ diff --git a/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2 b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2 new file mode 100644 index 00000000..f9111766 Binary files /dev/null and b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2 differ diff --git a/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext.css b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext.css new file mode 100644 index 00000000..e2cced84 --- /dev/null +++ b/apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext.css @@ -0,0 +1,126 @@ +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("./AtkinsonHyperlegibleNext-ExtraLight.woff2") format("woff2"); + font-weight: 200; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("./AtkinsonHyperlegibleNext-ExtraLightItalic.woff2") format("woff2"); + font-weight: 200; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("./AtkinsonHyperlegibleNext-Light.woff2") format("woff2"); + font-weight: 300; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("./AtkinsonHyperlegibleNext-LightItalic.woff2") format("woff2"); + font-weight: 300; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("./AtkinsonHyperlegibleNext-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("./AtkinsonHyperlegibleNext-RegularItalic.woff2") format("woff2"); + font-weight: 400; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("./AtkinsonHyperlegibleNext-Medium.woff2") format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("./AtkinsonHyperlegibleNext-MediumItalic.woff2") format("woff2"); + font-weight: 500; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("./AtkinsonHyperlegibleNext-SemiBold.woff2") format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("./AtkinsonHyperlegibleNext-SemiBoldItalic.woff2") format("woff2"); + font-weight: 600; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("./AtkinsonHyperlegibleNext-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("./AtkinsonHyperlegibleNext-BoldItalic.woff2") format("woff2"); + font-weight: 700; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("./AtkinsonHyperlegibleNext-ExtraBold.woff2") format("woff2"); + font-weight: 800; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: + local("Atkinson Hyperlegible Next"), + url("./AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2") format("woff2"); + font-weight: 800; + font-style: italic; + font-display: swap; +} \ No newline at end of file diff --git a/apps/roadmap/src/components/card.tsx b/apps/roadmap/src/components/card.tsx index 0267260e..3ea657c5 100644 --- a/apps/roadmap/src/components/card.tsx +++ b/apps/roadmap/src/components/card.tsx @@ -7,7 +7,7 @@ import { TruncateText, View, } from "@instructure/ui"; -import { lighten } from "@instructure/ui-color-utils"; +import { darken, lighten } from "@instructure/ui-color-utils"; import type { FC } from "react"; import { useCallback, useLayoutEffect, useRef, useState } from "react"; import { getProductArea } from "../utils"; @@ -96,7 +96,6 @@ const Card: FC<{ > - - + {feature.stage} @@ -131,7 +134,7 @@ const Card: FC<{ {area} @@ -141,8 +144,8 @@ const Card: FC<{ - - + + { headingEl.current = node; @@ -165,15 +168,20 @@ const Card: FC<{