SONAR-23136 Use new Echoes color tokens

3 files changed, 8 insertions, 4 deletions

diff --git a/server/sonar-web/design-system/src/components/input/InputField.tsx b/server/sonar-web/design-system/src/components/input/InputField.tsx
index 5b3c9a04e5e..a9501d15776 100644
--- a/server/sonar-web/design-system/src/components/input/InputField.tsx
+++ b/server/sonar-web/design-system/src/components/input/InputField.tsx
@@ -89,7 +89,7 @@ const baseStyle = (props: ThemedProps) => css`
   ${tw`sw-px-3 sw-py-2`}
 
   &::placeholder {
-    color: ${themeColor('inputPlaceholder')(props)};
+    color: var(--echoes-color-text-placeholder);
   }
 
   &:hover {
@@ -114,7 +114,7 @@ const baseStyle = (props: ThemedProps) => css`
 
     ${tw`sw-cursor-not-allowed`};
     &::placeholder {
-      color: ${themeContrast('inputDisabled')(props)};
+      color: var(--echoes-color-text-disabled);
     }
   }
 `;
diff --git a/server/sonar-web/design-system/src/components/input/InputSearch.tsx b/server/sonar-web/design-system/src/components/input/InputSearch.tsx
index fd60b082ca5..5acd32994b6 100644
--- a/server/sonar-web/design-system/src/components/input/InputSearch.tsx
+++ b/server/sonar-web/design-system/src/components/input/InputSearch.tsx
@@ -214,7 +214,7 @@ export const StyledInputWrapper = styled.div`
     ${tw`sw-w-full sw-h-control`}
 
     &::placeholder {
-      color: ${themeColor('inputPlaceholder')};
+      color: var(--echoes-color-text-placeholder);
 
       ${tw`sw-truncate`}
     }
diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/ToggleButton.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/ToggleButton.tsx
index 1c83381b8d7..c95e335862a 100644
--- a/server/sonar-web/design-system/src/sonar-aligned/components/ToggleButton.tsx
+++ b/server/sonar-web/design-system/src/sonar-aligned/components/ToggleButton.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import styled from '@emotion/styled';
 import tw from 'twin.macro';
 import { Badge } from '../../components/Badge';
@@ -90,9 +91,12 @@ const Wrapper = styled.div`
 
 const OptionButton = styled(ButtonSecondary)<{ selected: boolean }>`
   background: ${(props) => (props.selected ? themeColor('toggleHover') : themeColor('toggle'))};
-  color: ${(props) => (props.selected ? themeContrast('toggleHover') : themeContrast('toggle'))};
   border: none;
+  color: ${(props) => (props.selected ? themeContrast('toggleHover') : themeContrast('toggle'))};
+  font-weight: ${(props) =>
+    props.selected ? 'var(--echoes-font-weight-semi-bold)' : 'var(--echoes-font-weight-regular)'};
   height: auto;
+
   ${tw`sw-rounded-0`};
   ${tw`sw-truncate`};