ColorSwatch

1"use client";2
3import { ColorSwatch } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5
6const styles = stylex.create({ row: { display: "flex", alignItems: "center", gap: 12 } });7export function ColorSwatchBasic() {8  return (9    <div {...stylex.props(styles.row)}>10      <ColorSwatch aria-label="Blue" color="#0485F7" />11      <ColorSwatch aria-label="Red" color="#EF4444" />12      <ColorSwatch aria-label="Amber" color="#F59E0B" />13      <ColorSwatch aria-label="Green" color="#10B981" />14      <ColorSwatch aria-label="Fuchsia" color="#D946EF" />15    </div>16  );17}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorSwatch } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function ColorSwatchSizes() {7  return (8    <div {...stylex.props(styles.row)}>9      <ColorSwatch color="#0485F7" size="xs" />10      <ColorSwatch color="#EF4444" size="sm" />11      <ColorSwatch color="#F59E0B" size="md" />12      <ColorSwatch color="#10B981" size="lg" />13      <ColorSwatch color="#D946EF" size="xl" />14    </div>15  );16}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorSwatch } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function ColorSwatchShapes() {7  return (8    <div {...stylex.props(styles.row)}>9      <ColorSwatch color="#0485F7" shape="circle" />10      <ColorSwatch color="#0485F7" shape="square" />11    </div>12  );13}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorSwatch } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function ColorSwatchTransparency() {7  return (8    <div {...stylex.props(styles.row)}>9      {[1, 0.75, 0.5, 0.25, 0].map((alpha) => (10        <ColorSwatch11          key={alpha}12          aria-label={`${alpha * 100}% opacity`}13          color={`rgba(4, 133, 247, ${alpha})`}14        />15      ))}16    </div>17  );18}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. Native RAC style render state replaces DOM render interception. */3import { ColorSwatch } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6const colors = [7  ["Blue", "#0485F7"],8  ["Red", "#EF4444"],9  ["Amber", "#F59E0B"],10  ["Green", "#10B981"],11  ["Fuchsia", "#D946EF"],12] as const;13export function RenderFunction() {14  return (15    <div {...stylex.props(styles.row)}>16      {colors.map(([name, color]) => (17        <ColorSwatch18          key={name}19          aria-label={name}20          color={color}21          data-custom={name.toLowerCase()}22          style={({ color: c }) => ({ outlineColor: c.toString("css") })}23        />24      ))}25    </div>26  );27}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorSwatch } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function ColorSwatchAccessibility() {7  return (8    <div {...stylex.props(styles.row)}>9      <ColorSwatch aria-label="Primary brand color" color="#0485F7" colorName="Ocean Blue" />10      <ColorSwatch aria-label="Error state color" color="#EF4444" colorName="Coral Red" />11      <ColorSwatch aria-label="Warning color" color="#F59E0B" colorName="Sunset Orange" />12    </div>13  );14}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorSwatch } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6const colors = ["#0485F7", "#EF4444", "#F59E0B", "#10B981", "#D946EF"];7export function ColorSwatchCustomStyles() {8  return (9    <div {...stylex.props(styles.column8)}>10      <div {...stylex.props(styles.column2)}>11        <span {...stylex.props(styles.muted)}>Glow Effect</span>12        <div {...stylex.props(styles.row4)}>13          {colors.map((color) => (14            <ColorSwatch15              key={color}16              color={color}17              size="xl"18              style={() => ({ boxShadow: `0 0 20px 2px ${color}` })}19            />20          ))}21        </div>22      </div>23      <div {...stylex.props(styles.column2)}>24        <span {...stylex.props(styles.muted)}>Gradient</span>25        <div {...stylex.props(styles.row4)}>26          {colors.map((color) => (27            <ColorSwatch28              key={color}29              color={color}30              size="xl"31              style={({ color: c }) => ({32                background: `linear-gradient(135deg, ${c.toString("css")}, white)`,33              })}34            />35          ))}36        </div>37      </div>38    </div>39  );40}