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

package/lib/esm/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/lib/esm/component/ButtonLink/ButtonLink.mjs

@@ -1,51 +1,61 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent, sstyled, assignProps } from "@semcore/core";
-import { Box } from "@semcore/base-components";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+import { Box } from "@semcore/flex-box";
 import React from "react";
 import { AbstractButton } from "../AbstractButton/AbstractButton.mjs";
 /*!__reshadow-styles__:"./buttonLink.shadow.css"*/
-const style = (
+var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SButton_o1yge_gg_{display:inline-flex;font-family:inherit;font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-link, #006dca);line-height:normal;position:relative;cursor:pointer;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;background:0 0;transition:color .15s ease-in-out}.___SButton_o1yge_gg_,.___SButton_o1yge_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_o1yge_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SButton_o1yge_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_o1yge_gg_.__active_o1yge_gg_,.___SButton_o1yge_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SButton_o1yge_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SButton_o1yge_gg_.__active_o1yge_gg_ .___SText_o1yge_gg_,.___SButton_o1yge_gg_:active .___SText_o1yge_gg_{box-shadow:0 1px 0 0 currentColor}@media (hover:hover){.___SButton_o1yge_gg_:hover .___SText_o1yge_gg_{box-shadow:0 1px 0 0 currentColor}}.___SButton_o1yge_gg_.__enableVisited_o1yge_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SButton_o1yge_gg_.__enableVisited_o1yge_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SButton_o1yge_gg_ .___SText_o1yge_gg_{box-shadow:0 1px 0 0 transparent;transition:box-shadow .15s ease-in-out}.___SButton_o1yge_gg_.__disabled_o1yge_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SButton_o1yge_gg_._use_secondary_o1yge_gg_{color:var(--intergalactic-text-hint, #6c6e79)}.___SButton_o1yge_gg_._use_secondary_o1yge_gg_.__active_o1yge_gg_,.___SButton_o1yge_gg_._use_secondary_o1yge_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SButton_o1yge_gg_._use_secondary_o1yge_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SButton_o1yge_gg_._use_secondary_o1yge_gg_ .___SText_o1yge_gg_{box-shadow:none;border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_o1yge_gg_,.___SInner_o1yge_gg_{display:inline-flex;justify-content:center;align-items:baseline}.___SInner_o1yge_gg_{height:100%;width:100%}.___SAddon_o1yge_gg_{vertical-align:middle;pointer-events:none;align-self:center}.___SButton_o1yge_gg_ .___SAddon_o1yge_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_o1yge_gg_ .___SAddon_o1yge_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_o1yge_gg_.__text-color_o1yge_gg_{color:var(--text-color_o1yge)}.___SButton_o1yge_gg_.__text-color_o1yge_gg_.__active_o1yge_gg_,.___SButton_o1yge_gg_.__text-color_o1yge_gg_:active{color:var(--text-color_o1yge);filter:brightness(.8)}@media (hover:hover){.___SButton_o1yge_gg_.__text-color_o1yge_gg_:hover{color:var(--text-color_o1yge);filter:brightness(.8)}}.___SButton_o1yge_gg_._size_100_o1yge_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_o1yge_gg_._size_200_o1yge_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_o1yge_gg_._size_300_o1yge_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_o1yge_gg_._size_400_o1yge_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_o1yge_gg_._size_500_o1yge_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_o1yge_gg_._size_600_o1yge_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_o1yge_gg_._size_700_o1yge_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_o1yge_gg_._size_800_o1yge_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_o1yge_gg_,.___SText_o1yge_gg_{transition:none}}",
+    ".___SButton_1ncd1_gg_{display:inline-flex;font-family:inherit;font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-link, rgb(35, 95, 226));line-height:normal;position:relative;cursor:pointer;text-decoration:none;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;background:0 0;transition:color .15s ease-in-out}.___SButton_1ncd1_gg_:active{text-decoration:none}@media (hover:hover){.___SButton_1ncd1_gg_:hover{text-decoration:none}}.___SButton_1ncd1_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_1ncd1_gg_.__active_1ncd1_gg_,.___SButton_1ncd1_gg_:active{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}@media (hover:hover){.___SButton_1ncd1_gg_:hover{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}}.___SButton_1ncd1_gg_.__active_1ncd1_gg_ .___SText_1ncd1_gg_,.___SButton_1ncd1_gg_:active .___SText_1ncd1_gg_{border-color:currentColor}@media (hover:hover){.___SButton_1ncd1_gg_:hover .___SText_1ncd1_gg_{border-color:currentColor}}.___SButton_1ncd1_gg_.__enableVisited_1ncd1_gg_:visited{color:var(--intergalactic-text-link-visited, rgb(128, 41, 236))}@media (hover:hover){.___SButton_1ncd1_gg_.__enableVisited_1ncd1_gg_:visited:hover{color:var(--intergalactic-text-link-visited, rgb(128, 41, 236))}}.___SButton_1ncd1_gg_ .___SText_1ncd1_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SButton_1ncd1_gg_.__disabled_1ncd1_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SButton_1ncd1_gg_._use_secondary_1ncd1_gg_{color:var(--intergalactic-text-hint, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0%)){.___SButton_1ncd1_gg_._use_secondary_1ncd1_gg_{color:var(--intergalactic-text-hint, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SButton_1ncd1_gg_._use_secondary_1ncd1_gg_{color:var(--intergalactic-text-hint, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SButton_1ncd1_gg_._use_secondary_1ncd1_gg_.__active_1ncd1_gg_,.___SButton_1ncd1_gg_._use_secondary_1ncd1_gg_:active{color:var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605))}@media (hover:hover){.___SButton_1ncd1_gg_._use_secondary_1ncd1_gg_:hover{color:var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605))}}.___SButton_1ncd1_gg_._use_secondary_1ncd1_gg_ .___SText_1ncd1_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_1ncd1_gg_,.___SInner_1ncd1_gg_{display:inline-flex;justify-content:center;align-items:center}.___SInner_1ncd1_gg_{height:100%;width:100%}.___SAddon_1ncd1_gg_{vertical-align:middle;pointer-events:none}.___SButton_1ncd1_gg_ .___SAddon_1ncd1_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_1ncd1_gg_ .___SAddon_1ncd1_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_1ncd1_gg_.__text-color_1ncd1_gg_{color:var(--text-color_1ncd1)}.___SButton_1ncd1_gg_.__text-color_1ncd1_gg_.__active_1ncd1_gg_,.___SButton_1ncd1_gg_.__text-color_1ncd1_gg_:active{color:var(--text-color_1ncd1);filter:brightness(.8)}@media (hover:hover){.___SButton_1ncd1_gg_.__text-color_1ncd1_gg_:hover{color:var(--text-color_1ncd1);filter:brightness(.8)}}.___SButton_1ncd1_gg_._size_100_1ncd1_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_1ncd1_gg_._size_200_1ncd1_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_1ncd1_gg_._size_300_1ncd1_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_1ncd1_gg_._size_400_1ncd1_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_1ncd1_gg_._size_500_1ncd1_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_1ncd1_gg_._size_600_1ncd1_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_1ncd1_gg_._size_700_1ncd1_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_1ncd1_gg_._size_800_1ncd1_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_1ncd1_gg_,.___SText_1ncd1_gg_{transition:none}}",
     /*__inner_css_end__*/
-    "o1yge_gg_"
+    "1ncd1_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SButton": "___SButton_o1yge_gg_",
-    "_disabled": "__disabled_o1yge_gg_",
-    "__SInner": "___SInner_o1yge_gg_",
-    "__SAddon": "___SAddon_o1yge_gg_",
-    "_size_100": "_size_100_o1yge_gg_",
-    "_size_200": "_size_200_o1yge_gg_",
-    "_size_300": "_size_300_o1yge_gg_",
-    "_size_400": "_size_400_o1yge_gg_",
-    "_size_500": "_size_500_o1yge_gg_",
-    "_size_600": "_size_600_o1yge_gg_",
-    "_size_700": "_size_700_o1yge_gg_",
-    "_size_800": "_size_800_o1yge_gg_",
-    "__SText": "___SText_o1yge_gg_",
-    "_active": "__active_o1yge_gg_",
-    "_enableVisited": "__enableVisited_o1yge_gg_",
-    "_use_secondary": "_use_secondary_o1yge_gg_",
-    "_text-color": "__text-color_o1yge_gg_",
-    "--text-color": "--text-color_o1yge"
+    "__SButton": "___SButton_1ncd1_gg_",
+    "_disabled": "__disabled_1ncd1_gg_",
+    "__SInner": "___SInner_1ncd1_gg_",
+    "__SAddon": "___SAddon_1ncd1_gg_",
+    "_size_100": "_size_100_1ncd1_gg_",
+    "_size_200": "_size_200_1ncd1_gg_",
+    "_size_300": "_size_300_1ncd1_gg_",
+    "_size_400": "_size_400_1ncd1_gg_",
+    "_size_500": "_size_500_1ncd1_gg_",
+    "_size_600": "_size_600_1ncd1_gg_",
+    "_size_700": "_size_700_1ncd1_gg_",
+    "_size_800": "_size_800_1ncd1_gg_",
+    "__SText": "___SText_1ncd1_gg_",
+    "_active": "__active_1ncd1_gg_",
+    "_enableVisited": "__enableVisited_1ncd1_gg_",
+    "_use_secondary": "_use_secondary_1ncd1_gg_",
+    "_text-color": "__text-color_1ncd1_gg_",
+    "--text-color": "--text-color_1ncd1"
   })
 );
-const enhance = {
+var enhance = {
   resolveColor: resolveColorEnhance()
 };
-class RootButtonLink extends AbstractButton {
-  getTextColor() {
-    const {
-      color,
-      resolveColor
-    } = this.asProps;
-    return resolveColor(color);
+var RootButtonLink = /* @__PURE__ */ (function(_AbstractButton) {
+  function RootButtonLink2() {
+    _classCallCheck(this, RootButtonLink2);
+    return _callSuper(this, RootButtonLink2, arguments);
   }
-}
+  _inherits(RootButtonLink2, _AbstractButton);
+  return _createClass(RootButtonLink2, [{
+    key: "getTextColor",
+    value: function getTextColor() {
+      var _ref5 = this.asProps, color = _ref5.color, resolveColor = _ref5.resolveColor;
+      return resolveColor(color);
+    }
+  }]);
+})(AbstractButton);
 _defineProperty(RootButtonLink, "displayName", "ButtonLink");
 _defineProperty(RootButtonLink, "enhance", Object.values(enhance));
 _defineProperty(RootButtonLink, "style", style);
@@ -54,23 +64,19 @@ _defineProperty(RootButtonLink, "defaultProps", {
 });
 function Text(props) {
   var _ref = arguments[0], _ref3;
-  const SText = Box;
-  return _ref3 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SText, _ref3.cn("SText", {
-    ...assignProps({
-      "tag": "span"
-    }, _ref)
-  }));
+  var SText = Box;
+  return _ref3 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SText, _ref3.cn("SText", _objectSpread({}, assignProps({
+    "tag": "span"
+  }, _ref))));
 }
 function Addon(props) {
   var _ref2 = arguments[0], _ref4;
-  const SAddon = Box;
-  return _ref4 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref4.cn("SAddon", {
-    ...assignProps({
-      "tag": "span"
-    }, _ref2)
-  }));
+  var SAddon = Box;
+  return _ref4 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref4.cn("SAddon", _objectSpread({}, assignProps({
+    "tag": "span"
+  }, _ref2))));
 }
-const ButtonLink = createComponent(RootButtonLink, {
+var ButtonLink = createComponent(RootButtonLink, {
   Text,
   Addon
 });

package/lib/esm/component/ButtonLink/buttonLink.shadow.css

@@ -2,7 +2,7 @@ SButton {
   display: inline-flex;
   font-family: inherit;
   font-size: var(--intergalactic-fs-200, 14px);
-  color: var(--intergalactic-text-link, #006dca);
+  color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
   line-height: normal;
   position: relative;
   cursor: pointer;
@@ -28,42 +28,43 @@ SButton {
   &[active],
   &:hover,
   &:active {
-    color: var(--intergalactic-text-link-hover-active, #044792);
+    color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.202 263));
 
     & SText {
-      box-shadow: 0 1px 0 0 currentColor;
+      border-color: currentColor;
     }
   }
 
   &[enableVisited]:visited,
   &[enableVisited]:visited:hover {
-    color: var(--intergalactic-text-link-visited, #8649e1);
+    color: var(--intergalactic-text-link-visited, oklch(0.53 0.26 296));
   }
 
   SText {
-    box-shadow: 0 1px 0 0 transparent;
-    transition: box-shadow 0.15s ease-in-out;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: transparent;
+    transition: border-bottom-color 0.15s ease-in-out;
   }
 }
 
 SButton[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  opacity: var(--intergalactic-disabled-opacity, 0.4);
   cursor: default;
   /* Disable link interactions */
   pointer-events: none;
 }
 
 SButton[use='secondary'] {
-  color: var(--intergalactic-text-hint, #6c6e79);
+  color: var(--intergalactic-text-hint, oklch(0.088 0.026 147.7 / 0.583));
 
   &[active],
   &:active,
   &:hover {
-    color: var(--intergalactic-text-hint-hover-active, #484a54);
+    color: var(--intergalactic-text-hint-hover-active, oklch(0.086 0.026 145.8 / 0.605));
   }
 
   SText {
-    box-shadow: none;
     border-bottom-width: 1px;
     border-bottom-style: dashed;
     border-color: currentColor;
@@ -72,7 +73,7 @@ SButton[use='secondary'] {
 
 SInner {
   display: inline-flex;
-  align-items: baseline;
+  align-items: center;
   justify-content: center;
   height: 100%;
   width: 100%;
@@ -81,10 +82,9 @@ SInner {
 SAddon {
   display: inline-flex;
   justify-content: center;
-  align-items: baseline;
+  align-items: center;
   vertical-align: middle;
   pointer-events: none;
-  align-self: center;
 }
 
 SButton SAddon {

package/lib/types/component/AbstractButton/AbstractButton.d.ts

@@ -3,13 +3,12 @@ import React from 'react';
 import type { AbstractButtonProps } from './AbstractButton.type';
 export declare const MAP_USE_DEFAULT_THEME: Record<string, string>;
 type Props = AbstractButtonProps<any, any, any>;
-type State = {
-    ariaLabelledByContent: null | string;
-};
-export declare abstract class AbstractButton extends Component<Props, [], never, {}, State> {
+export declare abstract class AbstractButton extends Component<Props, {}, {}> {
     static displayName: string;
     containerRef: React.RefObject<HTMLButtonElement>;
-    state: State;
+    state: {
+        ariaLabelledByContent: null;
+    };
     protected abstract getTextColor(): string | undefined;
     getTextProps(): {
         size: any;
@@ -18,6 +17,8 @@ export declare abstract class AbstractButton extends Component<Props, [], never,
         size: any;
     };
     componentDidMount(): void;
+    renderButton({ buttonProps, children }: any): React.ReactNode;
+    renderButtonWithHint({ buttonProps, children, hintProps }: any): React.ReactNode;
     render(): React.JSX.Element;
 }
 export {};

package/lib/types/component/AbstractButton/AbstractButton.type.d.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 & NeighborItemProps & {
     /** Button activity state */
@@ -16,7 +18,7 @@ export type AbstractButtonProps<S, U, T> = BoxProps & NeighborItemProps & {
      * Placement for hint
      * @default top
      */
-    hintPlacement?: SimpleHintPopperProps['placement'];
+    hintPlacement?: TooltipHintProps['placement'];
     /** Button size. Defined in Button.type or ButtonLink.type */
     size?: S;
     /** Button usage. Defined in Button.type or ButtonLink.type */

package/lib/types/component/Button/Button.type.d.ts

@@ -1,4 +1,4 @@
-import type { Intergalactic } from '@semcore/core';
+import type { UnknownProperties, Intergalactic } from '@semcore/core';
 import type { AbstractButtonAddonProps, AbstractButtonContext, AbstractButtonTextProps, AbstractButtonProps } from '../AbstractButton/AbstractButton.type';
 /**
  *  Button size
@@ -10,11 +10,27 @@ export type ButtonSize = 'l' | 'm';
  * @default secondary
  */
 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 = {
     Text: Intergalactic.Component<'span', ButtonTextProps>;