diff --git a/docs/styles.md b/docs/styles.md index 6fe00d5..bf63e18 100644 --- a/docs/styles.md +++ b/docs/styles.md @@ -227,7 +227,6 @@ | Name | Style(s) | | ------ | ----------------------- | -| h-auto | `{ height: "auto" }` | | h-0 | `{ height: 0 }` | | h-1 | `{ height: rem(0.25) }` | | h-10 | `{ height: rem(2.5) }` | @@ -246,6 +245,7 @@ | h-6 | `{ height: rem(1.5) }` | | h-64 | `{ height: rem(16) }` | | h-8 | `{ height: rem(2) }` | +| h-auto | `{ height: "auto" }` | | h-full | `{ height: "100%" }` | | h-px | `{ height: 1 }` | @@ -259,7 +259,6 @@ | Name | Style(s) | | ------- | ------------------------- | -| w-auto | `{ width: "auto" }` | | w-0 | `{ width: 0 }` | | w-1 | `{ width: rem(0.25) }` | | w-1/12 | `{ width: "8.333333%" }` | @@ -304,6 +303,7 @@ | w-8 | `{ width: rem(2) }` | | w-8/12 | `{ width: "66.666667%" }` | | w-9/12 | `{ width: "75%" }` | +| w-auto | `{ width: "auto" }` | | w-full | `{ width: "100%" }` | | w-px | `{ width: 1 }` | @@ -1426,6 +1426,18 @@ | overflow-scroll | `{ overflow: "scroll" }` | | overflow-visible | `{ overflow: "visible" }` | +### AspectRatio + +> _Tip:_ The following styles are generated based on `theme.aspectRatio` values. + +| Name | Style(s) | +| ----------- | ------------------------------------- | +| aspect-1/1 | `{ aspectRatio: 1 }` | +| aspect-16/9 | `{ aspectRatio: 1.7777777777777777 }` | +| aspect-2/1 | `{ aspectRatio: 2 }` | +| aspect-3/2 | `{ aspectRatio: 1.5 }` | +| aspect-4/3 | `{ aspectRatio: 1.3333333333333333 }` | + ### Opacity > _Tip:_ The following styles are generated based on `theme.opacity` values. diff --git a/scripts/docs-gen.ts b/scripts/docs-gen.ts index c9421bb..6b67d9b 100644 --- a/scripts/docs-gen.ts +++ b/scripts/docs-gen.ts @@ -56,6 +56,8 @@ const Data = [ { name: 'Overflow' }, + { name: 'AspectRatio', theme: true }, + { name: 'Opacity', theme: true }, { name: 'Rotate', theme: true }, diff --git a/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.android b/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.android index 1637b0a..7513431 100644 --- a/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.android +++ b/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.android @@ -1078,6 +1078,21 @@ Object { "absolute": Object { "position": "absolute", }, + "aspect-1/1": Object { + "aspectRatio": 1, + }, + "aspect-16/9": Object { + "aspectRatio": 1.7777777777777777, + }, + "aspect-2/1": Object { + "aspectRatio": 2, + }, + "aspect-3/2": Object { + "aspectRatio": 1.5, + }, + "aspect-4/3": Object { + "aspectRatio": 1.3333333333333333, + }, "bg-black": Object { "backgroundColor": "black", }, diff --git a/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.ios b/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.ios index 1637b0a..7513431 100644 --- a/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.ios +++ b/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.ios @@ -1078,6 +1078,21 @@ Object { "absolute": Object { "position": "absolute", }, + "aspect-1/1": Object { + "aspectRatio": 1, + }, + "aspect-16/9": Object { + "aspectRatio": 1.7777777777777777, + }, + "aspect-2/1": Object { + "aspectRatio": 2, + }, + "aspect-3/2": Object { + "aspectRatio": 1.5, + }, + "aspect-4/3": Object { + "aspectRatio": 1.3333333333333333, + }, "bg-black": Object { "backgroundColor": "black", }, diff --git a/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.node b/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.node index c4490c7..7a855bc 100644 --- a/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.node +++ b/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.node @@ -1078,6 +1078,21 @@ Object { "absolute": Object { "position": "absolute", }, + "aspect-1/1": Object { + "aspectRatio": 1, + }, + "aspect-16/9": Object { + "aspectRatio": 1.7777777777777777, + }, + "aspect-2/1": Object { + "aspectRatio": 2, + }, + "aspect-3/2": Object { + "aspectRatio": 1.5, + }, + "aspect-4/3": Object { + "aspectRatio": 1.3333333333333333, + }, "bg-black": Object { "backgroundColor": "black", }, diff --git a/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.web b/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.web index c4490c7..7a855bc 100644 --- a/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.web +++ b/src/lib/style/__tests__/__snapshots__/style.test.ts.snap.web @@ -1078,6 +1078,21 @@ Object { "absolute": Object { "position": "absolute", }, + "aspect-1/1": Object { + "aspectRatio": 1, + }, + "aspect-16/9": Object { + "aspectRatio": 1.7777777777777777, + }, + "aspect-2/1": Object { + "aspectRatio": 2, + }, + "aspect-3/2": Object { + "aspectRatio": 1.5, + }, + "aspect-4/3": Object { + "aspectRatio": 1.3333333333333333, + }, "bg-black": Object { "backgroundColor": "black", }, diff --git a/src/lib/style/aspectRatio.ts b/src/lib/style/aspectRatio.ts new file mode 100644 index 0000000..c495faf --- /dev/null +++ b/src/lib/style/aspectRatio.ts @@ -0,0 +1,20 @@ +// Ours +import { Theme } from '../theme'; +import { merge } from '../utils/merge'; +import { id, StyleName } from '../utils/id'; + +type AspectRatioStyle = Record< + StyleName<'aspect', keyof Theme['aspectRatio']>, + { + aspectRatio: number; + } +>; + +export const aspectRatio = (theme: Theme) => + Object.keys(theme.aspectRatio) + .map((key) => ({ + [id('aspect', key)]: { + aspectRatio: theme.aspectRatio[key], + }, + })) + .reduce(merge, {}) as AspectRatioStyle; diff --git a/src/lib/style/index.ts b/src/lib/style/index.ts index 57621ab..e4054c2 100644 --- a/src/lib/style/index.ts +++ b/src/lib/style/index.ts @@ -3,6 +3,7 @@ import { Theme } from '../theme'; import { alignContent } from './alignContent'; import { alignItems } from './alignItems'; import { alignSelf } from './alignSelf'; +import { aspectRatio } from './aspectRatio'; import { backgroundColor } from './backgroundColor'; import { borderColor } from './borderColor'; import { borderRadius } from './borderRadius'; @@ -51,6 +52,7 @@ export default (theme: Theme) => alignContent(), alignItems(), alignSelf(), + aspectRatio(theme), backgroundColor(theme), borderColor(theme), borderRadius(theme), diff --git a/src/lib/theme/base.ts b/src/lib/theme/base.ts index 1e2dca5..5eacc0b 100644 --- a/src/lib/theme/base.ts +++ b/src/lib/theme/base.ts @@ -297,6 +297,13 @@ export const baseTheme = { '11/12': '91.666667%', 'full': '100%', }, + aspectRatio: { + '1/1': 1 / 1, + '2/1': 2 / 1, + '3/2': 3 / 2, + '4/3': 4 / 3, + '16/9': 16 / 9, + }, zIndex: { '0': 0, '10': 10,