@siemens/element-theme 49.0.0-rc.1 → 49.0.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siemens/element-theme",
-  "version": "49.0.0-rc.1",
+  "version": "49.0.0-rc.3",
   "description": "Element CSS theme.",
   "license": "MIT",
   "repository": {

package/src/styles/bootstrap/_badges.scss

@@ -125,10 +125,10 @@
   }
 
   .icon {
-    font-size: 20px;
-    margin-inline-start: -4px;
-    vertical-align: top;
     padding-block: map.get(spacers.$spacers, 1);
+    margin-inline-start: -4px;
+    margin-inline-end: map.get(spacers.$spacers, 1);
+    vertical-align: bottom;
   }
 }
 
@@ -162,8 +162,8 @@
   font-weight: typography.$si-font-weight-semibold;
 }
 
-.icon + .badge-text {
-  inset-block-start: -5px;
+:is(.icon, .icon-sm, .icon-lg) + .badge-text {
+  inset-block-start: -8px;
   inset-inline-start: -12px;
   margin-inline-end: -12px;
 }

package/src/styles/bootstrap/_button-group.scss

@@ -6,6 +6,10 @@
 
 @use 'sass:map';
 
+$btn-size-default: 32px !default;
+$btn-size-lg: 40px !default;
+$btn-size-sm: 24px !default;
+
 .btn-group {
   position: relative;
   display: inline-flex;
@@ -52,9 +56,31 @@
     margin-inline-start: -1px;
   }
 
+  .btn {
+    block-size: $btn-size-default;
+
+    &.btn-lg {
+      block-size: $btn-size-lg;
+    }
+
+    &.btn-sm {
+      block-size: $btn-size-sm;
+    }
+  }
+
+  .btn-icon,
+  // @deprecated Will be removed in a future major version, use .btn-icon instead.
+  .icon-only {
+    inline-size: $btn-size-default;
+
+    &.btn-lg {
+      inline-size: $btn-size-lg;
+    }
+  }
+
   // Dropdown toggle styling for split buttons
   .btn.dropdown-toggle {
-    inline-size: 24px;
+    inline-size: $btn-size-sm;
     padding: 0;
     border-start-start-radius: 0;
     border-end-start-radius: 0;
@@ -81,11 +107,13 @@
     transition: none;
 
     &.btn-icon {
+      inline-size: auto;
       padding-inline: map.get(spacers.$spacers, 5) - 1px;
     }
 
     // @deprecated Will be removed in a future major version, use .btn-icon instead.
     &.icon-only {
+      inline-size: auto;
       min-inline-size: unset;
       padding-inline: map.get(spacers.$spacers, 5) - 1px;
 
@@ -97,11 +125,11 @@
 
   &:checked + .btn,
   + .btn:hover {
-    color: semantic-tokens.$element-action-secondary-text-hover;
+    color: semantic-tokens.$element-ui-0-hover;
   }
 
   &:checked + .btn {
-    background: semantic-tokens.$element-action-secondary-hover;
+    background: semantic-tokens.$element-action-secondary-active;
     border-color: semantic-tokens.$element-action-secondary-border-hover;
     z-index: 2;
 

package/src/styles/bootstrap/_buttons.scss

@@ -8,18 +8,19 @@
 
 @use 'sass:map';
 
-$btn-circle-font-size-default: 32px !default;
-$btn-circle-font-size-sm: 24px !default;
-$btn-circle-size-default: 40px !default;
-$btn-circle-size-sm: 32px !default;
-$btn-circle-size-xs: 24px !default;
+$btn-icon-font-size-default: variables.$si-icon-font-size !default;
+$btn-icon-font-size-lg: variables.$si-icon-font-size-lg !default;
+$btn-icon-font-size-sm: variables.$si-icon-font-size !default;
+$btn-icon-size-default: 32px !default;
+$btn-icon-size-lg: 40px !default;
+$btn-icon-size-sm: 24px !default;
 
 // there are some non .btn buttons used in element
 button {
   color: semantic-tokens.$element-text-primary;
 }
 
-@mixin button-circle-size($btn-size, $font-size) {
+@mixin button-icon-size($btn-size, $font-size) {
   inline-size: $btn-size;
   block-size: $btn-size;
   font-size: $font-size;
@@ -49,29 +50,27 @@ button {
   }
 
   // If the case of a link looking like a button <a class="btn btn-primary" href="#" target="_blank">Go Back</a>,
-  // the hover effect from the <a> element needs to be reset.
-  &:hover {
+  // the hover/active effect from the <a> element needs to be reset.
+  &:is(:hover, :active) {
     text-decoration: none;
   }
 
-  &:not(:is(:disabled, .disabled)):is(:active, .active, :hover, .hover) {
+  &:not(:is(:disabled, .disabled)):is(:hover, .hover) {
     color: var(--btn-color-hover, inherit);
     background: var(--btn-bg-hover, inherit);
     border-color: var(--btn-border-color-hover);
   }
 
+  &:not(:is(:disabled, .disabled)):is(:active, .active) {
+    color: var(--btn-color-active, inherit);
+    background: var(--btn-bg-active, inherit);
+    border-color: var(--btn-border-color-active);
+  }
+
   .icon {
     margin-block: -#{map.get(spacers.$spacers, 2)};
     margin-inline: -#{map.get(spacers.$spacers, 2)} #{map.get(spacers.$spacers, 2)};
   }
-
-  &.btn-icon {
-    padding-inline: calc(#{map.get(spacers.$spacers, 2)} - var(--btn-border-width, 0px));
-
-    .icon {
-      margin-inline: 0;
-    }
-  }
 }
 
 .btn:not(:is(.btn-circle, .btn-link, .btn-close, .btn-icon)) {
@@ -81,22 +80,28 @@ button {
 .btn-primary {
   --btn-bg: #{semantic-tokens.$element-action-primary};
   --btn-bg-hover: #{semantic-tokens.$element-action-primary-hover};
+  --btn-bg-active: #{semantic-tokens.$element-action-primary-active};
   --btn-color: #{semantic-tokens.$element-action-primary-text};
   --btn-color-hover: #{semantic-tokens.$element-action-primary-text};
+  --btn-color-active: #{semantic-tokens.$element-action-primary-text};
 }
 
 .btn-danger {
   --btn-bg: #{semantic-tokens.$element-action-danger};
   --btn-bg-hover: #{semantic-tokens.$element-action-danger-hover};
+  --btn-bg-active: #{semantic-tokens.$element-action-danger-active};
   --btn-color: #{semantic-tokens.$element-action-danger-text};
   --btn-color-hover: #{semantic-tokens.$element-action-danger-text};
+  --btn-color-active: #{semantic-tokens.$element-action-danger-text};
 }
 
 .btn-warning {
   --btn-bg: #{semantic-tokens.$element-action-warning};
   --btn-bg-hover: #{semantic-tokens.$element-action-warning-hover};
+  --btn-bg-active: #{semantic-tokens.$element-action-warning-active};
   --btn-color: #{semantic-tokens.$element-action-warning-text};
   --btn-color-hover: #{semantic-tokens.$element-action-warning-text};
+  --btn-color-active: #{semantic-tokens.$element-action-warning-text};
 }
 
 .btn-secondary,
@@ -104,11 +109,14 @@ button {
 .btn-secondary-danger {
   --btn-bg: #{semantic-tokens.$element-action-secondary};
   --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
+  --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
   --btn-color: #{semantic-tokens.$element-action-secondary-text};
   --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
+  --btn-color-active: #{semantic-tokens.$element-action-primary-active};
   --btn-border-width: 1px;
   --btn-border-color: #{semantic-tokens.$element-action-secondary-border};
   --btn-border-color-hover: #{semantic-tokens.$element-action-secondary-border-hover};
+  --btn-border-color-active: #{semantic-tokens.$element-action-secondary-border-active};
 }
 
 .btn-tertiary,
@@ -116,37 +124,46 @@ button {
 .btn-tertiary-danger {
   --btn-bg: transparent;
   --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
+  --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
   --btn-color: #{semantic-tokens.$element-action-secondary-text};
   --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
+  --btn-color-active: #{semantic-tokens.$element-action-primary-active};
 }
 
 .btn-secondary-warning,
 .btn-tertiary-warning {
   --btn-bg-hover: #{semantic-tokens.$element-action-warning-hover};
+  --btn-bg-active: #{semantic-tokens.$element-action-warning-active};
   --btn-color: #{semantic-tokens.$element-action-secondary-warning};
   --btn-color-hover: #{semantic-tokens.$element-action-warning-text};
+  --btn-color-active: #{semantic-tokens.$element-action-warning-text};
   --btn-border-color: #{semantic-tokens.$element-action-secondary-warning};
   --btn-border-color-hover: #{semantic-tokens.$element-action-warning-hover};
+  --btn-border-color-active: #{semantic-tokens.$element-action-warning-active};
 }
 
 .btn-secondary-danger,
 .btn-tertiary-danger {
   --btn-bg-hover: #{semantic-tokens.$element-action-danger-hover};
+  --btn-bg-active: #{semantic-tokens.$element-action-danger-active};
   --btn-color: #{semantic-tokens.$element-action-secondary-danger};
   --btn-color-hover: #{semantic-tokens.$element-action-danger-text};
+  --btn-color-active: #{semantic-tokens.$element-action-danger-text};
   --btn-border-color: #{semantic-tokens.$element-action-secondary-danger};
   --btn-border-color-hover: #{semantic-tokens.$element-action-danger-hover};
+  --btn-border-color-active: #{semantic-tokens.$element-action-danger-active};
 }
 
 .btn-link {
   --btn-color: #{bootstrap-variables.$btn-link-color};
   --btn-color-hover: #{bootstrap-variables.$btn-link-hover-color};
+  --btn-color-active: #{semantic-tokens.$element-action-primary-active};
   font-weight: typography.$si-font-weight-body;
   justify-content: flex-start;
   text-decoration: bootstrap-variables.$link-decoration;
   padding: 0;
 
-  &:hover {
+  &:is(:hover, :active) {
     text-decoration: bootstrap-variables.$link-hover-decoration;
   }
 
@@ -156,26 +173,38 @@ button {
   }
 }
 
-// Circle Buttons
+// Icon buttons with circle variant
 // --------------
-:is(.btn-circle, .btn-close) {
-  padding: 0 !important; // stylelint-disable-line declaration-no-important
-  border-radius: 50%;
+.btn:is(.btn-circle, .btn-icon, .btn-close) {
+  display: inline-flex;
+  padding: 0;
   flex-shrink: 0;
+
+  .icon {
+    margin-inline: 0;
+  }
+}
+
+.btn-icon {
+  border-radius: semantic-tokens.$element-button-radius;
 }
 
 .btn-circle {
-  &,
-  &.btn-lg {
-    @include button-circle-size($btn-circle-size-default, $btn-circle-font-size-default);
+  border-radius: 50%;
+}
+
+.btn-circle,
+.btn-icon {
+  & {
+    @include button-icon-size($btn-icon-size-default, $btn-icon-font-size-default);
   }
 
-  &.btn-sm {
-    @include button-circle-size($btn-circle-size-sm, $btn-circle-font-size-sm);
+  &.btn-lg {
+    @include button-icon-size($btn-icon-size-lg, $btn-icon-font-size-lg);
   }
 
-  &.btn-xs {
-    @include button-circle-size($btn-circle-size-xs, $btn-circle-font-size-sm);
+  &.btn-sm {
+    @include button-icon-size($btn-icon-size-sm, $btn-icon-font-size-sm);
   }
 
   .icon {
@@ -185,11 +214,21 @@ button {
 }
 
 .btn-circle.btn-ghost,
+.btn-icon.btn-ghost,
 .btn-close {
   --btn-bg: transparent;
+  --btn-bg-hover: #{variables.$element-base-1-hover};
+  --btn-bg-active: #{variables.$element-base-1-selected};
+  --btn-color: #{semantic-tokens.$element-ui-1};
+  --btn-color-active: #{semantic-tokens.$element-ui-1};
+}
+
+.btn-close.btn-tertiary {
   --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
-  --btn-color: #{semantic-tokens.$element-ui-2};
-  --btn-color-hover: #{semantic-tokens.$element-ui-1};
+  --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
+  --btn-color: #{semantic-tokens.$element-action-secondary-text};
+  --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
+  --btn-color-active: #{semantic-tokens.$element-action-primary-active};
 }
 
 .btn-lg {
@@ -199,19 +238,18 @@ button {
 
 .btn-sm {
   font-size: bootstrap-variables.$btn-font-size-sm;
-  line-height: 1;
+  line-height: map.get(spacers.$spacers, 4);
 }
 
 // this is for compatibility so that old markup looks ok-ish
 .btn-close {
-  @include button-circle-size($btn-circle-size-sm, $btn-circle-font-size-sm);
+  @include button-icon-size($btn-icon-size-default, $btn-icon-font-size-default);
 
   font-weight: typography.$si-font-weight-normal;
 
   &::before {
     content: '\002715';
     font-size: 1rem;
-    margin-block-start: 2px;
   }
 
   > * {
@@ -223,11 +261,14 @@ button {
 .btn-input {
   --btn-bg: #{bootstrap-variables.$input-bg};
   --btn-bg-hover: #{bootstrap-variables.$input-bg};
+  --btn-bg-active: #{bootstrap-variables.$input-bg};
   --btn-color: #{bootstrap-variables.$input-color};
   --btn-color-hover: #{bootstrap-variables.$input-color};
+  --btn-color-active: #{bootstrap-variables.$input-color};
   --btn-border-width: 1px;
   --btn-border-color: #{semantic-tokens.$element-ui-2};
   --btn-border-color-hover: #{semantic-tokens.$element-ui-1};
+  --btn-border-color-active: #{semantic-tokens.$element-ui-1};
 
   @include typography.si-font(
     typography.$si-font-size-body,

package/src/styles/bootstrap/_dropdowns.scss

@@ -53,8 +53,8 @@
   .dropdown-caret {
     padding-inline-start: map.get(spacers.$spacers, 2);
     margin-block: -#{map.get(spacers.$spacers, 2)};
-    margin-inline: auto -#{map.get(spacers.$spacers, 4)};
-    font-size: 1.5rem !important; // stylelint-disable-line declaration-no-important
+    margin-inline: auto -#{map.get(spacers.$spacers, 2)};
+    font-size: variables.$si-icon-font-size !important; // stylelint-disable-line declaration-no-important
     transform: rotate(var(--caret-rotate));
     // adjust the origin to account for the negative margin. Otherwise the element would visually not rotate around the center.
     transform-origin: calc(50% + #{map.get(spacers.$spacers, 1)}) 50%;

package/src/styles/bootstrap/_modals.scss

@@ -1,6 +1,7 @@
 @use '../variables/spacers';
 @use '../variables/typography';
 @use '../variables/zindex';
+@use '../variables/si-vars';
 @use './functions';
 @use './mixins/backdrop';
 @use './mixins/breakpoints';
@@ -86,7 +87,7 @@
   }
 
   .icon {
-    font-size: 2rem;
+    font-size: si-vars.$si-icon-font-size-lg;
     margin-inline-end: map.get(spacers.$spacers, 4);
   }
 

package/src/styles/bootstrap/_tooltip.scss

@@ -13,10 +13,10 @@
   font-size: variables.$tooltip-font-size;
   // Allow breaking very long words so they don't overflow the tooltip's bounds
   word-wrap: break-word;
-  opacity: 0;
 
   &.show {
     opacity: variables.$tooltip-opacity;
+    transform: scale(1);
   }
 
   .tooltip-arrow {

package/src/styles/bootstrap/forms/_form-check.scss

@@ -52,6 +52,11 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
     background: semantic-tokens.$element-action-secondary-hover;
   }
 
+  &:is(:active, .active) {
+    border-color: semantic-tokens.$element-action-primary-active;
+    background: semantic-tokens.$element-action-secondary-active;
+  }
+
   &:is([disabled], .disabled) {
     border-color: semantic-tokens.$element-ui-3;
     background-color: semantic-tokens.$element-ui-5;
@@ -77,12 +82,17 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
   }
 
   &:is(:checked, .checked) {
-    background-color: semantic-tokens.$element-ui-0;
-    border-color: semantic-tokens.$element-ui-0;
+    background-color: semantic-tokens.$element-action-primary;
+    border-color: semantic-tokens.$element-action-primary;
 
     &:hover {
-      background-color: semantic-tokens.$element-ui-0-hover;
-      border-color: semantic-tokens.$element-ui-0-hover;
+      background-color: semantic-tokens.$element-action-primary-hover;
+      border-color: semantic-tokens.$element-action-primary-hover;
+    }
+
+    &:active {
+      background-color: semantic-tokens.$element-action-primary-active;
+      border-color: semantic-tokens.$element-action-primary-active;
     }
 
     &::after {
@@ -97,11 +107,11 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
   }
 
   &:indeterminate {
-    border-color: semantic-tokens.$element-ui-0;
+    border-color: semantic-tokens.$element-action-primary;
 
     &::after {
       mask-image: none;
-      background-color: semantic-tokens.$element-ui-0;
+      background-color: semantic-tokens.$element-action-primary;
       inline-size: 10px;
       block-size: 2px;
       opacity: 1;
@@ -110,10 +120,10 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
     }
 
     &:hover {
-      border-color: semantic-tokens.$element-ui-0-hover;
+      border-color: semantic-tokens.$element-action-primary-hover;
 
       &::after {
-        background-color: semantic-tokens.$element-ui-0-hover;
+        background-color: semantic-tokens.$element-action-primary-hover;
       }
     }
 
@@ -145,17 +155,25 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
   }
 
   &:checked {
-    border-color: semantic-tokens.$element-ui-0;
+    border-color: semantic-tokens.$element-action-primary;
 
     &::after {
-      background-color: semantic-tokens.$element-ui-0;
+      background-color: semantic-tokens.$element-action-primary;
     }
 
     &:hover {
-      border-color: semantic-tokens.$element-ui-0-hover;
+      border-color: semantic-tokens.$element-action-primary-hover;
+
+      &::after {
+        background-color: semantic-tokens.$element-action-primary-hover;
+      }
+    }
+
+    &:active {
+      border-color: semantic-tokens.$element-action-primary-active;
 
       &::after {
-        background-color: semantic-tokens.$element-ui-0-hover;
+        background-color: semantic-tokens.$element-action-primary-active;
       }
     }
 

package/src/styles/bootstrap/forms/_form-file.scss

@@ -26,4 +26,9 @@
     color: semantic-tokens.$element-action-secondary-text-hover;
     background: semantic-tokens.$element-action-secondary-hover;
   }
+
+  &:active::file-selector-button {
+    color: semantic-tokens.$element-action-primary-active;
+    background: semantic-tokens.$element-action-secondary-active;
+  }
 }

package/src/styles/bootstrap/forms/_form-range.scss

@@ -31,6 +31,16 @@ $thumb-size: 24px !default;
       semantic-tokens.$element-action-secondary-hover 36%
     );
   }
+
+  &:active {
+    border-color: semantic-tokens.$element-action-primary-active;
+    background: radial-gradient(
+      circle,
+      semantic-tokens.$element-action-primary-active 0%,
+      semantic-tokens.$element-action-primary-active 35%,
+      semantic-tokens.$element-action-secondary-active 36%
+    );
+  }
 }
 
 .form-range {

package/src/styles/bootstrap/forms/_validation.scss

@@ -24,6 +24,41 @@
   }
 }
 
+@mixin form-validation-state-selector-wrapper($state) {
+  @if ($state == 'invalid') {
+    &:has(.was-validated &:#{$state}),
+    &:has(.ng-touched.ng-#{$state}),
+    &:has(.is-#{$state}) {
+      @content;
+    }
+  } @else {
+    &.is-#{$state},
+    &:has(.is-#{$state}) {
+      @content;
+    }
+  }
+}
+
+// Apply common styles for form validation states
+@mixin form-validation-styles($state, $color, $icon) {
+  @if ($state and $icon) {
+    --si-feedback-icon: #{$icon};
+    --si-feedback-icon-offset: 1.5rem;
+  }
+
+  @if $color {
+    &:not(.no-validation):not(:hover),
+    &:not(.no-validation):focus {
+      --border-color: #{$color};
+    }
+  }
+
+  ~ .#{$state}-feedback {
+    display: flex !important; // stylelint-disable-line declaration-no-important
+    flex-direction: column;
+  }
+}
+
 %state-feedback {
   font-size: variables.$form-feedback-font-size;
   display: none;
@@ -39,44 +74,19 @@
     color: $text-color;
   }
 
-  :is(.form-control, .form-select, .form-control-wrapper) {
+  :is(.form-control, .form-select) {
     @include form-validation-state-selector($state) {
-      @if ($state and $icon) {
-        --si-feedback-icon: #{$icon};
-        --si-feedback-icon-offset: 1.5rem;
-      }
-
-      @if $color {
-        &:not(.no-validation):not(:hover),
-        &:not(.no-validation):focus {
-          --border-color: #{$color};
-        }
-      }
-
-      ~ .#{$state}-feedback {
-        display: flex !important; // stylelint-disable-line declaration-no-important
-        flex-direction: column;
-      }
+      @include form-validation-styles($state, $color, $icon);
     }
   }
 
-  .form-control-file {
-    @include form-validation-state-selector($state) {
-      ~ .#{$state}-feedback {
-        display: block;
-      }
-    }
-  }
-
-  .form-check-input {
-    @include form-validation-state-selector($state) {
-      ~ .#{$state}-feedback {
-        display: block;
-      }
+  .form-control-wrapper {
+    @include form-validation-state-selector-wrapper($state) {
+      @include form-validation-styles($state, $color, $icon);
     }
   }
 
-  .form-custom-control {
+  :is(.form-control-file, .form-check-input, .form-custom-control) {
     @include form-validation-state-selector($state) {
       ~ .#{$state}-feedback {
         display: block;

package/src/styles/components/_application-header.scss

@@ -31,8 +31,9 @@
   align-items: stretch;
   border-block-end: 1px solid semantic-tokens.$element-ui-4;
 
-  // hide border when mobile styles are applied and either the dropdown-menu or header-toggle is shown
-  &:has(.dropdown-menu.show, .header-toggle.show) {
+  // hide border when mobile styles are applied and either the dropdown-menu is shown or navigation is expanded
+  &:has(.dropdown-menu.show),
+  &.show-navigation {
     border-block-end: none;
   }
 
@@ -119,9 +120,7 @@
 .header-toggle {
   color: semantic-tokens.$element-text-primary;
   border: 0;
-  line-height: 0;
-  padding: map.get(spacers.$spacers, 4);
-  font-size: 32px;
+  padding: map.get(spacers.$spacers, 5);
   background-color: transparent; // remove default button style
 
   &:is(:hover, .show, :active) {
@@ -148,7 +147,7 @@
   border: 0;
   white-space: nowrap;
 
-  .icon {
+  .icon-lg {
     margin-block: -3px;
 
     ~ .item-title {

package/src/styles/components/_datatable.scss

@@ -214,6 +214,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
 
     .sort-btn {
       color: $datatable-header-color !important; // stylelint-disable-line declaration-no-important
+      margin-inline-start: map.get(spacers.$spacers, 1);
     }
 
     // Resizable handle

package/src/styles/components/_icons.scss

@@ -5,8 +5,12 @@
   font-size: variables.$si-icon-font-size;
 }
 
-.icon-small {
-  font-size: variables.$si-icon-font-size-small;
+.icon-sm {
+  font-size: variables.$si-icon-font-size-sm;
+}
+
+.icon-lg {
+  font-size: variables.$si-icon-font-size-lg;
 }
 
 .spinning {

package/src/styles/components/_links.scss

@@ -1,15 +1,16 @@
 @use '../variables/semantic-tokens';
+@use '../variables/si-vars';
 
 @use 'sass:math';
 // so that @extend works
 @use '../bootstrap/reboot';
 
-$si-link-icon-size: math.div(20em, 14);
-$si-link-icon-line-height: math.div(14em, 20);
-$si-link-icon-spacing: math.div(4em, 20);
+$si-link-icon-size: math.div(16em, 14);
+$si-link-icon-line-height: math.div(14em, 16);
+$si-link-icon-spacing: math.div(4em, 16);
 
 a:active {
-  color: semantic-tokens.$element-ui-0-hover;
+  color: semantic-tokens.$element-action-primary-active;
   text-decoration: underline;
 }
 
@@ -23,17 +24,9 @@ a:active {
 }
 
 .link-icon {
-  font-size: $si-link-icon-size !important; // stylelint-disable-line declaration-no-important
+  font-size: si-vars.$si-icon-font-size-sm !important; // stylelint-disable-line declaration-no-important
   line-height: $si-link-icon-line-height !important; // stylelint-disable-line declaration-no-important
-  margin-block-start: -(math.div(20em - 14em, 2 * 20) + math.div(2.5em, 20));
-  margin-block-end: math.div(20em - 14em, -2 * 20);
+  margin-block-start: -(math.div(16em - 14em, 2 * 16) + math.div(2.5em, 16));
+  margin-block-end: math.div(16em - 14em, -2 * 16);
   vertical-align: middle;
 }
-
-.link-start {
-  margin-inline-end: $si-link-icon-spacing;
-}
-
-.link-end {
-  margin-inline-start: $si-link-icon-spacing;
-}

package/src/styles/components/_switch.scss

@@ -59,6 +59,10 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
         background-color: variables.$element-ui-0-hover;
       }
 
+      &:active {
+        background-color: variables.$element-action-primary-active;
+      }
+
       &:is(:disabled, .disabled) {
         background-color: $si-switch-background-on-color;
       }

package/src/styles/variables/_semantic-tokens.scss

@@ -34,20 +34,25 @@ $element-radius-3: var(--element-radius-3);
 
 $element-action-primary: var(--element-action-primary);
 $element-action-primary-hover: var(--element-action-primary-hover);
+$element-action-primary-active: var(--element-action-primary-active);
 $element-action-primary-text: var(--element-action-primary-text);
 $element-action-secondary: var(--element-action-secondary);
 $element-action-secondary-hover: var(--element-action-secondary-hover);
+$element-action-secondary-active: var(--element-action-secondary-active);
 $element-action-secondary-text: var(--element-action-secondary-text);
 $element-action-secondary-text-hover: var(--element-action-secondary-text-hover);
 $element-action-secondary-border: var(--element-action-secondary-border);
 $element-action-secondary-border-hover: var(--element-action-secondary-border-hover);
+$element-action-secondary-border-active: var(--element-action-secondary-border-active);
 $element-action-secondary-warning: var(--element-action-secondary-warning);
 $element-action-secondary-danger: var(--element-action-secondary-danger);
 $element-action-warning: var(--element-action-warning);
 $element-action-warning-hover: var(--element-action-warning-hover);
+$element-action-warning-active: var(--element-action-warning-active);
 $element-action-warning-text: var(--element-action-warning-text);
 $element-action-danger: var(--element-action-danger);
 $element-action-danger-hover: var(--element-action-danger-hover);
+$element-action-danger-active: var(--element-action-danger-active);
 $element-action-danger-text: var(--element-action-danger-text);
 $element-action-disabled-opacity: var(--element-action-disabled-opacity);
 
@@ -88,6 +93,7 @@ $element-brand-logo: var(--element-brand-logo);
 $element-brand-logo-width: var(--element-brand-logo-width);
 $element-brand-logo-height: var(--element-brand-logo-height);
 $element-brand-logo-text: var(--element-brand-logo-text);
+$element-brand-ai-key-visual: var(--element-brand-ai-key-visual);
 
 $element-company-name: var(--element-company-name);
 

package/src/styles/variables/_si-vars.scss

@@ -2,10 +2,11 @@
 
 // Custom variables
 $si-caret-transition-duration: animations.element-transition-duration(0.4s);
-$si-icon-font-size: 1.5rem;
-$si-icon-font-size-small: 1rem;
+$si-icon-font-size: 1.25rem;
+$si-icon-font-size-sm: 1rem;
+$si-icon-font-size-lg: 1.5rem;
 
-$btn-width-normal: 100px;
+$btn-width-normal: 80px;
 
 // Component styling
 $si-application-header-height: 48px;

package/src/styles/variables/_utilities.scss

@@ -589,14 +589,22 @@ $utilities: (
   )
 );
 
+@function parent-selector($parent) {
+  @if ($parent) {
+    @return '&';
+  } @else {
+    @return '';
+  }
+}
+
 @mixin rtl {
   // for WebKit/Blink based browsers, not (yet) supporting :dir
-  [dir='rtl'] #{if(&, "&","")} {
+  [dir='rtl'] #{parent-selector(&)} {
     @content;
   }
 
   // Spec and Firefox
-  :dir(rtl) #{if(&, "&","")} {
+  :dir(rtl) #{parent-selector(&)} {
     @content;
   }
 }

package/src/theme/_theme-element.scss

@@ -217,7 +217,9 @@ $theme-element-light: (
   element-feedback-icon-valid:
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231c703f' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M222.25 345.88c-5.12 0-10.24-1.95-14.14-5.86l-56.25-56.25c-7.81-7.81-7.81-20.47 0-28.28s20.47-7.81 28.28 0l42.11 42.11 109.61-109.61c7.81-7.81 20.47-7.81 28.28 0s7.81 20.47 0 28.28L236.39 340.02a19.92 19.92 0 0 1-14.14 5.86Z'/%3E%3Cpath d='M256 448c-105.87 0-192-86.13-192-192S150.13 64 256 64s192 86.13 192 192-86.13 192-192 192Zm0-348c-86.02 0-156 69.98-156 156s69.98 156 156 156 156-69.98 156-156-69.98-156-156-156Z'/%3E%3C/svg%3E"),
   element-launchpad-app-background: base.$color-blue-300,
-  element-launchpad-app-color: base.$color-black
+  element-launchpad-app-color: base.$color-black,
+  element-ai-key-visual:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168' fill='none'><path d='M97.2819 76.1142L95.3187 76.5196C94.4108 76.7071 93.7007 77.4165 93.5132 78.3251L93.1077 80.2884C92.971 80.9493 92.0272 80.9493 91.8905 80.2884L91.4851 78.3251C91.2976 77.4173 90.5882 76.7071 89.6796 76.5196L87.7163 76.1142C87.0554 75.9774 87.0554 75.0337 87.7163 74.897L89.6796 74.4915C90.5874 74.304 91.2976 73.5946 91.4851 72.686L91.8905 70.7228C92.0272 70.0618 92.971 70.0618 93.1077 70.7228L93.5132 72.686C93.7007 73.5938 94.4101 74.304 95.3187 74.4915L97.2819 74.897C97.9429 75.0337 97.9429 75.9774 97.2819 76.1142Z' fill='black'/><path d='M91.3179 86.7454L87.046 87.979C85.8296 88.3306 84.8788 89.2813 84.5288 90.4978L83.2976 94.772C83.0241 95.722 81.678 95.722 81.4046 94.772L80.1733 90.4978C79.8226 89.2813 78.8726 88.3298 77.6562 87.979L73.3843 86.7454C72.4351 86.4712 72.4351 85.1267 73.3843 84.8524L77.6562 83.6188C78.8726 83.2673 79.8233 82.3165 80.1733 81.1001L81.4046 76.8259C81.678 75.8759 83.0241 75.8759 83.2976 76.8259L84.5288 81.1001C84.8796 82.3165 85.8296 83.2681 87.046 83.6188L91.3179 84.8524C92.2671 85.1267 92.2671 86.4712 91.3179 86.7454Z' fill='black'/></svg>")
 );
 
 $theme-element-dark: (
@@ -366,5 +368,7 @@ $theme-element-dark: (
   element-feedback-icon-valid:
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328bf66' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M222.25 345.88c-5.12 0-10.24-1.95-14.14-5.86l-56.25-56.25c-7.81-7.81-7.81-20.47 0-28.28s20.47-7.81 28.28 0l42.11 42.11 109.61-109.61c7.81-7.81 20.47-7.81 28.28 0s7.81 20.47 0 28.28L236.39 340.02a19.92 19.92 0 0 1-14.14 5.86Z'/%3E%3Cpath d='M256 448c-105.87 0-192-86.13-192-192S150.13 64 256 64s192 86.13 192 192-86.13 192-192 192Zm0-348c-86.02 0-156 69.98-156 156s69.98 156 156 156 156-69.98 156-156-69.98-156-156-156Z'/%3E%3C/svg%3E"),
   element-launchpad-app-background: base.$color-blue-300,
-  element-launchpad-app-color: base.$color-black
+  element-launchpad-app-color: base.$color-black,
+  element-ai-key-visual:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168' fill='none'><path d='M97.2819 76.1142L95.3187 76.5196C94.4108 76.7071 93.7007 77.4165 93.5132 78.3251L93.1077 80.2884C92.971 80.9493 92.0272 80.9493 91.8905 80.2884L91.4851 78.3251C91.2976 77.4173 90.5882 76.7071 89.6796 76.5196L87.7163 76.1142C87.0554 75.9774 87.0554 75.0337 87.7163 74.897L89.6796 74.4915C90.5874 74.304 91.2976 73.5946 91.4851 72.686L91.8905 70.7228C92.0272 70.0618 92.971 70.0618 93.1077 70.7228L93.5132 72.686C93.7007 73.5938 94.4101 74.304 95.3187 74.4915L97.2819 74.897C97.9429 75.0337 97.9429 75.9774 97.2819 76.1142Z' fill='white'/><path d='M91.3179 86.7454L87.046 87.979C85.8296 88.3306 84.8788 89.2813 84.5288 90.4978L83.2976 94.772C83.0241 95.722 81.678 95.722 81.4046 94.772L80.1733 90.4978C79.8226 89.2813 78.8726 88.3298 77.6562 87.979L73.3843 86.7454C72.4351 86.4712 72.4351 85.1267 73.3843 84.8524L77.6562 83.6188C78.8726 83.2673 79.8233 82.3165 80.1733 81.1001L81.4046 76.8259C81.678 75.8759 83.0241 75.8759 83.2976 76.8259L84.5288 81.1001C84.8796 82.3165 85.8296 83.2681 87.046 83.6188L91.3179 84.8524C92.2671 85.1267 92.2671 86.4712 91.3179 86.7454Z' fill='white'/></svg>")
 );