@aquera/nile/lib/styles/theme/nxt/_primitive.css

Nile web components for web products and experiences

/* _Primitives - Style */

:root {
  --ng-color-base-white: #FFFFFFFF;
  --ng-color-base-black: #000000FF;
  --ng-color-base-transparent: #FFFFFF00;
  --ng-color-graylightmode-25: #FDFDFDFF;
  --ng-color-graylightmode-50: #FAFAFAFF;
  --ng-color-graylightmode-100: #F5F5F5FF;
  --ng-color-graylightmode-200: #E9EAEBFF;
  --ng-color-graylightmode-300: #D5D7DAFF;
  --ng-color-graylightmode-400: #A4A7AEFF;
  --ng-color-graylightmode-500: #717680FF;
  --ng-color-graylightmode-600: #535862FF;
  --ng-color-graylightmode-700: #414651FF;
  --ng-color-graylightmode-800: #252B37FF;
  --ng-color-graylightmode-900: #181D27FF;
  --ng-color-graylightmode-950: #0A0D12FF;
  --ng-color-graydarkmode-25: #FAFAFAFF;
  --ng-color-graydarkmode-50: #F7F7F7FF;
  --ng-color-graydarkmode-100: #F0F0F1FF;
  --ng-color-graydarkmode-200: #ECECEDFF;
  --ng-color-graydarkmode-300: #CECFD2FF;
  --ng-color-graydarkmode-400: #94979CFF;
  --ng-color-graydarkmode-500: #85888EFF;
  --ng-color-graydarkmode-600: #61656CFF;
  --ng-color-graydarkmode-700: #373A41FF;
  --ng-color-graydarkmode-800: #22262FFF;
  --ng-color-graydarkmode-900: #13161BFF;
  --ng-color-graydarkmode-950: #0C0E12FF;
  --ng-color-graydarkmodealpha-25: #FFFFFFFA;
  --ng-color-graydarkmodealpha-50: #FFFFFFF5;
  --ng-color-graydarkmodealpha-100: #FFFFFFF0;
  --ng-color-graydarkmodealpha-200: #FFFFFFEB;
  --ng-color-graydarkmodealpha-300: #FFFFFFCC;
  --ng-color-graydarkmodealpha-400: #FFFFFF8F;
  --ng-color-graydarkmodealpha-500: #FFFFFF80;
  --ng-color-graydarkmodealpha-600: #FFFFFF59;
  --ng-color-graydarkmodealpha-700: #FFFFFF29;
  --ng-color-graydarkmodealpha-800: #FFFFFF14;
  --ng-color-graydarkmodealpha-900: #FFFFFF0A;
  --ng-color-graydarkmodealpha-950: #FFFFFF00;
  --ng-color-brand-25: #FCFAFFFF;
  --ng-color-brand-50: #F9F5FFFF;
  --ng-color-brand-100: #F4EBFFFF;
  --ng-color-brand-200: #E9D7FEFF;
  --ng-color-brand-300: #D6BBFBFF;
  --ng-color-brand-400: #B692F6FF;
  --ng-color-brand-500: #9E77EDFF;
  --ng-color-brand-600: #7F56D9FF;
  --ng-color-brand-700: #6941C6FF;
  --ng-color-brand-800: #53389EFF;
  --ng-color-brand-900: #42307DFF;
  --ng-color-brand-950: #2C1C5FFF;
  --ng-color-error-25: #FFFBFAFF;
  --ng-color-error-50: #FEF3F2FF;
  --ng-color-error-100: #FEE4E2FF;
  --ng-color-error-200: #FECDCAFF;
  --ng-color-error-300: #FDA29BFF;
  --ng-color-error-400: #F97066FF;
  --ng-color-error-500: #F04438FF;
  --ng-color-error-600: #D92D20FF;
  --ng-color-error-700: #B42318FF;
  --ng-color-error-800: #912018FF;
  --ng-color-error-900: #7A271AFF;
  --ng-color-error-950: #55160CFF;
  --ng-color-warning-25: #FFFCF5FF;
  --ng-color-warning-50: #FFFAEBFF;
  --ng-color-warning-100: #FEF0C7FF;
  --ng-color-warning-200: #FEDF89FF;
  --ng-color-warning-300: #FEC84BFF;
  --ng-color-warning-400: #FDB022FF;
  --ng-color-warning-500: #F79009FF;
  --ng-color-warning-600: #DC6803FF;
  --ng-color-warning-700: #B54708FF;
  --ng-color-warning-800: #93370DFF;
  --ng-color-warning-900: #7A2E0EFF;
  --ng-color-warning-950: #4E1D09FF;
  --ng-color-success-25: #F6FEF9FF;
  --ng-color-success-50: #ECFDF3FF;
  --ng-color-success-100: #DCFAE6FF;
  --ng-color-success-200: #ABEFC6FF;
  --ng-color-success-300: #75E0A7FF;
  --ng-color-success-400: #47CD89FF;
  --ng-color-success-500: #17B26AFF;
  --ng-color-success-600: #079455FF;
  --ng-color-success-700: #067647FF;
  --ng-color-success-800: #085D3AFF;
  --ng-color-success-900: #074D31FF;
  --ng-color-success-950: #053321FF;
  --ng-color-grayblue-25: #FCFCFDFF;
  --ng-color-grayblue-50: #F8F9FCFF;
  --ng-color-grayblue-100: #EAECF5FF;
  --ng-color-grayblue-200: #D5D9EBFF;
  --ng-color-grayblue-300: #B3B8DBFF;
  --ng-color-grayblue-400: #717BBCFF;
  --ng-color-grayblue-500: #4E5BA6FF;
  --ng-color-grayblue-600: #3E4784FF;
  --ng-color-grayblue-700: #363F72FF;
  --ng-color-grayblue-800: #293056FF;
  --ng-color-grayblue-900: #101323FF;
  --ng-color-grayblue-950: #0D0F1CFF;
  --ng-color-graycool-25: #FCFCFDFF;
  --ng-color-graycool-50: #F9F9FBFF;
  --ng-color-graycool-100: #EFF1F5FF;
  --ng-color-graycool-200: #DCDFEAFF;
  --ng-color-graycool-300: #B9C0D4FF;
  --ng-color-graycool-400: #7D89B0FF;
  --ng-color-graycool-500: #5D6B98FF;
  --ng-color-graycool-600: #4A5578FF;
  --ng-color-graycool-700: #404968FF;
  --ng-color-graycool-800: #30374FFF;
  --ng-color-graycool-900: #111322FF;
  --ng-color-graycool-950: #0E101BFF;
  --ng-color-graymodern-25: #FCFCFDFF;
  --ng-color-graymodern-50: #F8FAFCFF;
  --ng-color-graymodern-100: #EEF2F6FF;
  --ng-color-graymodern-200: #E3E8EFFF;
  --ng-color-graymodern-300: #CDD5DFFF;
  --ng-color-graymodern-400: #9AA4B2FF;
  --ng-color-graymodern-500: #697586FF;
  --ng-color-graymodern-600: #4B5565FF;
  --ng-color-graymodern-700: #364152FF;
  --ng-color-graymodern-800: #202939FF;
  --ng-color-graymodern-900: #121926FF;
  --ng-color-graymodern-950: #0D121CFF;
  --ng-color-grayneutral-25: #FCFCFDFF;
  --ng-color-grayneutral-50: #F9FAFBFF;
  --ng-color-grayneutral-100: #F3F4F6FF;
  --ng-color-grayneutral-200: #E5E7EBFF;
  --ng-color-grayneutral-300: #D2D6DBFF;
  --ng-color-grayneutral-400: #9DA4AEFF;
  --ng-color-grayneutral-500: #6C737FFF;
  --ng-color-grayneutral-600: #4D5761FF;
  --ng-color-grayneutral-700: #384250FF;
  --ng-color-grayneutral-800: #1F2A37FF;
  --ng-color-grayneutral-900: #111927FF;
  --ng-color-grayneutral-950: #0D121CFF;
  --ng-color-grayiron-25: #FCFCFCFF;
  --ng-color-grayiron-50: #FAFAFAFF;
  --ng-color-grayiron-100: #F4F4F5FF;
  --ng-color-grayiron-200: #E4E4E7FF;
  --ng-color-grayiron-300: #D1D1D6FF;
  --ng-color-grayiron-400: #A0A0ABFF;
  --ng-color-grayiron-500: #70707BFF;
  --ng-color-grayiron-600: #51525CFF;
  --ng-color-grayiron-700: #3F3F46FF;
  --ng-color-grayiron-800: #26272BFF;
  --ng-color-grayiron-900: #1A1A1EFF;
  --ng-color-grayiron-950: #131316FF;
  --ng-color-graytrue-25: #FCFCFCFF;
  --ng-color-graytrue-50: #F7F7F7FF;
  --ng-color-graytrue-100: #F5F5F5FF;
  --ng-color-graytrue-200: #E5E5E5FF;
  --ng-color-graytrue-300: #D6D6D6FF;
  --ng-color-graytrue-400: #A3A3A3FF;
  --ng-color-graytrue-500: #737373FF;
  --ng-color-graytrue-600: #525252FF;
  --ng-color-graytrue-700: #424242FF;
  --ng-color-graytrue-800: #292929FF;
  --ng-color-graytrue-900: #141414FF;
  --ng-color-graytrue-950: #0F0F0FFF;
  --ng-color-graywarm-25: #FDFDFCFF;
  --ng-color-graywarm-50: #FAFAF9FF;
  --ng-color-graywarm-100: #F5F5F4FF;
  --ng-color-graywarm-200: #E7E5E4FF;
  --ng-color-graywarm-300: #D7D3D0FF;
  --ng-color-graywarm-400: #A9A29DFF;
  --ng-color-graywarm-500: #79716BFF;
  --ng-color-graywarm-600: #57534EFF;
  --ng-color-graywarm-700: #44403CFF;
  --ng-color-graywarm-800: #292524FF;
  --ng-color-graywarm-900: #1C1917FF;
  --ng-color-graywarm-950: #171412FF;
  --ng-color-moss-25: #FAFDF7FF;
  --ng-color-moss-50: #F5FBEEFF;
  --ng-color-moss-100: #E6F4D7FF;
  --ng-color-moss-200: #CEEAB0FF;
  --ng-color-moss-300: #ACDC79FF;
  --ng-color-moss-400: #86CB3CFF;
  --ng-color-moss-500: #669F2AFF;
  --ng-color-moss-600: #4F7A21FF;
  --ng-color-moss-700: #3F621AFF;
  --ng-color-moss-800: #335015FF;
  --ng-color-moss-900: #2B4212FF;
  --ng-color-moss-950: #1A280BFF;
  --ng-color-greenlight-25: #FAFEF5FF;
  --ng-color-greenlight-50: #F3FEE7FF;
  --ng-color-greenlight-100: #E3FBCCFF;
  --ng-color-greenlight-200: #D0F8ABFF;
  --ng-color-greenlight-300: #A6EF67FF;
  --ng-color-greenlight-400: #85E13AFF;
  --ng-color-greenlight-500: #66C61CFF;
  --ng-color-greenlight-600: #4CA30DFF;
  --ng-color-greenlight-700: #3B7C0FFF;
  --ng-color-greenlight-800: #326212FF;
  --ng-color-greenlight-900: #2B5314FF;
  --ng-color-greenlight-950: #15290AFF;
  --ng-color-green-25: #F6FEF9FF;
  --ng-color-green-50: #EDFCF2FF;
  --ng-color-green-100: #D3F8DFFF;
  --ng-color-green-200: #AAF0C4FF;
  --ng-color-green-300: #73E2A3FF;
  --ng-color-green-400: #3CCB7FFF;
  --ng-color-green-500: #16B364FF;
  --ng-color-green-600: #099250FF;
  --ng-color-green-700: #087443FF;
  --ng-color-green-800: #095C37FF;
  --ng-color-green-900: #084C2EFF;
  --ng-color-green-950: #052E1CFF;
  --ng-color-teal-25: #F6FEFCFF;
  --ng-color-teal-50: #F0FDF9FF;
  --ng-color-teal-100: #CCFBEFFF;
  --ng-color-teal-200: #99F6E0FF;
  --ng-color-teal-300: #5FE9D0FF;
  --ng-color-teal-400: #2ED3B7FF;
  --ng-color-teal-500: #15B79EFF;
  --ng-color-teal-600: #0E9384FF;
  --ng-color-teal-700: #107569FF;
  --ng-color-teal-800: #125D56FF;
  --ng-color-teal-900: #134E48FF;
  --ng-color-teal-950: #0A2926FF;
  --ng-color-cyan-25: #F5FEFFFF;
  --ng-color-cyan-50: #ECFDFFFF;
  --ng-color-cyan-100: #CFF9FEFF;
  --ng-color-cyan-200: #A5F0FCFF;
  --ng-color-cyan-300: #67E3F9FF;
  --ng-color-cyan-400: #22CCEEFF;
  --ng-color-cyan-500: #06AED4FF;
  --ng-color-cyan-600: #088AB2FF;
  --ng-color-cyan-700: #0E7090FF;
  --ng-color-cyan-800: #155B75FF;
  --ng-color-cyan-900: #164C63FF;
  --ng-color-cyan-950: #0D2D3AFF;
  --ng-color-bluelight-25: #F5FBFFFF;
  --ng-color-bluelight-50: #F0F9FFFF;
  --ng-color-bluelight-100: #E0F2FEFF;
  --ng-color-bluelight-200: #B9E6FEFF;
  --ng-color-bluelight-300: #7CD4FDFF;
  --ng-color-bluelight-400: #36BFFAFF;
  --ng-color-bluelight-500: #0BA5ECFF;
  --ng-color-bluelight-600: #0086C9FF;
  --ng-color-bluelight-700: #026AA2FF;
  --ng-color-bluelight-800: #065986FF;
  --ng-color-bluelight-900: #0B4A6FFF;
  --ng-color-bluelight-950: #062C41FF;
  --ng-color-blue-25: #F5FAFFFF;
  --ng-color-blue-50: #EFF8FFFF;
  --ng-color-blue-100: #D1E9FFFF;
  --ng-color-blue-200: #B2DDFFFF;
  --ng-color-blue-300: #84CAFFFF;
  --ng-color-blue-400: #53B1FDFF;
  --ng-color-blue-500: #2E90FAFF;
  --ng-color-blue-600: #1570EFFF;
  --ng-color-blue-700: #175CD3FF;
  --ng-color-blue-800: #1849A9FF;
  --ng-color-blue-900: #194185FF;
  --ng-color-blue-950: #102A56FF;
  --ng-color-bluedark-25: #F5F8FFFF;
  --ng-color-bluedark-50: #EFF4FFFF;
  --ng-color-bluedark-100: #D1E0FFFF;
  --ng-color-bluedark-200: #B2CCFFFF;
  --ng-color-bluedark-300: #84ADFFFF;
  --ng-color-bluedark-400: #528BFFFF;
  --ng-color-bluedark-500: #2970FFFF;
  --ng-color-bluedark-600: #155EEFFF;
  --ng-color-bluedark-700: #004EEBFF;
  --ng-color-bluedark-800: #0040C1FF;
  --ng-color-bluedark-900: #00359EFF;
  --ng-color-bluedark-950: #002266FF;
  --ng-color-indigo-25: #F5F8FFFF;
  --ng-color-indigo-50: #EEF4FFFF;
  --ng-color-indigo-100: #E0EAFFFF;
  --ng-color-indigo-200: #C7D7FEFF;
  --ng-color-indigo-300: #A4BCFDFF;
  --ng-color-indigo-400: #8098F9FF;
  --ng-color-indigo-500: #6172F3FF;
  --ng-color-indigo-600: #444CE7FF;
  --ng-color-indigo-700: #3538CDFF;
  --ng-color-indigo-800: #2D31A6FF;
  --ng-color-indigo-900: #2D3282FF;
  --ng-color-indigo-950: #1F235BFF;
  --ng-color-violet-25: #FBFAFFFF;
  --ng-color-violet-50: #F5F3FFFF;
  --ng-color-violet-100: #ECE9FEFF;
  --ng-color-violet-200: #DDD6FEFF;
  --ng-color-violet-300: #C3B5FDFF;
  --ng-color-violet-400: #A48AFBFF;
  --ng-color-violet-500: #875BF7FF;
  --ng-color-violet-600: #7839EEFF;
  --ng-color-violet-700: #6927DAFF;
  --ng-color-violet-800: #5720B7FF;
  --ng-color-violet-900: #491C96FF;
  --ng-color-violet-950: #2E125EFF;
  --ng-color-purple-25: #FAFAFFFF;
  --ng-color-purple-50: #F4F3FFFF;
  --ng-color-purple-100: #EBE9FEFF;
  --ng-color-purple-200: #D9D6FEFF;
  --ng-color-purple-300: #BDB4FEFF;
  --ng-color-purple-400: #9B8AFBFF;
  --ng-color-purple-500: #7A5AF8FF;
  --ng-color-purple-600: #6938EFFF;
  --ng-color-purple-700: #5925DCFF;
  --ng-color-purple-800: #4A1FB8FF;
  --ng-color-purple-900: #3E1C96FF;
  --ng-color-purple-950: #27115FFF;
  --ng-color-fuchsia-25: #FEFAFFFF;
  --ng-color-fuchsia-50: #FDF4FFFF;
  --ng-color-fuchsia-100: #FBE8FFFF;
  --ng-color-fuchsia-200: #F6D0FEFF;
  --ng-color-fuchsia-300: #EEAAFDFF;
  --ng-color-fuchsia-400: #E478FAFF;
  --ng-color-fuchsia-500: #D444F1FF;
  --ng-color-fuchsia-600: #BA24D5FF;
  --ng-color-fuchsia-700: #9F1AB1FF;
  --ng-color-fuchsia-800: #821890FF;
  --ng-color-fuchsia-900: #6F1877FF;
  --ng-color-fuchsia-950: #47104CFF;
  --ng-color-pink-25: #FEF6FBFF;
  --ng-color-pink-50: #FDF2FAFF;
  --ng-color-pink-100: #FCE7F6FF;
  --ng-color-pink-200: #FCCEEEFF;
  --ng-color-pink-300: #FAA7E0FF;
  --ng-color-pink-400: #F670C7FF;
  --ng-color-pink-500: #EE46BCFF;
  --ng-color-pink-600: #DD2590FF;
  --ng-color-pink-700: #C11574FF;
  --ng-color-pink-800: #9E165FFF;
  --ng-color-pink-900: #851651FF;
  --ng-color-pink-950: #4E0D30FF;
  --ng-color-rose-25: #FFF5F6FF;
  --ng-color-rose-50: #FFF1F3FF;
  --ng-color-rose-100: #FFE4E8FF;
  --ng-color-rose-200: #FECDD6FF;
  --ng-color-rose-300: #FEA3B4FF;
  --ng-color-rose-400: #FD6F8EFF;
  --ng-color-rose-500: #F63D68FF;
  --ng-color-rose-600: #E31B54FF;
  --ng-color-rose-700: #C01048FF;
  --ng-color-rose-800: #A11043FF;
  --ng-color-rose-900: #89123EFF;
  --ng-color-rose-950: #510B24FF;
  --ng-color-orangedark-25: #FFF9F5FF;
  --ng-color-orangedark-50: #FFF4EDFF;
  --ng-color-orangedark-100: #FFE6D5FF;
  --ng-color-orangedark-200: #FFD6AEFF;
  --ng-color-orangedark-300: #FF9C66FF;
  --ng-color-orangedark-400: #FF692EFF;
  --ng-color-orangedark-500: #FF4405FF;
  --ng-color-orangedark-600: #E62E05FF;
  --ng-color-orangedark-700: #BC1B06FF;
  --ng-color-orangedark-800: #97180CFF;
  --ng-color-orangedark-900: #771A0DFF;
  --ng-color-orangedark-950: #57130AFF;
  --ng-color-orange-25: #FEFAF5FF;
  --ng-color-orange-50: #FEF6EEFF;
  --ng-color-orange-100: #FDEAD7FF;
  --ng-color-orange-200: #F9DBAFFF;
  --ng-color-orange-300: #F7B27AFF;
  --ng-color-orange-400: #F38744FF;
  --ng-color-orange-500: #EF6820FF;
  --ng-color-orange-600: #E04F16FF;
  --ng-color-orange-700: #B93815FF;
  --ng-color-orange-800: #932F19FF;
  --ng-color-orange-900: #772917FF;
  --ng-color-orange-950: #511C10FF;
  --ng-color-yellow-25: #FEFDF0FF;
  --ng-color-yellow-50: #FEFBE8FF;
  --ng-color-yellow-100: #FEF7C3FF;
  --ng-color-yellow-200: #FEEE95FF;
  --ng-color-yellow-300: #FDE272FF;
  --ng-color-yellow-400: #FAC515FF;
  --ng-color-yellow-500: #EAAA08FF;
  --ng-color-yellow-600: #CA8504FF;
  --ng-color-yellow-700: #A15C07FF;
  --ng-color-yellow-800: #854A0EFF;
  --ng-color-yellow-900: #713B12FF;
  --ng-color-yellow-950: #542C0DFF;
  --ng-spacing-0: 0px;
  --ng-spacing-0-5: 2px;
  --ng-spacing-1: 4px;
  --ng-spacing-1-5: 6px;
  --ng-spacing-2: 8px;
  --ng-spacing-3: 12px;
  --ng-spacing-4: 16px;
  --ng-spacing-5: 20px;
  --ng-spacing-6: 24px;
  --ng-spacing-7: 28px;
  --ng-spacing-8: 32px;
  --ng-spacing-10: 40px;
  --ng-spacing-12: 48px;
  --ng-spacing-16: 64px;
  --ng-spacing-20: 80px;
  --ng-spacing-24: 96px;
  --ng-spacing-32: 128px;
  --ng-spacing-40: 160px;
  --ng-spacing-48: 192px;
  --ng-spacing-56: 224px;
  --ng-spacing-64: 256px;
  --ng-spacing-80: 320px;
  --ng-spacing-96: 384px;
  --ng-spacing-120: 480px;
  --ng-spacing-140: 560px;
  --ng-spacing-160: 640px;
  --ng-spacing-180: 720px;
  --ng-spacing-192: 768px;
  --ng-spacing-256: 1024px;
  --ng-spacing-320: 1280px;
  --ng-spacing-360: 1440px;
  --ng-spacing-400: 1600px;
  --ng-spacing-480: 1920px;
  --ng-spacing-2-5: 10px;
  --ng-spacing-3-5: 14px;
  --ng-spacing-4-5: 18px;
  --ng-spacing-312: 312px;
  --ng-spacing-164: 164px;
  --ng-spacing-108: 108px;
  --ng-spacing-296: 296px;
  --ng-spacing-68: 68px;
  --ng-spacing-264: 264px;
  --ng-spacing-40px: 40px;

  /* Typography tokens */
  
  --ng-font-weight-100: 100;
  --ng-font-weight-200: 200;
  --ng-font-weight-300: 300;
  --ng-font-weight-400: 400;
  --ng-font-weight-500: 500;
  --ng-font-weight-600: 600;
  --ng-font-weight-700: 700;
  --ng-font-weight-800: 800;
  --ng-font-weight-900: 900;
}