@codecademy/brand 4.3.0-alpha.43c8e6342.0 → 4.3.0-alpha.97dbb7a60.0

package/dist/AppBarDeprecated/styles/index.module.scss

@@ -1,5 +1,7 @@
-$appbar-gutter: 8px;
-$appbar-tab-width: 48px;
+@use "~@codecademy/gamut-styles/utils";
+
+$appbar-gutter: utils.px-rem(8px);
+$appbar-tab-width: utils.px-rem(48px);
 $appbar-z: 14;
 
 .wrapper {

package/dist/Loading/styles.module.scss

@@ -1,3 +1,5 @@
+@use "~@codecademy/gamut-styles/utils";
+
 $c-offset: 169;
 $inner-offset: 287;
 $outer-offset: 361;
@@ -74,11 +76,11 @@ $animation-duration: 3s;
 
 .fullPage {
   width: 100%;
-  height: viewport-height(-(4rem));
+  height: viewport-height(-(utils.$height-header));
 }
 
 .loading {
-  width: 120px;
+  width: utils.px-rem(120px);
 }
 
 .underline {

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

@@ -1,5 +1,5 @@
-import { colors } from '@codecademy/gamut-styles';
 import * as React from 'react';
+import { colors } from '../../../deprecatedGamutColors';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ProLabelCutout = ({
   ariaLabel = 'Pro',

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

@@ -1,5 +1,5 @@
-import { colors } from '@codecademy/gamut-styles';
 import * as React from 'react';
+import { colors } from '../../../deprecatedGamutColors';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ProLabelCutoutTransparent = ({
   ariaLabel = 'Pro',

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

@@ -1,5 +1,5 @@
-import { colors } from '@codecademy/gamut-styles';
 import * as React from 'react';
+import { colors } from '../../deprecatedGamutColors';
 type BaseProps = {
     ariaLabel?: string;
     backgroundColor?: keyof typeof colors;

package/dist/Logos/ProLabel/index.js

@@ -1,5 +1,5 @@
-import { colors } from '@codecademy/gamut-styles';
 import * as React from 'react';
+import { colors } from '../../deprecatedGamutColors';
 import { ProLabelCutout } from './ProLabelCutout';
 import { ProLabelCutoutTransparent } from './ProLabelCutoutTransparent';
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/ProLogoAlt/index.d.ts

@@ -1,5 +1,5 @@
-import { colors } from '@codecademy/gamut-styles';
 import * as React from 'react';
+import { colors } from '../deprecatedGamutColors';
 export type ProLogoAltProps = {
     ariaLabel?: string;
     backgroundColor?: keyof typeof colors;

package/dist/ProLogoAlt/index.js

@@ -1,5 +1,5 @@
-import { colors } from '@codecademy/gamut-styles';
 import * as React from 'react';
+import { colors } from '../deprecatedGamutColors';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ProLogoAlt = ({
   ariaLabel = 'Codecademy Pro Logo',

package/dist/deprecatedGamutColors.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Duplicated from `libs/ui/legacy-colors/src/colors.ts`.
+ * `@codecademy/brand` is published to npm and cannot depend on `@mono/ui-legacy-colors`.
+ *
+ * Keep in sync with `libs/ui/legacy-colors/src/colors.ts`.
+ */
+export declare const colors: {
+    readonly beige: "#FFF0E5";
+    readonly blue: "#1557FF";
+    readonly green: "#008A27";
+    readonly hyper: "#3A10E5";
+    readonly lightBlue: "#66C4FF";
+    readonly lightGreen: "#AEE938";
+    readonly navy: "#10162f";
+    readonly orange: "#FF8C00";
+    readonly paleBlue: "#F5FCFF";
+    readonly paleGreen: "#F5FFE3";
+    readonly palePink: "#FFF5FF";
+    readonly paleYellow: "#FFFAE5";
+    readonly pink: "#F966FF";
+    readonly red: "#E91C11";
+    readonly yellow: "#FFD300";
+    readonly black: "#000000";
+    readonly white: "#ffffff";
+    readonly 'blue-0': "#F5FCFF";
+    readonly 'blue-300': "#66C4FF";
+    readonly 'blue-500': "#1557FF";
+    readonly 'blue-800': "#1D2340";
+    readonly 'green-0': "#F5FFE3";
+    readonly 'green-400': "#AEE938";
+    readonly 'green-700': "#008A27";
+    readonly 'yellow-0': "#FFFAE5";
+    readonly 'yellow-400': "#CCA900";
+    readonly 'yellow-500': "#FFD300";
+    readonly 'pink-0': "#FFF5FF";
+    readonly 'pink-400': "#F966FF";
+    readonly 'red-500': "#E91C11";
+    readonly 'orange-500': "#FF8C00";
+    readonly 'hyper-400': "#5533FF";
+    readonly 'hyper-500': "#3A10E5";
+    readonly 'gray-100': "#f6f5fa";
+    readonly 'gray-300': "#c4c3c7";
+    readonly 'gray-800': "#323233";
+    readonly 'gray-200': "#dddce0";
+    readonly 'gray-600': "#646466";
+    readonly 'gray-900': "#19191a";
+    readonly 'beige-0': "#FFF0E5";
+    readonly 'blue-900': "#10162f";
+    readonly 'gray-0': "#ffffff";
+    readonly 'gray-400': "#a2a2a6";
+    readonly 'gray-500': "#828285";
+    readonly 'gray-700': "#4b4b4d";
+};

package/dist/deprecatedGamutColors.js

@@ -0,0 +1,53 @@
+/**
+ * Duplicated from `libs/ui/legacy-colors/src/colors.ts`.
+ * `@codecademy/brand` is published to npm and cannot depend on `@mono/ui-legacy-colors`.
+ *
+ * Keep in sync with `libs/ui/legacy-colors/src/colors.ts`.
+ */
+export const colors = {
+  beige: '#FFF0E5',
+  blue: '#1557FF',
+  green: '#008A27',
+  hyper: '#3A10E5',
+  lightBlue: '#66C4FF',
+  lightGreen: '#AEE938',
+  navy: '#10162f',
+  orange: '#FF8C00',
+  paleBlue: '#F5FCFF',
+  paleGreen: '#F5FFE3',
+  palePink: '#FFF5FF',
+  paleYellow: '#FFFAE5',
+  pink: '#F966FF',
+  red: '#E91C11',
+  yellow: '#FFD300',
+  black: '#000000',
+  white: '#ffffff',
+  'blue-0': '#F5FCFF',
+  'blue-300': '#66C4FF',
+  'blue-500': '#1557FF',
+  'blue-800': '#1D2340',
+  'green-0': '#F5FFE3',
+  'green-400': '#AEE938',
+  'green-700': '#008A27',
+  'yellow-0': '#FFFAE5',
+  'yellow-400': '#CCA900',
+  'yellow-500': '#FFD300',
+  'pink-0': '#FFF5FF',
+  'pink-400': '#F966FF',
+  'red-500': '#E91C11',
+  'orange-500': '#FF8C00',
+  'hyper-400': '#5533FF',
+  'hyper-500': '#3A10E5',
+  'gray-100': '#f6f5fa',
+  'gray-300': '#c4c3c7',
+  'gray-800': '#323233',
+  'gray-200': '#dddce0',
+  'gray-600': '#646466',
+  'gray-900': '#19191a',
+  'beige-0': '#FFF0E5',
+  'blue-900': '#10162f',
+  'gray-0': '#ffffff',
+  'gray-400': '#a2a2a6',
+  'gray-500': '#828285',
+  'gray-700': '#4b4b4d'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecademy/brand",
-  "version": "4.3.0-alpha.43c8e6342.0",
+  "version": "4.3.0-alpha.97dbb7a60.0",
   "description": "Brand component library for Codecademy",
   "license": "MIT",
   "repository": "git@github.com:codecademy-engineering/mono.git",
@@ -22,7 +22,7 @@
     "freezeframe": "^5.0.2",
     "intersection-observer": "^0.12.0",
     "ismobilejs": "^1.1.1",
-    "lodash": "^4.17.21",
+    "lodash": "^4.18.1",
     "pluralize": "^8.0.0",
     "react-freezeframe": "^5.0.2",
     "react-use": "15.3.8",