Files
MattrixwvReactComponents/lib/styles.css

81 lines
3.6 KiB
CSS

@import "tailwindcss";
@theme {
/* Universal */
--color-neutral-light: oklch(92.8% 0.006 264.531); /* gray-200 */
--color-neutral: oklch(87.2% 0.01 258.338); /* gray-300 */
--color-neutral-mid: oklch(70.7% 0.022 261.325); /* gray-400 */
--color-neutral-dark: oklch(26.9% 0 0); /* gray-800 */
/* Primary */
--color-primary-xlight: oklch(88.2% 0.059 254.128); /* blue-200 */
--color-primary-light: oklch(70.7% 0.165 254.624); /* blue-400 */
--color-primary: oklch(54.6% 0.245 262.881); /* blue-600 */
--color-primary-mid: oklch(48.8% 0.243 264.376); /* blue-700 */
--color-primary-dark: oklch(42.4% 0.199 265.638); /* blue-800 */
/* Secondary */
--color-secondary-xlight: oklch(92.2% 0 0); /* neutral-200 */
--color-secondary-light: oklch(87% 0 0); /* neutral-300 */
--color-secondary: oklch(55.6% 0 0); /* neutral-500 */
--color-secondary-mid: oklch(43.9% 0 0); /* neutral-600 */
--color-secondary-dark: oklch(37.1% 0 0); /* neutral-700 */
/* Tertiary */
--color-tertiary-xlight: oklch(90.2% 0.063 306.703); /* purple-200 */
--color-tertiary-light: oklch(71.4% 0.203 305.504); /* purple-400 */
--color-tertiary: oklch(55.8% 0.288 302.321); /* purple-600 */
--color-tertiary-mid: oklch(49.6% 0.265 301.924); /* purple-700 */
--color-tertiary-dark: oklch(43.8% 0.218 303.724); /* purple-800 */
/* Info */
--color-info-xlight: oklch(95.6% 0.045 203.388); /* cyan-100 */
--color-info-light: oklch(82.8% 0.111 230.318); /* sky-300 */
--color-info: oklch(71.5% 0.143 215.221); /* cyan-500 */
--color-info-mid: oklch(60.9% 0.126 221.723); /* cyan-600 */
--color-info-dark: oklch(52% 0.105 223.128); /* cyan-700 */
--color-info-xdark: oklch(54.6% 0.245 262.881); /* blue-600 */
/* Molten */
--color-molten-xlight: oklch(95.4% 0.038 75.164); /* orange-100 */
--color-molten-light: oklch(75% 0.183 55.934); /* orange-400 */
--color-molten: oklch(64.6% 0.222 41.116); /* orange-600 */
--color-molten-mid: oklch(55.3% 0.195 38.402); /* orange-700 */
--color-molten-dark: oklch(47% 0.157 37.304); /* orange-800 */
/* Success */
--color-success-xlight: oklch(96.2% 0.044 156.743); /* green-100 */
--color-success-light: oklch(79.2% 0.209 151.711); /* green-400 */
--color-success: oklch(62.7% 0.194 149.214); /* green-600 */
--color-success-mid: oklch(52.7% 0.154 150.069); /* green-700 */
--color-success-dark: oklch(44.8% 0.119 151.328); /* green-800 */
/* Warning */
--color-warning-xlight: oklch(97.3% 0.071 103.193); /* yellow-100 */
--color-warning-light: oklch(90.5% 0.182 98.111); /* yellow-300 */
--color-warning: oklch(79.5% 0.184 86.047); /* yellow-500 */
--color-warning-mid: oklch(68.1% 0.162 75.834); /* yellow-600 */
--color-warning-dark: oklch(55.4% 0.135 66.442); /* yellow-700 */
/* Danger */
--color-danger-xlight: oklch(88.5% 0.062 18.334); /* red-200 */
--color-danger-light: oklch(70.4% 0.191 22.216); /* red-400 */
--color-danger: oklch(57.7% 0.245 27.325); /* red-600 */
--color-danger-mid: oklch(50.5% 0.213 27.518); /* red-700 */
--color-danger-dark: oklch(44.4% 0.177 26.899); /* red-800 */
/* Light */
--color-light-xlight: oklch(87% 0 0); /* neutral-300 */
--color-light-light: oklch(70.8% 0 0); /* neutral-400 */
--color-light: oklch(100% 0 0); /* white */
--color-light-mid: oklch(87% 0 0); /* neutral-300 */
--color-light-dark: oklch(70.8% 0 0); /* neutral-400 */
/* Dark */
--color-dark-xlight: oklch(100% 0 0); /* white */
--color-dark-light: oklch(37.1% 0 0); /* neutral-700 */
--color-dark: oklch(0% 0 0); /* black */
--color-dark-mid: oklch(37.1% 0 0); /* neutral-700 */
--color-dark-dark: oklch(43.9% 0 0); /* neutral-600 */
}