Arthur Geron arthurgeron
arthurgeron
/ generateColorStepVariations.ts
Created
June 12, 2024 17:15
Uses Radix Themes V3 logic to generate alpha, display p3 and display p3 colors from a solid color and background color input
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Color from 'colorjs.io'; | |
| function getAlphaColorSrgb(targetColor: string, backgroundColor: string, targetAlpha?: number) { | |
| const [r, g, b, a] = getAlphaColor( | |
| new Color(targetColor).to('srgb').coords, | |
| new Color(backgroundColor).to('srgb').coords, | |
| 255, | |
| 255, | |
| targetAlpha | |
| ); |
arthurgeron
/ radixUiThemesTailwindPlugin.ts
Created
June 12, 2024 15:48
radix-ui-themes-with-tailwind refactored to work with @radix-ui/themes V3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { withOptions } from 'tailwindcss/plugin'; | |
| import * as colors from 'tailwindcss/colors'; | |
| import { accentColors, grayColors } from '@radix-ui/themes/src/props'; | |
| /* | |
| Exposes internal Radix tokens to Tailwind | |
| Based on the deprecated radix-ui-themes-with-tailwind@1.2.6, which was made for Radix Themes V2, here refactored for V3. | |
| /* | |
| /* | |
| Radix unfortunately does not export these values |