OpenHands/openhands-ui/tokens.css
2025-07-28 21:04:19 +04:00

176 lines
4.1 KiB
CSS

@theme {
/* COLOR VARIABLES */
--color-primary-15: #FFFCF0;
--color-primary-30: #FFF9E1;
--color-primary-50: #FFF7D7;
--color-primary-100: #FFF3C0;
--color-primary-200: #FFEEAA;
--color-primary-300: #FFEA92;
--color-primary-400: #FFE57B;
--color-primary-500: #FFE165;
--color-primary-600: #DCC257;
--color-primary-700: #BBA54A;
--color-primary-800: #99873D;
--color-primary-900: #76682F;
--color-primary-950: #534921;
--color-primary-970: #433B1B;
--color-primary-985: #2D2812;
/* Light Neutral */
--color-light-neutral-15: #F7F8FB;
--color-light-neutral-30: #F0F2F7;
--color-light-neutral-50: #EBEDF3;
--color-light-neutral-100: #DFE2ED;
--color-light-neutral-200: #D4D8E7;
--color-light-neutral-300: #C8CDE0;
--color-light-neutral-400: #BCC3D9;
--color-light-neutral-500: #B1B9D3;
--color-light-neutral-600: #99A0B6;
--color-light-neutral-700: #82889B;
--color-light-neutral-800: #6A6F7F;
--color-light-neutral-900: #525662;
--color-light-neutral-950: #3A3C45;
--color-light-neutral-970: #2F3137;
--color-light-neutral-985: #1F2125;
/* Grey */
--color-grey-15: #EDEDEF;
--color-grey-30: #DCDDDF;
--color-grey-50: #CFD0D3;
--color-grey-100: #B5B6BA;
--color-grey-200: #9A9CA2;
--color-grey-300: #7E8088;
--color-grey-400: #63666F;
--color-grey-500: #494C57;
--color-grey-600: #3F424B;
--color-grey-700: #363840;
--color-grey-800: #2C2E34;
--color-grey-900: #222328;
--color-grey-950: #18191C;
--color-grey-970: #131417;
--color-grey-985: #0D0D0F;
/* Green */
--color-green-15: #F8FFF4;
--color-green-30: #F2FFE9;
--color-green-50: #EDFFE1;
--color-green-100: #E4FFD0;
--color-green-200: #DAFFBF;
--color-green-300: #CFFFAD;
--color-green-400: #C6FF9D;
--color-green-500: #BCFF8C;
--color-green-600: #A2DC79;
--color-green-700: #8ABB67;
--color-green-800: #719954;
--color-green-900: #577641;
--color-green-950: #3D532E;
--color-green-970: #314325;
--color-green-985: #212D19;
/* Aqua */
--color-aqua-15: #F4FFFE;
--color-aqua-30: #E9FFFE;
--color-aqua-50: #E1FFFD;
--color-aqua-100: #D1FFFD;
--color-aqua-200: #C0FFFC;
--color-aqua-300: #AEFFFB;
--color-aqua-400: #9EFFFA;
--color-aqua-500: #8DFFF9;
--color-aqua-600: #7ADCD7;
--color-aqua-700: #67BBB7;
--color-aqua-800: #559995;
--color-aqua-900: #417673;
--color-aqua-950: #2E5351;
--color-aqua-970: #254341;
--color-aqua-985: #192D2C;
/* Red */
--color-red-15: #FFF0EE;
--color-red-30: #FFE2DD;
--color-red-50: #FFD7D0;
--color-red-100: #FFC1B7;
--color-red-200: #FFAC9D;
--color-red-300: #FF9481;
--color-red-400: #FF7E68;
--color-red-500: #FF684E;
--color-red-600: #DC5A43;
--color-red-700: #BB4C39;
--color-red-800: #993E2F;
--color-red-900: #763024;
--color-red-950: #532219;
--color-red-970: #431B14;
--color-red-985: #2D120E;
/* OpacityBlue */
--color-blue: #DCE5FF;
/* TYPOGRAPHY VARIABLES */
--font-size-xxs: 0.75rem; /* 12px */
--font-size-xs: 0.875rem; /* 14px */
--font-size-s: 1rem; /* 16px */
--font-size-m: 1.125rem; /* 18px */
--font-size-l: 1.5rem; /* 24px */
--font-size-xl: 2rem; /* 32px */
--font-size-xxl: 2.25rem; /* 36px */
--font-size-xxxl: 3rem; /* 48px */
/* OLD TAILWIND STYLES */
--color-primary: #C9B974;
--color-logo: #CFB755;
--color-base: #0D0F11;
--color-base-secondary: #24272E;
--color-danger: #E76A5E;
--color-success: #A5E75E;
--color-basic: #9099AC;
--color-tertiary: #454545;
--color-tertiary-light: #B7BDC2;
--color-content: #ECEDEE;
--color-content-2: #F9FBFE;
}
@layer utilities {
.tg-family-outfit {
font-family: Outfit;
}
.tg-family-ibm-plex {
font-family: IBM Plex Mono
}
.tg-xxs {
font-size: var(--font-size-xxs);
}
.tg-xs {
font-size: var(--font-size-xs);
}
.tg-s {
font-size: var(--font-size-s);
}
.tg-m {
font-size: var(--font-size-m);
}
.tg-lg {
font-size: var(--font-size-l);
}
.tg-xl {
font-size: var(--font-size-xl);
}
.tg-xxl {
font-size: var(--font-size-xxl);
}
.tg-xxxl {
font-size: var(--font-size-xxxl);
}
}