From d913e053d4e8ca73cf5af2613075d1823eb660e0 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Thu, 12 Dec 2024 08:52:54 +0100
Subject: [PATCH 1/2] docs: standardize Sass term writing

---
 docs/CODING_STANDARDS.md                    |  6 +++---
 docs/CONTRIBUTING.md                        |  2 +-
 docs/DEVELOPER.md                           |  2 +-
 docs/GETTING_STARTED.md                     | 10 +++++-----
 src/elements/notification/notification.scss |  2 +-
 src/storybook/styles/layout/readme.md       |  6 +++---
 src/storybook/styles/list/readme.md         | 12 ++++++------
 src/storybook/styles/scrollbar/readme.md    |  6 +++---
 src/storybook/styles/table/readme.md        |  2 +-
 src/storybook/styles/typography/readme.md   | 10 +++++-----
 10 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/docs/CODING_STANDARDS.md b/docs/CODING_STANDARDS.md
index 6db87fc474..d80d344ddf 100644
--- a/docs/CODING_STANDARDS.md
+++ b/docs/CODING_STANDARDS.md
@@ -41,7 +41,7 @@ if (!this.getAttribute('tabindex')) {
 In TypeScript code, use JsDoc-style comments for descriptions (on classes, members, etc.) and
 use `//` style comments for everything else (explanations, background info, etc.).
 
-In SCSS code, always use `//` style comments.
+In Sass code, always use `//` style comments.
 
 In HTML code, use `<!-- ... -->` comments, which will be stripped when packaging a build.
 
@@ -504,7 +504,7 @@ Also define CSS variables in :host.
 }
 ```
 
-#### Use/Check existing CSS variables and SCSS mixins/functions
+#### Use/Check existing CSS variables and Sass mixins/functions
 
 The `@sbb-esta/lyne-design-tokens` package provides global design tokens/CSS variables,
 which are used/configured in our code base (see `src/elements/core/styles/core/variables.scss`).
@@ -523,7 +523,7 @@ If a global variable is missing, create an issue or pull request in
 #### Use the lowest specificity possible
 
 Always prioritize lower specificity over other factors. Most style definitions should consist of a
-single element or css selector plus necessary state modifiers. **Avoid SCSS nesting for the sake of
+single element or css selector plus necessary state modifiers. **Avoid Sass nesting for the sake of
 code organization.** This will allow users to much more easily override styles.
 
 For example, rather than doing this:
diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
index aa8d279882..1bc6f51691 100644
--- a/docs/CONTRIBUTING.md
+++ b/docs/CONTRIBUTING.md
@@ -179,7 +179,7 @@ This project publishes the following package:
 
 ### Styling
 
-This project uses [SASS](https://sass-lang.com/) for styling the components.
+This project uses [Sass](https://sass-lang.com/) for styling the components.
 
 ## Language
 
diff --git a/docs/DEVELOPER.md b/docs/DEVELOPER.md
index 98faa16c46..4c8939b186 100644
--- a/docs/DEVELOPER.md
+++ b/docs/DEVELOPER.md
@@ -4,7 +4,7 @@
    We recommend using `nvm` to manage your node versions.
 2. From the root of the project, run `yarn` to install the dependencies.
 
-There are currently some unknown problems with developing on Windows when working with SASS,
+There are currently some unknown problems with developing on Windows when working with Sass,
 so we recommend using WSL2 to develop on Windows machines.
 
 To bring up a local server, run `yarn start`. This will automatically watch for changes
diff --git a/docs/GETTING_STARTED.md b/docs/GETTING_STARTED.md
index 1c8a0b3390..41e5427d92 100644
--- a/docs/GETTING_STARTED.md
+++ b/docs/GETTING_STARTED.md
@@ -261,10 +261,10 @@ Some design tokens are responsive: they change their value depending on the curr
 > There is a corresponding responsive CSS variable without the `-breakpoint` suffix,
 > e.g. `sbb-spacing-responsive-s` which should be used.
 
-### SASS Mixins
+### Sass Mixins
 
-Lyne Components provides various SASS mixins which can be used by consumers.
-For available SASS mixins, check [SASS Mixins](https://github.com/sbb-design-systems/lyne-components/tree/main/src/elements/core/styles/mixins).
+Lyne Components provides various Sass mixins which can be used by consumers.
+For available Sass mixins, check [Sass Mixins](https://github.com/sbb-design-systems/lyne-components/tree/main/src/elements/core/styles/mixins).
 
 ```scss
 @use '@sbb-esta/lyne-elements' as sbb;
@@ -328,7 +328,7 @@ when font size changes in browsers.
 
 Focus outlines should only be displayed when users are navigating by keyboard.
 Lyne components use the CSS selector `:focus-visible`, to achieve that. Whenever you have custom interactive elements,
-you should use the `:focus-visible` selector as well and include our SASS mixin `focus-outline`.
+you should use the `:focus-visible` selector as well and include our Sass mixin `focus-outline`.
 
 ```scss
 @use '../../core/styles' as sbb;
@@ -363,7 +363,7 @@ Please note, although SBB provides more fonts than `Roman`, `Bold` and `Light`,
 Lyne only intends to use these three fonts.
 To apply the SBB font family you can use the CSS var `var(--sbb-typo-font-family)`. However,
 this only includes the family but no letter spacing, so we recommend to always
-use our SASS mixins or CSS classes which contain all necessary properties.
+use our Sass mixins or CSS classes which contain all necessary properties.
 See [Text styles](https://lyne-storybook.app.sbb.ch/?path=/docs/styles-typography--docs) for what's available.
 
 ```html
diff --git a/src/elements/notification/notification.scss b/src/elements/notification/notification.scss
index 0d5fb6c14d..bfe101c2c1 100644
--- a/src/elements/notification/notification.scss
+++ b/src/elements/notification/notification.scss
@@ -176,7 +176,7 @@ $open-anim-height-to: calc(
   border-radius: var(--sbb-notification-border-radius);
   overflow: hidden;
 
-  // We apply SASS calculated background color as default/fallback for older browsers.
+  // We apply Sass calculated background color as default/fallback for older browsers.
   background-color: var(--sbb-notification-type-color-sass);
 
   // If supported, try to mix color with CSS
diff --git a/src/storybook/styles/layout/readme.md b/src/storybook/styles/layout/readme.md
index 4c82685cb3..922cdeac2a 100644
--- a/src/storybook/styles/layout/readme.md
+++ b/src/storybook/styles/layout/readme.md
@@ -3,7 +3,7 @@
 The page spacing ensures inline margins and controls the max-width of the page.
 The `expanded`-variant has a smaller inline spacing and no max-width.
 
-| CSS class                   | SASS mixin              |
+| CSS class                   | Sass mixin              |
 | --------------------------- | ----------------------- |
 | `sbb-page-spacing`          | `page-spacing`          |
 | `sbb-page-spacing-expanded` | `page-spacing-expanded` |
@@ -22,12 +22,12 @@ Alternatively the [sbb-container](/docs/elements-sbb-container-sbb-container--do
 
 ## Grid
 
-The grid is available as CSS class or SASS mixin.
+The grid is available as CSS class or Sass mixin.
 It provides the grid from the design specifications on which you can place your elements.
 The `expanded`-variant has a smaller inline spacing and no max-width.
 [See CSS grid docs for full documentation of all the possibilities of placing elements on a grid.](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
 
-| CSS class           | SASS mixin      |
+| CSS class           | Sass mixin      |
 | ------------------- | --------------- |
 | `sbb-grid`          | `grid`          |
 | `sbb-grid-expanded` | `grid-expanded` |
diff --git a/src/storybook/styles/list/readme.md b/src/storybook/styles/list/readme.md
index be7084f9fc..69595711f6 100644
--- a/src/storybook/styles/list/readme.md
+++ b/src/storybook/styles/list/readme.md
@@ -1,6 +1,6 @@
 ## sbb-list
 
-| CSS class  | SASS mixin |
+| CSS class  | Sass mixin |
 | ---------- | ---------- |
 | `sbb-list` | `list`     |
 
@@ -10,7 +10,7 @@ The list styling doesn't define any color itself but inherits it.
 
 ### Sass usage
 
-The SASS mixin can be included at top level or in a rule.
+The Sass mixin can be included at top level or in a rule.
 If used at top level it will apply rules to the native `<ul>` and `<ol>` elements.
 If used inside a rule it will extend the rule with `<ul>` and `<ol>`
 selectors (e.g. `.sbb-list { @include sbb.list; }` > `.sbb-list:where(ol, ul) {...}`).
@@ -25,7 +25,7 @@ selectors (e.g. `.sbb-list { @include sbb.list; }` > `.sbb-list:where(ol, ul) {.
 
 ## sbb-step-list
 
-| CSS class       | SASS mixin  |
+| CSS class       | Sass mixin  |
 | --------------- | ----------- |
 | `sbb-step-list` | `step-list` |
 
@@ -41,7 +41,7 @@ by using the predefined classes (e.g. `sbb-text-s`).
 
 ## sbb-icon-list
 
-| CSS class       | SASS mixin  |
+| CSS class       | Sass mixin  |
 | --------------- | ----------- |
 | `sbb-icon-list` | `icon-list` |
 
@@ -95,7 +95,7 @@ than the text, the CSS variable `--sbb-icon-list-marker-icon-color` can be used.
 
 ## sbb-description-list
 
-| CSS class  | SASS mixin         |
+| CSS class  | Sass mixin         |
 | ---------- | ------------------ |
 | `sbb-list` | `description-list` |
 
@@ -104,7 +104,7 @@ The description list doesn't define any color itself but inherits it.
 
 ### Sass usage
 
-The SASS mixin can be included at top level or in a rule.
+The Sass mixin can be included at top level or in a rule.
 If used at top level it will apply rules to the native `<dl>` element.
 If used inside a rule it will extend the rule with `<dl>`.
 selectors (e.g. `.sbb-list { @include sbb.description-list; }` > `.sbb-list:where(dl) {...}`).
diff --git a/src/storybook/styles/scrollbar/readme.md b/src/storybook/styles/scrollbar/readme.md
index dadc668617..e73fa483e1 100644
--- a/src/storybook/styles/scrollbar/readme.md
+++ b/src/storybook/styles/scrollbar/readme.md
@@ -1,10 +1,10 @@
 ## Scrollbar
 
-The scrollbar SASS mixin and CSS classes offer a combination of size, color and whether the track is visible or not.
+The scrollbar Sass mixin and CSS classes offer a combination of size, color and whether the track is visible or not.
 
 In Firefox the styles are looking differently as there are no possibilities to style the scrollbar exactly as designed.
 
-| CSS class                                    | SASS mixin                                                         |
+| CSS class                                    | Sass mixin                                                         |
 | -------------------------------------------- | ------------------------------------------------------------------ |
 | `sbb-scrollbar`                              | `scrollbar($size: thin, $negative: false, $track-visible: false)`  |
 | `sbb-scrollbar-negative`                     | `scrollbar($size: thin, $negative: true, $track-visible: false)`   |
@@ -15,7 +15,7 @@ In Firefox the styles are looking differently as there are no possibilities to s
 | `sbb-scrollbar-thick-track-visible`          | `scrollbar($size: thick, $negative: false, $track-visible: true)`  |
 | `sbb-scrollbar-thick-negative-track-visible` | `scrollbar($size: thick, $negative: true, $track-visible: true)`   |
 
-** Possible values of SASS mixin **
+** Possible values of Sass mixin **
 
 - `$size` thin or thick
 - `$negative` true or false
diff --git a/src/storybook/styles/table/readme.md b/src/storybook/styles/table/readme.md
index c3cd109adf..687a8db839 100644
--- a/src/storybook/styles/table/readme.md
+++ b/src/storybook/styles/table/readme.md
@@ -82,7 +82,7 @@ This scheme changes the text color of the cells to `sbb-color-iron`.
 In advanced scenarios, predefined classes might not suffice.
 Therefore, we provide mixins you can build on top of:
 
-| SASS Mixin           | CSS class                | Description                               |
+| Sass Mixin           | CSS class                | Description                               |
 | -------------------- | ------------------------ | ----------------------------------------- |
 | `table`              | `sbb-table`              | The table style (equivalent to `table-m`) |
 | `table--m`           | `sbb-table-m`            | Medium size table style                   |
diff --git a/src/storybook/styles/typography/readme.md b/src/storybook/styles/typography/readme.md
index 9b78c475d7..eeba559f8d 100644
--- a/src/storybook/styles/typography/readme.md
+++ b/src/storybook/styles/typography/readme.md
@@ -1,12 +1,12 @@
 ## Text styles
 
-Every text size (xxs, xs, s, m, l and xl) is available as SASS mixin or CSS class.
+Every text size (xxs, xs, s, m, l and xl) is available as Sass mixin or CSS class.
 It also includes line-height, letter-spacing and font-family.
 
 The native browser margins (1em) between paragraph elements `<p>` correctly corresponds
 to the defined paragraph spacing. Due to this there are no additional rules for paragraph spacing.
 
-| CSS class      | CSS class bold                | SASS mixin          | SASS mixin bold  |
+| CSS class      | CSS class bold                | Sass mixin          | Sass mixin bold  |
 | -------------- | ----------------------------- | ------------------- | ---------------- |
 | `sbb-text-xxs` | `sbb-text-xxs sbb-text--bold` | `text-xxs--regular` | `text-xxs--bold` |
 | `sbb-text-xs`  | `sbb-text-xs sbb-text--bold`  | `text-xs--regular`  | `text-xs--bold`  |
@@ -23,7 +23,7 @@ to the defined paragraph spacing. Due to this there are no additional rules for
 
 ## Legend
 
-| CSS class    | SASS mixin |
+| CSS class    | Sass mixin |
 | ------------ | ---------- |
 | `sbb-legend` | `legend`   |
 
@@ -31,7 +31,7 @@ to the defined paragraph spacing. Due to this there are no additional rules for
 
 The `<sub>`-tag is also overridden globally as long as you include our global styles.
 
-| SASS mixin |
+| Sass mixin |
 | ---------- |
 | `sub`      |
 
@@ -39,6 +39,6 @@ The `<sub>`-tag is also overridden globally as long as you include our global st
 
 The `<sup>`-tag is also overridden globally as long as you include our global styles.
 
-| SASS mixin |
+| Sass mixin |
 | ---------- |
 | `sup`      |

From a8e881b13539f91ee38c41ef84a1c96cf26a4a38 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Thu, 12 Dec 2024 09:00:26 +0100
Subject: [PATCH 2/2] docs: standardize CSS term writing

---
 docs/CODING_STANDARDS.md                      |  2 +-
 docs/REVIEW.md                                |  2 +-
 .../autocomplete-grid-button.scss             |  2 +-
 .../button/accent-button-link/readme.md       |  2 +-
 .../button/accent-button-static/readme.md     |  2 +-
 src/elements/button/accent-button/readme.md   |  2 +-
 src/elements/button/button-link/readme.md     |  2 +-
 src/elements/button/button-static/readme.md   |  2 +-
 src/elements/button/button/readme.md          |  2 +-
 src/elements/button/common/button-common.scss |  2 +-
 .../button/mini-button/mini-button.scss       |  2 +-
 src/elements/button/mini-button/readme.md     |  2 +-
 .../button/secondary-button-link/readme.md    |  2 +-
 .../button/secondary-button-static/readme.md  |  2 +-
 .../button/secondary-button/readme.md         |  2 +-
 .../button/transparent-button-link/readme.md  |  2 +-
 .../transparent-button-static/readme.md       |  2 +-
 .../button/transparent-button/readme.md       |  2 +-
 src/elements/card/common/card-action.scss     |  2 +-
 src/elements/checkbox/checkbox/checkbox.scss  |  2 +-
 src/elements/core/mixins/panel-common.scss    |  2 +-
 src/elements/core/styles/core.scss            | 22 +++++++++----------
 src/elements/core/styles/mixins/buttons.scss  |  2 +-
 src/elements/footer/footer.ts                 |  2 +-
 src/elements/footer/readme.md                 |  4 ++--
 .../form-field-clear/form-field-clear.scss    |  2 +-
 .../form-field/form-field/form-field.scss     |  2 +-
 src/elements/header/common/header-action.scss |  4 ++--
 src/elements/header/header/header.scss        |  2 +-
 src/elements/image/image.ts                   |  4 ++--
 src/elements/image/readme.md                  |  4 ++--
 src/elements/link/common/link.scss            |  2 +-
 src/elements/menu/common/menu-action.scss     |  2 +-
 .../navigation/common/navigation-action.scss  |  2 +-
 .../popover-trigger/popover-trigger.scss      |  2 +-
 .../radio-button/radio-button.scss            |  2 +-
 src/elements/slider/slider.scss               |  2 +-
 src/elements/tabs/tab-label/tab-label.scss    |  2 +-
 src/elements/tag/tag/tag.scss                 |  2 +-
 src/elements/teaser-hero/teaser-hero.scss     |  2 +-
 src/elements/teaser/teaser.scss               |  2 +-
 src/elements/toggle-check/toggle-check.scss   |  2 +-
 .../toggle/toggle-option/toggle-option.scss   |  2 +-
 src/storybook/styles/layout/layout.stories.ts |  2 +-
 src/storybook/styles/list/readme.md           |  2 +-
 tools/node-esm-hook/sass-hook.js              |  4 ++--
 vite.config.ts                                |  2 +-
 47 files changed, 62 insertions(+), 62 deletions(-)

diff --git a/docs/CODING_STANDARDS.md b/docs/CODING_STANDARDS.md
index d80d344ddf..f38603a9c0 100644
--- a/docs/CODING_STANDARDS.md
+++ b/docs/CODING_STANDARDS.md
@@ -523,7 +523,7 @@ If a global variable is missing, create an issue or pull request in
 #### Use the lowest specificity possible
 
 Always prioritize lower specificity over other factors. Most style definitions should consist of a
-single element or css selector plus necessary state modifiers. **Avoid Sass nesting for the sake of
+single element or CSS selector plus necessary state modifiers. **Avoid Sass nesting for the sake of
 code organization.** This will allow users to much more easily override styles.
 
 For example, rather than doing this:
diff --git a/docs/REVIEW.md b/docs/REVIEW.md
index 593aa08963..91a07e5dfe 100644
--- a/docs/REVIEW.md
+++ b/docs/REVIEW.md
@@ -83,7 +83,7 @@ Depending on the circumstances, additional options might be considered.
 - ⚠️ Is every value from a design token and if not, well documented?
 - Are modern style properties used (e.g. gap, inset, margin-block, padding-inline, etc.)?
 - Are there as little style definitions as possible (e.g. using gap instead of exceptions for last-child, etc.)?
-- Do the css class names follow BEM and have the sbb prefix?
+- Do the CSS class names follow BEM and have the sbb prefix?
 - Does the visual output match the Figma spec (also confirmed with UX)?
 
 #### Accessibility
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss
index 43a5b2d3c4..f218af3b93 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss
@@ -5,7 +5,7 @@
 
 :host {
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
   display: block;
 
diff --git a/src/elements/button/accent-button-link/readme.md b/src/elements/button/accent-button-link/readme.md
index 07af0ddc07..530bc60eed 100644
--- a/src/elements/button/accent-button-link/readme.md
+++ b/src/elements/button/accent-button-link/readme.md
@@ -61,7 +61,7 @@ The component can be displayed in `disabled` state using the self-named property
 ### Focus outline
 
 Please make sure that the focus outline appears in the correct color if the component is used on a dark background.
-You can set it by re-defining the css var on `sbb-accent-button-link` or any parent element:
+You can set it by re-defining the CSS var on `sbb-accent-button-link` or any parent element:
 
 ```css
 sbb-accent-button-link {
diff --git a/src/elements/button/accent-button-static/readme.md b/src/elements/button/accent-button-static/readme.md
index 5a2440670c..12fff024f6 100644
--- a/src/elements/button/accent-button-static/readme.md
+++ b/src/elements/button/accent-button-static/readme.md
@@ -44,7 +44,7 @@ The component can be displayed in `disabled` state using the self-named property
 ### Focus outline
 
 Please make sure that the focus outline appears in the correct color if the component is used on a dark background.
-You can set it by re-defining the css var on `sbb-button-static` or any parent element:
+You can set it by re-defining the CSS var on `sbb-button-static` or any parent element:
 
 ```css
 sbb-accent-button-static {
diff --git a/src/elements/button/accent-button/readme.md b/src/elements/button/accent-button/readme.md
index 82cfa44bb6..a8c461d1e0 100644
--- a/src/elements/button/accent-button/readme.md
+++ b/src/elements/button/accent-button/readme.md
@@ -52,7 +52,7 @@ The component can be displayed in `disabled` state using the self-named property
 ### Focus outline
 
 Please make sure that the focus outline appears in the correct color if the component is used on a dark background.
-You can set it by re-defining the css var on `sbb-accent-button` or any parent element:
+You can set it by re-defining the CSS var on `sbb-accent-button` or any parent element:
 
 ```css
 sbb-accent-button {
diff --git a/src/elements/button/button-link/readme.md b/src/elements/button/button-link/readme.md
index 1aafdbe444..0778ca727d 100644
--- a/src/elements/button/button-link/readme.md
+++ b/src/elements/button/button-link/readme.md
@@ -56,7 +56,7 @@ The component can be displayed in `disabled` state using the self-named property
 ### Focus outline
 
 Please make sure that the focus outline appears in the correct color if the component is used on a dark background.
-You can set it by re-defining the css var on `sbb-button-link` or any parent element:
+You can set it by re-defining the CSS var on `sbb-button-link` or any parent element:
 
 ```css
 sbb-button-link {
diff --git a/src/elements/button/button-static/readme.md b/src/elements/button/button-static/readme.md
index ae76c43d72..e254f3aa27 100644
--- a/src/elements/button/button-static/readme.md
+++ b/src/elements/button/button-static/readme.md
@@ -41,7 +41,7 @@ The component can be displayed in `disabled` state using the self-named property
 ### Focus outline
 
 Please make sure that the focus outline appears in the correct color if the component is used on a dark background.
-You can set it by re-defining the css var on `sbb-button-static` or any parent element:
+You can set it by re-defining the CSS var on `sbb-button-static` or any parent element:
 
 ```css
 sbb-button-static {
diff --git a/src/elements/button/button/readme.md b/src/elements/button/button/readme.md
index 85c8fe12fd..cf47a54117 100644
--- a/src/elements/button/button/readme.md
+++ b/src/elements/button/button/readme.md
@@ -50,7 +50,7 @@ The component can be displayed in `disabled` state using the self-named property
 ### Focus outline
 
 Please make sure that the focus outline appears in the correct color if the component is used on a dark background.
-You can set it by re-defining the css var on `sbb-button` or any parent element:
+You can set it by re-defining the CSS var on `sbb-button` or any parent element:
 
 ```css
 sbb-button {
diff --git a/src/elements/button/common/button-common.scss b/src/elements/button/common/button-common.scss
index 254bd06e44..ca0eda4871 100644
--- a/src/elements/button/common/button-common.scss
+++ b/src/elements/button/common/button-common.scss
@@ -11,7 +11,7 @@ $active: ':active, [data-active]';
   display: inline-block;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 
   --sbb-button-icon-size: var(--sbb-size-icon-ui-small);
diff --git a/src/elements/button/mini-button/mini-button.scss b/src/elements/button/mini-button/mini-button.scss
index 89cca710cf..48dddc8f62 100644
--- a/src/elements/button/mini-button/mini-button.scss
+++ b/src/elements/button/mini-button/mini-button.scss
@@ -7,7 +7,7 @@
   display: block;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 }
 
diff --git a/src/elements/button/mini-button/readme.md b/src/elements/button/mini-button/readme.md
index cb2ef610b7..00fae1ba6d 100644
--- a/src/elements/button/mini-button/readme.md
+++ b/src/elements/button/mini-button/readme.md
@@ -58,7 +58,7 @@ The component can be displayed in `disabled` state using the self-named property
 ### Focus outline
 
 Please make sure that the focus outline appears in the correct color if the component is used on a dark background.
-You can set it by re-defining the css var on `sbb-mini-button` or any parent element:
+You can set it by re-defining the CSS var on `sbb-mini-button` or any parent element:
 
 ```css
 sbb-mini-button {
diff --git a/src/elements/button/secondary-button-link/readme.md b/src/elements/button/secondary-button-link/readme.md
index 776a2b588e..73d2c242a3 100644
--- a/src/elements/button/secondary-button-link/readme.md
+++ b/src/elements/button/secondary-button-link/readme.md
@@ -61,7 +61,7 @@ The component can be displayed in `disabled` state using the self-named property
 ### Focus outline
 
 Please make sure that the focus outline appears in the correct color if the component is used on a dark background.
-You can set it by re-defining the css var on `sbb-secondary-button-link` or any parent element:
+You can set it by re-defining the CSS var on `sbb-secondary-button-link` or any parent element:
 
 ```css
 sbb-secondary-button-link {
diff --git a/src/elements/button/secondary-button-static/readme.md b/src/elements/button/secondary-button-static/readme.md
index 498db6c3ed..b19fb4ad84 100644
--- a/src/elements/button/secondary-button-static/readme.md
+++ b/src/elements/button/secondary-button-static/readme.md
@@ -44,7 +44,7 @@ The component can be displayed in `disabled` state using the self-named property
 ### Focus outline
 
 Please make sure that the focus outline appears in the correct color if the component is used on a dark background.
-You can set it by re-defining the css var on `sbb-button-static` or any parent element:
+You can set it by re-defining the CSS var on `sbb-button-static` or any parent element:
 
 ```css
 sbb-secondary-button-static {
diff --git a/src/elements/button/secondary-button/readme.md b/src/elements/button/secondary-button/readme.md
index 56bde81767..f3ceceb53e 100644
--- a/src/elements/button/secondary-button/readme.md
+++ b/src/elements/button/secondary-button/readme.md
@@ -55,7 +55,7 @@ The component can be displayed in `disabled` state using the self-named property
 ### Focus outline
 
 Please make sure that the focus outline appears in the correct color if the component is used on a dark background.
-You can set it by re-defining the css var on `sbb-secondary-button` or any parent element:
+You can set it by re-defining the CSS var on `sbb-secondary-button` or any parent element:
 
 ```css
 sbb-secondary-button {
diff --git a/src/elements/button/transparent-button-link/readme.md b/src/elements/button/transparent-button-link/readme.md
index 487767d837..2dfcb9695e 100644
--- a/src/elements/button/transparent-button-link/readme.md
+++ b/src/elements/button/transparent-button-link/readme.md
@@ -61,7 +61,7 @@ The component can be displayed in `disabled` state using the self-named property
 ### Focus outline
 
 Please make sure that the focus outline appears in the correct color if the component is used on a dark background.
-You can set it by re-defining the css var on `sbb-transparent-button-link` or any parent element:
+You can set it by re-defining the CSS var on `sbb-transparent-button-link` or any parent element:
 
 ```css
 sbb-transparent-button-link {
diff --git a/src/elements/button/transparent-button-static/readme.md b/src/elements/button/transparent-button-static/readme.md
index 9541c5e7ba..f466788bbb 100644
--- a/src/elements/button/transparent-button-static/readme.md
+++ b/src/elements/button/transparent-button-static/readme.md
@@ -44,7 +44,7 @@ The component can be displayed in `disabled` state using the self-named property
 ### Focus outline
 
 Please make sure that the focus outline appears in the correct color if the component is used on a dark background.
-You can set it by re-defining the css var on `sbb-button-static` or any parent element:
+You can set it by re-defining the CSS var on `sbb-button-static` or any parent element:
 
 ```css
 sbb-transparent-button-static {
diff --git a/src/elements/button/transparent-button/readme.md b/src/elements/button/transparent-button/readme.md
index c8740fed05..387053387d 100644
--- a/src/elements/button/transparent-button/readme.md
+++ b/src/elements/button/transparent-button/readme.md
@@ -55,7 +55,7 @@ The component can be displayed in `disabled` state using the self-named property
 ### Focus outline
 
 Please make sure that the focus outline appears in the correct color if the component is used on a dark background.
-You can set it by re-defining the css var on `sbb-transparent-button` or any parent element:
+You can set it by re-defining the CSS var on `sbb-transparent-button` or any parent element:
 
 ```css
 sbb-transparent-button {
diff --git a/src/elements/card/common/card-action.scss b/src/elements/card/common/card-action.scss
index a7ab3fb8ca..fb2c538aa3 100644
--- a/src/elements/card/common/card-action.scss
+++ b/src/elements/card/common/card-action.scss
@@ -7,7 +7,7 @@
   display: block;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
   position: absolute;
   inset: 0;
diff --git a/src/elements/checkbox/checkbox/checkbox.scss b/src/elements/checkbox/checkbox/checkbox.scss
index 45d3251e96..b5af0a3f35 100644
--- a/src/elements/checkbox/checkbox/checkbox.scss
+++ b/src/elements/checkbox/checkbox/checkbox.scss
@@ -2,7 +2,7 @@
 
 :host {
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
   display: inline-block;
 }
diff --git a/src/elements/core/mixins/panel-common.scss b/src/elements/core/mixins/panel-common.scss
index b160b486cf..c57b6b72c4 100644
--- a/src/elements/core/mixins/panel-common.scss
+++ b/src/elements/core/mixins/panel-common.scss
@@ -30,7 +30,7 @@
   display: block;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 }
 
diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss
index 220a7f68e3..6340d2d523 100644
--- a/src/elements/core/styles/core.scss
+++ b/src/elements/core/styles/core.scss
@@ -12,7 +12,7 @@
 
 // Core variables, are always needed
 :root {
-  // Grab css vars defined by `@sbb-esta/lyne-design-tokens` package
+  // Grab CSS vars defined by `@sbb-esta/lyne-design-tokens` package
   @include sbb-css-tokens.lyne-design-tokens-css-variables;
 
   & {
@@ -160,7 +160,7 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-// TODO: Move back to the sbb-container components when the global css refactoring happens
+// TODO: Move back to the sbb-container components when the global CSS refactoring happens
 sbb-container {
   [slot='image']:is(sbb-image, img),
   [slot='image'] :is(sbb-image, img) {
@@ -172,7 +172,7 @@ sbb-container {
   }
 }
 
-// TODO: Move back to the sbb-flip-card-summary components when the global css refactoring happens
+// TODO: Move back to the sbb-flip-card-summary components when the global CSS refactoring happens
 sbb-flip-card-summary {
   [slot='image']:is(sbb-image, img),
   [slot='image'] :is(sbb-image, img) {
@@ -185,7 +185,7 @@ sbb-flip-card-summary {
   }
 }
 
-// TODO: Move back to the sbb-lead-container components when the global css refactoring happens
+// TODO: Move back to the sbb-lead-container components when the global CSS refactoring happens
 sbb-lead-container {
   [slot='image']:is(sbb-image, img, picture),
   [slot='image'] :is(sbb-image, img, picture) {
@@ -198,7 +198,7 @@ sbb-lead-container {
 
 // Target the slotted `sbb-image` which are generally wrapped by a <figure> (therefore are not reachable with the :slotted)
 // Apply the brightness effect on mouse hover
-// TODO: Move back to the teaser components when the global css refactoring happens
+// TODO: Move back to the teaser components when the global CSS refactoring happens
 :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
   --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
   --sbb-teaser-image-animation-duration: var(
@@ -222,7 +222,7 @@ sbb-lead-container {
   }
 }
 
-// TODO: Move back to the teaser components when the global css refactoring happens
+// TODO: Move back to the teaser components when the global CSS refactoring happens
 :is(sbb-teaser-product, sbb-teaser-product-static) {
   :is(sbb-image, img) {
     border-radius: 0; // Reset sbb-image border radius in order to control it from teaser product.
@@ -236,7 +236,7 @@ sbb-lead-container {
   }
 }
 
-// TODO: Move back to the teaser components when the global css refactoring happens
+// TODO: Move back to the teaser components when the global CSS refactoring happens
 :is(sbb-teaser) {
   [slot='image']:is(sbb-image, img),
   [slot='image'] :is(sbb-image, img) {
@@ -251,7 +251,7 @@ sbb-lead-container {
   }
 }
 
-// TODO: Move back to the teaser-hero components when the global css refactoring happens
+// TODO: Move back to the teaser-hero components when the global CSS refactoring happens
 :is(sbb-teaser-hero) {
   :is(sbb-image, img) {
     --sbb-image-aspect-ratio: 1 / 1;
@@ -269,17 +269,17 @@ sbb-lead-container {
   }
 }
 
-// TODO: move to train formation after css refactoring
+// TODO: move to train formation after CSS refactoring
 sbb-train-formation:has(sbb-train[direction-label]) {
   --sbb-train-formation-reserve-spacing-display: block;
 }
 
-// TODO: move to train formation after css refactoring
+// TODO: move to train formation after CSS refactoring
 sbb-train-formation:has(sbb-train-wagon[sector]) {
   --sbb-train-formation-show-sectors-gap: 1;
 }
 
-// TODO: move to train formation after css refactoring
+// TODO: move to train formation after CSS refactoring
 sbb-train-formation:not(:has(sbb-train-wagon[label])) {
   --sbb-train-formation-wagon-label-display: none;
 }
diff --git a/src/elements/core/styles/mixins/buttons.scss b/src/elements/core/styles/mixins/buttons.scss
index e1af1525df..17319c189b 100644
--- a/src/elements/core/styles/mixins/buttons.scss
+++ b/src/elements/core/styles/mixins/buttons.scss
@@ -101,7 +101,7 @@ $active: ':active, [data-active]';
     height: fit-content;
 
     // Use !important here to not interfere with Firefox focus ring definition
-    // which appears in normalize css of several frameworks.
+    // which appears in normalize CSS of several frameworks.
     outline: none !important;
 
     @include icon-button-variables;
diff --git a/src/elements/footer/footer.ts b/src/elements/footer/footer.ts
index 463734af84..320353332c 100644
--- a/src/elements/footer/footer.ts
+++ b/src/elements/footer/footer.ts
@@ -21,7 +21,7 @@ class SbbFooterElement extends SbbNegativeMixin(LitElement) {
 
   /**
    * Variants to display the footer. The default, displays the content in regular block element
-   * approach. The clock-columns, used a css-grid for displaying the content over different
+   * approach. The clock-columns, used a CSS-grid for displaying the content over different
    * breakpoints.
    */
   @property({ reflect: true }) public accessor variant: 'default' | 'clock-columns' = 'default';
diff --git a/src/elements/footer/readme.md b/src/elements/footer/readme.md
index fe0c262147..d02af151c6 100644
--- a/src/elements/footer/readme.md
+++ b/src/elements/footer/readme.md
@@ -4,7 +4,7 @@ content related links; for these, the [sbb-link-list](/docs/elements-sbb-link-li
 ## Variants
 
 There are two variants of the footer: the `variant='default'`, which displays the slotted content in regular
-block element approach and the `variant='clock-columns'`, which uses a css-grid for displaying the content over different
+block element approach and the `variant='clock-columns'`, which uses a CSS-grid for displaying the content over different
 breakpoints.
 
 **Note:**
@@ -81,7 +81,7 @@ to the content where needed (e.g. `sbb-link-list`, `sbb-link` and `sbb-divider`)
 | `accessibilityTitleLevel` | `accessibility-title-level` | public  | `SbbTitleLevel`                | `'1'`       | Level of the accessibility title, will be rendered as heading tag (e.g. h1). Defaults to level 1.                                                                                              |
 | `expanded`                | `expanded`                  | public  | `boolean`                      | `false`     | Whether to allow the footer content to stretch to full width. By default, the content has the appropriate page size.                                                                           |
 | `negative`                | `negative`                  | public  | `boolean`                      | `false`     | Negative coloring variant flag.                                                                                                                                                                |
-| `variant`                 | `variant`                   | public  | `'default' \| 'clock-columns'` | `'default'` | Variants to display the footer. The default, displays the content in regular block element approach. The clock-columns, used a css-grid for displaying the content over different breakpoints. |
+| `variant`                 | `variant`                   | public  | `'default' \| 'clock-columns'` | `'default'` | Variants to display the footer. The default, displays the content in regular block element approach. The clock-columns, used a CSS-grid for displaying the content over different breakpoints. |
 
 ## Slots
 
diff --git a/src/elements/form-field/form-field-clear/form-field-clear.scss b/src/elements/form-field/form-field-clear/form-field-clear.scss
index a9a859d44b..679531c751 100644
--- a/src/elements/form-field/form-field-clear/form-field-clear.scss
+++ b/src/elements/form-field/form-field-clear/form-field-clear.scss
@@ -7,7 +7,7 @@
   display: block;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 }
 
diff --git a/src/elements/form-field/form-field/form-field.scss b/src/elements/form-field/form-field/form-field.scss
index c58469fdd1..b19220bfc8 100644
--- a/src/elements/form-field/form-field/form-field.scss
+++ b/src/elements/form-field/form-field/form-field.scss
@@ -411,7 +411,7 @@
   @include sbb.input-reset;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
   overflow: var(--sbb-form-field-overflow);
   width: 100%;
diff --git a/src/elements/header/common/header-action.scss b/src/elements/header/common/header-action.scss
index 9f80ec33d9..8d7bd8133e 100644
--- a/src/elements/header/common/header-action.scss
+++ b/src/elements/header/common/header-action.scss
@@ -7,7 +7,7 @@
   display: inline-block;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 
   --sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);
@@ -176,7 +176,7 @@
     @include sbb.mq($to: #{$breakpoint}) {
       // The variable is assigned to the property in the sbb-header component if it is
       // the first element in the header and needs left offset correction (see sbb-header.scss).
-      // To avoid duplicated css definitions, the value itself is assigned here in
+      // To avoid duplicated CSS definitions, the value itself is assigned here in
       // sbb-header-button/sbb-header-link instead of sbb-header.
 
       // Move it left by padding of header action to the icon itself.
diff --git a/src/elements/header/header/header.scss b/src/elements/header/header/header.scss
index ad0883ad60..601cd140e2 100644
--- a/src/elements/header/header/header.scss
+++ b/src/elements/header/header/header.scss
@@ -132,7 +132,7 @@
   position: relative;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 }
 
diff --git a/src/elements/image/image.ts b/src/elements/image/image.ts
index 6f764f9b61..65e1894c09 100644
--- a/src/elements/image/image.ts
+++ b/src/elements/image/image.ts
@@ -152,8 +152,8 @@ const breakpointMap: Record<string, number> = {
  * @cssprop [--sbb-image-aspect-ratio=auto] - Can be used to override `aspectRatio` property.
  * This way we can have, for example, an image component with an aspect
  * ratio of 4/3 in smaller viewports and 16/9 in larger viewports.
- * @cssprop [--sbb-image-object-position] - Can be used to set the object-position css property of the image itself if the image itself is cropped.
- * @cssprop [--sbb-image-object-fit=cover] - Can be used to set the object-fit css property of the image itself if the image itself is cropped.
+ * @cssprop [--sbb-image-object-position] - Can be used to set the object-position CSS property of the image itself if the image itself is cropped.
+ * @cssprop [--sbb-image-object-fit=cover] - Can be used to set the object-fit CSS property of the image itself if the image itself is cropped.
  */
 export
 @customElement('sbb-image')
diff --git a/src/elements/image/readme.md b/src/elements/image/readme.md
index 264f2a7d4f..1e48bc7dbe 100644
--- a/src/elements/image/readme.md
+++ b/src/elements/image/readme.md
@@ -106,5 +106,5 @@ Use the `sbb-image-${ratio}` utility classes to set the image aspect ratio.
 | Name                          | Default | Description                                                                                                                                                                          |
 | ----------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `--sbb-image-aspect-ratio`    | `auto`  | Can be used to override `aspectRatio` property. This way we can have, for example, an image component with an aspect ratio of 4/3 in smaller viewports and 16/9 in larger viewports. |
-| `--sbb-image-object-fit`      | `cover` | Can be used to set the object-fit css property of the image itself if the image itself is cropped.                                                                                   |
-| `--sbb-image-object-position` |         | Can be used to set the object-position css property of the image itself if the image itself is cropped.                                                                              |
+| `--sbb-image-object-fit`      | `cover` | Can be used to set the object-fit CSS property of the image itself if the image itself is cropped.                                                                                   |
+| `--sbb-image-object-position` |         | Can be used to set the object-position CSS property of the image itself if the image itself is cropped.                                                                              |
diff --git a/src/elements/link/common/link.scss b/src/elements/link/common/link.scss
index 46055ce657..259c74b028 100644
--- a/src/elements/link/common/link.scss
+++ b/src/elements/link/common/link.scss
@@ -7,7 +7,7 @@ $disabled: '[disabled], :disabled, [disabled-interactive]';
 
 :host {
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 }
 
diff --git a/src/elements/menu/common/menu-action.scss b/src/elements/menu/common/menu-action.scss
index 9b77c1d261..fb4d1e81b9 100644
--- a/src/elements/menu/common/menu-action.scss
+++ b/src/elements/menu/common/menu-action.scss
@@ -7,7 +7,7 @@ $disabled: '[disabled], :disabled, [disabled-interactive]';
 
 :host {
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 
   --sbb-menu-action-border-radius: var(--sbb-border-radius-infinity);
diff --git a/src/elements/navigation/common/navigation-action.scss b/src/elements/navigation/common/navigation-action.scss
index a69c11eb7c..7133591454 100644
--- a/src/elements/navigation/common/navigation-action.scss
+++ b/src/elements/navigation/common/navigation-action.scss
@@ -10,7 +10,7 @@
   display: block;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 }
 
diff --git a/src/elements/popover/popover-trigger/popover-trigger.scss b/src/elements/popover/popover-trigger/popover-trigger.scss
index 23f93b7340..c43c36f49e 100644
--- a/src/elements/popover/popover-trigger/popover-trigger.scss
+++ b/src/elements/popover/popover-trigger/popover-trigger.scss
@@ -10,7 +10,7 @@ $active: ':active, [data-active]';
   display: inline-block;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 
   --sbb-popover-color: inherit;
diff --git a/src/elements/radio-button/radio-button/radio-button.scss b/src/elements/radio-button/radio-button/radio-button.scss
index 810c6368c2..c2874d8cec 100644
--- a/src/elements/radio-button/radio-button/radio-button.scss
+++ b/src/elements/radio-button/radio-button/radio-button.scss
@@ -7,7 +7,7 @@
   display: block;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 }
 
diff --git a/src/elements/slider/slider.scss b/src/elements/slider/slider.scss
index 6258165cab..cf1dfbf014 100644
--- a/src/elements/slider/slider.scss
+++ b/src/elements/slider/slider.scss
@@ -5,7 +5,7 @@
 
 :host {
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
   display: inline-block;
   min-width: #{sbb.px-to-rem-build(150)};
diff --git a/src/elements/tabs/tab-label/tab-label.scss b/src/elements/tabs/tab-label/tab-label.scss
index 06a57c3f00..5ed028dba5 100644
--- a/src/elements/tabs/tab-label/tab-label.scss
+++ b/src/elements/tabs/tab-label/tab-label.scss
@@ -27,7 +27,7 @@
   -webkit-tap-highlight-color: transparent;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 
   @include sbb.if-forced-colors {
diff --git a/src/elements/tag/tag/tag.scss b/src/elements/tag/tag/tag.scss
index 0aeb4f8040..88eb741858 100644
--- a/src/elements/tag/tag/tag.scss
+++ b/src/elements/tag/tag/tag.scss
@@ -10,7 +10,7 @@ $active: ':active, [data-active]';
   display: inline-block;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
   max-width: 100%;
 
diff --git a/src/elements/teaser-hero/teaser-hero.scss b/src/elements/teaser-hero/teaser-hero.scss
index 8f7c96b17f..321075ddce 100644
--- a/src/elements/teaser-hero/teaser-hero.scss
+++ b/src/elements/teaser-hero/teaser-hero.scss
@@ -7,7 +7,7 @@
   display: block;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 
   @include sbb.panel-variables;
diff --git a/src/elements/teaser/teaser.scss b/src/elements/teaser/teaser.scss
index 8cc5dceaaf..ab865f37f0 100644
--- a/src/elements/teaser/teaser.scss
+++ b/src/elements/teaser/teaser.scss
@@ -7,7 +7,7 @@
   display: inline-block;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 
   --sbb-teaser-scale-hover: 1.02;
diff --git a/src/elements/toggle-check/toggle-check.scss b/src/elements/toggle-check/toggle-check.scss
index 177035d041..85345bc91f 100644
--- a/src/elements/toggle-check/toggle-check.scss
+++ b/src/elements/toggle-check/toggle-check.scss
@@ -7,7 +7,7 @@
   display: inline-block;
 
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 
   --sbb-toggle-check-checked-color: var(--sbb-color-red);
diff --git a/src/elements/toggle/toggle-option/toggle-option.scss b/src/elements/toggle/toggle-option/toggle-option.scss
index 27c70fb6db..d633c43a87 100644
--- a/src/elements/toggle/toggle-option/toggle-option.scss
+++ b/src/elements/toggle/toggle-option/toggle-option.scss
@@ -19,7 +19,7 @@
 // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components.
 :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) {
   // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
+  // which appears in normalize CSS of several frameworks.
   outline: none !important;
 }
 
diff --git a/src/storybook/styles/layout/layout.stories.ts b/src/storybook/styles/layout/layout.stories.ts
index 5bcae80b9e..caf0814e66 100644
--- a/src/storybook/styles/layout/layout.stories.ts
+++ b/src/storybook/styles/layout/layout.stories.ts
@@ -27,7 +27,7 @@ const Warning = (): TemplateResult => html`
     This example only intends to visualize the grid and is not meant to be used as is.
     <br />
     <sbb-link href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">
-      See docs on css grid </sbb-link
+      See docs on CSS grid </sbb-link
     >.
   </span>
 `;
diff --git a/src/storybook/styles/list/readme.md b/src/storybook/styles/list/readme.md
index 69595711f6..ea2f46173d 100644
--- a/src/storybook/styles/list/readme.md
+++ b/src/storybook/styles/list/readme.md
@@ -5,7 +5,7 @@
 | `sbb-list` | `list`     |
 
 The list styling can be applied to any ordered or unordered list.
-Nesting lists is also supported without redefining the css class.
+Nesting lists is also supported without redefining the CSS class.
 The list styling doesn't define any color itself but inherits it.
 
 ### Sass usage
diff --git a/tools/node-esm-hook/sass-hook.js b/tools/node-esm-hook/sass-hook.js
index bf4fde1018..ba9976350d 100644
--- a/tools/node-esm-hook/sass-hook.js
+++ b/tools/node-esm-hook/sass-hook.js
@@ -1,8 +1,8 @@
 // @ts-check
 
 /**
- * The sass hook will compile any imports containing `.scss?` to css wrapped in the
- * lit css tagged template function.
+ * The sass hook will compile any imports containing `.scss?` to CSS wrapped in the
+ * lit CSS tagged template function.
  * This allows lit elements to be consumed in SSR tests in a Node.js worker.
  */
 
diff --git a/vite.config.ts b/vite.config.ts
index 7ce13e4f86..480c7aa2b9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -18,7 +18,7 @@ export default defineConfig({
   },
   plugins: [
     // We apply the postcssLit plugin (which transforms .scss files to Lit
-    // css tagged templates) as this should apply in almost all cases.
+    // CSS tagged templates) as this should apply in almost all cases.
     postcssLit({ exclude: ['**/core/styles/**/*', '**/storybook/**/*'] }),
     typescriptTransform(),
   ],