Merge pull request #162 from quid/feat/QUID-27300-platform-ui-update

ben-pyt · web-flow · commit afb88170df62 · 2022-09-22T03:24:19.000+08:00
feat: update colors to adapt platform UI design update
diff --git a/packages/react-core/src/Button/index.js b/packages/react-core/src/Button/index.js
@@ -155,7 +155,7 @@ const Button: React.StatelessFunctionalComponent<Props> & {
 
   ${wf(props => {
     const variations = {
-      primary: props.theme.colors.aqua,
+      primary: props.theme.primaryDefaultBg,
       secondary: props.theme.colors.gray2,
       okay: OKAY,
       warning: WARNING,
diff --git a/packages/react-date-picker/src/__snapshots__/Cell.test.js.snap b/packages/react-date-picker/src/__snapshots__/Cell.test.js.snap
@@ -137,7 +137,7 @@ exports[`renders the expected markup 2`] = `
   height: 36px;
   width: 30px;
   vertical-align: middle;
-  color: #00c1bb;
+  color: #72C3C6;
   font-family: IBM Plex Sans,Lucida Grande,Tahoma,Verdana,Arial,sans-serif;
   font-size: 14px;
   line-height: 1.57;
diff --git a/packages/react-forms/src/InputCheckbox/__snapshots__/index.test.js.snap b/packages/react-forms/src/InputCheckbox/__snapshots__/index.test.js.snap
@@ -110,7 +110,7 @@ exports[`renders a disabled InputCheckbox 1`] = `
   width: 18px;
   height: 18px;
   border-radius: 2px;
-  color: #00c1bb;
+  color: #72C3C6;
   border: 1px solid #8F9BA3;
   margin: 1px;
   overflow: hidden;
@@ -121,7 +121,7 @@ exports[`renders a disabled InputCheckbox 1`] = `
 
 .emotion-1:checked ~ .emotion-3 {
   color: #8F9BA3;
-  border: 1px solid #00c1bb;
+  border: 1px solid #72C3C6;
 }
 
 .emotion-3::before,
@@ -189,11 +189,11 @@ exports[`renders a disabled InputCheckbox 1`] = `
 }
 
 .emotion-1:checked:focus-visible ~ .emotion-3 {
-  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(0,193,187,0.8);
+  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(114,195,198,0.8);
 }
 
 .emotion-1:checked:focus-visible ~ .emotion-3:hover {
-  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(0,193,187,0.8),0 0 4px rgba(27,31,34,0.8);
+  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(114,195,198,0.8),0 0 4px rgba(27,31,34,0.8);
 }
 
 .emotion-3:hover {
@@ -293,7 +293,7 @@ exports[`renders an InputCheckbox 1`] = `
   width: 18px;
   height: 18px;
   border-radius: 2px;
-  color: #00c1bb;
+  color: #72C3C6;
   border: 1px solid #8F9BA3;
   margin: 1px;
   overflow: hidden;
@@ -302,8 +302,8 @@ exports[`renders an InputCheckbox 1`] = `
 }
 
 .emotion-1:checked ~ .emotion-3 {
-  color: #00c1bb;
-  border: 1px solid #00c1bb;
+  color: #72C3C6;
+  border: 1px solid #72C3C6;
 }
 
 .emotion-3::before,
@@ -371,11 +371,11 @@ exports[`renders an InputCheckbox 1`] = `
 }
 
 .emotion-1:checked:focus-visible ~ .emotion-3 {
-  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(0,193,187,0.8);
+  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(114,195,198,0.8);
 }
 
 .emotion-1:checked:focus-visible ~ .emotion-3:hover {
-  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(0,193,187,0.8),0 0 4px rgba(27,31,34,0.8);
+  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(114,195,198,0.8),0 0 4px rgba(27,31,34,0.8);
 }
 
 .emotion-3:hover {
diff --git a/packages/react-forms/src/InputColor/__snapshots__/index.test.js.snap b/packages/react-forms/src/InputColor/__snapshots__/index.test.js.snap
@@ -11,7 +11,7 @@ exports[`renders the expected markup 1`] = `
 }
 
 .emotion-9:focus-within {
-  border-color: #00c1bb;
+  border-color: #72C3C6;
 }
 
 .emotion-9[data-invalid='true'] {
diff --git a/packages/react-forms/src/InputDate/__snapshots__/index.test.js.snap b/packages/react-forms/src/InputDate/__snapshots__/index.test.js.snap
@@ -33,7 +33,7 @@ exports[`renders the expected markup 1`] = `
 
 .emotion-8:focus-within,
 .emotion-8 {
-  border-color: #00c1bb;
+  border-color: #72C3C6;
 }
 
 .emotion-0 {
@@ -233,4 +233,4 @@ exports[`renders the expected markup 1`] = `
     selected={2019-01-01T00:00:00.000Z}
   />
 </x-manager>
-`;
+`;
diff --git a/packages/react-forms/src/InputFile/__snapshots__/index.test.js.snap b/packages/react-forms/src/InputFile/__snapshots__/index.test.js.snap
@@ -11,7 +11,7 @@ exports[`renders an InputFile 1`] = `
 }
 
 .emotion-7:focus-within {
-  border-color: #00c1bb;
+  border-color: #72C3C6;
 }
 
 .emotion-7[data-invalid='true'] {
diff --git a/packages/react-forms/src/InputGroup/__snapshots__/index.test.js.snap b/packages/react-forms/src/InputGroup/__snapshots__/index.test.js.snap
@@ -11,7 +11,7 @@ exports[`applies the expected class names 1`] = `
 }
 
 .emotion-5:focus-within {
-  border-color: #00c1bb;
+  border-color: #72C3C6;
 }
 
 .emotion-5[data-invalid='true'] {
diff --git a/packages/react-forms/src/InputRadio/__snapshots__/index.test.js.snap b/packages/react-forms/src/InputRadio/__snapshots__/index.test.js.snap
@@ -24,15 +24,15 @@ exports[`renders a disabled InputRadio 1`] = `
 
 .emotion-1:checked ~ .emotion-3 {
   border-width: 5px;
-  border-color: #00c1bb;
+  border-color: #72C3C6;
 }
 
 .emotion-1:focus-visible ~ .emotion-3 {
-  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(0,193,187,0.8);
+  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(114,195,198,0.8);
 }
 
 .emotion-1:focus-visible ~ .emotion-3:hover {
-  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(0,193,187,0.8),0 0 4px rgba(27,31,34,0.8);
+  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(114,195,198,0.8),0 0 4px rgba(27,31,34,0.8);
 }
 
 .emotion-3:hover {
@@ -93,15 +93,15 @@ exports[`renders an InputRadio 1`] = `
 
 .emotion-1:checked ~ .emotion-3 {
   border-width: 5px;
-  border-color: #00c1bb;
+  border-color: #72C3C6;
 }
 
 .emotion-1:focus-visible ~ .emotion-3 {
-  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(0,193,187,0.8);
+  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(114,195,198,0.8);
 }
 
 .emotion-1:focus-visible ~ .emotion-3:hover {
-  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(0,193,187,0.8),0 0 4px rgba(27,31,34,0.8);
+  box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(114,195,198,0.8),0 0 4px rgba(27,31,34,0.8);
 }
 
 .emotion-3:hover {
diff --git a/packages/react-forms/src/InputRange/__snapshots__/index.test.js.snap b/packages/react-forms/src/InputRange/__snapshots__/index.test.js.snap
@@ -68,11 +68,11 @@ exports[`renders a Track component 2`] = `
 exports[`renders an InputRange 1`] = `
 @keyframes animation-0 {
   from {
-    box-shadow: 0 0 0 0 rgba(0,167,184,0.26);
+    box-shadow: 0 0 0 0 rgba(114,195,198,0.26);
   }
 
   to {
-    box-shadow: 0 0 0 3px rgba(0,167,184,0.26);
+    box-shadow: 0 0 0 3px rgba(114,195,198,0.26);
   }
 }
 
@@ -111,7 +111,7 @@ exports[`renders an InputRange 1`] = `
 }
 
 .emotion-0 {
-  color: #00c1bb;
+  color: #72C3C6;
 }
 
 .emotion-6 {
@@ -122,15 +122,15 @@ exports[`renders an InputRange 1`] = `
   right: 0;
   height: 100%;
   width: 100%;
-  color: #00c1bb;
+  color: #72C3C6;
 }
 
 .emotion-4 {
   color: #6C7983;
 }
 
 .emotion-13 {
-  color: #00c1bb;
+  color: #72C3C6;
   top: 50%;
   left: 0;
   position: absolute;
diff --git a/packages/react-forms/src/InputText/__snapshots__/index.test.js.snap b/packages/react-forms/src/InputText/__snapshots__/index.test.js.snap
@@ -36,7 +36,7 @@ exports[`renders the expected markup 1`] = `
 }
 
 .emotion-3:focus-within {
-  border-color: #00c1bb;
+  border-color: #72C3C6;
 }
 
 .emotion-0 {
diff --git a/packages/react-forms/src/InputToggle/__snapshots__/index.test.js.snap b/packages/react-forms/src/InputToggle/__snapshots__/index.test.js.snap
@@ -21,11 +21,11 @@ exports[`renders a disabled InputToggle 1`] = `
 }
 
 .emotion-0:checked.emotion-0:focus-visible ~ .emotion-5 {
-  box-shadow: 0 0 2px 2px rgba(0,193,187,0.8);
+  box-shadow: 0 0 2px 2px rgba(114,195,198,0.8);
 }
 
 .emotion-0:checked ~ .emotion-3 {
-  background-color: #00c1bb;
+  background-color: #72C3C6;
 }
 
 .emotion-0:checked ~ .emotion-5 {
@@ -142,11 +142,11 @@ exports[`renders an InputToggle 1`] = `
 }
 
 .emotion-0:checked.emotion-0:focus-visible ~ .emotion-5 {
-  box-shadow: 0 0 2px 2px rgba(0,193,187,0.8);
+  box-shadow: 0 0 2px 2px rgba(114,195,198,0.8);
 }
 
 .emotion-0:checked ~ .emotion-3 {
-  background-color: #00c1bb;
+  background-color: #72C3C6;
 }
 
 .emotion-0:checked ~ .emotion-5 {
diff --git a/packages/react-layouts/src/Tabs/__snapshots__/index.test.js.snap b/packages/react-layouts/src/Tabs/__snapshots__/index.test.js.snap
@@ -80,7 +80,7 @@ exports[`should match a Tabs example 1`] = `
   padding: 10px;
   line-height: 1;
   background-color: #E3E6E8;
-  color: #00c1bb;
+  color: #72C3C6;
 }
 
 .emotion-0:focus:not(:focus-visible) {
diff --git a/packages/react-popover/src/__snapshots__/index.test.js.snap b/packages/react-popover/src/__snapshots__/index.test.js.snap
@@ -51,36 +51,43 @@ exports[`renders the Arrow component 1`] = `
         "gray6": "#2E3338",
         "gray7": "#1B1F22",
         "green": "#039849",
-        "highlighted": "rgba(0, 193, 187, 0.6)",
+        "highlighted": "rgba(114, 195, 198, 0.3)",
         "lemon": "#EAE962",
         "lilac": "#9581BC",
         "lime": "#87C445",
-        "link": "#3C8790",
+        "link": "#72C3C6",
         "margenta": "#B22264",
         "orange": "#F9621E",
         "peach": "#F4A467",
         "pink": "#D72E8E",
         "purple": "#A8499A",
-        "quidTeal": "#00a7b8",
+        "quidTeal": "#72C3C6",
         "red": "#E61E27",
         "rose": "#BF8092",
-        "selected": "#00c1bb",
+        "selected": "#72C3C6",
         "sky": "#A6DEF3",
         "tan": "#C1966B",
         "teal": "#317C85",
+        "teal1000": "#0B5B5E",
+        "teal300": "#91D1D4",
+        "teal400": "#72C3C6",
+        "teal840": "#13797D",
+        "teal900": "#106F73",
         "white": "#FFFFFF",
         "yellow": "#FFCE03",
       },
       "disabled": "#8F9BA3",
-      "link": "#3C8790",
+      "link": "#13797D",
       "popover": Object {
         "backgroundColor": "#FFFFFF",
         "borderColor": "#E3E6E8",
       },
       "primary": "#2E3338",
+      "primaryDefaultBg": "#13797D",
+      "primaryHoverBg": "#106F73",
       "primaryInverse": "#E3E6E8",
       "secondary": "#6C7983",
-      "selected": "#00c1bb",
+      "selected": "#72C3C6",
       "shadow": "#121212",
       "sizes": Object {
         "large": "20px",
@@ -173,36 +180,43 @@ exports[`renders the Container component 1`] = `
         "gray6": "#2E3338",
         "gray7": "#1B1F22",
         "green": "#039849",
-        "highlighted": "rgba(0, 193, 187, 0.6)",
+        "highlighted": "rgba(114, 195, 198, 0.3)",
         "lemon": "#EAE962",
         "lilac": "#9581BC",
         "lime": "#87C445",
-        "link": "#3C8790",
+        "link": "#72C3C6",
         "margenta": "#B22264",
         "orange": "#F9621E",
         "peach": "#F4A467",
         "pink": "#D72E8E",
         "purple": "#A8499A",
-        "quidTeal": "#00a7b8",
+        "quidTeal": "#72C3C6",
         "red": "#E61E27",
         "rose": "#BF8092",
-        "selected": "#00c1bb",
+        "selected": "#72C3C6",
         "sky": "#A6DEF3",
         "tan": "#C1966B",
         "teal": "#317C85",
+        "teal1000": "#0B5B5E",
+        "teal300": "#91D1D4",
+        "teal400": "#72C3C6",
+        "teal840": "#13797D",
+        "teal900": "#106F73",
         "white": "#FFFFFF",
         "yellow": "#FFCE03",
       },
       "disabled": "#8F9BA3",
-      "link": "#3C8790",
+      "link": "#13797D",
       "popover": Object {
         "backgroundColor": "#FFFFFF",
         "borderColor": "#E3E6E8",
       },
       "primary": "#2E3338",
+      "primaryDefaultBg": "#13797D",
+      "primaryHoverBg": "#106F73",
       "primaryInverse": "#E3E6E8",
       "secondary": "#6C7983",
-      "selected": "#00c1bb",
+      "selected": "#72C3C6",
       "shadow": "#121212",
       "sizes": Object {
         "large": "20px",
diff --git a/packages/theme/src/__snapshots__/colors.test.js.snap b/packages/theme/src/__snapshots__/colors.test.js.snap
@@ -17,23 +17,28 @@ Object {
   "gray6": "#2E3338",
   "gray7": "#1B1F22",
   "green": "#039849",
-  "highlighted": "rgba(0, 193, 187, 0.6)",
+  "highlighted": "rgba(114, 195, 198, 0.3)",
   "lemon": "#EAE962",
   "lilac": "#9581BC",
   "lime": "#87C445",
-  "link": "#3C8790",
+  "link": "#72C3C6",
   "margenta": "#B22264",
   "orange": "#F9621E",
   "peach": "#F4A467",
   "pink": "#D72E8E",
   "purple": "#A8499A",
-  "quidTeal": "#00a7b8",
+  "quidTeal": "#72C3C6",
   "red": "#E61E27",
   "rose": "#BF8092",
-  "selected": "#00c1bb",
+  "selected": "#72C3C6",
   "sky": "#A6DEF3",
   "tan": "#C1966B",
   "teal": "#317C85",
+  "teal1000": "#0B5B5E",
+  "teal300": "#91D1D4",
+  "teal400": "#72C3C6",
+  "teal840": "#13797D",
+  "teal900": "#106F73",
   "white": "#FFFFFF",
   "yellow": "#FFCE03",
 }
diff --git a/packages/theme/src/__snapshots__/textStyles.test.js.snap b/packages/theme/src/__snapshots__/textStyles.test.js.snap
@@ -26,9 +26,9 @@ exports[`works with "withFallback" powered styles 1`] = `
   color: #2E3338;
   color: #6C7983;
   color: #8F9BA3;
-  color: #3C8790;
+  color: #13797D;
   cursor: pointer;
-  color: rgba(0,193,187,0.6);
+  color: rgba(114,195,198,0.3);
   line-height: 1.57;
   font-family: IBM Plex Serif,Gudea,Lucida Grande,Tahoma,Verdana,Arial,sans-serif;
 }
diff --git a/packages/theme/src/colors.js b/packages/theme/src/colors.js
diff --git a/packages/theme/src/themes/dark.js b/packages/theme/src/themes/dark.js
diff --git a/packages/theme/src/themes/light.js b/packages/theme/src/themes/light.js

Original file line number	Diff line number	Diff line change
@@ -11,7 +11,7 @@ exports[`renders the expected markup 1`] = `
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`.emotion-9:focus-within {`
`14`		`- border-color: #00c1bb;`
	`14`	`+ border-color: #72C3C6;`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.emotion-9[data-invalid='true'] {`
Original file line number	Diff line number	Diff line change
@@ -11,7 +11,7 @@ exports[`renders an InputFile 1`] = `
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`.emotion-7:focus-within {`
`14`		`- border-color: #00c1bb;`
	`14`	`+ border-color: #72C3C6;`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.emotion-7[data-invalid='true'] {`
Original file line number	Diff line number	Diff line change
@@ -11,7 +11,7 @@ exports[`applies the expected class names 1`] = `
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`.emotion-5:focus-within {`
`14`		`- border-color: #00c1bb;`
	`14`	`+ border-color: #72C3C6;`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.emotion-5[data-invalid='true'] {`
Original file line number	Diff line number	Diff line change
@@ -24,15 +24,15 @@ exports[`renders a disabled InputRadio 1`] = `
`24`	`24`
`25`	`25`	`.emotion-1:checked ~ .emotion-3 {`
`26`	`26`	`border-width: 5px;`
`27`		`- border-color: #00c1bb;`
	`27`	`+ border-color: #72C3C6;`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`.emotion-1:focus-visible ~ .emotion-3 {`
`31`		`- box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(0,193,187,0.8);`
	`31`	`+ box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(114,195,198,0.8);`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`.emotion-1:focus-visible ~ .emotion-3:hover {`
`35`		`- box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(0,193,187,0.8),0 0 4px rgba(27,31,34,0.8);`
	`35`	`+ box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(114,195,198,0.8),0 0 4px rgba(27,31,34,0.8);`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`.emotion-3:hover {`
@@ -93,15 +93,15 @@ exports[`renders an InputRadio 1`] = `
`93`	`93`
`94`	`94`	`.emotion-1:checked ~ .emotion-3 {`
`95`	`95`	`border-width: 5px;`
`96`		`- border-color: #00c1bb;`
	`96`	`+ border-color: #72C3C6;`
`97`	`97`	`}`
`98`	`98`
`99`	`99`	`.emotion-1:focus-visible ~ .emotion-3 {`
`100`		`- box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(0,193,187,0.8);`
	`100`	`+ box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(114,195,198,0.8);`
`101`	`101`	`}`
`102`	`102`
`103`	`103`	`.emotion-1:focus-visible ~ .emotion-3:hover {`
`104`		`- box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(0,193,187,0.8),0 0 4px rgba(27,31,34,0.8);`
	`104`	`+ box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px rgba(114,195,198,0.8),0 0 4px rgba(27,31,34,0.8);`
`105`	`105`	`}`
`106`	`106`
`107`	`107`	`.emotion-3:hover {`
Original file line number	Diff line number	Diff line change
@@ -68,11 +68,11 @@ exports[`renders a Track component 2`] = `
`68`	`68`	exports[`renders an InputRange 1`] = `
`69`	`69`	`@keyframes animation-0 {`
`70`	`70`	`from {`
`71`		`- box-shadow: 0 0 0 0 rgba(0,167,184,0.26);`
	`71`	`+ box-shadow: 0 0 0 0 rgba(114,195,198,0.26);`
`72`	`72`	`}`
`73`	`73`
`74`	`74`	`to {`
`75`		`- box-shadow: 0 0 0 3px rgba(0,167,184,0.26);`
	`75`	`+ box-shadow: 0 0 0 3px rgba(114,195,198,0.26);`
`76`	`76`	`}`
`77`	`77`	`}`
`78`	`78`
@@ -111,7 +111,7 @@ exports[`renders an InputRange 1`] = `
`111`	`111`	`}`
`112`	`112`
`113`	`113`	`.emotion-0 {`
`114`		`- color: #00c1bb;`
	`114`	`+ color: #72C3C6;`
`115`	`115`	`}`
`116`	`116`
`117`	`117`	`.emotion-6 {`
@@ -122,15 +122,15 @@ exports[`renders an InputRange 1`] = `
`122`	`122`	`right: 0;`
`123`	`123`	`height: 100%;`
`124`	`124`	`width: 100%;`
`125`		`- color: #00c1bb;`
	`125`	`+ color: #72C3C6;`
`126`	`126`	`}`
`127`	`127`
`128`	`128`	`.emotion-4 {`
`129`	`129`	`color: #6C7983;`
`130`	`130`	`}`
`131`	`131`
`132`	`132`	`.emotion-13 {`
`133`		`- color: #00c1bb;`
	`133`	`+ color: #72C3C6;`
`134`	`134`	`top: 50%;`
`135`	`135`	`left: 0;`
`136`	`136`	`position: absolute;`
Original file line number	Diff line number	Diff line change
@@ -36,7 +36,7 @@ exports[`renders the expected markup 1`] = `
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`.emotion-3:focus-within {`
`39`		`- border-color: #00c1bb;`
	`39`	`+ border-color: #72C3C6;`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`.emotion-0 {`