tide-design-system 2.5.17 → 2.5.19

package/README.md

@@ -1,25 +1,25 @@
 # TIDE Design System
-TIDE (*T*rader *I*nteractive *D*esign and *E*ngineering) is a design system created and maintained by the TIDE Design System product group at Trader Interactive. It was initially developed for use in the `marketplace` repository, but is available for integration into other Trader Interactive projects, subject to the following technical restrictions:
+TIDE (***T***rader ***I***nteractive ***D***esign and ***E***ngineering) is a design system created and maintained by the TIDE Design System product group at Trader Interactive. It was initially developed for use in the `marketplace` repository, but is available for integration into other Trader Interactive projects, subject to the following technical restrictions:
 
 1. CSS utilities can be leveraged by any Node-compiled project.
 2. Types can be leveraged by any TypeScript project.
 3. Basic components can be leveraged by any Vue 3 project.
 
 ## Guides
-- [Figma](./docs/figma.md): Explore `TIDE` standards, tokens, and components as maintained by the `TIDE team`.
-- [Storybook](./docs/storybook.md): Explore `TIDE` utilities and components to generate working code implementations.
-- [Marketplace Style Guides](./docs/style-guide.md): Explore `TIDE` utilities and components in a realm-specific production environment.
-- [Full Integration (Vue 3)](./docs/integration-full.md): Leverage `TIDE` utilities and components from a compatible `consumer repository`.
-- [Partial Integration (CSS only)](./docs/integration-partial.md): Leverage `TIDE` utilties from any `consumer repository`.
-- [Migration](./docs/development.md): Replace local structures with `TIDE` utilities and components.
-- [Workflows](./docs/workflows.md): Collaborate with the `TIDE team` on feature enhancements.
-- [Development](./docs/development.md): Contribute to the `tide-design-system` NPM package.
-- [Upgrade Guide](./docs/upgrading.md): Upgrade versions of the `tide-design-system` npm package
-- [Figma Token Cheatsheet](./docs/token-cheatsheet.md): Remember how to implement Figma tokens from code
-- [Configuration](./docs/configuation.md): Globally set config values for your project for custom behaviors.
-- [Layout Grid Utility](./docs/grid-layout.md): Lightweight CSS Grid for consistent page alignment.
-- [Forms and inputs](./docs/forms.md): Guide to using Tide Forms and Input Components.
-- [Images](./docs/images.md): Guide to using Tide Image components.
+- [Figma](/docs/figma.md): Explore `TIDE` standards, tokens, and components as maintained by the `TIDE team`.
+- [Storybook](/docs/storybook.md): Explore `TIDE` utilities and components to generate working code implementations.
+- [Marketplace Style Guides](/docs/style-guide.md): Explore `TIDE` utilities and components in a realm-specific production environment.
+- [Full Integration (Vue 3)](/docs/integration-full.md): Leverage `TIDE` utilities and components from a compatible `consumer repository`.
+- [Partial Integration (CSS only)](/docs/integration-partial.md): Leverage `TIDE` utilities from any `consumer repository`.
+- [Migration](/docs/migration.md): Replace local structures with `TIDE` utilities and components.
+- [Workflows](/docs/workflows.md): Collaborate with the `TIDE team` on feature enhancements.
+- [Development](/docs/development.md): Contribute to the `tide-design-system` NPM package.
+- [Upgrade Guide](/docs/upgrading.md): Upgrade versions of the `tide-design-system` npm package
+- [Figma Token Cheatsheet](/docs/token-cheatsheet.md): Remember how to implement Figma tokens from code
+- [Configuration](/docs/configuration.md): Globally set config values for your project for custom behaviors.
+- [Layout Grid Utility](/docs/grid-layout.md): Lightweight CSS Grid for consistent page alignment.
+- [Forms and inputs](/docs/forms.md): Guide to using Tide Forms and Input Components.
+- [Images](/docs/images.md): Guide to using Tide Image components.
 
 ## Glossary
 - **TIDE**: the design system itself - a series of conceptual, agreed-upon standards and guidelines meant to emphasize a consistent, scalable user experience across the suite of Trader Interactive websites

package/dist/chunks/logo-rvt.js

@@ -0,0 +1,16 @@
+import { openBlock as l, createElementBlock as e, createStaticVNode as h } from "vue";
+const a = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 55 32"
+};
+function c(o, t) {
+  return l(), e("svg", a, [...t[0] || (t[0] = [
+    h('<g clip-path="url(#a)"><path fill="#c50000" d="M21.5 0c18.76 0 33.26 11.7 33.24 20.65C54.72 29.3 37.98 32 28 32 17.78 32 0 28.6 0 19.39 0 10.36 11.9 4.64 12.46 4.7c.66.08.22.49-.22 1.33-.3.55.04.98-.68 1.53-.37.28-10.8 3.87-10.8 11.76 0 8.43 16.84 10.4 26.6 10.4 9.28 0 26.84-1.09 26.61-9.53-.2-7.64-13.53-17.93-31.71-17.93-10.73 0-13.54 2.72-15.1 2.92-.9.12-.76-.37-1.6-.39-.95-.02-1.46-.2-1.46-.46C4.1 2.94 12.98 0 21.5 0m-7.75 12.34q1.9 0 2.93.26 1.01.27 1.63.98.63.7.62 1.73 0 .89-.47 1.54a3.4 3.4 0 0 1-1.31 1.04q-.53.27-1.45.43.74.2 1.07.4.24.12.67.56.43.42.57.66l2 3.1h-4.67l-2.21-3.27q-.42-.63-.75-.82-.45-.25-1.02-.25H11v4.34H6.84v-10.7zm9.95 0 3.01 7.7 2.97-7.7h4.2l-4.97 10.7h-4.48l-5.06-10.7zM11 14.5v2.18h1.75q.28 0 1.1-.14.41-.07.66-.34a1 1 0 0 0 .27-.62.9.9 0 0 0-.42-.8q-.41-.27-1.54-.28z"></path><path fill="#1c1c1c" d="M34.2 14.98h4.23l-3.73 8.06h4.14l3.73-8.06h4.22l1.23-2.64H35.43z"></path></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h55v32H0z"></path></clipPath></defs>', 2)
+  ])]);
+}
+const r = { render: c };
+export {
+  r as default,
+  c as render
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9nby1ydnQuanMiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9hc3NldHMvc3ZnL2JyYW5kaW5nL2xvZ28vbG9nby1ydnQuc3ZnP2NvbXBvbmVudCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjcmVhdGVFbGVtZW50Vk5vZGUgYXMgX2NyZWF0ZUVsZW1lbnRWTm9kZSwgb3BlbkJsb2NrIGFzIF9vcGVuQmxvY2ssIGNyZWF0ZUVsZW1lbnRCbG9jayBhcyBfY3JlYXRlRWxlbWVudEJsb2NrLCBjcmVhdGVTdGF0aWNWTm9kZSBhcyBfY3JlYXRlU3RhdGljVk5vZGUgfSBmcm9tIFwidnVlXCJcblxuY29uc3QgX2hvaXN0ZWRfMSA9IHtcbiAgeG1sbnM6IFwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIixcbiAgdmlld0JveDogXCIwIDAgNTUgMzJcIlxufVxuXG5leHBvcnQgZnVuY3Rpb24gcmVuZGVyKF9jdHgsIF9jYWNoZSkge1xuICByZXR1cm4gKF9vcGVuQmxvY2soKSwgX2NyZWF0ZUVsZW1lbnRCbG9jayhcInN2Z1wiLCBfaG9pc3RlZF8xLCBbLi4uKF9jYWNoZVswXSB8fCAoX2NhY2hlWzBdID0gW1xuICAgIF9jcmVhdGVTdGF0aWNWTm9kZShcIjxnIGNsaXAtcGF0aD1cXFwidXJsKCNhKVxcXCI+PHBhdGggZmlsbD1cXFwiI2M1MDAwMFxcXCIgZD1cXFwiTTIxLjUgMGMxOC43NiAwIDMzLjI2IDExLjcgMzMuMjQgMjAuNjVDNTQuNzIgMjkuMyAzNy45OCAzMiAyOCAzMiAxNy43OCAzMiAwIDI4LjYgMCAxOS4zOSAwIDEwLjM2IDExLjkgNC42NCAxMi40NiA0LjdjLjY2LjA4LjIyLjQ5LS4yMiAxLjMzLS4zLjU1LjA0Ljk4LS42OCAxLjUzLS4zNy4yOC0xMC44IDMuODctMTAuOCAxMS43NiAwIDguNDMgMTYuODQgMTAuNCAyNi42IDEwLjQgOS4yOCAwIDI2Ljg0LTEuMDkgMjYuNjEtOS41My0uMi03LjY0LTEzLjUzLTE3LjkzLTMxLjcxLTE3LjkzLTEwLjczIDAtMTMuNTQgMi43Mi0xNS4xIDIuOTItLjkuMTItLjc2LS4zNy0xLjYtLjM5LS45NS0uMDItMS40Ni0uMi0xLjQ2LS40NkM0LjEgMi45NCAxMi45OCAwIDIxLjUgMG0tNy43NSAxMi4zNHExLjkgMCAyLjkzLjI2IDEuMDEuMjcgMS42My45OC42My43LjYyIDEuNzMgMCAuODktLjQ3IDEuNTRhMy40IDMuNCAwIDAgMS0xLjMxIDEuMDRxLS41My4yNy0xLjQ1LjQzLjc0LjIgMS4wNy40LjI0LjEyLjY3LjU2LjQzLjQyLjU3LjY2bDIgMy4xaC00LjY3bC0yLjIxLTMuMjdxLS40Mi0uNjMtLjc1LS44Mi0uNDUtLjI1LTEuMDItLjI1SDExdjQuMzRINi44NHYtMTAuN3ptOS45NSAwIDMuMDEgNy43IDIuOTctNy43aDQuMmwtNC45NyAxMC43aC00LjQ4bC01LjA2LTEwLjd6TTExIDE0LjV2Mi4xOGgxLjc1cS4yOCAwIDEuMS0uMTQuNDEtLjA3LjY2LS4zNGExIDEgMCAwIDAgLjI3LS42Mi45LjkgMCAwIDAtLjQyLS44cS0uNDEtLjI3LTEuNTQtLjI4elxcXCI+PC9wYXRoPjxwYXRoIGZpbGw9XFxcIiMxYzFjMWNcXFwiIGQ9XFxcIk0zNC4yIDE0Ljk4aDQuMjNsLTMuNzMgOC4wNmg0LjE0bDMuNzMtOC4wNmg0LjIybDEuMjMtMi42NEgzNS40M3pcXFwiPjwvcGF0aD48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPVxcXCJhXFxcIj48cGF0aCBmaWxsPVxcXCIjZmZmXFxcIiBkPVxcXCJNMCAwaDU1djMySDB6XFxcIj48L3BhdGg+PC9jbGlwUGF0aD48L2RlZnM+XCIsIDIpXG4gIF0pKV0pKVxufVxuZXhwb3J0IGRlZmF1bHQgeyByZW5kZXI6IHJlbmRlciB9Il0sIm5hbWVzIjpbIl9ob2lzdGVkXzEiLCJyZW5kZXIiLCJfY3R4IiwiX2NhY2hlIiwiX29wZW5CbG9jayIsIl9jcmVhdGVFbGVtZW50QmxvY2siLCJfY3JlYXRlU3RhdGljVk5vZGUiLCJsb2dvUnZ0Il0sIm1hcHBpbmdzIjoiO0FBRUEsTUFBTUEsSUFBYTtBQUFBLEVBQ2pCLE9BQU87QUFBQSxFQUNQLFNBQVM7QUFDWDtBQUVPLFNBQVNDLEVBQU9DLEdBQU1DLEdBQVE7QUFDbkMsU0FBUUMsRUFBVSxHQUFJQyxFQUFvQixPQUFPTCxHQUFZLENBQUMsR0FBSUcsRUFBTyxDQUFDLE1BQU1BLEVBQU8sQ0FBQyxJQUFJO0FBQUEsSUFDMUZHLEVBQW1CLDArQkFBMC9CLENBQUM7QUFBQSxFQUNsaEMsRUFBSyxDQUFDO0FBQ047QUFDQSxNQUFBQyxJQUFlLEVBQUUsUUFBUU4sRUFBTTsifQ==

package/dist/chunks/mark-rvt.js

@@ -0,0 +1,18 @@
+import { openBlock as l, createElementBlock as e, createStaticVNode as h } from "vue";
+const a = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "32",
+  height: "32",
+  viewBox: "0 0 32 32"
+};
+function c(d, t) {
+  return l(), e("svg", a, [...t[0] || (t[0] = [
+    h('<g clip-path="url(#a)"><path fill="#c50000" fill-rule="evenodd" d="M16.37 24.87c5.83 0 15.62-1.6 15.63-6.65.01-5.24-8.46-12.09-19.43-12.09C7.59 6.13 2.4 7.86 2.4 8.68q.01.23.85.27c.49 0 .41.3.94.22.9-.11 2.55-1.7 8.82-1.7 10.63 0 18.42 6.01 18.54 10.49.13 4.94-10.13 5.58-15.55 5.58-5.7 0-15.55-1.16-15.55-6.1 0-4.61 6.1-6.71 6.3-6.87.43-.32.24-.58.4-.9.26-.5.52-.73.14-.78-.33-.04-7.29 3.3-7.29 8.6 0 5.39 10.4 7.38 16.37 7.38" clip-rule="evenodd"></path><path fill="#c50000" d="M6.43 19.9v-2.54h.21q.34 0 .6.14.18.12.43.49l1.3 1.9h2.73l-1.17-1.8q-.08-.15-.34-.4-.26-.24-.38-.32a3 3 0 0 0-.63-.23q.54-.1.85-.25.48-.23.76-.62.28-.37.28-.9 0-.6-.36-1.01a2 2 0 0 0-.96-.57q-.6-.15-1.71-.15H4v6.26zm0-5H7.5q.68 0 .9.17.25.15.25.46 0 .2-.15.37-.15.15-.4.2a5 5 0 0 1-.64.08H6.43zm7.85 5h2.62l2.9-6.26h-2.45l-1.73 4.5-1.77-4.5h-2.53z"></path><path fill="#1c1c1c" d="M20 15.18h2.47l-2.18 4.72h2.42l2.18-4.72h2.47l.71-1.54h-7.36z"></path></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z"></path></clipPath></defs>', 2)
+  ])]);
+}
+const p = { render: c };
+export {
+  p as default,
+  c as render
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFyay1ydnQuanMiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9hc3NldHMvc3ZnL2JyYW5kaW5nL21hcmsvbWFyay1ydnQuc3ZnP2NvbXBvbmVudCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjcmVhdGVFbGVtZW50Vk5vZGUgYXMgX2NyZWF0ZUVsZW1lbnRWTm9kZSwgb3BlbkJsb2NrIGFzIF9vcGVuQmxvY2ssIGNyZWF0ZUVsZW1lbnRCbG9jayBhcyBfY3JlYXRlRWxlbWVudEJsb2NrLCBjcmVhdGVTdGF0aWNWTm9kZSBhcyBfY3JlYXRlU3RhdGljVk5vZGUgfSBmcm9tIFwidnVlXCJcblxuY29uc3QgX2hvaXN0ZWRfMSA9IHtcbiAgeG1sbnM6IFwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIixcbiAgd2lkdGg6IFwiMzJcIixcbiAgaGVpZ2h0OiBcIjMyXCIsXG4gIHZpZXdCb3g6IFwiMCAwIDMyIDMyXCJcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHJlbmRlcihfY3R4LCBfY2FjaGUpIHtcbiAgcmV0dXJuIChfb3BlbkJsb2NrKCksIF9jcmVhdGVFbGVtZW50QmxvY2soXCJzdmdcIiwgX2hvaXN0ZWRfMSwgWy4uLihfY2FjaGVbMF0gfHwgKF9jYWNoZVswXSA9IFtcbiAgICBfY3JlYXRlU3RhdGljVk5vZGUoXCI8ZyBjbGlwLXBhdGg9XFxcInVybCgjYSlcXFwiPjxwYXRoIGZpbGw9XFxcIiNjNTAwMDBcXFwiIGZpbGwtcnVsZT1cXFwiZXZlbm9kZFxcXCIgZD1cXFwiTTE2LjM3IDI0Ljg3YzUuODMgMCAxNS42Mi0xLjYgMTUuNjMtNi42NS4wMS01LjI0LTguNDYtMTIuMDktMTkuNDMtMTIuMDlDNy41OSA2LjEzIDIuNCA3Ljg2IDIuNCA4LjY4cS4wMS4yMy44NS4yN2MuNDkgMCAuNDEuMy45NC4yMi45LS4xMSAyLjU1LTEuNyA4LjgyLTEuNyAxMC42MyAwIDE4LjQyIDYuMDEgMTguNTQgMTAuNDkuMTMgNC45NC0xMC4xMyA1LjU4LTE1LjU1IDUuNTgtNS43IDAtMTUuNTUtMS4xNi0xNS41NS02LjEgMC00LjYxIDYuMS02LjcxIDYuMy02Ljg3LjQzLS4zMi4yNC0uNTguNC0uOS4yNi0uNS41Mi0uNzMuMTQtLjc4LS4zMy0uMDQtNy4yOSAzLjMtNy4yOSA4LjYgMCA1LjM5IDEwLjQgNy4zOCAxNi4zNyA3LjM4XFxcIiBjbGlwLXJ1bGU9XFxcImV2ZW5vZGRcXFwiPjwvcGF0aD48cGF0aCBmaWxsPVxcXCIjYzUwMDAwXFxcIiBkPVxcXCJNNi40MyAxOS45di0yLjU0aC4yMXEuMzQgMCAuNi4xNC4xOC4xMi40My40OWwxLjMgMS45aDIuNzNsLTEuMTctMS44cS0uMDgtLjE1LS4zNC0uNC0uMjYtLjI0LS4zOC0uMzJhMyAzIDAgMCAwLS42My0uMjNxLjU0LS4xLjg1LS4yNS40OC0uMjMuNzYtLjYyLjI4LS4zNy4yOC0uOSAwLS42LS4zNi0xLjAxYTIgMiAwIDAgMC0uOTYtLjU3cS0uNi0uMTUtMS43MS0uMTVINHY2LjI2em0wLTVINy41cS42OCAwIC45LjE3LjI1LjE1LjI1LjQ2IDAgLjItLjE1LjM3LS4xNS4xNS0uNC4yYTUgNSAwIDAgMS0uNjQuMDhINi40M3ptNy44NSA1aDIuNjJsMi45LTYuMjZoLTIuNDVsLTEuNzMgNC41LTEuNzctNC41aC0yLjUzelxcXCI+PC9wYXRoPjxwYXRoIGZpbGw9XFxcIiMxYzFjMWNcXFwiIGQ9XFxcIk0yMCAxNS4xOGgyLjQ3bC0yLjE4IDQuNzJoMi40MmwyLjE4LTQuNzJoMi40N2wuNzEtMS41NGgtNy4zNnpcXFwiPjwvcGF0aD48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPVxcXCJhXFxcIj48cGF0aCBmaWxsPVxcXCIjZmZmXFxcIiBkPVxcXCJNMCAwaDMydjMySDB6XFxcIj48L3BhdGg+PC9jbGlwUGF0aD48L2RlZnM+XCIsIDIpXG4gIF0pKV0pKVxufVxuZXhwb3J0IGRlZmF1bHQgeyByZW5kZXI6IHJlbmRlciB9Il0sIm5hbWVzIjpbIl9ob2lzdGVkXzEiLCJyZW5kZXIiLCJfY3R4IiwiX2NhY2hlIiwiX29wZW5CbG9jayIsIl9jcmVhdGVFbGVtZW50QmxvY2siLCJfY3JlYXRlU3RhdGljVk5vZGUiLCJtYXJrUnZ0Il0sIm1hcHBpbmdzIjoiO0FBRUEsTUFBTUEsSUFBYTtBQUFBLEVBQ2pCLE9BQU87QUFBQSxFQUNQLE9BQU87QUFBQSxFQUNQLFFBQVE7QUFBQSxFQUNSLFNBQVM7QUFDWDtBQUVPLFNBQVNDLEVBQU9DLEdBQU1DLEdBQVE7QUFDbkMsU0FBUUMsRUFBVSxHQUFJQyxFQUFvQixPQUFPTCxHQUFZLENBQUMsR0FBSUcsRUFBTyxDQUFDLE1BQU1BLEVBQU8sQ0FBQyxJQUFJO0FBQUEsSUFDMUZHLEVBQW1CLDgvQkFBc2hDLENBQUM7QUFBQSxFQUM5aUMsRUFBSyxDQUFDO0FBQ047QUFDQSxNQUFBQyxJQUFlLEVBQUUsUUFBUU4sRUFBTTsifQ==

package/dist/css/realm/rvt.css

@@ -0,0 +1,23 @@
+/* RV Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-realm-red:       #C50000;
+  --tide-realm-dark-red:  #7A0000;
+  --tide-realm-pink:      #FFEBEB;
+
+  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
+  --tide-primary:        var(--tide-realm-red);
+  --tide-surface-accent: var(--tide-realm-pink);
+  --tide-surface-brand:  #002344;
+
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-dark-red);
+
+  --tide-gradient-bottom-right-color: var(--tide-realm-red);
+  --tide-gradient-top-color: var(--tide-realm-pink);
+  --tide-gradient-bottom-left-color: var(--tide-realm-dark-red);
+
+  --tide-gradient-bottom-right-opacity: 15%;
+  --tide-gradient-top-opacity: 42%;
+  --tide-gradient-bottom-left-opacity: 36%;
+}

package/dist/css/storybook.css

@@ -1,6 +1,8 @@
 /* Styles used for Storybook demonstration purposes only. Not bundled into distribution package. */
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
 
+strong {font-weight: bold;}
+
 .sb-border-black      {border: 1px solid #000000;}
 .sb-border-blue       {border: 1px solid #0000FF;}
 .sb-border-blue-light {border: 1px solid #CCDEF3;}

package/dist/css/utilities-base.css

@@ -134,16 +134,6 @@
 .tide-border-success {border-color: var(--tide-success-border);}
 .tide-border-warning {border-color: var(--tide-warning-border);}
 
-.tide-border-blue   {border-color: var(--tide-blue-border);}
-.tide-border-green  {border-color: var(--tide-green-border);}
-.tide-border-lime   {border-color: var(--tide-lime-border);}
-.tide-border-orange {border-color: var(--tide-orange-border);}
-.tide-border-purple {border-color: var(--tide-purple-border);}
-.tide-border-red    {border-color: var(--tide-red-border);}
-.tide-border-salmon {border-color: var(--tide-salmon-border);}
-.tide-border-teal   {border-color: var(--tide-teal-border);}
-.tide-border-yellow {border-color: var(--tide-yellow-border);}
-
 /* Border Width */
 .tide-border-1,
 .tide-border-2,
@@ -283,16 +273,6 @@
 .tide-bg-surface-success {background-color: var(--tide-success-surface);}
 .tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
 
-.tide-bg-surface-blue   {background-color: var(--tide-blue-surface);}
-.tide-bg-surface-green  {background-color: var(--tide-green-surface);}
-.tide-bg-surface-lime   {background-color: var(--tide-lime-surface);}
-.tide-bg-surface-orange {background-color: var(--tide-orange-surface);}
-.tide-bg-surface-purple {background-color: var(--tide-purple-surface);}
-.tide-bg-surface-red    {background-color: var(--tide-red-surface);}
-.tide-bg-surface-salmon {background-color: var(--tide-salmon-surface);}
-.tide-bg-surface-teal   {background-color: var(--tide-teal-surface);}
-.tide-bg-surface-yellow {background-color: var(--tide-yellow-surface);}
-
 .tide-transparent-100 {background-color: var(--tide-transparent-100);}
 .tide-transparent-200 {background-color: var(--tide-transparent-200);}
 .tide-transparent-300 {background-color: var(--tide-transparent-300);}
@@ -333,27 +313,6 @@
 .tide-font-success {color: var(--tide-success-primary);}
 .tide-font-warning {color: var(--tide-warning-primary);}
 
-.tide-font-blue   {color: var(--tide-blue-on-surface);}
-.tide-font-green  {color: var(--tide-green-on-surface);}
-.tide-font-lime   {color: var(--tide-lime-on-surface);}
-.tide-font-orange {color: var(--tide-orange-on-surface);}
-.tide-font-purple {color: var(--tide-purple-on-surface);}
-.tide-font-red    {color: var(--tide-red-on-surface);}
-.tide-font-salmon {color: var(--tide-salmon-on-surface);}
-.tide-font-teal   {color: var(--tide-teal-on-surface);}
-.tide-font-yellow {color: var(--tide-yellow-on-surface);}
-
-/* Badge icon colors only */
-.tide-font-primary-blue   {color: var(--tide-blue-primary);}
-.tide-font-primary-green  {color: var(--tide-green-primary);}
-.tide-font-primary-lime   {color: var(--tide-lime-primary);}
-.tide-font-primary-orange {color: var(--tide-orange-primary);}
-.tide-font-primary-purple {color: var(--tide-purple-primary);}
-.tide-font-primary-red    {color: var(--tide-red-primary);}
-.tide-font-primary-salmon {color: var(--tide-salmon-primary);}
-.tide-font-primary-teal   {color: var(--tide-teal-primary);}
-.tide-font-primary-yellow {color: var(--tide-yellow-primary);}
-
 /* Font Size */
 .tide-font-10 {font-size: var(--tide-font-10);}
 .tide-font-12 {font-size: var(--tide-font-12);}

package/dist/css/utilities-responsive.css

@@ -135,16 +135,6 @@
 	.sm-tide-border-success {border-color: var(--tide-success-border);}
 	.sm-tide-border-warning {border-color: var(--tide-warning-border);}
 
-	.sm-tide-border-blue   {border-color: var(--tide-blue-border);}
-	.sm-tide-border-green  {border-color: var(--tide-green-border);}
-	.sm-tide-border-lime   {border-color: var(--tide-lime-border);}
-	.sm-tide-border-orange {border-color: var(--tide-orange-border);}
-	.sm-tide-border-purple {border-color: var(--tide-purple-border);}
-	.sm-tide-border-red    {border-color: var(--tide-red-border);}
-	.sm-tide-border-salmon {border-color: var(--tide-salmon-border);}
-	.sm-tide-border-teal   {border-color: var(--tide-teal-border);}
-	.sm-tide-border-yellow {border-color: var(--tide-yellow-border);}
-
 	/* Border Width */
 	.sm-tide-border-1,
 	.sm-tide-border-2,
@@ -284,16 +274,6 @@
 	.sm-tide-bg-surface-success {background-color: var(--tide-success-surface);}
 	.sm-tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
 
-	.sm-tide-bg-surface-blue   {background-color: var(--tide-blue-surface);}
-	.sm-tide-bg-surface-green  {background-color: var(--tide-green-surface);}
-	.sm-tide-bg-surface-lime   {background-color: var(--tide-lime-surface);}
-	.sm-tide-bg-surface-orange {background-color: var(--tide-orange-surface);}
-	.sm-tide-bg-surface-purple {background-color: var(--tide-purple-surface);}
-	.sm-tide-bg-surface-red    {background-color: var(--tide-red-surface);}
-	.sm-tide-bg-surface-salmon {background-color: var(--tide-salmon-surface);}
-	.sm-tide-bg-surface-teal   {background-color: var(--tide-teal-surface);}
-	.sm-tide-bg-surface-yellow {background-color: var(--tide-yellow-surface);}
-
 	.sm-tide-transparent-100 {background-color: var(--tide-transparent-100);}
 	.sm-tide-transparent-200 {background-color: var(--tide-transparent-200);}
 	.sm-tide-transparent-300 {background-color: var(--tide-transparent-300);}
@@ -334,27 +314,6 @@
 	.sm-tide-font-success {color: var(--tide-success-primary);}
 	.sm-tide-font-warning {color: var(--tide-warning-primary);}
 
-	.sm-tide-font-blue   {color: var(--tide-blue-on-surface);}
-	.sm-tide-font-green  {color: var(--tide-green-on-surface);}
-	.sm-tide-font-lime   {color: var(--tide-lime-on-surface);}
-	.sm-tide-font-orange {color: var(--tide-orange-on-surface);}
-	.sm-tide-font-purple {color: var(--tide-purple-on-surface);}
-	.sm-tide-font-red    {color: var(--tide-red-on-surface);}
-	.sm-tide-font-salmon {color: var(--tide-salmon-on-surface);}
-	.sm-tide-font-teal   {color: var(--tide-teal-on-surface);}
-	.sm-tide-font-yellow {color: var(--tide-yellow-on-surface);}
-
-	/* Badge icon colors only */
-	.sm-tide-font-primary-blue   {color: var(--tide-blue-primary);}
-	.sm-tide-font-primary-green  {color: var(--tide-green-primary);}
-	.sm-tide-font-primary-lime   {color: var(--tide-lime-primary);}
-	.sm-tide-font-primary-orange {color: var(--tide-orange-primary);}
-	.sm-tide-font-primary-purple {color: var(--tide-purple-primary);}
-	.sm-tide-font-primary-red    {color: var(--tide-red-primary);}
-	.sm-tide-font-primary-salmon {color: var(--tide-salmon-primary);}
-	.sm-tide-font-primary-teal   {color: var(--tide-teal-primary);}
-	.sm-tide-font-primary-yellow {color: var(--tide-yellow-primary);}
-
 	/* Font Size */
 	.sm-tide-font-10 {font-size: var(--tide-font-10);}
 	.sm-tide-font-12 {font-size: var(--tide-font-12);}
@@ -712,16 +671,6 @@
 	.md-tide-border-success {border-color: var(--tide-success-border);}
 	.md-tide-border-warning {border-color: var(--tide-warning-border);}
 
-	.md-tide-border-blue   {border-color: var(--tide-blue-border);}
-	.md-tide-border-green  {border-color: var(--tide-green-border);}
-	.md-tide-border-lime   {border-color: var(--tide-lime-border);}
-	.md-tide-border-orange {border-color: var(--tide-orange-border);}
-	.md-tide-border-purple {border-color: var(--tide-purple-border);}
-	.md-tide-border-red    {border-color: var(--tide-red-border);}
-	.md-tide-border-salmon {border-color: var(--tide-salmon-border);}
-	.md-tide-border-teal   {border-color: var(--tide-teal-border);}
-	.md-tide-border-yellow {border-color: var(--tide-yellow-border);}
-
 	/* Border Width */
 	.md-tide-border-1,
 	.md-tide-border-2,
@@ -861,16 +810,6 @@
 	.md-tide-bg-surface-success {background-color: var(--tide-success-surface);}
 	.md-tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
 
-	.md-tide-bg-surface-blue   {background-color: var(--tide-blue-surface);}
-	.md-tide-bg-surface-green  {background-color: var(--tide-green-surface);}
-	.md-tide-bg-surface-lime   {background-color: var(--tide-lime-surface);}
-	.md-tide-bg-surface-orange {background-color: var(--tide-orange-surface);}
-	.md-tide-bg-surface-purple {background-color: var(--tide-purple-surface);}
-	.md-tide-bg-surface-red    {background-color: var(--tide-red-surface);}
-	.md-tide-bg-surface-salmon {background-color: var(--tide-salmon-surface);}
-	.md-tide-bg-surface-teal   {background-color: var(--tide-teal-surface);}
-	.md-tide-bg-surface-yellow {background-color: var(--tide-yellow-surface);}
-
 	.md-tide-transparent-100 {background-color: var(--tide-transparent-100);}
 	.md-tide-transparent-200 {background-color: var(--tide-transparent-200);}
 	.md-tide-transparent-300 {background-color: var(--tide-transparent-300);}
@@ -911,27 +850,6 @@
 	.md-tide-font-success {color: var(--tide-success-primary);}
 	.md-tide-font-warning {color: var(--tide-warning-primary);}
 
-	.md-tide-font-blue   {color: var(--tide-blue-on-surface);}
-	.md-tide-font-green  {color: var(--tide-green-on-surface);}
-	.md-tide-font-lime   {color: var(--tide-lime-on-surface);}
-	.md-tide-font-orange {color: var(--tide-orange-on-surface);}
-	.md-tide-font-purple {color: var(--tide-purple-on-surface);}
-	.md-tide-font-red    {color: var(--tide-red-on-surface);}
-	.md-tide-font-salmon {color: var(--tide-salmon-on-surface);}
-	.md-tide-font-teal   {color: var(--tide-teal-on-surface);}
-	.md-tide-font-yellow {color: var(--tide-yellow-on-surface);}
-
-	/* Badge icon colors only */
-	.md-tide-font-primary-blue   {color: var(--tide-blue-primary);}
-	.md-tide-font-primary-green  {color: var(--tide-green-primary);}
-	.md-tide-font-primary-lime   {color: var(--tide-lime-primary);}
-	.md-tide-font-primary-orange {color: var(--tide-orange-primary);}
-	.md-tide-font-primary-purple {color: var(--tide-purple-primary);}
-	.md-tide-font-primary-red    {color: var(--tide-red-primary);}
-	.md-tide-font-primary-salmon {color: var(--tide-salmon-primary);}
-	.md-tide-font-primary-teal   {color: var(--tide-teal-primary);}
-	.md-tide-font-primary-yellow {color: var(--tide-yellow-primary);}
-
 	/* Font Size */
 	.md-tide-font-10 {font-size: var(--tide-font-10);}
 	.md-tide-font-12 {font-size: var(--tide-font-12);}
@@ -1289,16 +1207,6 @@
 	.lg-tide-border-success {border-color: var(--tide-success-border);}
 	.lg-tide-border-warning {border-color: var(--tide-warning-border);}
 
-	.lg-tide-border-blue   {border-color: var(--tide-blue-border);}
-	.lg-tide-border-green  {border-color: var(--tide-green-border);}
-	.lg-tide-border-lime   {border-color: var(--tide-lime-border);}
-	.lg-tide-border-orange {border-color: var(--tide-orange-border);}
-	.lg-tide-border-purple {border-color: var(--tide-purple-border);}
-	.lg-tide-border-red    {border-color: var(--tide-red-border);}
-	.lg-tide-border-salmon {border-color: var(--tide-salmon-border);}
-	.lg-tide-border-teal   {border-color: var(--tide-teal-border);}
-	.lg-tide-border-yellow {border-color: var(--tide-yellow-border);}
-
 	/* Border Width */
 	.lg-tide-border-1,
 	.lg-tide-border-2,
@@ -1438,16 +1346,6 @@
 	.lg-tide-bg-surface-success {background-color: var(--tide-success-surface);}
 	.lg-tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
 
-	.lg-tide-bg-surface-blue   {background-color: var(--tide-blue-surface);}
-	.lg-tide-bg-surface-green  {background-color: var(--tide-green-surface);}
-	.lg-tide-bg-surface-lime   {background-color: var(--tide-lime-surface);}
-	.lg-tide-bg-surface-orange {background-color: var(--tide-orange-surface);}
-	.lg-tide-bg-surface-purple {background-color: var(--tide-purple-surface);}
-	.lg-tide-bg-surface-red    {background-color: var(--tide-red-surface);}
-	.lg-tide-bg-surface-salmon {background-color: var(--tide-salmon-surface);}
-	.lg-tide-bg-surface-teal   {background-color: var(--tide-teal-surface);}
-	.lg-tide-bg-surface-yellow {background-color: var(--tide-yellow-surface);}
-
 	.lg-tide-transparent-100 {background-color: var(--tide-transparent-100);}
 	.lg-tide-transparent-200 {background-color: var(--tide-transparent-200);}
 	.lg-tide-transparent-300 {background-color: var(--tide-transparent-300);}
@@ -1488,27 +1386,6 @@
 	.lg-tide-font-success {color: var(--tide-success-primary);}
 	.lg-tide-font-warning {color: var(--tide-warning-primary);}
 
-	.lg-tide-font-blue   {color: var(--tide-blue-on-surface);}
-	.lg-tide-font-green  {color: var(--tide-green-on-surface);}
-	.lg-tide-font-lime   {color: var(--tide-lime-on-surface);}
-	.lg-tide-font-orange {color: var(--tide-orange-on-surface);}
-	.lg-tide-font-purple {color: var(--tide-purple-on-surface);}
-	.lg-tide-font-red    {color: var(--tide-red-on-surface);}
-	.lg-tide-font-salmon {color: var(--tide-salmon-on-surface);}
-	.lg-tide-font-teal   {color: var(--tide-teal-on-surface);}
-	.lg-tide-font-yellow {color: var(--tide-yellow-on-surface);}
-
-	/* Badge icon colors only */
-	.lg-tide-font-primary-blue   {color: var(--tide-blue-primary);}
-	.lg-tide-font-primary-green  {color: var(--tide-green-primary);}
-	.lg-tide-font-primary-lime   {color: var(--tide-lime-primary);}
-	.lg-tide-font-primary-orange {color: var(--tide-orange-primary);}
-	.lg-tide-font-primary-purple {color: var(--tide-purple-primary);}
-	.lg-tide-font-primary-red    {color: var(--tide-red-primary);}
-	.lg-tide-font-primary-salmon {color: var(--tide-salmon-primary);}
-	.lg-tide-font-primary-teal   {color: var(--tide-teal-primary);}
-	.lg-tide-font-primary-yellow {color: var(--tide-yellow-primary);}
-
 	/* Font Size */
 	.lg-tide-font-10 {font-size: var(--tide-font-10);}
 	.lg-tide-font-12 {font-size: var(--tide-font-12);}
@@ -1866,16 +1743,6 @@
 	.xl-tide-border-success {border-color: var(--tide-success-border);}
 	.xl-tide-border-warning {border-color: var(--tide-warning-border);}
 
-	.xl-tide-border-blue   {border-color: var(--tide-blue-border);}
-	.xl-tide-border-green  {border-color: var(--tide-green-border);}
-	.xl-tide-border-lime   {border-color: var(--tide-lime-border);}
-	.xl-tide-border-orange {border-color: var(--tide-orange-border);}
-	.xl-tide-border-purple {border-color: var(--tide-purple-border);}
-	.xl-tide-border-red    {border-color: var(--tide-red-border);}
-	.xl-tide-border-salmon {border-color: var(--tide-salmon-border);}
-	.xl-tide-border-teal   {border-color: var(--tide-teal-border);}
-	.xl-tide-border-yellow {border-color: var(--tide-yellow-border);}
-
 	/* Border Width */
 	.xl-tide-border-1,
 	.xl-tide-border-2,
@@ -2015,16 +1882,6 @@
 	.xl-tide-bg-surface-success {background-color: var(--tide-success-surface);}
 	.xl-tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
 
-	.xl-tide-bg-surface-blue   {background-color: var(--tide-blue-surface);}
-	.xl-tide-bg-surface-green  {background-color: var(--tide-green-surface);}
-	.xl-tide-bg-surface-lime   {background-color: var(--tide-lime-surface);}
-	.xl-tide-bg-surface-orange {background-color: var(--tide-orange-surface);}
-	.xl-tide-bg-surface-purple {background-color: var(--tide-purple-surface);}
-	.xl-tide-bg-surface-red    {background-color: var(--tide-red-surface);}
-	.xl-tide-bg-surface-salmon {background-color: var(--tide-salmon-surface);}
-	.xl-tide-bg-surface-teal   {background-color: var(--tide-teal-surface);}
-	.xl-tide-bg-surface-yellow {background-color: var(--tide-yellow-surface);}
-
 	.xl-tide-transparent-100 {background-color: var(--tide-transparent-100);}
 	.xl-tide-transparent-200 {background-color: var(--tide-transparent-200);}
 	.xl-tide-transparent-300 {background-color: var(--tide-transparent-300);}
@@ -2065,27 +1922,6 @@
 	.xl-tide-font-success {color: var(--tide-success-primary);}
 	.xl-tide-font-warning {color: var(--tide-warning-primary);}
 
-	.xl-tide-font-blue   {color: var(--tide-blue-on-surface);}
-	.xl-tide-font-green  {color: var(--tide-green-on-surface);}
-	.xl-tide-font-lime   {color: var(--tide-lime-on-surface);}
-	.xl-tide-font-orange {color: var(--tide-orange-on-surface);}
-	.xl-tide-font-purple {color: var(--tide-purple-on-surface);}
-	.xl-tide-font-red    {color: var(--tide-red-on-surface);}
-	.xl-tide-font-salmon {color: var(--tide-salmon-on-surface);}
-	.xl-tide-font-teal   {color: var(--tide-teal-on-surface);}
-	.xl-tide-font-yellow {color: var(--tide-yellow-on-surface);}
-
-	/* Badge icon colors only */
-	.xl-tide-font-primary-blue   {color: var(--tide-blue-primary);}
-	.xl-tide-font-primary-green  {color: var(--tide-green-primary);}
-	.xl-tide-font-primary-lime   {color: var(--tide-lime-primary);}
-	.xl-tide-font-primary-orange {color: var(--tide-orange-primary);}
-	.xl-tide-font-primary-purple {color: var(--tide-purple-primary);}
-	.xl-tide-font-primary-red    {color: var(--tide-red-primary);}
-	.xl-tide-font-primary-salmon {color: var(--tide-salmon-primary);}
-	.xl-tide-font-primary-teal   {color: var(--tide-teal-primary);}
-	.xl-tide-font-primary-yellow {color: var(--tide-yellow-primary);}
-
 	/* Font Size */
 	.xl-tide-font-10 {font-size: var(--tide-font-10);}
 	.xl-tide-font-12 {font-size: var(--tide-font-12);}

package/dist/index.d.ts

@@ -171,15 +171,6 @@ declare const CSS_2: {
                 readonly INFO: "tide-bg-surface-info";
                 readonly SUCCESS: "tide-bg-surface-success";
                 readonly WARNING: "tide-bg-surface-warning";
-                readonly BLUE: "tide-bg-surface-blue";
-                readonly GREEN: "tide-bg-surface-green";
-                readonly LIME: "tide-bg-surface-lime";
-                readonly ORANGE: "tide-bg-surface-orange";
-                readonly PURPLE: "tide-bg-surface-purple";
-                readonly RED: "tide-bg-surface-red";
-                readonly SALMON: "tide-bg-surface-salmon";
-                readonly TEAL: "tide-bg-surface-teal";
-                readonly YELLOW: "tide-bg-surface-yellow";
             };
         };
         readonly INITIAL: "tide-bg-initial";
@@ -209,15 +200,6 @@ declare const CSS_2: {
                 readonly INFO: "tide-border-info";
                 readonly SUCCESS: "tide-border-success";
                 readonly WARNING: "tide-border-warning";
-                readonly BLUE: "tide-border-blue";
-                readonly GREEN: "tide-border-green";
-                readonly LIME: "tide-border-lime";
-                readonly ORANGE: "tide-border-orange";
-                readonly PURPLE: "tide-border-purple";
-                readonly RED: "tide-border-red";
-                readonly SALMON: "tide-border-salmon";
-                readonly TEAL: "tide-border-teal";
-                readonly YELLOW: "tide-border-yellow";
             };
             readonly INITIAL: "tide-border-color-initial";
             readonly DEFAULT: "tide-border";
@@ -326,26 +308,6 @@ declare const CSS_2: {
                 readonly INFO: "tide-font-info";
                 readonly SUCCESS: "tide-font-success";
                 readonly WARNING: "tide-font-warning";
-                readonly BLUE: "tide-font-blue";
-                readonly GREEN: "tide-font-green";
-                readonly LIME: "tide-font-lime";
-                readonly ORANGE: "tide-font-orange";
-                readonly PURPLE: "tide-font-purple";
-                readonly RED: "tide-font-red";
-                readonly SALMON: "tide-font-salmon";
-                readonly TEAL: "tide-font-teal";
-                readonly YELLOW: "tide-font-yellow";
-                readonly PRIMARY: {
-                    readonly BLUE: "tide-font-primary-blue";
-                    readonly GREEN: "tide-font-primary-green";
-                    readonly LIME: "tide-font-primary-lime";
-                    readonly ORANGE: "tide-font-primary-orange";
-                    readonly PURPLE: "tide-font-primary-purple";
-                    readonly RED: "tide-font-primary-red";
-                    readonly SALMON: "tide-font-primary-salmon";
-                    readonly TEAL: "tide-font-primary-teal";
-                    readonly YELLOW: "tide-font-primary-yellow";
-                };
             };
             readonly PRIMARY: "tide-font-on-primary";
             readonly SECONDARY: "tide-font-on-secondary";
@@ -996,6 +958,7 @@ export declare const REALM: {
     readonly EQUIPMENT: "equipment";
     readonly PWC: "pwc";
     readonly RV: "rv";
+    readonly RVT: "rvt";
     readonly SNOW: "snow";
     readonly TRUCK: "truck";
 };
@@ -1361,6 +1324,36 @@ isNewTab: boolean;
 priority: Priority;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
+/**
+ * Renders a button component for use in pagination purposes.
+ *
+ * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebuttonpagination--docs) for TideButtonPagination
+ */
+export declare const TideButtonPagination: DefineComponent<    {
+/** Indicates whether Pagination Button is associated with the displayed page */
+disabled?: boolean;
+/** HTML tag type */
+element?: ElementBroad;
+/** URL to open<br />(Link only) */
+href?: string;
+/** Button text */
+label: string | number;
+}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{
+/** Indicates whether Pagination Button is associated with the displayed page */
+disabled?: boolean;
+/** HTML tag type */
+element?: ElementBroad;
+/** URL to open<br />(Link only) */
+href?: string;
+/** Button text */
+label: string | number;
+}> & Readonly<{}>, {
+label: string | number;
+disabled: boolean;
+element: ElementBroad;
+href: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
 /**
  * Renders a button component for use to save items.
  *