feat: figma css variables

This commit is contained in:
Amit Joki
2025-02-27 09:34:10 +00:00
parent c2002a7d72
commit a1dab8ca95
2 changed files with 378 additions and 2 deletions

View File

@@ -0,0 +1,373 @@
/* Refrence tokens - Light */
:root {
--color-base-black: rgba(0, 0, 0, 1);
--color-base-white: rgba(255, 255, 255, 1);
--color-brand-50: rgba(240, 243, 255, 1);
--color-brand-100: rgba(214, 224, 255, 1);
--color-brand-200: rgba(173, 194, 255, 1);
--color-brand-300: rgba(133, 163, 255, 1);
--color-brand-400: rgba(92, 133, 255, 1);
--color-brand-500: rgba(51, 102, 255, 1);
--color-brand-600: rgba(41, 82, 204, 1);
--color-brand-700: rgba(31, 61, 153, 1);
--color-brand-800: rgba(20, 41, 102, 1);
--color-brand-900: rgba(10, 20, 51, 1);
--color-grey-50: rgba(249, 249, 250, 1);
--color-grey-100: rgba(244, 244, 245, 1);
--color-grey-200: rgba(231, 231, 233, 1);
--color-grey-300: rgba(213, 213, 217, 1);
--color-grey-400: rgba(154, 162, 175, 1);
--color-grey-500: rgba(106, 113, 132, 1);
--color-grey-600: rgba(74, 82, 104, 1);
--color-grey-700: rgba(55, 65, 81, 1);
--color-grey-800: rgba(31, 41, 58, 1);
--color-grey-900: rgba(16, 16, 21, 1);
--color-green-50: rgba(236, 255, 242, 1);
--color-green-100: rgba(212, 247, 224, 1);
--color-green-200: rgba(169, 239, 193, 1);
--color-green-300: rgba(125, 230, 163, 1);
--color-green-400: rgba(82, 222, 132, 1);
--color-green-500: rgba(39, 214, 101, 1);
--color-green-600: rgba(31, 171, 81, 1);
--color-green-700: rgba(23, 128, 61, 1);
--color-green-800: rgba(16, 86, 40, 1);
--color-green-900: rgba(8, 43, 20, 1);
--color-red-50: rgba(255, 242, 241, 1);
--color-red-100: rgba(255, 219, 217, 1);
--color-red-200: rgba(255, 183, 178, 1);
--color-red-300: rgba(255, 146, 140, 1);
--color-red-400: rgba(255, 110, 101, 1);
--color-red-500: rgba(255, 74, 63, 1);
--color-red-600: rgba(232, 70, 60, 1);
--color-red-700: rgba(203, 63, 54, 1);
--color-red-800: rgba(178, 56, 48, 1);
--color-red-900: rgba(125, 39, 33, 1);
--color-maroon-50: rgba(255, 240, 247, 1);
--color-maroon-100: rgba(255, 207, 230, 1);
--color-maroon-200: rgba(255, 171, 210, 1);
--color-maroon-300: rgba(236, 125, 177, 1);
--color-maroon-400: rgba(212, 88, 146, 1);
--color-maroon-500: rgba(179, 55, 113, 1);
--color-maroon-600: rgba(157, 37, 93, 1);
--color-maroon-700: rgba(128, 16, 68, 1);
--color-maroon-800: rgba(105, 7, 53, 1);
--color-maroon-900: rgba(66, 0, 31, 1);
--color-blue-50: rgba(237, 249, 255, 1);
--color-blue-100: rgba(215, 242, 255, 1);
--color-blue-200: rgba(175, 229, 255, 1);
--color-blue-300: rgba(134, 217, 255, 1);
--color-blue-400: rgba(94, 204, 255, 1);
--color-blue-500: rgba(54, 191, 255, 1);
--color-blue-600: rgba(43, 153, 204, 1);
--color-blue-700: rgba(32, 115, 153, 1);
--color-blue-800: rgba(22, 76, 102, 1);
--color-blue-900: rgba(11, 38, 51, 1);
--color-orange-50: rgba(255, 245, 239, 1);
--color-orange-100: rgba(254, 230, 214, 1);
--color-orange-200: rgba(253, 205, 173, 1);
--color-orange-300: rgba(252, 180, 131, 1);
--color-orange-400: rgba(251, 155, 90, 1);
--color-orange-500: rgba(250, 130, 49, 1);
--color-orange-600: rgba(225, 117, 44, 1);
--color-orange-700: rgba(200, 104, 39, 1);
--color-orange-800: rgba(150, 78, 29, 1);
--color-orange-900: rgba(75, 39, 15, 1);
--color-pink-50: rgba(255, 238, 251, 1);
--color-pink-100: rgba(254, 216, 244, 1);
--color-pink-200: rgba(254, 176, 232, 1);
--color-pink-300: rgba(253, 137, 221, 1);
--color-pink-400: rgba(253, 97, 209, 1);
--color-pink-500: rgba(252, 58, 198, 1);
--color-pink-600: rgba(202, 46, 158, 1);
--color-pink-700: rgba(151, 35, 119, 1);
--color-pink-800: rgba(101, 23, 79, 1);
--color-pink-900: rgba(50, 12, 40, 1);
--color-purple-50: rgba(243, 236, 250, 1);
--color-purple-100: rgba(229, 212, 245, 1);
--color-purple-200: rgba(203, 168, 235, 1);
--color-purple-300: rgba(177, 125, 225, 1);
--color-purple-400: rgba(151, 81, 215, 1);
--color-purple-500: rgba(125, 38, 205, 1);
--color-purple-600: rgba(100, 30, 164, 1);
--color-purple-700: rgba(75, 23, 123, 1);
--color-purple-800: rgba(50, 15, 82, 1);
--color-purple-900: rgba(25, 8, 41, 1);
--color-yellow-50: rgba(255, 251, 242, 1);
--color-yellow-100: rgba(255, 240, 209, 1);
--color-yellow-300: rgba(253, 216, 137, 1);
--color-yellow-200: rgba(254, 229, 176, 1);
--color-yellow-400: rgba(253, 203, 97, 1);
--color-yellow-500: rgba(252, 190, 58, 1);
--color-yellow-600: rgba(202, 152, 46, 1);
--color-yellow-700: rgba(151, 114, 35, 1);
--color-yellow-800: rgba(101, 76, 23, 1);
--color-yellow-900: rgba(50, 38, 12, 1);
--color-base-none: rgba(255, 255, 255, 0);
--spacing-00: 0px;
--spacing-01: 2px;
--spacing-02: 4px;
--spacing-03: 8px;
--spacing-04: 12px;
--spacing-05: 16px;
--spacing-06: 24px;
--spacing-07: 32px;
--spacing-08: 40px;
--spacing-09: 48px;
--spacing-10: 64px;
--spacing-11: 80px;
--spacing-12: 96px;
--spacing-13: 160px;
--font-size-h1: 64px;
--font-size-h2: 40px;
--font-size-h3: 24px;
}
/* Refrence tokens - Dark */
[theme='dark'] {
--color-base-black: rgba(255, 255, 255, 1);
--color-base-white: rgba(23, 23, 23, 1);
--color-brand-50: rgba(19, 30, 64, 1);
--color-brand-100: rgba(23, 37, 77, 1);
--color-brand-200: rgba(31, 49, 102, 1);
--color-brand-300: rgba(38, 60, 128, 1);
--color-brand-400: rgba(61, 97, 204, 1);
--color-brand-500: rgba(51, 102, 255, 1);
--color-brand-600: rgba(128, 160, 255, 1);
--color-brand-700: rgba(166, 188, 255, 1);
--color-brand-800: rgba(204, 217, 255, 1);
--color-brand-900: rgba(229, 236, 255, 1);
--color-grey-50: rgba(13, 17, 23, 1);
--color-grey-100: rgba(22, 27, 34, 1);
--color-grey-200: rgba(33, 38, 45, 1);
--color-grey-300: rgba(48, 54, 61, 1);
--color-grey-400: rgba(72, 79, 88, 1);
--color-grey-500: rgba(110, 118, 129, 1);
--color-grey-600: rgba(139, 148, 158, 1);
--color-grey-700: rgba(177, 186, 196, 1);
--color-grey-800: rgba(201, 209, 217, 1);
--color-grey-900: rgba(240, 246, 252, 1);
--color-green-50: rgba(15, 51, 28, 1);
--color-green-100: rgba(23, 77, 42, 1);
--color-green-200: rgba(31, 102, 56, 1);
--color-green-300: rgba(46, 153, 83, 1);
--color-green-400: rgba(61, 204, 111, 1);
--color-green-500: rgba(39, 214, 101, 1);
--color-green-600: rgba(128, 255, 172, 1);
--color-green-700: rgba(166, 255, 197, 1);
--color-green-800: rgba(204, 255, 222, 1);
--color-green-900: rgba(229, 255, 238, 1);
--color-red-50: rgba(51, 22, 20, 1);
--color-red-100: rgba(77, 33, 31, 1);
--color-red-200: rgba(102, 44, 41, 1);
--color-red-300: rgba(153, 66, 61, 1);
--color-red-400: rgba(204, 88, 82, 1);
--color-red-500: rgba(255, 74, 63, 1);
--color-red-600: rgba(255, 134, 128, 1);
--color-red-700: rgba(255, 170, 166, 1);
--color-red-800: rgba(255, 207, 204, 1);
--color-red-900: rgba(255, 231, 229, 1);
--color-maroon-50: rgba(79, 1, 37, 1);
--color-maroon-100: rgba(105, 7, 53, 1);
--color-maroon-200: rgba(128, 16, 68, 1);
--color-maroon-300: rgba(157, 37, 93, 1);
--color-maroon-400: rgba(179, 55, 113, 1);
--color-maroon-500: rgba(212, 88, 146, 1);
--color-maroon-600: rgba(236, 125, 177, 1);
--color-maroon-700: rgba(255, 171, 210, 1);
--color-maroon-800: rgba(255, 207, 230, 1);
--color-maroon-900: rgba(255, 240, 247, 1);
--color-blue-50: rgba(15, 40, 51, 1);
--color-blue-100: rgba(23, 60, 77, 1);
--color-blue-200: rgba(31, 79, 102, 1);
--color-blue-300: rgba(38, 99, 128, 1);
--color-blue-400: rgba(61, 159, 204, 1);
--color-blue-500: rgba(77, 198, 255, 1);
--color-blue-600: rgba(128, 215, 255, 1);
--color-blue-700: rgba(166, 227, 255, 1);
--color-blue-800: rgba(204, 239, 255, 1);
--color-blue-900: rgba(229, 247, 255, 1);
--color-orange-50: rgba(51, 30, 15, 1);
--color-orange-100: rgba(77, 44, 23, 1);
--color-orange-200: rgba(102, 59, 31, 1);
--color-orange-300: rgba(128, 74, 38, 1);
--color-orange-400: rgba(204, 118, 61, 1);
--color-orange-500: rgba(255, 148, 77, 1);
--color-orange-600: rgba(255, 178, 128, 1);
--color-orange-700: rgba(255, 201, 166, 1);
--color-orange-800: rgba(255, 224, 204, 1);
--color-orange-900: rgba(255, 240, 229, 1);
--color-pink-50: rgba(51, 15, 41, 1);
--color-pink-100: rgba(77, 23, 61, 1);
--color-pink-200: rgba(102, 31, 82, 1);
--color-pink-300: rgba(128, 38, 102, 1);
--color-pink-400: rgba(204, 61, 164, 1);
--color-pink-500: rgba(255, 77, 204, 1);
--color-pink-600: rgba(255, 128, 219, 1);
--color-pink-700: rgba(255, 166, 230, 1);
--color-pink-800: rgba(255, 204, 241, 1);
--color-pink-900: rgba(255, 229, 248, 1);
--color-purple-50: rgba(34, 15, 51, 1);
--color-purple-100: rgba(51, 23, 77, 1);
--color-purple-200: rgba(67, 31, 102, 1);
--color-purple-300: rgba(84, 38, 128, 1);
--color-purple-400: rgba(135, 61, 204, 1);
--color-purple-500: rgba(169, 77, 255, 1);
--color-purple-600: rgba(193, 128, 255, 1);
--color-purple-700: rgba(212, 166, 255, 1);
--color-purple-800: rgba(230, 204, 255, 1);
--color-purple-900: rgba(243, 229, 255, 1);
--color-yellow-50: rgba(51, 41, 18, 1);
--color-yellow-100: rgba(77, 61, 27, 1);
--color-yellow-300: rgba(153, 122, 54, 1);
--color-yellow-200: rgba(102, 81, 36, 1);
--color-yellow-400: rgba(204, 162, 71, 1);
--color-yellow-500: rgba(255, 203, 89, 1);
--color-yellow-600: rgba(255, 215, 128, 1);
--color-yellow-700: rgba(255, 227, 166, 1);
--color-yellow-800: rgba(255, 239, 204, 1);
--color-yellow-900: rgba(255, 247, 229, 1);
--color-base-none: rgba(255, 255, 255, 0);
--spacing-00: 0px;
--spacing-01: 2px;
--spacing-02: 4px;
--spacing-03: 8px;
--spacing-04: 12px;
--spacing-05: 16px;
--spacing-06: 24px;
--spacing-07: 32px;
--spacing-08: 40px;
--spacing-09: 48px;
--spacing-10: 64px;
--spacing-11: 80px;
--spacing-12: 96px;
--spacing-13: 160px;
--font-size-h1: 64px;
--font-size-h2: 40px;
--font-size-h3: 24px;
}
/* System tokens */
:root,
[theme='dark'] {
--nc-content-grey-extreme: var(--color-base-black);
--nc-background-grey-extra-light: var(--color-grey-50);
--nc-content-grey-emphasis: var(--color-grey-900);
--nc-background-grey-light: var(--color-grey-100);
--nc-content-grey-default: var(--color-grey-800);
--nc-background-grey-medium: var(--color-grey-200);
--nc-content-grey-subtle: var(--color-grey-700);
--nc-background-grey-dark: var(--color-grey-300);
--nc-content-brand-disabled: var(--color-brand-600);
--nc-content-brand-default: var(--color-brand-500);
--nc-content-grey-subtle-2: var(--color-grey-600);
--nc-content-brand-hover: var(--color-grey-300);
--nc-background-grey-extra-dark: var(--color-grey-400);
--nc-background-default: var(--color-base-white);
--nc-content-grey-muted: var(--color-grey-500);
--nc-content-inverted-primary-default: var(--color-base-white);
--nc-background-brand: var(--color-brand-50);
--nc-border-brand: var(--color-brand-500);
--nc-content-inverted-secondary-default: var(--color-grey-700);
--nc-content-inverted-secondary-hover: var(--color-grey-700);
--nc-content-red-dark: var(--color-red-700);
--nc-background-coloured-red: var(--color-red-50);
--nc-fill-nc-component-button-text: rgba(255, 255, 255, 1);
--nc-content-red-medium: var(--color-red-500);
--nc-background-coloured-green: var(--color-green-50);
--nc-background-coloured-yellow: var(--color-yellow-50);
--nc-content-red-light: var(--color-red-300);
--nc-content-green-dark: var(--color-green-700);
--nc-background-coloured-marooon: var(--color-maroon-50);
--nc-background-coloured-blue: var(--color-blue-50);
--nc-content-green-medium: var(--color-green-500);
--nc-background-coloured-orange: var(--color-orange-50);
--nc-content-green-light: var(--color-green-300);
--nc-background-coloured-pink: var(--color-pink-50);
--nc-background-coloured-purple: var(--color-purple-50);
--nc-background-coloured-red-dark: var(--color-red-100);
--nc-background-coloured-green-dark: var(--color-green-100);
--nc-background-coloured-yellow-dark: var(--color-yellow-100);
--nc-background-coloured-maroon-dark: var(--color-maroon-100);
--nc-background-coloured-blue-dark: var(--color-blue-100);
--nc-background-coloured-orange-dark: var(--color-orange-100);
--nc-background-coloured-pink-dark: var(--color-pink-100);
--nc-background-coloured-purple-dark: var(--color-purple-100);
--nc-content-yellow-dark: var(--color-yellow-700);
--nc-content-yellow-medium: var(--color-yellow-500);
--nc-content-yellow-light: var(--color-yellow-300);
--nc-content-blue-dark: var(--color-blue-700);
--nc-content-blue-medium: var(--color-blue-500);
--nc-content-blue-light: var(--color-blue-300);
--nc-content-pink-dark: var(--color-pink-700);
--nc-content-pink-medium: var(--color-pink-500);
--nc-content-pink-light: var(--color-pink-300);
--nc-content-purple-dark: var(--color-purple-700);
--nc-content-purple-medium: var(--color-purple-500);
--nc-content-purple-light: var(--color-purple-300);
--nc-content-orange-dark: var(--color-orange-700);
--nc-content-orange-medium: var(--color-orange-500);
--nc-content-orange-light: var(--color-orange-300);
--nc-content-maroon-dark: var(--color-maroon-700);
--nc-content-maroon-medium: var(--color-maroon-500);
--nc-content-maroon-light: var(--color-maroon-300);
--nc-content-inverted-primary-hover: var(--color-base-white);
--nc-content-inverted-secondary-disabled: var(--color-grey-400);
--nc-content-inverted-primary-disabled: var(--color-grey-400);
--nc-fill-primary-default: var(--color-brand-500);
--nc-fill-primary-hover: var(--color-brand-600);
--nc-fill-primary-disabled: var(--color-grey-300);
--nc-fill-primary-disabled-2: var(--color-brand-200);
--nc-fill-secondary-default: var(--color-base-white);
--nc-fill-secondary-hover: var(--color-grey-50);
--nc-fill-secondary-disabled: var(--color-base-white);
--nc-fill-warning-default: var(--color-red-500);
--nc-fill-warning-hover: var(--color-red-600);
--nc-fill-warning-disabled: var(--color-grey-50);
--nc-fill-success-default: var(--color-green-500);
--nc-fill-success-hover: var(--color-green-600);
--nc-fill-success-disabled: var(--color-grey-50);
--nc-fill-coloured-red-dark: var(--color-red-700);
--nc-fill-coloured-red-medium: var(--color-red-500);
--nc-fill-coloured-red-light: var(--color-red-300);
--nc-fill-coloured-green-dark: var(--color-green-700);
--nc-fill-coloured-green-medium: var(--color-green-500);
--nc-fill-coloured-green-light: var(--color-green-300);
--nc-fill-coloured-yellow-dark: var(--color-yellow-700);
--nc-fill-coloured-yellow-medium: var(--color-yellow-500);
--nc-fill-coloured-yellow-light: var(--color-yellow-300);
--nc-fill-coloured-blue-dark: var(--color-blue-700);
--nc-fill-coloured-blue-medium: var(--color-blue-500);
--nc-fill-coloured-blue-light: var(--color-blue-300);
--nc-fill-coloured-pink-dark: var(--color-pink-700);
--nc-fill-coloured-pink-medium: var(--color-pink-500);
--nc-fill-coloured-pink-light: var(--color-pink-300);
--nc-fill-coloured-purple-dark: var(--color-purple-700);
--nc-fill-coloured-purple-medium: var(--color-purple-500);
--nc-fill-coloured-purple-light: var(--color-purple-300);
--nc-fill-coloured-orange-dark: var(--color-orange-700);
--nc-fill-coloured-orange-medium: var(--color-orange-500);
--nc-fill-coloured-orange-light: var(--color-orange-300);
--nc-fill-coloured-maroon-dark: var(--color-maroon-700);
--nc-fill-coloured-maroon-medium: var(--color-maroon-500);
--nc-fill-coloured-maroon-light: var(--color-maroon-300);
--nc-border-grey-extra-light: var(--color-grey-50);
--nc-border-grey-light: var(--color-grey-100);
--nc-border-grey-medium: var(--color-grey-200);
--nc-border-grey-dark: var(--color-grey-300);
--nc-border-grey-extra-dark: var(--color-grey-400);
--nc-border-coloured-red: var(--color-red-500);
--nc-border-coloured-green: var(--color-green-500);
--nc-border-coloured-yellow: var(--color-yellow-500);
--nc-border-coloured-marooon: var(--color-maroon-500);
--nc-border-coloured-blue: var(--color-blue-500);
--nc-border-coloured-orange: var(--color-orange-500);
--nc-border-coloured-pink: var(--color-pink-500);
--nc-border-coloured-purple: var(--color-purple-500);
--measurements-radius-x-small: var(--spacing-02);
--measurements-radius-small: var(--spacing-03);
--measurements-radius-medium: var(--spacing-04);
--measurements-radius-large: var(--spacing-05);
--measurements-radius-x-large: var(--spacing-06);
--measurements-radius-xx-large: var(--spacing-07);
--measurements-radius-rounded: var(--spacing-13);
}