wix-storybook-utils/src/Foundation/colors.st.css

Utilities for automated component documentation within Storybook

:vars {
  D10: #162D3D;
  D20: #32536A;
  D30: #577083;
  D40: #7A92A5;
  D50: #B6C1CD;
  D55: #CBD3DC;
  D56: #F7F9FB;
  D60: #DFE5EB;
  D70: #F0F4F7;
  D80: #FFFFFF;

  D10-30: rgba(22, 45, 61, 0.3);
  D10-006:rgba(22, 45, 61, 0.06);
  D10-012:rgba(22, 45, 61, 0.12);

  B00: #2B81CB;
  B05: #308DDD;
  B10: #3899EC;
  B20: #4EB7F5;
  B25: #A1D7FB;
  B27: #B3E0FB;
  B30: #C1E4FE;
  B40: #DAEFFE;
  B50: #EAF7FF;
  B60: #F4FAFE;

  F00: #AADBFC;

  P00: #8E21B1;
  P10: #AA4DC8;
  P20: #CD68ED;
  P30: #E5C9EE;
  P40: #EEDBF4;
  P50: #FAEEFF;
  P60: #FAF7FC;

  O00: #EA5F0E;
  O10: #FB7D33;
  O20: #FF9A48;

  R00: #D6453D;
  R05: #D8504C;
  R10: #EE5951;
  R20: #FF6666;
  R30: #FFD7D7;
  R40: #FFE1E1;
  R50: #FFEBEB;
  R60: #FFF5F5;

  G00: #44823F;
  G05: #61AD5A;
  G10: #60BC57;
  G20: #80C979;
  G30: #C9EEBC;
  G40: #DEF4D4;
  G50: #EDF9E5;
  G60: #F2FBEF;

  Y00: #C68801;
  Y05: #EDA200;
  Y10: #FDB10C;
  Y20: #FAC249;
  Y30: #FEF0BA;
  Y40: #FEF4CD;
  Y50: #FDF7DF;
  Y60: #FFFCF0;

  S10: rgba(22, 45, 61, .12);
  S20: rgba(22, 45, 61, .48);
  S30: rgba(22, 45, 61, .06);
  S40: rgba(22, 45, 61, .18);
  S50: rgba(255, 255, 255, .48);

  Shadow10: 0 2px 1px 0 S20, 0 0 3px 0 S10;
  Shadow20: 0 2px 4px 0 S10, 0 0 6px 0 S10;
  Shadow30: 0 6px 6px 0 S30, 0 0 18px 0 S10;
  Shadow40: 0 8px 8px 0 S10, 0 3px 24px 0 S40;
}