sbb-design-systems · jeripeierSBB · Dec 16, 2024 · Dec 12, 2024 · Dec 12, 2024 · Dec 13, 2024
@@ -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:

@@ -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
 

@@ -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

@@ -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

@@ -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

@@ -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;
 

@@ -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 {

@@ -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 {

@@ -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 {

@@ -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 {

@@ -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 {

@@ -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 {

@@ -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);

@@ -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;
 }
 

@@ -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 {

@@ -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 {

@@ -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 {

@@ -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 {

@@ -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 {

@@ -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 {

@@ -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 {

@@ -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;

@@ -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;
 }

@@ -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;
 }
 

@@ -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) {
@@ -206,7 +206,7 @@ sbb-message {
 
 // 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(
@@ -229,7 +229,7 @@ sbb-message {
   }
 }
 
-// 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.
@@ -243,7 +243,7 @@ sbb-message {
   }
 }
 
-// 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
 sbb-teaser :is(sbb-image, img) {
   --sbb-image-object-fit: cover;
   --sbb-image-aspect-ratio: 4 / 3;
@@ -253,7 +253,7 @@ sbb-teaser :is(sbb-image, img) {
   scale: var(--sbb-teaser-scale, 1);
 }
 
-// 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;
@@ -271,17 +271,17 @@ sbb-teaser :is(sbb-image, img) {
   }
 }
 
-// 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;
 }

@@ -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;

@@ -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';

@@ -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
 

@@ -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;
 }