refactor: migrate mixins

BREAKING CHANGE: `link-variables` mixin renamed to `block-link-variables`,
`link-variables--negative` mixin renamed to `block-link-variables--negative`,
`link-inline-consolidation` mixin renamed to `link-consolidation`,
`link-inline` mixin renamed to `link`,
`link-inline-negative` mixin renamed to `link-variables`

src/components/_index.scss

@@ -1,2 +1,2 @@
 @forward 'core/styles' hide development-style, host-component-properties, link-base,
-  link-focus-visible, link-hover, link-active, link-inline-base, link-inline-consolidation;
+  link-focus-visible, link-hover, link-active, link-consolidation;

src/components/core/styles/mixins/link.scss

@@ -2,7 +2,7 @@
 @use './a11y';
 @use '../core/mediaqueries';
 
-@mixin link-variables {
+@mixin block-link-variables {
   --sbb-link-color-normal: var(--sbb-color-granite-default);
   --sbb-link-color-hover: var(--sbb-color-red125-default);
   --sbb-link-color-active: var(--sbb-color-red150-default);
@@ -13,7 +13,7 @@
   }
 }
 
-@mixin link-variables--negative {
+@mixin block-link-variables--negative {
   --sbb-link-color-normal: var(--sbb-color-white-default);
   --sbb-link-color-hover: var(--sbb-color-cloud-default);
   --sbb-link-color-active: var(--sbb-color-silver-default);
@@ -22,6 +22,8 @@
 
 @mixin link-variables--inline {
   --sbb-link-color-normal: inherit;
+  --sbb-link-color-hover: var(--sbb-color-red125-default);
+  --sbb-link-color-active: var(--sbb-color-red150-default);
   --sbb-link-text-decoration: underline;
 }
 
@@ -45,10 +47,6 @@
   user-select: none;
 }
 
-@mixin link-inline-base {
-  @include typo.text-inherit;
-}
-
 @mixin link-focus-visible {
   // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components.
   &:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch']) {
@@ -81,26 +79,23 @@
   }
 }
 
-@mixin link-inline-consolidation {
+@mixin link-consolidation {
   @include link-base;
-  @include link-inline-base;
+  @include typo.text-inherit;
   @include link-focus-visible;
   @include link-hover;
 
   // Active definitions have to be after :hover definitions
   @include link-active;
 }
 
-@mixin link-inline {
-  @include link-variables;
+@mixin link {
   @include link-variables--inline;
-  @include link-inline-consolidation;
+  @include link-consolidation;
 }
 
-@mixin link-inline-negative {
-  // We don't include link-variables and link-variables--negative here
-  // because they are going to be overridden anyways.
+@mixin link-negative {
   @include link-variables--inline;
   @include link-variables--inline-negative;
-  @include link-inline-consolidation;
+  @include link-consolidation;
 }

src/components/link/common/block-link.scss

@@ -1,9 +1,15 @@
 @use '../../core/styles' as sbb;
 
 :host {
-  display: block;
+  @include sbb.block-link-variables;
 
   --sbb-link-gap: var(--sbb-spacing-fixed-1x);
+
+  display: block;
+}
+
+:host([negative]) {
+  @include sbb.block-link-variables--negative;
 }
 
 .sbb-action-base {

src/components/link/common/inline-link.scss

@@ -5,14 +5,14 @@
   @include sbb.text-inherit;
   @include sbb.link-variables--inline;
 
+  color: inherit;
   display: inline-block;
 }
 
 :host([negative]) {
-  @include sbb.link-variables--inline; // Needed because of specifity
   @include sbb.link-variables--inline-negative;
 }
 
 .sbb-action-base {
-  @include sbb.link-inline-base;
+  @include sbb.text-inherit;
 }

src/components/link/common/link.scss

@@ -5,17 +5,9 @@
 @include sbb.host-component-properties;
 
 :host {
-  color: inherit;
-
   // Use !important here to not interfere with Firefox focus ring definition
   // which appears in normalize css of several frameworks.
   outline: none !important;
-
-  @include sbb.link-variables;
-}
-
-:host([negative]) {
-  @include sbb.link-variables--negative;
 }
 
 :host([role='button']) {

src/storybook/styles/typography/typo-internal.scss

@@ -1,9 +1,9 @@
 @use '../../../components/core/styles/index' as sbb;
 
-.sbb-link-inline {
-  @include sbb.link-inline;
+.sbb-link {
+  @include sbb.link;
 }
 
-.sbb-link-inline-negative {
-  @include sbb.link-inline-negative;
+.sbb-link-negative {
+  @include sbb.link-negative;
 }

src/storybook/styles/typography/typography.stories.ts

@@ -43,20 +43,20 @@ const LegendSubSupTemplate = (): TemplateResult => html`
   </span>
 `;
 
-const LinkInlineTemplate = (): TemplateResult => html`
+const LinkTemplate = (): TemplateResult => html`
   <p class="sbb-text-m">
-    A text with a link inside <a href="" class="sbb-link-inline">the text</a>. It should adapt to
-    the text but have an underline and hover colors.
+    A text with a link inside <a href="" class="sbb-link">the text</a>. It should adapt to the text
+    but have an underline and hover colors.
   </p>
 `;
 
-const LinkInlineNegativeTemplate = (): TemplateResult => html`
+const LinkNegativeTemplate = (): TemplateResult => html`
   <p
     class="sbb-text-m"
     style="background-color: var(--sbb-color-charcoal-default); color: var(--sbb-color-white-default); padding: 1rem;"
   >
-    A text with a negative link inside <a href="" class="sbb-link-inline-negative">the text</a>. It
-    should adapt to the text but have an underline and hover colors.
+    A text with a negative link inside <a href="" class="sbb-link-negative">the text</a>. It should
+    adapt to the text but have an underline and hover colors.
   </p>
 `;
 
@@ -69,15 +69,15 @@ export const TextBold: StoryObj = {
 export const LegendSubSup: StoryObj = {
   render: LegendSubSupTemplate,
 };
-export const LinkInline: StoryObj = {
-  render: LinkInlineTemplate,
+export const Link: StoryObj = {
+  render: LinkTemplate,
 };
-export const LinkInlineNegative: StoryObj = {
-  render: LinkInlineNegativeTemplate,
+export const LinkNegative: StoryObj = {
+  render: LinkNegativeTemplate,
 };
 
 const meta: Meta = {
-  // excludeStories: ['LinkInline', 'LinkInlineNegative'],
+  excludeStories: ['Link', 'LinkNegative'],
   decorators: [(story) => html` <div style="padding: 2rem;">${story()}</div> `],
   parameters: {
     docs: {