docs: standardize CSS term writing

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:

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

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;
 

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 {

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 {

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 {

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 {

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 {

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 {

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

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

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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;

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

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

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

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;

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

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
 

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

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

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.

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

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')

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

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