tide-design-system 2.1.11 → 2.1.13

package/.storybook/main.ts

@@ -23,8 +23,8 @@ const config: StorybookConfig = {
     '../src/stories/TideAlert.stories.ts',
     '../src/stories/TideBackgroundImage.stories.ts',
     '../src/stories/TideBadge.stories.ts',
-    '../src/stories/TideBadgePremium.stories.ts',
     '../src/stories/TideBadgeTrustedPartner.stories.ts',
+    '../src/stories/TideBadgeVerifiedVehicle.stories.ts',
     '../src/stories/TideBreadCrumbs.stories.ts',
     '../src/stories/TideButton.stories.ts',
     '../src/stories/TideButtonIcon.stories.ts',

package/dist/IconVerified-000f615f.js

@@ -0,0 +1,20 @@
+import { openBlock as t, createElementBlock as o, createElementVNode as e } from "vue";
+const l = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, n = /* @__PURE__ */ e("path", {
+  d: "M7 8H17V16H7V8Z",
+  fill: "white"
+}, null, -1), c = /* @__PURE__ */ e("path", { d: "m8.6 22.5-1.9-3.2-3.6-.8.35-3.7L1 12l2.45-2.8-.35-3.7 3.6-.8 1.9-3.2L12 2.95l3.4-1.45 1.9 3.2 3.6.8-.35 3.7L23 12l-2.45 2.8.35 3.7-3.6.8-1.9 3.2-3.4-1.45-3.4 1.45Zm2.35-6.95L16.6 9.9l-1.4-1.45-4.25 4.25-2.15-2.1L7.4 12l3.55 3.55Z" }, null, -1), r = [
+  n,
+  c
+];
+function s(d, i) {
+  return t(), o("svg", l, r);
+}
+const h = { render: s };
+export {
+  h as default,
+  s as render
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvblZlcmlmaWVkLTAwMGY2MTVmLmpzIiwic291cmNlcyI6WyIuLi9zcmMvYXNzZXRzL3N2Zy9pY29ucy9JY29uVmVyaWZpZWQuc3ZnIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNyZWF0ZUVsZW1lbnRWTm9kZSBhcyBfY3JlYXRlRWxlbWVudFZOb2RlLCBvcGVuQmxvY2sgYXMgX29wZW5CbG9jaywgY3JlYXRlRWxlbWVudEJsb2NrIGFzIF9jcmVhdGVFbGVtZW50QmxvY2sgfSBmcm9tIFwidnVlXCJcblxuY29uc3QgX2hvaXN0ZWRfMSA9IHtcbiAgeG1sbnM6IFwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIixcbiAgdmlld0JveDogXCIwIDAgMjQgMjRcIlxufVxuY29uc3QgX2hvaXN0ZWRfMiA9IC8qI19fUFVSRV9fKi9fY3JlYXRlRWxlbWVudFZOb2RlKFwicGF0aFwiLCB7XG4gIGQ6IFwiTTcgOEgxN1YxNkg3VjhaXCIsXG4gIGZpbGw6IFwid2hpdGVcIlxufSwgbnVsbCwgLTEpXG5jb25zdCBfaG9pc3RlZF8zID0gLyojX19QVVJFX18qL19jcmVhdGVFbGVtZW50Vk5vZGUoXCJwYXRoXCIsIHsgZDogXCJtOC42IDIyLjUtMS45LTMuMi0zLjYtLjguMzUtMy43TDEgMTJsMi40NS0yLjgtLjM1LTMuNyAzLjYtLjggMS45LTMuMkwxMiAyLjk1bDMuNC0xLjQ1IDEuOSAzLjIgMy42LjgtLjM1IDMuN0wyMyAxMmwtMi40NSAyLjguMzUgMy43LTMuNi44LTEuOSAzLjItMy40LTEuNDUtMy40IDEuNDVabTIuMzUtNi45NUwxNi42IDkuOWwtMS40LTEuNDUtNC4yNSA0LjI1LTIuMTUtMi4xTDcuNCAxMmwzLjU1IDMuNTVaXCIgfSwgbnVsbCwgLTEpXG5jb25zdCBfaG9pc3RlZF80ID0gW1xuICBfaG9pc3RlZF8yLFxuICBfaG9pc3RlZF8zXG5dXG5cbmV4cG9ydCBmdW5jdGlvbiByZW5kZXIoX2N0eCwgX2NhY2hlKSB7XG4gIHJldHVybiAoX29wZW5CbG9jaygpLCBfY3JlYXRlRWxlbWVudEJsb2NrKFwic3ZnXCIsIF9ob2lzdGVkXzEsIF9ob2lzdGVkXzQpKVxufVxuZXhwb3J0IGRlZmF1bHQgeyByZW5kZXI6IHJlbmRlciB9Il0sIm5hbWVzIjpbIl9ob2lzdGVkXzEiLCJfaG9pc3RlZF8yIiwiX2NyZWF0ZUVsZW1lbnRWTm9kZSIsIl9ob2lzdGVkXzMiLCJfaG9pc3RlZF80IiwicmVuZGVyIiwiX2N0eCIsIl9jYWNoZSIsIl9vcGVuQmxvY2siLCJfY3JlYXRlRWxlbWVudEJsb2NrIiwiSWNvblZlcmlmaWVkIl0sIm1hcHBpbmdzIjoiO0FBRUEsTUFBTUEsSUFBYTtBQUFBLEVBQ2pCLE9BQU87QUFBQSxFQUNQLFNBQVM7QUFDWCxHQUNNQyxJQUEwQkMsZ0JBQUFBLEVBQW9CLFFBQVE7QUFBQSxFQUMxRCxHQUFHO0FBQUEsRUFDSCxNQUFNO0FBQ1IsR0FBRyxNQUFNLEVBQUUsR0FDTEMsSUFBMEJELGdCQUFBQSxFQUFvQixRQUFRLEVBQUUsR0FBRywyT0FBMk8sTUFBTSxFQUFFLEdBQzlTRSxJQUFhO0FBQUEsRUFDakJIO0FBQUEsRUFDQUU7QUFDRjtBQUVPLFNBQVNFLEVBQU9DLEdBQU1DLEdBQVE7QUFDbkMsU0FBUUMsRUFBWSxHQUFFQyxFQUFvQixPQUFPVCxHQUFZSSxDQUFVO0FBQ3pFO0FBQ0EsTUFBZU0sSUFBQSxFQUFFLFFBQVFMLEVBQU07In0=

package/dist/IconVerified-b71255f2.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n=e.createElementVNode("path",{d:"M7 8H17V16H7V8Z",fill:"white"},null,-1),l=e.createElementVNode("path",{d:"m8.6 22.5-1.9-3.2-3.6-.8.35-3.7L1 12l2.45-2.8-.35-3.7 3.6-.8 1.9-3.2L12 2.95l3.4-1.45 1.9 3.2 3.6.8-.35 3.7L23 12l-2.45 2.8.35 3.7-3.6.8-1.9 3.2-3.4-1.45-3.4 1.45Zm2.35-6.95L16.6 9.9l-1.4-1.45-4.25 4.25-2.15-2.1L7.4 12l3.55 3.55Z"},null,-1),r=[n,l];function t(d,s){return e.openBlock(),e.createElementBlock("svg",o,r)}const c={render:t};exports.default=c;exports.render=t;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvblZlcmlmaWVkLWI3MTI1NWYyLmNqcyIsInNvdXJjZXMiOlsiLi4vc3JjL2Fzc2V0cy9zdmcvaWNvbnMvSWNvblZlcmlmaWVkLnN2ZyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjcmVhdGVFbGVtZW50Vk5vZGUgYXMgX2NyZWF0ZUVsZW1lbnRWTm9kZSwgb3BlbkJsb2NrIGFzIF9vcGVuQmxvY2ssIGNyZWF0ZUVsZW1lbnRCbG9jayBhcyBfY3JlYXRlRWxlbWVudEJsb2NrIH0gZnJvbSBcInZ1ZVwiXG5cbmNvbnN0IF9ob2lzdGVkXzEgPSB7XG4gIHhtbG5zOiBcImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIsXG4gIHZpZXdCb3g6IFwiMCAwIDI0IDI0XCJcbn1cbmNvbnN0IF9ob2lzdGVkXzIgPSAvKiNfX1BVUkVfXyovX2NyZWF0ZUVsZW1lbnRWTm9kZShcInBhdGhcIiwge1xuICBkOiBcIk03IDhIMTdWMTZIN1Y4WlwiLFxuICBmaWxsOiBcIndoaXRlXCJcbn0sIG51bGwsIC0xKVxuY29uc3QgX2hvaXN0ZWRfMyA9IC8qI19fUFVSRV9fKi9fY3JlYXRlRWxlbWVudFZOb2RlKFwicGF0aFwiLCB7IGQ6IFwibTguNiAyMi41LTEuOS0zLjItMy42LS44LjM1LTMuN0wxIDEybDIuNDUtMi44LS4zNS0zLjcgMy42LS44IDEuOS0zLjJMMTIgMi45NWwzLjQtMS40NSAxLjkgMy4yIDMuNi44LS4zNSAzLjdMMjMgMTJsLTIuNDUgMi44LjM1IDMuNy0zLjYuOC0xLjkgMy4yLTMuNC0xLjQ1LTMuNCAxLjQ1Wm0yLjM1LTYuOTVMMTYuNiA5LjlsLTEuNC0xLjQ1LTQuMjUgNC4yNS0yLjE1LTIuMUw3LjQgMTJsMy41NSAzLjU1WlwiIH0sIG51bGwsIC0xKVxuY29uc3QgX2hvaXN0ZWRfNCA9IFtcbiAgX2hvaXN0ZWRfMixcbiAgX2hvaXN0ZWRfM1xuXVxuXG5leHBvcnQgZnVuY3Rpb24gcmVuZGVyKF9jdHgsIF9jYWNoZSkge1xuICByZXR1cm4gKF9vcGVuQmxvY2soKSwgX2NyZWF0ZUVsZW1lbnRCbG9jayhcInN2Z1wiLCBfaG9pc3RlZF8xLCBfaG9pc3RlZF80KSlcbn1cbmV4cG9ydCBkZWZhdWx0IHsgcmVuZGVyOiByZW5kZXIgfSJdLCJuYW1lcyI6WyJfaG9pc3RlZF8xIiwiX2hvaXN0ZWRfMiIsIl9jcmVhdGVFbGVtZW50Vk5vZGUiLCJfaG9pc3RlZF8zIiwiX2hvaXN0ZWRfNCIsInJlbmRlciIsIl9jdHgiLCJfY2FjaGUiLCJfb3BlbkJsb2NrIiwiX2NyZWF0ZUVsZW1lbnRCbG9jayIsIkljb25WZXJpZmllZCJdLCJtYXBwaW5ncyI6InVHQUVNQSxFQUFhLENBQ2pCLE1BQU8sNkJBQ1AsUUFBUyxXQUNYLEVBQ01DLEVBQTBCQyxFQUFtQixtQkFBQyxPQUFRLENBQzFELEVBQUcsa0JBQ0gsS0FBTSxPQUNSLEVBQUcsS0FBTSxFQUFFLEVBQ0xDLEVBQTBCRCxFQUFBQSxtQkFBb0IsT0FBUSxDQUFFLEVBQUcseU9BQTJPLEtBQU0sRUFBRSxFQUM5U0UsRUFBYSxDQUNqQkgsRUFDQUUsQ0FDRixFQUVPLFNBQVNFLEVBQU9DLEVBQU1DLEVBQVEsQ0FDbkMsT0FBUUMsRUFBQUEsVUFBWSxFQUFFQyxFQUFtQixtQkFBQyxNQUFPVCxFQUFZSSxDQUFVLENBQ3pFLENBQ0EsTUFBZU0sRUFBQSxDQUFFLE9BQVFMLENBQU0ifQ==

package/dist/css/dynamic-buttons.css

@@ -65,3 +65,282 @@ button.tide-button-quaternary:disabled,
 button.tide-button-floating:disabled {
   opacity: 0.32;
 }
+@media (min-width: 768px) {
+	/* Rest State */
+	.sm-tide-button-primary {
+	  background: var(--tide-primary);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	.sm-tide-button-secondary {
+	  background: var(--tide-surface);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-primary);
+	}
+
+	.sm-tide-button-tertiary {
+	  background: var(--tide-white);
+	  border: 1px solid var(--tide-border);
+	  color: var(--tide-secondary);
+	}
+
+	.sm-tide-button-quaternary {
+	  background: var(--tide-white);
+	  color: var(--tide-secondary);
+	}
+
+	.sm-tide-button-floating {
+	  background-color: var(--tide-transparent-100);
+	  color: var(--tide-secondary);
+	  box-shadow: var(--tide-shadow-bottom);
+	}
+
+	/* Hover State */
+	a.sm-tide-button-primary:hover,
+	button.sm-tide-button-primary:enabled:hover {
+	  border: 2px solid var(--tide-primary);
+	  background: var(--tide-white);
+	  color: var(--tide-primary);
+	}
+
+	a.sm-tide-button-secondary:hover,
+	button.sm-tide-button-secondary:enabled:hover {
+	  background: var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	a.sm-tide-button-tertiary:hover,
+	button.sm-tide-button-tertiary:enabled:hover {
+	  border: 1px solid var(--tide-border-high);
+	}
+
+	a.sm-tide-button-quaternary:hover,
+	button.sm-tide-button-quaternary:enabled:hover {
+	  background: var(--tide-surface-variant);
+	}
+
+	.sm-tide-button-floating:hover,
+	button.sm-tide-button-floating:enabled:hover {
+	  background-color: var(--tide-white);
+	}
+
+	/* Disabled State */
+	button.sm-tide-button-primary:disabled,
+	button.sm-tide-button-secondary:disabled,
+	button.sm-tide-button-tertiary:disabled,
+	button.sm-tide-button-quaternary:disabled,
+	button.sm-tide-button-floating:disabled {
+	  opacity: 0.32;
+	}
+}
+
+@media (min-width: 992px) {
+	/* Rest State */
+	.md-tide-button-primary {
+	  background: var(--tide-primary);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	.md-tide-button-secondary {
+	  background: var(--tide-surface);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-primary);
+	}
+
+	.md-tide-button-tertiary {
+	  background: var(--tide-white);
+	  border: 1px solid var(--tide-border);
+	  color: var(--tide-secondary);
+	}
+
+	.md-tide-button-quaternary {
+	  background: var(--tide-white);
+	  color: var(--tide-secondary);
+	}
+
+	.md-tide-button-floating {
+	  background-color: var(--tide-transparent-100);
+	  color: var(--tide-secondary);
+	  box-shadow: var(--tide-shadow-bottom);
+	}
+
+	/* Hover State */
+	a.md-tide-button-primary:hover,
+	button.md-tide-button-primary:enabled:hover {
+	  border: 2px solid var(--tide-primary);
+	  background: var(--tide-white);
+	  color: var(--tide-primary);
+	}
+
+	a.md-tide-button-secondary:hover,
+	button.md-tide-button-secondary:enabled:hover {
+	  background: var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	a.md-tide-button-tertiary:hover,
+	button.md-tide-button-tertiary:enabled:hover {
+	  border: 1px solid var(--tide-border-high);
+	}
+
+	a.md-tide-button-quaternary:hover,
+	button.md-tide-button-quaternary:enabled:hover {
+	  background: var(--tide-surface-variant);
+	}
+
+	.md-tide-button-floating:hover,
+	button.md-tide-button-floating:enabled:hover {
+	  background-color: var(--tide-white);
+	}
+
+	/* Disabled State */
+	button.md-tide-button-primary:disabled,
+	button.md-tide-button-secondary:disabled,
+	button.md-tide-button-tertiary:disabled,
+	button.md-tide-button-quaternary:disabled,
+	button.md-tide-button-floating:disabled {
+	  opacity: 0.32;
+	}
+}
+
+@media (min-width: 1232px) {
+	/* Rest State */
+	.lg-tide-button-primary {
+	  background: var(--tide-primary);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	.lg-tide-button-secondary {
+	  background: var(--tide-surface);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-primary);
+	}
+
+	.lg-tide-button-tertiary {
+	  background: var(--tide-white);
+	  border: 1px solid var(--tide-border);
+	  color: var(--tide-secondary);
+	}
+
+	.lg-tide-button-quaternary {
+	  background: var(--tide-white);
+	  color: var(--tide-secondary);
+	}
+
+	.lg-tide-button-floating {
+	  background-color: var(--tide-transparent-100);
+	  color: var(--tide-secondary);
+	  box-shadow: var(--tide-shadow-bottom);
+	}
+
+	/* Hover State */
+	a.lg-tide-button-primary:hover,
+	button.lg-tide-button-primary:enabled:hover {
+	  border: 2px solid var(--tide-primary);
+	  background: var(--tide-white);
+	  color: var(--tide-primary);
+	}
+
+	a.lg-tide-button-secondary:hover,
+	button.lg-tide-button-secondary:enabled:hover {
+	  background: var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	a.lg-tide-button-tertiary:hover,
+	button.lg-tide-button-tertiary:enabled:hover {
+	  border: 1px solid var(--tide-border-high);
+	}
+
+	a.lg-tide-button-quaternary:hover,
+	button.lg-tide-button-quaternary:enabled:hover {
+	  background: var(--tide-surface-variant);
+	}
+
+	.lg-tide-button-floating:hover,
+	button.lg-tide-button-floating:enabled:hover {
+	  background-color: var(--tide-white);
+	}
+
+	/* Disabled State */
+	button.lg-tide-button-primary:disabled,
+	button.lg-tide-button-secondary:disabled,
+	button.lg-tide-button-tertiary:disabled,
+	button.lg-tide-button-quaternary:disabled,
+	button.lg-tide-button-floating:disabled {
+	  opacity: 0.32;
+	}
+}
+
+@media (min-width: 1920px) {
+	/* Rest State */
+	.xl-tide-button-primary {
+	  background: var(--tide-primary);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	.xl-tide-button-secondary {
+	  background: var(--tide-surface);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-primary);
+	}
+
+	.xl-tide-button-tertiary {
+	  background: var(--tide-white);
+	  border: 1px solid var(--tide-border);
+	  color: var(--tide-secondary);
+	}
+
+	.xl-tide-button-quaternary {
+	  background: var(--tide-white);
+	  color: var(--tide-secondary);
+	}
+
+	.xl-tide-button-floating {
+	  background-color: var(--tide-transparent-100);
+	  color: var(--tide-secondary);
+	  box-shadow: var(--tide-shadow-bottom);
+	}
+
+	/* Hover State */
+	a.xl-tide-button-primary:hover,
+	button.xl-tide-button-primary:enabled:hover {
+	  border: 2px solid var(--tide-primary);
+	  background: var(--tide-white);
+	  color: var(--tide-primary);
+	}
+
+	a.xl-tide-button-secondary:hover,
+	button.xl-tide-button-secondary:enabled:hover {
+	  background: var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	a.xl-tide-button-tertiary:hover,
+	button.xl-tide-button-tertiary:enabled:hover {
+	  border: 1px solid var(--tide-border-high);
+	}
+
+	a.xl-tide-button-quaternary:hover,
+	button.xl-tide-button-quaternary:enabled:hover {
+	  background: var(--tide-surface-variant);
+	}
+
+	.xl-tide-button-floating:hover,
+	button.xl-tide-button-floating:enabled:hover {
+	  background-color: var(--tide-white);
+	}
+
+	/* Disabled State */
+	button.xl-tide-button-primary:disabled,
+	button.xl-tide-button-secondary:disabled,
+	button.xl-tide-button-tertiary:disabled,
+	button.xl-tide-button-quaternary:disabled,
+	button.xl-tide-button-floating:disabled {
+	  opacity: 0.32;
+	}
+}

package/dist/css/dynamic-utilities.css

@@ -26,3 +26,126 @@
 .tide-font-on-surface-brand           {color: var(--tide-on-surface-brand);}
 .tide-font-on-surface-inverse         {color: var(--tide-on-surface-inverse);}
 .tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
+@media (min-width: 768px) {
+	/* Background */
+	.sm-tide-bg-primary   {background: var(--tide-primary);}
+	.sm-tide-bg-secondary {background: var(--tide-secondary);}
+
+	.sm-tide-bg-surface                {background: var(--tide-surface);}
+	.sm-tide-bg-surface-variant        {background: var(--tide-surface-variant);}
+	.sm-tide-bg-surface-brand          {background: var(--tide-surface-brand);}
+	.sm-tide-bg-surface-accent         {background: var(--tide-surface-accent);}
+	.sm-tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
+	.sm-tide-bg-surface-floating       {background: var(--tide-surface-floating);}
+
+	/* Border */
+	.sm-tide-border-primary   {border-color: var(--tide-primary);}
+
+	.sm-tide-border          {border-color: var(--tide-border);}
+	.sm-tide-border-low      {border-color: var(--tide-border-low);}
+	.sm-tide-border-high     {border-color: var(--tide-border-high);}
+	.sm-tide-border-floating {border-color: var(--tide-border-floating);}
+
+	/* Foreground */
+	.sm-tide-font-on-primary   {color: var(--tide-on-primary);}
+	.sm-tide-font-on-secondary {color: var(--tide-on-secondary);}
+
+	.sm-tide-font-on-surface                 {color: var(--tide-on-surface);}
+	.sm-tide-font-on-surface-variant         {color: var(--tide-on-surface-variant);}
+	.sm-tide-font-on-surface-brand           {color: var(--tide-on-surface-brand);}
+	.sm-tide-font-on-surface-inverse         {color: var(--tide-on-surface-inverse);}
+	.sm-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
+}
+
+@media (min-width: 992px) {
+	/* Background */
+	.md-tide-bg-primary   {background: var(--tide-primary);}
+	.md-tide-bg-secondary {background: var(--tide-secondary);}
+
+	.md-tide-bg-surface                {background: var(--tide-surface);}
+	.md-tide-bg-surface-variant        {background: var(--tide-surface-variant);}
+	.md-tide-bg-surface-brand          {background: var(--tide-surface-brand);}
+	.md-tide-bg-surface-accent         {background: var(--tide-surface-accent);}
+	.md-tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
+	.md-tide-bg-surface-floating       {background: var(--tide-surface-floating);}
+
+	/* Border */
+	.md-tide-border-primary   {border-color: var(--tide-primary);}
+
+	.md-tide-border          {border-color: var(--tide-border);}
+	.md-tide-border-low      {border-color: var(--tide-border-low);}
+	.md-tide-border-high     {border-color: var(--tide-border-high);}
+	.md-tide-border-floating {border-color: var(--tide-border-floating);}
+
+	/* Foreground */
+	.md-tide-font-on-primary   {color: var(--tide-on-primary);}
+	.md-tide-font-on-secondary {color: var(--tide-on-secondary);}
+
+	.md-tide-font-on-surface                 {color: var(--tide-on-surface);}
+	.md-tide-font-on-surface-variant         {color: var(--tide-on-surface-variant);}
+	.md-tide-font-on-surface-brand           {color: var(--tide-on-surface-brand);}
+	.md-tide-font-on-surface-inverse         {color: var(--tide-on-surface-inverse);}
+	.md-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
+}
+
+@media (min-width: 1232px) {
+	/* Background */
+	.lg-tide-bg-primary   {background: var(--tide-primary);}
+	.lg-tide-bg-secondary {background: var(--tide-secondary);}
+
+	.lg-tide-bg-surface                {background: var(--tide-surface);}
+	.lg-tide-bg-surface-variant        {background: var(--tide-surface-variant);}
+	.lg-tide-bg-surface-brand          {background: var(--tide-surface-brand);}
+	.lg-tide-bg-surface-accent         {background: var(--tide-surface-accent);}
+	.lg-tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
+	.lg-tide-bg-surface-floating       {background: var(--tide-surface-floating);}
+
+	/* Border */
+	.lg-tide-border-primary   {border-color: var(--tide-primary);}
+
+	.lg-tide-border          {border-color: var(--tide-border);}
+	.lg-tide-border-low      {border-color: var(--tide-border-low);}
+	.lg-tide-border-high     {border-color: var(--tide-border-high);}
+	.lg-tide-border-floating {border-color: var(--tide-border-floating);}
+
+	/* Foreground */
+	.lg-tide-font-on-primary   {color: var(--tide-on-primary);}
+	.lg-tide-font-on-secondary {color: var(--tide-on-secondary);}
+
+	.lg-tide-font-on-surface                 {color: var(--tide-on-surface);}
+	.lg-tide-font-on-surface-variant         {color: var(--tide-on-surface-variant);}
+	.lg-tide-font-on-surface-brand           {color: var(--tide-on-surface-brand);}
+	.lg-tide-font-on-surface-inverse         {color: var(--tide-on-surface-inverse);}
+	.lg-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
+}
+
+@media (min-width: 1920px) {
+	/* Background */
+	.xl-tide-bg-primary   {background: var(--tide-primary);}
+	.xl-tide-bg-secondary {background: var(--tide-secondary);}
+
+	.xl-tide-bg-surface                {background: var(--tide-surface);}
+	.xl-tide-bg-surface-variant        {background: var(--tide-surface-variant);}
+	.xl-tide-bg-surface-brand          {background: var(--tide-surface-brand);}
+	.xl-tide-bg-surface-accent         {background: var(--tide-surface-accent);}
+	.xl-tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
+	.xl-tide-bg-surface-floating       {background: var(--tide-surface-floating);}
+
+	/* Border */
+	.xl-tide-border-primary   {border-color: var(--tide-primary);}
+
+	.xl-tide-border          {border-color: var(--tide-border);}
+	.xl-tide-border-low      {border-color: var(--tide-border-low);}
+	.xl-tide-border-high     {border-color: var(--tide-border-high);}
+	.xl-tide-border-floating {border-color: var(--tide-border-floating);}
+
+	/* Foreground */
+	.xl-tide-font-on-primary   {color: var(--tide-on-primary);}
+	.xl-tide-font-on-secondary {color: var(--tide-on-secondary);}
+
+	.xl-tide-font-on-surface                 {color: var(--tide-on-surface);}
+	.xl-tide-font-on-surface-variant         {color: var(--tide-on-surface-variant);}
+	.xl-tide-font-on-surface-brand           {color: var(--tide-on-surface-brand);}
+	.xl-tide-font-on-surface-inverse         {color: var(--tide-on-surface-inverse);}
+	.xl-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
+}

package/dist/css/main.css

@@ -2,6 +2,10 @@
 @import './reset.css';
 @import './variables.css';
 @import './utilities.css';
+@import './utilities-sm.css';
+@import './utilities-md.css';
+@import './utilities-lg.css';
+@import './utilities-xl.css';
 @import './dynamic-buttons.css';
 @import './dynamic-utilities.css';
 @import './grid-layout.css';