Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add @theme-ui/css/utils with TypeScript CIF functions and fix preset types #1862

Merged
merged 4 commits into from
Jul 27, 2021
+1,433 −1,314
Merged

Add @theme-ui/css/utils with TypeScript CIF functions and fix preset types #1862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bdc07e7
Define correct types in most presets.
tornewuff Jul 4, 2021
9bf7062
Add tests and use const instead
tornewuff Jul 4, 2021
d195a96
Define as actual tests to satisfy jest
tornewuff Jul 4, 2021
54af5ba
feat(css): add makeTheme constrained identity function
hasparus Jul 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions packages/color/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as P from 'polished'
import { ColorModesScale, get, Theme } from '@theme-ui/css'

type Color = ColorModesScale['primary']
type Color = ColorModesScale[string]

/**
* Get color from theme.colors
Expand Down Expand Up @@ -69,7 +69,7 @@ export const desaturate = (c: Color, n: number) => (t: Theme) =>
/**
* Saturate a color by an amount 0–1
*/
export const saturate = (c: Color, n: number) => (t: Theme) =>
export const saturate = (c: Color, n: number) => (t: Theme) =>
P.saturate(n, getColor(t, c))

/**
Expand All @@ -94,8 +94,10 @@ export const alpha = (c: Color, n: number) => (t: Theme) =>
/**
* Mix two colors by a specific ratio
*/
export const mix = (a: Color, b: Color, n = 0.5) => (t: Theme) =>
P.mix(n, getColor(t, a), getColor(t, b))
export const mix =
(a: Color, b: Color, n = 0.5) =>
(t: Theme) =>
P.mix(n, getColor(t, a), getColor(t, b))

/**
* Get the complement of a color
Expand Down
6 changes: 6 additions & 0 deletions packages/css/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,11 @@
"@emotion/react": "^11.1.1",
"csstype": "^3.0.5"
},
"preconstruct": {
"entrypoints": [
"index.ts",
"utils.ts"
]
},
"gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
}
15 changes: 15 additions & 0 deletions packages/css/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import type { ColorModesScale, Theme, ThemeStyles } from './types'

/**
* Constrained identity function used to constrain user's theme type to Theme
* while preserving its exact type.
*/
export const makeTheme = <T extends Theme>(theme: T): T => theme
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks awesome, is it internal API or intended to be used from the outside?

(Wondering if consumers could use it to build custom themes with or without presets?)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I try to prefix exported internal APIs with __ or even __internal and mark add @internal jsdoc comment. This one is user-facing. I've been defining it in my projects for a long time.


/**
* Constrained identity function used to create a styles dictionary
* assignable to ThemeStyles while preserving its exact type.
*/
export const makeStyles = <T extends ThemeStyles>(styles: T): T => styles

export const makeColorsScale = <T extends ColorModesScale>(colors: T) => colors
4 changes: 4 additions & 0 deletions packages/css/utils/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"main": "dist/theme-ui-css-utils.cjs.js",
"module": "dist/theme-ui-css-utils.esm.js"
}
3 changes: 3 additions & 0 deletions packages/preset-base/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@
"repository": "system-ui/theme-ui",
"scripts": {},
"source": "src/index.ts",
"peerDependencies": {
"@theme-ui/css": ">=0.10.0"
},
"publishConfig": {
"access": "public"
},
Expand Down
9 changes: 5 additions & 4 deletions packages/preset-base/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { makeTheme } from '@theme-ui/css/utils'

const heading = {
color: 'text',
fontFamily: 'heading',
lineHeight: 'heading',
fontWeight: 'heading',
}

export const base = {
export const base = makeTheme({
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
fonts: {
body:
'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
heading: 'inherit',
monospace: 'Menlo, monospace',
},
Expand Down Expand Up @@ -97,6 +98,6 @@ export const base = {
maxWidth: '100%',
},
},
}
})

export default base
3 changes: 3 additions & 0 deletions packages/preset-bootstrap/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,8 @@
"publishConfig": {
"access": "public"
},
"peerDependencies": {
"@theme-ui/css": ">=0.10.0"
},
"gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
}
19 changes: 10 additions & 9 deletions packages/preset-bootstrap/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { makeStyles, makeTheme } from '@theme-ui/css/utils'

export const baseColors = {
white: '#fff',
black: '#000',
Expand Down Expand Up @@ -43,13 +45,12 @@ export const colors = {
textMuted: baseColors.gray[6],
}

export const space = [0, 0.25, 0.5, 1, 1.5, 3].map(n => n + 'rem')
export const space = [0, 0.25, 0.5, 1, 1.5, 3].map((n) => n + 'rem')

export const breakpoints = ['576px', '768px', '992px', '1200px']

export const fonts = {
body:
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
heading: 'inherit',
monospace:
'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
Expand Down Expand Up @@ -127,12 +128,12 @@ const display = {
}

// variants
const typeStyles = {
const text = {
heading,
display,
}

export const styles = {
export const styles = makeStyles({
root: {
fontFamily: 'body',
lineHeight: 'body',
Expand Down Expand Up @@ -209,9 +210,9 @@ export const styles = {
maxWidth: '100%',
height: 'auto',
},
}
})

export const bootstrap = {
export const bootstrap = makeTheme({
breakpoints,
colors,
space,
Expand All @@ -222,8 +223,8 @@ export const bootstrap = {
sizes,
shadows,
radii,
typeStyles,
text,
styles,
}
})

export default bootstrap
3 changes: 3 additions & 0 deletions packages/preset-bulma/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@
"dependencies": {
"@theme-ui/preset-base": "0.10.0"
},
"peerDependencies": {
"@theme-ui/css": ">=0.10.0"
},
"publishConfig": {
"access": "public"
},
Expand Down
Loading