### Install Radix Colors with npm, yarn, or pnpm Source: https://www.radix-ui.com/colors/docs/overview/installation Install Radix Colors using your preferred package manager. The current version is 3.0.0. ```bash # with npm npm install @radix-ui/colors # with yarn yarn add @radix-ui/colors # with pnpm pnpm add @radix-ui/colors ``` -------------------------------- ### Using Radix Colors with vanilla-extract Source: https://www.radix-ui.com/colors/docs/overview/usage Integrate Radix Colors into your vanilla-extract themes using createTheme. This example shows how to define light and dark themes and apply styles using the theme variables. ```javascript import { gray, blue, red, green, grayDark, blueDark, redDark, greenDark } from "@radix-ui/colors"; import { createTheme } from "@vanilla-extract/css"; export const [theme, vars] = createTheme({ colors: { ...gray, ...blue, ...red, ...green, }, }); export const darkTheme = createTheme(vars, { colors: { ...grayDark, ...blueDark, ...redDark, ...greenDark, }, }); // Use the colors in your styles export const styles = { button: style({ backgroundColor: vars.colors.blue4, color: vars.colors.blue11, borderColor: vars.colors.blue7, ":hover": { backgroundColor: vars.colors.blue5, borderColor: vars.colors.blue8, }, }), }; // Apply your theme to it export default function App() { return ( ); } ``` -------------------------------- ### Using Radix Colors with styled-components Source: https://www.radix-ui.com/colors/docs/overview/usage Import color scales and integrate them into your styled-components theme. This example demonstrates creating both light and dark themes and applying them to a styled button. ```javascript import { gray, blue, red, green, grayDark, blueDark, redDark, greenDark } from "@radix-ui/colors"; import styled, { ThemeProvider } from "styled-components"; // Create your theme const theme = { colors: { ...gray, ...blue, ...red, ...green, }, }; // Create your dark theme const darkTheme = { colors: { ...grayDark, ...blueDark, ...redDark, ...greenDark, }, }; // Use the colors in your styles const Button = styled.button` background-color: ${(props) => props.theme.colors.blue4}; color: ${(props) => props.theme.colors.blue11}; border-color: ${(props) => props.theme.colors.blue7}; &:hover { background-color: ${(props) => props.theme.colors.blue5}; border-color: ${(props) => props.theme.colors.blue8}; } `; // Wrap your app with the theme provider and apply your theme to it export default function App() { return ( ); } ``` -------------------------------- ### Load Radix Colors CSS scales from CDN Source: https://www.radix-ui.com/colors/docs/overview/installation Include Radix Colors CSS files directly from a CDN for quick setup. This method is not recommended for production environments and is intended for prototyping only. ```html ``` -------------------------------- ### Define Mutable Aliases for Light and Dark Modes Source: https://www.radix-ui.com/colors/docs/overview/aliasing Support light and dark modes by defining CSS variables that map to different colors based on the active theme. This example remaps panel, contrast, shadow, and overlay colors for dark mode. ```css /* * Note: Importing from the CDN in production is not recommended. * It's intended for prototyping only. */ @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/slate.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/slate-alpha.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/white-alpha.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/black-alpha.css"; :root { --panel: white; --panel-contrast: var(--black-a9); --shadow: var(--slate-a3); --overlay: var(--black-a8); } .dark { /* Remap your colors for dark mode */ --panel: var(--slate-2); --panel-contrast: var(--white-a9); --shadow: black; --overlay: var(--black-a11); } ``` -------------------------------- ### Define Multiple Aliases for the Same Color Step Source: https://www.radix-ui.com/colors/docs/overview/aliasing When a single color step serves multiple use cases, define multiple aliases pointing to the same color step. This example shows aliasing for solid backgrounds and placeholder text, as well as border hover and focus rings. ```css /* * Note: Importing from the CDN in production is not recommended. * It's intended for prototyping only. */ @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/gray.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red.css"; :root { --gray-solid: var(--gray-9); --gray-placeholder-text: var(--gray-9); --accent-border-hover: var(--blue-8); --accent-focus-ring: var(--blue-8); } ``` -------------------------------- ### Importing and Using Radix Colors in Vanilla CSS Source: https://www.radix-ui.com/colors/docs/overview/usage Import specific color scales as CSS files and use them as CSS variables. Light scales apply to :root, .light, and .light-theme, while dark scales apply to .dark and .dark-theme. ```css /* Import only the scales you need */ @import "@radix-ui/colors/gray.css"; @import "@radix-ui/colors/blue.css"; @import "@radix-ui/colors/green.css"; @import "@radix-ui/colors/red.css"; @import "@radix-ui/colors/gray-dark.css"; @import "@radix-ui/colors/blue-dark.css"; @import "@radix-ui/colors/green-dark.css"; @import "@radix-ui/colors/red-dark.css"; /* Use the colors as CSS variables */ .button { background-color: var(--blue-4); color: var(--blue-11); border-color: var(--blue-7); } .button:hover { background-color: var(--blue-5); border-color: var(--blue-8); } ``` ```html ``` -------------------------------- ### Using Radix Colors with emotion Source: https://www.radix-ui.com/colors/docs/overview/usage The usage with emotion is nearly identical to styled-components, with the primary difference being the import paths for ThemeProvider and styled. ```javascript import { gray, blue, red, green, grayDark, blueDark, redDark, greenDark } from "@radix-ui/colors"; import { ThemeProvider } from "@emotion/react"; import styled from "@emotion/styled"; ``` -------------------------------- ### Importing and Aliasing Color Scales Source: https://www.radix-ui.com/colors/docs/overview/aliasing Demonstrates how to import multiple color scales from the CDN and then alias them to new names using CSS variables. This is useful for simplifying naming or matching brand colors. ```css @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/slate.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/sky.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/grass.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/violet.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/crimson.css"; :root { --gray-1: var(--slate-1); --gray-2: var(--slate-2); --blue-1: var(--sky-1); --blue-2: var(--sky-2); --green-1: var(--grass-1); --green-2: var(--grass-2); --blurple-1: var(--violet-1); --blurple-2: var(--violet-2); --caribbean-sunset-1: var(--crimson-1); --caribbean-sunset-2: var(--crimson-2); } ``` -------------------------------- ### Define Aliases for Specific Use Cases Source: https://www.radix-ui.com/colors/docs/overview/aliasing Import color palettes and define CSS variables to alias specific color steps for distinct use cases like backgrounds, borders, and text. ```css /* * Note: Importing from the CDN in production is not recommended. * It's intended for prototyping only. */ @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red.css"; :root { --accent-base: var(--blue-1); --accent-bg-subtle: var(--blue-2); --accent-bg: var(--blue-3); --accent-bg-hover: var(--blue-4); --accent-bg-active: var(--blue-5); --accent-line: var(--blue-6); --accent-border: var(--blue-7); --accent-border-hover: var(--blue-8); --accent-solid: var(--blue-9); --accent-solid-hover: var(--blue-10); --accent-text: var(--blue-11); --accent-text-contrast: var(--blue-12); --success-base: var(--green-1); --success-bg-subtle: var(--green-2); /* repeat for all steps */ --warning-base: var(--yellow-1); --warning-bg-subtle: var(--yellow-2); /* repeat for all steps */ --danger-base: var(--red-1); --danger-bg-subtle: var(--red-2); /* repeat for all steps */ } ``` -------------------------------- ### Define Multiple Semantic Aliases for a Single Color Scale Source: https://www.radix-ui.com/colors/docs/overview/aliasing Import necessary color scales and define multiple semantic aliases (e.g., 'accent', 'info', 'success', 'valid') that map to the same underlying color scale. Note: CDN imports are not recommended for production. ```css /* * Note: Importing from the CDN in production is not recommended. * It's intended for prototyping only. */ @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css"; :root { --accent-1: var(--blue-1); --accent-2: var(--blue-2); --info-1: var(--blue-1); --info-2: var(--blue-2); --success-1: var(--green-1); --success-2: var(--green-2); --valid-1: var(--green-1); --valid-2: var(--green-2); --warning-1: var(--yellow-1); --warning-2: var(--yellow-2); --pending-1: var(--yellow-1); --pending-2: var(--yellow-2); } ``` -------------------------------- ### Pin Radix Colors CSS scales to a specific version from CDN Source: https://www.radix-ui.com/colors/docs/overview/installation Link to specific versions of Radix Colors CSS scales from the CDN to ensure consistent styling. This is an alternative to using the '@latest' tag. ```html ``` -------------------------------- ### Define Semantic Aliases for Colors Source: https://www.radix-ui.com/colors/docs/overview/aliasing Import color scales from CDN and define semantic aliases like 'accent', 'success', 'warning', and 'danger' using CSS variables. Note: CDN imports are not recommended for production. ```css /* * Note: Importing from the CDN in production is not recommended. * It's intended for prototyping only. */ @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css"; @import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red.css"; :root { --accent-1: var(--blue-1); --accent-2: var(--blue-2); --accent-3: var(--blue-3); --accent-4: var(--blue-4); --accent-5: var(--blue-5); --accent-6: var(--blue-6); --accent-7: var(--blue-7); --accent-8: var(--blue-8); --accent-9: var(--blue-9); --accent-10: var(--blue-10); --accent-11: var(--blue-11); --accent-12: var(--blue-12); --success-1: var(--green-1); --success-2: var(--green-2); /* repeat for all steps */ --warning-1: var(--yellow-1); --warning-2: var(--yellow-2); /* repeat for all steps */ --danger-1: var(--red-1); --danger-2: var(--red-2); /* repeat for all steps */ } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.