refactor: derrive literal types

packages/ui-docs/package.json

@@ -2,7 +2,7 @@
   "name": "@blockstack/ui-docs",
   "version": "1.0.3",
   "dependencies": {
-    "@blockstack/ui": "^2.9.5",
+    "@blockstack/ui": "^2.9.7",
     "@mdx-js/loader": "1.6.6",
     "@mdx-js/mdx": "^1.6.6",
     "@mdx-js/react": "^1.6.6",

packages/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blockstack/ui",
   "description": "Blockstack UI components built using React and styled-components with styled-system.",
-  "version": "2.9.5",
+  "version": "2.9.7",
   "author": "Blockstack <engineering@blockstack.com> (https://blockstack.org/)",
   "bundlesize": [
     {

packages/ui/src/box/types.ts

@@ -1,9 +1,12 @@
 import * as StyledSystem from 'styled-system';
 import * as React from 'react';
-import { Omit } from '../common-types';
+import { LiteralUnion } from 'type-fest';
 import * as CSS from 'csstype';
-import { TextStylesLiteral } from '../theme/typography';
-import { SpacingProps } from 'src/theme/types';
+
+import { Omit } from '../common-types';
+import typography, { TextStylesLiteral } from '../theme/typography';
+import { SpacingProps } from '../theme/types';
+import { shadows } from '../theme/theme';
 
 export type FontSizeValues =
   | 'xs'
@@ -17,16 +20,7 @@ export type FontSizeValues =
   | '5xl'
   | '6xl';
 
-export type FontWeightValues =
-  | 'hairline'
-  | 'thin'
-  | 'light'
-  | 'normal'
-  | 'medium'
-  | 'semibold'
-  | 'bold'
-  | 'extrabold'
-  | 'black';
+export type FontWeightValues = keyof typeof typography.fontWeights;
 
 export interface FontSize {
   fontSize?: StyledSystem.ResponsiveValue<FontSizeValues> | StyledSystem.FontSizeProps['fontSize'];
@@ -38,7 +32,7 @@ export interface FontWeight {
     | StyledSystem.FontWeightProps['fontWeight'];
 }
 
-export type LineHeightValues = 'none' | 'shorter' | 'short' | 'normal' | 'tall' | 'taller';
+export type LineHeightValues = keyof typeof typography.lineHeights;
 
 export interface LineHeight {
   lineHeight?:
@@ -46,7 +40,7 @@ export interface LineHeight {
     | StyledSystem.LineHeightProps['lineHeight'];
 }
 
-export type LetterSpacingValues = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
+export type LetterSpacingValues = keyof typeof typography.letterSpacings;
 
 export interface LetterSpacing {
   letterSpacing?:
@@ -73,7 +67,7 @@ export interface TextTransform {
 }
 
 export interface TextStyle {
-  textStyle?: TextStylesLiteral | StyledSystem.ResponsiveValue<TextStylesLiteral>;
+  textStyle?: StyledSystem.ResponsiveValue<LiteralUnion<TextStylesLiteral, string>>;
 }
 
 export type AsType = React.ElementType<any>;
@@ -108,7 +102,7 @@ export interface DisplayShorthandProps {
   d?: StyledSystem.DisplayProps['display'];
 }
 
-export type BoxShadow = 'low' | 'mid' | 'high' | 'inner' | 'none' | CSS.BoxShadowProperty;
+export type BoxShadow = LiteralUnion<keyof typeof shadows, CSS.BoxShadowProperty>;
 
 export interface OtherProps {
   children?: React.ReactNode[] | React.ReactNode;

packages/ui/src/stack/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef, Children, cloneElement, isValidElement } from 'react';
 import { Flex } from '../flex';
-import { Box, SpacingProps } from '../box';
+import { Box } from '../box';
 import { StackProps } from './types';
+import { SpacingProps } from '../theme/types';
 
 export * from './types';
 

packages/ui/src/theme/sizes.ts

@@ -1,4 +1,4 @@
-import type { SpacingTypes } from './types';
+import { SpacingTypes } from './types';
 
 const containers = {
   'screen-sm': '640px',

packages/ui/src/theme/types.ts

@@ -1,7 +1,4 @@
-import StyledSystem, {
-  Theme as StyledSystemTheme,
-  MarginProps as SSMarginProps,
-} from 'styled-system';
+import StyledSystem, { Theme as StyledSystemTheme } from 'styled-system';
 import { LiteralUnion } from 'type-fest';
 
 import { TextStylesLiteral } from './typography';

packages/ui/src/theme/typography.ts

@@ -81,14 +81,14 @@ const captionMedium = {
 
 export const textStyles = {
   display: {
-    large: {
-      ...displayLarge,
-      medium: bodyLargeMedium,
-    },
+    large: displayLarge,
     small: displaySmall,
   },
   body: {
-    large: bodyLarge,
+    large: {
+      ...bodyLarge,
+      medium: bodyLargeMedium,
+    },
     small: {
       ...bodySmall,
       medium: bodySmallMedium,