From 6a7e41f4bd4f73328fa46584b435ebe71117f159 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Tue, 23 Apr 2024 09:58:52 +0200
Subject: [PATCH] fix: prefix all css variable names

BREAKING CHANGE: CSS variable `--image-border-radius` has been renamed
to `--sbb-image-border-radius`.
CSS variable `--form-field-error-min-height` has been renamed
to `--sbb-form-field-error-min-height`
---
 src/components/button/common/button-common.scss      | 1 -
 src/components/form-field/form-field/form-field.scss | 4 ++--
 src/components/image/image.scss                      | 7 ++++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/button/common/button-common.scss b/src/components/button/common/button-common.scss
index 0fa1093eb7..8058b4fcc7 100644
--- a/src/components/button/common/button-common.scss
+++ b/src/components/button/common/button-common.scss
@@ -75,7 +75,6 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
 
 :host(#{$icon-only}) {
   --sbb-button-padding-inline: 0;
-  --icon-margin-inline-end: 0;
 }
 
 :host([disabled]) {
diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss
index 85c43a6795..f9220f3457 100644
--- a/src/components/form-field/form-field/form-field.scss
+++ b/src/components/form-field/form-field/form-field.scss
@@ -77,7 +77,7 @@
 }
 
 :host([error-space='reserve']) {
-  --form-field-error-min-height: calc(
+  --sbb-form-field-error-min-height: calc(
     var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs)
   );
   --sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width);
@@ -426,7 +426,7 @@
 
 .sbb-form-field__error {
   display: flex;
-  min-height: var(--form-field-error-min-height);
+  min-height: var(--sbb-form-field-error-min-height);
   margin-block-start: var(
     --sbb-form-field-error-padding-block-start-override,
     var(--sbb-form-field-error-padding-block-start)
diff --git a/src/components/image/image.scss b/src/components/image/image.scss
index 146b21bd2b..939d35b1ef 100644
--- a/src/components/image/image.scss
+++ b/src/components/image/image.scss
@@ -4,7 +4,8 @@
 @include sbb.box-sizing;
 
 :host {
-  --image-border-radius: var(--sbb-border-radius-4x);
+  --sbb-image-border-radius: var(--sbb-border-radius-4x);
+  --sbb-image-aspect-ratio: auto;
 
   display: block;
 }
@@ -49,12 +50,12 @@
   position: relative;
   overflow: hidden;
   max-width: 100%;
-  border-radius: var(--image-border-radius);
+  border-radius: var(--sbb-image-border-radius);
 }
 
 // aspect ratios 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16', '16-9'
 .image__figure--ratio-free .image__wrapper {
-  aspect-ratio: var(--sbb-image-aspect-ratio, auto);
+  aspect-ratio: var(--sbb-image-aspect-ratio);
 }
 
 .image__figure--ratio-1-1 .image__wrapper {