Remove defining the DefaultTheme from library DTS (#829)

* Remove defining the DefaultTheme from library DTS
aws · Sep 12, 2022 · 34e6467 · 34e6467
1 parent 2df5d8c
commit 34e6467
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 15 deletions.
diff --git a/src/theme/styled.ts → @types/styled/index.d.ts b/src/theme/styled.ts → @types/styled/index.d.ts
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Update tsconfig to include packages under `./@types` and `node_modules/@types` in the TypeScript compilation.
+- Move the definition of default theme from its implementation to its `d.ts` file under `./@types` to support [function themes](https://styled-components.com/docs/advanced#function-themes) usage of styled-component.
+
 ### Fixed
 
 ## [3.2.0] - 2022-04-11

diff --git a/src/theme/default.ts b/src/theme/default.ts
@@ -1,8 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { Breakpoints } from './styled';
-
 export const fonts = {
   body: "'Ember', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;",
   monospace: 'Menlo, monospace',
@@ -21,19 +19,34 @@ export const zIndex = {
   notificationGroup: 40,
 };
 
-const breakpoints = [
-  '20rem', // 320px
-  '35.5rem', // 568px
-  '48rem', // 768px
-  '64rem', // 1024px
-  '90rem', // 1440px
-] as Breakpoints;
-
-breakpoints.xs = breakpoints[0];
-breakpoints.sm = breakpoints[1];
-breakpoints.md = breakpoints[2];
-breakpoints.lg = breakpoints[3];
-breakpoints.xl = breakpoints[4];
+enum BreakpointEnum {
+  xs = 'xs',
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
+}
+
+const breakpointValues = {
+  [BreakpointEnum.xs]: '20rem', // 320px phone
+  [BreakpointEnum.sm]: '35.5rem', // 568px tablet
+  [BreakpointEnum.md]: '48rem', // 768px small laptop
+  [BreakpointEnum.lg]: '64rem', // 1024px desktop
+  [BreakpointEnum.xl]: '90rem', // 1440px large screen
+};
+
+const breakpointAliaseValues = {
+  [0]: breakpointValues[BreakpointEnum.xs],
+  [1]: breakpointValues[BreakpointEnum.sm],
+  [2]: breakpointValues[BreakpointEnum.md],
+  [3]: breakpointValues[BreakpointEnum.lg],
+  [4]: breakpointValues[BreakpointEnum.xl],
+};
+
+const breakpoints = {
+  ...breakpointValues,
+  ...breakpointAliaseValues,
+};
 
 const mediaQueries = {
   min: {

diff --git a/tsconfig.json b/tsconfig.json
@@ -20,6 +20,7 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "esModuleInterop": true,
+    "typeRoots": ["./@types", "node_modules/@types"]
   },
   "include": ["src/**/*", "tst/**/*", "jest-snapshot.config.js", "jest.config.js"],
   "exclude": [