@fundamental-styles/mcp 0.41.7-rc.8 → 0.41.7

package/data/components/border-radius.md

@@ -0,0 +1,148 @@
+---
+component: border-radius
+title: Border Radius
+category: border-radius
+selector: 
+cssFile: 
+sourcePath: packages/common-css/stories/border-radius/border-radius.stories.js
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.696Z
+---
+
+# Border Radius
+
+Provides CSS classes and SCSS mixins for controlling the corner rounding of elements. Classes apply predefined theme-based border-radius values, while the sap-border-radius mixin lets you define custom values for one or multiple corners.
+
+<table style="width: 100%; border-collapse: collapse; margin-top: 1rem;">
+    <thead>
+        <tr>
+            <th style="padding: 0.25rem 0.75rem;">Type</th>
+            <th style="padding: 0.25rem 0.75rem;">CSS variable</th>
+            <th style="padding: 0.25rem 0.75rem;">Class</th>
+            <th style="padding: 0.25rem 0.75rem;">Mixin</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td style="padding: 0.25rem 0.75rem;">Element</td>
+            <td style="padding: 0.25rem 0.75rem;">var(--sapElement_BorderCornerRadius)</td>
+            <td style="padding: 0.25rem 0.75rem;">.sap-border-radius-element</td>
+            <td style="padding: 0.25rem 0.75rem;">@include sap-border-radius(element)</td>
+        </tr>
+        <tr>
+            <td style="padding: 0.25rem 0.75rem;">Button</td>
+            <td style="padding: 0.25rem 0.75rem;">var(--sapButton_BorderCornerRadius)</td>
+            <td style="padding: 0.25rem 0.75rem;">.sap-border-radius-button</td>
+            <td style="padding: 0.25rem 0.75rem;">@include sap-border-radius(button)</td>
+        </tr>
+        <tr>
+            <td style="padding: 0.25rem 0.75rem;">Field</td>
+            <td style="padding: 0.25rem 0.75rem;">var(--sapField_BorderCornerRadius)</td>
+            <td style="padding: 0.25rem 0.75rem;">.sap-border-radius-field</td>
+            <td style="padding: 0.25rem 0.75rem;">@include sap-border-radius(field)</td>
+        </tr>
+        <tr>
+            <td style="padding: 0.25rem 0.75rem;">Group</td>
+            <td style="padding: 0.25rem 0.75rem;">var(--sapGroup_BorderCornerRadius)</td>
+            <td style="padding: 0.25rem 0.75rem;">.sap-border-radius-group</td>
+            <td style="padding: 0.25rem 0.75rem;">@include sap-border-radius(group)</td>
+        </tr>
+        <tr>
+            <td style="padding: 0.25rem 0.75rem;">Popover</td>
+            <td style="padding: 0.25rem 0.75rem;">var(--sapPopover_BorderCornerRadius)</td>
+            <td style="padding: 0.25rem 0.75rem;">.sap-border-radius-popover</td>
+            <td style="padding: 0.25rem 0.75rem;">@include sap-border-radius(popover)</td>
+        </tr>
+        <tr>
+            <td style="padding: 0.25rem 0.75rem;">Tile</td>
+            <td style="padding: 0.25rem 0.75rem;">var(--sapTile_BorderCornerRadius)</td>
+            <td style="padding: 0.25rem 0.75rem;">.sap-border-radius-tile</td>
+            <td style="padding: 0.25rem 0.75rem;">@include sap-border-radius(tile)</td>
+        </tr>
+    </tbody>
+</table>
+<br><br>
+<b>SCSS mixin: </b><code>@include sap-border-radius($value...)</code><br>
+Example: <br>
+<code>@include sap-border-radius(1rem)</code><br>
+<code>@include sap-border-radius(1rem 0.5rem)</code><br>
+<code>@include sap-border-radius(1rem 0.5rem 0.25rem)</code><br>
+<code>@include sap-border-radius(1rem 0.5rem 0.25rem 0.25rem)</code><br>
+
+## Basic Usage
+
+```html
+<style>
+    .demo div {
+    display: flex;
+    height: 4rem;
+    width: 8rem;
+    background: #69ADF8;
+    }
+</style>
+
+<div class="demo">
+    <h3>Element</h3>
+
+    <h3>Button</h3>
+
+    <h3>Field</h3>
+
+    <h3>Group</h3>
+
+    <h3>Popover</h3>
+
+    <h3>Tile</h3>
+
+    <h3>None</h3>
+
+</div>
+```
+
+## Examples
+
+### Border Radius Types
+
+```html
+<style>
+    .demo div {
+    display: flex;
+    height: 4rem;
+    width: 8rem;
+    background: #69ADF8;
+    }
+</style>
+
+<div class="demo">
+    <h3>Element</h3>
+
+    <h3>Button</h3>
+
+    <h3>Field</h3>
+
+    <h3>Group</h3>
+
+    <h3>Popover</h3>
+
+    <h3>Tile</h3>
+
+    <h3>None</h3>
+
+</div>
+```
+
+## Accessibility
+
+- Use semantic HTML elements where appropriate
+- Include proper ARIA attributes for interactive elements
+- Ensure keyboard navigation support
+- Provide adequate color contrast
+
+## Source
+
+This documentation was automatically generated from: `packages/common-css/stories/border-radius/border-radius.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/border.md

@@ -0,0 +1,412 @@
+---
+component: border
+title: Border
+category: border
+selector: 
+cssFile: 
+sourcePath: packages/common-css/stories/border/border.stories.js
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.653Z
+---
+
+# Border
+
+Border utilities provide ready-to-use classes for commonly used border parameters—style, width, and color. In addition to these predefined classes, SCSS mixins are available for applying the same styles in custom classes, allowing flexibility while ensuring design consistency.
+<br><br><h3>Border Style Classes</h3><table>
+  <thead>
+    <tr>
+      <th>Style</th>
+      <th>CSS Class</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>solid</td>
+      <td><code>.sap-border-style-solid</code></td>
+    </tr>
+    <tr>
+      <td>dashed</td>
+      <td><code>.sap-border-style-dashed</code></td>
+    </tr>
+    <tr>
+      <td>dotted</td>
+      <td><code>.sap-border-style-dotted</code></td>
+    </tr>
+    <tr>
+      <td>double</td>
+      <td><code>.sap-border-style-double</code></td>
+    </tr>
+    <tr>
+      <td>hidden</td>
+      <td><code>.sap-border-style-hidden</code></td>
+    </tr>
+    <tr>
+      <td>none</td>
+      <td><code>.sap-border-style-none</code></td>
+    </tr>
+  </tbody>
+</table>
+<br><h3>Border Width Classes</h3>
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>CSS Class</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td><code>.sap-border-width-1</code></td>
+      <td>0.0625rem</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td><code>.sap-border-width-2</code></td>
+      <td>0.125rem</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td><code>.sap-border-width-3</code></td>
+      <td>0.1875rem</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td><code>.sap-border-width-4</code></td>
+      <td>0.25rem</td>
+    </tr>
+    <tr>
+      <td>element</td>
+      <td><code>.sap-border-width-element</code></td>
+      <td>var(--sapElement_BorderWidth)</td>
+    </tr>
+    <tr>
+      <td>group</td>
+      <td><code>.sap-border-width-group</code></td>
+      <td>var(--sapGroup_BorderWidth)</td>
+    </tr>
+    <tr>
+      <td>content-focus</td>
+      <td><code>.sap-border-width-content-focus</code></td>
+      <td>var(--sapContent_FocusWidth)</td>
+    </tr>
+    <tr>
+      <td>list</td>
+      <td><code>.sap-border-width-list</code></td>
+      <td>var(--sapList_BorderWidth)</td>
+    </tr>
+    <tr>
+      <td>button</td>
+      <td><code>.sap-border-width-button</code></td>
+      <td>var(--sapButton_BorderWidth)</td>
+    </tr>
+    <tr>
+      <td>message</td>
+      <td><code>.sap-border-width-message</code></td>
+      <td>var(--sapMessage_BorderWidth)</td>
+    </tr>
+    <tr>
+      <td>field</td>
+      <td><code>.sap-border-width-field</code></td>
+      <td>var(--sapField_BorderWidth)</td>
+    </tr>
+    <tr>
+      <td>field-invalid</td>
+      <td><code>.sap-border-width-field-invalid</code></td>
+      <td>var(--sapField_InvalidBorderWidth)</td>
+    </tr>
+    <tr>
+      <td>field-warning</td>
+      <td><code>.sap-border-width-field-warning</code></td>
+      <td>var(--sapField_WarningBorderWidth)</td>
+    </tr>
+    <tr>
+      <td>field-success</td>
+      <td><code>.sap-border-width-field-success</code></td>
+      <td>var(--sapField_SuccessBorderWidth)</td>
+    </tr>
+    <tr>
+      <td>field-information</td>
+      <td><code>.sap-border-width-field-information</code></td>
+      <td>var(--sapField_InformationBorderWidth)</td>
+    </tr>
+  </tbody>
+</table>
+<br><h3>Border Color Classes</h3>
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>CSS Class</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td>error</td><td><code>.sap-border-color-error</code></td><td>var(--sapErrorBorderColor)</td></tr>
+    <tr><td>warning</td><td><code>.sap-border-color-warning</code></td><td>var(--sapWarningBorderColor)</td></tr>
+    <tr><td>success</td><td><code>.sap-border-color-success</code></td><td>var(--sapSuccessBorderColor)</td></tr>
+    <tr><td>information</td><td><code>.sap-border-color-information</code></td><td>var(--sapInformationBorderColor)</td></tr>
+    <tr><td>neutral</td><td><code>.sap-border-color-neutral</code></td><td>var(--sapNeutralBorderColor)</td></tr>
+    <tr><td>content-badge</td><td><code>.sap-border-color-content-badge</code></td><td>var(--sapContent_BadgeBorderColor)</td></tr>
+    <tr><td>content-foreground</td><td><code>.sap-border-color-content-foreground</code></td><td>var(--sapContent_ForegroundBorderColor)</td></tr>
+    <tr><td>shell</td><td><code>.sap-border-color-shell</code></td><td>var(--sapShell_BorderColor)</td></tr>
+    <tr><td>shell-interactive</td><td><code>.sap-border-color-shell-interactive</code></td><td>var(--sapShell_InteractiveBorderColor)</td></tr>
+    <tr><td>assistant</td><td><code>.sap-border-color-assistant</code></td><td>var(--sapAssistant_BorderColor)</td></tr>
+    <tr><td>button</td><td><code>.sap-border-color-button</code></td><td>var(--sapButton_BorderColor)</td></tr>
+    <tr><td>field</td><td><code>.sap-border-color-field</code></td><td>var(--sapField_BorderColor)</td></tr>
+    <tr><td>list</td><td><code>.sap-border-color-list</code></td><td>var(--sapList_BorderColor)</td></tr>
+    <tr><td>tile</td><td><code>.sap-border-color-tile</code></td><td>var(--sapTile_BorderColor)</td></tr>
+    <tr><td>message-error</td><td><code>.sap-border-color-message-error</code></td><td>var(--sapMessage_ErrorBorderColor)</td></tr>
+    <tr><td>message-warning</td><td><code>.sap-border-color-message-warning</code></td><td>var(--sapMessage_WarningBorderColor)</td></tr>
+    <tr><td>message-success</td><td><code>.sap-border-color-message-success</code></td><td>var(--sapMessage_SuccessBorderColor)</td></tr>
+    <tr><td>message-information</td><td><code>.sap-border-color-message-information</code></td><td>var(--sapMessage_InformationBorderColor)</td></tr>
+  </tbody>
+</table>
+<br><br>
+
+<p>
+  The classes listed above apply borders on <strong>all four sides</strong> of an element.
+  Similar variations are available for applying borders to specific directions:
+</p>
+
+<ul>
+  <li>
+    **Inline**: applies border along the inline (text) direction
+    (left/right in LTR, right/left in RTL)
+    <ul>
+      <li><code>sap-border-inline-style-*</code></li>
+      <li><code>sap-border-inline-width-*</code></li>
+      <li><code>sap-border-inline-color-*</code></li>
+    </ul>
+  </li>
+
+  <li>
+    **Block**: applies border along the block (vertical) direction (top/bottom)
+    <ul>
+      <li><code>sap-border-block-style-*</code></li>
+      <li><code>sap-border-block-width-*</code></li>
+      <li><code>sap-border-block-color-*</code></li>
+    </ul>
+  </li>
+
+  <li>
+    **Block Start**: applies border to the start edge of the block direction
+    (top in horizontal writing modes)
+    <ul>
+      <li><code>sap-border-block-start-style-*</code></li>
+      <li><code>sap-border-block-start-width-*</code></li>
+      <li><code>sap-border-block-start-color-*</code></li>
+    </ul>
+  </li>
+
+  <li>
+    **Block End**: applies border to the end edge of the block direction
+    (bottom in horizontal writing modes)
+    <ul>
+      <li><code>sap-border-block-end-style-*</code></li>
+      <li><code>sap-border-block-end-width-*</code></li>
+      <li><code>sap-border-block-end-color-*</code></li>
+    </ul>
+  </li>
+
+  <li>
+    **Inline Start**: applies border to the start edge of the inline direction
+    (left in LTR, right in RTL)
+    <ul>
+      <li><code>sap-border-inline-start-style-*</code></li>
+      <li><code>sap-border-inline-start-width-*</code></li>
+      <li><code>sap-border-inline-start-color-*</code></li>
+    </ul>
+  </li>
+
+  <li>
+    **Inline End**: applies border to the end edge of the inline direction
+    (right in LTR, left in RTL)
+    <ul>
+      <li><code>sap-border-inline-end-style-*</code></li>
+      <li><code>sap-border-inline-end-width-*</code></li>
+      <li><code>sap-border-inline-end-color-*</code></li>
+    </ul>
+  </li>
+</ul>
+
+## Basic Usage
+
+```html
+<style>
+    .demo {
+    gap: 2rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    }
+    .demo div {
+    display: flex;
+    height: 4rem;
+    width: 8rem;
+    background: #fff;
+    }
+</style>
+```
+
+## Examples
+
+### Border
+
+```html
+<style>
+    .demo {
+    gap: 2rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    }
+    .demo div {
+    display: flex;
+    height: 4rem;
+    width: 8rem;
+    background: #fff;
+    }
+</style>
+```
+
+### SCSS mixin sap-border
+
+<p>
+  The <code>sap-border</code> helper mixin allows you to specify the width, style, and color of an element's border. 
+  This is achieved by providing values to the <code>sap-border</code> parameters: 
+  <code>$width</code>, <code>$style</code>, <code>$color</code>, and <code>$pos</code>.
+</p>
+
+<p>
+  The <code>$pos</code> parameter defines where the border will be applied and can be one of the following:
+</p>
+
+<ul>
+  <li>**all**: applies borders to all sides (default).</li>
+  <li>**top**: applies the border to the top side (<code>border-block-start</code>).</li>
+  <li>**bottom**: applies the border to the bottom side (<code>border-block-end</code>).</li>
+  <li>**left**: applies the border to the left side (<code>border-inline-start</code>).</li>
+  <li>**right**: applies the border to the right side (<code>border-inline-end</code>).</li>
+  <li>**x**: applies the border to left and right sides (<code>border-inline</code>).</li>
+  <li>**y**: applies the border to top and bottom sides (<code>border-block</code>).</li>
+  <li>**inline**: applies the border to both inline sides (<code>border-inline</code>).</li>
+  <li>**block**: applies the border to both block sides (<code>border-block</code>).</li>
+  <li>**inline-start**: applies the border to the start of the inline axis (<code>border-inline-start</code>).</li>
+  <li>**inline-end**: applies the border to the end of the inline axis (<code>border-inline-end</code>).</li>
+  <li>**block-start**: applies the border to the start of the block axis (<code>border-block-start</code>).</li>
+  <li>**block-end**: applies the border to the end of the block axis (<code>border-block-end</code>).</li>
+</ul>
+
+```html
+<style>
+    .border-example-card {
+    background: #f7f8fa;
+    border: 0.0625rem solid #eaecee;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin-block-end: 1rem;
+    }
+    .border-example-card h4 {
+    margin: 0 0 0.75rem 0;
+    color: #0a6ed1;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    }
+    .border-example-card pre {
+    background: #fff;
+    border: 0.0625rem solid #e4e4e4;
+    border-radius: 0.25rem;
+    padding: 0.75rem 1rem;
+    margin: 0.5rem 0;
+    font-size: 0.875rem;
+    font-family: 'Courier New', Courier, monospace;
+    color: #32363a;
+    overflow-x: auto;
+    line-height: 1.5;
+    display: inline-block;
+    }
+    .border-example-card .alternatives {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    flex-wrap: wrap;
+    }
+    .border-example-card .alternatives::before {
+    content: 'or';
+    color: #6a6d70;
+    font-size: 0.875rem;
+    font-style: italic;
+    }
+</style>
+
+<div class="border-example-card">
+    <h4>All Sides</h4>
+    <pre>@include sap-border(0.125rem, solid, #000);</pre>
+</div>
+
+<div class="border-example-card">
+    <h4>Border Top</h4>
+    <pre>@include sap-border(0.125rem, solid, #000, top);</pre>
+    <div class="alternatives">
+        <pre>@include sap-border(0.125rem, solid, #000, block-start);</pre>
+    </div>
+</div>
+
+<div class="border-example-card">
+    <h4>Border Bottom</h4>
+    <pre>@include sap-border(0.125rem, solid, #000, bottom);</pre>
+    <div class="alternatives">
+        <pre>@include sap-border(0.125rem, solid, #000, block-end);</pre>
+    </div>
+</div>
+
+<div class="border-example-card">
+    <h4>Border Left</h4>
+    <pre>@include sap-border(0.125rem, solid, #000, left);</pre>
+    <div class="alternatives">
+        <pre>@include sap-border(0.125rem, solid, #000, inline-start);</pre>
+    </div>
+</div>
+
+<div class="border-example-card">
+    <h4>Border Right</h4>
+    <pre>@include sap-border(0.125rem, solid, #000, right);</pre>
+    <div class="alternatives">
+        <pre>@include sap-border(0.125rem, solid, #000, inline-end);</pre>
+    </div>
+</div>
+
+<div class="border-example-card">
+    <h4>Border Top and Bottom (Y-axis)</h4>
+    <pre>@include sap-border(0.125rem, solid, #000, y);</pre>
+    <div class="alternatives">
+        <pre>@include sap-border(0.125rem, solid, #000, block);</pre>
+    </div>
+</div>
+
+<div class="border-example-card">
+    <h4>Border Left and Right (X-axis)</h4>
+    <pre>@include sap-border(0.125rem, solid, #000, x);</pre>
+    <div class="alternatives">
+        <pre>@include sap-border(0.125rem, solid, #000, inline);</pre>
+    </div>
+</div>
+```
+
+## Accessibility
+
+- Use semantic HTML elements where appropriate
+- Include proper ARIA attributes for interactive elements
+- Ensure keyboard navigation support
+- Provide adequate color contrast
+
+## Source
+
+This documentation was automatically generated from: `packages/common-css/stories/border/border.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).