[Theming] - Add FONTS support and expand COLORS object (#511)

* [Themes] - Add fonts to themes (#509)

* [Theme setup] Initial setup and Accordion example (#436)

* initial setup

* convert Acoordion,add  theme suport to stories

* complete accordion example

* shouldShowForEnvironment refactor

* commit snapshot size

* v13.0.0-alpha.1

* Replace swap button with addon-toolbars to fix visual regression

Co-authored-by: Michael Altamirano <michaeljaltamirano@gmail.com>

* [Theming] Add built-in TypeScript support (#463)

* initial setup

* convert Acoordion,add  theme suport to stories

* complete accordion example

* shouldShowForEnvironment refactor

* commit snapshot size

* v13.0.0-alpha.1

* Commit example with Rollup + TypeScript resolution

* Commit hard-coded import

* Revert "Commit hard-coded import"

This reverts commit 9713df2.

* PR Cleanup

* Remove rollup plugin

* Move type resolution files out of utils and into types folder

* Commit master size-snapshot

* Push last size-snapshot

Co-authored-by: Diego Fortes <daigof@gmail.com>

* [Theming] Convert Component Usage (Part I) (#467)

* Convert for Accordion.Thumbnails

* Convert easy cases: styled component and normal component usage

* Add @types/enzyme-adapter-react-16

* Pass in blank string instead of undefined to maintain some semblance of distinction (for now)

* Convert setupTests.js to ts

* Get tests passing, check on chromatic

* [Theming] Convert Component Usage (Part II, Buttons) (#475)

* Bump @types/react from 16.9.53 to 16.9.55 (#473)

* Bump @types/react-dom from 16.9.8 to 16.9.9 (#469)

* Bump @types/enzyme from 3.10.7 to 3.10.8 (#470)

* Bump lint-staged from 10.4.0 to 10.5.0 (#468)

* Rename primary and secondary files to match default export name, export new COLORS_PROP_TYPES for aliased values

* Export values as const for type inference, add secondary tints for lavender usage in buttons

* Button update: add theming, constrict typing, remove unnecessary css imports (when in-lining in styled component)

* Update size snapshot, new items due to new COLORS_PROP_TYPES usage

* Decorate tests

* Add back base button css composition, since typography depends on it

* Tighten textColor typing, too

* Override prettier, TODO: use prettier-eslint

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* [Theming] Convert Components (Part III) (#476)

* Update global styles and storybook preview configuration

* Update Callout, Chip, LoadingSpinner, and ProgressBar

* Update DialogModal, Tabs, and Toggle

* Update Dropdown

* Update SelectorButton styles, modify eslint rule

* Convert COntainer, ImmersiveModal, OptionButton

* Last commits: Container and Field, and update .size-snapshot

* Rename prop to get off DOM

* [Theming] Convert Components (Part IV) (#477)

* Bump @types/react from 16.9.53 to 16.9.55 (#473)

* Bump @types/react-dom from 16.9.8 to 16.9.9 (#469)

* Bump @types/enzyme from 3.10.7 to 3.10.8 (#470)

* Bump lint-staged from 10.4.0 to 10.5.0 (#468)

* Rename primary and secondary files to match default export name, export new COLORS_PROP_TYPES for aliased values

* Export values as const for type inference, add secondary tints for lavender usage in buttons

* Button update: add theming, constrict typing, remove unnecessary css imports (when in-lining in styled component)

* Update size snapshot, new items due to new COLORS_PROP_TYPES usage

* Decorate tests

* Add back base button css composition, since typography depends on it

* Tighten textColor typing, too

* Override prettier, TODO: use prettier-eslint

* Commit Typography WIP, save for last

* Fix build, update .size-snapshot, replace all TYPOGRAPHY_STYLE usages, including story

* Reconfigure stories/tsconfig, export ThemeColors instead for improved DX

* Fix bizarre formatting

* Fix formatting pt. 2

* One last eslint fix and prettier write cleanup

* try running through eslint-plugin-prettier

* Conform to docs order

* Remove floating semicolons

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* [Theming] Update Colors Export (#480)

* Bump @types/react from 16.9.53 to 16.9.55 (#473)

* Bump @types/react-dom from 16.9.8 to 16.9.9 (#469)

* Bump @types/enzyme from 3.10.7 to 3.10.8 (#470)

* Bump lint-staged from 10.4.0 to 10.5.0 (#468)

* Bump typescript from 4.0.3 to 4.0.5 (#471)

* Bump chromatic from 5.2.0 to 5.3.0 (#478)

* Bump @react-aria/focus from 3.2.2 to 3.2.3 (#479)

* Mass commit: add TODO to existing COLORS export, fix lingering COLORS imports, update stories

* Add react-is as devDependency to fix install warning

* Fix visual regression in Available Constants story

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* v13.0.0-alpha.2

* [Theming] Fix tsc output (#498)

* Re-arrange new files for theming to fix lib type file structure

* Fix window.matchMedia type by fleshing it out

* v13.0.0-alpha.3

* [Theming] Update Test Suite (#505)

* [Theming] Update Declarations  (#504)

* Merge declaration changes from master

* Rename code comment

* Do not make Button onClick event potentially undefined

* Keep Dropdown value type consistent

* v13.0.0-alpha.4

* Push size changes, too

* Narrow ReactNode to JSX.Element in ImmersiveModal title

* Simplify generics usage

* refactor fonts to theme

* add test

* refactor out test util function

* reafctor util tester

* [TypeScript] Replace ThemeType Absolute Imports with Relative Imports (#510)

* Move ThemeType (and associated imports) to relative imports instead of absolute

* Update .size-snapshot.json

Co-authored-by: Michael Altamirano <michaeljaltamirano@gmail.com>
Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* [Colors] Add 'transparent' color (#512)

* Add transparent as valid COLORS alias/value

Co-authored-by: Michael Altamirano <michaeljaltamirano@gmail.com>
Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

src/constants/colors/primary.ts

@@ -54,6 +54,7 @@ const PRIMARY_COLORS = {
 
   black: COLORS.black,
   white: COLORS.white,
+  transparent: 'transparent',
 } as const;
 
 export const PRIMARY_COLORS_PROP_TYPES = PropTypes.oneOf(

src/constants/colors/secondary.ts

@@ -54,6 +54,7 @@ const SECONDARY_COLORS = {
 
   black: COLORS.black,
   white: COLORS.white,
+  transparent: 'transparent',
 } as const;
 
 export const SECONDARY_COLORS_PROP_TYPES = PropTypes.oneOf(

src/constants/colors/test.ts

@@ -1,10 +1,12 @@
+import compareObjectsKeysLength from 'src/utils/compareObjectsKeysLength';
+
 import PRIMARY_COLORS from './primary';
 import SECONDARY_COLORS from './secondary';
 
 describe('theme colors', () => {
   it('primary and secondary colors have the same number of properties', () => {
-    expect(Object.keys(PRIMARY_COLORS).length).toEqual(
-      Object.keys(SECONDARY_COLORS).length,
+    expect(compareObjectsKeysLength(PRIMARY_COLORS, SECONDARY_COLORS)).toBe(
+      true,
     );
   });
 });

src/constants/fonts/primary.ts

@@ -0,0 +1,9 @@
+const PRIMARY_FONTS = {
+  headerFont:
+    "'nocturno', Georgia, TimesNewRoman, 'Times New Roman', Times, Baskerville, serif",
+  baseFont:
+    "'larssiet', 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, AppleGothic, Verdana, sans-serif",
+  monoFont: "'apercu mono', 'Lucida Console', Monaco, monospace",
+} as const;
+
+export default PRIMARY_FONTS;

src/constants/fonts/secondary.ts

@@ -0,0 +1,7 @@
+const SECONDARY_FONTS = {
+  headerFont: 'fantasy, serif',
+  baseFont: 'fantasy, serif',
+  monoFont: 'fantasy, serif',
+} as const;
+
+export default SECONDARY_FONTS;

src/constants/fonts/test.ts

@@ -0,0 +1,10 @@
+import compareObjectsKeysLength from 'src/utils/compareObjectsKeysLength';
+
+import PRIMARY_FONTS from './primary';
+import SECONDARY_FONTS from './secondary';
+
+describe('theme fonts', () => {
+  it('primary and secondary fonts have the same number of properties', () => {
+    expect(compareObjectsKeysLength(PRIMARY_FONTS, SECONDARY_FONTS)).toBe(true);
+  });
+});

src/constants/themes/primaryTheme.ts

@@ -1,7 +1,9 @@
 import PRIMARY_COLORS from '../colors/primary';
+import PRIMARY_FONTS from '../fonts/primary';
 
 export const primaryTheme = {
   __type: 'primary',
   BOX_SHADOW: {},
   COLORS: PRIMARY_COLORS,
+  FONTS: PRIMARY_FONTS,
 } as const;

src/constants/themes/secondaryTheme.ts

@@ -1,7 +1,9 @@
 import SECONDARY_COLORS from '../colors/secondary';
+import SECONDARY_FONTS from '../fonts/secondary';
 
 export const secondaryTheme = {
   __type: 'secondary',
   BOX_SHADOW: {},
   COLORS: SECONDARY_COLORS,
+  FONTS: SECONDARY_FONTS,
 } as const;

src/constants/themes/types.ts

@@ -9,6 +9,8 @@ type BoxShadow =
 
 type Colors = typeof primaryTheme['COLORS'] | typeof secondaryTheme['COLORS'];
 
+type Fonts = typeof primaryTheme['FONTS'] | typeof secondaryTheme['FONTS'];
+
 export type ThemeColors = valueof<Colors>;
 
 export const COLORS_PROP_TYPES = PropTypes.oneOf([
@@ -20,4 +22,5 @@ export type ThemeType = {
   __type: 'primary' | 'secondary';
   BOX_SHADOW: BoxShadow;
   COLORS: Colors;
+  FONTS: Fonts;
 };

src/utils/compareObjectsKeysLength/index.ts

@@ -0,0 +1,6 @@
+const compareObjectsKeysLength = (
+  object1: Record<string, unknown>,
+  object2: Record<string, unknown>,
+) => Object.keys(object1).length === Object.keys(object2).length;
+
+export default compareObjectsKeysLength;

src/utils/injectGlobalStyles/style.ts

@@ -1,6 +1,6 @@
 import 'focus-visible';
 
-import { FONTS, ThemeType, TYPOGRAPHY_CONSTANTS } from '../../constants';
+import { ThemeType, TYPOGRAPHY_CONSTANTS } from '../../constants';
 import { baseBodyStyles } from '../../shared-components/typography';
 
 /**
@@ -215,7 +215,7 @@ export const brandStyles = (theme: ThemeType) => `
     -webkit-font-smoothing: antialiased;
     ${baseBodyStyles(theme)}
     background-color: ${theme.COLORS.white};
-    font-family: ${FONTS.baseFont};
+    font-family: ${theme.FONTS.baseFont};
     font-weight: ${TYPOGRAPHY_CONSTANTS.fontWeight.normal};
     margin: 0;
     transition-timing-function: ease-in-out;