Docs frontend branding

frontend-web/webclient/app/Assets/Colors.css

@@ -0,0 +1,212 @@
+html.light {
+    --primaryMain: var(--blue-60);
+    --primaryLight: var(--blue-50);
+    --primaryDark: var(--blue-70);
+    --primaryContrast: #ffffff;
+    --primaryContrastAlt: #a6a8a9;
+    --secondaryMain: var(--gray-10);
+    --secondaryLight: var(--gray-5);
+    --secondaryDark: var(--gray-20);
+    --secondaryContrast: #000000;
+    --secondaryContrastAlt: #222222;
+    --errorMain: var(--red-60);
+    --errorLight: var(--red-50);
+    --errorDark: var(--red-70);
+    --errorContrast: #ffffff;
+    --errorContrastAlt: #a6a8a9;
+    --warningMain: var(--orange-30);
+    --warningLight: var(--orange-20);
+    --warningDark: var(--orange-40);
+    --warningContrast: #000000;
+    --warningContrastAlt: #222222;
+    --infoMain: var(--gray-70);
+    --infoLight: var(--gray-60);
+    --infoDark: var(--gray-80);
+    --infoContrast: #ffffff;
+    --infoContrastAlt: #a6a8a9;
+    --successMain: var(--green-50);
+    --successLight: var(--green-40);
+    --successDark: var(--green-60);
+    --successContrast: #ffffff;
+    --successContrastAlt: #a6a8a9;
+    --backgroundDefault: #ffffff;
+    --borderColor: var(--gray-20);
+    --borderColorHover: var(--gray-30);
+    --backgroundCard: #ffffff;
+    --backgroundCardHover: var(--gray-5);
+    --backgroundDisabled: var(--gray-5);
+    --textPrimary: #212529;
+    --textSecondary: #646669;
+    --textDisabled: #909294;
+    --rowHover: var(--gray-5);
+    --rowActive: var(--blue-10);
+    --gradientStart: var(--blue-30);
+    --gradientEnd: var(--blue-20);
+    --linkColorHover: var(--primaryDark);
+    --linkColor: var(--primaryMain);
+    --dialogToolbar: var(--gray-5);
+
+    --purple-fg: var(--purple-60);
+    --red-fg: var(--red-60);
+    --orange-fg: var(--orange-60);
+    --yellow-fg: var(--yellow-60);
+    --green-fg: var(--green-60);
+    --gray-fg: var(--gray-60);
+    --blue-fg: var(--blue-60);
+    --pink-fg: var(--pink-60);
+}
+
+html.dark {
+    --modalShadow: rgba(0, 0, 0, 0.75);
+    --primaryMain: var(--blue-80);
+    --primaryLight: var(--blue-70);
+    --primaryDark: var(--blue-90);
+    --primaryContrast: #ffffff;
+    --primaryContrastAlt: #a6a8a9;
+    --secondaryMain: var(--gray-30);
+    --secondaryLight: var(--gray-20);
+    --secondaryDark: var(--gray-40);
+    --secondaryContrast: #000000;
+    --secondaryContrastAlt: #222222;
+    --errorMain: var(--red-60);
+    --errorLight: var(--red-50);
+    --errorDark: var(--red-70);
+    --errorContrast: #ffffff;
+    --errorContrastAlt: #a6a8a9;
+    --warningMain: var(--orange-30);
+    --warningLight: var(--orange-20);
+    --warningDark: var(--orange-40);
+    --warningContrast: #000000;
+    --warningContrastAlt: #222222;
+    --infoMain: var(--gray-30);
+    --infoLight: var(--gray-20);
+    --infoDark: var(--gray-40);
+    --infoContrast: #000000;
+    --infoContrastAlt: #222222;
+    --successMain: var(--green-50);
+    --successLight: var(--green-40);
+    --successDark: var(--green-60);
+    --successContrast: #ffffff;
+    --successContrastAlt: #a6a8a9;
+    --backgroundDefault: var(--gray-100);
+    --borderColor: var(--gray-80);
+    --borderColorHover: var(--gray-70);
+    --backgroundCard: var(--gray-90);
+    --backgroundCardHover: var(--gray-90);
+    --backgroundDisabled: var(--gray-90);
+    --textPrimary: #ffffff;
+    --textSecondary: #bcbebf;
+    --textDisabled: #909294;
+    --rowHover: var(--gray-90);
+    --rowActive: var(--blue-90);
+    --gradientStart: var(--blue-90);
+    --gradientEnd: var(--blue-80);
+    --linkColor: var(--blue-50);
+    --linkColorHover: var(--blue-70);
+    --dialogToolbar: var(--gray-90);
+
+    --purple-fg: var(--purple-40);
+    --red-fg: var(--red-40);
+    --orange-fg: var(--orange-40);
+    --yellow-fg: var(--yellow-40);
+    --green-fg: var(--green-40);
+    --gray-fg: var(--gray-40);
+    --blue-fg: var(--blue-40);
+    --pink-fg: var(--pink-40);
+}
+
+html.light {
+    color-scheme: light;
+}
+
+html.dark {
+    color-scheme: dark;
+}
+
+html {
+    --modalShadow: rgba(255, 255, 255, 0.75);
+
+    /* Color palette from where the colors used on UCloud are derived from */
+    --purple-5: #FBF7FB;
+    --purple-10: #F5EBF5;
+    --purple-20: #E6CDE6;
+    --purple-30: #D8B0D8;
+    --purple-40: #C993C9;
+    --purple-50: #B972B9;
+    --purple-60: #A74EA7;
+    --purple-70: #993399;
+    --purple-80: #870F87;
+    --purple-90: #680068;
+    --red-5: #FFF6F6;
+    --red-10: #FFE9E1;
+    --red-20: #FFC9B6;
+    --red-30: #FFA78C;
+    --red-40: #FF805F;
+    --red-50: #FF4628;
+    --red-60: #E11005;
+    --red-70: #BD1809;
+    --red-80: #961B0B;
+    --red-90: #6C1A0C;
+    --orange-5: #FFF6EF;
+    --orange-10: #FFEAD7;
+    --orange-20: #FFCA9A;
+    --orange-30: #FFA95B;
+    --orange-40: #FF8018;
+    --orange-50: #E0680D;
+    --orange-60: #B7540A;
+    --orange-70: #9B4708;
+    --orange-80: #7D3806;
+    --orange-90: #5D2A05;
+    --yellow-5: #FFF8D6;
+    --yellow-10: #FFEE98;
+    --yellow-20: #FFCF04;
+    --yellow-30: #E6B704;
+    --yellow-40: #CA9F04;
+    --yellow-50: #AC8604;
+    --yellow-60: #8E6C03;
+    --yellow-70: #795B02;
+    --yellow-80: #624802;
+    --yellow-90: #493501;
+    --green-5: #EDFCE9;
+    --green-10: #D3F8C9;
+    --green-20: #89EC6D;
+    --green-30: #4BD823;
+    --green-40: #42BD1F;
+    --green-50: #389F1A;
+    --green-60: #2D8215;
+    --green-70: #266D12;
+    --green-80: #1F580E;
+    --green-90: #17410B;
+    --gray-5: #F7F8F9;
+    --gray-10: #ECEEF0;
+    --gray-20: #D0D5DC;
+    --gray-30: #B6BEC8;
+    --gray-40: #9BA6B4;
+    --gray-50: #7F8C9E;
+    --gray-60: #627288;
+    --gray-70: #4F6178;
+    --gray-80: #404D60;
+    --gray-90: #2A313B;
+    --gray-100: #21262D;
+    --blue-5: #F4F8FE;
+    --blue-10: #E4EFFC;
+    --blue-20: #BCD7F7;
+    --blue-30: #95C0F3;
+    --blue-40: #6DA8EE;
+    --blue-50: #3E8CE9;
+    --blue-60: #096DE3;
+    --blue-70: #035BC3;
+    --blue-80: #03499D;
+    --blue-90: #023774;
+    --pink-5: #FCE4EC;
+    --pink-10: #F8BBD0;
+    --pink-20: #F48FB1;
+    --pink-30: #F06292;
+    --pink-40: #EC407A;
+    --pink-50: #E91E63;
+    --pink-60: #D81B60;
+    --pink-70: #C2185B;
+    --pink-80: #AD1457;
+    --pink-90: #880E4F;
+    /* New color palette END */
+}