wix-style-react/dist/src/Foundation/stylable/colors.st.css

wix-style-react

@st-import calc_rgba from "./mixins/calc_rgba";
@property st-global(--wsr-color-D10); 
@property st-global(--wsr-color-D20); 
@property st-global(--wsr-color-D30);
@property st-global(--wsr-color-D40);
@property st-global(--wsr-color-D50);
@property st-global(--wsr-color-D55);
@property st-global(--wsr-color-D60);
@property st-global(--wsr-color-D70);
@property st-global(--wsr-color-D75);
@property st-global(--wsr-color-D80);
@property st-global(--wsr-color-B00);
@property st-global(--wsr-color-B05);
@property st-global(--wsr-color-B10);
@property st-global(--wsr-color-B20);
@property st-global(--wsr-color-B30);
@property st-global(--wsr-color-B40);
@property st-global(--wsr-color-B50);
@property st-global(--wsr-color-B60);
@property st-global(--wsr-color-R00);
@property st-global(--wsr-color-R05);
@property st-global(--wsr-color-R10);
@property st-global(--wsr-color-R20);
@property st-global(--wsr-color-R30);
@property st-global(--wsr-color-R40);
@property st-global(--wsr-color-R50);
@property st-global(--wsr-color-R60);
@property st-global(--wsr-color-P00);
@property st-global(--wsr-color-P05);
@property st-global(--wsr-color-P10);
@property st-global(--wsr-color-P20);
@property st-global(--wsr-color-P30);
@property st-global(--wsr-color-P40);
@property st-global(--wsr-color-P50);
@property st-global(--wsr-color-P60);
@property st-global(--wsr-color-G00);
@property st-global(--wsr-color-G05);
@property st-global(--wsr-color-G10);
@property st-global(--wsr-color-G20);
@property st-global(--wsr-color-G30);
@property st-global(--wsr-color-G40);
@property st-global(--wsr-color-G50);
@property st-global(--wsr-color-G60);
@property st-global(--wsr-color-Y00);
@property st-global(--wsr-color-Y05);
@property st-global(--wsr-color-Y10);
@property st-global(--wsr-color-Y20);
@property st-global(--wsr-color-Y30);
@property st-global(--wsr-color-Y40);
@property st-global(--wsr-color-Y50);
@property st-global(--wsr-color-Y60);
@property st-global(--wsr-color-O00);
@property st-global(--wsr-color-O05);
@property st-global(--wsr-color-O10);
@property st-global(--wsr-color-O20);
@property st-global(--wsr-color-O30);
@property st-global(--wsr-color-O40);
@property st-global(--wsr-color-O50);
@property st-global(--wsr-color-O60);
@property st-global(--wsr-color-F00);
@property st-global(--wsr-color-A1);
@property st-global(--wsr-color-A2);
@property st-global(--wsr-color-A3);
@property st-global(--wsr-color-A4);
@property st-global(--wsr-color-A5);
@property st-global(--wsr-color-A6);
@property st-global(--wsr-color-B1);
@property st-global(--wsr-color-B2);
@property st-global(--wsr-color-B3);
@property st-global(--wsr-color-B4);
@property st-global(--wsr-color-C1);
@property st-global(--wsr-color-C2);
@property st-global(--wsr-color-C3);
@property st-global(--wsr-color-C4);
@property st-global(--wsr-color-D10-03);
@property st-global(--wsr-color-D10-05);
@property st-global(--wsr-color-D10-06);
@property st-global(--wsr-color-D10-10);
@property st-global(--wsr-color-D10-12);
@property st-global(--wsr-color-D10-18);
@property st-global(--wsr-color-D10-20);
@property st-global(--wsr-color-D10-24);
@property st-global(--wsr-color-D10-30);
@property st-global(--wsr-color-D10-36);
@property st-global(--wsr-color-D10-42);
@property st-global(--wsr-color-D10-66);
@property st-global(--wsr-color-D10-90);
@property st-global(--wsr-color-D10-96);
@property st-global(--wsr-color-D20-48);
@property st-global(--wsr-color-D20-54);
@property st-global(--wsr-color-D20-60);
@property st-global(--wsr-color-D20-72);
@property st-global(--wsr-color-D40-20);
@property st-global(--wsr-color-D80-10);
@property st-global(--wsr-color-D80-20);
@property st-global(--wsr-color-D80-30);
@property st-global(--wsr-color-D80-48);
@property st-global(--wsr-color-D80-60);
@property st-global(--wsr-color-D80-70);
@property st-global(--wsr-color-B00-24);
@property st-global(--wsr-color-B00-42);
@property st-global(--wsr-color-B00-48);
@property st-global(--wsr-color-D10-00);
@property st-global(--wsr-color-D10-54);
@property st-global(--wsr-color-D80-00);
@property st-global(--wsr-color-D80-42);
@property st-global(--wsr-color-D80-50);
@property st-global(--wsr-color-D80-66);
@property st-global(--wsr-color-D80-96);
@property st-global(--wsr-color-D80-97);
@property st-global(--wsr-color-B00-60);
@property st-global(--wsr-color-B10-18);

:vars {
  /* General */
  D10: var(--wsr-color-D10, #162D3D); /* Primary Text */
  D20: var(--wsr-color-D20, #32536A); /* Secondary Text */
  D30: var(--wsr-color-D30, #577083);
  D40: var(--wsr-color-D40, #7A92A5); /* Placeholder Text */
  D50: var(--wsr-color-D50, #B6C1CD); /* Disabled - Icon */
  D55: var(--wsr-color-D55, #CBD3DC); /* Disabled - Text, Action Background */
  D60: var(--wsr-color-D60, #DFE5EB); /* Dividers, Disabled - Borders */
  D70: var(--wsr-color-D70, #F0F4F7); /* Page Background, Disabled - Background */
  D75: var(--wsr-color-D75, #F7F8F8); /* Table row, Subheader, Neutral skin - Background */
  D80: var(--wsr-color-D80, #FFFFFF); /* Content box background */

  /* Primary */
  B00: var(--wsr-color-B00, #2B81CB); /* Loader, Progress Bar */
  B05: var(--wsr-color-B05, #308DDD);
  B10: var(--wsr-color-B10, #3899EC); /* Button, TextButton */
  B20: var(--wsr-color-B20, #4EB7F5); /* Hover for elements with B10, buttons, Notifications */
  B30: var(--wsr-color-B30, #C1E4FE); /* Tag(Hover), Floating Notification Border */
  B40: var(--wsr-color-B40, #DAEFFE); /* Tag(Default), Badge */
  B50: var(--wsr-color-B50, #EAF7FF); /* Floating Notification */
  B60: var(--wsr-color-B60, #F4FAFE);

  /* Destructive */
  R00: var(--wsr-color-R00, #D6453D);
  R05: var(--wsr-color-R05, #D8504C);
  R10: var(--wsr-color-R10, #EE5951); /* Button, TextButton */
  R20: var(--wsr-color-R20, #FF6666); /* Button(hover), Notification Bar */
  R30: var(--wsr-color-R30, #FFD7D7); /* Tag(hover), Floating Notification Border */
  R40: var(--wsr-color-R40, #FFE1E1); /* Tag(Default), Badge */
  R50: var(--wsr-color-R50, #FFEBEB); /* Floating Notification */
  R60: var(--wsr-color-R60, #FFF5F5);

  /* Premium */
  P00: var(--wsr-color-P00, #8E21B1);
  P05: var(--wsr-color-P05, #8E1DD1);
  P10: var(--wsr-color-P10, #AA4DC8); /* Button, TextButton (default, click) */
  P20: var(--wsr-color-P20, #CD68ED); /* Button (hover), Notification Bar */
  P30: var(--wsr-color-P30, #E5C9EE); /* Notification Border */
  P40: var(--wsr-color-P40, #EEDBF4); /* Badge */
  P50: var(--wsr-color-P50, #FAEEFF); /* Floating Notification */
  P60: var(--wsr-color-P60, #FAF7FC);

  /* Success */
  G00: var(--wsr-color-G00, #44823F);
  G05: var(--wsr-color-G05, #61AD5A);
  G10: var(--wsr-color-G10, #60BC57); /* Badge */
  G20: var(--wsr-color-G20, #80C979); /* Notification Bar, Action Background */
  G30: var(--wsr-color-G30, #C9EEBC); /* Notification Border */
  G40: var(--wsr-color-G40, #DEF4D4); /* Badge */
  G50: var(--wsr-color-G50, #EDF9E5); /* Floating Notification */
  G60: var(--wsr-color-G60, #F2FBEF);

  /* Warning */
  Y00: var(--wsr-color-Y00, #C68801);
  Y05: var(--wsr-color-Y05, #EDA200);
  Y10: var(--wsr-color-Y10, #FDB10C); /* Notification Bar, Badge */
  Y20: var(--wsr-color-Y20, #FAC249);
  Y30: var(--wsr-color-Y30, #FFD988); /* Tag(hover), Floating Notification Border */
  Y40: var(--wsr-color-Y40, #FEF4CD); /* Tag(default), Badge */
  Y50: var(--wsr-color-Y50, #FDF7DF); /* Floating Notification */
  Y60: var(--wsr-color-Y60, #FFFCF0);

  /* Urgent */
  O00: var(--wsr-color-O00, #EA5F0E);
  O05: var(--wsr-color-O05, #F05300);
  O10: var(--wsr-color-O10, #FB7D33);
  O20: var(--wsr-color-O20, #FF9A48);
  O30: var(--wsr-color-O30, #FCBD9C);
  O40: var(--wsr-color-O40, #FDDBC8);
  O50: var(--wsr-color-O50, #FEE5D7);
  O60: var(--wsr-color-O60, #FEEFE6);

  /* Focus */
  F00: var(--wsr-color-F00, #AADBFC);

  /* Categories */
  A1: var(--wsr-color-A1, #3370FB);
  A2: var(--wsr-color-A2, #7852D2);
  A3: var(--wsr-color-A3, #17B0E2);
  A4: var(--wsr-color-A4, #C53E99);
  A5: var(--wsr-color-A5, #FDB10C);
  A6: var(--wsr-color-A6, #3D9FA1);
  B1: var(--wsr-color-B1, #EF73C0);
  B2: var(--wsr-color-B2, #FF8D41);
  B3: var(--wsr-color-B3, #ED6779);
  B4: var(--wsr-color-B4, #125b8f);
  C1: var(--wsr-color-C1, #4abd81);
  C2: var(--wsr-color-C2, #2682CD);
  C3: var(--wsr-color-C3, #68A4D5);
  C4: var(--wsr-color-C4, #FF8E8C);

  /* With Opacity */
  D10-03: var(--wsr-color-D10-03, rgba(22, 45, 61, 0.03));
  D10-05: var(--wsr-color-D10-05, rgba(22, 45, 61, 0.05));
  D10-06: var(--wsr-color-D10-06, rgba(22, 45, 61, 0.06));
  D10-10: var(--wsr-color-D10-10, rgba(22, 45, 61, 0.10));
  D10-12: var(--wsr-color-D10-12, rgba(22, 45, 61, 0.12));
  D10-18: var(--wsr-color-D10-18, rgba(22, 45, 61, 0.18));
  D10-20: var(--wsr-color-D10-20, rgba(22, 45, 61, 0.20));
  D10-24: var(--wsr-color-D10-24, rgba(22, 45, 61, 0.24));
  D10-30: var(--wsr-color-D10-30, rgba(22, 45, 61, 0.30));
  D10-36: var(--wsr-color-D10-36, rgba(22, 45, 61, 0.36));
  D10-42: var(--wsr-color-D10-42, rgba(22, 45, 61, 0.42));
  D10-66: var(--wsr-color-D10-66, rgba(22, 45, 61, 0.66));
  D10-90: var(--wsr-color-D10-90, rgba(22, 45, 61, 0.90));
  D10-96: var(--wsr-color-D10-96, rgba(22, 45, 61, 0.96));

  D20-48: var(--wsr-color-D20-48, rgba(50, 83, 106, 0.48)); /* new transparent color */
  D20-54: var(--wsr-color-D20-54, rgba(50, 83, 106, 0.54)); /* hovered */
  D20-60: var(--wsr-color-D20-60, rgba(50, 83, 106, 0.60)); /* clicked */
  D20-72: var(--wsr-color-D20-72, rgba(50, 83, 106, 0.72));

  D40-20: var(--wsr-color-D40-20, rgba(122, 146, 165, 0.20));

  D80-10: var(--wsr-color-D80-10, rgba(255, 255, 255, 0.10));
  D80-20: var(--wsr-color-D80-20, rgba(255, 255, 255, 0.20));
  D80-30: var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30));
  D80-48: var(--wsr-color-D80-48, rgba(255, 255, 255, 0.48));
  D80-60: var(--wsr-color-D80-60, rgba(255, 255, 255, 0.60));
  D80-70: var(--wsr-color-D80-70, rgba(255, 255, 255, 0.70));

  B00-24: var(--wsr-color-B00-24, rgba(43, 129, 203, 0.24));
  B00-42: var(--wsr-color-B00-42, rgba(43, 129, 203, 0.42));
  B00-48: var(--wsr-color-B00-48, rgba(43, 129, 203, 0.48));

  D10-00: var(--wsr-color-D10-00, rgba(22, 45, 61, 0.00));
  D10-54: var(--wsr-color-D10-54, rgba(22, 45, 61, 0.54));
  D80-00: var(--wsr-color-D80-00, rgba(255, 255, 255, 0));
  D80-42: var(--wsr-color-D80-42, rgba(255, 255, 255, 0.42));
  D80-50: var(--wsr-color-D80-50, rgba(255, 255, 255, 0.50));
  D80-66: var(--wsr-color-D80-66, rgba(255, 255, 255, 0.66));
  D80-96: var(--wsr-color-D80-96, rgba(255, 255, 255, 0.96));
  D80-97: var(--wsr-color-D80-97, rgba(255, 255, 255, 0.97));
  B00-60: var(--wsr-color-B00-60, rgba(43, 129, 203, 0.60));
  B10-18: var(--wsr-color-B10-18, rgba(56, 153, 236, 0.18));

  /* Theme */
  THEME-COLOR-00: value(B00);
  THEME-COLOR-05: value(B05);
  THEME-COLOR-10: value(B10);
  THEME-COLOR-20: value(B20);
  THEME-COLOR-30: value(B30);
  THEME-COLOR-40: value(B40);
  THEME-COLOR-50:  value(B50);
  THEME-COLOR-60:  value(B60);
  THEME-TEXT-COLOR-PRIMARY: value(D10);
  THEME-TEXT-COLOR-PRIMARY-LIGHT: value(D80);
  THEME-TEXT-COLOR-SECONDARY: value(D20);
  THEME-TEXT-COLOR-SECONDARY-LIGHT: value(D40);
  THEME-DIVIDER-COLOR: value(D60);

  /* Gradients */
  Gradient-AI01: linear-gradient(60deg, #0021FF -31%, #116DFF 65%, #5FF2AE 96%);
  Gradient-AI02: linear-gradient(60deg, #0021FF -177%, #116DFF 32%, #5FF2AE 96%);
}

/* st-namespace-reference="../../../../src/Foundation/stylable/colors.st.css" */