wix-style-react
Version:
137 lines (120 loc) • 4.18 kB
CSS
/*
* Colors with opacity (only those stored as stylable vars) are managed in wix-ui-core only.
* We added there functionality of calc_rgba calculation, and colors with opacity are calculated there.
* We want to gradually remove colors duplications between projects
*/
:import {
-st-from: "./mixins/calc_rgba";
-st-default: calc_rgba;
}
:vars {
/* General */
D10: #162D3D; /* Primary Text */
D20: #32536A; /* Secondary Text */
D30: #577083;
D40: #7A92A5; /* Placeholder Text */
D50: #B6C1CD; /* Disabled - Icon */
D55: #CBD3DC; /* Disabled - Text, Action Background */
D60: #DFE5EB; /* Dividers, Disabled - Borders */
D70: #F0F4F7; /* Page Background, Disabled - Background */
D80: #FFFFFF; /* Content box background */
/* Primary */
B00: #2B81CB; /* Loader, Progress Bar */
B05: #308DDD;
B10: #3899EC; /* Button, TextButton */
B20: #4EB7F5; /* Hover for elements with B10, buttons, Notifications */
B30: #C1E4FE; /* Tag(Hover), Floating Notification Border */
B40: #DAEFFE; /* Tag(Default), Badge */
B50: #EAF7FF; /* Floating Notification */
B60: #F4FAFE;
/* Destructive */
R00: #D6453D;
R05: #D8504C;
R10: #EE5951; /* Button, TextButton */
R20: #FF6666; /* Button(hover), Notification Bar */
R30: #FFD7D7; /* Tag(hover), Floating Notification Border */
R40: #FFE1E1; /* Tag(Default), Badge */
R50: #FFEBEB; /* Floating Notification */
R60: #FFF5F5;
/* Premium */
P00: #8E21B1;
P10: #AA4DC8; /* Button, TextButton (default, click) */
P20: #CD68ED; /* Button (hover), Notification Bar */
P30: #E5C9EE; /* Notification Border */
P40: #EEDBF4; /* Badge */
P50: #FAEEFF; /* Floating Notification */
P60: #FAF7FC;
/* Success */
G00: #44823F;
G05: #61AD5A;
G10: #60BC57; /* Badge */
G20: #80C979; /* Notification Bar, Action Background */
G30: #C9EEBC; /* Notification Border */
G40: #DEF4D4; /* Badge */
G50: #EDF9E5; /* Floating Notification */
G60: #F2FBEF;
/* Warning */
Y00: #C68801;
Y05: #EDA200;
Y10: #FDB10C; /* Notification Bar, Badge */
Y20: #FAC249;
Y30: #FFD988; /* Tag(hover), Floating Notification Border */
Y40: #FEF4CD; /* Tag(default), Badge */
Y50: #FDF7DF; /* Floating Notification */
Y60: #FFFCF0;
/* Urgent */
O00: #EA5F0E;
O10: #FB7D33;
O20: #FF9A48;
/* Focus */
F00: #AADBFC;
/* Categories */
A1: #3370FB;
A2: #7852D2;
A3: #17B0E2;
A4: #C53E99;
A5: #FDB10C;
A6: #3D9FA1;
B1: #EF73C0;
B2: #FF8D41;
B3: #ED6779;
B4: #125b8f;
C1: #4abd81;
C2: #2682CD;
C3: #68A4D5;
C4: #FF8E8C;
/* With Opacity */
D10-03: calc_rgba(value(D10), 0.03);
D10-05: calc_rgba(value(D10), 0.05);
D10-10: calc_rgba(value(D10), 0.1);
D10-12: calc_rgba(value(D10), 0.12);
D10-20: calc_rgba(value(D10), 0.2);
D10-30: calc_rgba(value(D10), 0.3);
D10-66: calc_rgba(value(D10), 0.66);
D20-48: calc_rgba(value(D20), 0.48); /* new transparent color */
D20-54: calc_rgba(value(D20), 0.54); /* hovered */
D20-60: calc_rgba(value(D20), 0.6); /* clicked */
D40-20: calc_rgba(value(D40), 0.2);
D80-10: calc_rgba(value(D80), 0.1);
D80-20: calc_rgba(value(D80), 0.2);
D80-30: calc_rgba(value(D80), 0.3);
D80-60: calc_rgba(value(D80), 0.6);
D80-70: calc_rgba(value(D80), 0.7);
B00-24: calc_rgba(value(B00), 0.24);
B00-42: calc_rgba(value(B00), 0.42);
B00-48: calc_rgba(value(B00), 0.48);
/* Theme */
THEME-COLOR-00: var(--wsr-color-00, value(B00));
THEME-COLOR-05: var(--wsr-color-05, value(B05));
THEME-COLOR-10: var(--wsr-color-10, value(B10));
THEME-COLOR-20: var(--wsr-color-20, value(B20));
THEME-COLOR-30: var(--wsr-color-30, value(B30));
THEME-COLOR-40: var(--wsr-color-40, value(B40));
THEME-COLOR-50: var(--wsr-color-50, value(B50));
THEME-COLOR-60: var(--wsr-color-60, value(B60));
THEME-TEXT-COLOR-PRIMARY: var(--wsr-text-color-primary, value(D10));
THEME-TEXT-COLOR-PRIMARY-LIGHT: var(--wsr-text-color-primary-light, value(D80));
THEME-TEXT-COLOR-SECONDARY: var(--wsr-text-color-secondary, value(D20));
THEME-TEXT-COLOR-SECONDARY-LIGHT: var(--wsr-text-color-secondary-light, value(D40));
THEME-DIVIDER-COLOR: var(--wsr-divider-color, value(D60));
}