feat: split CSS outputs into smaller modules

.storybook/preview.ts

@@ -6,7 +6,7 @@ import { html } from 'lit';
 
 import { withBackgroundDecorator } from '../src/storybook/testing/with-background-decorator.js';
 
-import '../src/components/core/styles/global.scss';
+import '../src/components/core/styles/standard-theme.scss';
 
 const getViewportName = (key: string): string =>
   key.replace(/(^SbbBreakpoint|Min$)/g, '').toLowerCase();

docs/GETTING_STARTED.md

@@ -19,10 +19,11 @@ Select your technology to get started.
    yarn add @sbb-esta/lyne-components
    ```
 
-2. Including typography is required to apply all SBB styles to your application.
+2. Including global styles is strongly recommended to apply all SBB styles to your application.
+   See [styles](#styles) section if you prefer more granularity on what to import.
 
    ```css
-   @import 'node_modules/@sbb-esta/lyne-components/typography.css';
+   @import 'node_modules/@sbb-esta/lyne-components/standard-theme.css';
    ```
 
 3. Import the desired element and add it to globalThis:
@@ -54,10 +55,12 @@ Select your technology to get started.
    yarn add @sbb-esta/lyne-components
    ```
 
-3. Including typography is required to apply all SBB styles to your application. That is doable by editing the `styles.(s)css`:
+3. Including global styles is strongly recommended to apply all SBB styles to your application.
+   See [styles](#styles) section if you prefer more granularity on what to import.
+   Importing stylsheets is doable by editing the `styles.(s)css`:
 
    ```css
-   @import 'node_modules/@sbb-esta/lyne-components/typography.css';
+   @import 'node_modules/@sbb-esta/lyne-components/standard-theme.css';
    ```
 
    or editing your `angular.json`:
@@ -66,7 +69,7 @@ Select your technology to get started.
      ...
      "styles": [
        "src/styles.scss",
-       "node_modules/@sbb-esta/lyne-components/typography.css"
+       "node_modules/@sbb-esta/lyne-components/standard-theme.css"
      ],
      ...
    ```
@@ -110,10 +113,11 @@ bootstrapApplication(App).catch((err) => console.error(err));
    yarn add @sbb-esta/lyne-components-react
    ```
 
-3. Including typography globally is required to apply all SBB styles to your application.
+3. Including global styles is strongly recommended to apply all SBB styles to your application.
+   See [styles](#styles) section if you prefer more granularity on what to import.
 
    ```css
-   @import '~@sbb-esta/lyne-components/typography.css';
+   @import '~@sbb-esta/lyne-components/standard-theme.css';
    ```
 
 4. Enhance the `transpilePackages` array in Next.Js config.
@@ -189,25 +193,45 @@ and on [storybook](https://lyne-storybook.app.sbb.ch).
 
 ## Styles
 
+### CSS files
+
+Basically, all our styles are included in 'standard-theme.css' which should be included in your application.
+However, if you like to more specifically pick what you need, consider the following CSS files available.
+
+| File name                       | Description                                                                         |
+| ------------------------------- | ----------------------------------------------------------------------------------- |
+| `standard-theme.css`            | Contains normalizing, core styles and available CSS classes.                        |
+| `font-characters-extension.css` | Provides full character set of SBB fonts, needs larger files to fetch.              |
+|                                 |                                                                                     |
+| `normalize.css`                 | Contains general browser resetting styles which can be useful for your application. |
+|                                 |                                                                                     |
+| `core.css`                      | Contains mandatory basics to use lyne-components (including design tokens).         |
+|                                 |                                                                                     |
+| `a11y.css`                      | Provides accessibility related CSS classes.                                         |
+| `animation.css`                 | Provides CSS classes to disable animation (e.g. for testing).                       |
+| `layout.css`                    | Provides layout related CSS classes (e.g. page spacing, grid).                      |
+| `lists.css`                     | Provides CSS classes to style lists.                                                |
+| `typography.css`                | Provides typography related CSS classes.                                            |
+
 ### Full Font
 
-The `typography.css` file only contains a subset of the `SBB` fonts that do not contain all characters (e.g. the French "œ").
-For including the full fontset, we provide the `fullfont.css` file which can be added after the `typography.css` file.
+The `standard-theme.css` (or `core.css`) file only contains a subset of the `SBB` fonts that do not contain all characters (e.g. the French "œ").
+For including the full fontset, we provide the `font-characters-extension.css` file which can be added after the `standard-theme.css` (or `core.css`) file.
 
 ```css
-@import '@sbb-esta/lyne-components/typography.css';
-@import '@sbb-esta/lyne-components/fullfont.css';
+@import '@sbb-esta/lyne-components/standard-theme.css';
+@import '@sbb-esta/lyne-components/font-characters-extension.css';
 ```
 
 ### Design Tokens
 
 The `@sbb-esta/lyne-components` package provides the CSS variable design tokens
-from `@sbb-esta/lyne-design-tokens` in the `typography.css`.
+from `@sbb-esta/lyne-design-tokens` in the `standard-theme.css` (or `core.css`).
 
 > If you have to use design tokens within a javascript context,
 > please also add `@sbb-esta/lyne-design-tokens` package to your project.
 
-Please check `node_modules/@sbb-esta/lyne-components/typography.css` for available design tokens.
+Please check `node_modules/@sbb-esta/lyne-components/standard-theme.css` for available design tokens.
 
 #### How to work with design tokens
 

src/components/core/styles/a11y.scss

@@ -0,0 +1,5 @@
+@use './mixins/a11y';
+
+.sbb-screen-reader-only {
+  @include a11y.screen-reader-only;
+}

src/components/core/styles/animation.scss

@@ -0,0 +1,17 @@
+@use './mixins/animation';
+
+.sbb-disable-animation {
+  @include animation.disable-animation;
+}
+
+.sbb-disable-animation-locally {
+  @include animation.disable-animation;
+
+  & > * {
+    @include animation.enable-animation;
+  }
+}
+
+.sbb-enable-animation {
+  @include animation.enable-animation;
+}

src/components/core/styles/core.scss

@@ -0,0 +1,123 @@
+@use 'node_modules/@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables_css--mixin.scss' as
+  sbb-css-tokens;
+@use './core/mediaqueries';
+@use './core/functions';
+@use './mixins/font-face';
+@use './mixins/a11y';
+@use './mixins/scrollbar';
+@use './mixins/typo';
+@use './mixins/helpers';
+
+@include helpers.box-sizing;
+
+// Core variables, are always needed
+:root {
+  // Grab css vars defined by `@sbb-esta/lyne-design-tokens` package
+  @include sbb-css-tokens.lyne-design-tokens-css-variables;
+
+  // Train formation
+  --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
+  --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
+  --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
+  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+
+  // Header
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+
+  // Time Input
+  --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
+
+  // Overlay
+  --sbb-overlay-default-z-index: 1000;
+
+  // Infinity border radius, can be used to achieve rounded border on start and end
+  // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
+  --sbb-border-radius-infinity: 10000000em;
+
+  @include mediaqueries.mq($from: medium) {
+    // Header
+    --sbb-header-height: var(--sbb-spacing-fixed-24x);
+
+    // Time Input
+    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+  }
+}
+
+@include font-face.font-declarations;
+
+html {
+  @include typo.text;
+
+  color: var(--sbb-font-default-color);
+}
+
+// TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
+::placeholder {
+  @include typo.placeholder;
+}
+
+// TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
+sbb-form-field {
+  :where(input, textarea):disabled::placeholder {
+    color: var(--sbb-color-granite);
+    -webkit-text-fill-color: var(--sbb-color-granite);
+  }
+
+  &[floating-label] :where(input, textarea)::placeholder {
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+
+    @include a11y.if-forced-colors {
+      color: Canvas;
+      -webkit-text-fill-color: Canvas;
+    }
+  }
+
+  textarea {
+    @include scrollbar.scrollbar;
+  }
+
+  &[negative] textarea {
+    @include scrollbar.scrollbar($negative: true);
+  }
+}
+
+// Hiding components until they are instantiated
+:is(
+    sbb-autocomplete,
+    sbb-dialog,
+    sbb-menu,
+    sbb-navigation,
+    sbb-navigation-section,
+    sbb-overlay,
+    sbb-select,
+    sbb-skiplink-list,
+    sbb-toast,
+    sbb-popover
+  ):not(:defined) {
+  display: none;
+}
+
+// Ensure stable breadcrumb height during hydrating
+sbb-breadcrumb-group:not(:defined) {
+  display: block;
+  height: calc(var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs));
+  overflow: hidden;
+}
+
+// Every element in the Light DOM of a sbb-card which is focusable should receive this attribute.
+// This style enables accessing focusable elements inside an sbb-card.
+[data-card-focusable] {
+  pointer-events: all;
+}
+
+// In smaller title font-sizes, the space after the title is smaller than the default paragraph space before.
+// Due to margin collapsing, the wrong paragraph space wins.
+// To prevent the mistakenly large gap, we reset the paragraph space.
+sbb-title + p {
+  margin-block-start: 0;
+}
+
+input[data-sbb-time-input] {
+  max-width: var(--sbb-time-input-max-width);
+}

src/components/core/styles/layout.scss

@@ -0,0 +1,16 @@
+@use './mixins/layout';
+
+.sbb-grid,
+.sbb-page-spacing {
+  @include layout.page-spacing;
+}
+
+.sbb-grid-expanded,
+.sbb-page-spacing-expanded {
+  @include layout.page-spacing-expanded;
+}
+
+.sbb-grid,
+.sbb-grid-expanded {
+  @include layout.grid-base;
+}

src/components/core/styles/lists.scss

@@ -0,0 +1,10 @@
+@use './mixins/lists';
+
+.sbb-list {
+  @include lists.list;
+  @include lists.description-list;
+}
+
+.sbb-step-list {
+  @include lists.step-list;
+}

src/components/core/styles/mixins/typo.scss

@@ -213,6 +213,7 @@
 @mixin legend {
   @include text-xs--regular;
 
+  padding: 0;
   color: var(--sbb-color-granite);
 }
 

src/components/core/styles/normalize.scss

@@ -1,18 +1,10 @@
-@use './mixins/helpers';
-
 /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
 /*
 Document
 ========
 */
 
-/**
-Use a better box model (opinionated).
-*/
-
-@include helpers.box-sizing;
-
 /**
 1. Correct the line height in all browsers. ///// Commented out since we define own line-height /////
 2. Prevent adjustments of font size after orientation changes in iOS.
@@ -32,16 +24,8 @@ Sections
 ========
 */
 
-/**
-1. Remove the margin in all browsers.
-2. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) ///// Commented out since we define own default font-stack /////
-*/
-
 body {
-  margin: 0; /* 1 */
-  // font-family: system-ui, -apple-system,
-  //   /* Firefox supports this but not yet `system-ui` */ "Segoe UI", Roboto,
-  //   Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* 2 */
+  margin: 0; /* Remove the margin in all browsers. */
 }
 
 /*
@@ -109,7 +93,7 @@ Tabular data
 
 /**
 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
 */
 
 table {

src/components/core/styles/standard-theme.scss

@@ -0,0 +1,9 @@
+@use './_index' as sbb;
+
+@use './normalize';
+@use './core';
+@use './typography';
+@use './a11y';
+@use './animation';
+@use './layout';
+@use './lists';