import React, { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import clsx from 'clsx';
import AvatarView from '../avatarView';
import Tooltip from '../tooltip';
import IconButton from '../iconButton';
import Body from '../body';
const meta: Meta = {
title: 'Foundations/Tokens',
tags: ['!autodocs', '!manifest'],
};
export default meta;
type Story = StoryObj;
export const Colors: Story = {
render: () => {
return (
{colorTokens.map((token) => (
))}
);
},
};
const colorTokens = [
'--color-content-primary',
'--color-bright-yellow',
'--color-bright-orange',
'--color-dark-purple',
'--color-dark-gold',
'--color-bright-blue',
'--color-dark-charcoal',
'--color-white',
'--color-black',
'--color-bright-green',
'--color-forest-green',
'--color-bright-pink',
'--color-dark-maroon',
'--color-content-primary',
'--color-content-secondary',
'--color-content-tertiary',
'--color-content-link',
'--color-content-link-hover',
'--color-content-link-active',
'--color-interactive-control',
'--color-interactive-control-hover',
'--color-interactive-control-active',
'--color-interactive-primary',
'--color-interactive-primary-hover',
'--color-interactive-primary-active',
'--color-interactive-secondary',
'--color-interactive-secondary-hover',
'--color-interactive-secondary-active',
'--color-interactive-accent',
'--color-interactive-accent-hover',
'--color-interactive-accent-active',
'--color-interactive-contrast',
'--color-interactive-contrast-hover',
'--color-interactive-contrast-active',
'--color-interactive-neutral',
'--color-interactive-neutral-hover',
'--color-interactive-neutral-active',
'--color-border-neutral',
'--color-border-overlay',
'--color-background-screen',
'--color-background-screen-hover',
'--color-background-screen-active',
'--color-background-elevated',
'--color-background-neutral',
'--color-background-neutral-hover',
'--color-background-neutral-active',
'--color-background-overlay',
'--color-background-surface',
'--color-sentiment-negative',
'--color-sentiment-negative-hover',
'--color-sentiment-negative-active',
'--color-sentiment-negative-primary',
'--color-sentiment-negative-primary-hover',
'--color-sentiment-negative-primary-active',
'--color-sentiment-negative-secondary',
'--color-sentiment-negative-secondary-hover',
'--color-sentiment-negative-secondary-active',
'--color-sentiment-positive',
'--color-sentiment-positive-hover',
'--color-sentiment-positive-active',
'--color-sentiment-positive-primary',
'--color-sentiment-positive-primary-hover',
'--color-sentiment-positive-primary-active',
'--color-sentiment-positive-secondary',
'--color-sentiment-positive-secondary-hover',
'--color-sentiment-positive-secondary-active',
'--color-sentiment-warning',
'--color-sentiment-warning-hover',
'--color-sentiment-warning-active',
'--color-sentiment-warning-primary',
'--color-sentiment-warning-primary-hover',
'--color-sentiment-warning-primary-active',
'--color-sentiment-warning-secondary',
'--color-sentiment-warning-secondary-hover',
'--color-sentiment-warning-secondary-active',
'--color-sentiment-warning-content',
'--color-sentiment-warning-content-hover',
'--color-sentiment-warning-content-active',
'--color-contrast',
'--color-light',
'--color-dark',
'--color-contrast-overlay',
'--color-contrast-theme',
];
function ColorToken(props: { token: string; className?: string }) {
const color = `var(${props.token})`;
const [tooltipLabel, setTooltipLabel] = React.useState('Copy Token Name');
return (
{
await navigator.clipboard.writeText(color);
setTooltipLabel('Copied!');
}}
>
{tooltipLabel}
} position="top">