diff --git a/apps/playground/app/ghost-balance/page.tsx b/apps/playground/app/ghost-balance/page.tsx index a617aacf..4098f832 100644 --- a/apps/playground/app/ghost-balance/page.tsx +++ b/apps/playground/app/ghost-balance/page.tsx @@ -15,7 +15,6 @@ import { PopoverContent, PopoverRoot, PopoverTrigger, - Section, Theme, } from 'frosted-ui'; @@ -28,7 +27,13 @@ export default function Ghost() { {(['row', 'column'] as const).map((direction) => ( -
+
-
+ ))} diff --git a/apps/playground/app/sink/page.tsx b/apps/playground/app/sink/page.tsx index 6fecd46b..08b64802 100644 --- a/apps/playground/app/sink/page.tsx +++ b/apps/playground/app/sink/page.tsx @@ -97,8 +97,6 @@ import { RadioGroupRoot, // ScrollArea, - // - Section, SelectContent, SelectGroup, SelectItem, @@ -245,7 +243,12 @@ export default function Sink() { // dir="rtl" > -
+
@@ -360,12 +363,17 @@ export default function Sink() { -
+ -
+
@@ -553,7 +561,7 @@ export default function Sink() { -
+ @@ -4393,14 +4401,16 @@ function DocsSection({ return ( <> -
+
{title} {children} -
+ diff --git a/apps/playground/app/test-appearance/page.tsx b/apps/playground/app/test-appearance/page.tsx index 4c0db06f..ef409d4a 100644 --- a/apps/playground/app/test-appearance/page.tsx +++ b/apps/playground/app/test-appearance/page.tsx @@ -4,7 +4,6 @@ import { Flex, Grid, Heading, - Section, Separator, Switch, Text, @@ -133,12 +132,17 @@ function DocsSection({ return ( <> -
+
{title} {children} -
+ diff --git a/apps/playground/app/test-classic-button/page.tsx b/apps/playground/app/test-classic-button/page.tsx index dee53ed3..e28c9d06 100644 --- a/apps/playground/app/test-classic-button/page.tsx +++ b/apps/playground/app/test-classic-button/page.tsx @@ -1,12 +1,11 @@ import { Pencil2Icon } from '@radix-ui/react-icons'; import { - Button, - Container, - Flex, - Section, - Theme, - ThemePanel, - themeAccentColorsOrdered, + Button, + Container, + Flex, + Theme, + ThemePanel, + themeAccentColorsOrdered, } from 'frosted-ui'; export default function Test() { @@ -17,7 +16,12 @@ export default function Test() {
-
+
{themeAccentColorsOrdered.map((color) => ( @@ -48,7 +52,7 @@ export default function Test() { ))} -
+
diff --git a/apps/playground/app/test-inset/page.tsx b/apps/playground/app/test-inset/page.tsx index b8f7942e..27e2269d 100644 --- a/apps/playground/app/test-inset/page.tsx +++ b/apps/playground/app/test-inset/page.tsx @@ -1,44 +1,43 @@ import { - AlertDialogAction, - AlertDialogCancel, - AlertDialogContent, - AlertDialogDescription, - AlertDialogRoot, - AlertDialogTitle, - AlertDialogTrigger, - AspectRatio, - Box, - Button, - Card, - Container, - DialogClose, - DialogContent, - DialogDescription, - DialogRoot, - DialogTitle, - DialogTrigger, - Flex, - Grid, - HoverCardContent, - HoverCardRoot, - HoverCardTrigger, - Inset, - Link, - PopoverContent, - PopoverRoot, - PopoverTrigger, - Section, - Separator, - TableBody, - TableCell, - TableColumnHeaderCell, - TableHeader, - TableRoot, - TableRow, - TableRowHeaderCell, - Text, - Theme, - ThemePanel, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogRoot, + AlertDialogTitle, + AlertDialogTrigger, + AspectRatio, + Box, + Button, + Card, + Container, + DialogClose, + DialogContent, + DialogDescription, + DialogRoot, + DialogTitle, + DialogTrigger, + Flex, + Grid, + HoverCardContent, + HoverCardRoot, + HoverCardTrigger, + Inset, + Link, + PopoverContent, + PopoverRoot, + PopoverTrigger, + Separator, + TableBody, + TableCell, + TableColumnHeaderCell, + TableHeader, + TableRoot, + TableRow, + TableRowHeaderCell, + Text, + Theme, + ThemePanel, } from 'frosted-ui'; import { NextThemeProvider } from '../next-theme-provider'; @@ -59,7 +58,12 @@ export default function Test() { -
+
@@ -216,7 +220,7 @@ export default function Test() {
-
+ diff --git a/apps/playground/app/test-responsive/page.tsx b/apps/playground/app/test-responsive/page.tsx index b40051e6..2757d981 100644 --- a/apps/playground/app/test-responsive/page.tsx +++ b/apps/playground/app/test-responsive/page.tsx @@ -1,20 +1,19 @@ import { SunIcon } from '@radix-ui/react-icons'; import { - Button, - Card, - Container, - Flex, - Grid, - IconButton, - Section, - SelectContent, - SelectItem, - SelectRoot, - SelectTrigger, - Text, - TextArea, - TextFieldInput, - Theme, + Button, + Card, + Container, + Flex, + Grid, + IconButton, + SelectContent, + SelectItem, + SelectRoot, + SelectTrigger, + Text, + TextArea, + TextFieldInput, + Theme, } from 'frosted-ui'; import { NextThemeProvider } from '../next-theme-provider'; @@ -26,7 +25,7 @@ export default function Test() {
-
+
-
+
-
+
-
+ diff --git a/apps/playground/app/test-textfield/page.tsx b/apps/playground/app/test-textfield/page.tsx index c0759839..d54c451d 100644 --- a/apps/playground/app/test-textfield/page.tsx +++ b/apps/playground/app/test-textfield/page.tsx @@ -16,7 +16,6 @@ import { Grid, Heading, IconButton, - Section, Text, TextFieldInput, TextFieldRoot, @@ -34,7 +33,7 @@ export default function Test() {
-
+
@@ -350,7 +349,7 @@ export default function Test() { -
+
diff --git a/apps/tailwind/tailwind.config.js b/apps/tailwind/tailwind.config.js index 5628c52d..59ece8a9 100644 --- a/apps/tailwind/tailwind.config.js +++ b/apps/tailwind/tailwind.config.js @@ -10,11 +10,5 @@ export default { theme: { extend: {}, }, - plugins: [ - frostedThemePlugin({ - useTailwindColorNames: false, // optional - useTailwindRadiusNames: false, // optional - mapMissingTailwindColors: false, // optional - }), - ], + plugins: [frostedThemePlugin()], }; diff --git a/packages/frosted-ui/.storybook/stories/components/section.stories.tsx b/packages/frosted-ui/.storybook/stories/components/section.stories.tsx deleted file mode 100644 index d339aded..00000000 --- a/packages/frosted-ui/.storybook/stories/components/section.stories.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import React from 'react'; -import { Box } from '../../../src/components/box'; -import { Section } from '../../../src/components/section'; -import { sectionPropDefs } from '../../../src/components/section.props'; - -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -const meta = { - title: 'Layout/Section', - component: Section, - args: { - children: 'Section', - size: sectionPropDefs.size.default, - }, - parameters: { - // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout - layout: 'centered', - }, - render: (args) => ( - -
-
- -
-
- - ), - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs - tags: ['autodocs'], -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args -export const Default: Story = {}; diff --git a/packages/frosted-ui/src/components/index.ts b/packages/frosted-ui/src/components/index.ts index b5165ebe..fb478d60 100644 --- a/packages/frosted-ui/src/components/index.ts +++ b/packages/frosted-ui/src/components/index.ts @@ -11,8 +11,6 @@ export { Grid } from './grid'; export * from './grid.props'; export { Inset } from './inset'; export * from './inset.props'; -export { Section } from './section'; -export * from './section.props'; // TYPOGRAPHY //------------------------------------------------------------------------------ diff --git a/packages/frosted-ui/src/components/section.css b/packages/frosted-ui/src/components/section.css deleted file mode 100644 index ee947e8c..00000000 --- a/packages/frosted-ui/src/components/section.css +++ /dev/null @@ -1,21 +0,0 @@ -.fui-Section { - box-sizing: border-box; - flex-shrink: 0; -} - -@breakpoints { - .fui-Section { - &:where(.fui-r-size-1) { - padding-top: var(--space-5); - padding-bottom: var(--space-5); - } - &:where(.fui-r-size-2) { - padding-top: var(--space-7); - padding-bottom: var(--space-7); - } - &:where(.fui-r-size-3) { - padding-top: 80px; - padding-bottom: 80px; - } - } -} diff --git a/packages/frosted-ui/src/components/section.props.ts b/packages/frosted-ui/src/components/section.props.ts deleted file mode 100644 index 816eddce..00000000 --- a/packages/frosted-ui/src/components/section.props.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { PropDef } from '../helpers'; - -const sizes = ['1', '2', '3'] as const; -const displayValues = ['none', 'block'] as const; - -const sectionPropDefs = { - size: { type: 'enum', values: sizes, default: '3', responsive: true }, - display: { type: 'enum', values: displayValues, default: undefined, responsive: true }, -} satisfies { - size: PropDef<(typeof sizes)[number]>; - display: PropDef<(typeof displayValues)[number]>; -}; - -export { sectionPropDefs }; diff --git a/packages/frosted-ui/src/components/section.tsx b/packages/frosted-ui/src/components/section.tsx deleted file mode 100644 index 1c6f71c0..00000000 --- a/packages/frosted-ui/src/components/section.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import classNames from 'classnames'; -import * as React from 'react'; -import { - extractLayoutProps, - extractMarginProps, - withBreakpoints, - withLayoutProps, - withMarginProps, -} from '../helpers'; -import { sectionPropDefs } from './section.props'; - -import type { GetPropDefTypes, LayoutProps, MarginProps } from '../helpers'; - -type SectionElement = React.ElementRef<'div'>; -type SectionOwnProps = GetPropDefTypes; -interface SectionProps - extends React.ComponentPropsWithoutRef<'div'>, - MarginProps, - LayoutProps, - SectionOwnProps {} -const Section = React.forwardRef( - (props, forwardedRef) => { - const { rest: marginRest, ...marginProps } = extractMarginProps(props); - const { rest: layoutRest, ...layoutProps } = extractLayoutProps(marginRest); - const { - className, - size = sectionPropDefs.size.default, - display = sectionPropDefs.display.default, - ...sectionProps - } = layoutRest; - return ( -
- ); - }, -); -Section.displayName = 'Section'; - -export { Section }; -export type { SectionProps }; diff --git a/packages/frosted-ui/src/styles/index.css b/packages/frosted-ui/src/styles/index.css index 5b783d6a..e88e128e 100644 --- a/packages/frosted-ui/src/styles/index.css +++ b/packages/frosted-ui/src/styles/index.css @@ -42,7 +42,6 @@ @import '../components/quote.css'; @import '../components/radio-group.css'; @import '../components/scroll-area.css'; -@import '../components/section.css'; @import '../components/segmented-control.css'; @import '../components/select.css'; @import '../components/separator.css'; diff --git a/packages/frosted-ui/src/tailwind-plugin.ts b/packages/frosted-ui/src/tailwind-plugin.ts index 61c47dd6..62b640b8 100644 --- a/packages/frosted-ui/src/tailwind-plugin.ts +++ b/packages/frosted-ui/src/tailwind-plugin.ts @@ -4,13 +4,11 @@ import plugin from 'tailwindcss/plugin'; import { semanticColors, themeAccentColorsGrouped, - themeAccentColorsOrdered, themeGrayColorsGrouped, } from './theme-options'; export const accentColorNames: string[] = []; export const grayColorNames: string[] = []; -export const bnwColorNames: string[] = []; const frostedColorScales = 12; type FrostedColorScales = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; @@ -25,52 +23,23 @@ themeGrayColorsGrouped.map((group) => { export function getColorTokenName( number: FrostedColorScales, - useTailwindColorNames?: boolean, alpha?: boolean, ): number | string { - const map: Record = { - 1: 25, - 2: 50, - 3: 100, - 4: 200, - 5: 300, - 6: 400, - 7: 500, - 8: 600, - 9: 700, - 10: 800, - 11: 900, - 12: 950, - } as const; - - if (!useTailwindColorNames) { - return alpha ? 'a' + number : number; - } - // TODO: this should be a lowercase prefix, not uppercase suffix - return alpha ? (('a' + map[number]) as string) : (map[number] as number); + return alpha ? 'a' + number : number; } -export const getColorDefinitions = ( - color: string, - alpha?: boolean, - useTailwindColorNames?: boolean, -) => { +export const getColorDefinitions = (color: string, alpha?: boolean) => { const colors = Array.from(Array(frostedColorScales).keys()).reduce( (acc, _, i) => { - acc[ - getColorTokenName( - (i + 1) as FrostedColorScales, - useTailwindColorNames, - alpha, - ) - ] = `var(--${color}-${alpha ? 'a' : ''}${i + 1})`; + acc[getColorTokenName((i + 1) as FrostedColorScales, alpha)] = + `var(--${color}-${alpha ? 'a' : ''}${i + 1})`; return acc; }, {} as Record, ); if (!alpha) { - colors[`${getColorTokenName(9, useTailwindColorNames, alpha)}-contrast`] = + colors[`${getColorTokenName(9, alpha)}-contrast`] = `var(--${color}-9-contrast)`; colors['surface'] = `var(--${color}-surface)`; colors['DEFAULT'] = `var(--${color}-9)`; @@ -82,51 +51,8 @@ export const getColorDefinitions = ( return colors; }; -type FrostedColors = Exclude< - | (typeof themeAccentColorsOrdered)[number] - | (typeof themeGrayColorsGrouped)[0]['values'][number], - 'auto' ->; - -export const tailwindColorsToFrostedMap: Record< - 'zinc' | 'neutral' | 'stone' | 'emerald' | 'fuchsia' | 'rose', - FrostedColors | Record -> = { - zinc: 'sand', - neutral: 'sage', - stone: 'sand', - emerald: 'grass', - fuchsia: 'plum', - rose: 'crimson', -}; - -const frostedRadiusToTailwindMap = { - 1: 'xxs', - 2: 'xs', - 3: 'sm', - 4: 'md', - 5: 'lg', - 6: 'xl', -} as const; - -export function getRadiusTokenName( - radius: keyof typeof frostedRadiusToTailwindMap, - useTailwindColorNames?: boolean, -): string | number { - return useTailwindColorNames ? frostedRadiusToTailwindMap[radius] : radius; -} - -export type FrostedThemePluginOptions = { - useTailwindColorNames?: boolean; - useTailwindRadiusNames?: boolean; - mapMissingTailwindColors?: - | boolean - | Partial; -}; - export const frostedThemePlugin = plugin.withOptions( - // eslint-disable-next-line no-empty-pattern - ({}: FrostedThemePluginOptions) => { + () => { // TODO: make sure font styles are in sync with Text and Heading style return ({ addBase }) => { addBase({ @@ -138,85 +64,18 @@ export const frostedThemePlugin = plugin.withOptions( '-webkit-font-smoothing': 'antialiased', '-moz-osx-font-smoothing': 'grayscale', }, - em: { - fontFamily: 'var(--em-font-family)', - fontWeight: 'var(--em-font-weight)', - fontSize: 'calc(var(--em-font-size-adjust) * 1em)', - fontStyle: 'var(--em-font-style)', - lineHeight: '1.25', - letterSpacing: - 'calc(var(--em-letter-spacing) + var(--letter-spacing, var(--default-letter-spacing)))', - }, - h6: { - fontFamily: 'var(--heading-font-family)', - fontWeight: 'var(--font-weight-bold)', - fontSize: - 'calc(var(--font-size-4) * var(--heading-font-size-adjust))', - letterSpacing: - 'calc(var(--letter-spacing-4) + var(--heading-letter-spacing))', - lineHeight: 'var(--heading-line-height-4)', - }, - h5: { - fontFamily: 'var(--heading-font-family)', - fontWeight: 'var(--font-weight-bold)', - fontSize: - 'calc(var(--font-size-5) * var(--heading-font-size-adjust))', - letterSpacing: - 'calc(var(--letter-spacing-5) + var(--heading-letter-spacing))', - lineHeight: 'var(--heading-line-height-5)', - }, - h4: { - fontFamily: 'var(--heading-font-family)', - fontWeight: 'var(--font-weight-bold)', - fontSize: - 'calc(var(--font-size-6) * var(--heading-font-size-adjust))', - letterSpacing: - 'calc(var(--letter-spacing-6) + var(--heading-letter-spacing))', - lineHeight: 'var(--heading-line-height-6)', - }, - h3: { - fontFamily: 'var(--heading-font-family)', - fontWeight: 'var(--font-weight-bold)', - fontSize: - 'calc(var(--font-size-7) * var(--heading-font-size-adjust))', - letterSpacing: - 'calc(var(--letter-spacing-7) + var(--heading-letter-spacing))', - lineHeight: 'var(--heading-line-height-7)', - }, - h2: { - fontFamily: 'var(--heading-font-family)', - fontWeight: 'var(--font-weight-bold)', - fontSize: - 'calc(var(--font-size-8) * var(--heading-font-size-adjust))', - letterSpacing: - 'calc(var(--letter-spacing-8) + var(--heading-letter-spacing))', - lineHeight: 'var(--heading-line-height-8)', - }, - h1: { - fontFamily: 'var(--heading-font-family)', - fontWeight: 'var(--font-weight-bold)', - fontSize: - 'calc(var(--font-size-9) * var(--heading-font-size-adjust))', - letterSpacing: - 'calc(var(--letter-spacing-9) + var(--heading-letter-spacing))', - lineHeight: 'var(--heading-line-height-9)', - }, }); }; }, - ({ - useTailwindColorNames = true, - useTailwindRadiusNames = true, - mapMissingTailwindColors = true, - }: FrostedThemePluginOptions) => { + () => { function generateTailwindColors(colorName: string) { const c = { - ...getColorDefinitions(colorName, false, useTailwindColorNames), - ...getColorDefinitions(colorName, true, useTailwindColorNames), + ...getColorDefinitions(colorName, false), + ...getColorDefinitions(colorName, true), }; if (grayColorNames.includes(colorName)) { - c[`${getColorTokenName(2, useTailwindColorNames, false)}-translucent`] = + c[`${getColorTokenName(2, false)}-translucent`] = `var(--${colorName}-2-translucent)`; } @@ -232,112 +91,19 @@ export const frostedThemePlugin = plugin.withOptions( return acc; }, {}); - let mappingsOfMissingTailwindColors = {}; - if (typeof mapMissingTailwindColors === 'boolean') { - mappingsOfMissingTailwindColors = { - zinc: generateTailwindColors('sand'), - neutral: generateTailwindColors('sage'), - stone: generateTailwindColors('mauve'), - emerald: generateTailwindColors('grass'), - fuchsia: generateTailwindColors('plum'), - rose: generateTailwindColors('crimson'), - }; - } else if (typeof mapMissingTailwindColors === 'object') { - mappingsOfMissingTailwindColors = { - zinc: - typeof mapMissingTailwindColors['zinc'] === 'string' - ? generateTailwindColors(mapMissingTailwindColors['zinc']) - : mapMissingTailwindColors['zinc'], - neutral: - typeof mapMissingTailwindColors['neutral'] === 'string' - ? generateTailwindColors(mapMissingTailwindColors['neutral']) - : mapMissingTailwindColors['neutral'], - stone: - typeof mapMissingTailwindColors['stone'] === 'string' - ? generateTailwindColors(mapMissingTailwindColors['stone']) - : mapMissingTailwindColors['stone'], - emerald: - typeof mapMissingTailwindColors['emerald'] === 'string' - ? generateTailwindColors(mapMissingTailwindColors['emerald']) - : mapMissingTailwindColors['emerald'], - fuchsia: - typeof mapMissingTailwindColors['fuchsia'] === 'string' - ? generateTailwindColors(mapMissingTailwindColors['fuchsia']) - : mapMissingTailwindColors['fuchsia'], - rose: - typeof mapMissingTailwindColors['rose'] === 'string' - ? generateTailwindColors(mapMissingTailwindColors['rose']) - : mapMissingTailwindColors['rose'], - }; - } - return { darkMode: 'class', theme: { fontSize: { - xs: [ - 'var(--font-size-1)', - { - letterSpacing: 'var(--letter-spacing-1)', - lineHeight: 'var(--line-height-1)', - }, - ], - sm: [ - 'var(--font-size-2)', - { - letterSpacing: 'var(--letter-spacing-2)', - lineHeight: 'var(--line-height-2)', - }, - ], - base: [ - 'var(--font-size-3)', - { - letterSpacing: 'var(--letter-spacing-3)', - lineHeight: 'var(--line-height-3)', - }, - ], - lg: [ - 'var(--font-size-4)', - { - letterSpacing: 'var(--letter-spacing-4)', - lineHeight: 'var(--line-height-4)', - }, - ], - xl: [ - 'var(--font-size-5)', - { - letterSpacing: 'var(--letter-spacing-5)', - lineHeight: 'var(--line-height-5)', - }, - ], - '2xl': [ - 'var(--font-size-6)', - { - letterSpacing: 'var(--letter-spacing-6)', - lineHeight: 'var(--line-height-6)', - }, - ], - '3xl': [ - 'var(--font-size-7)', - { - letterSpacing: 'var(--letter-spacing-7)', - lineHeight: 'var(--line-height-7)', - }, - ], - '4xl': [ - 'var(--font-size-8)', - { - letterSpacing: 'var(--letter-spacing-8)', - lineHeight: 'var(--line-height-8)', - }, - ], - '5xl': [ - 'var(--font-size-9)', - { - letterSpacing: 'var(--letter-spacing-9)', - lineHeight: 'var(--line-height-9)', - }, - ], + 1: 'var(--font-size-1)', + 2: 'var(--font-size-2)', + 3: 'var(--font-size-3)', + 4: 'var(--font-size-4)', + 5: 'var(--font-size-5)', + 6: 'var(--font-size-6)', + 7: 'var(--font-size-7)', + 8: 'var(--font-size-8)', + 9: 'var(--font-size-9)', }, lineHeight: { 1: 'var(--line-height-1)', @@ -392,54 +158,6 @@ export const frostedThemePlugin = plugin.withOptions( extrabold: '800', black: '900', }, - spacing: { - '0': '0px', - px: '1px', - '0.5': '2px', - '1': 'var(--space-1)', - '1.5': '6px', - '2': 'var(--space-2)', - '2.5': '10px', - '3': 'var(--space-3)', - '3.5': '14px', - '4': 'var(--space-4)', - '5': '20px', - '6': 'var(--space-5)', - '7': '28px', - '8': 'var(--space-6)', - '9': '36px', - '10': 'var(--space-7)', - '11': '44px', - '12': 'var(--space-8)', - '14': '56px', - '16': 'var(--space-9)', - '20': '80px', - '24': '96px', - '28': '112px', - '32': '128px', - '36': '144px', - '40': '160px', - '44': '176px', - '48': '192px', - '52': '208px', - '56': '224px', - '60': '240px', - '64': '256px', - '72': '288px', - '80': '320px', - '96': '384px', - }, - borderRadius: { - none: '0px', - [getRadiusTokenName(1, useTailwindRadiusNames)]: 'var(--radius-1)', - [getRadiusTokenName(2, useTailwindRadiusNames)]: 'var(--radius-2)', - [getRadiusTokenName(3, useTailwindRadiusNames)]: 'var(--radius-3)', - DEFAULT: 'var(--radius-3)', - [getRadiusTokenName(4, useTailwindRadiusNames)]: 'var(--radius-4)', - [getRadiusTokenName(5, useTailwindRadiusNames)]: 'var(--radius-5)', - [getRadiusTokenName(6, useTailwindRadiusNames)]: 'var(--radius-6)', - full: '99999px', - }, colors: { inherit: 'inherit', transparent: 'transparent', @@ -497,7 +215,6 @@ export const frostedThemePlugin = plugin.withOptions( 'black-a12': 'var(--black-a12)', selection: 'var(--color-selection-root)', ...allFrostedColors, - ...mappingsOfMissingTailwindColors, accent: generateTailwindColors('accent'), gray: generateTailwindColors('gray'), },