본문 바로가기

Code/web-frontend

FLEX 서비스 css 칼라값

root 파일 참고용

vscode에서 보면 색상도 나옴

 

root, .t-giEBBL {
    --sizes-xsmall: 24px;
    --sizes-small: 32px;
    --sizes-default: 40px;
    --sizes-large: 48px;
    --sizes-xlarge: 56px;
    --radii-default: 8px;
    --radii-tag: 50px;
    --shadows-active: 0 0 0 4px rgba(58,151,212,.3),0 0 0 1px rgba(33,36,41,.2),0 1px 1px 0 rgba(33,36,41,0),0 6px 12px 0 rgba(33,36,41,0);
    --shadows-pageRoot: 0px 0px 12px 0px rgba(0, 0, 0, 0.04), -1px 0px 0px 0px rgba(0, 0, 0, 0.04), 0px 0px 24px 0px rgba(0, 0, 0, 0.04);
    --shadows-pageAside: inset 1px 0 0 rgba(0, 0, 0, 0.08);
    --shadows-button: 0px 2px 6px rgba(0, 0, 0, 0.02), inset 0px -1px 0px rgba(0, 0, 0, 0.06), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
    --shadows-tag: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.03);
    --shadows-tagOutline: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.12);
    --shadows-badge: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.04);
    --shadows-radioUnselect: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.16);
    --shadows-radioSelect: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.12);
    --shadows-checkboxUnselect: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.16);
    --shadows-checkboxSelect: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.12);
    --shadows-popper: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 10px 14px rgba(0, 0, 0, 0.06), 0px 14px 32px rgba(0, 0, 0, 0.12);
    --shadows-inputSolid: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.04);
    --shadows-inputOutline: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
    --shadows-inputFocus: inset 0px 0px 0px 1px #07B419;
    --shadows-inputError: inset 0px 0px 0px 1px #F44712;
    --shadows-popover: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 14px 60px rgba(0, 0, 0, 0.15);
    --shadows-modal: 0px 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 24px 72px rgba(36, 42, 48, 0.22);
    --shadows-modalLeftAsideDivider: inset -1px 0px 0px rgba(0, 0, 0, 0.08);
    --shadows-modalRightAsideDivider: inset 1px 0px 0px rgba(0, 0, 0, 0.08);
    --shadows-tabActiveUnderline: inset 0px -2px 0px #242A30;
    --shadows-appShellRoot: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
    --shadows-tooltip: 0px 6px 24px rgba(0, 0, 0, 0.16), inset 0px -1px 0px rgba(0, 0, 0, 0.06), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.12);
    --shadows-datePickerSelected: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
    --shadows-dialog: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 14px 60px rgba(0, 0, 0, 0.15);
    --zIndices-TOP_BAR: 999;
    --zIndices-SUB_NAV_BAR: 999;
    --zIndices-GNB: 1000;
    --zIndices-RIGHT_PANEL: 1000;
    --zIndices-LINEAR_MODAL: 1001;
    --zIndices-LINEAR_DROPDOWN: 1002;
    --zIndices-LINEAR_DIALOG: 1003;
    --zIndices-LINEAR_POPOVER: 1004;
    --zIndices-LINEAR_TOAST: 1005;
    --zIndices-TOP_OF_EVERYTHING: 10000;
    --zIndices-SPOTLIGHT: 1001;
    --colors-orangeLighter: #ffcec2;
    --colors-orangeLight: #f57453;
    --colors-orangeLightest: #fff7f5;
    --colors-orangeDarker: #661400;
    --colors-orangeDark: #c32700;
    --colors-orange: #f24b17;
    --colors-black010: rgba(36, 42, 48, 0.1);
    --colors-black004: rgba(36, 42, 48, 0.04);
    --colors-black016: rgba(36, 42, 48, 0.16);
    --colors-black096: rgba(36, 42, 48, 0.96);
    --colors-black080: rgba(36, 42, 48, 0.8);
    --colors-black072: rgba(36, 42, 48, 0.72);
    --colors-black064: rgba(36, 42, 48, 0.64);
    --colors-black056: rgba(36, 42, 48, 0.56);
    --colors-black048: rgba(36, 42, 48, 0.48);
    --colors-black040: rgba(36, 42, 48, 0.4);
    --colors-black024: rgba(36, 42, 48, 0.24);
    --colors-black012: rgba(36, 42, 48, 0.12);
    --colors-black008: rgba(36, 42, 48, 0.08);
    --colors-black006: rgba(36, 42, 48, 0.06);
    --colors-black: #242a30;
    --colors-black088: rgba(36, 42, 48, 0.88);
    --colors-black032: rgba(36, 42, 48, 0.32);
    --colors-black003: rgba(36, 42, 48, 0.03);
    --colors-black002: rgba(36, 42, 48, 0.02);
    --colors-black001: rgba(36, 42, 48, 0.01);
    --colors-black020: rgba(36, 42, 48, 0.2);
    --colors-cosmicBlueDark: #2e5e87;
    --colors-cosmicBlueLightest: #f2f6f9;
    --colors-cosmicBlueLighter: #c4d9eb;
    --colors-cosmicBlueLight: #80add3;
    --colors-cosmicBlueDarker: #1b3750;
    --colors-cosmicBlue: #3b86c8;
    --colors-purpleLighter: #ddcced;
    --colors-purpleLightest: #faf5ff;
    --colors-purpleLight: #aa7ad9;
    --colors-purpleDarker: #361853;
    --colors-purpleDark: #5b288d;
    --colors-purple: #8f40de;
    --colors-yellowLightest: #fffcf2;
    --colors-yellowLighter: #ffeebd;
    --colors-yellowLight: #ffd454;
    --colors-yellow: #fab300;
    --colors-yellowDark: #b57700;
    --colors-yellowDarker: #704300;
    --colors-flame: linear-gradient(96.77deg, #f96a19 -0.96%, #fb60bd 100%);
    --colors-tropical: linear-gradient(96.77deg, #04cc00 -0.96%, #12c2cd 100%);
    --colors-magic: linear-gradient(96.77deg, #9d3cff -0.96%, #6066ff 100%);
    --colors-mango: linear-gradient(96.77deg, #fa9e00 -0.96%, #ff8e26 100%);
    --colors-white: #ffffff;
    --colors-white088: rgba(255, 255, 255, 0.88);
    --colors-white080: rgba(255, 255, 255, 0.8);
    --colors-white072: rgba(255, 255, 255, 0.72);
    --colors-white064: rgba(255, 255, 255, 0.64);
    --colors-white056: rgba(255, 255, 255, 0.56);
    --colors-white048: rgba(255, 255, 255, 0.48);
    --colors-white040: rgba(255, 255, 255, 0.4);
    --colors-white032: rgba(255, 255, 255, 0.32);
    --colors-white028: rgba(255, 255, 255, 0.28);
    --colors-white024: rgba(255, 255, 255, 0.24);
    --colors-white020: rgba(255, 255, 255, 0.2);
    --colors-white016: rgba(255, 255, 255, 0.16);
    --colors-white012: rgba(255, 255, 255, 0.12);
    --colors-white010: rgba(255, 255, 255, 0.1);
    --colors-white008: rgba(255, 255, 255, 0.08);
    --colors-white006: rgba(255, 255, 255, 0.06);
    --colors-white004: rgba(255, 255, 255, 0.04);
    --colors-white003: rgba(255, 255, 255, 0.03);
    --colors-white096: rgba(255, 255, 255, 0.96);
    --colors-white001: rgba(255, 255, 255, 0.01);
    --colors-white002: rgba(255, 255, 255, 0.02);
    --colors-magentaLightest: #fef6f9;
    --colors-magentaLighter: #facddd;
    --colors-magentaLight: #f584ad;
    --colors-magentaDarker: #651e38;
    --colors-magentaDark: #aa325e;
    --colors-magenta: #f04785;
    --colors-greenLighter: #b7e8bd;
    --colors-greenLight: #59cd65;
    --colors-greenDarker: #034c0b;
    --colors-greenDark: #058012;
    --colors-green: #07b419;
    --colors-greenLightest: #f6fdf7;
    --colors-grayLightest: #f8f9fa;
    --colors-grayLighter: #cdd2d6;
    --colors-grayLight: #8d96a1;
    --colors-grayDarker: #242a30;
    --colors-grayDark: #3c4651;
    --colors-gray: #556372;
    --colors-goldLight: #d6a754;
    --colors-goldDarker: #513400;
    --colors-goldDark: #8a5700;
    --colors-gold: #cf7800;
    --colors-goldLighter: #ecd8b6;
    --colors-goldLightest: #fcfbf7;
    --colors-cyanLighter: #b4edec;
    --colors-cyanDarker: #005352;
    --colors-cyanLightest: #f2fdfd;
    --colors-cyanDark: #03706e;
    --colors-cyanLight: #55d9d7;
    --colors-cyan: #01c6c3;
    --colors-blueLightest: #f5fbff;
    --colors-blueLighter: #c2e3ff;
    --colors-blueLight: #54a6ee;
    --colors-blueDarker: #102a5c;
    --colors-blueDark: #1545a1;
    --colors-blue: #2161dc;
    --colors-primaryDarker: #034c0b;
    --colors-primaryDark: #058012;
    --colors-primaryLighter: #b7e8bd;
    --colors-primaryLight: #59cd65;
    --colors-primary: #07b419;
    --colors-primaryLightest: #f2fdf3;
    --colors-background: #fdfdfd;
    --colors-overlayLight: rgba(240, 240, 240, 0.85);
    --colors-overlayDark: rgba(36, 42, 48, 0.5);