diff --git a/packages/docs-reanimated/docs/utilities/interpolateColor.mdx b/packages/docs-reanimated/docs/utilities/interpolateColor.mdx index b370e010439..6b1dc19ec4a 100644 --- a/packages/docs-reanimated/docs/utilities/interpolateColor.mdx +++ b/packages/docs-reanimated/docs/utilities/interpolateColor.mdx @@ -39,6 +39,7 @@ function App() { TODO (OKLAB): Adjust the colorSpace prop once OKLAB support is released officially, like so: colorSpace?: 'RGB' | 'HSV' | 'LAB', --> + ```typescript type InterpolationOptions = { gamma?: number; @@ -76,6 +77,7 @@ An array of output colors values in form of strings (like `'red'`, `'#ff0000'`, TODO (OKLAB): Uncomment and replace with the following once OKLAB support is released officialy: The color space to use for interpolation. Can be either `'HSV'`, `'RGB'` or [`'LAB'`](https://en.wikipedia.org/wiki/Oklab_color_space). Defaults to `'RGB'`. --> + The color space to use for interpolation. Can be either `'HSV'` or `'RGB'`. Defaults to `'RGB'`. #### `options` diff --git a/packages/docs-reanimated/src/components/InteractivePlayground/useInterpolateColorPlayground/Example.tsx b/packages/docs-reanimated/src/components/InteractivePlayground/useInterpolateColorPlayground/Example.tsx index 94cd81886e3..0ac7beb5444 100644 --- a/packages/docs-reanimated/src/components/InteractivePlayground/useInterpolateColorPlayground/Example.tsx +++ b/packages/docs-reanimated/src/components/InteractivePlayground/useInterpolateColorPlayground/Example.tsx @@ -12,7 +12,7 @@ import Animated, { interface InterpolateColorProps { outputRange: any[]; // TODO (OKLAB): Uncomment "LAB" space when OKLAB support is released officially - colorSpace: 'RGB' | 'HSV'/* | 'LAB'*/; + colorSpace: 'RGB' | 'HSV' /* | 'LAB'*/; options: InterpolationOptions; } diff --git a/packages/docs-reanimated/src/components/InteractivePlayground/useInterpolateColorPlayground/index.tsx b/packages/docs-reanimated/src/components/InteractivePlayground/useInterpolateColorPlayground/index.tsx index 548d3c6fbd9..8ca2081811a 100644 --- a/packages/docs-reanimated/src/components/InteractivePlayground/useInterpolateColorPlayground/index.tsx +++ b/packages/docs-reanimated/src/components/InteractivePlayground/useInterpolateColorPlayground/index.tsx @@ -40,7 +40,7 @@ export default function useInterpolateColorPlayground() { const [colorBarsSectionCollapsed, setColorBarsSectionCollapsed] = useState(true); // TODO (OKLAB): Uncomment "LAB" option below when OKLAB support is released officially - const [colorSpace, setColorSpace] = useState<'RGB' | 'HSV'/* | 'LAB'*/>( + const [colorSpace, setColorSpace] = useState<'RGB' | 'HSV' /* | 'LAB'*/>( ColorSpace[initialState.colorSpace] ); const [gamma, setGamma] = useState(initialState.gamma); @@ -88,7 +88,7 @@ export default function useInterpolateColorPlayground() { label="Colorspace" value={colorSpace} onChange={(changedString) => setColorSpace(ColorSpace[changedString])} - options={['RGB', 'HSV'/*, 'LAB'*/]} // TODO (OKLAB): Uncomment "LAB" option when OKLAB support is released officially + options={['RGB', 'HSV' /*, 'LAB'*/]} // TODO (OKLAB): Uncomment "LAB" option when OKLAB support is released officially /> {colorSpace === ColorSpace.RGB && (