Skip to content

Instantly share code, notes, and snippets.

View arthurgeron's full-sized avatar

Arthur Geron arthurgeron

View GitHub Profile
@arthurgeron
arthurgeron / radixUiThemesTailwindPlugin.ts
Created June 12, 2024 15:48
radix-ui-themes-with-tailwind refactored to work with @radix-ui/themes V3
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 [email protected], which was made for Radix Themes V2, here refactored for V3.
/*
/*
Radix unfortunately does not export these values
@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
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
);