docs(svelte): add reference to storybook svelte docs

giamir · giamir · commit 9695d8a9528f · 2025-10-29T15:01:00.000+01:00
Remove razor
diff --git a/packages/stacks-docs/_includes/layouts/page.html b/packages/stacks-docs/_includes/layouts/page.html
@@ -23,14 +23,14 @@ <h5 class="mt16 mb8 fw-bold tt-uppercase fs-fine fc-black-400 mnl1">Sections</h5
                 https://stackoverflow.com/questions/38723559/flex-item-exceeds-its-container
             {% endcomment %}
             <div class="flex--item fl-grow1 ws1">
-                {% if js or figma or razor %}
+                {% if js or figma or svelte %}
                     <div class="stacks-badged d-flex g8 ai-center">
                         <h1 class="stacks-h1 flex--item mb0 mr-auto">{{ title }}</h1>
 
-                        {% if razor %}
-                            <a href="{{ razor }}" class="d-flex fc-white" target="_blank">
-                                <div class="stacks-badge-dotnet--icon blr-sm p4">{% icon "Checkmark" %}</div>
-                                <div class="stacks-badge-dotnet--text d-flex flex__center brr-sm px8 py4">Razor</div>
+                        {% if svelte %}
+                            <a href="{{ svelte }}" class="d-flex fc-white" target="_blank">
+                                <div class="stacks-badge-svelte--icon blr-sm p4">{% icon "Checkmark" %}</div>
+                                <div class="stacks-badge-svelte--text d-flex flex__center brr-sm px8 py4">Svelte</div>
                             </a>
                         {% endif %}
 
diff --git a/packages/stacks-docs/assets/less/stacks-documentation.less b/packages/stacks-docs/assets/less/stacks-documentation.less
@@ -181,18 +181,17 @@
     color: var(--fc-light);
 }
 
-// -- Custom dotnet badge colors
-// follows the dotnet brand guidelines at https://github.com/dotnet/brand/blob/main/dotnet-brand-guidelines.pdf
-.stacks-badge-dotnet--icon {
-    background-color: #2b0b98;
+// -- Custom svelte badge colors
+.stacks-badge-svelte--icon {
+    background-color: #994d00;
     .dark-mode({
-        background-color: #dfd8f7;
+        background-color: #f96743;
     });
 }
-.stacks-badge-dotnet--text {
-    background-color: #512bd4;
+.stacks-badge-svelte--text {
+    background-color: #d43008;
     .dark-mode({
-        background-color: #9e92c7;
+        background-color: #eab095;
     });
 }
 
diff --git a/packages/stacks-docs/product/components/activity-indicator.html b/packages/stacks-docs/product/components/activity-indicator.html
@@ -1,7 +1,6 @@
 ---
 layout: page
 title: Activity indicator
-razor: https://razor.stackoverflow.design/components/activity-indicator
 description: Stacks provides a small jewel for indicating new activity.
 tags: components
 ---
diff --git a/packages/stacks-docs/product/components/avatars.html b/packages/stacks-docs/product/components/avatars.html
@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Avatars
-razor: https://razor.stackoverflow.design/components/avatar
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-avatar--docs
 figma: https://svelte.stackoverflow.design/figma/avatars
 description: Avatars are used to quickly identify users or teams.
 tags: components
diff --git a/packages/stacks-docs/product/components/award-bling.html b/packages/stacks-docs/product/components/award-bling.html
@@ -1,11 +1,11 @@
 ---
 layout: page
 title: Award bling
-razor: https://razor.stackoverflow.design/components/award-bling
-figma: https://svelte.stackoverflow.design/figma/badges
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-awardbling--docs
+figma: https://svelte.stackoverflow.design/figma/award-bling
 description: Award bling is used to indicate award type in badges, topbar, and user cards.
 tags: components
----
+---svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-award-bling--docs
 <section class="stacks-section">
     {% header "h2", "Types" %}
     <p class="stacks-copy">Use award bling to indicate the type of award.</p>
diff --git a/packages/stacks-docs/product/components/badges.html b/packages/stacks-docs/product/components/badges.html
@@ -1,7 +1,6 @@
 ---
 layout: page
 title: Badges
-razor: https://razor.stackoverflow.design/components/badge
 figma: https://svelte.stackoverflow.design/figma/badges
 description: Badges are labels used for flags, earned achievements, and number totals.
 tags: components
diff --git a/packages/stacks-docs/product/components/banners.html b/packages/stacks-docs/product/components/banners.html
@@ -1,7 +1,6 @@
 ---
 layout: page
 title: Banners
-razor: https://razor.stackoverflow.design/components/banner
 figma: https://svelte.stackoverflow.design/figma/banners
 description: Banners are a type of <a href="/product/components/notices">notice</a>, delivering both system and engagement messaging. These are highly intrusive messaging methods and so should be used appropriately.
 tags: components
diff --git a/packages/stacks-docs/product/components/button-groups.html b/packages/stacks-docs/product/components/button-groups.html
@@ -1,7 +1,6 @@
 ---
 layout: page
 title: Button groups
-razor: https://razor.stackoverflow.design/components/button-group
 figma: https://svelte.stackoverflow.design/figma/button-groups
 description: Button groups are a collection of buttons. This component is used in our questions view, and is frequently used in conjunction with other form elements such as search fields and sorting dropdowns. If the content you’re interacting with is a simple paring down or filter of the current view, it’s appropriate to use the <code class="stacks-code">.s-btn-group</code> component. Add the class <code class="stacks-code">.is-selected</code> and the <code class="stacks-code">aria-current</code> attribute with the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#values">appropriate value</a> to show the currently selected button.
 tags: components
diff --git a/packages/stacks-docs/product/components/buttons.html b/packages/stacks-docs/product/components/buttons.html
@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Buttons
-razor: https://razor.stackoverflow.design/components/button
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-button--docs
 figma: https://svelte.stackoverflow.design/figma/buttons
 description: Buttons are user interface elements which allows users to take actions throughout the project. It is important that they have ample click space and help communicate the importance of their actions.
 tags: components
diff --git a/packages/stacks-docs/product/components/checkbox.html b/packages/stacks-docs/product/components/checkbox.html
@@ -1,7 +1,6 @@
 ---
 layout: page
 title: Checkbox & Radio
-razor: https://razor.stackoverflow.design/components/check
 figma: https://svelte.stackoverflow.design/figma/form-elements
 description: Checkable inputs that visually allow for multiple options or true/false values.
 tags: components
diff --git a/packages/stacks-docs/product/components/code-blocks.html b/packages/stacks-docs/product/components/code-blocks.html
@@ -1,7 +1,6 @@
 ---
 layout: page
 title: Code block
-razor: https://razor.stackoverflow.design/components/code-block
 description: Stacks provides styling for code blocks with syntax highlighting provided by highlight.js. Special care was taken to make sure our light and dark themes felt like Stack Overflow while maintaining near AAA color contrasts and still being distinguishable for those with a color vision deficiency.
 tags: components
 ---
diff --git a/packages/stacks-docs/product/components/inputs.html b/packages/stacks-docs/product/components/inputs.html
@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Inputs
-razor: https://razor.stackoverflow.design/components/input
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-textinput--docs
 figma: https://svelte.stackoverflow.design/figma/form-elements
 description: Input elements are used to gather information from users.
 tags: components
diff --git a/packages/stacks-docs/product/components/link-previews.html b/packages/stacks-docs/product/components/link-previews.html
@@ -1,7 +1,6 @@
 ---
 layout: page
 title: Link previews
-razor: https://razor.stackoverflow.design/components/link-preview
 description: Link previews add rich previews to links included in questions and answers on Stack Overflow. They’re also known as oneboxes or link unfurls.
 tags: components
 ---
diff --git a/packages/stacks-docs/product/components/links.html b/packages/stacks-docs/product/components/links.html
@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Links
-razor: https://razor.stackoverflow.design/components/link
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-link--docs
 description: Links are lightly styled via the <code class="stacks-code">a</code> element by default. In addition, we provide <code class="stacks-code">.s-link</code> and its variations. In rare situations, <code class="stacks-code">.s-link</code> can be applied to n <code class="stacks-code">button</code> while maintaining the look of an anchor.
 tags: components
 ---
diff --git a/packages/stacks-docs/product/components/modals.html b/packages/stacks-docs/product/components/modals.html
@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Modals
-razor: https://razor.stackoverflow.design/components/modal
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-modal--docs
 js: true
 figma: https://svelte.stackoverflow.design/figma/modals
 description: Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.
@@ -419,4 +419,4 @@ <h1 class="s-modal--header" id="example-modal-celebratory-title">Congratulations
 </section>
 
 <!-- Example modals javascript -->
-<script src="{{ "/assets/dist/entry.modals.js" | url }}" defer></script>
+<script src="{{ "/assets/dist/entry.modals.js" | url }}" defer></script>
diff --git a/packages/stacks-docs/product/components/navigation.html b/packages/stacks-docs/product/components/navigation.html
@@ -1,7 +1,6 @@
 ---
 layout: page
 title: Navigation
-razor: https://razor.stackoverflow.design/components/navigation
 js: true
 figma: https://svelte.stackoverflow.design/figma/navigation
 description: Our navigation component is a collection of pill-shaped buttons that respond gracefully to various window sizes and parent containers.
diff --git a/packages/stacks-docs/product/components/notices.html b/packages/stacks-docs/product/components/notices.html
@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Notices
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-toast--docs
 figma: https://svelte.stackoverflow.design/figma/notices
 description: Notices deliver <strong>System</strong> and <strong>Engagement</strong> messaging, informing the user about product or account statuses and related actions.
 tags: components
@@ -311,7 +312,7 @@
 {% highlight html %}
 <div class="s-notice s-notice__info" role="presentation">
     Notice with <a href="#" class="s-link">default link style</a>
-</div>  
+</div>
 <div class="s-notice s-notice__info s-anchors s-anchors__inherit s-anchors__underlined" role="presentation">
     Notice with <a href="#">custom link style</a>
 </div>
@@ -323,14 +324,14 @@
                     <p class="m0">
                         Notice with <a href="#" class="s-link">default link style</a>
                     </p>
-                </div>   
-                
+                </div>
+
                 <div class="s-notice s-notice__info s-anchors s-anchors__inherit s-anchors__underlined" role="presentation">
                     <p class="m0">
-                        Notice with 
+                        Notice with
                         <code>.s-anchors</code> <code>.s-anchors__inherit</code> <code>.s-anchors__underlined</code> and <a href="#">custom link style</a>
                     </p>
-                </div>   
+                </div>
 
             </div>
         </div>
diff --git a/packages/stacks-docs/product/components/pagination.html b/packages/stacks-docs/product/components/pagination.html
@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Pagination
-razor: https://razor.stackoverflow.design/components/pagination
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-paginationcontroller--docs
 description: Pagination splits content into pages, as seen on questions, tags, users, and jobs listings.
 tags: components
 ---
diff --git a/packages/stacks-docs/product/components/popovers.html b/packages/stacks-docs/product/components/popovers.html
@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Popovers
-razor: https://razor.stackoverflow.design/components/popover
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-popover--docs
 js: true
 figma: https://svelte.stackoverflow.design/figma/popovers
 description: Popovers are small content containers that provide a contextual overlay. They can be used as in-context feature explanations, dropdowns, or tooltips.
@@ -244,7 +244,7 @@
                                 <div class="flex--item mr12 fc-orange-400">
                                     {% spot "Bell" %}
                                 </div>
-    
+
                                 <div class="flex--item">
                                     Get updates on questions and answers
                                 </div>
diff --git a/packages/stacks-docs/product/components/post-summary.html b/packages/stacks-docs/product/components/post-summary.html
@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Post summary
-razor: https://razor.stackoverflow.design/base-components/base-post-summary
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-postsummary--docs
 description: The post summary component summarizes various content and associated meta data into a highly configurable component.
 tags: components
 ---
diff --git a/packages/stacks-docs/product/components/progress-bars.html b/packages/stacks-docs/product/components/progress-bars.html
@@ -1,7 +1,6 @@
 ---
 layout: page
 title: Progress bars
-razor: https://razor.stackoverflow.design/components/progress
 description: A component that visually communicates the completion of a task or operation. It shows the task’s progress and remainder.
 tags: components
 ---
diff --git a/packages/stacks-docs/product/components/select.html b/packages/stacks-docs/product/components/select.html
@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Select
-razor: https://razor.stackoverflow.design/components/select
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-select--docs
 figma: https://svelte.stackoverflow.design/figma/form-elements
 description: A selectable menu list from which a user can make a single selection. Typically they are used when there are more than four possible options. The custom select menu styling is achieved by wrapping the <code class="stacks-code">select</code> tag within the <code class="stacks-code">.s-select</code> class.
 tags: components
diff --git a/packages/stacks-docs/product/components/sidebar-widgets.html b/packages/stacks-docs/product/components/sidebar-widgets.html
@@ -1,7 +1,6 @@
 ---
 layout: page
 title: Sidebar widgets
-razor: https://razor.stackoverflow.design/components/sidebar-widget
 description: Sidebar widgets are flexible containers that provide a lot of patterns that are helpful in a variety of sidebar uses.
 tags: components
 ---
diff --git a/packages/stacks-docs/product/components/skeleton.html b/packages/stacks-docs/product/components/skeleton.html
@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Skeleton
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-skeleton--docs
 description: A skeleton component is used to indicate that a large block of content, such as an AI responses or post summary, is loading.
 tags: components
 ---
diff --git a/packages/stacks-docs/product/components/spinner.html b/packages/stacks-docs/product/components/spinner.html
@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Spinner
-razor: https://razor.stackoverflow.design/components/spinner
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-spinner--docs
 description: A loading spinner is used for indicating a loading state of a page or section. It is colored according to the currently applying font color.
 tags: components
 ---
diff --git a/packages/stacks-docs/product/components/tables.html b/packages/stacks-docs/product/components/tables.html
@@ -1,7 +1,6 @@
 ---
 layout: page
 title: Tables
-razor: https://razor.stackoverflow.design/components/table
 js: true
 description: Tables are used to list all information from a data set. The base style establishes preferred padding, font-size, and font-weight treatments. To enhance or customize the look of the table, apply any additional classes listed below.
 tags: components
diff --git a/packages/stacks-docs/product/components/tags.html b/packages/stacks-docs/product/components/tags.html
@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Tags
-razor: https://razor.stackoverflow.design/components/post-tag
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-tag--docs
 figma: https://svelte.stackoverflow.design/figma/tags
 description: Tags are an interactive, community-generated keyword that allow communities to label, organize, and discover related content. Tags are maintained by their respective communities
 tags: components
diff --git a/packages/stacks-docs/product/components/textarea.html b/packages/stacks-docs/product/components/textarea.html
@@ -1,7 +1,6 @@
 ---
 layout: page
 title: Textarea
-razor: https://razor.stackoverflow.design/components/textarea
 figma: https://svelte.stackoverflow.design/figma/form-elements
 description: Multi-line inputs used by users to enter longer text portions.
 tags: components
diff --git a/packages/stacks-docs/product/components/toggle-switch.html b/packages/stacks-docs/product/components/toggle-switch.html
@@ -1,7 +1,6 @@
 ---
 layout: page
 title: Toggle switch
-razor: https://razor.stackoverflow.design/components/toggle
 figma: https://svelte.stackoverflow.design/figma/toggle-switches
 description: A toggle is used to quickly switch between two or more possible states. They are most commonly used for simple “on/off” switches, but can contain multiple options.
 tags: components
diff --git a/packages/stacks-docs/product/components/topbar.html b/packages/stacks-docs/product/components/topbar.html
@@ -1,7 +1,6 @@
 ---
 layout: page
 title: Topbar
-razor: https://razor.stackoverflow.design/components/topbar
 description: The topbar component is a navigation bar that is placed at the top of the page.
 tags: components
 ---
diff --git a/packages/stacks-docs/product/components/user-cards.html b/packages/stacks-docs/product/components/user-cards.html
@@ -1,7 +1,7 @@
 ---
 layout: page
 title: User cards
-razor: https://razor.stackoverflow.design/base-components/base-user-card
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-usercard--docs
 description: User cards are a combination of a user and metadata about the user or post
 tags: components
 ---
diff --git a/packages/stacks-docs/product/foundation/icons.html b/packages/stacks-docs/product/foundation/icons.html
@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Icons
-razor: https://razor.stackoverflow.design/components/icon
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-icon--docs
 figma: https://www.figma.com/design/Z5yoO4WH58QDHvmxwMWhr0
 description: Stacks provides a complete icon set, managed separately in the <a href="https://github.com/StackExchange/Stacks-Icons">Stacks-Icons</a> repository. There you’ll find deeper documentation on the various uses as well as the icons’ source in our design tool Figma.
 tags: foundation
diff --git a/packages/stacks-docs/product/foundation/spots.html b/packages/stacks-docs/product/foundation/spots.html
@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Spot illustrations (WIP)
-razor: https://razor.stackoverflow.design/components/spot
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-icon--docs
 figma: https://www.figma.com/design/Z5yoO4WH58QDHvmxwMWhr0
 description: Spot illustrations are the slightly grown up version of icons with a little more detail. They’re most often used in empty states and new product announcements. They’re built externally on the <a href="https://github.com/StackExchange/Stacks-Icons">Icons</a> repository.
 tags: foundation
