@engie-group/fluid-design-system-react

:root, [data-theme] { --nj-semantic-elevation-shadow-2-dp: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 2px 2px 0 rgba(0, 0, 0, .06), 0 3px 1px rgba(0, 0, 0, .06); --nj-semantic-elevation-shadow-4-dp: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 5px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.06); --nj-semantic-elevation-shadow-6-dp: 0 3px 5px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.06), 0 1px 18px rgba(0, 0, 0, 0.06); --nj-semantic-elevation-shadow-8-dp: 0 5px 5px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.06), 0 3px 14px rgba(0, 0, 0, 0.06); --nj-semantic-elevation-shadow-16-dp: 0 8px 10px rgba(0, 0, 0, 0.1), 0 16px 24px rgba(0, 0, 0, 0.06), 0 6px 30px rgba(0, 0, 0, 0.06); --nj-semantic-elevation-shadow-24-dp: 0 11px 15px rgba(0, 0, 0, 0.1), 0 24px 38px rgba(0, 0, 0, 0.06), 0 9px 46px rgba(0, 0, 0, 0.06); --nj-semantic-font-weight-light: 300; /* DEPRECATED: will be removed in the next major version. Please don’t use this value anymore. */ --nj-semantic-font-weight-regular: 400; --nj-semantic-font-weight-bold: 700; --nj-semantic-font-weight-black: 900; /* DEPRECATED: will be removed in the next major version. Please don’t use this value anymore. */ --nj-semantic-font-line-height-sans-serif: 1.5; --nj-semantic-motion-easing-fast-out-slow-in: cubic-bezier(.4, 0, .2, 1); --nj-semantic-motion-easing-linear-out-slow-in: cubic-bezier(0, 0, .2, 1); --nj-semantic-motion-easing-fast-out-linear-in: cubic-bezier(.4, 0, 1, 1); --nj-core-color-grey-0: #ffffff; --nj-core-color-grey-100: #f6f8f9; --nj-core-color-grey-200: #ebeef1; --nj-core-color-grey-300: #ccd4da; --nj-core-color-grey-400: #9eadb8; --nj-core-color-grey-500: #778c9b; --nj-core-color-grey-600: #60798b; --nj-core-color-grey-700: #435c6e; --nj-core-color-grey-800: #334551; --nj-core-color-grey-900: #232d35; --nj-core-color-grey-1000: #171d21; --nj-core-color-grey-alpha-0: rgba(0, 0, 0, 0); --nj-core-color-grey-alpha-100: rgba(30, 80, 105, 0.04); --nj-core-color-grey-alpha-200: rgba(5, 43, 80, 0.08); --nj-core-color-grey-alpha-300: rgba(0, 40, 70, 0.2); --nj-core-color-grey-alpha-400: rgba(6, 45, 73, 0.39); --nj-core-color-grey-alpha-500: rgba(3, 42, 70, 0.54); --nj-core-color-grey-alpha-inverse-0: rgba(0, 0, 0, 0); --nj-core-color-grey-alpha-inverse-100: rgba(188, 225, 229, 0.03); --nj-core-color-grey-alpha-inverse-200: rgba(164, 211, 229, 0.07); --nj-core-color-grey-alpha-inverse-300: rgba(168, 213, 247, 0.17); --nj-core-color-grey-alpha-inverse-400: rgba(166, 222, 255, 0.31); --nj-core-color-grey-alpha-inverse-500: rgba(179, 221, 251, 0.45); --nj-core-color-pink-100: #fff4f9; --nj-core-color-pink-200: #ffe9f3; --nj-core-color-pink-300: #ffc1df; --nj-core-color-pink-400: #ff80bd; --nj-core-color-pink-500: #fb3492; --nj-core-color-pink-600: #e01b78; --nj-core-color-pink-700: #963563; --nj-core-color-pink-800: #5c3749; --nj-core-color-pink-900: #34282e; --nj-core-color-red-100: #fff7f5; --nj-core-color-red-200: #ffeae5; --nj-core-color-red-300: #ffc5b9; --nj-core-color-red-400: #ff8979; --nj-core-color-red-500: #f34e46; --nj-core-color-red-600: #db3735; --nj-core-color-red-700: #aa2424; --nj-core-color-red-800: #7f1d1b; --nj-core-color-red-900: #521814; --nj-core-color-red-alpha-0: rgba(0, 0, 0, 0); --nj-core-color-red-alpha-100: rgba(255, 55, 5, 0.04); --nj-core-color-red-alpha-200: rgba(255, 64, 19, 0.11); --nj-core-color-red-alpha-300: rgba(255, 48, 5, 0.28); --nj-core-color-red-alpha-400: rgba(255, 32, 2, 0.53); --nj-core-color-orange-100: #fff5ed; --nj-core-color-orange-200: #ffeada; --nj-core-color-orange-300: #ffc89d; --nj-core-color-orange-400: #ff8c47; --nj-core-color-orange-500: #d96929; --nj-core-color-orange-600: #bc5921; --nj-core-color-orange-700: #8e441a; --nj-core-color-orange-800: #693315; --nj-core-color-orange-900: #442312; --nj-core-color-orange-alpha-0: rgba(0, 0, 0, 0); --nj-core-color-orange-alpha-100: rgba(255, 130, 30, 0.08); --nj-core-color-orange-alpha-200: rgba(255, 115, 8, 0.15); --nj-core-color-orange-alpha-300: rgba(255, 114, 4, 0.39); --nj-core-color-orange-alpha-400: rgba(255, 97, 3, 0.73); --nj-core-color-yellow-100: #fff7e0; --nj-core-color-yellow-200: #ffeeb4; --nj-core-color-yellow-300: #ffcc59; --nj-core-color-yellow-400: #d5a334; --nj-core-color-yellow-500: #ab8327; --nj-core-color-yellow-600: #947023; --nj-core-color-yellow-700: #6f551d; --nj-core-color-yellow-800: #533f18; --nj-core-color-yellow-900: #362a13; --nj-core-color-green-100: #f3faf4; --nj-core-color-green-200: #e2f3e3; --nj-core-color-green-300: #aedfb3; --nj-core-color-green-400: #63be74; --nj-core-color-green-500: #199d47; --nj-core-color-green-600: #008836; --nj-core-color-green-700: #006725; --nj-core-color-green-800: #004d1c; --nj-core-color-green-900: #0a3315; --nj-core-color-green-alpha-0: rgba(0, 0, 0, 0); --nj-core-color-green-alpha-100: rgba(35, 155, 35, 0.05); --nj-core-color-green-alpha-200: rgba(13, 155, 22, 0.12); --nj-core-color-green-alpha-300: rgba(2, 155, 18, 0.32); --nj-core-color-green-alpha-400: rgba(3, 150, 31, 0.62); --nj-core-color-blue-100: #f6f8fd; --nj-core-color-blue-200: #e7eefc; --nj-core-color-blue-300: #c0d4f9; --nj-core-color-blue-400: #7fadef; --nj-core-color-blue-500: #3c8cde; --nj-core-color-blue-600: #007acd; --nj-core-color-blue-700: #005aa0; --nj-core-color-blue-800: #004478; --nj-core-color-blue-900: #0b2d4e; --nj-core-color-blue-alpha-0: rgba(0, 0, 0, 0); --nj-core-color-blue-alpha-100: rgba(30, 80, 205, 0.04); --nj-core-color-blue-alpha-200: rgba(15, 85, 225, 0.1); --nj-core-color-blue-alpha-300: rgba(3, 83, 231, 0.25); --nj-core-color-blue-alpha-400: rgba(4, 94, 224, 0.51); --nj-core-color-ultramarine-100: #f6f7fb; --nj-core-color-ultramarine-200: #eceef7; --nj-core-color-ultramarine-300: #ccd1e9; --nj-core-color-ultramarine-400: #9fa9d4; --nj-core-color-ultramarine-500: #7986bf; --nj-core-color-ultramarine-600: #6372b2; --nj-core-color-ultramarine-700: #44549b; --nj-core-color-ultramarine-800: #2b3d83; --nj-core-color-ultramarine-900: #182663; --nj-core-color-purple-100: #faf7fc; --nj-core-color-purple-200: #f2ecf7; --nj-core-color-purple-300: #deccec; --nj-core-color-purple-400: #bf9ed9; --nj-core-color-purple-500: #a377c5; --nj-core-color-purple-600: #9261b7; --nj-core-color-purple-700: #744299; --nj-core-color-purple-800: #533669; --nj-core-color-purple-900: #312838; --nj-core-color-purple-alpha-0: rgba(0, 0, 0, 0); --nj-core-color-purple-alpha-100: rgba(130, 55, 180, 0.04); --nj-core-color-purple-alpha-200: rgba(93, 18, 155, 0.08); --nj-core-color-purple-alpha-300: rgba(90, 0, 160, 0.2); --nj-core-color-purple-alpha-400: rgba(91, 6, 158, 0.39); --nj-core-color-teal-100: #f1fafa; --nj-core-color-teal-200: #daf4f3; --nj-core-color-teal-300: #95dfdd; --nj-core-color-teal-400: #3dbcb8; --nj-core-color-teal-500: #0a9994; --nj-core-color-teal-600: #008480; --nj-core-color-teal-700: #0a6361; --nj-core-color-teal-800: #154948; --nj-core-color-teal-900: #192f2f; --nj-core-color-teal-alpha-0: rgba(0, 0, 0, 0); --nj-core-color-teal-alpha-100: rgba(22, 172, 172, 0.06); --nj-core-color-teal-alpha-200: rgba(8, 182, 175, 0.15); --nj-core-color-teal-alpha-300: rgba(3, 179, 174, 0.42); --nj-core-color-teal-alpha-400: rgba(3, 168, 163, 0.77); --nj-core-color-lime-100: #f8fad5; --nj-core-color-lime-200: #eef5a8; --nj-core-color-lime-300: #c7de43; --nj-core-color-lime-400: #9db603; --nj-core-color-lime-500: #7d9200; --nj-core-color-lime-600: #6c7d02; --nj-core-color-lime-700: #525f0a; --nj-core-color-lime-800: #3e460e; --nj-core-color-lime-900: #2a2e0e; --nj-core-color-engie-blue: #00aaff; --nj-core-color-engie-green: #23d2b5; --nj-core-color-white-alpha-300: rgba(255, 255, 255, 0.25); --nj-core-elevation-z-index-0: 0; --nj-core-elevation-z-index-1: 1000; --nj-core-elevation-z-index-10: 1010; --nj-core-elevation-z-index-20: 1020; --nj-core-elevation-z-index-30: 1030; --nj-core-elevation-z-index-40: 1040; --nj-core-elevation-z-index-50: 1050; --nj-core-elevation-z-index-60: 1060; --nj-core-elevation-z-index-70: 1070; --nj-core-elevation-z-index-80: 1080; --nj-core-elevation-z-index-90: 1090; --nj-core-elevation-z-index-100: 1100; --nj-core-elevation-z-index-110: 1110; --nj-core-elevation-z-index-120: 1120; --nj-core-elevation-z-index-130: 1130; --nj-core-elevation-z-index-140: 1140; --nj-core-elevation-z-index-150: 1150; --nj-core-elevation-z-index-160: 1160; --nj-core-elevation-z-index-170: 1170; --nj-core-elevation-z-index-180: 1180; --nj-core-elevation-z-index-190: 1190; --nj-core-elevation-z-index-200: 1200; --nj-core-elevation-z-index-210: 1210; --nj-core-elevation-z-index-220: 1220; --nj-core-elevation-z-index-230: 1230; --nj-core-elevation-z-index-240: 1240; --nj-core-elevation-z-index-250: 1250; --nj-core-elevation-z-index-260: 1260; --nj-core-elevation-z-index-270: 1270; --nj-core-elevation-z-index-280: 1280; --nj-core-elevation-z-index-290: 1290; --nj-core-elevation-z-index-300: 1300; --nj-core-elevation-z-index-310: 1310; --nj-core-elevation-z-index-320: 1320; --nj-core-elevation-z-index-330: 1330; --nj-core-elevation-z-index-340: 1340; --nj-core-elevation-z-index-350: 1350; --nj-core-elevation-z-index-360: 1360; --nj-core-elevation-z-index-370: 1370; --nj-core-elevation-z-index-380: 1380; --nj-core-elevation-z-index-390: 1390; --nj-core-elevation-z-index-400: 1400; --nj-core-elevation-z-index-410: 1410; --nj-core-elevation-z-index-420: 1420; --nj-core-elevation-z-index-430: 1430; --nj-core-elevation-z-index-440: 1440; --nj-core-elevation-z-index-450: 1450; --nj-core-elevation-z-index-460: 1460; --nj-core-elevation-z-index-470: 1470; --nj-core-elevation-z-index-480: 1480; --nj-core-elevation-z-index-490: 1490; --nj-core-elevation-z-index-500: 1500; --nj-core-font-family-sans-serif: "Lato", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --nj-core-font-family-monospace: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace; --nj-core-opacity-50: 0.05; --nj-core-opacity-100: 0.10; --nj-core-opacity-150: 0.15; --nj-core-opacity-200: 0.20; --nj-core-opacity-250: 0.25; --nj-core-opacity-300: 0.30; --nj-core-opacity-350: 0.35; --nj-core-opacity-400: 0.40; --nj-core-opacity-450: 0.45; --nj-core-opacity-500: 0.50; --nj-core-opacity-550: 0.55; --nj-core-opacity-600: 0.60; --nj-core-opacity-650: 0.65; --nj-core-opacity-700: 0.70; --nj-core-opacity-750: 0.75; --nj-core-opacity-800: 0.80; --nj-core-opacity-850: 0.85; --nj-core-opacity-900: 0.90; --nj-core-opacity-950: 0.95; --nj-core-opacity-1000: 1.00; --nj-core-size-0: 0rem; --nj-core-size-1: 0.0625rem; --nj-core-size-2: 0.125rem; --nj-core-size-4: 0.25rem; --nj-core-size-6: 0.375rem; --nj-core-size-8: 0.5rem; --nj-core-size-10: 0.625rem; --nj-core-size-12: 0.75rem; --nj-core-size-14: 0.875rem; --nj-core-size-16: 1rem; --nj-core-size-18: 1.125rem; --nj-core-size-20: 1.25rem; --nj-core-size-22: 1.375rem; --nj-core-size-24: 1.5rem; --nj-core-size-28: 1.75rem; --nj-core-size-30: 1.875rem; --nj-core-size-32: 2rem; --nj-core-size-34: 2.125rem; --nj-core-size-36: 2.25rem; --nj-core-size-38: 2.375rem; --nj-core-size-40: 2.5rem; --nj-core-size-42: 2.625rem; --nj-core-size-44: 2.75rem; --nj-core-size-46: 2.875rem; --nj-core-size-48: 3rem; --nj-core-size-50: 3.125rem; --nj-core-size-52: 3.25rem; --nj-core-size-54: 3.375rem; --nj-core-size-56: 3.5rem; --nj-core-size-58: 3.625rem; --nj-core-size-64: 4rem; --nj-core-size-72: 4.5rem; --nj-core-size-76: 4.75rem; --nj-core-size-80: 5rem; --nj-core-size-88: 5.5rem; --nj-core-size-96: 6rem; --nj-core-size-112: 7rem; --nj-core-size-116: 7.25rem; --nj-core-size-128: 8rem; --nj-core-size-9999: 9999rem; --nj-semantic-color-background-accent-pink-secondary-default: var(--nj-core-color-pink-100); /* Subtle touch of pink with no meaning tied to the color. */ --nj-semantic-color-background-accent-pink-secondary-hovered: var(--nj-core-color-pink-200); --nj-semantic-color-background-accent-pink-secondary-focused: var(--nj-core-color-pink-200); --nj-semantic-color-background-accent-pink-secondary-pressed: var(--nj-core-color-pink-300); --nj-semantic-color-background-accent-pink-tertiary-default: var(--nj-core-color-pink-200); /* Soft pink background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */ --nj-semantic-color-background-accent-pink-tertiary-hovered: var(--nj-core-color-pink-300); --nj-semantic-color-background-accent-pink-tertiary-focused: var(--nj-core-color-pink-300); --nj-semantic-color-background-accent-pink-tertiary-pressed: var(--nj-core-color-pink-400); --nj-semantic-color-background-accent-pink-solid-default: var(--nj-core-color-pink-600); /* Suitable for pink backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */ --nj-semantic-color-background-accent-pink-solid-hovered: var(--nj-core-color-pink-700); --nj-semantic-color-background-accent-pink-solid-focused: var(--nj-core-color-pink-700); --nj-semantic-color-background-accent-pink-solid-pressed: var(--nj-core-color-pink-800); --nj-semantic-color-background-accent-pink-spotlight-default: var(--nj-core-color-pink-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */ --nj-semantic-color-background-accent-red-secondary-default: var(--nj-core-color-red-100); /* Subtle touch of red with no meaning tied to the color. */ --nj-semantic-color-background-accent-red-secondary-hovered: var(--nj-core-color-red-200); --nj-semantic-color-background-accent-red-secondary-focused: var(--nj-core-color-red-200); --nj-semantic-color-background-accent-red-secondary-pressed: var(--nj-core-color-red-300); --nj-semantic-color-background-accent-red-tertiary-default: var(--nj-core-color-red-200); /* Soft red background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */ --nj-semantic-color-background-accent-red-tertiary-hovered: var(--nj-core-color-red-300); --nj-semantic-color-background-accent-red-tertiary-focused: var(--nj-core-color-red-300); --nj-semantic-color-background-accent-red-tertiary-pressed: var(--nj-core-color-red-400); --nj-semantic-color-background-accent-red-solid-default: var(--nj-core-color-red-600); /* Suitable for red backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */ --nj-semantic-color-background-accent-red-spotlight-default: var(--nj-core-color-red-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */ --nj-semantic-color-background-accent-orange-secondary-default: var(--nj-core-color-orange-100); /* Subtle touch of orange with no meaning tied to the color. */ --nj-semantic-color-background-accent-orange-secondary-hovered: var(--nj-core-color-orange-200); --nj-semantic-color-background-accent-orange-secondary-focused: var(--nj-core-color-orange-200); --nj-semantic-color-background-accent-orange-secondary-pressed: var(--nj-core-color-orange-300); --nj-semantic-color-background-accent-orange-tertiary-default: var(--nj-core-color-orange-200); /* Soft orange background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */ --nj-semantic-color-background-accent-orange-tertiary-hovered: var(--nj-core-color-orange-300); --nj-semantic-color-background-accent-orange-tertiary-focused: var(--nj-core-color-orange-300); --nj-semantic-color-background-accent-orange-tertiary-pressed: var(--nj-core-color-orange-400); --nj-semantic-color-background-accent-orange-solid-default: var(--nj-core-color-orange-600); /* Suitable for orange backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */ --nj-semantic-color-background-accent-orange-solid-hovered: var(--nj-core-color-orange-700); --nj-semantic-color-background-accent-orange-solid-focused: var(--nj-core-color-orange-700); --nj-semantic-color-background-accent-orange-solid-pressed: var(--nj-core-color-orange-800); --nj-semantic-color-background-accent-orange-spotlight-default: var(--nj-core-color-orange-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */ --nj-semantic-color-background-accent-yellow-secondary-default: var(--nj-core-color-yellow-100); /* Subtle touch of yellow with no meaning tied to the color. */ --nj-semantic-color-background-accent-yellow-secondary-hovered: var(--nj-core-color-yellow-200); --nj-semantic-color-background-accent-yellow-secondary-focused: var(--nj-core-color-yellow-200); --nj-semantic-color-background-accent-yellow-secondary-pressed: var(--nj-core-color-yellow-300); --nj-semantic-color-background-accent-yellow-tertiary-default: var(--nj-core-color-yellow-200); /* Soft yellow background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */ --nj-semantic-color-background-accent-yellow-tertiary-hovered: var(--nj-core-color-yellow-300); --nj-semantic-color-background-accent-yellow-tertiary-focused: var(--nj-core-color-yellow-300); --nj-semantic-color-background-accent-yellow-tertiary-pressed: var(--nj-core-color-yellow-400); --nj-semantic-color-background-accent-yellow-solid-default: var(--nj-core-color-yellow-300); /* Suitable for yellow backgrounds when there is no meaning tied to the color. No minimum contrast requirement met! */ --nj-semantic-color-background-accent-yellow-solid-hovered: var(--nj-core-color-yellow-400); --nj-semantic-color-background-accent-yellow-solid-focused: var(--nj-core-color-yellow-400); --nj-semantic-color-background-accent-yellow-solid-pressed: var(--nj-core-color-yellow-500); --nj-semantic-color-background-accent-yellow-spotlight-default: var(--nj-core-color-yellow-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */ --nj-semantic-color-background-accent-green-secondary-default: var(--nj-core-color-green-100); /* Subtle touch of green with no meaning tied to the color. */ --nj-semantic-color-background-accent-green-secondary-hovered: var(--nj-core-color-green-200); --nj-semantic-color-background-accent-green-secondary-focused: var(--nj-core-color-green-200); --nj-semantic-color-background-accent-green-secondary-pressed: var(--nj-core-color-green-300); --nj-semantic-color-background-accent-green-tertiary-default: var(--nj-core-color-green-200); /* Soft green background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */ --nj-semantic-color-background-accent-green-tertiary-hovered: var(--nj-core-color-green-300); --nj-semantic-color-background-accent-green-tertiary-focused: var(--nj-core-color-green-300); --nj-semantic-color-background-accent-green-tertiary-pressed: var(--nj-core-color-green-400); --nj-semantic-color-background-accent-green-solid-default: var(--nj-core-color-green-600); /* Suitable for green backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */ --nj-semantic-color-background-accent-green-solid-hovered: var(--nj-core-color-green-700); --nj-semantic-color-background-accent-green-solid-focused: var(--nj-core-color-green-700); --nj-semantic-color-background-accent-green-solid-pressed: var(--nj-core-color-green-800); --nj-semantic-color-background-accent-green-spotlight-default: var(--nj-core-color-green-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */ --nj-semantic-color-background-accent-grey-secondary-default: var(--nj-core-color-grey-100); /* Subtle touch of grey with no meaning tied to the color. */ --nj-semantic-color-background-accent-grey-secondary-hovered: var(--nj-core-color-grey-200); --nj-semantic-color-background-accent-grey-secondary-focused: var(--nj-core-color-grey-200); --nj-semantic-color-background-accent-grey-secondary-pressed: var(--nj-core-color-grey-300); --nj-semantic-color-background-accent-grey-tertiary-default: var(--nj-core-color-grey-200); /* Soft grey background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */ --nj-semantic-color-background-accent-grey-tertiary-hovered: var(--nj-core-color-grey-300); --nj-semantic-color-background-accent-grey-tertiary-focused: var(--nj-core-color-grey-300); --nj-semantic-color-background-accent-grey-tertiary-pressed: var(--nj-core-color-grey-400); --nj-semantic-color-background-accent-grey-solid-default: var(--nj-core-color-grey-600); /* Suitable for grey backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */ --nj-semantic-color-background-accent-grey-solid-hovered: var(--nj-core-color-grey-700); --nj-semantic-color-background-accent-grey-solid-focused: var(--nj-core-color-grey-700); --nj-semantic-color-background-accent-grey-solid-pressed: var(--nj-core-color-grey-800); --nj-semantic-color-background-accent-grey-spotlight-default: var(--nj-core-color-grey-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */ --nj-semantic-color-background-accent-blue-secondary-default: var(--nj-core-color-blue-100); /* Subtle touch of blue with no meaning tied to the color. */ --nj-semantic-color-background-accent-blue-secondary-hovered: var(--nj-core-color-blue-200); --nj-semantic-color-background-accent-blue-secondary-focused: var(--nj-core-color-blue-200); --nj-semantic-color-background-accent-blue-secondary-pressed: var(--nj-core-color-blue-300); --nj-semantic-color-background-accent-blue-tertiary-default: var(--nj-core-color-blue-200); /* Soft blue background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */ --nj-semantic-color-background-accent-blue-tertiary-hovered: var(--nj-core-color-blue-300); --nj-semantic-color-background-accent-blue-tertiary-focused: var(--nj-core-color-blue-300); --nj-semantic-color-background-accent-blue-tertiary-pressed: var(--nj-core-color-blue-400); --nj-semantic-color-background-accent-blue-solid-default: var(--nj-core-color-blue-600); /* Suitable for blue backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */ --nj-semantic-color-background-accent-blue-solid-hovered: var(--nj-core-color-blue-700); --nj-semantic-color-background-accent-blue-solid-focused: var(--nj-core-color-blue-700); --nj-semantic-color-background-accent-blue-solid-pressed: var(--nj-core-color-blue-800); --nj-semantic-color-background-accent-blue-spotlight-default: var(--nj-core-color-blue-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */ --nj-semantic-color-background-accent-ultramarine-secondary-default: var(--nj-core-color-ultramarine-100); /* Subtle touch of ultramarine with no meaning tied to the color. */ --nj-semantic-color-background-accent-ultramarine-secondary-hovered: var(--nj-core-color-ultramarine-200); --nj-semantic-color-background-accent-ultramarine-secondary-focused: var(--nj-core-color-ultramarine-200); --nj-semantic-color-background-accent-ultramarine-secondary-pressed: var(--nj-core-color-ultramarine-300); --nj-semantic-color-background-accent-ultramarine-tertiary-default: var(--nj-core-color-ultramarine-200); /* Soft ultramarine background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */ --nj-semantic-color-background-accent-ultramarine-tertiary-hovered: var(--nj-core-color-ultramarine-300); --nj-semantic-color-background-accent-ultramarine-tertiary-focused: var(--nj-core-color-ultramarine-300); --nj-semantic-color-background-accent-ultramarine-tertiary-pressed: var(--nj-core-color-ultramarine-400); --nj-semantic-color-background-accent-ultramarine-solid-default: var(--nj-core-color-ultramarine-600); /* Suitable for ultramarine backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */ --nj-semantic-color-background-accent-ultramarine-solid-hovered: var(--nj-core-color-ultramarine-700); --nj-semantic-color-background-accent-ultramarine-solid-focused: var(--nj-core-color-ultramarine-700); --nj-semantic-color-background-accent-ultramarine-solid-pressed: var(--nj-core-color-ultramarine-800); --nj-semantic-color-background-accent-ultramarine-spotlight-default: var(--nj-core-color-ultramarine-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */ --nj-semantic-color-background-accent-purple-secondary-default: var(--nj-core-color-purple-100); /* Subtle touch of purple with no meaning tied to the color. */ --nj-semantic-color-background-accent-purple-secondary-hovered: var(--nj-core-color-purple-200); --nj-semantic-color-background-accent-purple-secondary-focused: var(--nj-core-color-purple-200); --nj-semantic-color-background-accent-purple-secondary-pressed: var(--nj-core-color-purple-300); --nj-semantic-color-background-accent-purple-tertiary-default: var(--nj-core-color-purple-200); /* Soft purple background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */ --nj-semantic-color-background-accent-purple-tertiary-hovered: var(--nj-core-color-purple-300); --nj-semantic-color-background-accent-purple-tertiary-focused: var(--nj-core-color-purple-300); --nj-semantic-color-background-accent-purple-tertiary-pressed: var(--nj-core-color-purple-400); --nj-semantic-color-background-accent-purple-solid-default: var(--nj-core-color-purple-600); /* Suitable for purple backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */ --nj-semantic-color-background-accent-purple-solid-hovered: var(--nj-core-color-purple-700); --nj-semantic-color-background-accent-purple-solid-focused: var(--nj-core-color-purple-700); --nj-semantic-color-background-accent-purple-solid-pressed: var(--nj-core-color-purple-800); --nj-semantic-color-background-accent-purple-spotlight-default: var(--nj-core-color-purple-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */ --nj-semantic-color-background-accent-teal-secondary-default: var(--nj-core-color-teal-100); /* Subtle touch of teal with no meaning tied to the color. */ --nj-semantic-color-background-accent-teal-secondary-hovered: var(--nj-core-color-teal-200); --nj-semantic-color-background-accent-teal-secondary-focused: var(--nj-core-color-teal-200); --nj-semantic-color-background-accent-teal-secondary-pressed: var(--nj-core-color-teal-300); --nj-semantic-color-background-accent-teal-tertiary-default: var(--nj-core-color-teal-200); /* Soft teal background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */ --nj-semantic-color-background-accent-teal-tertiary-hovered: var(--nj-core-color-teal-300); --nj-semantic-color-background-accent-teal-tertiary-focused: var(--nj-core-color-teal-300); --nj-semantic-color-background-accent-teal-tertiary-pressed: var(--nj-core-color-teal-400); --nj-semantic-color-background-accent-teal-solid-default: var(--nj-core-color-teal-600); /* Suitable for teal backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */ --nj-semantic-color-background-accent-teal-solid-hovered: var(--nj-core-color-teal-700); --nj-semantic-color-background-accent-teal-solid-focused: var(--nj-core-color-teal-700); --nj-semantic-color-background-accent-teal-solid-pressed: var(--nj-core-color-teal-800); --nj-semantic-color-background-accent-teal-spotlight-default: var(--nj-core-color-teal-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */ --nj-semantic-color-background-accent-lime-secondary-default: var(--nj-core-color-lime-100); /* Subtle touch of lime with no meaning tied to the color. */ --nj-semantic-color-background-accent-lime-secondary-hovered: var(--nj-core-color-lime-200); --nj-semantic-color-background-accent-lime-secondary-focused: var(--nj-core-color-lime-200); --nj-semantic-color-background-accent-lime-secondary-pressed: var(--nj-core-color-lime-300); --nj-semantic-color-background-accent-lime-tertiary-default: var(--nj-core-color-lime-200); /* Soft lime background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */ --nj-semantic-color-background-accent-lime-tertiary-hovered: var(--nj-core-color-lime-300); --nj-semantic-color-background-accent-lime-tertiary-focused: var(--nj-core-color-lime-300); --nj-semantic-color-background-accent-lime-tertiary-pressed: var(--nj-core-color-lime-400); --nj-semantic-color-background-accent-lime-solid-default: var(--nj-core-color-lime-600); /* Suitable for lime backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */ --nj-semantic-color-background-accent-lime-solid-hovered: var(--nj-core-color-lime-700); --nj-semantic-color-background-accent-lime-solid-focused: var(--nj-core-color-lime-700); --nj-semantic-color-background-accent-lime-solid-pressed: var(--nj-core-color-lime-800); --nj-semantic-color-background-accent-lime-spotlight-default: var(--nj-core-color-lime-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */ --nj-semantic-color-background-additional-engie-ray-default: linear-gradient(90deg, var(--nj-core-color-engie-blue) 0%, var(--nj-core-color-engie-green) 100%); /* ENGIE's brand gradient. We strongly advise to refer to the brand guidelines for its usage. */ --nj-semantic-color-background-additional-signature-default: var(--nj-core-color-ultramarine-900); /* ENGIE's additional brand color. We strongly advise to refer to the brand guidelines for its usage. */ --nj-semantic-color-border-accent-pink-subtle-default: var(--nj-core-color-pink-300); --nj-semantic-color-border-accent-pink-subtle-hovered: var(--nj-core-color-pink-400); --nj-semantic-color-border-accent-pink-subtle-focused: var(--nj-core-color-pink-400); --nj-semantic-color-border-accent-pink-subtle-pressed: var(--nj-core-color-pink-500); --nj-semantic-color-border-accent-pink-subtle-selected: var(--nj-core-color-pink-500); --nj-semantic-color-border-accent-pink-moderate-default: var(--nj-core-color-pink-400); /* Suitable for pink borders when there is no meaning tied to the color. */ --nj-semantic-color-border-accent-pink-moderate-hovered: var(--nj-core-color-pink-500); --nj-semantic-color-border-accent-pink-moderate-focused: var(--nj-core-color-pink-500); --nj-semantic-color-border-accent-pink-moderate-pressed: var(--nj-core-color-pink-600); --nj-semantic-color-border-accent-pink-moderate-selected: var(--nj-core-color-pink-600); --nj-semantic-color-border-accent-pink-strong-default: var(--nj-core-color-pink-600); --nj-semantic-color-border-accent-pink-strong-hovered: var(--nj-core-color-pink-700); --nj-semantic-color-border-accent-pink-strong-focused: var(--nj-core-color-pink-700); --nj-semantic-color-border-accent-pink-strong-pressed: var(--nj-core-color-pink-800); --nj-semantic-color-border-accent-pink-strong-selected: var(--nj-core-color-pink-800); --nj-semantic-color-border-accent-red-subtle-default: var(--nj-core-color-red-300); --nj-semantic-color-border-accent-red-subtle-hovered: var(--nj-core-color-red-400); --nj-semantic-color-border-accent-red-subtle-focused: var(--nj-core-color-red-400); --nj-semantic-color-border-accent-red-subtle-pressed: var(--nj-core-color-red-500); --nj-semantic-color-border-accent-red-subtle-selected: var(--nj-core-color-red-500); --nj-semantic-color-border-accent-red-moderate-default: var(--nj-core-color-red-400); /* Suitable for red borders when there is no meaning tied to the color. */ --nj-semantic-color-border-accent-red-moderate-hovered: var(--nj-core-color-red-500); --nj-semantic-color-border-accent-red-moderate-focused: var(--nj-core-color-red-500); --nj-semantic-color-border-accent-red-moderate-pressed: var(--nj-core-color-red-600); --nj-semantic-color-border-accent-red-moderate-selected: var(--nj-core-color-red-600); --nj-semantic-color-border-accent-red-strong-default: var(--nj-core-color-red-600); --nj-semantic-color-border-accent-red-strong-hovered: var(--nj-core-color-red-700); --nj-semantic-color-border-accent-red-strong-focused: var(--nj-core-color-red-700); --nj-semantic-color-border-accent-red-strong-pressed: var(--nj-core-color-red-800); --nj-semantic-color-border-accent-red-strong-selected: var(--nj-core-color-red-800); --nj-semantic-color-border-accent-orange-subtle-default: var(--nj-core-color-orange-300); --nj-semantic-color-border-accent-orange-subtle-hovered: var(--nj-core-color-orange-400); --nj-semantic-color-border-accent-orange-subtle-focused: var(--nj-core-color-orange-400); --nj-semantic-color-border-accent-orange-subtle-pressed: var(--nj-core-color-orange-500); --nj-semantic-color-border-accent-orange-subtle-selected: var(--nj-core-color-orange-500); --nj-semantic-color-border-accent-orange-moderate-default: var(--nj-core-color-orange-400); /* Suitable for orange borders when there is no meaning tied to the color. */ --nj-semantic-color-border-accent-orange-moderate-hovered: var(--nj-core-color-orange-500); --nj-semantic-color-border-accent-orange-moderate-focused: var(--nj-core-color-orange-500); --nj-semantic-color-border-accent-orange-moderate-pressed: var(--nj-core-color-orange-600); --nj-semantic-color-border-accent-orange-moderate-selected: var(--nj-core-color-orange-600); --nj-semantic-color-border-accent-orange-strong-default: var(--nj-core-color-orange-600); --nj-semantic-color-border-accent-orange-strong-hovered: var(--nj-core-color-orange-700); --nj-semantic-color-border-accent-orange-strong-focused: var(--nj-core-color-orange-700); --nj-semantic-color-border-accent-orange-strong-pressed: var(--nj-core-color-orange-800); --nj-semantic-color-border-accent-orange-strong-selected: var(--nj-core-color-orange-800); --nj-semantic-color-border-accent-yellow-subtle-default: var(--nj-core-color-yellow-300); --nj-semantic-color-border-accent-yellow-subtle-hovered: var(--nj-core-color-yellow-400); --nj-semantic-color-border-accent-yellow-subtle-focused: var(--nj-core-color-yellow-400); --nj-semantic-color-border-accent-yellow-subtle-pressed: var(--nj-core-color-yellow-500); --nj-semantic-color-border-accent-yellow-subtle-selected: var(--nj-core-color-yellow-500); --nj-semantic-color-border-accent-yellow-moderate-default: var(--nj-core-color-yellow-400); /* Suitable for yellow borders when there is no meaning tied to the color. */ --nj-semantic-color-border-accent-yellow-moderate-hovered: var(--nj-core-color-yellow-500); --nj-semantic-color-border-accent-yellow-moderate-focused: var(--nj-core-color-yellow-500); --nj-semantic-color-border-accent-yellow-moderate-pressed: var(--nj-core-color-yellow-600); --nj-semantic-color-border-accent-yellow-moderate-selected: var(--nj-core-color-yellow-600); --nj-semantic-color-border-accent-yellow-strong-default: var(--nj-core-color-yellow-600); --nj-semantic-color-border-accent-yellow-strong-hovered: var(--nj-core-color-yellow-700); --nj-semantic-color-border-accent-yellow-strong-focused: var(--nj-core-color-yellow-700); --nj-semantic-color-border-accent-yellow-strong-pressed: var(--nj-core-color-yellow-800); --nj-semantic-color-border-accent-yellow-strong-selected: var(--nj-core-color-yellow-800); --nj-semantic-color-border-accent-green-subtle-default: var(--nj-core-color-green-300); --nj-semantic-color-border-accent-green-subtle-hovered: var(--nj-core-color-green-400); --nj-semantic-color-border-accent-green-subtle-focused: var(--nj-core-color-green-400); --nj-semantic-color-border-accent-green-subtle-pressed: var(--nj-core-color-green-500); --nj-semantic-color-border-accent-green-subtle-selected: var(--nj-core-color-green-500); --nj-semantic-color-border-accent-green-moderate-default: var(--nj-core-color-green-400); /* Suitable for green borders when there is no meaning tied to the color. */ --nj-semantic-color-border-accent-green-moderate-hovered: var(--nj-core-color-green-500); --nj-semantic-color-border-accent-green-moderate-focused: var(--nj-core-color-green-500); --nj-semantic-color-border-accent-green-moderate-pressed: var(--nj-core-color-green-600); --nj-semantic-color-border-accent-green-moderate-selected: var(--nj-core-color-green-600); --nj-semantic-color-border-accent-green-strong-default: var(--nj-core-color-green-600); --nj-semantic-color-border-accent-green-strong-hovered: var(--nj-core-color-green-700); --nj-semantic-color-border-accent-green-strong-focused: var(--nj-core-color-green-700); --nj-semantic-color-border-accent-green-strong-pressed: var(--nj-core-color-green-800); --nj-semantic-color-border-accent-green-strong-selected: var(--nj-core-color-green-800); --nj-semantic-color-border-accent-grey-subtle-default: var(--nj-core-color-grey-300); --nj-semantic-color-border-accent-grey-subtle-hovered: var(--nj-core-color-grey-400); --nj-semantic-color-border-accent-grey-subtle-focused: var(--nj-core-color-grey-400); --nj-semantic-color-border-accent-grey-subtle-pressed: var(--nj-core-color-grey-500); --nj-semantic-color-border-accent-grey-subtle-selected: var(--nj-core-color-grey-500); --nj-semantic-color-border-accent-grey-moderate-default: var(--nj-core-color-grey-400); /* Suitable for grey borders when there is no meaning tied to the color. */ --nj-semantic-color-border-accent-grey-moderate-hovered: var(--nj-core-color-grey-500); --nj-semantic-color-border-accent-grey-moderate-focused: var(--nj-core-color-grey-500); --nj-semantic-color-border-accent-grey-moderate-pressed: var(--nj-core-color-grey-600); --nj-semantic-color-border-accent-grey-moderate-selected: var(--nj-core-color-grey-600); --nj-semantic-color-border-accent-grey-strong-default: var(--nj-core-color-grey-600); --nj-semantic-color-border-accent-grey-strong-hovered: var(--nj-core-color-grey-700); --nj-semantic-color-border-accent-grey-strong-focused: var(--nj-core-color-grey-700); --nj-semantic-color-border-accent-grey-strong-pressed: var(--nj-core-color-grey-800); --nj-semantic-color-border-accent-grey-strong-selected: var(--nj-core-color-grey-800); --nj-semantic-color-border-accent-blue-subtle-default: var(--nj-core-color-blue-300); --nj-semantic-color-border-accent-blue-subtle-hovered: var(--nj-core-color-blue-400); --nj-semantic-color-border-accent-blue-subtle-focused: var(--nj-core-color-blue-400); --nj-semantic-color-border-accent-blue-subtle-pressed: var(--nj-core-color-blue-500); --nj-semantic-color-border-accent-blue-subtle-selected: var(--nj-core-color-blue-500); --nj-semantic-color-border-accent-blue-moderate-default: var(--nj-core-color-blue-400); /* Suitable for blue borders when there is no meaning tied to the color. */ --nj-semantic-color-border-accent-blue-moderate-hovered: var(--nj-core-color-blue-500); --nj-semantic-color-border-accent-blue-moderate-focused: var(--nj-core-color-blue-500); --nj-semantic-color-border-accent-blue-moderate-pressed: var(--nj-core-color-blue-600); --nj-semantic-color-border-accent-blue-moderate-selected: var(--nj-core-color-blue-600); --nj-semantic-color-border-accent-blue-strong-default: var(--nj-core-color-blue-600); --nj-semantic-color-border-accent-blue-strong-hovered: var(--nj-core-color-blue-700); --nj-semantic-color-border-accent-blue-strong-focused: var(--nj-core-color-blue-700); --nj-semantic-color-border-accent-blue-strong-pressed: var(--nj-core-color-blue-800); --nj-semantic-color-border-accent-blue-strong-selected: var(--nj-core-color-blue-800); --nj-semantic-color-border-accent-ultramarine-subtle-default: var(--nj-core-color-ultramarine-300); --nj-semantic-color-border-accent-ultramarine-subtle-hovered: var(--nj-core-color-ultramarine-400); --nj-semantic-color-border-accent-ultramarine-subtle-focused: var(--nj-core-color-ultramarine-400); --nj-semantic-color-border-accent-ultramarine-subtle-pressed: var(--nj-core-color-ultramarine-500); --nj-semantic-color-border-accent-ultramarine-subtle-selected: var(--nj-core-color-ultramarine-500); --nj-semantic-color-border-accent-ultramarine-moderate-default: var(--nj-core-color-ultramarine-400); /* Suitable for ultramarine borders when there is no meaning tied to the color. */ --nj-semantic-color-border-accent-ultramarine-moderate-hovered: var(--nj-core-color-ultramarine-500); --nj-semantic-color-border-accent-ultramarine-moderate-focused: var(--nj-core-color-ultramarine-500); --nj-semantic-color-border-accent-ultramarine-moderate-pressed: var(--nj-core-color-ultramarine-600); --nj-semantic-color-border-accent-ultramarine-moderate-selected: var(--nj-core-color-ultramarine-600); --nj-semantic-color-border-accent-ultramarine-strong-default: var(--nj-core-color-ultramarine-600); --nj-semantic-color-border-accent-ultramarine-strong-hovered: var(--nj-core-color-ultramarine-700); --nj-semantic-color-border-accent-ultramarine-strong-focused: var(--nj-core-color-ultramarine-700); --nj-semantic-color-border-accent-ultramarine-strong-pressed: var(--nj-core-color-ultramarine-800); --nj-semantic-color-border-accent-ultramarine-strong-selected: var(--nj-core-color-ultramarine-800); --nj-semantic-color-border-accent-purple-subtle-default: var(--nj-core-color-purple-300); --nj-semantic-color-border-accent-purple-subtle-hovered: var(--nj-core-color-purple-400); --nj-semantic-color-border-accent-purple-subtle-focused: var(--nj-core-color-purple-400); --nj-semantic-color-border-accent-purple-subtle-pressed: var(--nj-core-color-purple-500); --nj-semantic-color-border-accent-purple-subtle-selected: var(--nj-core-color-purple-500); --nj-semantic-color-border-accent-purple-moderate-default: var(--nj-core-color-purple-400); /* Suitable for purple borders when there is no meaning tied to the color. */ --nj-semantic-color-border-accent-purple-moderate-hovered: var(--nj-core-color-purple-500); --nj-semantic-color-border-accent-purple-moderate-focused: var(--nj-core-color-purple-500); --nj-semantic-color-border-accent-purple-moderate-pressed: var(--nj-core-color-purple-600); --nj-semantic-color-border-accent-purple-moderate-selected: var(--nj-core-color-purple-600); --nj-semantic-color-border-accent-purple-strong-default: var(--nj-core-color-purple-600); --nj-semantic-color-border-accent-purple-strong-hovered: var(--nj-core-color-purple-700); --nj-semantic-color-border-accent-purple-strong-focused: var(--nj-core-color-purple-700); --nj-semantic-color-border-accent-purple-strong-pressed: var(--nj-core-color-purple-800); --nj-semantic-color-border-accent-purple-strong-selected: var(--nj-core-color-purple-800); --nj-semantic-color-border-accent-teal-subtle-default: var(--nj-core-color-teal-300); --nj-semantic-color-border-accent-teal-subtle-hovered: var(--nj-core-color-teal-400); --nj-semantic-color-border-accent-teal-subtle-focused: var(--nj-core-color-teal-400); --nj-semantic-color-border-accent-teal-subtle-pressed: var(--nj-core-color-teal-500); --nj-semantic-color-border-accent-teal-subtle-selected: var(--nj-core-color-teal-500); --nj-semantic-color-border-accent-teal-moderate-default: var(--nj-core-color-teal-400); /* Suitable for teal borders when there is no meaning tied to the color. */ --nj-semantic-color-border-accent-teal-moderate-hovered: var(--nj-core-color-teal-500); --nj-semantic-color-border-accent-teal-moderate-focused: var(--nj-core-color-teal-500); --nj-semantic-color-border-accent-teal-moderate-pressed: var(--nj-core-color-teal-600); --nj-semantic-color-border-accent-teal-moderate-selected: var(--nj-core-color-teal-600); --nj-semantic-color-border-accent-teal-strong-default: var(--nj-core-color-teal-600); --nj-semantic-color-border-accent-teal-strong-hovered: var(--nj-core-color-teal-700); --nj-semantic-color-border-accent-teal-strong-focused: var(--nj-core-color-teal-700); --nj-semantic-color-border-accent-teal-strong-pressed: var(--nj-core-color-teal-800); --nj-semantic-color-border-accent-teal-strong-selected: var(--nj-core-color-teal-800); --nj-semantic-color-border-accent-lime-subtle-default: var(--nj-core-color-lime-300); --nj-semantic-color-border-accent-lime-subtle-hovered: var(--nj-core-color-lime-400); --nj-semantic-color-border-accent-lime-subtle-focused: var(--nj-core-color-lime-400); --nj-semantic-color-border-accent-lime-subtle-pressed: var(--nj-core-color-lime-500); --nj-semantic-color-border-accent-lime-subtle-selected: var(--nj-core-color-lime-500); --nj-semantic-color-border-accent-lime-moderate-default: var(--nj-core-color-lime-400); /* Suitable for lime borders when there is no meaning tied to the color. */ --nj-semantic-color-border-accent-lime-moderate-hovered: var(--nj-core-color-lime-500); --nj-semantic-color-border-accent-lime-moderate-focused: var(--nj-core-color-lime-500); --nj-semantic-color-border-accent-lime-moderate-pressed: var(--nj-core-color-lime-600); --nj-semantic-color-border-accent-lime-moderate-selected: var(--nj-core-color-lime-600); --nj-semantic-color-border-accent-lime-strong-default: var(--nj-core-color-lime-600); --nj-semantic-color-border-accent-lime-strong-hovered: var(--nj-core-color-lime-700); --nj-semantic-color-border-accent-lime-strong-focused: var(--nj-core-color-lime-700); --nj-semantic-color-border-accent-lime-strong-pressed: var(--nj-core-color-lime-800); --nj-semantic-color-border-accent-lime-strong-selected: var(--nj-core-color-lime-800); --nj-semantic-color-icon-accent-pink-primary-default: var(--nj-core-color-pink-600); --nj-semantic-color-icon-accent-pink-primary-hovered: var(--nj-core-color-pink-700); --nj-semantic-color-icon-accent-pink-primary-focused: var(--nj-core-color-pink-700); --nj-semantic-color-icon-accent-pink-primary-pressed: var(--nj-core-color-pink-800); --nj-semantic-color-icon-accent-pink-contrast-default: var(--nj-core-color-pink-800); --nj-semantic-color-icon-accent-red-primary-default: var(--nj-core-color-red-600); --nj-semantic-color-icon-accent-red-primary-hovered: var(--nj-core-color-red-700); --nj-semantic-color-icon-accent-red-primary-focused: var(--nj-core-color-red-700); --nj-semantic-color-icon-accent-red-primary-pressed: var(--nj-core-color-red-800); --nj-semantic-color-icon-accent-red-contrast-default: var(--nj-core-color-red-800); --nj-semantic-color-icon-accent-orange-primary-default: var(--nj-core-color-orange-600); --nj-semantic-color-icon-accent-orange-primary-hovered: var(--nj-core-color-orange-700); --nj-semantic-color-icon-accent-orange-primary-focused: var(--nj-core-color-orange-700); --nj-semantic-color-icon-accent-orange-primary-pressed: var(--nj-core-color-orange-800); --nj-semantic-color-icon-accent-orange-contrast-default: var(--nj-core-color-orange-800); --nj-semantic-color-icon-accent-yellow-primary-default: var(--nj-core-color-yellow-600); --nj-semantic-color-icon-accent-yellow-primary-hovered: var(--nj-core-color-yellow-700); --nj-semantic-color-icon-accent-yellow-primary-focused: var(--nj-core-color-yellow-700); --nj-semantic-color-icon-accent-yellow-primary-pressed: var(--nj-core-color-yellow-800); --nj-semantic-color-icon-accent-yellow-contrast-default: var(--nj-core-color-yellow-800); --nj-semantic-color-icon-accent-green-primary-default: var(--nj-core-color-green-600); --nj-semantic-color-icon-accent-green-primary-hovered: var(--nj-core-color-green-700); --nj-semantic-color-icon-accent-green-primary-focused: var(--nj-core-color-green-700); --nj-semantic-color-icon-accent-green-primary-pressed: var(--nj-core-color-green-800); --nj-semantic-color-icon-accent-green-contrast-default: var(--nj-core-color-green-800); --nj-semantic-color-icon-accent-grey-primary-default: var(--nj-core-color-grey-600); --nj-semantic-color-icon-accent-grey-primary-hovered: var(--nj-core-color-grey-700); --nj-semantic-color-icon-accent-grey-primary-focused: var(--nj-core-color-grey-700); --nj-semantic-color-icon-accent-grey-primary-pressed: var(--nj-core-color-grey-800); --nj-semantic-color-icon-accent-grey