mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
chore: Migrate the main Tailwind JS config to CSS (#45686)
This PR migrates the JS config for Tailwind into a CSS config. As such, all variables have been defined as CSS variables and they're using the specialized Tailwind syntax for generating utility classes. Beside the migration, these changes were also added: - Added `tailwind.config.css` to few packages to make the Tailwind Intellisense work. - Migrated away from Radix style color classes to our defined classes, the values will remain the same. - Most of the CSS is generated by scripts, they'll be removed in next PRs. * Removed redundant `border-light` classes from several components since it was undefined. * Removed redundant `text-strong` classes from several components since it was undefined. How to test: - Open all apps, compare the UI (mainly colors) to builds from #45417 and try to find a difference. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Harmonized color variable usages and updated UI color references (affects palettes, charts, gradients, hero illustrations, and scrollbars). * Tweaked border, tab, and selection visuals across components. * **New Features** * Added a suite of theme animations and refined typography presets used by site prose and docs. * **Refactor** * Overhauled Tailwind/theme configuration and color token generation for more consistent theming. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Ivan Vasilov authored and GitHub committed
1 parent
d6d644ec24
commit
0abe792889
45 files changed
+2938
-1075
No files matched your search
@@ -56,11 +56,11 @@ const ColorPalette = () => {
|
||||
<div key={slug} className={`grid items-center gap-1 ${GRID_COLS}`}>
|
||||
<div className="pr-2 text-sm font-medium text-foreground">{name}</div>
|
||||
{SCALE_STEPS.map((step) => {
|
||||
const reference = `var(--colors-${slug}${step})`
|
||||
const reference = `var(--color-${slug}-${step * 100})`
|
||||
const isCopied = copied === reference
|
||||
return (
|
||||
<button
|
||||
key={step}
|
||||
key={step * 100}
|
||||
type="button"
|
||||
onClick={() => handleCopy(reference)}
|
||||
className="group relative flex aspect-square w-full items-center justify-center rounded-sm border border-overlay/40 transition hover:scale-[1.05] focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground"
|
||||
@@ -68,7 +68,7 @@ const ColorPalette = () => {
|
||||
title={reference}
|
||||
>
|
||||
<span className="rounded-xs bg-surface-100/90 px-1 font-mono text-[10px] text-foreground-light opacity-0 transition group-hover:opacity-100">
|
||||
{isCopied ? 'Copied!' : step}
|
||||
{isCopied ? 'Copied!' : step * 100}
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
|
||||
@@ -75,4 +75,6 @@ These can also be accessed with `foreground`. Like `text-foreground-light`.
|
||||
Every Radix scale exposed via `--colors-{name}{1..12}`. Click a swatch to copy the CSS variable reference. The colors are taken
|
||||
from `@radix-ui/colors` v0.1.9 except the `Brand` and `Scale` colors.
|
||||
|
||||
The `Brand` colors issue of not being uniform across the whole scale is known, they need to be refactored. The `brand-200` variable in the dark themes is also bad.
|
||||
|
||||
<ColorPalette />
|
||||
@@ -125,7 +125,7 @@ const CreditCard = ({
|
||||
</p>
|
||||
</div>
|
||||
{isSpt && spt && (
|
||||
<div className="mt-2.5 flex items-center gap-2 border-t border-border-light pt-2.5 text-xs text-foreground-light">
|
||||
<div className="mt-2.5 flex items-center gap-2 border-t pt-2.5 text-xs text-foreground-light">
|
||||
<p className="m-0">
|
||||
Managed via Stripe Projects · Token ending in{' '}
|
||||
<code className="text-code-inline">{spt.last4}</code>
|
||||
|
||||
@@ -175,7 +175,7 @@ export const ConnectionPanel = ({
|
||||
onCopyCallback={onCopyCallback}
|
||||
/>
|
||||
{notice && (
|
||||
<div className="border px-4 py-1 w-full justify-start rounded-t-none !last:rounded-b group-data-open:rounded-b-none border-light">
|
||||
<div className="border px-4 py-1 w-full justify-start rounded-t-none !last:rounded-b group-data-open:rounded-b-none">
|
||||
{notice?.map((text: string) => (
|
||||
<p key={text} className="text-xs text-foreground-lighter">
|
||||
{text}
|
||||
|
||||
@@ -27,7 +27,7 @@ export const ConnectionParameters = ({ parameters }: ConnectionParametersProps)
|
||||
<Collapsible_Shadcn_ open={isOpen} onOpenChange={setIsOpen} className="group -space-y-px">
|
||||
<CollapsibleTrigger_Shadcn_
|
||||
asChild
|
||||
className="w-full justify-start rounded-t-none !last:rounded-b group-data-open:rounded-b-none data-[state=open]:border-light border-light px-3"
|
||||
className="w-full justify-start rounded-t-none !last:rounded-b group-data-open:rounded-b-none px-3"
|
||||
>
|
||||
<Button
|
||||
type="default"
|
||||
|
||||
@@ -490,7 +490,7 @@ export const DatabaseConnectionString = () => {
|
||||
<Collapsible_Shadcn_ className="group">
|
||||
<CollapsibleTrigger_Shadcn_
|
||||
asChild
|
||||
className="w-full justify-start !last:rounded-b group-data-open:rounded-b-none border-light px-3"
|
||||
className="w-full justify-start !last:rounded-b group-data-open:rounded-b-none px-3"
|
||||
>
|
||||
<Button
|
||||
type="default"
|
||||
|
||||
@@ -11,7 +11,7 @@ export const ActionCard = (card: {
|
||||
}) => {
|
||||
return (
|
||||
<Card
|
||||
className="grow bg-surface-100 p-3 transition-colors hover:bg-surface-200 border border-light hover:border-default cursor-pointer"
|
||||
className="grow bg-surface-100 p-3 transition-colors hover:bg-surface-200 border hover:border-default cursor-pointer"
|
||||
onClick={card.onClick}
|
||||
>
|
||||
<div className={`relative flex items-start gap-3`}>
|
||||
|
||||
@@ -13,7 +13,7 @@ export const ActionCard = (card: {
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
'grow bg-surface-100 p-3 transition-colors hover:bg-surface-200 border border-light hover:border-default cursor-pointer',
|
||||
'grow bg-surface-100 p-3 transition-colors hover:bg-surface-200 border hover:border-default cursor-pointer',
|
||||
card.className
|
||||
)}
|
||||
onClick={card.onClick}
|
||||
|
||||
@@ -81,17 +81,14 @@ export type ValidStackColor =
|
||||
|
||||
export const genStackColorScales = (colors: ValidStackColor[]) =>
|
||||
colors.map((color) => {
|
||||
// override default base scale for certain colors that do not have good contrast
|
||||
const scale =
|
||||
(
|
||||
{
|
||||
slate: 11,
|
||||
} as any
|
||||
)[color] ?? 9
|
||||
let scale = 9
|
||||
if (color === 'slate') {
|
||||
scale = 11
|
||||
}
|
||||
return {
|
||||
lighter: `var(--colors-${color}${(scale as number) - 1})`,
|
||||
base: `var(--colors-${color}${scale})`,
|
||||
darker: `var(--colors-${color}${(scale as number) + 1})`,
|
||||
lighter: `var(--color-${color}-${(scale as number) - 1}00)`,
|
||||
base: `var(--color-${color}-${scale * 100})`,
|
||||
darker: `var(--color-${color}-${(scale as number) + 1}00)`,
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -397,7 +397,7 @@
|
||||
background: hsl(var(--foreground-muted));
|
||||
|
||||
.dark & {
|
||||
-webkit-box-shadow: inset 0 0 6px var(--colors-slate12);
|
||||
-webkit-box-shadow: inset 0 0 6px var(--color-slate-1200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
'use client'
|
||||
|
||||
import { Tabs } from 'ui'
|
||||
import { useState } from 'react'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import { Bar, BarChart, Legend, ResponsiveContainer, XAxis, YAxis } from 'recharts'
|
||||
import * as data from '~/data/blog/PostgresFTSComparison'
|
||||
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import { Tabs } from 'ui'
|
||||
|
||||
import * as data from '@/data/blog/PostgresFTSComparison'
|
||||
|
||||
const barColors = {
|
||||
pg: 'hsl(var(--brand-600))',
|
||||
meilisearch: 'var(--colors-blue11)',
|
||||
typesense: 'var(--colors-violet11)',
|
||||
'sqlite-disk': 'var(--colors-orange11)',
|
||||
'sqlite-mem': 'var(--colors-yellow11)',
|
||||
opensearch: 'var(--colors-tomato11)',
|
||||
meilisearch: 'var(--color-blue-1100)',
|
||||
typesense: 'var(--color-violet-1100)',
|
||||
'sqlite-disk': 'var(--color-orange-1100)',
|
||||
'sqlite-mem': 'var(--color-yellow-1100)',
|
||||
opensearch: 'var(--color-tomato-1100)',
|
||||
}
|
||||
|
||||
const dimensions = ['pg', 'meilisearch', 'typesense', 'sqlite-disk', 'sqlite-mem', 'opensearch']
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { useWindowSize } from 'react-use'
|
||||
import { useBreakpoint } from 'common'
|
||||
import { motion } from 'framer-motion'
|
||||
import { useTheme } from 'next-themes'
|
||||
import React from 'react'
|
||||
import { useWindowSize } from 'react-use'
|
||||
import { cn } from 'ui'
|
||||
|
||||
import styles from './hero.module.css'
|
||||
@@ -152,7 +152,7 @@ const HeroGrid = () => {
|
||||
>
|
||||
<stop stopColor={svgGridOptions.color} stopOpacity="0" />
|
||||
<stop stopColor={svgGridOptions.color} stopOpacity="0.8" />
|
||||
<stop offset="1" stopColor="var(--colors-brand9)" stopOpacity="0" />
|
||||
<stop offset="1" stopColor="var(--color-brand-900)" stopOpacity="0" />
|
||||
</motion.linearGradient>
|
||||
<motion.linearGradient
|
||||
animate={{
|
||||
@@ -172,7 +172,7 @@ const HeroGrid = () => {
|
||||
>
|
||||
<stop stopColor={svgGridOptions.color} stopOpacity="0" />
|
||||
<stop stopColor={svgGridOptions.color} stopOpacity="0.8" />
|
||||
<stop offset="1" stopColor="var(--colors-brand9)" stopOpacity="0" />
|
||||
<stop offset="1" stopColor="var(--color-brand-900)" stopOpacity="0" />
|
||||
</motion.linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { AnimatePresence } from 'framer-motion'
|
||||
import { Pencil, Users, Users2 } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||
import { cn } from 'ui'
|
||||
import { LogoLoader } from 'ui'
|
||||
import { cn, LogoLoader } from 'ui'
|
||||
|
||||
import RepoCard from './RepoCard'
|
||||
import { Pencil, Users, Users2 } from 'lucide-react'
|
||||
|
||||
interface TabProps {
|
||||
label: string
|
||||
@@ -19,9 +18,7 @@ const Tab = ({ isActive, label, icon, onClick }: TabProps) => (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={`rounded-full px-4 md:px-3 py-2 md:py-1 nowrap flex group gap-1 transition-all ${
|
||||
isActive
|
||||
? 'text-strong bg-surface-300'
|
||||
: 'text-foreground-lighter bg-surface-200 hover:bg-overlay-hover'
|
||||
isActive ? 'bg-surface-300' : 'text-foreground-lighter bg-surface-200 hover:bg-overlay-hover'
|
||||
}`}
|
||||
aria-selected={isActive}
|
||||
role="tab"
|
||||
|
||||
@@ -53,7 +53,7 @@ const Panel = ({
|
||||
const activeGlow =
|
||||
hasActiveOnHover && isActive
|
||||
? `radial-gradient(65rem circle at ${x}px ${y}px, ${
|
||||
activeColor === 'brand' ? 'var(--colors-brand9)' : 'hsl(var(--border-stronger))'
|
||||
activeColor === 'brand' ? 'var(--color-brand-900)' : 'hsl(var(--border-stronger))'
|
||||
}, transparent), `
|
||||
: ''
|
||||
outerElement.style.backgroundImage = `
|
||||
|
||||
@@ -112,11 +112,11 @@ function RealtimePage() {
|
||||
</p>
|
||||
</div>
|
||||
<Cursor
|
||||
color="var(--colors-yellow9)"
|
||||
color="var(--color-yellow-900)"
|
||||
className={`${RealtimeStyles['cursor-one']} absolute top-[220px] right-[130px]`}
|
||||
/>
|
||||
<Cursor
|
||||
color="var(--colors-indigo9)"
|
||||
color="var(--color-indigo-900)"
|
||||
className={`${RealtimeStyles['cursor-two']} absolute top-[180px] right-[280px]`}
|
||||
/>
|
||||
<div
|
||||
@@ -129,7 +129,7 @@ function RealtimePage() {
|
||||
<p className="text-lg">🤔</p>
|
||||
</div>
|
||||
<Cursor
|
||||
color="var(--colors-tomato9)"
|
||||
color="var(--color-tomato-900)"
|
||||
className={`${RealtimeStyles['cursor-three']} absolute top-[170px] right-[180px]`}
|
||||
/>
|
||||
<div
|
||||
|
||||
@@ -458,7 +458,8 @@ launch week
|
||||
*/
|
||||
|
||||
.launch-week-timeline-border--approaching {
|
||||
border-image: linear-gradient(to bottom, hsl(var(--brand-default)), var(--colors-purple7)) 1 100%;
|
||||
border-image: linear-gradient(to bottom, hsl(var(--brand-default)), var(--color-purple-700)) 1
|
||||
100%;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
@@ -759,7 +760,7 @@ launch week
|
||||
);
|
||||
}
|
||||
.gradient-text-100 {
|
||||
background-image: -webkit-linear-gradient(45deg, #fff 0%, var(--colors-green12) 100%);
|
||||
background-image: -webkit-linear-gradient(45deg, #fff 0%, var(--color-green-1200) 100%);
|
||||
}
|
||||
|
||||
.gradient-text-500 {
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
/* Placeholder so the VS Code Tailwind extension picks up IntelliSense in this
|
||||
* package. Apps own their actual entry CSS file; this file just anchors the
|
||||
* shared config for editor tooling. */
|
||||
@import 'config/tailwind.config.css';
|
||||
@@ -1 +0,0 @@
|
||||
// Placeholder so that VSCode tailwind extension enables intellisense in this project
|
||||
@@ -0,0 +1,298 @@
|
||||
/*
|
||||
* Tailwind v4 animation tokens + the @keyframes they reference.
|
||||
*
|
||||
* Each --animate-* token in @theme generates an `animate-{name}` utility.
|
||||
* Keyframes live outside @theme since they're @-rules, not design tokens.
|
||||
*
|
||||
* Migrated from packages/config/ui.config.js (theme.extend.keyframes /
|
||||
* theme.extend.animation) and packages/config/tailwind.config.js
|
||||
* (theme.extend.keyframes / theme.extend.animation).
|
||||
*/
|
||||
|
||||
@theme {
|
||||
--animate-fade-in: fadeIn 300ms both;
|
||||
--animate-fade-out: fadeOut 300ms both;
|
||||
|
||||
/* may be unused — verify before pruning */
|
||||
--animate-dropdown-content-show: overlayContentShow 100ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
/* may be unused — verify before pruning */
|
||||
--animate-dropdown-content-hide: overlayContentHide 100ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
|
||||
--animate-overlay-show: overlayContentShow 300ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--animate-overlay-hide: overlayContentHide 300ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
|
||||
/* may be unused — verify before pruning */
|
||||
--animate-fade-in-overlay-bg: fadeInOverlayBg 300ms;
|
||||
/* may be unused — verify before pruning */
|
||||
--animate-fade-out-overlay-bg: fadeOutOverlayBg 300ms;
|
||||
|
||||
--animate-slide-down: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
|
||||
--animate-slide-up: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
|
||||
|
||||
--animate-slide-down-normal: slideDownNormal 300ms cubic-bezier(0.87, 0, 0.13, 1);
|
||||
--animate-slide-up-normal: slideUpNormal 300ms cubic-bezier(0.87, 0, 0.13, 1);
|
||||
|
||||
/* may be unused — verify before pruning */
|
||||
--animate-panel-slide-left-out: panelSlideLeftOut 200ms cubic-bezier(0.87, 0, 0.13, 1);
|
||||
/* may be unused — verify before pruning */
|
||||
--animate-panel-slide-left-in: panelSlideLeftIn 250ms cubic-bezier(0.87, 0, 0.13, 1);
|
||||
/* may be unused — verify before pruning */
|
||||
--animate-panel-slide-right-out: panelSlideRightOut 200ms cubic-bezier(0.87, 0, 0.13, 1);
|
||||
/* may be unused — verify before pruning */
|
||||
--animate-panel-slide-right-in: panelSlideRightIn 250ms cubic-bezier(0.87, 0, 0.13, 1);
|
||||
|
||||
--animate-line-loading: lineLoading 1.8s infinite;
|
||||
--animate-line-loading-slower: lineLoading 2.3s infinite;
|
||||
|
||||
/* may be unused — verify before pruning */
|
||||
--animate-dropdownFadeIn: dropdownFadeIn 0.1s ease-out;
|
||||
/* may be unused — verify before pruning */
|
||||
--animate-dropdownFadeOut: dropdownFadeOut 0.1s ease-out;
|
||||
|
||||
--animate-flash-code: flash-code 1s forwards;
|
||||
--animate-flash-code-slow: flash-code 2s forwards;
|
||||
|
||||
--animate-accordion-down: accordion-down 0.15s ease-out;
|
||||
--animate-accordion-up: accordion-up 0.15s ease-out;
|
||||
|
||||
--animate-collapsible-down: collapsible-down 0.1s ease-out;
|
||||
--animate-collapsible-up: collapsible-up 0.1s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes overlayContentShow {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(0%, -2%) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(0%, 0%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes overlayContentHide {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate(0%, 0%) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(0%, -2%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropdownFadeIn {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropdownFadeOut {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInOverlayBg {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOutOverlayBg {
|
||||
0% {
|
||||
opacity: 0.75;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
0% {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
height: var(--radix-accordion-content-height);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
height: var(--radix-accordion-content-height);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDownNormal {
|
||||
0% {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
height: inherit;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUpNormal {
|
||||
0% {
|
||||
height: inherit;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes panelSlideLeftOut {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes panelSlideLeftIn {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes panelSlideRightOut {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes panelSlideRightIn {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lineLoading {
|
||||
0% {
|
||||
margin-left: -10%;
|
||||
width: 80px;
|
||||
}
|
||||
25% {
|
||||
width: 240px;
|
||||
}
|
||||
50% {
|
||||
margin-left: 100%;
|
||||
width: 80px;
|
||||
}
|
||||
75% {
|
||||
width: 240px;
|
||||
}
|
||||
100% {
|
||||
margin-left: -10%;
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flash-code {
|
||||
0% {
|
||||
background-color: rgba(63, 207, 142, 0.1);
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes accordion-down {
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes accordion-up {
|
||||
from {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
to {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes collapsible-down {
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: var(--radix-collapsible-content-height);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes collapsible-up {
|
||||
from {
|
||||
height: var(--radix-collapsible-content-height);
|
||||
}
|
||||
to {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
/*
|
||||
* Base layer rules migrated from packages/config/ui.config.js addBase calls.
|
||||
*
|
||||
* Hides the spinner buttons on number inputs across browsers (WebKit + Firefox).
|
||||
*/
|
||||
|
||||
@layer base {
|
||||
input[type='number']::-webkit-outer-spin-button,
|
||||
input[type='number']::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
/*
|
||||
* Hard-coded brand color scale (light theme in :root, dark in [data-theme*='dark']).
|
||||
*
|
||||
* Mirrors the CSS variables that the legacy @mertasan/tailwindcss-variables
|
||||
* plugin used to emit from default-colors.js's brand/brandDark/contrast
|
||||
* entries. Values are HSLA literals; the contrast aliases reference the
|
||||
* semantic --brand-default / --brand-300 tokens defined by the theme files.
|
||||
*
|
||||
* Consumed by colors.css / theme.css through --color-brand-{100,700..1200}
|
||||
* tokens (the 200..600 steps are intentionally skipped — they belong to the
|
||||
* semantic brand-* tokens sourced from light.css / dark.css).
|
||||
*/
|
||||
|
||||
:root {
|
||||
--colors-brand1: hsla(153, 80%, 99%, 1);
|
||||
--colors-brand2: hsla(148, 88%, 97%, 1);
|
||||
--colors-brand3: hsla(148, 76%, 95%, 1);
|
||||
--colors-brand4: hsla(148, 68%, 92%, 1);
|
||||
--colors-brand5: hsla(148, 59%, 88%, 1);
|
||||
--colors-brand6: hsla(149, 43%, 82%, 1);
|
||||
--colors-brand7: hsla(149, 43%, 69%, 1);
|
||||
--colors-brand8: hsla(154, 55%, 45%, 1);
|
||||
--colors-brand9: hsla(153, 60%, 53%, 1);
|
||||
--colors-brand10: hsla(153, 50%, 50%, 1);
|
||||
--colors-brand11: hsla(153, 50%, 34%, 1);
|
||||
--colors-brand12: hsla(153, 40%, 12%, 1);
|
||||
--colors-brand-hiContrast: hsl(var(--brand-default));
|
||||
--colors-brand-loContrast: hsl(var(--brand-300));
|
||||
}
|
||||
|
||||
[data-theme*='dark'] {
|
||||
--colors-brand1: hsla(153, 75%, 6%, 1);
|
||||
--colors-brand2: hsla(153, 73%, 7%, 1);
|
||||
--colors-brand3: hsla(154, 69%, 9%, 1);
|
||||
--colors-brand4: hsla(154, 67%, 11%, 1);
|
||||
--colors-brand5: hsla(154, 66%, 13%, 1);
|
||||
--colors-brand6: hsla(154, 64%, 17%, 1);
|
||||
--colors-brand7: hsla(154, 62%, 22%, 1);
|
||||
--colors-brand8: hsla(153, 60%, 28%, 1);
|
||||
--colors-brand9: hsla(153, 60%, 53%, 1);
|
||||
--colors-brand10: hsla(153, 60%, 70%, 1);
|
||||
--colors-brand11: hsla(153, 60%, 50%, 1);
|
||||
--colors-brand12: hsla(153, 60%, 95%, 1);
|
||||
}
|
||||
@@ -0,0 +1,432 @@
|
||||
/*
|
||||
* Auto-generated by scripts/generate-colors.js — do not edit by hand.
|
||||
* Run `node scripts/generate-colors.js` from packages/config/ to refresh.
|
||||
*
|
||||
* Declares the Radix/scale --color-* CSS variables in :root, each forwarding
|
||||
* to its underlying --colors-{hue}{n} source (defined in radix-vars.css)
|
||||
* which switches between light/dark themes. theme.css references these
|
||||
* variables from its @theme inline block.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--color-amber-100: var(--colors-amber1);
|
||||
--color-amberA-100: var(--colors-amberA1);
|
||||
--color-amber-200: var(--colors-amber2);
|
||||
--color-amberA-200: var(--colors-amberA2);
|
||||
--color-amber-300: var(--colors-amber3);
|
||||
--color-amberA-300: var(--colors-amberA3);
|
||||
--color-amber-400: var(--colors-amber4);
|
||||
--color-amberA-400: var(--colors-amberA4);
|
||||
--color-amber-500: var(--colors-amber5);
|
||||
--color-amberA-500: var(--colors-amberA5);
|
||||
--color-amber-600: var(--colors-amber6);
|
||||
--color-amberA-600: var(--colors-amberA6);
|
||||
--color-amber-700: var(--colors-amber7);
|
||||
--color-amberA-700: var(--colors-amberA7);
|
||||
--color-amber-800: var(--colors-amber8);
|
||||
--color-amberA-800: var(--colors-amberA8);
|
||||
--color-amber-900: var(--colors-amber9);
|
||||
--color-amberA-900: var(--colors-amberA9);
|
||||
--color-amber-1000: var(--colors-amber10);
|
||||
--color-amberA-1000: var(--colors-amberA10);
|
||||
--color-amber-1100: var(--colors-amber11);
|
||||
--color-amberA-1100: var(--colors-amberA11);
|
||||
--color-amber-1200: var(--colors-amber12);
|
||||
--color-amberA-1200: var(--colors-amberA12);
|
||||
--color-blue-100: var(--colors-blue1);
|
||||
--color-blueA-100: var(--colors-blueA1);
|
||||
--color-blue-200: var(--colors-blue2);
|
||||
--color-blueA-200: var(--colors-blueA2);
|
||||
--color-blue-300: var(--colors-blue3);
|
||||
--color-blueA-300: var(--colors-blueA3);
|
||||
--color-blue-400: var(--colors-blue4);
|
||||
--color-blueA-400: var(--colors-blueA4);
|
||||
--color-blue-500: var(--colors-blue5);
|
||||
--color-blueA-500: var(--colors-blueA5);
|
||||
--color-blue-600: var(--colors-blue6);
|
||||
--color-blueA-600: var(--colors-blueA6);
|
||||
--color-blue-700: var(--colors-blue7);
|
||||
--color-blueA-700: var(--colors-blueA7);
|
||||
--color-blue-800: var(--colors-blue8);
|
||||
--color-blueA-800: var(--colors-blueA8);
|
||||
--color-blue-900: var(--colors-blue9);
|
||||
--color-blueA-900: var(--colors-blueA9);
|
||||
--color-blue-1000: var(--colors-blue10);
|
||||
--color-blueA-1000: var(--colors-blueA10);
|
||||
--color-blue-1100: var(--colors-blue11);
|
||||
--color-blueA-1100: var(--colors-blueA11);
|
||||
--color-blue-1200: var(--colors-blue12);
|
||||
--color-blueA-1200: var(--colors-blueA12);
|
||||
--color-crimson-100: var(--colors-crimson1);
|
||||
--color-crimsonA-100: var(--colors-crimsonA1);
|
||||
--color-crimson-200: var(--colors-crimson2);
|
||||
--color-crimsonA-200: var(--colors-crimsonA2);
|
||||
--color-crimson-300: var(--colors-crimson3);
|
||||
--color-crimsonA-300: var(--colors-crimsonA3);
|
||||
--color-crimson-400: var(--colors-crimson4);
|
||||
--color-crimsonA-400: var(--colors-crimsonA4);
|
||||
--color-crimson-500: var(--colors-crimson5);
|
||||
--color-crimsonA-500: var(--colors-crimsonA5);
|
||||
--color-crimson-600: var(--colors-crimson6);
|
||||
--color-crimsonA-600: var(--colors-crimsonA6);
|
||||
--color-crimson-700: var(--colors-crimson7);
|
||||
--color-crimsonA-700: var(--colors-crimsonA7);
|
||||
--color-crimson-800: var(--colors-crimson8);
|
||||
--color-crimsonA-800: var(--colors-crimsonA8);
|
||||
--color-crimson-900: var(--colors-crimson9);
|
||||
--color-crimsonA-900: var(--colors-crimsonA9);
|
||||
--color-crimson-1000: var(--colors-crimson10);
|
||||
--color-crimsonA-1000: var(--colors-crimsonA10);
|
||||
--color-crimson-1100: var(--colors-crimson11);
|
||||
--color-crimsonA-1100: var(--colors-crimsonA11);
|
||||
--color-crimson-1200: var(--colors-crimson12);
|
||||
--color-crimsonA-1200: var(--colors-crimsonA12);
|
||||
--color-gold-100: var(--colors-gold1);
|
||||
--color-goldA-100: var(--colors-goldA1);
|
||||
--color-gold-200: var(--colors-gold2);
|
||||
--color-goldA-200: var(--colors-goldA2);
|
||||
--color-gold-300: var(--colors-gold3);
|
||||
--color-goldA-300: var(--colors-goldA3);
|
||||
--color-gold-400: var(--colors-gold4);
|
||||
--color-goldA-400: var(--colors-goldA4);
|
||||
--color-gold-500: var(--colors-gold5);
|
||||
--color-goldA-500: var(--colors-goldA5);
|
||||
--color-gold-600: var(--colors-gold6);
|
||||
--color-goldA-600: var(--colors-goldA6);
|
||||
--color-gold-700: var(--colors-gold7);
|
||||
--color-goldA-700: var(--colors-goldA7);
|
||||
--color-gold-800: var(--colors-gold8);
|
||||
--color-goldA-800: var(--colors-goldA8);
|
||||
--color-gold-900: var(--colors-gold9);
|
||||
--color-goldA-900: var(--colors-goldA9);
|
||||
--color-gold-1000: var(--colors-gold10);
|
||||
--color-goldA-1000: var(--colors-goldA10);
|
||||
--color-gold-1100: var(--colors-gold11);
|
||||
--color-goldA-1100: var(--colors-goldA11);
|
||||
--color-gold-1200: var(--colors-gold12);
|
||||
--color-goldA-1200: var(--colors-goldA12);
|
||||
--color-gray-100: var(--colors-gray1);
|
||||
--color-grayA-100: var(--colors-grayA1);
|
||||
--color-gray-200: var(--colors-gray2);
|
||||
--color-grayA-200: var(--colors-grayA2);
|
||||
--color-gray-300: var(--colors-gray3);
|
||||
--color-grayA-300: var(--colors-grayA3);
|
||||
--color-gray-400: var(--colors-gray4);
|
||||
--color-grayA-400: var(--colors-grayA4);
|
||||
--color-gray-500: var(--colors-gray5);
|
||||
--color-grayA-500: var(--colors-grayA5);
|
||||
--color-gray-600: var(--colors-gray6);
|
||||
--color-grayA-600: var(--colors-grayA6);
|
||||
--color-gray-700: var(--colors-gray7);
|
||||
--color-grayA-700: var(--colors-grayA7);
|
||||
--color-gray-800: var(--colors-gray8);
|
||||
--color-grayA-800: var(--colors-grayA8);
|
||||
--color-gray-900: var(--colors-gray9);
|
||||
--color-grayA-900: var(--colors-grayA9);
|
||||
--color-gray-1000: var(--colors-gray10);
|
||||
--color-grayA-1000: var(--colors-grayA10);
|
||||
--color-gray-1100: var(--colors-gray11);
|
||||
--color-grayA-1100: var(--colors-grayA11);
|
||||
--color-gray-1200: var(--colors-gray12);
|
||||
--color-grayA-1200: var(--colors-grayA12);
|
||||
--color-green-100: var(--colors-green1);
|
||||
--color-greenA-100: var(--colors-greenA1);
|
||||
--color-green-200: var(--colors-green2);
|
||||
--color-greenA-200: var(--colors-greenA2);
|
||||
--color-green-300: var(--colors-green3);
|
||||
--color-greenA-300: var(--colors-greenA3);
|
||||
--color-green-400: var(--colors-green4);
|
||||
--color-greenA-400: var(--colors-greenA4);
|
||||
--color-green-500: var(--colors-green5);
|
||||
--color-greenA-500: var(--colors-greenA5);
|
||||
--color-green-600: var(--colors-green6);
|
||||
--color-greenA-600: var(--colors-greenA6);
|
||||
--color-green-700: var(--colors-green7);
|
||||
--color-greenA-700: var(--colors-greenA7);
|
||||
--color-green-800: var(--colors-green8);
|
||||
--color-greenA-800: var(--colors-greenA8);
|
||||
--color-green-900: var(--colors-green9);
|
||||
--color-greenA-900: var(--colors-greenA9);
|
||||
--color-green-1000: var(--colors-green10);
|
||||
--color-greenA-1000: var(--colors-greenA10);
|
||||
--color-green-1100: var(--colors-green11);
|
||||
--color-greenA-1100: var(--colors-greenA11);
|
||||
--color-green-1200: var(--colors-green12);
|
||||
--color-greenA-1200: var(--colors-greenA12);
|
||||
--color-indigo-100: var(--colors-indigo1);
|
||||
--color-indigoA-100: var(--colors-indigoA1);
|
||||
--color-indigo-200: var(--colors-indigo2);
|
||||
--color-indigoA-200: var(--colors-indigoA2);
|
||||
--color-indigo-300: var(--colors-indigo3);
|
||||
--color-indigoA-300: var(--colors-indigoA3);
|
||||
--color-indigo-400: var(--colors-indigo4);
|
||||
--color-indigoA-400: var(--colors-indigoA4);
|
||||
--color-indigo-500: var(--colors-indigo5);
|
||||
--color-indigoA-500: var(--colors-indigoA5);
|
||||
--color-indigo-600: var(--colors-indigo6);
|
||||
--color-indigoA-600: var(--colors-indigoA6);
|
||||
--color-indigo-700: var(--colors-indigo7);
|
||||
--color-indigoA-700: var(--colors-indigoA7);
|
||||
--color-indigo-800: var(--colors-indigo8);
|
||||
--color-indigoA-800: var(--colors-indigoA8);
|
||||
--color-indigo-900: var(--colors-indigo9);
|
||||
--color-indigoA-900: var(--colors-indigoA9);
|
||||
--color-indigo-1000: var(--colors-indigo10);
|
||||
--color-indigoA-1000: var(--colors-indigoA10);
|
||||
--color-indigo-1100: var(--colors-indigo11);
|
||||
--color-indigoA-1100: var(--colors-indigoA11);
|
||||
--color-indigo-1200: var(--colors-indigo12);
|
||||
--color-indigoA-1200: var(--colors-indigoA12);
|
||||
--color-orange-100: var(--colors-orange1);
|
||||
--color-orangeA-100: var(--colors-orangeA1);
|
||||
--color-orange-200: var(--colors-orange2);
|
||||
--color-orangeA-200: var(--colors-orangeA2);
|
||||
--color-orange-300: var(--colors-orange3);
|
||||
--color-orangeA-300: var(--colors-orangeA3);
|
||||
--color-orange-400: var(--colors-orange4);
|
||||
--color-orangeA-400: var(--colors-orangeA4);
|
||||
--color-orange-500: var(--colors-orange5);
|
||||
--color-orangeA-500: var(--colors-orangeA5);
|
||||
--color-orange-600: var(--colors-orange6);
|
||||
--color-orangeA-600: var(--colors-orangeA6);
|
||||
--color-orange-700: var(--colors-orange7);
|
||||
--color-orangeA-700: var(--colors-orangeA7);
|
||||
--color-orange-800: var(--colors-orange8);
|
||||
--color-orangeA-800: var(--colors-orangeA8);
|
||||
--color-orange-900: var(--colors-orange9);
|
||||
--color-orangeA-900: var(--colors-orangeA9);
|
||||
--color-orange-1000: var(--colors-orange10);
|
||||
--color-orangeA-1000: var(--colors-orangeA10);
|
||||
--color-orange-1100: var(--colors-orange11);
|
||||
--color-orangeA-1100: var(--colors-orangeA11);
|
||||
--color-orange-1200: var(--colors-orange12);
|
||||
--color-orangeA-1200: var(--colors-orangeA12);
|
||||
--color-pink-100: var(--colors-pink1);
|
||||
--color-pinkA-100: var(--colors-pinkA1);
|
||||
--color-pink-200: var(--colors-pink2);
|
||||
--color-pinkA-200: var(--colors-pinkA2);
|
||||
--color-pink-300: var(--colors-pink3);
|
||||
--color-pinkA-300: var(--colors-pinkA3);
|
||||
--color-pink-400: var(--colors-pink4);
|
||||
--color-pinkA-400: var(--colors-pinkA4);
|
||||
--color-pink-500: var(--colors-pink5);
|
||||
--color-pinkA-500: var(--colors-pinkA5);
|
||||
--color-pink-600: var(--colors-pink6);
|
||||
--color-pinkA-600: var(--colors-pinkA6);
|
||||
--color-pink-700: var(--colors-pink7);
|
||||
--color-pinkA-700: var(--colors-pinkA7);
|
||||
--color-pink-800: var(--colors-pink8);
|
||||
--color-pinkA-800: var(--colors-pinkA8);
|
||||
--color-pink-900: var(--colors-pink9);
|
||||
--color-pinkA-900: var(--colors-pinkA9);
|
||||
--color-pink-1000: var(--colors-pink10);
|
||||
--color-pinkA-1000: var(--colors-pinkA10);
|
||||
--color-pink-1100: var(--colors-pink11);
|
||||
--color-pinkA-1100: var(--colors-pinkA11);
|
||||
--color-pink-1200: var(--colors-pink12);
|
||||
--color-pinkA-1200: var(--colors-pinkA12);
|
||||
--color-purple-100: var(--colors-purple1);
|
||||
--color-purpleA-100: var(--colors-purpleA1);
|
||||
--color-purple-200: var(--colors-purple2);
|
||||
--color-purpleA-200: var(--colors-purpleA2);
|
||||
--color-purple-300: var(--colors-purple3);
|
||||
--color-purpleA-300: var(--colors-purpleA3);
|
||||
--color-purple-400: var(--colors-purple4);
|
||||
--color-purpleA-400: var(--colors-purpleA4);
|
||||
--color-purple-500: var(--colors-purple5);
|
||||
--color-purpleA-500: var(--colors-purpleA5);
|
||||
--color-purple-600: var(--colors-purple6);
|
||||
--color-purpleA-600: var(--colors-purpleA6);
|
||||
--color-purple-700: var(--colors-purple7);
|
||||
--color-purpleA-700: var(--colors-purpleA7);
|
||||
--color-purple-800: var(--colors-purple8);
|
||||
--color-purpleA-800: var(--colors-purpleA8);
|
||||
--color-purple-900: var(--colors-purple9);
|
||||
--color-purpleA-900: var(--colors-purpleA9);
|
||||
--color-purple-1000: var(--colors-purple10);
|
||||
--color-purpleA-1000: var(--colors-purpleA10);
|
||||
--color-purple-1100: var(--colors-purple11);
|
||||
--color-purpleA-1100: var(--colors-purpleA11);
|
||||
--color-purple-1200: var(--colors-purple12);
|
||||
--color-purpleA-1200: var(--colors-purpleA12);
|
||||
--color-red-100: var(--colors-red1);
|
||||
--color-redA-100: var(--colors-redA1);
|
||||
--color-red-200: var(--colors-red2);
|
||||
--color-redA-200: var(--colors-redA2);
|
||||
--color-red-300: var(--colors-red3);
|
||||
--color-redA-300: var(--colors-redA3);
|
||||
--color-red-400: var(--colors-red4);
|
||||
--color-redA-400: var(--colors-redA4);
|
||||
--color-red-500: var(--colors-red5);
|
||||
--color-redA-500: var(--colors-redA5);
|
||||
--color-red-600: var(--colors-red6);
|
||||
--color-redA-600: var(--colors-redA6);
|
||||
--color-red-700: var(--colors-red7);
|
||||
--color-redA-700: var(--colors-redA7);
|
||||
--color-red-800: var(--colors-red8);
|
||||
--color-redA-800: var(--colors-redA8);
|
||||
--color-red-900: var(--colors-red9);
|
||||
--color-redA-900: var(--colors-redA9);
|
||||
--color-red-1000: var(--colors-red10);
|
||||
--color-redA-1000: var(--colors-redA10);
|
||||
--color-red-1100: var(--colors-red11);
|
||||
--color-redA-1100: var(--colors-redA11);
|
||||
--color-red-1200: var(--colors-red12);
|
||||
--color-redA-1200: var(--colors-redA12);
|
||||
--color-slate-100: var(--colors-slate1);
|
||||
--color-slateA-100: var(--colors-slateA1);
|
||||
--color-slate-200: var(--colors-slate2);
|
||||
--color-slateA-200: var(--colors-slateA2);
|
||||
--color-slate-300: var(--colors-slate3);
|
||||
--color-slateA-300: var(--colors-slateA3);
|
||||
--color-slate-400: var(--colors-slate4);
|
||||
--color-slateA-400: var(--colors-slateA4);
|
||||
--color-slate-500: var(--colors-slate5);
|
||||
--color-slateA-500: var(--colors-slateA5);
|
||||
--color-slate-600: var(--colors-slate6);
|
||||
--color-slateA-600: var(--colors-slateA6);
|
||||
--color-slate-700: var(--colors-slate7);
|
||||
--color-slateA-700: var(--colors-slateA7);
|
||||
--color-slate-800: var(--colors-slate8);
|
||||
--color-slateA-800: var(--colors-slateA8);
|
||||
--color-slate-900: var(--colors-slate9);
|
||||
--color-slateA-900: var(--colors-slateA9);
|
||||
--color-slate-1000: var(--colors-slate10);
|
||||
--color-slateA-1000: var(--colors-slateA10);
|
||||
--color-slate-1100: var(--colors-slate11);
|
||||
--color-slateA-1100: var(--colors-slateA11);
|
||||
--color-slate-1200: var(--colors-slate12);
|
||||
--color-slateA-1200: var(--colors-slateA12);
|
||||
--color-tomato-100: var(--colors-tomato1);
|
||||
--color-tomatoA-100: var(--colors-tomatoA1);
|
||||
--color-tomato-200: var(--colors-tomato2);
|
||||
--color-tomatoA-200: var(--colors-tomatoA2);
|
||||
--color-tomato-300: var(--colors-tomato3);
|
||||
--color-tomatoA-300: var(--colors-tomatoA3);
|
||||
--color-tomato-400: var(--colors-tomato4);
|
||||
--color-tomatoA-400: var(--colors-tomatoA4);
|
||||
--color-tomato-500: var(--colors-tomato5);
|
||||
--color-tomatoA-500: var(--colors-tomatoA5);
|
||||
--color-tomato-600: var(--colors-tomato6);
|
||||
--color-tomatoA-600: var(--colors-tomatoA6);
|
||||
--color-tomato-700: var(--colors-tomato7);
|
||||
--color-tomatoA-700: var(--colors-tomatoA7);
|
||||
--color-tomato-800: var(--colors-tomato8);
|
||||
--color-tomatoA-800: var(--colors-tomatoA8);
|
||||
--color-tomato-900: var(--colors-tomato9);
|
||||
--color-tomatoA-900: var(--colors-tomatoA9);
|
||||
--color-tomato-1000: var(--colors-tomato10);
|
||||
--color-tomatoA-1000: var(--colors-tomatoA10);
|
||||
--color-tomato-1100: var(--colors-tomato11);
|
||||
--color-tomatoA-1100: var(--colors-tomatoA11);
|
||||
--color-tomato-1200: var(--colors-tomato12);
|
||||
--color-tomatoA-1200: var(--colors-tomatoA12);
|
||||
--color-violet-100: var(--colors-violet1);
|
||||
--color-violetA-100: var(--colors-violetA1);
|
||||
--color-violet-200: var(--colors-violet2);
|
||||
--color-violetA-200: var(--colors-violetA2);
|
||||
--color-violet-300: var(--colors-violet3);
|
||||
--color-violetA-300: var(--colors-violetA3);
|
||||
--color-violet-400: var(--colors-violet4);
|
||||
--color-violetA-400: var(--colors-violetA4);
|
||||
--color-violet-500: var(--colors-violet5);
|
||||
--color-violetA-500: var(--colors-violetA5);
|
||||
--color-violet-600: var(--colors-violet6);
|
||||
--color-violetA-600: var(--colors-violetA6);
|
||||
--color-violet-700: var(--colors-violet7);
|
||||
--color-violetA-700: var(--colors-violetA7);
|
||||
--color-violet-800: var(--colors-violet8);
|
||||
--color-violetA-800: var(--colors-violetA8);
|
||||
--color-violet-900: var(--colors-violet9);
|
||||
--color-violetA-900: var(--colors-violetA9);
|
||||
--color-violet-1000: var(--colors-violet10);
|
||||
--color-violetA-1000: var(--colors-violetA10);
|
||||
--color-violet-1100: var(--colors-violet11);
|
||||
--color-violetA-1100: var(--colors-violetA11);
|
||||
--color-violet-1200: var(--colors-violet12);
|
||||
--color-violetA-1200: var(--colors-violetA12);
|
||||
--color-yellow-100: var(--colors-yellow1);
|
||||
--color-yellowA-100: var(--colors-yellowA1);
|
||||
--color-yellow-200: var(--colors-yellow2);
|
||||
--color-yellowA-200: var(--colors-yellowA2);
|
||||
--color-yellow-300: var(--colors-yellow3);
|
||||
--color-yellowA-300: var(--colors-yellowA3);
|
||||
--color-yellow-400: var(--colors-yellow4);
|
||||
--color-yellowA-400: var(--colors-yellowA4);
|
||||
--color-yellow-500: var(--colors-yellow5);
|
||||
--color-yellowA-500: var(--colors-yellowA5);
|
||||
--color-yellow-600: var(--colors-yellow6);
|
||||
--color-yellowA-600: var(--colors-yellowA6);
|
||||
--color-yellow-700: var(--colors-yellow7);
|
||||
--color-yellowA-700: var(--colors-yellowA7);
|
||||
--color-yellow-800: var(--colors-yellow8);
|
||||
--color-yellowA-800: var(--colors-yellowA8);
|
||||
--color-yellow-900: var(--colors-yellow9);
|
||||
--color-yellowA-900: var(--colors-yellowA9);
|
||||
--color-yellow-1000: var(--colors-yellow10);
|
||||
--color-yellowA-1000: var(--colors-yellowA10);
|
||||
--color-yellow-1100: var(--colors-yellow11);
|
||||
--color-yellowA-1100: var(--colors-yellowA11);
|
||||
--color-yellow-1200: var(--colors-yellow12);
|
||||
--color-yellowA-1200: var(--colors-yellowA12);
|
||||
--color-blackA-100: var(--colors-blackA1);
|
||||
--color-whiteA-100: var(--colors-whiteA1);
|
||||
--color-blackA-200: var(--colors-blackA2);
|
||||
--color-whiteA-200: var(--colors-whiteA2);
|
||||
--color-blackA-300: var(--colors-blackA3);
|
||||
--color-whiteA-300: var(--colors-whiteA3);
|
||||
--color-blackA-400: var(--colors-blackA4);
|
||||
--color-whiteA-400: var(--colors-whiteA4);
|
||||
--color-blackA-500: var(--colors-blackA5);
|
||||
--color-whiteA-500: var(--colors-whiteA5);
|
||||
--color-blackA-600: var(--colors-blackA6);
|
||||
--color-whiteA-600: var(--colors-whiteA6);
|
||||
--color-blackA-700: var(--colors-blackA7);
|
||||
--color-whiteA-700: var(--colors-whiteA7);
|
||||
--color-blackA-800: var(--colors-blackA8);
|
||||
--color-whiteA-800: var(--colors-whiteA8);
|
||||
--color-blackA-900: var(--colors-blackA9);
|
||||
--color-whiteA-900: var(--colors-whiteA9);
|
||||
--color-blackA-1000: var(--colors-blackA10);
|
||||
--color-whiteA-1000: var(--colors-whiteA10);
|
||||
--color-blackA-1100: var(--colors-blackA11);
|
||||
--color-whiteA-1100: var(--colors-whiteA11);
|
||||
--color-blackA-1200: var(--colors-blackA12);
|
||||
--color-whiteA-1200: var(--colors-whiteA12);
|
||||
--color-scale-100: var(--colors-scale1);
|
||||
--color-scaleA-100: var(--colors-scaleA1);
|
||||
--color-scale-200: var(--colors-scale2);
|
||||
--color-scaleA-200: var(--colors-scaleA2);
|
||||
--color-scale-300: var(--colors-scale3);
|
||||
--color-scaleA-300: var(--colors-scaleA3);
|
||||
--color-scale-400: var(--colors-scale4);
|
||||
--color-scaleA-400: var(--colors-scaleA4);
|
||||
--color-scale-500: var(--colors-scale5);
|
||||
--color-scaleA-500: var(--colors-scaleA5);
|
||||
--color-scale-600: var(--colors-scale6);
|
||||
--color-scaleA-600: var(--colors-scaleA6);
|
||||
--color-scale-700: var(--colors-scale7);
|
||||
--color-scaleA-700: var(--colors-scaleA7);
|
||||
--color-scale-800: var(--colors-scale8);
|
||||
--color-scaleA-800: var(--colors-scaleA8);
|
||||
--color-scale-900: var(--colors-scale9);
|
||||
--color-scaleA-900: var(--colors-scaleA9);
|
||||
--color-scale-1000: var(--colors-scale10);
|
||||
--color-scaleA-1000: var(--colors-scaleA10);
|
||||
--color-scale-1100: var(--colors-scale11);
|
||||
--color-scaleA-1100: var(--colors-scaleA11);
|
||||
--color-scale-1200: var(--colors-scale12);
|
||||
--color-scaleA-1200: var(--colors-scaleA12);
|
||||
--color-brand-100: var(--colors-brand1);
|
||||
--color-brand-200: hsl(var(--brand-200));
|
||||
--color-brand-300: hsl(var(--brand-300));
|
||||
--color-brand-400: hsl(var(--brand-400));
|
||||
--color-brand-500: hsl(var(--brand-500));
|
||||
--color-brand-600: hsl(var(--brand-600));
|
||||
--color-brand-700: var(--colors-brand7);
|
||||
--color-brand-800: var(--colors-brand8);
|
||||
--color-brand-900: var(--colors-brand9);
|
||||
--color-brand-1000: var(--colors-brand10);
|
||||
--color-brand-1100: var(--colors-brand11);
|
||||
--color-brand-1200: var(--colors-brand12);
|
||||
}
|
||||
@@ -0,0 +1,806 @@
|
||||
/*
|
||||
* Auto-generated by scripts/generate-radix-vars.js — do not edit by hand.
|
||||
* Run `node scripts/generate-radix-vars.js` from packages/config/ to refresh.
|
||||
*
|
||||
* Mirrors the CSS variables that the legacy @mertasan/tailwindcss-variables
|
||||
* plugin used to emit from ui.config.js's generateCssVariables() and
|
||||
* default-colors.js's scale/scaleA aliases.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--colors-amber1: hsl(39, 70%, 99%);
|
||||
--colors-amber2: hsl(40, 100%, 96.5%);
|
||||
--colors-amber3: hsl(44, 100%, 91.7%);
|
||||
--colors-amber4: hsl(43, 100%, 86.8%);
|
||||
--colors-amber5: hsl(42, 100%, 81.8%);
|
||||
--colors-amber6: hsl(38, 99.7%, 76.3%);
|
||||
--colors-amber7: hsl(36, 86.1%, 67.1%);
|
||||
--colors-amber8: hsl(35, 85.2%, 55.1%);
|
||||
--colors-amber9: hsl(39, 100%, 57%);
|
||||
--colors-amber10: hsl(35, 100%, 55.5%);
|
||||
--colors-amber11: hsl(30, 100%, 34%);
|
||||
--colors-amber12: hsl(20, 80%, 17%);
|
||||
--colors-amberA1: hsla(40, 94.9%, 38.7%, 0.016);
|
||||
--colors-amberA2: hsla(40, 100%, 50.3%, 0.071);
|
||||
--colors-amberA3: hsla(44, 100%, 50.1%, 0.165);
|
||||
--colors-amberA4: hsla(43, 100%, 50%, 0.263);
|
||||
--colors-amberA5: hsla(42, 100%, 50%, 0.365);
|
||||
--colors-amberA6: hsla(38, 100%, 50.1%, 0.475);
|
||||
--colors-amberA7: hsla(36, 99.9%, 46.2%, 0.612);
|
||||
--colors-amberA8: hsla(35, 99.8%, 46%, 0.832);
|
||||
--colors-amberA9: hsla(39, 100%, 50%, 0.859);
|
||||
--colors-amberA10: hsla(35, 100%, 50%, 0.891);
|
||||
--colors-amberA11: hsla(29, 100%, 33.6%, 0.98);
|
||||
--colors-amberA12: hsla(20, 99.8%, 14.1%, 0.965);
|
||||
--colors-blackA1: hsla(0, 0%, 0%, 0.012);
|
||||
--colors-blackA2: hsla(0, 0%, 0%, 0.027);
|
||||
--colors-blackA3: hsla(0, 0%, 0%, 0.047);
|
||||
--colors-blackA4: hsla(0, 0%, 0%, 0.071);
|
||||
--colors-blackA5: hsla(0, 0%, 0%, 0.09);
|
||||
--colors-blackA6: hsla(0, 0%, 0%, 0.114);
|
||||
--colors-blackA7: hsla(0, 0%, 0%, 0.141);
|
||||
--colors-blackA8: hsla(0, 0%, 0%, 0.22);
|
||||
--colors-blackA9: hsla(0, 0%, 0%, 0.439);
|
||||
--colors-blackA10: hsla(0, 0%, 0%, 0.478);
|
||||
--colors-blackA11: hsla(0, 0%, 0%, 0.565);
|
||||
--colors-blackA12: hsla(0, 0%, 0%, 0.91);
|
||||
--colors-blue1: hsl(206, 100%, 99.2%);
|
||||
--colors-blue2: hsl(210, 100%, 98%);
|
||||
--colors-blue3: hsl(209, 100%, 96.5%);
|
||||
--colors-blue4: hsl(210, 98.8%, 94%);
|
||||
--colors-blue5: hsl(209, 95%, 90.1%);
|
||||
--colors-blue6: hsl(209, 81.2%, 84.5%);
|
||||
--colors-blue7: hsl(208, 77.5%, 76.9%);
|
||||
--colors-blue8: hsl(206, 81.9%, 65.3%);
|
||||
--colors-blue9: hsl(206, 100%, 50%);
|
||||
--colors-blue10: hsl(208, 100%, 47.3%);
|
||||
--colors-blue11: hsl(211, 100%, 43.2%);
|
||||
--colors-blue12: hsl(211, 100%, 15%);
|
||||
--colors-blueA1: hsla(210, 100%, 51%, 0.016);
|
||||
--colors-blueA2: hsla(210, 100%, 51%, 0.04);
|
||||
--colors-blueA3: hsla(210, 100%, 50.3%, 0.071);
|
||||
--colors-blueA4: hsla(210, 100%, 50.1%, 0.118);
|
||||
--colors-blueA5: hsla(208, 99.1%, 47.1%, 0.189);
|
||||
--colors-blueA6: hsla(209, 99.5%, 45.3%, 0.283);
|
||||
--colors-blueA7: hsla(208, 99.9%, 43.8%, 0.412);
|
||||
--colors-blueA8: hsla(206, 99.8%, 45.1%, 0.632);
|
||||
--colors-blueA9: hsla(206, 100%, 50%, 0.98);
|
||||
--colors-blueA10: hsla(208, 100%, 47.2%, 0.98);
|
||||
--colors-blueA11: hsla(212, 100%, 43%, 0.98);
|
||||
--colors-blueA12: hsla(213, 100%, 14.4%, 0.98);
|
||||
--colors-crimson1: hsl(332, 100%, 99.4%);
|
||||
--colors-crimson2: hsl(330, 100%, 98.4%);
|
||||
--colors-crimson3: hsl(331, 85.6%, 96.6%);
|
||||
--colors-crimson4: hsl(331, 78.1%, 94.2%);
|
||||
--colors-crimson5: hsl(332, 72.1%, 91.1%);
|
||||
--colors-crimson6: hsl(333, 67%, 86.7%);
|
||||
--colors-crimson7: hsl(335, 63.5%, 80.4%);
|
||||
--colors-crimson8: hsl(336, 62.3%, 72.9%);
|
||||
--colors-crimson9: hsl(336, 80%, 57.8%);
|
||||
--colors-crimson10: hsl(336, 73.7%, 53.5%);
|
||||
--colors-crimson11: hsl(336, 75%, 47.2%);
|
||||
--colors-crimson12: hsl(340, 65%, 14.5%);
|
||||
--colors-crimsonA1: hsla(340, 100%, 51%, 0.012);
|
||||
--colors-crimsonA2: hsla(330, 100%, 51%, 0.032);
|
||||
--colors-crimsonA3: hsla(332, 99.1%, 47.1%, 0.063);
|
||||
--colors-crimsonA4: hsla(331, 99.9%, 44.3%, 0.102);
|
||||
--colors-crimsonA5: hsla(333, 99.9%, 42.3%, 0.153);
|
||||
--colors-crimsonA6: hsla(333, 99.5%, 40.5%, 0.224);
|
||||
--colors-crimsonA7: hsla(335, 99.7%, 39.1%, 0.322);
|
||||
--colors-crimsonA8: hsla(336, 99.5%, 38.5%, 0.44);
|
||||
--colors-crimsonA9: hsla(336, 99.9%, 44.3%, 0.761);
|
||||
--colors-crimsonA10: hsla(336, 100%, 42.5%, 0.808);
|
||||
--colors-crimsonA11: hsla(336, 99.8%, 40.3%, 0.883);
|
||||
--colors-crimsonA12: hsla(340, 99%, 10%, 0.95);
|
||||
--colors-gold1: hsl(50, 20%, 99.1%);
|
||||
--colors-gold2: hsl(47, 52.9%, 96.7%);
|
||||
--colors-gold3: hsl(46, 38.2%, 93.7%);
|
||||
--colors-gold4: hsl(44, 32.7%, 90.1%);
|
||||
--colors-gold5: hsl(43, 29.9%, 85.7%);
|
||||
--colors-gold6: hsl(41, 28.3%, 79.8%);
|
||||
--colors-gold7: hsl(39, 27.6%, 71.9%);
|
||||
--colors-gold8: hsl(36, 27.2%, 61.8%);
|
||||
--colors-gold9: hsl(36, 20%, 49.5%);
|
||||
--colors-gold10: hsl(36, 19.8%, 45.7%);
|
||||
--colors-gold11: hsl(36, 20%, 39%);
|
||||
--colors-gold12: hsl(36, 16%, 20%);
|
||||
--colors-goldA1: hsla(60, 89.3%, 18.3%, 0.012);
|
||||
--colors-goldA2: hsla(47, 99.9%, 34.6%, 0.051);
|
||||
--colors-goldA3: hsla(45, 97%, 27.9%, 0.087);
|
||||
--colors-goldA4: hsla(46, 98%, 25.4%, 0.134);
|
||||
--colors-goldA5: hsla(43, 98.4%, 22.6%, 0.185);
|
||||
--colors-goldA6: hsla(41, 99.7%, 22%, 0.259);
|
||||
--colors-goldA7: hsla(38, 99.8%, 21.5%, 0.357);
|
||||
--colors-goldA8: hsla(36, 99.3%, 21.5%, 0.487);
|
||||
--colors-goldA9: hsla(36, 99.9%, 16.2%, 0.604);
|
||||
--colors-goldA10: hsla(36, 99.2%, 14.6%, 0.636);
|
||||
--colors-goldA11: hsla(35, 99.1%, 11.2%, 0.687);
|
||||
--colors-goldA12: hsla(38, 98%, 3.8%, 0.832);
|
||||
--colors-gray1: hsl(0, 0%, 99%);
|
||||
--colors-gray2: hsl(0, 0%, 97.3%);
|
||||
--colors-gray3: hsl(0, 0%, 95.1%);
|
||||
--colors-gray4: hsl(0, 0%, 93%);
|
||||
--colors-gray5: hsl(0, 0%, 90.9%);
|
||||
--colors-gray6: hsl(0, 0%, 88.7%);
|
||||
--colors-gray7: hsl(0, 0%, 85.8%);
|
||||
--colors-gray8: hsl(0, 0%, 78%);
|
||||
--colors-gray9: hsl(0, 0%, 56.1%);
|
||||
--colors-gray10: hsl(0, 0%, 52.3%);
|
||||
--colors-gray11: hsl(0, 0%, 43.5%);
|
||||
--colors-gray12: hsl(0, 0%, 9%);
|
||||
--colors-grayA1: hsla(0, 0%, 0%, 0.012);
|
||||
--colors-grayA2: hsla(0, 0%, 0%, 0.027);
|
||||
--colors-grayA3: hsla(0, 0%, 0%, 0.047);
|
||||
--colors-grayA4: hsla(0, 0%, 0%, 0.071);
|
||||
--colors-grayA5: hsla(0, 0%, 0%, 0.09);
|
||||
--colors-grayA6: hsla(0, 0%, 0%, 0.114);
|
||||
--colors-grayA7: hsla(0, 0%, 0%, 0.141);
|
||||
--colors-grayA8: hsla(0, 0%, 0%, 0.22);
|
||||
--colors-grayA9: hsla(0, 0%, 0%, 0.439);
|
||||
--colors-grayA10: hsla(0, 0%, 0%, 0.478);
|
||||
--colors-grayA11: hsla(0, 0%, 0%, 0.565);
|
||||
--colors-grayA12: hsla(0, 0%, 0%, 0.91);
|
||||
--colors-green1: hsl(136, 50%, 98.9%);
|
||||
--colors-green2: hsl(138, 62.5%, 96.9%);
|
||||
--colors-green3: hsl(139, 55.2%, 94.5%);
|
||||
--colors-green4: hsl(140, 48.7%, 91%);
|
||||
--colors-green5: hsl(141, 43.7%, 86%);
|
||||
--colors-green6: hsl(143, 40.3%, 79%);
|
||||
--colors-green7: hsl(146, 38.5%, 69%);
|
||||
--colors-green8: hsl(151, 40.2%, 54.1%);
|
||||
--colors-green9: hsl(151, 55%, 41.5%);
|
||||
--colors-green10: hsl(152, 57.5%, 37.6%);
|
||||
--colors-green11: hsl(153, 67%, 28.5%);
|
||||
--colors-green12: hsl(155, 40%, 14%);
|
||||
--colors-greenA1: hsla(140, 94.9%, 38.7%, 0.016);
|
||||
--colors-greenA2: hsla(138, 99.9%, 38.5%, 0.051);
|
||||
--colors-greenA3: hsla(139, 97.7%, 36.9%, 0.087);
|
||||
--colors-greenA4: hsla(139, 98.5%, 32.7%, 0.134);
|
||||
--colors-greenA5: hsla(141, 100%, 30.4%, 0.2);
|
||||
--colors-greenA6: hsla(142, 99%, 28.9%, 0.295);
|
||||
--colors-greenA7: hsla(146, 99.5%, 27.6%, 0.428);
|
||||
--colors-greenA8: hsla(151, 99.5%, 28.8%, 0.644);
|
||||
--colors-greenA9: hsla(151, 99.9%, 28%, 0.812);
|
||||
--colors-greenA10: hsla(152, 99.6%, 25.8%, 0.84);
|
||||
--colors-greenA11: hsla(153, 99.9%, 21%, 0.906);
|
||||
--colors-greenA12: hsla(155, 99.4%, 6.2%, 0.918);
|
||||
--colors-indigo1: hsl(225, 60%, 99.4%);
|
||||
--colors-indigo2: hsl(223, 100%, 98.6%);
|
||||
--colors-indigo3: hsl(223, 98.4%, 97.1%);
|
||||
--colors-indigo4: hsl(223, 92.9%, 95%);
|
||||
--colors-indigo5: hsl(224, 87.1%, 92%);
|
||||
--colors-indigo6: hsl(224, 81.9%, 87.8%);
|
||||
--colors-indigo7: hsl(225, 77.4%, 82.1%);
|
||||
--colors-indigo8: hsl(226, 75.4%, 74.5%);
|
||||
--colors-indigo9: hsl(226, 70%, 55.5%);
|
||||
--colors-indigo10: hsl(226, 58.6%, 51.3%);
|
||||
--colors-indigo11: hsl(226, 55%, 45%);
|
||||
--colors-indigo12: hsl(226, 62%, 17%);
|
||||
--colors-indigoA1: hsla(240, 92.6%, 26.5%, 0.008);
|
||||
--colors-indigoA2: hsla(223, 100%, 51%, 0.028);
|
||||
--colors-indigoA3: hsla(224, 100%, 50.1%, 0.059);
|
||||
--colors-indigoA4: hsla(223, 98%, 48.5%, 0.099);
|
||||
--colors-indigoA5: hsla(225, 98.6%, 46.4%, 0.15);
|
||||
--colors-indigoA6: hsla(224, 99.5%, 44.9%, 0.224);
|
||||
--colors-indigoA7: hsla(225, 99.7%, 43.9%, 0.318);
|
||||
--colors-indigoA8: hsla(226, 99.5%, 43.1%, 0.448);
|
||||
--colors-indigoA9: hsla(226, 100%, 41.2%, 0.757);
|
||||
--colors-indigoA10: hsla(226, 99.8%, 37.1%, 0.773);
|
||||
--colors-indigoA11: hsla(226, 99.6%, 31.1%, 0.797);
|
||||
--colors-indigoA12: hsla(226, 99.3%, 11.4%, 0.938);
|
||||
--colors-orange1: hsl(24, 70%, 99%);
|
||||
--colors-orange2: hsl(24, 83.3%, 97.6%);
|
||||
--colors-orange3: hsl(24, 100%, 95.3%);
|
||||
--colors-orange4: hsl(25, 100%, 92.2%);
|
||||
--colors-orange5: hsl(25, 100%, 88.2%);
|
||||
--colors-orange6: hsl(25, 100%, 82.8%);
|
||||
--colors-orange7: hsl(24, 100%, 75.3%);
|
||||
--colors-orange8: hsl(24, 94.5%, 64.3%);
|
||||
--colors-orange9: hsl(24, 94%, 50%);
|
||||
--colors-orange10: hsl(24, 100%, 46.5%);
|
||||
--colors-orange11: hsl(24, 100%, 37%);
|
||||
--colors-orange12: hsl(15, 60%, 17%);
|
||||
--colors-orangeA1: hsla(20, 94.9%, 38.7%, 0.016);
|
||||
--colors-orangeA2: hsla(24, 95.8%, 46.5%, 0.044);
|
||||
--colors-orangeA3: hsla(25, 100%, 50.5%, 0.095);
|
||||
--colors-orangeA4: hsla(26, 100%, 50%, 0.157);
|
||||
--colors-orangeA5: hsla(25, 100%, 50.1%, 0.236);
|
||||
--colors-orangeA6: hsla(25, 100%, 50.1%, 0.346);
|
||||
--colors-orangeA7: hsla(24, 100%, 50.1%, 0.495);
|
||||
--colors-orangeA8: hsla(24, 99.7%, 48.7%, 0.695);
|
||||
--colors-orangeA9: hsla(24, 99.9%, 48.4%, 0.969);
|
||||
--colors-orangeA10: hsla(23, 100%, 46.4%, 0.98);
|
||||
--colors-orangeA11: hsla(23, 100%, 36.8%, 0.98);
|
||||
--colors-orangeA12: hsla(15, 99.4%, 11%, 0.934);
|
||||
--colors-pink1: hsl(322, 100%, 99.4%);
|
||||
--colors-pink2: hsl(323, 100%, 98.4%);
|
||||
--colors-pink3: hsl(323, 86.3%, 96.5%);
|
||||
--colors-pink4: hsl(323, 78.7%, 94.2%);
|
||||
--colors-pink5: hsl(323, 72.2%, 91.1%);
|
||||
--colors-pink6: hsl(323, 66.3%, 86.6%);
|
||||
--colors-pink7: hsl(323, 62%, 80.1%);
|
||||
--colors-pink8: hsl(323, 60.3%, 72.4%);
|
||||
--colors-pink9: hsl(322, 65%, 54.5%);
|
||||
--colors-pink10: hsl(322, 63.9%, 50.7%);
|
||||
--colors-pink11: hsl(322, 75%, 46%);
|
||||
--colors-pink12: hsl(320, 70%, 13.5%);
|
||||
--colors-pinkA1: hsla(320, 100%, 51%, 0.012);
|
||||
--colors-pinkA2: hsla(323, 100%, 51%, 0.032);
|
||||
--colors-pinkA3: hsla(323, 98.9%, 47.3%, 0.067);
|
||||
--colors-pinkA4: hsla(323, 99.9%, 44.3%, 0.102);
|
||||
--colors-pinkA5: hsla(324, 99.9%, 42.3%, 0.153);
|
||||
--colors-pinkA6: hsla(323, 99.5%, 39.6%, 0.224);
|
||||
--colors-pinkA7: hsla(323, 99.7%, 38.5%, 0.322);
|
||||
--colors-pinkA8: hsla(323, 99.5%, 37.7%, 0.444);
|
||||
--colors-pinkA9: hsla(322, 99.7%, 39.3%, 0.75);
|
||||
--colors-pinkA10: hsla(322, 100%, 39.1%, 0.808);
|
||||
--colors-pinkA11: hsla(322, 99.8%, 39%, 0.887);
|
||||
--colors-pinkA12: hsla(321, 99.8%, 10%, 0.961);
|
||||
--colors-purple1: hsl(280, 65%, 99.4%);
|
||||
--colors-purple2: hsl(276, 100%, 99%);
|
||||
--colors-purple3: hsl(276, 83.1%, 97%);
|
||||
--colors-purple4: hsl(275, 76.4%, 94.7%);
|
||||
--colors-purple5: hsl(275, 70.8%, 91.8%);
|
||||
--colors-purple6: hsl(274, 65.4%, 87.8%);
|
||||
--colors-purple7: hsl(273, 61%, 81.7%);
|
||||
--colors-purple8: hsl(272, 60%, 73.5%);
|
||||
--colors-purple9: hsl(272, 51%, 54%);
|
||||
--colors-purple10: hsl(272, 46.8%, 50.3%);
|
||||
--colors-purple11: hsl(272, 50%, 45.8%);
|
||||
--colors-purple12: hsl(272, 66%, 16%);
|
||||
--colors-purpleA1: hsla(300, 94.3%, 34.6%, 0.012);
|
||||
--colors-purpleA2: hsla(276, 100%, 51%, 0.02);
|
||||
--colors-purpleA3: hsla(277, 99.6%, 46.5%, 0.055);
|
||||
--colors-purpleA4: hsla(274, 97.9%, 44.3%, 0.095);
|
||||
--colors-purpleA5: hsla(276, 98.6%, 42%, 0.142);
|
||||
--colors-purpleA6: hsla(275, 100%, 39.2%, 0.2);
|
||||
--colors-purpleA7: hsla(273, 99.2%, 38.2%, 0.295);
|
||||
--colors-purpleA8: hsla(272, 99.7%, 37.6%, 0.424);
|
||||
--colors-purpleA9: hsla(272, 99.6%, 34%, 0.695);
|
||||
--colors-purpleA10: hsla(272, 99.7%, 32%, 0.73);
|
||||
--colors-purpleA11: hsla(272, 99.8%, 29.7%, 0.773);
|
||||
--colors-purpleA12: hsla(272, 99.2%, 11.3%, 0.946);
|
||||
--colors-red1: hsl(359, 100%, 99.4%);
|
||||
--colors-red2: hsl(359, 100%, 98.6%);
|
||||
--colors-red3: hsl(360, 100%, 96.8%);
|
||||
--colors-red4: hsl(360, 97.9%, 94.8%);
|
||||
--colors-red5: hsl(360, 90.2%, 91.9%);
|
||||
--colors-red6: hsl(360, 81.7%, 87.8%);
|
||||
--colors-red7: hsl(359, 74.2%, 81.7%);
|
||||
--colors-red8: hsl(359, 69.5%, 74.3%);
|
||||
--colors-red9: hsl(358, 75%, 59%);
|
||||
--colors-red10: hsl(358, 69.4%, 55.2%);
|
||||
--colors-red11: hsl(358, 65%, 48.7%);
|
||||
--colors-red12: hsl(354, 50%, 14.6%);
|
||||
--colors-redA1: hsla(0, 100%, 51%, 0.012);
|
||||
--colors-redA2: hsla(0, 100%, 51%, 0.032);
|
||||
--colors-redA3: hsla(0, 100%, 50.2%, 0.063);
|
||||
--colors-redA4: hsla(0, 100%, 50%, 0.102);
|
||||
--colors-redA5: hsla(0, 99.9%, 47.5%, 0.153);
|
||||
--colors-redA6: hsla(0, 99.5%, 44.9%, 0.224);
|
||||
--colors-redA7: hsla(359, 99.7%, 42.7%, 0.318);
|
||||
--colors-redA8: hsla(359, 99.6%, 41.1%, 0.436);
|
||||
--colors-redA9: hsla(358, 99.9%, 42.9%, 0.718);
|
||||
--colors-redA10: hsla(358, 99.9%, 41%, 0.761);
|
||||
--colors-redA11: hsla(358, 99.8%, 38.3%, 0.832);
|
||||
--colors-redA12: hsla(355, 99.3%, 7.9%, 0.926);
|
||||
--colors-slate1: hsl(206, 30%, 98.8%);
|
||||
--colors-slate2: hsl(210, 16.7%, 97.6%);
|
||||
--colors-slate3: hsl(209, 13.3%, 95.3%);
|
||||
--colors-slate4: hsl(209, 12.2%, 93.2%);
|
||||
--colors-slate5: hsl(208, 11.7%, 91.1%);
|
||||
--colors-slate6: hsl(208, 11.3%, 88.9%);
|
||||
--colors-slate7: hsl(207, 11.1%, 85.9%);
|
||||
--colors-slate8: hsl(205, 10.7%, 78%);
|
||||
--colors-slate9: hsl(206, 6%, 56.1%);
|
||||
--colors-slate10: hsl(206, 5.8%, 52.3%);
|
||||
--colors-slate11: hsl(206, 6%, 43.5%);
|
||||
--colors-slate12: hsl(206, 24%, 9%);
|
||||
--colors-slateA1: hsla(210, 92.6%, 26.5%, 0.016);
|
||||
--colors-slateA2: hsla(210, 87.7%, 16%, 0.028);
|
||||
--colors-slateA3: hsla(210, 98.8%, 14.4%, 0.055);
|
||||
--colors-slateA4: hsla(210, 94.1%, 11.1%, 0.075);
|
||||
--colors-slateA5: hsla(216, 91.1%, 10.9%, 0.099);
|
||||
--colors-slateA6: hsla(206, 96.4%, 11.3%, 0.126);
|
||||
--colors-slateA7: hsla(210, 99.1%, 10.1%, 0.157);
|
||||
--colors-slateA8: hsla(205, 96.5%, 10%, 0.244);
|
||||
--colors-slateA9: hsla(206, 98.8%, 5.9%, 0.467);
|
||||
--colors-slateA10: hsla(206, 99.6%, 5.4%, 0.506);
|
||||
--colors-slateA11: hsla(206, 97%, 4.8%, 0.593);
|
||||
--colors-slateA12: hsla(202, 97%, 2.4%, 0.934);
|
||||
--colors-tomato1: hsl(10, 100%, 99.4%);
|
||||
--colors-tomato2: hsl(8, 100%, 98.4%);
|
||||
--colors-tomato3: hsl(8, 100%, 96.6%);
|
||||
--colors-tomato4: hsl(8, 100%, 94.3%);
|
||||
--colors-tomato5: hsl(8, 92.8%, 91%);
|
||||
--colors-tomato6: hsl(9, 84.7%, 86.3%);
|
||||
--colors-tomato7: hsl(10, 77.3%, 79.5%);
|
||||
--colors-tomato8: hsl(10, 71.6%, 71%);
|
||||
--colors-tomato9: hsl(10, 78%, 54%);
|
||||
--colors-tomato10: hsl(10, 71.5%, 50%);
|
||||
--colors-tomato11: hsl(10, 82%, 43.5%);
|
||||
--colors-tomato12: hsl(10, 50%, 13.5%);
|
||||
--colors-tomatoA1: hsla(0, 100%, 51%, 0.012);
|
||||
--colors-tomatoA2: hsla(8, 100%, 51%, 0.032);
|
||||
--colors-tomatoA3: hsla(7, 100%, 50.2%, 0.067);
|
||||
--colors-tomatoA4: hsla(8, 100%, 50.1%, 0.114);
|
||||
--colors-tomatoA5: hsla(7, 99.5%, 47.9%, 0.173);
|
||||
--colors-tomatoA6: hsla(9, 99.9%, 46.2%, 0.255);
|
||||
--colors-tomatoA7: hsla(10, 99.8%, 43.6%, 0.365);
|
||||
--colors-tomatoA8: hsla(10, 99.5%, 41.8%, 0.499);
|
||||
--colors-tomatoA9: hsla(10, 99.9%, 43.8%, 0.82);
|
||||
--colors-tomatoA10: hsla(10, 100%, 41.8%, 0.859);
|
||||
--colors-tomatoA11: hsla(10, 99.9%, 38.8%, 0.922);
|
||||
--colors-tomatoA12: hsla(10, 99%, 7.4%, 0.934);
|
||||
--colors-violet1: hsl(255, 65%, 99.4%);
|
||||
--colors-violet2: hsl(252, 100%, 99%);
|
||||
--colors-violet3: hsl(252, 96.9%, 97.4%);
|
||||
--colors-violet4: hsl(252, 91.5%, 95.5%);
|
||||
--colors-violet5: hsl(252, 85.1%, 93%);
|
||||
--colors-violet6: hsl(252, 77.8%, 89.4%);
|
||||
--colors-violet7: hsl(252, 71%, 83.7%);
|
||||
--colors-violet8: hsl(252, 68.6%, 76.3%);
|
||||
--colors-violet9: hsl(252, 56%, 57.5%);
|
||||
--colors-violet10: hsl(251, 48.1%, 53.5%);
|
||||
--colors-violet11: hsl(250, 43%, 48%);
|
||||
--colors-violet12: hsl(254, 60%, 18.5%);
|
||||
--colors-violetA1: hsla(270, 94.3%, 34.6%, 0.012);
|
||||
--colors-violetA2: hsla(252, 100%, 51%, 0.02);
|
||||
--colors-violetA3: hsla(254, 100%, 50%, 0.051);
|
||||
--colors-violetA4: hsla(251, 98.3%, 48.2%, 0.087);
|
||||
--colors-violetA5: hsla(252, 99%, 45.7%, 0.13);
|
||||
--colors-violetA6: hsla(251, 99.1%, 44%, 0.189);
|
||||
--colors-violetA7: hsla(252, 99.5%, 41.7%, 0.279);
|
||||
--colors-violetA8: hsla(252, 100%, 40.7%, 0.4);
|
||||
--colors-violetA9: hsla(252, 99.9%, 35.8%, 0.663);
|
||||
--colors-violetA10: hsla(251, 99.6%, 32.5%, 0.691);
|
||||
--colors-violetA11: hsla(250, 99.8%, 28.4%, 0.726);
|
||||
--colors-violetA12: hsla(254, 99.5%, 11.9%, 0.926);
|
||||
--colors-whiteA1: hsla(0, 0%, 100%, 0);
|
||||
--colors-whiteA2: hsla(0, 0%, 100%, 0.013);
|
||||
--colors-whiteA3: hsla(0, 0%, 100%, 0.034);
|
||||
--colors-whiteA4: hsla(0, 0%, 100%, 0.056);
|
||||
--colors-whiteA5: hsla(0, 0%, 100%, 0.086);
|
||||
--colors-whiteA6: hsla(0, 0%, 100%, 0.124);
|
||||
--colors-whiteA7: hsla(0, 0%, 100%, 0.176);
|
||||
--colors-whiteA8: hsla(0, 0%, 100%, 0.249);
|
||||
--colors-whiteA9: hsla(0, 0%, 100%, 0.386);
|
||||
--colors-whiteA10: hsla(0, 0%, 100%, 0.446);
|
||||
--colors-whiteA11: hsla(0, 0%, 100%, 0.592);
|
||||
--colors-whiteA12: hsla(0, 0%, 100%, 0.923);
|
||||
--colors-yellow1: hsl(60, 54%, 98.5%);
|
||||
--colors-yellow2: hsl(52, 100%, 95.5%);
|
||||
--colors-yellow3: hsl(55, 100%, 90.9%);
|
||||
--colors-yellow4: hsl(54, 100%, 86.6%);
|
||||
--colors-yellow5: hsl(52, 97.9%, 82%);
|
||||
--colors-yellow6: hsl(50, 89.4%, 76.1%);
|
||||
--colors-yellow7: hsl(47, 80.4%, 68%);
|
||||
--colors-yellow8: hsl(48, 100%, 46.1%);
|
||||
--colors-yellow9: hsl(53, 92%, 50%);
|
||||
--colors-yellow10: hsl(50, 100%, 48.5%);
|
||||
--colors-yellow11: hsl(42, 100%, 29%);
|
||||
--colors-yellow12: hsl(40, 55%, 13.5%);
|
||||
--colors-yellowA1: hsla(60, 94.3%, 34.6%, 0.024);
|
||||
--colors-yellowA2: hsla(52, 100%, 50.4%, 0.091);
|
||||
--colors-yellowA3: hsla(55, 100%, 50.2%, 0.181);
|
||||
--colors-yellowA4: hsla(54, 100%, 50.1%, 0.267);
|
||||
--colors-yellowA5: hsla(52, 99.9%, 49.5%, 0.357);
|
||||
--colors-yellowA6: hsla(50, 100%, 47.4%, 0.451);
|
||||
--colors-yellowA7: hsla(47, 99.8%, 44.6%, 0.577);
|
||||
--colors-yellowA8: hsla(48, 100%, 46%, 0.98);
|
||||
--colors-yellowA9: hsla(53, 100%, 48%, 0.961);
|
||||
--colors-yellowA10: hsla(50, 100%, 48.4%, 0.98);
|
||||
--colors-yellowA11: hsla(42, 100%, 28.6%, 0.98);
|
||||
--colors-yellowA12: hsla(41, 98.9%, 8%, 0.942);
|
||||
--colors-scale1: var(--colors-slate1);
|
||||
--colors-scaleA1: var(--colors-slateA1);
|
||||
--colors-scale2: var(--colors-slate2);
|
||||
--colors-scaleA2: var(--colors-slateA2);
|
||||
--colors-scale3: var(--colors-slate3);
|
||||
--colors-scaleA3: var(--colors-slateA3);
|
||||
--colors-scale4: var(--colors-slate4);
|
||||
--colors-scaleA4: var(--colors-slateA4);
|
||||
--colors-scale5: var(--colors-slate5);
|
||||
--colors-scaleA5: var(--colors-slateA5);
|
||||
--colors-scale6: var(--colors-slate6);
|
||||
--colors-scaleA6: var(--colors-slateA6);
|
||||
--colors-scale7: var(--colors-slate7);
|
||||
--colors-scaleA7: var(--colors-slateA7);
|
||||
--colors-scale8: var(--colors-slate8);
|
||||
--colors-scaleA8: var(--colors-slateA8);
|
||||
--colors-scale9: var(--colors-slate9);
|
||||
--colors-scaleA9: var(--colors-slateA9);
|
||||
--colors-scale10: var(--colors-slate10);
|
||||
--colors-scaleA10: var(--colors-slateA10);
|
||||
--colors-scale11: var(--colors-slate11);
|
||||
--colors-scaleA11: var(--colors-slateA11);
|
||||
--colors-scale12: var(--colors-slate12);
|
||||
--colors-scaleA12: var(--colors-slateA12);
|
||||
}
|
||||
|
||||
[data-theme*='dark'] {
|
||||
--colors-amber1: hsl(36, 100%, 6.1%);
|
||||
--colors-amber2: hsl(35, 100%, 7.6%);
|
||||
--colors-amber3: hsl(32, 100%, 10.2%);
|
||||
--colors-amber4: hsl(32, 100%, 12.4%);
|
||||
--colors-amber5: hsl(33, 100%, 14.6%);
|
||||
--colors-amber6: hsl(35, 100%, 17.1%);
|
||||
--colors-amber7: hsl(35, 91%, 21.6%);
|
||||
--colors-amber8: hsl(36, 100%, 25.5%);
|
||||
--colors-amber9: hsl(39, 100%, 57%);
|
||||
--colors-amber10: hsl(43, 100%, 64%);
|
||||
--colors-amber11: hsl(39, 90%, 49.8%);
|
||||
--colors-amber12: hsl(39, 97%, 93.2%);
|
||||
--colors-amberA1: hsla(0, 0%, 0%, 0);
|
||||
--colors-amberA2: hsla(31, 100%, 49.7%, 0.036);
|
||||
--colors-amberA3: hsla(27, 100%, 49.9%, 0.094);
|
||||
--colors-amberA4: hsla(29, 100%, 50%, 0.143);
|
||||
--colors-amberA5: hsla(31, 100%, 50%, 0.192);
|
||||
--colors-amberA6: hsla(35, 100%, 50%, 0.25);
|
||||
--colors-amberA7: hsla(34, 99.6%, 52.9%, 0.331);
|
||||
--colors-amberA8: hsla(36, 100%, 50%, 0.442);
|
||||
--colors-amberA9: hsla(40, 100%, 57.2%, 0.98);
|
||||
--colors-amberA10: hsla(44, 100%, 64.2%, 0.98);
|
||||
--colors-amberA11: hsla(39, 99.9%, 52.7%, 0.938);
|
||||
--colors-amberA12: hsla(45, 100%, 94.2%, 0.98);
|
||||
--colors-blue1: hsl(212, 35%, 9.2%);
|
||||
--colors-blue2: hsl(216, 50%, 11.8%);
|
||||
--colors-blue3: hsl(214, 59.4%, 15.3%);
|
||||
--colors-blue4: hsl(214, 65.8%, 17.9%);
|
||||
--colors-blue5: hsl(213, 71.2%, 20.2%);
|
||||
--colors-blue6: hsl(212, 77.4%, 23.1%);
|
||||
--colors-blue7: hsl(211, 85.1%, 27.4%);
|
||||
--colors-blue8: hsl(211, 89.7%, 34.1%);
|
||||
--colors-blue9: hsl(206, 100%, 50%);
|
||||
--colors-blue10: hsl(209, 100%, 60.6%);
|
||||
--colors-blue11: hsl(210, 100%, 66.1%);
|
||||
--colors-blue12: hsl(206, 98%, 95.8%);
|
||||
--colors-blueA1: hsla(0, 0%, 0%, 0);
|
||||
--colors-blueA2: hsla(221, 97.8%, 52.4%, 0.059);
|
||||
--colors-blueA3: hsla(215, 99.3%, 54.2%, 0.135);
|
||||
--colors-blueA4: hsla(215, 99.3%, 53.8%, 0.198);
|
||||
--colors-blueA5: hsla(213, 99.4%, 52.8%, 0.252);
|
||||
--colors-blueA6: hsla(212, 99.9%, 51.7%, 0.323);
|
||||
--colors-blueA7: hsla(211, 100%, 50.7%, 0.435);
|
||||
--colors-blueA8: hsla(211, 99.8%, 50.9%, 0.597);
|
||||
--colors-blueA9: hsla(205, 100%, 50%, 0.98);
|
||||
--colors-blueA10: hsla(208, 100%, 60.7%, 0.98);
|
||||
--colors-blueA11: hsla(209, 100%, 66.3%, 0.98);
|
||||
--colors-blueA12: hsla(196, 100%, 96.8%, 0.98);
|
||||
--colors-crimson1: hsl(335, 20%, 9.6%);
|
||||
--colors-crimson2: hsl(335, 32.2%, 11.6%);
|
||||
--colors-crimson3: hsl(335, 42.5%, 16.5%);
|
||||
--colors-crimson4: hsl(335, 47.2%, 19.3%);
|
||||
--colors-crimson5: hsl(335, 50.9%, 21.8%);
|
||||
--colors-crimson6: hsl(335, 55.7%, 25.3%);
|
||||
--colors-crimson7: hsl(336, 62.9%, 30.8%);
|
||||
--colors-crimson8: hsl(336, 74.9%, 39%);
|
||||
--colors-crimson9: hsl(336, 80%, 57.8%);
|
||||
--colors-crimson10: hsl(339, 84.1%, 62.6%);
|
||||
--colors-crimson11: hsl(341, 90%, 67.3%);
|
||||
--colors-crimson12: hsl(332, 87%, 96%);
|
||||
--colors-crimsonA1: hsla(0, 0%, 0%, 0);
|
||||
--colors-crimsonA2: hsla(336, 96.8%, 53.2%, 0.045);
|
||||
--colors-crimsonA3: hsla(335, 98.7%, 59.3%, 0.138);
|
||||
--colors-crimsonA4: hsla(336, 99.1%, 59.9%, 0.191);
|
||||
--colors-crimsonA5: hsla(335, 99.4%, 59.4%, 0.244);
|
||||
--colors-crimsonA6: hsla(335, 99.4%, 59.4%, 0.315);
|
||||
--colors-crimsonA7: hsla(336, 99.5%, 57.8%, 0.439);
|
||||
--colors-crimsonA8: hsla(336, 99.9%, 55.4%, 0.642);
|
||||
--colors-crimsonA9: hsla(336, 99.9%, 62.8%, 0.903);
|
||||
--colors-crimsonA10: hsla(339, 99.9%, 66.3%, 0.934);
|
||||
--colors-crimsonA11: hsla(341, 99.9%, 69.5%, 0.965);
|
||||
--colors-crimsonA12: hsla(327, 100%, 97.1%, 0.98);
|
||||
--colors-gold1: hsl(44, 9%, 8.3%);
|
||||
--colors-gold2: hsl(43, 14.3%, 9.6%);
|
||||
--colors-gold3: hsl(42, 15.5%, 13%);
|
||||
--colors-gold4: hsl(41, 16.4%, 15.6%);
|
||||
--colors-gold5: hsl(41, 16.9%, 17.8%);
|
||||
--colors-gold6: hsl(40, 17.6%, 20.8%);
|
||||
--colors-gold7: hsl(38, 18.5%, 26.4%);
|
||||
--colors-gold8: hsl(36, 19.6%, 35.1%);
|
||||
--colors-gold9: hsl(36, 20%, 49.5%);
|
||||
--colors-gold10: hsl(36, 22.3%, 54.5%);
|
||||
--colors-gold11: hsl(35, 30%, 64%);
|
||||
--colors-gold12: hsl(49, 52%, 93.8%);
|
||||
--colors-goldA1: hsla(0, 0%, 0%, 0);
|
||||
--colors-goldA2: hsla(40, 93.7%, 70.6%, 0.022);
|
||||
--colors-goldA3: hsla(40, 97.5%, 80.6%, 0.065);
|
||||
--colors-goldA4: hsla(40, 95.9%, 80.8%, 0.1);
|
||||
--colors-goldA5: hsla(38, 97.3%, 82.1%, 0.13);
|
||||
--colors-goldA6: hsla(39, 97.2%, 82.5%, 0.169);
|
||||
--colors-goldA7: hsla(37, 99.3%, 82.4%, 0.246);
|
||||
--colors-goldA8: hsla(35, 98.7%, 82.2%, 0.363);
|
||||
--colors-goldA9: hsla(36, 99.7%, 82.8%, 0.552);
|
||||
--colors-goldA10: hsla(35, 99.2%, 83.7%, 0.613);
|
||||
--colors-goldA11: hsla(35, 99.3%, 85.3%, 0.725);
|
||||
--colors-goldA12: hsla(49, 98.6%, 96.7%, 0.966);
|
||||
--colors-gray1: hsl(0, 0%, 8.5%);
|
||||
--colors-gray2: hsl(0, 0%, 11%);
|
||||
--colors-gray3: hsl(0, 0%, 13.6%);
|
||||
--colors-gray4: hsl(0, 0%, 15.8%);
|
||||
--colors-gray5: hsl(0, 0%, 17.9%);
|
||||
--colors-gray6: hsl(0, 0%, 20.5%);
|
||||
--colors-gray7: hsl(0, 0%, 24.3%);
|
||||
--colors-gray8: hsl(0, 0%, 31.2%);
|
||||
--colors-gray9: hsl(0, 0%, 43.9%);
|
||||
--colors-gray10: hsl(0, 0%, 49.4%);
|
||||
--colors-gray11: hsl(0, 0%, 62.8%);
|
||||
--colors-gray12: hsl(0, 0%, 93%);
|
||||
--colors-grayA1: hsla(0, 0%, 100%, 0);
|
||||
--colors-grayA2: hsla(0, 0%, 100%, 0.026);
|
||||
--colors-grayA3: hsla(0, 0%, 100%, 0.056);
|
||||
--colors-grayA4: hsla(0, 0%, 100%, 0.077);
|
||||
--colors-grayA5: hsla(0, 0%, 100%, 0.103);
|
||||
--colors-grayA6: hsla(0, 0%, 100%, 0.129);
|
||||
--colors-grayA7: hsla(0, 0%, 100%, 0.172);
|
||||
--colors-grayA8: hsla(0, 0%, 100%, 0.249);
|
||||
--colors-grayA9: hsla(0, 0%, 100%, 0.386);
|
||||
--colors-grayA10: hsla(0, 0%, 100%, 0.446);
|
||||
--colors-grayA11: hsla(0, 0%, 100%, 0.592);
|
||||
--colors-grayA12: hsla(0, 0%, 100%, 0.923);
|
||||
--colors-green1: hsl(146, 30%, 7.4%);
|
||||
--colors-green2: hsl(155, 44.2%, 8.4%);
|
||||
--colors-green3: hsl(155, 46.7%, 10.9%);
|
||||
--colors-green4: hsl(154, 48.4%, 12.9%);
|
||||
--colors-green5: hsl(154, 49.7%, 14.9%);
|
||||
--colors-green6: hsl(154, 50.9%, 17.6%);
|
||||
--colors-green7: hsl(153, 51.8%, 21.8%);
|
||||
--colors-green8: hsl(151, 51.7%, 28.4%);
|
||||
--colors-green9: hsl(151, 55%, 41.5%);
|
||||
--colors-green10: hsl(151, 49.3%, 46.5%);
|
||||
--colors-green11: hsl(151, 50%, 53.2%);
|
||||
--colors-green12: hsl(137, 72%, 94%);
|
||||
--colors-greenA1: hsla(0, 0%, 0%, 0);
|
||||
--colors-greenA2: hsla(169, 100%, 48.5%, 0.027);
|
||||
--colors-greenA3: hsla(162, 98.7%, 57.9%, 0.07);
|
||||
--colors-greenA4: hsla(158, 98.6%, 59.7%, 0.105);
|
||||
--colors-greenA5: hsla(158, 98.6%, 60.7%, 0.14);
|
||||
--colors-greenA6: hsla(156, 99.9%, 62%, 0.187);
|
||||
--colors-greenA7: hsla(154, 99.5%, 63.1%, 0.257);
|
||||
--colors-greenA8: hsla(152, 99.7%, 64.2%, 0.37);
|
||||
--colors-greenA9: hsla(151, 99.7%, 63.8%, 0.605);
|
||||
--colors-greenA10: hsla(152, 99.9%, 66.5%, 0.661);
|
||||
--colors-greenA11: hsla(151, 99.7%, 69.2%, 0.74);
|
||||
--colors-greenA12: hsla(137, 100%, 95.8%, 0.98);
|
||||
--colors-indigo1: hsl(229, 24%, 10%);
|
||||
--colors-indigo2: hsl(230, 36.4%, 12.9%);
|
||||
--colors-indigo3: hsl(228, 43.3%, 17.5%);
|
||||
--colors-indigo4: hsl(227, 47.2%, 21%);
|
||||
--colors-indigo5: hsl(227, 50%, 24.1%);
|
||||
--colors-indigo6: hsl(226, 52.9%, 28.2%);
|
||||
--colors-indigo7: hsl(226, 56%, 34.5%);
|
||||
--colors-indigo8: hsl(226, 58.2%, 44.1%);
|
||||
--colors-indigo9: hsl(226, 70%, 55.5%);
|
||||
--colors-indigo10: hsl(227, 75.2%, 61.6%);
|
||||
--colors-indigo11: hsl(228, 100%, 75.9%);
|
||||
--colors-indigo12: hsl(226, 83%, 96.3%);
|
||||
--colors-indigoA1: hsla(0, 0%, 0%, 0);
|
||||
--colors-indigoA2: hsla(234, 97.4%, 59.9%, 0.059);
|
||||
--colors-indigoA3: hsla(228, 99.2%, 61.7%, 0.144);
|
||||
--colors-indigoA4: hsla(227, 99.7%, 62%, 0.211);
|
||||
--colors-indigoA5: hsla(227, 99.2%, 62.3%, 0.27);
|
||||
--colors-indigoA6: hsla(226, 99.9%, 62.1%, 0.35);
|
||||
--colors-indigoA7: hsla(226, 99.9%, 62%, 0.471);
|
||||
--colors-indigoA8: hsla(226, 99.9%, 62.1%, 0.655);
|
||||
--colors-indigoA9: hsla(226, 99.9%, 63.6%, 0.848);
|
||||
--colors-indigoA10: hsla(227, 99.8%, 67.7%, 0.893);
|
||||
--colors-indigoA11: hsla(227, 100%, 76.3%, 0.98);
|
||||
--colors-indigoA12: hsla(226, 100%, 97.5%, 0.98);
|
||||
--colors-orange1: hsl(30, 70%, 7.2%);
|
||||
--colors-orange2: hsl(28, 100%, 8.4%);
|
||||
--colors-orange3: hsl(26, 91.1%, 11.6%);
|
||||
--colors-orange4: hsl(25, 88.3%, 14.1%);
|
||||
--colors-orange5: hsl(24, 87.6%, 16.6%);
|
||||
--colors-orange6: hsl(24, 88.6%, 19.8%);
|
||||
--colors-orange7: hsl(24, 92.4%, 24%);
|
||||
--colors-orange8: hsl(25, 100%, 29%);
|
||||
--colors-orange9: hsl(24, 94%, 50%);
|
||||
--colors-orange10: hsl(24, 100%, 58.5%);
|
||||
--colors-orange11: hsl(24, 100%, 62.2%);
|
||||
--colors-orange12: hsl(24, 97%, 93.2%);
|
||||
--colors-orangeA1: hsla(0, 0%, 0%, 0);
|
||||
--colors-orangeA2: hsla(13, 100%, 49.7%, 0.054);
|
||||
--colors-orangeA3: hsla(20, 100%, 49.7%, 0.117);
|
||||
--colors-orangeA4: hsla(23, 100%, 49.8%, 0.166);
|
||||
--colors-orangeA5: hsla(23, 99.4%, 50.1%, 0.215);
|
||||
--colors-orangeA6: hsla(23, 99.8%, 51.1%, 0.286);
|
||||
--colors-orangeA7: hsla(23, 99.7%, 50.6%, 0.389);
|
||||
--colors-orangeA8: hsla(24, 100%, 49.9%, 0.523);
|
||||
--colors-orangeA9: hsla(24, 99.9%, 51.6%, 0.965);
|
||||
--colors-orangeA10: hsla(25, 100%, 58.6%, 0.98);
|
||||
--colors-orangeA11: hsla(24, 100%, 62.4%, 0.98);
|
||||
--colors-orangeA12: hsla(26, 100%, 94.2%, 0.98);
|
||||
--colors-pink1: hsl(318, 25%, 9.6%);
|
||||
--colors-pink2: hsl(319, 32.2%, 11.6%);
|
||||
--colors-pink3: hsl(319, 41%, 16%);
|
||||
--colors-pink4: hsl(320, 45.4%, 18.7%);
|
||||
--colors-pink5: hsl(320, 49%, 21.1%);
|
||||
--colors-pink6: hsl(321, 53.6%, 24.4%);
|
||||
--colors-pink7: hsl(321, 61.1%, 29.7%);
|
||||
--colors-pink8: hsl(322, 74.9%, 37.5%);
|
||||
--colors-pink9: hsl(322, 65%, 54.5%);
|
||||
--colors-pink10: hsl(323, 72.8%, 59.2%);
|
||||
--colors-pink11: hsl(325, 90%, 66.4%);
|
||||
--colors-pink12: hsl(322, 90%, 95.8%);
|
||||
--colors-pinkA1: hsla(0, 0%, 0%, 0);
|
||||
--colors-pinkA2: hsla(320, 98.1%, 64.1%, 0.036);
|
||||
--colors-pinkA3: hsla(320, 99.1%, 63.1%, 0.121);
|
||||
--colors-pinkA4: hsla(320, 99.5%, 62.7%, 0.17);
|
||||
--colors-pinkA5: hsla(319, 99.7%, 61.5%, 0.219);
|
||||
--colors-pinkA6: hsla(322, 99.4%, 60.8%, 0.291);
|
||||
--colors-pinkA7: hsla(321, 99.6%, 58.7%, 0.407);
|
||||
--colors-pinkA8: hsla(322, 99.7%, 55.4%, 0.608);
|
||||
--colors-pinkA9: hsla(322, 100%, 64.6%, 0.817);
|
||||
--colors-pinkA10: hsla(323, 100%, 66.3%, 0.875);
|
||||
--colors-pinkA11: hsla(325, 99.9%, 68.6%, 0.96);
|
||||
--colors-pinkA12: hsla(314, 100%, 96.9%, 0.98);
|
||||
--colors-purple1: hsl(284, 20%, 9.6%);
|
||||
--colors-purple2: hsl(283, 30%, 11.8%);
|
||||
--colors-purple3: hsl(281, 37.5%, 16.5%);
|
||||
--colors-purple4: hsl(280, 41.2%, 20%);
|
||||
--colors-purple5: hsl(279, 43.8%, 23.3%);
|
||||
--colors-purple6: hsl(277, 46.4%, 27.5%);
|
||||
--colors-purple7: hsl(275, 49.3%, 34.6%);
|
||||
--colors-purple8: hsl(272, 52.1%, 45.9%);
|
||||
--colors-purple9: hsl(272, 51%, 54%);
|
||||
--colors-purple10: hsl(273, 57.3%, 59.1%);
|
||||
--colors-purple11: hsl(275, 80%, 71%);
|
||||
--colors-purple12: hsl(279, 75%, 95.7%);
|
||||
--colors-purpleA1: hsla(0, 0%, 0%, 0);
|
||||
--colors-purpleA2: hsla(280, 96.5%, 57.5%, 0.045);
|
||||
--colors-purpleA3: hsla(279, 98.7%, 62.8%, 0.129);
|
||||
--colors-purpleA4: hsla(279, 99.1%, 64%, 0.191);
|
||||
--colors-purpleA5: hsla(278, 99.8%, 64.2%, 0.248);
|
||||
--colors-purpleA6: hsla(276, 99.6%, 64.6%, 0.328);
|
||||
--colors-purpleA7: hsla(274, 99.9%, 64.6%, 0.456);
|
||||
--colors-purpleA8: hsla(272, 99.7%, 64.6%, 0.66);
|
||||
--colors-purpleA9: hsla(272, 99.9%, 69.1%, 0.748);
|
||||
--colors-purpleA10: hsla(273, 100%, 71.3%, 0.801);
|
||||
--colors-purpleA11: hsla(275, 99.9%, 75.3%, 0.934);
|
||||
--colors-purpleA12: hsla(286, 100%, 97.1%, 0.98);
|
||||
--colors-red1: hsl(353, 23%, 9.8%);
|
||||
--colors-red2: hsl(357, 34.4%, 12%);
|
||||
--colors-red3: hsl(356, 43.4%, 16.4%);
|
||||
--colors-red4: hsl(356, 47.6%, 19.2%);
|
||||
--colors-red5: hsl(356, 51.1%, 21.9%);
|
||||
--colors-red6: hsl(356, 55.2%, 25.9%);
|
||||
--colors-red7: hsl(357, 60.2%, 31.8%);
|
||||
--colors-red8: hsl(358, 65%, 40.4%);
|
||||
--colors-red9: hsl(358, 75%, 59%);
|
||||
--colors-red10: hsl(358, 85.3%, 64%);
|
||||
--colors-red11: hsl(358, 100%, 69.5%);
|
||||
--colors-red12: hsl(351, 89%, 96%);
|
||||
--colors-redA1: hsla(0, 0%, 0%, 0);
|
||||
--colors-redA2: hsla(5, 98.5%, 53.8%, 0.045);
|
||||
--colors-redA3: hsla(359, 99.1%, 61.1%, 0.13);
|
||||
--colors-redA4: hsla(358, 98.8%, 61%, 0.184);
|
||||
--colors-redA5: hsla(357, 99.6%, 60.3%, 0.237);
|
||||
--colors-redA6: hsla(358, 99.6%, 60.3%, 0.322);
|
||||
--colors-redA7: hsla(357, 100%, 59.5%, 0.442);
|
||||
--colors-redA8: hsla(358, 99.8%, 59.1%, 0.621);
|
||||
--colors-redA9: hsla(358, 100%, 65.5%, 0.884);
|
||||
--colors-redA10: hsla(358, 100%, 67.5%, 0.942);
|
||||
--colors-redA11: hsla(358, 100%, 69.7%, 0.98);
|
||||
--colors-redA12: hsla(352, 100%, 97.1%, 0.98);
|
||||
--colors-slate1: hsl(200, 7%, 8.8%);
|
||||
--colors-slate2: hsl(195, 7.1%, 11%);
|
||||
--colors-slate3: hsl(197, 6.8%, 13.6%);
|
||||
--colors-slate4: hsl(198, 6.6%, 15.8%);
|
||||
--colors-slate5: hsl(199, 6.4%, 17.9%);
|
||||
--colors-slate6: hsl(201, 6.2%, 20.5%);
|
||||
--colors-slate7: hsl(203, 6%, 24.3%);
|
||||
--colors-slate8: hsl(207, 5.6%, 31.6%);
|
||||
--colors-slate9: hsl(206, 6%, 43.9%);
|
||||
--colors-slate10: hsl(206, 5.2%, 49.5%);
|
||||
--colors-slate11: hsl(206, 6%, 63%);
|
||||
--colors-slate12: hsl(210, 6%, 93%);
|
||||
--colors-slateA1: hsla(0, 0%, 0%, 0);
|
||||
--colors-slateA2: hsla(181, 98.9%, 91.8%, 0.026);
|
||||
--colors-slateA3: hsla(182, 86.7%, 91.4%, 0.057);
|
||||
--colors-slateA4: hsla(209, 86.7%, 93.9%, 0.083);
|
||||
--colors-slateA5: hsla(200, 90.3%, 93.4%, 0.109);
|
||||
--colors-slateA6: hsla(209, 95.3%, 93.5%, 0.139);
|
||||
--colors-slateA7: hsla(204, 98.5%, 93.9%, 0.182);
|
||||
--colors-slateA8: hsla(209, 94%, 94.7%, 0.265);
|
||||
--colors-slateA9: hsla(207, 97.3%, 94%, 0.412);
|
||||
--colors-slateA10: hsla(209, 99.4%, 95.2%, 0.472);
|
||||
--colors-slateA11: hsla(208, 98.7%, 96.8%, 0.615);
|
||||
--colors-slateA12: hsla(211, 86.7%, 99.6%, 0.927);
|
||||
--colors-tomato1: hsl(10, 23%, 9.4%);
|
||||
--colors-tomato2: hsl(9, 44.8%, 11.4%);
|
||||
--colors-tomato3: hsl(8, 52%, 15.3%);
|
||||
--colors-tomato4: hsl(7, 56.3%, 18%);
|
||||
--colors-tomato5: hsl(7, 60.1%, 20.6%);
|
||||
--colors-tomato6: hsl(8, 64.8%, 24%);
|
||||
--colors-tomato7: hsl(8, 71.2%, 29.1%);
|
||||
--colors-tomato8: hsl(10, 80.2%, 35.7%);
|
||||
--colors-tomato9: hsl(10, 78%, 54%);
|
||||
--colors-tomato10: hsl(10, 81.7%, 59%);
|
||||
--colors-tomato11: hsl(10, 85%, 62.8%);
|
||||
--colors-tomato12: hsl(10, 89%, 96%);
|
||||
--colors-tomatoA1: hsla(0, 0%, 0%, 0);
|
||||
--colors-tomatoA2: hsla(5, 100%, 49.6%, 0.058);
|
||||
--colors-tomatoA3: hsla(6, 99.6%, 54.9%, 0.133);
|
||||
--colors-tomatoA4: hsla(6, 99.2%, 55.4%, 0.191);
|
||||
--colors-tomatoA5: hsla(6, 99.5%, 55.8%, 0.244);
|
||||
--colors-tomatoA6: hsla(7, 99.7%, 55.9%, 0.319);
|
||||
--colors-tomatoA7: hsla(8, 99.8%, 54.8%, 0.434);
|
||||
--colors-tomatoA8: hsla(10, 99.8%, 53.5%, 0.598);
|
||||
--colors-tomatoA9: hsla(10, 100%, 59.7%, 0.885);
|
||||
--colors-tomatoA10: hsla(10, 100%, 63.6%, 0.916);
|
||||
--colors-tomatoA11: hsla(10, 99.7%, 66.4%, 0.939);
|
||||
--colors-tomatoA12: hsla(12, 100%, 97.1%, 0.98);
|
||||
--colors-violet1: hsl(250, 20%, 10.2%);
|
||||
--colors-violet2: hsl(255, 30.3%, 12.9%);
|
||||
--colors-violet3: hsl(253, 37%, 18.4%);
|
||||
--colors-violet4: hsl(252, 40.1%, 22.5%);
|
||||
--colors-violet5: hsl(252, 42.2%, 26.2%);
|
||||
--colors-violet6: hsl(251, 44.3%, 31.1%);
|
||||
--colors-violet7: hsl(250, 46.8%, 38.9%);
|
||||
--colors-violet8: hsl(250, 51.8%, 51.2%);
|
||||
--colors-violet9: hsl(252, 56%, 57.5%);
|
||||
--colors-violet10: hsl(251, 63.2%, 63.2%);
|
||||
--colors-violet11: hsl(250, 95%, 76.8%);
|
||||
--colors-violet12: hsl(252, 87%, 96.4%);
|
||||
--colors-violetA1: hsla(0, 0%, 0%, 0);
|
||||
--colors-violetA2: hsla(258, 98.2%, 61%, 0.054);
|
||||
--colors-violetA3: hsla(252, 98.8%, 65.8%, 0.148);
|
||||
--colors-violetA4: hsla(253, 99.7%, 65.7%, 0.219);
|
||||
--colors-violetA5: hsla(252, 99.7%, 66.4%, 0.286);
|
||||
--colors-violetA6: hsla(251, 99.7%, 66.2%, 0.371);
|
||||
--colors-violetA7: hsla(250, 99.7%, 66.3%, 0.514);
|
||||
--colors-violetA8: hsla(250, 99.7%, 66.1%, 0.733);
|
||||
--colors-violetA9: hsla(252, 99.9%, 70.3%, 0.786);
|
||||
--colors-violetA10: hsla(251, 99.9%, 72.9%, 0.844);
|
||||
--colors-violetA11: hsla(250, 100%, 77.9%, 0.98);
|
||||
--colors-violetA12: hsla(254, 100%, 97.5%, 0.98);
|
||||
--colors-yellow1: hsl(45, 100%, 5.5%);
|
||||
--colors-yellow2: hsl(46, 100%, 6.7%);
|
||||
--colors-yellow3: hsl(45, 100%, 8.7%);
|
||||
--colors-yellow4: hsl(45, 100%, 10.4%);
|
||||
--colors-yellow5: hsl(47, 100%, 12.1%);
|
||||
--colors-yellow6: hsl(49, 100%, 14.3%);
|
||||
--colors-yellow7: hsl(49, 90.3%, 18.4%);
|
||||
--colors-yellow8: hsl(50, 100%, 22%);
|
||||
--colors-yellow9: hsl(53, 92%, 50%);
|
||||
--colors-yellow10: hsl(54, 100%, 68%);
|
||||
--colors-yellow11: hsl(48, 100%, 47%);
|
||||
--colors-yellow12: hsl(53, 100%, 91%);
|
||||
--colors-yellowA1: hsla(0, 0%, 0%, 0);
|
||||
--colors-yellowA2: hsla(49, 100%, 49.1%, 0.027);
|
||||
--colors-yellowA3: hsla(45, 100%, 49.7%, 0.071);
|
||||
--colors-yellowA4: hsla(46, 100%, 49.7%, 0.111);
|
||||
--colors-yellowA5: hsla(47, 100%, 49.9%, 0.15);
|
||||
--colors-yellowA6: hsla(51, 100%, 49.8%, 0.199);
|
||||
--colors-yellowA7: hsla(51, 99.8%, 53.6%, 0.269);
|
||||
--colors-yellowA8: hsla(51, 100%, 49.9%, 0.371);
|
||||
--colors-yellowA9: hsla(53, 100%, 52%, 0.956);
|
||||
--colors-yellowA10: hsla(56, 100%, 68.4%, 0.98);
|
||||
--colors-yellowA11: hsla(48, 100%, 50%, 0.934);
|
||||
--colors-yellowA12: hsla(60, 100%, 91.8%, 0.98);
|
||||
--colors-scale1: var(--colors-gray1);
|
||||
--colors-scaleA1: var(--colors-grayA1);
|
||||
--colors-scale2: var(--colors-gray2);
|
||||
--colors-scaleA2: var(--colors-grayA2);
|
||||
--colors-scale3: var(--colors-gray3);
|
||||
--colors-scaleA3: var(--colors-grayA3);
|
||||
--colors-scale4: var(--colors-gray4);
|
||||
--colors-scaleA4: var(--colors-grayA4);
|
||||
--colors-scale5: var(--colors-gray5);
|
||||
--colors-scaleA5: var(--colors-grayA5);
|
||||
--colors-scale6: var(--colors-gray6);
|
||||
--colors-scaleA6: var(--colors-grayA6);
|
||||
--colors-scale7: var(--colors-gray7);
|
||||
--colors-scaleA7: var(--colors-grayA7);
|
||||
--colors-scale8: var(--colors-gray8);
|
||||
--colors-scaleA8: var(--colors-grayA8);
|
||||
--colors-scale9: var(--colors-gray9);
|
||||
--colors-scaleA9: var(--colors-grayA9);
|
||||
--colors-scale10: var(--colors-gray10);
|
||||
--colors-scaleA10: var(--colors-grayA10);
|
||||
--colors-scale11: #bbbbbb;
|
||||
--colors-scaleA11: var(--colors-grayA11);
|
||||
--colors-scale12: var(--colors-gray12);
|
||||
--colors-scaleA12: var(--colors-grayA12);
|
||||
}
|
||||
@@ -0,0 +1,563 @@
|
||||
/*
|
||||
* Auto-generated by scripts/generate-colors.js — do not edit by hand.
|
||||
* Run `node scripts/generate-colors.js` from packages/config/ to refresh.
|
||||
*
|
||||
* Defines every Tailwind v4 --color-* design token. Tailwind generates
|
||||
* bg-{name} / text-{name} / border-{name} / ring-{name} / border-{r,l,t,b}-{name}
|
||||
* utilities for each entry. Semantic tokens wrap their HSL triplet in hsl();
|
||||
* Radix/scale tokens self-reference the var declared in colors.css :root.
|
||||
* Source mappings: tw-extend-color-snapshot.js (semantic tokens) plus the
|
||||
* Radix and scale aliases from radix-vars.css.
|
||||
*/
|
||||
|
||||
@theme inline {
|
||||
--color-foreground: hsl(var(--foreground-default));
|
||||
--color-foreground-light: hsl(var(--foreground-light));
|
||||
--color-foreground-lighter: hsl(var(--foreground-lighter));
|
||||
--color-foreground-muted: hsl(var(--foreground-muted));
|
||||
--color-foreground-contrast: hsl(var(--foreground-contrast));
|
||||
--color-background-200: hsl(var(--background-200));
|
||||
--color-background: hsl(var(--background-default));
|
||||
--color-background-alternative-200: hsl(var(--background-alternative-200));
|
||||
--color-background-alternative: hsl(var(--background-alternative-default));
|
||||
--color-background-selection: hsl(var(--background-selection));
|
||||
--color-background-control: hsl(var(--background-control));
|
||||
--color-background-surface-75: hsl(var(--background-surface-75));
|
||||
--color-background-surface-100: hsl(var(--background-surface-100));
|
||||
--color-background-surface-200: hsl(var(--background-surface-200));
|
||||
--color-background-surface-300: hsl(var(--background-surface-300));
|
||||
--color-background-surface-400: hsl(var(--background-surface-400));
|
||||
--color-background-overlay: hsl(var(--background-overlay-default));
|
||||
--color-background-overlay-hover: hsl(var(--background-overlay-hover));
|
||||
--color-background-muted: hsl(var(--background-muted));
|
||||
--color-background-button: hsl(var(--background-button-default));
|
||||
--color-background-dialog: hsl(var(--background-dialog-default));
|
||||
--color-background-dash-sidebar: hsl(var(--background-dash-sidebar));
|
||||
--color-background-dash-canvas: hsl(var(--background-dash-canvas));
|
||||
--color-destructive-200: hsl(var(--destructive-200));
|
||||
--color-destructive-300: hsl(var(--destructive-300));
|
||||
--color-destructive-400: hsl(var(--destructive-400));
|
||||
--color-destructive-500: hsl(var(--destructive-500));
|
||||
--color-destructive-600: hsl(var(--destructive-600));
|
||||
--color-destructive: hsl(var(--destructive-default));
|
||||
--color-warning-200: hsl(var(--warning-200));
|
||||
--color-warning-300: hsl(var(--warning-300));
|
||||
--color-warning-400: hsl(var(--warning-400));
|
||||
--color-warning-500: hsl(var(--warning-500));
|
||||
--color-warning-600: hsl(var(--warning-600));
|
||||
--color-warning: hsl(var(--warning-default));
|
||||
--color-brand-200: hsl(var(--brand-200));
|
||||
--color-brand-300: hsl(var(--brand-300));
|
||||
--color-brand-400: hsl(var(--brand-400));
|
||||
--color-brand-500: hsl(var(--brand-500));
|
||||
--color-brand-600: hsl(var(--brand-600));
|
||||
--color-brand: hsl(var(--brand-default));
|
||||
--color-brand-link: hsl(var(--brand-link));
|
||||
--color-_secondary-200: hsl(var(--secondary-200));
|
||||
--color-_secondary-400: hsl(var(--secondary-400));
|
||||
--color-_secondary: hsl(var(--secondary-default));
|
||||
--color-code_block-1: hsl(var(--code-block-1));
|
||||
--color-code_block-2: hsl(var(--code-block-2));
|
||||
--color-code_block-3: hsl(var(--code-block-3));
|
||||
--color-code_block-4: hsl(var(--code-block-4));
|
||||
--color-code_block-5: hsl(var(--code-block-5));
|
||||
--color-amber-100: var(--color-amber-100);
|
||||
--color-amberA-100: var(--color-amberA-100);
|
||||
--color-amber-200: var(--color-amber-200);
|
||||
--color-amberA-200: var(--color-amberA-200);
|
||||
--color-amber-300: var(--color-amber-300);
|
||||
--color-amberA-300: var(--color-amberA-300);
|
||||
--color-amber-400: var(--color-amber-400);
|
||||
--color-amberA-400: var(--color-amberA-400);
|
||||
--color-amber-500: var(--color-amber-500);
|
||||
--color-amberA-500: var(--color-amberA-500);
|
||||
--color-amber-600: var(--color-amber-600);
|
||||
--color-amberA-600: var(--color-amberA-600);
|
||||
--color-amber-700: var(--color-amber-700);
|
||||
--color-amberA-700: var(--color-amberA-700);
|
||||
--color-amber-800: var(--color-amber-800);
|
||||
--color-amberA-800: var(--color-amberA-800);
|
||||
--color-amber-900: var(--color-amber-900);
|
||||
--color-amberA-900: var(--color-amberA-900);
|
||||
--color-amber-1000: var(--color-amber-1000);
|
||||
--color-amberA-1000: var(--color-amberA-1000);
|
||||
--color-amber-1100: var(--color-amber-1100);
|
||||
--color-amberA-1100: var(--color-amberA-1100);
|
||||
--color-amber-1200: var(--color-amber-1200);
|
||||
--color-amberA-1200: var(--color-amberA-1200);
|
||||
--color-blue-100: var(--color-blue-100);
|
||||
--color-blueA-100: var(--color-blueA-100);
|
||||
--color-blue-200: var(--color-blue-200);
|
||||
--color-blueA-200: var(--color-blueA-200);
|
||||
--color-blue-300: var(--color-blue-300);
|
||||
--color-blueA-300: var(--color-blueA-300);
|
||||
--color-blue-400: var(--color-blue-400);
|
||||
--color-blueA-400: var(--color-blueA-400);
|
||||
--color-blue-500: var(--color-blue-500);
|
||||
--color-blueA-500: var(--color-blueA-500);
|
||||
--color-blue-600: var(--color-blue-600);
|
||||
--color-blueA-600: var(--color-blueA-600);
|
||||
--color-blue-700: var(--color-blue-700);
|
||||
--color-blueA-700: var(--color-blueA-700);
|
||||
--color-blue-800: var(--color-blue-800);
|
||||
--color-blueA-800: var(--color-blueA-800);
|
||||
--color-blue-900: var(--color-blue-900);
|
||||
--color-blueA-900: var(--color-blueA-900);
|
||||
--color-blue-1000: var(--color-blue-1000);
|
||||
--color-blueA-1000: var(--color-blueA-1000);
|
||||
--color-blue-1100: var(--color-blue-1100);
|
||||
--color-blueA-1100: var(--color-blueA-1100);
|
||||
--color-blue-1200: var(--color-blue-1200);
|
||||
--color-blueA-1200: var(--color-blueA-1200);
|
||||
--color-crimson-100: var(--color-crimson-100);
|
||||
--color-crimsonA-100: var(--color-crimsonA-100);
|
||||
--color-crimson-200: var(--color-crimson-200);
|
||||
--color-crimsonA-200: var(--color-crimsonA-200);
|
||||
--color-crimson-300: var(--color-crimson-300);
|
||||
--color-crimsonA-300: var(--color-crimsonA-300);
|
||||
--color-crimson-400: var(--color-crimson-400);
|
||||
--color-crimsonA-400: var(--color-crimsonA-400);
|
||||
--color-crimson-500: var(--color-crimson-500);
|
||||
--color-crimsonA-500: var(--color-crimsonA-500);
|
||||
--color-crimson-600: var(--color-crimson-600);
|
||||
--color-crimsonA-600: var(--color-crimsonA-600);
|
||||
--color-crimson-700: var(--color-crimson-700);
|
||||
--color-crimsonA-700: var(--color-crimsonA-700);
|
||||
--color-crimson-800: var(--color-crimson-800);
|
||||
--color-crimsonA-800: var(--color-crimsonA-800);
|
||||
--color-crimson-900: var(--color-crimson-900);
|
||||
--color-crimsonA-900: var(--color-crimsonA-900);
|
||||
--color-crimson-1000: var(--color-crimson-1000);
|
||||
--color-crimsonA-1000: var(--color-crimsonA-1000);
|
||||
--color-crimson-1100: var(--color-crimson-1100);
|
||||
--color-crimsonA-1100: var(--color-crimsonA-1100);
|
||||
--color-crimson-1200: var(--color-crimson-1200);
|
||||
--color-crimsonA-1200: var(--color-crimsonA-1200);
|
||||
--color-gold-100: var(--color-gold-100);
|
||||
--color-goldA-100: var(--color-goldA-100);
|
||||
--color-gold-200: var(--color-gold-200);
|
||||
--color-goldA-200: var(--color-goldA-200);
|
||||
--color-gold-300: var(--color-gold-300);
|
||||
--color-goldA-300: var(--color-goldA-300);
|
||||
--color-gold-400: var(--color-gold-400);
|
||||
--color-goldA-400: var(--color-goldA-400);
|
||||
--color-gold-500: var(--color-gold-500);
|
||||
--color-goldA-500: var(--color-goldA-500);
|
||||
--color-gold-600: var(--color-gold-600);
|
||||
--color-goldA-600: var(--color-goldA-600);
|
||||
--color-gold-700: var(--color-gold-700);
|
||||
--color-goldA-700: var(--color-goldA-700);
|
||||
--color-gold-800: var(--color-gold-800);
|
||||
--color-goldA-800: var(--color-goldA-800);
|
||||
--color-gold-900: var(--color-gold-900);
|
||||
--color-goldA-900: var(--color-goldA-900);
|
||||
--color-gold-1000: var(--color-gold-1000);
|
||||
--color-goldA-1000: var(--color-goldA-1000);
|
||||
--color-gold-1100: var(--color-gold-1100);
|
||||
--color-goldA-1100: var(--color-goldA-1100);
|
||||
--color-gold-1200: var(--color-gold-1200);
|
||||
--color-goldA-1200: var(--color-goldA-1200);
|
||||
--color-gray-100: var(--color-gray-100);
|
||||
--color-grayA-100: var(--color-grayA-100);
|
||||
--color-gray-200: var(--color-gray-200);
|
||||
--color-grayA-200: var(--color-grayA-200);
|
||||
--color-gray-300: var(--color-gray-300);
|
||||
--color-grayA-300: var(--color-grayA-300);
|
||||
--color-gray-400: var(--color-gray-400);
|
||||
--color-grayA-400: var(--color-grayA-400);
|
||||
--color-gray-500: var(--color-gray-500);
|
||||
--color-grayA-500: var(--color-grayA-500);
|
||||
--color-gray-600: var(--color-gray-600);
|
||||
--color-grayA-600: var(--color-grayA-600);
|
||||
--color-gray-700: var(--color-gray-700);
|
||||
--color-grayA-700: var(--color-grayA-700);
|
||||
--color-gray-800: var(--color-gray-800);
|
||||
--color-grayA-800: var(--color-grayA-800);
|
||||
--color-gray-900: var(--color-gray-900);
|
||||
--color-grayA-900: var(--color-grayA-900);
|
||||
--color-gray-1000: var(--color-gray-1000);
|
||||
--color-grayA-1000: var(--color-grayA-1000);
|
||||
--color-gray-1100: var(--color-gray-1100);
|
||||
--color-grayA-1100: var(--color-grayA-1100);
|
||||
--color-gray-1200: var(--color-gray-1200);
|
||||
--color-grayA-1200: var(--color-grayA-1200);
|
||||
--color-green-100: var(--color-green-100);
|
||||
--color-greenA-100: var(--color-greenA-100);
|
||||
--color-green-200: var(--color-green-200);
|
||||
--color-greenA-200: var(--color-greenA-200);
|
||||
--color-green-300: var(--color-green-300);
|
||||
--color-greenA-300: var(--color-greenA-300);
|
||||
--color-green-400: var(--color-green-400);
|
||||
--color-greenA-400: var(--color-greenA-400);
|
||||
--color-green-500: var(--color-green-500);
|
||||
--color-greenA-500: var(--color-greenA-500);
|
||||
--color-green-600: var(--color-green-600);
|
||||
--color-greenA-600: var(--color-greenA-600);
|
||||
--color-green-700: var(--color-green-700);
|
||||
--color-greenA-700: var(--color-greenA-700);
|
||||
--color-green-800: var(--color-green-800);
|
||||
--color-greenA-800: var(--color-greenA-800);
|
||||
--color-green-900: var(--color-green-900);
|
||||
--color-greenA-900: var(--color-greenA-900);
|
||||
--color-green-1000: var(--color-green-1000);
|
||||
--color-greenA-1000: var(--color-greenA-1000);
|
||||
--color-green-1100: var(--color-green-1100);
|
||||
--color-greenA-1100: var(--color-greenA-1100);
|
||||
--color-green-1200: var(--color-green-1200);
|
||||
--color-greenA-1200: var(--color-greenA-1200);
|
||||
--color-indigo-100: var(--color-indigo-100);
|
||||
--color-indigoA-100: var(--color-indigoA-100);
|
||||
--color-indigo-200: var(--color-indigo-200);
|
||||
--color-indigoA-200: var(--color-indigoA-200);
|
||||
--color-indigo-300: var(--color-indigo-300);
|
||||
--color-indigoA-300: var(--color-indigoA-300);
|
||||
--color-indigo-400: var(--color-indigo-400);
|
||||
--color-indigoA-400: var(--color-indigoA-400);
|
||||
--color-indigo-500: var(--color-indigo-500);
|
||||
--color-indigoA-500: var(--color-indigoA-500);
|
||||
--color-indigo-600: var(--color-indigo-600);
|
||||
--color-indigoA-600: var(--color-indigoA-600);
|
||||
--color-indigo-700: var(--color-indigo-700);
|
||||
--color-indigoA-700: var(--color-indigoA-700);
|
||||
--color-indigo-800: var(--color-indigo-800);
|
||||
--color-indigoA-800: var(--color-indigoA-800);
|
||||
--color-indigo-900: var(--color-indigo-900);
|
||||
--color-indigoA-900: var(--color-indigoA-900);
|
||||
--color-indigo-1000: var(--color-indigo-1000);
|
||||
--color-indigoA-1000: var(--color-indigoA-1000);
|
||||
--color-indigo-1100: var(--color-indigo-1100);
|
||||
--color-indigoA-1100: var(--color-indigoA-1100);
|
||||
--color-indigo-1200: var(--color-indigo-1200);
|
||||
--color-indigoA-1200: var(--color-indigoA-1200);
|
||||
--color-orange-100: var(--color-orange-100);
|
||||
--color-orangeA-100: var(--color-orangeA-100);
|
||||
--color-orange-200: var(--color-orange-200);
|
||||
--color-orangeA-200: var(--color-orangeA-200);
|
||||
--color-orange-300: var(--color-orange-300);
|
||||
--color-orangeA-300: var(--color-orangeA-300);
|
||||
--color-orange-400: var(--color-orange-400);
|
||||
--color-orangeA-400: var(--color-orangeA-400);
|
||||
--color-orange-500: var(--color-orange-500);
|
||||
--color-orangeA-500: var(--color-orangeA-500);
|
||||
--color-orange-600: var(--color-orange-600);
|
||||
--color-orangeA-600: var(--color-orangeA-600);
|
||||
--color-orange-700: var(--color-orange-700);
|
||||
--color-orangeA-700: var(--color-orangeA-700);
|
||||
--color-orange-800: var(--color-orange-800);
|
||||
--color-orangeA-800: var(--color-orangeA-800);
|
||||
--color-orange-900: var(--color-orange-900);
|
||||
--color-orangeA-900: var(--color-orangeA-900);
|
||||
--color-orange-1000: var(--color-orange-1000);
|
||||
--color-orangeA-1000: var(--color-orangeA-1000);
|
||||
--color-orange-1100: var(--color-orange-1100);
|
||||
--color-orangeA-1100: var(--color-orangeA-1100);
|
||||
--color-orange-1200: var(--color-orange-1200);
|
||||
--color-orangeA-1200: var(--color-orangeA-1200);
|
||||
--color-pink-100: var(--color-pink-100);
|
||||
--color-pinkA-100: var(--color-pinkA-100);
|
||||
--color-pink-200: var(--color-pink-200);
|
||||
--color-pinkA-200: var(--color-pinkA-200);
|
||||
--color-pink-300: var(--color-pink-300);
|
||||
--color-pinkA-300: var(--color-pinkA-300);
|
||||
--color-pink-400: var(--color-pink-400);
|
||||
--color-pinkA-400: var(--color-pinkA-400);
|
||||
--color-pink-500: var(--color-pink-500);
|
||||
--color-pinkA-500: var(--color-pinkA-500);
|
||||
--color-pink-600: var(--color-pink-600);
|
||||
--color-pinkA-600: var(--color-pinkA-600);
|
||||
--color-pink-700: var(--color-pink-700);
|
||||
--color-pinkA-700: var(--color-pinkA-700);
|
||||
--color-pink-800: var(--color-pink-800);
|
||||
--color-pinkA-800: var(--color-pinkA-800);
|
||||
--color-pink-900: var(--color-pink-900);
|
||||
--color-pinkA-900: var(--color-pinkA-900);
|
||||
--color-pink-1000: var(--color-pink-1000);
|
||||
--color-pinkA-1000: var(--color-pinkA-1000);
|
||||
--color-pink-1100: var(--color-pink-1100);
|
||||
--color-pinkA-1100: var(--color-pinkA-1100);
|
||||
--color-pink-1200: var(--color-pink-1200);
|
||||
--color-pinkA-1200: var(--color-pinkA-1200);
|
||||
--color-purple-100: var(--color-purple-100);
|
||||
--color-purpleA-100: var(--color-purpleA-100);
|
||||
--color-purple-200: var(--color-purple-200);
|
||||
--color-purpleA-200: var(--color-purpleA-200);
|
||||
--color-purple-300: var(--color-purple-300);
|
||||
--color-purpleA-300: var(--color-purpleA-300);
|
||||
--color-purple-400: var(--color-purple-400);
|
||||
--color-purpleA-400: var(--color-purpleA-400);
|
||||
--color-purple-500: var(--color-purple-500);
|
||||
--color-purpleA-500: var(--color-purpleA-500);
|
||||
--color-purple-600: var(--color-purple-600);
|
||||
--color-purpleA-600: var(--color-purpleA-600);
|
||||
--color-purple-700: var(--color-purple-700);
|
||||
--color-purpleA-700: var(--color-purpleA-700);
|
||||
--color-purple-800: var(--color-purple-800);
|
||||
--color-purpleA-800: var(--color-purpleA-800);
|
||||
--color-purple-900: var(--color-purple-900);
|
||||
--color-purpleA-900: var(--color-purpleA-900);
|
||||
--color-purple-1000: var(--color-purple-1000);
|
||||
--color-purpleA-1000: var(--color-purpleA-1000);
|
||||
--color-purple-1100: var(--color-purple-1100);
|
||||
--color-purpleA-1100: var(--color-purpleA-1100);
|
||||
--color-purple-1200: var(--color-purple-1200);
|
||||
--color-purpleA-1200: var(--color-purpleA-1200);
|
||||
--color-red-100: var(--color-red-100);
|
||||
--color-redA-100: var(--color-redA-100);
|
||||
--color-red-200: var(--color-red-200);
|
||||
--color-redA-200: var(--color-redA-200);
|
||||
--color-red-300: var(--color-red-300);
|
||||
--color-redA-300: var(--color-redA-300);
|
||||
--color-red-400: var(--color-red-400);
|
||||
--color-redA-400: var(--color-redA-400);
|
||||
--color-red-500: var(--color-red-500);
|
||||
--color-redA-500: var(--color-redA-500);
|
||||
--color-red-600: var(--color-red-600);
|
||||
--color-redA-600: var(--color-redA-600);
|
||||
--color-red-700: var(--color-red-700);
|
||||
--color-redA-700: var(--color-redA-700);
|
||||
--color-red-800: var(--color-red-800);
|
||||
--color-redA-800: var(--color-redA-800);
|
||||
--color-red-900: var(--color-red-900);
|
||||
--color-redA-900: var(--color-redA-900);
|
||||
--color-red-1000: var(--color-red-1000);
|
||||
--color-redA-1000: var(--color-redA-1000);
|
||||
--color-red-1100: var(--color-red-1100);
|
||||
--color-redA-1100: var(--color-redA-1100);
|
||||
--color-red-1200: var(--color-red-1200);
|
||||
--color-redA-1200: var(--color-redA-1200);
|
||||
--color-slate-100: var(--color-slate-100);
|
||||
--color-slateA-100: var(--color-slateA-100);
|
||||
--color-slate-200: var(--color-slate-200);
|
||||
--color-slateA-200: var(--color-slateA-200);
|
||||
--color-slate-300: var(--color-slate-300);
|
||||
--color-slateA-300: var(--color-slateA-300);
|
||||
--color-slate-400: var(--color-slate-400);
|
||||
--color-slateA-400: var(--color-slateA-400);
|
||||
--color-slate-500: var(--color-slate-500);
|
||||
--color-slateA-500: var(--color-slateA-500);
|
||||
--color-slate-600: var(--color-slate-600);
|
||||
--color-slateA-600: var(--color-slateA-600);
|
||||
--color-slate-700: var(--color-slate-700);
|
||||
--color-slateA-700: var(--color-slateA-700);
|
||||
--color-slate-800: var(--color-slate-800);
|
||||
--color-slateA-800: var(--color-slateA-800);
|
||||
--color-slate-900: var(--color-slate-900);
|
||||
--color-slateA-900: var(--color-slateA-900);
|
||||
--color-slate-1000: var(--color-slate-1000);
|
||||
--color-slateA-1000: var(--color-slateA-1000);
|
||||
--color-slate-1100: var(--color-slate-1100);
|
||||
--color-slateA-1100: var(--color-slateA-1100);
|
||||
--color-slate-1200: var(--color-slate-1200);
|
||||
--color-slateA-1200: var(--color-slateA-1200);
|
||||
--color-tomato-100: var(--color-tomato-100);
|
||||
--color-tomatoA-100: var(--color-tomatoA-100);
|
||||
--color-tomato-200: var(--color-tomato-200);
|
||||
--color-tomatoA-200: var(--color-tomatoA-200);
|
||||
--color-tomato-300: var(--color-tomato-300);
|
||||
--color-tomatoA-300: var(--color-tomatoA-300);
|
||||
--color-tomato-400: var(--color-tomato-400);
|
||||
--color-tomatoA-400: var(--color-tomatoA-400);
|
||||
--color-tomato-500: var(--color-tomato-500);
|
||||
--color-tomatoA-500: var(--color-tomatoA-500);
|
||||
--color-tomato-600: var(--color-tomato-600);
|
||||
--color-tomatoA-600: var(--color-tomatoA-600);
|
||||
--color-tomato-700: var(--color-tomato-700);
|
||||
--color-tomatoA-700: var(--color-tomatoA-700);
|
||||
--color-tomato-800: var(--color-tomato-800);
|
||||
--color-tomatoA-800: var(--color-tomatoA-800);
|
||||
--color-tomato-900: var(--color-tomato-900);
|
||||
--color-tomatoA-900: var(--color-tomatoA-900);
|
||||
--color-tomato-1000: var(--color-tomato-1000);
|
||||
--color-tomatoA-1000: var(--color-tomatoA-1000);
|
||||
--color-tomato-1100: var(--color-tomato-1100);
|
||||
--color-tomatoA-1100: var(--color-tomatoA-1100);
|
||||
--color-tomato-1200: var(--color-tomato-1200);
|
||||
--color-tomatoA-1200: var(--color-tomatoA-1200);
|
||||
--color-violet-100: var(--color-violet-100);
|
||||
--color-violetA-100: var(--color-violetA-100);
|
||||
--color-violet-200: var(--color-violet-200);
|
||||
--color-violetA-200: var(--color-violetA-200);
|
||||
--color-violet-300: var(--color-violet-300);
|
||||
--color-violetA-300: var(--color-violetA-300);
|
||||
--color-violet-400: var(--color-violet-400);
|
||||
--color-violetA-400: var(--color-violetA-400);
|
||||
--color-violet-500: var(--color-violet-500);
|
||||
--color-violetA-500: var(--color-violetA-500);
|
||||
--color-violet-600: var(--color-violet-600);
|
||||
--color-violetA-600: var(--color-violetA-600);
|
||||
--color-violet-700: var(--color-violet-700);
|
||||
--color-violetA-700: var(--color-violetA-700);
|
||||
--color-violet-800: var(--color-violet-800);
|
||||
--color-violetA-800: var(--color-violetA-800);
|
||||
--color-violet-900: var(--color-violet-900);
|
||||
--color-violetA-900: var(--color-violetA-900);
|
||||
--color-violet-1000: var(--color-violet-1000);
|
||||
--color-violetA-1000: var(--color-violetA-1000);
|
||||
--color-violet-1100: var(--color-violet-1100);
|
||||
--color-violetA-1100: var(--color-violetA-1100);
|
||||
--color-violet-1200: var(--color-violet-1200);
|
||||
--color-violetA-1200: var(--color-violetA-1200);
|
||||
--color-yellow-100: var(--color-yellow-100);
|
||||
--color-yellowA-100: var(--color-yellowA-100);
|
||||
--color-yellow-200: var(--color-yellow-200);
|
||||
--color-yellowA-200: var(--color-yellowA-200);
|
||||
--color-yellow-300: var(--color-yellow-300);
|
||||
--color-yellowA-300: var(--color-yellowA-300);
|
||||
--color-yellow-400: var(--color-yellow-400);
|
||||
--color-yellowA-400: var(--color-yellowA-400);
|
||||
--color-yellow-500: var(--color-yellow-500);
|
||||
--color-yellowA-500: var(--color-yellowA-500);
|
||||
--color-yellow-600: var(--color-yellow-600);
|
||||
--color-yellowA-600: var(--color-yellowA-600);
|
||||
--color-yellow-700: var(--color-yellow-700);
|
||||
--color-yellowA-700: var(--color-yellowA-700);
|
||||
--color-yellow-800: var(--color-yellow-800);
|
||||
--color-yellowA-800: var(--color-yellowA-800);
|
||||
--color-yellow-900: var(--color-yellow-900);
|
||||
--color-yellowA-900: var(--color-yellowA-900);
|
||||
--color-yellow-1000: var(--color-yellow-1000);
|
||||
--color-yellowA-1000: var(--color-yellowA-1000);
|
||||
--color-yellow-1100: var(--color-yellow-1100);
|
||||
--color-yellowA-1100: var(--color-yellowA-1100);
|
||||
--color-yellow-1200: var(--color-yellow-1200);
|
||||
--color-yellowA-1200: var(--color-yellowA-1200);
|
||||
--color-blackA-100: var(--color-blackA-100);
|
||||
--color-whiteA-100: var(--color-whiteA-100);
|
||||
--color-blackA-200: var(--color-blackA-200);
|
||||
--color-whiteA-200: var(--color-whiteA-200);
|
||||
--color-blackA-300: var(--color-blackA-300);
|
||||
--color-whiteA-300: var(--color-whiteA-300);
|
||||
--color-blackA-400: var(--color-blackA-400);
|
||||
--color-whiteA-400: var(--color-whiteA-400);
|
||||
--color-blackA-500: var(--color-blackA-500);
|
||||
--color-whiteA-500: var(--color-whiteA-500);
|
||||
--color-blackA-600: var(--color-blackA-600);
|
||||
--color-whiteA-600: var(--color-whiteA-600);
|
||||
--color-blackA-700: var(--color-blackA-700);
|
||||
--color-whiteA-700: var(--color-whiteA-700);
|
||||
--color-blackA-800: var(--color-blackA-800);
|
||||
--color-whiteA-800: var(--color-whiteA-800);
|
||||
--color-blackA-900: var(--color-blackA-900);
|
||||
--color-whiteA-900: var(--color-whiteA-900);
|
||||
--color-blackA-1000: var(--color-blackA-1000);
|
||||
--color-whiteA-1000: var(--color-whiteA-1000);
|
||||
--color-blackA-1100: var(--color-blackA-1100);
|
||||
--color-whiteA-1100: var(--color-whiteA-1100);
|
||||
--color-blackA-1200: var(--color-blackA-1200);
|
||||
--color-whiteA-1200: var(--color-whiteA-1200);
|
||||
--color-scale-100: var(--color-scale-100);
|
||||
--color-scaleA-100: var(--color-scaleA-100);
|
||||
--color-scale-200: var(--color-scale-200);
|
||||
--color-scaleA-200: var(--color-scaleA-200);
|
||||
--color-scale-300: var(--color-scale-300);
|
||||
--color-scaleA-300: var(--color-scaleA-300);
|
||||
--color-scale-400: var(--color-scale-400);
|
||||
--color-scaleA-400: var(--color-scaleA-400);
|
||||
--color-scale-500: var(--color-scale-500);
|
||||
--color-scaleA-500: var(--color-scaleA-500);
|
||||
--color-scale-600: var(--color-scale-600);
|
||||
--color-scaleA-600: var(--color-scaleA-600);
|
||||
--color-scale-700: var(--color-scale-700);
|
||||
--color-scaleA-700: var(--color-scaleA-700);
|
||||
--color-scale-800: var(--color-scale-800);
|
||||
--color-scaleA-800: var(--color-scaleA-800);
|
||||
--color-scale-900: var(--color-scale-900);
|
||||
--color-scaleA-900: var(--color-scaleA-900);
|
||||
--color-scale-1000: var(--color-scale-1000);
|
||||
--color-scaleA-1000: var(--color-scaleA-1000);
|
||||
--color-scale-1100: var(--color-scale-1100);
|
||||
--color-scaleA-1100: var(--color-scaleA-1100);
|
||||
--color-scale-1200: var(--color-scale-1200);
|
||||
--color-scaleA-1200: var(--color-scaleA-1200);
|
||||
--color-brand-100: var(--color-brand-100);
|
||||
--color-brand-700: var(--color-brand-700);
|
||||
--color-brand-800: var(--color-brand-800);
|
||||
--color-brand-900: var(--color-brand-900);
|
||||
--color-brand-1000: var(--color-brand-1000);
|
||||
--color-brand-1100: var(--color-brand-1100);
|
||||
--color-brand-1200: var(--color-brand-1200);
|
||||
--color-sidebar: hsl(var(--sidebar-background));
|
||||
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
|
||||
--color-sidebar-primary: hsl(var(--sidebar-primary));
|
||||
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
|
||||
--color-sidebar-accent: hsl(var(--sidebar-accent));
|
||||
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
|
||||
--color-sidebar-border: hsl(var(--sidebar-border));
|
||||
--color-sidebar-ring: hsl(var(--sidebar-ring));
|
||||
--color-hi-contrast: hsl(var(--foreground-default));
|
||||
--color-lo-contrast: hsl(var(--background-alternative-default));
|
||||
|
||||
/*
|
||||
* This will generate colors only for bg utilities.
|
||||
*/
|
||||
--background-color-200: hsl(var(--background-200));
|
||||
--background-color-default: hsl(var(--background-default));
|
||||
--background-color-muted: hsl(var(--background-muted));
|
||||
--background-color-alternative-200: hsl(var(--background-alternative-200));
|
||||
--background-color-alternative: hsl(var(--background-alternative-default));
|
||||
--background-color-selection: hsl(var(--background-selection));
|
||||
--background-color-control: hsl(var(--background-control));
|
||||
--background-color-surface-75: hsl(var(--background-surface-75));
|
||||
--background-color-surface-100: hsl(var(--background-surface-100));
|
||||
--background-color-surface-200: hsl(var(--background-surface-200));
|
||||
--background-color-surface-300: hsl(var(--background-surface-300));
|
||||
--background-color-surface-400: hsl(var(--background-surface-400));
|
||||
--background-color-overlay: hsl(var(--background-overlay-default));
|
||||
--background-color-overlay-hover: hsl(var(--background-overlay-hover));
|
||||
--background-color-button: hsl(var(--background-button-default));
|
||||
--background-color-dialog: hsl(var(--background-dialog-default));
|
||||
--background-color-dash-sidebar: hsl(var(--background-dash-sidebar));
|
||||
--background-color-dash-canvas: hsl(var(--background-dash-canvas));
|
||||
--background-color-studio: hsl(var(--background-200));
|
||||
|
||||
/*
|
||||
* This will generate colors for all utilities, they'll have border in the name i.e. bg-border-overlay, text-border-muted
|
||||
* This usage should be discouraged and deprecated.
|
||||
*/
|
||||
--color-border: hsl(var(--border-default));
|
||||
--color-border-overlay: hsl(var(--border-overlay));
|
||||
--color-border-muted: hsl(var(--border-muted));
|
||||
--color-border-control: hsl(var(--border-control));
|
||||
--color-border-strong: hsl(var(--border-strong));
|
||||
--color-border-stronger: hsl(var(--border-stronger));
|
||||
/*
|
||||
* This will generate colors only for border utilities
|
||||
* i.e. bg-muted and they'll only have border-color: var(--border-muted) rule
|
||||
*/
|
||||
--border-color-default: hsl(var(--border-default));
|
||||
--border-color-overlay: hsl(var(--border-overlay));
|
||||
--border-color-muted: hsl(var(--border-muted));
|
||||
--border-color-control: hsl(var(--border-control));
|
||||
--border-color-strong: hsl(var(--border-strong));
|
||||
--border-color-stronger: hsl(var(--border-stronger));
|
||||
--border-color-secondary: hsl(var(--border-secondary));
|
||||
--border-color-alternative: hsl(var(--border-alternative));
|
||||
--border-color-button: hsl(var(--border-button-default));
|
||||
--border-color-button-hover: hsl(var(--border-button-hover));
|
||||
|
||||
/* This will generate colors only for text utilities */
|
||||
--text-color-default: hsl(var(--foreground-default));
|
||||
--text-color-light: hsl(var(--foreground-light));
|
||||
--text-color-lighter: hsl(var(--foreground-lighter));
|
||||
--text-color-muted: hsl(var(--foreground-muted));
|
||||
--text-color-contrast: hsl(var(--foreground-contrast));
|
||||
|
||||
/* misc theme tokens — typography, breakpoints, sizing, transform-origin */
|
||||
--font-sans: var(
|
||||
--font-custom,
|
||||
Circular,
|
||||
custom-font,
|
||||
Helvetica Neue,
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif
|
||||
);
|
||||
--font-mono: var(--font-source-code-pro, Source Code Pro, Office Code Pro, Menlo, monospace);
|
||||
--breakpoint-xs: 480px;
|
||||
--width-listbox: 320px;
|
||||
--radius-panel: 6px;
|
||||
--spacing-content: 21px;
|
||||
--spacing-card: var(--card-padding-x);
|
||||
--transform-origin-dropdown: var(--radix-dropdown-menu-content-transform-origin);
|
||||
--transform-origin-popover: var(--radix-popover-menu-content-transform-origin);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
/*
|
||||
* Custom Tailwind v4 utilities migrated from packages/config/ui.config.js
|
||||
* (addUtilities + matchUtilities) and packages/config/tailwind.config.js
|
||||
* (the .bg legacy shim).
|
||||
*
|
||||
* Note: .no-scrollbar lives in packages/config/tailwind-plugins/motion-safe-transition.js
|
||||
* and is loaded via @plugin from tailwind.config.css, so it's not duplicated here.
|
||||
*/
|
||||
|
||||
/*
|
||||
* The `bg` class worked in Tailwind v3 but stopped working in v4. Restored as
|
||||
* an alias for `bg-default` to avoid a wide rename across the codebase.
|
||||
* Should be deprecated in favor of `bg-default`.
|
||||
*/
|
||||
@utility bg {
|
||||
background-color: hsl(var(--background-default));
|
||||
}
|
||||
|
||||
/*
|
||||
* Soft shimmer gradient used by LoadingLine.
|
||||
*/
|
||||
@utility line-loading-bg {
|
||||
background: rgb(0, 0, 0);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(255, 255, 255, 0.65) 50%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
}
|
||||
@utility line-loading-bg-light {
|
||||
background: rgb(0, 0, 0);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(33, 33, 33, 0.65) 50%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* may be unused — verify before pruning */
|
||||
@utility mask-fadeout-right {
|
||||
-webkit-mask-image: linear-gradient(to right, white 98%, transparent 100%);
|
||||
mask-image: linear-gradient(to right, white 98%, transparent 100%);
|
||||
}
|
||||
/* may be unused — verify before pruning */
|
||||
@utility mask-fadeout-left {
|
||||
-webkit-mask-image: linear-gradient(to left, white 98%, transparent 100%);
|
||||
mask-image: linear-gradient(to left, white 98%, transparent 100%);
|
||||
}
|
||||
|
||||
/*
|
||||
* Functional color utilities. The `--value(--color-*)` token accepts any
|
||||
* registered --color-* design token (e.g. highlight-foreground-light).
|
||||
*/
|
||||
/* may be unused — verify before pruning */
|
||||
@utility highlight-* {
|
||||
box-shadow: inset 0 1px 0 0 --value(--color-*);
|
||||
}
|
||||
/* may be unused — verify before pruning */
|
||||
@utility subhighlight-* {
|
||||
box-shadow: inset 0 -1px 0 0 --value(--color-*);
|
||||
}
|
||||
|
||||
/*
|
||||
* Inline-SVG grid background. Used by ProjectLinker as bg-grid-black/5 and
|
||||
* bg-grid-white/5 for the integrations onboarding visuals.
|
||||
*/
|
||||
@utility bg-grid-* {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='--value(--color-*)'><path d='M0 .5H31.5V32'/></svg>");
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
/*
|
||||
* Custom Tailwind v4 variants migrated from:
|
||||
* - packages/config/ui.config.js addVariant calls
|
||||
* - packages/config/tailwind.config.js addVariant + darkMode setting
|
||||
*/
|
||||
|
||||
/*
|
||||
* `darkMode: ['class', '[data-theme*="dark"]']` from the v3 config is replaced
|
||||
* by this @custom-variant. The :where() wrapper keeps specificity at 0 so
|
||||
* the dark utilities don't override unrelated rules.
|
||||
*/
|
||||
@custom-variant dark (&:where([data-theme*='dark'] *, [data-theme*='dark']));
|
||||
|
||||
@custom-variant data-open-parent ([data-state='open'] &);
|
||||
@custom-variant data-closed-parent ([data-state='closed'] &);
|
||||
@custom-variant data-open (&[data-state='open']);
|
||||
@custom-variant data-closed (&[data-state='closed']);
|
||||
|
||||
/* may be unused — verify before pruning */
|
||||
@custom-variant data-show (&[data-state='show']);
|
||||
/* may be unused — verify before pruning */
|
||||
@custom-variant data-hide (&[data-state='hide']);
|
||||
|
||||
@custom-variant data-checked (&[data-state='checked']);
|
||||
/* may be unused — verify before pruning */
|
||||
@custom-variant data-unchecked (&[data-state='unchecked']);
|
||||
|
||||
@custom-variant aria-expanded (&[aria-expanded='true']);
|
||||
|
||||
@custom-variant not-disabled (&:not(:disabled));
|
||||
@@ -1,90 +0,0 @@
|
||||
module.exports = {
|
||||
brand: {
|
||||
brand1: 'hsla(153, 80%, 99%, 1)',
|
||||
brand2: 'hsla(148, 88%, 97%, 1)',
|
||||
brand3: 'hsla(148, 76%, 95%, 1)',
|
||||
brand4: 'hsla(148, 68%, 92%, 1)',
|
||||
brand5: 'hsla(148, 59%, 88%, 1)',
|
||||
brand6: 'hsla(149, 43%, 82%, 1)',
|
||||
brand7: 'hsla(149, 43%, 69%, 1)',
|
||||
brand8: 'hsla(154, 55%, 45%, 1)',
|
||||
brand9: 'hsla(153, 60%, 53%, 1)',
|
||||
brand10: 'hsla(153, 50%, 50%, 1)',
|
||||
brand11: 'hsla(153, 50%, 34%, 1)',
|
||||
brand12: 'hsla(153, 40%, 12%, 1)',
|
||||
},
|
||||
brandDark: {
|
||||
brand1: 'hsla(153, 75%, 6%, 1)',
|
||||
brand2: 'hsla(153, 73%, 7%, 1)',
|
||||
brand3: 'hsla(154, 69%, 9%, 1)',
|
||||
brand4: 'hsla(154, 67%, 11%, 1)',
|
||||
brand5: 'hsla(154, 66%, 13%, 1)',
|
||||
brand6: 'hsla(154, 64%, 17%, 1)',
|
||||
brand7: 'hsla(154, 62%, 22%, 1)',
|
||||
brand8: 'hsla(153, 60%, 28%, 1)',
|
||||
brand9: 'hsla(153, 60%, 53%, 1)',
|
||||
brand10: 'hsla(153, 60%, 70%, 1)',
|
||||
brand11: 'hsla(153, 60%, 50%, 1)',
|
||||
brand12: 'hsla(153, 60%, 95%, 1)',
|
||||
},
|
||||
contrast: {
|
||||
'brand-hiContrast': 'hsl(var(--brand-default))',
|
||||
'brand-loContrast': 'hsl(var(--brand-300))',
|
||||
},
|
||||
scale: {
|
||||
scale1: 'var(--colors-slate1)',
|
||||
scale2: 'var(--colors-slate2)',
|
||||
scale3: 'var(--colors-slate3)',
|
||||
scale4: 'var(--colors-slate4)',
|
||||
scale5: 'var(--colors-slate5)',
|
||||
scale6: 'var(--colors-slate6)',
|
||||
scale7: 'var(--colors-slate7)',
|
||||
scale8: 'var(--colors-slate8)',
|
||||
scale9: 'var(--colors-slate9)',
|
||||
scale10: 'var(--colors-slate10)',
|
||||
scale11: 'var(--colors-slate11)',
|
||||
scale12: 'var(--colors-slate12)',
|
||||
},
|
||||
scaleA: {
|
||||
scaleA1: 'var(--colors-slateA1)',
|
||||
scaleA2: 'var(--colors-slateA2)',
|
||||
scaleA3: 'var(--colors-slateA3)',
|
||||
scaleA4: 'var(--colors-slateA4)',
|
||||
scaleA5: 'var(--colors-slateA5)',
|
||||
scaleA6: 'var(--colors-slateA6)',
|
||||
scaleA7: 'var(--colors-slateA7)',
|
||||
scaleA8: 'var(--colors-slateA8)',
|
||||
scaleA9: 'var(--colors-slateA9)',
|
||||
scaleA10: 'var(--colors-slateA10)',
|
||||
scaleA11: 'var(--colors-slateA11)',
|
||||
scaleA12: 'var(--colors-slateA12)',
|
||||
},
|
||||
scaleDark: {
|
||||
scale1: 'var(--colors-gray1)',
|
||||
scale2: 'var(--colors-gray2)',
|
||||
scale3: 'var(--colors-gray3)',
|
||||
scale4: 'var(--colors-gray4)',
|
||||
scale5: 'var(--colors-gray5)',
|
||||
scale6: 'var(--colors-gray6)',
|
||||
scale7: 'var(--colors-gray7)',
|
||||
scale8: 'var(--colors-gray8)',
|
||||
scale9: 'var(--colors-gray9)',
|
||||
scale10: 'var(--colors-gray10)',
|
||||
scale11: '#bbbbbb',
|
||||
scale12: 'var(--colors-gray12)',
|
||||
},
|
||||
scaleADark: {
|
||||
scaleA1: 'var(--colors-grayA1)',
|
||||
scaleA2: 'var(--colors-grayA2)',
|
||||
scaleA3: 'var(--colors-grayA3)',
|
||||
scaleA4: 'var(--colors-grayA4)',
|
||||
scaleA5: 'var(--colors-grayA5)',
|
||||
scaleA6: 'var(--colors-grayA6)',
|
||||
scaleA7: 'var(--colors-grayA7)',
|
||||
scaleA8: 'var(--colors-grayA8)',
|
||||
scaleA9: 'var(--colors-grayA9)',
|
||||
scaleA10: 'var(--colors-grayA10)',
|
||||
scaleA11: 'var(--colors-grayA11)',
|
||||
scaleA12: 'var(--colors-grayA12)',
|
||||
},
|
||||
}
|
||||
@@ -8,15 +8,11 @@
|
||||
"clean": "rimraf node_modules"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mertasan/tailwindcss-variables": "^2.2.3",
|
||||
"@radix-ui/colors": "^0.1.8",
|
||||
"@tailwindcss/forms": "^0.5.11",
|
||||
"@tailwindcss/typography": "^0.5.19",
|
||||
"deepmerge": "^4.2.2",
|
||||
"mini-svg-data-uri": "^1.4.3",
|
||||
"tailwindcss-radix": "^2.0.0"
|
||||
"@tailwindcss/typography": "^0.5.19"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@radix-ui/colors": "^0.1.8",
|
||||
"@tailwindcss/postcss": "^4.2.4",
|
||||
"tailwindcss": "catalog:",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
|
||||
@@ -0,0 +1,251 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* Emits packages/config/css/colors.css and packages/config/css/theme.css
|
||||
* from packages/config/scripts/tw-extend-color-snapshot.js. Run from
|
||||
* packages/config/.
|
||||
*
|
||||
* - colors.css holds a :root block that declares the Radix/scale --color-*
|
||||
* tokens, forwarding each one to its underlying --colors-{hue}{n} source
|
||||
* var (which switches across light/dark themes via radix-vars.css). This
|
||||
* is where the actual runtime value lives. Brand steps 200..600 forward
|
||||
* to the semantic hsl(var(--brand-{step})) triplet instead of the raw
|
||||
* --colors-brand{n} scale value.
|
||||
* - theme.css holds the @theme inline block of --color-* design tokens
|
||||
* that Tailwind v4 uses to generate bg-{name}, text-{name}, border-{name},
|
||||
* ring-{name}, plus directional border variants like border-r-{name}.
|
||||
* Semantic tokens wrap their source HSL triplet in hsl(); Radix/scale
|
||||
* tokens self-reference the matching var declared in :root (colors.css)
|
||||
* so theme switching works at runtime without re-registering utilities.
|
||||
* The file also contains hand-curated namespaced utility blocks
|
||||
* (--background-color-*, --border-color-*, --text-color-*) that only
|
||||
* generate utilities for a single Tailwind namespace, plus a deprecated
|
||||
* --color-border-* block.
|
||||
*/
|
||||
|
||||
const fs = require('node:fs')
|
||||
const path = require('node:path')
|
||||
|
||||
// Snapshot of the v3 tw-extend/color.js (was deleted alongside the migration).
|
||||
// Kept here as a generation source so the script remains runnable.
|
||||
const colorEntries = require('./tw-extend-color-snapshot.js')
|
||||
|
||||
const themeLines = []
|
||||
const rootLines = []
|
||||
|
||||
// Emit prefixed --color-* tokens for every semantic entry in the snapshot.
|
||||
// `foo-DEFAULT` becomes `--color-foo`; everything else keeps its full key.
|
||||
// `border-*` entries are intentionally skipped here — they live in the
|
||||
// deprecated --color-border-* block in `namespacedTokens` below, which is
|
||||
// curated by hand (the snapshot has more border entries than we want to
|
||||
// expose as the legacy `--color-border-*` namespace).
|
||||
for (const [key, { cssVariable }] of Object.entries(colorEntries)) {
|
||||
if (/var\(--core-/.test(cssVariable)) continue
|
||||
if (key.startsWith('border-')) continue
|
||||
const themeKey = key.replace(/-DEFAULT$/, '')
|
||||
themeLines.push(` --color-${themeKey}: hsl(${cssVariable});`)
|
||||
}
|
||||
|
||||
// --- Hand-rolled additions that don't come from the snapshot ---
|
||||
|
||||
// Radix hue palettes — each --color-{hue}-{step} resolves to the raw hue var.
|
||||
const radixHues = [
|
||||
'amber',
|
||||
'blue',
|
||||
'crimson',
|
||||
'gold',
|
||||
'gray',
|
||||
'green',
|
||||
'indigo',
|
||||
'orange',
|
||||
'pink',
|
||||
'purple',
|
||||
'red',
|
||||
'slate',
|
||||
'tomato',
|
||||
'violet',
|
||||
'yellow',
|
||||
]
|
||||
for (const hue of radixHues) {
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
const solid = `--color-${hue}-${i * 100}`
|
||||
const alpha = `--color-${hue}A-${i * 100}`
|
||||
rootLines.push(` ${solid}: var(--colors-${hue}${i});`)
|
||||
rootLines.push(` ${alpha}: var(--colors-${hue}A${i});`)
|
||||
themeLines.push(` ${solid}: var(${solid});`)
|
||||
themeLines.push(` ${alpha}: var(${alpha});`)
|
||||
}
|
||||
}
|
||||
|
||||
// blackA / whiteA — neutral alpha scales.
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
const black = `--color-blackA-${i * 100}`
|
||||
const white = `--color-whiteA-${i * 100}`
|
||||
rootLines.push(` ${black}: var(--colors-blackA${i});`)
|
||||
rootLines.push(` ${white}: var(--colors-whiteA${i});`)
|
||||
themeLines.push(` ${black}: var(${black});`)
|
||||
themeLines.push(` ${white}: var(${white});`)
|
||||
}
|
||||
|
||||
// Supabase scale + scaleA. Underlying --colors-scale{n} / --colors-scaleA{n}
|
||||
// are aliases (defined in radix-vars.css) that switch between slate/gray
|
||||
// across light/dark themes.
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
const solid = `--color-scale-${i * 100}`
|
||||
const alpha = `--color-scaleA-${i * 100}`
|
||||
rootLines.push(` ${solid}: var(--colors-scale${i});`)
|
||||
rootLines.push(` ${alpha}: var(--colors-scaleA${i});`)
|
||||
themeLines.push(` ${solid}: var(${solid});`)
|
||||
themeLines.push(` ${alpha}: var(${alpha});`)
|
||||
}
|
||||
|
||||
// Supabase brand scale. Steps 200..600 are semantic: they forward to
|
||||
// hsl(var(--brand-{step})) so light/dark themes can override the value.
|
||||
// The other steps fall back to the raw --colors-brand{n} scale and get
|
||||
// a self-referencing entry in theme.css; the semantic steps are already
|
||||
// emitted to themeLines by the snapshot pass above (brand-200..600,
|
||||
// brand-DEFAULT, brand-link), so we don't re-emit them here.
|
||||
const SEMANTIC_BRAND_STEPS = new Set([2, 3, 4, 5, 6])
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
const solid = `--color-brand-${i * 100}`
|
||||
if (SEMANTIC_BRAND_STEPS.has(i)) {
|
||||
rootLines.push(` ${solid}: hsl(var(--brand-${i * 100}));`)
|
||||
} else {
|
||||
rootLines.push(` ${solid}: var(--colors-brand${i});`)
|
||||
themeLines.push(` ${solid}: var(${solid});`)
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar shadcn semantic tokens.
|
||||
themeLines.push(` --color-sidebar: hsl(var(--sidebar-background));`)
|
||||
themeLines.push(` --color-sidebar-foreground: hsl(var(--sidebar-foreground));`)
|
||||
themeLines.push(` --color-sidebar-primary: hsl(var(--sidebar-primary));`)
|
||||
themeLines.push(` --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));`)
|
||||
themeLines.push(` --color-sidebar-accent: hsl(var(--sidebar-accent));`)
|
||||
themeLines.push(` --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));`)
|
||||
themeLines.push(` --color-sidebar-border: hsl(var(--sidebar-border));`)
|
||||
themeLines.push(` --color-sidebar-ring: hsl(var(--sidebar-ring));`)
|
||||
|
||||
// Misc semantic colors.
|
||||
themeLines.push(` --color-hi-contrast: hsl(var(--foreground-default));`)
|
||||
themeLines.push(` --color-lo-contrast: hsl(var(--background-alternative-default));`)
|
||||
|
||||
// Namespaced utility blocks — these intentionally use Tailwind v4's per-
|
||||
// namespace --{property}-color-* keys so the values only generate utilities
|
||||
// for a single namespace (bg-, border-, text-) rather than all of them.
|
||||
const namespacedTokens = ` /*
|
||||
* This will generate colors only for bg utilities.
|
||||
*/
|
||||
--background-color-200: hsl(var(--background-200));
|
||||
--background-color-default: hsl(var(--background-default));
|
||||
--background-color-muted: hsl(var(--background-muted));
|
||||
--background-color-alternative-200: hsl(var(--background-alternative-200));
|
||||
--background-color-alternative: hsl(var(--background-alternative-default));
|
||||
--background-color-selection: hsl(var(--background-selection));
|
||||
--background-color-control: hsl(var(--background-control));
|
||||
--background-color-surface-75: hsl(var(--background-surface-75));
|
||||
--background-color-surface-100: hsl(var(--background-surface-100));
|
||||
--background-color-surface-200: hsl(var(--background-surface-200));
|
||||
--background-color-surface-300: hsl(var(--background-surface-300));
|
||||
--background-color-surface-400: hsl(var(--background-surface-400));
|
||||
--background-color-overlay: hsl(var(--background-overlay-default));
|
||||
--background-color-overlay-hover: hsl(var(--background-overlay-hover));
|
||||
--background-color-button: hsl(var(--background-button-default));
|
||||
--background-color-dialog: hsl(var(--background-dialog-default));
|
||||
--background-color-dash-sidebar: hsl(var(--background-dash-sidebar));
|
||||
--background-color-dash-canvas: hsl(var(--background-dash-canvas));
|
||||
--background-color-studio: hsl(var(--background-200));
|
||||
|
||||
/*
|
||||
* This will generate colors for all utilities, they'll have border in the name i.e. bg-border-overlay, text-border-muted
|
||||
* This usage should be discouraged and deprecated.
|
||||
*/
|
||||
--color-border: hsl(var(--border-default));
|
||||
--color-border-overlay: hsl(var(--border-overlay));
|
||||
--color-border-muted: hsl(var(--border-muted));
|
||||
--color-border-control: hsl(var(--border-control));
|
||||
--color-border-strong: hsl(var(--border-strong));
|
||||
--color-border-stronger: hsl(var(--border-stronger));
|
||||
/*
|
||||
* This will generate colors only for border utilities
|
||||
* i.e. bg-muted and they'll only have border-color: var(--border-muted) rule
|
||||
*/
|
||||
--border-color-default: hsl(var(--border-default));
|
||||
--border-color-overlay: hsl(var(--border-overlay));
|
||||
--border-color-muted: hsl(var(--border-muted));
|
||||
--border-color-control: hsl(var(--border-control));
|
||||
--border-color-strong: hsl(var(--border-strong));
|
||||
--border-color-stronger: hsl(var(--border-stronger));
|
||||
--border-color-secondary: hsl(var(--border-secondary));
|
||||
--border-color-alternative: hsl(var(--border-alternative));
|
||||
--border-color-button: hsl(var(--border-button-default));
|
||||
--border-color-button-hover: hsl(var(--border-button-hover));
|
||||
|
||||
/* This will generate colors only for text utilities */
|
||||
--text-color-default: hsl(var(--foreground-default));
|
||||
--text-color-light: hsl(var(--foreground-light));
|
||||
--text-color-lighter: hsl(var(--foreground-lighter));
|
||||
--text-color-muted: hsl(var(--foreground-muted));
|
||||
--text-color-contrast: hsl(var(--foreground-contrast));`
|
||||
|
||||
// Misc design tokens (font, breakpoint, sizing, radius, transform-origin)
|
||||
// that lived in tailwind.config.js / ui.config.js theme blocks.
|
||||
const miscTokens = ` /* misc theme tokens — typography, breakpoints, sizing, transform-origin */
|
||||
--font-sans: var(
|
||||
--font-custom,
|
||||
Circular,
|
||||
custom-font,
|
||||
Helvetica Neue,
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif
|
||||
);
|
||||
--font-mono: var(--font-source-code-pro, Source Code Pro, Office Code Pro, Menlo, monospace);
|
||||
--breakpoint-xs: 480px;
|
||||
--width-listbox: 320px;
|
||||
--radius-panel: 6px;
|
||||
--spacing-content: 21px;
|
||||
--spacing-card: var(--card-padding-x);
|
||||
--transform-origin-dropdown: var(--radix-dropdown-menu-content-transform-origin);
|
||||
--transform-origin-popover: var(--radix-popover-menu-content-transform-origin);`
|
||||
|
||||
const colorsCss = `/*
|
||||
* Auto-generated by scripts/generate-colors.js — do not edit by hand.
|
||||
* Run \`node scripts/generate-colors.js\` from packages/config/ to refresh.
|
||||
*
|
||||
* Declares the Radix/scale --color-* CSS variables in :root, each forwarding
|
||||
* to its underlying --colors-{hue}{n} source (defined in radix-vars.css)
|
||||
* which switches between light/dark themes. theme.css references these
|
||||
* variables from its @theme inline block.
|
||||
*/
|
||||
|
||||
:root {
|
||||
${rootLines.join('\n')}
|
||||
}
|
||||
`
|
||||
|
||||
const themeCss = `/*
|
||||
* Auto-generated by scripts/generate-colors.js — do not edit by hand.
|
||||
* Run \`node scripts/generate-colors.js\` from packages/config/ to refresh.
|
||||
*
|
||||
* Defines every Tailwind v4 --color-* design token. Tailwind generates
|
||||
* bg-{name} / text-{name} / border-{name} / ring-{name} / border-{r,l,t,b}-{name}
|
||||
* utilities for each entry. Semantic tokens wrap their HSL triplet in hsl();
|
||||
* Radix/scale tokens self-reference the var declared in colors.css :root.
|
||||
* Source mappings: tw-extend-color-snapshot.js (semantic tokens) plus the
|
||||
* Radix and scale aliases from radix-vars.css.
|
||||
*/
|
||||
|
||||
@theme inline {
|
||||
${themeLines.join('\n')}
|
||||
|
||||
${namespacedTokens}
|
||||
|
||||
${miscTokens}
|
||||
}
|
||||
`
|
||||
|
||||
const outDir = path.resolve(__dirname, '..', 'css')
|
||||
fs.writeFileSync(path.join(outDir, 'colors.css'), colorsCss)
|
||||
fs.writeFileSync(path.join(outDir, 'theme.css'), themeCss)
|
||||
console.log(`wrote ${path.join(outDir, 'colors.css')} (${colorsCss.split('\n').length} lines)`)
|
||||
console.log(`wrote ${path.join(outDir, 'theme.css')} (${themeCss.split('\n').length} lines)`)
|
||||
@@ -0,0 +1,84 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* Emits packages/config/css/radix-vars.css from @radix-ui/colors and the
|
||||
* existing default-colors.js scale aliases. Run from packages/config/.
|
||||
*
|
||||
* One-shot generator — committed alongside the CSS output so future updates
|
||||
* (new Radix versions, new aliases) can be reproduced without searching for
|
||||
* how the file was made.
|
||||
*/
|
||||
|
||||
const fs = require('node:fs')
|
||||
const path = require('node:path')
|
||||
|
||||
const radixUiColors = require('@radix-ui/colors')
|
||||
|
||||
const excludedRadixColors = [
|
||||
'bronze',
|
||||
'brown',
|
||||
'cyan',
|
||||
'grass',
|
||||
'olive',
|
||||
'mauve',
|
||||
'mint',
|
||||
'lime',
|
||||
'plum',
|
||||
'sage',
|
||||
'sand',
|
||||
'sky',
|
||||
'teal',
|
||||
]
|
||||
|
||||
const isExcluded = (key) => excludedRadixColors.some((ex) => key.startsWith(ex))
|
||||
|
||||
const lightEntries = []
|
||||
const darkEntries = []
|
||||
|
||||
for (const [key, palette] of Object.entries(radixUiColors)) {
|
||||
if (isExcluded(key)) continue
|
||||
const target = key.includes('Dark') ? darkEntries : lightEntries
|
||||
for (const [varName, value] of Object.entries(palette)) {
|
||||
target.push([varName, value])
|
||||
}
|
||||
}
|
||||
|
||||
const formatBlock = (selector, entries) => {
|
||||
const lines = entries.map(([k, v]) => ` --colors-${k}: ${v};`).join('\n')
|
||||
return `${selector} {\n${lines}\n}`
|
||||
}
|
||||
|
||||
const scaleAliasesLight = []
|
||||
const scaleAliasesDark = []
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
scaleAliasesLight.push([`scale${i}`, `var(--colors-slate${i})`])
|
||||
scaleAliasesLight.push([`scaleA${i}`, `var(--colors-slateA${i})`])
|
||||
if (i === 11) {
|
||||
// Preserves the hard-coded value from default-colors.js scaleDark.scale11.
|
||||
scaleAliasesDark.push([`scale${i}`, `#bbbbbb`])
|
||||
} else {
|
||||
scaleAliasesDark.push([`scale${i}`, `var(--colors-gray${i})`])
|
||||
}
|
||||
scaleAliasesDark.push([`scaleA${i}`, `var(--colors-grayA${i})`])
|
||||
}
|
||||
|
||||
const header = `/*
|
||||
* Auto-generated by scripts/generate-radix-vars.js — do not edit by hand.
|
||||
* Run \`node scripts/generate-radix-vars.js\` from packages/config/ to refresh.
|
||||
*
|
||||
* Mirrors the CSS variables that the legacy @mertasan/tailwindcss-variables
|
||||
* plugin used to emit from ui.config.js's generateCssVariables() and
|
||||
* default-colors.js's scale/scaleA aliases.
|
||||
*/
|
||||
`
|
||||
|
||||
const output = [
|
||||
header,
|
||||
formatBlock(':root', [...lightEntries, ...scaleAliasesLight]),
|
||||
'',
|
||||
formatBlock("[data-theme*='dark']", [...darkEntries, ...scaleAliasesDark]),
|
||||
'',
|
||||
].join('\n')
|
||||
|
||||
const outPath = path.resolve(__dirname, '..', 'css', 'radix-vars.css')
|
||||
fs.writeFileSync(outPath, output)
|
||||
console.log(`wrote ${outPath} (${output.split('\n').length} lines)`)
|
||||
File renamed without changes.
@@ -1,6 +1,41 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
/* JS plugins. Tailwind v4 supports `@plugin` for both v3-style JS plugins and
|
||||
* v4-native packages. The two local plugins use theme('spacing') /
|
||||
* theme('transitionDuration') which resolve from v4's @theme tokens. */
|
||||
@plugin "@tailwindcss/typography";
|
||||
@plugin "@tailwindcss/forms";
|
||||
@plugin "tailwindcss-animate";
|
||||
@plugin "./tailwind-plugins/hit-area";
|
||||
@plugin "./tailwind-plugins/motion-safe-transition";
|
||||
|
||||
/* Raw color values + per-theme overrides. Must come before colors.css so the
|
||||
* --colors-* references resolve to a value. */
|
||||
@import './css/radix-vars.css';
|
||||
@import './css/brand-vars.css';
|
||||
@import '../ui/build/css/source/global.css';
|
||||
@import '../ui/build/css/themes/dark.css';
|
||||
@import '../ui/build/css/themes/light.css';
|
||||
|
||||
/* Reset Tailwind's built-in color tokens before re-defining our own, so e.g.
|
||||
* --color-amber-* doesn't ship a default Tailwind value alongside the Radix
|
||||
* one. */
|
||||
@import './unset-tw-colors.css';
|
||||
@config './tailwind.config.js';
|
||||
|
||||
/* Theme tokens + utilities + variants + base layer. colors.css declares the
|
||||
* Radix/scale CSS variables in :root; theme.css consumes them from
|
||||
* @theme inline so Tailwind generates the utilities. */
|
||||
@import './css/colors.css';
|
||||
@import './css/theme.css';
|
||||
@import './css/animations.css';
|
||||
@import './css/utilities.css';
|
||||
@import './css/variants.css';
|
||||
@import './css/base.css';
|
||||
|
||||
/*
|
||||
* Typography prose / prose-toc / prose-docs overrides live in a focused JS
|
||||
* config because @tailwindcss/typography reads its theme.typography options
|
||||
* from the JS config — not from CSS @theme tokens. See:
|
||||
* https://github.com/tailwindlabs/tailwindcss-typography#customizing-the-css
|
||||
*/
|
||||
@config './typography.config.js';
|
||||
@@ -1,449 +0,0 @@
|
||||
const ui = require('./ui.config.js')
|
||||
const deepMerge = require('deepmerge')
|
||||
const plugin = require('tailwindcss/plugin')
|
||||
|
||||
const color = require('./../ui/build/css/tw-extend/color')
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
let colorExtend = {}
|
||||
Object.values(color).map((x, i) => {
|
||||
colorExtend[Object.keys(color)[i]] = `hsl(${x.cssVariable})` // x.cssVariable
|
||||
})
|
||||
|
||||
// console.log('colorExtend', colorExtend)
|
||||
// console.log('colorExtend kebabToNested', kebabToNested(colorExtend))
|
||||
|
||||
// console.log('colorExtend', kebabToNested(colorExtend).colors.gray)
|
||||
|
||||
/**
|
||||
* Generates Tailwind colors for the theme
|
||||
*/
|
||||
function generateTwColorClasses(globalKey, twAttributes) {
|
||||
let classes = {}
|
||||
Object.values(twAttributes).map((attr, i) => {
|
||||
const attrKey = Object.keys(twAttributes)[i]
|
||||
|
||||
if (attrKey.includes(globalKey)) {
|
||||
const keySplit = attrKey.split('-').splice(1).join('-')
|
||||
|
||||
let payload = {
|
||||
[keySplit]: `hsl(${attr.cssVariable})`,
|
||||
}
|
||||
|
||||
if (keySplit == 'DEFAULT') {
|
||||
// includes a 'default' duplicate
|
||||
// this allows for classes like `border-default` which is the same as `border`
|
||||
payload = {
|
||||
...payload,
|
||||
default: `hsl(${attr.cssVariable})`,
|
||||
}
|
||||
}
|
||||
|
||||
classes = {
|
||||
...classes,
|
||||
...payload,
|
||||
}
|
||||
}
|
||||
})
|
||||
/**
|
||||
* mutate object into nested object for tailwind theme structure
|
||||
*/
|
||||
const nestedClasses = kebabToNested(classes)
|
||||
// return, but nest the keys if they are kebab case named
|
||||
return nestedClasses
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper to convert kebab named keys in object to nested nodes
|
||||
*/
|
||||
function kebabToNested(obj) {
|
||||
const result = {}
|
||||
for (const [key, value] of Object.entries(obj)) {
|
||||
const parts = key.split('-')
|
||||
let currentObj = result
|
||||
for (let i = 0; i < parts.length; i++) {
|
||||
const part = parts[i] === 'DEFAULT' ? parts[i] : parts[i].toLowerCase() // convert key to lowercase
|
||||
if (!currentObj[part]) {
|
||||
currentObj[part] = {}
|
||||
}
|
||||
if (i === parts.length - 1) {
|
||||
if (typeof value === 'object') {
|
||||
currentObj[part] = kebabToNested(value) // recursively convert nested objects
|
||||
} else {
|
||||
currentObj[part] = value.toString().toLowerCase() // convert value to lowercase
|
||||
}
|
||||
} else {
|
||||
currentObj = currentObj[part]
|
||||
}
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* Main theme config
|
||||
*/
|
||||
const uiConfig = ui({
|
||||
darkMode: ['class', '[data-theme*="dark"]'],
|
||||
theme: {
|
||||
/**
|
||||
* Spread all theme colors and custom generated colors into theme
|
||||
*/
|
||||
textColor: (theme) => ({
|
||||
...theme('colors'),
|
||||
...generateTwColorClasses('foreground', color),
|
||||
}),
|
||||
backgroundColor: (theme) => ({
|
||||
...theme('colors'),
|
||||
...generateTwColorClasses('background', color),
|
||||
/*
|
||||
* custom background re-maps
|
||||
*/
|
||||
studio: `hsl(var(--background-200))`,
|
||||
}),
|
||||
borderColor: (theme) => ({
|
||||
...theme('colors'),
|
||||
...generateTwColorClasses('border', color),
|
||||
}),
|
||||
extend: {
|
||||
colors: {
|
||||
...kebabToNested(colorExtend),
|
||||
sidebar: {
|
||||
DEFAULT: 'hsl(var(--sidebar-background))',
|
||||
foreground: 'hsl(var(--sidebar-foreground))',
|
||||
primary: 'hsl(var(--sidebar-primary))',
|
||||
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
||||
accent: 'hsl(var(--sidebar-accent))',
|
||||
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
||||
border: 'hsl(var(--sidebar-border))',
|
||||
ring: 'hsl(var(--sidebar-ring))',
|
||||
},
|
||||
},
|
||||
|
||||
typography: ({ theme }) => ({
|
||||
// Removal of backticks in code blocks for tailwind v3.0
|
||||
// https://github.com/tailwindlabs/tailwindcss-typography/issues/135
|
||||
DEFAULT: {
|
||||
css: {
|
||||
'code::before': {
|
||||
content: '""',
|
||||
},
|
||||
'code::after': {
|
||||
content: '""',
|
||||
},
|
||||
'--tw-prose-body': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-headings': 'hsl(var(--foreground-default))',
|
||||
'--tw-prose-lead': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-links': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-bold': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-counters': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-bullets': 'hsl(var(--foreground-muted))',
|
||||
'--tw-prose-hr': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-quotes': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-quote-borders': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-captions': 'hsl(var(--border-strong))',
|
||||
'--tw-prose-code': 'hsl(var(--foreground-default))',
|
||||
'--tw-prose-pre-code': 'hsl(var(--foreground-muted))',
|
||||
'--tw-prose-pre-bg': 'hsl(var(--background-surface-200))',
|
||||
'--tw-prose-th-borders': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-td-borders': 'hsl(var(--background-default))',
|
||||
'--tw-prose-invert-body': 'hsl(var(--background-default))',
|
||||
'--tw-prose-invert-headings': theme('colors.white'),
|
||||
'--tw-prose-invert-lead': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-invert-links': theme('colors.white'),
|
||||
'--tw-prose-invert-bold': theme('colors.white'),
|
||||
'--tw-prose-invert-counters': 'hsl(var(--background-surface-200))',
|
||||
'--tw-prose-invert-bullets': 'hsl(var(--background-selection))',
|
||||
'--tw-prose-invert-hr': 'hsl(var(--border-strong))',
|
||||
'--tw-prose-invert-quotes': 'hsl(var(--background-alternative-default))',
|
||||
'--tw-prose-invert-quote-borders': 'hsl(var(--border-strong))',
|
||||
'--tw-prose-invert-captions': 'hsl(var(--background-surface-200))',
|
||||
// the following are typography overrides
|
||||
// examples can be seen here —> https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
|
||||
// reset all header font weights
|
||||
h4: {
|
||||
// override font size
|
||||
fontSize: '1.15em',
|
||||
},
|
||||
h5: {
|
||||
// h5 not included in --tw-prose-headings
|
||||
color: theme('colors.scale[1200]'),
|
||||
},
|
||||
'h1, h2, h3, h4, h5, h6': {
|
||||
fontWeight: '400',
|
||||
},
|
||||
'article h2, article h3, article h4, article h5, article h6': {
|
||||
marginTop: '2em',
|
||||
marginBottom: '1em',
|
||||
},
|
||||
p: {
|
||||
fontWeight: '400',
|
||||
},
|
||||
strong: {
|
||||
fontWeight: '500',
|
||||
},
|
||||
pre: {
|
||||
background: 'none',
|
||||
padding: 0,
|
||||
marginBottom: '32px',
|
||||
},
|
||||
ul: {
|
||||
listStyleType: 'none',
|
||||
paddingLeft: '1rem',
|
||||
},
|
||||
'ul li': {
|
||||
position: 'relative',
|
||||
},
|
||||
'ul li::before': {
|
||||
position: 'absolute',
|
||||
top: '0.75rem',
|
||||
left: '-1rem',
|
||||
height: '0.125rem',
|
||||
width: '0.5rem',
|
||||
borderRadius: '0.25rem',
|
||||
backgroundColor: 'hsl(var(--border-strong))',
|
||||
content: '""',
|
||||
},
|
||||
ol: {
|
||||
paddingLeft: '1rem',
|
||||
counterReset: 'item',
|
||||
listStyleType: 'none',
|
||||
marginBottom: '3rem',
|
||||
},
|
||||
'ol>li': {
|
||||
display: 'block',
|
||||
position: 'relative',
|
||||
paddingLeft: '1rem',
|
||||
},
|
||||
'ol>li::before': {
|
||||
position: 'absolute',
|
||||
top: '0.25rem',
|
||||
left: '-1rem',
|
||||
height: '1.2rem',
|
||||
width: '1.2rem',
|
||||
borderRadius: '0.25rem',
|
||||
backgroundColor: 'hsl(var(--background-surface-100))',
|
||||
border: '1px solid hsl(var(--border-default))',
|
||||
content: 'counter(item) " "',
|
||||
counterIncrement: 'item',
|
||||
fontSize: '12px',
|
||||
color: 'hsl(var(--foreground-muted))',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
|
||||
'p img': {
|
||||
border: '1px solid hsl(var(--border-muted))',
|
||||
borderRadius: '4px',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
iframe: {
|
||||
border: '1px solid ' + theme('borderColor.DEFAULT'),
|
||||
borderRadius: theme('borderRadius.lg'),
|
||||
},
|
||||
td: {
|
||||
borderBottom: '1px solid ' + 'hsl(var(--background-surface-200))',
|
||||
},
|
||||
code: {
|
||||
fontWeight: '400',
|
||||
padding: '0.2rem 0.4rem',
|
||||
backgroundColor: 'hsl(var(--background-surface-200))',
|
||||
border: '1px solid ' + 'hsl(var(--background-surface-300))',
|
||||
borderRadius: theme('borderRadius.lg'),
|
||||
},
|
||||
a: {
|
||||
position: 'relative',
|
||||
transition: 'all 0.18s ease',
|
||||
paddingBottom: '2px',
|
||||
fontWeight: '400',
|
||||
opacity: 1,
|
||||
color: 'hsl(var(--foreground-default))',
|
||||
textDecorationLine: 'underline',
|
||||
textDecorationColor: 'hsl(var(--foreground-muted))',
|
||||
textDecorationThickness: '1px',
|
||||
textUnderlineOffset: '2px',
|
||||
},
|
||||
'a:hover': {
|
||||
textDecorationColor: 'hsl(var(--foreground-default))',
|
||||
},
|
||||
figcaption: {
|
||||
color: 'hsl(var(--foreground-muted))',
|
||||
fontFamily: 'Office Code Pro, monospace',
|
||||
},
|
||||
'figure.quote-figure p:first-child': {
|
||||
marginTop: '0 !important',
|
||||
},
|
||||
'figure.quote-figure p:last-child': {
|
||||
marginBottom: '0 !important',
|
||||
},
|
||||
figure: {
|
||||
margin: '3rem 0',
|
||||
},
|
||||
'figure img': {
|
||||
margin: '0 !important',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
toc: {
|
||||
css: {
|
||||
ul: {
|
||||
'list-style-type': 'none',
|
||||
'padding-left': 0,
|
||||
margin: 0,
|
||||
li: {
|
||||
'padding-left': 0,
|
||||
},
|
||||
a: {
|
||||
display: 'block',
|
||||
marginBottom: '0.4rem',
|
||||
'text-decoration': 'none',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: '200',
|
||||
color: 'hsl(var(--foreground-light))',
|
||||
'&:hover': {
|
||||
color: 'hsl(var(--foreground-default))',
|
||||
},
|
||||
'font-weight': '400',
|
||||
},
|
||||
// margin: 0,
|
||||
ul: {
|
||||
'list-style-type': 'none',
|
||||
li: {
|
||||
marginTop: '0.2rem',
|
||||
marginBottom: '0.2rem',
|
||||
'padding-left': '0 !important',
|
||||
'margin-left': '0.5rem',
|
||||
},
|
||||
a: {
|
||||
fontWeight: '200',
|
||||
color: 'hsl(var(--foreground-lighter))',
|
||||
'&:hover': {
|
||||
color: 'hsl(var(--foreground-default))',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
// used in auto docs
|
||||
docs: {
|
||||
css: {
|
||||
'--tw-prose-body': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-headings': 'hsl(var(--foreground-default))',
|
||||
'--tw-prose-lead': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-links': 'hsl(var(--brand-500))',
|
||||
'--tw-prose-bold': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-counters': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-bullets': 'hsl(var(--foreground-muted))',
|
||||
'--tw-prose-hr': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-quotes': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-quote-borders': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-captions': 'hsl(var(--border-strong))',
|
||||
'--tw-prose-code': 'hsl(var(--foreground-default))',
|
||||
'--tw-prose-pre-code': 'hsl(var(--foreground-muted))',
|
||||
'--tw-prose-pre-bg': 'hsl(var(--background-surface-200))',
|
||||
'--tw-prose-th-borders': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-td-borders': 'hsl(var(--background-default))',
|
||||
'--tw-prose-invert-body': 'hsl(var(--background-default))',
|
||||
'--tw-prose-invert-headings': theme('colors.white'),
|
||||
'--tw-prose-invert-lead': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-invert-links': theme('colors.white'),
|
||||
'--tw-prose-invert-bold': theme('colors.white'),
|
||||
'--tw-prose-invert-counters': 'hsl(var(--background-surface-200))',
|
||||
'--tw-prose-invert-bullets': 'hsl(var(--background-selection))',
|
||||
'--tw-prose-invert-hr': 'hsl(var(--border-strong))',
|
||||
'--tw-prose-invert-quotes': 'hsl(var(--background-alternative-default))',
|
||||
'--tw-prose-invert-quote-borders': 'hsl(var(--border-strong))',
|
||||
'--tw-prose-invert-captions': 'hsl(var(--background-surface-200))',
|
||||
// the following are typography overrides
|
||||
// examples can be seen here —> https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
|
||||
// reset all header font weights
|
||||
'h1, h2, h3, h4, h5': {
|
||||
fontWeight: '400',
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
screens: {
|
||||
xs: '480px',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: 'var(--font-custom, Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif)',
|
||||
mono: 'var(--font-source-code-pro, Source Code Pro, Office Code Pro, Menlo, monospace)',
|
||||
},
|
||||
|
||||
// shadcn defaults START
|
||||
keyframes: {
|
||||
'flash-code': {
|
||||
'0%': { backgroundColor: 'rgba(63, 207, 142, 0.1)' },
|
||||
'100%': { backgroundColor: 'transparent' },
|
||||
},
|
||||
'accordion-down': {
|
||||
from: { height: 0 },
|
||||
to: { height: 'var(--radix-accordion-content-height)' },
|
||||
},
|
||||
'accordion-up': {
|
||||
from: { height: 'var(--radix-accordion-content-height)' },
|
||||
to: { height: 0 },
|
||||
},
|
||||
'collapsible-down': {
|
||||
from: { height: 0 },
|
||||
to: { height: 'var(--radix-collapsible-content-height)' },
|
||||
},
|
||||
'collapsible-up': {
|
||||
from: { height: 'var(--radix-collapsible-content-height)' },
|
||||
to: { height: 0 },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'flash-code': 'flash-code 1s forwards',
|
||||
'flash-code-slow': 'flash-code 2s forwards',
|
||||
'accordion-down': 'accordion-down 0.15s ease-out',
|
||||
'accordion-up': 'accordion-up 0.15s ease-out',
|
||||
'collapsible-down': 'collapsible-down 0.10s ease-out',
|
||||
'collapsible-up': 'collapsible-up 0.10s ease-out',
|
||||
},
|
||||
borderRadius: {
|
||||
// lg: `var(--radius)`,
|
||||
// md: `calc(var(--radius) - 2px)`,
|
||||
// sm: 'calc(var(--radius) - 4px)',
|
||||
panel: '6px',
|
||||
},
|
||||
padding: {
|
||||
content: '21px',
|
||||
card: 'var(--card-padding-x)',
|
||||
},
|
||||
// borderRadius: {
|
||||
// lg: `var(--radius)`,
|
||||
// md: `calc(var(--radius) - 2px)`,
|
||||
// sm: 'calc(var(--radius) - 4px)',
|
||||
// },
|
||||
// fontFamily: {
|
||||
// sans: ['var(--font-sans)', ...fontFamily.sans],
|
||||
// },
|
||||
// shadcn defaults END
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
require('tailwindcss-animate'),
|
||||
require('./tailwind-plugins/hit-area'),
|
||||
require('./tailwind-plugins/motion-safe-transition'),
|
||||
function ({ addVariant }) {
|
||||
addVariant('not-disabled', '&:not(:disabled)')
|
||||
},
|
||||
function ({ addUtilities }) {
|
||||
// The bg class worked in Tailwind 3, but stopped working in TW 4. This is a custom utility to add it back in, as
|
||||
// it's used in a lot of places across the codebase. We should deprecate it and use `bg-default` instead.
|
||||
addUtilities({
|
||||
'.bg': { backgroundColor: 'hsl(var(--background-default))' },
|
||||
})
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
module.exports = uiConfig
|
||||
@@ -0,0 +1,232 @@
|
||||
/**
|
||||
* Typography customization for @tailwindcss/typography.
|
||||
*
|
||||
* Loaded via `@config './typography.config.js'` in tailwind.config.css.
|
||||
* Only contains theme.extend.typography — everything else (colors, animations,
|
||||
* variants, utilities, base) lives in CSS under packages/config/css/.
|
||||
*
|
||||
* The typography plugin reads theme.typography to generate .prose, .prose-toc,
|
||||
* and .prose-docs classes (and to make them @apply-able). See:
|
||||
* https://github.com/tailwindlabs/tailwindcss-typography#customizing-the-css
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
typography: {
|
||||
DEFAULT: {
|
||||
css: {
|
||||
// Removal of backticks in code blocks.
|
||||
// https://github.com/tailwindlabs/tailwindcss-typography/issues/135
|
||||
'code::before': { content: '""' },
|
||||
'code::after': { content: '""' },
|
||||
'--tw-prose-body': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-headings': 'hsl(var(--foreground-default))',
|
||||
'--tw-prose-lead': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-links': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-bold': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-counters': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-bullets': 'hsl(var(--foreground-muted))',
|
||||
'--tw-prose-hr': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-quotes': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-quote-borders': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-captions': 'hsl(var(--border-strong))',
|
||||
'--tw-prose-code': 'hsl(var(--foreground-default))',
|
||||
'--tw-prose-pre-code': 'hsl(var(--foreground-muted))',
|
||||
'--tw-prose-pre-bg': 'hsl(var(--background-surface-200))',
|
||||
'--tw-prose-th-borders': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-td-borders': 'hsl(var(--background-default))',
|
||||
'--tw-prose-invert-body': 'hsl(var(--background-default))',
|
||||
'--tw-prose-invert-headings': 'white',
|
||||
'--tw-prose-invert-lead': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-invert-links': 'white',
|
||||
'--tw-prose-invert-bold': 'white',
|
||||
'--tw-prose-invert-counters': 'hsl(var(--background-surface-200))',
|
||||
'--tw-prose-invert-bullets': 'hsl(var(--background-selection))',
|
||||
'--tw-prose-invert-hr': 'hsl(var(--border-strong))',
|
||||
'--tw-prose-invert-quotes': 'hsl(var(--background-alternative-default))',
|
||||
'--tw-prose-invert-quote-borders': 'hsl(var(--border-strong))',
|
||||
'--tw-prose-invert-captions': 'hsl(var(--background-surface-200))',
|
||||
h4: { fontSize: '1.15em' },
|
||||
// h5 isn't included in --tw-prose-headings.
|
||||
h5: { color: 'var(--color-scale-1200)' },
|
||||
'h1, h2, h3, h4, h5, h6': { fontWeight: '400' },
|
||||
'article h2, article h3, article h4, article h5, article h6': {
|
||||
marginTop: '2em',
|
||||
marginBottom: '1em',
|
||||
},
|
||||
p: { fontWeight: '400' },
|
||||
strong: { fontWeight: '500' },
|
||||
pre: {
|
||||
background: 'none',
|
||||
padding: 0,
|
||||
marginBottom: '32px',
|
||||
},
|
||||
ul: {
|
||||
listStyleType: 'none',
|
||||
paddingLeft: '1rem',
|
||||
},
|
||||
'ul li': { position: 'relative' },
|
||||
'ul li::before': {
|
||||
position: 'absolute',
|
||||
top: '0.75rem',
|
||||
left: '-1rem',
|
||||
height: '0.125rem',
|
||||
width: '0.5rem',
|
||||
borderRadius: '0.25rem',
|
||||
backgroundColor: 'hsl(var(--border-strong))',
|
||||
content: '""',
|
||||
},
|
||||
ol: {
|
||||
paddingLeft: '1rem',
|
||||
counterReset: 'item',
|
||||
listStyleType: 'none',
|
||||
marginBottom: '3rem',
|
||||
},
|
||||
'ol>li': {
|
||||
display: 'block',
|
||||
position: 'relative',
|
||||
paddingLeft: '1rem',
|
||||
},
|
||||
'ol>li::before': {
|
||||
position: 'absolute',
|
||||
top: '0.25rem',
|
||||
left: '-1rem',
|
||||
height: '1.2rem',
|
||||
width: '1.2rem',
|
||||
borderRadius: '0.25rem',
|
||||
backgroundColor: 'hsl(var(--background-surface-100))',
|
||||
border: '1px solid hsl(var(--border-default))',
|
||||
content: 'counter(item) " "',
|
||||
counterIncrement: 'item',
|
||||
fontSize: '12px',
|
||||
color: 'hsl(var(--foreground-muted))',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
'p img': {
|
||||
border: '1px solid hsl(var(--border-muted))',
|
||||
borderRadius: '4px',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
iframe: {
|
||||
border: '1px solid hsl(var(--border-default))',
|
||||
borderRadius: 'var(--radius-lg)',
|
||||
},
|
||||
td: {
|
||||
borderBottom: '1px solid hsl(var(--background-surface-200))',
|
||||
},
|
||||
code: {
|
||||
fontWeight: '400',
|
||||
padding: '0.2rem 0.4rem',
|
||||
backgroundColor: 'hsl(var(--background-surface-200))',
|
||||
border: '1px solid hsl(var(--background-surface-300))',
|
||||
borderRadius: 'var(--radius-lg)',
|
||||
},
|
||||
a: {
|
||||
position: 'relative',
|
||||
transition: 'all 0.18s ease',
|
||||
paddingBottom: '2px',
|
||||
fontWeight: '400',
|
||||
opacity: 1,
|
||||
color: 'hsl(var(--foreground-default))',
|
||||
textDecorationLine: 'underline',
|
||||
textDecorationColor: 'hsl(var(--foreground-muted))',
|
||||
textDecorationThickness: '1px',
|
||||
textUnderlineOffset: '2px',
|
||||
},
|
||||
'a:hover': {
|
||||
textDecorationColor: 'hsl(var(--foreground-default))',
|
||||
},
|
||||
figcaption: {
|
||||
color: 'hsl(var(--foreground-muted))',
|
||||
fontFamily: 'Office Code Pro, monospace',
|
||||
},
|
||||
'figure.quote-figure p:first-child': {
|
||||
marginTop: '0 !important',
|
||||
},
|
||||
'figure.quote-figure p:last-child': {
|
||||
marginBottom: '0 !important',
|
||||
},
|
||||
figure: { margin: '3rem 0' },
|
||||
'figure img': { margin: '0 !important' },
|
||||
},
|
||||
},
|
||||
|
||||
toc: {
|
||||
css: {
|
||||
ul: {
|
||||
'list-style-type': 'none',
|
||||
'padding-left': 0,
|
||||
margin: 0,
|
||||
li: { 'padding-left': 0 },
|
||||
a: {
|
||||
display: 'block',
|
||||
marginBottom: '0.4rem',
|
||||
'text-decoration': 'none',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: '200',
|
||||
color: 'hsl(var(--foreground-light))',
|
||||
'&:hover': {
|
||||
color: 'hsl(var(--foreground-default))',
|
||||
},
|
||||
'font-weight': '400',
|
||||
},
|
||||
ul: {
|
||||
'list-style-type': 'none',
|
||||
li: {
|
||||
marginTop: '0.2rem',
|
||||
marginBottom: '0.2rem',
|
||||
'padding-left': '0 !important',
|
||||
'margin-left': '0.5rem',
|
||||
},
|
||||
a: {
|
||||
fontWeight: '200',
|
||||
color: 'hsl(var(--foreground-lighter))',
|
||||
'&:hover': {
|
||||
color: 'hsl(var(--foreground-default))',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// Used in docs and changelog content.
|
||||
docs: {
|
||||
css: {
|
||||
'--tw-prose-body': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-headings': 'hsl(var(--foreground-default))',
|
||||
'--tw-prose-lead': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-links': 'hsl(var(--brand-500))',
|
||||
'--tw-prose-bold': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-counters': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-bullets': 'hsl(var(--foreground-muted))',
|
||||
'--tw-prose-hr': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-quotes': 'hsl(var(--foreground-light))',
|
||||
'--tw-prose-quote-borders': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-captions': 'hsl(var(--border-strong))',
|
||||
'--tw-prose-code': 'hsl(var(--foreground-default))',
|
||||
'--tw-prose-pre-code': 'hsl(var(--foreground-muted))',
|
||||
'--tw-prose-pre-bg': 'hsl(var(--background-surface-200))',
|
||||
'--tw-prose-th-borders': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-td-borders': 'hsl(var(--background-default))',
|
||||
'--tw-prose-invert-body': 'hsl(var(--background-default))',
|
||||
'--tw-prose-invert-headings': 'white',
|
||||
'--tw-prose-invert-lead': 'hsl(var(--background-surface-300))',
|
||||
'--tw-prose-invert-links': 'white',
|
||||
'--tw-prose-invert-bold': 'white',
|
||||
'--tw-prose-invert-counters': 'hsl(var(--background-surface-200))',
|
||||
'--tw-prose-invert-bullets': 'hsl(var(--background-selection))',
|
||||
'--tw-prose-invert-hr': 'hsl(var(--border-strong))',
|
||||
'--tw-prose-invert-quotes': 'hsl(var(--background-alternative-default))',
|
||||
'--tw-prose-invert-quote-borders': 'hsl(var(--border-strong))',
|
||||
'--tw-prose-invert-captions': 'hsl(var(--background-surface-200))',
|
||||
'h1, h2, h3, h4, h5': { fontWeight: '400' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -1,441 +0,0 @@
|
||||
const deepMerge = require('deepmerge')
|
||||
const forms = require('@tailwindcss/forms')
|
||||
const radixUiColors = require('@radix-ui/colors')
|
||||
const brandColors = require('./default-colors')
|
||||
const svgToDataUri = require('mini-svg-data-uri')
|
||||
|
||||
function flattenColorPalette(colors) {
|
||||
return Object.assign(
|
||||
{},
|
||||
...Object.entries(colors ?? {}).flatMap(([key, value]) =>
|
||||
typeof value === 'object'
|
||||
? Object.entries(flattenColorPalette(value)).map(([k, v]) => ({
|
||||
[key + (k === 'DEFAULT' ? '' : '-' + k)]: v,
|
||||
}))
|
||||
: [{ [key]: value }]
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
// exclude these colors from the included set from Radix
|
||||
const excludedRadixColors = [
|
||||
'bronze',
|
||||
'brown',
|
||||
'cyan',
|
||||
'grass',
|
||||
'olive',
|
||||
'mauve',
|
||||
'mint',
|
||||
'lime',
|
||||
'plum',
|
||||
'sage',
|
||||
'sand',
|
||||
'sky',
|
||||
'teal',
|
||||
]
|
||||
|
||||
// generates fixed scales
|
||||
// based on the root/light mode version
|
||||
const fixedOptions = ['scale', 'scaleA']
|
||||
|
||||
function radixColorKeys() {
|
||||
let keys = Object.keys(radixUiColors)
|
||||
|
||||
/**
|
||||
* Filter array items based on search criteria (query)
|
||||
*/
|
||||
function filterItems(arr, query) {
|
||||
return arr.filter(function (el) {
|
||||
return el.toLowerCase().indexOf(query.toLowerCase()) == -1
|
||||
})
|
||||
}
|
||||
|
||||
keys = filterItems(keys, 'Dark')
|
||||
|
||||
// remove excluded colors
|
||||
keys = keys.filter(
|
||||
(key) => !excludedRadixColors.some((excludeColor) => key.startsWith(excludeColor))
|
||||
)
|
||||
|
||||
return keys
|
||||
}
|
||||
|
||||
function generateColorClasses() {
|
||||
const brandColors = ['scale', 'scaleA']
|
||||
const colors = [...radixColorKeys(), ...brandColors]
|
||||
|
||||
let mappedColors = {}
|
||||
|
||||
// generate the shape of the colors object
|
||||
colors.map((x) => {
|
||||
// create empty obj for each color
|
||||
mappedColors[x] = {}
|
||||
// create empty obj for each fixed color
|
||||
if (fixedOptions.some((v) => x.indexOf(v) >= 0)) {
|
||||
mappedColors[`${x}-fixed`] = {}
|
||||
}
|
||||
})
|
||||
|
||||
colors.map((x) => {
|
||||
for (let index = 0; index < 12; index++) {
|
||||
const step = index + 1
|
||||
mappedColors[x][step * 100] = `var(--colors-${x}${step})`
|
||||
|
||||
if (fixedOptions.some((v) => x.indexOf(v) >= 0)) {
|
||||
mappedColors[`${x}-fixed`][step * 100] = `var(--colors-fixed-${x}${step})`
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return mappedColors
|
||||
}
|
||||
|
||||
const colorClasses = generateColorClasses()
|
||||
|
||||
// generate the CSS variables for tailwind to use
|
||||
function generateCssVariables() {
|
||||
// potential options
|
||||
// { fixedOptions, brandColors }
|
||||
|
||||
let rootColors = {}
|
||||
let darkColors = {}
|
||||
|
||||
const radixArray = Object.entries(radixUiColors)
|
||||
.filter(
|
||||
([key, value]) => !excludedRadixColors.some((excludeColor) => key.startsWith(excludeColor))
|
||||
)
|
||||
.map(([, value]) => value)
|
||||
|
||||
const brandArray = Object.values(brandColors)
|
||||
|
||||
function generateColors(colors, index, colorSet) {
|
||||
const key = Object.keys(colorSet)[index]
|
||||
|
||||
if (key.includes('Dark')) {
|
||||
darkColors = { ...darkColors, ...colors }
|
||||
} else {
|
||||
rootColors = { ...rootColors, ...colors }
|
||||
|
||||
// generate an optional 'fixed' scale of colors
|
||||
if (
|
||||
fixedOptions.some(function (v) {
|
||||
return key.indexOf(v) >= 0
|
||||
})
|
||||
) {
|
||||
rootColors.fixed = { ...rootColors?.fixed, ...colors }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
radixArray.map((x, i) => {
|
||||
generateColors(x, i, radixUiColors)
|
||||
})
|
||||
|
||||
brandArray.map((x, i) => {
|
||||
generateColors(x, i, brandColors)
|
||||
})
|
||||
|
||||
return {
|
||||
root: { ...rootColors },
|
||||
dark: { ...darkColors },
|
||||
}
|
||||
}
|
||||
|
||||
const variables = generateCssVariables()
|
||||
|
||||
const uiConfig = {
|
||||
theme: {
|
||||
variables: {
|
||||
DEFAULT: {
|
||||
width: {
|
||||
listbox: '320px',
|
||||
},
|
||||
colors: { ...variables.root },
|
||||
},
|
||||
"[data-theme*='dark']": {
|
||||
colors: { ...variables.dark },
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
// dropdown extensions
|
||||
transformOrigin: {
|
||||
// tailwind class for this is `origin-dropdown`
|
||||
dropdown: 'var(--radix-dropdown-menu-content-transform-origin)',
|
||||
popover: 'var(--radix-popover-menu-content-transform-origin);',
|
||||
},
|
||||
width: {
|
||||
listbox: 'var(--width-listbox);',
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { transform: 'scale(0.95)', opacity: 0 },
|
||||
'100%': { transform: 'scale(1)', opacity: 1 },
|
||||
},
|
||||
fadeOut: {
|
||||
'0%': { transform: 'scale(1)', opacity: 1 },
|
||||
'100%': { transform: 'scale(0.95)', opacity: 0 },
|
||||
},
|
||||
overlayContentShow: {
|
||||
'0%': { opacity: 0, transform: 'translate(0%, -2%) scale(1)' },
|
||||
'100%': { opacity: 1, transform: 'translate(0%, 0%) scale(1)' },
|
||||
},
|
||||
overlayContentHide: {
|
||||
'0%': { opacity: 1, transform: 'translate(0%, 0%) scale(1)' },
|
||||
'100%': { opacity: 0, transform: 'translate(0%, -2%) scale(1)' },
|
||||
},
|
||||
dropdownFadeIn: {
|
||||
'0%': { transform: 'scale(0.95)', opacity: 0 },
|
||||
'100%': { transform: 'scale(1)', opacity: 1 },
|
||||
},
|
||||
dropdownFadeOut: {
|
||||
'0%': { transform: 'scale(1)', opacity: 1 },
|
||||
'100%': { transform: 'scale(0.95)', opacity: 0 },
|
||||
},
|
||||
fadeInOverlayBg: {
|
||||
'0%': { opacity: 0 },
|
||||
'100%': { opacity: 0.75 },
|
||||
},
|
||||
fadeOutOverlayBg: {
|
||||
'0%': { opacity: 0.75 },
|
||||
'100%': { opacity: 0 },
|
||||
},
|
||||
slideDown: {
|
||||
'0%': { height: 0, opacity: 0 },
|
||||
'100%': {
|
||||
height: 'var(--radix-accordion-content-height)',
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { height: 'var(--radix-accordion-content-height)', opacity: 1 },
|
||||
'100%': { height: 0, opacity: 0 },
|
||||
},
|
||||
|
||||
slideDownNormal: {
|
||||
'0%': { height: 0, opacity: 0 },
|
||||
'100%': {
|
||||
height: 'inherit',
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
slideUpNormal: {
|
||||
'0%': { height: 'inherit', opacity: 1 },
|
||||
'100%': { height: 0, opacity: 0 },
|
||||
},
|
||||
|
||||
panelSlideLeftOut: {
|
||||
'0%': { transform: 'translateX(-100%)', opacity: 0 },
|
||||
'100%': {
|
||||
transform: 'translate-x-0',
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
panelSlideLeftIn: {
|
||||
'0%': { transform: 'translate-x-0', opacity: 1 },
|
||||
'100%': { transform: 'translateX(-100%)', opacity: 0 },
|
||||
},
|
||||
panelSlideRightOut: {
|
||||
'0%': { transform: 'translateX(100%)', opacity: 0 },
|
||||
'100%': {
|
||||
transform: 'translate-x-0',
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
panelSlideRightIn: {
|
||||
'0%': { transform: 'translate-x-0', opacity: 1 },
|
||||
'100%': { transform: 'translateX(100%)', opacity: 0 },
|
||||
},
|
||||
lineLoading: {
|
||||
'0%': {
|
||||
marginLeft: '-10%',
|
||||
width: '80px',
|
||||
},
|
||||
'25%': {
|
||||
width: ' 240px',
|
||||
},
|
||||
'50%': {
|
||||
marginLeft: '100%',
|
||||
width: '80px',
|
||||
},
|
||||
'75%': {
|
||||
width: '240px',
|
||||
},
|
||||
'100%': {
|
||||
marginLeft: '-10%',
|
||||
width: '80px',
|
||||
},
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 300ms both',
|
||||
'fade-out': 'fadeOut 300ms both',
|
||||
|
||||
'dropdown-content-show': 'overlayContentShow 100ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
'dropdown-content-hide': 'overlayContentHide 100ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
|
||||
'overlay-show': 'overlayContentShow 300ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
'overlay-hide': 'overlayContentHide 300ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
|
||||
'fade-in-overlay-bg': 'fadeInOverlayBg 300ms',
|
||||
'fade-out-overlay-bg': 'fadeOutOverlayBg 300ms',
|
||||
|
||||
'slide-down': 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
'slide-up': 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
|
||||
'slide-down-normal': 'slideDownNormal 300ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
'slide-up-normal': 'slideUpNormal 300ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
|
||||
'panel-slide-left-out': 'panelSlideLeftOut 200ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
'panel-slide-left-in': 'panelSlideLeftIn 250ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
'panel-slide-right-out': 'panelSlideRightOut 200ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
'panel-slide-right-in': 'panelSlideRightIn 250ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
|
||||
'line-loading': 'lineLoading 1.8s infinite',
|
||||
'line-loading-slower': 'lineLoading 2.3s infinite',
|
||||
|
||||
// tailwind class for this is `animate-dropdownFadeIn`
|
||||
dropdownFadeIn: 'dropdownFadeIn 0.1s ease-out',
|
||||
// tailwind class for this is `animate-dropdownFadeOut`
|
||||
dropdownFadeOut: 'dropdownFadeOut 0.1s ease-out',
|
||||
},
|
||||
colors: {
|
||||
...colorClasses,
|
||||
'hi-contrast': `hsl(var(--foreground-default))`,
|
||||
'lo-contrast': `hsl(var(--background-alternative-default))`,
|
||||
warning: {
|
||||
default: 'red',
|
||||
100: '#342355',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@mertasan/tailwindcss-variables'),
|
||||
function ({ addBase, addUtilities, addComponents, addVariant }) {
|
||||
// hide the up/down arrows in number inputs for webkit browsers
|
||||
addBase({
|
||||
'input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button':
|
||||
{
|
||||
'-webkit-appearance': 'none',
|
||||
margin: '0',
|
||||
},
|
||||
})
|
||||
addBase({
|
||||
'input[type=number]': {
|
||||
'-moz-appearance': 'textfield',
|
||||
},
|
||||
})
|
||||
// [Ivan] Not sure if it's used.
|
||||
addComponents({
|
||||
".dropdown-content[data-state='open']": {
|
||||
animation: 'fadeIn 50ms ease-out',
|
||||
},
|
||||
".dropdown-content[data-state='closed']": {
|
||||
animation: 'fadeOut 50ms ease-in',
|
||||
},
|
||||
})
|
||||
addUtilities({
|
||||
'.line-loading-bg': {
|
||||
background: 'rgb(0, 0, 0)',
|
||||
background:
|
||||
'linear-gradient(90deg,rgba(0, 0, 0, 0) 0%,rgba(255, 255, 255, 0.65) 50%,rgba(0, 0, 0, 0) 100%)',
|
||||
},
|
||||
'.line-loading-bg-light': {
|
||||
background: 'rgb(0, 0, 0)',
|
||||
background:
|
||||
'linear-gradient(90deg,rgba(0, 0, 0, 0) 0%,rgba(33, 33, 33, 0.65) 50%,rgba(0, 0, 0, 0) 100%)',
|
||||
},
|
||||
'.no-scrollbar': {
|
||||
/* Hide scrollbar for IE, Edge*/
|
||||
'-ms-overflow-style': 'none',
|
||||
|
||||
/* Firefox */
|
||||
'scrollbar-width': 'none' /* Firefox */,
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
/* Add fadeout effect */
|
||||
'.mask-fadeout-right': {
|
||||
'-webkit-mask-image': 'linear-gradient(to right, white 98%, transparent 100%)',
|
||||
'mask-image': 'linear-gradient(to right, white 98%, transparent 100%)',
|
||||
},
|
||||
'.mask-fadeout-left': {
|
||||
'-webkit-mask-image': 'linear-gradient(to left, white 98%, transparent 100%)',
|
||||
'mask-image': 'linear-gradient(to left, white 98%, transparent 100%)',
|
||||
},
|
||||
})
|
||||
addVariant('data-open-parent', '[data-state="open"] &')
|
||||
addVariant('data-closed-parent', '[data-state="closed"] &')
|
||||
addVariant('data-open', '&[data-state="open"]')
|
||||
addVariant('data-closed', '&[data-state="closed"]')
|
||||
addVariant('data-show', '&[data-state="show"]')
|
||||
addVariant('data-hide', '&[data-state="hide"]')
|
||||
addVariant('data-checked', '&[data-state="checked"]')
|
||||
addVariant('data-unchecked', '&[data-state="unchecked"]')
|
||||
addVariant('aria-expanded', '&[aria-expanded="true"]')
|
||||
// addVariant('parent-data-open', '[data-state="open"]&')
|
||||
},
|
||||
function ({ matchUtilities, theme }) {
|
||||
matchUtilities(
|
||||
{
|
||||
highlight: (value) => ({ boxShadow: `inset 0 1px 0 0 ${value}` }),
|
||||
},
|
||||
{ values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
|
||||
)
|
||||
matchUtilities(
|
||||
{
|
||||
subhighlight: (value) => ({
|
||||
boxShadow: `inset 0 -1px 0 0 ${value}`,
|
||||
}),
|
||||
},
|
||||
{
|
||||
values: flattenColorPalette(theme('backgroundColor')),
|
||||
type: 'color',
|
||||
}
|
||||
)
|
||||
matchUtilities(
|
||||
{
|
||||
'bg-grid': (value) => ({
|
||||
backgroundImage: `url("${svgToDataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
|
||||
)}")`,
|
||||
}),
|
||||
},
|
||||
{ values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
|
||||
)
|
||||
},
|
||||
require('tailwindcss-radix')(),
|
||||
forms,
|
||||
],
|
||||
}
|
||||
|
||||
function arrayMergeFn(destinationArray, sourceArray) {
|
||||
return destinationArray.concat(sourceArray).reduce((acc, cur) => {
|
||||
if (acc.includes(cur)) return acc
|
||||
return [...acc, cur]
|
||||
}, [])
|
||||
}
|
||||
|
||||
/**
|
||||
* Merge Supabase UI and Tailwind CSS configurations
|
||||
* @param {object} tailwindConfig - Tailwind config object
|
||||
* @return {object} new config object
|
||||
*/
|
||||
function wrapper(tailwindConfig) {
|
||||
let purge
|
||||
if (Array.isArray(tailwindConfig.purge)) {
|
||||
purge = {
|
||||
content: tailwindConfig.purge,
|
||||
}
|
||||
} else {
|
||||
purge = tailwindConfig.purge
|
||||
}
|
||||
return deepMerge({ ...tailwindConfig, purge }, uiConfig, {
|
||||
arrayMerge: arrayMergeFn,
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = wrapper
|
||||
@@ -0,0 +1,4 @@
|
||||
/* Placeholder so the VS Code Tailwind extension picks up IntelliSense in this
|
||||
* package. Apps own their actual entry CSS file; this file just anchors the
|
||||
* shared config for editor tooling. */
|
||||
@import 'config/tailwind.config.css';
|
||||
@@ -0,0 +1,4 @@
|
||||
/* Placeholder so the VS Code Tailwind extension picks up IntelliSense in this
|
||||
* package. Apps own their actual entry CSS file; this file just anchors the
|
||||
* shared config for editor tooling. */
|
||||
@import 'config/tailwind.config.css';
|
||||
@@ -46,7 +46,7 @@ const DROPDOWN_GAP = 8
|
||||
const commandItemClass = cn(
|
||||
'relative text-foreground-lighter text-left px-2 py-1.5 rounded-sm',
|
||||
'hover:text-foreground hover:!bg-overlay-hover w-full flex items-center space-x-2',
|
||||
'peer-data-[value=true]:bg-overlay-hover peer-data-[value=true]:text-strong'
|
||||
'peer-data-[value=true]:bg-overlay-hover'
|
||||
)
|
||||
|
||||
function useMultiSelect() {
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
/* Placeholder so the VS Code Tailwind extension picks up IntelliSense in this
|
||||
* package. Apps own their actual entry CSS file; this file just anchors the
|
||||
* shared config for editor tooling. */
|
||||
@import 'config/tailwind.config.css';
|
||||
@@ -1 +0,0 @@
|
||||
// Placeholder so that VSCode tailwind extension enables intellisense in this project
|
||||
@@ -148,7 +148,7 @@ const CommandItem = React.forwardRef<
|
||||
<CommandPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-xs outline-hidden data-[selected=true]:bg-overlay-hover data-[selected=true]:text-strong data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
|
||||
'relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-xs outline-hidden data-[selected=true]:bg-overlay-hover data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -32,7 +32,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-xs outline-hidden focus:bg-overlay-hover data-[state=open]:bg-overlay-hover data-[state=open]:text-strong',
|
||||
'flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-xs outline-hidden focus:bg-overlay-hover data-[state=open]:bg-overlay-hover',
|
||||
inset && 'pl-8',
|
||||
className
|
||||
)}
|
||||
@@ -102,7 +102,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-xs outline-hidden transition-colors focus:bg-overlay-hover focus:text-strong data-disabled:pointer-events-none data-disabled:opacity-50',
|
||||
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-xs outline-hidden transition-colors focus:bg-overlay-hover data-disabled:pointer-events-none data-disabled:opacity-50',
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
@@ -125,7 +125,7 @@ const DropdownMenuRadioItem = React.forwardRef<
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-xs outline-hidden transition-colors focus:bg-overlay-hover focus:text-strong data-disabled:pointer-events-none data-disabled:opacity-50',
|
||||
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-xs outline-hidden transition-colors focus:bg-overlay-hover data-disabled:pointer-events-none data-disabled:opacity-50',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
/* Placeholder so the VS Code Tailwind extension picks up IntelliSense in this
|
||||
* package. Apps own their actual entry CSS file; this file just anchors the
|
||||
* shared config for editor tooling. */
|
||||
@import 'config/tailwind.config.css';
|
||||
@@ -1 +0,0 @@
|
||||
// Placeholder so that VSCode tailwind extension enables intellisense in this project
|
||||
Generated
+3
-33
@@ -2139,28 +2139,16 @@ importers:
|
||||
|
||||
packages/config:
|
||||
dependencies:
|
||||
'@mertasan/tailwindcss-variables':
|
||||
specifier: ^2.2.3
|
||||
version: 2.7.0(autoprefixer@10.4.27(postcss@8.5.10))(postcss@8.5.10)
|
||||
'@radix-ui/colors':
|
||||
specifier: ^0.1.8
|
||||
version: 0.1.9
|
||||
'@tailwindcss/forms':
|
||||
specifier: ^0.5.11
|
||||
version: 0.5.11(tailwindcss@4.2.4)
|
||||
'@tailwindcss/typography':
|
||||
specifier: ^0.5.19
|
||||
version: 0.5.19(tailwindcss@4.2.4)
|
||||
deepmerge:
|
||||
specifier: ^4.2.2
|
||||
version: 4.3.1
|
||||
mini-svg-data-uri:
|
||||
specifier: ^1.4.3
|
||||
version: 1.4.4
|
||||
tailwindcss-radix:
|
||||
specifier: ^2.0.0
|
||||
version: 2.8.0
|
||||
devDependencies:
|
||||
'@radix-ui/colors':
|
||||
specifier: ^0.1.8
|
||||
version: 0.1.9
|
||||
'@tailwindcss/postcss':
|
||||
specifier: ^4.2.4
|
||||
version: 4.2.4
|
||||
@@ -4532,13 +4520,6 @@ packages:
|
||||
'@mermaid-js/parser@0.6.3':
|
||||
resolution: {integrity: sha512-lnjOhe7zyHjc+If7yT4zoedx2vo4sHaTmtkl1+or8BRTnCtDmcTpAjpzDSfCZrshM5bCoz0GyidzadJAH1xobA==}
|
||||
|
||||
'@mertasan/tailwindcss-variables@2.7.0':
|
||||
resolution: {integrity: sha512-rKPhxi/0r6XWP0+OjPmsfrloX/TtQmvONj2Pr3Nl8BNBznQVP3M9sphguDBUDC0AiKYx2xgup3XzAhlIDLPLIA==}
|
||||
engines: {node: '>=12.13.0'}
|
||||
peerDependencies:
|
||||
autoprefixer: ^10.0.2
|
||||
postcss: ^8.5.10
|
||||
|
||||
'@mjackson/headers@0.11.1':
|
||||
resolution: {integrity: sha512-uXXhd4rtDdDwkqAuGef1nuafkCa1NlTmEc1Jzc0NL4YiA1yON1NFXuqJ3hOuKvNKQwkiDwdD+JJlKVyz4dunFA==}
|
||||
|
||||
@@ -16462,9 +16443,6 @@ packages:
|
||||
peerDependencies:
|
||||
tailwindcss: '>=3.0.0 || insiders'
|
||||
|
||||
tailwindcss-radix@2.8.0:
|
||||
resolution: {integrity: sha512-1k1UfoIYgVyBl13FKwwoKavjnJ5VEaUClCTAsgz3VLquN4ay/lyaMPzkbqD71sACDs2fRGImytAUlMb4TzOt1A==}
|
||||
|
||||
tailwindcss@4.2.4:
|
||||
resolution: {integrity: sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA==}
|
||||
|
||||
@@ -20476,12 +20454,6 @@ snapshots:
|
||||
dependencies:
|
||||
langium: 3.3.1
|
||||
|
||||
'@mertasan/tailwindcss-variables@2.7.0(autoprefixer@10.4.27(postcss@8.5.10))(postcss@8.5.10)':
|
||||
dependencies:
|
||||
autoprefixer: 10.4.27(postcss@8.5.10)
|
||||
lodash: 4.18.1
|
||||
postcss: 8.5.10
|
||||
|
||||
'@mjackson/headers@0.11.1': {}
|
||||
|
||||
'@mjackson/multipart-parser@0.10.1':
|
||||
@@ -34811,8 +34783,6 @@ snapshots:
|
||||
dependencies:
|
||||
tailwindcss: 4.2.4
|
||||
|
||||
tailwindcss-radix@2.8.0: {}
|
||||
|
||||
tailwindcss@4.2.4: {}
|
||||
|
||||
tapable@2.3.0: {}
|
||||
|
||||
Reference in new issue
Block a user