semrush · sheila-semrush · Jul 19, 2025 · Jul 28, 2025 · Aug 4, 2025 · Aug 25, 2025
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/semcore/core/src/theme/light.json b/semcore/core/src/theme/light.json
@@ -2462,11 +2462,42 @@
       },
       "border": {
         "primary": {
-          "value": "{violet.dusty.700}",
+          "value": "transparent",
           "type": "color"
         },
         "secondary": {
-          "value": "rgba(255,255,255,0.15)",
+          "value": "rgba({gray.white}, 0.15)",
+          "type": "color"
+        }
+      },
+      "control": {
+        "secondary": {
+          "value": "{violet.dusty.600}",
+          "type": "color"
+        },
+        "secondary-hover": {
+          "value": "{violet.dusty.500}",
+          "type": "color"
+        },
+        "secondary-active": {
+          "value": "{violet.dusty.500}",
+          "type": "color",
+          "$extensions": {
+            "studio.tokens": {
+              "modify": {
+                "type": "lighten",
+                "value": "0.15",
+                "space": "hsl"
+              }
+            }
+          }
+        },
+        "tertiary-hover": {
+          "value": "{violet.dusty.600}",
+          "type": "color"
+        },
+        "tertiary-active": {
+          "value": "{violet.dusty.500}",
           "type": "color"
         }
       }

diff --git a/semcore/core/src/theme/themes/auto.css b/semcore/core/src/theme/themes/auto.css
@@ -828,8 +828,13 @@
   /* Background color for the "Start tracking" date on the X-axis of the chart grid. */
   --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(0, 159, 129, 0.2);
   --intergalactic-header-bg: #382E5E;
-  --intergalactic-header-border-primary: #382E5E;
-  --intergalactic-header-border-secondary: rgba(255,255,255, 0.15);
+  --intergalactic-header-border-primary: transparent;
+  --intergalactic-header-border-secondary: rgba(255, 255, 255, 0.15);
+  --intergalactic-header-control-secondary: #4D407E;
+  --intergalactic-header-control-secondary-hover: #6D619F;
+  --intergalactic-header-control-secondary-active: #8379ad;
+  --intergalactic-header-control-tertiary-hover: #4D407E;
+  --intergalactic-header-control-tertiary-active: #6D619F;
   --intergalactic-sidebar-nav-control-hover: rgba(224, 225, 233, 0.7);
   --intergalactic-sidebar-nav-control-active: #E2DDFF;
   --intergalactic-sidebar-nav-control-text-normal: #6D619F;

diff --git a/semcore/core/src/theme/themes/default.css b/semcore/core/src/theme/themes/default.css
@@ -828,8 +828,13 @@
   /* Background color for the "Start tracking" date on the X-axis of the chart grid. */
   --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(0, 159, 129, 0.2);
   --intergalactic-header-bg: #382E5E;
-  --intergalactic-header-border-primary: #382E5E;
-  --intergalactic-header-border-secondary: rgba(255,255,255, 0.15);
+  --intergalactic-header-border-primary: transparent;
+  --intergalactic-header-border-secondary: rgba(255, 255, 255, 0.15);
+  --intergalactic-header-control-secondary: #4D407E;
+  --intergalactic-header-control-secondary-hover: #6D619F;
+  --intergalactic-header-control-secondary-active: #8379ad;
+  --intergalactic-header-control-tertiary-hover: #4D407E;
+  --intergalactic-header-control-tertiary-active: #6D619F;
   --intergalactic-sidebar-nav-control-hover: rgba(224, 225, 233, 0.7);
   --intergalactic-sidebar-nav-control-active: #E2DDFF;
   --intergalactic-sidebar-nav-control-text-normal: #6D619F;

diff --git a/semcore/core/src/theme/themes/default.ts b/semcore/core/src/theme/themes/default.ts
@@ -459,8 +459,13 @@ export default {
   '--intergalactic-chart-x-axis-accent-period-active': '#6c6e79',
   '--intergalactic-chart-x-axis-accent-data-start-tracking': 'rgba(0, 159, 129, 0.2)',
   '--intergalactic-header-bg': '#382E5E',
-  '--intergalactic-header-border-primary': '#382E5E',
-  '--intergalactic-header-border-secondary': 'rgba(255,255,255, 0.15)',
+  '--intergalactic-header-border-primary': 'transparent',
+  '--intergalactic-header-border-secondary': 'rgba(255, 255, 255, 0.15)',
+  '--intergalactic-header-control-secondary': '#4D407E',
+  '--intergalactic-header-control-secondary-hover': '#6D619F',
+  '--intergalactic-header-control-secondary-active': '#8379ad',
+  '--intergalactic-header-control-tertiary-hover': '#4D407E',
+  '--intergalactic-header-control-tertiary-active': '#6D619F',
   '--intergalactic-sidebar-nav-control-hover': 'rgba(224, 225, 233, 0.7)',
   '--intergalactic-sidebar-nav-control-active': '#E2DDFF',
   '--intergalactic-sidebar-nav-control-text-normal': '#6D619F',

diff --git a/semcore/core/src/theme/themes/light.css b/semcore/core/src/theme/themes/light.css
@@ -828,8 +828,13 @@
   /* Background color for the "Start tracking" date on the X-axis of the chart grid. */
   --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(0, 159, 129, 0.2);
   --intergalactic-header-bg: #382E5E;
-  --intergalactic-header-border-primary: #382E5E;
-  --intergalactic-header-border-secondary: rgba(255,255,255, 0.15);
+  --intergalactic-header-border-primary: transparent;
+  --intergalactic-header-border-secondary: rgba(255, 255, 255, 0.15);
+  --intergalactic-header-control-secondary: #4D407E;
+  --intergalactic-header-control-secondary-hover: #6D619F;
+  --intergalactic-header-control-secondary-active: #8379ad;
+  --intergalactic-header-control-tertiary-hover: #4D407E;
+  --intergalactic-header-control-tertiary-active: #6D619F;
   --intergalactic-sidebar-nav-control-hover: rgba(224, 225, 233, 0.7);
   --intergalactic-sidebar-nav-control-active: #E2DDFF;
   --intergalactic-sidebar-nav-control-text-normal: #6D619F;

diff --git a/semcore/core/src/theme/themes/light.ts b/semcore/core/src/theme/themes/light.ts
@@ -459,8 +459,13 @@ export default {
   '--intergalactic-chart-x-axis-accent-period-active': '#6c6e79',
   '--intergalactic-chart-x-axis-accent-data-start-tracking': 'rgba(0, 159, 129, 0.2)',
   '--intergalactic-header-bg': '#382E5E',
-  '--intergalactic-header-border-primary': '#382E5E',
-  '--intergalactic-header-border-secondary': 'rgba(255,255,255, 0.15)',
+  '--intergalactic-header-border-primary': 'transparent',
+  '--intergalactic-header-border-secondary': 'rgba(255, 255, 255, 0.15)',
+  '--intergalactic-header-control-secondary': '#4D407E',
+  '--intergalactic-header-control-secondary-hover': '#6D619F',
+  '--intergalactic-header-control-secondary-active': '#8379ad',
+  '--intergalactic-header-control-tertiary-hover': '#4D407E',
+  '--intergalactic-header-control-tertiary-active': '#6D619F',
   '--intergalactic-sidebar-nav-control-hover': 'rgba(224, 225, 233, 0.7)',
   '--intergalactic-sidebar-nav-control-active': '#E2DDFF',
   '--intergalactic-sidebar-nav-control-text-normal': '#6D619F',

diff --git a/semcore/core/src/theme/utils.ts b/semcore/core/src/theme/utils.ts
@@ -168,7 +168,7 @@ export const processTokens = (base: TokensInput, tokens: TokensInput, featureHig
       }
       return resolvedColor;
     }
-    if (color.startsWith('#')) {
+    if (color.startsWith('#') || color === 'transparent') {
       return color;
     }
     throw new Error(`Unable to process color ${color}`);

diff --git a/semcore/header-controls/.npmignore b/semcore/header-controls/.npmignore
@@ -0,0 +1,4 @@
+node_modules
+__tests__
+src
+tsconfig.json
diff --git a/semcore/header-controls/CHANGELOG.md b/semcore/header-controls/CHANGELOG.md
@@ -0,0 +1,9 @@
+# Changelog
+
+CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
+
+## [16.0.0] - 2025-07-18
+
+### Added
+
+- Initial release.
diff --git a/semcore/header-controls/README.md b/semcore/header-controls/README.md
@@ -0,0 +1,39 @@
+# @semcore/header-controls
+
+[![version](https://img.shields.io/npm/v/@semcore/core.svg)](https://www.npmjs.com/@semcore/header-controls)
+[![downloads](https://img.shields.io/npm/dt/@semcore/core.svg)](https://www.npmjs.com/package/@semcore/header-controls)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/semrush/intergalactic/blob/master/LICENSE)
+
+> This component is part of the Intergalactic Design System
+
+[//]: # '### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/core/)'
+
+### 🏠 [Design system](https://developer.semrush.com/intergalactic/)
+
+## Install
+
+```sh
+npm install @semcore/header-controls
+```
+
+
+
+## 👤 Author
+
+[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS)
+and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
+
+## 🤝 Contributing
+
+Contributions, issues and feature requests are welcome!
+
+Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at
+the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
+
+## Show your support
+
+Give a ⭐️ if this project helped you!
+
+## 📝 License
+
+This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.
diff --git a/semcore/header-controls/package.json b/semcore/header-controls/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@semcore/header-controls",
+  "description": "Semrush toolkit for global header",
+  "version": "16.0.1",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.mjs",
+  "typings": "lib/types/index.d.ts",
+  "sideEffects": false,
+  "author": "UI-kit team <ui-kit-team@semrush.com>",
+  "license": "MIT",
+  "scripts": {
+    "build": "pnpm semcore-builder && pnpm vite build"
+  },
+  "exports": {
+    ".": {
+      "require": "./lib/cjs/index.js",
+      "import": "./lib/esm/index.mjs",
+      "types": "./lib/types/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@semcore/base-trigger": "^16.0.0",
+    "@semcore/button": "^16.0.0",
+    "@semcore/input": "^16.0.0",
+    "@semcore/select": "^16.0.0",
+    "@semcore/typography": "^16.0.0"
+  },
+  "peerDependencies": {
+    "@semcore/base-components": "^16.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/semrush/intergalactic.git",
+    "directory": "semcore/header-controls"
+  },
+  "devDependencies": {
+    "@semcore/base-components": "workspace:*",
+    "@semcore/testing-utils": "workspace:*"
+  }
+}
diff --git a/semcore/header-controls/src/components/button-link/ButtonLink.tsx b/semcore/header-controls/src/components/button-link/ButtonLink.tsx
@@ -0,0 +1,19 @@
+import { ButtonLink } from '@semcore/button';
+import { createComponent, Root, sstyled, Component } from '@semcore/core';
+import React from 'react';
+
+import style from './buttonLink.shadow.css';
+
+class HeaderButtonLinkRoot extends Component {
+  static displayName = 'HeaderButtonLink';
+  static style = style;
+
+  render() {
+    const SHeaderButtonLink = Root;
+    return sstyled(this.asProps.styles)(
+      <SHeaderButtonLink render={ButtonLink} />,
+    );
+  }
+}
+
+export const HeaderButtonLink = createComponent(HeaderButtonLinkRoot) as typeof ButtonLink;
diff --git a/semcore/header-controls/src/components/button-link/buttonLink.shadow.css b/semcore/header-controls/src/components/button-link/buttonLink.shadow.css
@@ -0,0 +1,14 @@
+SButton:not([data-group-focused="true"]) {
+  color: var(--intergalactic-text-secondary-invert, rgba(255, 255, 255, 0.8));
+
+  &[active],
+  &:hover,
+  &:active,
+  &[enableVisited]:visited:hover {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+  }
+
+  &[enableVisited]:visited {
+    color: var(--intergalactic-text-secondary-invert, rgba(255, 255, 255, 0.8));
+  }
+}
diff --git a/semcore/header-controls/src/components/button/Button.tsx b/semcore/header-controls/src/components/button/Button.tsx
@@ -0,0 +1,23 @@
+import Button from '@semcore/button';
+import { createComponent, Root, sstyled, Component } from '@semcore/core';
+import React from 'react';
+
+import style from './button.shadow.css';
+
+class HeaderButtonRoot extends Component {
+  static displayName = 'HeaderButton';
+  static style = style;
+
+  static defaultProps = {
+    theme: 'invert',
+  };
+
+  render() {
+    const SHeaderButton = Root;
+    return sstyled(this.asProps.styles)(
+      <SHeaderButton render={Button} />,
+    );
+  }
+}
+
+export const HeaderButton = createComponent(HeaderButtonRoot) as typeof Button;