From c48e06dc8b53f1feeb728b2c03ae9a65112fae37 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Wed, 11 Dec 2024 09:16:43 +0100
Subject: [PATCH] feat: provide scrollbar styles as CSS classes

---
 docs/GETTING_STARTED.md                       |  2 +
 src/elements/core/styles/scrollbar.scss       | 44 +++++++++++++++++++
 src/elements/core/styles/standard-theme.scss  |  1 +
 src/elements/vite.config.ts                   |  4 +-
 src/storybook/styles/layout/readme.md         |  8 ++--
 src/storybook/styles/list/readme.md           | 12 ++---
 src/storybook/styles/scrollbar/readme.md      | 17 ++++---
 .../styles/scrollbar/scrollbar-internal.scss  | 32 --------------
 .../styles/scrollbar/scrollbar.stories.ts     |  2 +-
 .../styles/scrollbar/scrollbar.visual.spec.ts |  2 +-
 src/storybook/styles/table/readme.md          |  2 +-
 src/storybook/styles/typography/readme.md     |  8 ++--
 tools/vite/typography.ts                      |  2 +
 13 files changed, 81 insertions(+), 55 deletions(-)
 create mode 100644 src/elements/core/styles/scrollbar.scss

diff --git a/docs/GETTING_STARTED.md b/docs/GETTING_STARTED.md
index ab7bbbfbac..1c8a0b3390 100644
--- a/docs/GETTING_STARTED.md
+++ b/docs/GETTING_STARTED.md
@@ -228,6 +228,8 @@ However, if you like to more specifically pick what you need, consider the follo
 | `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.                                                |
+| `scrollbar.css`                 | Provides CSS classes to style a scrollbar.                                          |
+| `table.css`                     | Provides CSS classes to style a table.                                              |
 | `typography.css`                | Provides typography related CSS classes.                                            |
 
 ### Full Font
diff --git a/src/elements/core/styles/scrollbar.scss b/src/elements/core/styles/scrollbar.scss
new file mode 100644
index 0000000000..b25fd11c0b
--- /dev/null
+++ b/src/elements/core/styles/scrollbar.scss
@@ -0,0 +1,44 @@
+@use './mixins/scrollbar';
+
+.sbb-scrollbar,
+.sbb-scrollbar-negative,
+.sbb-scrollbar-thick,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.sbb-scrollbar-thick-negative-track-visible {
+  @include scrollbar.scrollbar-rules;
+}
+
+.sbb-scrollbar {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: false, $track-visible: false);
+}
+
+.sbb-scrollbar-negative {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: true, $track-visible: false);
+}
+
+.sbb-scrollbar-thick {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: false, $track-visible: false);
+}
+
+.sbb-scrollbar-thick-negative {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: true, $track-visible: false);
+}
+
+.sbb-scrollbar-track-visible {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: false, $track-visible: true);
+}
+
+.sbb-scrollbar-negative-track-visible {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: true, $track-visible: true);
+}
+
+.sbb-scrollbar-thick-track-visible {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: false, $track-visible: true);
+}
+
+.sbb-scrollbar-thick-negative-track-visible {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: true, $track-visible: true);
+}
diff --git a/src/elements/core/styles/standard-theme.scss b/src/elements/core/styles/standard-theme.scss
index 984efe558b..569ce30a4d 100644
--- a/src/elements/core/styles/standard-theme.scss
+++ b/src/elements/core/styles/standard-theme.scss
@@ -7,4 +7,5 @@
 @use './animation';
 @use './layout';
 @use './lists';
+@use './scrollbar';
 @use './table';
diff --git a/src/elements/vite.config.ts b/src/elements/vite.config.ts
index 448d153783..eea633f2f5 100644
--- a/src/elements/vite.config.ts
+++ b/src/elements/vite.config.ts
@@ -63,10 +63,12 @@ export default defineConfig((config) =>
                   'animation.css',
                   'core.css',
                   'font-characters-extension.css',
-                  'standard-theme.css',
                   'layout.css',
                   'lists.css',
                   'normalize.css',
+                  'scrollbar.css',
+                  'standard-theme.css',
+                  'table.css',
                   'typography.css',
                 ]),
               },
diff --git a/src/storybook/styles/layout/readme.md b/src/storybook/styles/layout/readme.md
index 1d85c25dd9..4c82685cb3 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)
+[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 9db25d7668..be7084f9fc 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 80dae61a33..dadc668617 100644
--- a/src/storybook/styles/scrollbar/readme.md
+++ b/src/storybook/styles/scrollbar/readme.md
@@ -1,14 +1,21 @@
 ## Scrollbar
 
-The scrollbar mixin offers 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.
 
-| sass mixin                                    |
-| --------------------------------------------- |
-| `scrollbar($size, $negative, $track-visible)` |
+| 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)`   |
+| `sbb-scrollbar-thick`                        | `scrollbar($size: thick, $negative: false, $track-visible: false)` |
+| `sbb-scrollbar-thick-negative`               | `scrollbar($size: thick, $negative: true, $track-visible: false)`  |
+| `sbb-scrollbar-track-visible`                | `scrollbar($size: thin, $negative: false, $track-visible: true)`   |
+| `sbb-scrollbar-negative-track-visible`       | `scrollbar($size: thin, $negative: true, $track-visible: true)`    |
+| `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 **
+** Possible values of SASS mixin **
 
 - `$size` thin or thick
 - `$negative` true or false
diff --git a/src/storybook/styles/scrollbar/scrollbar-internal.scss b/src/storybook/styles/scrollbar/scrollbar-internal.scss
index 117de1d105..7b925fbd6e 100644
--- a/src/storybook/styles/scrollbar/scrollbar-internal.scss
+++ b/src/storybook/styles/scrollbar/scrollbar-internal.scss
@@ -1,37 +1,5 @@
 @use '../../../elements/core/styles' as sbb;
 
-.scrollbar {
-  @include sbb.scrollbar;
-}
-
-.scrollbar-negative {
-  @include sbb.scrollbar($negative: true);
-}
-
-.scrollbar-thick {
-  @include sbb.scrollbar($size: thick);
-}
-
-.scrollbar-thick-negative {
-  @include sbb.scrollbar($size: thick, $negative: true);
-}
-
-.scrollbar-track-visible {
-  @include sbb.scrollbar($track-visible: true);
-}
-
-.scrollbar-negative-track-visible {
-  @include sbb.scrollbar($negative: true, $track-visible: true);
-}
-
-.scrollbar-thick-track-visible {
-  @include sbb.scrollbar($size: thick, $track-visible: true);
-}
-
-.scrollbar-thick-negative-track-visible {
-  @include sbb.scrollbar($size: thick, $negative: true, $track-visible: true);
-}
-
 .negative {
   background-color: var(--sbb-color-charcoal);
   color: var(--sbb-color-white);
diff --git a/src/storybook/styles/scrollbar/scrollbar.stories.ts b/src/storybook/styles/scrollbar/scrollbar.stories.ts
index 3ffe7bca01..157fd55d36 100644
--- a/src/storybook/styles/scrollbar/scrollbar.stories.ts
+++ b/src/storybook/styles/scrollbar/scrollbar.stories.ts
@@ -14,7 +14,7 @@ const text: string = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, s
   no sea takimata sanctus est Lorem ipsum dolor sit amet.`;
 
 const Template = (args: Args): TemplateResult => {
-  let scrollbarClass = 'scrollbar';
+  let scrollbarClass = 'sbb-scrollbar';
   if (args.size === 'thick') {
     scrollbarClass += '-thick';
   }
diff --git a/src/storybook/styles/scrollbar/scrollbar.visual.spec.ts b/src/storybook/styles/scrollbar/scrollbar.visual.spec.ts
index 66b6474b5d..6a7ce407fc 100644
--- a/src/storybook/styles/scrollbar/scrollbar.visual.spec.ts
+++ b/src/storybook/styles/scrollbar/scrollbar.visual.spec.ts
@@ -21,7 +21,7 @@ describe(`scrollbar`, () => {
   describeViewports({ viewports: ['small'] }, () => {
     describeEach(cases, ({ thickness, negative, trackVisible }) => {
       beforeEach(async function () {
-        let scrollbarClass = 'scrollbar';
+        let scrollbarClass = 'sbb-scrollbar';
         if (thickness === 'thick') {
           scrollbarClass += '-thick';
         }
diff --git a/src/storybook/styles/table/readme.md b/src/storybook/styles/table/readme.md
index 772e49f0fe..c3cd109adf 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:
 
-| 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 3fc805ff50..9b78c475d7 100644
--- a/src/storybook/styles/typography/readme.md
+++ b/src/storybook/styles/typography/readme.md
@@ -6,7 +6,7 @@ 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`      |
diff --git a/tools/vite/typography.ts b/tools/vite/typography.ts
index 031db40711..a2d15b7633 100644
--- a/tools/vite/typography.ts
+++ b/tools/vite/typography.ts
@@ -24,7 +24,9 @@ export function typography(): PluginOption {
         { inputName: 'core/styles/layout.scss', outputName: 'layout.css' },
         { inputName: 'core/styles/lists.scss', outputName: 'lists.css' },
         { inputName: 'core/styles/normalize.scss', outputName: 'normalize.css' },
+        { inputName: 'core/styles/scrollbar.scss', outputName: 'scrollbar.css' },
         { inputName: 'core/styles/standard-theme.scss', outputName: 'standard-theme.css' },
+        { inputName: 'core/styles/table.scss', outputName: 'table.css' },
         { inputName: 'core/styles/typography.scss', outputName: 'typography.css' },
       ].forEach((entry) => {
         const compiled = sass.compile(join(viteConfig.root, entry.inputName), {