ibm-css-variables.css 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. :root
  2. {
  3. /*
  4. * C O L O R S
  5. * --------------------------------------------
  6. */
  7. /* Primary */
  8. --primary1: #0F62FE;
  9. --primary1-20: #d2dded;
  10. --primary1-50: #87b0fe;
  11. --primary1-a70: rgba(15, 98, 254, 0.7);
  12. --primary1-a80: rgba(15, 98, 254, 0.8);
  13. --primary2: #0353e9;
  14. --primary3: #002d9c;
  15. /* Secondary */
  16. --secondary1: #00BAA1;
  17. /* Communication */
  18. --support-01: #da1e28;
  19. --support-02: #24a148;
  20. --support-03: #f1c21b;
  21. /* Gray */
  22. --ui-01: #FFFFFF;
  23. --ui-02: #f4f4f4;
  24. --ui-03: #e0e0e0;
  25. --G2: #BEBEBE; /* Gray 20 */
  26. --text-03: #A8A8A8;
  27. --text-02: #393939;
  28. --ui-05: #161616;
  29. --B: #000000; /* Black */
  30. /* UI */
  31. --focus: #0f62fe;
  32. --text-01: #161616;
  33. --text-02: #393939;
  34. --text-03: #a8a8a8;
  35. --hover-ui: #E5E5E5;
  36. --ui-04: #8D8D8D;
  37. --active-ui: #c6c6c6;
  38. --active-secondary: #6f6f6f;
  39. --icon-01: #161616;
  40. --disabled-02: #c6c6c6;
  41. --disabled-03: #8d8d8d;
  42. /*
  43. * T Y P O G R A P H Y
  44. * --------------------------------------------
  45. */
  46. --F1: "IBM Plex Sans", "Helvetica Neue", Helvetica, Tahoma, Arial, "MS UI Gothic", Gulim, SimSun, PMingLiU, Raghu8, "Arial Unicode MS", "Andale WT", sans-serif;
  47. --CAPTION: 12px;
  48. --BODY-S: 14px;
  49. --BODY: 16px;
  50. --HEADING-XS: 16px;
  51. --HEADING-S: 24px;
  52. --HEADING-M: 32px;
  53. --HEADING-L: 48px;
  54. --HEADING-XL: 64px;
  55. /*
  56. * S P A C I N G
  57. * --------------------------------------------
  58. */
  59. --8XS: 8px;
  60. --16S: 16px;
  61. --24M: 24px;
  62. --32L: 32px;
  63. --48XL: 48px;
  64. --64XXL: 64px;
  65. --96XXXL: 96px;
  66. }