@loadsmart/loadsmart-ui 6.0.15 → 6.0.16

package/dist/theming/themes/miranda-compatibility.theme.d.ts

@@ -112,6 +112,7 @@ declare const mirandaCompatibility: {
     'button-large-height': string | number;
     'button-large-padding-x': string | number;
     'button-large-padding-y': string;
+    'button-outline-offset': string;
     'button-primary-background': string | number;
     'button-primary-background--hover': string;
     'button-primary-background--focus': string | number;
@@ -127,23 +128,25 @@ declare const mirandaCompatibility: {
     'button-primary-color--focus': string | number;
     'button-primary-color--active': string | number;
     'button-primary-color--disabled': string | number;
-    'button-primary-outline': string | number;
+    'button-primary-outline': string;
+    'button-primary-box-shadow': string;
     'button-secondary-background': string | number;
     'button-secondary-background--hover': string;
-    'button-secondary-background--focus': string;
-    'button-secondary-background--active': string | number;
+    'button-secondary-background--focus': string | number;
+    'button-secondary-background--active': string;
     'button-secondary-background--disabled': string | number;
-    'button-secondary-border-color': string | number;
+    'button-secondary-border-color': string;
     'button-secondary-border-color--hover': string;
     'button-secondary-border-color--focus': string;
     'button-secondary-border-color--active': string;
-    'button-secondary-border-color--disabled': string | number;
-    'button-secondary-color': string | number;
+    'button-secondary-border-color--disabled': string;
+    'button-secondary-color': string;
     'button-secondary-color--hover': string;
-    'button-secondary-color--focus': string | number;
+    'button-secondary-color--focus': string;
     'button-secondary-color--active': string;
-    'button-secondary-color--disabled': string | number;
-    'button-secondary-outline': string | number;
+    'button-secondary-color--disabled': string;
+    'button-secondary-outline': string;
+    'button-secondary-box-shadow': string;
     'button-secondary-dark-background': string | number;
     'button-secondary-dark-background--hover': string;
     'button-secondary-dark-background--focus': string | number;
@@ -159,83 +162,108 @@ declare const mirandaCompatibility: {
     'button-secondary-dark-color--focus': string | number;
     'button-secondary-dark-color--active': string;
     'button-secondary-dark-color--disabled': string | number;
-    'button-warning-background': string | number;
+    'button-tertiary-background': string | number;
+    'button-tertiary-background--hover': string;
+    'button-tertiary-background--focus': string | number;
+    'button-tertiary-background--active': string;
+    'button-tertiary-background--disabled': string | number;
+    'button-tertiary-border-color': string | number;
+    'button-tertiary-border-color--hover': string;
+    'button-tertiary-border-color--focus': string | number;
+    'button-tertiary-border-color--active': string;
+    'button-tertiary-border-color--disabled': string | number;
+    'button-tertiary-color': string;
+    'button-tertiary-color--hover': string;
+    'button-tertiary-color--focus': string;
+    'button-tertiary-color--active': string;
+    'button-tertiary-color--disabled': string;
+    'button-tertiary-outline': string;
+    'button-tertiary-box-shadow': string;
+    'button-warning-background': string;
     'button-warning-background--hover': string;
-    'button-warning-background--focus': string | number;
-    'button-warning-background--active': string | number;
-    'button-warning-background--disabled': string | number;
-    'button-warning-border-color': string | number;
-    'button-warning-border-color--hover': string | number;
-    'button-warning-border-color--focus': string | number;
-    'button-warning-border-color--active': string | number;
-    'button-warning-border-color--disabled': string | number;
-    'button-warning-color': string | number;
-    'button-warning-color--hover': string | number;
-    'button-warning-color--focus': string | number;
-    'button-warning-color--active': string | number;
+    'button-warning-background--focus': string;
+    'button-warning-background--active': string;
+    'button-warning-background--disabled': string;
+    'button-warning-border-color': string;
+    'button-warning-border-color--hover': string;
+    'button-warning-border-color--focus': string;
+    'button-warning-border-color--active': string;
+    'button-warning-border-color--disabled': string;
+    'button-warning-color': string;
+    'button-warning-color--hover': string;
+    'button-warning-color--focus': string;
+    'button-warning-color--active': string;
     'button-warning-color--disabled': string | number;
-    'button-warning-outline': string | number;
+    'button-warning-outline': string;
+    'button-warning-box-shadow': string;
     'button-icon-border-radius': string | number;
     'button-icon-small-width': string | number;
     'button-icon-width': string | number;
     'button-icon-large-width': string | number;
-    'button-icon-background': string | number;
-    'button-icon-background--hover': string | number;
-    'button-icon-background--focus': string | number;
-    'button-icon-background--active': string | number;
-    'button-icon-background--disabled': string | number;
-    'button-icon-border-color': string | number;
-    'button-icon-border-color--hover': string | number;
-    'button-icon-border-color--focus': string | number;
-    'button-icon-border-color--active': string | number;
-    'button-icon-border-color--disabled': string | number;
-    'button-icon-color': string | number;
+    'button-icon-background': string;
+    'button-icon-background--hover': string;
+    'button-icon-background--focus': string;
+    'button-icon-background--active': string;
+    'button-icon-background--disabled': string;
+    'button-icon-border-color': string;
+    'button-icon-border-color--hover': string;
+    'button-icon-border-color--focus': string;
+    'button-icon-border-color--active': string;
+    'button-icon-border-color--disabled': string;
+    'button-icon-color': string;
     'button-icon-color--hover': string;
-    'button-icon-color--focus': string | number;
-    'button-icon-color--active': string | number;
-    'button-icon-color--disabled': string | number;
-    'button-icon-outline': string | number;
+    'button-icon-color--focus': string;
+    'button-icon-color--active': string;
+    'button-icon-color--disabled': string;
+    'button-icon-outline': string;
+    'button-icon-box-shadow': string;
     'tag-border-radius': string;
     'tag-border-width': string | number;
-    'tag-font-weight': string | number;
     'tag-font-height': string | number;
     'tag-spacing': string;
-    'tag-spacing-removable': string;
+    'tag-removable-spacing': string;
     'tag-width': string;
-    'tag-outline': string | number;
+    'tag-box-shadow': string;
+    'tag-outline-offset': string;
     'tag-remove-button-background': string | number;
     'tag-remove-button-border-radius': string;
     'tag-icon-spacing': string | number;
-    'tag-small-font-size': string | number;
+    'tag-small-font-size': string;
+    'tag-small-font-weight': string;
     'tag-small-height': string;
     'tag-small-transform': string;
     'tag-small-leading-display': string;
     'tag-small-remove-button-size': string;
     'tag-small-remove-button-icon-size': string;
-    'tag-small-spacing-removable': string;
-    'tag-font-size': string | number;
+    'tag-small-spacing': string;
+    'tag-small-removable-spacing': string;
+    'tag-font-size': string;
+    'tag-font-weight': string;
     'tag-height': string;
     'tag-transform': string;
     'tag-leading-display': string;
     'tag-remove-button-size': string;
     'tag-remove-button-icon-size': string;
-    'tag-large-font-size': string | number;
+    'tag-large-font-size': string;
+    'tag-large-font-weight': string;
     'tag-large-height': string;
     'tag-large-transform': string;
     'tag-large-leading-display': string;
     'tag-large-remove-button-size': string;
     'tag-large-remove-button-icon-size': string;
-    'tag-default-background': string | number;
+    'tag-large-spacing': string;
+    'tag-default-background': string;
     'tag-default-background--hover': string;
-    'tag-default-background--focus': string | number;
-    'tag-default-color': string | number;
+    'tag-default-background--focus': string;
+    'tag-default-color': string;
     'tag-default-color--hover': string | number;
     'tag-default-color--focus': string | number;
     'tag-default-border-color': string;
     'tag-default-border-color--hover': string;
     'tag-default-border-color--focus': string;
+    'tag-default-outline': string;
     'tag-outlined-background': string | number;
-    'tag-outlined-background--hover': string;
+    'tag-outlined-background--hover': string | number;
     'tag-outlined-background--focus': string | number;
     'tag-outlined-color': string | number;
     'tag-outlined-color--hover': string | number;
@@ -243,6 +271,7 @@ declare const mirandaCompatibility: {
     'tag-outlined-border-color': string | number;
     'tag-outlined-border-color--hover': string | number;
     'tag-outlined-border-color--focus': string | number;
+    'tag-outlined-outline': string;
     'tag-accent-background': string;
     'tag-accent-background--hover': string;
     'tag-accent-background--focus': string;
@@ -252,39 +281,45 @@ declare const mirandaCompatibility: {
     'tag-accent-border-color': string;
     'tag-accent-border-color--hover': string;
     'tag-accent-border-color--focus': string;
-    'tag-success-background': string | number;
-    'tag-success-background--hover': string | number;
-    'tag-success-background--focus': string | number;
-    'tag-success-color': string | number;
+    'tag-accent-outline': string;
+    'tag-success-background': string;
+    'tag-success-background--hover': string;
+    'tag-success-background--focus': string;
+    'tag-success-color': string;
     'tag-success-color--hover': string | number;
     'tag-success-color--focus': string | number;
-    'tag-success-border-color': string | number;
-    'tag-success-border-color--hover': string | number;
-    'tag-success-border-color--focus': string | number;
-    'tag-warning-background': string | number;
-    'tag-warning-background--hover': string | number;
-    'tag-warning-background--focus': string | number;
-    'tag-warning-color': string | number;
-    'tag-warning-color--hover': string | number;
-    'tag-warning-color--focus': string | number;
-    'tag-warning-border-color': string | number;
-    'tag-warning-border-color--hover': string | number;
-    'tag-warning-border-color--focus': string | number;
-    'tag-danger-background': string | number;
-    'tag-danger-background--hover': string | number;
-    'tag-danger-background--focus': string | number;
-    'tag-danger-color': string | number;
-    'tag-danger-color--hover': string | number;
-    'tag-danger-color--focus': string | number;
-    'tag-danger-border-color': string | number;
-    'tag-danger-border-color--hover': string | number;
-    'tag-danger-border-color--focus': string | number;
+    'tag-success-border-color': string;
+    'tag-success-border-color--hover': string;
+    'tag-success-border-color--focus': string;
+    'tag-success-outline': string;
+    'tag-warning-background': string;
+    'tag-warning-background--hover': string;
+    'tag-warning-background--focus': string;
+    'tag-warning-color': string;
+    'tag-warning-color--hover': string;
+    'tag-warning-color--focus': string;
+    'tag-warning-border-color': string;
+    'tag-warning-border-color--hover': string;
+    'tag-warning-border-color--focus': string;
+    'tag-warning-outline': string;
+    'tag-danger-background': string;
+    'tag-danger-background--hover': string;
+    'tag-danger-background--focus': string;
+    'tag-danger-color': string;
+    'tag-danger-color--hover': string;
+    'tag-danger-color--focus': string;
+    'tag-danger-border-color': string;
+    'tag-danger-border-color--hover': string;
+    'tag-danger-border-color--focus': string;
+    'tag-danger-outline': string;
     'checkbox-color': string | number;
     'checkbox-font-weight': string | number;
     'checkbox-font-size': string | number;
     'checkbox-selector-border-radius': string | number;
     'checkbox-selector-size': string;
-    'checkbox-selector-outline': string | number;
+    'checkbox-selector-box-shadow': string;
+    'checkbox-selector-outline': string;
+    'checkbox-selector-outline-offset': string;
     'checkbox-small-font-size': string | number;
     'checkbox-selector-icon-color': string | number;
     'checkbox-selector-background': string | number;
@@ -317,7 +352,7 @@ declare const mirandaCompatibility: {
     'radio-font-size': string | number;
     'radio-selector-border-radius': string | number;
     'radio-selector-size': string;
-    'radio-selector-outline': string | number;
+    'radio-selector-box-shadow': string;
     'radio-small-font-size': string | number;
     'radio-small-selector-size': string;
     'radio-selector-background': string | number;
@@ -368,7 +403,9 @@ declare const mirandaCompatibility: {
     'text-field-height': string | number;
     'text-field-padding-x': string | number;
     'text-field-padding-y': string | number;
-    'text-field-outline': string | number;
+    'text-field-box-shadow': string;
+    'text-field-outline': string;
+    'text-field-outline-offset': string;
     'text-field-small-height': string | number;
     'text-field-small-padding-x': string | number;
     'text-field-small-padding-y': string | number;
@@ -393,7 +430,7 @@ declare const mirandaCompatibility: {
     'text-field-dark-border-color--disabled': string | number;
     'text-field-success-border-color': string | number;
     'text-field-danger-border-color': string;
-    'text-field-dark-outline': string;
+    'text-field-dark-box-shadow': string;
     'textarea-border-radius': string | number;
     'textarea-color': string | number;
     'textarea-font-size': string | number;
@@ -402,7 +439,9 @@ declare const mirandaCompatibility: {
     'textarea-min-height': string;
     'textarea-padding-x': string | number;
     'textarea-padding-y': string | number;
-    'textarea-outline': string | number;
+    'textarea-box-shadow': string;
+    'textarea-outline': string;
+    'textarea-outline-offset': string;
     'textarea-small-padding-x': string | number;
     'textarea-small-padding-y': string | number;
     'textarea-small-font-size': string | number;
@@ -426,12 +465,15 @@ declare const mirandaCompatibility: {
     'textarea-dark-border-color--disabled': string | number;
     'textarea-success-border-color': string | number;
     'textarea-danger-border-color': string | number;
-    'textarea-dark-outline': string;
+    'textarea-dark-box-shadow': string;
     'link-font-size': string | number;
     'link-font-height': string | number;
     'link-color': string;
     'link-font-weight': string | number;
     'link-font-weight--hover': string | number;
+    'link-box-shadow': string;
+    'link-outline': string;
+    'link-outline-offset': string;
     'breadcrumbs-font-size': string | number;
     'breadcrumbs-font-height': string | number;
     'breadcrumbs-font-weight': string | number;
@@ -515,7 +557,9 @@ declare const mirandaCompatibility: {
     'switch-width': string;
     'switch-height': string;
     'switch-border-radius': string;
-    'switch-outline': string | number;
+    'switch-box-shadow': string;
+    'switch-outline': string;
+    'switch-outline-offset': string;
     'switch-large-width': string;
     'switch-large-height': string;
     'switch-large-border-radius': string;
@@ -610,9 +654,14 @@ declare const mirandaCompatibility: {
     'top-navigation-item-icon-color': string | number;
     'top-navigation-item-color': string | number;
     'top-navigation-item-color--hover': string;
+    'select-trigger-height': string;
+    'select-trigger-border-color': string;
     'select-selected-option-check-color': string;
     'select-selected-option-background-color': string;
     'toggle-text-transform': string;
+    'toggle-box-shadow': string;
+    'toggle-outline': string;
+    'toggle-outline-offset': string;
     'toggle-background-color': string | number;
     'toggle-background-color--hover': string;
     'toggle-background-color--focus': string | number;
@@ -652,7 +701,7 @@ declare const mirandaCompatibility: {
     'toggle-multiple-checked-border-color': string;
     'toggle-multiple-checked-border-color--disabled': string;
     'toggle-multiple-font-size': string;
-    'toggle-multiple-small-font-size': string | number;
+    'toggle-multiple-small-font-size': string;
     'toggle-multiple-height': string;
     'toggle-multiple-small-height': string;
     'toggle-group-border-color--disabled': string;
@@ -666,10 +715,16 @@ declare const mirandaCompatibility: {
     'toggle-group-single-border-color': string;
     'toggle-group-single-border-radius': string;
     'toggle-group-single-padding': string;
+    'dropdown-trigger-border-color': string;
+    'dropdown-trigger-dark-border-color': string;
+    'dropdown-trigger-outlined-border-color': string | number;
     'dropdown-trigger-expanded-color': string;
-    'dropdown-trigger-height': string | number;
-    'dropdown-trigger-small-height': string | number;
-    'dropdown-trigger-large-height': string | number;
+    'dropdown-trigger-height': string;
+    'dropdown-trigger-small-height': string;
+    'dropdown-trigger-large-height': string;
+    'dropdown-trigger-box-shadow': string;
+    'dropdown-trigger-outline': string;
+    'dropdown-trigger-outline-offset': string;
     'height-small': string;
     'height-default': string;
     'height-large': string;
@@ -741,6 +796,7 @@ declare const mirandaCompatibility: {
     'border-radius-m': string;
     'border-radius-l': string;
     'border-radius-circle': string;
+    'tag-outline-outline': string;
     'dropdown-background': string | number;
     'dropdown-border-color': string | number;
     'dropdown-border-radius': string | number;

package/dist/tools/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-82e9ff9d.js");require("../toArray-b56541b4.js"),require("../miranda-compatibility.theme-f99913ed.js"),require("@loadsmart/miranda-tokens"),require("../theming/index.js"),exports.conditional=e.conditional,exports.prop=e.prop,exports.whenProps=e.whenProps;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-201ffe28.js");require("../toArray-b56541b4.js"),require("../miranda-compatibility.theme-22a9ce26.js"),require("@loadsmart/miranda-tokens"),require("../theming/index.js"),exports.conditional=e.conditional,exports.prop=e.prop,exports.whenProps=e.whenProps;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@loadsmart/loadsmart-ui",
-	"version": "6.0.15",
+	"version": "6.0.16",
 	"description": "Miranda UI, a React UI library",
 	"main": "dist",
 	"files": [

package/src/common/CloseButton/CloseButton.tsx

@@ -36,7 +36,10 @@ const Button = styled(BaseButton)`
   })};
 
   ${focusable`
-    box-shadow: ${token('button-icon-outline')};
+    box-shadow: ${token('button-icon-box-shadow')};
+
+    outline: ${token('button-icon-outline')};
+    outline-offset: ${token('button-outline-offset')};
   `}
 `
 

package/src/common/SelectionWrapper.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import type ColorScheme from 'utils/types/ColorScheme'
 import conditional, { whenProps } from 'tools/conditional'
 import disableable from 'styles/disableable'
+import focusable from 'styles/focusable'
 import font from 'styles/font'
 import { getToken as token } from 'theming'
 import transition from 'styles/transition'
@@ -66,6 +67,8 @@ const StyledLabel = styled.label<SelectionStyleProps>`
 
   cursor: pointer;
 
+  border-radius: ${token('border-radius-s')};
+
   font-size: ${conditional({
     'checkbox-font-size': whenProps({ scale: 'default' }),
     'checkbox-small-font-size': whenProps({ scale: 'small' }),
@@ -93,6 +96,11 @@ const StyledLabel = styled.label<SelectionStyleProps>`
   }
 
   ${disableable()}
+
+  ${focusable`
+    outline: ${token('checkbox-selector-outline')};
+    outline-offset: ${token('checkbox-selector-outline-offset')};
+  `}
 `
 
 function SelectionWrapper({

package/src/components/Button/Button.tsx

@@ -142,11 +142,12 @@ const StyledButton = styled(BaseStyledButton)<{
 
   color: ${conditional({
     'button-primary-color': whenProps({ $variant: 'primary' }),
-    'button-secondary-color': whenProps({ $variant: ['secondary', 'tertiary'], $scheme: 'light' }),
+    'button-secondary-color': whenProps({ $variant: 'secondary', $scheme: 'light' }),
     'button-secondary-dark-color': whenProps({
-      $variant: ['secondary', 'tertiary'],
+      $variant: 'secondary',
       $scheme: 'dark',
     }),
+    'button-tertiary-color': whenProps({ $variant: 'tertiary' }),
     'button-warning-color': whenProps({ $variant: 'warning' }),
     'button-icon-color': whenProps({ $variant: 'icon' }),
   })};
@@ -154,13 +155,16 @@ const StyledButton = styled(BaseStyledButton)<{
   background: ${conditional({
     'button-primary-background': whenProps({ $variant: 'primary' }),
     'button-secondary-background': whenProps({
-      $variant: ['secondary', 'tertiary'],
+      $variant: 'secondary',
       $scheme: 'light',
     }),
     'button-secondary-dark-background': whenProps({
-      $variant: ['secondary', 'tertiary'],
+      $variant: 'secondary',
       $scheme: 'dark',
     }),
+    'button-tertiary': whenProps({
+      $variant: 'tertiary',
+    }),
     'button-warning-background': whenProps({ $variant: 'warning' }),
     'button-icon-background': whenProps({ $variant: 'icon' }),
   })};
@@ -169,9 +173,9 @@ const StyledButton = styled(BaseStyledButton)<{
     'button-primary-border-color': whenProps({ $variant: 'primary' }),
     'button-secondary-border-color': whenProps({ $variant: 'secondary', $scheme: 'light' }),
     'button-secondary-dark-border-color': whenProps({ $variant: 'secondary', $scheme: 'dark' }),
+    'button-tertiary-border-color': whenProps({ $variant: 'tertiary' }),
     'button-warning-border-color': whenProps({ $variant: 'warning' }),
     'button-icon-border-color': whenProps({ $variant: 'icon' }),
-    'color-transparent': whenProps({ $variant: 'tertiary' }),
   })};
   border-radius: ${conditional({
     'button-border-radius': whenProps({ $variant: ['primary', 'secondary', 'warning'] }),
@@ -182,13 +186,16 @@ const StyledButton = styled(BaseStyledButton)<{
     background: ${conditional({
       'button-primary-background--hover': whenProps({ $variant: 'primary' }),
       'button-secondary-background--hover': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-background--hover': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-background--hover': whenProps({
+        $variant: 'tertiary',
+      }),
       'button-warning-background--hover': whenProps({ $variant: 'warning' }),
       'button-icon-background--hover': whenProps({ $variant: 'icon' }),
     })};
@@ -202,20 +209,21 @@ const StyledButton = styled(BaseStyledButton)<{
         $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-border-color--hover': whenProps({ $variant: 'tertiary' }),
       'button-warning-border-color--hover': whenProps({ $variant: 'warning' }),
       'button-icon-border-color--hover': whenProps({ $variant: 'icon' }),
-      'color-transparent': whenProps({ $variant: 'tertiary' }),
     })};
     color: ${conditional({
       'button-primary-color--hover': whenProps({ $variant: 'primary' }),
       'button-secondary-color--hover': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-color--hover': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-color--hover': whenProps({ $variant: 'tertiary' }),
       'button-warning-color--hover': whenProps({ $variant: 'warning' }),
       'button-icon-color--hover': whenProps({ $variant: 'icon' }),
     })};
@@ -225,13 +233,14 @@ const StyledButton = styled(BaseStyledButton)<{
     background: ${conditional({
       'button-primary-background--disabled': whenProps({ $variant: 'primary' }),
       'button-secondary-background--disabled': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-background--disabled': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-background--disabled': whenProps({ $variant: 'tertiary' }),
       'button-warning-background--disabled': whenProps({ $variant: 'warning' }),
       'button-icon-background--disabled': whenProps({ $variant: 'icon' }),
     })};
@@ -245,20 +254,21 @@ const StyledButton = styled(BaseStyledButton)<{
         $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-border-color--disabled': whenProps({ $variant: 'tertiary' }),
       'button-warning-border-color--disabled': whenProps({ $variant: 'warning' }),
       'button-icon-border-color--disabled': whenProps({ $variant: 'icon' }),
-      'color-transparent': whenProps({ $variant: 'tertiary' }),
     })};
     color: ${conditional({
       'button-primary-color--disabled': whenProps({ $variant: 'primary' }),
       'button-secondary-color--disabled': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-color--disabled': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-color--disabled': whenProps({ $variant: 'tertiary' }),
       'button-warning-color--disabled': whenProps({ $variant: 'warning' }),
       'button-icon-color--disabled': whenProps({ $variant: 'icon' }),
     })};
@@ -268,13 +278,14 @@ const StyledButton = styled(BaseStyledButton)<{
     background: ${conditional({
       'button-primary-background--focus': whenProps({ $variant: 'primary' }),
       'button-secondary-background--focus': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-background--focus': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-background--focus': whenProps({ $variant: 'tertiary' }),
       'button-warning-background--focus': whenProps({ $variant: 'warning' }),
       'button-icon-background--focus': whenProps({ $variant: 'icon' }),
     })};
@@ -285,30 +296,42 @@ const StyledButton = styled(BaseStyledButton)<{
         $scheme: 'light',
       }),
       'button-secondary-dark-border-color--focus': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-border-color--focus': whenProps({ $variant: 'tertiary' }),
       'button-warning-border-color--focus': whenProps({ $variant: 'warning' }),
       'button-icon-border-color--focus': whenProps({ $variant: 'icon' }),
-      'color-transparent': whenProps({ $variant: 'tertiary' }),
     })};
     color: ${conditional({
       'button-primary-color--focus': whenProps({ $variant: 'primary' }),
       'button-secondary-color--focus': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-color--focus': whenProps({ $variant: 'secondary', $scheme: 'dark' }),
+      'button-tertiary-color--focus': whenProps({ $variant: 'tertiary' }),
       'button-warning-color--focus': whenProps({ $variant: 'warning' }),
       'button-icon-color--focus': whenProps({ $variant: 'icon' }),
     })};
 
     box-shadow: ${conditional({
+      'button-primary-box-shadow': whenProps({ $variant: 'primary' }),
+      'button-secondary-box-shadow': whenProps({ $variant: 'secondary' }),
+      'button-warning-box-shadow': whenProps({ $variant: 'warning' }),
+      'button-tertiary-box-shadow': whenProps({ $variant: 'tertiary' }),
+      'button-icon-box-shadow': whenProps({ $variant: 'icon' }),
+    })};
+
+    outline: ${conditional({
       'button-primary-outline': whenProps({ $variant: 'primary' }),
       'button-secondary-outline': whenProps({ $variant: 'secondary' }),
+      'button-tertiary-outline': whenProps({ $variant: 'tertiary' }),
       'button-warning-outline': whenProps({ $variant: 'warning' }),
       'button-icon-outline': whenProps({ $variant: 'icon' }),
-    })}
+    })};
+
+    outline-offset: ${token('button-outline-offset')};
   `}
 
   ${activatable`

package/src/components/Checkbox/Checkbox.tsx

@@ -127,7 +127,7 @@ const Selector = styled.input<SelectionStyleProps>`
       color: ${token('checkbox-selector-icon-color')};
     }
 
-    box-shadow: ${token('checkbox-selector-outline')};
+    box-shadow: ${token('checkbox-selector-box-shadow')};
   `}
 `