@cube-dev/ui-kit 0.59.14 → 0.60.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @cube-dev/ui-kit
 
+## 0.60.0
+
+### Minor Changes
+
+- [#659](https://github.com/cube-js/cube-ui-kit/pull/659) [`2dfa908`](https://github.com/cube-js/cube-ui-kit/commit/2dfa908d16befd4eef0cf0acb957a4e35803959b) Thanks [@tenphi](https://github.com/tenphi)! - Add success theme for Button component.
+
+- [#659](https://github.com/cube-js/cube-ui-kit/pull/659) [`2dfa908`](https://github.com/cube-js/cube-ui-kit/commit/2dfa908d16befd4eef0cf0acb957a4e35803959b) Thanks [@tenphi](https://github.com/tenphi)! - Decrease the line height of the h2 headers to 32px.
+
+- [#659](https://github.com/cube-js/cube-ui-kit/pull/659) [`2dfa908`](https://github.com/cube-js/cube-ui-kit/commit/2dfa908d16befd4eef0cf0acb957a4e35803959b) Thanks [@tenphi](https://github.com/tenphi)! - Improved design of Switch component.
+
+- [#659](https://github.com/cube-js/cube-ui-kit/pull/659) [`2dfa908`](https://github.com/cube-js/cube-ui-kit/commit/2dfa908d16befd4eef0cf0acb957a4e35803959b) Thanks [@tenphi](https://github.com/tenphi)! - Replace most of the icons with Tabler icons.
+
+- [#659](https://github.com/cube-js/cube-ui-kit/pull/659) [`2dfa908`](https://github.com/cube-js/cube-ui-kit/commit/2dfa908d16befd4eef0cf0acb957a4e35803959b) Thanks [@tenphi](https://github.com/tenphi)! - Remove default custom fonts.
+
+- [#659](https://github.com/cube-js/cube-ui-kit/pull/659) [`2dfa908`](https://github.com/cube-js/cube-ui-kit/commit/2dfa908d16befd4eef0cf0acb957a4e35803959b) Thanks [@tenphi](https://github.com/tenphi)! - Replace most of the colors by more contrast and consistent versions.
+
+- [#659](https://github.com/cube-js/cube-ui-kit/pull/659) [`2dfa908`](https://github.com/cube-js/cube-ui-kit/commit/2dfa908d16befd4eef0cf0acb957a4e35803959b) Thanks [@tenphi](https://github.com/tenphi)! - Change neutral and outline types visually for Button component and set outline as the default type.
+
+- [#659](https://github.com/cube-js/cube-ui-kit/pull/659) [`2dfa908`](https://github.com/cube-js/cube-ui-kit/commit/2dfa908d16befd4eef0cf0acb957a4e35803959b) Thanks [@tenphi](https://github.com/tenphi)! - Rework of all color palette.
+
+- [#659](https://github.com/cube-js/cube-ui-kit/pull/659) [`2dfa908`](https://github.com/cube-js/cube-ui-kit/commit/2dfa908d16befd4eef0cf0acb957a4e35803959b) Thanks [@tenphi](https://github.com/tenphi)! - Improve Select and ComboBox styles and the size of their chevron icons.
+
+- [#659](https://github.com/cube-js/cube-ui-kit/pull/659) [`2dfa908`](https://github.com/cube-js/cube-ui-kit/commit/2dfa908d16befd4eef0cf0acb957a4e35803959b) Thanks [@tenphi](https://github.com/tenphi)! - Add wrapperStyles to Select and ComboBox components and fix style props extraction.
+
+### Patch Changes
+
+- [#659](https://github.com/cube-js/cube-ui-kit/pull/659) [`2dfa908`](https://github.com/cube-js/cube-ui-kit/commit/2dfa908d16befd4eef0cf0acb957a4e35803959b) Thanks [@tenphi](https://github.com/tenphi)! - Allow numbers in more styles.
+
+- [#659](https://github.com/cube-js/cube-ui-kit/pull/659) [`2dfa908`](https://github.com/cube-js/cube-ui-kit/commit/2dfa908d16befd4eef0cf0acb957a4e35803959b) Thanks [@tenphi](https://github.com/tenphi)! - Improve Dialog outline except for popovers.
+
+- [#659](https://github.com/cube-js/cube-ui-kit/pull/659) [`2dfa908`](https://github.com/cube-js/cube-ui-kit/commit/2dfa908d16befd4eef0cf0acb957a4e35803959b) Thanks [@tenphi](https://github.com/tenphi)! - Add basic transitions for icons.
+
 ## 0.59.14
 
 ### Patch Changes

package/es/_internal/hooks/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-chained-callback.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-debounced-value.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-deprecation-warning.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-effect-once.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-event.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-is-first-render.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-sync-ref.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-timer/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-timer/timer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-timer/use-timer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-update-effect.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-warn.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/_internal/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/components/Block.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/components/GlobalStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 
@@ -24,68 +24,8 @@ const BODY_STYLES = {
 };
 const fontsProvider = ({ publicUrl = '', fontDisplay = 'swap' }) => `
   @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 400;
-    font-display: ${fontDisplay};
-    src: url(${publicUrl}/fonts/Inter-Regular.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-Regular.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 500;
-    font-display: ${fontDisplay};
-    src: url(${publicUrl}/fonts/Inter-Medium.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-Medium.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 600;
-    font-display: ${fontDisplay};
-    src: url(${publicUrl}/fonts/Inter-SemiBold.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-SemiBold.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 700;
-    font-display: ${fontDisplay};
-    src: url(${publicUrl}/fonts/Inter-Bold.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-Bold.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Source Code Pro';
-    src: url('${publicUrl}/fonts/SourceCodePro-Regular.woff2') format('woff2'),
-      url('${publicUrl}/fonts/SourceCodePro-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: ${fontDisplay};
-  }
-
-  @font-face {
-    font-family: 'JetBrains Mono';
-    font-style: normal;
-    font-weight: 400;
-    font-display: ${fontDisplay};
-    src: url(${publicUrl}/fonts/JetBrainsMono-Regular.woff2) format('woff2'),
-      url(${publicUrl}/fonts/JetBrainsMono-Regular.woff) format('woff');
-  }
-
-  @font-face {
-    font-family: 'JetBrains Mono';
-    font-style: normal;
-    font-weight: 700;
-    font-display: ${fontDisplay};
-    src: url(${publicUrl}/fonts/JetBrainsMono-Bold.woff2) format('woff2'),
-      url(${publicUrl}/fonts/JetBrainsMono-Bold.woff) format('woff');
-  }
-
-  @font-face {
-    font-family: 'text-security-disc';
-    src: url(${publicUrl}/fonts/text-security-disc.woff2) format('woff2'),
-      url(${publicUrl}/fonts/text-security-disc.woff) format('woff');
+    font-family: text-security-disc;
+    src: url(data:font/woff2;base64,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) format('woff2');
   }
 `;
 const GlobalStylesElement = createGlobalStyle `
@@ -115,8 +55,9 @@ const GlobalStylesElement = createGlobalStyle `
 
   html {
     overscroll-behavior-y: none;
-    --font: ${({ $font }) => $font ||
-    'Inter'}, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    --font: ${({ $font }) => $font
+    ? `${$font}, `
+    : ''}-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     --monospace-font: ${({ $monospaceFont }) => `${$monospaceFont ? `${$monospaceFont}, ` : ''}Menlo, Monaco, Consolas, 'Courier New', monospace;`}
   }
 
@@ -131,6 +72,14 @@ const GlobalStylesElement = createGlobalStyle `
     padding: 0 var(--outline-width);
   }
 
+  :not([data-qa="Icon"]) .tabler-icon {
+    max-width: var(--icon-size);
+    min-width: var(--icon-size);
+    min-height: var(--icon-size);
+    max-height: var(--icon-size);
+    stroke-width: var(--stroke-width);
+  }
+
   .cube-animation-spin {
     animation: cube-animation-spin 1s linear infinite;
   }

package/es/components/GridProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/components/HiddenInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/components/OpenTrasition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/components/Root.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/components/actions/Action/Action.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/components/actions/Button/Button.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 
@@ -18,12 +18,16 @@ export const DEFAULT_BUTTON_STYLES = {
     placeContent: 'center',
     position: 'relative',
     margin: 0,
+    boxSizing: 'border-box',
     outline: {
         '': '#purple-03.0',
         focused: '#purple-03',
     },
     cursor: 'pointer',
-    gap: '.75x',
+    gap: {
+        '': '.75x',
+        '[data-size="small"]': '.5x',
+    },
     flow: 'column',
     preset: {
         '': 't3m',
@@ -32,11 +36,12 @@ export const DEFAULT_BUTTON_STYLES = {
     textDecoration: 'none',
     transition: 'theme',
     reset: 'button',
+    outlineOffset: 1,
     padding: {
-        '': '(1.25x - 1bw) (2x - 1bw)',
-        '[data-size="small"]': '(.75x - 1bw) (1.25x - 1bw)',
-        '[data-size="medium"]': '(1.25x - 1bw) (1.75x - 1bw)',
-        '[data-size="large"]': '1.5x (2.25x - 1bw)',
+        '': '0 (2x - 1bw)',
+        '[data-size="small"]': '0 (1x - 1bw)',
+        '[data-size="medium"]': '0 (1.5x - 1bw)',
+        '[data-size="large"]': '0 (2.25x - 1bw)',
         'single-icon-only | [data-type="link"]': 0,
     },
     width: {
@@ -47,94 +52,86 @@ export const DEFAULT_BUTTON_STYLES = {
     },
     height: {
         '': 'initial',
-        '[data-size="small"] & single-icon-only': '4x 4x',
-        '[data-size="medium"] & single-icon-only': '5x 5x',
-        '[data-size="large"] & single-icon-only': '6x 6x',
+        '[data-size="small"]': '4x 4x',
+        '[data-size="medium"]': '5x 5x',
+        '[data-size="large"]': '6x 6x',
+        '[data-type="link"]': 'auto',
     },
     whiteSpace: 'nowrap',
     radius: {
         '': true,
         '[data-type="link"] & !focused': 0,
     },
-    '& .anticon': {
-        transition: 'display .2s steps(1, start), margin .2s linear, opacity .2s linear',
+};
+export const DEFAULT_THEME_STYLES = {
+    outline: {
+        '': '0 #purple-text.0',
+        'focused & ([data-type="primary"] | [data-type="link"])': '1bw #purple-text',
+    },
+    border: {
+        '': '#border',
+        '[data-type="primary"]': '#clear',
+        '[data-type="primary"] & pressed': '#purple-text',
+        '[data-type="secondary"]': '#purple.15',
+        '[data-type="secondary"] & pressed': '#purple.3',
+        '[data-type="clear"]': '#clear',
+        '[data-type="clear"] & pressed': '#purple-text.10',
+        '[data-type="outline"]': '#dark.12',
+        '[data-type="neutral"] | [disabled]': '#clear',
+        focused: '#purple-text',
+        '[data-type="link"]': '0',
     },
-    ButtonIcon: {
-        display: 'grid',
-        fontSize: '@icon-size',
+    fill: {
+        '': '#clear',
+        '[data-type="primary"]': '#purple',
+        '[data-type="primary"] & hovered': '#purple-text',
+        '[data-type="primary"] & pressed': '#purple',
+        '[data-type="secondary"]': '#purple.10',
+        '[data-type="secondary"] & hovered': '#purple.16',
+        '[data-type="secondary"] & pressed': '#purple-text.10',
+        '[data-type="neutral"] | [data-type="outline"]': '#dark.0',
+        '([data-type="neutral"] | [data-type="outline"]) & hovered': '#dark.03',
+        '([data-type="neutral"] | [data-type="outline"]) & (pressed | selected)': '#dark.06',
+        '[disabled] & ![data-type="link"]': '#dark.04',
+        '[data-type="clear"]': '#purple.0',
+        '[data-type="clear"] & hovered': '#purple.16',
+        '[data-type="clear"] & pressed': '#purple.10',
+        '[data-type="clear"] & [disabled]': '#purple.0',
+    },
+    color: {
+        // default
+        '': '#white',
+        '[data-type="secondary"]': '#purple',
+        '[data-type="clear"] | [data-type="link"]': '#purple-text',
+        '[data-type="link"] & pressed': '#purple',
+        '[data-type="neutral"] | [data-type="outline"]': '#dark-02',
+        '([data-type="neutral"] | [data-type="outline"]) & hovered': '#dark-02',
+        '([data-type="neutral"] | [data-type="outline"]) & pressed': '#dark',
+        // other
+        '[disabled]': '#dark.30',
     },
 };
 const ButtonElement = tasty({
     qa: 'Button',
     styles: DEFAULT_BUTTON_STYLES,
     variants: {
-        default: {
-            shadow: {
-                '': false,
-                '[data-type="link"]': '0 @border-width 0 0 #purple.20',
-                '[data-type="link"] & (pressed | hovered | [disabled])': '0 0 0 0 #purple.20',
-            },
-            outline: {
-                '': '0 #purple-03.0',
-                focused: '@outline-width #purple-03',
-            },
-            border: {
-                // default
-                '': '#clear',
-                '[data-type="primary"] & pressed': '#purple-text',
-                '[data-type="secondary"] & pressed': '#purple.3',
-                '[data-type="outline"]': '#purple.3',
-                '[data-type="outline"] & [disabled]': '#dark.12',
-                '([data-type="clear"] | [data-type="outline"]) & pressed': '#purple-text.10',
-                '[data-type="link"]': '0',
-            },
-            fill: {
-                '': '#clear',
-                '[data-type="primary"]': '#purple',
-                '[data-type="primary"] & hovered': '#purple-text',
-                '[data-type="primary"] & pressed': '#purple',
-                '[data-type="secondary"]': '#purple.10',
-                '[data-type="secondary"] & hovered': '#purple.16',
-                '[data-type="secondary"] & pressed': '#purple-text.10',
-                '[data-type="neutral"]': '#dark.0',
-                '[data-type="neutral"] & hovered': '#dark.04',
-                '[data-type="neutral"] & pressed': '#dark.05',
-                '[disabled] & ![data-type="link"]': '#dark.04',
-                '([data-type="clear"] | [data-type="outline"])': '#purple.0',
-                '([data-type="clear"] | [data-type="outline"]) & hovered': '#purple.16',
-                '([data-type="clear"] | [data-type="outline"]) & pressed': '#purple.10',
-                '([data-type="clear"] | [data-type="outline"]) & [disabled]': '#purple.0',
-            },
-            color: {
-                // default
-                '': '#white',
-                '[data-type="secondary"]': '#purple',
-                '[data-type="clear"] | [data-type="outline"] | [data-type="link"]': '#purple-text',
-                '[data-type="link"] & pressed': '#purple',
-                '[data-type="neutral"]': '#dark-02',
-                '[data-type="neutral"] & hovered': '#dark-02',
-                '[data-type="neutral"] & pressed': '#purple',
-                // other
-                '[disabled]': '#dark.30',
-            },
-        },
+        default: DEFAULT_THEME_STYLES,
         danger: {
-            shadow: {
-                '': false,
-                '[data-type="link"]': '0 @border-width 0 0 #danger.20',
-                '[data-type="link"] & (pressed | hovered | [disabled])': '0 0 0 0 #danger.20',
-            },
             outline: {
-                '': '0 #danger.0',
-                focused: '@outline-width #danger.50',
+                '': '0 #danger-text.0',
+                'focused & ([data-type="primary"] | [data-type="link"])': '1bw #danger-text',
             },
             border: {
-                '': '#clear',
+                '': '#border',
+                '[data-type="primary"]': '#clear',
                 '[data-type="primary"] & pressed': '#danger-text',
+                '[data-type="secondary"]': '#danger.15',
                 '[data-type="secondary"] & pressed': '#danger.3',
-                '[data-type="outline"]': '#danger-text.3',
-                '([data-type="clear"] | [data-type="outline"]) & pressed': '#danger-text.10',
+                '[data-type="clear"]': '#clear',
+                '[data-type="outline"]': '#danger.15',
                 '[data-type="outline"] & pressed': '#danger.3',
+                '[data-type="neutral"] | [disabled]': '#clear',
+                focused: '#danger-text',
                 '[data-type="link"]': '#clear',
             },
             fill: {
@@ -165,23 +162,67 @@ const ButtonElement = tasty({
                 '[disabled]': '#dark.30',
             },
         },
-        special: {
-            shadow: {
-                '': false,
-                '[data-type="link"]': '0 @border-width 0 0 #white.44',
-                '[data-type="link"] & (pressed | hovered | [disabled])': '0 0 0 0 #white.44',
+        success: {
+            outline: {
+                '': '0 #success-text.0',
+                'focused & ([data-type="primary"] | [data-type="link"])': '1bw #success-text',
+            },
+            border: {
+                '': '#border',
+                '[data-type="primary"]': '#clear',
+                '[data-type="primary"] & pressed': '#success-text',
+                '[data-type="secondary"]': '#success.15',
+                '[data-type="secondary"] & pressed': '#success.3',
+                '[data-type="clear"]': '#clear',
+                '[data-type="outline"]': '#success.15',
+                '[data-type="outline"] & pressed': '#success.3',
+                '[data-type="neutral"] | [disabled]': '#clear',
+                focused: '#success-text',
+                '[data-type="link"]': '#clear',
+            },
+            fill: {
+                '': '#clear',
+                '[data-type="primary"]': '#success',
+                '[data-type="primary"] & hovered': '#success-text',
+                '[data-type="primary"] & pressed': '#success',
+                '[data-type="secondary"]': '#success.05',
+                '[data-type="secondary"] & hovered': '#success.1',
+                '[data-type="secondary"] & pressed': '#success.05',
+                '[data-type="neutral"]': '#dark.0',
+                '[data-type="neutral"] & hovered': '#dark.04',
+                '[data-type="neutral"] & pressed': '#dark.05',
+                '[disabled] & ![data-type="link"]': '#dark.04',
+                '[data-type="clear"] | [data-type="outline"]': '#success.0',
+                '([data-type="clear"] | [data-type="outline"]) & hovered': '#success.1',
+                '([data-type="clear"] | [data-type="outline"]) & pressed': '#success.05',
+                '([data-type="clear"] | [data-type="outline"]) & [disabled]': '#success.0',
+            },
+            color: {
+                '': '#white',
+                '[data-type="neutral"]': '#dark-02',
+                '[data-type="neutral"] & hovered': '#dark-02',
+                '[data-type="secondary"]': '#success',
+                '[data-type="clear"] | [data-type="outline"] | [data-type="link"]': '#success-text',
+                '[data-type="link"] & pressed': '#success',
+                '[data-type="neutral"] & pressed': '#success',
+                '[disabled]': '#dark.30',
             },
+        },
+        special: {
             outline: {
                 '': '0 #white.0',
-                focused: '@outline-width #white.44',
-                '([data-type="primary"] | [data-type="clear"])': '0 #dark-03.80',
-                '([data-type="primary"] | [data-type="clear"]) & focused': '@outline-width #purple-03.80',
+                'focused & ([data-type="primary"] | [data-type="link"] | [data-type="clear"])': '1bw #white',
             },
             border: {
                 '': '#clear',
                 '[data-type="primary"] & pressed': '#purple-03',
-                '[data-type="secondary"] & pressed': '#white.44',
-                '[data-type="outline"] & !pressed': '#white.44',
+                '[data-type="secondary"]': '#white.3',
+                '[data-type="secondary"] & pressed': '#white.4',
+                '[data-type="outline"] & !pressed': '#white.3',
+                '[data-type="neutral"] & !pressed': 0,
+                '![data-type="primary"] & focused': '#white',
+                '[disabled]': '#white.3',
+                '[data-type="link"]': 0,
             },
             fill: {
                 '': '#clear',
@@ -244,6 +285,7 @@ export const Button = forwardRef(function Button(allProps, ref) {
     const modifiers = useMemo(() => ({
         loading: isLoading,
         selected: isSelected,
+        'with-icons': !!icon || !!rightIcon,
         'single-icon-only': singleIcon,
         ...mods,
     }), [mods, isDisabled, isLoading, isSelected, singleIcon]);
@@ -251,7 +293,7 @@ export const Button = forwardRef(function Button(allProps, ref) {
     const styles = extractStyles(props, STYLE_PROPS);
     const isDisabledElement = actionProps.isDisabled;
     delete actionProps.isDisabled;
-    return (_jsxs(ButtonElement, { download: download, ...actionProps, disabled: isDisabledElement, variant: theme, "data-theme": theme, "data-type": type ?? 'secondary', "data-size": size ?? 'medium', styles: styles, children: [icon || isLoading ? (!isLoading ? (icon) : (_jsx(LoadingIcon, { "data-element": "ButtonIcon" }))) : null, children, rightIcon] }));
+    return (_jsxs(ButtonElement, { download: download, ...actionProps, disabled: isDisabledElement, variant: theme, "data-theme": theme, "data-type": type ?? 'outline', "data-size": size ?? 'medium', styles: styles, children: [icon || isLoading ? (!isLoading ? (icon) : (_jsx(LoadingIcon, { "data-element": "ButtonIcon" }))) : null, children, rightIcon] }));
 });