@codecademy/brand 5.1.0-alpha.c478c480b.0 → 5.1.0

package/dist/GlobalHeader/context.js

@@ -18,9 +18,13 @@ export const DropdownPositions = {
       narrow: '-9rem',
       wide: '-14.5rem'
     },
-    resourceDropdown: {
+    liveCoursesDropdown: {
       narrow: '-14.5rem',
       wide: '-20rem'
+    },
+    resourceDropdown: {
+      narrow: '-20rem',
+      wide: '-28rem'
     }
   },
   anon: {
@@ -28,9 +32,13 @@ export const DropdownPositions = {
       narrow: '-4rem',
       wide: '-9.5rem'
     },
-    resourceDropdown: {
+    liveCoursesDropdown: {
       narrow: '-9.5rem',
       wide: '-15rem'
+    },
+    resourceDropdown: {
+      narrow: '-15rem',
+      wide: '-20.5rem'
     }
   },
   pro: {
@@ -38,9 +46,13 @@ export const DropdownPositions = {
       narrow: '-14.5rem',
       wide: '-14.5rem'
     },
-    resourceDropdown: {
+    liveCoursesDropdown: {
       narrow: '-20rem',
       wide: '-20rem'
+    },
+    resourceDropdown: {
+      narrow: '-28rem',
+      wide: '-28rem'
     }
   },
   teams: {
@@ -48,9 +60,13 @@ export const DropdownPositions = {
       narrow: '-14.5rem',
       wide: '-14.5rem'
     },
-    resourceDropdown: {
+    liveCoursesDropdown: {
       narrow: '-20rem',
       wide: '-20rem'
+    },
+    resourceDropdown: {
+      narrow: '-28rem',
+      wide: '-28rem'
     }
   },
   // won't be used, but is here to handle the case where the header type is not one of the above
@@ -60,9 +76,13 @@ export const DropdownPositions = {
       narrow: '-14.5rem',
       wide: '-14.5rem'
     },
-    resourceDropdown: {
+    liveCoursesDropdown: {
       narrow: '-20rem',
       wide: '-20rem'
+    },
+    resourceDropdown: {
+      narrow: '-28rem',
+      wide: '-28rem'
     }
   }
 };

package/dist/Logos/ProLabel/ProLabelCutout/index.js

@@ -1,10 +1,10 @@
-import { theme } from '@codecademy/gamut-styles';
+import { colors } from '@codecademy/gamut-styles';
 import * as React from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ProLabelCutout = ({
   ariaLabel = 'Pro',
-  backgroundColor = theme.colors.navy,
-  cutoutColor = theme.colors.white,
+  backgroundColor = colors.navy,
+  cutoutColor = colors.white,
   width = 30
 }) => /*#__PURE__*/_jsxs("svg", {
   width: width,

package/dist/Logos/ProLabel/ProLabelCutoutTransparent/index.js

@@ -1,9 +1,9 @@
-import { theme } from '@codecademy/gamut-styles';
+import { colors } from '@codecademy/gamut-styles';
 import * as React from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ProLabelCutoutTransparent = ({
   ariaLabel = 'Pro',
-  backgroundColor = theme.colors.navy,
+  backgroundColor = colors.navy,
   width = 30
 }) => /*#__PURE__*/_jsxs("svg", {
   width: width,

package/dist/Logos/ProLabel/index.d.ts

@@ -1,15 +1,15 @@
-import { Colors } from '@codecademy/gamut-styles';
+import { colors } from '@codecademy/gamut-styles';
 import * as React from 'react';
 type BaseProps = {
     ariaLabel?: string;
-    backgroundColor?: Colors;
+    backgroundColor?: keyof typeof colors;
     width?: number;
 };
 export type ProLabelProps = (BaseProps & {
     variant: 'transparent';
 }) | (BaseProps & {
     variant: 'cutout';
-    cutoutColor?: Colors;
+    cutoutColor?: keyof typeof colors;
 });
 export declare const ProLabel: React.FC<ProLabelProps>;
 export {};

package/dist/Logos/ProLabel/index.js

@@ -1,9 +1,8 @@
-import { theme } from '@codecademy/gamut-styles';
+import { colors } from '@codecademy/gamut-styles';
 import * as React from 'react';
 import { ProLabelCutout } from './ProLabelCutout';
 import { ProLabelCutoutTransparent } from './ProLabelCutoutTransparent';
 import { jsx as _jsx } from "react/jsx-runtime";
-const themeColor = color => theme.colors[color];
 export const ProLabel = props => {
   if (props.variant === 'cutout') {
     const {
@@ -12,8 +11,8 @@ export const ProLabel = props => {
       ...forwardedProps
     } = props;
     return /*#__PURE__*/_jsx(ProLabelCutout, {
-      backgroundColor: themeColor(backgroundColor),
-      cutoutColor: themeColor(cutoutColor),
+      backgroundColor: colors[backgroundColor],
+      cutoutColor: colors[cutoutColor],
       ...forwardedProps
     });
   }
@@ -22,7 +21,7 @@ export const ProLabel = props => {
     ...forwardedProps
   } = props;
   return /*#__PURE__*/_jsx(ProLabelCutoutTransparent, {
-    backgroundColor: themeColor(backgroundColor),
+    backgroundColor: colors[backgroundColor],
     ...forwardedProps
   });
 };

package/dist/ProLogoAlt/index.d.ts

@@ -1,9 +1,9 @@
-import { Colors } from '@codecademy/gamut-styles';
+import { colors } from '@codecademy/gamut-styles';
 import * as React from 'react';
 export type ProLogoAltProps = {
     ariaLabel?: string;
-    backgroundColor?: Colors;
-    textColor?: Colors;
+    backgroundColor?: keyof typeof colors;
+    textColor?: keyof typeof colors;
     width?: number;
 };
 export declare const ProLogoAlt: React.FC<ProLogoAltProps>;

package/dist/ProLogoAlt/index.js

@@ -1,7 +1,6 @@
-import { theme } from '@codecademy/gamut-styles';
+import { colors } from '@codecademy/gamut-styles';
 import * as React from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const themeColor = color => theme.colors[color];
 export const ProLogoAlt = ({
   ariaLabel = 'Codecademy Pro Logo',
   backgroundColor = 'yellow',
@@ -14,14 +13,14 @@ export const ProLogoAlt = ({
   xmlns: "http://www.w3.org/2000/svg",
   "aria-label": ariaLabel,
   children: /*#__PURE__*/_jsxs("g", {
-    fill: themeColor(backgroundColor),
+    fill: colors[backgroundColor],
     fillRule: "evenodd",
     children: [/*#__PURE__*/_jsx("path", {
       d: "m0 0h74v40h-74zm78 34h17v6h-17z",
-      fill: themeColor(backgroundColor)
+      fill: colors[backgroundColor]
     }), /*#__PURE__*/_jsx("path", {
       d: "m13.971 23.67v6.82h-3.971v-20.145h6.82c4.749 0 7.253 2.965 7.253 6.62 0 3.625-2.504 6.705-7.253 6.705zm2.245-9.871h-2.245v6.446h2.245c2.187 0 3.77-1.036 3.77-3.28 0-2.245-1.583-3.166-3.77-3.166zm21.518 16.691-4.46-7.741h-2.821v7.741h-4v-20.145h7.568c4.404 0 6.994 2.62 6.994 6.13 0 1.9-.777 4.317-3.828 5.526l5.151 8.49h-4.604zm-.72-13.986c0-1.784-1.295-2.705-3.51-2.705h-3.051v5.468h3.05c2.216 0 3.511-1.036 3.511-2.763zm16.453-6.504c5.843 0 10.533 4.346 10.533 10.418s-4.69 10.417-10.533 10.417c-5.842 0-10.533-4.345-10.533-10.417s4.691-10.418 10.533-10.418zm0 17.152c3.799 0 6.36-2.878 6.36-6.734 0-3.857-2.561-6.734-6.36-6.734s-6.36 2.877-6.36 6.734c0 3.856 2.561 6.734 6.36 6.734z",
-      fill: themeColor(textColor)
+      fill: colors[textColor]
     })]
   })
 });

package/dist/lib/catalogList/index.d.ts

@@ -1,3 +1,2 @@
-import { AppHeaderLinkItem, AppHeaderResourcesDataItem } from '../../AppHeader/shared';
+import { AppHeaderLinkItem } from '../../AppHeader/shared';
 export declare const careerPaths: AppHeaderLinkItem[];
-export declare const liveLearningNavPanelItems: AppHeaderResourcesDataItem;

package/dist/lib/catalogList/index.js

@@ -1,4 +1,3 @@
-import { renderNewBadge } from '../resourcesList';
 export const careerPaths = [{
   id: 'full-stack-engineer-career-path',
   href: '/learn/paths/full-stack-engineer-career-path',
@@ -35,27 +34,4 @@ export const careerPaths = [{
   trackingTarget: 'topnav_catalog_career_data_science',
   text: 'Data Scientist',
   type: 'link'
-}];
-export const liveLearningNavPanelItems = {
-  title: 'Live Learning',
-  description: 'Build skills faster through live, instructor-led sessions. Get real-time feedback, stay motivated, and deepen your understanding with expert guidance.',
-  data: [{
-    id: 'bootcamps',
-    href: '/bootcamps',
-    text: 'Bootcamps',
-    description: 'Join live virtual bootcamps that span multiple weeks and help you build real-world, in-demand skills. Led by experts, each bootcamp includes instructor support, community, professional mentorship—and comes with Codecademy Pro access.',
-    trackingTarget: 'topnav_catalog_live_learning_bootcamps',
-    type: 'link',
-    newTab: true,
-    badge: renderNewBadge()
-  }, {
-    id: 'coaching',
-    href: '/coaching',
-    text: 'Coaching',
-    description: "Get personalized mentorship from expert coaches to accelerate your career journey. Whether you're preparing for technical interviews, exploring career options, or seeking guidance, 1:1 coaching gives you tailored support to reach your goals.",
-    trackingTarget: 'topnav_catalog_live_learning_coaching',
-    type: 'link',
-    newTab: true,
-    badge: renderNewBadge()
-  }]
-};
+}];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecademy/brand",
-  "version": "5.1.0-alpha.c478c480b.0",
+  "version": "5.1.0",
   "description": "Brand component library for Codecademy",
   "license": "MIT",
   "repository": "git@github.com:codecademy-engineering/mono.git",