css/brand refactor inside articles components

overwolf · Jul 16, 2024 · 290f8f1 · 290f8f1
1 parent 04def67
commit 290f8f1
Show file tree

Hide file tree

Showing 6 changed files with 392 additions and 401 deletions.
diff --git a/src/components/getting-started-page/apps-do-list.scss b/src/components/getting-started-page/apps-do-list.scss
@@ -3,8 +3,6 @@
   display: flex;
   flex-direction: column;
   row-gap: 32px;
-  padding-bottom: 32px;
-  border-bottom: 1px solid var(--color-333);
   margin: 32px 0 0;
 
   li {
@@ -21,8 +19,7 @@
       font-weight: 700;
       font-size: 18px;
       line-height: 24px;
-      letter-spacing: 0.02em;
-      margin-bottom: 8px;
+      margin-top: 0;
     }
 
     p {
@@ -41,4 +38,4 @@
       height: 80px;
     }
   }
-}
+}
diff --git a/src/components/getting-started-page/apps-live-list.scss b/src/components/getting-started-page/apps-live-list.scss
@@ -3,9 +3,6 @@
   display: flex;
   flex-direction: column;
   row-gap: 32px;
-  padding-bottom: 32px;
-  border-bottom: 1px solid var(--color-333);
-  margin: 32px 0 40px !important;
 
   @media (max-width: 600px) {
     row-gap: 48px;
@@ -33,8 +30,7 @@
       font-weight: 700;
       font-size: 18px;
       line-height: 24px;
-      letter-spacing: 0.02em;
-      margin-bottom: 8px;
+      margin-top: 0;
     }
 
     p {

diff --git a/src/css/colors.scss b/src/css/colors.scss
@@ -0,0 +1,291 @@
+:root {
+
+	//brand late 2024
+	  //Core Typography brand fonts
+		--font-family-brand: "Montserrat", sans-serif;
+		--font-family-default: "Lato", sans-serif;
+		--font-family-code: "Consolas", sans-serif;
+
+		// Font weight
+		--font-weight-regular: 400;
+		--font-weight-medium: 500;
+		--font-weight-bold: 700;
+
+		// Line height
+		--font-line-height-350: 14px; /* 31.818% */
+		--font-line-height-400: 16px; /* 36.364% */
+		--font-line-height-500: 20px; /* 45.455% */
+		--font-line-height-600: 24px; /* 54.545% */
+		--font-line-height-700: 28px; /* 63.636% */
+		--font-line-height-800: 32px; /* 72.727% */
+		--font-line-height-1000: 40px; /* 90.909% */
+		--font-line-height-1300: 52px; /* 118.182% */
+		--font-line-height-1800: 72px; /* 163.636% */
+		--font-line-height-2600: 104px; /* 236.364% */
+
+		//Letter spacing
+		--font-letter-spacing-default: 0px;
+		--font-letter-spacing-regular: 1.2px;
+
+		// Core font sizes
+		--font-size-300: 12px;
+		--font-size-350: 14px;
+		--font-size-400: 16px;
+		--font-size-450: 18px;
+		--font-size-500: 20px;
+		--font-size-550: 22px;
+		--font-size-600: 24px;
+		--font-size-800: 32px;
+		--font-size-1100: 44px;
+		--font-size-1600: 64px;
+		--font-size-2400: 96px;
+
+		// Core Spaces
+		--space-0: 0px;
+		--space-50: 2px;
+		--space-100: 4px;
+		--space-200: 8px;
+		--space-300: 12px;
+		--space-400: 16px;
+		--space-500: 20px;
+		--space-600: 24px;
+		--space-800: 32px;
+		--space-1000: 40px;
+		--space-1200: 48px;
+		--space-1400: 56px;
+		--space-1600: 64px;
+		--space-1800: 72px;
+		--space-2000: 80px;
+		--space-2200: 88px;
+		--space-2400: 96px;
+		--space-2600: 104px;
+		--space-3200: 128px;
+		--space-4000: 160px;
+		--space-4800: 192px;
+		--space-5600: 224px;
+		--space-6400: 256px;
+
+		//Company Main Brand Core colors
+		--color-brand-ow: #D34037;
+		--color-hover-brand-ow: #F05C48;
+		--color-brand-cf: #EB622B;
+		--color-hover-brand-cf: #F18536;
+		--color-brand-tb: #41C4C3;
+		--color-hover-brand-tb: #5DE3E2;
+		--color-brand-el: #9FEAF9;
+		--color-brand-nt: #B5DF30;
+		--color-hover-brand-nt: #C4E559;
+
+			//Core Neutral colors
+	--color-neutral-0: #000000;
+	--color-neutral-8: #101010;
+	--color-neutral-16: #202020;
+	--color-neutral-24: #303030;
+	--color-neutral-32: #404040;
+	--color-neutral-40: #505050;
+	--color-neutral-48: #606060;
+	--color-neutral-80: #9F9F9F;
+	--color-neutral-88: #AFAFAF;
+	--color-neutral-96: #BFBFBF;
+	--color-neutral-104: #CFCFCF;
+	--color-neutral-112: #DFDFDF;
+	--color-neutral-120: #EFEFEF;
+	--color-neutral-128: #FFFFFF;
+
+	// Core infographic colors for Overwolf
+
+	--color-infographic-ow-1: var(--color-brand-ow);
+	--color-infographic-ow-2: #942B27;
+	--color-infographic-ow-3: #FFD2D0;
+	--color-infographic-ow-4: #FFA4A1;
+	--color-infographic-ow-5: #EC7068;
+
+	// Core Functional colors
+	--color-functional-critical-light: #FE3737;
+	--color-functional-critical-dark: #D93025;
+	--color-functional-warning-light: #E07400;
+	--color-functional-warning-dark: #C35404;
+	--color-functional-success-light: #32A100;
+	--color-functional-success-dark: #018901;
+	--color-functional-info-light: #2690E7;
+	--color-functional-info-dark: #0074C7;
+
+	// Core Alfa colors
+	--color-alfa-brand: rgba(211, 64, 55, 0.16);
+	--color-alfa-dark-8: rgba(255, 255, 255, 0.08);
+	--color-alfa-dark-12: rgba(255, 255, 255, 0.12);
+	--color-alfa-dark-16: rgba(255, 255, 255, 0.16);
+	--color-alfa-dark-32: rgba(255, 255, 255, 0.32);
+	--color-alfa-light-8: rgba(0, 0, 0, 0.08);
+	--color-alfa-light-12: rgba(0, 0, 0, 0.12);
+	--color-alfa-light-16: rgba(0, 0, 0, 0.16);
+	--color-alfa-light-32: rgba(0, 0, 0, 0.32);
+	--color-alfa-critical-16: rgba(217, 48, 37, 0.16);
+	--color-alfa-critical-64: rgba(217, 48, 37, 0.64);
+	--color-alfa-warning-16: rgba(195, 84, 4, 0.16);
+	--color-alfa-warning-64: rgba(195, 84, 4, 0.64);
+	--color-alfa-success-16: rgba(1, 137, 1, 0.16);
+	--color-alfa-success-64: rgba(1, 137, 1, 0.64);
+	--color-alfa-info-16: rgba(0, 116, 199, 0.16);
+	--color-alfa-info-64: rgba(0, 116, 199, 0.64);
+
+	// Surface colors
+	--color-surface-quaternary: var(--color-neutral-48);
+	--color-surface-invert: var(--color-neutral-128);
+	--color-surface-brand-ow: var(--color-brand-ow);
+	--color-surface-critical: var(--color-functional-critical-dark);
+	--color-surface-warning: var(--color-functional-warning-dark);
+	--color-surface-success: var(--color-functional-success-dark);
+	--color-surface-info: var(--color-functional-info-dark);
+	--color-surface-focus-brand-ow: var(--color-alfa-brand);
+	--color-hover-on-focus-brand-ow: var(--color-alfa-brand);
+	--color-surface-note-critical: var(--color-alfa-critical-16);
+	--color-surface-note-warning: var(--color-alfa-warning-16);
+	--color-surface-note-success: var(--color-alfa-success-16);
+	--color-surface-note-info: var(--color-alfa-info-16);
+
+	// Text colors
+	--color-text-invert: var(--color-neutral-0);
+	--color-text-cta-ow: var(--color-neutral-128);
+	--color-text-brand-ow: var(--color-brand-ow);
+	--color-text-hover-brand-ow: var(--color-hover-brand-ow);
+
+	// Icon colors
+	--color-icon-cta-ow-surface: var(--color-neutral-128);
+	--color-icon-brand-ow: var(--color-brand-ow);
+
+	// Border colors
+	--color-border-critical: var(--color-alfa-critical-64);
+	--color-border-warning: var(--color-alfa-warning-64);
+	--color-border-success: var(--color-alfa-success-64);
+	--color-border-info: var(--color-alfa-info-64);
+
+	/* old brand 2021 colors dark */
+	--color-100: #101010;
+	--color-120: #1a1a1a;
+	--color-150: #171717;
+	--color-220: #262626;
+	--color-250: #1C1C1C;
+	--color-300: #303030;
+	--color-333: #333333;
+	--color-400: #404040;
+	--color-450: #4D4D4D;
+	--color-500: #505050;
+	--color-700: #707070;
+	--color-800: #808080;
+	--color-900: #909090;
+	--color-1000: #AAAAAA;
+
+	--color-navbar: #121212;
+	--card-black: #151515;
+  --card-hover: #DADADA;
+	--color-grey: #B5B5B5;
+ 	--color-grey-1: #B2B2B2;
+	--color-grey-light: #E9E9E9;
+	--color-grey-light-2:#E5E5E5;
+	--color-grey-light-3: #F0F0F0;
+	--color-gray-active: #EDEDED;
+
+	--color-grey-4: #BDBDBD;
+	--color-grey-5: #D5D5D5;
+  --color-grey-9: #D9D9D9;
+	--color-txt: #CCCCCC;
+	--color-headline: #E2E2E2;
+	--color-dark-text: #636363;
+	--color-title-light: #f2f2f2;
+	--color-website-red: #C93D34;
+	--color-bg: #060606;
+	--color-light-bg: #0F0F0F;
+  --light-mode-bg: #F4F4F4;
+
+	--color-error: #F12717;
+	--redE5: #E50000;
+	--redFF: #FF3434;
+	--blue: #0085E5;
+	--orangeE0: #E07000;
+	--green45: #00CC45;
+
+	--admonition-tip: #34AFF4;
+	--admonition-warning: #ECB1A9;
+	--admonition-caution: #FE6E3A;
+	--admonition-important: #009944;
+
+	// unite brand 2023
+	--color-999: #999999;
+	--color-600: #606060;
+	--color-200: #202020;
+	--color-primary: #D34037; /* primary */
+	--color-primary-hover: #F3513E; /* primary hover */
+	--txt-secondary: #D6D6D6;
+	--color-white: #FFFFFF;
+	--color-black: #000000;
+	--secondary-bg: #0D0D0D;
+	--border-table: #1F1F1F;
+	--color-ui-success-dark: #32A912;
+	--icons-primary: #DFDFDF;
+	--icon-secondary: #9F9F9F;
+
+	//light mode
+	--light-border-color: #EBEBEB;
+
+}
+
+html[data-theme="light"] {
+	--color-surface-pure: #FFFFFF;
+	--color-surface-primary: #EFEFEF;
+	--color-surface-secondary: #DFDFDF;
+	--color-surface-tertiary: #CFCFCF;
+	--color-surface-invert: #000000;
+	--color-hover-on-surface:  rgba(0, 0, 0, 0.12);
+	--color-surface-note-regular: rgba(0, 0, 0, 0.16);
+	--color-text-pure: #000000;
+	--color-text-primary: #202020;
+	--color-text-secondary: #404040;
+	--color-text-tertiary: #606060;
+	--color-text-invert: #FFFFFF;
+	--color-text-critical: #D93025;
+	--color-text-warning: #C35404;
+	--color-text-success: #018901;
+	--color-text-info: #0074C7;
+	--color-icon-pure: #000000;
+	--color-icon-primary: #000000;
+	--color-icon-secondary: #606060;
+	--color-icon-critical: #D93025;
+	--color-icon-warning: #C35404;
+	--color-icon-success: #018901;
+	--color-icon-info: #0074C7;
+	--color-border-primary: #202020;
+	--color-border-secondary: #606060;
+	--color-border-tertiary: #BFBFBF;
+	--color-border-note: rgba(0, 0, 0, 0.32);
+}
+
+html[data-theme="dark"] {
+	--color-surface-pure: var(--color-neutral-0);
+	--color-surface-primary: var(--color-neutral-8);
+	--color-surface-secondary: var(--color-neutral-16);
+	--color-surface-tertiary: var(--color-neutral-24);
+	--color-surface-invert: var(--color-neutral-128);
+	--color-hover-on-surface: var(--color-alfa-dark-12);
+	--color-surface-note-regular: var(--color-alfa-dark-16);
+	--color-text-pure: var(--color-neutral-128);
+	--color-text-primary: var(--color-neutral-112);
+	--color-text-secondary: var(--color-neutral-96);
+	--color-text-tertiary: var(--color-neutral-80);
+	--color-text-invert: var(--color-neutral-0);
+	--color-text-critical: var(--color-functional-critical-light);
+	--color-text-warning: var(--color-functional-warning-light);
+	--color-text-success: var(--color-functional-success-light);
+	--color-text-info: var(--color-functional-info-light);
+	--color-icon-pure: var(--color-neutral-128);
+	--color-icon-primary: var(--color-neutral-112);
+	--color-icon-secondary: var(--color-neutral-80);
+	--color-icon-critical: var(--color-functional-critical-light);
+	--color-icon-warning: var(--color-functional-warning-light);
+	--color-icon-success: var(--color-functional-success-light);
+	--color-icon-info: var(--color-functional-info-light);
+	--color-border-primary: var(--color-neutral-112);
+	--color-border-secondary: var(--color-neutral-80);
+	--color-border-tertiary: var(--color-neutral-24);
+	--color-border-note: var(--color-alfa-dark-32);
+}
diff --git a/src/css/overide.scss b/src/css/overide.scss
@@ -183,7 +183,8 @@ div[class^="tableOfContents"] {
   margin-bottom: 0 !important;
 
   .breadcrumbs {
-    padding: var(--space-600) 0px var(--space-800) 0px;
+    padding: var(--space-500) 0px var(--space-800) 0px;
+    margin: 0;
 
     &__item {
       font-family: var(--font-family-brand);
@@ -192,6 +193,10 @@ div[class^="tableOfContents"] {
       line-height: var(--font-line-height-400);
       letter-spacing: var(--font-letter-spacing-default);
 
+      + li {
+        margin-top: 0;
+      }
+
       &:not(:last-child):after {
         width: 20px;
         height: 10px;
@@ -631,11 +636,11 @@ img[alt*="light-theme"], img[alt*="dark-theme"], img[alt*="mobile-light"], img[a
 .tabs-container {
   background-color: #E5E5E5;
   padding: 0 24px 32px;
+
   .tabs {
     border-bottom: 1px solid #B2B2B2;
     padding: 0;
 
-
     .tabs__item {
       font-size: 16px;
       color: #4d4d4d;
@@ -646,6 +651,10 @@ img[alt*="light-theme"], img[alt*="dark-theme"], img[alt*="mobile-light"], img[a
         font-size: 14px;
       }
 
+      &::before {
+        display: none;
+      }
+
       &:after {
         content: attr(data-text);
         content: attr(data-text) / "";