@trove-ui/react
Version:
A React component library for T Design UI
133 lines (115 loc) • 2.51 kB
CSS
:root {
--color-white: #fff;
--color-black: #000;
--box-shadow-s: 0 0 0;
--color-primary-50: #e9ebf9;
--color-primary-100: #d7daf4;
--color-primary-200: #b9bfe9;
--color-primary-300: #9299d8;
--color-primary-400: #737dc0;
--color-primary-500: #6a73c4;
--color-primary-600: #656dc8;
--color-primary-700: #51569f;
--color-primary-800: #424782;
--color-primary-900: #373b6d;
--color-primary-950: #222442;
--color-success-50: #e5f6f2;
--color-success-100: #d1ede7;
--color-success-200: #aee0d3;
--color-success-300: #7acbb5;
--color-success-400: #47b697;
--color-success-500: #26a680;
--color-success-600: #0e7e62;
--color-success-700: #0b654f;
--color-success-800: #095341;
--color-success-900: #074536;
--color-success-950: #042a20;
--color-warning-50: #f6f2eb;
--color-warning-100: #ede5d8;
--color-warning-200: #dbc7a8;
--color-warning-300: #bd9d69;
--color-warning-400: #a77e3e;
--color-warning-500: #99702b;
--color-warning-600: #936623;
--color-warning-700: #76521d;
--color-warning-800: #614317;
--color-warning-900: #513813;
--color-warning-950: #31220c;
--color-danger-50: #fbebef;
--color-danger-100: #f6d3db;
--color-danger-200: #ed9ca9;
--color-danger-300: #e2576b;
--color-danger-400: #d93347;
--color-danger-500: #d12539;
--color-danger-600: #c4404f;
--color-danger-700: #9c323f;
--color-danger-800: #802933;
--color-danger-900: #6a222a;
--color-danger-950: #401419;
--color-info-50: #f6f6f7;
--color-info-100: #ededee;
--color-info-200: #d8d9db;
--color-info-300: #bcbcc0;
--color-info-400: #9e9fa5;
--color-info-500: #878990;
--color-info-600: #6d6f74;
--color-info-700: #57595e;
--color-info-800: #47484c;
--color-info-900: #3b3c40;
--color-info-950: #242426;
}
body {
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
line-height: calc(1em + 8px);
}
h1 {
font-size: 48px;
font-weight: 800;
}
h2 {
font-size: 36px;
font-weight: 700;
}
h3 {
font-size: 24px;
font-weight: 600;
}
h4 {
font-size: 18px;
font-weight: 600;
}
h5 {
font-size: 16px;
font-weight: normal;
}
h6 {
font-size: 14px;
font-weight: normal;
}
.w-full {
width: 100%;
}
.h-full {
height: 100%;
}
.flex {
display: flex;
}
.justify-center, .flex-center {
justify-content: center;
}
.items-center, .flex-center {
align-items: center;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.cursor-pointer:hover {
cursor: pointer;
}