@primer/components 31.0.2-rc.95622264 → 31.2.0-rc.c285489d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.0.2-rc.95622264",
+  "version": "31.2.0-rc.c285489d",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -132,6 +132,7 @@
     "rollup-plugin-visualizer": "5.5.0",
     "semver": "7.3.5",
     "size-limit": "5.0.2",
+    "storybook-addon-performance": "0.16.1",
     "styled-components": "4.4.1",
     "typescript": "4.2.2"
   },

package/src/__tests__/KeyPaths.types.test.ts

@@ -0,0 +1,13 @@
+import {KeyPaths} from '../utils/types/KeyPaths'
+
+type NestedObject = {
+  a: string
+  b: {
+    b1: string
+    b2: string
+  }
+}
+
+export function generatesKeyPathsFromObject(x: KeyPaths<NestedObject>): 'a' | 'b.b1' | 'b.b2' {
+  return x
+}

package/src/sx.ts

@@ -1,7 +1,19 @@
-import css, {SystemStyleObject} from '@styled-system/css'
+import css, {SystemCssProperties, SystemStyleObject} from '@styled-system/css'
+import {ThemeColorPaths, ThemeShadowPaths} from './theme'
+import {ColorProps, ShadowProps} from 'styled-system'
+
+export type BetterCssProperties = {
+  [K in keyof SystemCssProperties]: K extends keyof ColorProps
+    ? ThemeColorPaths | SystemCssProperties[K]
+    : K extends keyof ShadowProps
+    ? ThemeShadowPaths | SystemCssProperties[K]
+    : SystemCssProperties[K]
+}
+
+export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject
 
 export interface SxProp {
-  sx?: SystemStyleObject
+  sx?: BetterSystemStyleObject
 }
 
 const sx = (props: SxProp) => css(props.sx)

package/src/theme.ts

@@ -1,3 +1,89 @@
 import {theme} from './theme-preval'
+import {KeyPaths} from './utils/types/KeyPaths'
 
 export default theme
+
+// NOTE: for now, ThemeColors and ThemeShadows are handcrafted types. It would be nice if these
+// were exports from primitives (or a different shape but derived from those exports).
+
+type ThemeColors = {
+  fg: {
+    default: string
+    muted: string
+    subtle: string
+    onEmphasis: string
+  }
+  canvas: {
+    default: string
+    overlay: string
+    inset: string
+    subtle: string
+  }
+  border: {
+    default: string
+    muted: string
+    subtle: string
+  }
+
+  // Roles
+  neutral: {
+    emphasisPlus: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  accent: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  success: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  attention: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  severe: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  danger: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  done: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  sponsors: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+}
+
+type ThemeShadows = {
+  shadow: {
+    small: string
+    medium: string
+    large: string
+    extraLarge: string
+  }
+}
+
+export type ThemeColorPaths = KeyPaths<ThemeColors>
+export type ThemeShadowPaths = KeyPaths<ThemeShadows>

package/src/utils/types/KeyPaths.ts

@@ -0,0 +1,4 @@
+// Produces a union of dot-delimited keypaths to the string values in a nested object:
+export type KeyPaths<O extends Record<string, unknown>> = {
+  [K in keyof O]: K extends string ? (O[K] extends string ? `${K}` : `${K}.${KeyPaths<O[K]>}`) : never
+}[keyof O]