From a8e881b13539f91ee38c41ef84a1c96cf26a4a38 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Thu, 12 Dec 2024 09:00:26 +0100 Subject: [PATCH] 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
(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 = { * @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.
- See docs on css grid . `; 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(), ],