feat: dimensions and vars

sbb-design-systems · Aug 30, 2024 · 65cdc03 · 65cdc03
1 parent 36e0de7
commit 65cdc03
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/src/elements/core/styles/mixins/lists.scss b/src/elements/core/styles/mixins/lists.scss
@@ -165,10 +165,17 @@
   --sbb-checkup-list-marker-icon: url('https://icons.app.sbb.ch/icons/circle-tick-medium.svg');
   --sbb-checkup-list-marker-icon-color: var(--sbb-color-black);
   --sbb-list-marker-vertical-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-list-marker-dimensions: var(--sbb-size-icon-ui-small);
+  --sbb-list-marker-to-text-gap: var(--sbb-spacing-fixed-2x);
+
+  > li,
+  :is(ol, ul) {
+    color: var(--sbb-checkup-list-color);
+  }
 
   > li::before {
     content: '';
-    background-color: var(--sbb-checkup-list-marker-icon-color);
+    background-color: var(--sbb-checkup-list-color, var(--sbb-checkup-list-marker-icon-color));
     mask-image: var(--sbb-checkup-list-marker-icon);
     mask-repeat: no-repeat;
     mask-position: center;

diff --git a/src/storybook/styles/list/list.stories.ts b/src/storybook/styles/list/list.stories.ts
@@ -83,7 +83,7 @@ const CheckupTemplate = (): TemplateResult => html`
   )}
 `;
 
-const CheckupCustomColorAndIconTemplate = (): TemplateResult => html`
+const CheckupCustomIconTemplate = (): TemplateResult => html`
   ${['xs', 's', 'm', 'l', 'xl'].map(
     (textSize) => html`
       <sbb-title level="5">Text size ${textSize}</sbb-title>
@@ -103,6 +103,26 @@ const CheckupCustomColorAndIconTemplate = (): TemplateResult => html`
   )}
 `;
 
+const CheckupCustomColorTemplate = (): TemplateResult => html`
+  ${['xs', 's', 'm', 'l', 'xl'].map(
+    (textSize) => html`
+      <sbb-title level="5">Text size ${textSize}</sbb-title>
+      <ol
+        class=${`sbb-checkup-list sbb-text-${textSize}`}
+        style="--sbb-checkup-list-color: var(--sbb-color-green);"
+      >
+        ${ListContent()}
+        <li>
+          Nested list
+          <ol class="sbb-list">
+            ${ListContent()}
+          </ol>
+        </li>
+      </ol>
+    `,
+  )}
+`;
+
 const DescriptionListTemplate = (): TemplateResult => html`
   <dl class="sbb-list">
     <dt>Label:</dt>
@@ -137,8 +157,12 @@ export const CheckupList: StoryObj = {
   render: CheckupTemplate,
 };
 
-export const CheckupListCustomColorAndIcon: StoryObj = {
-  render: CheckupCustomColorAndIconTemplate,
+export const CheckupListCustomIcon: StoryObj = {
+  render: CheckupCustomIconTemplate,
+};
+
+export const CheckupListCustomColor: StoryObj = {
+  render: CheckupCustomColorTemplate,
 };
 
 export const DescriptionList: StoryObj = {