From c08a3cc7725f25d105e5fc8f7f9ecfd857330975 Mon Sep 17 00:00:00 2001 From: Emilio Mariscal Date: Wed, 18 Sep 2024 09:44:01 -0300 Subject: [PATCH] + HOT UI CSS theme for direct use --- theme/hot.css | 192 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 192 insertions(+) create mode 100644 theme/hot.css diff --git a/theme/hot.css b/theme/hot.css new file mode 100644 index 0000000..55b15b2 --- /dev/null +++ b/theme/hot.css @@ -0,0 +1,192 @@ + +/* HOT theme */ + +:root, +:host, +.hot-theme-light { + + /* + * Color primitives + */ + + /* red - red */ + + -hot-color-red-950: #a52a28; + -hot-color-red-900: #b9302d; + -hot-color-red-800: #c93938; + -hot-color-red-700: #d73f3f; + -hot-color-red-600: #e84846; + -hot-color-red-500: #f75047; + -hot-color-red-400: #f15f5e; + -hot-color-red-300: #e67c7e; + -hot-color-red-200: #efa0a2; + -hot-color-red-100: #fed1d7; + -hot-color-red-50: #feecf0; + + /* rose - persian plum */ + + -hot-color-rose-950: #6c2020; + -hot-color-rose-900: #7A3632; + -hot-color-rose-800: #864740; + -hot-color-rose-700: #92584F; + -hot-color-rose-600: #9E6960; + -hot-color-rose-500: #AB7B71; + -hot-color-rose-400: #B79086; + -hot-color-rose-300: #C6A59E; + -hot-color-rose-200: #D5BDB7; + -hot-color-rose-100: #E3D5CF; + -hot-color-rose-50: #F4EFED; + + /* yellow - bright yellow */ + + -hot-yellow-950: #FAA71E; + -hot-yellow-900: #FCB343; + -hot-yellow-800: #FDBA58; + -hot-yellow-700: #FDC26D; + -hot-yellow-600: #FECA7F; + -hot-yellow-500: #FED293; + -hot-yellow-400: #FFDAA6; + -hot-yellow-300: #FFE2BA; + -hot-yellow-200: #FFEBCF; + -hot-yellow-100: #FFF3E3; + -hot-yellow-50: #FFF9F3; + + /* blue - space cadet */ + + -hot-blue-950: #20365B; + -hot-blue-900: #374668; + -hot-blue-800: #4A5374; + -hot-blue-700: #5A607E; + -hot-blue-600: #70718D; + -hot-blue-500: #82839C; + -hot-blue-400: #9595AA; + -hot-blue-300: #ACACBC; + -hot-blue-200: #C1C1CD; + -hot-blue-100: #DADADF; + -hot-blue-50: #F1EFF2; + + /* cyan - cadet blue */ + + -hot-blue-950: #259592; + -hot-blue-900: #49AFAC; + -hot-blue-800: #57C1BE; + -hot-blue-700: #7DCFCD; + -hot-blue-600: #8CD5D3; + -hot-blue-500: #9DDBD9; + -hot-blue-400: #B0E2E1; + -hot-blue-300: #C4EAE9; + -hot-blue-200: #D5F0EF; + -hot-blue-100: #E6F6F5; + -hot-blue-50: #F5FBFB; + + /* cyan - cadet blue */ + + -hot-cyan-950: #259592; + -hot-cyan-900: #49AFAC; + -hot-cyan-800: #57C1BE; + -hot-cyan-700: #7DCFCD; + -hot-cyan-600: #8CD5D3; + -hot-cyan-500: #9DDBD9; + -hot-cyan-400: #B0E2E1; + -hot-cyan-300: #C4EAE9; + -hot-cyan-200: #D5F0EF; + -hot-cyan-100: #E6F6F5; + -hot-cyan-50: #F5FBFB; + + /* gray - dark slate gray */ + + -hot-gray-950: #2C3038; + -hot-gray-900: #404248; + -hot-gray-800: #515057; + -hot-gray-700: #615F66; + -hot-gray-600: #716F73; + -hot-gray-500: #828085; + -hot-gray-400: #9A969B; + -hot-gray-300: #B3B0B3; + -hot-gray-200: #C4C3C5; + -hot-gray-100: #E1E0E1; + -hot-gray-50: #F3F3F3; + + /* neutral - black & white */ + + -hot-neutral-1000: #000; + -hot-neutral-0: #fff; + + /* + * Color tokens + */ + + -hot-color-primary-950: var(-hot-color-red-950); + -hot-color-primary-900: var(-hot-color-red-900); + -hot-color-primary-800: var(-hot-color-red-800); + -hot-color-primary-700: var(-hot-color-red-700); + -hot-color-primary-600: var(-hot-color-red-600); + -hot-color-primary-500: var(-hot-color-red-500); + -hot-color-primary-400: var(-hot-color-red-400); + -hot-color-primary-300: var(-hot-color-red-300); + -hot-color-primary-200: var(-hot-color-red-200); + -hot-color-primary-100: var(-hot-color-red-100); + -hot-color-primary-50: var(-hot-color-red-50); + + -hot-color-danger-950: var(-hot-color-rose-950); + -hot-color-danger-900: var(-hot-color-rose-900); + -hot-color-danger-800: var(-hot-color-rose-800); + -hot-color-danger-700: var(-hot-color-rose-700); + -hot-color-danger-600: var(-hot-color-rose-600); + -hot-color-danger-500: var(-hot-color-rose-500); + -hot-color-danger-400: var(-hot-color-rose-400); + -hot-color-danger-300: var(-hot-color-rose-300); + -hot-color-danger-200: var(-hot-color-rose-200); + -hot-color-danger-100: var(-hot-color-rose-100); + -hot-color-danger-50: var(-hot-color-rose-50); + + -hot-color-neutral-950: var(-hot-color-gray-950); + -hot-color-neutral-900: var(-hot-color-gray-900); + -hot-color-neutral-800: var(-hot-color-gray-800); + -hot-color-neutral-700: var(-hot-color-gray-700); + -hot-color-neutral-600: var(-hot-color-gray-600); + -hot-color-neutral-500: var(-hot-color-gray-500); + -hot-color-neutral-400: var(-hot-color-gray-400); + -hot-color-neutral-300: var(-hot-color-gray-300); + -hot-color-neutral-200: var(-hot-color-gray-200); + -hot-color-neutral-100: var(-hot-color-gray-100); + -hot-color-neutral-50: var(-hot-color-gray-50); + + -hot-color-success-950: var(-hot-color-cyan-950); + -hot-color-success-900: var(-hot-color-cyan-900); + -hot-color-success-800: var(-hot-color-cyan-800); + -hot-color-success-700: var(-hot-color-cyan-700); + -hot-color-success-600: var(-hot-color-cyan-600); + -hot-color-success-500: var(-hot-color-cyan-500); + -hot-color-success-400: var(-hot-color-cyan-400); + -hot-color-success-300: var(-hot-color-cyan-300); + -hot-color-success-200: var(-hot-color-cyan-200); + -hot-color-success-100: var(-hot-color-cyan-100); + -hot-color-success-50: var(-hot-color-cyan-50); + + -hot-color-warning-950: var(-hot-color-yellow-950); + -hot-color-warning-900: var(-hot-color-yellow-900); + -hot-color-warning-800: var(-hot-color-yellow-800); + -hot-color-warning-700: var(-hot-color-yellow-700); + -hot-color-warning-600: var(-hot-color-yellow-600); + -hot-color-warning-500: var(-hot-color-yellow-500); + -hot-color-warning-400: var(-hot-color-yellow-400); + -hot-color-warning-300: var(-hot-color-yellow-300); + -hot-color-warning-200: var(-hot-color-yellow-200); + -hot-color-warning-100: var(-hot-color-yellow-100); + -hot-color-warning-50: var(-hot-color-yellow-50); + + /* + * Typography + */ + + /* Fonts */ + -hot-font-sans: Archivo, -apple-system, Roboto, Helvetica, Arial, sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + -hot-font-sans-variant: 'Barlow Condensed'; + -hot-font-sefif: Georgia, 'Times New Roman', serif; + -hot-font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; + + +} +