diff --git a/docs/examples/avatar/colorExample.tsx b/docs/examples/avatar/colorExample.tsx index 5cf4c5f1d2..34c2d07a04 100644 --- a/docs/examples/avatar/colorExample.tsx +++ b/docs/examples/avatar/colorExample.tsx @@ -1,6 +1,6 @@ import { Avatar, Box, Flex } from 'gestalt'; -type Color = '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10'; +type Color = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; interface AvatarProps { name: string; @@ -8,16 +8,16 @@ interface AvatarProps { } const avatars: AvatarProps[] = [ - { name: 'Alberto', color: '01' }, - { name: 'Andy', color: '02' }, - { name: 'Alexandra', color: '03' }, - { name: 'Alexi', color: '04' }, - { name: 'Alonso', color: '05' }, - { name: 'Arturo', color: '06' }, - { name: 'Amanda', color: '07' }, - { name: 'Angelina', color: '08' }, - { name: 'Adrian', color: '09' }, - { name: 'Amelia', color: '10' }, + { name: 'Alberto', color: 1 }, + { name: 'Andy', color: 2 }, + { name: 'Alexandra', color: 3 }, + { name: 'Alexi', color: 4 }, + { name: 'Alonso', color: 5 }, + { name: 'Arturo', color: 6 }, + { name: 'Amanda', color: 7 }, + { name: 'Angelina', color: 8 }, + { name: 'Adrian', color: 9 }, + { name: 'Amelia', color: 10 }, ]; export default function Example() { diff --git a/docs/examples/avatar/mainExample.tsx b/docs/examples/avatar/mainExample.tsx index 3d0d807b0e..aee97b610c 100644 --- a/docs/examples/avatar/mainExample.tsx +++ b/docs/examples/avatar/mainExample.tsx @@ -19,14 +19,14 @@ export default function Example() { size="xs" src="https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg" /> - + - + diff --git a/docs/examples/avatar/noImageSourceExample.tsx b/docs/examples/avatar/noImageSourceExample.tsx index 9956b0e9de..48422c0bf3 100644 --- a/docs/examples/avatar/noImageSourceExample.tsx +++ b/docs/examples/avatar/noImageSourceExample.tsx @@ -9,7 +9,7 @@ export default function Example() { return ( diff --git a/docs/examples/avatarGroup/noEmoji.tsx b/docs/examples/avatarGroup/noEmoji.tsx index ad1631e1e2..0f987a1d93 100644 --- a/docs/examples/avatarGroup/noEmoji.tsx +++ b/docs/examples/avatarGroup/noEmoji.tsx @@ -21,11 +21,11 @@ export default function Example() { const collaboratorsVR = [ { - color: '10', + color: 10, name: 'Sora', }, { - color: '04', + color: 4, name: '🙏🏾', }, { diff --git a/docs/pages/web/avatargroup.tsx b/docs/pages/web/avatargroup.tsx index fd349b2d28..fec515e051 100644 --- a/docs/pages/web/avatargroup.tsx +++ b/docs/pages/web/avatargroup.tsx @@ -184,7 +184,7 @@ export default function AvatarGroupPage({ generatedDocGen }: { generatedDocGen: src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg', }, { - color: '08', + color: 8, name: 'Zola', }, { @@ -203,7 +203,7 @@ export default function AvatarGroupPage({ generatedDocGen }: { generatedDocGen: ], [ { - color: '10', + color: 10, name: 'Benito', }, { @@ -214,19 +214,19 @@ export default function AvatarGroupPage({ generatedDocGen }: { generatedDocGen: ], [ { - color: '04', + color: 4, name: 'Alanna', }, { - color: '06', + color: 6, name: 'Elliot', }, { - color: '08', + color: 8, name: 'Ricardo', }, { - color: '10', + color: 10, name: 'Ricardo', }, ...new Array(10), diff --git a/packages/gestalt/src/Avatar.tsx b/packages/gestalt/src/Avatar.tsx index 91247a0572..9d7ada6001 100644 --- a/packages/gestalt/src/Avatar.tsx +++ b/packages/gestalt/src/Avatar.tsx @@ -8,7 +8,7 @@ type Props = { /** * The background color chosen by the user. A default color will be used if none is selected. */ - color?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10'; + color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; /** * The name of the user. This is used for the placeholder treatment if an image is not available. */ diff --git a/packages/gestalt/src/Avatar/DefaultAvatar.tsx b/packages/gestalt/src/Avatar/DefaultAvatar.tsx index 3a10ccaa66..9413277f13 100644 --- a/packages/gestalt/src/Avatar/DefaultAvatar.tsx +++ b/packages/gestalt/src/Avatar/DefaultAvatar.tsx @@ -2,7 +2,7 @@ import AvatarFoundation from './Foundation'; type Props = { accessibilityLabel?: string; - color?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10'; + color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; isHovered?: boolean; isPressed?: boolean; name: string; diff --git a/packages/gestalt/src/Avatar/Foundation.tsx b/packages/gestalt/src/Avatar/Foundation.tsx index 175d69a12a..60c121c553 100644 --- a/packages/gestalt/src/Avatar/Foundation.tsx +++ b/packages/gestalt/src/Avatar/Foundation.tsx @@ -13,7 +13,7 @@ import useInExperiment from '../useInExperiment'; const ICON_SIZE_RATIO = (20 / 48) * 100; // For pixel perfect icon button, we use the icon (20px) to parent container (48px) size ratio type ResponsiveFitSizeBoxProps = { - color?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10'; + color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; children: ReactNode; content: string; isCollaboratorCount?: boolean; @@ -88,7 +88,7 @@ function ResponsiveFitSizeBox({ } type AvatarFoundationProps = { - color?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10'; + color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; children?: string | number; isCollaboratorCount?: boolean; isHovered?: boolean; diff --git a/packages/gestalt/src/Avatar/InternalAvatar.tsx b/packages/gestalt/src/Avatar/InternalAvatar.tsx index c0854d8bae..f3179790ee 100644 --- a/packages/gestalt/src/Avatar/InternalAvatar.tsx +++ b/packages/gestalt/src/Avatar/InternalAvatar.tsx @@ -19,7 +19,7 @@ const sizes = { type Props = { accessibilityLabel?: string; - color?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10'; + color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; isHovered?: boolean; isPressed?: boolean; name: string; diff --git a/packages/gestalt/src/Avatar/getAvatarColorToken.ts b/packages/gestalt/src/Avatar/getAvatarColorToken.ts index ab72f4db4c..2917e541b6 100644 --- a/packages/gestalt/src/Avatar/getAvatarColorToken.ts +++ b/packages/gestalt/src/Avatar/getAvatarColorToken.ts @@ -15,61 +15,61 @@ const colorTokensLight: ColorTokens = Object.freeze({ hover: '#D6D4CD', pressed: '#C2C1BC', }, - '01': { + 1: { // redWeak base: '#FFD3D1', hover: '#FBBEBB', pressed: '#F4A8A4', }, - '02': { + 2: { // redDefault base: '#FF9494', hover: '#F87777', pressed: '#ED5A5A', }, - '03': { + 3: { // purpleWeak base: '#FCD8FC', hover: '#FAC7FA', pressed: '#F8B5F8', }, - '04': { + 4: { // purpleDefault base: '#EFADEF', hover: '#E599E5', pressed: '#DA86DA', }, - '05': { + 5: { // blueWeak base: '#C5EAF7', hover: '#A8DDF0', pressed: '#8ECFE6', }, - '06': { + 6: { // blueDefault base: '#7CBEDE', hover: '#58A9D0', pressed: '#4096BF', }, - '07': { + 7: { // greenWeak base: '#D0E2A8', hover: '#BCD090', pressed: '#A7B97E', }, - '08': { + 8: { // greenDefault base: '#A8BB63', hover: '#93A550', pressed: '#81904C', }, - '09': { + 9: { // orangeWeak base: '#FDE7C9', hover: '#F9D9AE', pressed: '#F4CC95', }, - '10': { + 10: { // orangeDefault base: '#FBC55B', hover: '#F8B430', @@ -83,61 +83,61 @@ const colorTokensDark: ColorTokens = Object.freeze({ hover: '#757570', pressed: '#757570', }, - '01': { + 1: { // redWeak base: '#8A0F0F', hover: '#8A0F0F', pressed: '#8A0F0F', }, - '02': { + 2: { // redDefault base: '#B2001A', hover: '#B2001A', pressed: '#B2001A', }, - '03': { + 3: { // purpleWeak base: '#6D4270', hover: '#6D4270', pressed: '#6D4270', }, - '04': { + 4: { // purpleDefault base: '#8F4696', hover: '#8F4696', pressed: '#8F4696', }, - '05': { + 5: { // blueWeak base: '#215D82', hover: '#215D82', pressed: '#215D82', }, - '06': { + 6: { // blueDefault base: '#007DB8', hover: '#007DB8', pressed: '#007DB8', }, - '07': { + 7: { // greenWeak base: '#265926', hover: '#265926', pressed: '#265926', }, - '08': { + 8: { // greenDefault base: '#517D3B', hover: '#517D3B', pressed: '#517D3B', }, - '09': { + 9: { // orangeWeak base: '#9B4B1C', hover: '#9B4B1C', pressed: '#9B4B1C', }, - '10': { + 10: { // orangeDefault base: '#C66F31', hover: '#C66F31', diff --git a/packages/gestalt/src/AvatarGroup.tsx b/packages/gestalt/src/AvatarGroup.tsx index f853658fdc..3654655554 100644 --- a/packages/gestalt/src/AvatarGroup.tsx +++ b/packages/gestalt/src/AvatarGroup.tsx @@ -45,7 +45,7 @@ type Props = { * The user group data. See the [collaborators display](https://gestalt.pinterest.systems/web/avatargroup#Collaborators-display) variant to learn more. */ collaborators: ReadonlyArray<{ - color?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10'; + color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; name: string; src?: string; }>; diff --git a/packages/gestalt/src/AvatarGroup/CollaboratorAvatar.tsx b/packages/gestalt/src/AvatarGroup/CollaboratorAvatar.tsx index bc7847e2fd..e2d0fa4fd4 100644 --- a/packages/gestalt/src/AvatarGroup/CollaboratorAvatar.tsx +++ b/packages/gestalt/src/AvatarGroup/CollaboratorAvatar.tsx @@ -4,7 +4,7 @@ import PositioningWrapper from './PositioningWrapper'; import InternalAvatar from '../Avatar/InternalAvatar'; type Props = BaseStackType & { - color?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10'; + color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; index: number; name: string; isHovered: boolean;