@semcore/button 16.0.13-prerelease.9 → 16.1.0-prerelease.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/button",
   "description": "Semrush Button Component",
-  "version": "16.0.13-prerelease.9",
+  "version": "16.1.0-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,10 +14,13 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/spin": "16.0.11"
+    "@semcore/flex-box": "16.1.0-prerelease.0",
+    "@semcore/neighbor-location": "16.1.0-prerelease.0",
+    "@semcore/spin": "16.1.0-prerelease.0",
+    "@semcore/tooltip": "16.1.0-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.4.3-prerelease.9"
+    "@semcore/base-components": "^16.6.0-prerelease.0"
   },
   "repository": {
     "type": "git",
@@ -25,10 +28,10 @@
     "directory": "semcore/button"
   },
   "devDependencies": {
-    "@semcore/core": "16.5.1",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/icon": "16.7.2-prerelease.9",
-    "@semcore/base-components": "16.4.3-prerelease.9"
+    "@semcore/core": "16.6.0-prerelease.0",
+    "@semcore/icon": "16.8.0-prerelease.0",
+    "@semcore/base-components": "16.6.0-prerelease.0"
   },
   "scripts": {
     "build": "pnpm semcore-builder && pnpm vite build"

package/src/component/AbstractButton/AbstractButton.tsx

@@ -1,8 +1,10 @@
-import { NeighborLocation, Box, Hint } from '@semcore/base-components';
 import { Component, CORE_INSTANCE, Root, sstyled } from '@semcore/core';
 import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
 import hasLabels from '@semcore/core/lib/utils/hasLabels';
 import logger from '@semcore/core/lib/utils/logger';
+import { Box } from '@semcore/flex-box';
+import NeighborLocation from '@semcore/neighbor-location';
+import { Hint } from '@semcore/tooltip';
 import React from 'react';
 
 import type { AbstractButtonProps } from './AbstractButton.type';
@@ -16,16 +18,12 @@ export const MAP_USE_DEFAULT_THEME: Record<string, string> = {
 
 type Props = AbstractButtonProps<any, any, any>;
 
-type State = {
-  ariaLabelledByContent: null | string;
-};
-
-export abstract class AbstractButton extends Component<Props, [], never, {}, State> {
+export abstract class AbstractButton extends Component<Props, {}, {}> {
   static displayName = 'AbstractButton';
 
   containerRef = React.createRef<HTMLButtonElement>();
 
-  state: State = {
+  state = {
     ariaLabelledByContent: null,
   };
 
@@ -72,6 +70,28 @@ export abstract class AbstractButton extends Component<Props, [], never, {}, Sta
     }
   }
 
+  renderButton({ buttonProps, children }: any) {
+    const { styles, theme } = this.asProps;
+    const SButton = Root;
+
+    return sstyled(styles)(
+      <SButton render={Box} invertOutline={theme === 'invert'} {...buttonProps}>
+        {children}
+      </SButton>,
+    );
+  }
+
+  renderButtonWithHint({ buttonProps, children, hintProps }: any) {
+    const { styles, theme } = this.asProps;
+    const SButton = Root;
+
+    return sstyled(styles)(
+      <SButton render={Hint} invertOutline={theme === 'invert'} {...buttonProps} {...hintProps} ignorePortalsStacking>
+        {children}
+      </SButton>,
+    );
+  }
+
   render() {
     const {
       styles,
@@ -81,7 +101,7 @@ export abstract class AbstractButton extends Component<Props, [], never, {}, Sta
       disabled = loading,
       size,
       neighborLocation,
-      children,
+      children: hasChildren,
       title,
       ['aria-label']: ariaLabel,
       Children,
@@ -89,7 +109,6 @@ export abstract class AbstractButton extends Component<Props, [], never, {}, Sta
       addonRight: AddonRight,
       hintPlacement,
     } = this.asProps;
-    const SButton = Root;
     // @ts-ignore
     const Button = this[CORE_INSTANCE];
     const useTheme = use && theme ? `${use}-${theme}` : false;
@@ -97,63 +116,63 @@ export abstract class AbstractButton extends Component<Props, [], never, {}, Sta
     const SSpin = Box;
     const buttonAriaLabel = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? '';
 
-    const showHint = (children === undefined || title);
+    const buttonProps: Record<string, any> = {
+      'type': 'button',
+      'tag': 'button',
+      disabled,
+      'use:theme': useTheme,
+      'ref': this.containerRef,
+      'text-color': this.getTextColor(),
+      'aria-busy': loading,
+      '__excludeProps': ['title'],
+      'tabIndex': 0,
+    };
+
+    const hintProps = {
+      title: buttonAriaLabel,
+      timeout: [250, 50],
+      placement: hintPlacement,
+      theme: theme === 'invert' ? 'invert' : undefined,
+      __excludeProps: [],
+    };
 
     return (
       <NeighborLocation.Detect neighborLocation={neighborLocation}>
         {(neighborLocation) => {
-          return sstyled(styles)(
+          const children = sstyled(styles)(
             <>
-              <SButton
-                render={Box}
-                invertOutline={theme === 'invert'}
-                type='button'
-                tag='button'
-                tabIndex={0}
-                disabled={disabled}
-                use:theme={useTheme}
-                ref={this.containerRef}
-                text-color={this.getTextColor()}
-                aria-busy={loading}
-                __excludeProps={['title']}
-                aria-label={showHint ? buttonAriaLabel : undefined}
-                neighborLocation={neighborLocation}
-              >
-                {/* @ts-ignore */}
-                <SInner tag='span' loading={loading} data-ui-name={`${this.asProps['data-ui-name']}.InnerWrapper`}>
-                  {AddonLeft
-                    ? (
-                        <Button.Addon>
-                          <AddonLeft />
-                        </Button.Addon>
-                      )
-                    : null}
-                  {addonTextChildren(Children, Button.Text, Button.Addon)}
-                  {AddonRight
-                    ? (
-                        <Button.Addon>
-                          <AddonRight />
-                        </Button.Addon>
-                      )
-                    : null}
-                </SInner>
-                {loading && (
-                  <SSpin tag='span'>
-                    <SpinButton centered size={size} theme={useTheme} />
-                  </SSpin>
-                )}
-              </SButton>
-              {showHint && (
-                <Hint
-                  triggerRef={this.containerRef}
-                  timeout={[250, 50]}
-                  placement={hintPlacement}
-                >
-                  {buttonAriaLabel}
-                </Hint>
+              {/* @ts-ignore */}
+              <SInner tag='span' loading={loading} data-ui-name={`${this.asProps['data-ui-name']}.InnerWrapper`}>
+                {AddonLeft
+                  ? (
+                      <Button.Addon>
+                        <AddonLeft />
+                      </Button.Addon>
+                    )
+                  : null}
+                {addonTextChildren(Children, Button.Text, Button.Addon)}
+                {AddonRight
+                  ? (
+                      <Button.Addon>
+                        <AddonRight />
+                      </Button.Addon>
+                    )
+                  : null}
+              </SInner>
+              {loading && (
+                <SSpin tag='span'>
+                  <SpinButton centered size={size} theme={useTheme} />
+                </SSpin>
               )}
             </>,
           );
+          buttonProps.neighborLocation = neighborLocation;
+
+          if (hasChildren === undefined || title) {
+            return this.renderButtonWithHint({ buttonProps, hintProps, children });
+          }
+
+          return this.renderButton({ buttonProps, children });
         }}
       </NeighborLocation.Detect>
     );

package/src/component/AbstractButton/AbstractButton.type.ts

@@ -1,5 +1,7 @@
-import type { BoxProps, NeighborItemProps, SimpleHintPopperProps } from '@semcore/base-components';
 import type { PropGetterFn } from '@semcore/core';
+import type { BoxProps } from '@semcore/flex-box';
+import type { NeighborItemProps } from '@semcore/neighbor-location';
+import type { TooltipHintProps } from '@semcore/tooltip';
 import type React from 'react';
 
 export type AbstractButtonProps<S, U, T> = BoxProps &
@@ -18,7 +20,7 @@ export type AbstractButtonProps<S, U, T> = BoxProps &
      * Placement for hint
      * @default top
      */
-    hintPlacement?: SimpleHintPopperProps['placement'];
+    hintPlacement?: TooltipHintProps['placement'];
 
     /** Button size. Defined in Button.type or ButtonLink.type */
     size?: S;

package/src/component/Button/Button.tsx

@@ -1,5 +1,5 @@
-import { Box } from '@semcore/base-components';
 import { createComponent, sstyled, Root } from '@semcore/core';
+import { Box } from '@semcore/flex-box';
 import React from 'react';
 
 import style from './button.shadow.css';

package/src/component/Button/Button.type.ts

@@ -18,15 +18,28 @@ export type ButtonSize = 'l' | 'm';
  */
 type Use = 'primary' | 'secondary' | 'tertiary';
 
+/**
+ * @deprecated don't use it. use `danger` for incorrect or danger behavior and `brand` for the orange one.
+ */
+type DeprecatedTheme = 'warning';
+
 /** Button theme */
 type Theme = 'info' | 'success' | 'brand' | 'danger' | 'muted' | 'invert';
 
-export type ButtonProps = AbstractButtonProps<ButtonSize, Use, Theme>;
+/** @deprecated */
+export interface IButtonProps extends ButtonProps, UnknownProperties {}
+export type ButtonProps = AbstractButtonProps<ButtonSize, Use, Theme | DeprecatedTheme>;
 
+/** @deprecated */
+export interface IButtonTextProps extends ButtonTextProps, UnknownProperties {}
 export type ButtonTextProps = AbstractButtonTextProps<ButtonSize>;
 
+/** @deprecated */
+export interface IButtonAddonProps extends ButtonAddonProps, UnknownProperties {}
 export type ButtonAddonProps = AbstractButtonAddonProps<ButtonSize>;
 
+/** @deprecated */
+export interface IButtonContext extends ButtonContext, UnknownProperties {}
 export type ButtonContext = AbstractButtonContext;
 
 export type ButtonChildren = {

package/src/component/Button/button.shadow.css

@@ -20,7 +20,7 @@ SButton {
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
   font-weight: var(--intergalactic-medium, 500);
-  color: var(--intergalactic-text-secondary, #6c6e79);
+  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
   min-width: fit-content;
 
   &::-moz-focus-inner {
@@ -35,7 +35,7 @@ SButton {
 }
 
 SButton[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  opacity: var(--intergalactic-disabled-opacity, 0.4);
   cursor: default;
   pointer-events: none;
   box-shadow: none;
@@ -61,201 +61,201 @@ SButton[size='l'] {
 }
 
 SButton[theme='primary-info'] {
-  color: var(--intergalactic-text-primary-invert, #ffffff);
-  background-color: var(--intergalactic-control-primary-info, #008ff8);
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
 
   &:hover {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-info-hover, #006dca);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.007 140));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-info-active, #044792);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-info-active, oklch(0 0 140));
   }
 }
 
 SButton[theme='primary-success'] {
-  color: var(--intergalactic-text-primary-invert, #ffffff);
-  background-color: var(--intergalactic-control-primary-success, #009f81);
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170));
 
   &:hover {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-success-hover, #007c65);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-success-hover, oklch(0.6 0.155 170));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-success-active, #055345);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-success-active, oklch(0.58 0.151 170));
   }
 }
 
 SButton[theme='primary-brand'] {
-  color: var(--intergalactic-text-primary-invert, #ffffff);
-  background-color: var(--intergalactic-control-primary-brand, #ff642d);
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3));
 
   &:hover {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-brand-hover, #c33909);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.6 0.244 297.8));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-brand-active, #8b1500);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-brand-active, oklch(0.58 0.254 297.1));
   }
 }
 
 SButton[theme='primary-warning'] {
-  color: var(--intergalactic-text-primary-invert, #ffffff);
-  background-color: var(--intergalactic-control-primary-brand, #ff642d);
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3));
 
   &:hover {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-brand-hover, #c33909);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.6 0.244 297.8));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-brand-active, #8b1500);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-brand-active, oklch(0.58 0.254 297.1));
   }
 }
 
 SButton[theme='primary-danger'] {
-  color: var(--intergalactic-text-primary-invert, #ffffff);
-  background-color: var(--intergalactic-control-primary-critical, #ff4953);
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5));
 
   &:hover {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-critical-hover, #d1002f);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-critical-hover, oklch(0.6 0.219 25.5));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-critical-active, #8e0016);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-critical-active, oklch(0.58 0.215 26));
   }
 }
 
 SButton[theme='primary-invert'] {
-  color: var(--intergalactic-text-primary, #191b23);
-  background-color: var(--intergalactic-control-primary-invert, #ffffff);
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+  background-color: var(--intergalactic-control-primary-invert, oklch(1 0 0));
 
   &:hover {
-    color: var(--intergalactic-text-primary, #191b23);
-    background-color: var(--intergalactic-control-primary-invert-hover, #f4f5f9);
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+    background-color: var(--intergalactic-control-primary-invert-hover, oklch(0.96 0.001 180));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary, #191b23);
-    background-color: var(--intergalactic-control-primary-invert-active, #e0e1e9);
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+    background-color: var(--intergalactic-control-primary-invert-active, oklch(0.94 0.002 180));
   }
 }
 
 SButton[theme='secondary-muted'] {
-  color: var(--intergalactic-text-secondary, #6c6e79);
-  border-color: var(--intergalactic-border-primary, #c4c7cf);
-  background-color: var(--intergalactic-control-secondary-neutral, rgba(138, 142, 155, 0.1));
+  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+  border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+  background-color: var(--intergalactic-control-secondary-neutral, oklch(0.177 0.033 175.6 / 0.028));
 
   &:hover {
     background-color: var(--intergalactic-control-secondary-neutral-hover,
-    rgba(138, 142, 155, 0.2));
-    color: var(--intergalactic-text-primary, #191b23);
+    oklch(0.176 0.033 175.6 / 0.056));
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   }
 
   &:active,
   &[active] {
     background-color: var(--intergalactic-control-secondary-neutral-active,
-    rgba(138, 142, 155, 0.3));
-    color: var(--intergalactic-text-primary, #191b23);
+    oklch(0.176 0.033 175.7 / 0.084));
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   }
 }
 
 SButton[theme='secondary-info'] {
-  background-color: var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));
-  color: var(--intergalactic-text-link, #006dca);
-  border-color: var(--intergalactic-control-primary-info, #008ff8);
+  background-color: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039));
+  color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
+  border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
 
   &:hover {
-    color: var(--intergalactic-text-link, #006dca);
-    background-color: var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2));
+    color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
+    background-color: var(--intergalactic-control-secondary-info-hover, oklch(0.525 0.265 263 / 0.077));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-link, #006dca);
-    background-color: var(--intergalactic-control-secondary-info-active, rgba(0, 143, 248, 0.3));
+    color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
+    background-color: var(--intergalactic-control-secondary-info-active, oklch(0.524 0.266 263.1 / 0.116));
   }
 }
 
 SButton[theme='secondary-invert'] {
-  color: var(--intergalactic-text-primary-invert, #ffffff);
-  border-color: var(--intergalactic-border-primary-invert, #ffffff);
-  background-color: var(--intergalactic-control-secondary-invert, rgba(255, 255, 255, 0.05));
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  border-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391));
+  background-color: var(--intergalactic-control-secondary-invert, oklch(0.969 0.057 140 / 0.118));
 
   &:hover {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-secondary-invert-hover, rgba(255, 255, 255, 0.1));
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.976 0.043 140 / 0.145));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
     background-color: var(--intergalactic-control-secondary-invert-active,
-    rgba(255, 255, 255, 0.3));
+    oklch(0.983 0.03 140 / 0.183));
   }
 }
 
 SButton[theme='tertiary-info'] {
-  color: var(--intergalactic-text-link, #006dca);
-  background-color: var(--intergalactic-control-tertiary-info, rgba(0, 143, 248, 0));
+  color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
+  background-color: var(--intergalactic-control-tertiary-info, transparent);
 
   &:hover {
-    color: var(--intergalactic-text-link, #006dca);
-    background-color: var(--intergalactic-control-tertiary-info-hover, rgba(0, 143, 248, 0.2));
+    color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
+    background-color: var(--intergalactic-control-tertiary-info-hover, oklch(0.525 0.265 263 / 0.077));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-link, #006dca);
-    background-color: var(--intergalactic-control-tertiary-info-active, rgba(0, 143, 248, 0.3));
+    color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
+    background-color: var(--intergalactic-control-tertiary-info-active, oklch(0.524 0.266 263.1 / 0.116));
   }
 }
 
 SButton[theme='tertiary-muted'] {
-  color: var(--intergalactic-text-secondary, #6c6e79);
-  background-color: var(--intergalactic-control-tertiary-neutral, rgba(138, 142, 155, 0));
+  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+  background-color: var(--intergalactic-control-tertiary-neutral, transparent);
 
   &:hover {
-    background-color: var(--intergalactic-control-tertiary-neutral-hover, rgba(138, 142, 155, 0.2));
-    color: var(--intergalactic-text-primary, #191b23);
+    background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.176 0.033 175.6 / 0.056));
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   }
 
   &:active,
   &[active] {
     background-color: var(--intergalactic-control-tertiary-neutral-active,
-    rgba(138, 142, 155, 0.3));
-    color: var(--intergalactic-text-primary, #191b23);
+    oklch(0.176 0.033 175.7 / 0.084));
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   }
 }
 
 SButton[theme='tertiary-invert'] {
-  color: var(--intergalactic-text-primary-invert, #ffffff);
-  background-color: var(--intergalactic-control-tertiary-invert, rgba(255, 255, 255, 0));
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-control-tertiary-invert, transparent);
 
   &:hover {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-tertiary-invert-hover, rgba(255, 255, 255, 0.1));
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.976 0.043 140 / 0.145));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-tertiary-invert-active, rgba(255, 255, 255, 0.3));
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.983 0.03 140 / 0.183));
   }
 }
 
@@ -282,12 +282,12 @@ SButton[neighborLocation='left'] {
   position: relative;
 
   &:after {
-    background-color: var(--intergalactic-border-primary-invert, #ffffff);
+    background-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391));
   }
 
   &[theme='secondary-muted'] {
     &:after {
-      background-color: var(--intergalactic-border-primary, #c4c7cf);
+      background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
     }
   }
 }

package/src/component/ButtonLink/ButtonLink.tsx

@@ -1,6 +1,6 @@
-import { Box } from '@semcore/base-components';
 import { createComponent, sstyled, Root } from '@semcore/core';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
+import { Box } from '@semcore/flex-box';
 import React from 'react';
 
 import style from './buttonLink.shadow.css';