docs(figma): obfuscate figma links under okta auth (#1712)

Co-authored-by: Giamir Buoncristiani <[email protected]>

docs/product/base/box-shadow.html

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Box shadow
-figma: https://www.figma.com/file/BKF0Bk7gymjt8cAdQcPtF7/Box-Shadows
+figma: https://svelte.stackoverflow.design/figma/box-shadows
 description: Box shadow atomic classes allow you to change an element’s box shadow quickly.
 ---
 <section class="stacks-section">

docs/product/components/avatars.html

@@ -2,7 +2,7 @@
 layout: page
 title: Avatars
 razor: https://razor.stackoverflow.design/components/avatar
-figma: https://www.figma.com/file/BJRlHasCR6r9hgszE95hJm/Avatars
+figma: https://svelte.stackoverflow.design/figma/avatars
 description: Avatars are used to quickly identify users or teams.
 ---
 <section class="stacks-section">

docs/product/components/award-bling.html

@@ -2,7 +2,7 @@
 layout: page
 title: Award bling
 razor: https://razor.stackoverflow.design/components/award-bling
-figma: https://www.figma.com/file/i2HeoRFKn6MXAWn2UuTDHc/Badges
+figma: https://svelte.stackoverflow.design/figma/badges
 description: Award bling is used to indicate award type in badges, topbar, and user cards.
 ---
 <section class="stacks-section">

docs/product/components/badges.html

@@ -2,7 +2,7 @@
 layout: page
 title: Badges
 razor: https://razor.stackoverflow.design/components/badge
-figma: https://www.figma.com/file/i2HeoRFKn6MXAWn2UuTDHc/Badges
+figma: https://svelte.stackoverflow.design/figma/badges
 description: Badges are labels used for flags, earned achievements, and number totals.
 ---
 <section class="stacks-section">
@@ -24,7 +24,7 @@
 <span class="s-badge">
     <span class="s-award-bling s-award-bling__bronze">
         Altruist
-    </span> 
+    </span>
 </span>
 {% endhighlight %}
         <div class="stacks-preview--example">

docs/product/components/banners.html

@@ -2,7 +2,7 @@
 layout: page
 title: Banners
 razor: https://razor.stackoverflow.design/components/banner
-figma: https://www.figma.com/file/9MG6BQ5X0FlHV0rQ3c9ugA/Banners
+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.
 ---
 <!-- Additional javascript -->
@@ -296,4 +296,4 @@
 {% endhighlight %}
 </div>
 
-</section>
+</section>

docs/product/components/breadcrumbs.html

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Breadcrumbs
-figma: https://www.figma.com/file/Anwb7zgxxeMm7Sw7vbaukq/Breadcrumbs
+figma: https://svelte.stackoverflow.design/figma/breadcrumbs
 description: Breadcrumbs are used to provide context for the currently-viewed page.
 ---
 <section class="stacks-section">

docs/product/components/button-groups.html

@@ -2,7 +2,7 @@
 layout: page
 title: Button groups
 razor: https://razor.stackoverflow.design/components/button-group
-figma: https://www.figma.com/file/9p5HuZwl9KXP9HpBZuvBoT/Button-Groups
+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.
 ---
 <section class="stacks-section">

docs/product/components/buttons.html

@@ -2,7 +2,7 @@
 layout: page
 title: Buttons
 razor: https://razor.stackoverflow.design/components/button
-figma: https://www.figma.com/file/rknusKtqsY7iUI9Ng7PNDS/Buttons
+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.
 ---
 <section class="stacks-section">

docs/product/components/cards.html

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Cards
-figma: https://www.figma.com/file/ZidBnnDAVwYUnL0TvGWnTa/Cards
+figma: https://svelte.stackoverflow.design/figma/cards
 description: Cards are used to group similar concepts and tasks together to make information easier to scan, read, and act on. Cards should use a heading that sets clear expectations about the card’s purpose, paragraphs that put the most critical information first, and (optionally) calls to action on the bottom to direct user action.
 ---
 <section class="stacks-section">

docs/product/components/checkbox.html

@@ -2,7 +2,7 @@
 layout: page
 title: Checkbox & Radio
 razor: https://razor.stackoverflow.design/components/check
-figma: https://www.figma.com/file/GQB9GupHvraMioGRPbwKhO/Form-Elements
+figma: https://svelte.stackoverflow.design/figma/form-elements
 description: Checkable inputs that visually allow for multiple options or true/false values.
 ---
 <section class="stacks-section">

docs/product/components/editor.html

@@ -2,7 +2,7 @@
 layout: page
 title: Editor
 js: true
-figma: https://www.figma.com/file/aUvZ3KmZN4oYrMBJ5AroKV/Editor
+figma: https://svelte.stackoverflow.design/figma/editor
 description: The Stacks editor adds “what you see is what you get” and Markdown capabilities to textareas. It is available as a separate <a href="https://github.com/StackExchange/Stacks-Editor">Editor</a> repository, but requires Stacks’ CSS for styling.
 ---
 <section class="stacks-section">

docs/product/components/inputs.html

@@ -2,7 +2,7 @@
 layout: page
 title: Inputs
 razor: https://razor.stackoverflow.design/components/input
-figma: https://www.figma.com/file/GQB9GupHvraMioGRPbwKhO/Form-Elements
+figma: https://svelte.stackoverflow.design/figma/form-elements
 description: Input elements are used to gather information from users.
 ---
 <section class="stacks-section">

docs/product/components/labels.html

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Labels
-figma: https://www.figma.com/file/UMVHhcJjTqHgqn7wJkr5f6/Labels
+figma: https://svelte.stackoverflow.design/figma/labels
 description: Labels are used to describe inputs, select menus, textareas, radio buttons, and checkboxes.
 ---
 <section class="stacks-section">

docs/product/components/modals.html

@@ -3,7 +3,7 @@
 title: Modals
 razor: https://razor.stackoverflow.design/components/modal
 js: true
-figma: https://www.figma.com/file/B1IIlRbtGvReNCILI7HNVL/Modals
+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.
 ---
 <section class="stacks-section">

docs/product/components/navigation.html

@@ -3,7 +3,7 @@
 title: Navigation
 razor: https://razor.stackoverflow.design/components/navigation
 js: true
-figma: https://www.figma.com/file/Hei0vYDqdyrjZR9laRdZCm/Navigation
+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.
 ---
 <section class="stacks-section">

docs/product/components/notices.html

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Notices
-figma: https://www.figma.com/file/WYBYiGnyr5qemIm93ZcTf8/Notices
+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.
 ---
 <!-- TODO: Add accessibility section with differences between <aside> and status/alert roles and when to use them -->
@@ -377,7 +377,7 @@
 
     {% header "h3", "Toast" %}
     <p class="stacks-copy">Floating notices, but aligned to the top and center of the page and they disappear after a set time.  Visibility is changed with animation by toggling between <code class="stacks-code">aria-hidden="true"</code> and <code class="stacks-code">aria-hidden="false"</code>. When including buttons, you can apply <code class="stacks-code">.s-notice--btn</code> to buttons to apply a toast-specific color.</p>
-    
+
     <!-- TODO: document controller attributes -->
     <div class="stacks-preview bs-none">
         <div class="stacks-preview--example ba bar-sm bg-black-100 d-flex g8 fw-wrap">

docs/product/components/popovers.html

@@ -3,7 +3,7 @@
 title: Popovers
 razor: https://razor.stackoverflow.design/components/popover
 js: true
-figma: https://www.figma.com/file/LLHB9oIQ6DmOHQNVbGYrH4/Popovers
+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.
 ---
 <section class="stacks-section">

docs/product/components/select.html

@@ -2,7 +2,7 @@
 layout: page
 title: Select
 razor: https://razor.stackoverflow.design/components/select
-figma: https://www.figma.com/file/GQB9GupHvraMioGRPbwKhO/Form-Elements
+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.
 ---
 <section class="stacks-section">

docs/product/components/tags.html

@@ -2,7 +2,7 @@
 layout: page
 title: Tags
 razor: https://razor.stackoverflow.design/components/post-tag
-figma: https://www.figma.com/file/pjrkFIbNIOWb8zhdJB7Aon/Tags
+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
 ---
 <section class="stacks-section">

docs/product/components/textarea.html

@@ -2,7 +2,7 @@
 layout: page
 title: Textarea
 razor: https://razor.stackoverflow.design/components/textarea
-figma: https://www.figma.com/file/GQB9GupHvraMioGRPbwKhO/Form-Elements
+figma: https://svelte.stackoverflow.design/figma/form-elements
 description: Multi-line inputs used by users to enter longer text portions.
 ---
 <section id="inputs" class="stacks-section">

docs/product/components/toggle-switch.html

@@ -2,7 +2,7 @@
 layout: page
 title: Toggle switch
 razor: https://razor.stackoverflow.design/components/toggle
-figma: https://www.figma.com/file/DhmEdwQjfSugeNAfDSnbJa/Toggle-Switches
+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.
 ---
 <section class="stacks-section">

docs/product/foundation/color-fundamentals.html

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Color fundamentals
-figma: https://www.figma.com/file/cCU6A56sHwZluraDoyg5o7/Colors%3A-Accessible-Color-Palette?type=design&node-id=1303-30963&mode=design&t=x8ZAgttWTSCnEvjL-0
+figma: https://svelte.stackoverflow.design/figma/colors
 description: Color is used distinguish our brand, convey meaning, and invoke emotions. A color palette ensures a familiar and consistent experience across our products.
 hide-menu: true
 ---
@@ -380,4 +380,4 @@
         </ol>
         <p class="stacks-copy">There are also <a class="s-link" href="{{ "/product/develop/conditional-classes#dark-mode" | url }}">conditional classes</a> that can be applied to override assumed dark mode colors, force light mode, or to force dark mode. Forcing modes can be good for previews in admin-only situations.</p>
     </section>
-</div>
+</div>

docs/product/foundation/colors.html

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Colors
-figma: https://www.figma.com/file/cCU6A56sHwZluraDoyg5o7/Colors%3A-Accessible-Color-Palette?type=design&node-id=1303-30963&mode=design&t=x8ZAgttWTSCnEvjL-0
+figma: https://svelte.stackoverflow.design/figma/colors
 description: To avoid specifying color values by hand, we’ve included a robust set of color variables. For maintainability, please use these instead of hardcoding color values.
 ---
 

docs/product/foundation/icons.html

@@ -2,7 +2,7 @@
 layout: page
 title: Icons
 razor: https://razor.stackoverflow.design/components/icon
-figma: https://www.figma.com/file/NxAqQAi9i5XsrZSm1WYj6tsM/Icons-and-Spot-Illustrations
+figma: https://svelte.stackoverflow.design/figma/icons
 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.
 ---
 

docs/product/foundation/spots.html

@@ -2,7 +2,7 @@
 layout: page
 title: Spot illustrations
 razor: https://razor.stackoverflow.design/components/spot
-figma: https://www.figma.com/file/NxAqQAi9i5XsrZSm1WYj6tsM/Icons-and-Spot-Illustrations
+figma: https://svelte.stackoverflow.design/figma/icons
 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.
 ---
 

docs/product/foundation/typography.html

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Typography
-figma: https://www.figma.com/file/x5Q2TKTuTcFhK1FIeCq9dk/Typography
+figma: https://svelte.stackoverflow.design/figma/typography
 description: Stacks provides atomic classes to override default styling of typography. Change typographic weights, styles, and alignment with these atomic styles.
 ---
 <section class="stacks-section">