feat: tailwind built-in color support dark mode
Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei
parent
3d6c233553
commit
2df738dd24
|
|
@ -0,0 +1,54 @@
|
|||
const {
|
||||
transformColorObjectOfDarkmode,
|
||||
generateCSSByVar,
|
||||
} = require("./transform")
|
||||
|
||||
const fs = require("fs")
|
||||
const path = require("path")
|
||||
|
||||
const [colorObject, cssVar, cssVarDark] = transformColorObjectOfDarkmode()
|
||||
|
||||
const normalCSS = generateCSSByVar(cssVar)
|
||||
const darkCSS = generateCSSByVar(cssVarDark)
|
||||
|
||||
const cssString = `
|
||||
:root {
|
||||
${normalCSS}
|
||||
}
|
||||
|
||||
html.dark {
|
||||
${darkCSS}
|
||||
}
|
||||
|
||||
html.light {
|
||||
${normalCSS}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html:not(.dark):not(.light) {
|
||||
${darkCSS}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
html:not(.dark):not(.light) {
|
||||
${normalCSS}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
fs.writeFileSync(
|
||||
path.resolve(__dirname, "../../src/css/css-var.css"),
|
||||
cssString,
|
||||
{
|
||||
encoding: "utf-8",
|
||||
},
|
||||
)
|
||||
|
||||
fs.writeFileSync(
|
||||
path.resolve(__dirname, "../../tw-colors.js"),
|
||||
`export default ${JSON.stringify(colorObject, null, 2)}`,
|
||||
{
|
||||
encoding: "utf-8",
|
||||
},
|
||||
)
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
const colors = require("tailwindcss/colors")
|
||||
|
||||
const colorKeys = Object.keys(colors)
|
||||
const colorObject = {}
|
||||
|
||||
const hexToRGB = (hex) => {
|
||||
hex = hex.replace("#", "")
|
||||
|
||||
let r = parseInt(hex.substring(0, 2), 16)
|
||||
let g = parseInt(hex.substring(2, 4), 16)
|
||||
let b = parseInt(hex.substring(4, 6), 16)
|
||||
|
||||
return `${r}, ${g}, ${b}`
|
||||
}
|
||||
|
||||
const deprecatedColorKeyMap = {
|
||||
lightBlue: "sky",
|
||||
warmGray: "stone",
|
||||
trueGray: "neutral",
|
||||
coolGray: "gray",
|
||||
blueGray: "slate",
|
||||
}
|
||||
for (const key of colorKeys) {
|
||||
if (typeof colors[key] === "object") {
|
||||
if (deprecatedColorKeyMap[key]) {
|
||||
colorObject[deprecatedColorKeyMap[key]] = colors[key]
|
||||
continue
|
||||
}
|
||||
|
||||
colorObject[key] = colors[key]
|
||||
}
|
||||
}
|
||||
|
||||
const transformColorObjectOfDarkmode = () => {
|
||||
const cssVar = {}
|
||||
const cssVarDark = {}
|
||||
const nextColorObject = {}
|
||||
// slate: {
|
||||
// 50: '#f8fafc',
|
||||
// }
|
||||
// to
|
||||
// slate: {
|
||||
// 50: 'rgb(var(--tw-colors-i-slate-50) / <alpha-value>)',
|
||||
// ...
|
||||
// }
|
||||
for (const colorKey of Object.keys(colorObject)) {
|
||||
const color = colorObject[colorKey]
|
||||
|
||||
if (typeof color === "object") {
|
||||
const nextColor = {}
|
||||
|
||||
for (const colorNumberKey of Object.keys(color)) {
|
||||
const cssVarKey = `--tw-colors-i-${colorKey}-${colorNumberKey}`
|
||||
// @see https://tailwindcss.com/docs/customizing-colors#using-the-default-colors
|
||||
nextColor[colorNumberKey] = `rgba(var(${cssVarKey}), <alpha-value>)`
|
||||
|
||||
cssVar[cssVarKey] = hexToRGB(color[colorNumberKey])
|
||||
// 50 -> 950, 100 -> 900, 200 -> 800, ...
|
||||
|
||||
// colorKey:
|
||||
const reverseColorNumberKey = 1000 - parseInt(colorNumberKey)
|
||||
cssVarDark[cssVarKey] = hexToRGB(color[reverseColorNumberKey])
|
||||
}
|
||||
|
||||
nextColorObject[colorKey] = nextColor
|
||||
}
|
||||
}
|
||||
|
||||
// merge const color
|
||||
Object.assign(nextColorObject, {
|
||||
inherit: "inherit",
|
||||
current: "currentColor",
|
||||
transparent: "transparent",
|
||||
black: "var(--tw-colors-i-black)",
|
||||
white: "var(--tw-colors-i-white)",
|
||||
})
|
||||
cssVar["--tw-colors-i-black"] = "0, 0, 0"
|
||||
cssVar["--tw-colors-i-white"] = "255, 255, 255"
|
||||
cssVarDark["--tw-colors-i-black"] = "255, 255, 255"
|
||||
cssVarDark["--tw-colors-i-white"] = "0, 0, 0"
|
||||
|
||||
return [nextColorObject, cssVar, cssVarDark]
|
||||
}
|
||||
|
||||
function generateCSSByVar(cssVar) {
|
||||
let css = ""
|
||||
for (const key of Object.keys(cssVar)) {
|
||||
css += ` ${key}: ${cssVar[key]};\n`
|
||||
}
|
||||
|
||||
return css
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
transformColorObjectOfDarkmode,
|
||||
generateCSSByVar,
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -3,5 +3,6 @@
|
|||
@import "./prose.css";
|
||||
@import "./code.css";
|
||||
@import "./prism-dark.css";
|
||||
@import "./css-var.css";
|
||||
|
||||
@import url("https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css");
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
const twColors = require("./tw-colors")
|
||||
const alwaysColor = require("tailwindcss/colors")
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./src/**/*.tsx"],
|
||||
theme: {
|
||||
colors: twColors,
|
||||
extend: {
|
||||
boxShadow: {
|
||||
modal: `rgb(0 0 0 / 20%) 0px 0px 1px, rgb(0 0 0 / 20%) 0px 20px 40px`,
|
||||
|
|
@ -13,6 +16,9 @@ module.exports = {
|
|||
border: "var(--border-color)",
|
||||
accent: "var(--theme-color)",
|
||||
hover: "var(--hover-color)",
|
||||
always: {
|
||||
...alwaysColor,
|
||||
},
|
||||
},
|
||||
spacing: {
|
||||
sidebar: `240px`,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,288 @@
|
|||
export default {
|
||||
slate: {
|
||||
50: "rgba(var(--tw-colors-i-slate-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-slate-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-slate-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-slate-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-slate-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-slate-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-slate-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-slate-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-slate-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-slate-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-slate-950), <alpha-value>)",
|
||||
},
|
||||
gray: {
|
||||
50: "rgba(var(--tw-colors-i-gray-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-gray-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-gray-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-gray-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-gray-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-gray-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-gray-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-gray-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-gray-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-gray-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-gray-950), <alpha-value>)",
|
||||
},
|
||||
zinc: {
|
||||
50: "rgba(var(--tw-colors-i-zinc-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-zinc-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-zinc-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-zinc-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-zinc-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-zinc-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-zinc-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-zinc-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-zinc-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-zinc-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-zinc-950), <alpha-value>)",
|
||||
},
|
||||
neutral: {
|
||||
50: "rgba(var(--tw-colors-i-neutral-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-neutral-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-neutral-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-neutral-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-neutral-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-neutral-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-neutral-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-neutral-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-neutral-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-neutral-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-neutral-950), <alpha-value>)",
|
||||
},
|
||||
stone: {
|
||||
50: "rgba(var(--tw-colors-i-stone-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-stone-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-stone-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-stone-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-stone-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-stone-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-stone-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-stone-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-stone-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-stone-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-stone-950), <alpha-value>)",
|
||||
},
|
||||
red: {
|
||||
50: "rgba(var(--tw-colors-i-red-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-red-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-red-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-red-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-red-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-red-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-red-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-red-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-red-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-red-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-red-950), <alpha-value>)",
|
||||
},
|
||||
orange: {
|
||||
50: "rgba(var(--tw-colors-i-orange-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-orange-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-orange-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-orange-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-orange-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-orange-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-orange-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-orange-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-orange-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-orange-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-orange-950), <alpha-value>)",
|
||||
},
|
||||
amber: {
|
||||
50: "rgba(var(--tw-colors-i-amber-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-amber-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-amber-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-amber-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-amber-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-amber-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-amber-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-amber-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-amber-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-amber-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-amber-950), <alpha-value>)",
|
||||
},
|
||||
yellow: {
|
||||
50: "rgba(var(--tw-colors-i-yellow-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-yellow-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-yellow-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-yellow-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-yellow-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-yellow-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-yellow-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-yellow-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-yellow-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-yellow-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-yellow-950), <alpha-value>)",
|
||||
},
|
||||
lime: {
|
||||
50: "rgba(var(--tw-colors-i-lime-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-lime-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-lime-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-lime-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-lime-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-lime-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-lime-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-lime-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-lime-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-lime-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-lime-950), <alpha-value>)",
|
||||
},
|
||||
green: {
|
||||
50: "rgba(var(--tw-colors-i-green-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-green-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-green-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-green-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-green-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-green-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-green-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-green-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-green-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-green-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-green-950), <alpha-value>)",
|
||||
},
|
||||
emerald: {
|
||||
50: "rgba(var(--tw-colors-i-emerald-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-emerald-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-emerald-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-emerald-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-emerald-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-emerald-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-emerald-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-emerald-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-emerald-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-emerald-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-emerald-950), <alpha-value>)",
|
||||
},
|
||||
teal: {
|
||||
50: "rgba(var(--tw-colors-i-teal-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-teal-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-teal-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-teal-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-teal-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-teal-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-teal-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-teal-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-teal-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-teal-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-teal-950), <alpha-value>)",
|
||||
},
|
||||
cyan: {
|
||||
50: "rgba(var(--tw-colors-i-cyan-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-cyan-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-cyan-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-cyan-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-cyan-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-cyan-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-cyan-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-cyan-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-cyan-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-cyan-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-cyan-950), <alpha-value>)",
|
||||
},
|
||||
sky: {
|
||||
50: "rgba(var(--tw-colors-i-sky-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-sky-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-sky-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-sky-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-sky-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-sky-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-sky-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-sky-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-sky-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-sky-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-sky-950), <alpha-value>)",
|
||||
},
|
||||
blue: {
|
||||
50: "rgba(var(--tw-colors-i-blue-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-blue-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-blue-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-blue-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-blue-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-blue-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-blue-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-blue-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-blue-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-blue-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-blue-950), <alpha-value>)",
|
||||
},
|
||||
indigo: {
|
||||
50: "rgba(var(--tw-colors-i-indigo-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-indigo-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-indigo-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-indigo-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-indigo-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-indigo-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-indigo-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-indigo-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-indigo-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-indigo-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-indigo-950), <alpha-value>)",
|
||||
},
|
||||
violet: {
|
||||
50: "rgba(var(--tw-colors-i-violet-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-violet-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-violet-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-violet-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-violet-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-violet-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-violet-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-violet-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-violet-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-violet-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-violet-950), <alpha-value>)",
|
||||
},
|
||||
purple: {
|
||||
50: "rgba(var(--tw-colors-i-purple-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-purple-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-purple-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-purple-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-purple-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-purple-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-purple-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-purple-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-purple-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-purple-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-purple-950), <alpha-value>)",
|
||||
},
|
||||
fuchsia: {
|
||||
50: "rgba(var(--tw-colors-i-fuchsia-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-fuchsia-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-fuchsia-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-fuchsia-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-fuchsia-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-fuchsia-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-fuchsia-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-fuchsia-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-fuchsia-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-fuchsia-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-fuchsia-950), <alpha-value>)",
|
||||
},
|
||||
pink: {
|
||||
50: "rgba(var(--tw-colors-i-pink-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-pink-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-pink-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-pink-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-pink-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-pink-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-pink-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-pink-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-pink-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-pink-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-pink-950), <alpha-value>)",
|
||||
},
|
||||
rose: {
|
||||
50: "rgba(var(--tw-colors-i-rose-50), <alpha-value>)",
|
||||
100: "rgba(var(--tw-colors-i-rose-100), <alpha-value>)",
|
||||
200: "rgba(var(--tw-colors-i-rose-200), <alpha-value>)",
|
||||
300: "rgba(var(--tw-colors-i-rose-300), <alpha-value>)",
|
||||
400: "rgba(var(--tw-colors-i-rose-400), <alpha-value>)",
|
||||
500: "rgba(var(--tw-colors-i-rose-500), <alpha-value>)",
|
||||
600: "rgba(var(--tw-colors-i-rose-600), <alpha-value>)",
|
||||
700: "rgba(var(--tw-colors-i-rose-700), <alpha-value>)",
|
||||
800: "rgba(var(--tw-colors-i-rose-800), <alpha-value>)",
|
||||
900: "rgba(var(--tw-colors-i-rose-900), <alpha-value>)",
|
||||
950: "rgba(var(--tw-colors-i-rose-950), <alpha-value>)",
|
||||
},
|
||||
}
|
||||
Loading…
Reference in New Issue