From 9f4221fce4e4399d198bf02c8265ffadd7935496 Mon Sep 17 00:00:00 2001 From: songkeys Date: Sat, 15 Feb 2025 19:28:22 +0800 Subject: [PATCH] fix: alpha colors in v4 #14 --- src/generate.js | 70 ++++---- src/index.css | 460 ++++++++++++++++++++++++------------------------ src/theme.css | 460 ++++++++++++++++++++++++------------------------ 3 files changed, 495 insertions(+), 495 deletions(-) diff --git a/src/generate.js b/src/generate.js index 5a0a0d7..52ebd31 100644 --- a/src/generate.js +++ b/src/generate.js @@ -37,35 +37,35 @@ ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"], --font-headings: var(--mantine-font-family-headings); /* colors - primary */ - --color-primary-50: rgb(from var(--mantine-primary-color-0) r g b / ); - --color-primary-100: rgb(from var(--mantine-primary-color-1) r g b / ); - --color-primary-200: rgb(from var(--mantine-primary-color-2) r g b / ); - --color-primary-300: rgb(from var(--mantine-primary-color-3) r g b / ); - --color-primary-400: rgb(from var(--mantine-primary-color-4) r g b / ); - --color-primary-500: rgb(from var(--mantine-primary-color-5) r g b / ); - --color-primary-600: rgb(from var(--mantine-primary-color-6) r g b / ); - --color-primary-700: rgb(from var(--mantine-primary-color-7) r g b / ); - --color-primary-800: rgb(from var(--mantine-primary-color-8) r g b / ); - --color-primary-900: rgb(from var(--mantine-primary-color-9) r g b / ); - --color-primary: rgb(from var(--mantine-primary-color-filled) r g b / ); + --color-primary-50: var(--mantine-primary-color-0); + --color-primary-100: var(--mantine-primary-color-1); + --color-primary-200: var(--mantine-primary-color-2); + --color-primary-300: var(--mantine-primary-color-3); + --color-primary-400: var(--mantine-primary-color-4); + --color-primary-500: var(--mantine-primary-color-5); + --color-primary-600: var(--mantine-primary-color-6); + --color-primary-700: var(--mantine-primary-color-7); + --color-primary-800: var(--mantine-primary-color-8); + --color-primary-900: var(--mantine-primary-color-9); + --color-primary: var(--mantine-primary-color-filled); /* colors - variant specific primary */ - --color-primary-filled: rgb(from var(--mantine-primary-color-filled) r g b / ); + --color-primary-filled: var(--mantine-primary-color-filled); --color-primary-filled-hover: var(--mantine-primary-color-filled-hover); --color-primary-light: var(--mantine-primary-color-light); --color-primary-light-hover: var(--mantine-primary-color-light-hover); - --color-primary-light-color: rgb(from var(--mantine-primary-color-light-color) r g b / ); - --color-primary-outline: rgb(from var(--mantine-primary-color-outline) r g b / ); + --color-primary-light-color: var(--mantine-primary-color-light-color); + --color-primary-outline: var(--mantine-primary-color-outline); --color-primary-outline-hover: var(--mantine-primary-color-outline-hover); /* colors - others */ - --color-white: rgb(from var(--mantine-color-white) r g b / ); - --color-black: rgb(from var(--mantine-color-black) r g b / ); - --color-body: rgb(from var(--mantine-color-text) r g b / ); - --color-error: rgb(from var(--mantine-color-error) r g b / ); - --color-placeholder: rgb(from var(--mantine-color-placeholder) r g b / ); - --color-anchor: rgb(from var(--mantine-color-anchor) r g b / ); - --color-default: rgb(from var(--mantine-color-default-color) r g b / ); + --color-white: var(--mantine-color-white); + --color-black: var(--mantine-color-black); + --color-body: var(--mantine-color-text); + --color-error: var(--mantine-color-error); + --color-placeholder: var(--mantine-color-placeholder); + --color-anchor: var(--mantine-color-anchor); + --color-default: var(--mantine-color-default-color); /* spacing */ --spacing-xs: var(--mantine-spacing-xs); @@ -146,17 +146,17 @@ ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"], ${Object.keys(theme.colors ?? {}) .map((key) => ` - --color-${key}-50: rgb(from var(--mantine-color-${key}-0) r g b / ); - --color-${key}-100: rgb(from var(--mantine-color-${key}-1) r g b / ); - --color-${key}-200: rgb(from var(--mantine-color-${key}-2) r g b / ); - --color-${key}-300: rgb(from var(--mantine-color-${key}-3) r g b / ); - --color-${key}-400: rgb(from var(--mantine-color-${key}-4) r g b / ); - --color-${key}-500: rgb(from var(--mantine-color-${key}-5) r g b / ); - --color-${key}-600: rgb(from var(--mantine-color-${key}-6) r g b / ); - --color-${key}-700: rgb(from var(--mantine-color-${key}-7) r g b / ); - --color-${key}-800: rgb(from var(--mantine-color-${key}-8) r g b / ); - --color-${key}-900: rgb(from var(--mantine-color-${key}-9) r g b / ); - --color-${key}: rgb(from var(--mantine-color-${key}-filled) r g b / ); + --color-${key}-50: var(--mantine-color-${key}-0); + --color-${key}-100: var(--mantine-color-${key}-1); + --color-${key}-200: var(--mantine-color-${key}-2); + --color-${key}-300: var(--mantine-color-${key}-3); + --color-${key}-400: var(--mantine-color-${key}-4); + --color-${key}-500: var(--mantine-color-${key}-5); + --color-${key}-600: var(--mantine-color-${key}-6); + --color-${key}-700: var(--mantine-color-${key}-7); + --color-${key}-800: var(--mantine-color-${key}-8); + --color-${key}-900: var(--mantine-color-${key}-9); + --color-${key}: var(--mantine-color-${key}-filled); `.trimEnd(), ) .join("\n")} @@ -165,12 +165,12 @@ ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"], ${Object.keys(theme.colors ?? {}) .map((key) => ` - --color-${key}-filled: rgb(from var(--mantine-color-${key}-filled) r g b / ); + --color-${key}-filled: var(--mantine-color-${key}-filled); --color-${key}-filled-hover: var(--mantine-color-${key}-filled-hover); --color-${key}-light: var(--mantine-color-${key}-light); --color-${key}-light-hover: var(--mantine-color-${key}-light-hover); - --color-${key}-light-color: rgb(from var(--mantine-color-${key}-light-color) r g b / ); - --color-${key}-outline: rgb(from var(--mantine-color-${key}-outline) r g b / ); + --color-${key}-light-color: var(--mantine-color-${key}-light-color); + --color-${key}-outline: var(--mantine-color-${key}-outline); --color-${key}-outline-hover: var(--mantine-color-${key}-outline-hover); `.trimEnd(), ) diff --git a/src/index.css b/src/index.css index 7a79221..8880509 100644 --- a/src/index.css +++ b/src/index.css @@ -18,35 +18,35 @@ --font-headings: var(--mantine-font-family-headings); /* colors - primary */ - --color-primary-50: rgb(from var(--mantine-primary-color-0) r g b / ); - --color-primary-100: rgb(from var(--mantine-primary-color-1) r g b / ); - --color-primary-200: rgb(from var(--mantine-primary-color-2) r g b / ); - --color-primary-300: rgb(from var(--mantine-primary-color-3) r g b / ); - --color-primary-400: rgb(from var(--mantine-primary-color-4) r g b / ); - --color-primary-500: rgb(from var(--mantine-primary-color-5) r g b / ); - --color-primary-600: rgb(from var(--mantine-primary-color-6) r g b / ); - --color-primary-700: rgb(from var(--mantine-primary-color-7) r g b / ); - --color-primary-800: rgb(from var(--mantine-primary-color-8) r g b / ); - --color-primary-900: rgb(from var(--mantine-primary-color-9) r g b / ); - --color-primary: rgb(from var(--mantine-primary-color-filled) r g b / ); + --color-primary-50: var(--mantine-primary-color-0); + --color-primary-100: var(--mantine-primary-color-1); + --color-primary-200: var(--mantine-primary-color-2); + --color-primary-300: var(--mantine-primary-color-3); + --color-primary-400: var(--mantine-primary-color-4); + --color-primary-500: var(--mantine-primary-color-5); + --color-primary-600: var(--mantine-primary-color-6); + --color-primary-700: var(--mantine-primary-color-7); + --color-primary-800: var(--mantine-primary-color-8); + --color-primary-900: var(--mantine-primary-color-9); + --color-primary: var(--mantine-primary-color-filled); /* colors - variant specific primary */ - --color-primary-filled: rgb(from var(--mantine-primary-color-filled) r g b / ); + --color-primary-filled: var(--mantine-primary-color-filled); --color-primary-filled-hover: var(--mantine-primary-color-filled-hover); --color-primary-light: var(--mantine-primary-color-light); --color-primary-light-hover: var(--mantine-primary-color-light-hover); - --color-primary-light-color: rgb(from var(--mantine-primary-color-light-color) r g b / ); - --color-primary-outline: rgb(from var(--mantine-primary-color-outline) r g b / ); + --color-primary-light-color: var(--mantine-primary-color-light-color); + --color-primary-outline: var(--mantine-primary-color-outline); --color-primary-outline-hover: var(--mantine-primary-color-outline-hover); /* colors - others */ - --color-white: rgb(from var(--mantine-color-white) r g b / ); - --color-black: rgb(from var(--mantine-color-black) r g b / ); - --color-body: rgb(from var(--mantine-color-text) r g b / ); - --color-error: rgb(from var(--mantine-color-error) r g b / ); - --color-placeholder: rgb(from var(--mantine-color-placeholder) r g b / ); - --color-anchor: rgb(from var(--mantine-color-anchor) r g b / ); - --color-default: rgb(from var(--mantine-color-default-color) r g b / ); + --color-white: var(--mantine-color-white); + --color-black: var(--mantine-color-black); + --color-body: var(--mantine-color-text); + --color-error: var(--mantine-color-error); + --color-placeholder: var(--mantine-color-placeholder); + --color-anchor: var(--mantine-color-anchor); + --color-default: var(--mantine-color-default-color); /* spacing */ --spacing-xs: var(--mantine-spacing-xs); @@ -122,286 +122,286 @@ /* colors - all */ - --color-dark-50: rgb(from var(--mantine-color-dark-0) r g b / ); - --color-dark-100: rgb(from var(--mantine-color-dark-1) r g b / ); - --color-dark-200: rgb(from var(--mantine-color-dark-2) r g b / ); - --color-dark-300: rgb(from var(--mantine-color-dark-3) r g b / ); - --color-dark-400: rgb(from var(--mantine-color-dark-4) r g b / ); - --color-dark-500: rgb(from var(--mantine-color-dark-5) r g b / ); - --color-dark-600: rgb(from var(--mantine-color-dark-6) r g b / ); - --color-dark-700: rgb(from var(--mantine-color-dark-7) r g b / ); - --color-dark-800: rgb(from var(--mantine-color-dark-8) r g b / ); - --color-dark-900: rgb(from var(--mantine-color-dark-9) r g b / ); - --color-dark: rgb(from var(--mantine-color-dark-filled) r g b / ); - - --color-gray-50: rgb(from var(--mantine-color-gray-0) r g b / ); - --color-gray-100: rgb(from var(--mantine-color-gray-1) r g b / ); - --color-gray-200: rgb(from var(--mantine-color-gray-2) r g b / ); - --color-gray-300: rgb(from var(--mantine-color-gray-3) r g b / ); - --color-gray-400: rgb(from var(--mantine-color-gray-4) r g b / ); - --color-gray-500: rgb(from var(--mantine-color-gray-5) r g b / ); - --color-gray-600: rgb(from var(--mantine-color-gray-6) r g b / ); - --color-gray-700: rgb(from var(--mantine-color-gray-7) r g b / ); - --color-gray-800: rgb(from var(--mantine-color-gray-8) r g b / ); - --color-gray-900: rgb(from var(--mantine-color-gray-9) r g b / ); - --color-gray: rgb(from var(--mantine-color-gray-filled) r g b / ); - - --color-red-50: rgb(from var(--mantine-color-red-0) r g b / ); - --color-red-100: rgb(from var(--mantine-color-red-1) r g b / ); - --color-red-200: rgb(from var(--mantine-color-red-2) r g b / ); - --color-red-300: rgb(from var(--mantine-color-red-3) r g b / ); - --color-red-400: rgb(from var(--mantine-color-red-4) r g b / ); - --color-red-500: rgb(from var(--mantine-color-red-5) r g b / ); - --color-red-600: rgb(from var(--mantine-color-red-6) r g b / ); - --color-red-700: rgb(from var(--mantine-color-red-7) r g b / ); - --color-red-800: rgb(from var(--mantine-color-red-8) r g b / ); - --color-red-900: rgb(from var(--mantine-color-red-9) r g b / ); - --color-red: rgb(from var(--mantine-color-red-filled) r g b / ); - - --color-pink-50: rgb(from var(--mantine-color-pink-0) r g b / ); - --color-pink-100: rgb(from var(--mantine-color-pink-1) r g b / ); - --color-pink-200: rgb(from var(--mantine-color-pink-2) r g b / ); - --color-pink-300: rgb(from var(--mantine-color-pink-3) r g b / ); - --color-pink-400: rgb(from var(--mantine-color-pink-4) r g b / ); - --color-pink-500: rgb(from var(--mantine-color-pink-5) r g b / ); - --color-pink-600: rgb(from var(--mantine-color-pink-6) r g b / ); - --color-pink-700: rgb(from var(--mantine-color-pink-7) r g b / ); - --color-pink-800: rgb(from var(--mantine-color-pink-8) r g b / ); - --color-pink-900: rgb(from var(--mantine-color-pink-9) r g b / ); - --color-pink: rgb(from var(--mantine-color-pink-filled) r g b / ); - - --color-grape-50: rgb(from var(--mantine-color-grape-0) r g b / ); - --color-grape-100: rgb(from var(--mantine-color-grape-1) r g b / ); - --color-grape-200: rgb(from var(--mantine-color-grape-2) r g b / ); - --color-grape-300: rgb(from var(--mantine-color-grape-3) r g b / ); - --color-grape-400: rgb(from var(--mantine-color-grape-4) r g b / ); - --color-grape-500: rgb(from var(--mantine-color-grape-5) r g b / ); - --color-grape-600: rgb(from var(--mantine-color-grape-6) r g b / ); - --color-grape-700: rgb(from var(--mantine-color-grape-7) r g b / ); - --color-grape-800: rgb(from var(--mantine-color-grape-8) r g b / ); - --color-grape-900: rgb(from var(--mantine-color-grape-9) r g b / ); - --color-grape: rgb(from var(--mantine-color-grape-filled) r g b / ); - - --color-violet-50: rgb(from var(--mantine-color-violet-0) r g b / ); - --color-violet-100: rgb(from var(--mantine-color-violet-1) r g b / ); - --color-violet-200: rgb(from var(--mantine-color-violet-2) r g b / ); - --color-violet-300: rgb(from var(--mantine-color-violet-3) r g b / ); - --color-violet-400: rgb(from var(--mantine-color-violet-4) r g b / ); - --color-violet-500: rgb(from var(--mantine-color-violet-5) r g b / ); - --color-violet-600: rgb(from var(--mantine-color-violet-6) r g b / ); - --color-violet-700: rgb(from var(--mantine-color-violet-7) r g b / ); - --color-violet-800: rgb(from var(--mantine-color-violet-8) r g b / ); - --color-violet-900: rgb(from var(--mantine-color-violet-9) r g b / ); - --color-violet: rgb(from var(--mantine-color-violet-filled) r g b / ); - - --color-indigo-50: rgb(from var(--mantine-color-indigo-0) r g b / ); - --color-indigo-100: rgb(from var(--mantine-color-indigo-1) r g b / ); - --color-indigo-200: rgb(from var(--mantine-color-indigo-2) r g b / ); - --color-indigo-300: rgb(from var(--mantine-color-indigo-3) r g b / ); - --color-indigo-400: rgb(from var(--mantine-color-indigo-4) r g b / ); - --color-indigo-500: rgb(from var(--mantine-color-indigo-5) r g b / ); - --color-indigo-600: rgb(from var(--mantine-color-indigo-6) r g b / ); - --color-indigo-700: rgb(from var(--mantine-color-indigo-7) r g b / ); - --color-indigo-800: rgb(from var(--mantine-color-indigo-8) r g b / ); - --color-indigo-900: rgb(from var(--mantine-color-indigo-9) r g b / ); - --color-indigo: rgb(from var(--mantine-color-indigo-filled) r g b / ); - - --color-blue-50: rgb(from var(--mantine-color-blue-0) r g b / ); - --color-blue-100: rgb(from var(--mantine-color-blue-1) r g b / ); - --color-blue-200: rgb(from var(--mantine-color-blue-2) r g b / ); - --color-blue-300: rgb(from var(--mantine-color-blue-3) r g b / ); - --color-blue-400: rgb(from var(--mantine-color-blue-4) r g b / ); - --color-blue-500: rgb(from var(--mantine-color-blue-5) r g b / ); - --color-blue-600: rgb(from var(--mantine-color-blue-6) r g b / ); - --color-blue-700: rgb(from var(--mantine-color-blue-7) r g b / ); - --color-blue-800: rgb(from var(--mantine-color-blue-8) r g b / ); - --color-blue-900: rgb(from var(--mantine-color-blue-9) r g b / ); - --color-blue: rgb(from var(--mantine-color-blue-filled) r g b / ); - - --color-cyan-50: rgb(from var(--mantine-color-cyan-0) r g b / ); - --color-cyan-100: rgb(from var(--mantine-color-cyan-1) r g b / ); - --color-cyan-200: rgb(from var(--mantine-color-cyan-2) r g b / ); - --color-cyan-300: rgb(from var(--mantine-color-cyan-3) r g b / ); - --color-cyan-400: rgb(from var(--mantine-color-cyan-4) r g b / ); - --color-cyan-500: rgb(from var(--mantine-color-cyan-5) r g b / ); - --color-cyan-600: rgb(from var(--mantine-color-cyan-6) r g b / ); - --color-cyan-700: rgb(from var(--mantine-color-cyan-7) r g b / ); - --color-cyan-800: rgb(from var(--mantine-color-cyan-8) r g b / ); - --color-cyan-900: rgb(from var(--mantine-color-cyan-9) r g b / ); - --color-cyan: rgb(from var(--mantine-color-cyan-filled) r g b / ); - - --color-teal-50: rgb(from var(--mantine-color-teal-0) r g b / ); - --color-teal-100: rgb(from var(--mantine-color-teal-1) r g b / ); - --color-teal-200: rgb(from var(--mantine-color-teal-2) r g b / ); - --color-teal-300: rgb(from var(--mantine-color-teal-3) r g b / ); - --color-teal-400: rgb(from var(--mantine-color-teal-4) r g b / ); - --color-teal-500: rgb(from var(--mantine-color-teal-5) r g b / ); - --color-teal-600: rgb(from var(--mantine-color-teal-6) r g b / ); - --color-teal-700: rgb(from var(--mantine-color-teal-7) r g b / ); - --color-teal-800: rgb(from var(--mantine-color-teal-8) r g b / ); - --color-teal-900: rgb(from var(--mantine-color-teal-9) r g b / ); - --color-teal: rgb(from var(--mantine-color-teal-filled) r g b / ); - - --color-green-50: rgb(from var(--mantine-color-green-0) r g b / ); - --color-green-100: rgb(from var(--mantine-color-green-1) r g b / ); - --color-green-200: rgb(from var(--mantine-color-green-2) r g b / ); - --color-green-300: rgb(from var(--mantine-color-green-3) r g b / ); - --color-green-400: rgb(from var(--mantine-color-green-4) r g b / ); - --color-green-500: rgb(from var(--mantine-color-green-5) r g b / ); - --color-green-600: rgb(from var(--mantine-color-green-6) r g b / ); - --color-green-700: rgb(from var(--mantine-color-green-7) r g b / ); - --color-green-800: rgb(from var(--mantine-color-green-8) r g b / ); - --color-green-900: rgb(from var(--mantine-color-green-9) r g b / ); - --color-green: rgb(from var(--mantine-color-green-filled) r g b / ); - - --color-lime-50: rgb(from var(--mantine-color-lime-0) r g b / ); - --color-lime-100: rgb(from var(--mantine-color-lime-1) r g b / ); - --color-lime-200: rgb(from var(--mantine-color-lime-2) r g b / ); - --color-lime-300: rgb(from var(--mantine-color-lime-3) r g b / ); - --color-lime-400: rgb(from var(--mantine-color-lime-4) r g b / ); - --color-lime-500: rgb(from var(--mantine-color-lime-5) r g b / ); - --color-lime-600: rgb(from var(--mantine-color-lime-6) r g b / ); - --color-lime-700: rgb(from var(--mantine-color-lime-7) r g b / ); - --color-lime-800: rgb(from var(--mantine-color-lime-8) r g b / ); - --color-lime-900: rgb(from var(--mantine-color-lime-9) r g b / ); - --color-lime: rgb(from var(--mantine-color-lime-filled) r g b / ); - - --color-yellow-50: rgb(from var(--mantine-color-yellow-0) r g b / ); - --color-yellow-100: rgb(from var(--mantine-color-yellow-1) r g b / ); - --color-yellow-200: rgb(from var(--mantine-color-yellow-2) r g b / ); - --color-yellow-300: rgb(from var(--mantine-color-yellow-3) r g b / ); - --color-yellow-400: rgb(from var(--mantine-color-yellow-4) r g b / ); - --color-yellow-500: rgb(from var(--mantine-color-yellow-5) r g b / ); - --color-yellow-600: rgb(from var(--mantine-color-yellow-6) r g b / ); - --color-yellow-700: rgb(from var(--mantine-color-yellow-7) r g b / ); - --color-yellow-800: rgb(from var(--mantine-color-yellow-8) r g b / ); - --color-yellow-900: rgb(from var(--mantine-color-yellow-9) r g b / ); - --color-yellow: rgb(from var(--mantine-color-yellow-filled) r g b / ); - - --color-orange-50: rgb(from var(--mantine-color-orange-0) r g b / ); - --color-orange-100: rgb(from var(--mantine-color-orange-1) r g b / ); - --color-orange-200: rgb(from var(--mantine-color-orange-2) r g b / ); - --color-orange-300: rgb(from var(--mantine-color-orange-3) r g b / ); - --color-orange-400: rgb(from var(--mantine-color-orange-4) r g b / ); - --color-orange-500: rgb(from var(--mantine-color-orange-5) r g b / ); - --color-orange-600: rgb(from var(--mantine-color-orange-6) r g b / ); - --color-orange-700: rgb(from var(--mantine-color-orange-7) r g b / ); - --color-orange-800: rgb(from var(--mantine-color-orange-8) r g b / ); - --color-orange-900: rgb(from var(--mantine-color-orange-9) r g b / ); - --color-orange: rgb(from var(--mantine-color-orange-filled) r g b / ); + --color-dark-50: var(--mantine-color-dark-0); + --color-dark-100: var(--mantine-color-dark-1); + --color-dark-200: var(--mantine-color-dark-2); + --color-dark-300: var(--mantine-color-dark-3); + --color-dark-400: var(--mantine-color-dark-4); + --color-dark-500: var(--mantine-color-dark-5); + --color-dark-600: var(--mantine-color-dark-6); + --color-dark-700: var(--mantine-color-dark-7); + --color-dark-800: var(--mantine-color-dark-8); + --color-dark-900: var(--mantine-color-dark-9); + --color-dark: var(--mantine-color-dark-filled); + + --color-gray-50: var(--mantine-color-gray-0); + --color-gray-100: var(--mantine-color-gray-1); + --color-gray-200: var(--mantine-color-gray-2); + --color-gray-300: var(--mantine-color-gray-3); + --color-gray-400: var(--mantine-color-gray-4); + --color-gray-500: var(--mantine-color-gray-5); + --color-gray-600: var(--mantine-color-gray-6); + --color-gray-700: var(--mantine-color-gray-7); + --color-gray-800: var(--mantine-color-gray-8); + --color-gray-900: var(--mantine-color-gray-9); + --color-gray: var(--mantine-color-gray-filled); + + --color-red-50: var(--mantine-color-red-0); + --color-red-100: var(--mantine-color-red-1); + --color-red-200: var(--mantine-color-red-2); + --color-red-300: var(--mantine-color-red-3); + --color-red-400: var(--mantine-color-red-4); + --color-red-500: var(--mantine-color-red-5); + --color-red-600: var(--mantine-color-red-6); + --color-red-700: var(--mantine-color-red-7); + --color-red-800: var(--mantine-color-red-8); + --color-red-900: var(--mantine-color-red-9); + --color-red: var(--mantine-color-red-filled); + + --color-pink-50: var(--mantine-color-pink-0); + --color-pink-100: var(--mantine-color-pink-1); + --color-pink-200: var(--mantine-color-pink-2); + --color-pink-300: var(--mantine-color-pink-3); + --color-pink-400: var(--mantine-color-pink-4); + --color-pink-500: var(--mantine-color-pink-5); + --color-pink-600: var(--mantine-color-pink-6); + --color-pink-700: var(--mantine-color-pink-7); + --color-pink-800: var(--mantine-color-pink-8); + --color-pink-900: var(--mantine-color-pink-9); + --color-pink: var(--mantine-color-pink-filled); + + --color-grape-50: var(--mantine-color-grape-0); + --color-grape-100: var(--mantine-color-grape-1); + --color-grape-200: var(--mantine-color-grape-2); + --color-grape-300: var(--mantine-color-grape-3); + --color-grape-400: var(--mantine-color-grape-4); + --color-grape-500: var(--mantine-color-grape-5); + --color-grape-600: var(--mantine-color-grape-6); + --color-grape-700: var(--mantine-color-grape-7); + --color-grape-800: var(--mantine-color-grape-8); + --color-grape-900: var(--mantine-color-grape-9); + --color-grape: var(--mantine-color-grape-filled); + + --color-violet-50: var(--mantine-color-violet-0); + --color-violet-100: var(--mantine-color-violet-1); + --color-violet-200: var(--mantine-color-violet-2); + --color-violet-300: var(--mantine-color-violet-3); + --color-violet-400: var(--mantine-color-violet-4); + --color-violet-500: var(--mantine-color-violet-5); + --color-violet-600: var(--mantine-color-violet-6); + --color-violet-700: var(--mantine-color-violet-7); + --color-violet-800: var(--mantine-color-violet-8); + --color-violet-900: var(--mantine-color-violet-9); + --color-violet: var(--mantine-color-violet-filled); + + --color-indigo-50: var(--mantine-color-indigo-0); + --color-indigo-100: var(--mantine-color-indigo-1); + --color-indigo-200: var(--mantine-color-indigo-2); + --color-indigo-300: var(--mantine-color-indigo-3); + --color-indigo-400: var(--mantine-color-indigo-4); + --color-indigo-500: var(--mantine-color-indigo-5); + --color-indigo-600: var(--mantine-color-indigo-6); + --color-indigo-700: var(--mantine-color-indigo-7); + --color-indigo-800: var(--mantine-color-indigo-8); + --color-indigo-900: var(--mantine-color-indigo-9); + --color-indigo: var(--mantine-color-indigo-filled); + + --color-blue-50: var(--mantine-color-blue-0); + --color-blue-100: var(--mantine-color-blue-1); + --color-blue-200: var(--mantine-color-blue-2); + --color-blue-300: var(--mantine-color-blue-3); + --color-blue-400: var(--mantine-color-blue-4); + --color-blue-500: var(--mantine-color-blue-5); + --color-blue-600: var(--mantine-color-blue-6); + --color-blue-700: var(--mantine-color-blue-7); + --color-blue-800: var(--mantine-color-blue-8); + --color-blue-900: var(--mantine-color-blue-9); + --color-blue: var(--mantine-color-blue-filled); + + --color-cyan-50: var(--mantine-color-cyan-0); + --color-cyan-100: var(--mantine-color-cyan-1); + --color-cyan-200: var(--mantine-color-cyan-2); + --color-cyan-300: var(--mantine-color-cyan-3); + --color-cyan-400: var(--mantine-color-cyan-4); + --color-cyan-500: var(--mantine-color-cyan-5); + --color-cyan-600: var(--mantine-color-cyan-6); + --color-cyan-700: var(--mantine-color-cyan-7); + --color-cyan-800: var(--mantine-color-cyan-8); + --color-cyan-900: var(--mantine-color-cyan-9); + --color-cyan: var(--mantine-color-cyan-filled); + + --color-teal-50: var(--mantine-color-teal-0); + --color-teal-100: var(--mantine-color-teal-1); + --color-teal-200: var(--mantine-color-teal-2); + --color-teal-300: var(--mantine-color-teal-3); + --color-teal-400: var(--mantine-color-teal-4); + --color-teal-500: var(--mantine-color-teal-5); + --color-teal-600: var(--mantine-color-teal-6); + --color-teal-700: var(--mantine-color-teal-7); + --color-teal-800: var(--mantine-color-teal-8); + --color-teal-900: var(--mantine-color-teal-9); + --color-teal: var(--mantine-color-teal-filled); + + --color-green-50: var(--mantine-color-green-0); + --color-green-100: var(--mantine-color-green-1); + --color-green-200: var(--mantine-color-green-2); + --color-green-300: var(--mantine-color-green-3); + --color-green-400: var(--mantine-color-green-4); + --color-green-500: var(--mantine-color-green-5); + --color-green-600: var(--mantine-color-green-6); + --color-green-700: var(--mantine-color-green-7); + --color-green-800: var(--mantine-color-green-8); + --color-green-900: var(--mantine-color-green-9); + --color-green: var(--mantine-color-green-filled); + + --color-lime-50: var(--mantine-color-lime-0); + --color-lime-100: var(--mantine-color-lime-1); + --color-lime-200: var(--mantine-color-lime-2); + --color-lime-300: var(--mantine-color-lime-3); + --color-lime-400: var(--mantine-color-lime-4); + --color-lime-500: var(--mantine-color-lime-5); + --color-lime-600: var(--mantine-color-lime-6); + --color-lime-700: var(--mantine-color-lime-7); + --color-lime-800: var(--mantine-color-lime-8); + --color-lime-900: var(--mantine-color-lime-9); + --color-lime: var(--mantine-color-lime-filled); + + --color-yellow-50: var(--mantine-color-yellow-0); + --color-yellow-100: var(--mantine-color-yellow-1); + --color-yellow-200: var(--mantine-color-yellow-2); + --color-yellow-300: var(--mantine-color-yellow-3); + --color-yellow-400: var(--mantine-color-yellow-4); + --color-yellow-500: var(--mantine-color-yellow-5); + --color-yellow-600: var(--mantine-color-yellow-6); + --color-yellow-700: var(--mantine-color-yellow-7); + --color-yellow-800: var(--mantine-color-yellow-8); + --color-yellow-900: var(--mantine-color-yellow-9); + --color-yellow: var(--mantine-color-yellow-filled); + + --color-orange-50: var(--mantine-color-orange-0); + --color-orange-100: var(--mantine-color-orange-1); + --color-orange-200: var(--mantine-color-orange-2); + --color-orange-300: var(--mantine-color-orange-3); + --color-orange-400: var(--mantine-color-orange-4); + --color-orange-500: var(--mantine-color-orange-5); + --color-orange-600: var(--mantine-color-orange-6); + --color-orange-700: var(--mantine-color-orange-7); + --color-orange-800: var(--mantine-color-orange-8); + --color-orange-900: var(--mantine-color-orange-9); + --color-orange: var(--mantine-color-orange-filled); /* colors - variant specific */ - --color-dark-filled: rgb(from var(--mantine-color-dark-filled) r g b / ); + --color-dark-filled: var(--mantine-color-dark-filled); --color-dark-filled-hover: var(--mantine-color-dark-filled-hover); --color-dark-light: var(--mantine-color-dark-light); --color-dark-light-hover: var(--mantine-color-dark-light-hover); - --color-dark-light-color: rgb(from var(--mantine-color-dark-light-color) r g b / ); - --color-dark-outline: rgb(from var(--mantine-color-dark-outline) r g b / ); + --color-dark-light-color: var(--mantine-color-dark-light-color); + --color-dark-outline: var(--mantine-color-dark-outline); --color-dark-outline-hover: var(--mantine-color-dark-outline-hover); - --color-gray-filled: rgb(from var(--mantine-color-gray-filled) r g b / ); + --color-gray-filled: var(--mantine-color-gray-filled); --color-gray-filled-hover: var(--mantine-color-gray-filled-hover); --color-gray-light: var(--mantine-color-gray-light); --color-gray-light-hover: var(--mantine-color-gray-light-hover); - --color-gray-light-color: rgb(from var(--mantine-color-gray-light-color) r g b / ); - --color-gray-outline: rgb(from var(--mantine-color-gray-outline) r g b / ); + --color-gray-light-color: var(--mantine-color-gray-light-color); + --color-gray-outline: var(--mantine-color-gray-outline); --color-gray-outline-hover: var(--mantine-color-gray-outline-hover); - --color-red-filled: rgb(from var(--mantine-color-red-filled) r g b / ); + --color-red-filled: var(--mantine-color-red-filled); --color-red-filled-hover: var(--mantine-color-red-filled-hover); --color-red-light: var(--mantine-color-red-light); --color-red-light-hover: var(--mantine-color-red-light-hover); - --color-red-light-color: rgb(from var(--mantine-color-red-light-color) r g b / ); - --color-red-outline: rgb(from var(--mantine-color-red-outline) r g b / ); + --color-red-light-color: var(--mantine-color-red-light-color); + --color-red-outline: var(--mantine-color-red-outline); --color-red-outline-hover: var(--mantine-color-red-outline-hover); - --color-pink-filled: rgb(from var(--mantine-color-pink-filled) r g b / ); + --color-pink-filled: var(--mantine-color-pink-filled); --color-pink-filled-hover: var(--mantine-color-pink-filled-hover); --color-pink-light: var(--mantine-color-pink-light); --color-pink-light-hover: var(--mantine-color-pink-light-hover); - --color-pink-light-color: rgb(from var(--mantine-color-pink-light-color) r g b / ); - --color-pink-outline: rgb(from var(--mantine-color-pink-outline) r g b / ); + --color-pink-light-color: var(--mantine-color-pink-light-color); + --color-pink-outline: var(--mantine-color-pink-outline); --color-pink-outline-hover: var(--mantine-color-pink-outline-hover); - --color-grape-filled: rgb(from var(--mantine-color-grape-filled) r g b / ); + --color-grape-filled: var(--mantine-color-grape-filled); --color-grape-filled-hover: var(--mantine-color-grape-filled-hover); --color-grape-light: var(--mantine-color-grape-light); --color-grape-light-hover: var(--mantine-color-grape-light-hover); - --color-grape-light-color: rgb(from var(--mantine-color-grape-light-color) r g b / ); - --color-grape-outline: rgb(from var(--mantine-color-grape-outline) r g b / ); + --color-grape-light-color: var(--mantine-color-grape-light-color); + --color-grape-outline: var(--mantine-color-grape-outline); --color-grape-outline-hover: var(--mantine-color-grape-outline-hover); - --color-violet-filled: rgb(from var(--mantine-color-violet-filled) r g b / ); + --color-violet-filled: var(--mantine-color-violet-filled); --color-violet-filled-hover: var(--mantine-color-violet-filled-hover); --color-violet-light: var(--mantine-color-violet-light); --color-violet-light-hover: var(--mantine-color-violet-light-hover); - --color-violet-light-color: rgb(from var(--mantine-color-violet-light-color) r g b / ); - --color-violet-outline: rgb(from var(--mantine-color-violet-outline) r g b / ); + --color-violet-light-color: var(--mantine-color-violet-light-color); + --color-violet-outline: var(--mantine-color-violet-outline); --color-violet-outline-hover: var(--mantine-color-violet-outline-hover); - --color-indigo-filled: rgb(from var(--mantine-color-indigo-filled) r g b / ); + --color-indigo-filled: var(--mantine-color-indigo-filled); --color-indigo-filled-hover: var(--mantine-color-indigo-filled-hover); --color-indigo-light: var(--mantine-color-indigo-light); --color-indigo-light-hover: var(--mantine-color-indigo-light-hover); - --color-indigo-light-color: rgb(from var(--mantine-color-indigo-light-color) r g b / ); - --color-indigo-outline: rgb(from var(--mantine-color-indigo-outline) r g b / ); + --color-indigo-light-color: var(--mantine-color-indigo-light-color); + --color-indigo-outline: var(--mantine-color-indigo-outline); --color-indigo-outline-hover: var(--mantine-color-indigo-outline-hover); - --color-blue-filled: rgb(from var(--mantine-color-blue-filled) r g b / ); + --color-blue-filled: var(--mantine-color-blue-filled); --color-blue-filled-hover: var(--mantine-color-blue-filled-hover); --color-blue-light: var(--mantine-color-blue-light); --color-blue-light-hover: var(--mantine-color-blue-light-hover); - --color-blue-light-color: rgb(from var(--mantine-color-blue-light-color) r g b / ); - --color-blue-outline: rgb(from var(--mantine-color-blue-outline) r g b / ); + --color-blue-light-color: var(--mantine-color-blue-light-color); + --color-blue-outline: var(--mantine-color-blue-outline); --color-blue-outline-hover: var(--mantine-color-blue-outline-hover); - --color-cyan-filled: rgb(from var(--mantine-color-cyan-filled) r g b / ); + --color-cyan-filled: var(--mantine-color-cyan-filled); --color-cyan-filled-hover: var(--mantine-color-cyan-filled-hover); --color-cyan-light: var(--mantine-color-cyan-light); --color-cyan-light-hover: var(--mantine-color-cyan-light-hover); - --color-cyan-light-color: rgb(from var(--mantine-color-cyan-light-color) r g b / ); - --color-cyan-outline: rgb(from var(--mantine-color-cyan-outline) r g b / ); + --color-cyan-light-color: var(--mantine-color-cyan-light-color); + --color-cyan-outline: var(--mantine-color-cyan-outline); --color-cyan-outline-hover: var(--mantine-color-cyan-outline-hover); - --color-teal-filled: rgb(from var(--mantine-color-teal-filled) r g b / ); + --color-teal-filled: var(--mantine-color-teal-filled); --color-teal-filled-hover: var(--mantine-color-teal-filled-hover); --color-teal-light: var(--mantine-color-teal-light); --color-teal-light-hover: var(--mantine-color-teal-light-hover); - --color-teal-light-color: rgb(from var(--mantine-color-teal-light-color) r g b / ); - --color-teal-outline: rgb(from var(--mantine-color-teal-outline) r g b / ); + --color-teal-light-color: var(--mantine-color-teal-light-color); + --color-teal-outline: var(--mantine-color-teal-outline); --color-teal-outline-hover: var(--mantine-color-teal-outline-hover); - --color-green-filled: rgb(from var(--mantine-color-green-filled) r g b / ); + --color-green-filled: var(--mantine-color-green-filled); --color-green-filled-hover: var(--mantine-color-green-filled-hover); --color-green-light: var(--mantine-color-green-light); --color-green-light-hover: var(--mantine-color-green-light-hover); - --color-green-light-color: rgb(from var(--mantine-color-green-light-color) r g b / ); - --color-green-outline: rgb(from var(--mantine-color-green-outline) r g b / ); + --color-green-light-color: var(--mantine-color-green-light-color); + --color-green-outline: var(--mantine-color-green-outline); --color-green-outline-hover: var(--mantine-color-green-outline-hover); - --color-lime-filled: rgb(from var(--mantine-color-lime-filled) r g b / ); + --color-lime-filled: var(--mantine-color-lime-filled); --color-lime-filled-hover: var(--mantine-color-lime-filled-hover); --color-lime-light: var(--mantine-color-lime-light); --color-lime-light-hover: var(--mantine-color-lime-light-hover); - --color-lime-light-color: rgb(from var(--mantine-color-lime-light-color) r g b / ); - --color-lime-outline: rgb(from var(--mantine-color-lime-outline) r g b / ); + --color-lime-light-color: var(--mantine-color-lime-light-color); + --color-lime-outline: var(--mantine-color-lime-outline); --color-lime-outline-hover: var(--mantine-color-lime-outline-hover); - --color-yellow-filled: rgb(from var(--mantine-color-yellow-filled) r g b / ); + --color-yellow-filled: var(--mantine-color-yellow-filled); --color-yellow-filled-hover: var(--mantine-color-yellow-filled-hover); --color-yellow-light: var(--mantine-color-yellow-light); --color-yellow-light-hover: var(--mantine-color-yellow-light-hover); - --color-yellow-light-color: rgb(from var(--mantine-color-yellow-light-color) r g b / ); - --color-yellow-outline: rgb(from var(--mantine-color-yellow-outline) r g b / ); + --color-yellow-light-color: var(--mantine-color-yellow-light-color); + --color-yellow-outline: var(--mantine-color-yellow-outline); --color-yellow-outline-hover: var(--mantine-color-yellow-outline-hover); - --color-orange-filled: rgb(from var(--mantine-color-orange-filled) r g b / ); + --color-orange-filled: var(--mantine-color-orange-filled); --color-orange-filled-hover: var(--mantine-color-orange-filled-hover); --color-orange-light: var(--mantine-color-orange-light); --color-orange-light-hover: var(--mantine-color-orange-light-hover); - --color-orange-light-color: rgb(from var(--mantine-color-orange-light-color) r g b / ); - --color-orange-outline: rgb(from var(--mantine-color-orange-outline) r g b / ); + --color-orange-light-color: var(--mantine-color-orange-light-color); + --color-orange-outline: var(--mantine-color-orange-outline); --color-orange-outline-hover: var(--mantine-color-orange-outline-hover); /* breakpoints */ diff --git a/src/theme.css b/src/theme.css index 0b6222d..71e9fbb 100644 --- a/src/theme.css +++ b/src/theme.css @@ -10,35 +10,35 @@ --font-headings: var(--mantine-font-family-headings); /* colors - primary */ - --color-primary-50: rgb(from var(--mantine-primary-color-0) r g b / ); - --color-primary-100: rgb(from var(--mantine-primary-color-1) r g b / ); - --color-primary-200: rgb(from var(--mantine-primary-color-2) r g b / ); - --color-primary-300: rgb(from var(--mantine-primary-color-3) r g b / ); - --color-primary-400: rgb(from var(--mantine-primary-color-4) r g b / ); - --color-primary-500: rgb(from var(--mantine-primary-color-5) r g b / ); - --color-primary-600: rgb(from var(--mantine-primary-color-6) r g b / ); - --color-primary-700: rgb(from var(--mantine-primary-color-7) r g b / ); - --color-primary-800: rgb(from var(--mantine-primary-color-8) r g b / ); - --color-primary-900: rgb(from var(--mantine-primary-color-9) r g b / ); - --color-primary: rgb(from var(--mantine-primary-color-filled) r g b / ); + --color-primary-50: var(--mantine-primary-color-0); + --color-primary-100: var(--mantine-primary-color-1); + --color-primary-200: var(--mantine-primary-color-2); + --color-primary-300: var(--mantine-primary-color-3); + --color-primary-400: var(--mantine-primary-color-4); + --color-primary-500: var(--mantine-primary-color-5); + --color-primary-600: var(--mantine-primary-color-6); + --color-primary-700: var(--mantine-primary-color-7); + --color-primary-800: var(--mantine-primary-color-8); + --color-primary-900: var(--mantine-primary-color-9); + --color-primary: var(--mantine-primary-color-filled); /* colors - variant specific primary */ - --color-primary-filled: rgb(from var(--mantine-primary-color-filled) r g b / ); + --color-primary-filled: var(--mantine-primary-color-filled); --color-primary-filled-hover: var(--mantine-primary-color-filled-hover); --color-primary-light: var(--mantine-primary-color-light); --color-primary-light-hover: var(--mantine-primary-color-light-hover); - --color-primary-light-color: rgb(from var(--mantine-primary-color-light-color) r g b / ); - --color-primary-outline: rgb(from var(--mantine-primary-color-outline) r g b / ); + --color-primary-light-color: var(--mantine-primary-color-light-color); + --color-primary-outline: var(--mantine-primary-color-outline); --color-primary-outline-hover: var(--mantine-primary-color-outline-hover); /* colors - others */ - --color-white: rgb(from var(--mantine-color-white) r g b / ); - --color-black: rgb(from var(--mantine-color-black) r g b / ); - --color-body: rgb(from var(--mantine-color-text) r g b / ); - --color-error: rgb(from var(--mantine-color-error) r g b / ); - --color-placeholder: rgb(from var(--mantine-color-placeholder) r g b / ); - --color-anchor: rgb(from var(--mantine-color-anchor) r g b / ); - --color-default: rgb(from var(--mantine-color-default-color) r g b / ); + --color-white: var(--mantine-color-white); + --color-black: var(--mantine-color-black); + --color-body: var(--mantine-color-text); + --color-error: var(--mantine-color-error); + --color-placeholder: var(--mantine-color-placeholder); + --color-anchor: var(--mantine-color-anchor); + --color-default: var(--mantine-color-default-color); /* spacing */ --spacing-xs: var(--mantine-spacing-xs); @@ -114,286 +114,286 @@ /* colors - all */ - --color-dark-50: rgb(from var(--mantine-color-dark-0) r g b / ); - --color-dark-100: rgb(from var(--mantine-color-dark-1) r g b / ); - --color-dark-200: rgb(from var(--mantine-color-dark-2) r g b / ); - --color-dark-300: rgb(from var(--mantine-color-dark-3) r g b / ); - --color-dark-400: rgb(from var(--mantine-color-dark-4) r g b / ); - --color-dark-500: rgb(from var(--mantine-color-dark-5) r g b / ); - --color-dark-600: rgb(from var(--mantine-color-dark-6) r g b / ); - --color-dark-700: rgb(from var(--mantine-color-dark-7) r g b / ); - --color-dark-800: rgb(from var(--mantine-color-dark-8) r g b / ); - --color-dark-900: rgb(from var(--mantine-color-dark-9) r g b / ); - --color-dark: rgb(from var(--mantine-color-dark-filled) r g b / ); - - --color-gray-50: rgb(from var(--mantine-color-gray-0) r g b / ); - --color-gray-100: rgb(from var(--mantine-color-gray-1) r g b / ); - --color-gray-200: rgb(from var(--mantine-color-gray-2) r g b / ); - --color-gray-300: rgb(from var(--mantine-color-gray-3) r g b / ); - --color-gray-400: rgb(from var(--mantine-color-gray-4) r g b / ); - --color-gray-500: rgb(from var(--mantine-color-gray-5) r g b / ); - --color-gray-600: rgb(from var(--mantine-color-gray-6) r g b / ); - --color-gray-700: rgb(from var(--mantine-color-gray-7) r g b / ); - --color-gray-800: rgb(from var(--mantine-color-gray-8) r g b / ); - --color-gray-900: rgb(from var(--mantine-color-gray-9) r g b / ); - --color-gray: rgb(from var(--mantine-color-gray-filled) r g b / ); - - --color-red-50: rgb(from var(--mantine-color-red-0) r g b / ); - --color-red-100: rgb(from var(--mantine-color-red-1) r g b / ); - --color-red-200: rgb(from var(--mantine-color-red-2) r g b / ); - --color-red-300: rgb(from var(--mantine-color-red-3) r g b / ); - --color-red-400: rgb(from var(--mantine-color-red-4) r g b / ); - --color-red-500: rgb(from var(--mantine-color-red-5) r g b / ); - --color-red-600: rgb(from var(--mantine-color-red-6) r g b / ); - --color-red-700: rgb(from var(--mantine-color-red-7) r g b / ); - --color-red-800: rgb(from var(--mantine-color-red-8) r g b / ); - --color-red-900: rgb(from var(--mantine-color-red-9) r g b / ); - --color-red: rgb(from var(--mantine-color-red-filled) r g b / ); - - --color-pink-50: rgb(from var(--mantine-color-pink-0) r g b / ); - --color-pink-100: rgb(from var(--mantine-color-pink-1) r g b / ); - --color-pink-200: rgb(from var(--mantine-color-pink-2) r g b / ); - --color-pink-300: rgb(from var(--mantine-color-pink-3) r g b / ); - --color-pink-400: rgb(from var(--mantine-color-pink-4) r g b / ); - --color-pink-500: rgb(from var(--mantine-color-pink-5) r g b / ); - --color-pink-600: rgb(from var(--mantine-color-pink-6) r g b / ); - --color-pink-700: rgb(from var(--mantine-color-pink-7) r g b / ); - --color-pink-800: rgb(from var(--mantine-color-pink-8) r g b / ); - --color-pink-900: rgb(from var(--mantine-color-pink-9) r g b / ); - --color-pink: rgb(from var(--mantine-color-pink-filled) r g b / ); - - --color-grape-50: rgb(from var(--mantine-color-grape-0) r g b / ); - --color-grape-100: rgb(from var(--mantine-color-grape-1) r g b / ); - --color-grape-200: rgb(from var(--mantine-color-grape-2) r g b / ); - --color-grape-300: rgb(from var(--mantine-color-grape-3) r g b / ); - --color-grape-400: rgb(from var(--mantine-color-grape-4) r g b / ); - --color-grape-500: rgb(from var(--mantine-color-grape-5) r g b / ); - --color-grape-600: rgb(from var(--mantine-color-grape-6) r g b / ); - --color-grape-700: rgb(from var(--mantine-color-grape-7) r g b / ); - --color-grape-800: rgb(from var(--mantine-color-grape-8) r g b / ); - --color-grape-900: rgb(from var(--mantine-color-grape-9) r g b / ); - --color-grape: rgb(from var(--mantine-color-grape-filled) r g b / ); - - --color-violet-50: rgb(from var(--mantine-color-violet-0) r g b / ); - --color-violet-100: rgb(from var(--mantine-color-violet-1) r g b / ); - --color-violet-200: rgb(from var(--mantine-color-violet-2) r g b / ); - --color-violet-300: rgb(from var(--mantine-color-violet-3) r g b / ); - --color-violet-400: rgb(from var(--mantine-color-violet-4) r g b / ); - --color-violet-500: rgb(from var(--mantine-color-violet-5) r g b / ); - --color-violet-600: rgb(from var(--mantine-color-violet-6) r g b / ); - --color-violet-700: rgb(from var(--mantine-color-violet-7) r g b / ); - --color-violet-800: rgb(from var(--mantine-color-violet-8) r g b / ); - --color-violet-900: rgb(from var(--mantine-color-violet-9) r g b / ); - --color-violet: rgb(from var(--mantine-color-violet-filled) r g b / ); - - --color-indigo-50: rgb(from var(--mantine-color-indigo-0) r g b / ); - --color-indigo-100: rgb(from var(--mantine-color-indigo-1) r g b / ); - --color-indigo-200: rgb(from var(--mantine-color-indigo-2) r g b / ); - --color-indigo-300: rgb(from var(--mantine-color-indigo-3) r g b / ); - --color-indigo-400: rgb(from var(--mantine-color-indigo-4) r g b / ); - --color-indigo-500: rgb(from var(--mantine-color-indigo-5) r g b / ); - --color-indigo-600: rgb(from var(--mantine-color-indigo-6) r g b / ); - --color-indigo-700: rgb(from var(--mantine-color-indigo-7) r g b / ); - --color-indigo-800: rgb(from var(--mantine-color-indigo-8) r g b / ); - --color-indigo-900: rgb(from var(--mantine-color-indigo-9) r g b / ); - --color-indigo: rgb(from var(--mantine-color-indigo-filled) r g b / ); - - --color-blue-50: rgb(from var(--mantine-color-blue-0) r g b / ); - --color-blue-100: rgb(from var(--mantine-color-blue-1) r g b / ); - --color-blue-200: rgb(from var(--mantine-color-blue-2) r g b / ); - --color-blue-300: rgb(from var(--mantine-color-blue-3) r g b / ); - --color-blue-400: rgb(from var(--mantine-color-blue-4) r g b / ); - --color-blue-500: rgb(from var(--mantine-color-blue-5) r g b / ); - --color-blue-600: rgb(from var(--mantine-color-blue-6) r g b / ); - --color-blue-700: rgb(from var(--mantine-color-blue-7) r g b / ); - --color-blue-800: rgb(from var(--mantine-color-blue-8) r g b / ); - --color-blue-900: rgb(from var(--mantine-color-blue-9) r g b / ); - --color-blue: rgb(from var(--mantine-color-blue-filled) r g b / ); - - --color-cyan-50: rgb(from var(--mantine-color-cyan-0) r g b / ); - --color-cyan-100: rgb(from var(--mantine-color-cyan-1) r g b / ); - --color-cyan-200: rgb(from var(--mantine-color-cyan-2) r g b / ); - --color-cyan-300: rgb(from var(--mantine-color-cyan-3) r g b / ); - --color-cyan-400: rgb(from var(--mantine-color-cyan-4) r g b / ); - --color-cyan-500: rgb(from var(--mantine-color-cyan-5) r g b / ); - --color-cyan-600: rgb(from var(--mantine-color-cyan-6) r g b / ); - --color-cyan-700: rgb(from var(--mantine-color-cyan-7) r g b / ); - --color-cyan-800: rgb(from var(--mantine-color-cyan-8) r g b / ); - --color-cyan-900: rgb(from var(--mantine-color-cyan-9) r g b / ); - --color-cyan: rgb(from var(--mantine-color-cyan-filled) r g b / ); - - --color-teal-50: rgb(from var(--mantine-color-teal-0) r g b / ); - --color-teal-100: rgb(from var(--mantine-color-teal-1) r g b / ); - --color-teal-200: rgb(from var(--mantine-color-teal-2) r g b / ); - --color-teal-300: rgb(from var(--mantine-color-teal-3) r g b / ); - --color-teal-400: rgb(from var(--mantine-color-teal-4) r g b / ); - --color-teal-500: rgb(from var(--mantine-color-teal-5) r g b / ); - --color-teal-600: rgb(from var(--mantine-color-teal-6) r g b / ); - --color-teal-700: rgb(from var(--mantine-color-teal-7) r g b / ); - --color-teal-800: rgb(from var(--mantine-color-teal-8) r g b / ); - --color-teal-900: rgb(from var(--mantine-color-teal-9) r g b / ); - --color-teal: rgb(from var(--mantine-color-teal-filled) r g b / ); - - --color-green-50: rgb(from var(--mantine-color-green-0) r g b / ); - --color-green-100: rgb(from var(--mantine-color-green-1) r g b / ); - --color-green-200: rgb(from var(--mantine-color-green-2) r g b / ); - --color-green-300: rgb(from var(--mantine-color-green-3) r g b / ); - --color-green-400: rgb(from var(--mantine-color-green-4) r g b / ); - --color-green-500: rgb(from var(--mantine-color-green-5) r g b / ); - --color-green-600: rgb(from var(--mantine-color-green-6) r g b / ); - --color-green-700: rgb(from var(--mantine-color-green-7) r g b / ); - --color-green-800: rgb(from var(--mantine-color-green-8) r g b / ); - --color-green-900: rgb(from var(--mantine-color-green-9) r g b / ); - --color-green: rgb(from var(--mantine-color-green-filled) r g b / ); - - --color-lime-50: rgb(from var(--mantine-color-lime-0) r g b / ); - --color-lime-100: rgb(from var(--mantine-color-lime-1) r g b / ); - --color-lime-200: rgb(from var(--mantine-color-lime-2) r g b / ); - --color-lime-300: rgb(from var(--mantine-color-lime-3) r g b / ); - --color-lime-400: rgb(from var(--mantine-color-lime-4) r g b / ); - --color-lime-500: rgb(from var(--mantine-color-lime-5) r g b / ); - --color-lime-600: rgb(from var(--mantine-color-lime-6) r g b / ); - --color-lime-700: rgb(from var(--mantine-color-lime-7) r g b / ); - --color-lime-800: rgb(from var(--mantine-color-lime-8) r g b / ); - --color-lime-900: rgb(from var(--mantine-color-lime-9) r g b / ); - --color-lime: rgb(from var(--mantine-color-lime-filled) r g b / ); - - --color-yellow-50: rgb(from var(--mantine-color-yellow-0) r g b / ); - --color-yellow-100: rgb(from var(--mantine-color-yellow-1) r g b / ); - --color-yellow-200: rgb(from var(--mantine-color-yellow-2) r g b / ); - --color-yellow-300: rgb(from var(--mantine-color-yellow-3) r g b / ); - --color-yellow-400: rgb(from var(--mantine-color-yellow-4) r g b / ); - --color-yellow-500: rgb(from var(--mantine-color-yellow-5) r g b / ); - --color-yellow-600: rgb(from var(--mantine-color-yellow-6) r g b / ); - --color-yellow-700: rgb(from var(--mantine-color-yellow-7) r g b / ); - --color-yellow-800: rgb(from var(--mantine-color-yellow-8) r g b / ); - --color-yellow-900: rgb(from var(--mantine-color-yellow-9) r g b / ); - --color-yellow: rgb(from var(--mantine-color-yellow-filled) r g b / ); - - --color-orange-50: rgb(from var(--mantine-color-orange-0) r g b / ); - --color-orange-100: rgb(from var(--mantine-color-orange-1) r g b / ); - --color-orange-200: rgb(from var(--mantine-color-orange-2) r g b / ); - --color-orange-300: rgb(from var(--mantine-color-orange-3) r g b / ); - --color-orange-400: rgb(from var(--mantine-color-orange-4) r g b / ); - --color-orange-500: rgb(from var(--mantine-color-orange-5) r g b / ); - --color-orange-600: rgb(from var(--mantine-color-orange-6) r g b / ); - --color-orange-700: rgb(from var(--mantine-color-orange-7) r g b / ); - --color-orange-800: rgb(from var(--mantine-color-orange-8) r g b / ); - --color-orange-900: rgb(from var(--mantine-color-orange-9) r g b / ); - --color-orange: rgb(from var(--mantine-color-orange-filled) r g b / ); + --color-dark-50: var(--mantine-color-dark-0); + --color-dark-100: var(--mantine-color-dark-1); + --color-dark-200: var(--mantine-color-dark-2); + --color-dark-300: var(--mantine-color-dark-3); + --color-dark-400: var(--mantine-color-dark-4); + --color-dark-500: var(--mantine-color-dark-5); + --color-dark-600: var(--mantine-color-dark-6); + --color-dark-700: var(--mantine-color-dark-7); + --color-dark-800: var(--mantine-color-dark-8); + --color-dark-900: var(--mantine-color-dark-9); + --color-dark: var(--mantine-color-dark-filled); + + --color-gray-50: var(--mantine-color-gray-0); + --color-gray-100: var(--mantine-color-gray-1); + --color-gray-200: var(--mantine-color-gray-2); + --color-gray-300: var(--mantine-color-gray-3); + --color-gray-400: var(--mantine-color-gray-4); + --color-gray-500: var(--mantine-color-gray-5); + --color-gray-600: var(--mantine-color-gray-6); + --color-gray-700: var(--mantine-color-gray-7); + --color-gray-800: var(--mantine-color-gray-8); + --color-gray-900: var(--mantine-color-gray-9); + --color-gray: var(--mantine-color-gray-filled); + + --color-red-50: var(--mantine-color-red-0); + --color-red-100: var(--mantine-color-red-1); + --color-red-200: var(--mantine-color-red-2); + --color-red-300: var(--mantine-color-red-3); + --color-red-400: var(--mantine-color-red-4); + --color-red-500: var(--mantine-color-red-5); + --color-red-600: var(--mantine-color-red-6); + --color-red-700: var(--mantine-color-red-7); + --color-red-800: var(--mantine-color-red-8); + --color-red-900: var(--mantine-color-red-9); + --color-red: var(--mantine-color-red-filled); + + --color-pink-50: var(--mantine-color-pink-0); + --color-pink-100: var(--mantine-color-pink-1); + --color-pink-200: var(--mantine-color-pink-2); + --color-pink-300: var(--mantine-color-pink-3); + --color-pink-400: var(--mantine-color-pink-4); + --color-pink-500: var(--mantine-color-pink-5); + --color-pink-600: var(--mantine-color-pink-6); + --color-pink-700: var(--mantine-color-pink-7); + --color-pink-800: var(--mantine-color-pink-8); + --color-pink-900: var(--mantine-color-pink-9); + --color-pink: var(--mantine-color-pink-filled); + + --color-grape-50: var(--mantine-color-grape-0); + --color-grape-100: var(--mantine-color-grape-1); + --color-grape-200: var(--mantine-color-grape-2); + --color-grape-300: var(--mantine-color-grape-3); + --color-grape-400: var(--mantine-color-grape-4); + --color-grape-500: var(--mantine-color-grape-5); + --color-grape-600: var(--mantine-color-grape-6); + --color-grape-700: var(--mantine-color-grape-7); + --color-grape-800: var(--mantine-color-grape-8); + --color-grape-900: var(--mantine-color-grape-9); + --color-grape: var(--mantine-color-grape-filled); + + --color-violet-50: var(--mantine-color-violet-0); + --color-violet-100: var(--mantine-color-violet-1); + --color-violet-200: var(--mantine-color-violet-2); + --color-violet-300: var(--mantine-color-violet-3); + --color-violet-400: var(--mantine-color-violet-4); + --color-violet-500: var(--mantine-color-violet-5); + --color-violet-600: var(--mantine-color-violet-6); + --color-violet-700: var(--mantine-color-violet-7); + --color-violet-800: var(--mantine-color-violet-8); + --color-violet-900: var(--mantine-color-violet-9); + --color-violet: var(--mantine-color-violet-filled); + + --color-indigo-50: var(--mantine-color-indigo-0); + --color-indigo-100: var(--mantine-color-indigo-1); + --color-indigo-200: var(--mantine-color-indigo-2); + --color-indigo-300: var(--mantine-color-indigo-3); + --color-indigo-400: var(--mantine-color-indigo-4); + --color-indigo-500: var(--mantine-color-indigo-5); + --color-indigo-600: var(--mantine-color-indigo-6); + --color-indigo-700: var(--mantine-color-indigo-7); + --color-indigo-800: var(--mantine-color-indigo-8); + --color-indigo-900: var(--mantine-color-indigo-9); + --color-indigo: var(--mantine-color-indigo-filled); + + --color-blue-50: var(--mantine-color-blue-0); + --color-blue-100: var(--mantine-color-blue-1); + --color-blue-200: var(--mantine-color-blue-2); + --color-blue-300: var(--mantine-color-blue-3); + --color-blue-400: var(--mantine-color-blue-4); + --color-blue-500: var(--mantine-color-blue-5); + --color-blue-600: var(--mantine-color-blue-6); + --color-blue-700: var(--mantine-color-blue-7); + --color-blue-800: var(--mantine-color-blue-8); + --color-blue-900: var(--mantine-color-blue-9); + --color-blue: var(--mantine-color-blue-filled); + + --color-cyan-50: var(--mantine-color-cyan-0); + --color-cyan-100: var(--mantine-color-cyan-1); + --color-cyan-200: var(--mantine-color-cyan-2); + --color-cyan-300: var(--mantine-color-cyan-3); + --color-cyan-400: var(--mantine-color-cyan-4); + --color-cyan-500: var(--mantine-color-cyan-5); + --color-cyan-600: var(--mantine-color-cyan-6); + --color-cyan-700: var(--mantine-color-cyan-7); + --color-cyan-800: var(--mantine-color-cyan-8); + --color-cyan-900: var(--mantine-color-cyan-9); + --color-cyan: var(--mantine-color-cyan-filled); + + --color-teal-50: var(--mantine-color-teal-0); + --color-teal-100: var(--mantine-color-teal-1); + --color-teal-200: var(--mantine-color-teal-2); + --color-teal-300: var(--mantine-color-teal-3); + --color-teal-400: var(--mantine-color-teal-4); + --color-teal-500: var(--mantine-color-teal-5); + --color-teal-600: var(--mantine-color-teal-6); + --color-teal-700: var(--mantine-color-teal-7); + --color-teal-800: var(--mantine-color-teal-8); + --color-teal-900: var(--mantine-color-teal-9); + --color-teal: var(--mantine-color-teal-filled); + + --color-green-50: var(--mantine-color-green-0); + --color-green-100: var(--mantine-color-green-1); + --color-green-200: var(--mantine-color-green-2); + --color-green-300: var(--mantine-color-green-3); + --color-green-400: var(--mantine-color-green-4); + --color-green-500: var(--mantine-color-green-5); + --color-green-600: var(--mantine-color-green-6); + --color-green-700: var(--mantine-color-green-7); + --color-green-800: var(--mantine-color-green-8); + --color-green-900: var(--mantine-color-green-9); + --color-green: var(--mantine-color-green-filled); + + --color-lime-50: var(--mantine-color-lime-0); + --color-lime-100: var(--mantine-color-lime-1); + --color-lime-200: var(--mantine-color-lime-2); + --color-lime-300: var(--mantine-color-lime-3); + --color-lime-400: var(--mantine-color-lime-4); + --color-lime-500: var(--mantine-color-lime-5); + --color-lime-600: var(--mantine-color-lime-6); + --color-lime-700: var(--mantine-color-lime-7); + --color-lime-800: var(--mantine-color-lime-8); + --color-lime-900: var(--mantine-color-lime-9); + --color-lime: var(--mantine-color-lime-filled); + + --color-yellow-50: var(--mantine-color-yellow-0); + --color-yellow-100: var(--mantine-color-yellow-1); + --color-yellow-200: var(--mantine-color-yellow-2); + --color-yellow-300: var(--mantine-color-yellow-3); + --color-yellow-400: var(--mantine-color-yellow-4); + --color-yellow-500: var(--mantine-color-yellow-5); + --color-yellow-600: var(--mantine-color-yellow-6); + --color-yellow-700: var(--mantine-color-yellow-7); + --color-yellow-800: var(--mantine-color-yellow-8); + --color-yellow-900: var(--mantine-color-yellow-9); + --color-yellow: var(--mantine-color-yellow-filled); + + --color-orange-50: var(--mantine-color-orange-0); + --color-orange-100: var(--mantine-color-orange-1); + --color-orange-200: var(--mantine-color-orange-2); + --color-orange-300: var(--mantine-color-orange-3); + --color-orange-400: var(--mantine-color-orange-4); + --color-orange-500: var(--mantine-color-orange-5); + --color-orange-600: var(--mantine-color-orange-6); + --color-orange-700: var(--mantine-color-orange-7); + --color-orange-800: var(--mantine-color-orange-8); + --color-orange-900: var(--mantine-color-orange-9); + --color-orange: var(--mantine-color-orange-filled); /* colors - variant specific */ - --color-dark-filled: rgb(from var(--mantine-color-dark-filled) r g b / ); + --color-dark-filled: var(--mantine-color-dark-filled); --color-dark-filled-hover: var(--mantine-color-dark-filled-hover); --color-dark-light: var(--mantine-color-dark-light); --color-dark-light-hover: var(--mantine-color-dark-light-hover); - --color-dark-light-color: rgb(from var(--mantine-color-dark-light-color) r g b / ); - --color-dark-outline: rgb(from var(--mantine-color-dark-outline) r g b / ); + --color-dark-light-color: var(--mantine-color-dark-light-color); + --color-dark-outline: var(--mantine-color-dark-outline); --color-dark-outline-hover: var(--mantine-color-dark-outline-hover); - --color-gray-filled: rgb(from var(--mantine-color-gray-filled) r g b / ); + --color-gray-filled: var(--mantine-color-gray-filled); --color-gray-filled-hover: var(--mantine-color-gray-filled-hover); --color-gray-light: var(--mantine-color-gray-light); --color-gray-light-hover: var(--mantine-color-gray-light-hover); - --color-gray-light-color: rgb(from var(--mantine-color-gray-light-color) r g b / ); - --color-gray-outline: rgb(from var(--mantine-color-gray-outline) r g b / ); + --color-gray-light-color: var(--mantine-color-gray-light-color); + --color-gray-outline: var(--mantine-color-gray-outline); --color-gray-outline-hover: var(--mantine-color-gray-outline-hover); - --color-red-filled: rgb(from var(--mantine-color-red-filled) r g b / ); + --color-red-filled: var(--mantine-color-red-filled); --color-red-filled-hover: var(--mantine-color-red-filled-hover); --color-red-light: var(--mantine-color-red-light); --color-red-light-hover: var(--mantine-color-red-light-hover); - --color-red-light-color: rgb(from var(--mantine-color-red-light-color) r g b / ); - --color-red-outline: rgb(from var(--mantine-color-red-outline) r g b / ); + --color-red-light-color: var(--mantine-color-red-light-color); + --color-red-outline: var(--mantine-color-red-outline); --color-red-outline-hover: var(--mantine-color-red-outline-hover); - --color-pink-filled: rgb(from var(--mantine-color-pink-filled) r g b / ); + --color-pink-filled: var(--mantine-color-pink-filled); --color-pink-filled-hover: var(--mantine-color-pink-filled-hover); --color-pink-light: var(--mantine-color-pink-light); --color-pink-light-hover: var(--mantine-color-pink-light-hover); - --color-pink-light-color: rgb(from var(--mantine-color-pink-light-color) r g b / ); - --color-pink-outline: rgb(from var(--mantine-color-pink-outline) r g b / ); + --color-pink-light-color: var(--mantine-color-pink-light-color); + --color-pink-outline: var(--mantine-color-pink-outline); --color-pink-outline-hover: var(--mantine-color-pink-outline-hover); - --color-grape-filled: rgb(from var(--mantine-color-grape-filled) r g b / ); + --color-grape-filled: var(--mantine-color-grape-filled); --color-grape-filled-hover: var(--mantine-color-grape-filled-hover); --color-grape-light: var(--mantine-color-grape-light); --color-grape-light-hover: var(--mantine-color-grape-light-hover); - --color-grape-light-color: rgb(from var(--mantine-color-grape-light-color) r g b / ); - --color-grape-outline: rgb(from var(--mantine-color-grape-outline) r g b / ); + --color-grape-light-color: var(--mantine-color-grape-light-color); + --color-grape-outline: var(--mantine-color-grape-outline); --color-grape-outline-hover: var(--mantine-color-grape-outline-hover); - --color-violet-filled: rgb(from var(--mantine-color-violet-filled) r g b / ); + --color-violet-filled: var(--mantine-color-violet-filled); --color-violet-filled-hover: var(--mantine-color-violet-filled-hover); --color-violet-light: var(--mantine-color-violet-light); --color-violet-light-hover: var(--mantine-color-violet-light-hover); - --color-violet-light-color: rgb(from var(--mantine-color-violet-light-color) r g b / ); - --color-violet-outline: rgb(from var(--mantine-color-violet-outline) r g b / ); + --color-violet-light-color: var(--mantine-color-violet-light-color); + --color-violet-outline: var(--mantine-color-violet-outline); --color-violet-outline-hover: var(--mantine-color-violet-outline-hover); - --color-indigo-filled: rgb(from var(--mantine-color-indigo-filled) r g b / ); + --color-indigo-filled: var(--mantine-color-indigo-filled); --color-indigo-filled-hover: var(--mantine-color-indigo-filled-hover); --color-indigo-light: var(--mantine-color-indigo-light); --color-indigo-light-hover: var(--mantine-color-indigo-light-hover); - --color-indigo-light-color: rgb(from var(--mantine-color-indigo-light-color) r g b / ); - --color-indigo-outline: rgb(from var(--mantine-color-indigo-outline) r g b / ); + --color-indigo-light-color: var(--mantine-color-indigo-light-color); + --color-indigo-outline: var(--mantine-color-indigo-outline); --color-indigo-outline-hover: var(--mantine-color-indigo-outline-hover); - --color-blue-filled: rgb(from var(--mantine-color-blue-filled) r g b / ); + --color-blue-filled: var(--mantine-color-blue-filled); --color-blue-filled-hover: var(--mantine-color-blue-filled-hover); --color-blue-light: var(--mantine-color-blue-light); --color-blue-light-hover: var(--mantine-color-blue-light-hover); - --color-blue-light-color: rgb(from var(--mantine-color-blue-light-color) r g b / ); - --color-blue-outline: rgb(from var(--mantine-color-blue-outline) r g b / ); + --color-blue-light-color: var(--mantine-color-blue-light-color); + --color-blue-outline: var(--mantine-color-blue-outline); --color-blue-outline-hover: var(--mantine-color-blue-outline-hover); - --color-cyan-filled: rgb(from var(--mantine-color-cyan-filled) r g b / ); + --color-cyan-filled: var(--mantine-color-cyan-filled); --color-cyan-filled-hover: var(--mantine-color-cyan-filled-hover); --color-cyan-light: var(--mantine-color-cyan-light); --color-cyan-light-hover: var(--mantine-color-cyan-light-hover); - --color-cyan-light-color: rgb(from var(--mantine-color-cyan-light-color) r g b / ); - --color-cyan-outline: rgb(from var(--mantine-color-cyan-outline) r g b / ); + --color-cyan-light-color: var(--mantine-color-cyan-light-color); + --color-cyan-outline: var(--mantine-color-cyan-outline); --color-cyan-outline-hover: var(--mantine-color-cyan-outline-hover); - --color-teal-filled: rgb(from var(--mantine-color-teal-filled) r g b / ); + --color-teal-filled: var(--mantine-color-teal-filled); --color-teal-filled-hover: var(--mantine-color-teal-filled-hover); --color-teal-light: var(--mantine-color-teal-light); --color-teal-light-hover: var(--mantine-color-teal-light-hover); - --color-teal-light-color: rgb(from var(--mantine-color-teal-light-color) r g b / ); - --color-teal-outline: rgb(from var(--mantine-color-teal-outline) r g b / ); + --color-teal-light-color: var(--mantine-color-teal-light-color); + --color-teal-outline: var(--mantine-color-teal-outline); --color-teal-outline-hover: var(--mantine-color-teal-outline-hover); - --color-green-filled: rgb(from var(--mantine-color-green-filled) r g b / ); + --color-green-filled: var(--mantine-color-green-filled); --color-green-filled-hover: var(--mantine-color-green-filled-hover); --color-green-light: var(--mantine-color-green-light); --color-green-light-hover: var(--mantine-color-green-light-hover); - --color-green-light-color: rgb(from var(--mantine-color-green-light-color) r g b / ); - --color-green-outline: rgb(from var(--mantine-color-green-outline) r g b / ); + --color-green-light-color: var(--mantine-color-green-light-color); + --color-green-outline: var(--mantine-color-green-outline); --color-green-outline-hover: var(--mantine-color-green-outline-hover); - --color-lime-filled: rgb(from var(--mantine-color-lime-filled) r g b / ); + --color-lime-filled: var(--mantine-color-lime-filled); --color-lime-filled-hover: var(--mantine-color-lime-filled-hover); --color-lime-light: var(--mantine-color-lime-light); --color-lime-light-hover: var(--mantine-color-lime-light-hover); - --color-lime-light-color: rgb(from var(--mantine-color-lime-light-color) r g b / ); - --color-lime-outline: rgb(from var(--mantine-color-lime-outline) r g b / ); + --color-lime-light-color: var(--mantine-color-lime-light-color); + --color-lime-outline: var(--mantine-color-lime-outline); --color-lime-outline-hover: var(--mantine-color-lime-outline-hover); - --color-yellow-filled: rgb(from var(--mantine-color-yellow-filled) r g b / ); + --color-yellow-filled: var(--mantine-color-yellow-filled); --color-yellow-filled-hover: var(--mantine-color-yellow-filled-hover); --color-yellow-light: var(--mantine-color-yellow-light); --color-yellow-light-hover: var(--mantine-color-yellow-light-hover); - --color-yellow-light-color: rgb(from var(--mantine-color-yellow-light-color) r g b / ); - --color-yellow-outline: rgb(from var(--mantine-color-yellow-outline) r g b / ); + --color-yellow-light-color: var(--mantine-color-yellow-light-color); + --color-yellow-outline: var(--mantine-color-yellow-outline); --color-yellow-outline-hover: var(--mantine-color-yellow-outline-hover); - --color-orange-filled: rgb(from var(--mantine-color-orange-filled) r g b / ); + --color-orange-filled: var(--mantine-color-orange-filled); --color-orange-filled-hover: var(--mantine-color-orange-filled-hover); --color-orange-light: var(--mantine-color-orange-light); --color-orange-light-hover: var(--mantine-color-orange-light-hover); - --color-orange-light-color: rgb(from var(--mantine-color-orange-light-color) r g b / ); - --color-orange-outline: rgb(from var(--mantine-color-orange-outline) r g b / ); + --color-orange-light-color: var(--mantine-color-orange-light-color); + --color-orange-outline: var(--mantine-color-orange-outline); --color-orange-outline-hover: var(--mantine-color-orange-outline-hover); /* breakpoints */